/* helpdeskincloud.it — il disegno PROPRIO dell'helpdesk (2026-10-20): scena d'apertura «la coda e la conversazione»,
   schermate delle caratteristiche, tabellone dei numeri, biglietto dell'invito finale e sezioni della home. Caricato SOLO
   da questo pacchetto (n6_asset_pacchetto), dopo n6.css. Classi tutte «hd-». Il movimento lo danno hd.js (classe
   «acceso» sulle schermate a video) e bx-vivo del tema. Accento: l'azzurro cielo (#0284c7) con l'ambra del «tocca a noi». */

/* ============================================================ pezzi comuni */
.hd-riga-num { font: 800 12.5px var(--mono); color: #0369a1; }
.hd-turno { display: inline-block; padding: 3px 9px; border-radius: 999px; font: 700 11.5px Inter, sans-serif; white-space: nowrap; }
.hd-turno.t-noi { background: #fef3c7; color: #92400e; }
.hd-turno.t-cliente { background: #e0f2fe; color: #075985; }
.hd-turno.t-chiuso { background: #f1f5f9; color: #64748b; }
.hd-av { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(160deg, #38bdf8, #0284c7); color: #fff; font: 800 14px Inter, sans-serif; }
.hd-av.b { background: linear-gradient(160deg, #a78bfa, #7c3aed); }
.hd-b { position: relative; margin: 0; max-width: 86%; padding: 11px 14px; border-radius: 16px; font: 500 14px/1.45 Inter, sans-serif; }
.hd-b.cli { background: #f1f5f9; color: var(--titolo); border-bottom-left-radius: 5px; }
.hd-b.op { margin-left: auto; background: #0284c7; color: #fff; border-bottom-right-radius: 5px; }
.hd-b.nota { margin: 0 auto; max-width: 92%; background: #fffbeb; color: #92400e; border: 1px dashed #fbbf24; font-size: 13px; }
.hd-b.nota i { margin-right: 5px; }
.hd-letto { display: block; margin-top: 5px; font: 600 11px Inter, sans-serif; color: #bae6fd; text-align: right; }
.hd-allegato { display: inline-flex; gap: 6px; align-items: center; margin-top: 7px; padding: 5px 9px; border-radius: 8px; background: rgba(255, 255, 255, .18); font: 600 12px Inter, sans-serif; }

/* ============================================================ la scena d'apertura */
.bx-scena--hd { height: 560px; }
.bx-scena--hd > * { position: absolute; }
/* la coda a sinistra */
.hd-coda { left: 0; top: 60px; width: 290px; padding: 16px 14px; border-radius: 22px; background: #fff; box-shadow: 0 30px 60px rgba(0, 25, 70, .4); }
.hd-coda-testa { display: flex; justify-content: space-between; align-items: baseline; padding: 0 4px 10px; }
.hd-coda-testa b { font: 800 16px var(--titoli); color: var(--titolo); }
.hd-coda-testa span { font: 700 12px Inter, sans-serif; color: #0369a1; }
.hd-riga { display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: 2px 8px; align-items: center; padding: 10px; border-radius: 13px; border: 1px solid transparent; }
.hd-riga + .hd-riga { margin-top: 4px; }
.hd-riga.scelta { background: #f0f9ff; border-color: #7dd3fc; }
.hd-riga-ogg { min-width: 0; }
.hd-riga-ogg b { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font: 700 13.5px Inter, sans-serif; color: var(--titolo); }
.hd-riga-ogg small { display: flex; gap: 5px; align-items: center; font: 500 11.5px Inter, sans-serif; color: var(--debole); }
.hd-riga-ogg small i { width: 8px; height: 8px; border-radius: 2px; background: var(--c); }
.hd-riga .hd-turno { grid-column: 2; justify-self: start; }
/* la conversazione al centro */
.hd-dialogo { left: 318px; top: 10px; width: 400px; padding: 18px; border-radius: 24px; background: #fff; box-shadow: 0 36px 72px rgba(0, 25, 70, .45); }
.hd-dialogo-testa { display: flex; gap: 10px; align-items: center; padding-bottom: 12px; border-bottom: 1px solid #e2e8f0; }
.hd-dialogo-num { display: grid; place-items: center; padding: 8px 9px; border-radius: 11px; background: #e0f2fe; font: 800 13px var(--mono); color: #0369a1; }
.hd-dialogo-testa b { display: block; font: 800 16px var(--titoli); color: var(--titolo); }
.hd-dialogo-testa small { font: 500 12px Inter, sans-serif; color: var(--debole); }
.hd-preso { margin-left: auto; padding: 5px 9px; border-radius: 999px; background: #ecfdf5; color: #047857; font: 700 11px Inter, sans-serif; white-space: nowrap; }
.hd-bolle { display: grid; gap: 9px; padding: 14px 0 12px; }
.hd-scrivi { display: flex; justify-content: space-between; align-items: center; padding: 11px 14px; border-radius: 13px; border: 1px solid #e2e8f0; font: 500 13px Inter, sans-serif; color: #94a3b8; }
.hd-scrivi i { color: #0284c7; }
/* i tempi a destra */
.hd-tempi { left: 746px; top: 90px; width: 206px; padding: 18px; border-radius: 22px; background: linear-gradient(165deg, #0c4a6e, #075985); color: #e0f2fe; box-shadow: 0 30px 60px rgba(0, 25, 70, .42); }
.hd-tempi small { font: 700 12.5px Inter, sans-serif; letter-spacing: .06em; text-transform: uppercase; opacity: .8; }
.hd-tempi-num { display: flex; align-items: baseline; gap: 6px; margin: 6px 0 2px; font: 900 54px/1 var(--titoli); color: #fff; }
.hd-tempi-num em { font: 700 18px Inter, sans-serif; font-style: normal; color: #7dd3fc; }
.hd-tempi-sotto { font: 500 12px Inter, sans-serif; opacity: .8; }
.hd-tempi-barre { display: flex; gap: 8px; align-items: flex-end; height: 70px; margin-top: 14px; }
.hd-tempi-barre i { flex: 1; height: var(--h); border-radius: 6px 6px 2px 2px; background: rgba(125, 211, 252, .35); }
.hd-tempi-barre i:last-child { background: #fbbf24; }
.hd-volante { display: flex; align-items: center; gap: 12px; padding: 12px 16px 12px 12px; border-radius: 18px; background: #fff; box-shadow: 0 22px 44px rgba(0, 25, 70, .32); z-index: 2; }
.hd-volante > i { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; color: #fff; font-size: 16px; background: linear-gradient(160deg, #a78bfa, #6d28d9); }
.hd-volante b { display: block; font: 800 14.5px var(--titoli); color: var(--titolo); }
.hd-volante small { font: 500 12px Inter, sans-serif; color: var(--debole); }
.hd-volante--1 { left: 700px; top: 380px; rotate: 2deg; }
.hd-volante--2 { left: 150px; top: 470px; rotate: -2deg; }
.hd-volante--2 > i { background: linear-gradient(160deg, #34d399, #059669); }

@keyframes hd-sale { from { opacity: 0; translate: 0 60px; } }
@keyframes hd-da-sx { from { opacity: 0; translate: -70px 0; } }
@keyframes hd-da-dx { from { opacity: 0; translate: 70px 0; } }
@keyframes hd-entra { from { opacity: 0; translate: 0 10px; } }
@keyframes hd-ondeggia { from { translate: 0 0; } to { translate: 0 -10px; } }
@keyframes hd-cresce { from { height: 0; } }
.bx-attesa .hd-coda, .bx-attesa .hd-dialogo, .bx-attesa .hd-tempi, .bx-attesa .hd-volante { opacity: 0; }
.bx-vivo .hd-dialogo { animation: hd-sale .8s .1s var(--ease) both; }
.bx-vivo .hd-coda { animation: hd-da-sx .85s .35s var(--ease) both; }
.bx-vivo .hd-tempi { animation: hd-da-dx .8s .5s var(--ease) both; }
.bx-vivo .hd-riga { animation: hd-entra .45s calc(.7s + var(--i) * .12s) both; }
.bx-vivo .hd-bolle .hd-b { animation: hd-entra .5s calc(.9s + var(--i) * .55s) both; }
.bx-vivo .hd-tempi-barre i { animation: hd-cresce .7s calc(1.1s + var(--k) * .12s) var(--ease) both; }
.bx-vivo .hd-volante--1 { animation: hd-sale .7s 2.6s var(--ease) both, hd-ondeggia 5s 3.3s ease-in-out infinite alternate; }
.bx-vivo .hd-volante--2 { animation: hd-sale .7s 3s var(--ease) both, hd-ondeggia 6s 3.7s ease-in-out infinite alternate; }

/* ============================================================ le schermate (accese da hd.js) */
/* la coda */
.hd-lista { display: grid; gap: 6px; }
.hd-filtri { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
.hd-filtri span { padding: 6px 10px; border-radius: 999px; background: #f1f5f9; font: 600 12px Inter, sans-serif; color: var(--tenue); }
.hd-filtri span.att { background: #0284c7; color: #fff; }
.hd-filtri b { margin-left: 3px; }
.hd-filtri .hd-cerca { flex-basis: 100%; border-radius: 10px; background: #fff; border: 1px solid var(--linea); color: #94a3b8; }
.hd-l-riga { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto 64px; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 11px; background: #fff; border: 1px solid var(--linea); font: 600 13px Inter, sans-serif; color: var(--titolo); opacity: 0; translate: 0 10px; transition: all .45s var(--ease); transition-delay: calc(.15s + var(--i) * .14s); }
.hd-l-riga b { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-weight: 700; }
.hd-l-riga time { font: 500 11.5px Inter, sans-serif; color: var(--debole); text-align: right; }
.acceso .hd-l-riga { opacity: 1; translate: 0 0; }
.acceso .hd-l-riga:first-of-type { box-shadow: 0 0 0 2px #7dd3fc; }
/* lo smistamento */
.hd-smista { display: grid; gap: 16px; }
.hd-smista-ticket { display: flex; gap: 10px; align-items: center; justify-self: center; padding: 12px 16px; border-radius: 14px; background: #fff; box-shadow: 0 10px 24px -10px rgba(0, 25, 70, .35); font: 700 14px Inter, sans-serif; color: var(--titolo); transition: translate .7s var(--ease); }
.acceso .hd-smista-ticket { translate: 60px 0; }
.hd-smista-cat { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.hd-cat { padding: 12px; border-radius: 14px; background: #fff; border: 2px solid var(--linea); transition: border-color .4s .6s, background .4s .6s; }
.hd-cat b { display: block; margin-bottom: 7px; font: 800 13.5px Inter, sans-serif; color: var(--c); }
.hd-cat span { display: block; margin-top: 4px; padding: 5px 8px; border-radius: 8px; background: #f8fafc; font: 600 12px Inter, sans-serif; color: var(--tenue); transition: all .4s .9s; }
.acceso .hd-cat.scelta { border-color: var(--c); background: color-mix(in srgb, var(--c) 7%, #fff); }
.acceso .hd-cat span.scelta { background: var(--c); color: #fff; }
.hd-livelli { display: flex; justify-content: center; align-items: center; gap: 14px; font: 700 13px Inter, sans-serif; color: var(--debole); }
.hd-livelli .lv { padding: 8px 12px; border-radius: 11px; background: #f1f5f9; transition: all .4s; }
.acceso .hd-livelli .lv1 { background: #e0f2fe; color: #075985; transition-delay: 1.2s; }
.acceso .hd-livelli .lv2 { background: #ede9fe; color: #5b21b6; box-shadow: 0 0 0 2px #c4b5fd; transition-delay: 2s; }
/* la presa in carico */
.hd-lucch { display: grid; grid-template-columns: minmax(0, 1fr) 70px minmax(0, 1fr); gap: 12px; align-items: center; }
.hd-op { display: grid; justify-items: center; gap: 4px; padding: 18px 12px; border-radius: 18px; background: #fff; box-shadow: 0 0 0 1px var(--linea); text-align: center; }
.hd-op b { font: 800 15px var(--titoli); color: var(--titolo); }
.hd-op small { font: 500 12px Inter, sans-serif; color: var(--debole); }
.hd-op-stato { margin-top: 6px; padding: 5px 10px; border-radius: 999px; font: 700 11.5px Inter, sans-serif; opacity: 0; transition: opacity .4s; }
.hd-op-stato.ok { background: #ecfdf5; color: #047857; transition-delay: .7s; }
.hd-op-stato.no { background: #fef2f2; color: #b91c1c; transition-delay: 1.6s; }
.acceso .hd-op-stato { opacity: 1; }
.hd-lucch-centro { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: #0c4a6e; color: #fbbf24; font-size: 24px; }
@keyframes hd-chiude { 0% { translate: 0 -8px; } 60% { translate: 0 2px; } 100% { translate: 0 0; } }
.acceso .hd-lucch-centro i { animation: hd-chiude .6s .5s both; }
.hd-sblocca { grid-column: 1 / -1; padding: 10px 12px; border-radius: 12px; background: #f8fafc; font: 600 12.5px Inter, sans-serif; color: var(--tenue); text-align: center; }
.hd-sblocca i { color: #0284c7; margin-right: 5px; }
/* la conversazione */
.hd-conv { display: grid; gap: 10px; }
.hd-conv .hd-b { opacity: 0; translate: 0 10px; transition: all .45s var(--ease); transition-delay: calc(.2s + var(--i) * .7s); }
.acceso .hd-conv .hd-b { opacity: 1; translate: 0 0; }
.hd-bozza { justify-self: start; font: 600 11.5px Inter, sans-serif; color: var(--debole); }
.hd-bozza i { margin-right: 4px; color: #0284c7; }
/* l'area del cliente */
.hd-web { border-radius: 16px; overflow: hidden; background: #fff; box-shadow: 0 20px 44px -18px rgba(0, 25, 70, .4), 0 0 0 1px var(--linea); }
.hd-web-barra { display: flex; gap: 6px; align-items: center; padding: 10px 14px; background: #0d9488; }
.hd-web-barra i { width: 9px; height: 9px; border-radius: 50%; background: rgba(255, 255, 255, .45); }
.hd-web-barra span { margin-left: 8px; font: 700 12.5px Inter, sans-serif; color: #fff; }
.hd-web-corpo { display: grid; gap: 12px; padding: 16px; }
.hd-web-riq { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.hd-web-riq div { padding: 10px; border-radius: 11px; background: #f0fdfa; }
.hd-web-riq div.tuo { background: #fef3c7; }
.hd-web-riq small { display: block; font-size: 11px; color: var(--debole); }
.hd-web-riq b { font: 800 20px var(--titoli); color: var(--titolo); }
.hd-web-nuovo { display: grid; gap: 7px; padding: 12px; border-radius: 12px; border: 1px dashed #5eead4; }
.hd-web-nuovo > b { font: 800 14px Inter, sans-serif; color: #0f766e; }
.hd-campo { padding: 8px 10px; border-radius: 9px; background: #f8fafc; font: 500 12.5px Inter, sans-serif; color: var(--tenue); opacity: 0; transition: opacity .35s; }
.hd-campo:nth-of-type(1) { transition-delay: .3s; } .hd-campo:nth-of-type(2) { transition-delay: .7s; } .hd-campo:nth-of-type(3) { transition-delay: 1.1s; }
.hd-campo.file i { color: #0d9488; margin-right: 4px; }
.acceso .hd-campo { opacity: 1; }
.hd-invia { justify-self: end; padding: 8px 14px; border-radius: 10px; background: #0d9488; color: #fff; font: 700 12.5px Inter, sans-serif; }
.hd-web-ok { padding: 9px 12px; border-radius: 10px; background: #ecfdf5; color: #047857; font: 700 12.5px Inter, sans-serif; opacity: 0; transition: opacity .4s 1.8s; }
.acceso .hd-web-ok { opacity: 1; }
/* l'email al cliente */
.hd-mail { position: relative; display: grid; justify-items: center; gap: 12px; padding: 10px 0; }
.hd-mail-busta { display: grid; place-items: center; width: 70px; height: 70px; border-radius: 20px; background: linear-gradient(160deg, #2dd4bf, #0f766e); color: #fff; font-size: 30px; transition: scale .4s var(--ease); }
.acceso .hd-mail-busta { scale: .85; }
.hd-mail-foglio { display: grid; gap: 7px; width: min(100%, 330px); padding: 16px; border-radius: 14px; background: #fff; box-shadow: 0 18px 40px -16px rgba(0, 25, 70, .4); opacity: 0; translate: 0 -20px; transition: all .6s var(--ease) .4s; }
.acceso .hd-mail-foglio { opacity: 1; translate: 0 0; }
.hd-mail-foglio small { font: 500 11.5px Inter, sans-serif; color: var(--debole); }
.hd-mail-foglio b { font: 800 15px var(--titoli); color: var(--titolo); }
.hd-mail-foglio > i { height: 7px; border-radius: 4px; background: #e2e8f0; }
.hd-mail-foglio > i + i { width: 70%; }
.hd-mail-link { justify-self: start; margin-top: 4px; padding: 8px 12px; border-radius: 9px; background: #0d9488; color: #fff; font: 700 12.5px Inter, sans-serif; }
.hd-mail-nota { font: 600 12px Inter, sans-serif; color: var(--debole); }
.hd-mail-nota i { color: #0d9488; margin-right: 4px; }
/* la scheda del cliente */
.hd-scheda-testa { display: flex; gap: 12px; align-items: center; margin-bottom: 12px; }
.hd-scheda-testa b { display: block; font: 800 16px var(--titoli); color: var(--titolo); }
.hd-scheda-testa small { font: 500 12px Inter, sans-serif; color: var(--debole); }
.hd-scheda-tab { display: flex; gap: 4px; margin-bottom: 10px; border-bottom: 1px solid var(--linea); }
.hd-scheda-tab span { padding: 7px 10px; font: 600 12.5px Inter, sans-serif; color: var(--debole); }
.hd-scheda-tab span.att { color: #0f766e; box-shadow: inset 0 -2px #0d9488; }
.hd-s-riga { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 9px 4px; border-bottom: 1px dashed var(--linea); font: 600 13px Inter, sans-serif; color: var(--titolo); opacity: 0; transition: opacity .35s; transition-delay: calc(.2s + var(--i) * .15s); }
.hd-s-riga em { font: 700 11px Inter, sans-serif; font-style: normal; text-transform: uppercase; color: #64748b; }
.hd-s-riga em.aperto { color: #b45309; }
.acceso .hd-s-riga { opacity: 1; }
/* l'attività dal ticket */
.hd-att { display: grid; gap: 8px; justify-items: center; }
.hd-att-ticket { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; padding: 11px 14px; border-radius: 13px; background: #fff; box-shadow: 0 0 0 1px var(--linea); font: 700 13.5px Inter, sans-serif; color: var(--titolo); }
.hd-att-crea { padding: 6px 10px; border-radius: 9px; background: #7c3aed; color: #fff; font-size: 12px; }
.hd-att-freccia { color: #a78bfa; font-size: 20px; opacity: 0; transition: opacity .3s .5s; }
.acceso .hd-att-freccia { opacity: 1; }
.hd-att-card { width: 100%; padding: 14px; border-radius: 14px; background: #faf5ff; border: 1px solid #ddd6fe; opacity: 0; translate: 0 -14px; transition: all .55s var(--ease) .8s; }
.acceso .hd-att-card { opacity: 1; translate: 0 0; }
.hd-att-card > b { display: block; font: 800 14px var(--titoli); color: var(--titolo); }
.hd-att-meta { display: flex; flex-wrap: wrap; gap: 10px; margin: 8px 0; font: 600 12px Inter, sans-serif; color: var(--tenue); }
.hd-att-meta i { color: #7c3aed; margin-right: 3px; }
.hd-att-stato { padding: 2px 8px; border-radius: 999px; background: #ede9fe; color: #5b21b6; }
.hd-att-check { display: grid; gap: 5px; }
.hd-att-check span { font: 500 12.5px Inter, sans-serif; color: var(--tenue); }
.hd-att-check i { color: #16a34a; margin-right: 5px; }
/* la chat interna */
.hd-tchat { display: grid; grid-template-columns: 140px minmax(0, 1fr); min-height: 210px; border-radius: 16px; overflow: hidden; background: #fff; box-shadow: 0 0 0 1px var(--linea); }
.hd-tchat-lista { display: grid; align-content: start; gap: 4px; padding: 12px 8px; background: #f5f3ff; }
.hd-tchat-lista b { padding: 0 6px 6px; font: 800 13px Inter, sans-serif; color: #5b21b6; }
.hd-tchat-lista span { padding: 7px 8px; border-radius: 9px; font: 600 12px Inter, sans-serif; color: var(--tenue); }
.hd-tchat-lista span.att { background: #fff; color: #5b21b6; box-shadow: 0 2px 6px rgba(91, 33, 182, .12); }
.hd-tchat-corpo { display: grid; align-content: start; gap: 8px; padding: 12px; }
.hd-tc { margin: 0; max-width: 88%; padding: 8px 11px; border-radius: 13px; font: 500 13px/1.4 Inter, sans-serif; opacity: 0; translate: 0 8px; transition: all .4s var(--ease); transition-delay: calc(.2s + var(--i) * .8s); }
.hd-tc b { display: block; font-size: 11px; opacity: .75; }
.hd-tc.a { background: #f1f5f9; color: var(--titolo); }
.hd-tc.b { margin-left: auto; background: #7c3aed; color: #fff; }
.acceso .hd-tc { opacity: 1; translate: 0 0; }
/* il cruscotto */
.hd-cru-kpi { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.hd-cru-kpi > div { padding: 10px; border-radius: 12px; background: #f0f9ff; }
.hd-cru-kpi small { display: block; font-size: 10.5px; line-height: 1.25; color: var(--debole); }
.hd-cru-kpi b { font: 800 21px var(--titoli); color: var(--titolo); }
.hd-cru-grafico { display: flex; gap: 12px; align-items: flex-end; height: 130px; margin-top: 14px; padding: 0 6px; border-bottom: 1px solid var(--linea); }
.hd-cru-grafico span { flex: 1; display: flex; gap: 4px; align-items: flex-end; height: 100%; }
.hd-cru-grafico i { flex: 1; height: 0; border-radius: 5px 5px 0 0; transition: height .8s var(--ease); transition-delay: calc(.2s + var(--k) * .12s); }
.hd-cru-grafico i.ap { background: #7dd3fc; }
.hd-cru-grafico i.ch { background: #0284c7; }
.acceso .hd-cru-grafico i.ap { height: var(--a); }
.acceso .hd-cru-grafico i.ch { height: var(--c); }
.hd-cru-leg { display: flex; gap: 14px; margin-top: 8px; font: 600 12px Inter, sans-serif; color: var(--tenue); }
.hd-cru-leg i { display: inline-block; width: 10px; height: 10px; margin-right: 5px; border-radius: 3px; }
.hd-cru-leg i.ap { background: #7dd3fc; } .hd-cru-leg i.ch { background: #0284c7; }
/* la sicurezza */
.hd-scudo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; }
.hd-scudo-perm { display: grid; gap: 6px; padding: 14px; border-radius: 16px; background: #fff; box-shadow: 0 0 0 1px var(--linea); }
.hd-scudo-perm b { margin-bottom: 4px; font: 800 14px var(--titoli); color: var(--titolo); }
.hd-scudo-perm span { display: flex; gap: 8px; align-items: center; padding: 7px 9px; border-radius: 9px; background: #f8fafc; font: 600 12.5px Inter, sans-serif; color: var(--tenue); opacity: .35; transition: opacity .35s; transition-delay: calc(.3s + var(--i) * .25s); }
.hd-scudo-perm span.si i { color: #16a34a; } .hd-scudo-perm span.no i { color: #dc2626; }
.acceso .hd-scudo-perm span { opacity: 1; }
.hd-scudo-lato { display: grid; gap: 14px; }
.hd-scudo-file { display: grid; justify-items: center; gap: 8px; padding: 16px; border-radius: 16px; background: linear-gradient(165deg, #1e293b, #334155); color: #e2e8f0; text-align: center; }
.hd-scudo-file i { font-size: 34px; color: #7dd3fc; }
.hd-scudo-file small { font: 600 12px Inter, sans-serif; }
.hd-scudo-2fa { padding: 12px; border-radius: 14px; background: #f8fafc; }
.hd-scudo-2fa small { display: block; margin-bottom: 7px; font: 600 11.5px Inter, sans-serif; color: var(--debole); }
.hd-scudo-2fa span { display: flex; gap: 5px; }
.hd-scudo-2fa b { display: grid; place-items: center; width: 25px; height: 31px; border-radius: 7px; background: #fff; border: 1px solid var(--linea); font: 800 15px var(--mono); color: var(--titolo); opacity: 0; transition: opacity .2s; transition-delay: calc(1.4s + var(--i) * .15s); }
.acceso .hd-scudo-2fa b { opacity: 1; }

/* ============================================================ i numeri: il tabellone a palette */
.hd-numeri { padding: 80px 0; background: linear-gradient(180deg, #082f49, #0c4a6e); color: #e0f2fe; }
.hd-numeri-testa { max-width: 760px; margin: 0 auto 36px; text-align: center; }
.hd-numeri .n6-occhiello { color: #7dd3fc; }
.hd-numeri h2 { margin: 14px 0 12px; font-size: clamp(30px, 3.4vw, 44px); line-height: 1.1; color: #fff; }
.hd-numeri h2 span { color: #fbbf24; }
.hd-numeri-testa p { margin: 0; font-size: 18px; line-height: 1.6; color: #bae6fd; }
.hd-tabellone { display: grid; gap: 10px; max-width: 920px; margin: 0 auto; padding: 22px; border-radius: 20px; background: #0b1220; box-shadow: inset 0 0 0 2px #1e293b, 0 30px 60px -20px rgba(0, 0, 0, .6); }
.hd-tab-riga { display: grid; grid-template-columns: 44px auto minmax(0, 1fr); gap: 18px; align-items: center; padding: 10px 12px; border-radius: 12px; background: #111a2e; }
.hd-tab-ico { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 11px; background: #1e293b; color: #fbbf24; font-size: 18px; }
.hd-palette { display: flex; gap: 4px; }
.hd-palette span { position: relative; display: grid; place-items: center; min-width: 34px; height: 46px; padding: 0 4px; border-radius: 6px; background: linear-gradient(180deg, #1f2a44 50%, #172036 50%); color: #fde68a; font: 800 28px var(--mono); box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .5); }
.hd-palette span::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: rgba(0, 0, 0, .55); }
.hd-tab-riga small { font-size: 15px; line-height: 1.4; color: #cbd5e1; }
@keyframes hd-gira { 0% { transform: rotateX(90deg); opacity: .2; } 60% { transform: rotateX(-12deg); } 100% { transform: rotateX(0); opacity: 1; } }
.hd-tabellone.rv.in .hd-palette span { animation: hd-gira .55s calc(.15s + var(--i) * .25s + var(--j) * .07s) both; }

/* ============================================================ l'invito finale: il biglietto del ticket risolto */
.hd-biglietto { position: relative; display: flex; width: 280px; height: 150px; margin: 30px auto; border-radius: 18px; rotate: -5deg; filter: drop-shadow(0 24px 34px rgba(0, 25, 70, .35)); }
.hd-big-sx { flex: 1; display: flex; flex-direction: column; padding: 18px; border-radius: 18px 0 0 18px; background: #fff; border-right: 3px dashed #bae6fd; }
.hd-big-sx small { font: 700 11px Inter, sans-serif; letter-spacing: .12em; text-transform: uppercase; color: var(--debole); }
.hd-big-sx b { font: 900 30px var(--mono); color: #0369a1; }
.hd-big-sx span { font: 600 13px Inter, sans-serif; color: var(--titolo); }
.hd-big-sx i { display: block; height: 6px; margin-top: 8px; width: 80%; border-radius: 3px; background: #e2e8f0; }
.hd-big-sx i + i { width: 55%; margin-top: 5px; }
.hd-big-dx { display: grid; place-items: center; width: 74px; border-radius: 0 18px 18px 0; background: linear-gradient(165deg, #38bdf8, #0284c7); color: #fff; font-size: 28px; }
.hd-big-timbro { position: absolute; right: 64px; top: 46px; padding: 5px 12px; border: 3px solid #16a34a; border-radius: 8px; color: #16a34a; font: 900 16px Inter, sans-serif; letter-spacing: .1em; text-transform: uppercase; rotate: -14deg; background: rgba(255, 255, 255, .85); }
@keyframes hd-timbra { 0%, 30% { opacity: 0; scale: 1.8; } 45% { opacity: 1; scale: .95; } 55%, 100% { opacity: 1; scale: 1; } }
@keyframes hd-respira { 50% { rotate: -2deg; translate: 0 -6px; } }
.n6-cta .hd-biglietto { animation: hd-respira 4s ease-in-out infinite; }
.n6-cta .hd-big-timbro { animation: hd-timbra 3s ease-out both; }

/* ============================================================ le sezioni della home dell'helpdesk */
.hd-giro { list-style: none; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; counter-reset: giro; position: relative; }
.hd-giro::before { content: ""; position: absolute; left: 10%; right: 10%; top: 36px; height: 3px; border-radius: 2px; background: linear-gradient(90deg, #7dd3fc, #0284c7, #7c3aed); }
.hd-giro li { position: relative; }
.hd-giro a { display: grid; justify-items: center; gap: 8px; height: 100%; padding: 0 8px 18px; text-align: center; text-decoration: none; color: inherit; }
.hd-giro-ico { position: relative; display: grid; place-items: center; width: 72px; height: 72px; border-radius: 50%; background: #fff; color: #0284c7; font-size: 26px; box-shadow: 0 0 0 4px #e0f2fe, 0 14px 28px -12px rgba(2, 132, 199, .5); transition: background .2s, color .2s; }
.hd-giro a:hover .hd-giro-ico { background: #0284c7; color: #fff; }
.hd-giro h3 { margin: 6px 0 0; font: 800 17px var(--titoli); color: var(--titolo); }
.hd-giro p { margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--tenue); }
.hd-due { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 50px; align-items: center; }
.hd-punti { list-style: none; display: grid; gap: 10px; margin: 18px 0; padding: 0; }
.hd-punti li { display: flex; gap: 12px; align-items: center; font-weight: 600; color: var(--titolo); }
.hd-punti i { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 10px; background: #e0f2fe; color: #0369a1; }
.hd-mosaico { display: grid; grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr)); gap: 16px; align-items: start; }
.hd-tessera { display: flex; flex-direction: column; gap: 4px; padding: 18px 14px 14px; border-radius: 20px; background: #fff; box-shadow: 0 0 0 1px var(--linea); border-top: 5px solid var(--g); }
.hd-tessera--ticket { display: grid; grid-template-columns: 1fr 1fr; align-content: start; }
.hd-tessera--ticket h3 { grid-column: 1 / -1; }
.hd-tessera h3 { margin: 0 0 6px; padding: 0 8px; font: 800 13px Inter, sans-serif; letter-spacing: .08em; text-transform: uppercase; color: var(--g); }
.hd-tessera a { display: flex; gap: 11px; align-items: flex-start; padding: 10px 8px; border-radius: 12px; text-decoration: none; color: inherit; }
.hd-tessera a:hover { background: #f8fafc; }
.hd-tessera a > i { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 11px; background: color-mix(in srgb, var(--c) 13%, #fff); color: var(--c); font-size: 15px; }
.hd-tessera b { display: block; font: 700 15px Inter, sans-serif; color: var(--titolo); }
.hd-tessera small { display: block; margin-top: 2px; font-size: 13.5px; line-height: 1.4; color: var(--debole); }
.hd-perchi { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.hd-perchi-card { display: flex; flex-direction: column; gap: 8px; padding: 22px; border-radius: 20px; background: #fff; box-shadow: 0 16px 34px -20px rgba(0, 25, 70, .35), 0 0 0 1px var(--linea); text-decoration: none; color: inherit; transition: translate .2s, box-shadow .2s; }
.hd-perchi-card:hover { translate: 0 -4px; box-shadow: 0 24px 40px -20px rgba(0, 25, 70, .45), 0 0 0 2px var(--c); }
.hd-perchi-ico { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: var(--c); color: #fff; font-size: 19px; }
.hd-perchi-card b { font: 800 19px var(--titoli); color: var(--titolo); }
.hd-perchi-card small { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; font-size: 15px; line-height: 1.5; color: var(--tenue); }
.hd-perchi-vai { margin-top: auto; padding-top: 6px; font: 700 14px Inter, sans-serif; color: var(--c); }
.hd-sicuri { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-bottom: 18px; }
.hd-sicuri div { padding: 22px 18px; border-radius: 18px; background: #fff; box-shadow: 0 0 0 1px var(--linea); }
.hd-sicuri i { display: grid; place-items: center; width: 46px; height: 46px; margin-bottom: 12px; border-radius: 13px; background: #0c4a6e; color: #7dd3fc; font-size: 19px; }
.hd-sicuri h3 { margin: 0 0 4px; font: 800 17px var(--titoli); color: var(--titolo); }
.hd-sicuri p { margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--tenue); }
.n6-sez p.centro { text-align: center; }

@media (max-width: 900px) {
	.hd-giro, .hd-mosaico, .hd-perchi, .hd-sicuri, .hd-due { grid-template-columns: minmax(0, 1fr); gap: 22px; }
	.hd-giro::before { display: none; }
	.hd-giro a { grid-template-columns: 60px minmax(0, 1fr); justify-items: start; text-align: left; padding: 0; }
	.hd-giro-ico { grid-row: span 2; width: 56px; height: 56px; font-size: 21px; }
	.hd-giro h3 { margin: 0; }
	.hd-tessera--ticket { grid-template-columns: 1fr; }
	.hd-tab-riga { grid-template-columns: 1fr; gap: 8px; }
	.hd-tab-ico { display: none; }
	.hd-palette span { min-width: 26px; height: 38px; font-size: 22px; }
	.hd-l-riga { grid-template-columns: 48px minmax(0, 1fr) auto; }
	.hd-l-riga time { display: none; }
	.hd-smista-cat, .hd-lucch, .hd-scudo, .hd-cru-kpi { grid-template-columns: minmax(0, 1fr); }
	.hd-cru-kpi { grid-template-columns: 1fr 1fr; }
	.hd-lucch-centro { justify-self: center; }
	.acceso .hd-smista-ticket { translate: 0 0; }
	.hd-tchat { grid-template-columns: 1fr; }
	.hd-tchat-lista { display: none; }
}
@media (prefers-reduced-motion: reduce) {
	.bx-scena--hd *, [data-mock] *, .hd-tabellone *, .hd-biglietto, .hd-biglietto * { animation: none !important; transition: none !important; }
}