/* ==========================================================================
   Intestazioni di sezione, come su xmag.it
   Uso:
     <div class="mk-head" data-reveal>
         <span class="mk-eyebrow"><span class="mk-dot"></span>Etichetta</span>
         <h2>Titolo con <span class="mk-hl">parte evidenziata</span></h2>
         <p>Descrizione con <b>parole chiave</b> in azzurro.</p>
     </div>
   data-reveal: il blocco sale quando entra nello schermo (js/reveal.js)
   ========================================================================== */

.mk-head{max-width:900px;margin:0 auto 44px;text-align:center;}
.mk-eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:#ef7f36;background:#fff;border:1px solid #fde3cc;border-radius:30px;padding:6px 14px;margin-bottom:18px;box-shadow:0 6px 16px -10px rgba(239,127,54,.6);}
.mk-eyebrow .mk-dot{position:relative;width:7px;height:7px;border-radius:50%;background:#3ddc84;}
/* alone che pulsa: scala + opacità invece di box-shadow animata */
.mk-eyebrow .mk-dot::after{content:"";position:absolute;inset:0;border-radius:50%;background:rgba(61,220,132,.6);animation:mkPulse 1.8s ease-out infinite;}
@keyframes mkPulse{from{transform:scale(1);opacity:1;}to{transform:scale(3.5);opacity:0;}}
.mk-head h2{font-size:38px;font-weight:600;line-height:1.25;letter-spacing:-.02em;color:#2f2f35;margin:0 0 16px;}
.mk-head p{font-size:17px;line-height:1.75;color:#6b6b73;margin:0;}
.mk-head p b{color:#21c6db;font-weight:500;}

/* parte del titolo evidenziata in sfumatura arancione */
.mk-hl{background:linear-gradient(135deg,#fbb468,#ef7f36);-webkit-background-clip:text;background-clip:text;color:transparent;}

/* su sfondo arancione (.mk-section) l'azzurro non si legge: parole chiave scure */
.mk-section .mk-head p{color:#5f5f68;}
.mk-section .mk-head p b{color:#2f2f35;}

/* .mk-head--light: su sfondo scuro o arancione (sezioni parallasse, contatori), testi bianchi */
.mk-head.mk-head--light h2{color:#fff;}
.mk-head.mk-head--light p{color:rgba(255,255,255,.85);}
.mk-head.mk-head--light p b{color:#fff;font-weight:600;}

/* .mk-head--left: allineato a sinistra, per i titoli dentro una colonna di testo (pagina Progetti) */
.mk-head.mk-head--left{max-width:none;margin:0 0 28px;text-align:left;}

/* comparsa allo scroll */
.mk-head[data-reveal]{opacity:0;transform:translateY(24px);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.8,.2,1);}
.mk-head[data-reveal].is-in{opacity:1;transform:none;}

@media (max-width:991.98px){
    .mk-head h2{font-size:32px;}
}
@media (max-width:575.98px){
    .mk-head h2{font-size:26px;}
    .mk-head p{font-size:15.5px;}
}
@media (prefers-reduced-motion:reduce){
    .mk-eyebrow .mk-dot::after{animation:none;}
    .mk-head[data-reveal]{opacity:1;transform:none;transition:none;}
}