/* gestionalecaf.it — il disegno PROPRIO del CAF (2026-10-20): scena d'apertura «campagna 730», schermate delle
   funzionalita', invito finale e sezioni della home. Caricato SOLO da questo pacchetto (n6_asset_pacchetto), dopo n6.css.
   Classi tutte «cf-». Il movimento lo danno caf.js (classe «acceso» sulle schermate a video) e bx-vivo del tema. */

/* ============================================================ la scena d'apertura */
.bx-scena--caf { height: 560px; }
.bx-scena--caf > * { position: absolute; }
.cf-oggi { left: 0; top: 70px; width: 250px; padding: 18px; border-radius: 22px; background: #0f2a6b; color: #fff; box-shadow: 0 30px 60px rgba(0, 15, 80, .45); }
.cf-oggi-testa { display: flex; gap: 11px; align-items: center; margin-bottom: 14px; }
.cf-oggi-testa > i { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: #fed73f; color: #0f2a6b; font-size: 17px; }
.cf-oggi-testa small { display: block; font: 600 11.5px Inter, sans-serif; color: #9fc0ff; }
.cf-oggi-testa b { font: 800 17px var(--titoli); }
.cf-agenda { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.cf-agenda li { position: relative; display: flex; gap: 9px; align-items: center; padding: 8px 9px; border-radius: 12px; background: rgba(255, 255, 255, .07); font: 600 12.5px Inter, sans-serif; transition: background .4s, box-shadow .4s, opacity .4s; }
.cf-agenda time { font: 700 11.5px var(--mono); color: #9fc0ff; }
.cf-agenda em { display: block; font: 500 11px Inter, sans-serif; font-style: normal; color: #c7d7f7; }
.cf-st { margin-left: auto; font-size: 10.5px; }
.cf-st > i { display: none; font-style: normal; padding: 3px 7px; border-radius: 99px; white-space: nowrap; }
.cf-st .st-p { display: inline-block; background: rgba(159, 192, 255, .18); color: #cfe0ff; }
.cf-agenda li.fatto { opacity: .6; }
.cf-agenda li.fatto .st-f { display: inline-block; background: rgba(34, 197, 94, .2); color: #86efac; }
.cf-agenda li.ora { background: rgba(255, 255, 255, .16); box-shadow: inset 3px 0 0 #fed73f; }
.cf-agenda li.ora .st-o { display: inline-block; background: #fed73f; color: #0f2a6b; animation: cf-pulsa 1.6s ease-in-out infinite; }
.cf-agenda li.fatto .st-p, .cf-agenda li.ora .st-p { display: none; }
.cf-oggi-piede { display: flex; justify-content: space-between; margin-top: 12px; font: 500 11.5px Inter, sans-serif; color: #c7d7f7; }
.cf-oggi-piede b { color: #fff; font-weight: 800; }
.cf-fascicolo { left: 268px; top: 16px; width: 420px; padding: 22px 22px 18px; border-radius: 24px; background: #fff; box-shadow: 0 34px 70px rgba(0, 15, 80, .42); }
.cf-fascicolo-testa { display: flex; align-items: center; gap: 12px; }
.cf-fascicolo-testa b { display: block; font: 800 19px var(--titoli); color: var(--titolo); }
.cf-fascicolo-testa small { font: 500 13px Inter, sans-serif; color: var(--debole); }
.cf-avatar { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; background: linear-gradient(160deg, #6366f1, #4338ca); color: #fff; font: 800 15px Inter, sans-serif; }
.cf-stato { margin-left: auto; padding: 5px 11px; border-radius: 99px; background: #fef3c7; color: #92400e; font: 700 12px Inter, sans-serif; }
.cf-barra { position: relative; height: 10px; margin: 18px 0 6px; border-radius: 99px; background: #eef2fb; }
.cf-barra > i { position: absolute; inset: 0; border-radius: 99px; background: linear-gradient(90deg, #22c55e, #16a34a); transform-origin: 0 50%; }
.cf-barra-conto { position: absolute; right: 0; top: 14px; font: 600 12px Inter, sans-serif; color: var(--debole); }
.cf-doc { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 8px; }
.cf-doc li { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 13px; border: 1px solid #eef2f7; font: 600 15px Inter, sans-serif; color: var(--titolo); }
.cf-doc-ico { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; background: #eef2ff; color: #4338ca; font-size: 14px; }
.cf-spunta { margin-left: auto; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: #16a34a; color: #fff; font-size: 11px; }
.cf-pronto { margin-top: 14px; padding: 10px 14px; border-radius: 13px; background: #dcfce7; color: #15803d; font: 700 14px Inter, sans-serif; }
.cf-campagna { left: 716px; top: 70px; width: 236px; padding: 20px; border-radius: 22px; background: #fff; box-shadow: 0 30px 60px rgba(0, 15, 80, .38); text-align: center; }
.cf-campagna > small { display: block; font: 700 13px Inter, sans-serif; color: var(--debole); }
.cf-campagna svg { width: 150px; height: 150px; margin: 6px auto 0; display: block; rotate: -90deg; }
.cf-campagna circle { fill: none; stroke-width: 11; stroke-linecap: round; }
.cf-campagna .fondo { stroke: #eef2fb; }
.cf-campagna .pieno { stroke: #4f46e5; stroke-dasharray: 314; stroke-dashoffset: 100; }
.cf-perc { position: absolute; left: 0; right: 0; top: 98px; font: 900 34px var(--titoli); color: var(--titolo); }
.cf-perc-sotto { position: absolute; left: 0; right: 0; top: 140px; font: 600 12px Inter, sans-serif; color: var(--debole); }
.cf-sedi { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 14px; height: 90px; align-items: end; }
.cf-sedi span { position: relative; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; font: 600 10.5px Inter, sans-serif; color: var(--debole); }
.cf-sedi span i { width: 100%; height: var(--h); margin-bottom: 5px; border-radius: 7px 7px 3px 3px; background: linear-gradient(180deg, #a5b4fc, #4f46e5); transform-origin: 50% 100%; }
.cf-volante { display: flex; align-items: center; gap: 12px; padding: 13px 16px 13px 13px; border-radius: 18px; background: #fff; box-shadow: 0 22px 44px rgba(0, 15, 80, .32); z-index: 2; }
.cf-volante > i { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 13px; color: #fff; font-size: 17px; background: linear-gradient(160deg, #22c55e, #15803d); }
.cf-volante b { display: block; font: 800 15px var(--titoli); color: var(--titolo); }
.cf-volante small { font: 500 12.5px Inter, sans-serif; color: var(--debole); }
.cf-volante--1 { left: 150px; top: 452px; rotate: -3deg; }
.cf-volante--2 { left: 640px; top: 420px; rotate: 3deg; }
.cf-volante--2 > i { background: linear-gradient(160deg, #6366f1, #4338ca); }

/* l'ingresso (n6.js mette bx-attesa e poi bx-vivo) e il moto continuo */
@keyframes cf-sale { from { opacity: 0; translate: 0 60px; } }
@keyframes cf-da-sx { from { opacity: 0; translate: -80px 0; } }
@keyframes cf-da-dx { from { opacity: 0; translate: 80px 0; } }
@keyframes cf-barra { from { transform: scaleX(0); } }
@keyframes cf-anello { from { stroke-dashoffset: 314; } }
@keyframes cf-cresce { from { transform: scaleY(0); } }
@keyframes cf-entra { from { opacity: 0; translate: 0 10px; } }
@keyframes cf-spunta { 0%, 40% { scale: 0; } 70% { scale: 1.25; } 100% { scale: 1; } }
@keyframes cf-ondeggia { from { translate: 0 0; } to { translate: 0 -10px; } }
.bx-attesa .cf-oggi, .bx-attesa .cf-fascicolo, .bx-attesa .cf-campagna, .bx-attesa .cf-volante { opacity: 0; }
.bx-vivo .cf-fascicolo { animation: cf-sale .8s .1s var(--ease) both; }
.bx-vivo .cf-oggi { animation: cf-da-sx .8s .35s var(--ease) both; }
.bx-vivo .cf-campagna { animation: cf-da-dx .8s .5s var(--ease) both; }
.bx-vivo .cf-doc li { animation: cf-entra .5s calc(.7s + var(--i) * .22s) both; }
.bx-vivo .cf-spunta { animation: cf-spunta .5s calc(1s + var(--i) * .22s) both; }
.bx-vivo .cf-barra > i { animation: cf-barra 1.8s .8s var(--ease) both; }
.bx-vivo .cf-pronto { animation: cf-entra .5s 2.4s both; }
.bx-vivo .cf-agenda li { animation: cf-entra .45s calc(.9s + var(--i) * .15s) both; }
.bx-vivo .cf-campagna .pieno { animation: cf-anello 1.6s 1s var(--ease) both; }
.bx-vivo .cf-sedi i { animation: cf-cresce .8s 1.2s var(--ease) both; }
.bx-vivo .cf-volante--1 { animation: cf-sale .7s 2s var(--ease) both, cf-ondeggia 5s 2.7s ease-in-out infinite alternate; }
.bx-vivo .cf-volante--2 { animation: cf-sale .7s 2.6s var(--ease) both, cf-ondeggia 6s 3.3s ease-in-out infinite alternate; }

/* ============================================================ le schermate (accese da caf.js) */
.cf-kanban { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.cf-col { padding: 10px; border-radius: 13px; background: #f6f8fc; min-height: 210px; }
.cf-col > b { display: flex; justify-content: space-between; margin-bottom: 8px; font: 700 12px Inter, sans-serif; color: var(--titolo); }
.cf-col > b em { font-style: normal; padding: 0 7px; border-radius: 99px; background: #fff; color: var(--debole); }
.cf-col.t-a > b { color: #b45309; } .cf-col.t-b > b { color: #1d4ed8; } .cf-col.t-v > b { color: #15803d; }
.cf-carta { display: block; margin-bottom: 7px; padding: 9px 10px; border-radius: 10px; background: #fff; box-shadow: 0 2px 6px rgba(15, 42, 107, .08); opacity: .35; transition: opacity .5s; transition-delay: calc((var(--k, 0) * 2 + var(--j, 0)) * 120ms); }
.cf-carta span { display: block; font: 700 12.5px Inter, sans-serif; color: var(--titolo); }
.cf-carta small { font: 500 11.5px Inter, sans-serif; color: var(--debole); }
.cf-col .cf-carta { --k: inherit; }
.acceso .cf-carta { opacity: 1; }
.cf-mobile { position: absolute; left: 30%; top: 120px; width: 22%; opacity: 0; pointer-events: none; }
.cf-mobile .cf-carta { opacity: 1; box-shadow: 0 14px 30px rgba(15, 42, 107, .28); border: 2px solid #22c55e; }
@keyframes cf-sposta { 0% { opacity: 0; translate: 0 0; } 15% { opacity: 1; } 70% { opacity: 1; translate: 120% 0; } 100% { opacity: 0; translate: 120% 0; } }
.acceso .cf-mobile { animation: cf-sposta 2.4s 1.4s ease-in-out both; }

.cf-lista { display: grid; gap: 7px; }
.cf-voce { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--linea); font: 600 14px Inter, sans-serif; color: var(--titolo); }
.cf-voce em { margin-left: auto; font: 700 11.5px Inter, sans-serif; font-style: normal; color: var(--debole); }
.cf-casella { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 7px; border: 2px solid var(--linea2); color: transparent; font-size: 11px; transition: all .3s; transition-delay: calc(var(--i) * 160ms); }
.acceso .cf-voce.si .cf-casella { background: #16a34a; border-color: #16a34a; color: #fff; }
.acceso .cf-voce.si em { color: #15803d; }
.cf-voce.no em { color: #b91c1c; }
.cf-avviso { position: absolute; right: 18px; bottom: 18px; display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: 14px; background: #fff; border: 1px solid var(--linea); box-shadow: var(--ombra-grande); opacity: 0; translate: 0 10px; transition: all .5s var(--ease) 1.4s; }
.cf-avviso > i { color: #4f46e5; font-size: 18px; }
.cf-avviso b { display: block; font-size: 13px; color: var(--titolo); }
.cf-avviso small { font-size: 12px; color: var(--debole); }
.acceso .cf-avviso { opacity: 1; translate: 0 0; }

.cf-foglio { position: relative; max-width: 380px; margin: 0 auto; padding: 22px 24px; border-radius: 6px; background: #fffef8; box-shadow: 0 10px 30px rgba(15, 42, 107, .15); border: 1px solid #eee9d6; }
.cf-foglio-tit { display: block; text-align: center; margin-bottom: 14px; font: 800 15px var(--titoli); letter-spacing: .12em; color: #3b3a33; }
.cf-campo { margin-bottom: 10px; }
.cf-campo small { display: block; font: 600 10.5px Inter, sans-serif; text-transform: uppercase; color: #8a8572; }
.cf-campo span { display: inline-block; overflow: hidden; white-space: nowrap; border-bottom: 1px dashed #c9c3ab; font: 600 14px var(--mono); color: #1e3a8a; max-width: 0; transition: max-width 1s steps(24); transition-delay: calc(var(--i) * 450ms); }
.acceso .cf-campo span { max-width: 100%; }
.cf-firma { margin-top: 16px; display: flex; flex-direction: column; gap: 4px; font: 500 11px Inter, sans-serif; color: #8a8572; }
.cf-tratto { display: block; height: 22px; width: 150px; border-bottom: 1px solid #c9c3ab; }
.cf-timbro { position: absolute; right: 18px; bottom: 26px; padding: 6px 10px; border: 2px solid #16a34a; border-radius: 6px; color: #16a34a; font: 800 12px Inter, sans-serif; rotate: -8deg; opacity: 0; scale: 1.6; transition: all .4s var(--ease) 2.4s; }
.acceso .cf-timbro { opacity: 1; scale: 1; }

.cf-giorno { display: grid; gap: 6px; }
.cf-slot { display: grid; grid-template-columns: 52px 1fr; gap: 10px; align-items: center; }
.cf-slot time { font: 700 12px var(--mono); color: var(--debole); }
.cf-slot span { display: block; padding: 9px 12px; border-radius: 11px; font: 500 12.5px Inter, sans-serif; color: var(--testo); border-left: 4px solid #94a3b8; background: #f6f8fc; }
.cf-slot span b { display: block; font: 700 13px Inter, sans-serif; color: var(--titolo); }
.cf-slot span.t-v { border-left-color: #16a34a; } .cf-slot span.t-b { border-left-color: #2563eb; } .cf-slot span.t-a { border-left-color: #f59e0b; }
.cf-slot.libero { min-height: 52px; }
.cf-nuovo { border-left-color: #7c3aed !important; background: #f3e8ff !important; opacity: 0; translate: 30px 0; transition: all .6s var(--ease) 1.2s; }
.acceso .cf-nuovo { opacity: 1; translate: 0 0; }

.cf-telefono { position: relative; width: 250px; margin: 0 auto; padding: 18px 14px; border-radius: 34px; background: #fff; border: 8px solid #0f2a6b; box-shadow: var(--ombra-grande); min-height: 380px; }
.cf-tel-testa { text-align: center; margin-bottom: 12px; }
.cf-tel-testa b { display: block; font: 800 15px var(--titoli); color: var(--titolo); }
.cf-tel-testa small { font-size: 11.5px; color: var(--debole); }
.cf-tel-passo { display: grid; gap: 6px; margin-bottom: 12px; opacity: .25; transition: opacity .5s; }
.cf-tel-passo small { font: 700 11px Inter, sans-serif; color: var(--debole); text-transform: uppercase; }
.cf-tel-passo span { display: flex; align-items: center; gap: 8px; padding: 9px 10px; border-radius: 11px; border: 1px solid var(--linea); font: 600 12.5px Inter, sans-serif; color: var(--titolo); }
.cf-tel-passo span.sel { border-color: #4f46e5; background: #eef2ff; }
.cf-tel-passo span.ok { border-color: #bbf7d0; background: #f0fdf4; }
.cf-pagato { justify-content: center; border-color: #16a34a !important; background: #dcfce7 !important; color: #15803d !important; }
.acceso .cf-tel-1 { opacity: 1; transition-delay: .2s; } .acceso .cf-tel-2 { opacity: 1; transition-delay: 1.2s; } .acceso .cf-tel-3 { opacity: 1; transition-delay: 2.2s; }

.cf-ai { display: grid; grid-template-columns: 170px 64px minmax(0, 1fr); gap: 10px; align-items: center; }
/* il telefono che fotografa il documento */
.cf-tel { width: 170px; padding: 9px; border-radius: 30px; background: #0b1730; box-shadow: 0 18px 40px rgba(11, 23, 48, .35); }
.cf-tel-schermo { position: relative; height: 300px; border-radius: 22px; background: radial-gradient(ellipse at 50% 40%, #33415c, #111827 75%); overflow: hidden; }
.cf-tel-guida { position: absolute; left: 0; right: 0; top: 18px; text-align: center; font: 600 11px Inter, sans-serif; color: #e5e7eb; }
.cf-mirino { position: absolute; left: 12px; right: 12px; top: 92px; height: 98px; }
.cf-mirino > i { position: absolute; z-index: 1; width: 18px; height: 18px; border: 3px solid #e5e7eb; transition: border-color .3s 1s; }
.cf-mirino > i:nth-child(1) { left: 0; top: 0; border-right: 0; border-bottom: 0; border-radius: 6px 0 0 0; }
.cf-mirino > i:nth-child(2) { right: 0; top: 0; border-left: 0; border-bottom: 0; border-radius: 0 6px 0 0; }
.cf-mirino > i:nth-child(3) { left: 0; bottom: 0; border-right: 0; border-top: 0; border-radius: 0 0 0 6px; }
.cf-mirino > i:nth-child(4) { right: 0; bottom: 0; border-left: 0; border-top: 0; border-radius: 0 0 6px 0; }
.acceso .cf-mirino > i { border-color: #22c55e; }
.cf-carta-id { position: absolute; left: 8px; right: 8px; top: 8px; bottom: 8px; display: flex; gap: 8px; padding: 9px; border-radius: 9px; background: linear-gradient(135deg, #e0f2fe, #f0f9ff); rotate: -9deg; translate: 0 60px; opacity: .2; transition: rotate .8s var(--ease) .2s, translate .8s var(--ease) .2s, opacity .5s .2s; }
.acceso .cf-carta-id { rotate: 0deg; translate: 0 0; opacity: 1; }
.cf-carta-foto { flex: none; width: 34px; border-radius: 5px; background: linear-gradient(180deg, #94a3b8, #64748b); }
.cf-carta-id b { display: block; font: 800 7.5px Inter, sans-serif; letter-spacing: .05em; color: #0c4a6e; margin-bottom: 6px; }
.cf-carta-id div { flex: 1; }
.cf-carta-id div i { display: block; height: 5px; margin-bottom: 5px; border-radius: 3px; background: #bae6fd; }
.cf-lampo { position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none; }
@keyframes cf-flash { 0% { opacity: 0; } 15% { opacity: .9; } 100% { opacity: 0; } }
.acceso .cf-lampo { animation: cf-flash .6s 1.3s both; }
.cf-tel-inviata { position: absolute; left: 14px; right: 14px; top: 206px; padding: 7px; border-radius: 10px; background: #dcfce7; color: #15803d; text-align: center; font: 700 11px Inter, sans-serif; opacity: 0; translate: 0 8px; transition: all .4s var(--ease) 1.7s; }
.acceso .cf-tel-inviata { opacity: 1; translate: 0 0; }
.cf-scatto { position: absolute; left: 50%; bottom: 16px; width: 44px; height: 44px; margin-left: -22px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 4px rgba(255, 255, 255, .3); }
@keyframes cf-premi { 0%, 100% { scale: 1; } 50% { scale: .82; } }
.acceso .cf-scatto { animation: cf-premi .3s 1.2s; }
/* dal telefono alla scheda: il passaggio dell'AI */
.cf-ai-ponte { position: relative; height: 4px; border-radius: 2px; background: repeating-linear-gradient(90deg, #c4b5fd 0 8px, transparent 8px 14px); }
@keyframes cf-scorre { to { background-position: 28px 0; } }
.acceso .cf-ai-ponte { animation: cf-scorre .6s linear 2s infinite; }
.cf-ai-bollo { position: absolute; left: 50%; top: 50%; translate: -50% -50%; display: inline-flex; gap: 5px; align-items: center; padding: 6px 9px; border-radius: 99px; background: linear-gradient(160deg, #a855f7, #6d28d9); color: #fff; font: 800 11.5px Inter, sans-serif; white-space: nowrap; box-shadow: 0 8px 18px -6px rgba(109, 40, 217, .6); opacity: .35; transition: opacity .4s 1.9s; }
.acceso .cf-ai-bollo { opacity: 1; animation: cf-pulsa 1.4s ease-in-out 2s infinite; }
.cf-ai-campi { display: grid; gap: 7px; }
.cf-ai-campo { padding: 7px 10px; border-radius: 10px; border: 1px solid var(--linea); opacity: 0; translate: 10px 0; transition: all .45s var(--ease); transition-delay: calc(2.3s + var(--i) * 250ms); }
.cf-ai-campo small { display: block; font: 600 10.5px Inter, sans-serif; color: var(--debole); }
.cf-ai-campo span { font: 700 13px var(--mono); color: var(--titolo); }
.acceso .cf-ai-campo { opacity: 1; translate: 0 0; }
.cf-ai-ok { padding: 8px 10px; border-radius: 10px; background: #dcfce7; color: #15803d; font: 700 12px Inter, sans-serif; opacity: 0; transition: opacity .5s 3.5s; }
.acceso .cf-ai-ok { opacity: 1; }

.cf-tessera-scena { position: relative; min-height: 330px; display: grid; place-items: center; }
.cf-tessera { width: 300px; height: 186px; perspective: 900px; }
.cf-tessera-dentro { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform 1s var(--ease); }
.acceso .cf-tessera-dentro { transform: rotateY(180deg); transition-delay: 1.6s; }
.cf-tessera-fronte, .cf-tessera-retro { position: absolute; inset: 0; padding: 20px; border-radius: 18px; backface-visibility: hidden; color: #fff; background: linear-gradient(135deg, #4f46e5, #7c3aed); box-shadow: 0 22px 44px rgba(76, 29, 149, .35); display: flex; flex-direction: column; gap: 6px; }
.cf-tessera-retro { transform: rotateY(180deg); background: linear-gradient(135deg, #312e81, #4f46e5); }
.cf-tessera-fronte small, .cf-tessera-retro small { font: 700 11px Inter, sans-serif; letter-spacing: .08em; opacity: .8; }
.cf-tessera-fronte b { font: 800 24px var(--titoli); margin-top: 18px; }
.cf-tessera-fronte span, .cf-tessera-retro span { font: 600 14px var(--mono); }
.cf-tessera-fronte em, .cf-tessera-retro em { margin-top: auto; font: 600 12px Inter, sans-serif; font-style: normal; opacity: .85; }
.cf-prezzo { position: absolute; right: 0; bottom: 6px; display: flex; gap: 10px; align-items: center; padding: 11px 14px; border-radius: 14px; background: #fff; box-shadow: var(--ombra-grande); opacity: 0; translate: 0 12px; transition: all .5s var(--ease) 2.8s; }
.cf-prezzo > i { color: #7c3aed; font-size: 17px; }
.cf-prezzo b { display: block; font-size: 13px; color: var(--titolo); }
.cf-prezzo small { font-size: 12px; color: var(--debole); }
.acceso .cf-prezzo { opacity: 1; translate: 0 0; }

.cf-rete { position: relative; height: 330px; border-radius: 18px; background: #f6f8fc; border: 1px solid var(--linea); overflow: hidden; }
.cf-rete-fili { position: absolute; inset: 0; width: 100%; height: 100%; }
.cf-rete-fili line { stroke: #a5b4fc; stroke-width: .6; stroke-dasharray: 2 2; }
@keyframes cf-flusso { to { stroke-dashoffset: -8; } }
.acceso .cf-rete-fili line { animation: cf-flusso 1s linear infinite; }
.cf-rete-centro { position: absolute; left: 50%; top: 54%; translate: -50% -50%; width: 150px; padding: 14px; border-radius: 18px; background: #fff; box-shadow: var(--ombra-grande); text-align: center; }
.cf-rete-centro i { font-size: 22px; color: #4f46e5; }
.cf-rete-centro b { display: block; font: 800 14px var(--titoli); color: var(--titolo); }
.cf-rete-centro small { font-size: 11.5px; color: var(--debole); }
.cf-rete-nodo { position: absolute; translate: -50% -50%; padding: 9px 12px; border-radius: 13px; background: #fff; border: 1px solid var(--linea); box-shadow: var(--ombra); text-align: center; opacity: 0; scale: .8; transition: all .5s var(--ease); transition-delay: calc(.3s + var(--i) * 200ms); }
.cf-rete-nodo b { display: block; font: 700 12.5px Inter, sans-serif; color: var(--titolo); }
.cf-rete-nodo small { font-size: 11px; color: var(--debole); }
.acceso .cf-rete-nodo { opacity: 1; scale: 1; }

.cf-mese { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; text-align: center; }
.cf-mese b { font: 700 11px Inter, sans-serif; color: var(--debole); }
.cf-mese span { padding: 7px 0; border-radius: 9px; font: 600 12.5px Inter, sans-serif; color: var(--testo); background: #f6f8fc; }
.cf-mese span:first-of-type { grid-column-start: 3; }
.cf-mese span[class^="c-"] { position: relative; transition: background .3s, color .3s; transition-delay: calc(var(--i) * 40ms); }
.acceso .cf-mese .c-v { background: #dcfce7; color: #15803d; } .acceso .cf-mese .c-a { background: #fef3c7; color: #92400e; } .acceso .cf-mese .c-r { background: #fee2e2; color: #b91c1c; }

.cf-classifica { display: grid; gap: 10px; }
.cf-riga { display: grid; grid-template-columns: 140px 1fr 46px; gap: 10px; align-items: center; font: 600 12.5px Inter, sans-serif; color: var(--titolo); }
.cf-riga i { height: 14px; border-radius: 7px; background: linear-gradient(90deg, #a5b4fc, #4f46e5); width: var(--w); transform-origin: 0 50%; transform: scaleX(0); transition: transform .9s var(--ease); transition-delay: calc(var(--i) * 150ms); }
.cf-riga b { font: 800 13px var(--mono); text-align: right; }
.acceso .cf-riga i { transform: none; }
.cf-kpi { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 18px; }
.cf-kpi > div { padding: 12px; border-radius: 12px; border: 1px solid var(--linea); }
.cf-kpi small { display: block; font-size: 11px; color: var(--debole); }
.cf-kpi b { font: 800 20px var(--titoli); color: var(--titolo); }

.cf-cassa { display: grid; grid-template-columns: 150px 1fr; gap: 18px; align-items: center; min-height: 300px; }
.cf-scudo { display: grid; place-items: center; gap: 8px; height: 170px; border-radius: 22px; background: linear-gradient(160deg, #1e3a8a, #0f2a6b); color: #fff; text-align: center; padding: 14px; }
.cf-scudo i { font-size: 44px; color: #fed73f; }
.cf-scudo small { font: 600 11.5px Inter, sans-serif; }
@keyframes cf-pulsa { 0%, 100% { scale: 1; } 50% { scale: 1.08; } }
.acceso .cf-scudo i { animation: cf-pulsa 2.4s ease-in-out infinite; }
.cf-registro { display: grid; gap: 7px; padding: 14px; border-radius: 16px; background: #0b1730; color: #c7d7f7; font: 500 12px var(--mono); }
.cf-registro b { font: 700 12px Inter, sans-serif; color: #fff; margin-bottom: 4px; }
.cf-registro div { opacity: 0; transition: opacity .4s; transition-delay: calc(.4s + var(--i) * 500ms); }
.cf-registro time { color: #fed73f; margin-right: 8px; }
.acceso .cf-registro div { opacity: 1; }

/* ============================================================ l'invito finale: il fascicolo completo */
.cf-busta { position: relative; width: 260px; height: 240px; margin: 0 auto; }
.cf-busta-foglio { position: absolute; left: 30px; right: 30px; top: 0; height: 170px; padding: 16px; border-radius: 10px; background: #fff; box-shadow: 0 14px 30px rgba(0, 15, 80, .25); }
.cf-busta-foglio b { display: block; font: 800 16px var(--titoli); color: #4338ca; margin-bottom: 10px; }
.cf-busta-foglio i { display: block; height: 8px; margin-bottom: 9px; border-radius: 4px; background: #e0e7ff; }
.cf-busta-fronte { position: absolute; left: 0; right: 0; bottom: 0; height: 130px; padding: 52px 18px 0; border-radius: 16px; background: linear-gradient(160deg, #fbbf24, #f59e0b); clip-path: polygon(0 28%, 50% 0, 100% 28%, 100% 100%, 0 100%); box-shadow: 0 20px 40px rgba(0, 15, 80, .3); }
.cf-busta-fronte span { display: block; font: 600 12px Inter, sans-serif; color: #78350f; }
.cf-busta-fronte b { font: 800 18px var(--titoli); color: #451a03; }
.cf-busta-ok { position: absolute; right: 8px; bottom: 96px; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: #16a34a; color: #fff; border: 4px solid #fff; font-size: 17px; }
@keyframes cf-infila { 0% { translate: 0 -40px; } 60%, 100% { translate: 0 30px; } }
.n6-cta .cf-busta-foglio { animation: cf-infila 3.2s ease-in-out infinite alternate; }

/* ============================================================ le sezioni della home del CAF */
/* i numeri: lo schedario d'archivio (cf_numeri() in schermate.php) */
.cf-numeri { padding: 76px 0; background: linear-gradient(180deg, #f6f8fc, #eef2fb); }
.cf-numeri-dentro { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 56px; align-items: center; }
.cf-numeri h2 { margin: 14px 0 12px; font-size: clamp(30px, 3.4vw, 44px); line-height: 1.1; color: var(--titolo); }
.cf-numeri h2 span { color: var(--marca); }
.cf-numeri-testo p { margin: 0; font-size: 18px; line-height: 1.6; color: var(--tenue); }
.cf-schedario { display: grid; gap: 12px; padding: 16px 16px 22px; border-radius: 20px; background: linear-gradient(180deg, #cbd5e1, #94a3b8); box-shadow: 0 30px 60px -24px rgba(15, 42, 107, .45), inset 0 2px 0 rgba(255, 255, 255, .5); }
.cf-cassetto { position: relative; display: grid; grid-template-columns: 54px minmax(0, 1fr) 60px; gap: 16px; align-items: center; padding: 14px 18px; border-radius: 12px; background: linear-gradient(180deg, #ffffff, #e9eef6); box-shadow: 0 6px 14px -6px rgba(15, 42, 107, .35), inset 0 -3px 0 rgba(15, 42, 107, .08); }
.cf-cassetto-ico { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 16px; color: #fff; font-size: 22px; background: var(--c); box-shadow: 0 10px 20px -10px var(--c); }
.cf-cassetto-cartellino { padding: 8px 14px; border-radius: 8px; background: #fffdf5; border: 1px dashed #d6cfb4; }
.cf-cassetto-cartellino b { display: block; font: 900 28px/1.1 var(--titoli); color: var(--titolo); }
.cf-cassetto-cartellino small { font-size: 14.5px; color: var(--tenue); }
.cf-cassetto-maniglia { justify-self: center; width: 52px; height: 12px; border-radius: 8px; background: linear-gradient(180deg, #94a3b8, #64748b); box-shadow: inset 0 2px 2px rgba(0, 0, 0, .25), 0 1px 0 #fff; }
@keyframes cf-apri { 0% { translate: 0 0; } 55% { translate: 30px 0; } 100% { translate: 14px 0; } }
.cf-schedario.rv.in .cf-cassetto { animation: cf-apri .9s var(--ease) calc(.25s + var(--i) * .22s) both; }
@media (max-width: 900px) {
	.cf-numeri-dentro { grid-template-columns: minmax(0, 1fr); gap: 30px; }
	.cf-cassetto { grid-template-columns: 44px minmax(0, 1fr); padding: 12px 14px; }
	.cf-cassetto-ico { width: 44px; height: 44px; font-size: 18px; }
	.cf-cassetto-maniglia { display: none; }
	@keyframes cf-apri { 0% { translate: 0 0; } 55% { translate: 12px 0; } 100% { translate: 6px 0; } }
}
.cf-servizi { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.cf-servizio { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 24px; border-radius: 22px; background: #fff; text-decoration: none; color: inherit; box-shadow: 0 16px 34px -18px rgba(10, 50, 120, .30), 0 0 0 1px rgba(10, 50, 120, .05); transition: transform .25s var(--ease), box-shadow .25s; overflow: hidden; }
.cf-servizio::after { content: ""; position: absolute; right: -40px; top: -40px; width: 120px; height: 120px; border-radius: 50%; background: color-mix(in srgb, var(--c) 12%, transparent); }
.cf-servizio:hover { transform: translateY(-4px); box-shadow: 0 24px 44px -18px rgba(10, 50, 120, .40), 0 0 0 1px rgba(10, 50, 120, .05); }
.cf-servizio-ico { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 16px; color: #fff; font-size: 21px; background: linear-gradient(160deg, color-mix(in srgb, var(--c) 84%, #fff), color-mix(in srgb, var(--c) 90%, #0b1d4d)); }
.cf-servizio h3 { margin: 0; font: 800 21px var(--titoli); color: var(--titolo); }
.cf-servizio p { margin: 0; color: var(--tenue); font-size: 15.5px; line-height: 1.55; }
.cf-servizio .n6-link { margin-top: auto; }

.cf-giornata { list-style: none; margin: 0; padding: 0; position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; counter-reset: cf-ora; }
.cf-giornata::before { content: ""; position: absolute; left: 6%; right: 6%; top: 34px; height: 3px; border-radius: 3px; background: linear-gradient(90deg, #a5b4fc, #4f46e5, #22c55e); }
.cf-tappa { position: relative; text-align: center; text-decoration: none; color: inherit; }
.cf-tappa time { position: relative; z-index: 1; display: inline-grid; place-items: center; width: 70px; height: 70px; border-radius: 50%; background: #fff; border: 3px solid #4f46e5; font: 800 16px var(--mono); color: #4338ca; box-shadow: 0 10px 24px -10px rgba(67, 56, 202, .5); }
.cf-tappa h3 { margin: 14px 0 6px; font: 800 17px var(--titoli); color: var(--titolo); }
.cf-tappa p { margin: 0; font-size: 14.5px; color: var(--tenue); line-height: 1.5; }
.cf-tappa:hover time { background: #4f46e5; color: #fff; }

.cf-gruppi { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.cf-gruppo { padding: 26px; border-radius: 24px; background: #f6f8fc; border: 1px solid var(--linea); }
.cf-gruppo h3 { margin: 0 0 14px; font: 800 20px var(--titoli); color: var(--titolo); }
.cf-gruppo ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.cf-gruppo a { display: flex; gap: 12px; align-items: center; padding: 11px 13px; border-radius: 14px; background: #fff; text-decoration: none; color: var(--titolo); font-weight: 700; transition: transform .2s; }
.cf-gruppo a:hover { transform: translateX(4px); }
.cf-gruppo a i { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 11px; color: #fff; background: var(--c); font-size: 14px; flex: none; }
.cf-gruppo a small { display: block; font-weight: 500; color: var(--debole); font-size: 13.5px; }

.cf-rete-sez { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 46px; align-items: center; }
.cf-punti { list-style: none; margin: 20px 0 0; padding: 0; display: grid; gap: 12px; }
.cf-punti li { display: flex; gap: 12px; align-items: flex-start; font-size: 16px; color: var(--testo); }
.cf-punti li i { margin-top: 3px; color: #4f46e5; }

.cf-sicuri { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.cf-sicuri div { padding: 22px; border-radius: 20px; background: #0f2a6b; color: #dbe5ff; }
.cf-sicuri i { font-size: 22px; color: #fed73f; }
.cf-sicuri h3 { margin: 12px 0 6px; font: 800 17px var(--titoli); color: #fff; }
.cf-sicuri p { margin: 0; font-size: 14.5px; line-height: 1.5; }

@media (max-width: 900px) {
	.cf-servizi, .cf-gruppi, .cf-rete-sez, .cf-sicuri { grid-template-columns: minmax(0, 1fr); }
	.cf-giornata { grid-template-columns: minmax(0, 1fr); }
	.cf-giornata::before { left: 34px; right: auto; top: 6%; bottom: 6%; width: 3px; height: auto; background: linear-gradient(180deg, #a5b4fc, #4f46e5, #22c55e); }
	.cf-tappa { display: grid; grid-template-columns: 70px 1fr; gap: 0 16px; text-align: left; }
	.cf-tappa h3 { margin-top: 8px; }
	.cf-tappa p { grid-column: 2; }
	.cf-cassa { grid-template-columns: minmax(0, 1fr); }
	.cf-ai { grid-template-columns: minmax(0, 1fr); justify-items: center; }
	.cf-ai-ponte { width: 4px; height: 56px; background: repeating-linear-gradient(180deg, #c4b5fd 0 8px, transparent 8px 14px); }
	.cf-ai-campi { width: 100%; }
	.cf-kanban { grid-template-columns: repeat(2, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
	.bx-scena--caf *, [data-mock] * { animation: none !important; transition: none !important; }
}