/* ================================================================
   Formazione ECM — Piano Formativo 2026 (verbatim Figma node 353:5)
   Scopato sotto .pf-formazione per non collidere col CSS del tema.
   Header e footer arrivano dal tema (get_header / get_footer).
================================================================ */
.pf-formazione{
  --primary:#1a5276;--secondary:#2e86c1;--accent:#5dade2;--dark:#1c2833;--gray:#7f8c8d;
  --light-gray:#bdc3c7;--bg-light:#f4f6f8;--bg-mid:#e5e8eb;--chip-bg:#eaf4fb;
  --red:#e74c3c;--orange:#f39c12;--green:#2ecc71;--accent-green:#80bd1b;--img-ph:#d1d4d6;
  /* gutter full-bleed: sfondi a tutta larghezza, contenuto in banda centrata max 1440 */
  --edge:max(0px,(100% - 1440px) / 2);
  width:100%;overflow-x:hidden;font-family:'Asap Condensed',sans-serif;color:var(--dark);
}
.pf-formazione *{box-sizing:border-box}

/* section title */
.pf-formazione .sec-head{display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center}
.pf-formazione .sec-eyebrow{font-weight:600;color:var(--secondary);font-size:13px;letter-spacing:1.04px}
.pf-formazione .sec-title{font-weight:800;color:var(--dark);font-size:42px;line-height:1.05}

/* ===== Hero ===== */
.pf-formazione .hero{background:var(--bg-light);display:flex;gap:64px;align-items:center;padding:88px calc(var(--edge) + 120px) 56px}
.pf-formazione .hero-left{width:620px;display:flex;flex-direction:column;gap:28px;align-items:flex-start}
.pf-formazione .eyebrow-pill{background:var(--primary);border-radius:20px;padding:8px 18px;color:#fff;font-size:13px;font-weight:600;letter-spacing:1.04px}
.pf-formazione .hero-h1{font-weight:900;font-size:56px;line-height:62px;color:var(--dark);width:620px}
.pf-formazione .hero-sub{font-weight:400;font-size:20px;line-height:30px;color:var(--gray);width:620px}
.pf-formazione .cta-row{display:flex;gap:16px;align-items:center}
.pf-formazione .btn-lg{height:56px;padding:0 28px;border-radius:6px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:20px;font-weight:600;white-space:nowrap;text-decoration:none}
.pf-formazione .btn-lg.primary{background:var(--primary)}
.pf-formazione .btn-lg.secondary{background:var(--secondary)}
.pf-formazione .hero-img{width:556px;height:404px;background:var(--bg-mid);border:1px solid var(--light-gray);border-radius:8px;display:flex;align-items:center;justify-content:center;color:var(--gray);font-size:16px;font-weight:500}
/* ---- Riquadri con foto vera (modificatore condiviso) ----
   Le regole dei singoli riquadri restano come stato vuoto: senza .has-img
   tornano a mostrare il rettangolo grigio con l'etichetta. Solo longhand,
   niente shorthand "background", che azzererebbe l'URL messo inline dal
   template. Ritaglio centrato: l'hero e' piu' stretta della foto (1.376
   contro 1.90, taglio ai lati, barca intera), il banner congresso e' piu'
   largo (1.50 contro 1.04, taglio sopra/sotto, icone e tablet in campo). */
.pf-formazione .hero-img.has-img,
.pf-formazione .featured-img.has-img,
.pf-formazione .card .ico.has-img{background-size:cover;background-position:center;background-repeat:no-repeat}

/* ===== Dashboard metriche ===== */
.pf-formazione .metrics{background:var(--primary);display:flex;align-items:center;justify-content:space-between;padding:56px calc(var(--edge) + 120px)}
.pf-formazione .metric{display:flex;flex-direction:column;align-items:center;gap:8px;color:#fff}
.pf-formazione .metric .num{font-weight:900;font-size:52px;line-height:1}
.pf-formazione .metric .lbl{font-weight:400;font-size:14px;text-align:center;width:200px}
.pf-formazione .metric-sep{width:1px;height:64px;background:#fff;opacity:.22;border-radius:.5px}

/* ===== Calendario eventi ===== */
.pf-formazione .calendario{padding:112px 0}
.pf-formazione .featured{width:1200px;margin:48px auto 0;background:var(--primary);border-radius:12px;display:flex;overflow:hidden}
.pf-formazione .featured-img{width:480px;height:320px;background:var(--img-ph);display:flex;align-items:center;justify-content:center;color:var(--gray);font-size:14px;font-weight:500;flex-shrink:0}
.pf-formazione .featured-content{width:720px;height:320px;display:flex;flex-direction:column;justify-content:center;gap:20px;padding:48px 56px}
.pf-formazione .badge-pill{align-self:flex-start;background:var(--accent-green);border-radius:20px;padding:5px 14px;color:#fff;font-size:11px;font-weight:600;letter-spacing:1.1px}
.pf-formazione .featured-title{font-weight:700;font-size:32px;line-height:38px;color:#fff;width:608px}
.pf-formazione .featured-meta{display:flex;gap:20px;align-items:center;color:rgba(255,255,255,.9);font-size:14px;font-weight:500}
.pf-formazione .btn-white{background:#fff;height:48px;width:200px;border-radius:6px;display:flex;align-items:center;justify-content:center;color:var(--primary);font-size:16px;font-weight:600;text-decoration:none}
.pf-formazione .tabs{width:820px;margin:48px auto 0;background:var(--bg-light);border-radius:10px;padding:8px;display:flex;gap:4px}
.pf-formazione .tab{height:48px;width:199px;border-radius:8px;display:flex;align-items:center;justify-content:center;gap:10px;color:var(--gray);font-size:16px;font-weight:600}
.pf-formazione .tab.active{background:var(--primary);color:#fff}
.pf-formazione .tab .count{height:24px;width:32px;border-radius:12px;background:var(--light-gray);display:flex;align-items:center;justify-content:center;color:var(--dark);font-size:12px;font-weight:700}
.pf-formazione .tab.active .count{background:#fff;color:var(--primary)}
.pf-formazione .filter-row{width:1200px;margin:48px auto 0;display:flex;align-items:center;justify-content:space-between}
.pf-formazione .filters{display:flex;gap:12px}
.pf-formazione .filter{background:#fff;border:1px solid var(--light-gray);height:48px;width:220px;border-radius:6px;display:flex;align-items:center;justify-content:space-between;padding:0 16px}
.pf-formazione .filter .labels{display:flex;flex-direction:column;gap:2px}
.pf-formazione .filter .l-top{color:var(--gray);font-size:10px;font-weight:600;letter-spacing:.8px}
.pf-formazione .filter .l-val{color:var(--dark);font-size:14px;font-weight:600}
.pf-formazione .filter .caret{color:var(--gray);font-size:14px;font-weight:700}
.pf-formazione .filter-count{color:var(--gray);font-size:14px;font-weight:600}
.pf-formazione .events{width:1200px;margin:48px auto 0;display:flex;flex-direction:column;gap:12px}
.pf-formazione .ev{background:#fff;border:1px solid var(--light-gray);height:120px;border-radius:8px;display:flex;overflow:hidden}
.pf-formazione .ev-date{width:200px;flex-shrink:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:14px 12px;color:#fff;text-align:center}
.pf-formazione .ev-date .t{font-size:10px;font-weight:600;letter-spacing:1.2px;opacity:.9}
.pf-formazione .ev-date .d{font-size:44px;font-weight:700;line-height:1}
.pf-formazione .ev-date .m{font-size:13px;font-weight:700;opacity:.9}
.pf-formazione .ev-date.residenziale{background:var(--secondary)}
.pf-formazione .ev-date.congresso{background:var(--accent)}
.pf-formazione .ev-date.fad{background:var(--green)}
.pf-formazione .ev-body{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:center;gap:8px;padding:20px 24px}
.pf-formazione .chip-row{display:flex;gap:8px;align-items:center}
.pf-formazione .chip-region{background:var(--chip-bg);border-radius:99px;padding:5px 10px;color:var(--primary);font-size:11px;font-weight:600;letter-spacing:1.32px}
.pf-formazione .state{border-radius:99px;padding:4px 10px;color:#fff;font-size:10px;font-weight:600;letter-spacing:1px}
.pf-formazione .state.aperto{background:var(--green)}
.pf-formazione .state.esaurito{background:var(--red)}
.pf-formazione .state.prossimamente{background:var(--accent-green)}
.pf-formazione .ev-title{font-weight:700;font-size:18px;color:var(--dark);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pf-formazione .ev-title a{color:inherit;text-decoration:none}
.pf-formazione .ev-meta{display:flex;gap:8px;align-items:center;color:var(--gray);font-size:13px;white-space:nowrap}
.pf-formazione .ev-meta .nm{font-weight:600}
.pf-formazione .ev-buttons{display:flex;gap:10px;align-items:center;padding-right:24px;flex-shrink:0}
.pf-formazione .btn-out{background:#fff;border:1px solid var(--primary);border-radius:6px;padding:12px 18px;color:var(--primary);font-size:14px;font-weight:700;white-space:nowrap;text-decoration:none}
.pf-formazione .btn-pri{background:var(--primary);border-radius:6px;padding:12px 18px;color:#fff;font-size:14px;font-weight:700;white-space:nowrap;text-decoration:none}
.pf-formazione .calendar-cta{width:340px;height:48px;margin:48px auto 0;background:var(--secondary);border-radius:6px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:16px;font-weight:600;text-decoration:none}

/* ===== Offerta formativa ===== */
.pf-formazione .offerta{padding:112px 0;background:var(--bg-light)}
.pf-formazione .cards-grid{width:1200px;margin:56px auto 0;display:flex;gap:24px}
.pf-formazione .card{background:#fff;border:1px solid var(--light-gray);width:384px;height:320px;border-radius:8px;padding:32px 28px;display:flex;flex-direction:column;gap:16px;align-items:flex-start}
.pf-formazione .card .ico{width:64px;height:64px;border-radius:8px;background:var(--img-ph)}
.pf-formazione .card h3{font-weight:600;font-size:22px;line-height:28px;color:var(--dark);width:226px}
.pf-formazione .card p{font-weight:400;font-size:16px;line-height:22px;color:var(--gray);width:226px}
.pf-formazione .card .meta{background:var(--bg-light);border-radius:4px;padding:0 8px;color:var(--primary);font-size:14px;font-weight:600;letter-spacing:.56px;display:inline-flex;align-items:center;height:24px}

/* ===== Garanzia ===== */
.pf-formazione .garanzia{background:var(--chip-bg);padding:64px calc(var(--edge) + 120px);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;text-align:center}
.pf-formazione .garanzia .eyebrow{color:var(--secondary);font-size:13px;font-weight:600;letter-spacing:1.56px}
.pf-formazione .garanzia .h2{font-weight:700;font-size:32px;line-height:1.15;color:var(--dark);width:900px;max-width:100%}
.pf-formazione .garanzia .body{font-weight:400;font-size:16px;line-height:1.5;color:var(--gray);width:720px;max-width:100%}
.pf-formazione .link-arrow{color:var(--primary);font-size:15px;font-weight:600;text-decoration:none}

/* ===== Numeri / donut ===== */
.pf-formazione .numeri{padding:112px 0}
.pf-formazione .charts{width:1200px;margin:56px auto 0;display:flex;gap:24px}
.pf-formazione .chart{background:var(--bg-light);width:588px;height:380px;border-radius:12px;padding:32px 36px;display:flex;flex-direction:column;align-items:center;gap:20px}
.pf-formazione .chart .ctitle{font-weight:600;font-size:18px;color:var(--dark);text-align:center}
.pf-formazione .donut{position:relative;width:200px;height:200px;border-radius:50%}
.pf-formazione .donut::after{content:"";position:absolute;inset:30px;background:var(--bg-light);border-radius:50%}
.pf-formazione .donut .val{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;z-index:1}
.pf-formazione .donut.satisfaction{background:conic-gradient(var(--green) 0 var(--p,98%), rgba(189,195,199,.35) var(--p,98%) 100%)}
.pf-formazione .donut.satisfaction .val{color:var(--green);font-size:48px;font-weight:900}
.pf-formazione .donut.ecm{background:conic-gradient(var(--secondary) 0 var(--p,70%), var(--accent) var(--p,70%) 100%)}
.pf-formazione .donut.ecm .val{color:var(--dark);font-size:38px;font-weight:700}
.pf-formazione .legend{display:flex;gap:24px;align-items:center;justify-content:center;font-size:13px;font-weight:600}
.pf-formazione .legend .g{color:var(--green)} .pf-formazione .legend .mut{color:var(--gray);font-weight:400}
.pf-formazione .legend .b{color:var(--secondary)} .pf-formazione .legend .a{color:var(--accent)}

/* ===== Identità ===== */
.pf-formazione .identita{background:var(--bg-light);display:flex;gap:40px;align-items:center;padding:48px calc(var(--edge) + 120px)}
.pf-formazione .identita .avatar{width:104px;height:104px;border-radius:100px;background:var(--bg-mid);border:1px solid var(--light-gray);flex-shrink:0}
.pf-formazione .identita .content{display:flex;flex-direction:column;gap:10px;width:1056px;max-width:100%}
.pf-formazione .identita .eyebrow{color:var(--gray);font-size:12px;font-weight:600;letter-spacing:.96px}
.pf-formazione .identita .quote{font-weight:500;font-size:22px;line-height:30px;color:var(--dark);width:900px;max-width:100%}

/* ===== FAQ ===== */
.pf-formazione .faq{padding:112px 0}
.pf-formazione .faq-list{width:960px;max-width:100%;margin:40px auto 0;display:flex;flex-direction:column;gap:12px}
.pf-formazione .faq-item{background:#fff;border:1px solid var(--light-gray);border-radius:8px;padding:20px 28px;display:flex;flex-direction:column;gap:14px}
.pf-formazione .faq-q{display:flex;align-items:center;justify-content:space-between}
.pf-formazione .faq-q .q{font-weight:600;font-size:18px;color:var(--dark)}
.pf-formazione .faq-q .tg{font-weight:700;font-size:24px;color:var(--secondary)}
.pf-formazione .faq-a{font-weight:400;font-size:16px;line-height:24px;color:var(--gray)}

/* ===== Contatti ===== */
.pf-formazione .contatti{background:var(--secondary);padding:64px calc(var(--edge) + 120px);display:flex;flex-direction:column;align-items:center;gap:32px}
.pf-formazione .contatti .h2{font-weight:800;font-size:38px;color:#fff;text-align:center}
.pf-formazione .contatti .sub{font-weight:400;font-size:17px;color:rgba(255,255,255,.85);text-align:center;width:760px;max-width:100%}
.pf-formazione .info-row{display:flex;gap:40px;align-items:center;justify-content:center;flex-wrap:wrap}
.pf-formazione .contact-btn{border:1.5px solid rgba(255,255,255,.4);border-radius:6px;display:flex;align-items:center;text-decoration:none}
.pf-formazione .contact-btn .icon-cell{width:64px;height:64px;display:flex;align-items:center;justify-content:center}
/* Le due icone erano <img> con preserveAspectRatio="none": proporzioni
   20x14,3 e 19,2x20 schiacciate in un quadrato da 20, e per di più
   capovolte da uno scaleY(-1). Ora sono SVG del set, che ereditano il
   bianco del pulsante e mantengono le proprie proporzioni. */
/* Il bianco va dichiarato: .contact-btn è un <a> senza colore proprio,
   e l'icona ora eredita invece di avere il riempimento scritto dentro.
   Etichetta e valore hanno già i loro colori e non ne risentono. */
.pf-formazione .contact-btn .icon-cell{color:#fff}
.pf-formazione .contact-btn .icon-cell svg{width:28px;height:28px;display:block}
.pf-formazione .contact-btn .divider{width:1.5px;align-self:stretch;background:rgba(255,255,255,.4)}
.pf-formazione .contact-btn .cell{display:flex;flex-direction:column;gap:4px;justify-content:center;padding:12px 16px}
.pf-formazione .contact-btn .c-lbl{font-size:11px;font-weight:600;color:rgba(255,255,255,.6)}
.pf-formazione .contact-btn .c-val{font-size:20px;font-weight:600;color:#fff}

/* ===== Filtri — menu dropdown (Task 2.2) ===== */
.pf-formazione .filter{position:relative}
.pf-formazione .filter-menu{position:absolute;top:calc(100% + 4px);left:0;right:0;background:#fff;border:1px solid var(--light-gray);border-radius:6px;list-style:none;margin:0;padding:4px 0;z-index:20;box-shadow:0 6px 20px rgba(0,0,0,.12);max-height:280px;overflow:auto}
.pf-formazione .filter-menu li{padding:8px 16px;font-size:14px;color:var(--dark);cursor:pointer}
.pf-formazione .filter-menu li:hover{background:var(--bg-light)}

/* ===== Singolo corso (Task 2.3) ===== */

/* ---- Allineamento al Figma del 2026-08-14 ----
   Il canvas Piano Formativo usa DUE verdi diversi, da non confondere:
   --accent-green #80bd1b = accento nuovo, sul badge "EVENTO DI PUNTA" (354:39)
     e sullo stato "prossimamente" (1247:82, 1247:139): prima erano arancioni.
   --green #2ecc71 = verde di stato "aperto", blocco data FAD e donut (1248:3):
     resta com'era, il Figma non lo tocca. */

/* ================================================================
   RESPONSIVE — 2026-08-14
   ----------------------------------------------------------------
   <=1279px : contenitori resi fluidi. Il layout desktop e' cablato a
              1200/1440px e sotto i 1280 sbordava (nessun @media
              esisteva in questo file). Nessun effetto a >=1280px.
   <=767px  : design mobile VERBATIM dal Figma "Mobile — 375px"
              (canvas "Piano Formativo" 353:2, frame 359:37).
              Nodi citati per sezione nei commenti.
   Contenuto (testi, numero di card, numero di tab) NON modificato:
   il frame mobile e' la wireframe low-fi originale e la sua copy e'
   anteriore alle revisioni del frame desktop. Divergenze annotate
   con "DIVERGENZA".
================================================================ */

/* ---------------- Tablet / desktop stretto ---------------- */
@media (max-width:1279px){
  .pf-formazione .hero{padding:88px 40px 56px;gap:40px}
  .pf-formazione .hero-left{width:auto;flex:1 1 0;min-width:0}
  .pf-formazione .hero-h1,
  .pf-formazione .hero-sub{width:100%}
  .pf-formazione .hero-img{width:auto;flex:1 1 0;min-width:0;max-width:556px}

  .pf-formazione .metrics{padding:56px 40px;gap:16px}
  .pf-formazione .metric .lbl{width:auto}

  .pf-formazione .calendario,
  .pf-formazione .offerta,
  .pf-formazione .numeri,
  .pf-formazione .faq{padding-left:40px;padding-right:40px}
  .pf-formazione .garanzia,
  .pf-formazione .identita,
  .pf-formazione .contatti{padding-left:40px;padding-right:40px}

  .pf-formazione .featured,
  .pf-formazione .filter-row,
  .pf-formazione .events,
  .pf-formazione .cards-grid,
  .pf-formazione .charts,
  .pf-formazione .faq-list{width:100%;max-width:1200px}
  .pf-formazione .tabs{width:100%;max-width:820px}

  .pf-formazione .featured-img{width:40%;height:auto;min-height:280px}
  .pf-formazione .featured-content{width:60%;height:auto;min-height:320px}
  .pf-formazione .featured-title{width:100%}

  .pf-formazione .tab{width:auto;flex:1 1 0;min-width:0}
  .pf-formazione .filter{width:auto;flex:1 1 0;min-width:0}

  .pf-formazione .card{width:auto;flex:1 1 0;min-width:0;height:auto;min-height:320px}
  .pf-formazione .card h3,
  .pf-formazione .card p{width:100%}
  .pf-formazione .chart{width:auto;flex:1 1 0;min-width:0}

  .pf-formazione .ev{height:auto;min-height:120px}
  .pf-formazione .ev-title{white-space:normal}
  .pf-formazione .ev-meta{white-space:normal;flex-wrap:wrap}
  .pf-formazione .ev-buttons{flex-wrap:wrap;justify-content:flex-end;padding:14px 24px 14px 0}
}

/* ---------------- Mobile — Figma 359:37 ---------------- */
@media (max-width:767px){

  /* ===== m-header: non riprodotto.
     Il nodo Figma 359:39 e' uno stub low-fi (rettangolo grigio al
     posto del logo, nessun menu). La navbar reale del tema e' piu'
     completa: si lascia quella. ===== */

  /* ===== m-hero — 359:50 =====
     Ordine Figma: pill, h1, sottotitolo, immagine, bottoni.
     Nel markup l'immagine sta dopo i bottoni: si scioglie .hero-left
     con display:contents e si riordina. */
  .pf-formazione .hero{flex-direction:column;align-items:center;gap:20px;padding:40px 20px}
  .pf-formazione .hero-left{display:contents}
  .pf-formazione .eyebrow-pill{order:1;padding:6px 14px;font-size:11px;letter-spacing:.88px}
  .pf-formazione .hero-h1{order:2;width:100%;max-width:335px;font-size:32px;line-height:38px;text-align:center}
  .pf-formazione .hero-sub{order:3;width:100%;max-width:335px;font-size:15px;line-height:22px;text-align:center}
  .pf-formazione .hero-img{order:4;flex:0 0 auto;width:100%;max-width:335px;height:140px;border-radius:8px;font-size:12px}
  .pf-formazione .cta-row{order:5;flex-direction:column;gap:10px;width:100%;max-width:335px}
  .pf-formazione .btn-lg{width:100%;height:56px;padding:0 28px;font-size:20px}

  /* ===== m-metrics — 359:61 =====
     Da riga orizzontale a 5 righe numero/etichetta con filetti. */
  .pf-formazione .metrics{flex-direction:column;align-items:stretch;justify-content:flex-start;padding:28px 20px;gap:0}
  .pf-formazione .metric{flex-direction:row;align-items:center;justify-content:space-between;gap:12px;padding:16px 0}
  .pf-formazione .metric .num{font-size:32px;line-height:normal}
  .pf-formazione .metric .lbl{width:auto;font-size:14px;text-align:right;opacity:.75}
  .pf-formazione .metric-sep{width:100%;height:1px;border-radius:0}

  /* ===== m-calendario — 359:79 ===== */
  .pf-formazione .calendario{display:flex;flex-direction:column;align-items:center;gap:24px;padding:56px 20px}
  .pf-formazione .sec-head{gap:24px;width:100%;max-width:335px}
  .pf-formazione .sec-eyebrow{font-size:11px;letter-spacing:.88px}
  .pf-formazione .sec-title{font-size:28px;line-height:34px}
  .pf-formazione .featured,
  .pf-formazione .tabs,
  .pf-formazione .filter-row,
  .pf-formazione .events,
  .pf-formazione .calendar-cta{margin:0;width:100%;max-width:335px}

  /* featured — 359:82 */
  .pf-formazione .featured{flex-direction:column;border-radius:12px}
  .pf-formazione .featured-img{width:100%;height:140px;font-size:12px}
  .pf-formazione .featured-content{width:100%;height:auto;min-height:180px;justify-content:flex-start;gap:10px;padding:20px}
  .pf-formazione .badge-pill{padding:0 10px;font-size:9px;letter-spacing:.9px}
  .pf-formazione .featured-title{width:100%;font-size:20px;line-height:24px}
  .pf-formazione .featured-meta{gap:12px;font-size:12px;flex-wrap:wrap}
  /* DIVERGENZA: il frame Figma della CTA (359:90) e' 44x15 senza
     padding — auto-layout perso nella wireframe. Si usa il padding
     misurato sui bottoni delle card evento dello stesso frame
     (1253:20 → 10px 14px), che rende il tocco utilizzabile. */
  .pf-formazione .btn-white{width:auto;height:auto;align-self:flex-start;padding:10px 14px;font-size:13px;border-radius:6px}

  /* tabs — 366:49 (Figma ne ha 3, il sito 4: restano 4, vedi nota) */
  .pf-formazione .tabs{padding:6px;gap:4px;border-radius:10px}
  .pf-formazione .tab{width:auto;flex:1 1 0;min-width:0;height:44px;gap:8px;padding:0 10px;border-radius:7px;font-size:14px}
  .pf-formazione .tab .count{width:28px;height:20px;padding:0 6px;border-radius:10px;font-size:11px}

  /* filtri — 359:99 */
  .pf-formazione .filter-row{flex-direction:column;align-items:center;gap:24px}
  .pf-formazione .filters{width:100%;gap:8px}
  .pf-formazione .filter{width:auto;flex:1 1 0;min-width:0;height:44px;padding:0 14px;border-radius:6px}
  .pf-formazione .filter .labels{gap:1px}
  .pf-formazione .filter .l-top{font-size:9px;letter-spacing:.72px}
  .pf-formazione .filter .l-val{font-size:13px}
  .pf-formazione .filter .caret{font-size:12px}
  .pf-formazione .filter-count{font-size:12px}

  /* card evento — 1254:2 (istanza di 1253:*)
     Griglia: colonna data a sinistra su due righe (corpo + bottoni). */
  .pf-formazione .events{gap:24px}
  .pf-formazione .ev{display:grid;grid-template-columns:82px minmax(0,1fr);grid-template-areas:"date body" "date btns";height:auto;border-radius:8px}
  .pf-formazione .ev-date{grid-area:date;width:auto;padding:12px 6px;gap:2px}
  .pf-formazione .ev-date .t{font-size:9px;letter-spacing:1.08px}
  .pf-formazione .ev-date .d{font-size:34px}
  .pf-formazione .ev-date .m{font-size:11px}
  .pf-formazione .ev-body{grid-area:body;justify-content:flex-start;gap:8px;padding:14px 14px 0}
  .pf-formazione .chip-row{gap:6px;flex-wrap:wrap}
  .pf-formazione .chip-region{padding:4px 9px;font-size:10px;letter-spacing:1.2px}
  .pf-formazione .state{padding:4px 10px;font-size:10px;letter-spacing:1px}
  .pf-formazione .ev-title{font-size:13px;white-space:normal}
  .pf-formazione .ev-meta{font-size:10px;white-space:normal;flex-wrap:wrap;gap:4px}
  .pf-formazione .ev-buttons{grid-area:btns;align-items:flex-start;justify-content:flex-start;flex-wrap:wrap;gap:6px;padding:8px 14px 14px}
  .pf-formazione .btn-out,
  .pf-formazione .btn-pri{padding:10px 14px;font-size:12px;border-radius:6px}

  /* see-all — 366:141 */
  .pf-formazione .calendar-cta{height:80px;background:var(--bg-light);border:1px solid var(--light-gray);border-radius:10px;color:var(--secondary);font-size:16px;font-weight:600}

  /* ===== m-offerta — 360:44 ===== */
  .pf-formazione .offerta{display:flex;flex-direction:column;align-items:center;gap:24px;padding:56px 20px}
  .pf-formazione .cards-grid{margin:0;width:100%;max-width:335px;flex-direction:column;gap:24px}
  .pf-formazione .card{flex:0 0 auto;width:100%;height:auto;min-height:200px;gap:12px;padding:24px;border-radius:8px}
  .pf-formazione .card .ico{width:56px;height:56px;border-radius:8px}
  .pf-formazione .card h3{width:100%;font-size:20px;line-height:normal}
  .pf-formazione .card p{width:100%;max-width:287px;font-size:15px;line-height:22px}
  .pf-formazione .card .meta{height:auto;line-height:16px;padding:0 8px;font-size:14px;letter-spacing:.56px;border-radius:4px}

  /* ===== Garanzia =====
     DIVERGENZA: nel Figma mobile il Comitato Scientifico e' la 4a card
     di m-offerta ("Quattro strade, una sola qualita'"), non una sezione
     a se'. Il markup desktop ha 3 card + sezione separata: si mantiene
     la struttura e si applica la scala tipografica del frame mobile. */
  .pf-formazione .garanzia{gap:16px;padding:40px 20px}
  .pf-formazione .garanzia .eyebrow{font-size:11px;letter-spacing:.88px}
  .pf-formazione .garanzia .h2{width:100%;font-size:28px;line-height:34px}
  .pf-formazione .garanzia .body{width:100%;font-size:15px;line-height:22px}
  .pf-formazione .link-arrow{font-size:13px}

  /* ===== m-charts — 360:71 =====
     Ciambella 140px, spessore anello 26,6px misurato sull'SVG
     (r esterno 70, r interno 43,4). */
  .pf-formazione .numeri{display:flex;flex-direction:column;align-items:center;gap:24px;padding:56px 20px}
  .pf-formazione .charts{margin:0;width:100%;max-width:335px;flex-direction:column;gap:24px}
  .pf-formazione .chart{flex:0 0 auto;width:100%;height:300px;gap:16px;padding:28px;border-radius:12px}
  .pf-formazione .chart .ctitle{width:100%;max-width:279px;font-size:14px}
  .pf-formazione .donut{width:140px;height:140px}
  .pf-formazione .donut::after{inset:26.6px}
  .pf-formazione .donut.satisfaction .val{font-size:34px}
  .pf-formazione .donut.ecm .val{font-size:27px}
  .pf-formazione .legend{gap:16px;font-size:12px}
  /* nel Figma mobile la legenda "Soddisfatti" ha una sola voce */
  .pf-formazione .chart .legend .mut{display:none}

  /* ===== m-identity — 360:86 ===== */
  .pf-formazione .identita{flex-direction:column;align-items:center;gap:16px;padding:40px 20px;text-align:center}
  .pf-formazione .identita .avatar{width:80px;height:80px;border-radius:100px}
  .pf-formazione .identita .content{width:100%;align-items:center;gap:16px}
  .pf-formazione .identita .eyebrow{font-size:10px;letter-spacing:.8px}
  .pf-formazione .identita .quote{width:100%;max-width:335px;font-size:16px;line-height:24px}

  /* ===== m-faq — 360:91 ===== */
  .pf-formazione .faq{display:flex;flex-direction:column;align-items:center;gap:20px;padding:56px 20px}
  .pf-formazione .faq .sec-head{gap:20px}
  .pf-formazione .faq-list{margin:0;width:100%;max-width:335px;gap:10px}
  .pf-formazione .faq-item{min-height:56px;justify-content:center;gap:10px;padding:16px 20px;border-radius:8px}
  .pf-formazione .faq-q .q{font-size:14px}
  .pf-formazione .faq-q .tg{font-size:20px}
  .pf-formazione .faq-a{font-size:14px;line-height:20px}

  /* ===== m-contatti — 360:113 =====
     Il Figma mobile non ha i riquadri bordati del desktop: solo
     etichetta + valore centrati. */
  .pf-formazione .contatti{gap:20px;padding:48px 20px}
  .pf-formazione .contatti .h2{width:100%;max-width:335px;font-size:28px;line-height:34px}
  .pf-formazione .contatti .sub{width:100%;max-width:335px;font-size:14px}
  .pf-formazione .info-row{flex-direction:column;gap:20px;width:100%}
  .pf-formazione .contact-btn{flex-direction:column;align-items:center;gap:4px;border:0;border-radius:0}
  .pf-formazione .contact-btn .icon-cell,
  .pf-formazione .contact-btn .divider{display:none}
  .pf-formazione .contact-btn .cell{align-items:center;gap:4px;padding:0}
  .pf-formazione .contact-btn .c-lbl{font-size:10px;letter-spacing:.8px}
  .pf-formazione .contact-btn .c-val{font-size:18px}
  .pf-formazione .contact-btn[href^="mailto"] .c-val{text-decoration:underline}
}

/* ---- Fix da revisione indipendente 2026-08-14 (round 3) ----
   A 320px i 4 tab da 64px non contengono le etichette e il badge di
   "Regionali" finisce sopra la C di "Congresso": due per riga. */
@media (max-width:359px){
  .pf-formazione .tabs{flex-wrap:wrap}
  .pf-formazione .tab{flex:1 1 calc(50% - 2px);min-width:0}
}

/* ---- Icone del set al posto dei glifi (2026-10-08) ----
   anma_icon() stampa SVG da 1em con currentColor: misura e colore li
   decide il contenitore, già impostato più sopra. In linea col testo
   vanno abbassate di un filo perché non poggino sulla linea di base. */
.pf-formazione svg{vertical-align:-.15em}
.pf-formazione .caret svg,
.pf-formazione .faq-q .tg svg{vertical-align:0;display:block}
/* L'accordion delle FAQ non è cablato in questa pagina: la freccia
   della voce aperta sta in su, le altre in giù, come nel disegno. */
.pf-formazione .faq-q .tg{display:flex}
.pf-formazione .faq-q .tg--aperto svg{transform:rotate(180deg)}

/* ---- «Vedi di più» (2026-10-08) ----
   Riusa l'aspetto di .calendar-cta, che era un link: da <button>
   servono i reset che un <a> non richiedeva. */
.pf-formazione .events-more{border:none;cursor:pointer;font-family:inherit;letter-spacing:.04em}
.pf-formazione .events-more:hover{filter:brightness(1.08)}
.pf-formazione .events-more[hidden]{display:none}

/* ---- Allineamento icona-testo nelle CTA (2026-10-08) ----
   Erano link e pulsanti con l'icona separata dal testo da uno spazio
   battuto nel markup: larghezza dipendente dal font e possibilità di
   andare a capo fra icona e parola. Con inline-flex lo stacco è una
   misura, e l'icona si centra verticalmente da sola invece che con
   la correzione di linea di base. */
.pf-formazione .btn-out,
.pf-formazione .btn-pri,
.pf-formazione .link-arrow{display:inline-flex;align-items:center;gap:8px}
.pf-formazione .link-arrow{gap:6px}
.pf-formazione .calendar-cta{gap:8px}
/* Dentro un flex l'allineamento lo fa align-items. */
.pf-formazione .btn-out svg,
.pf-formazione .btn-pri svg,
.pf-formazione .link-arrow svg,
.pf-formazione .calendar-cta svg{vertical-align:0;display:block;flex-shrink:0}

/* ---- Glifi residui diventati icone (2026-10-20) ----
   anma_icon() stampa un SVG da 1em con currentColor: la misura la
   decide il font-size del contenitore. Dove il contenitore non era
   già flex, l'icona andrebbe sulla linea di base del testo invece
   che al suo centro. */

/* Calendario senza eventi (0.80.0) */
.pf-formazione .events-empty{margin:0;padding:24px 0;font-size:16px;color:var(--gray);text-align:center}