/* Le scene della pagina sull'osmosi inversa (28/10/2026).
   Alessio: «queste pagine devono essere super wow, con animazioni e video che spiegano l'osmosi
   inversa». Il testo resta nella colonna dell'archivio (820 px); le scene escono dalla colonna e
   arrivano a 1180 px, perché un disegno che spiega ha bisogno di spazio. Stessi token del sito:
   navy, ciano, Arial, un accento solo. L'acqua è ciano piena, i sali sono anelli bianchi. */

/* La testata è larga quanto lo schermo (100vw comprende la barra di scorrimento): la pagina
   non deve poter scorrere di lato per quei pochi pixel. */
html:has(.archive-esperienza){overflow-x:clip}
.archive-esperienza{--os-larga:min(1180px,calc(100vw - 48px));--os-bordo:#89d8ee33;--os-pannello:#061628}

/* ------------------------------------------------------------ la testata */
.os-hero{position:relative;width:100vw;margin:-8px 0 0 calc(50% - 50vw);min-height:clamp(560px,84svh,900px);display:flex;align-items:flex-end;overflow:hidden;isolation:isolate}
.os-hero-media{position:absolute;inset:0;z-index:-1}
.os-hero-media img,.os-hero-media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.os-hero-media video{opacity:0;transition:opacity 1.2s var(--ease-out,ease)}
.os-hero-media video.is-pronto{opacity:1}
.os-hero-media::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#031021f2 0%,#031021c7 38%,#03102133 72%,#03102100),linear-gradient(0deg,#031021 0%,#03102100 34%)}
/* Il fondo lascia libero l'angolo in basso a sinistra: lì sta il tondo di WhatsApp, fisso a
   56 px dal bordo. Con 48 px di spazio il tondo copriva 53 px del tasto «Guarda come
   funziona» — e `copre()` in azioni-fisse.mjs non se ne accorge, perché conta solo i campi
   e i tasti dentro un modulo, non un collegamento qualunque. Il minimo è 56+14+18. */
.os-hero-copy{width:var(--os-larga);margin:0 auto;padding:0 0 clamp(88px,9vh,96px)}
.os-hero-copy h1{font-size:clamp(40px,6.4vw,88px);line-height:.98;letter-spacing:-.05em;max-width:12ch;margin:14px 0 22px;color:#f5f7fa}
.os-hero-lead{font-size:clamp(17px,1.5vw,20px)!important;line-height:1.6!important;max-width:56ch;color:#d5ecf2!important;margin:0 0 30px!important}
.os-hero-actions{display:flex;flex-wrap:wrap;gap:14px;margin:0}
.os-hero-actions .button{margin:0}
.os-hero-scroll{position:absolute;left:50%;bottom:22px;width:22px;height:36px;border:2px solid #9aebfd80;border-radius:12px;translate:-50% 0}
.os-hero-scroll span{position:absolute;left:50%;top:7px;width:4px;height:7px;margin-left:-2px;border-radius:2px;background:var(--cyan);animation:os-rotella 1.8s ease-in-out infinite}
@keyframes os-rotella{0%{opacity:0;transform:translateY(0)}30%{opacity:1}100%{opacity:0;transform:translateY(12px)}}
.archive-esperienza .os-intro{font-size:clamp(18px,1.6vw,21px);line-height:1.6;color:#d5ecf2;margin:46px 0 34px}

/* ------------------------------------------------------------ cornice comune */
.archive .os-scena{position:relative;width:var(--os-larga);margin:40px 0 44px calc(50% - var(--os-larga) / 2);padding:clamp(20px,3vw,36px);background:radial-gradient(120% 90% at 80% 0%,#0d2d42 0%,var(--os-pannello) 62%);border:1px solid var(--os-bordo);border-radius:8px}
.os-scena .eyebrow{margin:0 0 16px;color:#9aebfd}
.os-scena figcaption{font-size:var(--fs-note,15px);line-height:1.6;color:#a6bec8;margin:18px 0 0;max-width:80ch}
.os-film-nota{position:absolute;right:12px;bottom:10px;font-size:13px;letter-spacing:.08em;color:#ffffffb3;text-transform:uppercase;text-shadow:0 1px 6px #000}
.archive-esperienza video[data-os-video]{opacity:0;transition:opacity .9s ease}
.archive-esperienza video[data-os-video].is-pronto{opacity:1}

/* ------------------------------------------------------------ l'inversione */
/* Resta ferma sotto l'intestazione mentre si scorre: deve entrare tutta nello schermo, quindi
   la larghezza la decide anche l'altezza (il disegno è 16:9, il resto della cornice ~350 px). */
.os-inversione{--os-larga:min(1180px,calc(100vw - 48px),calc((100svh - 350px) * 1.778 + 72px))}
.os-inv-testa{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 24px;margin-bottom:18px}
.os-inv-testa .eyebrow{margin:0}
.os-inv-fasi{display:flex;flex-wrap:wrap;gap:8px}
.os-inv-fasi button{min-height:44px;padding:0 16px;border-radius:999px;border:1px solid var(--os-bordo);background:#ffffff08;color:#d5ecf2;font-size:15px;font-weight:700;transition:background .25s,color .25s,border-color .25s}
.os-inv-fasi button[aria-pressed="true"]{background:var(--cyan);border-color:var(--cyan);color:#031523}
.os-inv-palco{position:relative}
.os-corto{display:none}
.os-inv-tela{display:block;width:100%;height:auto;aspect-ratio:16/9;border-radius:6px;background:#020b16}
.os-inv-manometro{position:absolute;right:clamp(10px,2vw,22px);top:clamp(10px,2vw,22px);width:clamp(120px,17vw,184px);padding:10px 12px 12px;border-radius:8px;background:#031021d9;border:1px solid var(--os-bordo);text-align:center;backdrop-filter:blur(6px)}
.os-inv-manometro svg{display:block;width:100%;height:auto;overflow:visible}
.os-man-arco{fill:none;stroke:#ffffff26;stroke-width:12;stroke-linecap:round}
.os-man-zona{fill:none;stroke:#9aebfd59;stroke-width:12;stroke-linecap:round}
.os-man-tacca{stroke:#f5f7fa;stroke-width:3}
.os-man-ago{stroke:var(--cyan);stroke-width:4;stroke-linecap:round}
.os-inv-manometro circle{fill:var(--cyan)}
.os-man-valore{display:block;font-size:22px;font-weight:700;color:#f5f7fa;margin-top:-6px;font-variant-numeric:tabular-nums}
.os-man-nome{display:block;font-size:13px;color:#a6bec8;line-height:1.3}
.os-man-pi{position:absolute;left:23%;top:2px;font-size:14px;font-weight:700;color:#f5f7fa}
.os-inv-didascalia{min-height:3.4em;font-size:clamp(16px,1.4vw,19px)!important;color:#d5ecf2!important}
.os-inv-didascalia strong{color:var(--cyan)}
.os-inv-legenda{display:flex;flex-wrap:wrap;gap:6px 22px;list-style:none;padding:0;margin:12px 0 0!important;font-size:var(--fs-note,15px);color:#a6bec8}
.os-dot{display:inline-block;width:12px;height:12px;border-radius:50%;margin-right:8px;vertical-align:-1px}
.os-dot-acqua{background:var(--cyan);width:8px;height:8px;vertical-align:1px}
.os-dot-sale{border:2px solid #f5f7fa}
.os-dot-membrana{width:4px;height:16px;border-radius:2px;background:linear-gradient(#9aebfd 50%,transparent 50%) 0 0/4px 6px;vertical-align:-3px}

/* ------------------------------------------------------------ la membrana in sezione */
.os-strati{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:clamp(20px,3vw,40px);align-items:center}
.os-strati-film{position:relative;border-radius:6px;overflow:hidden;aspect-ratio:16/9;background:#020b16}
.os-strati-film img,.os-strati-film video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.os-strati-svg{display:block;width:100%;height:auto;overflow:visible}
.os-strati-svg text{fill:#d5ecf2;font:600 15px Arial,Helvetica,sans-serif;letter-spacing:.01em}
.os-strato-esce text,.os-strato-acqua text{fill:#a6bec8;font-weight:400}
.os-m-acqua{fill:var(--cyan)}
.os-m-sale{fill:none;stroke:#f5f7fa;stroke-width:2.5}
.os-strati.is-vivo .os-m-acqua{animation:os-attraversa 4.2s cubic-bezier(.45,.05,.4,1) infinite}
.os-strati.is-vivo .os-m-sale{animation:os-rimbalza 2.6s ease-in-out infinite}
.os-strati.is-vivo .os-m:nth-child(2){animation-delay:-1.1s}
.os-strati.is-vivo .os-m:nth-child(3){animation-delay:-2.3s}
.os-strati.is-vivo .os-m:nth-child(4){animation-delay:-3.1s}
.os-strati.is-vivo .os-m:nth-child(5){animation-delay:-.6s}
.os-strati.is-vivo .os-m:nth-child(7){animation-delay:-1.3s}
.os-strati.is-vivo .os-m:nth-child(8){animation-delay:-.7s}
.os-strati.is-vivo .os-m:nth-child(9){animation-delay:-1.9s}
@keyframes os-attraversa{0%{transform:translateY(0);opacity:0}10%{opacity:1}40%{transform:translateY(62px)}55%{transform:translateY(150px)}88%{transform:translateY(300px);opacity:1}100%{transform:translateY(310px);opacity:0}}
@keyframes os-rimbalza{0%,100%{transform:translateY(0)}45%{transform:translateY(38px)}55%{transform:translateY(36px)}}
.os-strati-nota{font-size:var(--fs-note,15px)!important;color:#a6bec8!important;margin:10px 0 0!important}

/* ------------------------------------------------------------ il percorso */
.os-percorso{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:clamp(20px,3.4vw,48px);align-items:start;padding-block:clamp(24px,4vw,48px)}
.os-perc-fisso{position:sticky;top:96px}
.os-perc-schermo{position:relative;aspect-ratio:16/9;border-radius:6px;overflow:hidden;background:#020b16}
.os-perc-quadro{position:absolute;inset:0;opacity:0;transform:scale(1.04);transition:opacity .7s ease,transform 1.4s var(--ease-out,ease)}
.os-perc-quadro.is-attivo{opacity:1;transform:none}
.os-perc-quadro img,.os-perc-quadro video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.os-perc-linea{display:block;width:100%;height:auto;margin-top:18px;overflow:visible}
.os-perc-tubo{fill:none;stroke:#ffffff1f;stroke-width:6;stroke-linecap:round}
.os-perc-scarico{fill:none;stroke:#ffffff26;stroke-width:4;stroke-dasharray:2 7;stroke-linecap:round}
.os-perc-flusso{fill:none;stroke:var(--cyan);stroke-width:6;stroke-linecap:round;stroke-dasharray:600;stroke-dashoffset:var(--os-flusso,600);transition:stroke-dashoffset .5s var(--ease-out,ease);filter:drop-shadow(0 0 6px #9aebfd99)}
.os-perc-nodi circle{fill:#061628;stroke:#ffffff40;stroke-width:3;transition:fill .3s,stroke .3s}
.os-perc-nodi text{fill:#a6bec8;font:600 23px Arial,Helvetica,sans-serif;text-anchor:middle;transition:fill .3s}
.os-perc-nodi g.is-fatto circle{stroke:var(--cyan)}
.os-perc-nodi g.is-attivo circle{fill:var(--cyan);stroke:var(--cyan)}
.os-perc-nodi g.is-attivo text{fill:#f5f7fa}
.os-perc-scarico-testo{fill:#a6bec8;font:21px Arial,Helvetica,sans-serif}
.os-perc-passi{list-style:none;padding:0!important;margin:0!important}
.os-perc-passi li{min-height:min(62vh,520px);display:flex;flex-direction:column;justify-content:center;gap:8px;padding:0 0 0 22px!important;margin:0!important;border-left:2px solid #ffffff1a;transition:border-color .4s,opacity .4s;opacity:.42}
.os-perc-passi li.is-attivo{border-color:var(--cyan);opacity:1}
.os-perc-n{font-size:14px;font-weight:700;letter-spacing:.16em;color:var(--cyan)}
.os-perc-passi strong{font-size:clamp(24px,2.4vw,34px);line-height:1.1;letter-spacing:-.03em;color:#f5f7fa}
.os-perc-passi li>span:last-child{font-size:clamp(17px,1.4vw,19px);line-height:1.6;color:#c6d8df;max-width:38ch}

/* ------------------------------------------------------------ la scala */
.os-scala-tavola{position:relative;padding:0 6px}
.os-scala-oggetti{position:relative;height:112px}
.os-scala-oggetti span{position:absolute;left:var(--x);bottom:12px;translate:-50% 0;font-size:15px;font-weight:700;color:#f5f7fa;text-align:center;white-space:nowrap;line-height:1.25}
.os-scala-oggetti span::after{content:"";position:absolute;left:50%;bottom:-12px;width:1px;height:10px;background:#ffffff59}
.os-scala-oggetti small{display:block;font-size:13px;font-weight:400;color:#a6bec8}
.os-scala-oggetti .os-scala-sotto{bottom:52px}
.os-scala-oggetti .os-scala-sotto::after{height:50px;bottom:-52px}
.os-scala-oggetti .os-scala-acqua{color:var(--cyan)}
.os-scala-asse{position:relative;height:30px;border-top:1px solid #ffffff40}
.os-scala-asse span{position:absolute;left:var(--x);top:8px;translate:-50% 0;font-size:13px;color:#a6bec8;white-space:nowrap;font-variant-numeric:tabular-nums}
.os-scala-asse span:first-child{translate:0 0}
.os-scala-asse span:last-child{translate:-100% 0}
.os-scala-barre{list-style:none;padding:0!important;margin:10px 0 0!important;display:grid;gap:10px}
.os-scala-barre li{position:relative;height:40px;margin:0!important}
.os-scala-barre i{position:absolute;left:0;top:0;bottom:0;width:var(--fino);border-radius:3px;background:linear-gradient(90deg,#9aebfd14,#9aebfd47);border-right:3px solid #9aebfdb3;transform-origin:left center}
.os-scala-barre .os-scala-ro i{background:linear-gradient(90deg,#9aebfd2e,#9aebfdcc);border-right-color:var(--cyan);box-shadow:0 0 22px #9aebfd40}
.os-scala-barre b{position:absolute;left:12px;top:50%;translate:0 -50%;z-index:1;font-size:15px;color:#f5f7fa}
.os-scala-barre span{position:absolute;left:calc(var(--fino) + 12px);top:50%;translate:0 -50%;font-size:14px;color:#a6bec8;white-space:nowrap}
.os-scala-barre li:nth-child(n+3) span{left:auto;right:calc(100% - var(--fino) + 12px);z-index:1;color:#d5ecf2}
.os-scala-barre .os-scala-ro span{color:#031523;font-weight:700}
.os-scala.is-pronta .os-scala-barre i{animation:os-cresce 1.3s var(--ease-out,ease) both}
.os-scala.is-pronta .os-scala-barre li:nth-child(2) i{animation-delay:.12s}
.os-scala.is-pronta .os-scala-barre li:nth-child(3) i{animation-delay:.24s}
.os-scala.is-pronta .os-scala-barre li:nth-child(4) i{animation-delay:.36s}
.os-scala.is-pronta .os-scala-barre li:nth-child(5) i{animation-delay:.48s}
@keyframes os-cresce{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* ------------------------------------------------------------ il conto */
.os-conto{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:12px clamp(24px,4vw,56px);align-items:center}
.os-conto>.eyebrow,.os-conto>figcaption{grid-column:1/-1}
.os-conto-cursori{display:grid;gap:22px}
.os-conto-cursori label{display:grid;grid-template-columns:1fr auto;gap:8px 12px;font-size:16px;color:#d5ecf2;line-height:1.4}
.os-conto-cursori output{font-size:20px;font-weight:700;color:var(--cyan);font-variant-numeric:tabular-nums}
.os-conto-cursori input{grid-column:1/-1;width:100%;accent-color:var(--cyan);height:28px;margin:0}
.os-conto-esito{display:grid;gap:18px}
.os-conto-riga{position:relative;display:grid;grid-template-columns:auto 1fr;align-items:baseline;gap:2px 12px;padding-bottom:16px}
.os-conto-riga span{font-size:16px;color:#c6d8df;grid-column:1/-1}
.os-conto-riga strong{font-size:clamp(36px,4.4vw,60px);line-height:1;letter-spacing:-.04em;color:#f5f7fa;font-variant-numeric:tabular-nums}
.os-conto-riga em{font-size:15px;color:#a6bec8;justify-self:start}
.os-conto-riga i{position:absolute;left:0;bottom:0;height:6px;width:var(--w);border-radius:3px;background:var(--cyan);transition:width .6s var(--ease-out,ease)}
.os-conto-scarico i{background:repeating-linear-gradient(90deg,#f5f7fa99 0 8px,transparent 8px 12px)}
.os-conto-scarico strong{color:#d5ecf2}
.os-conto-docce{font-size:17px!important;color:#d5ecf2!important;margin:4px 0 0!important}
.os-conto-docce strong{color:var(--cyan)}

/* ------------------------------------------------------------ le analisi */
.os-analisi-scala{position:relative;padding:0 0 26px}
.os-analisi-fasce{position:relative;height:74px;border-radius:4px;overflow:hidden;background:#ffffff08}
.os-analisi-fasce span{position:absolute;top:0;bottom:0;left:var(--da);width:calc(var(--a) - var(--da));padding:12px;font-size:14px;font-weight:700;color:#d5ecf2;line-height:1.25;border-right:1px solid #ffffff26}
.os-analisi-fasce span:nth-child(1){background:#9aebfd2b}
.os-analisi-fasce span:nth-child(2){background:#9aebfd14}
.os-analisi-fasce small{display:block;font-weight:400;color:#a6bec8;font-size:13px}
.os-analisi-asse{position:relative;height:26px}
.os-analisi-asse span{position:absolute;left:var(--x);top:6px;font-size:13px;color:#a6bec8;translate:-50% 0;white-space:nowrap}
.os-analisi-asse span:first-child{translate:0 0}
.os-analisi-segno{position:absolute;left:var(--x);top:-10px;height:100px;width:3px;margin-left:-1px;background:var(--cyan);box-shadow:0 0 18px #9aebfd}
.os-analisi-segno b,.os-analisi-segno span{position:absolute;left:10px;white-space:nowrap}
.os-analisi-segno b{top:0;font-size:17px;color:var(--cyan)}
.os-analisi-segno span{top:22px;font-size:13px;color:#d5ecf2}
.os-analisi.is-pronta .os-analisi-segno{animation:os-segno 1.6s var(--ease-out,ease) both}
@keyframes os-segno{from{left:96%;opacity:0}20%{opacity:1}to{left:var(--x)}}
.os-analisi-valori{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px;margin:22px 0 0}
.os-analisi-valori div{padding:14px;border-radius:6px;background:#ffffff08;border:1px solid #ffffff14}
.os-analisi-valori dt{font-size:14px;color:#a6bec8}
.os-analisi-valori dd{margin:4px 0 0;font-size:15px;color:#d5ecf2}
.os-analisi-valori b{font-size:28px;letter-spacing:-.03em;color:#f5f7fa;font-variant-numeric:tabular-nums}

/* ------------------------------------------------------------ l'entrata */
.os-entra{opacity:0;transform:translateY(26px);transition:opacity .8s var(--ease-out,ease),transform .8s var(--ease-out,ease)}
.os-dentro{opacity:1;transform:none}

/* ------------------------------------------------------------ telefono */
@media (max-width:900px){
 .os-strati,.os-conto{grid-template-columns:minmax(0,1fr)}
 .os-percorso{grid-template-columns:minmax(0,1fr)}
 .os-perc-fisso{top:64px;z-index:2;background:var(--os-pannello);padding-bottom:6px;margin:0 -4px}
 .os-perc-passi li{min-height:56vh;padding-left:16px!important}
 .os-analisi-valori{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:640px){
 .os-hero{min-height:auto;padding-top:min(56vw,320px)}
 .os-hero-media{bottom:auto;height:min(78vw,440px)}
 .os-hero-media::after{background:linear-gradient(0deg,#031021 0%,#03102100 55%)}
 .os-hero-copy{padding-bottom:36px}
 .os-hero-scroll{display:none}
 .os-scena{padding:16px}
 .os-inv-manometro{position:static;width:auto;display:grid;grid-template-columns:96px 1fr;align-items:center;gap:4px 12px;margin-top:10px;text-align:left}
 .os-inv-manometro svg{grid-row:span 2}
 .os-man-valore{margin:0}
 .os-man-pi{left:38px;top:4px}
 .os-inv-testa{margin-bottom:12px}
 .os-inv-fasi{flex-wrap:nowrap;width:100%}
 .os-inv-fasi button{flex:1;padding:0 6px;font-size:15px}
 .os-largo{display:none}
 .os-corto{display:inline}
 .os-inv-manometro{grid-template-columns:76px 1fr;padding:8px 12px}
 .os-inv-didascalia{min-height:5.2em;margin-top:12px!important}
 .os-inv-legenda{display:none}
 .os-scala-oggetti{height:92px}
 .os-scala-asse span:nth-child(even){display:none}
 .os-scala-oggetti span{font-size:13px;writing-mode:vertical-rl;rotate:180deg;translate:-50% 0;bottom:14px}
 .os-scala-oggetti small{display:none}
 .os-scala-oggetti .os-scala-sotto{display:none}
 .os-scala-barre li:nth-child(n+3) span,.os-scala-barre span{position:static;display:block;translate:none;margin:46px 0 0;font-size:13px;color:#a6bec8;white-space:normal}
 .os-scala-barre .os-scala-ro span{color:#a6bec8}
 .os-scala-barre li{height:auto;min-height:40px}
 .os-scala-barre i{height:40px;bottom:auto}
 .os-scala-barre b{top:20px}
 .os-analisi-fasce span{font-size:13px;padding:8px}
 .os-analisi-fasce span:nth-child(3){font-size:0}
 .os-analisi-fasce span:nth-child(3) small{display:none}
 .os-analisi-valori{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* ------------------------------------------------------------ meno movimento */
@media (prefers-reduced-motion:reduce){
 .os-hero-scroll span,.os-strati .os-m{animation:none!important}
 .os-perc-quadro,.os-perc-flusso,.os-conto-riga i,.os-entra{transition:none}
 .os-scala .os-scala-barre i,.os-analisi .os-analisi-segno{animation:none!important}
 .os-perc-passi li{min-height:0;padding-block:18px!important;opacity:1}
 .os-perc-fisso{position:static}
}

/* ------------------------------------------------------------ le scene della scelta
   28/10/2026, per /miglior-depuratore-acqua/. Tre infografiche senza JavaScript: il disegno
   lo fa il CSS, il contenuto sta nel DOM come testo vero. È la condizione per cui le leggono
   anche un crawler e un motore AI, che è metà del motivo per cui esistono.
   L'animazione entra solo con `prefers-reduced-motion: no-preference`. */

.sc-criteri-lista{list-style:none;margin:0;padding:0;display:grid;gap:10px;counter-reset:c}
.sc-criteri-lista li{counter-increment:c;position:relative;padding:14px 18px 14px 56px;
 border-radius:8px;background:linear-gradient(90deg,#0d2a3d 0%,#0d2a3d var(--peso),#081a28 var(--peso));
 border:1px solid #ffffff14}
.sc-criteri-lista li::before{content:counter(c);position:absolute;left:18px;top:14px;
 width:24px;height:24px;border-radius:50%;display:grid;place-items:center;
 background:#0a3550;color:#9aebfd;font:700 13px/1 Arial,Helvetica,sans-serif}
.sc-criteri-lista .sc-criteri-alto::before{background:#9aebfd;color:#02202d}
.sc-criteri-lista b{display:block;color:#f5f7fa;font-size:17px;letter-spacing:-.02em}
.sc-criteri-lista .sc-criteri-alto b{font-size:19px}
.sc-criteri-lista span{display:block;margin-top:3px;color:#b9c6d0;font-size:14px;line-height:1.5}
.sc-criteri-lista em{color:#9aebfd;font-style:normal}

.sc-filtri-tavola{position:relative;display:grid;gap:14px;padding:18px 18px 44px;
 border:1px solid #ffffff14;border-radius:8px;background:#081a28}
.sc-filtri-corsia b{display:block;margin-bottom:6px;color:#b9c6d0;font-size:13px;
 letter-spacing:.08em;text-transform:uppercase}
.sc-filtri-barra{position:relative;height:38px;border-radius:5px;overflow:hidden}
.sc-filtri-barra span{position:absolute;inset:0;display:flex;align-items:center;padding-left:14px;
 color:#02202d;font:700 14px/1 Arial,Helvetica,sans-serif;z-index:1}
.sc-filtri-piena{background:#9aebfd}
.sc-filtri-cala{background:linear-gradient(90deg,#9aebfd 0%,#5f9fb4 42%,#2f5c6e 70%,#1b3b49 100%)}
.sc-filtri-cala span{color:#f5f7fa}
.sc-filtri-asse{position:absolute;left:18px;right:18px;bottom:12px;height:20px;margin:0;padding:0;list-style:none}
.sc-filtri-asse li{position:absolute;left:var(--x);transform:translateX(-50%);white-space:nowrap;
 color:#8aa0ae;font-size:11px}
.sc-filtri-asse li:first-child{transform:none;left:0}
.sc-filtri-asse li:last-child{transform:none;left:auto;right:0}

.sc-modelli-tavola{display:grid;gap:1px;background:#ffffff14;border:1px solid #ffffff14;
 border-radius:8px;overflow:hidden}
.sc-modelli-riga{display:grid;grid-template-columns:1.1fr 1fr 1fr 1.15fr;gap:1px;background:#ffffff14}
.sc-modelli-riga>*{padding:12px 14px;background:#081a28;color:#d5e3ea;font-size:14px;line-height:1.45}
.sc-modelli-testa>*{background:#0a2435;color:#9aebfd;font-weight:700;font-size:13px;
 letter-spacing:.06em;text-transform:uppercase}
.sc-modelli-riga [role=rowheader]{color:#b9c6d0;font-weight:700}
.sc-modelli-riga small{display:block;margin-top:3px;color:#8aa0ae;font-size:12px}
.sc-modelli-noi{background:#0d2a3d!important;color:#f5f7fa!important}
.sc-modelli-testa .sc-modelli-noi{background:#0f3c57!important}
.sc-modelli-chiave [role=rowheader]{color:#9aebfd}
@media (max-width:760px){
 .sc-modelli-riga{grid-template-columns:1fr}
 .sc-modelli-testa{display:none}
 .sc-modelli-riga>*::before{content:attr(data-colonna);display:block;margin-bottom:2px;
  color:#8aa0ae;font-size:11px;letter-spacing:.06em;text-transform:uppercase}
 .sc-modelli-riga [role=rowheader]{background:#0a2435;color:#9aebfd}
}

/* L'animazione parte dallo stato finale, non ci arriva. Lo stato di partenza lo mette `is-attesa`,
   che aggiunge /scene/osmosi.mjs: senza JavaScript, con un errore, o con un IntersectionObserver
   che non scatta (una scheda in secondo piano non ha viewport), la scena si vede comunque giusta.
   È la stessa regola delle altre scene: il disegno non dipende dal fatto che il codice giri. */
@media (prefers-reduced-motion:no-preference){
 .sc-criteri.is-attesa .sc-criteri-lista li{background-size:200% 100%;background-position:100% 0;
  transition:background-position 1.1s var(--ease-out,ease)}
 .sc-criteri.is-attesa.is-pronta .sc-criteri-lista li{background-position:0 0}
 .sc-filtri.is-attesa .sc-filtri-barra span{opacity:0;transition:opacity .5s .6s}
 .sc-filtri.is-attesa.is-pronta .sc-filtri-barra span{opacity:1}
 .sc-filtri.is-attesa .sc-filtri-cala{clip-path:inset(0 100% 0 0);
  transition:clip-path 1.4s var(--ease-out,ease)}
 .sc-filtri.is-attesa.is-pronta .sc-filtri-cala{clip-path:inset(0 0 0 0)}
}

/* Il richiamo in linea. Mobile-first: una colonna, il tasto largo quanto il pollice; da 600 px
   le tre righe si affiancano. Niente riquadro vistoso — deve leggersi come la frase che segue
   quella appena letta, non come un cartellone in mezzo al testo. */
.sc-azione{margin:26px 0;padding:18px;border-radius:8px;background:#0d2a3d;
 border:1px solid #9aebfd33;display:grid;gap:12px}
.sc-azione p{margin:0!important;color:#f5f7fa!important;font-size:17px!important;
 line-height:1.4!important;letter-spacing:-.02em}
.sc-azione .btn{justify-self:stretch;text-align:center;min-height:48px;display:flex;
 align-items:center;justify-content:center}
.sc-azione small{color:#b9c6d0;font-size:13px;line-height:1.5}
@media (min-width:600px){
 .sc-azione{grid-template-columns:1fr auto;align-items:center;column-gap:18px;padding:20px 22px}
 .sc-azione .btn{justify-self:end;grid-row:1/3;grid-column:2}
 .sc-azione small{grid-column:1}
}
@media (prefers-reduced-motion:no-preference){
 .sc-azione .btn{transition:transform .2s var(--ease-out,ease)}
 .sc-azione .btn:hover{transform:translateY(-2px)}
}