/* Sezione interattiva: il meccanismo dell'ILIB a bassa potenza, tappa per tappa.
   Vive in un .pan--notte. Tutto è funzione dello stato (tappa, lunghezza d'onda, potenza, durata). */
.mec{--wl:#FF6A3D;--wl2:#D8142B;--wlname:"660 nm"}
.mec[data-wl="405"]{--wl:#9A86FF;--wl2:#5B3DF5}
.mec__head{display:flex;flex-wrap:wrap;gap:16px 32px;align-items:end;justify-content:space-between;margin-bottom:28px}
.mec__wl{display:inline-flex;border:1px solid rgba(255,255,255,.25);border-radius:var(--r-pill);padding:4px;gap:4px}
.mec__wl button{font:inherit;font-family:var(--fd);font-weight:500;font-size:.95rem;padding:9px 18px;border-radius:var(--r-pill);border:0;background:transparent;color:rgba(255,255,255,.75);cursor:pointer;display:inline-flex;align-items:center;gap:8px}
.mec__wl button i{width:10px;height:10px;border-radius:50%;display:inline-block}
.mec__wl button[data-wl="660"] i{background:#FF6A3D}.mec__wl button[data-wl="405"] i{background:#9A86FF}
.mec__wl button[aria-pressed="true"]{background:#fff;color:var(--notte-2)}
.mec__grid{display:grid;gap:28px}
.mec__grid>*,.mec__dose>*{min-width:0}
.mec__step p{max-width:min(46ch,100%)}
@media (min-width:960px){.mec__grid{grid-template-columns:7fr 5fr;gap:48px;align-items:start}}
.mec__stage{position:relative;border-radius:var(--r-card);background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);padding:16px;overflow:hidden}
.mec__stage svg{width:100%;height:auto;display:block;color:#fff}
.mec__stage .thin{opacity:.3}.mec__stage .mid{opacity:.55}
/* elementi della scena: si accendono per tappa e per lunghezza d'onda */
.mec__stage [data-on]{transition:opacity .5s var(--ease),stroke .5s,fill .5s}
.mec__stage [data-on]:not(.on){opacity:.12}
.mec__stage .wl-stroke{stroke:var(--wl)}
.mec__stage .wl-fill{fill:var(--wl)}
.mec__stage .cone{fill:var(--wl);opacity:.14}
.mec__stage .cone.on{opacity:.22}
.mec__stage .tip{fill:#fff}
.mec__stage .glow{fill:var(--wl);opacity:.0;transition:opacity .5s}
.mec__stage .glow.on{opacity:.45}
.mec__stage .rbc{fill:#B01830;stroke:#E24A5F;stroke-width:.8}
.mec__stage .rbc.hot{fill:var(--wl2)}
.mec__stage .wbc{fill:#E8E4EE;stroke:#fff;stroke-width:.8;opacity:.9}
.mec__stage .plt{fill:#F2D7A8;stroke:#fff;stroke-width:.6}
.mec__stage .lbl{font-family:var(--fd);font-size:12px;fill:#fff;opacity:.85;stroke:none}
.mec__stage .lbl.k{font-weight:600}
.mec__stage .flow{animation:flowx 9s linear infinite}
.mec__stage .flow.slow{animation-duration:14s}
@keyframes flowx{from{transform:translateX(0)}to{transform:translateX(-120px)}}
.mec__stage .dash{stroke-dasharray:4 4}
.mec__stage .pulse{animation:pulse 2.4s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:.35}50%{opacity:.9}}
@media (prefers-reduced-motion:reduce){.mec__stage .flow,.mec__stage .pulse{animation:none}}
.mec__caption{font-size:.82rem;color:rgba(255,255,255,.6);margin-top:10px;line-height:1.45}
/* pannello della tappa */
.mec__step{min-height:320px}
.mec__num{font-family:var(--fd);font-size:.85rem;color:rgba(255,255,255,.6);display:flex;align-items:center;gap:12px;margin-bottom:12px;font-variant-numeric:tabular-nums}
.mec__num::after{content:"";flex:1;height:1px;background:rgba(255,255,255,.2)}
.mec__step h3{font-family:var(--fx);font-weight:340;font-size:clamp(1.6rem,2.6vw,2.2rem);letter-spacing:-.01em;line-height:1.08;margin-bottom:14px}
.mec__step p{font-family:var(--fs);font-size:1.05rem;line-height:1.55;color:rgba(255,255,255,.88);max-width:46ch}
.mec__meta{display:flex;flex-wrap:wrap;gap:10px 20px;align-items:center;margin-top:18px;font-size:.85rem;color:rgba(255,255,255,.65)}
.mec__meta .ev i b{background:rgba(255,255,255,.18)}
.mec__meta .ev[data-l="4"] i b:nth-child(-n+4),.mec__meta .ev[data-l="3"] i b:nth-child(-n+3),.mec__meta .ev[data-l="2"] i b:nth-child(-n+2),.mec__meta .ev[data-l="1"] i b:nth-child(1){background:#8FD0F2}
.mec__safe{margin-top:18px;padding:14px 16px;border-radius:12px;background:rgba(143,208,242,.12);border:1px solid rgba(143,208,242,.3);font-family:var(--fd);font-size:.92rem;line-height:1.45}
.mec__safe b{display:block;font-weight:600;margin-bottom:3px;color:#8FD0F2}
/* navigazione tappe */
.mec__nav{display:grid;grid-template-columns:repeat(6,1fr);gap:6px;margin-top:22px}
.mec__nav button{font:inherit;font-family:var(--fd);font-size:.78rem;font-weight:500;padding:10px 6px;border-radius:10px;border:1px solid rgba(255,255,255,.18);background:transparent;color:rgba(255,255,255,.7);cursor:pointer;text-align:left;line-height:1.2}
.mec__nav button span{display:block;font-size:.74rem;opacity:.6;margin-bottom:3px;font-variant-numeric:tabular-nums}
.mec__nav button[aria-current="step"]{background:#fff;color:var(--notte-2);border-color:#fff}
.mec__nav button[aria-current="step"] span{opacity:.6}
@media (max-width:600px){.mec__nav{grid-template-columns:repeat(3,1fr)}}
.mec__arrows{display:flex;gap:8px;margin-top:12px}
.mec__arrows button{font:inherit;font-family:var(--fd);padding:9px 16px;border-radius:var(--r-pill);border:1px solid rgba(255,255,255,.3);background:transparent;color:#fff;cursor:pointer;font-size:.9rem}
.mec__arrows button:disabled{opacity:.35;cursor:default}
/* dose: slider + curva bifasica */
.mec__dose{display:grid;gap:22px;margin-top:36px;padding-top:28px;border-top:1px solid rgba(255,255,255,.15)}
@media (min-width:900px){.mec__dose{grid-template-columns:1fr 1fr;gap:40px}}
.mec__sl{display:grid;gap:14px}
.mec__sl label{display:grid;grid-template-columns:1fr auto;gap:8px;font-family:var(--fd);font-size:.9rem;color:rgba(255,255,255,.8)}
.mec__sl label output{font-variant-numeric:tabular-nums;font-weight:600;color:#fff}
.mec__sl input[type=range]{width:100%;accent-color:#8FD0F2;grid-column:1/-1}
.mec__out{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:12px;margin-top:6px}
.mec__out div{padding:12px 14px;border-radius:12px;background:rgba(255,255,255,.06)}
.mec__out b{display:block;font-family:var(--fd);font-size:1.6rem;font-weight:400;letter-spacing:-.02em;font-variant-numeric:tabular-nums;line-height:1.1}
.mec__out span{font-size:.78rem;color:rgba(255,255,255,.6)}
.mec__curve svg{width:100%;height:auto;color:#fff}
.mec__curve .axis{stroke:rgba(255,255,255,.35)}
.mec__curve .curve{stroke:#8FD0F2;stroke-width:1.6;fill:none}
.mec__curve .band{fill:#8FD0F2;opacity:.12}
.mec__curve .mark{fill:#fff}
.mec__curve .lbl{font-family:var(--fd);font-size:12px;fill:#fff;opacity:.75}
.mec__curve figcaption{font-size:.82rem;color:rgba(255,255,255,.6);margin-top:8px;line-height:1.45}