/* ==========================================================================
   Il Mio Sito — home di ilmiosito.org, foglio di stile unico
   Ricostruzione statica della home pubblicata (blocco di codice dentro la
   pagina WordPress Divi 5, letto il 13 ottobre 2026). Misure, colori,
   animazioni e soglie sono quelli dell'originale: si cambiano solo qui sotto,
   nelle variabili, o nel livello PAGES.

   Breakpoint: quelli dell'originale, 900px (telefono / tablet verticale) e
   360px, piu' 900x700 per i telefoni bassi. DEROGA DICHIARATA allo
   standard §6.7: sono le soglie della pagina misurata.

   Classi: in italiano, come nell'originale (scontrino, riga, lista, totale):
   DEROGA DICHIARATA a §6.1, vedi LEGGIMI.md.
   ========================================================================== */

@layer reset, base, layout, components, pages;

/* ----- Font, ospitati sul dominio -----
   Gli intervalli unicode sono quelli dei file (sottoinsieme latino): i
   caratteri fuori intervallo, come ● e ★, passano al font di sistema
   esattamente come nella pagina di origine. */
@font-face{
  font-family:"Poppins";
  src:url("../fonts/poppins-300.woff2") format("woff2");
  font-weight:300; font-style:normal; font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Poppins";
  src:url("../fonts/poppins-400.woff2") format("woff2");
  font-weight:400; font-style:normal; font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Poppins";
  src:url("../fonts/poppins-500.woff2") format("woff2");
  font-weight:500; font-style:normal; font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Poppins";
  src:url("../fonts/poppins-600.woff2") format("woff2");
  font-weight:600; font-style:normal; font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Poppins";
  src:url("../fonts/poppins-700.woff2") format("woff2");
  font-weight:700; font-style:normal; font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* ==========================================================================
   VARIABILI — tutti i colori della pagina (valori dell'originale)
   ========================================================================== */
:root{
  color-scheme:only light;
  --font-body:"Poppins", Helvetica, Arial, sans-serif;
  --blue:#018ed1;
  --typed:#178dce;
  --ink:#333;
  --txt:#4f4f4f;
  --mut:#c4c4c4;
  --bg:#f9fafd;
  --dark:#191919;
  --green:#66b033;
  --btn:var(--green);
  --c-black:#000;
  --c-call:#008fc6;
  --c-card-img:#eef0f6;
  --c-grey-7a:#7a7a7a;
  --c-grey-8a:#8a8a8a;
  --c-grey-9a:#9a9a9a;
  --c-grey-a0:#a0a0a0;
  --c-grey-a7:#a7a7a7;
  --c-grey-b3:#b3b3b3;
  --c-grey-b5:#b5b5b5;
  --c-grey-bd:#bdbdbd;
  --c-grey-c9:#c9c9c9;
  --c-grey-cf:#cfcfcf;
  --c-grey-d9:#d9d9d9;
  --c-grey-e2:#e2e2e2;
  --c-grey-f4:#f4f4f4;
  --c-list:#1d1d1b;
  --c-no:#d72e2a;
  --c-ok:#009540;
  --c-rail:#e3e6ef;
  --c-tag:#008fc5;
  --c-tiles-bg:#121212;
  --c-white:#fff;
  --sh-call:rgba(0,143,198,.22);
  --sh-call-hover:rgba(0,143,198,.32);
  --sh-card:rgba(89,49,180,.1);
  --sh-card-hover:rgba(89,49,180,.18);
  --sh-dark:rgba(0,0,0,.3);
  --sh-green:rgba(102,176,51,.28);
  --sh-green-hover:rgba(102,176,51,.38);
  --c-footer-link:#4c3d34;
  --c-focus:#178dce;
}

/* ==========================================================================
   OLTRE I 1920px: la pagina ingrandita
   Su TV e monitor 4K la home e' la stessa dei 1920px, ingrandita in
   proporzione (standard §6.9.2): a scalini del 10%, zoom = larghezza / 1920
   arrotondato per difetto, x2 a 3840px. --z ripete lo zoom: tutte le misure
   legate alla finestra (vw, vh) lo dividono, perche' dentro una pagina
   ingrandita il browser le ingrandirebbe due volte. Lo script fa lo stesso
   con le misure prese dalla finestra (main.js, pageScale).
   ========================================================================== */
  @media (min-width:2112px){ html{ zoom:1.1; --z:1.1; } }
  @media (min-width:2304px){ html{ zoom:1.2; --z:1.2; } }
  @media (min-width:2496px){ html{ zoom:1.3; --z:1.3; } }
  @media (min-width:2688px){ html{ zoom:1.4; --z:1.4; } }
  @media (min-width:2880px){ html{ zoom:1.5; --z:1.5; } }
  @media (min-width:3072px){ html{ zoom:1.6; --z:1.6; } }
  @media (min-width:3264px){ html{ zoom:1.7; --z:1.7; } }
  @media (min-width:3456px){ html{ zoom:1.8; --z:1.8; } }
  @media (min-width:3648px){ html{ zoom:1.9; --z:1.9; } }
  @media (min-width:3840px){ html{ zoom:2.0; --z:2.0; } }
  @media (min-width:4032px){ html{ zoom:2.1; --z:2.1; } }
  @media (min-width:4224px){ html{ zoom:2.2; --z:2.2; } }
  @media (min-width:4416px){ html{ zoom:2.3; --z:2.3; } }
  @media (min-width:4608px){ html{ zoom:2.4; --z:2.4; } }
  @media (min-width:4800px){ html{ zoom:2.5; --z:2.5; } }
  @media (min-width:4992px){ html{ zoom:2.6; --z:2.6; } }
  @media (min-width:5184px){ html{ zoom:2.7; --z:2.7; } }
  @media (min-width:5376px){ html{ zoom:2.8; --z:2.8; } }
  @media (min-width:5568px){ html{ zoom:2.9; --z:2.9; } }
  @media (min-width:5760px){ html{ zoom:3.0; --z:3.0; } }
  @media (min-width:5952px){ html{ zoom:3.1; --z:3.1; } }
  @media (min-width:6144px){ html{ zoom:3.2; --z:3.2; } }
  @media (min-width:6336px){ html{ zoom:3.3; --z:3.3; } }
  @media (min-width:6528px){ html{ zoom:3.4; --z:3.4; } }
  @media (min-width:6720px){ html{ zoom:3.5; --z:3.5; } }
  @media (min-width:6912px){ html{ zoom:3.6; --z:3.6; } }
  @media (min-width:7104px){ html{ zoom:3.7; --z:3.7; } }
  @media (min-width:7296px){ html{ zoom:3.8; --z:3.8; } }
  @media (min-width:7488px){ html{ zoom:3.9; --z:3.9; } }
  @media (min-width:7680px){ html{ zoom:4.0; --z:4.0; } }

/* ==========================================================================
   RESET
   ========================================================================== */
@layer reset{
  *, *::before, *::after{ box-sizing:border-box; }
  html{ -webkit-text-size-adjust:100%; text-size-adjust:100%; }
  body{ margin:0; }
}

/* ==========================================================================
   BASE — fondo, testo, focus, collegamento "Vai al contenuto"
   ========================================================================== */
@layer base{
  body{
    background-color:var(--bg);
    color:var(--txt);
    font-family:var(--font-body);
    font-weight:300;
    overflow-x:clip;
  }
  :focus-visible{ outline:2px solid var(--c-focus); outline-offset:2px; }

  .skip-link{
    position:absolute; left:8px; top:-60px; z-index:100;   /* sopra a tutto quando riceve il focus */
    padding:8px 16px;
    background-color:var(--c-white); color:var(--ink);
    border-radius:4px;
  }
  .skip-link:focus{ top:8px; }
}

/* ==========================================================================
   LAYOUT — footer (misure lette sulla pagina pubblicata: fondo come la
   pagina, 30px sopra e 36px sotto, colonna all'80%, testo 13px centrato)
   ========================================================================== */
@layer layout{
  .site-footer{
    position:relative; z-index:1;           /* sopra le scene bloccate a tutto schermo */
    background-color:var(--bg);
    padding:30px 0 36px;
  }
  .footer-inner{ width:80%; margin:0 auto; text-align:center; }
  .footer-logo{ display:block; width:auto; height:25px; margin:0 auto 14px; }
  /* il logo porta a ilmiosito.org (area di tocco dalla regola dei link del footer) */
  .footer-logo-link{ display:block; width:fit-content; margin-inline:auto; }
  .footer-text{
    margin:0;
    font-size:16px; font-weight:400; line-height:28.8px;   /* riga del paragrafo come nell'originale (anche per il testo piccolo) */
    color:var(--txt);
  }
  .footer-note{ font-size:13px; }
  .footer-text a{ color:var(--c-footer-link); text-decoration:none; }
  .footer-text a:hover{ text-decoration:underline; }
  /* "Preferenze cookie": un pulsante (apre il banner) che si presenta come i link */
  .footer-link{
    position:relative;
    padding:0; border:0; background:none;
    font:inherit; color:var(--c-footer-link); cursor:pointer;
  }
  .footer-link:hover{ text-decoration:underline; }
  .footer-link[hidden]{ display:none; }
  /* area di tocco di 44px sui link piccoli del footer, l'aspetto non cambia */
  .footer-text a,
  .footer-link{ position:relative; }
  .footer-text a::before,
  .footer-link::before{ content:""; position:absolute; inset:-13px 0; }
  /* sulle policy il banner sta in basso: spazio in fondo alla pagina alto quanto il banner */
  .legal-page ~ .site-footer{ padding-bottom:calc(36px + var(--consent-space, 0px)); }

  /* ----- banner dei cookie (fatto in casa, come nel modello Il Mio Sito) -----
     Nella home e' una finestra al centro con fondo oscurato; sulle policy
     sta in basso senza fondo oscurato, 70px sopra il fondo della finestra
     (la barra di Safari su iPhone copre il bordo basso). Accetta e Rifiuta
     hanno lo stesso peso. */
  .consent{
    width:min(100% - 20px, 520px); max-width:none;
    margin:auto; padding:0; border:0;
    background-color:var(--c-white); color:var(--txt);
    border-radius:12px;
    box-shadow:0 12px 40px -8px var(--sh-dark);
  }
  .consent::backdrop{ background-color:rgba(0,0,0,.72); }
  .consent:not(:modal){
    position:fixed; inset:auto 0 calc(70px + env(safe-area-inset-bottom, 0px)) 0;
    z-index:100;
    margin-inline:auto;
  }
  .consent-box{ position:relative; padding:22px 24px; }
  .consent-title{ margin:0 0 8px; padding-right:30px; color:var(--ink); font-size:16px; font-weight:600; line-height:1.4; }   /* spazio per la X */
  /* X in alto a destra: chiude senza consenso (vale "Rifiuta" se non si e'
     ancora scelto). Cerchio bianco di 30px, area di tocco 44px. */
  .consent-close{
    position:absolute; top:4px; right:4px;
    width:44px; height:44px; padding:7px;
    border:0; background:none;
    color:var(--txt);
    font:inherit; font-size:20px; line-height:1;
    cursor:pointer;
    isolation:isolate;
  }
  .consent-close::before{
    content:""; position:absolute; inset:7px; z-index:-1;
    background-color:var(--c-white);
    border-radius:50%;
    box-shadow:inset 0 0 0 1.5px var(--c-grey-9a);
  }
  .consent-text{ margin:0 0 16px; font-size:13px; line-height:1.5; }
  .consent-text a{ color:var(--c-call); text-decoration:underline; }
  .consent-actions{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
  .consent-btn{
    min-height:44px; padding:12px 1em;
    border:0; border-radius:8px;
    font:inherit; font-size:15px; font-weight:500; text-transform:uppercase;
    cursor:pointer;
    /* Accetta e Rifiuta hanno lo stesso aspetto, bianchi: nessuno dei due
       spinge piu' dell'altro (Garante, linee guida cookie) */
    background-color:var(--c-white); color:var(--txt);
    box-shadow:inset 0 0 0 1.5px var(--c-grey-9a);
  }

  /* ----- pagine delle policy (/privacy-policy/, /cookie-policy/) -----
     Scheda bianca su fondo chiaro, testo a sinistra entro 90 caratteri per
     riga (65ch, standard §6.9.1), sezioni numerate "1)" come le policy del
     modello. In fondo la barra fissa con il solo ← TORNA SUL SITO. */
  .legal-page{ padding:40px 0 0; }
  .legal{ width:min(90%, 1100px); margin:0 auto 24px; }
  .legal-card{
    padding:clamp(24px, calc(5vw / var(--z, 1)), 48px);
    background-color:var(--c-white);
    border-radius:12px;
    box-shadow:0 2px 13px rgba(0,0,0,.08);
  }
  .legal-body{ max-width:65ch; margin-inline:auto; font-size:16px; line-height:1.75; overflow-wrap:break-word; }
  .legal-title{ margin:0 0 6px; color:var(--ink); font-size:clamp(26px, calc(3vw / var(--z, 1)), 32px); font-weight:600; line-height:1.3; }
  .legal-date{ margin:0; font-size:14px; }
  .legal-body h2{
    margin:28px 0 10px; padding-top:22px;
    border-top:1px solid var(--c-grey-e2);
    color:var(--ink); font-size:19px; font-weight:600; line-height:1.4;
  }
  .legal-body p{ margin:0; }
  .legal-body p + p,
  .legal-body p + ul,
  .legal-body ul + p,
  .legal-body p + .legal-scroll{ margin-top:12px; }
  .legal-body ul{ margin:0; padding-left:1.25em; }
  .legal-body li + li{ margin-top:8px; }
  .legal-body a{ color:var(--c-call); text-decoration:underline; }
  .legal-box{ padding:14px 18px; background-color:var(--c-grey-f4); border:1px solid var(--c-grey-d9); border-radius:8px; }
  .legal-scroll{ overflow-x:auto; border:1px solid var(--c-grey-d9); border-radius:8px; }
  .legal-table{ width:100%; min-width:560px; border-collapse:collapse; font-size:14px; line-height:1.5; }
  .legal-table th,
  .legal-table td{ padding:8px 10px; border-bottom:1px solid var(--c-grey-e2); text-align:left; vertical-align:top; }
  .legal-table th{ background-color:var(--c-grey-f4); font-weight:600; }
  .legal-table tbody tr:last-child td{ border-bottom:0; }
  .legal-table code{ font-size:13px; }
  .legal-bar{ position:sticky; bottom:0; z-index:50; background-color:var(--c-call); }
  .legal-bar a{
    display:flex; align-items:center; justify-content:center; gap:.5em;
    min-height:48px; padding:12px 16px;
    color:var(--c-white); text-decoration:none;
    font-size:15px; font-weight:500; text-transform:uppercase;
  }
  .legal-bar a:hover{ text-decoration:underline; }
  .legal-bar svg{ width:1em; height:1em; fill:currentColor; }
  @media print{
    .legal-bar,
    .consent,
    .footer-link{ display:none; }
    .legal-card{ box-shadow:none; padding:0; }
  }
}

/* ==========================================================================
   PAGES — la home. Regole dell'originale, una dichiarazione per riga; le
   uniche differenze (nomi di alcuni elementi, niente !important) sono
   elencate nel LEGGIMI.md del progetto.
   ========================================================================== */
@layer pages{
  .imso{
    --p:0;
  }
  .imso *, .imso *::before, .imso *::after{
    box-sizing:border-box;
  }
  .imso{
    position:relative;
    line-height:normal;
    font-size:16px;
    text-align:left;
    background:var(--bg);
    color:var(--ink);
    font-family:var(--font-body);
    font-weight:300;
    -webkit-font-smoothing:antialiased;
  }
  .imso h1, .imso h2, .imso h3, .imso p, .imso strong, .imso summary, .imso details{
    margin:0;
    padding:0;
    letter-spacing:normal;
    text-transform:none;
    font-family:inherit;
    font-style:normal;
    text-shadow:none;
    color:inherit;
  }
  .imso strong{
    font-weight:inherit;
  }
  .imso a{
    color:inherit;
  }
  .imso svg.ic{
    width:1.05em;
    height:1.05em;
    fill:currentColor;
    vertical-align:-.16em;
    margin-left:.45em;
  }
  .imso .btn{
    display:inline-flex;
    align-items:center;
    background:var(--btn);
    color:var(--c-white);
    text-decoration:none;
    font-weight:400;
    font-size:16px;
    line-height:1;
    padding:20px 26px;
    border-radius:8px;
    box-shadow:0 8px 22px var(--sh-green);
    transition:transform .25s ease,box-shadow .25s ease;
  }
  .imso .btn:hover{
    transform:translateY(-2px);
    box-shadow:0 12px 28px var(--sh-green-hover);
  }
  .imso .btn.blu{
    background:var(--c-call);
    box-shadow:0 8px 22px var(--sh-call);
  }
  .imso .btn.blu:hover{
    box-shadow:0 12px 28px var(--sh-call-hover);
  }
  .imso .btn.green{
    background:var(--green);
    box-shadow:0 8px 22px var(--sh-dark);
  }
  .imso .eyebrow{
    font-weight:400;
    font-size:clamp(13px,calc(1.05vw / var(--z, 1)),17px);
    letter-spacing:.2em;
    color:var(--mut);
    text-transform:uppercase;
  }
  .imso .scene{
    position:relative;
  }
  .imso .pin{
    position:absolute;
    left:0;
    top:0;
    width:100%;
    height:calc(100vh / var(--z, 1));
    overflow:hidden;
  }
  .imso .pin.fix{
    position:fixed;
    left:0;
    right:0;
    width:auto;
  }
  .imso .pin.end{
    top:auto;
    bottom:0;
  }
  .imso #imso-apertura{
    height:calc(185vh / var(--z, 1));
    --e:0;
  }
  .imso #imso-prezzo{
    height:calc(250vh / var(--z, 1));
    --e:clamp(0,calc((var(--p) - .04)*3.2),1);
  }
  .imso #imso-prezzo .pin{
    background:var(--bg);
  }
  .imso #imso-prezzo .blue{
    width:100%;
    height:100%;
    transform-origin:left center;
    transform:scaleX(var(--e));
  }
  .imso #imso-apertura .pin{
    background:var(--bg);
  }
  .imso .blue{
    position:absolute;
    left:0;
    top:0;
    height:100%;
    width:calc(33.333% + var(--e)*66.667%);
    background:var(--blue);
  }
  .imso .lot{
    position:absolute;
    left:0;
    top:0;
    width:33.333%;
    height:100%;
    overflow:hidden;
    opacity:clamp(0,calc(1 - var(--e)*1.5),1);
    transform:translateX(calc(var(--e)*calc(-6vw / var(--z, 1))));
  }
  .imso .lot video{
    position:absolute;
    left:0;
    top:0;
    width:2px;
    height:2px;
    opacity:0;
    pointer-events:none;
  }
  .imso .lot canvas{
    position:absolute;
    left:50%;
    bottom:0;
    height:min(100%,calc(44.2vw / var(--z, 1)));
    aspect-ratio:1080/1192;
    transform:translateX(-50%);
    display:block;
    -webkit-mask-image:linear-gradient(90deg,transparent 0,var(--c-black) 8%,var(--c-black) 92%,transparent 100%),linear-gradient(180deg,transparent 0,var(--c-black) 3%);
    -webkit-mask-composite:source-in;
    mask-image:linear-gradient(90deg,transparent 0,var(--c-black) 8%,var(--c-black) 92%,transparent 100%),linear-gradient(180deg,transparent 0,var(--c-black) 3%);
    mask-composite:intersect;
  }
  .imso .copy{
    position:absolute;
    left:33.333%;
    right:0;
    top:50%;
    padding:0 calc(6vw / var(--z, 1)) 0 calc(9vw / var(--z, 1));
    transform:translateY(calc(-50% - var(--e)*calc(14vh / var(--z, 1))));
    opacity:clamp(0,calc(1 - var(--e)*2.4),1);
  }
  .imso .copy h1{
    font-weight:700;
    font-size:clamp(34px,calc(3.75vw / var(--z, 1)),74px);
    line-height:1.18;
    margin-top:.25em;
    color:var(--ink);
  }
  .imso .copy h1 .typed{
    display:block;
    color:var(--typed);
    font-weight:700;
    min-height:1.18em;
    white-space:nowrap;
  }
  .imso .cur{
    display:inline-block;
    width:.06em;
    height:.95em;
    background:var(--c-grey-bd);
    margin-left:.06em;
    vertical-align:-.1em;
    animation:imso-blink .9s steps(1) infinite;
  }
  @keyframes imso-blink{
    50%{
      opacity:0;
    }
  }
  .imso .copy .lead{
    margin-top:clamp(40px,calc(11vh / var(--z, 1)),130px);
  }
  .imso .copy .lead strong{
    display:block;
    font-weight:700;
    font-size:clamp(18px,calc(1.5vw / var(--z, 1)),26px);
    color:var(--ink);
  }
  .imso .copy .lead span{
    display:block;
    font-size:clamp(16px,calc(1.3vw / var(--z, 1)),23px);
    margin-top:.35em;
  }
  .imso .cta{
    display:flex;
    align-items:center;
    gap:16px;
    margin-top:28px;
    flex-wrap:wrap;
  }
  .imso .cta .or{
    font-style:normal;
    color:var(--c-grey-a0);
    font-size:16px;
  }
  .imso .hint{
    position:absolute;
    pointer-events:none;
    right:calc(3vw / var(--z, 1));
    bottom:calc(3.5vh / var(--z, 1));
    font-size:12px;
    letter-spacing:.3em;
    text-transform:uppercase;
    color:var(--c-grey-b5);
    opacity:clamp(0,calc(1 - var(--p)*12),1);
  }
  .imso .hint:after{
    content:"";
    display:block;
    width:1px;
    height:34px;
    background:var(--c-grey-c9);
    margin:10px auto 0;
    animation:imso-drop 1.8s ease-in-out infinite;
    transform-origin:top;
  }
  @keyframes imso-drop{
    0%{
      transform:scaleY(0);
    }
    50%{
      transform:scaleY(1);
    }
    100%{
      transform:scaleY(1);
      opacity:0;
    }
  }
  .imso .price{
    position:absolute;
    left:0;
    right:0;
    top:50%;
    padding:0 calc(6vw / var(--z, 1));
    text-align:center;
    color:var(--c-white);
    pointer-events:none;
    --a:clamp(0,calc((var(--p) - .46)*5),1);
    opacity:var(--a);
    transform:translateY(calc(-50% + (1 - var(--a))*calc(9vh / var(--z, 1))));
  }
  .imso .price small{
    display:block;
    font-size:clamp(18px,calc(3.4vw / var(--z, 1)),66px);
    font-weight:600;
    text-transform:uppercase;
    white-space:nowrap;
    line-height:1.15;
    margin-bottom:.15em;
  }
  .imso .price strong{
    display:inline-block;
    font-weight:700;
    font-size:clamp(64px,calc(11.5vw / var(--z, 1)),230px);
    line-height:1;
    letter-spacing:-.02em;
    font-variant-numeric:tabular-nums;
    white-space:nowrap;
  }
  .imso .price em{
    display:block;
    font-style:normal;
    text-transform:uppercase;
    white-space:nowrap;
    font-size:clamp(16px,calc(1.6vw / var(--z, 1)),30px);
    margin-top:.35em;
    opacity:clamp(0,calc((var(--p) - .68)*7),1);
  }
  .imso #imso-incluso{
    height:calc(230vh / var(--z, 1));
    background:var(--dark);
  }
  .imso #imso-incluso .pin{
    background:var(--c-tiles-bg);
  }
  .imso .tiles{
    position:absolute;
    left:50%;
    top:50%;
    width:0;
    height:0;
    transform:rotate(-20deg);
    --gap:clamp(12px,calc(1.6vw / var(--z, 1)),32px);
    filter:blur(calc(clamp(0,calc((var(--p) - .08)*4.5),1)*6px));
  }
  .imso .row{
    position:absolute;
    left:0;
    display:flex;
    gap:var(--gap);
    width:max-content;
    --s:1;
    transform:translate(calc(-50% + (var(--p) - .5)*var(--s)*calc(70vw / var(--z, 1))),0);
  }
  .imso .row:nth-child(even){
    --s:-1;
  }
  .imso .row span{
    display:block;
    width:calc(40vw / var(--z, 1));
    height:calc(22vw / var(--z, 1));
    background-size:cover;
    background-position:center;
  }
  .imso .veil{
    position:absolute;
    inset:0;
    background:var(--c-black);
    opacity:calc(.3 + clamp(0,calc((var(--p) - .05)*4),1)*.42);
  }
  .imso .incl{
    position:absolute;
    inset:0;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
    color:var(--c-white);
    padding:0 calc(6vw / var(--z, 1));
    --a:clamp(0,calc((var(--p) - .1)*4.5),1);
    opacity:var(--a);
    transform:scale(calc(1.35 - var(--a)*.35));
  }
  .imso .incl h2{
    font-weight:700;
    font-size:clamp(34px,calc(5.2vw / var(--z, 1)),104px);
    line-height:1.05;
    color:var(--c-white);
  }
  .imso .incl p{
    font-size:clamp(17px,calc(1.7vw / var(--z, 1)),30px);
    margin:.5em 0 1.4em;
    color:var(--c-white);
  }
  .imso #imso-grafica{
    background:var(--bg);
  }
  .imso #imso-grafica .pin{
    display:flex;
    flex-direction:column;
    justify-content:center;
  }
  .imso .head{
    text-align:center;
    padding:0 calc(6vw / var(--z, 1));
  }
  .imso .head h2{
    font-weight:700;
    font-size:clamp(34px,calc(3.7vw / var(--z, 1)),72px);
    line-height:1.15;
    color:var(--ink);
  }
  .imso .track{
    display:flex;
    gap:clamp(16px,calc(2vw / var(--z, 1)),34px);
    padding:clamp(22px,calc(4vh / var(--z, 1)),46px) calc(8vw / var(--z, 1)) 10px;
    width:max-content;
    will-change:transform;
  }
  .imso .card{
    width:clamp(230px,calc(21vw / var(--z, 1)),360px);
    background:var(--c-white);
    border-radius:14px;
    padding:14px;
    box-shadow:0 2px 35px var(--sh-card);
    display:flex;
    flex-direction:column;
    gap:14px;
    text-decoration:none;
    transition:transform .35s ease,box-shadow .35s ease;
  }
  .imso .card:hover{
    transform:translateY(-8px);
    box-shadow:0 14px 44px var(--sh-card-hover);
  }
  .imso .card img{
    display:block;
    width:100%;
    height:auto;                 /* aggiunta: l'img ha width e height nel markup (standard §8.1) */
    aspect-ratio:740/890;
    object-fit:cover;
    border-radius:6px;
    background:var(--c-card-img);
  }
  .imso .card span{
    display:block;
    text-align:center;
    background:var(--typed);
    color:var(--c-white);
    border-radius:8px;
    padding:15px 10px;
    font-size:16px;
    font-weight:400;
  }
  .imso .rail{
    height:3px;
    width:min(280px,calc(50vw / var(--z, 1)));
    margin:clamp(14px,calc(3vh / var(--z, 1)),30px) auto 0;
    background:var(--c-rail);
    border-radius:3px;
    overflow:hidden;
  }
  .imso .rail span{
    display:block;
    height:100%;
    background:var(--typed);
    transform-origin:left;
    transform:scaleX(var(--p));
  }
  .imso #imso-perfetto{
    padding:clamp(90px,calc(18vh / var(--z, 1)),220px) calc(6vw / var(--z, 1));
    text-align:center;
  }
  .imso #imso-words{
    max-width:22em;
    margin:1.1em auto 0;
    font-size:clamp(22px,calc(2.6vw / var(--z, 1)),48px);
    line-height:1.4;
    color:var(--ink);
    font-weight:300;
  }
  .imso #imso-words strong{
    font-weight:600;
  }
  .imso #imso-perfetto .w{
    opacity:.14;
    transition:opacity .45s ease;
  }
  .imso #imso-perfetto .w.lit{
    opacity:1;
  }
  .imso #imso-domande{
    padding:0 calc(6vw / var(--z, 1)) clamp(70px,calc(12vh / var(--z, 1)),140px);
  }
  .imso .faq{
    max-width:1080px;
    margin:0 auto;
    background:var(--c-white);
    border-radius:14px;
    box-shadow:0 2px 35px var(--sh-card);
    padding:clamp(20px,calc(2.4vw / var(--z, 1)),34px);
  }
  .imso .faq h2{
    display:flex;
    align-items:center;
    gap:14px;
    font-size:15px;
    font-weight:500;
    letter-spacing:.02em;
    color:var(--txt);
    padding-bottom:22px;
    margin-bottom:26px;
    border-bottom:1px solid var(--c-grey-e2);
  }
  .imso .faq h2 img{
    height:34px;
    width:auto;
  }
  .imso details{
    background:var(--c-grey-f4);
    border:1px solid var(--c-grey-d9);
    margin-top:12px;
  }
  .imso summary{
    list-style:none;
    cursor:pointer;
    padding:20px;
    font-size:clamp(16px,calc(1.3vw / var(--z, 1)),19px);
    font-weight:600;
    color:var(--txt);
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:16px;
  }
  .imso summary::-webkit-details-marker{
    display:none;
  }
  .imso summary:after{
    content:"";
    border:6px solid transparent;
    border-top-color:var(--c-grey-b3);
    margin-top:6px;
    transition:transform .3s ease;
    transform-origin:50% 25%;
  }
  .imso details[open] summary:after{
    transform:rotate(180deg);
  }
  .imso details p{
    padding:0 20px 22px;
    font-size:16px;
    line-height:1.75;
    color:var(--txt);
  }
  .imso details ul{
    margin:0;
    padding:0 20px 22px 42px;
    list-style:disc;
    font-size:16px;
    line-height:1.75;
    color:var(--txt);
  }
  .imso details li{
    margin:0 0 .3em;
    padding:0;
    list-style:disc;
  }
  .imso details li strong{
    font-weight:600;
  }
  .imso .rv{
    opacity:0;
    transform:translateY(40px);
    transition:opacity .9s cubic-bezier(.16,.84,.3,1),transform 1.1s cubic-bezier(.16,.84,.3,1);
  }
  .imso .rv.in{
    opacity:1;
    transform:none;
  }
  .imso .rv.d1{
    transition-delay:.12s;
  }
  .imso .rv.d2{
    transition-delay:.24s;
  }
  .imso .rv.d3{
    transition-delay:.36s;
  }
  .imso #imso-problema, .imso #imso-costi{
    height:calc(320vh / var(--z, 1));
  }
  .imso #imso-problema .pin, .imso #imso-costi .pin{
    background:var(--bg);
  }
  .imso .tag{
    display:inline-block;
    background:var(--c-tag);
    color:var(--c-white);
    font-size:clamp(20px,calc(2.3vw / var(--z, 1)),44px);
    font-weight:300;
    line-height:1;
    padding:.32em .45em;
    white-space:nowrap;
    opacity:0;
    clip-path:inset(0 0 0 100%);
    transition:clip-path .9s cubic-bezier(.7,0,.2,1),opacity .2s;
  }
  .imso .tag strong{
    font-weight:700;
  }
  .imso .st1 .tag{
    opacity:1;
    clip-path:inset(0);
  }
  .imso .pb-tel{
    position:absolute;
    left:calc(4vw / var(--z, 1));
    top:50%;
    width:calc(46vw / var(--z, 1));
    height:min(calc(80vh / var(--z, 1)),calc(42vw / var(--z, 1)));
    transform:translateY(-50%);
    display:flex;
    justify-content:center;
    gap:4%;
  }
  .imso .pb-tel img{
    height:100%;
    width:auto;
    opacity:0;
    transform:translateY(calc(9vh / var(--z, 1)));
    transition:opacity .9s ease,transform 1.2s cubic-bezier(.16,.84,.3,1);
  }
  .imso .pb-tel .t2{
    transition-delay:.18s;
  }
  .imso .st1 .pb-tel img{
    opacity:1;
    transform:none;
  }
  .imso .lista{
    position:absolute;
    right:0;
    top:50%;
    transform:translateY(-50%);
    width:calc(46vw / var(--z, 1));
    text-align:right;
    padding-right:calc(5.4vw / var(--z, 1));
  }
  .imso .lista .tag{
    margin-right:0;                          /* a filo della fine dei titoli (Web, Network) */
    margin-bottom:clamp(10px,calc(2vh / var(--z, 1)),30px);
  }
  .imso .gr{
    margin-top:clamp(16px,calc(3.6vh / var(--z, 1)),46px);
  }
  .imso .gr h3, .imso .gr li{
    opacity:0;
    transform:translateX(56px);
    transition:opacity .7s ease,transform .9s cubic-bezier(.16,.84,.3,1);
  }
  .imso .gr li:nth-child(1){
    transition-delay:.13s;
  }
  .imso .gr li:nth-child(2){
    transition-delay:.26s;
  }
  .imso .gr li:nth-child(3){
    transition-delay:.39s;
  }
  .imso .gr h3{
    position:relative;
    font-weight:600;
    font-size:clamp(22px,calc(2.45vw / var(--z, 1)),47px);
    line-height:1.15;
    color:var(--c-list);
    margin-bottom:.25em;
  }
  .imso .gr h3::after{
    content:"";
    position:absolute;
    right:calc(-5.4vw / var(--z, 1));
    top:52%;
    width:calc(3.7vw / var(--z, 1));
    height:.3em;
    background:var(--c-tag);
    transform:translateY(-50%) scaleX(0);
    transform-origin:right;
    transition:transform .8s cubic-bezier(.7,0,.2,1) .2s;
  }
  .imso .gr ul{
    list-style:none;
    margin:0;
    padding:0;
  }
  .imso .gr li{
    display:flex;
    justify-content:flex-end;
    align-items:center;
    gap:.6em;
    font-weight:300;
    font-size:clamp(15px,calc(1.36vw / var(--z, 1)),26px);
    line-height:1.7;
    color:var(--c-list);
  }
  .imso .gr li::after{
    content:"";
    flex:0 0 1.05em;
    height:1.05em;
    background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='10' fill='%23d72e2a'/%3E%3Cpath d='M6.6 6.6l6.8 6.8M13.4 6.6l-6.8 6.8' stroke='%23fff' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat;
    transform:scale(0);
    transition:transform .45s cubic-bezier(.3,1.6,.5,1);
  }
  .imso .si .gr li::after{
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='10' fill='%23009540'/%3E%3Cpath d='M5.6 10.3l2.9 2.9 5.9-6.2' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  }
  .imso .gr li:nth-child(1)::after{
    transition-delay:.55s;
  }
  .imso .gr li:nth-child(2)::after{
    transition-delay:.68s;
  }
  .imso .gr li:nth-child(3)::after{
    transition-delay:.81s;
  }
  .imso .st2 .g1 h3, .imso .st2 .g1 li, .imso .st3 .g2 h3, .imso .st3 .g2 li, .imso .st4 .g3 h3, .imso .st4 .g3 li{
    opacity:1;
    transform:none;
  }
  .imso .st2 .g1 h3::after, .imso .st3 .g2 h3::after, .imso .st4 .g3 h3::after{
    transform:translateY(-50%) scaleX(1);
  }
  .imso .st2 .g1 li::after, .imso .st3 .g2 li::after, .imso .st4 .g3 li::after{
    transform:scale(1);
  }
  .imso .scontrino{
    position:absolute;
    left:calc(4.5vw / var(--z, 1));
    top:50%;
    width:min(calc(54vw / var(--z, 1)),1040px);
    background:var(--bg);
    border:1px solid var(--c-grey-a7);
    padding:clamp(22px,calc(3.4vw / var(--z, 1)),64px) clamp(22px,calc(3.4vw / var(--z, 1)),64px) clamp(20px,calc(2.6vw / var(--z, 1)),48px);
    opacity:0;
    transform:translateY(calc(-50% + calc(5vh / var(--z, 1))));
    transition:opacity .8s ease,transform 1s cubic-bezier(.16,.84,.3,1);
  }
  .imso .st5 .scontrino{
    opacity:1;
    transform:translateY(-50%);
  }
  .imso .riga{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:20px;
    font-size:clamp(16px,calc(1.85vw / var(--z, 1)),35px);
    font-weight:300;
    color:var(--c-list);
    line-height:1.25;
    opacity:0;
    transform:translateY(14px);
    transition:opacity .7s ease,transform .9s cubic-bezier(.16,.84,.3,1);
  }
  .imso .riga strong{
    font-weight:500;
    white-space:nowrap;
  }
  .imso .riga small{
    display:block;
    font-size:.62em;
    letter-spacing:.04em;
    margin-top:.35em;
  }
  .imso .r2{
    margin-top:.8em;
  }
  .imso .st5 .r1, .imso .st6 .r2{
    opacity:1;
    transform:none;
  }
  .imso .linea{
    display:block;
    height:1px;
    background:var(--c-grey-a7);
    margin:clamp(26px,calc(4.5vh / var(--z, 1)),64px) 0 clamp(18px,calc(3vh / var(--z, 1)),44px);
    transform:scaleX(0);
    transform-origin:left;
    transition:transform 1.1s cubic-bezier(.7,0,.2,1);
  }
  .imso .st7 .linea{
    transform:none;
  }
  .imso .totale{
    display:flex;
    justify-content:flex-end;
  }
  .imso .totale strong{
    background:var(--c-ok);
    color:var(--c-white);
    font-weight:500;
    font-size:clamp(20px,calc(2.35vw / var(--z, 1)),45px);
    padding:.22em .42em;
    font-variant-numeric:tabular-nums;
    opacity:0;
    transform:scale(.8);
    transition:opacity .5s ease,transform .7s cubic-bezier(.3,1.5,.5,1);
  }
  .imso .st8 .totale strong{
    opacity:1;
    transform:none;
  }
  .imso .totale{
    flex-direction:column;
    align-items:flex-end;
  }
  .imso .totale small{
    display:block;
    margin-top:.7em;
    font-size:clamp(11px,calc(.9vw / var(--z, 1)),17px);
    letter-spacing:.04em;
    color:var(--c-grey-7a);
    opacity:0;
    transition:opacity .6s ease .4s;
  }
  .imso .st8 .totale small{
    opacity:1;
  }
  @media (max-width:900px){
    .imso #imso-apertura{
      height:calc(175vh / var(--z, 1));
    }
    .imso #imso-problema, .imso #imso-costi{
      height:auto;
    }
    .imso #imso-problema .pin, .imso #imso-costi .pin{
      position:relative;
      top:auto;
      bottom:auto;
      left:auto;
      right:auto;
      width:auto;
      height:auto;
      overflow:hidden;
      padding:64px calc(7vw / var(--z, 1)) 72px;
      display:flex;
      flex-direction:column;
      gap:30px;
    }
    .imso .pb-tel{
      position:static;
      width:auto;
      height:auto;
      transform:none;
      gap:4%;
    }
    .imso .pb-tel img{
      width:44%;
      max-width:230px;
      height:auto;
    }
    .imso .lista{
      position:static;
      width:auto;
      transform:none;
      margin-right:calc(-7vw / var(--z, 1));
      padding-right:calc(11vw / var(--z, 1));
    }
    .imso .lista .tag{
      margin-right:0;
      font-size:20px;
      margin-bottom:4px;
    }
    .imso .gr{
      margin-top:22px;
    }
    .imso .gr h3{
      font-size:22px;
    }
    .imso .gr h3::after{
      right:calc(-11vw / var(--z, 1));
      width:calc(7vw / var(--z, 1));
    }
    .imso .gr li{
      font-size:15px;
      line-height:1.7;
    }
    .imso #imso-costi .lista{
      order:1;
    }
    .imso .scontrino{
      order:2;
      position:static;
      width:auto;
      transform:translateY(24px);
      padding:22px 20px 20px;
    }
    .imso .st5 .scontrino{
      transform:none;
    }
    .imso .riga{
      font-size:15px;
    }
    .imso .riga small{
      font-size:11px;
    }
    .imso .totale strong{
      font-size:22px;
    }
    .imso .blue{
      width:100%;
      height:calc(46% + var(--e)*54%);
    }
    .imso .lot{
      width:100%;
      height:46%;
      transform:none;
      opacity:clamp(0,calc(1 - var(--p)*9),1);
    }
    .imso .lot canvas{
      height:min(100%,calc(132vw / var(--z, 1)));
    }
    .imso .copy{
      left:0;
      top:46%;
      padding:26px calc(7vw / var(--z, 1)) 0;
      transform:translateY(calc(var(--p)*calc(-30vh / var(--z, 1))));
      opacity:clamp(0,calc(1 - var(--p)*9),1);
    }
    .imso .copy .lead{
      margin-top:22px;
    }
    .imso .cta{
      margin-top:18px;
      gap:8px;
      flex-wrap:nowrap;
      justify-content:space-between;
    }
    .imso .cta .btn{
      flex:1 1 0;
      justify-content:center;
      min-width:0;
    }
    .imso .cta .or{
      font-size:13px;
    }
    .imso .btn{
      padding:15px 14px;
      font-size:14px;
      white-space:nowrap;
    }
    .imso .hint{
      display:none;
    }
    .imso .price{
      padding:0 calc(7vw / var(--z, 1));
    }
    .imso .price strong{
      font-size:clamp(52px,calc(18vw / var(--z, 1)),150px);
    }
    .imso .row span{
      width:calc(84vw / var(--z, 1));
      height:calc(46vw / var(--z, 1));
    }
    .imso .card{
      width:calc(68vw / var(--z, 1));
      max-width:340px;
    }
  }
  @media (max-width:360px){
    .imso .cta .btn{
      font-size:13px;
      padding:14px 8px;
    }
    .imso .cta{
      gap:6px;
    }
  }
  @media (max-width:900px) and (max-height:700px){
    .imso .copy h1{
      font-size:30px;
    }
    .imso .copy .lead{
      margin-top:14px;
    }
  }
  /* apertura: la colonna azzurra si dissolve dal basso mentre si scorre, cosi' non c'e' stacco con la scena dopo */
  .imso #imso-apertura{
    --d:clamp(0,calc((var(--p) - .12)*1.55),1);
  }
  .imso #imso-apertura .blue, .imso #imso-apertura .lot{
    -webkit-mask-image:linear-gradient(to top,transparent calc(var(--d)*140% - 40%),var(--c-black) calc(var(--d)*140%));
    mask-image:linear-gradient(to top,transparent calc(var(--d)*140% - 40%),var(--c-black) calc(var(--d)*140%));
  }
  .imso #imso-apertura .lot{
    opacity:1;
    transform:translateY(calc(var(--d)*calc(-7vh / var(--z, 1))));
  }
  .imso #imso-apertura .copy{
    opacity:clamp(0,calc(1 - var(--d)*1.4),1);
    transform:translateY(calc(-50% - var(--d)*calc(12vh / var(--z, 1))));
  }
  @media (max-width:900px){
    .imso #imso-apertura .copy{
      transform:translateY(calc(var(--d)*calc(-8vh / var(--z, 1))));
    }
  }
  /* quanto costa: lista dei valori barrati, poi il prezzo */
  .imso .riga.valori{
    display:block;
  }
  .imso .valori .vt{
    font-size:clamp(11px,calc(.85vw / var(--z, 1)),15px);
    font-weight:500;
    letter-spacing:.14em;
    text-transform:uppercase;
    color:var(--c-grey-8a);
    margin:0 0 .9em;
  }
  .imso .valori .v{
    display:flex;
    justify-content:space-between;
    align-items:baseline;
    gap:20px;
    font-size:clamp(14px,calc(1.25vw / var(--z, 1)),22px);
    padding:.42em 0;
    border-bottom:1px dotted var(--c-grey-cf);
    opacity:0;
    transform:translateX(-12px);
    transition:opacity .5s ease,transform .6s cubic-bezier(.16,.84,.3,1);
    transition-delay:calc(var(--i)*90ms);
  }
  .imso .st5 .valori .v{
    opacity:1;
    transform:none;
  }
  .imso .valori s, .imso .r2 s{
    color:var(--c-grey-9a);
    white-space:nowrap;
    text-decoration-line:line-through;
    text-decoration-color:var(--c-no);
    text-decoration-thickness:2px;
  }
  .imso .valori em{
    font-style:normal;
    font-weight:500;
    color:var(--c-ok);
    white-space:nowrap;
  }
  /* voci a prezzo barrato: punto blu a sinistra, prezzo in pillola grigia */
  .imso .valori .v > span{ display:flex; align-items:center; gap:.6em; }
  .imso .valori .v > span::before{
    content:""; flex:0 0 .5em; height:.5em; border-radius:50%; background:var(--c-tag);
  }
  .imso .valori .v s{ padding:.1em .55em; border-radius:999px; background:var(--c-grey-f4); }
  /* voci incluse: etichette verdi con spunta */
  .imso .inclusi{ display:flex; flex-wrap:wrap; gap:.5em; margin-top:1em; font-size:clamp(13px,calc(1.05vw / var(--z, 1)),19px); }
  .imso .chip{
    display:inline-flex; align-items:center; gap:.45em;
    padding:.4em .85em; border-radius:999px;
    background:rgba(0,149,64,.1); color:var(--c-ok); font-weight:500;
    opacity:0; transform:translateY(8px);
    transition:opacity .5s ease,transform .6s cubic-bezier(.16,.84,.3,1);
    transition-delay:calc(var(--i)*90ms);
  }
  .imso .chip::before{
    content:""; width:1em; height:1em;
    background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='10' fill='%23009540'/%3E%3Cpath d='M5.6 10.3l2.9 2.9 5.9-6.2' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
  }
  .imso .st5 .chip{ opacity:1; transform:none; }
  /* prezzo finale con il risparmio in evidenza */
  .imso .totale .risparmio{
    padding:.35em .8em; border-radius:999px;
    background:#fff4c2; color:var(--c-list);
    font-size:clamp(13px,calc(1.05vw / var(--z, 1)),19px); font-weight:600; letter-spacing:0;
  }
  /* nota sotto il valore totale: il canone dal secondo anno */
  .imso .nota-rinnovo{
    margin:.5em 0 0; text-align:right;
    font-size:clamp(12px,calc(.95vw / var(--z, 1)),17px); font-weight:500;
    color:var(--c-grey-7a);
    opacity:0; transition:opacity .6s ease .2s;
  }
  .imso .st6 .nota-rinnovo{ opacity:1; }
  .imso .r2.vtot{
    margin-top:1em;
    font-size:clamp(15px,calc(1.45vw / var(--z, 1)),26px);
  }
  .imso .totale .tl{
    display:block;
    margin-bottom:.45em;
    font-size:clamp(11px,calc(.85vw / var(--z, 1)),15px);
    font-weight:500;
    letter-spacing:.14em;
    text-transform:uppercase;
    color:var(--c-grey-7a);
    opacity:0;
    transition:opacity .5s ease;
  }
  .imso .st7 .totale .tl{
    opacity:1;
  }

  /* ----- Senza script e in stampa: tutto visibile e fermo -----
     Le scene non si bloccano piu' a tutto schermo: ognuna e' alta una
     finestra, il contenuto e' nel suo stato finale, le anteprime delle demo
     scorrono col dito o con la barra. In stampa lo script toglie la classe
     "js" prima di stampare e la rimette dopo. */
  html:not(.js) .imso .scene,
  html:not(.js) .imso #imso-apertura,
  html:not(.js) .imso #imso-problema,
  html:not(.js) .imso #imso-grafica,
  html:not(.js) .imso #imso-incluso,
  html:not(.js) .imso #imso-prezzo,
  html:not(.js) .imso #imso-costi{ height:auto; }   /* con gli id: le altezze delle scene sono scritte per id */
  html:not(.js) .imso .pin{ position:relative; height:calc(100vh / var(--z, 1)); }
  html:not(.js) .imso #imso-grafica .pin{ height:auto; min-height:calc(100vh / var(--z, 1)); }
  html:not(.js) .imso .track{ width:auto; max-width:100%; overflow-x:auto; }
  html:not(.js) .imso .lot canvas{ display:none; }
  html:not(.js) .imso .lot video{
    left:50%; top:auto; bottom:0;
    width:auto; height:min(100%, calc(44.2vw / var(--z, 1))); aspect-ratio:1080/1192;
    transform:translateX(-50%);
    opacity:1;
  }
  html:not(.js) .imso #imso-apertura .blue,
  html:not(.js) .imso #imso-apertura .lot{ -webkit-mask-image:none; mask-image:none; transform:none; }
  html:not(.js) .imso #imso-apertura .copy{ opacity:1; transform:translateY(-50%); }
  html:not(.js) .imso #imso-prezzo{ --e:1; }
  html:not(.js) .imso .price, html:not(.js) .imso .incl{ --a:1; }
  html:not(.js) .imso .price em{ opacity:1; }
  html:not(.js) .imso .hint{ display:none; }
  html:not(.js) .imso .rv,
  html:not(.js) .imso .tag,
  html:not(.js) .imso .pb-tel img,
  html:not(.js) .imso .gr h3,
  html:not(.js) .imso .gr li,
  html:not(.js) .imso .riga,
  html:not(.js) .imso .valori .v,
  html:not(.js) .imso .chip,
  html:not(.js) .imso .nota-rinnovo,
  html:not(.js) .imso .totale strong,
  html:not(.js) .imso .totale .tl{ opacity:1; transform:none; clip-path:none; }
  html:not(.js) .imso .gr li::after{ transform:scale(1); }
  html:not(.js) .imso .gr h3::after{ transform:translateY(-50%) scaleX(1); }
  html:not(.js) .imso .linea{ transform:none; }
  html:not(.js) .imso .scontrino{ opacity:1; transform:translateY(-50%); }
  @media (max-width:900px){
    html:not(.js) .imso .lot video{ height:min(100%, calc(132vw / var(--z, 1))); }
    html:not(.js) .imso .copy,
    html:not(.js) .imso #imso-apertura .copy{ transform:none; }
    html:not(.js) .imso #imso-problema .pin,
    html:not(.js) .imso #imso-costi .pin{ height:auto; }
    html:not(.js) .imso .scontrino{ transform:none; }
  }
  @media print{
    .skip-link{ display:none; }
    .imso .lot video{ display:none; }
    /* le sette anteprime delle demo vanno a capo: su carta non si scorre
       (in stampa lo script ha tolto "js": stessa specificita' della regola
       senza script, che metterebbe la barra di scorrimento) */
    html:not(.js) .imso .track{
      flex-wrap:wrap;
      justify-content:center;
      overflow:visible;
    }
    .imso .card{
      width:30%;
      box-shadow:none;
      break-inside:avoid;
    }
    .imso .rail{ display:none; }
  }
}