/* =================================================
   VARIABILI BRAND
   ================================================= */
:root{
  --mc-primary:#2EB6A5;
  --mc-primary2:#0E5E6F;
  --mc-text:#0f172a;
  --mc-muted:#556070;
  --mc-bg:#ffffff;
  --mc-surface:#f5f7f9;
  --mc-border:rgba(15,23,42,.10);
  --mc-shadow: 0 10px 30px rgba(15,23,42,.10);
  --mc-shadowSoft: 0 8px 24px rgba(15,23,42,.08);
}

/* =================================================
   RESET BASE
   ================================================= */
*{box-sizing:border-box}
body{
  margin:0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--mc-text);
  background:var(--mc-bg);
  line-height:1.5;
}
img{max-width:100%; display:block}
a{color:inherit}

/* =================================================
   CONTAINER
   ================================================= */
.mc-container{
  max-width:1180px;
  margin:0 auto;
  padding:0 24px;
}

/* =================================================
   HEADER
   ================================================= */
.mc-header{
  position:sticky;
  top:0;
  z-index:50;
  background:rgba(255,255,255,.78);
  backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid rgba(15,23,42,.06);
  transition: box-shadow .25s ease;
}
.mc-header.is-scrolled{
  box-shadow:0 10px 30px rgba(15,23,42,.10);
}
.mc-header-inner{
  display:flex;
  align-items:center;
  gap:18px;
  padding:14px 0;
}

.mc-brand{
  display:flex;
  align-items:center;
  gap:10px;
  text-decoration:none;
}
.mc-brand-logo{
  width: 260px;   /* regola qui se lo vuoi più grande/piccolo */
  height: auto;
  display:block;
}

/* non serve più */
.mc-brand-text{display:none;}


.mc-nav{
  margin-left:auto;
  display:flex;
  gap:10px;
}
.mc-nav a{
  text-decoration:none;
  color:var(--mc-muted);
  font-weight:800;
  font-size:14px;
  padding:10px;
  border-radius:12px;
}
.mc-nav a:hover{
  background:rgba(46,182,165,.10);
  color:var(--mc-primary2);
}

.mc-header-cta{
  margin-left:8px;
  text-decoration:none;
  font-weight:900;
  font-size:14px;
  padding:10px 14px;
  border-radius:999px;
  background:linear-gradient(90deg, var(--mc-primary2), var(--mc-primary));
  color:#fff;
  box-shadow:0 10px 24px rgba(46,182,165,.20);
  transition:transform .2s ease, box-shadow .2s ease;
}
.mc-header-cta:hover{
  transform:translateY(-1px);
  box-shadow:0 16px 28px rgba(46,182,165,.24);
}

.mc-nav-toggle{
  display:none;
  margin-left:auto;
  width:42px;
  height:42px;
  border-radius:12px;
  border:1px solid var(--mc-border);
  background:#fff;
}
.mc-nav-toggle span{
  display:block;
  height:2px;
  margin:6px 9px;
  background:var(--mc-text);
}

.mc-nav-mobile{
  display:none;
  padding:14px 24px 18px;
  border-top:1px solid rgba(15,23,42,.06);
}
.mc-nav-mobile a{
  display:block;
  text-decoration:none;
  padding:12px 10px;
  border-radius:12px;
  color:var(--mc-muted);
  font-weight:900;
}
.mc-nav-mobile a:hover{
  background:rgba(46,182,165,.10);
  color:var(--mc-primary2);
}
.mc-nav-mobile.is-open{display:block}

@media (max-width:980px){
  .mc-nav{display:none}
  .mc-nav-toggle{display:inline-block}
  .mc-header-cta{display:none}
}

/* =================================================
   HERO
   ================================================= */
.mc-hero{
  position:relative;
  padding:92px 0 54px;
  overflow:hidden;
}
.mc-hero::before{
  content:"";
  position:absolute;
  inset:-40px;
  pointer-events:none;
  background:
    radial-gradient(900px 450px at 15% 20%, rgba(46,182,165,.20), transparent 55%),
    radial-gradient(900px 450px at 85% 10%, rgba(14,94,111,.14), transparent 60%),
    linear-gradient(180deg, rgba(245,247,249,.75), transparent 55%);
}
.mc-hero-grid{
  position:relative;
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:52px;
  align-items:center;
}

.mc-badge{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:8px 12px;
  border-radius:999px;
  border:1px solid rgba(46,182,165,.25);
  background:rgba(255,255,255,.75);
  color:var(--mc-primary2);
  font-weight:800;
  font-size:12px;
  text-transform:uppercase;
}
.mc-dot{
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--mc-primary);
  box-shadow:0 0 0 4px rgba(46,182,165,.18);
}

.mc-h1{
  margin:16px 0 10px;
  font-size:52px;
  line-height:1.05;
}
.mc-sub{
  margin:0 0 16px;
  color:var(--mc-primary2);
  font-weight:800;
}
.mc-lead{
  color:var(--mc-muted);
  max-width:58ch;
}

.mc-actions{
  display:flex;
  gap:12px;
  margin-top:24px;
  flex-wrap:wrap;
}
.mc-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:14px 18px;
  border-radius:999px;
  text-decoration:none;
  font-weight:900;
}
.mc-btn-primary{
  color:#fff;
  background:linear-gradient(90deg, var(--mc-primary2), var(--mc-primary));
  box-shadow:0 16px 30px rgba(46,182,165,.18);
}
.mc-btn-ghost{
  color:var(--mc-primary2);
  border:1px solid rgba(14,94,111,.22);
  background:rgba(255,255,255,.7);
}

.mc-trust{
  margin-top:26px;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:12px;
}
.mc-trust-item{
  border:1px solid var(--mc-border);
  background:rgba(255,255,255,.7);
  border-radius:16px;
  padding:14px;
  box-shadow:var(--mc-shadowSoft);
}

.mc-portrait{
  border-radius:26px;
  overflow:hidden;
  background:#fff;
  border:1px solid rgba(15,23,42,.08);
  box-shadow:var(--mc-shadow);
}

@media (max-width:980px){
  .mc-hero-grid{grid-template-columns:1fr}
  .mc-h1{font-size:40px}
  .mc-trust{grid-template-columns:1fr}
}

/* =================================================
   SEZIONI
   ================================================= */
.mc-section{
  padding:86px 0;
  position:relative;
}
.mc-section.alt{background:var(--mc-surface)}
.mc-section::before{
  content:"";
  position:absolute;
  left:50%;
  top:0;
  width:min(980px, calc(100% - 48px));
  height:1px;
  background:rgba(15,23,42,.08);
  transform:translateX(-50%);
}
.mc-section-head{margin-bottom:26px}
.mc-h3{font-size:32px;margin:0 0 8px}
.mc-h4{font-size:16px;margin:0 0 10px}
.mc-muted{color:var(--mc-muted)}

/* =================================================
   CARDS / GRID / ACCORDION / FOOTER / REVEAL
   ================================================= */
/* (queste parti restano IDENTICHE a quelle che avevamo già definito
   e funzionano correttamente con gli HTML personalizzati) */

.mc-two{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media (max-width:980px){.mc-two{grid-template-columns:1fr}}

.mc-reveal{
  opacity:0;
  transform:translateY(12px);
  transition:opacity .6s ease, transform .6s ease;
}
.mc-reveal.is-in{
  opacity:1;
  transform:none;
}

html{
  scroll-padding-top:90px;
}
/* =========================
   SCHEDULE (Dove riceve)
========================= */

.mc-schedule{
  display:grid;
  gap:16px;
  margin-top:18px;
}

.mc-center{
  border:1px solid var(--mc-border);
  background:#fff;
  border-radius:18px;
  padding:18px;
  box-shadow:var(--mc-shadowSoft);
}

.mc-center-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
  margin-bottom:14px;
}

.mc-center-name{
  display:inline-block;
  font-weight:950;
  text-decoration:none;
  color:var(--mc-text);
  font-size:16px;
  line-height:1.2;
}
.mc-center-name:hover{ color:var(--mc-primary2); }

.mc-center-meta{
  margin-top:6px;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:center;
}

.mc-pill{
  font-size:12px;
  padding:6px 10px;
  border-radius:999px;
  background:rgba(46,182,165,.12);
  color:var(--mc-primary2);
  font-weight:900;
}

.mc-meta{
  color:var(--mc-muted);
  font-weight:650;
  font-size:13px;
}

.mc-center-phone{
  white-space:nowrap;
  text-decoration:none;
  color:var(--mc-primary2);
  font-weight:950;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid rgba(46,182,165,.22);
  background:rgba(46,182,165,.10);
  line-height:1;
}
.mc-center-phone:hover{ background:rgba(46,182,165,.16); }

.mc-hours{
  display:grid;
  grid-template-columns:repeat(7, minmax(0,1fr));
  gap:10px;
}

.mc-hour{
  border:1px solid rgba(15,23,42,.08);
  background:rgba(245,247,249,.70);
  border-radius:14px;
  padding:10px 10px;
  min-height:58px;
}

.mc-day{
  font-weight:950;
  color:var(--mc-text);
  font-size:12px;
  letter-spacing:.2px;
  margin-bottom:6px;
}

.mc-time{
  color:var(--mc-muted);
  font-weight:750;
  font-size:13px;
  line-height:1.25;
}

/* responsive */
@media (max-width:980px){
  .mc-center-head{
    flex-direction:column;
    align-items:flex-start;
  }
  .mc-center-phone{ width:100%; text-align:center; }
  .mc-hours{
    grid-template-columns:repeat(2, minmax(0,1fr));
  }
}
/* =========================
   FAQ (accordion premium)
========================= */
.mc-acc{ margin-top:18px; }

.mc-acc-item{
  border:1px solid var(--mc-border);
  border-radius:16px;
  padding:0 16px;
  background:#fff;
  box-shadow:var(--mc-shadowSoft);
  margin-bottom:12px;
}

.mc-acc-title{
  width:100%;
  text-align:left;
  background:transparent;
  border:0;
  padding:16px 0;
  cursor:pointer;
  font-weight:950;
  font-size:16px;
  color:var(--mc-text);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
}

.mc-acc-title::after{
  content:"+";
  flex:0 0 auto;
  width:28px;
  height:28px;
  display:grid;
  place-items:center;
  border-radius:10px;
  border:1px solid rgba(46,182,165,.22);
  background:rgba(46,182,165,.10);
  color:var(--mc-primary2);
  font-weight:950;
}

.mc-acc-item.is-open .mc-acc-title::after{
  content:"–";
}

.mc-acc-content{
  max-height:0;
  overflow:hidden;
  transition:max-height .28s ease;
}

.mc-acc-content p{
  margin:0 0 16px;
  color:var(--mc-muted);
  font-weight:650;
  line-height:1.55;
}
/* =========================
   PROFILO – premium layout
========================= */
.mc-profile-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:18px;
}

.mc-profile-badges{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  justify-content:flex-end;
}

.mc-pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 12px;
  border-radius:999px;
  border:1px solid rgba(15,23,42,.08);
  background:rgba(245,247,249,.75);
  color:var(--mc-primary2);
  font-weight:900;
  font-size:12px;
  letter-spacing:.2px;
}

.mc-profile-grid{
  margin-top:18px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
}

.mc-profile-card{
  border:1px solid var(--mc-border);
  background:#fff;
  border-radius:20px;
  padding:18px;
  box-shadow:var(--mc-shadowSoft);
}

.mc-profile-top{
  display:flex;
  gap:12px;
  align-items:flex-start;
  margin-bottom:14px;
}

.mc-profile-icon{
  width:42px;
  height:42px;
  border-radius:14px;
  display:grid;
  place-items:center;
  color:var(--mc-primary2);
  background:rgba(46,182,165,.10);
  border:1px solid rgba(46,182,165,.18);
  flex:0 0 auto;
}

.mc-profile-icon svg{ width:22px; height:22px; display:block; }

.mc-timeline{
  list-style:none;
  padding:0;
  margin:0;
  display:grid;
  gap:12px;
}

.mc-timeline-item{
  display:grid;
  grid-template-columns:70px 1fr;
  gap:12px;
  padding:12px;
  border-radius:16px;
  background:rgba(245,247,249,.55);
  border:1px solid rgba(15,23,42,.06);
}

.mc-year{
  font-weight:950;
  color:var(--mc-primary2);
  letter-spacing:.2px;
}

.mc-timeline-title{
  font-weight:900;
  color:var(--mc-text);
  margin-bottom:4px;
}

.mc-timeline-text{
  color:var(--mc-muted);
  font-weight:650;
  line-height:1.55;
}

.mc-highlight{
  border-radius:16px;
  padding:14px 14px;
  border:1px solid rgba(46,182,165,.18);
  background:linear-gradient(180deg, rgba(46,182,165,.10), rgba(245,247,249,.55));
  margin-bottom:14px;
}

.mc-highlight-title{
  font-weight:950;
  color:var(--mc-primary2);
  margin-bottom:6px;
}

.mc-highlight-text{
  margin:0;
  color:var(--mc-muted);
  font-weight:650;
}

.mc-profile-list{
  display:grid;
  gap:12px;
}

.mc-profile-row{
  padding:12px;
  border-radius:16px;
  border:1px solid rgba(15,23,42,.06);
  background:rgba(245,247,249,.55);
}

.mc-profile-label{
  font-weight:950;
  color:var(--mc-text);
  margin-bottom:6px;
}

.mc-profile-value{
  color:var(--mc-muted);
  font-weight:650;
  line-height:1.55;
}

/* Mobile */
@media (max-width:980px){
  .mc-profile-head{flex-direction:column; align-items:flex-start}
  .mc-profile-badges{justify-content:flex-start}
  .mc-profile-grid{grid-template-columns:1fr}
  .mc-timeline-item{grid-template-columns:62px 1fr}
}
/* =========================
   HERO – più accattivante
========================= */
.mc-hero{position:relative; padding:96px 0 54px; overflow:hidden; background:var(--mc-bg);}
.mc-hero-bg{
  position:absolute; inset:-40px; pointer-events:none;
  background:
    radial-gradient(900px 450px at 15% 20%, rgba(46,182,165,.22), transparent 55%),
    radial-gradient(900px 450px at 85% 10%, rgba(14,94,111,.16), transparent 60%),
    linear-gradient(180deg, rgba(245,247,249,.78), transparent 55%);
}

.mc-hero-text{position:relative;}
.mc-h1-accent{
  display:block;
  margin-top:10px;
  font-size:18px;
  line-height:1.2;
  color:var(--mc-primary2);
  font-weight:900;
  letter-spacing:.2px;
}

.mc-portrait-premium{
  position:relative;
  border-radius:28px;
  box-shadow: 0 24px 60px rgba(15,23,42,.12);
}
.mc-portrait-premium::after{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius:28px;
  border:1px solid rgba(46,182,165,.14);
  pointer-events:none;
}

.mc-hero-mini-note{
  margin-top:12px;
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border-radius:999px;
  border:1px solid rgba(15,23,42,.08);
  background:rgba(255,255,255,.75);
  color:var(--mc-muted);
  font-weight:800;
  font-size:13px;
}
.mc-mini-dot{
  width:8px; height:8px; border-radius:999px;
  background:var(--mc-primary);
  box-shadow:0 0 0 4px rgba(46,182,165,.16);
}

/* “In evidenza” al posto dei 3 quadrati */
.mc-highlights{
  margin-top:22px;
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:12px;
}

.mc-highlight-card{
  text-decoration:none;
  border:1px solid rgba(15,23,42,.08);
  background:rgba(255,255,255,.70);
  border-radius:16px;
  padding:14px;
  box-shadow:var(--mc-shadowSoft);
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  color:inherit;
}
.mc-highlight-card:hover{
  transform:translateY(-2px);
  box-shadow:var(--mc-shadow);
  border-color:rgba(46,182,165,.22);
}

.mc-hl-top{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:6px;
}
.mc-hl-icon{
  width:34px; height:34px;
  border-radius:12px;
  display:grid; place-items:center;
  background:rgba(46,182,165,.10);
  border:1px solid rgba(46,182,165,.18);
  font-size:16px;
}
.mc-hl-title{font-weight:950; color:var(--mc-text); font-size:14px;}
.mc-hl-sub{color:var(--mc-muted); font-weight:750; font-size:13px; line-height:1.4;}

@media (max-width:980px){
  .mc-hero{padding:84px 0 42px}
  .mc-highlights{grid-template-columns:1fr; gap:10px}
}
/* =========================
   ATTIVITÀ – Body Map
========================= */

.mc-bodymap{
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  gap:16px;
  align-items:stretch;
}

.mc-bodymap-left{
  border:1px solid rgba(15,23,42,.08);
  background:rgba(255,255,255,.78);
  border-radius:18px;
  box-shadow:var(--mc-shadowSoft);
  padding:18px;
}

.mc-body-figure{
  position:relative;
  border-radius:18px;
  background:
    radial-gradient(700px 380px at 20% 20%, rgba(46,182,165,.16), transparent 55%),
    radial-gradient(700px 380px at 85% 12%, rgba(14,94,111,.12), transparent 60%),
    rgba(245,247,249,.55);
  border:1px solid rgba(15,23,42,.06);
  overflow:hidden;
  padding:18px;
  min-height:520px;
}

.mc-body-svg{
  width:100%;
  height:100%;
  display:block;
  opacity:.95;
}

.mc-hotspot{
  position:absolute;
  left:var(--x);
  top:var(--y);
  transform:translate(-50%,-50%);
  width:18px;
  height:18px;
  border-radius:999px;
  border:2px solid rgba(255,255,255,.9);
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.9), rgba(46,182,165,.95));
  box-shadow: 0 10px 24px rgba(46,182,165,.24), 0 0 0 6px rgba(46,182,165,.14);
  cursor:pointer;
  transition: transform .18s ease, box-shadow .18s ease;
}
.mc-hotspot:hover{ transform:translate(-50%,-50%) scale(1.06); }
.mc-hotspot.is-active{
  box-shadow: 0 16px 34px rgba(46,182,165,.30), 0 0 0 8px rgba(46,182,165,.16);
}

.mc-hotlabel{
  position:absolute;
  left:var(--x);
  top:var(--y);
  transform:translate(-50%,-50%);
  margin-left:0;
  padding:8px 10px;
  border-radius:999px;
  font-size:12px;
  font-weight:900;
  color:var(--mc-text);
  background:rgba(255,255,255,.85);
  border:1px solid rgba(15,23,42,.08);
  box-shadow:var(--mc-shadowSoft);
  pointer-events:none;
  white-space:nowrap;
}

.mc-body-hint{
  margin-top:12px;
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border-radius:999px;
  border:1px solid rgba(15,23,42,.08);
  background:rgba(245,247,249,.70);
  color:var(--mc-muted);
  font-weight:850;
  font-size:13px;
}

.mc-bodymap-panel{
  border:1px solid rgba(15,23,42,.08);
  background:#fff;
  border-radius:18px;
  box-shadow:var(--mc-shadowSoft);
  padding:18px;
  display:flex;
  flex-direction:column;
  min-height:520px;
}

.mc-panel-kicker{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:8px 12px;
  border-radius:999px;
  background:rgba(46,182,165,.10);
  border:1px solid rgba(46,182,165,.18);
  color:var(--mc-primary2);
  font-weight:950;
  font-size:12px;
  letter-spacing:.3px;
  text-transform:uppercase;
}

.mc-panel-title{
  margin:12px 0 6px;
  font-size:20px;
  font-weight:950;
  color:var(--mc-text);
}
.mc-panel-sub{
  margin:0;
  color:var(--mc-muted);
  font-weight:700;
}

.mc-panel-content{
  margin-top:16px;
  flex:1;
}

.mc-panel-card{
  border:1px solid rgba(15,23,42,.08);
  background:rgba(245,247,249,.55);
  border-radius:16px;
  padding:14px;
  box-shadow:var(--mc-shadowSoft);
  animation: mcFadeUp .22s ease both;
}

@keyframes mcFadeUp{
  from{ opacity:0; transform:translateY(8px); }
  to{ opacity:1; transform:none; }
}

.mc-panel-list{
  margin:10px 0 0;
  padding:0;
  list-style:none;
  display:grid;
  gap:10px;
}
.mc-panel-list li{
  display:flex;
  gap:10px;
  align-items:flex-start;
  padding:10px 12px;
  border-radius:14px;
  background:rgba(255,255,255,.75);
  border:1px solid rgba(15,23,42,.06);
}
.mc-li-dot{
  width:10px; height:10px;
  border-radius:999px;
  background:var(--mc-primary);
  box-shadow:0 0 0 4px rgba(46,182,165,.14);
  margin-top:4px;
  flex:0 0 auto;
}
.mc-li-title{font-weight:950; color:var(--mc-text); font-size:14px;}
.mc-li-sub{color:var(--mc-muted); font-weight:700; font-size:13px; margin-top:3px;}

.mc-panel-cta{
  margin-top:14px;
  display:flex;
  justify-content:flex-start;
}
.mc-mini-cta{
  background:linear-gradient(90deg, var(--mc-primary2), var(--mc-primary));
  color:#fff;
  border-color:transparent;
}

.mc-panel-empty{
  border:1px dashed rgba(15,23,42,.14);
  background:rgba(245,247,249,.55);
  border-radius:16px;
  padding:16px;
  text-align:left;
}
.mc-empty-icon{font-size:22px}
.mc-empty-title{margin-top:10px; font-weight:950; color:var(--mc-text)}
.mc-empty-sub{margin-top:6px; color:var(--mc-muted); font-weight:750}

.mc-activity-chips{
  margin-top:14px;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}
.mc-chip{
  padding:10px 12px;
  border-radius:999px;
  border:1px solid rgba(15,23,42,.08);
  background:rgba(255,255,255,.70);
  color:var(--mc-text);
  font-weight:900;
  font-size:13px;
}

@media (max-width:980px){
  .mc-bodymap{grid-template-columns:1fr}
  .mc-body-figure{min-height:460px}
  .mc-bodymap-panel{min-height:auto}
  .mc-hotlabel{display:none} /* su mobile pulito */
}
/* === FIX: Body figure più leggibile (contrasto + nitidezza) === */
.mc-body-figure{
  background:
    radial-gradient(700px 380px at 20% 20%, rgba(46,182,165,.22), transparent 55%),
    radial-gradient(700px 380px at 85% 12%, rgba(14,94,111,.16), transparent 60%),
    rgba(245,247,249,.82) !important;
}

.mc-body-svg{
  opacity: 1 !important;
  filter: contrast(1.18) saturate(1.05);
}

.mc-body-svg path{
  fill: rgba(255,255,255,.55) !important;
  stroke: rgba(15,23,42,.22) !important;
  stroke-width: 2.25 !important;
}

/* Hotspot più “premium” e visibile */
.mc-hotspot{
  width:20px !important;
  height:20px !important;
  background: radial-gradient(circle at 30% 30%, #fff, rgba(46,182,165,1)) !important;
  box-shadow:
    0 14px 34px rgba(46,182,165,.30),
    0 0 0 8px rgba(46,182,165,.18) !important;
}

.mc-hotspot.is-active{
  transform:translate(-50%,-50%) scale(1.08) !important;
  box-shadow:
    0 18px 42px rgba(46,182,165,.36),
    0 0 0 10px rgba(46,182,165,.20) !important;
}

/* Labels un filo più leggibili */
.mc-hotlabel{
  background: rgba(255,255,255,.92) !important;
  border: 1px solid rgba(15,23,42,.10) !important;
}
/* === CTA pannello: stile premium come header === */
.mc-panel-cta{
  margin-top:14px;
}

.mc-mini.mc-mini-cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:12px 14px !important;
  border-radius:999px !important;
  font-weight:950 !important;
  letter-spacing:.2px;
  color:#fff !important;
  background: linear-gradient(90deg, var(--mc-primary2), var(--mc-primary)) !important;
  box-shadow: 0 14px 34px rgba(46,182,165,.26) !important;
  border: 0 !important;
  transition: transform .2s ease, box-shadow .2s ease;
}

.mc-mini.mc-mini-cta:hover{
  transform: translateY(-1px);
  box-shadow: 0 18px 42px rgba(46,182,165,.32) !important;
}

.mc-mini.mc-mini-cta::after{
  content:"→";
  font-weight:00;
  opacity:.95;
}
/* === BODY MAP === */
.mc-body-layout{
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:20px;
}
@media(max-width:980px){
  .mc-body-layout{grid-template-columns:1fr}
}

.mc-body-card{
  background:#fff;
  border-radius:22px;
  border:1px solid rgba(15,23,42,.08);
  box-shadow:var(--mc-shadowSoft);
  padding:18px;
}

.mc-body-stage{
  position:relative;
}

.mc-body-img{
  width:100%;
  height:auto;
  display:block;
  user-select:none;
  pointer-events:none;
}

/* HOTSPOT */
.mc-hotspot{
  position:absolute;
  transform:translate(-50%,-50%);
  border:0;
  background:#fff;
  border-radius:999px;
  padding:8px 12px;
  display:flex;
  align-items:center;
  gap:8px;
  cursor:pointer;
  box-shadow:0 10px 26px rgba(15,23,42,.18);
  border:1px solid rgba(46,182,165,.25);
  transition:transform .2s ease, box-shadow .2s ease;
}
.mc-hotspot:hover{
  transform:translate(-50%,-55%);
  box-shadow:0 16px 32px rgba(15,23,42,.22);
}
.mc-hotspot span{
  width:10px;height:10px;
  border-radius:50%;
  background:var(--mc-primary);
  box-shadow:0 0 0 4px rgba(46,182,165,.2);
}
.mc-hotspot strong{
  font-size:12px;
  font-weight:900;
  color:var(--mc-text);
}

/* DETTAGLI */
.mc-body-details{
  background:#fff;
  border-radius:22px;
  border:1px solid rgba(15,23,42,.08);
  box-shadow:var(--mc-shadowSoft);
  padding:20px;
}
.mc-pill{
  display:inline-block;
  font-size:12px;
  font-weight:900;
  padding:6px 12px;
  border-radius:999px;
  background:rgba(46,182,165,.12);
  color:var(--mc-primary2);
}
.mc-body-title{
  margin:14px 0 6px;
  font-size:22px;
}
.mc-body-box{
  margin-top:14px;
  padding:16px;
  border-radius:16px;
  background:rgba(245,247,249,.8);
  border:1px dashed rgba(15,23,42,.14);
  transition:.25s ease;
}
.mc-body-box.is-anim{
  transform:translateY(-2px);
  box-shadow:0 14px 28px rgba(15,23,42,.14);
}
/* =================================================
   BODY MAP (Attività) – layout + hotspots
   ================================================= */

.mc-body{
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  gap:18px;
  align-items:stretch;
}

.mc-body-card{
  border:1px solid var(--mc-border);
  background:#fff;
  border-radius:22px;
  box-shadow:var(--mc-shadowSoft);
  overflow:hidden;
}

/* Stage: niente padding “strano” che sballa i punti */
.mc-body-stage{
  position:relative;
  width:100%;
  padding:18px;                 /* bordo interno elegante */
  background: radial-gradient(900px 450px at 25% 25%, rgba(46,182,165,.10), transparent 55%),
              radial-gradient(900px 450px at 75% 15%, rgba(14,94,111,.10), transparent 60%),
              linear-gradient(180deg, rgba(245,247,249,.70), #fff 60%);
}

/* Immagine: sempre pulita e centrata */
.mc-body-img{
  display:block;
  width:100%;
  height:auto;
  max-height:760px;
  object-fit:contain;
  margin:0 auto;
  user-select:none;
  -webkit-user-drag:none;
  filter: drop-shadow(0 18px 38px rgba(15,23,42,.14));
}

/* Hotspot posizionato a percentuali sullo stage */
.mc-hotspot{
  position:absolute;
  left: var(--x);
  top:  var(--y);
  transform: translate(-50%, -50%);
  display:inline-flex;
  align-items:center;
  gap:10px;

  border:0;
  background:transparent;
  cursor:pointer;
  padding:6px 8px;
  border-radius:999px;
}

/* “dot” con pulse */
.mc-hotdot{
  width:14px; height:14px;
  border-radius:999px;
  background: var(--mc-primary);
  box-shadow: 0 0 0 6px rgba(46,182,165,.16);
  position:relative;
}
.mc-hotdot::after{
  content:"";
  position:absolute;
  inset:-10px;
  border-radius:999px;
  border:2px solid rgba(46,182,165,.25);
  transform:scale(.85);
  opacity:.85;
  animation: mcPulse 2.2s ease-in-out infinite;
}
@keyframes mcPulse{
  0%{ transform:scale(.85); opacity:.85; }
  70%{ transform:scale(1.25); opacity:0; }
  100%{ transform:scale(1.25); opacity:0; }
}

.mc-hotlabel{
  font-weight:900;
  font-size:12px;
  color: var(--mc-text);
  background: rgba(255,255,255,.88);
  border:1px solid rgba(15,23,42,.08);
  padding:7px 10px;
  border-radius:999px;
  box-shadow: 0 10px 24px rgba(15,23,42,.08);
  white-space:nowrap;
}

.mc-hotspot:hover .mc-hotlabel{
  border-color: rgba(46,182,165,.35);
}

.mc-hotspot.is-active .mc-hotdot{
  background: var(--mc-primary2);
  box-shadow: 0 0 0 7px rgba(14,94,111,.18);
}
.mc-hotspot.is-active .mc-hotlabel{
  border-color: rgba(14,94,111,.30);
}

/* Panel */
.mc-body-panel{
  border:1px solid var(--mc-border);
  background:#fff;
  border-radius:22px;
  box-shadow:var(--mc-shadowSoft);
  padding:18px;
}

.mc-chip{
  display:inline-flex;
  align-items:center;
  padding:7px 10px;
  border-radius:999px;
  font-weight:900;
  font-size:12px;
  color: var(--mc-primary2);
  background: rgba(46,182,165,.10);
  border:1px solid rgba(46,182,165,.18);
  letter-spacing:.3px;
}

.mc-body-title{
  margin:12px 0 6px;
  font-size:28px;
  color:var(--mc-text);
}
.mc-body-desc{
  margin:0 0 14px;
  color:var(--mc-muted);
  font-weight:650;
}

.mc-body-box{
  border:1px solid rgba(15,23,42,.08);
  background: rgba(245,247,249,.70);
  border-radius:18px;
  padding:14px 14px 12px;
}
.mc-body-box-title{
  font-weight:900;
  color:var(--mc-text);
  margin-bottom:8px;
}
.mc-body-list{
  margin:0;
  padding-left:18px;
  color:var(--mc-muted);
  font-weight:650;
}
.mc-body-list li{ margin:6px 0; }

.mc-body-cta{ margin-top:14px; }

/* Calib hint */
.mc-calib-hint{
  position:absolute;
  left:18px; right:18px; bottom:14px;
  border-radius:14px;
  padding:12px 12px;
  background:rgba(255,255,255,.92);
  border:1px solid rgba(15,23,42,.10);
  box-shadow: 0 10px 24px rgba(15,23,42,.10);
  font-weight:850;
  color:var(--mc-primary2);
  font-size:13px;
}

/* Mobile */
@media (max-width:980px){
  .mc-body{ grid-template-columns:1fr; }
  .mc-body-img{ max-height:560px; }
  .mc-body-title{ font-size:24px; }
}
/* =================================================
   FIX FONDO PAGINA + FOOTER CLEAN
   ================================================= */

/* evita che il footer “mangi” l’ultima sezione */
#faq{ padding-bottom: 120px; }

/* spazio generale fine pagina */
main#top{ padding-bottom: 40px; }

/* Footer: allineamento + stile premium */
.mc-footer{
  position:relative;
  z-index:2;
  margin-top:-40px; /* “stacca” visivamente dal grigio */
  padding:34px 0;
  background:#fff;
  border-top:1px solid rgba(15,23,42,.08);
}

.mc-footer-inner{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:18px;
}

.mc-footer-title{font-weight:900;color:var(--mc-text); font-size:14px}
.mc-footer-sub{color:var(--mc-muted);font-weight:750;margin-top:4px; font-size:13px}
.mc-footer-note{color:var(--mc-muted);margin-top:10px;max-width:62ch; font-size:12px; line-height:1.5}

.mc-footer-right{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
}

.mc-footer-right a{
  color:var(--mc-muted);
  text-decoration:none;
  font-weight:850;
  font-size:13px;
  padding:10px 12px;
  border-radius:999px;
  background:rgba(245,247,249,.85);
  border:1px solid rgba(15,23,42,.06);
  transition: transform .18s ease, background .18s ease, color .18s ease, border-color .18s ease;
}
.mc-footer-right a:hover{
  transform:translateY(-1px);
  color:var(--mc-primary2);
  background:rgba(46,182,165,.10);
  border-color:rgba(46,182,165,.22);
}

@media (max-width:980px){
  .mc-footer{ margin-top:-20px; }
  .mc-footer-inner{flex-direction:column}
}
/* ===== Cookie banner (MC) ===== */
.mc-cookie{
  position:fixed;
  left:16px;
  right:16px;
  bottom:16px;
  z-index:9999;
  display:none;
}
.mc-cookie.is-show{display:block}
.mc-cookie-card{
  max-width:980px;
  margin:0 auto;
  border:1px solid rgba(15,23,42,.10);
  background:rgba(255,255,255,.92);
  backdrop-filter:saturate(180%) blur(14px);
  border-radius:18px;
  box-shadow:0 16px 34px rgba(15,23,42,.10);
  padding:14px;
  display:flex;
  gap:12px;
  align-items:center;
  justify-content:space-between;
}
.mc-cookie-text{color:var(--mc-muted); font-weight:650; font-size:14px}
.mc-cookie-text a{color:var(--mc-primary2); font-weight:900; text-decoration:none}
.mc-cookie-actions{display:flex; gap:10px; flex-wrap:wrap}
.mc-cookie-btn{
  border-radius:999px;
  padding:10px 14px;
  font-weight:900;
  border:1px solid rgba(15,23,42,.10);
  background:#fff;
  cursor:pointer;
}
.mc-cookie-btn.accept{
  color:#fff;
  border:none;
  background:linear-gradient(90deg, var(--mc-primary2), var(--mc-primary));
}
.mc-cookie-btn:hover{opacity:.94}
@media (max-width:640px){
  .mc-cookie-card{flex-direction:column; align-items:flex-start}
  .mc-cookie-actions{width:100%}
  .mc-cookie-btn{width:100%; text-align:center}
}
/* ===== Footer credit JD MediaCreative ===== */
.mc-footer-credit{
  margin-top:10px;
  font-size:12px;
  font-weight:700;
  color:var(--mc-muted);
}

.mc-footer-credit a{
  color:var(--mc-primary2);
  text-decoration:none;
  font-weight:900;
}

.mc-footer-credit a:hover{
  text-decoration:underline;
}
/* ================================
   FOOTER – fix colonna destra + credit
   ================================ */

/* struttura: sinistra e destra ben allineate */
.mc-footer-inner{
  align-items:center; /* evita che la destra "scenda" */
}

/* colonna destra: bottoni + credit in stack pulito */
.mc-footer-right{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:10px;
}

/* bottoni privacy/cookie: stessa larghezza e ordinati */
.mc-footer-right > a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:140px;
  padding:10px 14px;
  border-radius:999px;
}

/* credit: più elegante, piccolo e allineato bene */
.mc-footer-credit{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:8px;

  margin-top:2px;
  padding:6px 10px;
  border-radius:999px;

  font-size:12px;
  font-weight:800;
  color:var(--mc-muted);

  background:rgba(245,247,249,.85);
  border:1px solid rgba(15,23,42,.08);
}

/* link JD: senza effetto "bottone enorme" */
.mc-footer-credit a{
  padding:0;
  background:transparent;
  border:none;
  border-radius:0;

  color:var(--mc-primary2);
  font-weight:950;
  text-decoration:none;
}

.mc-footer-credit a:hover{
  text-decoration:underline;
}

/* mobile: allinea tutto a sinistra, più naturale */
@media (max-width:980px){
  .mc-footer-inner{align-items:flex-start}
  .mc-footer-right{
    width:100%;
    align-items:flex-start;
  }
  .mc-footer-right > a{
    min-width:unset;
    width:fit-content;
  }
  .mc-footer-credit{
    justify-content:flex-start;
  }
}
/* ================================
   FOOTER – Privacy & Cookie affiancati
   ================================ */

/* riga bottoni privacy/cookie */
.mc-footer-right{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:10px;
}

/* wrapper virtuale: primi due link affiancati */
.mc-footer-right > a:nth-child(1),
.mc-footer-right > a:nth-child(2){
  margin:0;
}

/* crea riga affiancata */
.mc-footer-right{
  position:relative;
}

.mc-footer-right::before{
  content:"";
}

/* affianca privacy + cookie */
.mc-footer-right a{
  display:inline-flex;
}

.mc-footer-right a:nth-child(1),
.mc-footer-right a:nth-child(2){
  display:inline-flex;
}

.mc-footer-right a:nth-child(1){
  margin-right:8px;
}

/* forza layout a riga solo per i due bottoni */
.mc-footer-right{
  flex-direction:column;
}

.mc-footer-right > a:nth-child(1),
.mc-footer-right > a:nth-child(2){
  display:inline-flex;
}

/* riga bottoni */
.mc-footer-right{
  align-items:flex-end;
}

.mc-footer-right{
  --btn-row-gap:8px;
}

.mc-footer-right a{
  white-space:nowrap;
}

/* MOBILE: rimangono vicini ma allineati a sinistra */
@media (max-width:980px){
  .mc-footer-right{
    align-items:flex-start;
  }

  .mc-footer-right a:nth-child(1){
    margin-right:8px;
  }
}
/* Footer layout fix */
.mc-footer-inner{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:24px;
}

.mc-footer-left{
  max-width:60ch;
}

.mc-footer-year{
  margin-top:10px;
  color:var(--mc-muted);
  font-weight:750;
  font-size:13px;
}



.mc-footer-right{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:10px;
}

.mc-footer-links{
  display:flex;
  gap:10px;            /* privacy e cookie vicini */
  flex-wrap:wrap;
  justify-content:flex-end;
}

.mc-footer-links a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:10px 14px;
  border-radius:999px;
  background:rgba(245,247,249,.85);
  border:1px solid rgba(15,23,42,.06);
  color:var(--mc-muted);
  font-weight:850;
  font-size:14px;
  text-decoration:none;
}

.mc-footer-links a:hover{
  color:var(--mc-primary2);
  background:rgba(46,182,165,.10);
}

.mc-footer-credit{
  display:flex;
  align-items:center;
  gap:8px;
  color:var(--mc-muted);
  font-weight:750;
  font-size:13px;
}

.mc-credit-link{
  display:inline-flex;
  align-items:center;
  padding:8px 12px;
  border-radius:999px;
  background:rgba(46,182,165,.10);
  border:1px solid rgba(46,182,165,.18);
  color:var(--mc-primary2);
  font-weight:900;
  text-decoration:none;
}

.mc-credit-link:hover{
  background:rgba(46,182,165,.16);
}

/* Mobile footer */
@media (max-width:980px){
  .mc-footer-inner{flex-direction:column; align-items:flex-start}
  .mc-footer-right{align-items:flex-start}
  .mc-footer-links{justify-content:flex-start}
}
.mc-photo-cta{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-top:16px;
  padding:10px 16px;
  border-radius:999px;
  background:rgba(46,182,165,.12);
  color:var(--mc-primary2);
  font-weight:800;
  font-size:14px;
  text-decoration:none;
  border:1px solid rgba(46,182,165,.25);
  transition:all .25s ease;
}

.mc-photo-cta::after{
  content:"→";
  font-weight:900;
  transition:transform .25s ease;
}

.mc-photo-cta:hover{
  background:rgba(46,182,165,.20);
  box-shadow:0 10px 24px rgba(46,182,165,.18);
}

.mc-photo-cta:hover::after{
  transform:translateX(3px);
}
/* ========== HERO: fix mobile photo (porta la foto sopra e la rende leggibile) ========== */

@media (max-width: 980px){

  /* meno aria sopra per vedere subito contenuto */
  .mc-hero{
    padding-top: 84px; /* se hai header fisso: 76–96 va bene */
    padding-bottom: 42px;
  }

  /* stack in colonna */
  .mc-hero-grid{
    grid-template-columns: 1fr !important;
    gap: 18px !important;
  }

  /* FOTO PRIMA del testo/card su mobile */
  .mc-hero-media{
    order: -1;
    margin-bottom: 8px;
  }

  /* box foto: centrato e con altezza controllata */
  .mc-portrait.mc-portrait-premium{
    width: min(520px, 100%);
    margin: 0 auto;
    border-radius: 22px;
    overflow: hidden;
  }

  /* immagine: niente “tagli strani”, resta centrata */
  .mc-portrait.mc-portrait-premium img{
    display: block;
    width: 100%;
    height: auto;
    max-height: 360px;     /* aumenta/diminuisci: 320–420 */
    object-fit: contain;   /* se vuoi “riempire” cambi in cover */
    object-position: center top;
  }

  /* CTA sotto la foto: centrata e più “button-like” */
  .mc-photo-cta{
    width: min(520px, 100%);
    margin: 10px auto 0;
    text-align: center;
  }
}
/* ========== HEADER MOBILE – LOGO BILANCIATO ========== */
@media (max-width: 768px){

  /* header interno: più respiro */
  .mc-header-inner{
    padding-left: 28px;
    padding-right: 20px;
  }

  /* brand (logo + testo) */
  .mc-brand{
    gap: 10px;
    align-items: center;
  }

  /* LOGO */
  .mc-brand-logo{
    height: 40px;     /* 👈 dimensione corretta */
    width: auto;
  }

  /* eventuale testo accanto al logo */
  .mc-brand-text{
    font-size: 15px;
    line-height: 1.2;
  }
}

/* telefoni piccoli */
@media (max-width: 420px){
  .mc-brand-logo{
    height: 36px;
  }
}
/* FIX CTA mobile: testo sempre bianco e coerente */
.mc-nav-mobile .mc-mobile-cta{
  color: #fff !important;
}

.mc-nav-mobile .mc-mobile-cta:visited,
.mc-nav-mobile .mc-mobile-cta:hover,
.mc-nav-mobile .mc-mobile-cta:active{
  color: #fff !important;
}
/* Header must be sticky/fixed to hide/show */
#mcHeader{
  position: sticky;   /* se preferisci fixed dimmelo */
  top: 0;
  z-index: 9999;
  transform: translateY(0);
  transition: transform .22s ease, box-shadow .22s ease, background-color .22s ease;
  will-change: transform;
}

#mcHeader.is-hidden{
  transform: translateY(-120%);
}
/* Scroll to top button */
#mc-scroll-top{
  position: fixed;
  right: 20px;
  bottom: 24px;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: linear-gradient(135deg, #1fa6a1, #178f8b);
  color: #fff;
  border: none;
  font-size: 20px;
  cursor: pointer;
  box-shadow: 0 10px 30px rgba(0,0,0,.18);
  opacity: 0;
  pointer-events: none;
  transform: translateY(10px);
  transition: opacity .25s ease, transform .25s ease;
  z-index: 9999;
}

#mc-scroll-top.is-visible{
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

#mc-scroll-top:hover{
  transform: translateY(-2px);
}

/* Mobile leggermente più piccola */
@media (max-width: 768px){
  #mc-scroll-top{
    width: 42px;
    height: 42px;
    font-size: 18px;
    right: 16px;
    bottom: 18px;
  }
}
/* COOKIE BANNER */
.mc-cookie-banner{
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  width: calc(100% - 32px);
  max-width: 980px;
  background: #ffffff;
  border-radius: 16px;
  box-shadow: 0 20px 50px rgba(0,0,0,.15);
  padding: 16px 20px;
  z-index: 99999;
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s ease, transform .3s ease;
}

.mc-cookie-banner.is-visible{
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

.mc-cookie-inner{
  display: flex;
  gap: 16px;
  align-items: center;
  justify-content: space-between;
}

.mc-cookie-inner p{
  font-size: 14px;
  line-height: 1.5;
  color: #2b2b2b;
  margin: 0;
}

.mc-cookie-inner a{
  color: #1fa6a1;
  font-weight: 600;
}

.mc-cookie-actions{
  display: flex;
  gap: 10px;
  flex-shrink: 0;
}

.mc-cookie-btn{
  border-radius: 999px;
  padding: 8px 16px;
  font-size: 14px;
  cursor: pointer;
  border: none;
}

.mc-cookie-btn.primary{
  background: linear-gradient(135deg, #1fa6a1, #178f8b);
  color: #fff;
}

.mc-cookie-btn.ghost{
  background: #f1f3f5;
  color: #333;
}

/* Mobile */
@media (max-width: 768px){
  .mc-cookie-inner{
    flex-direction: column;
    align-items: flex-start;
  }

  .mc-cookie-actions{
    width: 100%;
    justify-content: flex-end;
  }
}
@media (max-width: 980px){
  .mc-hero-grid{
    display: flex !important;
    flex-direction: column;
    gap: 18px !important;
  }

  .mc-hero-text{ order: 1; }
  .mc-hero-media{ order: 2; }
}
/* HERO: ordine mobile definitivo */
@media (max-width: 980px){

  /* la HERO diventa una colonna unica */
  .mc-hero-grid{
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
  }

  /* IMPORTANTISSIMO:
     faccio diventare i figli di mc-hero-text e mc-hero-media
     "figli diretti" della colonna, così posso ordinarli come voglio */
  .mc-hero-text,
  .mc-hero-media{
    display: contents !important;
  }

  /* ====== ORDINE ESATTO ====== */
  .mc-badge{ order: 1 !important; }
  .mc-h1{ order: 2 !important; }
  .mc-sub{ order: 4 !important; }   /* "Specialista in..." */
  .mc-lead{ order: 5 !important; }

  /* la riga "Approccio moderno..." è dentro l'H1 come span:
     se invece nel tuo CSS è un blocco separato, dimmelo e lo sistemo.
     Intanto, lo forzo ad andare subito dopo il nome. */
  .mc-h1 .mc-h1-accent{
    display: block;
    margin-top: 8px;
  }

  /* FOTO */
  .mc-portrait{ order: 6 !important; }

  /* CTA sotto foto: prenotazioni */
  .mc-photo-cta{ order: 7 !important; }

  /* 3 blocchi */
  .mc-highlights{ order: 8 !important; }

  /* 2 bottoni (Dove riceve / Ambiti) */
  .mc-actions{ order: 9 !important; }

  /* ====== FOTO: deve vedersi bene su mobile ====== */
  .mc-portrait{
    width: 100% !important;
    max-width: 520px;
    margin: 0 auto !important;
    border-radius: 22px;
    overflow: hidden;
  }

  .mc-portrait img{
    width: 100% !important;
    height: auto !important;
    max-height: 420px;   /* alza/abbassa: 380–520 */
    object-fit: contain !important; /* niente tagli */
    display: block;
  }

  /* CTA "prenotazioni": centrata e bella */
  .mc-photo-cta{
    width: 100%;
    max-width: 520px;
    margin: 0 auto !important;
  }
}
/* HERO: griglia con aree (desktop) + ordine perfetto (mobile) */
.mc-hero-grid{
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  grid-template-areas:
    "text media"
    "actions media"
    "highlights media";
  gap: 28px;
  align-items: start;
}

.mc-hero-text{ grid-area: text; }
.mc-hero-media{ grid-area: media; }
.mc-hero-highlights{ grid-area: highlights; }
.mc-hero-actions{ grid-area: actions; }

/* FOTO: evita “effetto piccolo in mezzo al bianco” */
.mc-portrait{
  width: 100%;
  max-width: 520px;
  margin: 0 auto;
  aspect-ratio: 4 / 5;
  overflow: hidden;
}

.mc-portrait img{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain; /* importantissimo per non tagliare male e non rimpicciolire brutto */
}

/* CTA sotto foto più pulita */
.mc-photo-cta{
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}

/* MOBILE: ordine richiesto */
@media (max-width: 980px){
  .mc-hero-grid{
    grid-template-columns: 1fr;
    grid-template-areas:
      "text"
      "media"
      "highlights"
      "actions";
    gap: 18px;
  }

  .mc-portrait{
    max-width: 100%;
    aspect-ratio: 1 / 1.05; /* riempie meglio lo schermo */
  }
}
/* HERO – riduci spazio sopra il testo (mobile) */
@media (max-width: 980px){
  .mc-hero{
    padding-top: 32px !important; /* prima era ~84px */
  }

  .mc-hero-text{
    margin-top: 0 !important;
  }
}
@media (max-width: 980px){

  /* Approccio moderno */
  .mc-h1-accent{
    margin-bottom: -25px !important;
  }

  /* Specialista in Ortopedia e Traumatologia */
  .mc-sub{
    margin-top: 4px !important;
    margin-bottom: 10px !important;
  }

  /* Percorsi clinici */
  .mc-lead{
    margin-top: 0 !important;
  }
}
@media (max-width: 980px){

  .mc-photo-cta{
    white-space: nowrap;
    font-size: 12px;          /* leggermente più piccolo */
    padding: 12px 16px;       /* più compatto */
    text-align: center;
  }

}
@media (max-width: 980px){

  /* contenitore della hero: tiene tutto allineato */
  .mc-hero .mc-container{
    padding-left: 16px;
    padding-right: 16px;
  }

  /* 3 blocchi: centrati e stessa larghezza della foto */
  .mc-highlights{
    width: 100%;
    max-width: 520px;      /* uguale feeling “card foto” */
    margin: 16px auto 0;   /* centra */
  }

  .mc-highlight-card{
    width: 100%;
  }

  /* 2 pulsanti sotto: centrati e stessa larghezza */
  .mc-actions{
    width: 100%;
    max-width: 520px;
    margin: 14px auto 0;
    display: grid;
    gap: 10px;
  }

  .mc-actions .mc-btn{
    width: 100%;
    justify-content: center;
  }

}
html{
  scroll-behavior: smooth;
}

/* se l’utente ha ridotto animazioni, niente smooth */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
}
/* così quando scrolli su un elemento, non finisce sotto l’header */
#mcBodyTitle,
.mc-body-panel{
  scroll-margin-top: 110px; /* aumenta/diminuisci se serve */
}
/* =========================
   HEADER MOBILE – MEDICAL PREMIUM
   ========================= */
@media (max-width: 980px){

  /* HEADER */
  #mcHeader{
    padding: 10px 14px;
    background: #ffffff;
    border-bottom: 1px solid rgba(0,0,0,.06);
  }

  /* LOGO */
  #mcHeader .mc-brand img,
  #mcHeader img{
    height: 50px;
    width: auto;
    object-fit: contain;
  }

  /* CONTENITORE MENU */
  #mcHeader .mc-nav-toggle,
  #mcHeader button{
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(18,150,140,.12);
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
  }

  /* NASCONDI ICONE PRECEDENTI */
  #mcHeader svg,
  #mcHeader span{
    display: none;
  }

  /* 3 PUNTINI */
  #mcHeader .mc-nav-toggle::before{
    content: '';
    width: 5px;
    height: 5px;
    background: #12968c;
    border-radius: 50%;
    box-shadow:
      0 -8px 0 #12968c,
      0 8px 0 #12968c;
    display: block;
  }
}
@media (max-width: 980px){

  /* prende qualsiasi variante del portrait */
  .mc-hero .mc-hero-media .mc-portrait,
  .mc-hero .mc-hero-media .mc-portrait-premium{
    width: 100% !important;
    max-width: 460px !important;
    margin: 0 auto -18px !important;
    padding: 0 !important;
    border-radius: 24px !important;
    overflow: hidden !important;
    background: #fff !important;
    box-shadow: 0 14px 40px rgba(0,0,0,.08) !important;
  }

  .mc-hero .mc-hero-media .mc-portrait img,
  .mc-hero .mc-hero-media .mc-portrait-premium img{
    width: 100% !important;
    height: auto !important;
    max-height: 400px !important;
    object-fit: contain !important;
    object-position: center bottom !important;
    display: block !important;
  }

  .mc-hero .mc-hero-media .mc-photo-cta{
    width: calc(100% - 32px) !important;
    max-width: 460px !important;
    margin: 8px auto 0 !important;
  }
}
@media (max-width: 980px){

  .mc-photo-cta{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;

    padding: 12px 16px;
    font-size: 14px;
    line-height: 1.2;

    white-space: nowrap;
    overflow: hidden;
  }

  .mc-photo-cta span,
  .mc-photo-cta svg,
  .mc-photo-cta i{
    flex-shrink: 0;
  }

}
@media (max-width: 480px) {

  .mc-photo-cta{
    font-size: 13px;        /* ⬅️ QUESTO È IL PUNTO CHIAVE */
    line-height: 1.1;       /* testo più compatto */
    padding: 10px 14px;     /* meno spazio laterale */
    letter-spacing: -0.2px;
  }

}
/* ============================
   HERO PORTRAIT — DESKTOP FIX
   incolla in fondo a main.css
============================ */

/* blocco a destra (la card della foto) */
@media (min-width: 981px){
  #hero .mc-hero-media{
    align-self: stretch;
  }

  /* wrapper/card immagine */
  #hero .mc-hero-media .mc-portrait,
  #hero .mc-hero-media .mc-portrait-premium{
    height: 1000px;            /* <-- PARAMETRO 1: aumenta/diminuisci */
    max-height: 70vh;         /* evita che diventi enorme su schermi bassi */
    display: flex;
    align-items: flex-end;    /* foto appoggiata in basso */
  }

  /* l'immagine */
  #hero .mc-hero-media img{
    width: 100% !important;
    height: 100% !important;
    object-fit: contain;      /* <-- PARAMETRO 2: contain vs cover */
    object-position: center bottom; /* <-- PARAMETRO 3: sposta su/giù */
    display: block;
  }
}
@media (min-width: 981px){
  #hero .mc-hero-media .mc-portrait,
  #hero .mc-hero-media .mc-portrait-premium{
    height: 780px;      /* <-- GIOCA QUI */
    max-height: 78vh;
    display: flex;
    align-items: flex-end;
  }

  #hero .mc-hero-media img{
    width: 100%;
    height: 100%;
    object-fit: cover;             /* <-- rende tutto più grande */
    object-position: center 35%;   /* <-- regola testa */
    display: block;
  }
}
/* =========================================================
   FIX V2 — HERO FOTO + BODY MAP (STABILE SU RESIZE)
   INCOLLA IN FONDO A main.css
   ========================================================= */

/* =======================
   HERO FOTO (NO taglio testa, NO mega box)
   ======================= */
#hero .mc-portrait{
  width: 100% !important;
  max-width: 520px !important;
  margin: 0 auto !important;
  height: auto !important;          /* <-- niente box enorme */
  aspect-ratio: auto !important;     /* <-- disattiva ratio che gonfia */
  padding: 0 !important;
  overflow: hidden !important;
}

#hero .mc-portrait img{
  width: 100% !important;
  height: auto !important;           /* <-- l’immagine decide l’altezza */
  max-height: 520px !important;      /* <-- limite desktop “premium” */
  object-fit: contain !important;    /* <-- NON taglia la testa */
  object-position: center top !important;
  display: block !important;
}

/* tablet: un pelo più grande ma sempre senza tagli */
@media (max-width: 980px){
  #hero .mc-portrait img{
    max-height: 460px !important;
  }
}

/* telefoni: più compatta */
@media (max-width: 520px){
  #hero .mc-portrait img{
    max-height: 380px !important;
  }
}


/* =======================
   BODY MAP (PUNTI SEMPRE AL POSTO)
   ======================= */

/* 1) lo stage NON deve avere padding, sennò le % sballano */
#attivita .mc-body-stage{
  position: relative !important;
  padding: 0 !important;
  margin: 0 !important;
  transform: none !important;
}

/* 2) l’immagine deve “definire” le dimensioni dello stage:
      niente max-height, niente object-fit */
#attivita .mc-body-img{
  display: block !important;
  width: 100% !important;
  height: auto !important;
  max-height: none !important;     /* <-- IMPORTANTISSIMO */
  object-fit: initial !important;  /* <-- evita contain/cover */
  margin: 0 !important;
  pointer-events: none !important;
}

/* 3) hotspot: sempre assoluti su --x/--y */
#attivita .mc-hotspot{
  position: absolute !important;
  left: var(--x) !important;
  top:  var(--y) !important;
  transform: translate(-50%, -50%) !important;
}

/* 4) su tablet/mobile nascondi label per pulizia (già ce l’hai, lo rinforzo) */
@media (max-width: 980px){
  #attivita .mc-hotlabel{ display:none !important; }
}
/* =========================
   CV MODAL – PROFESSIONAL
   ========================= */

.mc-cv-wrapper{
  margin-top: 24px;
  text-align: center;
}

.mc-cv-modal{
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
}

.mc-cv-modal.is-open{
  display: block;
}

.mc-cv-backdrop{
  position: absolute;
  inset: 0;
  background: rgba(15,23,42,.55);
  backdrop-filter: blur(4px);
}

.mc-cv-panel{
  position: relative;
  max-width: 960px;
  height: 85vh;
  margin: 5vh auto;
  background: #fff;
  border-radius: 18px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 40px 120px rgba(15,23,42,.35);
}

.mc-cv-header{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 18px;
  background: #f8fafc;
  border-bottom: 1px solid #e5e7eb;
  font-weight: 600;
}

.mc-cv-actions{
  display: flex;
  gap: 12px;
  align-items: center;
}

.mc-cv-download{
  font-size: 14px;
  font-weight: 700;
  color: var(--mc-primary);
  text-decoration: none;
}

.mc-cv-close{
  background: none;
  border: 0;
  font-size: 20px;
  cursor: pointer;
}

.mc-cv-panel iframe{
  width: 100%;
  height: 100%;
  border: 0;
}

/* Mobile */
@media (max-width: 640px){
  .mc-cv-panel{
    height: 90vh;
    margin: 3vh 12px;
  }
}
/* =================================================
   CV BUTTON + MODAL (finale)
   incolla in fondo a main.css
   ================================================= */

/* Bottone CV accanto ai pill */
.mc-profile-badges{
  align-items:center;
}

.mc-cv-btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:10px 14px;
  border-radius:999px;
  border:1px solid rgba(46,182,165,.22);
  background:rgba(46,182,165,.10);
  color:var(--mc-primary2);
  font-weight:950;
  cursor:pointer;
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;
}

.mc-cv-btn::after{
  content:"↗";
  font-weight:900;
  opacity:.9;
}

.mc-cv-btn:hover{
  transform:translateY(-1px);
  background:rgba(46,182,165,.16);
  border-color:rgba(46,182,165,.32);
  box-shadow:0 14px 30px rgba(15,23,42,.10);
}

/* Mobile: bottone full width sotto i pill */
@media (max-width:980px){
  .mc-cv-btn{
    width:100%;
    justify-content:center;
  }
}

/* ===== MODAL ===== */
.mc-modal{
  position:fixed;
  inset:0;
  z-index:99999;
  display:none;
}

.mc-modal.is-open{ display:block; }

.mc-modal__overlay{
  position:absolute;
  inset:0;
  background:rgba(15,23,42,.55);
  backdrop-filter:saturate(160%) blur(6px);
}

.mc-modal__panel{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  width:min(980px, calc(100% - 24px));
  height:min(78vh, 760px);

  background:#fff;
  border-radius:20px;
  border:1px solid rgba(15,23,42,.10);
  box-shadow:0 30px 90px rgba(15,23,42,.22);
  overflow:hidden;

  display:flex;
  flex-direction:column;
}

.mc-modal__head{
  padding:14px 16px;
  border-bottom:1px solid rgba(15,23,42,.08);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  background:rgba(245,247,249,.72);
}

.mc-modal__title{
  font-weight:950;
  color:var(--mc-text);
}

.mc-modal__actions{
  display:flex;
  align-items:center;
  gap:10px;
}

.mc-modal__download{
  text-decoration:none;
  font-weight:950;
  padding:10px 12px;
  border-radius:999px;
  background:linear-gradient(90deg, var(--mc-primary2), var(--mc-primary));
  color:#fff;
  box-shadow:0 12px 26px rgba(46,182,165,.22);
}

.mc-modal__download:hover{ opacity:.96; }

.mc-modal__close{
  width:40px;
  height:40px;
  border-radius:999px;
  border:1px solid rgba(15,23,42,.10);
  background:#fff;
  cursor:pointer;
  font-weight:900;
  color:var(--mc-text);
}

.mc-modal__close:hover{
  background:rgba(46,182,165,.10);
}

.mc-modal__body{
  flex:1;
  background:#fff;
}

.mc-modal__frame{
  width:100%;
  height:100%;
  border:0;
}

/* Mobile: modal più alta */
@media (max-width:640px){
  .mc-modal__panel{
    height:86vh;
    border-radius:16px;
  }
  .mc-modal__download{
    padding:9px 10px;
    font-size:13px;
  }
}
/* ===== CV BUTTON come CTA verde (uguale a header CTA) ===== */
.mc-cv-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;

  padding:12px 16px;
  border-radius:999px;

  border:0;
  cursor:pointer;

  /* stesso stile CTA */
  background: linear-gradient(90deg, var(--mc-primary2), var(--mc-primary));
  color:#fff;
  font-weight:950;

  box-shadow:0 14px 30px rgba(46,182,165,.22);
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}

.mc-cv-btn::after{
  content:"↗";
  font-weight:900;
  opacity:.95;
}

.mc-cv-btn:hover{
  transform:translateY(-1px);
  box-shadow:0 18px 44px rgba(46,182,165,.28);
  filter:saturate(1.05);
}

/* mobile: va a capo e prende tutta la riga */
@media (max-width:980px){
  .mc-cv-btn{
    width:100%;
  }
}
/* ===========================
   PROFILO — FIX CTA "Visualizza CV" su mobile/tablet
   (metti in fondo al main.css)
   =========================== */

/* 1) Le pill devono poter andare a capo */
.mc-profile-badges{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
  justify-content:flex-end;
}

/* 2) Stile base bottone CV (verde evidente) 
   -> funziona sia se è <a> che <button> */
.mc-profile-badges .mc-cv-btn,
.mc-profile-badges a[href*="cv-enrico-balboni.pdf"],
.mc-profile-badges .mc-pill-cv{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;

  padding: 12px 18px;
  border-radius: 999px;
  border: 1px solid transparent;

  /* verde CTA (simile al tuo header-cta) */
  background: #0f7f7a;
  color:#fff !important;
  font-weight: 700;
  text-decoration: none;

  box-shadow: 0 10px 25px rgba(0,0,0,.12);
  transition: transform .15s ease, filter .15s ease;
}

.mc-profile-badges .mc-cv-btn:hover,
.mc-profile-badges a[href*="cv-enrico-balboni.pdf"]:hover,
.mc-profile-badges .mc-pill-cv:hover{
  transform: translateY(-1px);
  filter: brightness(1.03);
}

/* 3) MOBILE/TABLET: il CV va sotto e diventa full width, leggibile */
@media (max-width: 980px){
  .mc-profile-head{
    gap: 14px;
  }

  .mc-profile-badges{
    justify-content:flex-start;
  }

  /* CV a capo, grande, bello */
  .mc-profile-badges .mc-cv-btn,
  .mc-profile-badges a[href*="cv-enrico-balboni.pdf"],
  .mc-profile-badges .mc-pill-cv{
    flex: 0 0 100%;
    width: 100%;
    order: 99;               /* lo spinge in fondo alle pill */
    margin-top: 6px;

    padding: 14px 16px;
    font-size: 16px;
    line-height: 1.1;
  }
}

/* 4) TELEFONI PICCOLI: ancora più pulito */
@media (max-width: 480px){
  .mc-profile-badges .mc-cv-btn,
  .mc-profile-badges a[href*="cv-enrico-balboni.pdf"],
  .mc-profile-badges .mc-pill-cv{
    font-size: 15px;
    padding: 13px 14px;
  }
}
/* =========================================================
   FIX CTA "Visualizza CV" — versione PREMIUM (non a barra)
   Incolla in fondo a main.css (sovrascrive il codice prima)
   ========================================================= */

/* contenitore pill */
.mc-profile-badges{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
  justify-content:flex-start; /* su mobile è più naturale */
}

/* bottone CV: pill premium, NON barra */
.mc-profile-badges .mc-cv-btn,
.mc-profile-badges a[href*="cv-enrico-balboni.pdf"],
.mc-profile-badges .mc-pill-cv{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;

  width:auto !important;
  flex: 0 0 auto !important;
  order: 20;                 /* dopo le pill */
  margin-top: 6px;

  padding: 11px 16px;
  border-radius: 999px;

  background: #0f7f7a;
  color:#fff !important;
  font-weight: 800;
  font-size: 14px;
  line-height: 1;
  letter-spacing: .2px;

  text-decoration:none;
  border: 1px solid rgba(255,255,255,.0);
  box-shadow: 0 10px 20px rgba(0,0,0,.12);
  transition: transform .15s ease, filter .15s ease;
}

.mc-profile-badges .mc-cv-btn:hover,
.mc-profile-badges a[href*="cv-enrico-balboni.pdf"]:hover,
.mc-profile-badges .mc-pill-cv:hover{
  transform: translateY(-1px);
  filter: brightness(1.03);
}

/* MOBILE/TABLET: centrato e max-width, niente barra */
@media (max-width: 980px){
  .mc-profile-badges{
    justify-content:flex-start;
  }

  .mc-profile-badges .mc-cv-btn,
  .mc-profile-badges a[href*="cv-enrico-balboni.pdf"],
  .mc-profile-badges .mc-pill-cv{
    display:inline-flex;
    width: auto !important;
    max-width: 260px;
    justify-content:center;

    padding: 12px 16px;
    font-size: 15px;
  }
}

/* TELEFONI PICCOLI: ancora più pulito */
@media (max-width: 480px){
  .mc-profile-badges .mc-cv-btn,
  .mc-profile-badges a[href*="cv-enrico-balboni.pdf"],
  .mc-profile-badges .mc-pill-cv{
    max-width: 240px;
    font-size: 14px;
    padding: 11px 14px;
  }
}
/* CTA CV sotto le card (look premium) */
.mc-profile-cta{
  display:flex;
  justify-content:center;
  margin-top:18px;
}

.mc-cv-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;

  padding:14px 22px;
  border-radius:999px;

  background:#0f7f7a;
  color:#fff !important;
  font-weight:800;
  letter-spacing:.2px;
  text-decoration:none;

  box-shadow:0 14px 28px rgba(0,0,0,.14);
  transition:transform .15s ease, filter .15s ease;
}

.mc-cv-btn:hover{ transform:translateY(-1px); filter:brightness(1.03); }

@media (max-width: 980px){
  .mc-profile-cta{ justify-content:flex-start; }
  .mc-cv-btn{ width:100%; max-width:420px; }
}

@media (max-width: 480px){
  .mc-cv-btn{ padding:13px 18px; }
}
/* CV come CTA tra le pill (più evidente) */
.mc-profile-badges .mc-cv-btn{
  background: linear-gradient(135deg, #0f7f7a, #0b5f5b);
  color:#fff !important;
  border:1px solid rgba(255,255,255,.18);
  box-shadow:0 14px 30px rgba(15,127,122,.22);
  position:relative;
  overflow:hidden;
}

.mc-profile-badges .mc-cv-btn::after{
  content:"";
  position:absolute;
  inset:-40%;
  background: radial-gradient(circle, rgba(255,255,255,.22), transparent 60%);
  transform: translateX(-35%);
  opacity:.6;
}

@media (max-width: 980px){
  .mc-profile-badges .mc-cv-btn{
    margin-top:10px;
  }
}
/* ================================
   CV MODAL – header responsive
   ================================ */

/* Contenitore header popup (metti i selettori più comuni) */
.mc-cv-modal-header,
.mc-cv-topbar,
.mc-modal-top,
.mc-cv-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 14px;
}

/* Titolo del popup */
.mc-cv-modal-title,
.mc-cv-title,
.mc-modal-title {
  margin: 0;
  font-weight: 800;
  line-height: 1.1;
  font-size: 16px;
}

/* Area azioni (download + chiudi) */
.mc-cv-modal-actions,
.mc-cv-actions,
.mc-modal-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

/* Bottone download */
.mc-cv-download{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;      /* NON andare a capo */
  padding: 10px 14px;
  border-radius: 999px;
  background: #0f7f7a;
  color: #fff !important;
  font-weight: 800;
  text-decoration: none;
  line-height: 1;
}

/* Testo alternativo: desktop vs mobile */
.mc-cv-dl-short{ display: none; }

/* Pulsante chiudi (se usi una X) */
.mc-cv-close,
.mc-modal-close{
  width: 40px;
  height: 40px;
  border-radius: 999px;
  display:flex;
  align-items:center;
  justify-content:center;
}

/* --------- MOBILE/TABLET --------- */
@media (max-width: 640px){

  /* Header in colonna: titolo sopra, bottoni sotto */
  .mc-cv-modal-header,
  .mc-cv-topbar,
  .mc-modal-top,
  .mc-cv-head{
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    padding: 12px 12px;
  }

  /* Titolo su 2 righe massimo, senza sballare */
  .mc-cv-modal-title,
  .mc-cv-title,
  .mc-modal-title{
    font-size: 15px;
    text-align: left;
  }

  /* Azioni full width, ben allineate */
  .mc-cv-modal-actions,
  .mc-cv-actions,
  .mc-modal-actions{
    justify-content: space-between;
    width: 100%;
  }

  /* Bottone download più compatto e largo */
  .mc-cv-download{
    padding: 11px 14px;
    min-width: 120px;
  }

  /* Su mobile mostra solo "PDF" */
  .mc-cv-dl-full{ display: none; }
  .mc-cv-dl-short{ display: inline; }
}
/* ===============================
   HOTSPOT — più visibili + pulse
   =============================== */

/* area clic più grande (invisibile) */
#attivita .mc-hotspot{
  width: 44px;           /* hit area */
  height: 44px;
  border: 0;
  background: transparent;
  padding: 0;
  cursor: pointer;
}

/* il pallino vero */
#attivita .mc-hotdot{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 14px;           /* pallino */
  height: 14px;
  border-radius: 999px;

  background: var(--mc-primary2); /* verde */
  box-shadow:
    0 0 0 4px rgba(46,182,165,.18),   /* ring */
    0 10px 22px rgba(15,23,42,.18);  /* ombra */
}

/* anello animato (ping) */
#attivita .mc-hotdot::after{
  content:"";
  position: absolute;
  inset: -10px;          /* quanto “esce” l’onda */
  border-radius: 999px;
  border: 2px solid rgba(46,182,165,.55);
  opacity: .65;
  transform: scale(.55);
  animation: mcPing 1.7s ease-out infinite;
}

/* glow leggero costante */
#attivita .mc-hotdot::before{
  content:"";
  position: absolute;
  inset: -14px;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(46,182,165,.22), transparent 62%);
  opacity: .9;
}

/* hover/focus: più “evidente” */
#attivita .mc-hotspot:hover .mc-hotdot,
#attivita .mc-hotspot:focus-visible .mc-hotdot{
  transform: translate(-50%, -50%) scale(1.06);
  box-shadow:
    0 0 0 6px rgba(46,182,165,.22),
    0 14px 28px rgba(15,23,42,.22);
}

/* se vuoi, quando un hotspot è "attivo" (classe da JS) */
#attivita .mc-hotspot.is-active .mc-hotdot{
  background: var(--mc-primary);
}
#attivita .mc-hotspot.is-active .mc-hotdot::after{
  border-color: rgba(23,143,139,.70);
}

/* animazione */
@keyframes mcPing{
  0%   { transform: scale(.55); opacity: .65; }
  70%  { transform: scale(1.20); opacity: 0; }
  100% { transform: scale(1.20); opacity: 0; }
}

/* rispetta chi non vuole animazioni */
@media (prefers-reduced-motion: reduce){
  #attivita .mc-hotdot::after{
    animation: none;
    opacity: .45;
    transform: scale(.9);
  }
}
@media (min-width: 981px){
  #attivita .mc-hotlabel{
    opacity: .95;
    font-weight: 700;
  }
}
#attivita .mc-hotspot:focus-visible{
  outline: 3px solid rgba(46,182,165,.35);
  outline-offset: 6px;
  border-radius: 999px;
}
/* =========================================
   HOTSPOT — ULTRA VISIBILE (premium)
   incolla in fondo a main.css
   ========================================= */

#attivita .mc-hotspot{
  width: 56px;                 /* area clic più grande */
  height: 56px;
  border: 0;
  background: transparent;
  padding: 0;
  cursor: pointer;
}

#attivita .mc-hotdot{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  width: 18px;                 /* DOT più grande */
  height: 18px;
  border-radius:999px;

  background: var(--mc-primary2);

  /* stacco SUPER: bordo bianco + ring */
  border: 3px solid #fff;
  box-shadow:
    0 0 0 6px rgba(46,182,165,.28),   /* ring */
    0 14px 28px rgba(15,23,42,.22);   /* ombra */
}

/* onda molto più evidente */
#attivita .mc-hotdot::after{
  content:"";
  position:absolute;
  inset:-16px;
  border-radius:999px;
  border: 3px solid rgba(46,182,165,.65);
  opacity: .85;
  transform: scale(.55);
  animation: mcPingStrong 1.35s ease-out infinite;
}

/* glow più “leggibile” */
#attivita .mc-hotdot::before{
  content:"";
  position:absolute;
  inset:-22px;
  border-radius:999px;
  background: radial-gradient(circle, rgba(46,182,165,.35), transparent 62%);
  opacity: 1;
}

/* hover/focus: ancora più chiaro che è cliccabile */
#attivita .mc-hotspot:hover .mc-hotdot,
#attivita .mc-hotspot:focus-visible .mc-hotdot{
  transform:translate(-50%,-50%) scale(1.08);
  box-shadow:
    0 0 0 8px rgba(46,182,165,.30),
    0 18px 36px rgba(15,23,42,.26);
}

/* stato attivo (se metti la classe via JS) */
#attivita .mc-hotspot.is-active .mc-hotdot{
  background: var(--mc-primary);
}

@keyframes mcPingStrong{
  0%   { transform: scale(.55); opacity: .90; }
  70%  { transform: scale(1.25); opacity: 0; }
  100% { transform: scale(1.25); opacity: 0; }
}

@media (prefers-reduced-motion: reduce){
  #attivita .mc-hotdot::after{ animation:none; opacity:.65; transform:scale(.95); }
}
@media (min-width: 981px){
  #attivita .mc-hotlabel{
    display:inline-block !important;
    margin-left: 10px;
    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(255,255,255,.92);
    border: 1px solid rgba(15,23,42,.08);
    box-shadow: 0 10px 22px rgba(15,23,42,.10);
    font-weight: 800;
    font-size: 12px;
    color: #0f172a;
  }
}
/* ===============================
   HOTSPOT — VERSIONE MEDICAL CLEAN
   =============================== */

#attivita .mc-hotspot{
  width: 56px;
  height: 56px;
  background: transparent;
  border: none;
  padding: 0;
}

/* DOT = anello (niente centro bianco) */
#attivita .mc-hotdot{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  width: 18px;
  height: 18px;
  border-radius:999px;

  background: transparent;                /* ⬅️ niente pallino */
  border: 3px solid var(--mc-primary2);   /* anello verde */

  box-shadow:
    0 0 0 6px rgba(46,182,165,.25),
    0 12px 24px rgba(15,23,42,.22);
}
#attivita .mc-hotdot::after{
  content:"";
  position:absolute;
  inset:-18px;
  border-radius:999px;
  border: 3px solid rgba(46,182,165,.55);
  animation: mcPingClean 1.4s ease-out infinite;
}

@keyframes mcPingClean{
  0%   { transform: scale(.6); opacity: .9; }
  70%  { transform: scale(1.3); opacity: 0; }
  100% { opacity: 0; }
}
/* ===============================
   LABEL — SUPER LEGGIBILE
   =============================== */

#attivita .mc-hotlabel{
  display:inline-block !important;
  margin-left: 10px;
  padding: 6px 12px;

  background: rgba(255,255,255,.96);
  border-radius: 999px;
  border: 1px solid rgba(15,23,42,.08);

  font-weight: 800;
  font-size: 13px;
  color: #0f172a;

  box-shadow: 0 10px 22px rgba(15,23,42,.12);
  white-space: nowrap;
}
#attivita .mc-hotspot:hover .mc-hotdot{
  transform:translate(-50%,-50%) scale(1.1);
  box-shadow:
    0 0 0 8px rgba(46,182,165,.30),
    0 18px 36px rgba(15,23,42,.28);
}
/* =========================================================
   HOTSPOTS — FIX UNICO (OVERRIDE TOTALE)
   Incolla in FONDO a main.css (non cancellare nulla)
   ========================================================= */

#attivita .mc-body-stage{ position:relative !important; }

/* bottone hotspot: area cliccabile più grande */
#attivita .mc-hotspot{
  position:absolute !important;
  left: var(--x) !important;
  top:  var(--y) !important;
  transform: translate(-50%, -50%) !important;

  width: 64px !important;
  height: 64px !important;
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  cursor: pointer !important;
  z-index: 5 !important;
}

/* DOT: RING (niente pallino bianco) + glow */
#attivita .mc-hotspot .mc-hotdot{
  position:absolute !important;
  left:50% !important;
  top:50% !important;
  transform:translate(-50%,-50%) !important;

  width: 18px !important;
  height: 18px !important;
  border-radius: 999px !important;

  background: transparent !important;                  /* ✅ no centro bianco */
  border: 3px solid var(--mc-primary2) !important;     /* ✅ ring verde */

  box-shadow:
    0 0 0 7px rgba(46,182,165,.28) !important,
    0 16px 34px rgba(15,23,42,.22) !important;
}

/* Pulse esterno (ping) */
#attivita .mc-hotspot .mc-hotdot::after{
  content:"" !important;
  position:absolute !important;
  inset:-18px !important;
  border-radius:999px !important;
  border: 3px solid rgba(46,182,165,.55) !important;
  opacity: .95 !important;
  animation: mcPingClean 1.35s ease-out infinite !important;
}

@keyframes mcPingClean{
  0%   { transform: scale(.55); opacity: .95; }
  70%  { transform: scale(1.35); opacity: 0; }
  100% { opacity: 0; }
}

/* Hover: più evidente */
#attivita .mc-hotspot:hover .mc-hotdot{
  transform:translate(-50%,-50%) scale(1.12) !important;
  box-shadow:
    0 0 0 9px rgba(46,182,165,.32) !important,
    0 22px 46px rgba(15,23,42,.28) !important;
}

/* LABEL: pill bianca super leggibile */
#attivita .mc-hotspot .mc-hotlabel{
  position:absolute !important;
  left: calc(50% + 18px) !important;
  top: 50% !important;
  transform: translateY(-50%) !important;

  display:inline-flex !important;
  align-items:center !important;

  padding: 6px 12px !important;
  border-radius: 999px !important;

  background: rgba(255,255,255,.96) !important;
  border: 1px solid rgba(15,23,42,.10) !important;

  color: #0f172a !important;
  font-weight: 900 !important;
  font-size: 13px !important;
  line-height: 1 !important;
  white-space: nowrap !important;

  box-shadow: 0 12px 24px rgba(15,23,42,.14) !important;
  pointer-events:none !important; /* click passa al bottone */
}

/* Mobile: nascondi label (pulito) */
@media (max-width: 980px){
  #attivita .mc-hotspot .mc-hotlabel{ display:none !important; }
}
/* =========================================================
   HOTSPOTS — PREMIUM LABEL + UNDERLINE BAR (UNICO BLOCCO)
   Incolla in fondo a main.css (non cancellare nulla)
   ========================================================= */

#attivita .mc-hotspot{
  width: 70px !important;
  height: 70px !important;
}

/* DOT: pulito, medical, con doppio ring */
#attivita .mc-hotspot .mc-hotdot{
  width: 18px !important;
  height: 18px !important;
  background: #ffffff !important; /* centro pulito (se lo vuoi vuoto dimmelo e lo tolgo) */
  border: 3px solid var(--mc-primary2) !important;
  box-shadow:
    0 0 0 7px rgba(46,182,165,.18) !important,
    0 14px 28px rgba(15,23,42,.18) !important;
}

/* pulse più elegante (meno “tamarrata”) */
#attivita .mc-hotspot .mc-hotdot::after{
  inset: -20px !important;
  border: 3px solid rgba(46,182,165,.35) !important;
  animation: mcPingPremium 1.6s ease-out infinite !important;
}
@keyframes mcPingPremium{
  0%   { transform: scale(.55); opacity: .85; }
  70%  { transform: scale(1.35); opacity: 0; }
  100% { opacity: 0; }
}

#attivita .mc-hotspot:hover .mc-hotdot{
  transform:translate(-50%,-50%) scale(1.12) !important;
  box-shadow:
    0 0 0 9px rgba(46,182,165,.22) !important,
    0 22px 44px rgba(15,23,42,.22) !important;
}

/* ===== LABEL PREMIUM (pill) ===== */
#attivita .mc-hotspot .mc-hotlabel{
  position:absolute !important;
  left: calc(50% + 20px) !important;
  top: 50% !important;
  transform: translateY(-50%) !important;

  padding: 8px 14px 10px !important;
  border-radius: 999px !important;

  background: rgba(255,255,255,.96) !important;
  border: 1px solid rgba(15,23,42,.10) !important;

  color: #0f172a !important;
  font-weight: 950 !important;
  font-size: 13px !important;
  letter-spacing: .1px !important;
  line-height: 1 !important;
  white-space: nowrap !important;

  box-shadow: 0 14px 28px rgba(15,23,42,.14) !important;
  pointer-events:none !important;

  /* per la barra sotto */
  display: inline-flex !important;
  flex-direction: column !important;
  gap: 7px !important;
}

/* ✅ “pallino/linea” sotto il testo → diventa una barra lunga quanto il testo */
#attivita .mc-hotspot .mc-hotlabel::after{
  content:"" !important;
  display:block !important;

  width: 100% !important;            /* 🔥 lunga quanto il testo */
  height: 4px !important;
  border-radius: 999px !important;

  background: linear-gradient(90deg, var(--mc-primary2), var(--mc-primary)) !important;
  opacity: .95 !important;
}

/* Se vuoi un look ancora più premium: aggiungo “accent” sul testo in hover */
#attivita .mc-hotspot:hover .mc-hotlabel{
  border-color: rgba(46,182,165,.22) !important;
  box-shadow: 0 18px 34px rgba(15,23,42,.18) !important;
}

/* MOBILE: scelta A) lascia i testi ma più piccoli */
@media (max-width: 980px){
  #attivita .mc-hotspot{
    width: 62px !important;
    height: 62px !important;
  }
  #attivita .mc-hotspot .mc-hotlabel{
    font-size: 12px !important;
    padding: 7px 12px 9px !important;
  }
}

/* MOBILE: scelta B) se preferisci super pulito, scommenta questo
@media (max-width: 980px){
  #attivita .mc-hotspot .mc-hotlabel{ display:none !important; }
}
*/
/* ==============================
   FIX: barra sotto = lunga quanto la parola
   incolla in fondo a main.css
   ============================== */

#attivita .mc-hotspot .mc-hotlabel{
  display: inline-block !important;     /* prende la width del testo */
  width: max-content !important;        /* 🔥 larga quanto la parola */
  max-width: none !important;           /* niente limiti */
  overflow: visible !important;         /* niente tagli */
  white-space: nowrap !important;       /* non andare a capo */
}

#attivita .mc-hotspot .mc-hotlabel::after{
  display: block !important;
  width: 100% !important;               /* barra = 100% del testo */
  max-width: none !important;
}

/* se per caso c’è qualche regola che taglia il label */
#attivita .mc-hotspot{
  overflow: visible !important;
}
/* =========================================
   HOTSPOT LABEL – FIX LINEA (QUALSIASI STRUTTURA)
   incolla in fondo a main.css
   ========================================= */

/* 1) la pill (label) deve adattarsi al testo */
.mc-hotlabel{
  display: inline-flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: center !important;

  width: fit-content !important;
  max-width: none !important;

  padding: 8px 16px 10px !important;
  border-radius: 999px !important;

  white-space: nowrap !important;
  line-height: 1 !important;
}

/* 2) qualunque “riga”/underline esistente sotto al testo -> 100% del testo */
.mc-hotlabel > *:last-child{
  width: 100% !important;
}

/* Se l’underline è una span/div con class varie */
.mc-hotlabel .mc-underline,
.mc-hotlabel .mc-line,
.mc-hotlabel .mc-bar,
.mc-hotlabel .hotline,
.mc-hotlabel .underline,
.mc-hotlabel .line{
  display: block !important;
  width: 100% !important;
  height: 3px !important;
  margin-top: 6px !important;
  border-radius: 999px !important;
}

/* Se l’underline è fatta con ::after o ::before */
.mc-hotlabel::after,
.mc-hotlabel::before{
  width: 100% !important;
}

/* 3) se la linea era “corta” perché aveva un max-width */
.mc-hotlabel *{
  max-width: none !important;
}
/* =========================================
   HOTSPOT LABEL — SOLO TESTO (NO QUADRATO)
   incolla in fondo a main.css
   ========================================= */

/* Label = solo testo, niente pill */
.mc-hotlabel{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  border-radius: 0 !important;

  display: inline-block !important;
  width: auto !important;
  max-width: none !important;

  font-weight: 900 !important;
  font-size: 14px !important;
  letter-spacing: .2px !important;
  line-height: 1.05 !important;

  /* leggibilità su immagine */
  color: #0f172a !important;
  text-shadow:
    0 2px 10px rgba(255,255,255,.95),
    0 1px 0 rgba(255,255,255,.90),
    0 10px 22px rgba(15,23,42,.12) !important;

  white-space: nowrap !important;
}

/* Riga sotto premium (sempre lunga quanto il testo) */
.mc-hotlabel::after{
  content: "" !important;
  display: block !important;
  width: 100% !important;
  height: 3px !important;
  margin-top: 6px !important;
  border-radius: 999px !important;
  background: linear-gradient(90deg, rgba(46,182,165,1), rgba(46,182,165,.25)) !important;
  box-shadow: 0 10px 20px rgba(46,182,165,.18) !important;
}

/* Se avevi una “linea” HTML vecchia sotto al testo, la nascondo */
.mc-hotlabel > *{
  display: none !important;
}

/* Hover/attivo: un filo più brillante */
.mc-hotspot:hover .mc-hotlabel,
.mc-hotspot.is-active .mc-hotlabel{
  color: #0b3b38 !important;
  text-shadow:
    0 2px 12px rgba(255,255,255,.98),
    0 10px 26px rgba(46,182,165,.14) !important;
}

.mc-hotspot:hover .mc-hotlabel::after,
.mc-hotspot.is-active .mc-hotlabel::after{
  filter: saturate(1.12);
}

/* Mobile: testo un pelo più grande */
@media (max-width: 640px){
  .mc-hotlabel{
    font-size: 15px !important;
  }
}
/* =========================================================
   HOTSPOT LABEL — FORZA "NO QUADRATO" (massima priorità)
   incolla in fondo a main.css
   ========================================================= */

#attivita .mc-body-stage .mc-hotspot .mc-hotlabel{
  /* NO pill / NO box */
  background: transparent !important;
  background-color: transparent !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;

  /* NO padding / NO radius */
  padding: 0 !important;
  border-radius: 0 !important;

  /* comportamento testo */
  display: inline-block !important;
  width: auto !important;
  max-width: none !important;
  white-space: nowrap !important;

  /* look premium leggibile */
  font-weight: 900 !important;
  font-size: 14px !important;
  letter-spacing: .2px !important;
  line-height: 1.05 !important;
  color: #0f172a !important;

  /* stacco su immagine */
  text-shadow:
    0 2px 10px rgba(255,255,255,.95),
    0 1px 0 rgba(255,255,255,.9),
    0 12px 24px rgba(15,23,42,.12) !important;
}

/* Linea sotto = lunga quanto il testo */
#attivita .mc-body-stage .mc-hotspot .mc-hotlabel::after{
  content: "" !important;
  display: block !important;
  width: 100% !important;
  height: 3px !important;
  margin-top: 6px !important;
  border-radius: 999px !important;
  background: linear-gradient(90deg, rgba(46,182,165,1), rgba(46,182,165,.25)) !important;
  box-shadow: 0 10px 20px rgba(46,182,165,.18) !important;
}

/* Se per caso il quadrato viene dal PARENT (button), lo neutralizzo */
#attivita .mc-body-stage .mc-hotspot{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}

/* Mobile: leggermente più grande */
@media (max-width: 640px){
  #attivita .mc-body-stage .mc-hotspot .mc-hotlabel{
    font-size: 15px !important;
  }
}
/* =========================================
   PREMIUM SCROLL REVEAL (medical style)
   ========================================= */

.mc-reveal{
  opacity: 0;
  transform: translateY(22px);
  transition:
    opacity .9s cubic-bezier(.22,.61,.36,1),
    transform .9s cubic-bezier(.22,.61,.36,1);
  will-change: opacity, transform;
}

.mc-reveal.is-visible{
  opacity: 1;
  transform: translateY(0);
}

/* Variante più soft per testi */
.mc-reveal--soft{
  transform: translateY(14px);
}

/* Variante per titoli */
.mc-reveal--title{
  transform: translateY(26px);
}
/* FIX mobile: pill "Prenotazioni gestite direttamente dalle strutture" */
.mc-photo-cta{
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  margin: 12px auto 0 !important;
  padding: 12px 16px !important;

  text-align: center !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  overflow-wrap: anywhere !important; /* evita tagli strani */
}

/* Se il parent ha overflow nascosto e lo taglia */
.mc-hero-media,
.mc-portrait,
.mc-hero{
  overflow: visible !important;
}
/* FIX OVERFLOW ORIZZONTALE MOBILE */
html, body {
  overflow-x: hidden !important;
  max-width: 100% !important;
}

/* Fix hero pseudo-element */
.mc-hero::before,
.mc-hero-bg {
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  overflow: hidden !important;
}