/* Caso studio MioSostituto v2 (7 nov 2026): apertura + 7 capitoli. Generato a mano, pagina da build_caso.py */
/* Prova apertura caso MioSostituto (7 nov 2026).
   Idea: «Agosto? Trovato!». Sosti si affaccia da dietro il nome,
   sullo sfondo la rete di esagoni cerca un sostituto e lo trova. */
@font-face{font-family:"Inter";src:url("../font/inter-latin.woff2") format("woff2");font-weight:100 900;font-display:swap}

.mx{
  --navy:#020817; --navy-2:#071a33; --ciano:#1ab8f0; --ciano-2:#7fd9f8; --ghiaccio:#e6f6fd; --ardesia:#94a3b8;
  --inter:"Inter",system-ui,sans-serif;
  background:var(--navy);
}
body:has(.mx){background:#020817}

/* ---------- la sezione ---------- */
.ap{position:relative;min-height:100vh;min-height:100svh;overflow:hidden;isolation:isolate;
  display:flex;color:#f8fafc;background:radial-gradient(120% 90% at 30% 70%,#06162c 0%,#020817 62%)}
.ap-rete{position:absolute;inset:0;width:100%;height:100%;z-index:-2;display:block}
.ap-velo{position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,rgba(2,8,23,.55) 0%,rgba(2,8,23,0) 24%,rgba(2,8,23,0) 70%,rgba(2,8,23,.7) 100%)}

.ap-dentro{position:relative;display:grid;grid-template-rows:auto 1fr auto;width:100%;
  padding-top:calc(var(--menu-h) + clamp(20px,3vw,48px));padding-bottom:clamp(24px,3vw,44px)}

/* ---------- in alto ---------- */
.ap-alto{display:grid;grid-template-columns:1fr minmax(0,560px);gap:32px;align-items:start}
.ap-briciole{font-family:var(--inter);font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--ardesia);
  display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.ap-briciole a{color:var(--ciano)}
.ap-briciole a:hover{color:#fff}
.ap-claim{font-family:var(--inter);font-weight:700;font-size:clamp(26px,2.5vw,42px);line-height:1.08;letter-spacing:-.025em;color:#f8fafc;margin:0;max-width:16ch}
.ap-claim em{font-style:normal;color:var(--ciano)}
.ap-indice{list-style:none;margin:clamp(22px,2.4vw,36px) 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:28px;
  border-top:1px solid rgba(148,163,184,.22)}
.ap-indice li{border-bottom:1px solid rgba(148,163,184,.14)}
.ap-indice a{display:flex;gap:12px;align-items:baseline;padding:9px 0;font-family:var(--inter);font-size:15px;font-weight:500;color:rgba(248,250,252,.82);
  transition:color .3s,transform .4s var(--curva-out)}
.ap-indice a span{font-size:11px;font-weight:700;letter-spacing:.1em;color:var(--ciano);min-width:20px}
.ap-indice a:hover{color:#fff;transform:translateX(4px)}

/* ---------- il nome e Sosti ---------- */
.ap-parola-box{position:relative;align-self:end;margin-top:clamp(40px,8vh,120px)}
.ap-parola{font-family:var(--inter);font-weight:800;letter-spacing:-.062em;line-height:.8;margin:0;white-space:nowrap;
  font-size:var(--fs,14.6vw);color:#f8fafc;position:relative;z-index:2;padding-bottom:.06em}
.ap-l{display:inline-block}
.ap-punto{color:var(--ciano)}

/* la finestra da cui Sosti sbuca: il bordo basso coincide con la cima delle lettere basse */
.ap-sbuca{position:absolute;z-index:1;overflow:visible;clip-path:inset(-60% -40% 0 -40%);pointer-events:none;
  left:var(--sx,22%);width:var(--sw,24%);bottom:var(--sb,40%);height:var(--sh,60%)}
.ap-sosti{position:absolute;left:0;right:0;bottom:0;aspect-ratio:220/230;
  transform:translate3d(0,var(--sale,100%),0);transition:transform .9s cubic-bezier(.22,1.25,.36,1)}
.ap-sosti.fermo{transition:none}
.ap-s{position:absolute;inset:0;width:100%;height:100%;overflow:visible;visibility:hidden;transform-origin:50% 92%}
/* cambio di posa netto, nascosto da uno schiacciamento breve */
.ap-sosti.ap-pop .ap-s{animation:ap-pop .42s cubic-bezier(.3,1.6,.5,1)}
@keyframes ap-pop{0%{transform:scale(1.07,.9)}100%{transform:none}}
/* «Trovato!»: un salto solo, atterraggio con schiacciamento */
.ap-sosti.ap-salto .ap-s{animation:ap-salta .78s cubic-bezier(.33,0,.4,1)}
@keyframes ap-salta{0%{transform:scale(1.08,.9)}12%{transform:translateY(-3%) scale(.95,1.06)}45%{transform:translateY(-17%) scale(.98,1.02)}78%{transform:translateY(0) scale(1.06,.92)}100%{transform:none}}
.ap-sosti[data-fase="ciao"] .ap-s--ciao,
.ap-sosti[data-fase="agosto"] .ap-s--agosto,
.ap-sosti[data-fase="trovato"] .ap-s--trovato{visibility:visible}
.ap-s .s-terra{display:none}
.ap-s .s-occhi{transition:transform .25s var(--curva-out)}

/* fumetto */
.ap-fumetto{position:absolute;z-index:3;margin:0;left:var(--fx,40%);bottom:var(--fy,90%);
  font-family:var(--inter);font-weight:800;font-size:clamp(16px,1.5vw,24px);letter-spacing:-.01em;line-height:1;
  pointer-events:none;opacity:0;transform:translate3d(0,8px,0) scale(.9);transform-origin:0 100%;
  transition:opacity .35s var(--curva-out),transform .5s var(--curva-out)}
.ap-fumetto.su{opacity:1;transform:none}
.ap-f{display:none;padding:.62em .9em .66em;background:#f8fafc;color:var(--navy);border-radius:999px 999px 999px 6px;
  box-shadow:0 10px 30px rgba(2,8,23,.45)}
.ap-fumetto[data-fase="ciao"] .ap-f--ciao,
.ap-fumetto[data-fase="agosto"] .ap-f--agosto,
.ap-fumetto[data-fase="trovato"] .ap-f--trovato{display:inline-block}
.ap-fumetto[data-fase="trovato"] .ap-f--trovato{background:var(--ciano);color:var(--navy)}

/* ---------- in basso ---------- */
.ap-basso{display:flex;justify-content:space-between;align-items:end;gap:32px;margin-top:clamp(20px,2.4vw,36px);
  padding-top:clamp(16px,1.6vw,22px);border-top:1px solid rgba(148,163,184,.22)}
.ap-scheda{display:grid;grid-template-columns:repeat(4,auto);gap:clamp(20px,3.4vw,64px);margin:0}
.ap-scheda dt{font-family:var(--inter);font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ardesia);margin-bottom:6px}
.ap-scheda dd{margin:0;font-family:var(--inter);font-size:15px;font-weight:500;color:#f8fafc}
.ap-scorri{margin:0;font-family:var(--inter);font-size:13px;color:var(--ardesia);display:flex;align-items:center;gap:12px;max-width:30ch;text-align:right}
.ap-scorri span{flex:none;width:1px;height:34px;background:linear-gradient(var(--ciano),transparent);animation:ap-gocc 2.2s var(--curva) infinite}
@keyframes ap-gocc{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* ---------- entrata ---------- */
.js .ap-l{transform:translate3d(0,105%,0);opacity:0}
.ap.entra .ap-l{transform:none;opacity:1;transition:transform 1.1s var(--curva-out),opacity .6s linear;transition-delay:calc(var(--i) * 45ms + 150ms)}
.js .ap-alto,.js .ap-basso{opacity:0;transform:translate3d(0,14px,0)}
.ap.entra .ap-alto,.ap.entra .ap-basso{opacity:1;transform:none;transition:opacity .9s linear,transform 1.1s var(--curva-out);transition-delay:.7s}
.ap.entra .ap-basso{transition-delay:.9s}
.ap-parola{overflow:hidden}

/* ---------- tablet e telefono ---------- */
@media (max-width:1024px){
  .ap-alto{grid-template-columns:1fr}
  .ap-destra{max-width:560px}
  .ap-scheda{grid-template-columns:repeat(2,auto)}
}
@media (max-width:640px){
  .ap-indice{display:none}
  .ap-claim{font-size:clamp(24px,7vw,32px)}
  .ap-basso{flex-direction:column;align-items:start}
  .ap-scheda{grid-template-columns:1fr 1fr;row-gap:16px;column-gap:20px}
  .ap-scheda dd{font-size:14px}
  .ap-scorri{text-align:left}
  .ap-parola-box{margin-top:clamp(120px,24vh,200px)}
}

@media (prefers-reduced-motion:reduce){
  .js .ap-l,.js .ap-alto,.js .ap-basso{transform:none;opacity:1}
  .ap-scorri span{animation:none}
}

/* ---------- piccoli gesti di Sosti ---------- */
.ap-s .s-saluto{transform-box:view-box;transform-origin:156px 122px;animation:ap-saluta 1.6s var(--curva) infinite}
@keyframes ap-saluta{0%,100%{transform:rotate(0)}20%{transform:rotate(-14deg)}40%{transform:rotate(6deg)}60%{transform:rotate(-10deg)}80%{transform:rotate(2deg)}}
.ap-s .s-goccia{transform-box:view-box;transform-origin:150px 60px;animation:ap-goccia 1.8s ease-in infinite}
@keyframes ap-goccia{0%{transform:translate(0,-6px);opacity:0}25%{opacity:1}100%{transform:translate(4px,22px);opacity:0}}
/* nel titolo il calendario sta più in alto, sopra il taglio delle lettere */
.ap-s .s-cal{transform-box:view-box;transform-origin:156px 128px;transform:translate(-4px,-54px);animation:ap-cal-su 2.4s var(--curva) infinite}
@keyframes ap-cal-su{0%,100%{transform:translate(-4px,-54px) rotate(0)}50%{transform:translate(-4px,-54px) rotate(-5deg)}}
@keyframes ap-cal{0%,100%{transform:rotate(0)}50%{transform:rotate(-5deg)}}
.ap-s .s-stella{transform-box:fill-box;transform-origin:center;animation:ap-stella 1.2s var(--curva-out) infinite}
.ap-s .s-stella--2{animation-delay:.3s}
@keyframes ap-stella{0%{transform:scale(.2) rotate(0);opacity:0}40%{transform:scale(1.15) rotate(40deg);opacity:1}100%{transform:scale(.9) rotate(90deg);opacity:.0}}
.ap-s .s-batti{transform-box:fill-box;transform-origin:center;animation:ap-batti 4.2s infinite}
@keyframes ap-batti{0%,46%,50%,100%{transform:scaleY(1)}48%{transform:scaleY(.1)}}
@media (prefers-reduced-motion:reduce){.ap-s *{animation:none!important}}
.ap-s{filter:url(#ap-sticker)}
@media (min-width:641px){.ap-basso{padding-right:clamp(150px,13vw,210px)}}
/* la griglia non deve allargarsi per il nome: è il nome che si adatta alla griglia */
.ap-dentro{grid-template-columns:minmax(0,1fr)}
.ap-alto>*,.ap-parola-box,.ap-basso{min-width:0}
.ap-parola-box{width:100%}
@media (max-width:640px){.ap-scheda{width:100%}.ap-scheda dd{overflow-wrap:anywhere}}
.ap-dentro{min-width:0}
@media (max-width:640px){.ap-fumetto{font-size:14px}}

/* =====================================================================
   I CAPITOLI
   ===================================================================== */
.mx{--navy2:#0b1630;--ciano-s:#0a8fc4;--bianco:#f8fafc;--grigio:#e6eaee;--molla:cubic-bezier(.32,.72,0,1)}
.mx-cap{position:relative;padding-block:clamp(96px,11vw,200px);overflow:clip;font-family:var(--inter)}
.mx-chiaro{background:var(--bianco);color:var(--navy)}
.mx-ghiaccio{background:var(--ghiaccio);color:var(--navy)}
.mx-scuro{background:var(--navy);color:var(--bianco)}
.mx-grigio{background:var(--grigio);color:var(--navy)}
.mx-cap em{font-style:normal;color:var(--ciano)}
.mx-chiaro em,.mx-ghiaccio em,.mx-grigio em{color:var(--ciano-s)}
.mx .sosti{display:block;overflow:visible}
.mx .sosti g,.mx .sosti path,.mx .sosti ellipse{transform-box:view-box}
.mx-scuro .sosti,.mx-sticker-tavolo .sosti,.mx-poster .sosti,.mx-notifica .sosti{filter:url(#ap-sticker)}

.mx-num{display:flex;align-items:center;gap:14px;margin:0 0 clamp(28px,3.4vw,56px);font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;opacity:.75}
.mx-num span{color:var(--ciano);font-size:12px;padding:6px 9px;border:1px solid currentColor;border-radius:999px;letter-spacing:.06em}
.mx-chiaro .mx-num span,.mx-ghiaccio .mx-num span,.mx-grigio .mx-num span{color:var(--ciano-s)}
.mx-h2{font-weight:800;font-size:clamp(42px,6.2vw,112px);line-height:.94;letter-spacing:-.048em;margin:0;max-width:13ch;text-wrap:balance}
.mx-h3{font-weight:700;font-size:clamp(22px,2.2vw,34px);line-height:1.12;letter-spacing:-.025em;margin:0;text-wrap:balance}
.mx-lead{font-size:clamp(18px,1.5vw,23px);line-height:1.45;letter-spacing:-.01em;margin:0;max-width:44ch;opacity:.86}
.mx-testo{font-size:18px;line-height:1.6;max-width:52ch;margin:0}
.mx-piccolo{font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;margin:0 0 14px;color:var(--ciano)}
.mx-chiaro .mx-piccolo,.mx-ghiaccio .mx-piccolo,.mx-grigio .mx-piccolo{color:var(--ciano-s)}
.mx-testa{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:clamp(24px,5vw,96px);align-items:end;margin-bottom:clamp(48px,6vw,104px)}

/* ---------- 01 la sfida ---------- */
.mx-sfida-griglia{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:clamp(32px,6vw,120px);align-items:start}
.mx-sfida .mx-lead{margin-top:clamp(24px,2.6vw,40px)}
.mx-barrate{list-style:none;margin:clamp(24px,3vw,44px) 0;padding:0;border-top:1px solid rgba(2,8,23,.12)}
.mx-barrate li{padding:clamp(12px,1.3vw,18px) 0;border-bottom:1px solid rgba(2,8,23,.12);font-size:clamp(20px,2vw,32px);font-weight:600;letter-spacing:-.02em;line-height:1.2;color:rgba(2,8,23,.5)}
.mx-barrate span{background:linear-gradient(var(--ciano),var(--ciano)) no-repeat 0 56%/0 3px;transition:background-size .9s var(--curva-out) calc(var(--k)*180ms + 200ms),color .6s linear calc(var(--k)*180ms + 200ms)}
.mx-barrate.visto span{background-size:100% 3px;color:rgba(2,8,23,.38)}
html:not(.js) .mx-barrate span{background-size:100% 3px}
.mx-dato{position:sticky;top:calc(var(--menu-h) + 32px);margin:0;background:var(--navy);color:var(--bianco);border-radius:20px;padding:clamp(28px,3vw,48px);overflow:hidden;min-height:clamp(380px,34vw,520px);display:flex;flex-direction:column;justify-content:flex-end;isolation:isolate}
.mx-dato::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(80% 60% at 80% 10%,rgba(26,184,240,.28),transparent 70%)}
.mx-dato-sosti{position:absolute;top:clamp(16px,2vw,28px);right:clamp(14px,2vw,28px);width:clamp(110px,11vw,170px)}
.mx-dato-sosti .sosti{width:100%;height:auto;filter:url(#ap-sticker)}
.mx-dato-cifra{display:block;font-weight:800;font-size:clamp(84px,10vw,184px);line-height:.85;letter-spacing:-.06em;color:var(--ciano);font-variant-numeric:tabular-nums}
.mx-dato figcaption{margin-top:18px;display:grid;gap:10px}
.mx-dato figcaption b{font-size:clamp(20px,1.8vw,28px);font-weight:700;letter-spacing:-.02em;line-height:1.15}
.mx-dato figcaption span{font-size:13px;color:var(--ardesia)}
.mx-vincoli{list-style:none;margin:clamp(64px,8vw,140px) 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2vw,32px)}
.mx-vincoli li{border-top:2px solid var(--navy);padding-top:18px;display:grid;gap:8px}
.mx-vincoli b{font-size:clamp(19px,1.6vw,24px);letter-spacing:-.02em}
.mx-vincoli span{font-size:16px;line-height:1.5;color:#475569}

/* ---------- 02 le prove ---------- */
.mx-prove-griglia{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(12px,1.4vw,24px)}
.mx-prova{margin:0;display:flex;flex-direction:column;gap:18px}
.mx-prova-quadro{position:relative;aspect-ratio:4/5;border-radius:16px;background:var(--navy2);display:grid;place-items:center;color:var(--bianco);border:1px solid rgba(148,163,184,.14);overflow:hidden;transition:transform .9s var(--molla)}
.mx-abc{width:62%;height:auto;overflow:visible}
.mx-prova-sosti{width:66%!important;height:auto}
.mx-prova figcaption{display:grid;gap:8px}
.mx-prova figcaption b{font-size:18px;letter-spacing:-.01em}
.mx-prova figcaption span{font-size:15px;line-height:1.5;color:var(--ardesia)}
.mx-prova:not(.mx-prova--scelta) .mx-prova-quadro{opacity:.82}
.mx-prova--scelta .mx-prova-quadro{background:radial-gradient(90% 70% at 50% 30%,#0d4566 0%,var(--navy2) 70%);border:2px solid var(--ciano)}
.mx-prova--scelta .mx-prova-quadro::after{content:attr(data-scelta);position:absolute;top:14px;left:14px;font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;background:var(--ciano);color:var(--navy);padding:7px 10px;border-radius:999px}
.mx-prova--scelta figcaption b{color:var(--ciano)}
@media (hover:hover){.mx-prova:hover .mx-prova-quadro{transform:translateY(-6px)}}
.mx-scelta{display:flex;align-items:center;gap:14px;margin:clamp(40px,5vw,72px) 0 0;font-size:clamp(20px,2vw,30px);font-weight:700;letter-spacing:-.02em;max-width:36ch}
.mx-pallino{flex:none;width:12px;height:12px;border-radius:50%;background:var(--ciano);box-shadow:0 0 0 6px rgba(26,184,240,.18)}

/* ---------- 03 il simbolo ---------- */
.mx-sim-griglia-pag{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(32px,6vw,120px);align-items:center}
.mx-sim-testo .mx-lead{margin-top:clamp(22px,2.4vw,36px)}
.mx-specifiche{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0;margin:clamp(32px,4vw,56px) 0 0;border-top:1px solid rgba(2,8,23,.16)}
.mx-specifiche div{padding:14px 0;border-bottom:1px solid rgba(2,8,23,.16)}
.mx-specifiche dt{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#64748b;margin-bottom:4px}
.mx-specifiche dd{margin:0;font-size:18px;font-weight:600;font-variant-numeric:tabular-nums}
.mx-sim-tavola{margin:0;background:var(--bianco);border-radius:24px;padding:clamp(20px,3vw,48px);box-shadow:0 30px 80px -40px rgba(2,8,23,.35)}
.mx-sim-grande{display:block;width:100%;height:auto;overflow:visible}
.mx-sim-esa,.mx-sim-croce{transform-box:fill-box;transform-origin:50% 50%}
.js .mx-sim-tavola:not(.visto) .mx-sim-griglia{opacity:0}
.js .mx-sim-tavola:not(.visto) .mx-sim-traccia{stroke-dashoffset:440}
.js .mx-sim-tavola:not(.visto) .mx-sim-esa,.js .mx-sim-tavola:not(.visto) .mx-sim-croce{transform:scale(0)}
.js .mx-sim-tavola:not(.visto) .mx-sim-quote{opacity:0}
.mx-sim-griglia{transition:opacity 1s linear}
.mx-sim-traccia{stroke-dasharray:440;transition:stroke-dashoffset 1.6s var(--curva-out) .3s}
.mx-sim-esa{transition:transform .9s cubic-bezier(.3,1.5,.5,1) .9s}
.mx-sim-croce{transition:transform .7s cubic-bezier(.3,1.7,.5,1) 1.35s}
.mx-sim-quote{transition:opacity .8s linear 1.8s}
.mx-versioni{list-style:none;margin:clamp(56px,7vw,120px) 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(10px,1.2vw,20px)}
.mx-versioni li{aspect-ratio:1;border-radius:16px;display:grid;place-items:center;position:relative}
.mx-versioni .mx-ver{width:44%;height:auto}
.mx-versioni span{position:absolute;left:16px;bottom:14px;font-size:13px;font-weight:600}
.v-bianco{background:#fff;color:var(--navy)}
.v-navy{background:var(--navy);color:var(--bianco)}
.v-ciano{background:var(--ciano);color:var(--navy)}
.v-ghiaccio{background:transparent;border:1.5px dashed rgba(2,8,23,.25);color:var(--navy)}
.v-ghiaccio .mx-ver{width:32px!important}
.v-ghiaccio::before{content:"";position:absolute;width:16px;height:18px;left:calc(50% + 34px);top:calc(50% - 9px);background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='26 18 148 164'%3E%3Cpath d='M97 27 L157.6 62 V132 L97 167 L36.4 132 V62 Z' fill='%231ab8f0' stroke='%231ab8f0' stroke-width='10' stroke-linejoin='round'/%3E%3Cpath d='M87 67h20v20h20v20h-20v20h-20v-20h-20v-20h20z' fill='%23fff'/%3E%3C/svg%3E") center/contain no-repeat}

/* ---------- 04 nasce Sosti ---------- */
.mx-nasce .mx-testa{margin-bottom:clamp(24px,3vw,48px)}
.mx-cantiere{position:relative}
.mx-cantiere-dentro{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(24px,5vw,96px);align-items:center}
.mx-passi{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.mx-passo{display:grid;grid-template-columns:44px 1fr;column-gap:12px;padding:10px 0;border-top:1px solid rgba(148,163,184,.14);opacity:.38;transition:opacity .5s linear}
.mx-passo span{font-size:12px;font-weight:700;color:var(--ciano);padding-top:5px;letter-spacing:.06em}
.mx-passo b{font-size:clamp(18px,1.5vw,22px);letter-spacing:-.015em}
.mx-passo p{grid-column:2;margin:0;max-height:0;overflow:hidden;font-size:16px;line-height:1.5;color:rgba(248,250,252,.78);transition:max-height .6s var(--curva-out),margin .6s var(--curva-out)}
.mx-passo.attivo{opacity:1}
.mx-passo.attivo p{max-height:8em;margin-top:8px}
.mx-cantiere-tavola{position:relative;margin:0;border-radius:24px;background:radial-gradient(70% 70% at 50% 45%,#0a2240 0%,var(--navy2) 70%);border:1px solid rgba(148,163,184,.14);padding:clamp(18px,3vw,44px);aspect-ratio:1;display:grid;place-items:center}
.mx-cantiere-tavola .ms-costruzione{display:block;width:100%;height:auto;overflow:visible}
.ms-costruzione .k-traccia{stroke-dasharray:1 1}
.ms-costruzione .k-pop{transform-box:fill-box;transform-origin:50% 50%}
.ms-costruzione .c-colore .sosti{overflow:visible;filter:none}
.mx-cantiere-conta{position:absolute;left:20px;bottom:16px;font-size:12px;font-weight:700;letter-spacing:.14em;color:var(--ardesia);font-variant-numeric:tabular-nums}
.mx-cantiere-conta b{color:var(--ciano)}
.mx-cantiere-barra{display:none}
.mx-cantiere.pinna{height:380vh}   /* 8 nov: più veloce, prima 620vh */
.mx-cantiere.pinna .mx-cantiere-palco{position:sticky;top:0;height:100vh;height:100svh;display:flex;align-items:center;padding-top:var(--menu-h)}
.mx-cantiere.pinna .mx-cantiere-tavola{width:min(100%,calc(100svh - var(--menu-h) - 64px));justify-self:center}
.mx-cantiere.pinna .mx-cantiere-barra{display:block;position:absolute;left:var(--gut);right:var(--gut);bottom:24px;height:2px;background:rgba(148,163,184,.18)}
.mx-cantiere-barra i{display:block;height:100%;background:var(--ciano);transform-origin:0 50%;transform:scaleX(var(--p,0))}
.mx-cantiere:not(.pinna){padding-block:clamp(24px,4vw,64px)}

.mx-pose{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,1.4vw,24px);margin-top:clamp(72px,9vw,160px)}
.mx-posa{margin:0;display:grid;gap:18px}
.mx-posa-quadro{aspect-ratio:1;border-radius:20px;display:grid;place-items:center;overflow:hidden}
.mx-posa--ciao .mx-posa-quadro{background:var(--ghiaccio)}
.mx-posa--agosto .mx-posa-quadro{background:#fff}
.mx-posa--trovato .mx-posa-quadro{background:var(--ciano)}
.mx-posa-quadro .sosti{width:62%;height:auto;filter:none!important}
.mx-posa figcaption{display:grid;gap:6px}
.mx-posa figcaption b{font-size:clamp(24px,2.2vw,34px);letter-spacing:-.03em;font-weight:800}
.mx-posa figcaption span{font-size:16px;line-height:1.5;color:var(--ardesia);max-width:34ch}

.mx-sticker{display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);gap:clamp(24px,5vw,96px);align-items:center;margin-top:clamp(80px,10vw,180px)}
.mx-sticker-tavolo{list-style:none;margin:0;padding:0;position:relative;aspect-ratio:16/11;border-radius:24px;background:var(--navy2) radial-gradient(rgba(148,163,184,.16) 1px,transparent 1.4px) 0 0/22px 22px;border:1px solid rgba(148,163,184,.14)}
.mx-st{position:absolute;left:var(--x);top:var(--y);transform:rotate(var(--r));transition:transform .5s var(--molla)}
.mx-st[data-rivela]{transform:rotate(var(--r)) translate3d(0,30px,0) scale(.7)}
.mx-st[data-rivela].visto{transform:rotate(var(--r))}
.mx-st--s{width:22%}
.mx-st--s .sosti{width:100%;height:auto}
.mx-st--y{width:12%}
.mx-st--y .simbolo{width:100%;height:auto;filter:url(#ap-sticker)}
.mx-st--t{background:#fff;color:var(--navy);font-weight:800;font-size:clamp(14px,1.5vw,24px);letter-spacing:-.02em;padding:.5em .85em;border-radius:999px;box-shadow:0 0 0 4px var(--ciano),0 14px 30px rgba(0,0,0,.35);white-space:nowrap}
@media (hover:hover){.mx-st[data-rivela].visto:hover{transform:rotate(0) scale(1.08)}}

/* ---------- 05 come parla ---------- */
.mx-parla .mx-h2{max-width:18ch}
.mx-frasi{margin:clamp(56px,7vw,120px) 0;display:grid;gap:clamp(4px,.8vw,12px);overflow:hidden}
.mx-frase{margin:0;white-space:nowrap;font-weight:800;font-size:clamp(36px,6.4vw,124px);line-height:1.02;letter-spacing:-.05em;transform:translate3d(var(--sp,0px),0,0);will-change:transform;padding-inline:var(--gut)}
.mx-frase:nth-child(even){text-align:right}
.mx-regole{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2vw,32px)}
.mx-regole li{display:grid;gap:10px;align-content:start;padding:24px;border-radius:16px;background:var(--ghiaccio)}
.mx-regole span{font-size:12px;font-weight:800;color:var(--ciano-s);letter-spacing:.08em}
.mx-regole b{font-size:clamp(20px,1.7vw,26px);letter-spacing:-.02em;line-height:1.15}
.mx-regole p{margin:0;font-size:16px;line-height:1.55;color:#334155}
.mx-firma{margin:clamp(40px,5vw,72px) 0 0;font-size:16px;color:#475569}
.mx-firma b{display:block;margin-top:8px;font-size:clamp(20px,2vw,30px);color:var(--navy);letter-spacing:-.02em}

/* ---------- 06 il sistema ---------- */
.mx-dosi{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:46fr 23.1fr 17.4fr 9.6fr 3.9fr;grid-template-rows:26fr 28fr;height:clamp(440px,44vw,640px);gap:6px}
.mx-dose{container-type:inline-size;min-width:0;border-radius:14px;overflow:hidden;background:var(--c)}
.mx-dose:nth-child(1){grid-column:1;grid-row:1/3}
.mx-dose:nth-child(2){grid-column:2/6;grid-row:1}
.mx-dose:nth-child(3){grid-column:2;grid-row:2}
.mx-dose:nth-child(4){grid-column:3;grid-row:2}
.mx-dose:nth-child(5){grid-column:4;grid-row:2}
.mx-dose:nth-child(6){grid-column:5;grid-row:2}
.mx-dose button{all:unset;box-sizing:border-box;cursor:pointer;width:100%;height:100%;display:flex;flex-direction:column;justify-content:space-between;padding:clamp(14px,1.6vw,24px);position:relative;font-family:var(--inter)}
.mx-dose--scuro button{color:var(--bianco)}
.mx-dose--chiaro button{color:var(--navy)}
.mx-dose:first-child button{box-shadow:inset 0 0 0 1px rgba(148,163,184,.22);border-radius:14px}
.mx-dose b{font-size:clamp(18px,1.6vw,26px);letter-spacing:-.02em}
.mx-dose span{font-size:13px;font-weight:600;opacity:.8;font-variant-numeric:tabular-nums}
.mx-dose em{font-style:normal;color:inherit!important;font-weight:800;font-size:clamp(40px,5vw,96px);letter-spacing:-.05em;line-height:.9;margin-top:auto}
.mx-dose small{font-size:14px;line-height:1.4;opacity:.8;margin-top:10px;max-width:22ch}
.mx-dose button:focus-visible{outline:3px solid var(--ciano);outline-offset:-6px}
.mx-copiato{position:absolute;top:12px;right:12px;font-style:normal;font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;padding:6px 9px;border-radius:999px;background:var(--navy);color:#fff;opacity:0;transform:translateY(-6px);transition:opacity .3s,transform .4s var(--curva-out)}
.mx-dose.copiato .mx-copiato{opacity:1;transform:none}
@container (max-width:260px){.mx-dose small{display:none}.mx-dose em{font-size:clamp(28px,3vw,48px)}}
@container (max-width:130px){.mx-dose b,.mx-dose span{display:none}.mx-dose em{font-size:22px}}
@container (max-width:60px){.mx-dose em{font-size:13px;letter-spacing:0}.mx-dose button{padding:10px 6px}}
.mx-tipo{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:clamp(32px,6vw,120px);align-items:center;margin-top:clamp(80px,10vw,180px)}
.mx-aa{font-weight:800;font-size:clamp(180px,26vw,460px);line-height:.8;letter-spacing:-.07em;color:var(--bianco);background:linear-gradient(180deg,var(--bianco) 55%,var(--ciano) 55%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.mx-tipo-testo .mx-h3{max-width:24ch}
.mx-gerarchia{list-style:none;margin:clamp(28px,3vw,44px) 0 0;padding:0;border-top:1px solid rgba(148,163,184,.2)}
.mx-gerarchia li{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.4fr);gap:20px;align-items:center;padding:18px 0;border-bottom:1px solid rgba(148,163,184,.2)}
.mx-gerarchia li>div:first-child{display:grid;gap:4px}
.mx-gerarchia b{font-size:15px}
.mx-gerarchia li>div:first-child span{font-size:12px;color:var(--ardesia);font-variant-numeric:tabular-nums}
.mx-g-chip{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--navy);background:var(--ciano);padding:6px 10px;border-radius:999px}
.mx-g-dato{font-weight:800;font-size:clamp(48px,5vw,80px);line-height:.9;letter-spacing:-.05em;color:var(--ciano)}
.mx-g-titolo{font-weight:800;font-size:clamp(20px,1.9vw,28px);letter-spacing:-.03em;line-height:1.1}
.mx-g-fonte{font-size:14px;color:var(--ardesia)}
.mx-rete{margin-top:clamp(80px,10vw,180px)}
.mx-rete-testo{display:grid;grid-template-columns:minmax(0,.4fr) minmax(0,1fr);gap:24px;align-items:baseline;margin-bottom:clamp(28px,3vw,48px)}
.mx-rete-testo .mx-h3{max-width:30ch}
.mx-rete-striscia{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;border-radius:14px;scrollbar-width:thin;scrollbar-color:var(--ciano) transparent;outline-offset:4px}
.mx-rete-striscia figure{flex:none;margin:0;width:max(220px,calc((100% - 0px)/4.4));scroll-snap-align:start}
.mx-rete-striscia img{display:block;width:100%;height:auto}

/* ---------- 07 nel mondo ---------- */
.mx-bento,.mx-foto{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(10px,1.2vw,20px)}
.mx-b{margin:0;position:relative;border-radius:20px;background:#f3f5f7;overflow:hidden;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:clamp(24px,3vw,48px) clamp(16px,2vw,32px) 64px;min-height:clamp(340px,30vw,480px)}
.mx-b figcaption{position:absolute;left:20px;right:20px;bottom:18px;font-size:14px;font-weight:600;color:#475569}
.mx-b--poster{grid-column:span 5;grid-row:span 2;justify-content:flex-end;padding-bottom:96px;background:linear-gradient(0deg,#b9c2cb 0,#c4ccd4 150px,#d6dce2 150px,#dde2e7 100%)}
.mx-b--badge{grid-column:span 3;background:#fff;justify-content:flex-start;padding-top:0}
.mx-b--carta{grid-column:span 4;background:#cfd7de}
.mx-b--notifica{grid-column:span 7;background:linear-gradient(135deg,#0d3a5c,var(--navy) 70%);}
.mx-b--notifica figcaption{color:var(--ardesia)}
.mx-b--feed{grid-column:span 7;flex-direction:row;gap:clamp(16px,2.4vw,40px);background:#fff;align-items:center}
.mx-b--landing{grid-column:span 5;background:var(--ghiaccio)}

/* poster sul totem */
.mx-totem{width:min(74%,380px);display:flex;flex-direction:column;align-items:center;filter:drop-shadow(0 40px 40px rgba(2,8,23,.28))}
.mx-poster{width:100%;aspect-ratio:2/3;background:var(--navy);color:var(--bianco);border:10px solid #f8fafc;padding:7% 7% 8%;display:flex;flex-direction:column;container-type:inline-size;position:relative;overflow:hidden}
.mx-poster::before{content:"";position:absolute;inset:0;background:radial-gradient(70% 45% at 50% 42%,rgba(26,184,240,.35),transparent 70%)}
.mx-poster>*{position:relative}
.mx-poster-alto{display:flex;justify-content:space-between;align-items:center;font-size:4.2cqi;color:var(--ardesia)}
.mx-poster-sosti{flex:1;display:grid;place-items:center}
.mx-poster-sosti .sosti{width:62%;height:auto}
.mx-poster-titolo{margin:0;font-weight:800;font-size:15.5cqi;line-height:.88;letter-spacing:-.055em}
.mx-poster-sotto{margin:4cqi 0 0;font-size:4.6cqi;line-height:1.35;color:rgba(248,250,252,.8);max-width:26ch}
.mx-totem-piede{width:14%;height:42px;background:linear-gradient(90deg,#8d97a1,#c9d0d6,#8d97a1)}
.mx-totem-piede::after{content:"";display:block;width:300%;height:10px;margin:42px 0 0 -100%;border-radius:4px;background:#7c8792}
.mx-marchio{display:inline-flex;align-items:center;gap:.45em;font-weight:800;color:var(--bianco);letter-spacing:-.02em}
.mx-marchio .simbolo{width:1.4em;height:auto}
.mx-marchio--scuro{color:var(--navy)}

/* badge */
.mx-badge{width:min(78%,240px);height:auto;margin-top:-2px;filter:drop-shadow(0 30px 30px rgba(2,8,23,.25));transform-origin:50% 0;animation:mx-dondola 5s ease-in-out infinite}
@keyframes mx-dondola{0%,100%{transform:rotate(-2deg)}50%{transform:rotate(2.5deg)}}

/* carta intestata e biglietto */
.mx-carta{position:relative;width:min(88%,380px);aspect-ratio:1/1.05}
.mx-foglio{position:absolute;left:0;top:0;width:72%;aspect-ratio:1/1.414;background:#fff;transform:rotate(-5deg);box-shadow:0 30px 50px -20px rgba(2,8,23,.35);padding:8%;container-type:inline-size;display:flex;flex-direction:column}
.mx-foglio-testa{display:flex;justify-content:space-between;align-items:center;font-size:5.4cqi;color:#64748b;padding-bottom:6cqi;border-bottom:1.5px solid var(--ciano)}
.mx-foglio-testa .mx-marchio{font-size:7cqi}
.mx-foglio-righe{display:grid;gap:4.5cqi;margin-top:12cqi}
.mx-foglio-righe i{display:block;height:2.4cqi;background:#e2e8f0;border-radius:2px}
.mx-foglio-righe i:nth-child(3n){width:70%}
.mx-foglio-righe i:first-child{width:40%;background:#cbd5e1}
.mx-foglio-esa{margin-top:auto;align-self:flex-end;width:12cqi}
.mx-foglio-esa .simbolo{width:100%;height:auto}
.mx-biglietto{position:absolute;right:0;bottom:4%;width:62%;aspect-ratio:85/55;background:var(--navy);border-radius:6px;transform:rotate(7deg);box-shadow:0 30px 40px -18px rgba(2,8,23,.5);padding:8%;display:flex;flex-direction:column;justify-content:space-between;container-type:inline-size}
.mx-biglietto .mx-marchio{font-size:9cqi}
.mx-biglietto-riga{font-size:5.6cqi;color:var(--ciano-2);font-weight:600}

/* telefono con la notifica */
.mx-tel{width:min(56%,300px);aspect-ratio:9/19;border-radius:44px;background:#0b0f19;padding:10px;box-shadow:0 40px 80px -30px rgba(0,0,0,.7),inset 0 0 0 2px #2a3242}
.mx-tel-schermo{height:100%;border-radius:36px;overflow:hidden;background:linear-gradient(180deg,#1a6f96 0%,#0d3a5c 45%,#05142a 100%);color:#fff;text-align:center;padding:20% 6% 0;container-type:inline-size}
.mx-tel-ora{margin:0;font-weight:700;font-size:24cqi;letter-spacing:-.04em;line-height:1}
.mx-tel-data{margin:2cqi 0 14cqi;font-size:5.4cqi;font-weight:600;opacity:.85}
.mx-notifica{display:flex;gap:4cqi;text-align:left;background:rgba(248,250,252,.82);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);color:var(--navy);border-radius:7cqi;padding:4.5cqi;transform:translate3d(0,0,0);transition:transform .8s var(--molla),opacity .5s linear}
.js .mx-b--notifica:not(.visto) .mx-notifica{transform:translate3d(0,-40px,0) scale(.92);opacity:0}
.mx-b--notifica.visto .mx-notifica{transition-delay:.6s}
.mx-notifica-ico{flex:none;width:14cqi;height:14cqi;border-radius:3.6cqi;background:var(--ghiaccio);display:grid;place-items:center;overflow:hidden}
.mx-notifica-ico .sosti{width:92%;height:auto;margin-top:8%;filter:none!important}
.mx-notifica b{display:flex;justify-content:space-between;font-size:4.6cqi;margin-bottom:1cqi}
.mx-notifica b small{font-weight:500;color:#64748b;font-size:4cqi}
.mx-notifica div>span{display:block;font-size:4.6cqi;line-height:1.3}

/* feed e landing */
.mx-feed-profilo{flex:none;width:clamp(160px,16vw,240px);filter:drop-shadow(0 30px 30px rgba(2,8,23,.3))}
.mx-feed-profilo img{display:block;width:100%;height:auto}
.mx-browser{width:100%;border-radius:12px;overflow:hidden;background:#0b1630;box-shadow:0 40px 70px -30px rgba(2,8,23,.55);transform:perspective(1400px) rotateY(-8deg) rotateX(3deg);transition:transform 1s var(--molla)}
@media (hover:hover){.mx-b--landing:hover .mx-browser{transform:none}}
.mx-browser-barra{display:flex;align-items:center;gap:6px;padding:9px 12px;background:#e2e8f0}
.mx-browser-barra i{width:9px;height:9px;border-radius:50%;background:#94a3b8}
.mx-browser-barra span{margin-left:10px;flex:1;max-width:60%;font-size:11px;color:#475569;background:#fff;border-radius:6px;padding:4px 10px}
.mx-browser img{display:block;width:100%;height:auto}
.mx-feed-griglia{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;flex:1;min-width:0;max-width:440px}
.mx-feed-griglia img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;border-radius:3px}

/* ---------- tablet e telefono ---------- */
@media (max-width:1024px){
  .mx-testa,.mx-sfida-griglia,.mx-sim-griglia-pag,.mx-sticker,.mx-tipo{grid-template-columns:minmax(0,1fr)}
  .mx-dato{position:relative;top:auto}
  .mx-prove-griglia{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mx-b--poster{grid-column:span 12;grid-row:auto}
  .mx-b--badge{grid-column:span 5}
  .mx-b--carta{grid-column:span 7}
  .mx-b--notifica{grid-column:span 12}
  .mx-b--feed{grid-column:span 12}
  .mx-b--landing{grid-column:span 12}
  .mx-rete-testo{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:900px){
  /* telefono: il disegno resta fermo in alto, sotto cambia UNA frase alla volta (7 nov: «sconnesso» se si vedono 8 frasi) */
  .mx-cantiere.pinna{height:320vh}
  .mx-cantiere.pinna .mx-cantiere-palco{align-items:center;padding-top:var(--menu-h)}
  .mx-cantiere.pinna .mx-passo{grid-template-columns:1fr}
  .mx-cantiere.pinna .mx-passo span{display:none}
  .mx-cantiere.pinna .mx-passo p{grid-column:1}
  .mx-cantiere.pinna .mx-passi{min-height:8.5em}
  .mx-cantiere-dentro{grid-template-columns:minmax(0,1fr);gap:20px;align-content:start}
  .mx-cantiere-tavola{order:-1}
  .mx-cantiere.pinna .mx-cantiere-tavola{width:min(100%,calc(100svh - var(--menu-h) - 250px))}
  .mx-cantiere.pinna .mx-passi{display:grid;gap:0}
  .mx-cantiere.pinna .mx-passo{grid-area:1/1;border:0;padding:0;opacity:0;transform:translateY(10px);transition:opacity .35s linear,transform .5s var(--curva-out)}
  .mx-cantiere.pinna .mx-passo.attivo{opacity:1;transform:none}
  .mx-cantiere.pinna .mx-passo p{max-height:none;margin-top:6px;font-size:17px}
  .mx-cantiere.pinna .mx-cantiere-barra{bottom:calc(16px + env(safe-area-inset-bottom))}
  .mx-cantiere:not(.pinna) .mx-passo{opacity:1}
  .mx-cantiere:not(.pinna) .mx-passo p{max-height:none;margin-top:6px}
}
/* telefono: niente barra fissa né timecode sopra le foto del caso; l'invito grande è in fondo */
@media (max-width:760px){.barra,.hud{display:none!important}}
@media (max-width:640px){
  .mx-vincoli,.mx-regole,.mx-pose{grid-template-columns:minmax(0,1fr)}
  .mx-versioni{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mx-prove-griglia{gap:10px}
  .mx-prova figcaption span{font-size:14px}
  .mx-sticker-tavolo{aspect-ratio:4/5}
  .mx-st--s{width:34%}.mx-st--y{width:18%}
  .mx-st--t{font-size:15px}
  .mx-dosi{grid-template-columns:minmax(0,1fr);grid-template-rows:none;height:auto;display:flex;flex-direction:column}
  .mx-dose{height:calc(52px + var(--w) * 2.6px)}
  .mx-dose button{flex-direction:row;align-items:center;gap:12px}
  .mx-dose em{margin:0 0 0 auto;font-size:28px!important}
  .mx-dose small{display:none}
  .mx-dose b,.mx-dose span{display:block!important}
  .mx-gerarchia li{grid-template-columns:minmax(0,1fr)}
  .mx-b--badge,.mx-b--carta{grid-column:span 12}
  .mx-b--feed{flex-direction:column}
  .mx-feed-griglia{width:100%}
  .mx-frase{font-size:clamp(30px,9vw,44px);white-space:normal;transform:none!important;line-height:1.05;text-align:left!important}
  .mx-frase:nth-child(even){text-align:left}
  .mx-frasi{gap:22px}
}
@media (prefers-reduced-motion:reduce){
  .mx-badge{animation:none}
  .mx-frase{transform:none!important}
  .mx-barrate span{background-size:100% 3px;transition:none}
  .mx-st[data-rivela]{transform:rotate(var(--r))}
}

/* ---------- Sosti si muove anche nei capitoli ---------- */
.mx-cap .sosti .s-saluto{transform-origin:156px 122px;animation:ap-saluta 1.8s var(--curva) infinite}
.mx-cap .sosti .s-goccia{transform-origin:150px 60px;animation:ap-goccia 1.8s ease-in infinite}
.mx-cap .sosti .s-cal{transform-origin:156px 128px;animation:ap-cal 2.4s var(--curva) infinite}
.mx-cap .sosti .s-stella{transform-box:fill-box;transform-origin:center;animation:ap-stella 1.3s var(--curva-out) infinite}
.mx-cap .sosti .s-stella--2{animation-delay:.4s}
.mx-cap .sosti .s-batti{transform-box:fill-box;transform-origin:center;animation:ap-batti 4.2s infinite}
.mx-cap .sosti--trovato .s-tutto{transform-origin:100px 214px;animation:mx-salto 1.6s var(--curva) infinite}
@keyframes mx-salto{0%,100%,62%{transform:none}10%{transform:scale(1.05,.93)}32%{transform:translateY(-9%) scale(.97,1.03)}52%{transform:scale(1.04,.95)}}
.ms-costruzione .sosti *{animation:none!important}
@media (prefers-reduced-motion:reduce){.mx-cap .sosti *{animation:none!important}}

/* ---------- servizio e chiusura (come le altre pagine caso) ---------- */
.mx{--ms-c:#1ab8f0;--ms-c-chiaro:#6fd3f7;--ms-bianco:#f8fafc;--ms-navy:#020817}
.cs-misura{max-width:44ch}
.cs-etichetta{display:flex;align-items:center;gap:10px;color:var(--ms-c-chiaro);margin-bottom:clamp(18px,2vw,28px)}
.cs-etichetta::before{content:"";width:8px;height:8px;background:var(--lime);flex:none}
.cs-etichetta a{color:var(--bianco-80);transition:color .5s var(--curva-out)}
.cs-etichetta a:hover{color:var(--lime)}
.cs-etichetta span{color:var(--bianco-60)}
.cs-h2{font-size:var(--t-l);margin-bottom:clamp(22px,2.4vw,36px);max-width:15ch}
.cs-sotto{font-family:var(--f-etichetta);font-weight:800;text-transform:uppercase;font-size:13px;letter-spacing:.03em;color:var(--bianco-60);margin-bottom:18px}
.cs-servizio{padding-block:clamp(56px,7vw,120px);border-top:1px solid var(--bianco-12)}
.cs-servizi{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:clamp(28px,3vw,48px)}
.cs-servizi li{padding:10px 14px;box-shadow:inset 0 0 0 1px rgba(26,184,240,.35);font-size:var(--testo-s);color:var(--ms-bianco)}
.cs-risolto{font-size:var(--t-m);max-width:22ch}
.cs-chiusura{padding-block:clamp(110px,14vw,230px) clamp(120px,14vw,220px)}
.cs-chiusura-titolo{font-size:var(--t-xl);max-width:13ch;margin-bottom:clamp(24px,2.6vw,40px)}
.cs-chiusura-azioni{display:flex;flex-wrap:wrap;align-items:center;gap:16px 28px;margin-top:clamp(28px,3vw,44px)}
.cs-wa{font-size:var(--testo-s);color:var(--bianco-80)}
.cs-wa a{color:var(--bianco);box-shadow:inset 0 -1px 0 rgba(244,246,239,.3)}
.cs-wa a:hover{color:var(--lime)}
@media (max-width:640px){
  .cs-chiusura-titolo{font-size:clamp(44px,12.4vw,72px)}
}

/* ---------- 07 · mockup fotografici ---------- */
.mx-f{margin:0;grid-column:span 6;position:relative;border-radius:18px;overflow:hidden;background:#cfd7de}
.mx-f img{display:block;width:100%;height:100%;object-fit:cover;aspect-ratio:4/3;transition:transform 1.2s var(--curva-out)}
.mx-f--7{grid-column:span 7}.mx-f--5{grid-column:span 5}.mx-f--4{grid-column:span 4}.mx-f--12{grid-column:span 12}
.mx-f--7 img,.mx-f--5 img{aspect-ratio:auto;height:clamp(420px,46vw,720px)}
.mx-f--12 img{aspect-ratio:16/8}
.mx-f--alto img{aspect-ratio:4/5}
.mx-f figcaption{position:absolute;left:14px;bottom:14px;max-width:calc(100% - 28px);font-size:13px;font-weight:600;line-height:1.3;color:var(--navy);
  background:rgba(248,250,252,.9);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);padding:7px 11px;border-radius:9px}
@media (hover:hover){.mx-f:hover img{transform:scale(1.03)}}
.mx-foto .mx-b{min-height:0}
@media (max-width:1024px){.mx-f--7,.mx-f--5{grid-column:span 12}.mx-f--7 img,.mx-f--5 img{height:auto;aspect-ratio:4/5}}
@media (max-width:640px){.mx-f,.mx-f--4,.mx-f--6{grid-column:span 12}.mx-f--12 img{aspect-ratio:4/3}.mx-f--alto img{aspect-ratio:4/5}}

/* ---------- 03 · il marchio completo ---------- */
.mx-marchio-blocco{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(10px,1.2vw,20px);margin-top:clamp(64px,8vw,120px)}
.mx-marchio-testo{grid-column:span 4;align-self:end;padding-bottom:8px}
.mx-marchio-testo p{font-size:17px;line-height:1.55;color:#1e293b;margin:14px 0 0;max-width:36ch}
.mx-h3{font-family:var(--inter);font-weight:800;font-size:clamp(28px,2.6vw,40px);letter-spacing:-.035em;line-height:1;margin:0;color:var(--navy)}
.mx-lockup{position:relative;border-radius:18px;display:flex;align-items:center;justify-content:center;min-height:clamp(220px,22vw,340px);padding:24px;container-type:inline-size}
.mx-lockup--scuro{grid-column:span 8;background:var(--navy)}
.mx-lockup--chiaro{grid-column:span 6;background:#fff}
.mx-lockup--ciano{grid-column:span 6;background:var(--ciano)}
.mx-lk{display:inline-flex;align-items:center;gap:.22em;font-size:clamp(34px,9cqi,92px);position:relative;z-index:1}
.mx-lk svg{width:1.02em;height:auto;flex:none}
.mx-lk b{font-family:var(--inter);font-weight:800;letter-spacing:-.062em;line-height:1;color:#f8fafc;white-space:nowrap}
.mx-lk i{font-style:normal;color:var(--ciano)}
.mx-lockup--chiaro .mx-lk b{color:var(--navy)}
.mx-lockup--ciano .mx-lk b,.mx-lockup--ciano .mx-lk i{color:#fff}
.mx-lk--col{flex-direction:column;gap:.18em;font-size:clamp(28px,7cqi,64px)}
.mx-lk--col svg{width:1.5em}
.mx-lockup-area{position:absolute;left:50%;top:50%;width:min(78%,640px);height:42%;transform:translate(-50%,-50%);border:1px dashed rgba(26,184,240,.45);border-radius:6px}
@media (max-width:900px){.mx-marchio-testo,.mx-lockup--scuro,.mx-lockup--chiaro,.mx-lockup--ciano{grid-column:span 12}}

/* un font solo nel caso: Inter, come il marchio MioSostituto (menu e piede restano del sito) */
main.mx{--f-testo:var(--inter);--f-etichetta:var(--inter)}
main.mx .titolo,main.mx .etichetta,main.mx .pulsante,main.mx .link-freccia{font-family:var(--inter)}