/* Studio MF Service — pagina /corsi/ (04/10/2026)
   Si carica solo qui, dopo style.css: la linea grafica (colori di :root, Archivo e Instrument Sans,
   cornice del marchio, segno sopra i titoli, pulsanti, fascia navy, movimento) è quella di style.css.
   Qui c'è solo la STRUTTURA della pagina (Design/STRUTTURE-PAGINE.md, riga «Corsi»):
   · apertura: la foto (14) in fascia alta e il titolo in un riquadro bianco che sale dal basso,
     a fianco la fascia evidenziata dei corsi in azienda;
   · modulo-firma: il CATALOGO DEI CORSI, ogni gruppo una scheda-catalogo con le voci in righe
     e il prezzo in una colonna azzurra a destra, sotto il quadrato col simbolo dell'euro;
   · aggiornamenti come scadenzario (linea del tempo che si disegna), formazione finanziata
     in un riquadro con la cornice doppia del logo, «come funziona» in quattro passi verticali. */

/* ── apertura ─────────────────────────────────────────── */
.corsi-apertura{padding:clamp(10px,1.3vw,18px) 0 0;background:var(--soft)}
.corsi-apertura::before{-webkit-mask:radial-gradient(60% 50% at 82% 100%,#000 0%,transparent 75%);mask:radial-gradient(60% 50% at 82% 100%,#000 0%,transparent 75%)}
.corsi-apertura__fascia{width:min(100% - clamp(20px,2.6vw,36px), 1400px);margin-inline:auto}
.corsi-apertura__fascia .photo{height:clamp(300px,31vw,460px);border-radius:var(--r-lg)}
.corsi-apertura__fascia .photo::after{inset:clamp(12px,1.2vw,18px)}
.corsi-apertura__fascia .photo img{object-position:56% 6%}
.corsi-apertura__base{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);align-items:end;gap:clamp(16px,1.8vw,26px);
  margin-top:calc(-1 * clamp(150px,13.5vw,210px))}
.corsi-apertura__riquadro{position:relative;padding:clamp(30px,3.2vw,50px) clamp(26px,3.4vw,54px) clamp(30px,3vw,44px);background:var(--white);border:1px solid var(--border);border-radius:var(--r);box-shadow:var(--sh-3)}
/* il filo azzurro in testa al riquadro, come le schede della home */
.corsi-apertura__riquadro::before{content:"";position:absolute;left:-1px;right:-1px;top:-1px;height:3px;border-radius:var(--r) var(--r) 0 0;background:var(--primary)}
.corsi-apertura .h1{font-size:clamp(34px,3.5vw,54px);line-height:1.04;font-stretch:var(--wide);max-width:13.5em}
.corsi-apertura__lead{max-width:30em;color:var(--heading);margin-bottom:clamp(24px,2.4vw,34px)}
/* la fascia evidenziata: i corsi anche in azienda */
.corsi-apertura__azienda{position:relative;display:flex;align-items:center;gap:clamp(16px,1.6vw,22px);padding:clamp(20px,2vw,28px) clamp(20px,2.2vw,32px);
  background:var(--navy);border-radius:var(--r);color:var(--white);box-shadow:var(--sh-2);overflow:hidden;isolation:isolate}
.corsi-apertura__azienda::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(80% 120% at 100% 0%,rgba(53,104,154,.4),transparent 65%)}
.corsi-apertura__azienda .sq--band{--sq:clamp(56px,4.6vw,66px)}
.corsi-apertura__azienda-testo{font-family:var(--font-display);font-stretch:var(--wide);font-size:clamp(17px,1.4vw,21px);font-weight:600;line-height:1.3;letter-spacing:-.008em;text-wrap:balance}

/* ── catalogo dei corsi ───────────────────────────────── */
.catalogo{background:var(--soft);padding:clamp(48px,5vw,76px) 0 var(--sec)}
.catalogo__griglia{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(16px,1.8vw,26px)}
@media (min-width:1100px){
  .catalogo__griglia{grid-template-columns:repeat(2,minmax(0,1fr))}
  .scheda-corso--larga{grid-column:1/-1}
}

.scheda-corso{--col:clamp(128px,11.4vw,164px);--pad:clamp(22px,2.3vw,34px);position:relative;display:flex;flex-direction:column;min-width:0;
  background:var(--white);border:1px solid var(--border);border-radius:var(--r);box-shadow:var(--sh-1);overflow:hidden;
  transition:box-shadow .45s var(--ease),border-color .35s ease}
.js .scheda-corso.reveal.in{transition:opacity .9s var(--ease-out),transform .9s var(--ease-out),box-shadow .45s var(--ease),border-color .35s ease;
  transition-delay:calc(var(--d,0) * 80ms),calc(var(--d,0) * 80ms),0s,0s}
.scheda-corso:hover{border-color:#C9D9E7;box-shadow:var(--sh-2)}
/* la colonna dei prezzi: azzurra, a tutta altezza, col filo azzurro in testa */
@media (min-width:641px){
  .scheda-corso{background:linear-gradient(to left,var(--icon-bg) var(--col),rgba(53,104,154,.2) var(--col) calc(var(--col) + 1px),var(--white) calc(var(--col) + 1px))}
  .scheda-corso::before{content:"";position:absolute;top:-1px;right:-1px;width:calc(var(--col) + 1px);height:3px;background:var(--primary)}
}
.scheda-corso__testa{display:grid;grid-template-columns:minmax(0,1fr) var(--col)}
.scheda-corso__intro{min-width:0;padding:var(--pad) var(--pad) clamp(20px,2vw,28px)}
.scheda-corso__nome{display:flex;align-items:center;gap:clamp(14px,1.4vw,18px);margin-bottom:clamp(14px,1.4vw,18px)}
.scheda-corso__nome .sq{--sq:clamp(48px,4vw,56px)}
.scheda-corso:hover .scheda-corso__nome .sq{background:var(--navy);color:var(--white)}
.scheda-corso:hover .scheda-corso__nome .sq::after{border-color:rgba(255,255,255,.36)}
/* nel catalogo il quadrato dell'icona fa da segno: il filo sopra il titolo non si ripete */
.h2.scheda-corso__titolo{font-size:clamp(22px,1.85vw,28px);line-height:1.12;margin:0}
.h2.scheda-corso__titolo::before{display:none}
.scheda-corso__testi > * + *{margin-top:10px}
.scheda-corso__testi .text{max-width:40em}
/* nella scheda larga (primo soccorso · antincendio) i due testi stanno affiancati */
@media (min-width:1100px){
  .scheda-corso__testi--due{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(26px,3.4vw,56px);row-gap:10px}
  .scheda-corso__testi--due > * + *{margin-top:0}
  .scheda-corso__testi--due > :first-child{grid-column:1/-1}
}
/* in testa alla colonna: il quadrato del marchio con il simbolo dell'euro */
.sq.scheda-corso__euro{--sq:clamp(46px,3.6vw,52px);justify-self:end;align-self:start;margin:var(--pad) clamp(18px,1.9vw,28px) 0 0;background:var(--white);color:var(--primary);
  font-family:var(--font-display);font-stretch:var(--wide);font-size:clamp(19px,1.5vw,22px);font-weight:650;line-height:1}

/* le voci: il nome a sinistra con i puntini fino alla colonna, il prezzo nella colonna */
.scheda-corso__voci{margin-top:auto;border-top:1px solid var(--border)}
.scheda-corso__voci li,.scheda-corso__riga{display:grid;grid-template-columns:minmax(0,1fr) var(--col);align-items:center;transition:background-color .25s ease}
.scheda-corso__voci li + li{border-top:1px solid var(--border)}
.scheda-corso__voci li:hover{background:rgba(53,104,154,.035)}
.scheda-corso__voce{display:flex;align-items:flex-end;gap:14px;min-width:0;padding:clamp(14px,1.3vw,18px) clamp(16px,1.6vw,22px) clamp(14px,1.3vw,18px) var(--pad);
  font-size:clamp(15.5px,1.15vw,17px);line-height:1.4;color:var(--heading)}
.scheda-corso__voce::after{content:"";flex:1 0 24px;margin-bottom:.38em;border-bottom:1px dotted rgba(53,104,154,.5)}
.scheda-corso__voce--nota{font-weight:600}
.scheda-corso__voci .price-card__price{justify-content:flex-end;flex-wrap:wrap;column-gap:5px;padding:12px clamp(18px,1.9vw,28px) 12px 10px;text-align:right}
.scheda-corso__voci .price-card__price--quote small{white-space:normal;line-height:1.25}
.scheda-corso__segno{display:flex;justify-content:flex-end;padding:12px clamp(18px,1.9vw,28px)}
.scheda-corso__segno .icon{width:26px;height:26px;color:var(--primary)}
/* solo le voci, senza testa (negli aggiornamenti) */
.scheda-corso--solo-voci .scheda-corso__voci{margin-top:0;border-top:0}
.scheda-corso--solo-voci .scheda-corso__voci li:first-child .price-card__price,
.scheda-corso--solo-voci .scheda-corso__voci li:first-child .scheda-corso__voce{padding-top:clamp(18px,1.6vw,22px)}

/* ── gli aggiornamenti: lo scadenzario ────────────────── */
.scadenze{background:var(--white)}
.scadenze__testa{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(20px,5vw,88px);align-items:end;margin-bottom:clamp(28px,3vw,44px)}
.scadenze__testa .h2{margin-bottom:0}
.scadenze__lead{color:var(--heading);max-width:30em}
.scadenze__lead strong{font-weight:650;color:var(--primary)}

.scadenzario{--etichetta:clamp(150px,15vw,210px);position:relative;isolation:isolate;padding:clamp(18px,2vw,28px) clamp(22px,3vw,44px) clamp(22px,2.4vw,34px);
  background:var(--soft);border:1px solid rgba(53,104,154,.14);border-radius:var(--r);overflow:hidden}
/* la carta millimetrata del disegno tecnico, come nell'hero della home */
.scadenzario::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(rgba(53,104,154,.07) 1px,transparent 1px) 0 0/32px 32px,linear-gradient(90deg,rgba(53,104,154,.07) 1px,transparent 1px) 0 0/32px 32px}
.scadenzario__riga{display:grid;grid-template-columns:var(--etichetta) minmax(0,1fr);align-items:center;min-height:clamp(64px,5.4vw,78px)}
.scadenzario__riga + .scadenzario__riga{border-top:1px solid rgba(53,104,154,.16)}
.scadenzario__riga--anni{min-height:0;padding-bottom:12px}
.scadenzario__nome{font-family:var(--font-display);font-stretch:var(--wide);font-size:clamp(15.5px,1.2vw,18px);font-weight:620;color:var(--heading);letter-spacing:-.006em}
/* il binario: le linee verticali dei quattro anni e la linea che si disegna */
.scadenzario__binario{position:relative;align-self:stretch;margin:0 14px}
.scadenzario__riga:not(.scadenzario__riga--anni) .scadenzario__binario{
  background:linear-gradient(rgba(53,104,154,.28),rgba(53,104,154,.28)) 0 0/1px 100% no-repeat,linear-gradient(rgba(53,104,154,.28),rgba(53,104,154,.28)) 33.333% 0/1px 100% no-repeat,
             linear-gradient(rgba(53,104,154,.28),rgba(53,104,154,.28)) 66.666% 0/1px 100% no-repeat,linear-gradient(rgba(53,104,154,.28),rgba(53,104,154,.28)) 100% 0/1px 100% no-repeat}
.scadenzario__riga:not(.scadenzario__riga--anni) .scadenzario__binario::before{content:"";position:absolute;left:0;right:0;top:50%;height:2px;margin-top:-1px;background:var(--primary);
  transform-origin:left;transform:scaleX(var(--draw,1))}
.js .scadenzario{--draw:0}
.js .scadenzario.in{--draw:1}
.js .scadenzario__binario::before{transition:transform 1.8s var(--ease-out) .2s}
.scadenzario__anni{list-style:none;margin:0 14px;padding:0;height:22px}
.scadenzario__anni li{position:absolute;top:0;left:calc(var(--x) / 3 * 100%);transform:translateX(-50%);font-family:var(--font-display);font-stretch:var(--wide);font-size:15px;font-weight:650;
  color:var(--navy);font-variant-numeric:tabular-nums lining-nums;line-height:22px;white-space:nowrap}
/* l'unità di misura, nella colonna dei nomi */
.scadenzario__unita{font-family:var(--font);font-stretch:100%;font-size:13px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--body)}
/* le tappe: il quadrato del marchio in piccolo (navy col filo bianco dentro); la prima è il corso */
.scadenzario__tappa{position:absolute;top:50%;left:calc(var(--x) / 3 * 100%);width:20px;height:20px;margin:-10px 0 0 -10px;background:var(--navy);border-radius:3px;
  box-shadow:0 0 0 4px var(--soft);opacity:var(--draw,1);transform:scale(calc(.4 + var(--draw,1) * .6))}
.scadenzario__tappa::after{content:"";position:absolute;inset:4px;border:1px solid rgba(255,255,255,.55);border-radius:1px}
.scadenzario__tappa--corso{background:var(--white);border:1.5px solid var(--primary)}
.scadenzario__tappa--corso::after{inset:3px;border-color:var(--line-steel)}
.js .scadenzario__tappa{transition:opacity .5s ease,transform .6s var(--ease-out);transition-delay:calc(.25s + var(--x) * .5s)}

.scadenze__piede{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(20px,5vw,88px);align-items:center;margin-top:clamp(26px,2.8vw,40px)}
.scadenze__piede .text{max-width:26em}

/* ── formazione finanziata: il riquadro con la cornice doppia del logo ── */
.finanziata{background:var(--white);padding-bottom:var(--sec)}
.finanziata__riquadro{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:clamp(20px,2.8vw,44px);align-items:center;
  padding:clamp(28px,3vw,46px) clamp(26px,3.4vw,52px);background:var(--card-soft);border:1px solid var(--border);border-radius:var(--r)}
.finanziata__riquadro::after{content:"";position:absolute;inset:clamp(7px,.7vw,10px);border:1px solid var(--line-steel);border-radius:var(--r-xs);pointer-events:none}
.finanziata__icona{--sq:clamp(60px,5.4vw,76px)}
.h2.finanziata__titolo{font-size:clamp(25px,2.3vw,34px);margin-bottom:8px}
.h2.finanziata__titolo::before{display:none}
.finanziata__testo .text{max-width:30em}
.finanziata__listino{padding-left:clamp(20px,2.8vw,44px);border-left:1px solid rgba(53,104,154,.2)}
.finanziata__listino li{display:flex;flex-direction:column;align-items:flex-end;gap:8px;text-align:right}
.finanziata__voce{font-size:clamp(14.5px,1.05vw,15.5px);line-height:1.4;color:var(--heading);max-width:15em}
.finanziata__listino .price-card__price b{font-size:clamp(26px,2.3vw,34px)}
/* 05/10 (M2): la docenza per i centri di formazione, nello stesso riquadro; il testo del cliente è lungo: più largo */
.docenza .finanziata__riquadro{grid-template-columns:auto minmax(0,1fr)}
.docenza .finanziata__testo .text{max-width:42em}
.docenza__azioni{margin-top:20px}

/* ── come funziona: quattro passi in verticale ────────── */
.percorso{background:var(--trust)}
.percorso__griglia{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);grid-template-areas:"testa passi" "azioni passi" ". passi";grid-template-rows:auto auto 1fr;
  column-gap:clamp(36px,6vw,110px);align-items:start}
.percorso__testa{grid-area:testa}
.percorso__azioni{grid-area:azioni;padding-top:clamp(8px,1vw,14px)}
.percorso__azioni .actions{flex-direction:column;align-items:flex-start}
.percorso__azioni .more{margin-top:clamp(22px,2.2vw,30px)}
.percorso__passi{grid-area:passi;list-style:none;margin:0;padding:0;border-bottom:1px solid rgba(53,104,154,.22)}
.percorso__passo{position:relative;display:grid;grid-template-columns:clamp(70px,7vw,104px) minmax(0,1fr);align-items:center;padding:clamp(22px,2.2vw,32px) 0}
/* il filo sopra ogni passo si disegna quando il passo entra */
.percorso__passo::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:rgba(53,104,154,.22);transform-origin:left}
.js .percorso__passo::before{transform:scaleX(0);transition:transform 1.1s var(--ease-out);transition-delay:calc(var(--d,0) * 120ms)}
.js .percorso__passo.in::before{transform:none}
/* il numero: Archivo larghissimo, solo il contorno, come la cornice del marchio */
.percorso__num{font-family:var(--font-display);font-stretch:112%;font-size:clamp(46px,4.8vw,74px);font-weight:700;line-height:.9;letter-spacing:-.03em;
  color:transparent;-webkit-text-stroke:1.5px var(--primary);font-variant-numeric:tabular-nums lining-nums}
.percorso__passo p{font-size:clamp(17px,1.4vw,21px);line-height:1.45;color:var(--heading);max-width:28em;text-wrap:pretty}
.percorso__passo a{color:var(--heading);text-decoration:underline;text-decoration-color:rgba(53,104,154,.4);text-underline-offset:4px;transition:color .2s ease,text-decoration-color .2s ease}
.percorso__passo a:hover{color:var(--primary);text-decoration-color:currentColor}

/* ═══ tablet ═══ */
@media (max-width:1099px){
  .corsi-apertura__base{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr)}
}
@media (max-width:959px){
  .corsi-apertura__base{grid-template-columns:minmax(0,1fr);margin-top:calc(-1 * clamp(64px,12vw,120px));gap:12px}
  .corsi-apertura__fascia .photo{height:clamp(240px,46vw,380px)}
  .scadenze__testa,.scadenze__piede{grid-template-columns:minmax(0,1fr)}
  .scadenze__testa .h2{margin-bottom:0}
  .finanziata__riquadro{grid-template-columns:auto minmax(0,1fr)}
  .finanziata__listino{grid-column:1/-1;padding:20px 0 0;border-left:0;border-top:1px solid rgba(53,104,154,.2)}
  .finanziata__listino li{flex-direction:row;align-items:baseline;justify-content:space-between;text-align:left;gap:16px}
  .percorso__griglia{grid-template-columns:minmax(0,1fr);grid-template-areas:"testa" "passi" "azioni";grid-template-rows:none}
  .percorso__azioni .actions{flex-direction:row;align-items:center}
  .percorso__azioni{padding:clamp(26px,4vw,36px) 0 0}
}

/* ═══ telefono ═══ */
@media (max-width:640px){
  .corsi-apertura{padding-top:10px}
  .corsi-apertura__fascia{width:calc(100% - 20px)}
  .corsi-apertura__fascia .photo{height:236px;border-radius:var(--r)}
  .corsi-apertura__fascia .photo::after{inset:10px}
  .corsi-apertura__fascia .photo img{object-position:60% 0}
  .corsi-apertura__base{margin-top:-58px}
  .corsi-apertura__riquadro{padding:26px 18px 24px}
  .corsi-apertura .h1{font-size:clamp(29px,8vw,34px)}
  .corsi-apertura__lead{font-size:16px;margin-bottom:22px}
  .corsi-apertura__azienda{padding:16px 16px;gap:14px}
  .corsi-apertura__azienda .sq--band{--sq:48px}
  .corsi-apertura__azienda-testo{font-family:var(--font);font-stretch:100%;font-size:16px;line-height:1.4;letter-spacing:0}

  .catalogo{padding:36px 0 var(--sec)}
  .catalogo__griglia{gap:14px}
  .scheda-corso{--col:96px;--pad:16px}
  .scheda-corso__testa{grid-template-columns:minmax(0,1fr)}
  .sq.scheda-corso__euro{display:none}
  .scheda-corso__intro{padding:20px 16px 18px}
  .scheda-corso__nome{gap:12px;margin-bottom:12px}
  .scheda-corso__nome .sq{--sq:44px}
  .h2.scheda-corso__titolo{font-size:21px}
  .scheda-corso__testi .text{font-size:15px;line-height:1.55}
  /* da telefono la colonna dei prezzi è nelle righe: azzurra, stretta, sempre a destra */
  .scheda-corso__voci li,.scheda-corso__riga{background:linear-gradient(to left,var(--icon-bg) var(--col),var(--white) var(--col))}
  .scheda-corso__voci li:hover{background:linear-gradient(to left,var(--icon-bg) var(--col),var(--white) var(--col))}
  .scheda-corso__voce{padding:13px 12px 13px 16px;font-size:15px;gap:10px}
  .scheda-corso__voce::after{display:none}
  .scheda-corso__voci .price-card__price{padding:10px 12px 10px 6px}
  .scheda-corso__voci .price-card__price b{font-size:20px}
  .scheda-corso__voci .price-card__price--quote small{font-size:13.5px}
  .scheda-corso__segno{padding:10px 12px}

  .scadenze__lead{font-size:16px}
  .scadenzario{padding:12px 14px 16px}
  .scadenzario__riga{grid-template-columns:minmax(0,1fr);min-height:0;padding:12px 0 18px}
  .scadenzario__riga--anni{padding:4px 0 6px}
  .scadenzario__riga--anni .scadenzario__nome{display:none}
  .scadenzario__nome{font-size:15px;margin-bottom:12px}
  .scadenzario__binario{height:30px;margin:0 12px}
  .scadenzario__anni{margin:0 12px}
  .scadenzario__anni li{font-size:14px}
  .scadenzario__tappa{width:18px;height:18px;margin:-9px 0 0 -9px}

  .finanziata__riquadro{grid-template-columns:minmax(0,1fr);gap:16px;padding:26px 20px 22px}
  .docenza .finanziata__riquadro{grid-template-columns:minmax(0,1fr)}
  .finanziata__icona{--sq:52px}
  .h2.finanziata__titolo{font-size:24px}
  .finanziata__listino{padding-top:16px}
  .finanziata__listino li{flex-direction:column;align-items:flex-start;gap:6px}

  .percorso__passo{grid-template-columns:56px minmax(0,1fr);align-items:start;padding:18px 0}
  .percorso__num{font-size:42px;-webkit-text-stroke-width:1.25px}
  .percorso__passo p{font-size:15.5px;line-height:1.5}
}

/* telefoni stretti (360-389 px): un po' più di spazio al testo */
@media (max-width:389px){
  .corsi-apertura__riquadro{padding-inline:16px}
  .corsi-apertura__lead{font-size:15.5px}
  .scheda-corso{--pad:14px}
  .scheda-corso__intro{padding-inline:14px}
  .scheda-corso__testi .text{font-size:14.5px}
  .percorso__passo{grid-template-columns:48px minmax(0,1fr)}
  .percorso__passo p{font-size:15px}
}

@media (prefers-reduced-motion:reduce){
  .js .scadenzario{--draw:1}
  .js .percorso__passo::before{transform:none}
}