/* ══════════════════════════════════════════════════════════════════════════
   «GUIDAMIVDA SUL TELEFONO» — stile                             (2026-10-20)
   Token del sistema (--fs-*, --r-*, --card, --line…). z-index sopra la barra
   in basso e il menu laterale, sotto la scheda di un luogo (10100).
   ══════════════════════════════════════════════════════════════════════════ */
/* la «tessera app»: l'icona vera, come la si vede sul telefono */
.ins-tessera{display:flex;align-items:center;gap:12px;width:100%;max-width:460px;padding:10px 14px 10px 10px;border:0;border-radius:18px;background:#fdfcfa;color:#16181d;cursor:pointer;text-align:left;font:inherit;box-shadow:0 1px 2px rgba(0,0,0,.08),0 8px 24px rgba(0,0,0,.18);transition:transform .15s var(--ease,ease)}
.ins-tessera:active{transform:scale(.98)}
.ins-tessera-ico{width:44px;height:44px;border-radius:11px;flex:none;box-shadow:0 1px 3px rgba(0,0,0,.18)}
.ins-tessera-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.ins-tessera-txt b{font-size:var(--fs-3);font-weight:700;letter-spacing:-.01em;line-height:1.2}
.ins-tessera-txt small{font-size:var(--fs-1);color:#5a5e66}
.ins-tessera-frec{width:18px;height:18px;flex:none;color:#2c5e3f}
.ins-tessera--piede{margin:0 0 22px}
.ins-tessera--contatti{margin:0 0 24px;max-width:none}

/* la schermata */
html.ins-aperto,html.ins-aperto body{overflow:hidden}
.ins-ov{position:fixed;inset:0;z-index:10080;display:flex;align-items:flex-end;justify-content:center}
.ins-velo{position:absolute;inset:0;background:rgba(14,18,16,.5);opacity:0;transition:opacity .22s ease}
.ins-ov.is-aperto .ins-velo{opacity:1}
.ins-foglio{position:relative;width:100%;max-width:520px;max-height:94dvh;overflow-y:auto;background:var(--bg,#f0ede8);color:var(--text,#16181d);border-radius:24px 24px 0 0;padding:16px 16px calc(18px + env(safe-area-inset-bottom,0px));box-sizing:border-box;display:flex;flex-direction:column;gap:12px;transform:translateY(24px);opacity:0;transition:transform .26s var(--ease,ease),opacity .2s ease}
.ins-ov.is-aperto .ins-foglio{transform:none;opacity:1}
@media (min-width:700px){.ins-ov{align-items:center}.ins-foglio{border-radius:24px}}
.ins-testa{display:flex;align-items:center;gap:12px}
.ins-testa img{border-radius:10px;flex:none;box-shadow:0 1px 3px rgba(0,0,0,.15)}
.ins-testa>div{flex:1;min-width:0}
.ins-tit{font-size:var(--fs-4);font-weight:800;letter-spacing:-.02em;line-height:1.15}
.ins-sotto{font-size:var(--fs-1);color:var(--soft,#65686f);margin-top:2px}
.ins-chiudi{width:40px;height:40px;border-radius:999px;border:0;background:var(--card,#fdfcfa);display:grid;place-items:center;flex:none;cursor:pointer;color:inherit}
.ins-chiudi svg{width:18px;height:18px}

/* il selettore a tre posizioni con il cursore che scorre */
.ins-seg{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));padding:4px;border-radius:999px;background:var(--card,#fdfcfa);box-shadow:inset 0 0 0 1px var(--line,#e4e1db)}
.ins-seg-cursore{position:absolute;top:4px;bottom:4px;left:4px;width:calc((100% - 8px)/3);border-radius:999px;background:#16181d;transform:translateX(calc(var(--i,0)*100%));transition:transform .28s var(--ease,cubic-bezier(.3,.7,.2,1))}
.ins-seg button{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;gap:6px;min-height:44px;border:0;background:none;font:inherit;font-size:var(--fs-2);font-weight:700;color:#3c3f45;cursor:pointer;border-radius:999px;transition:color .2s}
.ins-seg button svg{width:19px;height:19px}
.ins-seg button.is-sel{color:#fff}

.ins-pc{margin:0;font-size:var(--fs-1);color:var(--soft,#65686f);text-align:center}
.ins-subito{display:flex;align-items:center;justify-content:center;gap:10px;min-height:52px;border:0;border-radius:16px;background:#2c5e3f;color:#fff;font:inherit;font-size:var(--fs-3);font-weight:700;cursor:pointer;box-shadow:0 4px 18px rgba(28,61,40,.25)}
.ins-subito img{border-radius:6px}

/* il video: verticale come lo schermo del telefono */
.ins-video{position:relative;align-self:center;width:min(236px,58vw,calc((94dvh - 300px)*9/19.5));aspect-ratio:9/19.5;border-radius:30px;background:#0e1210;overflow:hidden;box-shadow:0 0 0 6px #16181d,0 12px 34px rgba(0,0,0,.25)}
.ins-video video{width:100%;height:100%;object-fit:cover;display:block;background:#0e1210}
.ins-attesa{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;color:#e8efe9;text-align:center;padding:20px;background:linear-gradient(170deg,#1b3d28,#0e1210)}
.ins-attesa[hidden]{display:none}
.ins-attesa-ico svg{width:42px;height:42px;opacity:.9}
.ins-attesa b{font-size:var(--fs-3)}
.ins-attesa small{font-size:var(--fs-1);opacity:.8}

/* i tre passi: poche parole, numerate */
.ins-passi{margin:0;padding:0;list-style:none;counter-reset:p;display:flex;flex-direction:column;gap:7px}
.ins-passi li{counter-increment:p;display:flex;align-items:center;gap:10px;font-size:var(--fs-2);line-height:1.35}
.ins-passi li::before{content:counter(p);width:26px;height:26px;border-radius:999px;background:#2c5e3f;color:#fff;font-weight:800;font-size:var(--fs-1);display:grid;place-items:center;flex:none}
@media (prefers-reduced-motion:reduce){.ins-velo,.ins-foglio,.ins-seg-cursore{transition:none}}

/* ══ I TELEFONI ANIMATI (installa-sim.js) ═══════════════════════════════════
   Schermo disegnato a 390×844 punti e scalato alla cornice da JS. Le
   posizioni sono scelte perché il dito (coordinate in installa-sim.js) cada
   sui tasti: se sposti un tasto qui, sposta anche il dito là. */
.ins-sim{position:absolute;inset:0;overflow:hidden}
.sim-scala{position:absolute;left:0;top:0;width:390px;height:844px;transform-origin:0 0}
.sim{position:relative;width:390px;height:844px;overflow:hidden;font-family:-apple-system,"SF Pro Text","Roboto","Helvetica Neue",system-ui,sans-serif;color:#111;background:#f0ede8;-webkit-font-smoothing:antialiased}
.sim *{box-sizing:border-box}
.sim-pagina{position:absolute;left:0;right:0;top:0;bottom:0;overflow:hidden}
.sim-pagina img{width:390px;display:block;margin-top:44px}
.sim-stato{position:absolute;left:0;right:0;top:0;height:44px;padding:14px 28px 0 34px;display:flex;justify-content:space-between;align-items:flex-start;font-size:16px;color:#111;z-index:3}
.sim-stato b{font-weight:600}
.sim-stato.is-chiaro{color:#fff}
.sim-stato-ico{display:flex;gap:6px;align-items:center}
.sim-batt{width:25px;height:12px;border:1.5px solid currentColor;border-radius:4px;padding:1px;opacity:.9}
.sim-batt i{display:block;height:100%;width:80%;background:currentColor;border-radius:2px}
.sim-dito{position:absolute;left:0;top:0;width:46px;height:46px;border-radius:50%;background:rgba(255,255,255,.55);border:2px solid rgba(20,20,20,.35);box-shadow:0 4px 14px rgba(0,0,0,.28);z-index:20;opacity:0;transition:transform 1.1s cubic-bezier(.45,.05,.25,1),opacity .4s;pointer-events:none}
.sim-dito.is-su{opacity:1}
.sim-dito::after{content:"";position:absolute;inset:-2px;border-radius:50%;background:rgba(44,94,63,.35);transform:scale(.6);opacity:0;transition:transform .38s,opacity .38s}
.sim-dito.is-tocco{transform-origin:center}
.sim-dito.is-tocco::after{transform:scale(1.7);opacity:1}
/* comparse comuni: ogni pezzo è nascosto finché la fase non lo chiama */
.ios-menu,.ios-share,.ios-add,.ios-velo,.and-menu,.and-velo,.and-dialogo,.sam-menu,.sam-velo,.sam-agg-foglio,.sam-dialogo,.sim-home,.sim-app{opacity:0;pointer-events:none;transition:opacity .4s,transform .5s cubic-bezier(.2,.8,.2,1)}

/* ── la schermata Home e l'app aperta ── */
.sim-home{position:absolute;inset:0;z-index:12;background:linear-gradient(160deg,#3b6b8f 0%,#6c86b5 45%,#d7a3a6 100%)}
.sim-home--and{background:linear-gradient(170deg,#24433a 0%,#4e7a5e 50%,#c9d6a4 100%)}
.sim-home--sam{background:linear-gradient(165deg,#2b3d7a 0%,#5b5fb5 50%,#e7b9c8 100%)}
.sim-griglia{position:absolute;left:0;right:0;top:155px;padding:0 10px;display:grid;grid-template-columns:repeat(4,1fr);row-gap:38px}
.sim-ic{display:flex;flex-direction:column;align-items:center;gap:6px}
.sim-ic-q{width:62px;height:62px;display:block;box-shadow:0 2px 6px rgba(0,0,0,.18)}
.sim-ic-q.sim-ios{border-radius:15px}.sim-ic-q.sim-and{border-radius:50%}.sim-ic-q.sim-sam{border-radius:20px}
.sim-ic small{font-size:12px;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.35);white-space:nowrap}
.sim-ic--nuova{opacity:0;transform:scale(.3)}
.sim[data-fase="home"] .sim-ic--nuova,.sim[data-fase="app"] .sim-ic--nuova{animation:simPop .55s .35s cubic-bezier(.3,1.6,.5,1) both}
@keyframes simPop{from{opacity:0;transform:scale(.3)}to{opacity:1;transform:none}}
.sim-dock{position:absolute;left:18px;right:18px;bottom:26px;height:94px;display:flex;justify-content:space-around;align-items:center}
.sim-dock--ios{background:rgba(255,255,255,.28);border-radius:34px;backdrop-filter:blur(10px)}
.sim-dock--and{bottom:104px}
.and-cerca{position:absolute;left:24px;right:24px;bottom:40px;height:52px;border-radius:26px;background:rgba(255,255,255,.9);display:flex;align-items:center;padding:0 18px;font-weight:700;color:#4285f4;font-size:20px}
.sim-app{position:absolute;inset:0;z-index:14;background:#f0ede8;transform:scale(.12);transform-origin:334px 436px}
.sim-app img{width:390px;display:block;margin-top:44px}
.sim[data-fase="home"] .sim-home,.sim[data-fase="app"] .sim-home{opacity:1}
.sim[data-fase="app"] .sim-app{opacity:1;transform:none;transition:opacity .3s,transform .65s cubic-bezier(.2,.8,.2,1)}

/* ── iPhone · Safari ── */
.ios-barra{position:absolute;left:0;right:0;top:712px;bottom:0;padding:8px 14px 0;z-index:4;background:rgba(248,248,250,.94);box-shadow:0 -1px 0 rgba(0,0,0,.08)}
.ios-tool{height:44px;margin-top:4px;display:flex;justify-content:space-between;align-items:center;padding:0 6px;color:#0a7aff}
.ios-tool span{width:52px;display:grid;place-items:center}.ios-tool .is-spento{color:#c4c4c8}
.ios-tondo{width:48px;height:48px;border-radius:50%;background:rgba(250,250,252,.92);box-shadow:0 2px 10px rgba(0,0,0,.15);display:grid;place-items:center;flex:none;color:#111}
.ios-tre{font-size:17px;letter-spacing:1px;font-weight:800}
.ios-pill{height:44px;border-radius:22px;background:#fff;box-shadow:0 1px 6px rgba(0,0,0,.12);display:flex;align-items:center;justify-content:space-between;padding:0 16px;color:#111}
.ios-pill b{font-size:16px;font-weight:500}
.ios-home-ind{position:absolute;left:50%;bottom:8px;width:134px;height:5px;margin-left:-67px;border-radius:3px;background:#111;z-index:21}
.sim[data-fase="home"] .ios-home-ind,.sim[data-fase="app"] .ios-home-ind{background:#fff}
.ios-menu{position:absolute;left:77px;bottom:100px;width:236px;border-radius:24px;background:rgba(245,245,247,.97);box-shadow:0 10px 40px rgba(0,0,0,.22);z-index:6;transform:scale(.85) translateY(20px);transform-origin:50% 100%;overflow:hidden}
.ios-menu div{height:48px;display:flex;align-items:center;gap:12px;padding:0 16px;font-size:16px;border-bottom:.5px solid rgba(0,0,0,.08)}
.ios-menu div:first-child{background:rgba(0,0,0,.05)}
.sim[data-fase="menu"] .ios-menu{opacity:1;transform:none}
.ios-velo{position:absolute;inset:0;background:rgba(0,0,0,.28);z-index:7}
.sim[data-fase="share"] .ios-velo,.sim[data-fase="share2"] .ios-velo,.sim[data-fase="add"] .ios-velo{opacity:1}
/* «Mostra altro»: prima la riga Mostra altro, dopo il tocco al suo posto «Aggiungi alla schermata Home» */
.ios-lista .ios-lista-home,.ios-lista .ios-lista-dopo{display:none}
.sim[data-fase="share2"] .ios-lista-altro{display:none}
.sim[data-fase="share2"] .ios-lista-home,.sim[data-fase="share2"] .ios-lista-dopo{display:flex}
.ios-chev{color:#8a8a8e;font-size:18px}
.ios-share{position:absolute;left:0;right:0;bottom:0;height:560px;border-radius:14px 14px 0 0;background:#f2f2f7;z-index:8;transform:translateY(100%)}
.sim[data-fase="share"] .ios-share,.sim[data-fase="share2"] .ios-share{opacity:1;transform:none}
.ios-share-testa{height:72px;display:flex;align-items:center;gap:12px;padding:0 16px;border-bottom:.5px solid rgba(0,0,0,.1)}
.ios-share-testa img{width:44px;height:44px;border-radius:10px}
.ios-share-testa div{flex:1;min-width:0;display:flex;flex-direction:column}
.ios-share-testa b{font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ios-share-testa small{font-size:13px;color:#8a8a8e}
.ios-x{width:30px;height:30px;border-radius:50%;background:#e3e3e8;display:grid;place-items:center;font-size:13px;color:#6b6b70}
.ios-share-app{height:112px;display:flex;justify-content:space-around;align-items:center}
.ios-share-app div{display:flex;flex-direction:column;align-items:center;gap:6px}
.ios-share-app span{width:60px;height:60px;border-radius:50%}
.ios-share-app small{font-size:12px}
.ios-lista{margin:24px 16px 0;border-radius:12px;background:#fff;overflow:hidden}
.ios-lista div{height:52px;display:flex;align-items:center;justify-content:space-between;padding:0 16px;font-size:17px;border-bottom:.5px solid rgba(0,0,0,.1)}
.ios-add{position:absolute;left:0;right:0;top:54px;bottom:0;border-radius:12px 12px 0 0;background:#f2f2f7;z-index:9;transform:translateY(100%);padding:18px 18px 0}
.sim[data-fase="add"] .ios-add{opacity:1;transform:none}
.ios-add-nav{height:52px;display:flex;align-items:center;justify-content:space-between;font-size:17px}
.ios-add-nav span,.ios-add-nav strong{color:#0a7aff}
.ios-add-nav strong{font-weight:600}
.ios-add-card{margin-top:18px;border-radius:12px;background:#fff;padding:12px;display:flex;align-items:center;gap:12px}
.ios-add-card img{width:60px;height:60px;border-radius:13px;box-shadow:0 1px 3px rgba(0,0,0,.15)}
.ios-add-card div{flex:1;display:flex;flex-direction:column;gap:6px}
.ios-campo{font-size:17px;border-bottom:.5px solid rgba(0,0,0,.15);padding-bottom:6px;position:relative}
.ios-campo i{display:inline-block;width:2px;height:20px;background:#0a7aff;vertical-align:-4px;margin-left:1px;animation:simCursore 1s steps(1) infinite}
@keyframes simCursore{50%{opacity:0}}
.ios-add-card small{font-size:13px;color:#8a8a8e}
.ios-add-riga{justify-content:space-between;font-size:17px;height:52px;padding:0 16px}
.ios-toggle{width:51px;height:31px;border-radius:16px;background:#34c759;position:relative}
.ios-toggle i{position:absolute;right:2px;top:2px;width:27px;height:27px;border-radius:50%;background:#fff;box-shadow:0 2px 4px rgba(0,0,0,.2)}
.ios-add p{font-size:13px;color:#8a8a8e;padding:10px 16px;margin:0;line-height:1.35}

/* ── Android · Chrome ── */
.sim-and .sim-stato{background:#fff;padding:10px 22px 0 24px;height:36px;font-size:14px}
.and-barra{position:absolute;left:0;right:0;top:36px;height:60px;background:#fff;display:flex;align-items:center;padding:0 0 0 12px;z-index:4;box-shadow:0 1px 0 rgba(0,0,0,.06)}
.and-omni{flex:1;height:44px;border-radius:22px;background:#eef1f5;display:flex;align-items:center;gap:10px;padding:0 14px;color:#444}
.and-omni b{font-size:16px;font-weight:400;color:#1f1f1f}
.and-tab{width:24px;height:24px;border:2px solid #444;border-radius:5px;font-size:12px;font-weight:700;display:grid;place-items:center;margin:0 10px 0 16px}
.and-tre{width:40px;text-align:center;font-size:24px;color:#444;line-height:1}
.and-pagina img{margin-top:96px}
.and-gesto{position:absolute;left:50%;bottom:8px;width:110px;height:5px;margin-left:-55px;border-radius:3px;background:#222;z-index:21}
.sim[data-fase="home"] .and-gesto,.sim[data-fase="app"] .and-gesto{background:#fff}
.and-menu{position:absolute;top:40px;right:8px;width:252px;border-radius:16px;background:#fff;box-shadow:0 8px 30px rgba(0,0,0,.25);z-index:6;transform:scale(.9);transform-origin:100% 0;padding-bottom:6px}
.and-menu-ico{height:52px;display:flex;justify-content:space-around;align-items:center;color:#444;border-bottom:1px solid #eee}
.and-menu div:not(.and-menu-ico){height:47px;display:flex;align-items:center;padding:0 20px;font-size:16px;color:#1f1f1f}
.and-menu-home{background:#e8eef9}
.sim[data-fase="menu"] .and-menu{opacity:1;transform:none}
.and-velo{position:absolute;inset:0;background:rgba(0,0,0,.4);z-index:7}
.sim[data-fase="dialogo"] .and-velo{opacity:1}
.and-dialogo{position:absolute;left:28px;right:28px;top:330px;height:230px;border-radius:28px;background:#f3f5fb;z-index:8;padding:24px;transform:scale(.9)}
.sim[data-fase="dialogo"] .and-dialogo{opacity:1;transform:none}
.and-dialogo b,.sam-dialogo b{font-size:22px;font-weight:400;display:block}
.and-dialogo-riga{display:flex;align-items:center;gap:14px;margin-top:22px}
.and-dialogo-riga img{width:48px;height:48px;border-radius:50%}
.and-dialogo-riga div{flex:1;display:flex;flex-direction:column;gap:4px}
.and-campo{font-size:17px;border-bottom:2px solid #1a73e8;padding-bottom:4px}
.and-dialogo-riga small{font-size:13px;color:#5f6368}
.and-dialogo-btn{position:absolute;left:24px;right:24px;bottom:16px;height:24px;display:flex;justify-content:flex-end;gap:34px;align-items:center;font-size:15px;color:#1a73e8;font-weight:600}

/* ── Samsung Internet ── */
.sim-sam .sim-stato{background:#fff;padding:10px 22px 0 24px;height:36px;font-size:14px}
.sam-barra{position:absolute;left:0;right:0;top:36px;height:60px;background:#fff;display:flex;align-items:center;padding:0 14px;z-index:4}
.sam-omni{flex:1;height:44px;border-radius:22px;background:#f1f1f3;display:flex;align-items:center;gap:8px;padding:0 14px;color:#555}
.sam-omni b{flex:1;font-size:16px;font-weight:400;color:#111}
.sam-pagina img{margin-top:96px}
.sam-tool{position:absolute;left:0;right:0;top:778px;height:60px;background:#fff;display:flex;justify-content:space-around;align-items:center;color:#333;z-index:4;border-top:1px solid #eee}
.sam-tab{width:22px;height:22px;border:2px solid #333;border-radius:5px;font-size:11px;font-weight:700;display:grid;place-items:center}
.sam-velo{position:absolute;inset:0;background:rgba(0,0,0,.35);z-index:7}
.sim[data-fase="menu"] .sam-velo,.sim[data-fase="agg"] .sam-velo,.sim[data-fase="dialogo"] .sam-velo{opacity:1}
.sam-menu{position:absolute;left:0;right:0;bottom:0;top:480px;border-radius:26px 26px 0 0;background:#fff;z-index:8;transform:translateY(100%)}
.sim[data-fase="menu"] .sam-menu{opacity:1;transform:none}
.sam-maniglia{display:block;width:36px;height:4px;border-radius:2px;background:#d0d0d4;margin:10px auto}
.sam-griglia{position:absolute;left:0;right:0;top:24px;padding:0 10px;display:grid;grid-template-columns:repeat(4,1fr)}
.sam-griglia div{height:96px;display:flex;flex-direction:column;align-items:center;gap:6px;padding-top:8px;text-align:center}
.sam-griglia span{width:48px;height:48px;border-radius:50%;background:#f1f1f5;display:grid;place-items:center;color:#333}
.sam-griglia small{font-size:12px;line-height:1.2;color:#222;padding:0 2px}
.sam-agg span{background:#e2e4ff;color:#3e4bd8}
.sam-agg-foglio{position:absolute;left:0;right:0;bottom:0;top:532px;border-radius:26px 26px 0 0;background:#fff;z-index:9;transform:translateY(100%);padding:0 24px}
.sim[data-fase="agg"] .sam-agg-foglio{opacity:1;transform:none}
.sam-agg-foglio b{display:block;height:54px;line-height:58px;font-size:18px;font-weight:700}
.sam-agg-foglio div{height:56px;display:flex;align-items:center;font-size:17px;border-bottom:1px solid #f0f0f2}
.sam-agg-home{color:#3e4bd8;font-weight:600}
.sam-dialogo{position:absolute;left:16px;right:16px;bottom:54px;height:220px;border-radius:26px;background:#fff;z-index:10;padding:22px 24px;transform:translateY(30px)}
.sim[data-fase="dialogo"] .sam-dialogo{opacity:1;transform:none}
.sam-dialogo-btn{position:absolute;left:0;right:0;bottom:12px;height:36px;display:flex;align-items:center;font-size:16px;font-weight:700;color:#3e4bd8}
.sam-dialogo-btn span,.sam-dialogo-btn strong{flex:1;text-align:center}
.sam-dialogo-btn i{width:1px;height:20px;background:#ddd}

/* il passo che il dito sta facendo */
.ins-passi li{transition:opacity .25s,transform .25s}
.ins-passi.is-sim li{opacity:.45}
.ins-passi.is-sim li.is-ora{opacity:1;font-weight:700}
.ins-passi.is-sim li.is-ora::before{box-shadow:0 0 0 4px rgba(44,94,63,.2)}