/* ==========================================================================
   moveIn – sezione "Punti di interesse": slider delle categorie
   Tutte le regole partono da .mi-punti-interesse. Usa le variabili del sito (--lp-*);
   verde, blu e arancione dei livelli sono quelli della webapp.
   ========================================================================== */

.mi-punti-interesse {
    position: relative; isolation: isolate; overflow: hidden;
    background: var(--lp-blue-deep, #16294a); color: #fff;   /* stesso blu della fascia dei numeri */
    --mi-ok: #009E73;
    --mi-lim: #4D9ECA;
    --mi-no: #D55E00;
    --mi-ease: cubic-bezier(.22, .7, .2, 1);
}

/* sezione più compatta in verticale */
.lp-section.mi-punti-interesse { padding: 72px 0 64px; }
@media (max-width: 700px) { .lp-section.mi-punti-interesse { padding: 56px 0 48px; } }

/* stessi bagliori della fascia dei numeri */
.mi-punti-interesse::before {
    content: ""; position: absolute; inset: 0; z-index: -1;
    background:
        radial-gradient(600px 300px at 8% 0%, rgba(58, 104, 173, .55), transparent 70%),
        radial-gradient(700px 360px at 95% 100%, rgba(58, 104, 173, .55), transparent 70%);
}
.mi-punti-interesse .lp-kicker { color: #9fb8e6; }
.mi-punti-interesse h2 { color: #fff; }

/* Intestazione centrata e compatta */
.mi-punti-interesse .mi-head { max-width: 760px; margin: 0 auto 6px; text-align: center; }
.mi-punti-interesse .mi-head h2 { margin-bottom: 10px; }
.mi-punti-interesse .mi-intro { margin: 0 auto; max-width: 620px; color: rgba(255, 255, 255, .75); }

/* Slider: nastro con tutte le categorie; la corrente al centro, le vicine in trasparenza ai lati */
.mi-punti-interesse .mi-slider { position: relative; padding: 0 64px; border-radius: 24px; background: transparent; outline: none; }
.mi-punti-interesse .mi-slider:focus-visible { box-shadow: 0 0 0 3px var(--lp-gold, #d6a02a); }
.mi-punti-interesse .mi-viewport { position: relative; min-height: 372px; overflow: hidden; touch-action: pan-y; user-select: none; }
.mi-punti-interesse .mi-viewport.is-track {
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 22%, #000 78%, transparent 100%);
    mask-image: linear-gradient(to right, transparent 0, #000 22%, #000 78%, transparent 100%);
}
.mi-punti-interesse .mi-noscript { margin: 0; text-align: center; color: rgba(255, 255, 255, .75); }

.mi-punti-interesse .mi-slide {
    --d: 0;
    position: absolute; top: 0; left: 50%; width: min(560px, 62%);
    display: flex; flex-direction: column; align-items: center; text-align: center; padding-top: 14px;
    transform: translateX(calc(-50% + var(--d) * 54%)) scale(.7); transform-origin: 50% 30%;
    opacity: 0; transition: transform .6s var(--mi-ease), opacity .45s ease;
}
.mi-punti-interesse .mi-slide.is-current { transform: translateX(-50%) scale(1); opacity: 1; z-index: 2; }
.mi-punti-interesse .mi-slide.is-near { opacity: .3; cursor: pointer; z-index: 1; }
.mi-punti-interesse .mi-slide.is-near:hover { opacity: .45; }
.mi-punti-interesse .mi-slide.is-far { pointer-events: none; }
.mi-punti-interesse .mi-slide:not(.is-current) .mi-pills,
.mi-punti-interesse .mi-slide:not(.is-current) .mi-cat-note { visibility: hidden; }

/* Pin grande: il PNG della webapp, con ombra a terra (effetto 3D) */
.mi-punti-interesse .mi-pin {
    position: relative; width: 158px; height: 204px; margin-bottom: 14px;
    filter: drop-shadow(8px 14px 12px rgba(0, 0, 0, .32));
}
.mi-punti-interesse .mi-pin-svg { position: relative; display: block; width: 100%; height: 100%; overflow: visible; }
.mi-punti-interesse .mi-pin.is-swap .mi-pin-svg { animation: mi-pin-swap .4s cubic-bezier(.3, 1.5, .5, 1); }
@keyframes mi-pin-swap { from { transform: scale(.82) translateY(6px); } to { transform: none; } }
.mi-punti-interesse .mi-pin-ground {
    position: absolute; left: 50%; bottom: -7%; width: 58%; height: 11%; transform: translateX(-50%);
    border-radius: 50%; background: radial-gradient(ellipse at center, rgba(0, 0, 0, .55) 0%, rgba(0, 0, 0, .25) 45%, rgba(0, 0, 0, 0) 72%);
    filter: blur(2px);
}
/* Fermate e vaporetti: pallino blu della webapp, in rilievo */
.mi-punti-interesse .mi-pin.is-dot { width: 158px; height: 204px; display: flex; align-items: center; justify-content: center; }
.mi-punti-interesse .mi-dot {
    position: relative; display: block; width: 116px; height: 116px; border-radius: 50%;
    background: radial-gradient(circle at 34% 30%, rgba(255, 255, 255, .45), transparent 42%), var(--mi-dot, #0072B2);
    border: 5px solid #fff; box-shadow: inset -6px -8px 14px rgba(0, 0, 0, .18);
}
.mi-punti-interesse .mi-pin.is-dot .mi-pin-ground { bottom: 8%; }
.mi-punti-interesse .mi-dot-sm { width: 26px; height: 26px; border-width: 3px; margin: auto; }

.mi-punti-interesse .mi-cat { margin: 0 0 12px; font-size: clamp(1.4rem, 3vw, 1.9rem); color: #fff; white-space: nowrap; }
.mi-punti-interesse .mi-pills { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.mi-punti-interesse .mi-pill {
    display: inline-flex; align-items: center; gap: 7px; padding: 6px 14px; border-radius: 999px; cursor: pointer;
    border: 1px solid var(--lp-line, #e3e8f2); background: #fff; color: var(--lp-ink, #16213a);
    font: inherit; font-size: .86rem; font-weight: 500;
    transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.mi-punti-interesse .mi-pill i { color: var(--lp-blue, #3a68ad); font-size: .85rem; }
.mi-punti-interesse .mi-pill:hover { border-color: #cdd8ea; }
.mi-punti-interesse .mi-pill[aria-pressed="true"] { background: var(--lp-blue, #3a68ad); border-color: rgba(255, 255, 255, .85); color: #fff; }
.mi-punti-interesse .mi-pill[aria-pressed="true"] i { color: #fff; }
.mi-punti-interesse .mi-pill:focus-visible { outline: 3px solid var(--lp-gold, #d6a02a); outline-offset: 2px; }
.mi-punti-interesse .mi-cat-note { margin: 10px auto 0; max-width: 460px; font-size: .86rem; color: rgba(255, 255, 255, .72); }

/* Frecce rotonde ai lati, all'altezza del pin */
.mi-punti-interesse .mi-arrow {
    position: absolute; top: 118px; transform: translateY(-50%); z-index: 3;
    width: 48px; height: 48px; border-radius: 50%; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid rgba(255, 255, 255, .35); background: rgba(255, 255, 255, .1); color: #fff;
    box-shadow: none; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
    transition: transform .15s ease, box-shadow .15s ease;
}
.mi-punti-interesse .mi-prev { left: max(4px, calc(50% - 430px)); }
.mi-punti-interesse .mi-next { right: max(4px, calc(50% - 430px)); }
.mi-punti-interesse .mi-arrow:hover { background: rgba(255, 255, 255, .2); }
.mi-punti-interesse .mi-arrow:focus-visible { outline: 3px solid var(--lp-gold, #d6a02a); outline-offset: 2px; }

/* Contatore delle categorie (al posto dei pallini) */
.mi-punti-interesse .mi-dots {
    display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 8px;
    font-family: 'Plus Jakarta Sans', sans-serif; font-size: .85rem; letter-spacing: .08em; color: rgba(255, 255, 255, .55);
}
.mi-punti-interesse .mi-count-now { color: #fff; font-weight: 500; }
.mi-punti-interesse .mi-count-bar { position: relative; width: 96px; height: 2px; border-radius: 2px; background: rgba(255, 255, 255, .2); overflow: hidden; }
.mi-punti-interesse .mi-count-bar span { position: absolute; left: 0; top: 0; bottom: 0; background: #fff; border-radius: 2px; transition: width .5s var(--mi-ease); }

/* Livelli di accessibilità */
.mi-punti-interesse .mi-levels { margin-top: 24px; transition: opacity .2s ease; }
.mi-punti-interesse .mi-levels.is-hidden { display: none; }   /* es. Rampe: nessun livello di accessibilità */
.mi-punti-interesse .mi-levels-title {
    margin: 0 0 12px; text-align: center; font-size: .8rem; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: #9fb8e6;
}
.mi-punti-interesse .mi-levels-grid {
    display: flex; flex-wrap: wrap; justify-content: center; gap: 10px;
    transition: opacity .18s ease;
}
.mi-punti-interesse .mi-levels-grid.is-single { justify-content: center; }
.mi-punti-interesse .mi-levels-grid.is-fading { opacity: 0; }
.mi-punti-interesse .mi-level {
    --mi-level-color: var(--mi-ok);
    display: flex; align-items: center; gap: 10px; width: auto; min-width: 190px; padding: 8px 18px 8px 10px; text-align: left; cursor: pointer;
    border: 2px solid var(--lp-line, #e3e8f2); border-radius: 999px; background: #fff;
    font: inherit; color: var(--lp-ink, #16213a);
    transition: border-color .25s ease, box-shadow .25s ease;
}
.mi-punti-interesse .mi-level[aria-pressed="true"] { border-color: var(--mi-level-color); box-shadow: 0 0 0 1px var(--mi-level-color), 0 10px 22px -14px rgba(0, 0, 0, .6); }
.mi-punti-interesse .mi-level:focus-visible { outline: 3px solid var(--lp-gold, #d6a02a); outline-offset: 2px; }
.mi-punti-interesse .mi-level-pin { position: relative; flex: none; display: inline-flex; width: 30px; height: 39px; filter: drop-shadow(2px 4px 4px rgba(22, 41, 74, .25)); }
.mi-punti-interesse .mi-level-pin::after {   /* ombra a terra anche per i pin piccoli */
    content: ""; position: absolute; left: 50%; bottom: -4px; width: 20px; height: 5px; transform: translateX(-50%); z-index: -1;
    border-radius: 50%; background: radial-gradient(ellipse at center, rgba(22, 41, 74, .4), rgba(22, 41, 74, 0) 70%);
}
.mi-punti-interesse .mi-level-pin img, .mi-punti-interesse .mi-level-pin .mi-mini-pin { position: relative; z-index: 1; }
.mi-punti-interesse .mi-level-pin img, .mi-punti-interesse .mi-level-svg { width: 30px; height: 39px; display: block; overflow: visible; }
.mi-punti-interesse .mi-mini-pin { --mi-pin-color: var(--mi-ok); position: relative; display: block; width: 30px; height: 39px; }
.mi-punti-interesse .mi-mini-pin .mi-pin-fill { fill: var(--mi-pin-color); }
.mi-punti-interesse .mi-mini-pin .mi-pin-glyph { font-size: 16px; }
.mi-punti-interesse .mi-level-text { display: flex; flex-direction: column; gap: 2px; }
.mi-punti-interesse .mi-level-text strong { font-weight: 500; font-size: .94rem; }
.mi-punti-interesse .mi-level-text span { font-size: .82rem; color: var(--lp-muted, #55607a); }
.mi-punti-interesse .mi-levels-note { margin: 12px 0 0; text-align: center; font-size: .85rem; color: rgba(255, 255, 255, .72); }

/* Responsive: livelli uno sotto l'altro, frecce più piccole ai lati del pin */
@media (max-width: 700px) {
    .mi-punti-interesse .mi-slider { padding: 0 6px; }
    .mi-punti-interesse .mi-slide { width: 76%; transform: translateX(calc(-50% + var(--d) * 70%)) scale(.66); }
    .mi-punti-interesse .mi-pin, .mi-punti-interesse .mi-pin.is-dot { width: 120px; height: 155px; }
    .mi-punti-interesse .mi-dot { width: 88px; height: 88px; }
    .mi-punti-interesse .mi-cat { white-space: normal; }
    .mi-punti-interesse .mi-arrow { width: 36px; height: 36px; top: 92px; }
    .mi-punti-interesse .mi-prev { left: 0; }
    .mi-punti-interesse .mi-next { right: 0; }
    .mi-punti-interesse .mi-viewport { min-height: 330px; }
    .mi-punti-interesse .mi-level { min-width: 0; }
}

/* Movimento ridotto: cambio di categoria immediato */
@media (prefers-reduced-motion: reduce) {
    .mi-punti-interesse .mi-slide,
    .mi-punti-interesse .mi-pin-fill,
    .mi-punti-interesse .mi-levels-grid,
    .mi-punti-interesse .mi-count-bar span,
    .mi-punti-interesse .mi-level { transition: none; }
}

/* ==========================================================================
   "Vedi un esempio": pulsante sotto lo slider e mappa 3D al posto di slider e livelli
   ========================================================================== */
.mi-punti-interesse .mi-ex-open-row { display: flex; justify-content: center; margin-top: 16px; }
.mi-punti-interesse .mi-ex-open-row[hidden], .mi-punti-interesse .mi-slider[hidden], .mi-punti-interesse .mi-levels[hidden] { display: none; }
.mi-punti-interesse .mi-ex-open {
    display: inline-flex; align-items: center; gap: 10px; padding: 7px 18px 7px 7px; border: 0; border-radius: 999px; cursor: pointer;
    background: #fff; color: var(--lp-blue-deep, #16294a); font: inherit; font-size: .92rem; font-weight: 500;
    box-shadow: 0 14px 32px -16px rgba(0, 0, 0, .65);
    transition: transform .18s ease, box-shadow .18s ease;
}
.mi-punti-interesse .mi-ex-open:hover { transform: translateY(-2px); box-shadow: 0 18px 36px -16px rgba(0, 0, 0, .7); }
.mi-punti-interesse .mi-ex-open:focus-visible { outline: 3px solid var(--lp-gold, #d6a02a); outline-offset: 3px; }
.mi-punti-interesse .mi-ex-open-ic {
    display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%;
    background: var(--lp-blue, #3a68ad); color: #fff; font-size: .7rem;
}
.mi-punti-interesse .mi-ex-open-ic i { margin-left: 2px; }

/* dissolvenza: slider e livelli escono, la mappa entra (e al ritorno il contrario) */
.mi-punti-interesse .mi-slider, .mi-punti-interesse .mi-ex-open-row, .mi-punti-interesse .mi-levels, .mi-punti-interesse .mi-ex-hint { transition: opacity .35s ease, transform .35s ease; }
.mi-punti-interesse.is-ex-leaving .mi-slider,
.mi-punti-interesse.is-ex-leaving .mi-ex-open-row,
.mi-punti-interesse.is-ex-leaving .mi-levels,
.mi-punti-interesse.is-ex-leaving .mi-ex-hint { opacity: 0; transform: translateY(10px); }
.mi-punti-interesse.is-ex-back .mi-slider,
.mi-punti-interesse.is-ex-back .mi-ex-open-row,
.mi-punti-interesse.is-ex-back .mi-levels,
.mi-punti-interesse.is-ex-back .mi-ex-hint { animation: mi-ex-in .45s ease both; }
@keyframes mi-ex-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* ==========================================================================
   Meno pulsanti: il pin centrale apre l'esempio (si tocca il pin), niente frecce
   (si cambia categoria toccando i pin ai lati, trascinando o con ← →).
   ========================================================================== */
.mi-punti-interesse .mi-ex-hint[hidden] { display: none; }
.mi-punti-interesse button.mi-pin { display: block; padding: 0; border: 0; background: none; font: inherit; color: inherit; cursor: default; }
.mi-punti-interesse button.mi-pin.is-dot { display: flex; }
.mi-punti-interesse .mi-slide.is-current button.mi-pin { cursor: pointer; transition: transform .25s cubic-bezier(.22, .7, .2, 1); }
.mi-punti-interesse .mi-slide.is-current button.mi-pin:hover { transform: translateY(-5px); }
.mi-punti-interesse button.mi-pin:focus-visible { outline: 3px solid var(--lp-gold, #d6a02a); outline-offset: 6px; border-radius: 24px; }

/* ==========================================================================
   Sfondo bianco, indicazione "tocca il pin" in evidenza, livelli come etichette colorate
   ========================================================================== */
.mi-punti-interesse { background: #fff; color: var(--lp-ink, #16213a); }
.mi-punti-interesse::before { display: none; }
.mi-punti-interesse .lp-kicker { color: var(--lp-blue, #3a68ad); }
.mi-punti-interesse h2, .mi-punti-interesse .mi-cat { color: var(--lp-ink, #16213a); }
.mi-punti-interesse .mi-intro, .mi-punti-interesse .mi-noscript, .mi-punti-interesse .mi-cat-note, .mi-punti-interesse .mi-levels-note { color: var(--lp-muted, #55607a); }
.mi-punti-interesse .mi-slide.is-near { opacity: .35; }
.mi-punti-interesse .mi-pin-ground { opacity: .55; }
.mi-punti-interesse .mi-pin { filter: drop-shadow(8px 14px 12px rgba(22, 41, 74, .22)); }
.mi-punti-interesse .mi-pill { border-color: var(--lp-line, #e3e8f2); }
.mi-punti-interesse .mi-pill[aria-pressed="true"] { border-color: var(--lp-blue, #3a68ad); }
.mi-punti-interesse .mi-dots { color: var(--lp-muted, #55607a); }
.mi-punti-interesse .mi-count-now { color: var(--lp-ink, #16213a); }
.mi-punti-interesse .mi-count-bar { background: var(--lp-line, #e3e8f2); }
.mi-punti-interesse .mi-count-bar span { background: var(--lp-blue, #3a68ad); }
.mi-punti-interesse .mi-levels-title { color: var(--lp-muted, #55607a); }
.mi-punti-interesse .mi-ex-foot { color: var(--lp-muted, #55607a); }
.mi-punti-interesse .mi-ex.is-loading .mi-ex-view::after { color: var(--lp-muted, #55607a); }
.mi-punti-interesse .mi-ex-back { box-shadow: 0 0 0 1px var(--lp-line, #e3e8f2), 0 10px 24px -14px rgba(0, 0, 0, .4); }

/* indicazione: il pin si tocca */
.mi-punti-interesse .mi-ex-hint {
    display: flex; width: fit-content; align-items: center; gap: 10px; margin: 18px auto 0; padding: 10px 20px 10px 14px;
    border-radius: 999px; background: var(--lp-tint, #f3f6fb); color: var(--lp-blue-dark, #2a5191);
    font-size: 1rem; font-weight: 500; text-align: center;
}
.mi-punti-interesse .mi-ex-hint i { font-size: 1.15rem; color: var(--lp-blue, #3a68ad); transform-origin: 50% 90%; animation: mi-tap 1.8s ease-in-out infinite; }
@keyframes mi-tap { 0%, 60%, 100% { transform: none; } 70% { transform: translateY(3px) scale(.9); } 80% { transform: none; } }
.mi-punti-interesse .mi-slide.is-current button.mi-pin:hover { transform: translateY(-6px) scale(1.03); }

/* livelli: etichette piccole nel colore del livello (piena quella scelta) */
.mi-punti-interesse .mi-levels { margin-top: 22px; }
.mi-punti-interesse .mi-levels-grid { gap: 8px; align-items: center; }
.mi-punti-interesse .mi-level,
.mi-punti-interesse .mi-level[aria-pressed="true"] {
    flex-direction: row; gap: 0; min-width: 0; max-width: none; padding: 5px 13px; text-align: center; opacity: 1;
    border: 1.5px solid var(--mi-level-color); border-radius: 999px; background: #fff; box-shadow: none;
    color: var(--mi-level-color); transition: background-color .2s ease, color .2s ease;
}
.mi-punti-interesse .mi-level:hover { background: color-mix(in srgb, var(--mi-level-color) 10%, #fff); }
.mi-punti-interesse .mi-level[aria-pressed="true"] { background: var(--mi-level-color); color: #fff; }
.mi-punti-interesse .mi-level-text { flex-direction: row; align-items: baseline; gap: 6px; }
.mi-punti-interesse .mi-level-text strong { font-size: .82rem; font-weight: 500; line-height: 1.3; color: inherit; }
.mi-punti-interesse .mi-level-text span { font-size: .78rem; color: inherit; opacity: .85; }
.mi-punti-interesse .mi-level-text span::before { content: "· "; }
@media (max-width: 700px) {
    .mi-punti-interesse .mi-levels-grid { flex-wrap: wrap; }
    .mi-punti-interesse .mi-level.is-wide .mi-level-text { flex-direction: column; gap: 0; align-items: center; }
    .mi-punti-interesse .mi-level.is-wide .mi-level-text span::before { content: none; }
    .mi-punti-interesse .mi-ex-hint { font-size: .92rem; }
}
@media (prefers-reduced-motion: reduce) { .mi-punti-interesse .mi-ex-hint i { animation: none; } }

/* Frecce accanto al pin centrale: fanno capire che si può scorrere tra le categorie */
.mi-punti-interesse .mi-arrow,
.mi-punti-interesse .mi-prev,
.mi-punti-interesse .mi-next {
    top: 112px; width: 40px; height: 40px;
    border: 1px solid var(--lp-line, #e3e8f2); background: #fff; color: var(--lp-blue, #3a68ad);
    box-shadow: 0 8px 18px -12px rgba(22, 41, 74, .45); backdrop-filter: none; -webkit-backdrop-filter: none;
}
.mi-punti-interesse .mi-prev { left: calc(50% - 138px); right: auto; animation: mi-nudge-l 2.6s ease-in-out infinite; }
.mi-punti-interesse .mi-next { right: calc(50% - 138px); left: auto; animation: mi-nudge-r 2.6s ease-in-out infinite; }
.mi-punti-interesse .mi-arrow:hover { background: var(--lp-tint, #f3f6fb); border-color: var(--lp-blue, #3a68ad); animation: none; }
@keyframes mi-nudge-l { 0%, 70%, 100% { transform: translateY(-50%); } 80% { transform: translate(-4px, -50%); } 90% { transform: translateY(-50%); } }
@keyframes mi-nudge-r { 0%, 70%, 100% { transform: translateY(-50%); } 80% { transform: translate(4px, -50%); } 90% { transform: translateY(-50%); } }
@media (max-width: 700px) {
    .mi-punti-interesse .mi-arrow { width: 34px; height: 34px; top: 86px; }
    .mi-punti-interesse .mi-prev { left: calc(50% - 104px); }
    .mi-punti-interesse .mi-next { right: calc(50% - 104px); }
}
@media (prefers-reduced-motion: reduce) { .mi-punti-interesse .mi-prev, .mi-punti-interesse .mi-next { animation: none; } }