/* Home immersiva: canvas fisso dietro, testo vero che scorre sopra.
   Senza WebGL (o con "riduci movimento") le stesse sezioni mostrano immagini ferme della scena. */
.im { --cap-ink: #fffdf8; --cap-ink-2: #e9e4d8; }
.im main { position: relative; }
.im .im-gl { position: fixed; left: 0; top: 0; width: 100%; height: 100vh; height: 100lvh; z-index: 0; pointer-events: none; background: #e9e2d6; overflow: hidden; }
.im .im-poster img, .im #im-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.im .im-poster img { object-fit: cover; object-position: 50% 0; }
.im #im-canvas { opacity: 0; transition: opacity .9s ease; }
.im-ready .im #im-canvas, .im-ready .im #im-canvas { opacity: 1; }
.im-ready .im .im-poster { opacity: 0; transition: opacity .9s ease .2s; }
.im .im-veil { position: absolute; inset: 0; background: #0b0a09; opacity: 0; }
.im .im-scrim { position: absolute; inset: 0; opacity: 0;
  background: linear-gradient(90deg, rgba(10,14,12,.62) 0%, rgba(10,14,12,.42) 34%, rgba(10,14,12,0) 58%); }
html:not(.im-js) .im .im-gl { display: none; }

.im .im-volo, .im .im-fiamma { position: relative; z-index: 1; }
.im main > .w-services, .im main > .w-map, .im main > .w-steps, .im main > .w-final { position: relative; z-index: 2; background: var(--paper); }
.im main > .w-map { background: var(--forest); }
.im footer { position: relative; z-index: 2; }
/* pagine dei servizi: tutto quello che viene dopo la scena copre il canvas */
.im .im-rest { position: relative; z-index: 2; background: var(--bg, #f6f6f3); }
.im .im-rest:focus { outline: none; }
.im-hero .crumbs { margin: 0; }
.im .w-services:focus { outline: none; }

/* ---------- scene a scorrimento ---------- */
.im-slot { position: relative; min-height: 100vh; min-height: 100lvh; display: flex; align-items: center; }
.im-slot > .wrap { width: 100%; }
.im-tail { height: 15vh; height: 15lvh; }
.im-cap { min-height: 70vh; min-height: 70lvh; }
.im-cap-in { max-width: 30rem; display: grid; gap: 16px; color: var(--cap-ink); text-shadow: 0 1px 18px rgba(0,0,0,.28); }
.im-cap-in h2 { margin: 0; font-family: var(--serif); font-weight: 600; font-size: clamp(32px, 3.6vw, 52px); line-height: 1.08; letter-spacing: -.015em; }
.im-cap-in h2 em { color: #ffd65c; font-style: italic; }
.im-cap-in p { margin: 0; color: var(--cap-ink-2); font-size: 18px; max-width: 42ch; }
.im .im-k { margin: 0; display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: #fff3cf; }
.im .im-k::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--sun); box-shadow: 0 0 12px 2px rgba(245,189,0,.6); flex: none; }
.im .im-src { font-size: 13px; color: #cfd4cc; }
.im-big { margin: 0 !important; font-family: var(--serif); font-weight: 600; font-size: clamp(64px, 8vw, 120px) !important; line-height: .95; letter-spacing: -.03em; color: #fff !important; font-variant-numeric: tabular-nums; }
.im-big small { display: block; margin-top: 8px; font-family: var(--font); font-size: 18px; font-weight: 500; letter-spacing: 0; color: var(--cap-ink-2); }
.im-link { justify-self: start; display: inline-flex; align-items: center; gap: 8px; color: #fff; font-weight: 600; text-decoration: underline; text-decoration-color: rgba(255,214,92,.7); text-underline-offset: 5px; padding: 8px 0; }
.im-link:hover { text-decoration-color: #ffd65c; }
.im-cap-in .btn { justify-self: start; margin-top: 4px; text-shadow: none; }

/* ---------- apertura ---------- */
.im-hero { align-items: flex-start; padding-top: 128px; }
.im-hero-in { display: grid; gap: 22px; max-width: 40rem; }
.im .im-hero .w-title { font-size: clamp(42px, 5.6vw, 84px); line-height: 1.03; margin: 0; }
.im .im-hero .w-title em { color: var(--forest); }
.im-intro { margin: 0; max-width: 40ch; font-size: clamp(17px, 1.5vw, 20px); color: #2f3a33; }
.im-skip { display: inline-flex; align-items: center; gap: 8px; padding: 15px 8px; color: var(--ink); font-weight: 600; text-decoration: underline; text-underline-offset: 4px; text-decoration-color: rgba(23,32,27,.35); }
.im-skip:hover { text-decoration-color: currentColor; }
.im-skip:focus-visible { outline: 3px solid #2f7bd8; outline-offset: 2px; border-radius: 6px; }
.im-scroll { position: absolute; left: 50%; bottom: 28px; transform: translateX(-50%); margin: 0; display: grid; justify-items: center; gap: 10px; font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: #fff; text-shadow: 0 1px 10px rgba(0,0,0,.4); white-space: nowrap; }
.im-scroll span { width: 1px; height: 42px; background: linear-gradient(#fff, rgba(255,255,255,0)); transform-origin: top; animation: im-drip 2.2s cubic-bezier(.6,0,.3,1) infinite; }
@keyframes im-drip { 0% { transform: scaleY(0); opacity: 1; } 60% { transform: scaleY(1); opacity: 1; } 100% { transform: scaleY(1); opacity: 0; } }
/* velo chiaro dietro il titolo, solo all'inizio: il cielo dell'alba può essere chiaro o meno */
.im-js .im-hero::before { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: -1;
  background: radial-gradient(70% 75% at 22% 38%, rgba(243,240,232,.82) 0%, rgba(243,240,232,.6) 45%, rgba(243,240,232,0) 100%); }
@media (max-width: 860px) {
  .im-js .im-hero::before { bottom: auto; height: 78%; background: linear-gradient(180deg, rgba(243,240,232,.8) 0%, rgba(243,240,232,.6) 55%, rgba(243,240,232,0) 100%); }
}

/* apertura scura (Luce e gas): testo chiaro sopra la stanza in penombra */
.im-hero-dark .im-hero-in { color: var(--cap-ink); text-shadow: 0 1px 18px rgba(0,0,0,.35); }
.im .im-hero-dark .w-title { color: #fff; }
.im .im-hero-dark .w-title em { color: #ffd65c; }
.im .im-hero-dark .w-label { color: #fff3cf; }
.im-hero-dark .im-intro { color: var(--cap-ink-2); }
.im-hero-dark .crumbs, .im-hero-dark .crumbs a { color: #d9d4c8; }
.im-hero-dark .im-skip { color: #fff; text-decoration-color: rgba(255,255,255,.45); }
.im-js .im-hero-dark::before { background: radial-gradient(70% 75% at 22% 38%, rgba(11,10,9,.6) 0%, rgba(11,10,9,.35) 50%, rgba(11,10,9,0) 100%); }
@media (max-width: 860px) {
  .im-js .im-hero-dark::before { background: linear-gradient(180deg, rgba(11,10,9,.75) 0%, rgba(11,10,9,.5) 55%, rgba(11,10,9,0) 100%); }
}
html:not(.im-js) .im-hero-dark { background-color: #0b0a09; }
html:not(.im-js) .im-hero-dark::after { background: linear-gradient(180deg, rgba(11,10,9,.85) 0%, rgba(11,10,9,.6) 50%, rgba(11,10,9,0) 80%); }

/* ---------- telefono ---------- */
@media (max-width: 860px) {
  .im .im-scrim { background: linear-gradient(0deg, rgba(10,14,12,.78) 0%, rgba(10,14,12,.6) 36%, rgba(10,14,12,0) 62%); }
  .im-slot { align-items: flex-end; padding-bottom: 9vh; }
  .im-hero { align-items: flex-start; padding: 84px 0 0; }
  .im-hero-in { gap: 16px; }
  .im .im-hero .w-title { font-size: clamp(36px, 10.4vw, 46px); }
  .im-intro { font-size: 17px; }
  .im-hero .btns { gap: 4px 12px; align-items: center; }
  .im-cap-in { gap: 12px; }
  .im-cap-in h2 { font-size: clamp(29px, 8vw, 36px); }
  .im-cap-in p { font-size: 16.5px; }
  .im-big small { font-size: 16px; }
  .im-scroll { bottom: 18px; }
}
@media (max-width: 860px) and (max-height: 700px) {
  .im-intro { display: none; }
}

/* ---------- versione ferma: niente WebGL, meno movimento o JavaScript spento ----------
   (la classe im-js la mette uno script nell'intestazione, prima del disegno: così in versione animata
   queste immagini non vengono mai scaricate) */
html:not(.im-js) .im-slot { min-height: 0; padding-block: 140px 96px; background: #22231f center / cover no-repeat; isolation: isolate; }
html:not(.im-js) .im-slot::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(10,14,12,.66), rgba(10,14,12,.25) 60%, rgba(10,14,12,0)); }
html:not(.im-js) .im-hero { padding-block: 132px 34vh; background-color: #e9e2d6; background-position: 50% 100%; }
html:not(.im-js) .im-hero::after { background: linear-gradient(180deg, rgba(243,240,232,.9) 0%, rgba(243,240,232,.65) 50%, rgba(243,240,232,0) 80%); }
html:not(.im-js) .im-tail, html:not(.im-js) .im-scroll { display: none; }
html:not(.im-js) .im-bg-alba { background-image: url(im-alba-d.webp); }
html:not(.im-js) .im-bg-sole { background-image: url(im-sole-d.webp); }
html:not(.im-js) .im-bg-inverter { background-image: url(im-inverter-d.webp); }
html:not(.im-js) .im-bg-batteria { background-image: url(im-batteria-d.webp); }
html:not(.im-js) .im-bg-buio { background-image: url(im-buio-d.webp); }
html:not(.im-js) .im-bg-portata { background-image: url(im-portata-d.webp); }
html:not(.im-js) .im-bg-tetto { background-image: url(im-tetto-d.webp); }
html:not(.im-js) .im-bg-sera { background-image: url(im-sera-d.webp); }
html:not(.im-js) .im-bg-luce { background-image: url(im-luce-d.webp); }
html:not(.im-js) .im-bg-fiamma { background-image: url(im-fiamma-d.webp); }
html:not(.im-js) .im-bg-rame { background-image: url(im-rame-d.webp); }
html:not(.im-js) .im-bg-acqua { background-image: url(im-acqua-d.webp); }
@media (max-width: 700px) {
  html:not(.im-js) .im-slot { padding-block: 52vh 48px; background-position: 50% 0; }
  html:not(.im-js) .im-slot::after { background: linear-gradient(0deg, rgba(10,14,12,.85) 0%, rgba(10,14,12,.7) 45%, rgba(10,14,12,0) 75%); }
  html:not(.im-js) .im-hero { padding-block: 96px 46vh; background-position: 50% 100%; }
  html:not(.im-js) .im-hero::after { background: linear-gradient(180deg, rgba(243,240,232,.92) 0%, rgba(243,240,232,.75) 50%, rgba(243,240,232,0) 72%); }
  html:not(.im-js) .im-bg-alba { background-image: url(im-alba-m.webp); }
  html:not(.im-js) .im-bg-sole { background-image: url(im-sole-m.webp); }
  html:not(.im-js) .im-bg-inverter { background-image: url(im-inverter-m.webp); }
  html:not(.im-js) .im-bg-batteria { background-image: url(im-batteria-m.webp); }
  html:not(.im-js) .im-bg-buio { background-image: url(im-buio-m.webp); }
  html:not(.im-js) .im-bg-portata { background-image: url(im-portata-m.webp); }
  html:not(.im-js) .im-bg-tetto { background-image: url(im-tetto-m.webp); }
  html:not(.im-js) .im-bg-sera { background-image: url(im-sera-m.webp); }
  html:not(.im-js) .im-bg-luce { background-image: url(im-luce-m.webp); }
  html:not(.im-js) .im-bg-fiamma { background-image: url(im-fiamma-m.webp); }
  html:not(.im-js) .im-bg-rame { background-image: url(im-rame-m.webp); }
  html:not(.im-js) .im-bg-acqua { background-image: url(im-acqua-m.webp); }
}
@media (prefers-reduced-motion: reduce) { .im-scroll span { animation: none; } }
/* un link raggiunto da tastiera resta sempre leggibile */
.im-cap-in:focus-within { opacity: 1 !important; }

/* ---------- Luce e gas, prima scena: la lampadina e l'interruttore ---------- */
.lux { position: relative; z-index: 2; min-height: 100vh; min-height: 100svh; display: flex; align-items: center; overflow: hidden;
  background: #0d0b0a; color: var(--cap-ink); padding: 128px 0 96px; isolation: isolate; }
.lux-gl { position: absolute; inset: 0; width: 100%; height: 100%; display: block; z-index: -2; opacity: 0; transition: opacity .6s ease; }
.lux-ready .lux-gl { opacity: 1; }
.lux-bulb { position: absolute; left: 66%; top: 44%; width: 1px; height: 36vh; height: 36svh; transform: translate(-50%, -50%); pointer-events: none; }
/* velo scuro dietro al testo, così resta leggibile anche a luce accesa */
.lux::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(90deg, rgba(11,10,9,.72) 0%, rgba(11,10,9,.45) 38%, rgba(11,10,9,0) 60%); }
.lux > .wrap { width: 100%; }
.lux-in { display: grid; gap: 22px; max-width: 36rem; text-shadow: 0 1px 18px rgba(0,0,0,.35); }
.lux .w-label { color: #fff3cf; }
.lux .w-title { font-size: clamp(42px, 5.2vw, 80px); line-height: 1.03; margin: 0; color: #fff; }
.lux .w-title em { color: #ffd65c; }
.lux .im-intro { color: var(--cap-ink-2); }
.lux .crumbs, .lux .crumbs a { color: #d9d4c8; margin: 0; }
.lux .im-skip { color: #fff; text-decoration-color: rgba(255,255,255,.45); }
.lux-note { margin: 0; font-size: 17px; color: #e9e4d8; min-height: 3.2em; max-width: 40ch; }
.lux-note em { color: #ffd65c; font-style: italic; }
.lux-note-on { display: none; }
.lux-on .lux-note-on { display: inline; animation: lux-in .6s ease both; }
.lux-on .lux-note-off { display: none; }
@keyframes lux-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* l'interruttore: placca color avorio a muro, tasto basculante, spia di cortesia che si vede al buio */
.lux-plate { position: absolute; left: 84%; top: 60%; transform: translate(-50%, -50%); display: grid; justify-items: center; gap: 14px; }
.lux-switch { position: relative; width: 66px; height: 104px; padding: 0; border: 0; border-radius: 12px; cursor: pointer;
  background: linear-gradient(160deg, #f4f0e6, #ddd6c6); filter: brightness(.3);
  box-shadow: 0 1px 0 rgba(255,255,255,.5) inset, 0 -1px 0 rgba(0,0,0,.18) inset, 0 6px 14px rgba(0,0,0,.45), 0 1px 2px rgba(0,0,0,.4);
  transition: filter .35s ease; -webkit-tap-highlight-color: transparent; }
.lux-switch::before { content: ""; position: absolute; inset: -14px; border-radius: 20px; border: 1.5px solid rgba(255,214,92,.55); animation: lux-ring 2.4s ease-out infinite; pointer-events: none; }
.lux-on .lux-switch::before { animation: none; opacity: 0; }
@keyframes lux-ring { 0% { transform: scale(.92); opacity: .9; } 80%, 100% { transform: scale(1.12); opacity: 0; } }
.lux-key { position: absolute; left: 11px; right: 11px; top: 12px; bottom: 12px; border-radius: 7px;
  background: linear-gradient(180deg, #e3dccb 0%, #f7f3ea 48%, #fbf8f1 52%, #d9d1bf 100%);
  box-shadow: 0 0 0 1px rgba(0,0,0,.12), 0 3px 0 -1px rgba(0,0,0,.18); transition: background .12s ease, box-shadow .12s ease; }
.lux-on .lux-key { background: linear-gradient(0deg, #e3dccb 0%, #f7f3ea 48%, #fbf8f1 52%, #d9d1bf 100%); box-shadow: 0 0 0 1px rgba(0,0,0,.12), 0 -3px 0 -1px rgba(0,0,0,.18); }
.lux-led { position: absolute; left: 50%; bottom: 9px; width: 9px; height: 3px; margin-left: -4.5px; border-radius: 2px; background: #ffb340;
  box-shadow: 0 0 6px 2px rgba(255,170,60,.9); filter: brightness(3.2); transition: opacity .2s; }
.lux-on .lux-led { opacity: .15; box-shadow: none; filter: none; }
.lux-on .lux-switch { filter: brightness(.95); }
.lux-switch:focus-visible { outline: 3px solid #ffd65c; outline-offset: 6px; }
.lux-hint { font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: #fff3cf; text-shadow: 0 1px 10px rgba(0,0,0,.5); white-space: nowrap; }
.lux .im-scroll { bottom: 24px; }

/* versione ferma (niente WebGL o meno movimento): immagine della lampadina accesa */
.lux-static, html:not(.im-js) .lux { background: #0d0b0a url(im-luce-d.webp) 70% 50% / cover no-repeat; }
.lux-static .lux-gl, html:not(.im-js) .lux-gl { display: none; }

@media (max-width: 860px) {
  .lux { align-items: flex-end; padding: 0 0 72px; min-height: 100svh; }
  .lux::before { background: linear-gradient(0deg, rgba(11,10,9,.85) 0%, rgba(11,10,9,.62) 42%, rgba(11,10,9,0) 64%); }
  .lux-bulb { left: 42%; top: 24%; height: 22vh; height: 22svh; }
  .lux .crumbs, .lux-note-off { display: none; }
  .lux-plate { left: auto; right: 22px; top: 26%; transform: translateY(-50%); }
  .lux-switch { width: 54px; height: 86px; }
  .lux-key { left: 9px; right: 9px; top: 10px; bottom: 10px; }
  .lux-in { gap: 14px; }
  .lux .w-title { font-size: clamp(34px, 9.6vw, 44px); }
  .lux-note { font-size: 16px; }
  .lux .im-scroll { display: none; }
  .lux-static, html:not(.im-js) .lux { background-image: url(im-luce-m.webp); background-position: 50% 0; background-size: 100% auto; }
}
@media (max-width: 860px) and (max-height: 700px) {
  .lux .im-intro { display: none; }
}
@media (prefers-reduced-motion: reduce) { .lux-switch::before { animation: none; } }
/* stanza accesa a giorno: il testo diventa scuro su un velo chiaro, così si legge sempre */
.lux-in, .lux .w-label, .lux .w-title, .lux .w-title em, .lux-note, .lux-note em, .lux .crumbs, .lux .crumbs a, .lux .im-skip, .lux-hint { transition: color .7s ease, text-shadow .7s ease; }
.lux::before { transition: opacity .7s ease; }
.lux::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0; transition: opacity .7s ease;
  background: linear-gradient(90deg, rgba(252,247,236,.78) 0%, rgba(252,247,236,.5) 40%, rgba(252,247,236,0) 62%); }
.lux-bright::before { opacity: 0; }
.lux-bright::after { opacity: 1; }
.lux-bright .lux-in { text-shadow: 0 1px 16px rgba(255,250,240,.7); }
.lux-bright .w-label, .lux-bright .lux-hint { color: #6b4a12; text-shadow: none; }
.lux-bright .w-title { color: #17120c; }
.lux-bright .w-title em, .lux-bright .lux-note em { color: #a8650a; }
.lux-bright .lux-note, .lux-bright .im-intro { color: #3b3127; }
.lux-bright .crumbs, .lux-bright .crumbs a { color: #5a4f43; }
.lux-bright .im-skip { color: #17120c; text-decoration-color: rgba(23,18,12,.4); }
.lux-bright .lux-next { color: #17120c; text-shadow: none; border-color: rgba(23,18,12,.25); background: rgba(255,252,245,.6); }

/* telefono: lampadina e interruttore in alto, il testo sotto, senza mai sovrapporsi */
@media (max-width: 700px) {
  .lux { display: block; padding: calc(72px + 30svh) 0 40px; }
  .lux-bulb { left: 38%; top: calc(64px + 15svh); height: 22svh; }
  .lux-plate { left: auto; right: 24px; top: calc(64px + 15svh); transform: translateY(-50%); }
  .lux .w-title { font-size: clamp(30px, 8.6vw, 38px); }
  .lux::after { background: linear-gradient(0deg, rgba(252,247,236,.86) 0%, rgba(252,247,236,.6) 50%, rgba(252,247,236,0) 72%); }
}


/* Home: invito a Luce e gas (la sua animazione vive nella sua pagina) */
.im main > .im-lg { position: relative; z-index: 2; }
.im-lg { background: #0d0b0a; color: var(--cap-ink); padding-block: clamp(72px, 10vw, 128px); }
.im-lg-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(32px, 5vw, 72px); align-items: center; }
.im-lg-txt { display: grid; gap: 20px; justify-items: start; }
.im-lg h2 { margin: 0; font-family: var(--serif); font-weight: 600; font-size: clamp(36px, 4.4vw, 64px); line-height: 1.05; letter-spacing: -.015em; color: #fff; }
.im-lg h2 em { color: #ffd65c; font-style: italic; }
.im-lg p { margin: 0; color: var(--cap-ink-2); font-size: 18px; max-width: 44ch; }
.im-lg .btns { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px; margin-top: 6px; }
.im-lg-pic { display: block; border-radius: 28px; overflow: hidden; aspect-ratio: 4 / 3; box-shadow: 0 30px 60px -30px rgba(0,0,0,.8); }
.im-lg-pic img { width: 100%; height: 100%; object-fit: cover; object-position: 68% 40%; display: block; }
@media (max-width: 860px) {
  .im-lg-grid { grid-template-columns: 1fr; }
  .im-lg-pic { order: -1; aspect-ratio: 4 / 3; }
  .im-lg-pic img { object-position: 50% 12%; }
  .im-lg p { font-size: 16.5px; }
}
.im-lg .btns { justify-content: flex-start; }

/* ---------- didascalie ferme sullo schermo che cambiano in dissolvenza (versione animata) ---------- */
.im-js .im-cap { min-height: 85vh; min-height: 85lvh; display: block; }
.im-js .im-cap > .wrap { position: fixed; top: 0; bottom: 0; left: 0; right: 0; display: flex; align-items: center; pointer-events: none; }
.im-js .im-cap-in { pointer-events: auto; opacity: 0; visibility: hidden; will-change: opacity, transform; }
.im-js .im-tail { height: 10vh; height: 10lvh; }
@media (max-width: 860px) {
  .im-js .im-cap > .wrap { align-items: flex-end; padding-bottom: calc(2.5vh + env(safe-area-inset-bottom, 0px)); }
}

/* invito a scorrere: una pillola chiara con la freccia che scende; si può anche toccare */
.im-scroll { position: absolute; left: 50%; bottom: 28px; transform: translateX(-50%); margin: 0; display: inline-flex; align-items: center; gap: 10px;
  padding: 11px 18px 11px 14px; border: 1px solid rgba(255,255,255,.45); border-radius: 999px; cursor: pointer;
  background: rgba(20,24,21,.38); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  font: 600 13px/1 var(--font); letter-spacing: .06em; text-transform: none; color: #fff; text-shadow: none; white-space: nowrap; }
.im-scroll:hover { background: rgba(20,24,21,.55); }
.im-scroll:focus-visible { outline: 3px solid #ffd65c; outline-offset: 3px; }
.im-scroll .im-scroll-ico { position: relative; width: 18px; height: 26px; border: 2px solid currentColor; border-radius: 10px; flex: none; background: none; transform: none; animation: none; }
.im-scroll .im-scroll-ico::after { content: ""; position: absolute; left: 50%; top: 5px; width: 3px; height: 6px; margin-left: -1.5px; border-radius: 2px; background: currentColor; animation: im-wheel 1.6s ease-in-out infinite; }
@keyframes im-wheel { 0% { transform: translateY(0); opacity: 1; } 70% { transform: translateY(8px); opacity: 0; } 100% { transform: translateY(0); opacity: 0; } }
.im-scroll { animation: im-nudge 2.6s ease-in-out 2s infinite; }
@keyframes im-nudge { 0%, 70%, 100% { transform: translateX(-50%) translateY(0); } 80% { transform: translateX(-50%) translateY(6px); } 90% { transform: translateX(-50%) translateY(0); } }
@media (max-width: 860px) {
  .im-scroll { bottom: calc(18px + env(safe-area-inset-bottom, 0px)); }
  .im-scroll .im-scroll-ico { width: 14px; height: 20px; }
  .im-scroll .im-scroll-ico::after { top: 4px; height: 5px; }
}
.lux .im-scroll { bottom: 24px; }
@media (max-width: 860px) {
  .lux .im-scroll { display: none; }
  .lux-on .im-scroll { display: inline-flex; bottom: 16px; }
  .lux-on { padding-bottom: 84px; }
}

/* le tappe: puntini a destra sul computer, in alto sotto l'intestazione sul telefono */
.im-dots { position: fixed; right: 22px; top: 50%; transform: translateY(-50%); z-index: 45; display: grid; gap: 4px; opacity: 0; visibility: hidden; transition: opacity .3s, visibility .3s; }
.im-dots.on { opacity: 1; visibility: visible; }
.im-dots button { width: 28px; height: 28px; padding: 0; border: 0; background: none; cursor: pointer; display: grid; place-items: center; }
.im-dots button::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,.45); box-shadow: 0 0 0 1px rgba(0,0,0,.15); transition: transform .25s, background .25s; }
.im-dots button.cur::before { background: #ffd65c; transform: scale(1.5); }
.im-dots button:focus-visible { outline: 2px solid #ffd65c; border-radius: 50%; }
@media (max-width: 860px) {
  .im-dots { right: auto; left: 50%; top: calc(76px + env(safe-area-inset-top, 0px)); transform: translateX(-50%); grid-auto-flow: column; gap: 2px; }
  .im-dots button { width: 24px; height: 24px; }
  .im-dots button::before { width: 7px; height: 7px; }
}
@media (prefers-reduced-motion: reduce) { .im-scroll, .im-scroll .im-scroll-ico::after { animation: none; } }

/* fotovoltaico, didascalie di giorno: testo scuro su velo chiaro (la scena è luminosa) */
.im .im-scrim-l { background: linear-gradient(90deg, rgba(246,243,234,.9) 0%, rgba(246,243,234,.66) 34%, rgba(246,243,234,0) 60%); }
.im-js .im-day .im-cap-in { --cap-ink: #14231a; --cap-ink-2: #34463b; text-shadow: 0 1px 14px rgba(255,255,255,.5); }
.im-js .im-day .im-cap-in h2 em { color: #2f7a4b; }
.im-js .im .im-day .im-k { color: #2b4a38; }
.im-js .im .im-day .im-src { color: #5b6a60; }
.im-js .im-day .im-big { color: #14231a !important; }
.im-js .im-day .im-link { color: #14231a; text-decoration-color: rgba(47,122,75,.6); }
@media (max-width: 860px) {
  .im .im-scrim-l { background: linear-gradient(0deg, rgba(246,243,234,.95) 0%, rgba(246,243,234,.82) 36%, rgba(246,243,234,0) 62%); }
}

/* ---------- fotovoltaico: didascalie su lastre di vetro "liquido" (stile Liquid Glass) ----------
   Il vetro sfoca e satura la scena che ha dietro, ha un bordo che cattura la luce in alto a sinistra
   e un riflesso morbido; di giorno è chiaro con testo scuro, la sera è fumé con testo chiaro. */
.im-js .im-volo .im-cap-in {
  position: relative; isolation: isolate; max-width: 31rem; padding: 30px 32px 30px; border-radius: 30px;
  background: linear-gradient(140deg, rgba(255,255,255,.34) 0%, rgba(255,255,255,.16) 46%, rgba(255,255,255,.24) 100%);
  -webkit-backdrop-filter: blur(24px) saturate(185%) brightness(1.08); backdrop-filter: blur(24px) saturate(185%) brightness(1.08);
  border: 1px solid rgba(255,255,255,.5);
  box-shadow: inset 0 1.5px 0 rgba(255,255,255,.85), inset 0 -1px 0 rgba(255,255,255,.22), inset 1px 0 0 rgba(255,255,255,.3),
              inset 0 0 28px rgba(255,255,255,.14), 0 24px 60px -12px rgba(20,30,25,.32), 0 2px 6px rgba(20,30,25,.08);
  text-shadow: none;
}
/* riflesso: una luce che scivola sul bordo in alto e un alone morbido nell'angolo */
.im-js .im-volo .im-cap-in::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: -1;
  background: radial-gradient(120% 70% at 12% -10%, rgba(255,255,255,.55) 0%, rgba(255,255,255,0) 55%),
              radial-gradient(90% 60% at 100% 120%, rgba(255,255,255,.22) 0%, rgba(255,255,255,0) 60%); }
.im-js .im-volo .im-cap-in::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; padding: 1.5px;
  background: linear-gradient(135deg, rgba(255,255,255,.95), rgba(255,255,255,.1) 30%, rgba(255,255,255,0) 60%, rgba(255,255,255,.55));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
/* giorno: testo scuro e pieno */
.im-js .im-volo .im-day .im-cap-in { --cap-ink: #0f1d15; --cap-ink-2: #23342a; background-color: rgba(250,248,242,.3); }
.im-js .im-volo .im-day .im-cap-in p { font-weight: 450; }
/* sera: vetro fumé, testo chiaro */
.im-js .im-volo .im-cap:not(.im-day) .im-cap-in { --cap-ink: #fffdf8; --cap-ink-2: #eef0f6;
  background: linear-gradient(140deg, rgba(40,52,84,.5) 0%, rgba(16,22,40,.42) 50%, rgba(30,40,70,.5) 100%);
  border-color: rgba(255,255,255,.28);
  box-shadow: inset 0 1.5px 0 rgba(255,255,255,.45), inset 0 -1px 0 rgba(255,255,255,.1), inset 0 0 30px rgba(140,160,255,.1), 0 24px 60px -12px rgba(0,0,0,.5); }
.im-js .im-volo .im-cap:not(.im-day) .im-cap-in::before { background: radial-gradient(120% 70% at 12% -10%, rgba(255,255,255,.22) 0%, rgba(255,255,255,0) 55%); }
.im-js .im-volo .im-cap:not(.im-day) .im-cap-in::after { background: linear-gradient(135deg, rgba(255,255,255,.6), rgba(255,255,255,.05) 30%, rgba(255,255,255,0) 60%, rgba(255,255,255,.3)); }
.im-js .im .im-volo .im-cap:not(.im-day) .im-k { color: #ffe39a; }
.im-js .im-volo .im-cap-in .btn.sun { box-shadow: 0 10px 24px -8px rgba(160,110,0,.55), inset 0 1px 0 rgba(255,255,255,.5); }
/* l'apertura: stesso vetro chiaro, più grande */
.im-js .im-volo .im-hero-in { position: relative; padding: 34px 38px; border-radius: 34px; max-width: 41rem;
  background: linear-gradient(140deg, rgba(255,255,255,.42), rgba(255,255,255,.2) 50%, rgba(255,255,255,.3));
  -webkit-backdrop-filter: blur(26px) saturate(180%) brightness(1.06); backdrop-filter: blur(26px) saturate(180%) brightness(1.06);
  border: 1px solid rgba(255,255,255,.55);
  box-shadow: inset 0 1.5px 0 rgba(255,255,255,.9), inset 0 0 30px rgba(255,255,255,.16), 0 28px 70px -16px rgba(20,30,25,.3); }
.im-js .im-volo.im-volo .im-hero::before { display: none; }
/* puntini e "scorri" di vetro */
.im-js .im-dots { padding: 6px; border-radius: 999px; background: rgba(255,255,255,.18); border: 1px solid rgba(255,255,255,.4);
  -webkit-backdrop-filter: blur(16px) saturate(170%); backdrop-filter: blur(16px) saturate(170%); box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 8px 24px -8px rgba(0,0,0,.25); }
.im-js .im-dots button::before { background: rgba(255,255,255,.75); box-shadow: 0 0 0 1px rgba(0,0,0,.12); }
.im-js .im-volo .im-scroll { background: rgba(255,255,255,.22); border-color: rgba(255,255,255,.55); color: #13211a;
  -webkit-backdrop-filter: blur(16px) saturate(180%); backdrop-filter: blur(16px) saturate(180%); box-shadow: inset 0 1px 0 rgba(255,255,255,.8), 0 10px 26px -10px rgba(0,0,0,.3); }
@media (max-width: 860px) {
  .im-js .im-volo .im-cap > .wrap { padding-left: 14px; padding-right: 14px; }
  .im-js .im-volo .im-cap-in { padding: 22px 22px 22px; border-radius: 26px; max-width: none; }
  .im-js .im-volo .im-hero-in { padding: 22px 22px 24px; border-radius: 28px; }
  .im-js .im-volo .im-hero { padding-top: 76px; }
}
/* senza backdrop-filter il vetro diventa un pannello quasi pieno, sempre leggibile */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .im-js .im-volo .im-day .im-cap-in, .im-js .im-volo .im-hero-in { background: rgba(250,248,242,.9); }
  .im-js .im-volo .im-cap:not(.im-day) .im-cap-in { background: rgba(18,24,42,.86); }
}