/* Sistema visivo: rams (Brand book FYM 23.06). I numeri sono quelli misurati lì, non stimati. */

@font-face { font-family: "Red Hat Display"; font-weight: 800; font-style: normal; font-display: swap; src: url("/font/redhat-800.woff2") format("woff2"); }
@font-face { font-family: "Red Hat Display"; font-weight: 700; font-style: normal; font-display: swap; src: url("/font/redhat-700.woff2") format("woff2"); }
/* PROVA del 2026-10-21 (Samuele: «titoli con forza d'asta aumentata»): la versione variabile, solo per h1 e h2, che passano a 900 e 800.
   È il TTF variabile di Google Fonts (OFL), 96 KB: se la prova regge, si ricava un woff2 statico a 900 e uno a 800 più leggeri. */
@font-face { font-family: "Red Hat Display Titoli"; font-weight: 300 900; font-style: normal; font-display: swap; src: url("/font/redhat-variabile.woff2") format("woff2"); } /* woff2 ridotto all'alfabeto latino: 31 KB invece del TTF da 98 (48 compresso), 2026-10-21 */
@font-face { font-family: "Plus Jakarta Sans"; font-weight: 400; font-style: normal; font-display: swap; src: url("/font/jakarta-400.woff2") format("woff2"); }
@font-face { font-family: "Plus Jakarta Sans"; font-weight: 600; font-style: normal; font-display: swap; src: url("/font/jakarta-600.woff2") format("woff2"); }
@font-face { font-family: "Fraunces"; font-weight: 400; font-style: italic; font-display: swap; src: url("/font/fraunces-italic.woff2") format("woff2"); }

:root {
  /* colori: un token, un mestiere */
  --fondo: #f6fbfc;            /* Soft */
  --fondo-alt: #eceef1;        /* Navy all'8% */
  --filetto: #cbd0d8;          /* Navy al 22%: separatori da 1px, mai fondi */
  --inchiostro: #112b4d;       /* Navy: tutto il testo che si legge */
  --inchiostro-tenue: #4a5f79; /* etichette, note: 5,18:1 nel caso peggiore */
  --azione: #015174;           /* Blu FYM: bottone primario, link */
  --accento: #f5bc47;          /* Dandelion: una evidenza per schermata, mai testo bianco sopra */
  --superficie: #a3c0d2;       /* Sky: riempimenti, mai testo */
  --linea-sport: #28a745;      /* il verde di Sport Coaching Strategico, dai loghi di Gian (Samuele, 2026-10-19): solo per il segno della linea Sport degli Special Lab, mai testo (3,13:1 sul bianco, 2,70:1 sul fondo alternato). Un testo verde sul bianco usa il Forest #196031 */
  --linea-innovation: #30bef2; /* il vecchio azzurro FYM, fuori dal brand book 23.06: solo per il segno della linea Innovation degli Special Lab, mai testo (spostato qui dalla pagina il 2026-09-28) */
  --no: #9f1c4c;               /* Uniberry, il secondario della Scuola: le croci che segnalano cose che non ci sono (Samuele, 2026-09-15); 7,33:1 su Soft */
  --scuro: #112b4d;            /* fondo delle fasce scure: sopra ci va il logotipo _soft */
  --su-scuro: #f6fbfc;
  --su-scuro-tenue: #a3c0d2;

  /* caratteri e scala (rams § 3) */
  --display: "Red Hat Display", "Plus Jakarta Sans", system-ui, sans-serif;
  --corpo: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --special: "Fraunces", Georgia, serif;
  /* la scala aurea (rams § 3; Samuele, 2026-09-15: provata sulle pagine dei corsi, poi «portala su tutto il sito»):
     ogni gradino è il precedente per √1,618, cioè 17 · 21,6 · 27,5 · 44,5 · 72. Il corpo resta 17; sparisce la via di mezzo
     dei 21 per i paragrafi lunghi, che fa il pattern .apertura. Su telefono: 17 · 21,6 · 24 · 34 · 44. */
  --t-1: clamp(2.75rem, 5.6vw, 4.5rem);
  --t-2: clamp(2.125rem, 3.5vw, 2.78rem);
  --t-grande: clamp(1.5rem, 2.15vw, 1.72rem);
  --t-inter: 1.35rem;
  --t-corpo: 1.0625rem;
  --t-etichetta: 1rem;

  /* spazi: multipli di 4 */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-6: 24px; --s-8: 32px; --s-12: 48px; --s-16: 64px; --s-24: 96px; --s-40: 160px;
  --fascia: var(--s-24);
  --misura: 34rem;   /* 68 caratteri circa */
  --larghezza: 1120px;
  --pendenza: 1.152; /* 49°, misurata sui tracciati del logotipo */
}
@media (min-width: 768px) { :root { --fascia: var(--s-40); } }

*, *::before, *::after { box-sizing: border-box; }
html { scroll-padding-top: 96px; -webkit-text-size-adjust: 100%; } /* la testata fissa è alta 80px (Base.astro): un'ancora deve atterrare sotto, non dietro */
/* un clic che porta a un'ancora della stessa pagina la fa scorrere, non saltare: chi clicca deve vedere dove sta andando
   (Samuele, 2026-10-03). Fermo per chi ha chiesto meno movimento. */
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
html, body { overflow-x: clip; } /* rete di sicurezza: niente scorrimento laterale da telefono qualunque cosa sporga (Samuele, 2026-09-16, su iPhone; con Chrome e WebKit non riprodotto). «clip» e non «hidden», così gli sticky continuano a funzionare */
body { margin: 0; background: var(--fondo); color: var(--inchiostro); font-family: var(--corpo); font-size: var(--t-corpo); line-height: 1.6; }
button, input, select, textarea { font: inherit; color: inherit; }
img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: var(--azione); text-decoration-thickness: 1px; text-underline-offset: 3px; }
h1, h2, h3 { font-family: var(--display); margin: 0; text-wrap: balance; letter-spacing: -0.01em; }
h1 { font-family: "Red Hat Display Titoli", var(--display); font-size: var(--t-1); font-weight: 900; line-height: 1.02; letter-spacing: -0.02em; }
h2 { font-family: "Red Hat Display Titoli", var(--display); font-size: var(--t-2); font-weight: 800; line-height: 1.12; }
h3 { font-family: var(--corpo); font-size: var(--t-inter); font-weight: 600; line-height: 1.35; }
@media (max-width: 399px) { h1, h2 { overflow-wrap: anywhere; } } /* con i titoli a 34 e 44 px su 272 px di colonna una parola lunga («accompagnamento») faceva scorrere la pagina di lato: la rete, non la regola (i titoli si scrivono corti) */
p { margin: 0; }
p + p, .prosa > * + * { margin-top: var(--s-4); }
.prosa > * + table, .prosa > table + * { margin-top: var(--s-6); } /* una tabella dentro un articolo si stacca dal testo più di un paragrafo dall'altro (2026-10-01, prove/spaziature.mjs) */
.prosa { max-width: var(--misura); }
/* la nota di servizio che sta sotto un gruppo di schede, a tutta la larghezza del contenitore e non nella colonna stretta
   del testo (Samuele, 2026-09-23). È un'eccezione dichiarata alla misura delle 68 battute di rams § 3, e vale per le note
   corte: una riga lunga ha bisogno di più interlinea, o l'occhio perde il capo della riga dopo. Non si usa per i paragrafi
   che si leggono uno dietro l'altro, che restano dentro .prosa. */
.nota-sotto { max-width: none; line-height: 1.75; }
.grande { font-size: var(--t-grande); line-height: 1.4; }
.tenue { color: var(--inchiostro-tenue); }
.etichetta { font-size: var(--t-etichetta); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--inchiostro-tenue); }
.special { font-family: var(--special); font-style: italic; font-size: var(--t-grande); line-height: 1.4; }
.num { font-variant-numeric: tabular-nums; }
/* una parola del titolo in risalto: Blu FYM, 7,43:1 sul fondo alternato. Mai Dandelion, che come testo sta a 1,48:1 e non
   si legge, e nessuna dimensione lo salva (rams § 2). Una sola parola per titolo. */
.risalto { color: var(--azione); }
ul, ol { margin: 0; padding-left: 1.25em; }
/* lo spazio fra le voci solo negli elenchi di testo: nelle griglie spostava di 8px tutte le schede tranne la prima */
ul:not([class]) li + li, ol:not([class]) li + li, .prosa li + li, .fisa li + li { margin-top: var(--s-2); }
hr { border: 0; border-top: 1px solid var(--filetto); margin: 0; }

/* contenitore e fasce */
.cont { width: min(100% - 2 * var(--s-6), var(--larghezza)); margin-inline: auto; }
.fascia { padding-block: var(--fascia); }
.fascia--alt { background: var(--fondo-alt); }
.fascia--scura { background: var(--scuro); color: var(--su-scuro); }
.fascia--scura .tenue, .fascia--scura .etichetta { color: var(--su-scuro-tenue); }
.fascia--scura a { color: var(--su-scuro); }
.fascia--scura h1, .fascia--scura h2 { color: var(--su-scuro); }

/* il taglio a 49°: un gradino, non un bordo inclinato su tutta la larghezza */
.taglio { --salita: 48px; clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--salita)), calc(50% + var(--salita) / var(--pendenza)) calc(100% - var(--salita)), 50% 100%, 0 100%); padding-bottom: calc(var(--fascia) + var(--salita)); } /* in salita da sinistra a destra: la discesa comunicava decrescita (Samuele, 2026-09-03) */
.taglio--grande { --salita: 160px; }

/* bottoni: due soli, uno primario per schermata */
.bottone { display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2); min-height: 48px; padding: 0 var(--s-6); border-radius: 5px; font-weight: 600; font-size: var(--t-corpo); text-decoration: none; border: 1px solid var(--azione); cursor: pointer; font-family: inherit; transition: transform 0.12s ease, box-shadow 0.12s ease; }
.bottone--pieno { background: var(--accento); color: var(--inchiostro); border-color: var(--accento); } /* Navy su Dandelion 8,24:1; uno solo per schermata (rams § 7) */
.bottone--fantasma { background: transparent; color: var(--azione); }
.fascia--scura .bottone--fantasma { color: var(--su-scuro); border-color: var(--su-scuro); }
.fascia--scura .bottone--pieno { color: var(--inchiostro); } /* «.fascia--scura a» vince su «.bottone--pieno»: senza questa riga il testo sul giallo diventa bianco, 1,7:1 */

/* il testo lungo, con la scala aurea (rams § 3): una frase di apertura grande in Navy, poi paragrafi corti in tenue, ognuno
   con una frase piena in Navy (lo strong). È quello che ha preso il posto del «muro di testo» (Samuele, 2026-09-15) */
.apertura > p:first-child { font-size: var(--t-grande); line-height: 1.4; color: var(--inchiostro); }
.apertura > p + p { font-size: var(--t-corpo); line-height: 1.6; color: var(--inchiostro); margin-top: var(--s-4); } /* Navy: è testo da leggere, il tenue resta a etichette e note (Samuele, 2026-10-06) */
.apertura strong { color: var(--inchiostro); font-weight: 600; }
/* le cifre di una pagina: numero grande in Blu FYM, riga piccola sotto */
.breve--cifre { gap: var(--s-6); }
@media (min-width: 600px) { .breve--cifre { grid-template-columns: repeat(3, 1fr); } }
.breve--cifre div { display: flex; flex-direction: column; }
.breve--cifre dd { order: 0; font-family: var(--display); font-weight: 800; font-size: var(--t-2); line-height: 1.05; color: var(--azione); white-space: nowrap; }
.breve--cifre dt { order: 1; margin-top: var(--s-2); color: var(--inchiostro-tenue); font-size: var(--t-etichetta); }
@media (min-width: 900px) { .breve--quattro { grid-template-columns: repeat(4, 1fr); } } /* la striscia sotto la testata di Percorso e Scuola avanzata: quattro cifre (Samuele, 2026-09-15: le cinque colonne di testo erano «poco equilibrate e anonime») */
.breve__coda { padding-bottom: var(--s-8); margin-top: calc(-1 * var(--s-2)); max-width: var(--misura); } /* quello che non è un numero, sotto le cifre */
/* la fascia dei numeri sotto la testata (home, Percorso, Scuola avanzata): Navy con le cifre in Dandelion, 8,24:1, la coppia che
   rams § 2 indica per l'accento sul fondo scuro (Samuele, 2026-09-15: «più in evidenza»; 2026-09-18: anche nel Percorso, «blu e gialla
   come nella home»). La cifra grande sopra, una riga corta che la spiega sotto; il resto del discorso nella coda. */
.numeri { border-bottom: 0; }
.breve--numeri div { display: flex; flex-direction: column; align-items: center; text-align: center; } /* numero e riga sotto centrati nella loro colonna, a tutte le larghezze (revisione UI del 2026-09-23) */
@media (min-width: 1024px) { .breve--numeri { grid-template-columns: repeat(4, 1fr); } }
.breve--numeri dd { order: 0; font-family: var(--display); font-weight: 800; font-size: clamp(1.75rem, 2.5vw, 2.25rem); line-height: 1.05; color: var(--accento); white-space: nowrap; } /* «oltre 1.000» su una riga sola, anche a 1280 */
.breve--numeri dt { order: 1; margin-top: var(--s-2); color: var(--su-scuro-tenue); font-size: var(--t-etichetta); }
.breve__su { font-size: var(--t-etichetta); font-weight: 600; color: var(--su-scuro-tenue); }
.breve--numeri a { display: inline-flex; align-items: center; min-height: 44px; margin-block: -12px; }
.fascia--scura .breve__coda { color: var(--su-scuro-tenue); }
/* PROVA della testata scura (2026-09-28): la striscia dei numeri della home è Navy anche lei, e sotto una testata Navy
   le due diventavano un blocco scuro solo, lungo mezza pagina. Quando la segue, passa al chiaro, con i numeri in Blu FYM
   (8,28:1): il giallo sul chiaro non si legge (1,65:1). */
.testa--scura + .numeri { background: var(--fondo-alt); color: var(--inchiostro); border-bottom: 1px solid var(--filetto); }
.testa--scura + .numeri .breve--numeri dd { color: var(--azione); }
.testa--scura + .numeri .breve--numeri dt, .testa--scura + .numeri .breve__su, .testa--scura + .numeri .breve__coda { color: var(--inchiostro-tenue); }
/* i bollini AICP ed EMCC al posto di una cifra (home, 2026-10-10): in una tessera bianca, perché i loghi hanno il fondo trasparente
   e sul Navy non si leggerebbero; tutte le cifre della striscia prendono la stessa altezza, così le righe sotto restano allineate */
.breve--con-bollini dd { display: flex; align-items: center; justify-content: center; }
@media (min-width: 1024px) { .breve--con-bollini dd { min-height: 68px; } } /* stessa altezza solo con le quattro colonne affiancate */
.breve__bollini { gap: var(--s-2); max-width: 100%; }
.breve__bollini img { flex: 0 1 140px; min-width: 0; width: 140px; height: 68px; object-fit: contain; background: #fff; border-radius: 8px; padding: 8px 10px; box-shadow: 0 0 0 1px var(--filetto); } /* EMCC in vettoriale, dal sito di EMCC Italia (emccitalia.it, 2026-10-10); AICP in vettoriale non è pubblicato: il PNG ritagliato sul logo, senza il margine vuoto dell'originale */
.numeri .breve__coda { margin-inline: auto; text-align: center; } /* sotto quattro cifre centrate la riga che non è un numero sta al centro anche lei (La Scuola, 2026-09-29) */

/* il pannello Navy dentro la pagina chiara, con l'angolo tagliato a 49° in alto a sinistra: «Ti riconosci?» e le edizioni nei corsi,
   il risultato del quiz. Uno per pagina: è il blocco scuro, ed è dove il lettore si cerca */
.pannello { background: var(--scuro); color: var(--su-scuro); padding: clamp(28px, 4vw, 44px) clamp(22px, 3vw, 40px) clamp(28px, 4vw, 40px); border-radius: 14px 14px 0 14px; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 48px), calc(100% - 41.7px) 100%, 0 100%); } /* il taglio a 49° in basso a destra, come quello delle fasce (.taglio); era in alto a sinistra (Samuele, 2026-10-01: «lo preferirei quasi in basso a dx come nelle intestazioni»; regola in fym-design § 5) */
.sporge { --w: 88px; flex: none; position: relative; isolation: isolate; display: block; width: var(--w); height: calc(var(--w) * 1.15); clip-path: inset(-50% -50% 0 -50%); }
.sporge::before { content: ""; position: absolute; left: 7%; right: 7%; top: calc(var(--w) * 0.39); bottom: 0; background: var(--azione); border-radius: calc(var(--w) * 0.1); clip-path: polygon(0 calc(var(--w) * 0.22), calc(var(--w) * 0.19) 0, 100% 0, 100% 100%, 0 100%); z-index: -1; }
.sporge img { display: block; width: 100%; height: auto; }
/* lo scontorno piccolo esce dalla mattonella, come in Chi siamo in miniatura: la mattonella dà la profondità, la testa sta sopra e i gomiti sporgono ai lati, il corpo si taglia sul bordo basso. Mai un tondo per le persone (Samuele, 2026-10-08). --w è la larghezza */
.pannello .etichetta { color: var(--su-scuro-tenue); }
.pannello h2, .pannello h3 { color: var(--su-scuro); }
.pannello a:not(.bottone) { color: var(--su-scuro); }
.pannello .bottone--fantasma { color: var(--su-scuro); border-color: var(--su-scuro); }
.pannello .bottone--pieno { color: var(--inchiostro); }
/* la citazione: l'unica voce in Fraunces della pagina, grande. Su Sky, come la domanda del piede: dove parla una persona
   c'è il Fraunces, e sotto lo Sky (Samuele, 2026-10-06: fra due filetti «si stacca poco dal resto»). Sopra solo Navy,
   7,47:1; l'angolo in basso a destra è il taglio a 49° dei pannelli */
.citazione { margin: 0; padding: clamp(28px, 4vw, 44px) clamp(22px, 3vw, 40px) clamp(36px, 4.5vw, 52px); background: var(--superficie); color: var(--inchiostro); border-radius: 14px 14px 0 14px; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 48px), calc(100% - 41.7px) 100%, 0 100%); }
.citazione cite { color: var(--inchiostro); }
.citazione p { font-family: var(--special); font-style: italic; font-size: var(--t-2); line-height: 1.25; max-width: 24ch; text-wrap: balance; }

/* la striscia «in breve» sotto la testata: la scheda di durata, formazione, pratica e posti, che prima stava nella
   testata scura a fianco del titolo; da quando a fianco c'è la foto (2026-09-15) sta qui, a colonne, fra due filetti */
.in-breve { border-bottom: 1px solid var(--filetto); }
.breve { margin: 0; display: grid; gap: var(--s-6) var(--s-8); padding-block: var(--s-8); }
@media (min-width: 600px) { .breve { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .breve { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); } }
.breve dt { margin-bottom: var(--s-1); } .breve dd { margin: 0; }
.bottone:active { transform: scale(0.98); }
/* La nota che compare sotto «Iscriviti ora» quando il link di pagamento non c'è ancora (componente Iscriviti.astro).
   «flex: 1 0 100%» perché il bottone spesso sta dentro un .bottoni in riga: così la nota va a capo da sola invece di
   stringere il bottone. Dentro una cella o un blocco normale quella riga non fa niente. */
.manca-link { flex: 1 0 100%; margin-top: var(--s-2); font-size: var(--t-etichetta); line-height: 1.5; max-width: 34rem; }
/* Le due regole di contesto stanno QUI e non negli stili della pagina: la nota la scrive il JavaScript, quindi non porta
   l'attributo con cui Astro confina gli stili di una pagina, e una regola scoped non la prenderebbe mai (2026-09-23). */
.ed__azione .manca-link { max-width: 100%; }
.formule__azione .manca-link { max-width: 15rem; white-space: normal; text-align: left; }
.fascia--scura .manca-link, .pannello .manca-link { color: var(--su-scuro); }
.fascia--scura .manca-link a, .pannello .manca-link a { color: var(--su-scuro); }
.bottoni { display: flex; flex-wrap: wrap; gap: var(--s-3); }
/* L'etichetta più lunga («Prenota una chiamata di orientamento») a tutta riga ci sta da 410 px in su: sotto si usa la breve
   del CTA (src/components/Cta.astro), che si legge su una riga anche a 320. */
.cta__breve { display: none; }
@media (max-width: 420px) { .cta--lunga .cta__lunga { display: none; } .cta--lunga .cta__breve { display: inline; } }
/* due azioni di testo affiancate: un contenitore flex con gap, non due link dentro un paragrafo separati da un punto
   (linus § 6.2: andando a capo resterebbero incollati, e il bersaglio da 44px di uno coprirebbe l'altro) */
.azioni { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-6); font-weight: 600; }
.azioni a { display: inline-flex; align-items: center; min-height: 44px; } /* fuori da un paragrafo la regola dei link nel testo non li prende, e restavano alti 27px (misurato il 2026-09-23) */

/* schede e filetti */
.scheda { background: #fff; padding: var(--s-6); border-radius: 12px; box-shadow: 0 0 0 1px var(--filetto), 0 2px 10px rgba(17, 43, 77, 0.06); } /* sul fondo chiaro il bianco da solo non si staccava: «il contrasto fra lo sfondo e le schede è troppo basso» (Samuele, 2026-09-15) */
.fascia--alt .scheda { background: var(--fondo); box-shadow: none; } /* sul fondo alternato lo stacco lo fa il fondo, come vuole rams § 4 */
.filetto { border-top: 1px solid var(--filetto); }

/* la coda di una scheda che è tutta un link (componente Vai.astro): un filetto separa il contenuto dall'azione, l'azione
   sta in fondo alla scheda anche quando i testi sopra sono di lunghezze diverse, e accanto c'è la freccia a linea di
   rams § 7-quater (mai il carattere «→», che cambia forma da un carattere tipografico all'altro e non si allinea).
   Il filetto è --filetto, non un bordo: separa, non chiude (rams § 4). Chiesto dalla revisione UI del 2026-09-23. */
.vai { margin-top: auto; padding-top: var(--s-4); border-top: 1px solid var(--filetto); display: flex; align-items: center; gap: var(--s-2); color: var(--azione); font-weight: 600; }
.vai--tra { justify-content: space-between; gap: var(--s-3); } /* quando a sinistra c'è un dato (la data della prossima edizione) e la freccia sta a destra */
.vai__freccia { display: inline-flex; flex: none; transition: transform 0.18s ease; }
.vai__freccia svg { display: block; }
@media (prefers-reduced-motion: reduce) { .vai__freccia { transition: none; } }

/* bottoni della stessa larghezza dentro lo stesso gruppo: affiancati si dividono la riga in parti uguali, e quando non
   ci stanno vanno a capo prendendo tutta la riga (linus § 6.2: meglio due righe che bottoni stretti) */
.bottoni--pari > * { flex: 1 1 300px; } /* 300 e non 260: sotto quella base l'etichetta più lunga andava a capo DENTRO il bottone invece di mandare la coppia a capo, che è quello che chiede linus § 6.2 */
/* Sotto i 640 px i bottoni di un gruppo si impilano, a tutta riga: affiancati, quando non ci stavano, il secondo andava a capo
   DENTRO il bottone («Scopri la Coaching Week» fino a 376 px, Samuele 2026-10-25). «flex: none» perché in colonna la base di
   .bottoni--pari diventerebbe un'altezza (300 px): per questo il blocco sta dopo quella regola. */
@media (max-width: 640px) {
  .bottoni { flex-direction: column; align-items: stretch; }
  .bottoni > *, .bottoni--pari > * { flex: none; }
  .bottoni > .bottone { width: 100%; }
}
/* e sotto i 420 px il margine interno si stringe: a tutta riga, con 24 px per lato, le etichette di 28-30 caratteri andavano ancora a capo */
@media (max-width: 420px) { .bottoni > .bottone { padding-inline: var(--s-4); } }
@media (max-width: 360px) { .bottoni > .bottone { padding-inline: var(--s-3); } }
.lista-filetti > * { padding-block: var(--s-4); border-top: 1px solid var(--filetto); }
.lista-filetti > *:last-child { border-bottom: 1px solid var(--filetto); }

/* griglie */
.griglia { display: grid; gap: var(--s-6); }
.griglia > * { min-width: 0; }
@media (min-width: 768px) { .griglia--2 { grid-template-columns: 1fr 1fr; } .griglia--3 { grid-template-columns: repeat(3, 1fr); } }
/* due colonne che vanno tenute distanti: una carica di testo accanto a una di numeri si legge come un blocco solo se lo
   spazio in mezzo è quello fra due voci di un elenco (revisione UI del 2026-09-23). 64px è un gradino della scala. */
@media (min-width: 768px) { .griglia--staccata { column-gap: var(--s-16); } }

/* micro-interazioni: hover solo dove c'è un mouse */
@media (hover: hover) and (pointer: fine) {
  .bottone:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(17, 43, 77, 0.18); }
  .scheda--viva:hover { transform: translateY(-4px); box-shadow: 0 12px 28px rgba(17, 43, 77, 0.14); }
  a:hover .vai__freccia { transform: translateX(4px); } /* la freccia scorre, come sulle schede dei corsi */
}
.scheda--viva { transition: transform 0.18s ease, box-shadow 0.18s ease; }
:focus-visible { outline: 3px solid var(--accento); outline-offset: 3px; box-shadow: 0 0 0 6px var(--azione); } /* giallo e blu insieme: il giallo da solo sui fondi chiari stava a 1,6:1, sotto il 3:1 di WCAG 1.4.11 (axe, rilievo di Valentino del 2026-10-06). Il blu fa da bordo esterno al giallo */
.bottone--pieno:focus-visible, .menu__evidenza:focus-visible { outline-color: var(--azione); } /* il giallo sul giallo non si vede */
.fascia--scura :focus-visible { outline-color: var(--accento); }

/* comparsa alla soglia */
.appare { opacity: 0; transform: translateY(12px); transition: opacity 0.5s ease, transform 0.5s ease; }
.appare.dentro { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .appare { opacity: 1; transform: none; transition: none; }
  .bottone, .scheda--viva { transition: none; }
  .scheda--viva:hover { transform: none; }
}
html:not(.js) .appare { opacity: 1; transform: none; }

/* i link dentro il testo restano inline: il bersaglio si allarga con il padding verticale, che su un
   elemento inline non muove le righe, e il margine negativo lo compensa (linus § 6.2) */
main p a, main dd a, main li a:not(.scheda, .art__link, .coach-scheda) { padding-block: 12px; margin-block: -12px; } /* i link dentro al testo prendono il bersaglio da 44 px; non i link che sono schede intere (le partenze in home, gli articoli, i coach): con questo margine una scheda in una lista usciva di 24 px dal suo posto e copriva la vicina (Samuele, 2026-09-16, da telefono). Il numero verde in un elenco (Percorso) resta dentro: ha una classe, ma è testo */

/* i link del piede sono bersagli: 44px di altezza senza spostare il testo. Sta qui e non nel
   layout perché il link della mail lo crea il JavaScript, e lo stile scoped di Astro non lo vedrebbe. */
/* il bersaglio si fa col padding e non con un'altezza fissa: con min-height:44px una voce che va a capo (l'elenco della
   Scuola nel piede, «Un percorso di coaching a tariffa promozionale») restava alta 44 mentre il testo ne occupava 54, e
   la riga seguente ci finiva sopra. Col padding il box cresce insieme al testo, e il margine negativo lo rimette a posto
   nel flusso (linus § 6.2). Trovato guardando il piede a 1440, il 2026-09-23: nessuna sonda cercava le sovrapposizioni. */
.piede a:not(.bottone) { display: inline-flex; align-items: center; padding-block: 10px; margin-block: -10px; }

.salta { position: absolute; left: -9999px; top: 0; background: var(--accento); color: var(--inchiostro); padding: var(--s-3) var(--s-4); z-index: 100; }
.salta:focus { left: var(--s-4); top: var(--s-4); }
/* le tabelle che scorrono di lato: il segnale lo mette Base.astro solo quando scorrono davvero */
.scorri-segnale { margin: var(--s-6) 0 0; font-size: var(--t-etichetta); color: var(--inchiostro-tenue); text-align: right; }
.scorri-segnale + [data-scorre] { margin-top: 8px !important; }
[data-scorre]:not([data-fine]) { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 48px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 48px), transparent); }
.visivo-nascosto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

  /* la prova (tre frasi, domanda del coach): il bordo giallo che gira a 49° col taglio (rams § 7-ter), in basso a destra dal 2026-10-01 */
  .prova { position: relative; background: #fff; border: 1px solid var(--filetto); border-radius: 14px 14px 0 14px; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 48px), calc(100% - 41.7px) 100%, 0 100%); /* l'angolo in basso a destra è il taglio a 49°, non un arrotondamento sotto al taglio (Samuele, 2026-09-03); era in alto a sinistra, spostato il 2026-10-01 come quello dei pannelli */ padding: clamp(24px, 3vw, 34px) clamp(22px, 3vw, 34px) clamp(34px, 3.4vw, 44px); overflow: hidden; }
  /* il bordo giallo: un tratto da 4px lungo il lato alto e la diagonale, con lo spigolo a punta; i punti interni sono la diagonale spostata di 4px perpendicolari (× 1,325 in orizzontale). Prima la diagonale era più sottile del lato alto e non si chiudeva (Samuele, 2026-09-15: «il profilo in giallo è fatto male») */
  .prova::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 54px; background: var(--accento); clip-path: polygon(calc(100% - 41.7px) 54px, 0 54px, 0 50px, calc(100% - 43.5px) 50px, 100% 0, 100% 6px); pointer-events: none; } /* dal 2026-10-01 corre lungo il lato basso e sale col taglio: lo stesso tratto di prima, girato di mezzo giro */
  .prova__dom { margin: 14px 0 20px; font-weight: 600; }
  .prova__scelte { display: grid; gap: 10px; }
  .scelta { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; min-height: 56px; padding: 12px 16px; border: 2px solid var(--filetto); border-radius: 12px; background: #fff; cursor: pointer; font-size: var(--t-corpo); transition: border-color 0.18s, background 0.18s, transform 0.12s; }
  .scelta__segno { flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--filetto); display: flex; align-items: center; justify-content: center; }
  .scelta__segno svg { width: 15px; height: 15px; opacity: 0; transition: opacity 0.18s; }
  .scelta:active { transform: scale(0.99); }
  @media (hover: hover) and (pointer: fine) { .scelta:not([data-esito]):hover { border-color: var(--superficie); } }
  .scelta[data-esito="giusta"] { border-color: var(--azione); background: #eaf3f8; }
  .scelta[data-esito="giusta"] .scelta__segno { border-color: var(--azione); background: var(--azione); color: #fff; }
  .scelta[data-esito="sbagliata"] { border-color: #8f1d2c; background: #fdecec; }
  .scelta[data-esito="sbagliata"] .scelta__segno { border-color: #8f1d2c; background: #8f1d2c; color: #fff; }
  .scelta[data-esito] .scelta__segno svg { opacity: 1; }
  .scelta[data-scelto="1"] { box-shadow: 0 0 0 3px var(--azione); }
  .scelta > span:not(.scelta__segno) { flex: 1; min-width: 0; } /* il testo si stringe e va a capo: senza, «la tua risposta» allargava le schede di 32 px oltre il riquadro a 375 */
  @media (max-width: 479px) { .scelta { flex-wrap: wrap; } .scelta[data-scelto="1"]::after { flex-basis: 100%; padding-left: 38px; } } /* sul telefono «la tua risposta» va sotto il testo, allineata */
  .scelta__nota { display: none; margin-top: 4px; font-size: var(--t-etichetta); font-weight: 600; color: var(--inchiostro-tenue); }
  .scelta[data-esito] .scelta__nota { display: block; }
  .scelta[data-esito="giusta"] .scelta__nota { color: var(--azione); }
  .scelta[data-esito="sbagliata"] .scelta__nota { color: #8f1d2c; }
  .scelta[data-esito="esclusa"] { color: var(--inchiostro-tenue); } /* la risposta sbagliata che non hai scelto: neutra, senza icona, così il rosso resta solo sulla tua */
  .scelta[data-esito="esclusa"] .scelta__segno svg { opacity: 0; }
  .scelta[data-scelto="1"][data-esito="sbagliata"] { box-shadow: 0 0 0 3px #8f1d2c; }
  .scelta[data-scelto="1"][data-esito="sbagliata"]::after { color: #8f1d2c; }
  .scelta[data-scelto="1"]::after { content: "la tua risposta"; margin-left: auto; font-size: var(--t-etichetta); font-weight: 700; color: var(--azione); white-space: nowrap; }
  .prova__esito { margin-top: 20px; padding: 18px 20px; border-radius: 12px; background: var(--scuro); color: var(--su-scuro); }
  .prova__esito b { color: var(--accento); }

/* i moduli (programma, candidatura): campi alti 48, radio e spunte disegnate con 44px di bersaglio e 22px visibili */
.modulo { display: grid; gap: var(--s-4); align-self: start; }
.modulo__campo label { display: block; font-weight: 600; margin-bottom: var(--s-1); }
.modulo input[type="text"], .modulo input[type="email"], .modulo input[type="tel"], .modulo input[type="url"], .modulo input[type="number"], .modulo select, .modulo textarea { width: 100%; min-height: 48px; padding: var(--s-3) var(--s-4); border: 1px solid var(--filetto); border-radius: 5px; background: #fff; font-size: var(--t-corpo); font-family: inherit; color: var(--inchiostro); }
.modulo select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23015174' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; background-size: 18px; padding-right: 44px; }
.modulo textarea { resize: vertical; line-height: 1.5; }
.modulo :is(input, select, textarea):focus { border-color: var(--azione); outline: none; box-shadow: 0 0 0 3px var(--accento); }
.modulo__fieldset { border: 0; padding: 0; margin: 0; }
.modulo__fieldset legend { font-weight: 600; margin-bottom: var(--s-2); }
.modulo__radio { display: inline-flex; align-items: center; min-height: 44px; margin-right: var(--s-4); font-weight: 400; cursor: pointer; }
.modulo__check { display: flex; align-items: flex-start; font-weight: 400; min-height: 44px; cursor: pointer; }
.modulo__check a { padding-block: 12px; margin-block: -12px; }
/* radio e spunta: il bersaglio è 44×44, il cerchio o il quadrato che si vede è 22 (linus § 6.2: si allarga senza spostare quello che si vede) */
.modulo input[type="radio"], .modulo input[type="checkbox"] { appearance: none; flex: none; width: 44px; height: 44px; margin: 0 0 0 -11px; padding: 0; background: none; border: 0; display: inline-grid; place-items: center; cursor: pointer; }
.modulo input[type="radio"]::before, .modulo input[type="checkbox"]::before { content: ""; width: 22px; height: 22px; border: 2px solid var(--filetto); background: #fff; box-sizing: border-box; transition: border-color 0.12s, background 0.12s; }
.modulo input[type="radio"]::before { border-radius: 50%; }
.modulo input[type="checkbox"]::before { border-radius: 4px; }
.modulo input[type="radio"]:checked::before { border: 7px solid var(--azione); }
.modulo input[type="checkbox"]:checked::before { border-color: var(--azione); background: var(--azione) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 16px no-repeat; }
.modulo input[type="radio"]:focus-visible::before, .modulo input[type="checkbox"]:focus-visible::before { box-shadow: 0 0 0 3px var(--accento); }
.modulo input[type="radio"]:focus, .modulo input[type="checkbox"]:focus { box-shadow: none; }
.modulo__trappola { position: absolute; left: -9999px; }
.modulo__errore { color: #8f1d2c; font-weight: 600; }

/* ---- Le porte agli Special Coaching Lab (SchedaSpecialLab.astro, 2026-09-28; la scheda della pagina del Coaching LAB tolta il 2026-10-01) ----
   Qui e non negli stili del componente, per la stessa ragione della nota di Iscriviti: le voci le scrive il
   JavaScript quando arrivano le date, e a quello che nasce a runtime Astro non mette l'attributo con cui confina
   gli stili. In `base.css` sono anche scaricate una volta per tutto il sito, invece che dentro ogni pagina. */
/* Globali e non scoped: le voci le crea il JavaScript, e a quello che nasce a runtime Astro non mette il suo
     data-astro-cid (trappola già pagata il 2026-09-28). */
  .slab__attesa { color: var(--inchiostro-tenue); }

  /* Le linee, nella sezione di /corsi/: la stessa fascia di colore in cima delle schede della pagina degli Special Lab,
   col nome della linea scritto sotto, perché il colore non sia l'unico segno */
.slab-linee { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-4); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 768px) { .slab-linee { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* quattro linee dal 2026-10-19: due per riga anche sul computer, perché a quattro in fila (268 px a 1280) la data della prossima andava a capo a metà, «12 / novembre» */
.slab-linea { display: flex; margin: 0; }
.slab-linea__link { position: relative; display: flex; flex-direction: column; flex: 1; overflow: hidden; padding-top: calc(var(--s-6) + 6px); color: inherit; text-decoration: none; } /* è una .scheda: fondo, bordo e ombra sono quelli del sito, e la regola dei 44px sui link negli elenchi la esclude */
.slab-linea__link::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 6px; }
.slab-linea--business .slab-linea__link::before { background: var(--azione); }
.slab-linea--personal .slab-linea__link::before { background: var(--no); }
.slab-linea--innovation .slab-linea__link::before { background: var(--linea-innovation); }
.slab-linea--sport .slab-linea__link::before { background: var(--linea-sport); }
.slab-linea__nome { font-family: var(--display); font-weight: 800; font-size: var(--t-2); line-height: 1.1; }
.slab-linea__testo { margin-top: var(--s-3); margin-bottom: var(--s-6); }
.slab-linea__vai { font-size: var(--t-etichetta); }
.slab-linea__quando { display: flex; align-items: center; gap: 6px; font-weight: 400; }
.slab-linea__ico { display: inline-flex; flex: none; }
.slab-linea__ico svg { display: block; width: 18px; height: 18px; }
.slab-linea__tema { display: block; margin-top: 2px; font-weight: 700; }

/* L'elenco del calendario: una riga per lab, come le edizioni nella pagina di un corso */
  .slab-righe > li { display: grid; gap: var(--s-2); }
  @media (min-width: 768px) { .slab-righe > li { grid-template-columns: 15rem 1fr; gap: var(--s-6); align-items: baseline; } }
  .slab-righe__data { color: var(--azione); text-transform: none; letter-spacing: 0; font-size: var(--t-etichetta); }
  .slab-righe__data::first-letter { text-transform: uppercase; }
  .slab-righe__tema { font-family: var(--display); font-weight: 800; font-size: var(--t-inter); line-height: 1.2; }
  .slab-righe__tema a { color: inherit; text-decoration: none; }
  @media (hover: hover) and (pointer: fine) { .slab-righe__tema a:hover { color: var(--azione); } }
  .slab-righe__meta { margin-top: var(--s-1); font-size: var(--t-etichetta); }

/* ---- Il pannello laterale della chiamata di orientamento (PannelloChiamata.astro, 2026-09-28) ----
   Qui e non nel componente perché lo crea il JavaScript (vedi la nota di Iscriviti). Stesso disegno del pannello
   d'iscrizione degli Special Lab: sulla scrivania un foglio che entra da destra, sul telefono a tutto schermo.
   Sta su document.body: un fixed dentro un antenato con transform non coprirebbe lo schermo. */
.foglio-lato { position: fixed; inset: 0; z-index: 90; }
.foglio-lato[hidden] { display: none; }
.foglio-lato__velo { position: absolute; inset: 0; background: rgba(17, 43, 77, 0.55); opacity: 0; transition: opacity 0.22s ease; }
.foglio-lato__foglio { position: absolute; inset: 0; display: flex; flex-direction: column; background: var(--fondo); color: var(--inchiostro); transform: translateY(24px); opacity: 0; transition: transform 0.22s ease, opacity 0.22s ease; }
@media (min-width: 768px) { .foglio-lato__foglio { left: auto; width: min(560px, 100%); transform: translateX(32px); box-shadow: -16px 0 48px rgba(17, 43, 77, 0.2); } }
.foglio-lato.aperto .foglio-lato__velo { opacity: 1; }
.foglio-lato.aperto .foglio-lato__foglio { transform: none; opacity: 1; }
.foglio-lato__sentinella { position: absolute; width: 1px; height: 1px; overflow: hidden; }
.foglio-lato__testa { flex: none; display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); min-height: 64px; padding: var(--s-2) var(--s-2) var(--s-2) var(--s-6); border-bottom: 1px solid var(--filetto); }
.foglio-lato__testa .etichetta { color: var(--azione); }
.foglio-lato__chiudi { display: grid; place-items: center; width: 48px; height: 48px; border: 0; border-radius: 50%; background: var(--fondo-alt); color: var(--inchiostro); cursor: pointer; }
.foglio-lato__chiudi:active { transform: scale(0.95); }
.foglio-lato__scorre { flex: 1; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: var(--s-6) var(--s-6) var(--s-12); }
.foglio-lato__riepilogo { padding-bottom: var(--s-6); border-bottom: 1px solid var(--filetto); }
.foglio-lato__riepilogo h2 { font-size: var(--t-grande); line-height: 1.15; font-weight: 800; }
.foglio-lato__riepilogo p { margin-top: var(--s-2); color: var(--inchiostro-tenue); }
.foglio-lato__avviso, .foglio-lato__ripiego { margin-top: var(--s-6); padding: var(--s-6); border-radius: 12px; background: #fff; box-shadow: 0 0 0 1px var(--filetto); }
.foglio-lato__bottoni { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-4); margin-top: var(--s-4); }
.foglio-lato__bottoni a:not(.bottone) { padding-block: 12px; }
.foglio-lato__stato { display: flex; align-items: center; gap: var(--s-3); margin-top: var(--s-6); padding: var(--s-4); border-radius: 12px; background: var(--fondo-alt); color: var(--inchiostro-tenue); font-weight: 600; }
.foglio-lato__avviso[hidden], .foglio-lato__stato[hidden], .foglio-lato__ripiego[hidden] { display: none; }
.foglio-lato__modulo { margin-top: var(--s-4); }
.foglio-lato__modulo iframe { display: block; width: 100%; min-height: 760px; border: 0; }
.foglio-lato-aperto body { overflow: hidden; }
@media (prefers-reduced-motion: reduce) { .foglio-lato__velo, .foglio-lato__foglio { transition: none; } }

/* ---- Il video di YouTube che si carica al tocco (components/VideoYoutube.astro, 2026-09-28) ----
   Qui e non nel componente perché al tocco il riquadro col video lo crea il JavaScript. */
.video { position: relative; display: block; aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden; background: var(--inchiostro); }
.video img, .video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; object-fit: cover; }
a.video img { transition: transform 0.3s ease, opacity 0.2s ease; }
a.video:hover img { transform: scale(1.02); }
/* in alto a destra, l'unico angolo vuoto di tutte le copertine: al centro copriva il titolo, in basso il marchio */
.video__play { position: absolute; right: 2.5%; top: 4%; width: clamp(44px, 11%, 64px); aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; background: var(--azione); color: #fff; box-shadow: 0 6px 24px rgb(17 43 77 / 0.35); transition: transform 0.15s ease; }
.video__play svg { margin-left: 3px; }
a.video:hover .video__play { transform: scale(1.08); }
a.video:active .video__play { transform: scale(0.96); }
a.video:focus-visible { outline: 3px solid var(--azione); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { a.video img, .video__play { transition: none; } a.video:hover img, a.video:hover .video__play { transform: none; } }

/* ---------- Il pannello d'iscrizione ai LAB (2026-09-25; qui dal 2026-10-01, con lo script in /lab/iscrizione.js) ----------
   Lo usano la pagina degli Special Lab e quella del Coaching LAB. Globale perché lo crea lo script. Sul telefono a tutto schermo, dai 768 un foglio laterale da 560px. Sopra la plancia
   (60), il tondo (70) e il pannello del menu (65); sotto il banner dei cookie (80). */
.iscr { position: fixed; inset: 0; z-index: 75; }
.iscr[hidden] { display: none; }
.iscr__velo { position: absolute; inset: 0; background: rgba(17, 43, 77, 0.55); opacity: 0; transition: opacity 0.22s ease; }
.iscr__foglio { position: absolute; inset: 0; display: flex; flex-direction: column; background: var(--fondo); transform: translateY(24px); opacity: 0; transition: transform 0.22s ease, opacity 0.22s ease; }
@media (min-width: 768px) { .iscr__foglio { left: auto; width: min(560px, 100%); transform: translateX(32px); box-shadow: -16px 0 48px rgba(17, 43, 77, 0.2); } }
.iscr.aperto .iscr__velo { opacity: 1; }
.iscr.aperto .iscr__foglio { transform: none; opacity: 1; }
.iscr__sentinella { position: absolute; width: 1px; height: 1px; overflow: hidden; }
.iscr__testa { flex: none; display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); min-height: 64px; padding: var(--s-2) var(--s-2) var(--s-2) var(--s-6); border-bottom: 1px solid var(--filetto); }
.iscr__chiudi { display: grid; place-items: center; width: 48px; height: 48px; border: 0; border-radius: 50%; background: var(--fondo-alt); color: var(--inchiostro); cursor: pointer; }
.iscr__chiudi:active { transform: scale(0.95); }
.iscr__scorre { flex: 1; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: var(--s-6) var(--s-6) var(--s-12); }
.iscr__riepilogo { padding-bottom: var(--s-6); border-bottom: 1px solid var(--filetto); }
.iscr__tema { margin-top: var(--s-2); font-size: var(--t-grande); line-height: 1.15; font-weight: 800; }
.iscr__quando { margin-top: var(--s-2); font-weight: 600; }
.iscr__dettagli { color: var(--inchiostro-tenue); }
.iscr__prezzo { margin-top: var(--s-2); font-weight: 600; }
.iscr__stato { display: flex; align-items: center; gap: var(--s-3); margin-top: var(--s-6); padding: var(--s-4); border-radius: 12px; background: var(--fondo-alt); color: var(--inchiostro-tenue); font-weight: 600; }
.iscr__stato[hidden], .iscr__ripiego[hidden], .iscr__grazie[hidden] { display: none; }
.iscr__ripiego { margin-top: var(--s-6); padding: var(--s-6); border-radius: 12px; background: var(--fondo-alt); display: grid; gap: var(--s-4); }
.iscr__modulo { margin-top: var(--s-4); }
.iscr__modulo iframe { display: block; width: 100%; min-height: 480px; }
.iscr__grazie { margin-top: var(--s-6); padding: var(--s-6); border-radius: 12px; box-shadow: inset 4px 0 0 var(--accento), 0 0 0 1px var(--filetto); }
.iscr__grazie:focus { outline: none; }
/* Il trattino stava solo nella pagina degli Special Lab, ma lo usa anche il pannello d'iscrizione (/lab/iscrizione.js) che
   si apre dalle date degli Special Lab su /coaching-lab/: lì non c'era e il segno della linea spariva (2026-10-08). */
/* il trattino dell'etichetta: giallo, perché paga la persona (rams § 3, «Aziende o persona») */
.trattino { display: inline-block; width: 32px; height: 3px; margin-right: var(--s-3); vertical-align: middle; background: var(--accento); position: relative; top: -2px; }
/* il trattino delle linee (Samuele, 2026-09-25; Sport aggiunta il 2026-10-19): Business Blu FYM, Personal Uniberry (il rosso del brand, secondario
   della Scuola), Innovation il vecchio azzurro FYM #30bef2 (Samuele, 2026-09-26: il giallo è il trattino delle etichette di tutti i
   siti e su Innovation si confondeva; il Prime violet e il Forest, provati prima, a 3px restavano vicini al blu;
   lo Sky del brand book è troppo spento). Sta a 2,15:1 sul bianco e 1,85:1 sul fondo alternato: regge come segno
   perché il nome della linea è sempre scritto accanto, mai come testo. È un segno, mai il colore del testo: accanto c'è sempre il nome della linea.
   Solo su fondo chiaro: il Blu FYM sul Navy non si vede (1,65:1, rams § 2). */
.trattino--business { background: var(--azione); }
.trattino--personal { background: var(--no); }
.trattino--innovation { background: var(--linea-innovation); }
.trattino--sport { background: var(--linea-sport); } /* Sport, dal 2026-10-19: il verde di Sport Coaching Strategico, 3,13:1 sul bianco */
.iscr__grazie h3 { font-family: var(--display); font-weight: 700; font-size: var(--t-grande); }
.iscr__grazie p { margin-top: var(--s-2); }
.iscr-aperto body { overflow: hidden; }
@media (prefers-reduced-motion: reduce) { .iscr__velo, .iscr__foglio { transition: none; } }
.iscr p a:not(.bottone) { padding-block: 12px; margin-block: -12px; } /* i link nel testo del pannello: 44px di bersaglio senza spostare le righe (linus § 6.2) */

/* i quiz di /risorse/ (il coaching fa per me, il quiz sul coaching): domande, schede delle risposte, briciole. Erano nella pagina
   del primo quiz; dal 2026-10-05 i quiz sono due e le regole stanno qui, una volta sola */
.briciole { font-size: var(--t-etichetta); color: var(--inchiostro-tenue); margin-bottom: 16px; display: flex; flex-wrap: wrap; align-items: center; gap: 0 10px; }
.briciole a { color: var(--inchiostro-tenue); text-decoration: none; display: inline-flex; align-items: center; min-height: 44px; padding: 12px 3px; margin: -12px -3px; }
.quiz__d + .quiz__d { margin-top: var(--s-12); }
.quiz__campo { border: 0; padding: 0; margin: 0; min-width: 0; }
.quiz__legenda { font-family: var(--display); font-weight: 700; font-size: var(--t-grande); line-height: 1.2; padding: 0; display: flex; gap: var(--s-4); align-items: baseline; }
.quiz__n { font-weight: 800; color: var(--accento); flex: none; font-size: var(--t-2); line-height: 1; } /* il numero in Dandelion, come nel pannello «Ti riconosci?» */
.quiz__d[data-manca="1"] .quiz__legenda { color: var(--no); }
.quiz__risposte { display: grid; gap: var(--s-3); margin-top: var(--s-6); }
@media (min-width: 640px) { .quiz__risposte { grid-template-columns: 1fr 1fr; } }
/* la risposta è una scheda con il tondo della scelta: due portatori dello stato, bordo Blu FYM e tondo pieno (rams § 7-bis) */
.quiz__r { position: relative; display: flex; gap: 12px; align-items: flex-start; min-height: 56px; padding: 12px 16px; border: 2px solid var(--filetto); border-radius: 12px; background: #fff; cursor: pointer; transition: border-color 0.18s, background 0.18s; }
/* il bottone radio copre tutta la scheda, invisibile: il bersaglio è la scheda intera (56px), il tondo che si vede è lo span */
.quiz__r input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.quiz__tondo { flex: none; width: 22px; height: 22px; margin-top: 2px; border: 2px solid var(--filetto); border-radius: 50%; background: #fff; transition: border-color 0.18s, background 0.18s; }
.quiz__tondo--quadro { border-radius: 6px; }
.quiz__r:has(input:checked) { border-color: var(--azione); background: #eaf3f8; }
.quiz__r:has(input:checked) .quiz__tondo { border-color: var(--azione); background: var(--azione); box-shadow: inset 0 0 0 4px #fff; }
.quiz__r:has(input:focus-visible) { outline: 2px solid var(--azione); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) { .quiz__r:hover { border-color: var(--superficie); } }
.quiz__errore { margin-top: var(--s-6); color: var(--no); font-weight: 600; }
@media (prefers-reduced-motion: reduce) { .quiz__r, .quiz__tondo { transition: none; } }

/* L'attesa (Samuele, 2026-10-06: «se dopo aver cliccato qualcosa devo aspettare, deve essere evidente»): il marchio FYM che si
   riempie dal basso verso l'alto. Sui bottoni compare da solo quando hanno aria-busy="true", che mette public/attesa.js all'invio
   di un modulo; altrove si scrive <span class="attesa" role="status" aria-label="Un attimo"></span>. Prende il colore del testo
   (currentColor), quindi si vede sul bottone pieno e su quello vuoto; il marchio è quello della favicon, con la F traforata (public/marchio/attesa.svg: la favicon dipinge la F in chiaro, e come maschera sarebbe un quadrato pieno).
   Vale anche nell'area riservata, che serve questo file dentro stile.php. */
.attesa, button[aria-busy="true"]::before, .bottone[aria-busy="true"]::before {
  content: ""; display: inline-block; width: 1.15em; height: 1.15em; vertical-align: -0.2em; flex: none;
  background: linear-gradient(to top, currentColor 50%, color-mix(in srgb, currentColor 22%, transparent) 50%) 0 0 / 100% 200%;
  -webkit-mask: url("/marchio/attesa.svg") center / contain no-repeat; mask: url("/marchio/attesa.svg") center / contain no-repeat;
  animation: attesa-riempie 1.1s ease-in-out infinite;
}
.attesa--grande { width: 32px; height: 32px; }
/* nei pannelli (iscrizione ai LAB, chiamata) e nelle liste di date: il marchio in Blu FYM, il testo accanto resta tenue.
   Prima c'era una rotellina generica (iscr__giro, foglio-lato__giro), tolta il 2026-10-06 */
.iscr__stato .attesa, .foglio-lato__stato .attesa { color: var(--azione); }
.pl__riga.pl__attesa { display: flex; align-items: center; gap: var(--s-3); font-weight: 600; } /* nelle liste di date prende il colore del testo: «Scegli il tuo LAB» sta sul pannello scuro */
button[aria-busy="true"], .bottone[aria-busy="true"] { pointer-events: none; cursor: progress; }
button[aria-busy="true"]:not(.bottone)::before { margin-right: 0.5em; } /* il .bottone ha già il suo gap */
@keyframes attesa-riempie { from { background-position: 0 0; } to { background-position: 0 100%; } }
@media (prefers-reduced-motion: reduce) {
  .attesa, button[aria-busy="true"]::before, .bottone[aria-busy="true"]::before { animation: none; background-position: 0 50%; }
}

/* ---- Il taglio a 49° con gli spigoli stondati, come nel marchio (Samuele, 2026-10-21) ----
   Il polygon() resta sopra come base: dove shape() non c'è (browser vecchi) il taglio resta vivo, come prima. Gli spigoli
   si stondano con una curva che ha il vertice come punto di controllo: --r è quanto la curva parte prima del vertice.
   0,6556 e 0,7552 sono la direzione della diagonale a 49° (1 su 1,152). */
@supports (clip-path: shape(from 0 0, line to 1px 1px)) {
  /* l'angolo tagliato in basso a destra dei riquadri */
  .pannello, .citazione {
    --cut: 48px; --r: 5px;
    clip-path: shape(from 0 0, line to 100% 0,
      line to 100% calc(100% - var(--cut) - var(--r)),
      curve to calc(100% - var(--r) * 0.6556) calc(100% - var(--cut) + var(--r) * 0.7552) with 100% calc(100% - var(--cut)),
      line to calc(100% - var(--cut) / 1.152 + var(--r) * 0.6556) calc(100% - var(--r) * 0.7552),
      curve to calc(100% - var(--cut) / 1.152 - var(--r)) 100% with calc(100% - var(--cut) / 1.152) 100%,
      line to 0 100%, close);
  }
  /* il gradino delle fasce, in salita da sinistra a destra: lo spigolo in basso è convesso, quello in alto è concavo */
  .taglio {
    --r: 5px; /* 5px, come il raggio dei bottoni (Samuele, 2026-10-21) */
    clip-path: shape(from 0 0, line to 100% 0, line to 100% calc(100% - var(--salita)),
      line to calc(50% + var(--salita) / 1.152 + var(--r)) calc(100% - var(--salita)),
      curve to calc(50% + var(--salita) / 1.152 - var(--r) * 0.6556) calc(100% - var(--salita) + var(--r) * 0.7552) with calc(50% + var(--salita) / 1.152) calc(100% - var(--salita)),
      line to calc(50% + var(--r) * 0.6556) calc(100% - var(--r) * 0.7552),
      curve to calc(50% - var(--r)) 100% with 50% 100%,
      line to 0 100%, close);
  }
}

/* Il segno di un'area sullo sfondo (Segno.astro, 2026-10-21): la sezione lo contiene e lo taglia ai bordi, il contenuto sta
   sopra. */
.con-segno { position: relative; overflow: clip; }
.con-segno > .cont { position: relative; z-index: 1; }

/* L'area riservata */
.scrivi { background: var(--fondo); }
.s-testata { border-bottom: 1px solid var(--filetto); background: var(--fondo); }
.s-riga { display: flex; align-items: center; justify-content: space-between; min-height: 64px; gap: 16px; flex-wrap: wrap; }
.s-marchio { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: var(--inchiostro); font-family: var(--display); font-weight: 800; font-size: 1.25rem; min-height: 44px; }
.s-menu { display: flex; gap: 4px; flex-wrap: wrap; }
.s-marchio img { height: 36px; width: auto; max-width: none; } /* da solo nel link, con max-width: 100% si stringeva a zero */
/* «Area riservata» a destra su una riga sola, poi il menu (Samuele, 2026-10-05: accanto al marchio andava a capo).
   Sul telefono il menu scende sotto, a tutta larghezza, e logo e scritta restano sulla prima riga. */
.s-zona { margin-left: auto; font-family: var(--display); font-weight: 800; font-size: 1.125rem; color: var(--inchiostro); white-space: nowrap; }
.s-zona + .s-menu { border-left: 1px solid var(--filetto); padding-left: 4px; }
@media (max-width: 760px) { .s-zona + .s-menu { flex-basis: 100%; border-left: 0; padding-left: 0; margin: 0 -12px 8px; } }
.s-menu a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; text-decoration: none; color: var(--inchiostro); font-weight: 600; font-size: var(--t-etichetta); border-radius: 5px; position: relative; }
.s-menu a[aria-current="page"]::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 6px; height: 3px; background: var(--accento); }
/* Il nome con la tendina: profilo ed Esci (2026-10-05). Il summary ha lo stesso aspetto delle voci del menu, la freccia dice che si apre. */
.s-utente { position: relative; }
.s-utente summary { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 12px; color: var(--inchiostro); font-weight: 600; font-size: var(--t-etichetta); border-radius: 5px; cursor: pointer; list-style: none; position: relative; }
.s-utente summary::-webkit-details-marker { display: none; }
.s-utente summary::before { content: ""; order: 2; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform .15s; }
.s-utente[open] summary::before { transform: translateY(2px) rotate(-135deg); }
.s-utente summary.s-utente--qui::after { content: ""; position: absolute; left: 12px; right: 27px; bottom: 6px; height: 3px; background: var(--accento); }
.s-utente summary:focus-visible { outline: 2px solid var(--inchiostro); outline-offset: 2px; }
.s-utente__menu { position: absolute; right: 0; top: calc(100% + 4px); z-index: 10; min-width: 200px; display: grid; padding: 6px; background: #fff; border: 1px solid var(--filetto); border-radius: 12px; box-shadow: 0 8px 24px rgba(17, 43, 77, .12); }
.s-utente__menu a { display: flex; align-items: center; min-height: 44px; padding: 0 12px; border-radius: 8px; text-decoration: none; color: var(--inchiostro); font-weight: 600; font-size: var(--t-etichetta); }
.s-utente__menu a:hover, .s-utente__menu a:focus-visible { background: var(--fondo); }
/* dove sei: una riga gialla dritta, qui in verticale, staccata dagli angoli tondi della voce. L'ombra interna di prima
   seguiva gli angoli e sembrava il bordo di un bottone (Samuele, 2026-10-05) */
.s-utente__menu a[aria-current="page"] { position: relative; }
.s-utente__menu a[aria-current="page"]::after { content: ""; position: absolute; left: 0; top: 12px; bottom: 12px; width: 3px; background: var(--accento); }
@media (max-width: 760px) { .s-utente__menu { right: auto; left: 0; } } /* sul telefono il nome può stare a sinistra della riga: la tendina si apre verso destra */
.conta { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; margin-left: 6px; border-radius: 11px; background: var(--accento); color: var(--inchiostro); font-size: 0.85rem; }
.s-main { padding-block: 40px 64px; min-height: 60vh; }
.s-piede { padding-block: 24px 40px; border-top: 1px solid var(--filetto); }
.s-stretto { max-width: 36rem; }
.s-intesta { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 24px; }
.s-avviso { padding: 12px 16px; border-radius: 8px; margin: 16px 0; }
.s-avviso--ok { background: #e6f2ea; color: #17442a; } .s-avviso--errore { background: #fdecec; color: #8f1d2c; }
.s-lista { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--filetto); }
.s-lista li { border-bottom: 1px solid var(--filetto); }
.s-lista a, .s-lista__riga { display: grid; grid-template-columns: 1fr auto auto; gap: 16px; align-items: center; padding: 16px 0; text-decoration: none; color: inherit; min-height: 64px; }
.s-lista__titolo { font-weight: 600; } .s-lista__titolo small { display: block; font-weight: 400; color: var(--inchiostro-tenue); font-size: var(--t-etichetta); }
.s-stato { display: inline-block; padding: 4px 10px; border-radius: 12px; background: var(--fondo-alt); font-size: var(--t-etichetta); font-weight: 600; white-space: nowrap; }
.s-stato--in_revisione { background: var(--accento); } .s-stato--pubblicato { background: #e6f2ea; color: #17442a; } .s-stato--da_rivedere { background: #fdecec; color: #8f1d2c; } .s-stato--archiviato { color: var(--inchiostro-tenue); } .s-stato--da_approvare { background: var(--superficie); color: var(--inchiostro); }
/* il confronto per l'ok dell'autore (2026-10-06): due portatori, colore e segno, perché il colore da solo non basta */
.s-confronto del, .s-nota-revisore del { background: #fdecec; color: #8f1d2c; text-decoration: line-through; } .s-confronto ins, .s-nota-revisore ins { background: #e6f2ea; color: #17442a; text-decoration: underline; text-underline-offset: 3px; }
.s-confronto .etichetta { margin-top: 20px; } .s-confronto .etichetta:first-child { margin-top: 0; }
.s-editor { max-width: 44rem; }
.s-barra { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 8px; }
.s-barra button { min-height: 44px; min-width: 44px; padding: 0 12px; border: 1px solid var(--filetto); background: #fff; border-radius: 5px; font: inherit; font-size: var(--t-etichetta); cursor: pointer; }
.s-barra button:hover { border-color: var(--azione); }
.s-area { min-height: 320px; padding: 16px 20px; border: 1px solid var(--filetto); border-radius: 5px; background: #fff; font-size: var(--t-corpo); line-height: 1.6; }
.s-area:focus { outline: none; border-color: var(--azione); box-shadow: 0 0 0 3px var(--accento); }
.s-area h2 { font-size: var(--t-inter); margin: 24px 0 8px; } .s-area p + p { margin-top: 12px; } .s-area ul, .s-area ol { margin: 12px 0 12px 1.2em; }
.s-area[contenteditable="false"] { background: var(--fondo-alt); }
.s-condizioni__titolo { margin: 24px 0 8px; font-size: var(--t-etichetta); }
.s-nota { margin-top: 8px; font-size: var(--t-etichetta); }
.modulo__campo > .s-nota:last-child { margin-bottom: 16px; } /* la descrizione sotto un campo (la bio): stacca il campo dopo */
.s-foto-riga { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.s-foto-riga input[type="file"] { min-height: 44px; min-width: 0; width: 100%; flex: 1 1 200px; font: inherit; font-size: var(--t-etichetta); }
.scrivi .modulo > * { min-width: 0; } /* la griglia non si allarga sul contenuto minimo del campo file */
.s-avatar { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; background: var(--fondo-alt); display: inline-block; }
/* la foto del profilo arriva scontornata (app.js): dietro, il Blu FYM del pannello che ha sul sito, come i docenti */
.s-ritratto { position: relative; isolation: isolate; display: inline-block; flex: none; }
.s-ritratto::before { content: ""; position: absolute; left: 7%; right: 7%; top: 24%; bottom: 0; background: var(--azione); border-radius: 10px; clip-path: polygon(0 26px, 23px 0, 100% 0, 100% 100%, 0 100%); z-index: -1; }
.s-ritratto .s-avatar { width: 200px; height: 200px; border-radius: 0; background: none; display: block; }
/* l'inquadratura del sito (lib/coach.ts) anche qui: app.js misura la foto e la sposta perché la testa esca dal pannello come in vetrina.
   Senza, chi ha aria sopra la testa restava dentro il blu (Anna Malaspina, 2026-10-09). Sotto e ai lati si taglia al bordo della foto */
.s-ritratto { clip-path: inset(-50% 0 0 0); }
.s-ritratto .s-avatar, .s-coach__media .s-coach__foto { transform-origin: 50% 0; transform: translate(var(--dx, 0%), var(--dy, 0%)) scale(var(--s, 1)); }
.s-ritratto .s-avatar--vuoto { background: none; }
.s-anteprima { width: 160px; aspect-ratio: 16/10; object-fit: cover; border-radius: 8px; background: var(--fondo-alt); display: inline-block; }
.s-link { background: none; border: 0; padding: 12px 0; color: var(--azione); font: inherit; text-decoration: underline; cursor: pointer; min-height: 44px; }
.s-nota-revisore { padding: 16px 20px; border-left: 4px solid var(--accento); background: #fff; margin-bottom: 24px; }
.s-spiega { padding: 16px 20px; border-left: 4px solid var(--accento); background: #fff; margin-top: 16px; } .s-spiega p + p { margin-top: 8px; }
.s-due { display: grid; gap: 32px; } @media (min-width: 1100px) { .s-due { grid-template-columns: 1fr 1fr; } }
.s-riquadro { background: #fff; border: 1px solid var(--filetto); border-radius: 12px; padding: 20px 24px; margin-bottom: 24px; }
.s-azioni-invito { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 12px; } /* copia e «Mandalo per email» affiancati, uno sotto l'altro sul telefono */
.s-h-piccolo { font-size: var(--t-inter); margin: 8px 0 12px; }
.s-originale { max-height: 60vh; overflow: auto; padding-right: 8px; }
.s-scheda dt { font-weight: 600; margin-top: 12px; } .s-scheda dd { margin: 4px 0 0; } .s-scheda ul { margin: 4px 0 0 1.2em; }
.s-eventi { list-style: none; padding: 0; margin: 0; } .s-eventi li { padding: 8px 0; border-top: 1px solid var(--filetto); font-size: var(--t-etichetta); }
.s-condizioni li + li { margin-top: 12px; }
.s-in-riga { display: grid; gap: 16px; align-items: end; margin-bottom: 24px; } @media (min-width: 700px) { .s-in-riga { grid-template-columns: 1fr auto auto; } }
.s-controlli { list-style: none; padding: 0; margin: 12px 0 0; }
.s-controllo { display: flex; gap: 10px; align-items: flex-start; padding: 8px 0; border-top: 1px solid var(--filetto); font-size: var(--t-etichetta); }
.s-controllo__segno { flex: none; width: 12px; height: 12px; margin-top: 5px; border-radius: 50%; background: var(--filetto); }
.s-controllo--ok .s-controllo__segno { background: #2f7d4f; } .s-controllo--no .s-controllo__segno { background: #c0392b; } .s-controllo--info .s-controllo__segno { background: var(--accento); }
.s-controllo--ok b::after { content: " ✓"; color: #2f7d4f; } .s-controllo--no b::after { content: " ✗"; color: #c0392b; }
/* i profili dei coach */
.s-gruppo { border: 0; padding: 0; margin: 32px 0 0; min-width: 0; }
.s-gruppo > legend { margin-bottom: 12px; padding: 0; }
.s-gruppo[disabled] { opacity: 0.6; }
/* bottoni fermi mentre una foto si prepara (app.js): spenti in modo evidente, e sopra la riga che dice perché */
.bottone:disabled, .bottone:disabled:hover { opacity: 0.4; cursor: not-allowed; transform: none; box-shadow: none; filter: grayscale(1); }
.s-attesa { margin: 16px 0 0; padding: 10px 14px; border-left: 3px solid var(--accento); background: var(--fondo-alt); font-weight: 600; }
.s-profilo-stato { display: flex; gap: 12px; align-items: baseline; flex-wrap: wrap; margin-top: 16px; padding: 16px 20px; background: #fff; border: 1px solid var(--filetto); border-radius: 12px; }
.s-profilo-stato p { flex: 1 1 16rem; }
.s-stato--approvato { background: #e6f2ea; color: #17442a; } .s-stato--ritirato { color: var(--inchiostro-tenue); }
/* il ruolo in «Persone» (Samuele, 2026-10-06): lo staff in giallo, i coach in blu. Testo Navy su tutti e due, come vuole il Sky */
.s-stato--staff { background: var(--accento); color: var(--inchiostro); } .s-stato--coach { background: var(--superficie); color: var(--inchiostro); }
.s-stato--fuori { background: var(--fondo-alt); color: var(--inchiostro-tenue); font-weight: 500; } .s-lista__riga--fuori .s-lista__titolo { color: var(--inchiostro-tenue); }
.s-coach { display: grid; grid-template-columns: 120px 1fr; gap: 16px; align-items: start; margin-top: 12px; }
.s-coach__foto { width: 120px; height: 120px; object-fit: cover; border-radius: 12px; background: var(--azione); display: block; clip-path: polygon(20px 0, 100% 0, 100% 100%, 0 100%, 0 23px); }
.s-coach__media { position: relative; isolation: isolate; display: block; width: 120px; clip-path: inset(-50% -50% 0 -50%); } /* la persona esce dal pannello, come nella scheda del sito (SchedaCoach.astro) e nel profilo (.s-ritratto); prima la foto era ritagliata dentro un quadrato blu (Samuele, 2026-10-06: «non sporge») */
.s-coach__media::before { content: ""; position: absolute; left: 7%; right: 7%; top: 24%; bottom: 0; background: var(--azione); border-radius: 10px; clip-path: polygon(0 26px, 23px 0, 100% 0, 100% 100%, 0 100%); z-index: -1; }
.s-coach__media .s-coach__foto { height: auto; object-fit: contain; background: none; border-radius: 0; clip-path: none; margin-bottom: -4px; } /* altezza della foto, non il quadrato da 120: il quadrato tagliava la testa (Samuele, 2026-10-06) */
.s-coach__nome { font-family: var(--display); font-weight: 800; font-size: var(--t-inter); }
@media (max-width: 480px) { .s-coach { grid-template-columns: 1fr; } }
.s-lista--persone .s-lista__riga { grid-template-columns: 1fr auto auto auto; }
@media (max-width: 640px) { .s-lista--persone .s-lista__riga { grid-template-columns: 1fr auto; } }
/* Il caricamento da file e la sua anteprima (2026-10-05) */
.s-csv__carica { margin: 0 0 24px; }
.s-csv__carica summary { display: inline-flex; align-items: center; min-height: 44px; color: var(--azione); text-decoration: underline; cursor: pointer; font-weight: 600; }
.s-csv h2 { margin-top: 4px; }
.s-csv h3 { margin-top: 20px; font-size: var(--t-etichetta); }
.s-csv__elenco { margin: 8px 0 0; padding: 0; list-style: none; display: grid; gap: 4px; font-size: var(--t-etichetta); overflow-wrap: anywhere; }
.s-azioni-invito form { margin: 0; }
.s-intesta > a { display: inline-flex; align-items: center; min-height: 44px; } /* il link «← Revisione» / «← Coach»: bersaglio da 44 px */
/* la terza specializzazione (profilo.php): la riga cliccata trema e la regola «(una o due, non tre)» diventa rossa, col
   rosso degli errori dei moduli. Chi ha chiesto meno movimento vede solo il rosso (Samuele, 2026-10-01) */
.s-limite--superato { color: #8f1d2c; font-weight: 600; }
.s-trema { animation: s-trema 0.4s ease; }
.s-trema input[type="checkbox"]::before { border-color: #8f1d2c; }
@keyframes s-trema { 0%, 100% { transform: translateX(0); } 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }
@media (prefers-reduced-motion: reduce) { .s-trema { animation: none; } }