/* ============================================================================
   formazione.css — la pagina «Area formativa». Si carica dopo base.css

   Niente di inventato: la banda scura è quella di tutte le pagine (.capo), le
   fasce con il filo tricolore sono quelle della home, le tre carte pure. Di
   nuovo ci sono le CORNICI delle schermate — un telefono e la finestra di un
   computer — disegnate qui, senza immagini: cambiando la schermata la
   cornice resta. Prefisso fo- perché i nomi non si pestino con gli altri fogli.
   ============================================================================ */

/* --- la banda in cima: testo a sinistra, il telefono a destra --- */
.fo-capo{padding:4rem 0 4.2rem}
.fo-capo .dentro{display:grid;grid-template-columns:minmax(0,1fr);gap:2.4rem;align-items:center}
.fo-capo.con-telefono .dentro{grid-template-columns:minmax(0,1fr) 300px}
.fo-capo .sotto{max-width:38rem;font-size:1.08rem}
.fo-capo .sotto p{margin:0 0 .6rem}
.fo-capo .sotto p:last-child{margin-bottom:0}
.fo-capo .sotto a{color:#fff;border-bottom:1px solid var(--verde)}
/* il telefono della banda sporge un po' sotto: dà profondità alla pagina */
.fo-capo.con-telefono{padding-bottom:0;overflow:hidden}
.fo-capo.con-telefono .fo-capo-testo{padding-bottom:4.2rem}
.fo-tel-capo{align-self:end;margin-bottom:-90px;transform:rotate(-2deg)}
/* l'immagine «libera» — il telefono in mano, già composto e trasparente:
   più larga, appoggiata al fondo della banda, come se la mano entrasse da
   sotto. Niente cornice, niente rotazione: è già nell'immagine. Scende un
   po' oltre il fondo della banda, che la taglia: così il polso, tagliato
   storto nell'immagine, non si vede. */
.fo-capo.con-libera .dentro{grid-template-columns:minmax(0,1fr) minmax(0,420px);gap:1.6rem}
.fo-capo.con-libera .fo-capo-testo{padding-bottom:4.2rem}
.fo-libera{margin:0 0 -70px;align-self:end;justify-self:end;width:100%;max-width:420px;
  filter:drop-shadow(0 24px 40px rgba(0,0,0,.35))}
.fo-libera img{width:100%;height:auto;display:block}
.fo-capo.con-libera{padding-top:2.6rem}

/* i due pulsanti in fila e, sotto, «Entra come ospite» larga quanto loro due
   insieme (31 ottobre 2026): il riquadro si stringe sulla riga, la pastiglia
   lo riempie */
.fo-pulsanti{display:inline-flex;flex-direction:column;align-items:stretch;gap:.8rem;margin-top:1.8rem;max-width:100%}
.fo-pulsanti-riga{display:flex;flex-wrap:wrap;gap:.8rem}
.fo-pulsanti .bottone.fo-ospite{background:#E8830A;border-color:#E8830A;color:#fff}
.fo-pulsanti .bottone.fo-ospite:hover{background:#C46E00;border-color:#C46E00}
/* sul fondo scuro il pulsante «vuoto» scrive in bianco */
.fo-capo .bottone.vuoto,.fo-accesso .bottone.vuoto{color:#fff;border-color:rgba(255,255,255,.34)}
.fo-capo .bottone.vuoto:hover,.fo-accesso .bottone.vuoto:hover{border-color:#fff}
.fo-pulsanti .bottone.verde:hover{filter:brightness(1.07)}
.fo-pulsanti .bottone{transition:filter .15s,border-color .15s,background .15s}

/* --- LE CORNICI ----------------------------------------------------------
   Il telefono: bordo scuro spesso, angoli tondi, l'altoparlante in alto. La
   schermata si ritaglia dall'alto, così la proporzione resta quella di un
   telefono anche se l'immagine caricata è più lunga. */
.fo-tel{position:relative;margin:0;width:100%;max-width:300px;justify-self:center;
  padding:26px 10px 14px;background:#0B0D26;border-radius:42px;
  box-shadow:0 0 0 1px rgba(255,255,255,.08) inset,0 30px 60px -24px rgba(18,20,58,.55),0 10px 22px -12px rgba(18,20,58,.35)}
/* l'altoparlante: sta nella cornice, sopra lo schermo, e non copre niente */
.fo-tel::before{content:"";position:absolute;top:11px;left:50%;transform:translateX(-50%);
  width:54px;height:5px;border-radius:5px;background:#2A2E5A}
.fo-tel img{width:100%;aspect-ratio:390/844;object-fit:cover;object-position:top;border-radius:10px 10px 30px 30px;background:#fff}

/* il computer: la finestra con la barra e i tre pallini, come un browser */
.fo-pc{margin:0;width:100%;background:#fff;border:1px solid var(--filo);border-radius:12px;overflow:hidden;
  box-shadow:0 30px 60px -28px rgba(18,20,58,.45),0 8px 20px -12px rgba(18,20,58,.2)}
.fo-pc-barra{display:flex;gap:6px;align-items:center;height:30px;padding:0 12px;background:var(--nebbia);border-bottom:1px solid var(--filo)}
.fo-pc-barra i{width:10px;height:10px;border-radius:50%;background:#D5DAE6}
.fo-pc-barra i:nth-child(1){background:#F0A7A8}
.fo-pc-barra i:nth-child(2){background:#F2D49B}
.fo-pc-barra i:nth-child(3){background:#9FD8B7}
.fo-pc img{width:100%;aspect-ratio:16/10;object-fit:cover;object-position:top}

/* --- i blocchi di testo: una colonna sola, come «L'associazione» --- */
.fo-testo{padding:3.6rem 0}
.fo-testo.chiaro{background:var(--nebbia);border-top:1px solid var(--filo);border-bottom:1px solid var(--filo)}
.fo-colonna{max-width:44rem}
.fo-testo h2,.fo-funziona h2{font-size:1.8rem;margin-bottom:1.2rem}
/* un elenco qui è il cuore del blocco («Come si studia»): voci staccate,
   con il segno verde al posto del pallino */
.fo-testo .testo-scritto ul{list-style:none;padding:0}
.fo-testo .testo-scritto ul li{position:relative;padding-left:1.6rem;margin-bottom:.9rem}
.fo-testo .testo-scritto ul li::before{content:"";position:absolute;left:0;top:.62em;
  width:.7rem;height:2px;background:var(--verde);border-radius:2px}
/* con la banda del telefono sopra, il primo blocco si stacca un po' di più */
.fo-capo.con-telefono + .fo-testo{padding-top:5rem}

/* «Come si studia» con il telefono di sera accanto */
.fo-affiancato{display:grid;grid-template-columns:minmax(0,1fr);gap:2.6rem;align-items:center}
.con-telefono .fo-affiancato{grid-template-columns:minmax(0,44rem) 260px;justify-content:space-between}
.fo-tel-notte{max-width:260px;transform:rotate(2deg)}

/* Arrivando a un blocco da un collegamento, la testata fissa non copre il
   titolo */
#che-cosa-e,#come-funziona,#come-si-studia,#esami-e-attestati,#chi-puo-accedere,#scrivici{scroll-margin-top:80px}

/* --- LE TRE CARTE: le regole di .home .carta, copiate. In home stanno
   sotto .home e qui non arriverebbero; un foglio comune per tre righe di
   carte non vale il carico su tutte le pagine. Se cambiano là, cambiano qui. */
.fo-colonna + .fo-tre{margin-top:2.6rem}
.fo-tre{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1.4rem}
.fo-carta{background:var(--nebbia);border:1px solid var(--filo);border-radius:var(--r);padding:1.8rem;
  position:relative;transition:transform .18s,box-shadow .18s;display:flex;flex-direction:column}
.fo-carta:hover{transform:translateY(-3px);box-shadow:0 14px 34px -14px rgba(18,20,58,.22)}
.fo-carta .num{font-family:var(--display);font-size:1.08rem;font-weight:700;letter-spacing:.05em;
  margin-bottom:1.5rem;display:block;line-height:1}
.fo-tre .fo-carta:nth-child(1) .num{color:var(--rosso)}
.fo-tre .fo-carta:nth-child(2) .num{color:var(--ink)}
.fo-tre .fo-carta:nth-child(3) .num{color:var(--verde)}
.fo-carta h3{margin-bottom:.5rem}
.fo-carta-testo p{font-size:.95rem;color:var(--grigio);margin:0 0 .5rem;line-height:1.65}
.fo-carta-testo p:last-child{margin-bottom:0}
/* l'etichetta va in fondo anche se le carte hanno testi di lunghezza diversa */
.fo-carta h3 + .tag,.fo-carta-testo + .tag{margin-top:auto}
.fo-carta-testo{margin-bottom:1.2rem}
.fo-carta .tag{align-self:flex-start;
  font-size:.74rem;font-weight:500;padding:.28rem .7rem;border-radius:100px;background:#fff;
  border:1px solid var(--filo);color:var(--grigio);line-height:1.4}
.fo-carta.finale{background:var(--ink);border-color:var(--ink);color:#fff}
.fo-carta.finale .num{color:var(--verde)}
.fo-carta.finale .fo-carta-testo p{color:#A9AECD}
.fo-carta.finale .tag{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.22);color:#fff}
.fo-carta.finale a{color:#fff}

/* --- LA FRASE: la fascia della home (home.css, «la frase»), copiata. --- */
.fo-frase{background:var(--ink);color:#fff;padding:2.25rem 0;text-align:center}
.fo-frase p{margin:0;font-family:var(--testo);font-style:italic;font-weight:300;
  font-size:clamp(1.07rem,calc(2.5vw - 2pt),1.54rem);line-height:1.4;color:#E2E4F0}
/* con la fotografia dietro: la stessa della home, trattata come lì — grigia,
   scurita, sotto la velina blu. L'altezza della fascia non cambia. */
.fo-frase.con-foto{position:relative;overflow:hidden}
.fo-frase.con-foto .dentro{position:relative}
.fo-frase .sfondo{position:absolute;inset:0}
.fo-frase .sfondo img{width:100%;height:100%;object-fit:cover;filter:grayscale(.85) brightness(.8) contrast(1.35)}
.fo-frase .sfondo::after{content:"";position:absolute;inset:0;background:radial-gradient(120% 90% at 68% 30%,rgba(18,20,58,.20) 0%,rgba(18,20,58,.72) 55%,rgba(18,20,58,.95) 100%),linear-gradient(180deg,rgba(18,20,58,.66),rgba(18,20,58,.30) 42%,rgba(18,20,58,.96))}
.fo-tricolore{display:block;width:78px;height:3px;border-radius:3px;margin:0 auto 1.5rem;
  background:linear-gradient(90deg,var(--rosso) 0 33.3%,#FFFFFF 33.3% 66.6%,var(--verde) 66.6% 100%)}

/* --- COME FUNZIONA: i passi illustrati --------------------------------- */
.fo-funziona{padding:4rem 0 1.4rem}
.fo-funziona-segue{padding-top:4rem}
.fo-funziona-testa{margin-bottom:3rem}
.fo-passo{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:3.4rem;align-items:center;
  margin-bottom:4.4rem}
/* il telefono è stretto: gli basta meno posto */
.fo-passo.fo-telefono{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
/* uno sì e uno no, la schermata passa dall'altra parte */
.fo-passo.fo-pari .fo-passo-testo{order:2}
.fo-passo.fo-telefono.fo-pari{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
.fo-passo.fo-computer.fo-pari{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
.fo-passo.senza-img{grid-template-columns:minmax(0,44rem)}
.fo-passo-img{display:flex;justify-content:center}
.fo-passo-img .fo-tel{max-width:270px}
.fo-passo-num{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;
  background:var(--nebbia);border:1px solid var(--filo);font-family:var(--display);font-weight:700;
  font-size:.95rem;color:var(--verde);margin-bottom:1.1rem}
.fo-passo h3{font-size:1.45rem;margin-bottom:.8rem}
.fo-passo .testo-scritto p{color:var(--grigio)}

/* --- CHI PUÒ ACCEDERE: il riquadro scuro di chiusura --- */
.fo-accesso{padding:3.6rem 0}
.fo-accesso-riquadro{background:var(--ink);color:#fff;border-radius:var(--r);padding:2.8rem 3rem;
}
.fo-accesso-riquadro > *{max-width:44rem}
.fo-accesso h2{color:#fff;font-size:1.8rem;margin-bottom:1.1rem}
.fo-accesso .testo-scritto p{color:#C9CDE4}
.fo-accesso .testo-scritto strong,.fo-accesso .testo-scritto b{color:#fff}
.fo-accesso .testo-scritto a{color:#fff}
.fo-accesso .fo-pulsanti{margin-top:1.4rem}

/* ===== tavoletta ========================================================= */
@media(max-width:900px){
  .fo-passo,.fo-passo.fo-telefono,.fo-passo.fo-telefono.fo-pari,.fo-passo.fo-computer.fo-pari{
    grid-template-columns:minmax(0,1fr);gap:1.8rem;margin-bottom:3.4rem}
  .fo-passo.fo-pari .fo-passo-testo{order:0}
  .con-telefono .fo-affiancato{grid-template-columns:minmax(0,1fr)}
}

/* ===== telefono ========================================================== */
@media(max-width:700px){
  .fo-capo{padding:2.4rem 0 2.6rem}
  .fo-capo.con-telefono .dentro{grid-template-columns:minmax(0,1fr);gap:1.6rem}
  .fo-capo.con-telefono .fo-capo-testo{padding-bottom:0}
  .fo-tel-capo{max-width:230px;margin-bottom:-70px}
  .fo-capo.con-libera .dentro{grid-template-columns:minmax(0,1fr)}
  .fo-capo.con-libera .fo-capo-testo{padding-bottom:0}
  .fo-libera{justify-self:center;max-width:300px;margin-bottom:-50px}
  .fo-capo .sotto{font-size:1rem}
  .fo-pulsanti{display:flex;flex-direction:column;align-items:stretch}
  .fo-pulsanti-riga{flex-direction:column}
  .fo-pulsanti .bottone{width:100%}
  .fo-testo,.fo-accesso{padding:2.4rem 0}
  .fo-capo.con-telefono + .fo-testo{padding-top:4.4rem}
  .fo-testo h2,.fo-accesso h2,.fo-funziona h2{font-size:1.5rem}
  .fo-funziona{padding:2.6rem 0 .6rem}
  .fo-funziona-segue{padding-top:2.6rem}
  .fo-funziona-testa{margin-bottom:2rem}
  .fo-passo h3{font-size:1.25rem}
  .fo-passo-img .fo-tel,.fo-tel-notte{max-width:240px}
  .fo-carta{padding:1.5rem}
  .fo-accesso-riquadro{padding:2rem 1.4rem}
}
@media(prefers-reduced-motion:reduce){
  .fo-carta,.fo-pulsanti .bottone{transition:none}
  .fo-carta:hover{transform:none}
}