/* iPhone interattivo BATEA (23/09/2026) — iOS 26, iPhone 17 Pro Max (440 x 956 pt).
   Tutte le misure dello schermo sono in unita' del contenitore: 1 pt = 100/440 cqw. */
:root { color-scheme: normal; } /* 27/09: con "dark" Chrome dipingeva l'iframe come un rettangolo nero dentro il sito di luce */
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; min-height: 100%; background: transparent; overflow: hidden; }
body { padding: 6px 0; }
body { display: grid; place-items: center; font-family: -apple-system, 'SF Pro Text', 'Inter Tight', 'Inter', system-ui, sans-serif; -webkit-font-smoothing: antialiased; user-select: none; }

/* ---------- il telefono ---------- */
.iphone { position: relative; width: min(var(--w, 360px), 92vw, 46.5vh); aspect-ratio: 78 / 163.4; border-radius: 15.5% / 7.4%; padding: 1.55%;
  /* 27/09: titanio naturale, chiaro. Il fondatore sul sito di luce: "non mi piace che abbia i bordi neri" */
  background: linear-gradient(90deg, #f2efe9 0%, #c9c5bd 2.4%, #d8d4cc 6%, #d8d4cc 94%, #c9c5bd 97.6%, #f2efe9 100%);
  box-shadow: 0 60px 110px rgba(40,30,20,.35), 0 20px 40px rgba(40,30,20,.22), inset 0 0 0 1px rgba(255,255,255,.7), inset 0 0 0 3px #1a1a1d, inset 0 1px 0 rgba(255,255,255,.8); }
.tasto { position: absolute; width: 1.1%; border-radius: 2px; background: linear-gradient(90deg, #b9b5ad, #e6e3dc 60%, #c4c0b8); cursor: pointer; }
.tasto:active { filter: brightness(1.5); }
.t-azione { left: -.8%; top: 17.5%; height: 4.6%; }
.t-vsu { left: -.8%; top: 25.5%; height: 8.2%; }
.t-vgiu { left: -.8%; top: 35.5%; height: 8.2%; }
.t-lato { right: -.8%; top: 27%; height: 12.5%; background: linear-gradient(270deg, #0b1222, #33456d 60%, #1b2742); }
.t-cam { right: -.6%; top: 58%; height: 7.5%; background: linear-gradient(270deg, #10151f, #5b6b8a 55%, #1c2536); }

.schermo { position: relative; width: 100%; height: 100%; border-radius: 13.8% / 6.5%; overflow: hidden; background: #000; container-type: size; isolation: isolate; touch-action: none; }
.schermo.spento > *:not(.nero) { visibility: hidden; }
.nero { position: absolute; inset: 0; z-index: 90; background: #000; opacity: 0; pointer-events: none; transition: opacity .35s; }
.schermo.spento .nero { opacity: 1; pointer-events: auto; }

/* ---------- sfondo ---------- */
.sfondo { position: absolute; inset: 0; z-index: 0; }
.sfondo svg { position: absolute; inset: 0; width: 100%; height: 100%; }

/* ---------- barra di stato + isola ---------- */
.stato { position: absolute; left: 0; right: 0; top: 0; height: 12.3cqw; z-index: 66; display: flex; align-items: center; justify-content: space-between; padding: 0 7cqw 0 11.5cqw; color: #fff;
  font: 600 3.95cqw/1 -apple-system, 'SF Pro Text', 'Inter Tight', sans-serif; letter-spacing: -.01em; pointer-events: none; transition: color .3s; }
.stato.scura { color: #000; }
.stato .sx { display: flex; align-items: center; gap: 1.2cqw; min-width: 16cqw; }
.stato .oper { display: none; } .stato.blocco .ora-s { display: none; } .stato.blocco .oper { display: inline; font-size: 3.6cqw; }
.stato .ico { display: flex; align-items: center; gap: 1.3cqw; }
.stato svg { height: 2.75cqw; width: auto; fill: currentColor; }
.stato .batt { height: 2.95cqw; }
.stato .aereo { display: none; } .stato.aereo-on .aereo { display: block; } .stato.aereo-on .rete, .stato.wifi-off .wifi { display: none; }
.isola { position: absolute; left: 50%; top: 2.55cqw; width: 28.2cqw; height: 8.3cqw; margin-left: -14.1cqw; border-radius: 99px; background: #000; z-index: 70; cursor: pointer; overflow: hidden;
  transition: width .5s cubic-bezier(.32,.72,0,1), height .5s cubic-bezier(.32,.72,0,1), margin-left .5s cubic-bezier(.32,.72,0,1), border-radius .5s, top .5s; }
.isola.larga { width: 88cqw; margin-left: -44cqw; height: 18cqw; border-radius: 9cqw; top: 2.2cqw; }
.isola.media { width: 44cqw; margin-left: -22cqw; }
.isola .attivita { position: absolute; inset: 0; display: flex; align-items: center; gap: 3cqw; padding: 0 5cqw; color: #fff; opacity: 0; transition: opacity .25s; }
.isola.larga .attivita, .isola.media .attivita { opacity: 1; transition-delay: .18s; }
.attivita .a-ico { width: 9cqw; height: 9cqw; border-radius: 2.4cqw; flex-shrink: 0; display: grid; place-items: center; }
.attivita b { display: block; font-size: 3.4cqw; } .attivita small { font-size: 2.9cqw; color: #aeaeb2; }
.isola.media .attivita { padding: 0 3cqw; } .isola.media .attivita .a-ico { width: 5.4cqw; height: 5.4cqw; border-radius: 1.4cqw; } .isola.media .attivita .testi { display: none; }
.attivita .onda { margin-left: auto; display: flex; gap: .8cqw; align-items: center; }
.attivita .onda i { width: .9cqw; height: 3cqw; border-radius: 1cqw; background: #30d158; animation: onda 1s ease-in-out infinite; }
.attivita .onda i:nth-child(2) { animation-delay: .15s; } .attivita .onda i:nth-child(3) { animation-delay: .3s; }
@keyframes onda { 50% { transform: scaleY(.35); } }

/* ---------- icone ---------- */
.icona { position: relative; width: 14.55cqw; height: 14.55cqw; border-radius: 3.35cqw; display: grid; place-items: center; overflow: hidden;
  box-shadow: inset 0 .35cqw .5cqw rgba(255,255,255,.32), inset 0 -.5cqw 1cqw rgba(0,0,0,.16), 0 .5cqw 1.4cqw rgba(0,0,0,.3); }
.icona::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(160deg, rgba(255,255,255,.28), rgba(255,255,255,0) 40%); pointer-events: none; }
.icona > svg { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; }
.icona .bm { width: 50%; height: auto; }
.badge { position: absolute; right: -1.6cqw; top: -1.6cqw; min-width: 5.4cqw; height: 5.4cqw; padding: 0 1.4cqw; border-radius: 99px; background: #ff3b30; color: #fff; font: 600 3.2cqw/5.4cqw -apple-system, 'Inter Tight', sans-serif; text-align: center; z-index: 3; box-shadow: 0 0 0 .3cqw rgba(0,0,0,.15); }

/* ---------- home ---------- */
.home { position: absolute; inset: 0; z-index: 10; will-change: transform, filter; }
.pagine { position: absolute; left: 0; right: 0; top: 0; bottom: 30cqw; display: flex; transition: transform .45s cubic-bezier(.32,.72,0,1); }
.pagina { flex: 0 0 100%; position: relative; }
.widget { position: absolute; border-radius: 5.2cqw; overflow: visible; color: #fff; cursor: pointer;
  background: rgba(28,28,34,.46); backdrop-filter: blur(22px) saturate(1.7); -webkit-backdrop-filter: blur(22px) saturate(1.7);
  box-shadow: inset 0 0 0 .5px rgba(255,255,255,.22), inset 0 1px 0 rgba(255,255,255,.14); }
.w-nome { position: absolute; left: 0; right: 0; bottom: -5.2cqw; text-align: center; font-size: 2.65cqw; color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.6); }
.griglia { position: absolute; left: 6.6cqw; right: 6.6cqw; display: grid; grid-template-columns: repeat(4, 14.55cqw); justify-content: space-between; row-gap: 5.6cqw; }
.app { display: flex; flex-direction: column; align-items: center; gap: 1.5cqw; cursor: pointer; }
.app small { font: 500 2.65cqw/1.15 -apple-system, 'SF Pro Text', 'Inter Tight', sans-serif; color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.6); white-space: nowrap; letter-spacing: -.005em; }
.app:active .icona { filter: brightness(.7); }
.punti { position: absolute; left: 50%; bottom: 38cqw; transform: translateX(-50%); display: flex; gap: 1.6cqw; padding: 1.4cqw 2.4cqw; border-radius: 99px; background: rgba(90,90,96,.35); backdrop-filter: blur(14px); }
.punti i { width: 1.6cqw; height: 1.6cqw; border-radius: 50%; background: rgba(255,255,255,.4); } .punti i.su { background: #fff; }
.cerca { position: absolute; left: 50%; bottom: 30.5cqw; transform: translateX(-50%); display: flex; align-items: center; gap: 1.2cqw; padding: 1.7cqw 3.6cqw; border-radius: 99px; color: #fff; cursor: pointer;
  font: 600 3.1cqw -apple-system, 'Inter Tight', sans-serif; background: rgba(90,90,96,.42); backdrop-filter: blur(16px) saturate(1.5); box-shadow: inset 0 0 0 .5px rgba(255,255,255,.22), inset 0 1px 0 rgba(255,255,255,.18); }
.cerca svg { width: 3cqw; height: 3cqw; }
.dock { position: absolute; left: 3.2cqw; right: 3.2cqw; bottom: 3.6cqw; height: 22cqw; padding: 0 3.4cqw; border-radius: 9cqw; display: flex; align-items: center; justify-content: space-between;
  background: rgba(90,90,96,.36); backdrop-filter: blur(22px) saturate(1.7); -webkit-backdrop-filter: blur(22px) saturate(1.7); box-shadow: inset 0 0 0 .5px rgba(255,255,255,.22), inset 0 1px 0 rgba(255,255,255,.2); }
.dock .app small { display: none; }

/* ---------- barretta home (gesto) ---------- */
.barra { position: absolute; left: 0; right: 0; bottom: 0; height: 7cqw; z-index: 55; cursor: grab; }
.barra i { position: absolute; left: 50%; bottom: 1.8cqw; width: 31cqw; height: 1.15cqw; margin-left: -15.5cqw; border-radius: 1cqw; background: rgba(255,255,255,.92); transition: background .3s; }
.barra.scura i { background: rgba(0,0,0,.85); }

/* ---------- app aperta ---------- */
.finestra { position: absolute; inset: 0; z-index: 30; overflow: hidden; border-radius: 13.8% / 6.5%; transform-origin: 0 0; will-change: transform, border-radius; display: none; }
.finestra.su { display: block; }
.finestra .copri { position: absolute; inset: 0; z-index: 40; display: grid; place-items: center; pointer-events: none; }
.finestra .copri .icona { width: 36cqw; height: 36cqw; border-radius: 8cqw; box-shadow: none; }
.vista { position: absolute; inset: 0; overflow: hidden; }

/* ---------- blocco schermo ---------- */
.blocco { position: absolute; inset: 0; z-index: 50; will-change: transform; touch-action: none; }
.blocco .sfondo { z-index: -1; }
.lk-data { position: absolute; left: 0; right: 0; top: 13.2cqw; text-align: center; color: #e9d5ff; font: 600 5.2cqw -apple-system, 'SF Pro Display', 'Inter Tight', sans-serif; letter-spacing: -.01em; }
.lk-ora { position: absolute; left: 0; right: 0; top: 17.6cqw; text-align: center; font: 600 34cqw/1 'Oswald', 'Inter Tight', sans-serif; letter-spacing: -.02em; transform: scaleY(1.55); transform-origin: top center;
  background: linear-gradient(180deg, rgba(250,245,255,.98), rgba(216,180,254,.9)); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 3cqw rgba(168,85,247,.3)); }
.lk-notifiche { position: absolute; left: 3.2cqw; right: 3.2cqw; bottom: 34cqw; display: flex; flex-direction: column; gap: 1.8cqw; }
.notifica { display: grid; grid-template-columns: 9.4cqw 1fr; gap: 2.6cqw; align-items: center; padding: 3cqw 3.4cqw 3cqw 3cqw; border-radius: 5.6cqw; color: #fff; cursor: pointer;
  background: rgba(58,56,66,.55); backdrop-filter: blur(22px) saturate(1.6); -webkit-backdrop-filter: blur(22px) saturate(1.6); box-shadow: inset 0 0 0 .5px rgba(255,255,255,.16); }
.notifica .icona { width: 9.4cqw; height: 9.4cqw; border-radius: 2.2cqw; box-shadow: none; }
.notifica .riga { display: flex; justify-content: space-between; gap: 2cqw; align-items: baseline; }
.notifica b { font-size: 3.4cqw; font-weight: 600; } .notifica em { font-style: normal; font-size: 2.9cqw; color: rgba(255,255,255,.55); }
.notifica p { margin: .4cqw 0 0; font-size: 3.2cqw; line-height: 1.3; color: rgba(255,255,255,.9); }
.lk-tasti { position: absolute; left: 11cqw; right: 11cqw; bottom: 9cqw; display: flex; justify-content: space-between; }
.lk-tasti button { width: 11.4cqw; height: 11.4cqw; border-radius: 50%; border: 0; display: grid; place-items: center; color: #fff; cursor: pointer; transition: transform .2s, background .2s;
  background: rgba(30,40,60,.5); backdrop-filter: blur(14px) saturate(1.5); box-shadow: inset 0 0 0 .5px rgba(255,255,255,.22); }
.lk-tasti button svg { width: 5cqw; height: 5cqw; } .lk-tasti button:active { transform: scale(1.18); background: rgba(255,255,255,.35); }
.lk-tasti button.acceso { background: #fff; color: #000; }
.lk-invito { position: absolute; left: 0; right: 0; bottom: 4.6cqw; text-align: center; font-size: 3.1cqw; color: rgba(255,255,255,.7); animation: invito 2.4s ease-in-out infinite; }
@keyframes invito { 50% { opacity: .35; } }

/* ---------- centro di controllo ---------- */
.cc { position: absolute; inset: 0; z-index: 65; padding: 16cqw 6.4cqw 0; display: none; background: rgba(8,10,16,.35); backdrop-filter: blur(0px); -webkit-backdrop-filter: blur(0px); }
.cc.su { display: block; }
.cc-griglia { display: grid; grid-template-columns: repeat(4, 1fr); gap: 3.4cqw; transform-origin: top right; }
.mod { border-radius: 6cqw; background: rgba(40,40,46,.55); backdrop-filter: blur(18px) saturate(1.6); -webkit-backdrop-filter: blur(18px) saturate(1.6); box-shadow: inset 0 0 0 .5px rgba(255,255,255,.18); color: #fff; }
.mod.q { aspect-ratio: 1; display: grid; place-items: center; cursor: pointer; }
.mod.q svg { width: 42%; height: 42%; }
.conn { grid-column: span 2; grid-row: span 2; display: grid; grid-template-columns: 1fr 1fr; gap: 3cqw; padding: 4cqw; aspect-ratio: 1; }
.tog { width: 100%; aspect-ratio: 1; border-radius: 50%; border: 0; display: grid; place-items: center; cursor: pointer; background: rgba(255,255,255,.14); color: #fff; transition: background .25s; }
.tog svg { width: 48%; height: 48%; }
.tog.on.arancio { background: #ff9f0a; } .tog.on.verde { background: #30d158; } .tog.on.blu { background: #0a84ff; }
.musica { grid-column: span 2; grid-row: span 2; aspect-ratio: 1; padding: 4.4cqw; display: flex; flex-direction: column; }
.musica .cop { width: 12cqw; height: 12cqw; border-radius: 2.6cqw; background: linear-gradient(135deg, #a855f7, #1d4ed8); }
.musica b { font-size: 3.4cqw; margin-top: 2.4cqw; } .musica small { font-size: 3cqw; color: #aeaeb2; }
.musica .ctl { margin-top: auto; display: flex; justify-content: space-between; align-items: center; } .musica .ctl svg { width: 6cqw; height: 6cqw; cursor: pointer; }
.cursore { grid-row: span 2; aspect-ratio: .5; position: relative; overflow: hidden; border-radius: 6cqw; cursor: ns-resize; touch-action: none; }
.cursore .liv { position: absolute; left: 0; right: 0; bottom: 0; height: 60%; background: #fff; }
.cursore svg { position: absolute; left: 50%; bottom: 4.5cqw; width: 6cqw; height: 6cqw; margin-left: -3cqw; color: #8e8e93; z-index: 2; }
.mod.q.acceso { background: #fff; color: #000; }
.cc-nota { text-align: center; color: rgba(255,255,255,.5); font-size: 2.9cqw; margin-top: 5cqw; }

/* ---------- toast volume ---------- */
.volume { position: absolute; left: 2.6cqw; top: 28cqw; width: 3.4cqw; height: 34cqw; border-radius: 99px; background: rgba(60,60,66,.6); backdrop-filter: blur(14px); overflow: hidden; z-index: 80; opacity: 0; transition: opacity .3s; }
.volume i { position: absolute; left: 0; right: 0; bottom: 0; background: #fff; transition: height .2s; }
.volume.su { opacity: 1; }

/* ---------- banner notifica ---------- */
.banner { position: absolute; left: 2.6cqw; right: 2.6cqw; top: 12.4cqw; z-index: 75; opacity: 0; transform: translateY(-30cqw); pointer-events: none; }
.banner.su { pointer-events: auto; }

/* ---------- elementi UIKit ---------- */
.nav { position: absolute; left: 0; right: 0; top: 0; height: 26cqw; padding: 13cqw 4.6cqw 0; z-index: 5; display: flex; align-items: center; justify-content: space-between; }
.nav .indietro { display: flex; align-items: center; gap: .6cqw; color: var(--tinta, #0a84ff); font-size: 3.9cqw; cursor: pointer; background: none; border: 0; padding: 0; }
.nav .indietro svg { width: 3.4cqw; height: 5.4cqw; }
.titolone { font: 700 7.7cqw/1.1 -apple-system, 'SF Pro Display', 'Inter Tight', sans-serif; letter-spacing: -.02em; margin: 0 0 3cqw; }
.scorri { position: absolute; inset: 0; overflow-y: auto; overflow-x: hidden; padding: 26cqw 4.6cqw 32cqw; scrollbar-width: none; overscroll-behavior: contain; touch-action: pan-y; }
.scorri::-webkit-scrollbar { display: none; }
.gruppo { border-radius: 5.8cqw; overflow: hidden; margin-bottom: 7cqw; }
.voce { display: flex; align-items: center; gap: 3.2cqw; padding: 2.6cqw 4cqw; min-height: 12cqw; position: relative; cursor: pointer; font-size: 3.9cqw; }
.voce + .voce::before { content: ""; position: absolute; top: 0; left: 15.4cqw; right: 0; height: .5px; background: rgba(128,128,128,.3); }
.voce .qi { width: 7.2cqw; height: 7.2cqw; border-radius: 1.7cqw; display: grid; place-items: center; flex-shrink: 0; }
.voce .qi svg { width: 72%; height: 72%; }
.voce .val { margin-left: auto; color: #8e8e93; display: flex; align-items: center; gap: 1.4cqw; font-size: 3.7cqw; }
.voce .chev { width: 2.2cqw; height: 3.6cqw; color: #8e8e93; opacity: .7; }
.interr { width: 11.6cqw; height: 7.1cqw; border-radius: 99px; background: rgba(120,120,128,.32); position: relative; transition: background .25s; flex-shrink: 0; margin-left: auto; }
.interr::after { content: ""; position: absolute; left: .45cqw; top: .45cqw; width: 6.2cqw; height: 6.2cqw; border-radius: 50%; background: #fff; box-shadow: 0 .6cqw 1.6cqw rgba(0,0,0,.25); transition: transform .3s cubic-bezier(.32,.72,0,1); }
.interr.on { background: #34c759; } .interr.on::after { transform: translateX(4.5cqw); }
.etich { font-size: 3.1cqw; color: #8e8e93; text-transform: uppercase; margin: 0 4cqw 1.6cqw; letter-spacing: .01em; }
.schede { position: absolute; left: 4cqw; right: 4cqw; bottom: 6.6cqw; height: 15.6cqw; border-radius: 99px; z-index: 6; display: flex; justify-content: space-around; align-items: center; padding: 0 2cqw;
  background: rgba(40,40,46,.55); backdrop-filter: blur(22px) saturate(1.7); -webkit-backdrop-filter: blur(22px) saturate(1.7); box-shadow: inset 0 0 0 .5px rgba(255,255,255,.2), 0 2cqw 6cqw rgba(0,0,0,.3); }
.schede.chiare { background: rgba(250,250,252,.72); box-shadow: inset 0 0 0 .5px rgba(0,0,0,.08), 0 2cqw 6cqw rgba(0,0,0,.12); }
.scheda { flex: 1; height: 12cqw; border-radius: 99px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .6cqw; cursor: pointer; color: #8e8e93; font-size: 2.3cqw; font-weight: 600; background: none; border: 0; transition: background .25s, color .25s; }
.scheda svg { width: 6.2cqw; height: 6.2cqw; }
.scheda.su { color: var(--tinta, #0a84ff); background: rgba(128,128,128,.18); }
.piano { position: absolute; inset: 0; transition: transform .45s cubic-bezier(.32,.72,0,1); }
.piano.sotto { transform: translateX(-28%); filter: brightness(.9); }
.piano.fuori { transform: translateX(100%); }
.bottone { display: block; width: 100%; border: 0; border-radius: 99px; padding: 3.6cqw; font: 600 3.9cqw -apple-system, 'Inter Tight', sans-serif; cursor: pointer; background: var(--tinta, #0a84ff); color: #fff; text-align: center; text-decoration: none; }
.scheda-prod { border-radius: 6cqw; overflow: hidden; margin-bottom: 3.4cqw; cursor: pointer; position: relative; }
.scheda-prod:active { transform: scale(.98); }

/* feedback al tocco (23/09 sera) */
@keyframes gira { to { transform: rotate(360deg); } }
.voce:active, .scheda-prod:active, .mod.q:active, .tog:active, .notifica:active { transform: scale(.975); }
.voce, .scheda-prod, .mod.q, .tog, .notifica, .bottone, .widget { transition: transform .18s cubic-bezier(.32,.72,0,1); }
.bottone:active { transform: scale(.97); filter: brightness(1.08); }
.widget:active { transform: scale(.965); }
.app .icona { transition: transform .18s cubic-bezier(.32,.72,0,1), filter .18s; }
.app:active .icona { transform: scale(.9); }

/* filmato dimostrativo */
.tag-auto { position: absolute; left: 50%; bottom: -34px; transform: translateX(-50%); white-space: nowrap; padding: 7px 14px; border-radius: 999px; font: 500 12px 'Inter Tight', -apple-system, sans-serif; color: #c4b5fd;
  background: rgba(168,85,247,.12); box-shadow: inset 0 0 0 1px rgba(168,85,247,.3); }
.tag-auto.tuo { color: #a7f3d0; background: rgba(34,197,94,.14); box-shadow: inset 0 0 0 1px rgba(34,197,94,.35); }
.dito-auto { position: absolute; z-index: 88; width: 46px; height: 46px; margin: 0; border-radius: 50%; background: rgba(255,255,255,.45); box-shadow: 0 0 0 2px rgba(255,255,255,.6); pointer-events: none; }