/* Signage LB26 — il sito. Stessa famiglia di lb26.ch: bordeaux scuro, oro, Cinzel e Inter. */

:root {
  --ink: #240305;
  --ink-2: #3A0508;
  --on-ink: #F7F1E6;
  --on-ink-soft: #D9C7B4;
  --gold: #A77738;
  --gold-light: #E7CB94;
  --paper: #FCFAF7;
  --paper-2: #F3EDE4;
  --text: #1C1210;
  --text-soft: #6E5A50;
  --line: rgb(28 18 16 / 0.12);
  --red: #B3202A;
  --font-display: "Cinzel", "Times New Roman", serif;
  --font-ui: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --wrap: 1180px;
  --radius: 18px;
  color-scheme: light;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 64px; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--paper); color: var(--text);
  font: 400 17px/1.6 var(--font-ui); overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--font-display); font-weight: 600; line-height: 1.15; margin: 0; letter-spacing: 0.01em; }
h2 { font-size: clamp(1.7rem, 1.1rem + 2vw, 2.7rem); margin-top: 0.3rem; max-width: 22ch; }
h3 { font-size: 1.35rem; margin-top: 3rem; }
p { margin: 0.9rem 0 0; }
.lead { font-size: clamp(1.02rem, 0.95rem + 0.35vw, 1.2rem); max-width: 62ch; color: var(--text-soft); }
.kicker { margin: 0; font-size: 0.78rem; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 600; color: var(--gold); }
.tip { font-size: 0.95rem; color: var(--text-soft); max-width: 70ch; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.wrap { width: min(var(--wrap), 100% - 32px); margin-inline: auto; }

/* ---------- barra ---------- */
.bar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 18px;
  padding: 10px max(16px, calc((100% - var(--wrap)) / 2));
  background: rgb(36 3 5 / 0.88); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  color: var(--on-ink); border-bottom: 1px solid rgb(231 203 148 / 0.18);
}
.bar__brand { display: flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 600; white-space: nowrap; }
.bar__brand img { border-radius: 8px; }
.bar__nav { display: flex; gap: 18px; margin-left: auto; font-size: 0.92rem; }
.bar__nav a { text-decoration: none; color: var(--on-ink-soft); }
.bar__nav a:hover { color: var(--gold-light); }
.bar__lang select {
  background: rgb(255 255 255 / 0.08); color: var(--on-ink); border: 1px solid rgb(231 203 148 / 0.35);
  border-radius: 10px; padding: 6px 10px; font: inherit; font-size: 0.9rem;
}
.bar__lang option { color: #000; }
@media (max-width: 860px) { .bar__nav { display: none; } .bar__lang { margin-left: auto; } }
@media (max-width: 420px) { .bar__brand span { display: none; } }
.bar__lang select { max-width: 46vw; }

/* ---------- pulsanti ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 22px; border-radius: 999px; font: 600 0.98rem var(--font-ui);
  text-decoration: none; cursor: pointer; border: 1px solid transparent; transition: transform .15s, background .2s;
}
.btn:hover { transform: translateY(-1px); }
.btn--gold { background: linear-gradient(135deg, var(--gold), var(--gold-light)); color: #2A0405; }
.btn--ghost { background: transparent; border-color: rgb(231 203 148 / 0.5); color: inherit; }

/* ---------- apertura ---------- */
.stage {
  position: relative; overflow: hidden; color: var(--on-ink);
  background:
    radial-gradient(70vw 52vw at 50% -14%, rgb(167 119 56 / 0.30), transparent 62%),
    radial-gradient(48vw 40vw at 88% 108%, rgb(167 119 56 / 0.18), transparent 64%),
    linear-gradient(168deg, var(--ink), var(--ink-2) 58%, #180203);
  padding: clamp(3rem, 2rem + 5vw, 6rem) 0 clamp(3.5rem, 2rem + 6vw, 6.5rem);
}
.stage::after {
  content: ""; position: absolute; inset-inline: 0; bottom: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold) 22%, var(--gold-light) 50%, var(--gold) 78%, transparent);
}
.stage__grid { display: grid; gap: 3rem; align-items: center; }
@media (min-width: 1000px) { .stage__grid { grid-template-columns: 0.9fr 1.1fr; } }
.stage h1 { font-size: clamp(2.2rem, 1.3rem + 3.6vw, 4rem); margin-top: 0.8rem; }
.stage .lead { color: var(--on-ink-soft); }
.stage__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 1.8rem; }
.stage .btn--ghost { color: var(--on-ink); }
.facts { list-style: none; padding: 0; margin: 2.2rem 0 0; display: flex; flex-wrap: wrap; gap: 26px; }
.facts li { display: grid; }
.facts b { font-family: var(--font-display); font-size: 2rem; color: var(--gold-light); line-height: 1; }
.facts span { font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--on-ink-soft); margin-top: 6px; }

/* iPad → Apple TV */
.duo { display: grid; grid-template-columns: 0.95fr 56px 1.15fr; align-items: center; }
@media (max-width: 640px) { .duo { grid-template-columns: 1fr; gap: 18px; } .beam { transform: rotate(90deg); height: 40px; } }
.tablet {
  background: #111; border-radius: 26px; padding: 14px; box-shadow: 0 30px 60px rgb(0 0 0 / .5), inset 0 0 0 2px #333;
  transform: perspective(900px) rotateY(12deg) rotateX(4deg);
}
.tablet__screen { border-radius: 10px; overflow: hidden; background: #000; }
.tv { position: relative; }
.tv__screen { background: #050505; border-radius: 10px; padding: 10px; box-shadow: 0 30px 70px rgb(0 0 0 / .55), inset 0 0 0 3px #2a2a2a; }
.tv__foot { width: 32%; height: 10px; margin: 0 auto; background: linear-gradient(#2a2a2a, #111); border-radius: 0 0 8px 8px; }
.atv { width: 64px; height: 14px; margin: 12px auto 0; border-radius: 6px; background: linear-gradient(#2b2b2b, #0d0d0d); box-shadow: 0 6px 12px rgb(0 0 0 /.5); }
.beam { display: flex; justify-content: center; gap: 8px; }
.beam i { width: 8px; height: 8px; border-radius: 50%; background: var(--gold-light); opacity: .2; animation: beam 1.4s infinite; }
.beam i:nth-child(2) { animation-delay: .2s; } .beam i:nth-child(3) { animation-delay: .4s; }
@keyframes beam { 0%, 100% { opacity: .15; transform: scale(.8); } 50% { opacity: 1; transform: scale(1.2); } }

/* ---------- lo schermo in miniatura (usato da hero, prova) ---------- */
.mini { position: relative; aspect-ratio: 16 / 9; background: #000; overflow: hidden; border-radius: 4px; container-type: inline-size; }
.mini--edit { outline: 1px solid rgb(0 0 0 / .1); }
.tile {
  position: absolute; overflow: hidden; background: #000; color: #fff;
  transition: left .5s cubic-bezier(.2,.8,.2,1), top .5s cubic-bezier(.2,.8,.2,1), width .5s cubic-bezier(.2,.8,.2,1), height .5s cubic-bezier(.2,.8,.2,1);
  display: grid; place-items: center;
}
.tile--empty::after { content: "+"; color: rgb(255 255 255 / .28); font-size: 4cqw; }
.mini--edit .tile, .mini--play .tile { box-shadow: inset 0 0 0 0.5px rgb(201 164 92 / .65); }
.tile--sel { box-shadow: inset 0 0 0 2px var(--gold-light) !important; }
.stroke { position: absolute; background: var(--gold-light); border-radius: 2px; box-shadow: 0 0 10px rgb(231 203 148 / .8); pointer-events: none; }
.finger {
  position: absolute; width: 4.2cqw; height: 4.2cqw; margin: -2.1cqw 0 0 -2.1cqw; border-radius: 50%;
  background: rgb(255 255 255 / .55); box-shadow: 0 0 0 2px rgb(255 255 255 / .8), 0 4px 10px rgb(0 0 0 / .4);
  pointer-events: none; transition: opacity .3s;
}

/* contenuti dentro le aree */
.k-menu { width: 100%; height: 100%; padding: 5cqw 4cqw; text-align: left; }
.k-menu h4 { margin: 0 0 1.4cqw; font: 600 3.1cqw var(--font-display); color: var(--gold-light); }
.k-menu p { margin: 0 0 1cqw; display: flex; justify-content: space-between; gap: 2cqw; font-size: 1.85cqw; }
.k-menu p b { color: var(--gold-light); font-weight: 600; }
.k-menu small { display: block; margin-top: 1.4cqw; font-size: 1.2cqw; letter-spacing: .1em; color: rgb(255 255 255 / .45); }
.k-menu small em { color: var(--gold-light); font-style: normal; font-weight: 700; }
.k-photo { width: 100%; height: 100%; background: radial-gradient(circle at 50% 55%, #f4efe6 0 26%, #d9d0c2 27% 31%, transparent 32%), radial-gradient(circle at 43% 50%, #c2452d 0 7%, transparent 8%), radial-gradient(circle at 56% 58%, #e3a33b 0 6%, transparent 7%), radial-gradient(circle at 52% 46%, #5f8f3a 0 5%, transparent 6%), linear-gradient(135deg, #3b2a20, #6b4a34); animation: kenburns 8s ease-in-out infinite alternate; }
@keyframes kenburns { from { transform: scale(1); } to { transform: scale(1.12) translate(-2%, 1%); } }
.k-photo span { position: absolute; left: 0; right: 0; bottom: 0; padding: 1.2cqw 2cqw; font-size: 1.7cqw; font-weight: 600; background: linear-gradient(transparent, rgb(0 0 0 / .7)); text-align: left; }
.k-clock { font: 600 7cqw var(--font-ui); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.k-weather { display: flex; align-items: center; gap: 1.5cqw; font: 600 4.4cqw var(--font-ui); }
.k-weather i { width: 6cqw; height: 4cqw; position: relative; }
.k-weather i::before { content: ""; position: absolute; width: 3.6cqw; height: 3.6cqw; border-radius: 50%; background: #F6C343; left: 0; top: -1cqw; }
.k-weather i::after { content: ""; position: absolute; width: 5cqw; height: 2.6cqw; border-radius: 2cqw; background: #fff; left: 1cqw; top: 1.2cqw; }
.k-weather small { display: block; font-size: 1.5cqw; color: var(--gold-light); font-weight: 500; }
.k-ticker { width: 100%; white-space: nowrap; overflow: hidden; font: 600 3.2cqw var(--font-ui); }
.k-ticker span { display: inline-block; padding-left: 100%; animation: ticker 14s linear infinite; }
@keyframes ticker { to { transform: translateX(-100%); } }
.k-video { width: 100%; height: 100%; background: repeating-linear-gradient(115deg, #2c1a12 0 6%, #3d2618 6% 12%); position: relative; }
.k-video::before { content: ""; position: absolute; inset: 30% 38%; border-radius: 50%; background: radial-gradient(#ffb347 0 30%, #ff7a18 31% 60%, transparent 61%); filter: blur(.6cqw); animation: flame 0.9s ease-in-out infinite alternate; }
@keyframes flame { to { transform: scale(1.15) translateY(-4%); opacity: .8; } }
.k-video::after { content: "● LIVE"; position: absolute; top: 1.5cqw; left: 1.5cqw; font: 700 1.3cqw var(--font-ui); color: #ff4d4d; }
.stamp {
  position: absolute; padding: 1.2cqw 2.6cqw; background: var(--red); color: #fff; border-radius: 1.2cqw;
  font: 700 3.2cqw var(--font-ui); transform: rotate(-6deg) scale(0); box-shadow: 0 1cqw 2cqw rgb(0 0 0 / .45);
  transition: transform .5s cubic-bezier(.3,1.6,.5,1); white-space: nowrap; pointer-events: none;
}
.stamp--on { transform: rotate(-6deg) scale(1); }

/* ---------- fasce ---------- */
.band { padding: clamp(3.5rem, 2rem + 5vw, 6.5rem) 0; }
.band--dark { background: linear-gradient(170deg, #1a0204, var(--ink) 60%, #120102); color: var(--on-ink); }
.band--dark .lead, .band--dark .tip { color: var(--on-ink-soft); }
.band--soft { background: var(--paper-2); }

/* schema */
.diagram { margin: 2.5rem 0 0; }
.diagram svg { width: 100%; height: auto; }
.wire path { fill: none; stroke: rgb(167 119 56 / .35); stroke-width: 3; }
.flow use { fill: none; stroke: var(--gold); stroke-width: 4; stroke-linecap: round; stroke-dasharray: 2 26; animation: flow 1.6s linear infinite; }
.flow .flow--net { stroke: #3E6A7A; animation-direction: reverse; }
@keyframes flow { to { stroke-dashoffset: -28; } }
.dev { fill: #1d1d1f; } .dev__glass { fill: #0b0b0c; }
.pix--a { fill: #C9A45C; } .pix--b { fill: #3E6A7A; } .pix--c { fill: #8B2A2E; } .pix--d { fill: #E8D7B0; } .pix--stamp { fill: var(--red); }
.pix { animation: glow 3s ease-in-out infinite; } .pix--b { animation-delay: .6s; } .pix--c { animation-delay: 1.2s; }
@keyframes glow { 50% { opacity: .7; } }
.hub { fill: #fff; stroke: var(--gold); stroke-width: 2; }
.waves path { fill: none; stroke: var(--gold); stroke-width: 4; stroke-linecap: round; animation: wave 2s infinite; }
.waves path:nth-child(2) { animation-delay: .25s; } .waves path:nth-child(3) { animation-delay: .5s; }
.waves circle { fill: var(--gold); }
@keyframes wave { 0%, 100% { opacity: .25; } 40% { opacity: 1; } }
.cloud { fill: #EAF1F4; stroke: #3E6A7A; stroke-width: 2; }
.tvbox { fill: #1d1d1f; } .tvscreen { fill: #000; } .atvbox { fill: #2b2b2b; }
.lbl { font: 600 15px var(--font-ui); fill: var(--text); text-anchor: middle; }
.lbl--small { font-size: 13px; fill: #3E6A7A; }
.note { font: italic 400 14px var(--font-ui); fill: var(--text-soft); }
.steps3 { list-style: none; padding: 0; margin: 1.5rem 0 0; display: grid; gap: 18px; counter-reset: s; }
@media (min-width: 800px) { .steps3 { grid-template-columns: repeat(3, 1fr); } }
.steps3 li { counter-increment: s; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 20px; display: grid; gap: 4px; }
.steps3 li::before { content: counter(s); width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--gold); color: #fff; font-weight: 700; }
.steps3 span { color: var(--text-soft); font-size: .95rem; }

/* prova */
.playground { display: grid; gap: 28px; margin-top: 2.2rem; align-items: start; }
@media (min-width: 980px) { .playground { grid-template-columns: 1.5fr 1fr; } }
.play__tv { position: relative; background: #050505; border-radius: 14px; padding: 12px; box-shadow: 0 30px 70px rgb(0 0 0 / .55), inset 0 0 0 3px #2a2a2a; }
.mini--play { cursor: crosshair; touch-action: none; }
.play__hint { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); padding: 8px 16px; border-radius: 999px; background: rgb(0 0 0 / .6); color: var(--gold-light); font-size: .9rem; white-space: nowrap; pointer-events: none; transition: opacity .3s; }
@media (max-width: 520px) { .play__hint { font-size: .75rem; padding: 6px 12px; } }
.script { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.script li { display: grid; padding: 12px 16px; border-radius: 12px; border: 1px solid rgb(231 203 148 / .15); opacity: .55; transition: all .3s; }
.script li span { font-size: .9rem; color: var(--on-ink-soft); }
.script li.on { opacity: 1; border-color: var(--gold-light); background: rgb(231 203 148 / .08); }
.play__buttons { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.band--dark .btn--ghost { color: var(--on-ink); }
.menu-pop { position: absolute; z-index: 5; display: grid; grid-template-columns: repeat(3, auto); gap: 4px; padding: 6px; background: rgb(20 10 8 / .92); border: 1px solid rgb(231 203 148 / .4); border-radius: 12px; }
.menu-pop button { font: 500 .8rem var(--font-ui); color: var(--on-ink); background: rgb(255 255 255 / .06); border: 0; border-radius: 8px; padding: 6px 10px; cursor: pointer; }
.menu-pop button:hover { background: rgb(231 203 148 / .25); }

/* contenuti */
.tiles { list-style: none; padding: 0; margin: 2.4rem 0 0; display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.tiles li { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; display: grid; gap: 6px; align-content: start; transition: transform .2s, box-shadow .2s; }
.tiles li:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgb(36 3 5 / .08); }
.tiles span { color: var(--text-soft); font-size: .93rem; }
.ic { width: 42px; height: 42px; border-radius: 12px; background: var(--ink); position: relative; margin-bottom: 6px; }
.ic::after { content: ""; position: absolute; inset: 11px; border-radius: 3px; }
.ic--menu::after { background: repeating-linear-gradient(var(--gold-light) 0 3px, transparent 3px 7px); }
.ic--photo::after { background: radial-gradient(circle at 35% 35%, #F6C343 0 18%, transparent 20%), linear-gradient(160deg, transparent 50%, #5f8f3a 51%); }
.ic--video::after { clip-path: polygon(20% 10%, 90% 50%, 20% 90%); background: var(--gold-light); }
.ic--live::after { border-radius: 50%; background: #ff4d4d; inset: 14px; animation: glow 1.2s infinite; }
.ic--clock::after { border-radius: 50%; border: 3px solid var(--gold-light); background: conic-gradient(var(--gold-light) 0 3%, transparent 3% 25%, var(--gold-light) 25% 27%, transparent 27%); }
.ic--weather::after { background: radial-gradient(circle at 40% 40%, #F6C343 0 30%, transparent 32%), radial-gradient(ellipse at 60% 70%, #fff 0 35%, transparent 37%); }
.ic--ticker::after { background: linear-gradient(var(--gold-light), var(--gold-light)) center / 100% 4px no-repeat; animation: slide 1.5s linear infinite; }
@keyframes slide { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
.ic--pdf::after { background: #fff; clip-path: polygon(0 0, 70% 0, 100% 30%, 100% 100%, 0 100%); }

/* livelli */
.split { display: grid; gap: 3rem; align-items: center; }
.split + .split { margin-top: 5rem; }
@media (min-width: 900px) { .split { grid-template-columns: 1fr 1fr; } .split--flip > :first-child { order: 2; } }
.checks { padding: 0; list-style: none; margin: 1.2rem 0 0; display: grid; gap: 8px; }
.checks li { padding-left: 28px; position: relative; }
.checks li::before { content: "✓"; position: absolute; left: 0; color: var(--gold); font-weight: 700; }
.stack { position: relative; height: 340px; perspective: 1200px; }
.stack__layer {
  position: absolute; inset: 40px 30px; border-radius: 14px; display: grid; place-items: end start; padding: 16px;
  font-weight: 600; font-size: .85rem; color: #fff; transform-style: preserve-3d;
  animation: explode 6s ease-in-out infinite; box-shadow: 0 20px 40px rgb(36 3 5 / .25);
}
.stack__layer--areas { background: linear-gradient(90deg, #111 0 64%, #1F3B4D 64%), #111; background-image: linear-gradient(90deg, transparent 63.5%, var(--gold) 63.5% 64%, transparent 64%), linear-gradient(180deg, transparent 49.5%, var(--gold) 49.5% 50%, transparent 50%); background-color: #111; --z: 0px; }
.stack__layer--photo { place-items: end end; background: radial-gradient(circle at 70% 45%, #f4efe6 0 16%, #d9d0c2 17% 19%, transparent 20%), radial-gradient(circle at 66% 42%, #c2452d 0 5%, transparent 6%), radial-gradient(circle at 74% 48%, #e3a33b 0 4%, transparent 5%); --z: 70px; box-shadow: none; }
.stack__layer--stamp { place-items: start start; --z: 140px; box-shadow: none; }
.stack__layer--stamp em { font-style: normal; background: var(--red); padding: 8px 16px; border-radius: 8px; transform: rotate(-6deg); font-size: 1rem; box-shadow: 0 8px 18px rgb(0 0 0 / .35); }
@keyframes explode {
  0%, 15%, 100% { transform: rotateX(0) rotateZ(0) translateZ(0); }
  45%, 70% { transform: rotateX(55deg) rotateZ(-30deg) translateZ(var(--z)); }
}
.swatches { display: grid; grid-template-columns: repeat(5, 40px); gap: 10px; margin-top: 1.6rem; }
.swatches i { width: 40px; height: 40px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgb(0 0 0 / .1); }
.kaleido canvas { width: min(100%, 460px); height: auto; aspect-ratio: 1; border-radius: 50%; display: block; margin-inline: auto; box-shadow: 0 30px 60px rgb(36 3 5 / .3); }

/* palinsesto */
.sched { display: grid; gap: 28px; margin-top: 2.4rem; }
@media (min-width: 980px) { .sched { grid-template-columns: 1.6fr 1fr; } }
.sched__week { position: relative; height: 100%; min-height: 440px; background: rgb(255 255 255 / .04); border: 1px solid rgb(231 203 148 / .18); border-radius: var(--radius); overflow: hidden; }
.wk-col { position: absolute; top: 0; bottom: 0; border-left: 1px solid rgb(231 203 148 / .08); }
.wk-day { position: absolute; top: 6px; font-size: .75rem; color: var(--on-ink-soft); text-align: center; }
.wk-day.today { color: var(--gold-light); font-weight: 700; }
.wk-hour { position: absolute; left: 4px; font-size: .68rem; color: rgb(217 199 180 / .6); }
.wk-line { position: absolute; left: 34px; right: 0; height: 1px; background: rgb(231 203 148 / .07); }
.wk-block { position: absolute; border-radius: 4px; opacity: .9; }
.wk-now { position: absolute; height: 2px; background: #ff4d4d; box-shadow: 0 0 8px #ff4d4d; }
.sched__tv { background: #050505; border-radius: 14px; padding: 12px; box-shadow: inset 0 0 0 3px #2a2a2a; }
.sched__clock { font: 600 1.6rem var(--font-ui); font-variant-numeric: tabular-nums; color: var(--gold-light); }
.sched__screen { margin-top: 8px; aspect-ratio: 16/9; border-radius: 6px; display: grid; place-items: center; font: 600 1.4rem var(--font-display); color: #fff; transition: background .6s; text-align: center; padding: 10px; }
.sched__day { margin-top: 8px; font-size: .85rem; color: var(--on-ink-soft); }
.legend { list-style: none; padding: 0; margin: 18px 0 0; display: grid; gap: 8px; font-size: .9rem; }
.legend li { display: grid; grid-template-columns: 14px 1fr; gap: 10px; align-items: start; }
.legend i { width: 14px; height: 14px; border-radius: 4px; margin-top: 4px; }
.legend span { color: var(--on-ink-soft); font-size: .82rem; display: block; }

/* avvio automatico */
.warn { margin-top: 2rem; padding: 18px 22px; border-radius: var(--radius); background: #FFF4E5; border: 1px solid #F2C17D; }
.warn ul { margin: 8px 0 0; padding-left: 20px; }
.howto { list-style: none; padding: 0; margin: 2rem 0 0; display: grid; gap: 14px; counter-reset: h; }
@media (min-width: 900px) { .howto { grid-template-columns: repeat(2, 1fr); } }
.howto li { counter-increment: h; display: grid; grid-template-columns: 42px 1fr; gap: 4px 14px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; }
.howto li::before { content: counter(h); grid-row: span 2; width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: var(--ink); color: var(--gold-light); font: 700 1.05rem var(--font-ui); }
.howto span { color: var(--text-soft); font-size: .95rem; }
.hw { display: grid; gap: 14px; margin-top: 1.2rem; }
@media (min-width: 800px) { .hw { grid-template-columns: repeat(3, 1fr); } }
.hw > div { border-radius: var(--radius); padding: 18px; display: grid; gap: 4px; }
.hw span { font-size: .95rem; color: var(--text-soft); }
.hw__ok { background: #EAF5EE; } .hw__no { background: #FBEAEA; } .hw__tip { background: #F3EDE4; }

/* prezzo */
.price { display: grid; gap: 2.5rem; align-items: center; }
@media (min-width: 900px) { .price { grid-template-columns: 1.2fr 1fr; } }
.pricebox { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; }
.pricebox li { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 20px 22px; display: grid; gap: 4px; }
.pricebox b { font-family: var(--font-display); font-size: 1.4rem; }
.pricebox span { color: var(--text-soft); }
.pricebox__main { background: linear-gradient(135deg, var(--ink), var(--ink-2)) !important; color: var(--on-ink); border-color: var(--gold) !important; }
.pricebox__main b { color: var(--gold-light); } .pricebox__main span { color: var(--on-ink-soft); }

/* domande */
.faq { max-width: 820px; }
.faq details { border-bottom: 1px solid var(--line); padding: 16px 0; }
.faq summary { cursor: pointer; font-weight: 600; font-size: 1.05rem; }
.faq details p { color: var(--text-soft); }

/* piede */
.foot { background: var(--ink); color: var(--on-ink-soft); padding: 3rem 0; font-size: .92rem; }
.foot__grid { display: flex; gap: 22px; align-items: center; }
.foot a { color: var(--gold-light); }
.foot__small { font-size: .78rem; opacity: .75; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

.pricebox__price { margin: 6px 0 2px; display: flex; align-items: baseline; gap: 10px; }
.pricebox__price strong { font: 600 2rem var(--font-display); color: var(--text); }
.pricebox__main .pricebox__price strong { color: var(--gold-light); }
.pricebox__price s { color: var(--on-ink-soft); opacity: .7; font-size: 1.05rem; }
.pricebox__price em { font-style: normal; color: var(--text-soft); }

/* ---------- gesti e QR (3.10.2026) ---------- */
.ic--qr::after { background:
  linear-gradient(var(--ink), var(--ink)) 50% 50% / 30% 30% no-repeat,
  conic-gradient(var(--gold-light) 0 25%, #fff 0 50%, var(--gold-light) 0 75%, #fff 0) 0 0 / 50% 50%; }
.tiles--gest li { background: #fff; }
.gx { width: 46px; height: 46px; border-radius: 14px; background: var(--ink); color: var(--gold-light); display: grid; place-items: center; font: 700 1.05rem var(--font-ui); font-style: normal; position: relative; margin-bottom: 6px; }
.gx--hold > i { width: 20px; height: 20px; border-radius: 50%; background: var(--gold-light); animation: gxhold 2.4s ease-in-out infinite; }
@keyframes gxhold { 0%, 20% { transform: scale(.6); opacity: .5; } 45% { transform: scale(1); opacity: 1; } 70% { transform: translate(8px, -5px); } 100% { transform: scale(.6); opacity: .5; } }
.gx--lock::after { content: ""; position: absolute; right: -5px; top: -5px; width: 16px; height: 16px; border-radius: 5px; background: var(--gold); box-shadow: 0 0 0 3px #fff; }
.gx--pinch > i { position: absolute; width: 12px; height: 12px; border-radius: 50%; background: var(--gold-light); animation: gxpinch 2s ease-in-out infinite alternate; }
.gx--pinch > i:last-child { animation-direction: alternate-reverse; animation-name: gxpinch2; }
@keyframes gxpinch { from { transform: translate(-4px, -4px); } to { transform: translate(-12px, -12px); } }
@keyframes gxpinch2 { from { transform: translate(12px, 12px); } to { transform: translate(4px, 4px); } }
.gx--trash::after { content: ""; width: 18px; height: 20px; border-radius: 0 0 4px 4px; background: #ff6b6b; box-shadow: 0 -5px 0 -2px #ff6b6b; }
@media (prefers-reduced-motion: reduce) { .gx > i { animation: none !important; } }

/* ---------- listino a formule (3.10.2026) ---------- */
.plans { list-style: none; padding: 0; margin: 2.2rem 0 0; display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.plans li { position: relative; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; display: grid; gap: 4px; align-content: start; }
.plans b { font-family: var(--font-display); font-size: 1.35rem; }
.plans span { color: var(--text-soft); font-size: .95rem; }
.plans__price { margin: 6px 0 0; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.plans__price strong { font: 600 2rem var(--font-display); }
.plans__price em { font-style: normal; color: var(--text-soft); }
.plans__atv { margin: 0 0 4px; font-weight: 600; color: var(--gold); }
.plans__main { background: linear-gradient(135deg, var(--ink), var(--ink-2)) !important; color: var(--on-ink); border-color: var(--gold) !important; }
.plans__main b, .plans__main .plans__price strong { color: var(--gold-light); }
.plans__main span, .plans__main .plans__price em { color: var(--on-ink-soft); }
.plans__main .plans__atv { color: var(--gold-light); }
.plans__tag { position: absolute; top: -11px; right: 16px; background: linear-gradient(135deg, var(--gold), var(--gold-light)); color: #2A0405; font: 700 .72rem var(--font-ui); letter-spacing: .08em; text-transform: uppercase; padding: 4px 10px; border-radius: 999px; font-style: normal; }
.plans__biz { border-style: dashed; border-color: var(--gold); }
#prezzo .tip { margin-top: 1.4rem; }
.plans__hint { margin-top: 1.6rem; font-size: 1.12rem; max-width: 62ch; padding: 18px 22px; background: #fff; border: 1px solid var(--line); border-left: 4px solid var(--gold); border-radius: 0 var(--radius) var(--radius) 0; }

/* ---------- per chi e perché conviene (3.10.2026) ---------- */
.tiles--sec li { background: #fff; }
.sec__ic { font-style: normal; font-size: 1.9rem; line-height: 1; margin-bottom: 4px; }
.adv { list-style: none; padding: 0; margin: 2.4rem 0 0; counter-reset: v; display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
.adv li { counter-increment: v; position: relative; padding: 20px 20px 20px 64px; border: 1px solid rgb(231 203 148 / .22); border-radius: var(--radius); background: rgb(255 255 255 / .04); display: grid; gap: 4px; }
.adv li::before { content: counter(v); position: absolute; left: 18px; top: 18px; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(135deg, var(--gold), var(--gold-light)); color: #2A0405; font-weight: 700; }
.adv b { color: var(--gold-light); font-size: 1.08rem; }
.adv span { color: var(--on-ink-soft); font-size: .95rem; }

/* ---------- lo schermo dei settori ---------- */
.sec-grid { display: grid; gap: 32px; margin-top: 2.4rem; align-items: start; }
@media (min-width: 980px) { .sec-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); } .sec-tv { position: sticky; top: 90px; } }
.sec-grid .tiles { margin-top: 0; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
.tiles--sec li { cursor: pointer; transition: transform .2s, box-shadow .2s, border-color .2s; }
.tiles--sec li.is-on { border-color: var(--gold); box-shadow: 0 10px 26px rgb(167 119 56 / .22); }
.sec-dots { display: flex; justify-content: center; gap: 7px; margin-top: 16px; }
.sec-dots i { width: 8px; height: 8px; border-radius: 50%; background: rgb(36 3 5 / .18); cursor: pointer; transition: background .3s, transform .3s; }
.sec-dots i.on { background: var(--gold); transform: scale(1.35); }
.sec-screen .ss { position: absolute; inset: 0; display: grid; grid-template-columns: 1fr 26%; grid-template-rows: 1fr 15%; gap: 1.2cqw; padding: 1.2cqw; background: #000; opacity: 0; transform: scale(1.03); transition: opacity .6s, transform .6s; }
.sec-screen .ss.on { opacity: 1; transform: none; }
.ss__main { border-radius: 1cqw; background: linear-gradient(135deg, var(--c1), var(--c2)); display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 1.4cqw; color: #fff; text-align: center; padding: 2cqw; position: relative; overflow: hidden; }
.ss__main::after { content: ""; position: absolute; inset: -40%; background: radial-gradient(circle, rgb(255 255 255 / .18), transparent 60%); animation: sheen 6s linear infinite; }
@keyframes sheen { from { transform: translateX(-30%) rotate(0); } to { transform: translateX(30%) rotate(360deg); } }
.ss__icon { font-size: 9cqw; line-height: 1; animation: bob 3s ease-in-out infinite; }
@keyframes bob { 50% { transform: translateY(-6%) scale(1.05); } }
.ss__title { font: 600 4.2cqw/1.1 var(--font-display); text-shadow: 0 2px 10px rgb(0 0 0 / .35); }
.ss__side { border-radius: 1cqw; background: #111; display: flex; flex-direction: column; justify-content: space-between; align-items: center; padding: 2cqw 1cqw; color: #fff; }
.ss__clock { font: 600 5cqw var(--font-ui); letter-spacing: .02em; }
.ss__bars { display: flex; align-items: flex-end; gap: 1cqw; height: 40%; }
.ss__bars i { width: 2.2cqw; background: var(--c2); border-radius: .4cqw; animation: bars 1.6s ease-in-out infinite; }
.ss__bars i:nth-child(1) { height: 40%; } .ss__bars i:nth-child(2) { height: 75%; animation-delay: .2s; } .ss__bars i:nth-child(3) { height: 55%; animation-delay: .4s; }
@keyframes bars { 50% { transform: scaleY(.55); } }
.ss__bars i { transform-origin: bottom; }
.ss__ticker { grid-column: 1 / -1; border-radius: 1cqw; background: var(--c1); color: #fff; overflow: hidden; display: flex; align-items: center; font: 500 2.6cqw var(--font-ui); white-space: nowrap; }
.ss__ticker span { padding-left: 100%; animation: tick 9s linear infinite; }
@keyframes tick { to { transform: translateX(-100%); } }
.ss__stamp { position: absolute; left: 6%; top: 10%; background: var(--red); color: #fff; font: 700 2.6cqw var(--font-ui); font-style: normal; padding: .8cqw 2cqw; border-radius: .8cqw; transform: rotate(-8deg); box-shadow: 0 1cqw 2cqw rgb(0 0 0 / .4); animation: stampIn .6s .4s both cubic-bezier(.2, 1.6, .4, 1); }
@keyframes stampIn { from { transform: rotate(-30deg) scale(2); opacity: 0; } }

/* ---------- il prezzo che cambia ---------- */
.flip { display: grid; grid-template-columns: minmax(0, .7fr) auto minmax(0, 1fr); align-items: center; gap: 22px; max-width: 760px; margin: 2.2rem auto 0; }
.flip__paper { background: #f4efe4; color: #3a2a20; border-radius: 6px; padding: 18px; display: grid; gap: 6px; transform: rotate(-3deg); box-shadow: 0 14px 30px rgb(0 0 0 / .35); filter: saturate(.6); }
.flip__paper b { font-family: var(--font-display); }
.flip__paper s { font-size: 1.3rem; }
.flip__paper i { font-style: normal; opacity: .7; }
.flip__arrow { color: var(--gold-light); font-size: 2rem; animation: nudge 1.6s ease-in-out infinite; }
@keyframes nudge { 50% { transform: translateX(6px); } }
.flip__screen { background: linear-gradient(135deg, #1a0204, #5C1A1B); color: #fff; display: grid; place-content: center; text-align: center; gap: 1.5cqw; }
.flip__name { font: 600 5cqw var(--font-display); }
.flip__price { font: 600 4cqw var(--font-ui); }
.flip__price s { opacity: .55; font-size: 3.4cqw; margin-right: 1.5cqw; }
.flip__price strong { display: inline-block; font-size: 9cqw; color: var(--gold-light); }
.flip__price strong.pop { animation: pop .6s cubic-bezier(.2, 1.6, .4, 1); }
@keyframes pop { from { transform: scale(.4) rotateX(90deg); opacity: 0; } }
.flip__stamp { position: absolute; right: 5%; top: 9%; background: var(--red); color: #fff; font: 700 2.8cqw var(--font-ui); font-style: normal; padding: .8cqw 2cqw; border-radius: .8cqw; transform: rotate(8deg); opacity: 0; transition: opacity .4s; }
.flip__screen.sale .flip__stamp { opacity: 1; }
.flip__clock { position: absolute; left: 4%; bottom: 6%; font: 600 2.6cqw var(--font-ui); color: rgb(255 255 255 / .6); }
@media (max-width: 640px) { .flip { grid-template-columns: 1fr; } .flip__arrow { transform: rotate(90deg); justify-self: center; animation: none; } .flip__paper { max-width: 260px; justify-self: center; } }

/* ---------- entrate allo scorrimento ---------- */
.rv { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .7s ease; transition-delay: var(--rv-d, 0ms); }
.rv.rv-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .ss__main::after, .ss__icon, .ss__bars i, .ss__ticker span, .flip__arrow { animation: none !important; } }
@media print { .rv { opacity: 1 !important; transform: none !important; } }

.as-modes { margin-top: 1.2rem; max-width: 70ch; padding: 14px 18px; border-left: 4px solid var(--gold); background: rgb(255 255 255 / .06); border-radius: 0 12px 12px 0; }

/* «In arrivo»: bollino in apertura */
.soon { display: inline-flex; align-items: center; gap: .55rem; margin: 0 0 1rem; padding: .4rem .9rem; border-radius: 999px; background: rgb(231 203 148 / .14); border: 1px solid rgb(231 203 148 / .45); color: var(--gold-light); font-size: .85rem; font-weight: 600; }
.soon__dot { width: .55rem; height: .55rem; border-radius: 50%; background: #6fcf8f; box-shadow: 0 0 0 0 rgb(111 207 143 / .6); animation: soonPulse 2s ease-out infinite; }
@keyframes soonPulse { to { box-shadow: 0 0 0 .6rem rgb(111 207 143 / 0); } }
@media (prefers-reduced-motion: reduce) { .soon__dot { animation: none; } }


/* ================= 3D: le stesse scene del manuale, con le schermate vere dell'app ================= */
[data-scene] { position: relative; }
:is(.duo, .diagram, .gallery3d)[data-scene].is-3d > :not(.view3d):not(.tag3d):not(.print3d) { visibility: hidden; }
.view3d { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; }
[data-scene].is-3d { cursor: grab; touch-action: pan-y; }
.tag3d { position: absolute; z-index: 6; visibility: hidden; transform: translate(-50%, -50%); padding: 3px 11px; border-radius: 999px; background: var(--ink); color: var(--gold-light); font: 700 .78rem/1.4 var(--font-ui, system-ui); white-space: nowrap; box-shadow: 0 2px 8px rgb(0 0 0 / .3); pointer-events: none; }
.duo[data-scene].is-3d { min-height: 380px; }
.diagram[data-scene].is-3d { min-height: 420px; }
.gallery3d { aspect-ratio: 16 / 7; margin: 2rem 0 1rem; }
.gallery3d__flat { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; align-items: center; height: 100%; }
.gallery3d__flat img { width: 100%; border-radius: 10px; box-shadow: 0 10px 30px rgb(0 0 0 / .4); }
.shots { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1rem, 3vw, 2.5rem); margin-top: 1.5rem; }
.shot { margin: 0; }
.shot img { display: block; width: 100%; height: auto; border-radius: 18px; border: 8px solid #1b1b1e; box-shadow: 0 24px 50px rgb(0 0 0 / .45); }
.shot figcaption { margin-top: .9rem; color: var(--on-ink-soft, #cdbfae); font-size: .95rem; }
@media (max-width: 760px) { .shots { grid-template-columns: 1fr; } .gallery3d { aspect-ratio: 16 / 10; } }

/* prospettiva 3D per i televisori animati e le schermate */
.tilt3d { transform-style: preserve-3d; animation: tilt3d 10s ease-in-out infinite alternate; transform-origin: 50% 60%; }
.tilt3d--r { animation-name: tilt3dR; }
@keyframes tilt3d { from { transform: perspective(1400px) rotateY(12deg) rotateX(4deg); } to { transform: perspective(1400px) rotateY(4deg) rotateX(2deg) translateY(-6px); } }
@keyframes tilt3dR { from { transform: perspective(1400px) rotateY(-12deg) rotateX(4deg); } to { transform: perspective(1400px) rotateY(-4deg) rotateX(2deg) translateY(-6px); } }
@media (prefers-reduced-motion: reduce) { .tilt3d { animation: none; transform: perspective(1400px) rotateY(6deg); } }

/* Collegamenti 3D: un piano grigio come un tavolo, che sfuma verso il bianco ai lati */
.diagram[data-scene].is-3d { background: radial-gradient(ellipse 62% 70% at 50% 62%, #c9ccd0 0%, #d9dbde 38%, #ecedee 62%, rgb(250 250 247 / 0) 88%); border-radius: 24px; }

/* telefono: le scene 3D hanno una forma fissa, il disegno di riserva non occupa spazio */
@media (max-width: 640px) {
  :is(.duo, .diagram, .gallery3d)[data-scene].is-3d > :not(.view3d):not(.tag3d):not(.print3d) { display: none; }
  .duo[data-scene].is-3d { min-height: 0; aspect-ratio: 1 / 0.7; }
  .diagram[data-scene].is-3d { min-height: 0; aspect-ratio: 1 / 0.8; }
  .gallery3d.is-3d { aspect-ratio: 16 / 9; margin: 1rem 0 .5rem; }
  :is(.duo, .diagram, .gallery3d) .tag3d { font-size: .66rem; padding: 2px 8px; }
  .tilt3d { animation: none; transform: none; }
}

/* Veli d'occasione: esempi */
.veils { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 1rem 0 0; }
.veils figure { margin: 0; }
.veils img { display: block; width: 100%; height: auto; border-radius: 10px; box-shadow: 0 8px 22px rgb(0 0 0 / .3); }
.veils figcaption { margin-top: .4rem; font-size: .9rem; text-align: center; }
.veils__title { margin-top: 2.5rem; }
@media (max-width: 760px) { .veils { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Il video «Dalla scatola allo schermo acceso» */
.film { max-width: 980px; margin: 0 auto; }
.film__player { position: relative; border-radius: 14px; overflow: hidden; box-shadow: 0 24px 60px rgb(0 0 0 / .5); background: #14090c; }
.film video { display: block; width: 100%; height: auto; cursor: pointer; }
.film__play { position: absolute; left: 50%; top: 50%; width: 84px; height: 84px; margin: -42px 0 0 -42px; border: 0; border-radius: 50%; background: rgb(20 9 12 / .6); color: #fff; cursor: pointer; transition: opacity .3s, transform .2s; backdrop-filter: blur(4px); }
.film__play svg { width: 40px; height: 40px; fill: currentColor; }
.film__play .i-pause { display: none; }
.film__play:hover { transform: scale(1.06); }
.film__player.is-playing .film__play { opacity: 0; }
.film__player.is-playing:hover .film__play { opacity: .85; }
.film__player.is-playing .film__play .i-play { display: none; }
.film__player.is-playing .film__play .i-pause { display: inline; }
.film__fs { position: absolute; right: 10px; bottom: 14px; width: 36px; height: 36px; border: 0; border-radius: 8px; background: rgb(20 9 12 / .5); color: #fff; cursor: pointer; opacity: .8; }
.film__fs svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.film__bar { position: absolute; left: 0; right: 0; bottom: 0; height: 6px; background: rgb(255 255 255 / .18); cursor: pointer; }
.film__bar span { display: block; height: 100%; width: 0; background: #e9c98a; }
.film__steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 22px; margin: 1.4rem 0 0; padding: 0; list-style: none; counter-reset: s; }
.film__steps li { counter-increment: s; font-size: .95rem; line-height: 1.4; transition: color .3s; }
.film__steps li::before { content: counter(s); display: inline-grid; place-items: center; width: 1.6em; height: 1.6em; margin-right: .5em; border-radius: 50%; background: rgb(201 164 92 / .3); color: #7a5418; font-weight: 700; font-size: .85em; }
.film__steps li.is-now { color: #8b2a2e; font-weight: 600; }
@media (max-width: 760px) { .film__steps { grid-template-columns: 1fr; } }
.film__player:fullscreen { display: flex; align-items: center; border-radius: 0; background: #000; }
.film__player:fullscreen video { height: 100%; object-fit: contain; }

/* ---------- Le novità, build 21 (9.10.2026): sette esempi animati, solo CSS e SVG ---------- */
@media (max-width: 1040px) { .bar__nav { display: none; } .bar__lang { margin-left: auto; } }
.ic--table::after { background: linear-gradient(var(--gold-light), var(--gold-light)) 0 0 / 100% 4px no-repeat, repeating-linear-gradient(#fff 0 2px, transparent 2px 6px) 0 7px / 55% 100% no-repeat, repeating-linear-gradient(var(--gold-light) 0 2px, transparent 2px 6px) 100% 7px / 28% 100% no-repeat; }
.ic--count::after { border-radius: 50%; inset: 9px; background: conic-gradient(var(--gold-light) 0 68%, rgb(231 203 148 / .25) 68%); -webkit-mask: radial-gradient(circle, transparent 0 42%, #000 44%); mask: radial-gradient(circle, transparent 0 42%, #000 44%); }
.ic--web::after { inset: 10px; border-radius: 4px; border: 2px solid var(--gold-light); background: linear-gradient(var(--gold-light), var(--gold-light)) 0 0 / 100% 5px no-repeat, repeating-linear-gradient(rgb(255 255 255 / .8) 0 2px, transparent 2px 5px) 3px 9px / 70% 60% no-repeat; }

.nvs { list-style: none; padding: 0; margin: 2.4rem 0 0; display: grid; gap: 18px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.nv { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 14px 20px; display: grid; gap: 6px; align-content: start; min-width: 0; }
.nv > b { margin-top: 8px; font-size: 1.05rem; }
.nv > span { color: var(--text-soft); font-size: .93rem; }
.nv__stage { position: relative; aspect-ratio: 16 / 10; border-radius: 12px; overflow: hidden; background: linear-gradient(160deg, #2a1c19, #140c0b); container-type: inline-size; font-size: 12px; color: #fff; }
.nv__stage i { display: block; font-style: normal; }
.nv__stage [data-t] { font-family: var(--font-ui); }
#novita .tip { margin-top: 1.6rem; }
#novita .tip a { color: var(--gold); font-weight: 600; }

/* 1 · Tutor */
.nv1__bubble { position: absolute; left: 4%; top: 5%; max-width: 70%; background: #1F6FEB; border-radius: 2.6cqw; padding: 1.6cqw 3cqw; font-size: 11px; font-size: 3.5cqw; font-weight: 600; line-height: 1.25; box-shadow: 0 4px 14px rgb(0 0 0 / .4); z-index: 2; }
.nv1__tv { position: absolute; left: 4%; top: 30%; width: 54%; bottom: 8%; background: #000; border-radius: 1.6cqw; outline: 1px solid rgb(255 255 255 / .18); }
.nv1__line { position: absolute; left: 50%; top: 6%; bottom: 6%; width: 0; border-left: .9cqw dashed #1F6FEB; transform-origin: top; animation: nv1line 9s ease-in-out infinite; }
.nv1__hand { position: absolute; left: 50%; top: 88%; width: 6cqw; height: 6cqw; margin: -3cqw 0 0 -3cqw; border-radius: 50%; background: #f3d9b8; box-shadow: 0 0 0 2cqw rgb(243 217 184 / .28); opacity: 0; animation: nv1hand 9s ease-in-out infinite; }
.nv1__panel { position: absolute; right: 4%; top: 30%; width: 34%; bottom: 8%; background: #fbf8f3; border-radius: 2cqw; padding: 3cqw 2.4cqw; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6cqw; align-content: start; }
.nv1__frame { position: absolute; inset: 0; border-radius: 2cqw; border: .9cqw solid #1F6FEB; animation: nv1show 9s step-end infinite, nvblink .9s ease-in-out infinite; }
.nv1__t { aspect-ratio: 1; border-radius: 1.4cqw; background: #d9e6fb; }
.nv1__t:nth-of-type(4) { background: #e3d6f6; }
.nv1__t.pick { background: #cdebd2; outline: .7cqw solid #1F6FEB; animation: nvblink .9s ease-in-out infinite; }
.nv1__field { grid-column: 1 / -1; height: 6cqw; margin-top: 2cqw; border-radius: 1.4cqw; background: #fff; border: 1px solid #c9bfb2; padding: 1.8cqw 1.6cqw; }
.nv1__field i { height: 100%; width: 70%; border-radius: 1cqw; background: #3d2f2a; transform-origin: left; animation: nv1type 9s linear infinite; }
.nv1__arrow { position: absolute; right: 1cqw; bottom: 30%; width: 8cqw; height: 8cqw; border-radius: 50%; background: #1F6FEB; border: .6cqw solid #fff; animation: nv1arrow 9s ease-in-out infinite; }
.nv1__arrow::after { content: ""; position: absolute; inset: 26%; background: #fff; clip-path: polygon(100% 35%, 45% 35%, 45% 5%, 0 50%, 45% 95%, 45% 65%, 100% 65%); }
@keyframes nv1line { 0%, 6% { transform: scaleY(0); } 34%, 96% { transform: scaleY(1); } 100% { transform: scaleY(0); } }
@keyframes nv1hand { 0%, 5% { top: 6%; opacity: 0; } 8% { top: 6%; opacity: 1; } 34% { top: 94%; opacity: 1; } 40%, 100% { top: 94%; opacity: 0; } }
@keyframes nv1show { 0% { visibility: hidden; } 42% { visibility: visible; } }
@keyframes nv1arrow { 0%, 52% { opacity: 0; transform: translateX(8cqw); } 58%, 76% { opacity: 1; transform: none; } 80%, 100% { opacity: 0; transform: none; } }
@keyframes nv1type { 0%, 78% { transform: scaleX(0); } 94%, 100% { transform: scaleX(1); } }
@keyframes nvblink { 50% { opacity: .25; } }

/* 2 · Base / Pro */
.nv2__sw { position: absolute; left: 14%; right: 14%; top: 7%; height: 15%; border-radius: 2.4cqw; background: rgb(255 255 255 / .14); display: grid; grid-template-columns: 1fr 1fr; align-items: center; text-align: center; font-size: 12px; font-size: 4cqw; font-weight: 700; }
.nv2__sw span { position: relative; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 0 1cqw; }
.nv2__knob { position: absolute; left: 1.5%; top: 9%; bottom: 9%; width: 48.500%; border-radius: 1.9cqw; background: #1F6FEB; transform: translateX(100%); animation: nv2knob 8s ease-in-out infinite; }
.nv2__grid { position: absolute; left: 7%; right: 7%; top: 30%; display: grid; grid-template-columns: repeat(6, 1fr); gap: 2cqw; }
.nv2__grid i { aspect-ratio: 5 / 4; border-radius: 1.5cqw; background: color-mix(in srgb, var(--c) 78%, #fff); }
.nv2__grid i.p { animation: nv2in 8s ease-out infinite; animation-delay: calc(var(--d) * 90ms); }
.nv2__tap { position: absolute; left: 61%; top: 9%; width: 7cqw; height: 7cqw; border-radius: 50%; background: #f3d9b8; box-shadow: 0 0 0 2cqw rgb(243 217 184 / .3); opacity: 0; animation: nv2tap 8s ease-in-out infinite; }
@keyframes nv2knob { 0%, 34% { transform: none; } 40%, 94% { transform: translateX(100%); } 100% { transform: none; } }
@keyframes nv2in { 0%, 40% { opacity: 0; transform: scale(.3); } 47% { opacity: 1; transform: scale(1.12); } 51%, 90% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; transform: scale(.3); } }
@keyframes nv2tap { 0%, 22% { opacity: 0; transform: translate(6cqw, 10cqw); } 30% { opacity: 1; transform: none; } 34% { transform: scale(.8); } 42%, 100% { opacity: 0; transform: none; } }

/* 3 · Linea lunga e Allinea */
.nv3__scr { position: absolute; top: 9%; height: 60%; width: 43%; background: #000; border-radius: 1.4cqw; outline: 1px solid rgb(255 255 255 / .18); overflow: hidden; }
.nv3__a { left: 5%; } .nv3__b { right: 5%; }
.nv3__scr i { position: absolute; background: var(--gold-light); }
.nv3__scr .v { left: 50%; top: 0; height: 62%; width: .7cqw; }
.nv3__a .v2 { left: 50%; top: 62%; bottom: 0; width: .7cqw; opacity: 0; animation: nv3v2 9s step-end infinite; }
.nv3__a .long { left: 0; right: 0; top: 62%; height: .7cqw; transform-origin: left; animation: nv3long 9s ease-in-out infinite; }
.nv3__a .band { left: 0; right: 0; top: 64%; bottom: 0; background: #7a1e25; animation: nv3band 9s ease-in-out infinite; }
.nv3__a .hand, .nv3__b .hand { width: 5cqw; height: 5cqw; border-radius: 50%; background: #f3d9b8; }
.nv3__a .hand { left: 0; top: 62%; margin: -2.5cqw 0 0 -2.5cqw; opacity: 0; animation: nv3hand 9s ease-in-out infinite; }
.nv3__ask { position: absolute; left: 12%; right: 12%; top: 16%; display: grid; gap: 1.4cqw; padding: 2cqw; border-radius: 1.8cqw; background: rgb(250 246 239 / .96); opacity: 0; animation: nv3ask 9s ease-in-out infinite; }
.nv3__ask b { height: 4.4cqw; border-radius: 2.2cqw; background: #d8cdbf; }
.nv3__ask b.on { background: #1F6FEB; animation: nvblink .9s ease-in-out infinite; }
.nv3__b .v { height: 100%; }
.nv3__b .l1 { left: 0; width: 50%; top: 38%; height: .7cqw; }
.nv3__b .l2 { left: 50%; right: 0; top: 38%; height: .7cqw; animation: nv3l2 9s ease-in-out infinite; }
.nv3__b .sel { background: none; border: .7cqw solid #1F6FEB; inset: 3% 53% 3% 3%; opacity: 0; animation: nv3sel 9s ease-in-out infinite; }
.nv3__b .sel.s2 { inset: 3% 3% 3% 53%; animation-delay: .5s; }
.nv3__b .ok { right: 6%; bottom: 8%; width: 7cqw; height: 7cqw; border-radius: 50%; background: #2f7d4f; animation: nv3ok 9s ease-in-out infinite; }
.nv3__b .ok::after { content: ""; position: absolute; left: 30%; top: 22%; width: 28%; height: 46%; border: solid #fff; border-width: 0 .9cqw .9cqw 0; transform: rotate(40deg); }
.nv3__btn { position: absolute; right: 5%; bottom: 8%; width: 43%; text-align: center; padding: 1.4cqw 1cqw; border-radius: 2cqw; background: rgb(231 203 148 / .2); color: var(--gold-light); font-size: 11px; font-size: 3.6cqw; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; animation: nv3btn 9s ease-in-out infinite; }
@keyframes nv3long { 0%, 5% { transform: scaleX(0); } 24%, 96% { transform: scaleX(1); } 100% { transform: scaleX(0); } }
@keyframes nv3hand { 0%, 4% { left: 0; opacity: 0; } 6% { left: 0; opacity: 1; } 24% { left: 100%; opacity: 1; } 28%, 100% { left: 100%; opacity: 0; } }
@keyframes nv3ask { 0%, 26% { opacity: 0; transform: translateY(2cqw); } 31%, 50% { opacity: 1; transform: none; } 55%, 100% { opacity: 0; transform: none; } }
@keyframes nv3v2 { 0% { opacity: 1; } 55% { opacity: 0; } }
@keyframes nv3band { 0%, 54% { opacity: 0; } 60%, 96% { opacity: 1; } 100% { opacity: 0; } }
@keyframes nv3l2 { 0%, 58% { transform: translateY(9cqw); } 66%, 96% { transform: none; } 100% { transform: translateY(9cqw); } }
@keyframes nv3sel { 0%, 26% { opacity: 0; } 32%, 56% { opacity: 1; } 62%, 100% { opacity: 0; } }
@keyframes nv3ok { 0%, 66% { opacity: 0; transform: scale(.4); } 72%, 94% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes nv3btn { 0%, 12% { background: rgb(231 203 148 / .2); } 18%, 26% { background: rgb(231 203 148 / .55); } 34%, 100% { background: rgb(231 203 148 / .2); } }

/* 4 · Elemento animato */
.nv4 { background: linear-gradient(180deg, #1C2541, #0B1020); }
.nv4__bg i { position: absolute; background: rgb(255 255 255 / .1); border-radius: 1.4cqw; }
.nv4__bg i:nth-child(1) { left: 6%; top: 10%; width: 40%; height: 46%; }
.nv4__bg i:nth-child(2) { left: 6%; top: 62%; width: 40%; height: 6%; }
.nv4__bg i:nth-child(3) { left: 6%; top: 72%; width: 28%; height: 6%; }
.nv4__el { position: absolute; right: 7%; top: 22%; max-width: 50%; padding: 3cqw 6cqw; border-radius: 99px; background: #B3202A; font-size: 15px; font-size: 6cqw; font-weight: 800; box-shadow: 0 6px 18px rgb(0 0 0 / .45); animation: nv4el 9s ease-in-out infinite; }
.nv4__el span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nv4__time { position: absolute; left: 6%; right: 6%; bottom: 7%; height: 1.4cqw; border-radius: 1cqw; background: rgb(255 255 255 / .16); overflow: hidden; }
.nv4__time i { height: 100%; background: var(--gold-light); transform-origin: left; animation: nv4time 9s linear infinite; }
@keyframes nv4el {
  0%, 6% { opacity: 0; transform: translateX(-90cqw) rotate(-8deg); }
  14% { opacity: 1; transform: translateX(3cqw); } 17% { transform: translateX(-1.5cqw); } 20%, 40% { opacity: 1; transform: none; }
  44%, 54% { opacity: 0; transform: none; } 58% { opacity: 1; transform: none; }
  64% { transform: scale(1.1); } 70% { transform: scale(1); } 76% { transform: scale(1.1); } 82% { transform: scale(1); }
  92% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; transform: none; }
}
@keyframes nv4time { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* 5 · Conto alla rovescia, orologio, listino */
.nv5 { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 5% 3%; padding: 4%; }
.nv5 > div { background: #000; border-radius: 1.6cqw; outline: 1px solid rgb(255 255 255 / .16); position: relative; overflow: hidden; }
.nv5__cd { display: flex; align-items: center; justify-content: center; gap: 1.6cqw; font-size: 15px; font-size: 6.4cqw; font-weight: 800; font-variant-numeric: tabular-nums; }
.nv5__cd b { background: #2a201d; border: 1px solid var(--gold); border-radius: 1.2cqw; padding: .6cqw 1.6cqw; line-height: 1.25; height: 1.25em; box-sizing: content-box; overflow: hidden; color: #f7f1e6; }
.nv5__cd .s i { animation: nv5sec 10s steps(10) infinite; }
@keyframes nv5sec { to { transform: translateY(-100%); } }
.nv5__ck::before { content: ""; position: absolute; left: 50%; top: 50%; width: 21cqw; height: 21cqw; margin: -10.500cqw; border-radius: 50%; border: .8cqw solid var(--gold-light); background: repeating-conic-gradient(from -1deg, var(--gold-light) 0 2deg, transparent 2deg 30deg); -webkit-mask: radial-gradient(circle, transparent 0 58%, #000 60%); mask: radial-gradient(circle, transparent 0 58%, #000 60%); }
.nv5__ck i { position: absolute; left: 50%; bottom: 50%; transform-origin: bottom center; border-radius: 1cqw; background: #fff; }
.nv5__ck .h { width: 1.2cqw; height: 5.500cqw; margin-left: -.6cqw; transform: rotate(-60deg); }
.nv5__ck .m { width: .9cqw; height: 8cqw; margin-left: -.45cqw; animation: nv5rot 120s linear infinite; }
.nv5__ck .s { width: .4cqw; height: 9cqw; margin-left: -.2cqw; background: #e0262f; animation: nv5rot 12s steps(60) infinite; }
@keyframes nv5rot { to { transform: rotate(360deg); } }
.nv5__tb { grid-column: 2; grid-row: 1 / 3; padding: 3cqw; }
.nv5__tb > b { display: block; height: 3.4cqw; border-radius: 1cqw; background: var(--gold); margin-bottom: 2.4cqw; }
.nv5__tb .pg { position: absolute; left: 3cqw; right: 3cqw; top: 9.500cqw; display: grid; gap: 2.6cqw; }
.nv5__tb p { margin: 0; display: flex; align-items: center; justify-content: space-between; gap: 2cqw; font-size: 10px; font-size: 3.6cqw; font-weight: 700; color: var(--gold-light); font-variant-numeric: tabular-nums; }
.nv5__tb p i { flex: 1; max-width: 62%; height: 1.5cqw; border-radius: 1cqw; background: #f7f1e6; }
.nv5__tb p:nth-child(2) i { max-width: 46%; }
.nv5__tb em { font-style: normal; }
.nv5__tb .pg1 { animation: nv5pg 8s ease-in-out infinite; }
.nv5__tb .pg2 { opacity: 0; animation: nv5pg 8s ease-in-out -4s infinite; }
@keyframes nv5pg { 0%, 44% { opacity: 1; transform: none; } 50%, 94% { opacity: 0; transform: translateY(-2cqw); } 100% { opacity: 1; transform: none; } }

/* 6 · Chi trasmette cosa */
.nv6 { background: linear-gradient(160deg, #f6f1e8, #e9dfd0); }
.nv6 svg { display: block; width: 100%; height: 100%; }
.nv6 .ln { fill: none; stroke: #A8957C; stroke-width: 2; stroke-linecap: round; stroke-dasharray: 1; animation: nv6ln 9s ease-in-out infinite; }
.nv6 .ln.b { animation-name: nv6lnb; }
.nv6 .nd > rect:first-child { fill: #fff; stroke: rgb(36 3 5 / .3); stroke-width: 1; }
.nv6 .n0 > rect:first-child { stroke: var(--gold); stroke-width: 2; }
.nv6 .dk { fill: #1b1412; } .nv6 .gr { fill: #d8cdbf; }
.nv6 .n1 { animation: nv6n1 9s ease-in-out infinite; } .nv6 .n2 { animation: nv6n2 9s ease-in-out infinite; }
.nv6 .pv1 { fill: #7a1e25; } .nv6 .pv2 { fill: #c9a45c; opacity: 0; animation: nv6alt 9s step-end infinite; }
.nv6 .air rect { fill: #e0262f; } .nv6 .air text { fill: #fff; font: 800 6px var(--font-ui); text-anchor: middle; letter-spacing: .03em; }
.nv6 .air.a1 { animation: nv6a1 9s step-end infinite; } .nv6 .air.a2 { opacity: 0; animation: nv6alt 9s step-end infinite; }
@keyframes nv6ln { 0%, 6% { stroke-dashoffset: 1; } 20%, 96% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 1; } }
@keyframes nv6lnb { 0%, 24% { stroke-dashoffset: 1; } 38%, 96% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 1; } }
@keyframes nv6n1 { 0%, 14% { opacity: 0; } 22%, 96% { opacity: 1; } 100% { opacity: 0; } }
@keyframes nv6n2 { 0%, 32% { opacity: 0; } 40%, 96% { opacity: 1; } 100% { opacity: 0; } }
@keyframes nv6alt { 0% { opacity: 0; } 68% { opacity: 1; } }
@keyframes nv6a1 { 0% { opacity: 1; } 68% { opacity: 0; } }

/* 7 · Aiuto */
.nv7 { background: linear-gradient(160deg, #f6f1e8, #e9dfd0); color: var(--text); padding: 4%; display: flex; flex-direction: column; justify-content: center; gap: 4%; }
.nv7__q { align-self: flex-end; max-width: 92%; background: #1F6FEB; color: #fff; border-radius: 3cqw 3cqw .8cqw 3cqw; padding: 1.8cqw 3cqw; font-size: 12px; font-size: 4.2cqw; font-weight: 600; line-height: 1.25; }
.nv7__q span { display: block; animation: nv7type 10s steps(26) infinite; }
.nv7__a { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.8cqw; counter-reset: a; }
.nv7__a li { counter-increment: a; position: relative; background: #fff; border-radius: 2cqw; padding: 1.5cqw 2.4cqw 1.5cqw 9cqw; font-size: 11px; font-size: 3.9cqw; line-height: 1.25; box-shadow: 0 1px 4px rgb(36 3 5 / .12); animation: nv7in 10s ease-out infinite; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.nv7__a li::before { content: counter(a); position: absolute; left: 2cqw; top: 1.3cqw; width: 5cqw; height: 5cqw; border-radius: 50%; background: var(--ink); color: var(--gold-light); font-weight: 700; display: grid; place-items: center; font-size: 3.1cqw; }
.nv7__a li:nth-child(2) { animation-name: nv7in2; } .nv7__a li:nth-child(3) { animation-name: nv7in3; }
@keyframes nv7type { 0%, 4% { clip-path: inset(0 100% 0 0); } 30%, 100% { clip-path: inset(0 0 0 0); } }
@keyframes nv7in { 0%, 36% { opacity: 0; transform: translateY(2cqw); } 42%, 95% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes nv7in2 { 0%, 48% { opacity: 0; transform: translateY(2cqw); } 54%, 95% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes nv7in3 { 0%, 60% { opacity: 0; transform: translateY(2cqw); } 66%, 95% { opacity: 1; transform: none; } 100% { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .nv__stage *, .nv__stage *::before, .nv__stage *::after { animation: none !important; }
  .nv3__a .hand, .nv3__ask, .nv3__b .sel, .nv2__tap, .nv1__hand { opacity: 0; }
}
@media print { .nv__stage *, .nv__stage *::before, .nv__stage *::after { animation: none !important; } }