/* sistema.css: il percorso dei servizi, dalla consulenza alla formazione. Un solo componente,
   usato dalla home e dalla pagina Servizi, in entrambe le lingue (14/09/2026). */
/* Il titolo dei Servizi e' una frase lunga: sta su due righe al massimo, in un blocco largo due terzi. */
.percorso-intro{max-width:66.6%;margin-bottom:clamp(36px,5vw,64px)}
.percorso-intro h2{font-size:clamp(26px,2.15vw,31px);line-height:1.15;color:var(--notte);max-width:none}
@media (max-width:1080px){.percorso-intro{max-width:none}}
.percorso-intro p{font-size:clamp(19px,2vw,23px);color:var(--secondario);margin:18px 0 0;line-height:1.4}
/* Il sistema dei servizi (13/09/2026): la barra dalla consulenza alla formazione, e sotto le voci
   nell'ordine in cui ci stanno sopra. Ogni voce ha il suo punto sulla barra. Sotto i 1080 punti la barra
   diventa verticale e corre a sinistra delle voci, dalla consulenza in alto alla formazione in fondo. */
.sistema-barra{position:relative;display:flex;justify-content:space-between;gap:24px;padding-bottom:30px}
/* Il percorso: una linea di spessore costante, perche' nessuna tappa vale meno di un'altra. Entra
   tratteggiata dal margine della pagina fino alla prima tappa e prosegue oltre l'ultima, fino a una
   freccia piena nel margine opposto: il percorso non finisce con la formazione, va avanti. */
.sistema-barra::before{content:"";position:absolute;bottom:7px;left:calc(10px - var(--gutter));width:calc(var(--gutter) - 10px);border-top:4px dashed rgba(30,39,97,.4)}
.sistema-barra::after{content:"";position:absolute;left:0;right:calc(12px - var(--gutter));bottom:-4px;height:26px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M0 0L18 9L0 18L5 9Z' fill='%233BB5DF'/%3E%3C/svg%3E") right center/26px 26px no-repeat,linear-gradient(90deg,var(--notte),var(--oceano) 70%,var(--turchese)) left center/calc(100% - 18px) 4px no-repeat}
.sistema-polo{margin:0;font-size:16px;color:var(--secondario);line-height:1.35}
/* La frase sta sopra e il nome del servizio sotto: letti da sinistra a destra, i due poli fanno una
   frase sola, «Ti affianchiamo nei compiti… per renderti indipendente». */
.sistema-polo b{display:block;font-family:var(--display);font-size:clamp(18px,1.5vw,21px);font-weight:700;letter-spacing:-.01em;color:var(--notte);font-variation-settings:"wdth" 106}
.sistema-polo span{display:block;margin-top:4px;font-family:var(--display);font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--secondario)}
.sistema-polo--destra{text-align:right}
.sistema-polo--destra b{color:var(--oceano)}
.sistema-voci{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(20px,2.4vw,36px)}
.sistema-voce{--d:20px;--c:var(--notte);position:relative;padding-top:44px;display:flex;flex-direction:column}
.sistema-voce:nth-child(2){--c:#243F7E}
.sistema-voce:nth-child(3){--c:#28629F}
.sistema-voce:nth-child(4){--c:var(--oceano)}
.sistema-voce::before{content:"";position:absolute;top:calc(-9px - var(--d) / 2);left:0;width:var(--d);height:var(--d);border-radius:50%;background:var(--fondo);border:4px solid var(--c);box-sizing:border-box}
.sistema-foto{margin:0 0 18px;aspect-ratio:4/3;overflow:hidden;border-radius:4px;background:var(--fondo)}
.sistema-foto img{width:100%;height:100%;object-fit:cover;filter:saturate(.75) contrast(1.02);transition:transform .5s ease,filter .4s}
.sistema-voce:hover .sistema-foto img{transform:scale(1.03);filter:saturate(1)}
.sistema-nome{margin:0 0 8px;font-family:var(--display);font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--c)}
.sistema-voce h3{font-size:clamp(22px,1.9vw,26px);line-height:1.15;color:var(--notte);font-variation-settings:"wdth" 108;letter-spacing:-.015em;margin:0}
.sistema-frase{font-size:17px;font-style:italic;color:var(--notte);line-height:1.4;margin:14px 0 0}
.sistema-testo{font-size:16.5px;line-height:1.5;margin:12px 0 0;flex:1}
.sistema-voce dl{margin:18px 0 0;padding-top:14px;border-top:1px solid var(--bordo);font-size:15px;line-height:1.4}
.sistema-voce dt{font-family:var(--display);font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--secondario)}
/* «A chi si rivolge» e' un'etichetta a contorno nel colore della tappa: si stacca dal testo sotto senza aggiungere un colore pieno. */
.sistema-voce dt:first-of-type{display:inline-block;color:var(--c);border:1.5px solid var(--c);border-radius:3px;padding:3px 8px 2px;margin-bottom:6px}
.sistema-voce dd:first-of-type{font-family:var(--display);font-size:15.5px;font-weight:600;color:var(--notte);line-height:1.3;margin-bottom:14px}
.sistema-voce dd{margin:3px 0 12px;color:var(--testo)}
.sistema-voce dd:last-child{margin-bottom:0}
.sistema-voce .scopri{margin-top:18px;font-family:var(--display);font-weight:600;font-size:14px;color:var(--notte);display:inline-flex;align-items:center;gap:8px;justify-self:start;align-self:start}
.sistema-voce .scopri svg{width:16px;height:16px;transition:transform .2s}
.sistema-voce .scopri:hover svg{transform:translateX(4px)}
/* Le sette parti di ogni voce stanno sulle stesse righe delle voci accanto: i filetti di «Per chi»
   si allineano anche quando una frase va a capo una volta in piu'. */
@supports (grid-template-rows:subgrid){
  .sistema-voce{display:grid;grid-row:span 7;grid-template-rows:subgrid;row-gap:0}
  .sistema-testo{flex:none}
}
/* Sotto i 1080 punti il percorso diventa verticale e scende a sinistra delle voci, dalla
   consulenza in alto alla formazione in fondo, con la freccia in basso. */
@media (max-width:1080px){
  .sistema{position:relative;padding-left:34px;max-width:680px;display:flex;flex-direction:column}
  .sistema::before{content:"";position:absolute;left:0;top:0;bottom:0;width:18px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M0 0L9 18L18 0L9 5Z' fill='%233BB5DF'/%3E%3C/svg%3E") center bottom/18px 18px no-repeat,linear-gradient(180deg,var(--notte),var(--oceano) 70%,var(--turchese)) center 66px/4px calc(100% - 78px) no-repeat,repeating-linear-gradient(180deg,rgba(30,39,97,.4) 0 6px,transparent 6px 11px) center top/4px 66px no-repeat}
  .sistema-barra{display:contents}
  .sistema-barra::after,.sistema-barra::before{display:none}
  .sistema-polo--destra{order:3;text-align:left;padding-bottom:6px}
  .sistema-voci{order:2;grid-template-columns:1fr;row-gap:40px;margin:22px 0 30px}
  .sistema-voce{padding-top:0;display:flex;grid-row:auto}
  .sistema-foto{aspect-ratio:16/9}
  .sistema-voce::before{top:0;left:calc(-34px + 9px - var(--d) / 2)}
}
/* Il percorso si disegna una volta sola, quando entra nello schermo (14/09/2026): prima la
   frase della consulenza, poi la linea che corre verso destra accendendo le quattro tappe,
   infine la frase della formazione. La classe .anima la mette eg.js: senza script, o con il
   movimento ridotto, il percorso resta com'e', tutto visibile. */
@media (prefers-reduced-motion:no-preference){
  .sistema.anima .sistema-polo,.sistema.anima .sistema-voce>*{opacity:0}
  .sistema.anima .sistema-barra::before{opacity:0}
  .sistema.anima .sistema-barra::after{clip-path:inset(0 100% 0 0)}
  .sistema.anima .sistema-voce::before{transform:scale(0)}
  .sistema.anima.vista .sistema-polo{animation:sale .6s ease forwards}
  .sistema.anima.vista .sistema-barra::before{animation:sistema-appari .5s ease .25s forwards}
  .sistema.anima.vista .sistema-barra::after{animation:scorre 2s cubic-bezier(.4,0,.2,1) .5s forwards}
  .sistema.anima.vista .sistema-voce::before{animation:accendi .45s cubic-bezier(.3,1.6,.5,1) calc(.55s + var(--i) * .42s) forwards}
  .sistema.anima.vista .sistema-voce>*{animation:sale .6s ease calc(.7s + var(--i) * .42s) forwards}
  .sistema.anima.vista .sistema-polo--destra{animation-delay:2.35s}
  .sistema-voce:nth-child(1){--i:0}
  .sistema-voce:nth-child(2){--i:1}
  .sistema-voce:nth-child(3){--i:2}
  .sistema-voce:nth-child(4){--i:3}
  @keyframes sistema-appari{to{opacity:1}}
  @keyframes sale{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
  @keyframes scorre{to{clip-path:inset(0 0 0 0)}}
  @keyframes scende{to{clip-path:inset(0 0 0 0)}}
  @keyframes accendi{to{transform:scale(1)}}
}
@media (prefers-reduced-motion:no-preference) and (max-width:1080px){
  .sistema.anima::before{clip-path:inset(0 0 100% 0)}
  .sistema.anima.vista::before{animation:scende 2.2s cubic-bezier(.4,0,.2,1) .3s forwards}
}
/* L'avviso "in costruzione" (14/09/2026): si apre quando l'indirizzo punta a #in-costruzione,
   cioe' dal link di una tappa che non ha ancora la sua pagina, e si chiude con un altro link.
   Solo CSS: una comparsa breve e basta. */
.in-costruzione{display:none;position:fixed;inset:0;z-index:200;align-items:center;justify-content:center;padding:0 16px}
.in-costruzione:target{display:flex}
.in-costruzione-fondo{position:absolute;inset:0;background:rgba(20,27,69,.55)}
.in-costruzione-box{position:relative;background:var(--bianco);border-radius:6px;max-width:480px;width:100%;padding:32px 32px 28px;box-shadow:0 30px 60px -20px rgba(20,27,69,.5);border-top:4px solid var(--oceano)}
.in-costruzione-titolo{font-family:var(--display);font-size:clamp(22px,2vw,26px);font-weight:700;color:var(--notte);font-variation-settings:"wdth" 108;margin:8px 0 12px;line-height:1.15}
.in-costruzione-box p{margin:0;font-size:17px;line-height:1.5}
.in-costruzione-box .in-costruzione-azioni{margin-top:24px;display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.in-costruzione-chiudi{font-family:var(--display);font-weight:600;font-size:15px;color:var(--secondario)}
@media (prefers-reduced-motion:no-preference){
  .in-costruzione:target .in-costruzione-box{animation:sistema-avviso .25s ease-out}
  @keyframes sistema-avviso{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
}