/* La masterclass «Fiscalità delle holding» (sito/templates/sito/eventi/masterclass-fiscalita-delle-holding-2026-*.html e
   la pagina del corso nell'Academy): sopra fbm2026-iscrizione.css e shortmaster2026.css, da cui prende impianto e
   scheda. Qui gli archi d'oro della scaletta, i quattro tempi della holding, il nastro delle tre ore, il programma per
   tempi, il Q&A e il docente. */

.fbl { --mc-1: #0B4A73; --mc-2: #145F8E; --mc-3: #2273A3; --mc-4: #3A88B6; }

/* ── gli archi d'oro: il tratto delle tre ore si disegna una volta, all'arrivo ── */
.mc-archi { position: absolute; pointer-events: none; overflow: visible; }
.mc-archi-ore { stroke-dasharray: 100; stroke-dashoffset: 100; animation: mc-ore 2.2s cubic-bezier(0.6, 0, 0.2, 1) 0.5s forwards; }
.mc-archi-fine { opacity: 0; animation: mc-compare 0.4s ease 2.6s forwards; }
@keyframes mc-ore { to { stroke-dashoffset: 0; } }
@keyframes mc-compare { to { opacity: 1; } }

.mc-hero .fbl-hero-trama { opacity: 0.22; }
/* il quadrante gira intorno alla scheda d'iscrizione: le 3 a destra della scheda, le 6 sotto */
.mc-archi--hero { width: 760px; height: 760px; left: calc(50% + 10px); top: -120px; }
.mc-hero .fbl-hero-in { min-height: 560px; }
.mc .fbl-h1 em { max-width: 15em; }

/* il docente nella hero: il ritratto nel cerchio d'oro, il nome, il ruolo */
.mc-hero-docente { display: inline-flex; align-items: center; gap: 16px; padding: 22px 0 0; border-top: 1px solid rgba(255, 255, 255, 0.14);
                   color: #fff; text-decoration: none; min-width: min(100%, 420px); }
.mc-hero-volto { flex: none; display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; overflow: hidden;
                 background: var(--navy); box-shadow: 0 0 0 2px var(--notte), 0 0 0 3.5px var(--oro-chiaro);
                 font: 400 22px/1 var(--serif); color: var(--oro-chiaro); }
.mc-hero-volto img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.05); }
.mc-hero-docente-et { display: block; margin-bottom: 4px; font-size: 10.5px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--oro-chiaro); }
.mc-hero-docente-nome { display: block; font: 400 22px/1.15 var(--serif); }
.mc-hero-docente-ruolo { display: block; margin-top: 2px; font-size: 14px; color: rgba(255, 255, 255, 0.72); }
.mc-hero-docente:hover .mc-hero-docente-nome { color: var(--oro-chiaro); }

/* ── i quattro tempi della holding, sul filo d'oro ── */
.mc-fasi { list-style: none; margin: 34px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 18px;
           position: relative; max-width: 780px; }
.mc-fasi::before { content: ""; position: absolute; left: 7px; right: 7px; top: 7px; height: 2px;
                   background: linear-gradient(90deg, var(--oro), var(--oro-chiaro) 70%, rgba(217, 190, 122, 0.25)); }
.mc-fase { position: relative; display: flex; flex-direction: column; gap: 6px; padding-top: 30px; }
.mc-fase-punto { position: absolute; top: 0; left: 0; width: 16px; height: 16px; border-radius: 50%; background: #fff;
                 box-shadow: inset 0 0 0 4px var(--oro); }
.mc-fase--1 .mc-fase-punto { background: var(--oro); box-shadow: 0 0 0 4px rgba(190, 154, 78, 0.18); }
.mc-fase-moduli { font-size: 10.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: #92722B; font-variant-numeric: tabular-nums; }
.mc-fase-titolo { font: 400 23px/1.1 var(--serif); color: var(--navy); }
.mc-fase-sotto { font-size: 14px; line-height: 1.45; color: var(--tenue); }

/* ── il nastro delle tre ore: un tratto per modulo, largo quanto i suoi minuti ── */
.mc-nastro { display: flex; gap: 3px; max-width: 780px; height: 74px; }
.mc-tratto { flex: var(--minuti) 1 0; min-width: 0; position: relative; display: flex; flex-direction: column; justify-content: space-between;
             padding: 10px 9px 9px; color: #fff; text-decoration: none; background: var(--mc-1);
             transition: transform 0.25s cubic-bezier(0.2, 0.7, 0.2, 1), filter 0.25s ease; }
.mc-tratto:first-child { border-radius: 12px 0 0 12px; }
.mc-tratto:last-child { border-radius: 0 12px 12px 0; }
.mc-tratto--1 { background: var(--mc-1); }
.mc-tratto--2 { background: var(--mc-2); }
.mc-tratto--3 { background: var(--mc-3); }
.mc-tratto--4 { background: var(--mc-4); }
.mc-tratto--0 { background: var(--oro); color: var(--notte); }
.mc-tratto-num { font: 400 20px/1 var(--serif); font-variant-numeric: tabular-nums; }
.mc-tratto-min { font-size: 11.5px; font-weight: 600; opacity: 0.75; font-variant-numeric: tabular-nums; }
.mc-tratto--stretto { padding-left: 5px; padding-right: 5px; }
.mc-tratto--stretto .mc-tratto-num { font-size: 15px; }
.mc-tratto:hover, .mc-tratto:focus-visible { transform: translateY(-4px); filter: brightness(1.12); z-index: 2; }
.mc-tratto:focus-visible { outline: 2px solid var(--oro); outline-offset: 3px; }
/* il titolo del modulo, sopra il tratto, al passaggio */
.mc-tratto::after { content: attr(data-titolo); position: absolute; left: 50%; bottom: calc(100% + 10px); z-index: 3; width: max-content; max-width: 260px;
                    padding: 8px 12px; border-radius: 8px; background: var(--notte); color: #fff; font: 500 13px/1.35 var(--sans);
                    box-shadow: 0 12px 30px -12px rgba(2, 27, 46, 0.6); opacity: 0; transform: translate(-50%, 4px);
                    transition: opacity 0.18s ease, transform 0.18s ease; pointer-events: none; white-space: normal; }
.mc-tratto:first-child::after { left: 0; transform: translate(0, 4px); }
.mc-tratto:last-child::after { left: auto; right: 0; transform: translate(0, 4px); }
.mc-tratto:hover::after, .mc-tratto:focus-visible::after { opacity: 1; transform: translate(-50%, 0); }
.mc-tratto:first-child:hover::after, .mc-tratto:first-child:focus-visible::after,
.mc-tratto:last-child:hover::after, .mc-tratto:last-child:focus-visible::after { transform: translate(0, 0); }
.mc-tacche { position: relative; max-width: 780px; height: 26px; margin-top: 8px; }
.mc-tacche span { position: absolute; top: 0; transform: translateX(-50%); padding-top: 8px; font-size: 12.5px; font-weight: 600; color: var(--navy);
                  font-variant-numeric: tabular-nums; }
.mc-tacche span::before { content: ""; position: absolute; top: 0; left: 50%; width: 1px; height: 6px; background: rgba(0, 61, 98, 0.35); }
.mc-tacche span:first-child { transform: none; }
.mc-tacche span:first-child::before { left: 0; }
.mc-tacche span:last-child { transform: translateX(-100%); }
.mc-tacche span:last-child::before { left: auto; right: 0; }
.mc-legenda { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: 13px; color: var(--tenue); }
.mc-legenda li { display: inline-flex; align-items: center; gap: 8px; }
.mc-legenda-colore { width: 12px; height: 12px; border-radius: 3px; }

/* ── il programma, tempo per tempo ── */
.mc-area + .mc-area { margin-top: 30px; }
.mc-area-testa { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; padding-bottom: 12px; border-bottom: 2px solid var(--oro); }
.mc-area-num { font: 400 24px/1.15 var(--serif); color: var(--navy); }
.mc-area-sotto { margin: 0; font: italic 400 15.5px/1.4 var(--serif); color: var(--tenue); }
.mc-moduli { list-style: none; margin: 0; padding: 0; }
.mc-modulo { display: grid; grid-template-columns: 118px 52px minmax(0, 1fr); gap: 0 14px; padding: 22px 0; border-bottom: 1px solid var(--linea);
             scroll-margin-top: calc(var(--fbl-testata) + var(--fbl-sotto) + 16px); }
.mc-modulo:target { animation: mc-evidenzia 1.6s ease; }
@keyframes mc-evidenzia { from { background: rgba(217, 190, 122, 0.28); } to { background: transparent; } }
.mc-modulo-ora { display: flex; flex-direction: column; gap: 3px; padding-top: 4px; font-size: 14px; font-weight: 700; color: var(--navy);
                 font-variant-numeric: tabular-nums; }
.mc-modulo-min { font-size: 12.5px; font-weight: 500; color: var(--tenue); }
.mc-modulo-num { font: 400 26px/1.1 var(--serif); color: var(--oro); font-variant-numeric: tabular-nums; }
.mc-modulo-titolo { margin: 2px 0 10px; font: 400 21px/1.25 var(--serif); color: var(--navy); }
.mc-punti { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.mc-punti li { position: relative; padding-left: 22px; font-size: 15px; line-height: 1.55; color: #33475A; }
.mc-punti li::before { content: ""; position: absolute; left: 0; top: 0.78em; width: 11px; height: 2px; background: var(--oro); }
.mc-modulo--qa { margin-top: 18px; padding: 22px 18px; border: 0; border-radius: 14px; background: var(--sabbia); box-shadow: inset 3px 0 0 var(--oro); }
.mc-modulo--qa .mc-modulo-num { font-size: 21px; padding-top: 3px; }
.mc-qa-testo { margin: 0; font: italic 400 16px/1.5 var(--serif); color: var(--tenue); }
.mc-nascosto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ── il Q&A: la carta scura con il punto di domanda d'oro ── */
.mc-qa-in { position: relative; overflow: hidden; display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 26px; align-items: start;
            max-width: 780px; padding: 34px 36px; border-radius: 18px; background: var(--notte); color: #fff;
            box-shadow: 0 40px 80px -50px rgba(0, 61, 98, 0.8); }
.mc-qa-in { isolation: isolate; }
.mc-archi--qa { z-index: -1; width: 420px; height: 420px; right: -170px; top: -150px; }
.mc-qa-segno { font: italic 400 112px/0.8 var(--serif); color: var(--oro-chiaro); }
.mc-qa .fbl-etichetta { color: rgba(255, 255, 255, 0.62); }
.mc-qa .fbl-h2 { color: #fff; margin-bottom: 14px; }
.mc-qa p { position: relative; z-index: 1; margin: 0; max-width: 36em; font-size: 16px; line-height: 1.65; color: rgba(255, 255, 255, 0.82); }

/* ── il docente ── */
.mc-docente { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 40px; align-items: center; max-width: 780px; }
.mc-docente-foto { position: relative; width: 220px; height: 220px; margin: 20px; border-radius: 50%; }
.mc-docente-foto img, .mc-docente-iniziali { position: relative; z-index: 1; display: grid; place-items: center; width: 100%; height: 100%;
                                             border-radius: 50%; object-fit: cover; background: var(--navy);
                                             box-shadow: 0 0 0 6px #fff, 0 0 0 7.5px var(--oro), 0 40px 70px -40px rgba(0, 61, 98, 0.7);
                                             font: 400 64px/1 var(--serif); color: var(--oro-chiaro); }
.mc-archi--ritratto { inset: -22%; width: 144%; height: 144%; }
.mc-archi--ritratto circle:not([fill]) { stroke: var(--oro); }
.mc-docente-nome { margin: 0 0 6px; font: 400 clamp(28px, 2.8vw, 38px)/1.08 var(--serif); letter-spacing: -0.01em; color: var(--navy); }
.mc-docente-ruolo { margin: 0 0 16px; font-size: 13px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: #92722B; }
.mc-docente-bio { margin: 0 0 12px; font-size: 16px; line-height: 1.65; color: #33475A; }
.mc-docente-nota { margin: 0; font: italic 400 17px/1.5 var(--serif); color: var(--tenue); }

/* ── in fondo: i quattro tempi con gli archi ── */
.mc-tempi { isolation: isolate; }
.mc-archi--fondo { z-index: -1; width: 620px; height: 620px; right: -260px; top: -230px; }

/* ── nella pagina del corso dell'Academy ── */
.ac-corso .ac-hero-archi { width: 940px; height: 940px; right: -200px; top: 50%; margin-top: -470px; }
.ac-corso .sm-academy .mc-fase-titolo, .ac-corso .sm-academy .mc-modulo-titolo, .ac-corso .sm-academy .mc-docente-nome { font-weight: 500; }

/* ── la pagina di ringraziamento ── */
.mcg-hero { background: var(--notte); }
.mcg-hero::before { content: none; }
.mcg-trama { position: absolute; z-index: -2; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.2; pointer-events: none; }
.mc-archi--grazie { z-index: -1; width: 900px; height: 900px; right: -240px; top: -150px; }
.mcg-domanda-link { display: inline-flex; align-items: center; gap: 6px; font-size: 15px; font-weight: 700; color: var(--oro-chiaro);
                    text-decoration: underline; text-decoration-color: rgba(217, 190, 122, 0.4); text-underline-offset: 4px; }
.mcg-domanda-link:hover { text-decoration-color: currentColor; }
.fbg-azioni { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 26px; }
.mcg-qa { background: var(--sabbia); border-radius: 10px; padding-left: 12px !important; padding-right: 12px !important; }
.mcg-domanda { background: var(--sabbia); border-top: 1px solid rgba(190, 154, 78, 0.3); border-bottom: 1px solid rgba(190, 154, 78, 0.3);
               scroll-margin-top: var(--fbl-sotto); }
.mcg-domanda-in { max-width: 1280px; margin: 0 auto; padding: 88px 40px; box-sizing: border-box; display: grid;
                  grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr); gap: 64px; align-items: start; }
.mcg-domanda-testo .mc-qa-segno { display: block; margin-bottom: 18px; font-size: 96px; color: var(--oro); }
.mcg-domanda-testo p { max-width: 34em; margin: 0; font-size: 16.5px; line-height: 1.65; color: var(--testo); }
.mcg-domanda-scheda { padding: 26px 26px 20px; border-radius: 18px; background: #fff; border: 1px solid rgba(0, 61, 98, 0.12);
                      box-shadow: 0 30px 60px -40px rgba(0, 61, 98, 0.45); }
.mcg-domanda-scheda .fbg-inviata { margin-bottom: 18px; }
.mcg-domanda-basta { margin: 0; font: italic 400 17px/1.5 var(--serif); color: var(--tenue); }
.mcg-fasi b { font-weight: 600; color: #fff; }
@media (max-width: 1000px) {
  .mcg-domanda-in { grid-template-columns: minmax(0, 1fr); gap: 32px; padding: 64px 24px; }
  .mc-archi--grazie { width: 620px; height: 620px; right: -280px; top: -160px; }
}
@media (max-width: 760px) {
  .mcg-domanda-in { padding: 52px var(--fbl-bordo); }
  .mcg-domanda-scheda { padding: 20px 16px 16px; }
}

@media (max-width: 1000px) {
  .mc-archi--hero { width: 640px; height: 640px; left: auto; right: -260px; top: -120px; }
  .mc-hero .fbl-hero-in { min-height: 0; }
}
@media (max-width: 760px) {
  .mc-fasi { grid-template-columns: minmax(0, 1fr); gap: 22px; padding-left: 30px; }
  .mc-fasi::before { left: 7px; right: auto; top: 8px; bottom: 8px; width: 2px; height: auto;
                     background: linear-gradient(180deg, var(--oro), var(--oro-chiaro) 70%, rgba(217, 190, 122, 0.25)); }
  .mc-fase { padding-top: 0; }
  .mc-fase-punto { left: -30px; }
  .mc-nastro { height: 62px; gap: 2px; }
  .mc-tratto { padding: 8px 5px 7px; }
  .mc-tratto-num { font-size: 15px; }
  .mc-tratto-min { font-size: 10.5px; }
  .mc-tratto--stretto .mc-tratto-num, .mc-tratto--stretto .mc-tratto-min { display: none; }
  .mc-tratto::after { display: none; }
  .mc-modulo { grid-template-columns: 40px minmax(0, 1fr); }
  .mc-modulo-ora { grid-column: 2; grid-row: 1; flex-direction: row; gap: 10px; padding-top: 0; margin-bottom: 4px; font-size: 13px; }
  .mc-modulo-num { grid-column: 1; grid-row: 1 / span 2; font-size: 22px; }
  .mc-modulo-corpo { grid-column: 2; }
  .mc-modulo-titolo { font-size: 19px; }
  .mc-modulo--qa { padding: 18px 14px; }
  .mc-qa-in { grid-template-columns: minmax(0, 1fr); gap: 6px; padding: 26px 22px; }
  .mc-qa-segno { font-size: 76px; }
  .mc-docente { grid-template-columns: minmax(0, 1fr); gap: 26px; justify-items: start; }
  .mc-docente-foto { width: 170px; height: 170px; margin: 34px 0 10px 34px; }
  .mc-archi--fondo { width: 460px; height: 460px; right: -220px; top: -180px; }
}
@media (prefers-reduced-motion: reduce) {
  .mc-archi-ore { animation: none; stroke-dashoffset: 0; }
  .mc-archi-fine { animation: none; opacity: 1; }
  .mc-tratto, .mc-tratto::after { transition: none; }
  .mc-modulo:target { animation: none; }
}