/* Progetto Z · composizione «deserto» (DigitaPlan, gestionali).
   Referenza del 15 ottobre (Pinterest, «RevenueX»): un paesaggio al tramonto, sopra un grande gestionale di vetro
   chiaro inclinato in prospettiva che esce dal bordo, la barra laterale con le voci e le persone, una carta dorata
   con il titolo in corsivo, la tabella dei prodotti. Sulle attività il paesaggio diventa il luogo del mestiere (spa,
   officina, biblioteca, ambulatorio) e i colori sono quelli dell'attività. */

.comp-deserto { --oro-a: #F6D88A; --oro-b: #F1B54B; --oro-c: #FBEBC4; --vetro-chiaro: rgba(250, 247, 242, .86); }
.comp-deserto:not([class*="stile-"]) {
  --font-titoli: "Instrument Serif", Georgia, serif; --scuro: #1C1A17; --ruolo: #473AE0; --ruolo-testo: #473AE0;
  --carta: #FBF8F3; --chiaro: #F4EEE5; --testo: #1C1A17; --tenue: #6B6459; --filo: rgba(28, 26, 23, .1);
  background: var(--carta);
}
.comp-deserto.su-nicchia { --oro-a: color-mix(in srgb, var(--ruolo-luce) 75%, #fff); --oro-b: var(--ruolo-luce); --oro-c: color-mix(in srgb, var(--ruolo-velo) 80%, #fff); }
.comp-deserto h1, .comp-deserto h2 { font-weight: 400; letter-spacing: -.02em; }
.comp-deserto h1 em, .comp-deserto h2 em { font-style: italic; }
.comp-deserto .q { display: none; }

/* testata chiara e di vetro, sopra il paesaggio */
.comp-deserto .testata__barra { background: rgba(255, 255, 255, .7); }
.comp-deserto .testata__invito.pulsante--scuro { background: var(--scuro); color: #fff; }
.comp-deserto .marca__nome { text-transform: none; font-family: "Inter Tight", Inter, sans-serif; font-weight: 600; letter-spacing: -.02em; }

/* ------------------------------------------------------------ l'apertura */
.deserto {
  position: relative; overflow: hidden; margin: 10px; border-radius: 30px; min-height: min(100svh, 900px);
  display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); align-items: center; gap: 20px;
  padding: 130px 0 60px max(var(--margine), calc((100% - var(--larga)) / 2 + var(--margine)));
  background: linear-gradient(90deg, rgba(20, 12, 4, .55) 0%, rgba(20, 12, 4, .25) 38%, rgba(20, 12, 4, 0) 60%), var(--fondo) center / cover, #C98A4B;
  color: #fff;
}
.su-nicchia .deserto { background: linear-gradient(90deg, color-mix(in srgb, var(--scuro) 78%, transparent) 0%, color-mix(in srgb, var(--scuro) 40%, transparent) 40%, transparent 65%), var(--fondo) center / cover, var(--scuro); }
.deserto__testo { position: relative; z-index: 2; max-width: 560px; }
.deserto__etichetta { display: inline-flex; align-items: center; gap: 8px; font: 600 .74rem/1 "Inter Tight", Inter, sans-serif; letter-spacing: .12em; text-transform: uppercase; color: inherit; opacity: .9; }
.deserto__etichetta i { width: 8px; height: 8px; border-radius: 50%; background: var(--oro-b); }
.deserto h1 { margin-top: 18px; color: #fff; font-size: clamp(2.8rem, 1.6rem + 4vw, 5.4rem); line-height: .98; }
.deserto h1 em { color: var(--oro-a); }
.deserto__sotto { margin-top: 20px; max-width: 30em; font-size: 1.08rem; line-height: 1.55; color: rgba(255, 255, 255, .86); }
.deserto__sotto b { color: #fff; }
.deserto__azioni { margin-top: 30px; display: flex; flex-wrap: wrap; gap: 12px; }
.deserto .pulsante--scuro { background: #fff; color: var(--scuro); border-color: #fff; }
.deserto .pulsante--scuro .saetta { color: var(--oro-b); }
.deserto .pulsante--bordo { background: rgba(255, 255, 255, .14); color: #fff; border-color: rgba(255, 255, 255, .35); box-shadow: none; }
.deserto__testo > * { animation: sale .9s var(--rimbalzo) both; }
.deserto__testo > :nth-child(2) { animation-delay: .08s; } .deserto__testo > :nth-child(3) { animation-delay: .16s; } .deserto__testo > :nth-child(4) { animation-delay: .24s; }
.deserto__esempio { position: absolute; right: 18px; bottom: 16px; z-index: 3; padding: 5px 10px; border-radius: 999px; background: rgba(255, 255, 255, .85); color: var(--scuro); font: 600 .62rem/1 Inter, sans-serif; letter-spacing: .12em; text-transform: uppercase; }

.deserto__scena { position: relative; height: 640px; perspective: 1600px; }
.dapp {
  position: absolute; left: 4%; top: 2%; width: 940px; height: 640px; display: grid; grid-template-columns: 236px minmax(0, 1fr);
  border-radius: 30px; overflow: hidden; text-align: left; color: #1C1A17; font: 400 13px/1.35 "Inter Tight", Inter, sans-serif;
  background: var(--vetro-chiaro); -webkit-backdrop-filter: blur(24px) saturate(150%); backdrop-filter: blur(24px) saturate(150%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 0 0 1px rgba(255, 255, 255, .5), 0 60px 120px -40px rgba(40, 20, 0, .6);
  transform: rotateY(-22deg) rotateX(9deg) rotateZ(-6deg); transform-origin: 0 50%;
  animation: dapp-entra 1.4s cubic-bezier(.2, .8, .2, 1) both, dapp-respira 9s ease-in-out 1.4s infinite;
}
@keyframes dapp-entra { from { opacity: 0; transform: rotateY(-38deg) rotateX(14deg) rotateZ(-10deg) translateX(160px); } }
@keyframes dapp-respira { 50% { transform: rotateY(-19deg) rotateX(8deg) rotateZ(-5.5deg) translateY(-8px); } }
.dapp__lato { display: flex; flex-direction: column; gap: 8px; padding: 26px 16px 16px; background: rgba(255, 255, 255, .4); border-right: 1px solid rgba(28, 26, 23, .06); }
.dapp__marca { display: flex; align-items: center; gap: 10px; margin: 0 8px 14px; font-size: 1.15rem; }
.dapp__marca i { width: 22px; height: 22px; border-radius: 50%; background: radial-gradient(circle at 30% 30%, #1C1A17 30%, transparent 32%), radial-gradient(circle at 70% 30%, #1C1A17 30%, transparent 32%), radial-gradient(circle at 30% 70%, #1C1A17 30%, transparent 32%), radial-gradient(circle at 70% 70%, #1C1A17 30%, transparent 32%); }
.dapp__lato > small { margin: 6px 8px 0; font-size: .7rem; color: #8C857A; }
.dapp__menu li { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 12px; font-size: .86rem; }
.dapp__menu li i { width: 14px; height: 14px; border-radius: 4px; box-shadow: inset 0 0 0 1.6px #1C1A17; opacity: .7; }
.dapp__menu li.attiva { background: #fff; box-shadow: 0 6px 16px -10px rgba(40, 20, 0, .4); font-weight: 600; }
.dapp__menu li em { margin-left: auto; min-width: 18px; height: 18px; display: grid; place-items: center; border-radius: 999px; background: #1C1A17; color: #fff; font: 600 .62rem/1 Inter, sans-serif; font-style: normal; }
.dapp__persone li { display: flex; align-items: center; gap: 10px; padding: 7px 10px; }
.dapp__persone span { flex: none; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 10px; background: rgba(28, 26, 23, .07); font-weight: 600; }
.dapp__persone b { display: block; font-size: .8rem; font-weight: 500; }
.dapp__persone small { display: block; font-size: .72rem; color: #6B6459; }
.dapp__utente { margin-top: auto; display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 14px; background: rgba(255, 255, 255, .65); }
.dapp__utente span { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; background: #1C1A17; color: #fff; font-weight: 600; }
.dapp__utente b { display: block; font-size: .82rem; } .dapp__utente small { font-size: .7rem; color: #6B6459; }
.dapp__corpo { padding: 24px 26px; min-width: 0; }
.dapp__cerca { display: flex; align-items: center; gap: 10px; height: 46px; padding: 0 8px 0 16px; border-radius: 999px; background: #fff; color: #8C857A; box-shadow: 0 6px 18px -12px rgba(40, 20, 0, .35); }
.dapp__cerca i { width: 13px; height: 13px; border: 2px solid #1C1A17; border-radius: 50%; }
.dapp__cerca kbd { margin-left: auto; padding: 6px 10px; border-radius: 999px; background: #F2EEE7; color: #1C1A17; font: 500 .72rem/1 Inter, sans-serif; }
.dapp__corpo h3 { margin-top: 22px; font: 400 1.9rem/1 var(--font-titoli); letter-spacing: -.02em; color: #1C1A17; }
.dapp__corpo > p { margin-top: 6px; font-size: .95rem; color: #3B3631; }
.dapp__oro {
  position: relative; overflow: hidden; margin-top: 16px; height: 190px; padding: 18px 20px; border-radius: 22px; display: flex; flex-direction: column;
  background: radial-gradient(120% 140% at 85% 10%, var(--oro-c) 0%, var(--oro-a) 35%, var(--oro-b) 100%);
}
.dapp__oro::after { content: ""; position: absolute; inset: -40% -10% auto auto; width: 70%; height: 180%; background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .55) 50%, transparent 70%); animation: luccica 5s ease-in-out infinite; }
@keyframes luccica { 0%, 40% { transform: translateX(-160%); } 80%, 100% { transform: translateX(160%); } }
.dapp__oro small { display: flex; align-items: center; gap: 6px; font-size: .78rem; color: #1C1A17; }
.dapp__oro small i { width: 22px; height: 22px; border-radius: 50%; background: #1C1A17; }
.dapp__oro b { margin-top: auto; font: 400 2.4rem/.98 var(--font-titoli); letter-spacing: -.02em; color: #1C1A17; }
.dapp__oro b em { font-style: italic; }
.dapp__oro span { margin-top: 8px; font-size: .78rem; color: #3B3631; }
.dapp__tabella { margin-top: 14px; padding: 14px 16px; border-radius: 20px; background: #fff; box-shadow: 0 10px 30px -22px rgba(40, 20, 0, .4); }
.dapp__ttesta { display: flex; justify-content: space-between; align-items: center; padding-bottom: 8px; }
.dapp__ttesta b { font: 400 1.25rem/1 var(--font-titoli); }
.dapp__ttesta span { font-size: .74rem; color: #8C857A; }
.dapp__tabella li { display: grid; grid-template-columns: 52px minmax(0, 1fr) 110px 92px; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 12px; transition: background .4s ease; }
.dapp__tabella li b { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dapp__tabella li small { color: #8C857A; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dapp__ora { padding: 4px 8px; border-radius: 8px; background: #F4EFE8; font-weight: 600; font-size: .75rem; text-align: center; }
.dapp__tabella li em { justify-self: end; padding: 4px 9px; border-radius: 999px; background: #EEF7EC; color: #2F6B2A; font: 600 .7rem/1 Inter, sans-serif; font-style: normal; white-space: nowrap; }
.dapp__tabella li.accesa { background: #FBF3E4; }
.dapp__tabella li.libera em { background: #FDECEA; color: #B4352A; }
.dapp__tabella li.libera.riempita em { background: #EEF7EC; color: #2F6B2A; }
.dapp__tabella li.libera.riempita { animation: blocco-riempito .7s var(--rimbalzo); }
@media (max-width: 1100px) {
  .deserto { grid-template-columns: minmax(0, 1fr); padding: 120px var(--margine) 0; min-height: 0; }
  .deserto__scena { height: 520px; margin-right: calc(-1 * var(--margine)); }
  .dapp { left: 0; transform: rotateY(-16deg) rotateX(8deg) rotateZ(-4deg) scale(.82); transform-origin: 0 0; animation: none; }
}
@media (max-width: 640px) {
  .deserto { margin: 6px; border-radius: 22px; padding-top: 104px; }
  .deserto__azioni .pulsante { flex: 1 1 100%; }
  .deserto__scena { height: 380px; }
  .dapp { transform: rotateY(-14deg) rotateX(8deg) rotateZ(-4deg) scale(.56); }
}

/* ------------------------------------------------------------ la tabella delle attività (principale) */
.deserto-tabella { max-width: 1100px; margin: 0 auto; padding: clamp(64px, 8vw, 110px) var(--margine) 30px; text-align: center; }
.deserto-tabella h2, .deserto-righe h2 { margin-top: 14px; font-size: clamp(2.4rem, 1.6rem + 2.8vw, 4.2rem); line-height: 1; color: var(--scuro); }
.deserto-tabella h2 em, .deserto-righe h2 em { color: var(--ruolo-testo); }
.deserto-tabella__sotto { max-width: 36em; margin: 14px auto 0; color: var(--tenue); font-size: 1.05rem; }
.deserto-tabella .deserto__etichetta, .deserto-righe .deserto__etichetta { color: var(--tenue); }
.dt { margin-top: 34px; padding: 10px; border-radius: 28px; text-align: left; background: rgba(255, 255, 255, .8); box-shadow: inset 0 1px 0 #fff, 0 0 0 1px var(--filo), 0 40px 80px -50px rgba(40, 20, 0, .45); }
.dt__testa { display: grid; grid-template-columns: minmax(0, 1fr) 260px 90px; gap: 14px; padding: 12px 18px; font: 600 .7rem/1 Inter, sans-serif; letter-spacing: .1em; text-transform: uppercase; color: var(--tenue); }
.dt__riga { display: grid; grid-template-columns: 52px minmax(0, 1fr) 260px 90px; gap: 14px; align-items: center; padding: 16px 18px; border-radius: 20px; text-decoration: none; color: var(--testo); transition: background .3s, transform .4s var(--rimbalzo); }
.dt__testa span:first-child { grid-column: 1 / 3; padding-left: 66px; }
@media (hover: hover) { .dt__riga:hover { background: #fff; transform: translateX(6px); } .dt__riga:hover .freccia { transform: translateX(4px); } }
.dt__icona { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 16px; background: radial-gradient(120% 120% at 80% 0%, var(--oro-c), var(--oro-a) 50%, var(--oro-b)); color: #1C1A17; }
.dt__icona .icona { width: 22px; height: 22px; }
.dt__nome b { display: block; font: 400 1.6rem/1.05 var(--font-titoli); color: var(--scuro); }
.dt__nome small { display: block; margin-top: 3px; color: var(--tenue); font-size: .92rem; }
.dt__dom { font: 500 .82rem/1 ui-monospace, Menlo, monospace; color: var(--tenue); }
.dt__vai { justify-self: end; font-weight: 600; color: var(--scuro); white-space: nowrap; }
@media (max-width: 760px) {
  .dt__testa { display: none; }
  .dt__riga { grid-template-columns: 48px minmax(0, 1fr); }
  .dt__dom { grid-column: 2; } .dt__vai { grid-column: 2; justify-self: start; }
}

/* ------------------------------------------------------------ cosa risolve, a righe (attività) */
.deserto-righe { max-width: 1160px; margin: 0 auto; padding: clamp(64px, 8vw, 110px) var(--margine) 20px; }
.deserto-righe__testa { text-align: center; margin-bottom: 40px; }
.dr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 64px); align-items: center; padding: 34px 0; border-top: 1px solid var(--filo); }
.dr:nth-of-type(even) .dr__testo { order: 2; }
.dr__testo small { font: 600 .72rem/1 Inter, sans-serif; letter-spacing: .12em; text-transform: uppercase; color: var(--tenue); }
.dr__testo h3 { margin-top: 12px; font-size: clamp(1.9rem, 1.4rem + 1.6vw, 2.9rem); font-weight: 400; line-height: 1.02; }
.dr__testo p { margin-top: 12px; color: var(--tenue); font-size: 1.05rem; max-width: 30em; }
.dr__oro { padding: 26px; border-radius: 26px; background: radial-gradient(120% 140% at 85% 10%, var(--oro-c) 0%, var(--oro-a) 45%, var(--oro-b) 100%); box-shadow: 0 40px 70px -46px rgba(40, 20, 0, .55); }
.dr__oro .mini { transform: rotate(-1.5deg); }
.dr:nth-of-type(even) .dr__oro .mini { transform: rotate(1.5deg); }
@media (max-width: 860px) { .dr { grid-template-columns: minmax(0, 1fr); } .dr:nth-of-type(even) .dr__testo { order: 0; } }
.js .dr { opacity: 0; transform: translateY(30px); transition: opacity .6s ease, transform .9s var(--rimbalzo); }
.js .dr.vista { opacity: 1; transform: none; }

/* le sezioni comuni prendono il tono caldo */
.comp-deserto .prezzo, .comp-deserto .funzione, .comp-deserto .passo, .comp-deserto .anche, .comp-deserto .modulo { border-radius: 24px; }
.comp-deserto .sezione__testa h2, .comp-deserto .richiesta__testo h2 { font-weight: 400; }
@media (prefers-reduced-motion: reduce) { .dapp, .dapp__oro::after { animation: none; } .js .dr { opacity: 1; transform: none; } }


/* ============================================================ la principale col cruscotto (16 ottobre 2026)
   Scelta dal titolare fra le proposte (proposte/tre, la 3 «I pezzi e il cruscotto»; referenza Shopeers su Dribbble):
   cornice chiara a puntini, titolo «Agenda, clienti e cassa. Su misura per te.», a sinistra i pezzi che si accendono
   col pacchetto e il prezzo, a destra il cruscotto del gestionale in 3D. Pezzo di pagina in cruscotto.html, movimento
   in cruscotto.js. Le pagine delle attività restano nel deserto finché non si rifanno. */
.main.comp-deserto { --font-titoli: "Onest", Inter, sans-serif; background: #EEF0F3; }
.main.comp-deserto .testata { top: 32px; }
.main.comp-deserto .marca__nome { font-family: "Onest", Inter, sans-serif; font-weight: 650; }
.main.comp-deserto h1, .main.comp-deserto h2 { font-weight: 600; letter-spacing: -.035em; }
.main.comp-deserto h1 em, .main.comp-deserto h2 em { font-style: normal; color: #473AE0; }
.main.comp-deserto .dt__nome b { font-weight: 600; letter-spacing: -.02em; font-size: 1.35rem; }
@media (max-width: 640px) { .main.comp-deserto .testata { top: 14px; } }

.crs { padding: 10px; font-family: "Onest", Inter, sans-serif; }
.crs { --crs-acc: #473AE0; --crs-acc-testo: #473AE0; --crs-soft: #EEEDFD; --crs-scuro: #14151F; --crs-chiaro: #B9B2FF; --crs-su-acc: #fff; --crs-carta: #F8F8F7; --crs-promo: #473AE0; }
.su-nicchia .crs { --crs-acc: var(--ruolo); --crs-acc-testo: var(--ruolo-testo); --crs-soft: var(--ruolo-velo); --crs-scuro: var(--scuro); --crs-chiaro: var(--ruolo-luce); --crs-su-acc: var(--su-ruolo); --crs-carta: color-mix(in srgb, var(--carta) 88%, #fff); --crs-promo: var(--scuro); }
.crs .i { width: 1.15em; height: 1.15em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.crs .i-fill { fill: currentColor; stroke: none; flex: none; }
.crs__pannello { position: relative; overflow: hidden; padding: 146px var(--margine) 64px; border-radius: 32px; text-align: center;
  background-color: var(--crs-carta); background-image: radial-gradient(rgba(0, 0, 0, .045) 1px, transparent 1.2px); background-size: 5px 5px; box-shadow: 0 30px 80px rgba(30, 35, 50, .12); }
.main.comp-deserto .crs__titolo { margin: 0; color: #121318; font: 600 clamp(2.5rem, 1.3rem + 4vw, 4.5rem)/1.02 "Onest", Inter, sans-serif; letter-spacing: -.05em; }
.main.comp-deserto .crs__titolo em { font-style: normal; color: #473AE0; }
.main.comp-deserto .crs__titolo .q { display: inline-block; width: .15em; height: .15em; margin-left: .05em; background: #473AE0; vertical-align: baseline; }
.crs__sotto { max-width: 640px; margin: 18px auto 0; color: #55575F; font-size: 1.06rem; line-height: 1.5; }
.crs__azioni { display: flex; justify-content: center; gap: 12px; margin-top: 26px; }
.crs__azioni .pulsante { font-family: "Onest", Inter, sans-serif; }
.crs__azioni .pulsante--scuro { background: var(--crs-scuro); color: #fff; border-color: var(--crs-scuro); }
.crs__azioni .pulsante--scuro .saetta { color: var(--crs-chiaro); }
.crs__corto { display: none; }

.crs__scena { display: grid; grid-template-columns: 286px minmax(0, 1fr); gap: 28px; align-items: start; max-width: 1140px; margin: 72px auto 0; text-align: left; }
.crs__pezzi { padding: 14px; border-radius: 22px; background: #fff; box-shadow: 0 24px 50px rgba(20, 20, 50, .12); }
.crs__piccolo { display: block; margin: 2px 4px 9px; color: #8E8C95; font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.crs__lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.crs__lista li { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 12px; background: #fff; border: 1px solid rgba(20, 20, 40, .08);
  font-size: 13.5px; font-weight: 500; white-space: nowrap; cursor: pointer; transition: border-color .3s, box-shadow .3s; }
.crs__lista li .i { width: 17px; height: 17px; color: #9A98A3; transition: color .3s; }
.crs__lista li.on { border-color: color-mix(in srgb, var(--crs-acc-testo) 40%, transparent); box-shadow: 0 6px 16px color-mix(in srgb, var(--crs-acc-testo) 12%, transparent); }
.crs__lista li.on .i { color: var(--crs-acc-testo); }
.crs__lista li:focus-visible { outline: 2px solid var(--crs-acc-testo); outline-offset: 2px; }
.crs__nome { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.crs__sw { position: relative; flex: none; width: 36px; height: 21px; margin-left: auto; border-radius: 7px; background: #DCDDE6; transition: background .3s; }
.crs__sw::after { content: ""; position: absolute; top: 3px; left: 3px; width: 15px; height: 15px; border-radius: 5px; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .2); transition: transform .35s var(--rimbalzo); }
.crs__lista li.on .crs__sw { background: var(--crs-acc); }
.crs__lista li.on .crs__sw::after { transform: translateX(15px); }
.crs__pac { margin-top: 10px; padding: 14px 16px; border-radius: 14px; background: var(--crs-scuro); color: #fff; }
.crs__pac small { display: block; color: #A3A3B5; font-size: 12px; }
.crs__pac b { display: block; margin-top: 3px; font-size: 22px; letter-spacing: -.02em; }
.crs__pac [data-prezzo] { display: block; color: var(--crs-chiaro); font-size: 15px; font-weight: 600; }
.crs__pac em { display: block; margin-top: 5px; color: #A3A3B5; font-size: 12px; font-style: normal; }
.crs .cambia { animation: crs-cambia .6s var(--rimbalzo); }
@keyframes crs-cambia { 40% { transform: scale(1.06); } }

.crs__vista { position: relative; height: calc(780px * var(--s, .62) + 24px); perspective: 1500px; }
.crs__tilt { position: absolute; left: 0; top: 4px; transform-origin: 0 0; transform: rotateY(-16deg) rotateX(6deg) scale(var(--s, .62)); animation: crs-dondola 12s ease-in-out infinite alternate; }
@keyframes crs-dondola { to { transform: rotateY(-10deg) rotateX(4deg) scale(var(--s, .62)); } }
.crs__fumetto { position: absolute; right: 2%; top: -40px; z-index: 5; padding: 7px 12px; border-radius: 10px; background: var(--crs-acc); color: var(--crs-su-acc); font-size: 14px; font-weight: 600; white-space: nowrap;
  box-shadow: 0 8px 20px rgba(20, 22, 60, .18); animation: crs-fumetto 1s var(--rimbalzo) both 1.2s; }
.crs__fumetto::after { content: ""; position: absolute; bottom: -5px; right: 18px; width: 10px; height: 10px; background: inherit; transform: rotate(45deg); }
@keyframes crs-fumetto { from { opacity: 0; transform: translateY(10px) scale(.8); } }
.crs__esempio { position: absolute; right: 16px; bottom: 16px; padding: 6px 9px; border-radius: 7px; background: rgba(20, 21, 31, .74); color: #fff; font: 600 11px/1 "Geist", sans-serif; letter-spacing: .08em; text-transform: uppercase; }

/* le voci dei pezzi spenti, nel cruscotto, non ci sono */
.crs [data-parte]:not(.on) { display: none !important; }
.crs [data-parte].on { animation: crs-entra .55s var(--rimbalzo); }
@keyframes crs-entra { from { opacity: 0; transform: translateX(-10px); } }
/* il cruscotto (1200 × 780, rimpicciolito da --s) */
.crs .cr { position: relative; width: 1200px; height: 780px; display: grid; grid-template-columns: 232px 1fr; overflow: hidden; border-radius: 26px; text-align: left;
  background: #F4F5F9; border: 1px solid #fff; color: #15162A; font-family: "Geist", sans-serif; box-shadow: 0 50px 100px rgba(20, 22, 60, .22), 0 8px 24px rgba(20, 22, 60, .08); }
.crs .cr ul { list-style: none; margin: 0; padding: 0; }
.crs .cr-lato { display: flex; flex-direction: column; padding: 18px 14px 14px; background: #fff; border-right: 1px solid #ECEDF3; }
.crs .cr-marca { display: flex; align-items: center; gap: 10px; padding: 4px 8px 18px; }
.crs .cr-marca .logo { width: 30px; height: 16px; color: var(--crs-acc-testo); }
.crs .cr-marca b { font-size: 18px; font-weight: 650; letter-spacing: -.01em; }
.crs .cr-marca .chiudi { margin-left: auto; color: #A0A2B4; }
.crs .cr-menu li { position: relative; display: flex; align-items: center; gap: 11px; height: 38px; padding: 0 12px; border-radius: 10px; color: #3D3F55; font-size: 14px; overflow: hidden; }
.crs .cr-menu li .i { width: 18px; height: 18px; color: #6F7186; }
.crs .cr-menu li.attiva { background: var(--crs-soft); color: var(--crs-acc-testo); font-weight: 600; }
.crs .cr-menu li.attiva .i { color: var(--crs-acc-testo); }
.crs .cr-menu li.attiva::before { content: ""; position: absolute; left: 0; top: 9px; bottom: 9px; width: 3px; border-radius: 0 3px 3px 0; background: var(--crs-acc); }
.crs .cr-num { margin-left: auto; padding: 2px 7px; border-radius: 6px; background: #E6F6EE; color: #12805C; font-size: 11.5px; font-weight: 600; }
.crs .cr-menu li.gruppo .chev { margin-left: auto; width: 15px; height: 15px; transform: rotate(180deg); }
.crs .cr-menu li.sotto-voce { height: 32px; padding-left: 41px; color: #55576C; font-size: 13.5px; }
.crs .cr-divisore { height: 1px; margin: 8px 6px; background: #ECEDF3; }
.crs .cr-fondo { margin-top: auto; }
.crs .cr-promo { position: relative; margin-top: 10px; padding: 14px; overflow: hidden; border-radius: 16px; background: var(--crs-promo); color: #fff; }
.crs .cr-promo::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(255, 255, 255, .16) 1px, transparent 1.3px); background-size: 9px 9px; }
.crs .cr-promo > * { position: relative; }
.crs .cr-promo .ico { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; background: rgba(255, 255, 255, .18); }
.crs .cr-promo b { display: block; margin-top: 10px; font-size: 14px; }
.crs .cr-promo small { display: block; margin-top: 3px; font-size: 12px; line-height: 1.35; opacity: .82; }
.crs .cr-promo span.bt { display: grid; place-items: center; height: 32px; margin-top: 10px; border-radius: 9px; background: #fff; color: var(--crs-promo); font-size: 12.5px; font-weight: 600; }
.crs .cr-corpo { display: flex; flex-direction: column; min-width: 0; }
.crs .cr-barra { display: flex; align-items: center; gap: 10px; height: 64px; padding: 0 24px; background: #fff; border-bottom: 1px solid #ECEDF3; }
.crs .cr-cerca { display: flex; align-items: center; gap: 9px; width: 320px; height: 38px; padding: 0 12px; border-radius: 12px; background: #F4F5F9; color: #9496A8; font-size: 13px; }
.crs .cr-cerca kbd { margin-left: auto; padding: 1px 6px; border-radius: 6px; background: #fff; border: 1px solid #E6E7EF; font: inherit; font-size: 11.5px; }
.crs .cr-icona { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; background: #F4F5F9; color: #55576C; }
.crs .cr-icona:first-of-type { margin-left: auto; }
.crs .cr-icona .i { width: 18px; height: 18px; }
.crs .cr-io { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; background: var(--crs-acc); color: var(--crs-su-acc); font-size: 15px; font-weight: 600; }
.crs .cr-dentro { display: flex; flex-direction: column; gap: 16px; min-height: 0; padding: 20px 24px; }
.crs .cr-testa { display: flex; align-items: center; gap: 10px; height: 36px; }
.crs .cr-testa h3 { margin: 0 auto 0 0; font-size: 24px; font-weight: 650; letter-spacing: -.02em; }
.crs .cr-pill { display: flex; align-items: center; gap: 9px; height: 36px; padding: 0 12px; border-radius: 11px; background: #fff; border: 1px solid #E6E7EF; color: #3D3F55; font-size: 12.5px; white-space: nowrap; }
.crs .cr-pill i { width: 1px; height: 18px; background: #E6E7EF; }
.crs .cr-pill .i { width: 15px; height: 15px; color: #6F7186; }
.crs .cr-btn { display: flex; align-items: center; gap: 7px; height: 36px; padding: 0 13px; border-radius: 11px; background: #fff; border: 1px solid #E6E7EF; color: #3D3F55; font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.crs .cr-btn .i { width: 15px; height: 15px; }
.crs .cr-btn--viola { background: var(--crs-acc); border-color: var(--crs-acc); color: var(--crs-su-acc); }
.crs .cr-kpi { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.crs .cr-k { position: relative; height: 100px; padding: 14px 16px; border-radius: 16px; background: #fff; border: 1px solid #EDEEF4; }
.crs .cr-k-t { display: flex; align-items: center; justify-content: space-between; color: #55576C; font-size: 13px; font-weight: 500; }
.crs .cr-k-t .i { width: 17px; height: 17px; }
.crs .cr-k b { display: inline-block; margin-top: 8px; font-size: 26px; font-weight: 650; letter-spacing: -.02em; }
.crs .cr-su, .crs .cr-giu { display: inline-flex; align-items: center; gap: 2px; margin-left: 8px; padding: 2px 7px; border-radius: 6px; background: #E6F6EE; color: #12805C; font-size: 11.5px; font-weight: 600; vertical-align: 5px; }
.crs .cr-k small { display: block; margin-top: 2px; color: #9496A8; font-size: 11.5px; }
.crs .c-acc { --c: var(--crs-acc-testo); --cf: var(--crs-acc); --s: var(--crs-soft); }
.crs .c-blu { --c: #1E7BD9; --cf: #1E7BD9; --s: #E7F1FC; }
.crs .c-aran { --c: #E8590C; --cf: #F08C2E; --s: #FFF1E4; }
.crs .c-verde { --c: #12805C; --cf: #2FBF71; --s: #E6F6EE; }
.crs .c-rosso { --c: #E5352B; --cf: #FF3B30; --s: #FFE9E7; }
.crs .cr-k-t .i { color: var(--c, #6F7186); }
.crs .cr-griglia { display: grid; grid-template-columns: 1.78fr 1fr; gap: 14px; min-height: 0; }
.crs .cr-col { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.crs .cr-card { position: relative; padding: 16px 18px; border-radius: 18px; background: #fff; border: 1px solid #EDEEF4; }
.crs .cr-card h5 { display: flex; align-items: center; justify-content: space-between; margin: 0; font-size: 15px; font-weight: 600; }
.crs .cr-card h5 .i { width: 17px; height: 17px; color: #A0A2B4; }
.crs .cr-incassi { display: grid; grid-template-columns: 172px 1fr; gap: 10px; }
.crs .cr-incassi big { display: block; margin-top: 44px; font-size: 33px; font-weight: 650; letter-spacing: -.03em; }
.crs .cr-incassi .cr-su { margin-left: 0; vertical-align: 0; }
.crs .cr-incassi .vs { color: #9496A8; font-size: 12px; margin-left: 6px; }
.crs .cr-grafico { position: relative; min-width: 0; height: 172px; }
.crs .cr-grafico svg { position: absolute; left: 34px; top: 6px; height: 140px; overflow: visible; }
.crs .cr-grafico .y { position: absolute; left: 0; color: #A0A2B4; font-size: 10.5px; }
.crs .cr-grafico .x { position: absolute; bottom: 0; color: #A0A2B4; font-size: 10.5px; transform: translateX(-50%); }
.crs .cr-linea { fill: none; stroke: var(--crs-acc-testo); stroke-width: 2.4; stroke-linejoin: round; stroke-dasharray: 1500; stroke-dashoffset: 1500; animation: disegna 10s ease-out infinite; }
.crs .cr-prima { fill: none; stroke: #B9BBCB; stroke-width: 1.6; stroke-dasharray: 4 4; }
.crs .cr-area { fill: var(--crs-acc); fill-opacity: .12; opacity: 0; animation: area 10s ease-out infinite; }
.crs .cr-rete { stroke: #EEF0F5; stroke-width: 1; }
@keyframes disegna { 0% { stroke-dashoffset: 1500; } 22%, 100% { stroke-dashoffset: 0; } }
@keyframes area { 0%, 12% { opacity: 0; } 26%, 100% { opacity: 1; } }
.crs .cr-punto { position: absolute; top: 0; bottom: 18px; width: 0; border-left: 1.5px dashed #B9BBCB; opacity: 0; animation: punto 10s infinite; }
.crs .cr-punto::after { content: ""; position: absolute; left: -6px; top: var(--py); width: 9px; height: 9px; border-radius: 3px; background: #fff; border: 2px solid var(--crs-acc-testo); }
.crs .cr-punto .fumetto { position: absolute; left: 10px; top: calc(var(--py) - 54px); padding: 8px 10px; border-radius: 10px; background: #fff; border: 1px solid #E6E7EF; box-shadow: 0 8px 20px rgba(20, 22, 60, .1); font-size: 11px; white-space: nowrap; }
.crs .cr-punto .fumetto b { display: block; margin-bottom: 3px; font-size: 11.5px; }
.crs .cr-punto .fumetto span { display: block; color: #55576C; }
.crs .cr-punto .fumetto span i { display: inline-block; width: 10px; height: 2px; margin-right: 5px; vertical-align: 3px; background: var(--crs-acc-testo); }
.crs .cr-punto .fumetto span + span i { background: #B9BBCB; }
.crs .cr-punto:nth-of-type(2) { animation-delay: 3.2s; } .cr-punto:nth-of-type(3) { animation-delay: 6.4s; }
@keyframes punto { 0%, 24% { opacity: 0; } 27%, 52% { opacity: 1; } 55%, 100% { opacity: 0; } }
.crs .cr-clienti { margin-top: 12px; padding: 12px 14px 0; border-radius: 14px; border: 1px solid #EDEEF4; }
.crs .cr-clienti h6 { display: flex; justify-content: space-between; margin: 0 0 10px; font-size: 13px; font-weight: 600; }
.crs .cr-clienti h6 .i { width: 15px; height: 15px; color: #A0A2B4; }
.crs .cr-tre { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.crs .cr-tre div { padding: 0 0 0 10px; border-left: 2px solid var(--cf); }
.crs .cr-tre b { display: flex; align-items: center; gap: 6px; font-size: 19px; font-weight: 650; }
.crs .cr-tre b .i { width: 15px; height: 15px; color: var(--c); }
.crs .cr-tre small { display: block; color: #8A8CA0; font-size: 11.5px; }
.crs .cr-tre i.barra-c { display: block; height: 7px; margin: 9px 0 0 -12px; border-radius: 2px 2px 0 0; background: var(--cf); transform-origin: left; animation: allunga 10s cubic-bezier(.3, 1.2, .4, 1) infinite; }
@keyframes allunga { 0% { transform: scaleX(.1); } 18%, 100% { transform: scaleX(1); } }
.crs .cr-fare li { display: grid; grid-template-columns: 30px 1fr auto auto; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid #F0F1F6; font-size: 13px; }
.crs .cr-fare li:last-child { border-bottom: 0; }
.crs .cr-fare .ic { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: var(--s); color: var(--c); }
.crs .cr-fare .ic .i { width: 15px; height: 15px; }
.crs .cr-fare li > b { font-weight: 650; }
.crs .cr-fare li > em { padding: 4px 9px; border-radius: 8px; background: #F4F5F9; color: #3D3F55; font-size: 11.5px; font-style: normal; font-weight: 600; }
.crs .cr-barre { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; height: 118px; margin-top: 12px; }
.crs .cr-barre div { display: flex; flex: 1; flex-direction: column; align-items: center; gap: 6px; height: 100%; justify-content: flex-end; color: #8A8CA0; font-size: 11px; }
.crs .cr-barre i { display: block; width: 100%; height: var(--h); border-radius: 9px; background: #EDEEF4; transform-origin: bottom; animation: cresce 10s cubic-bezier(.3, 1.4, .4, 1) infinite; animation-delay: var(--d); }
.crs .cr-barre div.top { color: var(--crs-acc-testo); font-weight: 600; }
.crs .cr-barre div.top i { background: var(--crs-acc); }
.crs .cr-barre div.top b { color: #15162A; font-size: 12px; }
@keyframes cresce { 0% { transform: scaleY(.15); } 14%, 100% { transform: scaleY(1); } }
.crs .cr-gauge { position: relative; height: 128px; margin-top: 4px; }
.crs .cr-gauge svg { position: absolute; left: 50%; top: 0; width: 210px; height: 116px; transform: translateX(-50%); }
.crs .cr-gauge line { stroke-width: 5.5; stroke-linecap: round; animation: accendi 10s infinite; }
.crs .cr-gauge line.si { stroke: #2FBF71; } .cr-gauge line.no { stroke: #E3E4EA; }
@keyframes accendi { 0% { opacity: .12; } 5%, 100% { opacity: 1; } }
.crs .cr-gauge big { position: absolute; left: 0; right: 0; top: 54px; text-align: center; font-size: 30px; font-weight: 650; letter-spacing: -.02em; }
.crs .cr-gauge small { position: absolute; left: 0; right: 0; top: 92px; text-align: center; color: #8A8CA0; font-size: 11.5px; }
.crs .cr-gauge-bt { display: table; margin: 4px auto 0; padding: 6px 12px; border-radius: 9px; border: 1px solid #E6E7EF; font-size: 12px; font-weight: 600; }

/* ferma fuori schermo, tablet, telefono, movimento ridotto */
.crs--ferma *, .crs--ferma *::before, .crs--ferma *::after { animation-play-state: paused !important; }
@media (max-width: 1000px) {
  .crs__scena { grid-template-columns: minmax(0, 1fr); max-width: 680px; gap: 22px; margin-top: 56px; }
  .crs__vista { order: -1; }
  .crs__lista { grid-template-columns: 1fr 1fr; }
  .crs__fumetto { right: 0; top: -36px; }
}
@media (max-width: 640px) {
  .crs { padding: 6px; }
  .crs__pannello { padding: 108px 14px 30px; border-radius: 24px; }
  .crs__sotto { font-size: 1rem; }
  .crs__azioni { gap: 8px; margin-top: 22px; }
  .crs__azioni .pulsante { min-height: 48px; padding: 0 14px; font-size: .93rem; }
  .crs__lungo { display: none; }
  .crs__corto { display: inline; }
  .crs__scena { margin-top: 48px; gap: 16px; }
  .crs__tilt { transform: rotateX(8deg) rotateY(-6deg) scale(var(--s, .3)); animation: crs-dondola-tel 10s ease-in-out infinite alternate; }
  .crs__lista li { padding: 9px 10px; font-size: 13px; }
  .crs__pezzi { padding: 10px; border-radius: 18px; }
  .crs__piccolo { font-size: 11px; }
  .crs__esempio { right: 10px; bottom: 10px; }
}
@keyframes crs-dondola-tel { to { transform: rotateX(5deg) rotateY(-2deg) scale(var(--s, .3)); } }
/* quando testo ed elemento stanno uno sotto l'altro (sotto i 1100 px: telefono, tablet, finestra stretta) i due pulsanti
   prendono tutta la riga, metà ciascuno (Alfredo, 17 ottobre: «Preventivo e Guarda la demo devono essere sempre a
   tutta larghezza da mobile, da sinistra a destra»; poi, con la foto di una finestra stretta del computer: «non mi pare») */
@media (max-width: 1099px) {
  .crs__azioni { width: 100%; }
  .crs__azioni .pulsante { flex: 1 1 0; min-width: 0; justify-content: center; }
}
@media (max-width: 400px) { .crs__azioni .saetta, .crs__azioni .freccia { display: none; } .crs__azioni .pulsante { padding: 0 12px; } }
@media (prefers-reduced-motion: reduce) { .crs *, .crs *::before, .crs *::after { animation: none !important; transition: none !important; } }


/* ============================================================ «Scegli la tua attività» sulla principale (16 ottobre 2026)
   Proposta 4 di DigitaPLAN/proposte/attivita/, scelta dal titolare dopo aver bocciato la tabella («icone fatte
   malissimo, il box non arriva ai margini, giallo a caso»): a sinistra le attività coi colori del loro vestito, a
   destra la pagina vera dentro un browser. */
.att { padding: 10px; font-family: "Onest", Inter, sans-serif; }
.att .i { width: 1.2em; height: 1.2em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.att__pannello { padding: clamp(56px, 7vw, 96px) var(--margine); border-radius: 32px;
  background-color: #F8F8F7; background-image: radial-gradient(rgba(0, 0, 0, .045) 1px, transparent 1.2px); background-size: 5px 5px; box-shadow: 0 30px 80px rgba(30, 35, 50, .1); }
.att__testa { max-width: 760px; margin: 0 auto 44px; text-align: center; }
.att__et { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 14px; color: #6B6D82; font: 600 12.5px/1 "Onest", Inter, sans-serif; letter-spacing: .12em; text-transform: uppercase; }
.att__et i { width: 8px; height: 8px; background: #473AE0; }
.main.comp-deserto .att h2 { margin: 0; color: #121318; font: 600 clamp(2.3rem, 1.4rem + 3vw, 3.8rem)/1.02 "Onest", Inter, sans-serif; letter-spacing: -.045em; }
.main.comp-deserto .att h2 em { font-style: normal; color: #473AE0; }
.main.comp-deserto .att h2 .q { display: inline-block; width: .15em; height: .15em; margin-left: .05em; background: #473AE0; }
.att__testa p { margin: 14px 0 0; color: #5F6175; font-size: 1.06rem; line-height: 1.5; }
.att__dentro { display: grid; grid-template-columns: 330px minmax(0, 1fr); gap: 28px; align-items: start; max-width: 1140px; margin: 0 auto; }
.att__scelte { display: grid; gap: 8px; }
.att__scelta { --a-scuro: #473AE0; --a-soft: #ECEAFD;
  display: flex; align-items: center; gap: 14px; width: 100%; padding: 14px; border-radius: 18px; border: 1px solid transparent; background: transparent; color: #15162A;
  font: inherit; text-align: left; cursor: pointer; transition: background .3s, border-color .3s, box-shadow .3s; }
.att__scelta[data-k="estetista"] { --a-scuro: #3A2430; --a-soft: #F8E3DE; }
.att__scelta[data-k="meccanico"] { --a-scuro: #16191D; --a-soft: #F4EDD4; }
.att__scelta[data-k="avvocato"] { --a-scuro: #252B33; --a-soft: #E0E6EB; }
.att__scelta[data-k="medico"] { --a-scuro: #13306B; --a-soft: #D3E2FE; }
.att__nome { min-width: 0; }
.att__scelta b { display: block; font-size: 17px; font-weight: 600; letter-spacing: -.01em; }
.att__scelta small { display: block; margin-top: 2px; color: #6B6D82; font-size: 13px; line-height: 1.35; }
.att__scelta.on { background: #fff; border-color: color-mix(in srgb, var(--a-scuro) 22%, transparent); box-shadow: 0 14px 34px rgba(20, 22, 60, .1); }
@media (hover: hover) { .att__scelta:not(.on):hover { background: rgba(255, 255, 255, .6); } }
.att__scelta:focus-visible { outline: 2px solid #473AE0; outline-offset: 2px; }
.att__tile { display: grid; place-items: center; flex: none; width: 52px; height: 52px; border-radius: 15px; background: var(--a-soft); color: var(--a-scuro);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--a-scuro) 9%, transparent); transition: background .3s, color .3s; }
.att__tile .i { width: 26px; height: 26px; }
.att__scelta:not(.on) .att__tile { background: #ECEDF2; color: #8A8CA0; box-shadow: none; }
.att__arrivo { margin-top: 10px; padding: 16px; border-radius: 18px; border: 1px dashed #D3D5DF; }
.att__arrivo small { color: #8A8CA0; font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.att__arrivo ul { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; margin: 10px 0 0; padding: 0; list-style: none; }
.att__arrivo li { display: flex; align-items: center; gap: 7px; color: #6B6D82; font-size: 13px; line-height: 1.25; }
.att__arrivo li .i { width: 16px; height: 16px; color: #9A9CB0; }
.att__altro { display: inline-flex; align-items: center; gap: 6px; margin-top: 14px; padding: 10px 14px; border-radius: 12px; background: #473AE0; color: #fff; font-size: 13.5px; font-weight: 600; text-decoration: none; }
.att__browser { overflow: hidden; border-radius: 18px; background: #fff; box-shadow: 0 30px 70px rgba(20, 22, 60, .18), 0 0 0 1px rgba(20, 22, 60, .06); }
.att__barra { display: flex; align-items: center; gap: 12px; height: 46px; padding: 0 14px; background: #F4F5F8; border-bottom: 1px solid #E6E7EF; }
.att__pallini { display: flex; gap: 6px; }
.att__pallini i { width: 11px; height: 11px; border-radius: 50%; background: #D6D8E1; }
.att__indirizzo { flex: 1; min-width: 0; display: flex; align-items: center; justify-content: center; gap: 7px; height: 30px; padding: 0 10px; overflow: hidden; border-radius: 9px; background: #fff;
  color: #4A4C63; font: 500 12.5px/1 ui-monospace, Menlo, monospace; white-space: nowrap; }
.att__indirizzo .i { width: 13px; height: 13px; color: #12805C; }
.att__apri { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border-radius: 9px; background: #473AE0; color: #fff; font-size: 12.5px; font-weight: 600; text-decoration: none; white-space: nowrap; }
.att__schermo { position: relative; display: block; height: calc(var(--h, 820px) * var(--s, .6)); overflow: hidden; background: #F4F5F8; }
.att__schermo iframe { position: absolute; left: 0; top: 0; width: var(--w, 1280px); height: var(--h, 820px); border: 0; transform-origin: 0 0; transform: scale(var(--s, .6));
  opacity: 0; transition: opacity .6s; pointer-events: none; }
.att__schermo iframe.on { opacity: 1; }
@media (max-width: 1000px) {
  .att__dentro { grid-template-columns: minmax(0, 1fr); max-width: 760px; }
  .att__scelte { grid-template-columns: 1fr 1fr; }
  .att__arrivo { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .att { padding: 6px; }
  .att__pannello { padding: 52px 14px; border-radius: 24px; }
  .att__testa { margin-bottom: 28px; }
  .att__dentro { grid-template-columns: 1fr 1fr; gap: 8px; }
  .att__scelte { display: contents; }
  .att__scelta { order: 1; gap: 10px; padding: 10px; border-radius: 14px; }
  .att__scelta small { display: none; }
  .att__scelta b { font-size: 14.5px; line-height: 1.2; }
  .att__tile { width: 40px; height: 40px; border-radius: 12px; }
  .att__tile .i { width: 21px; height: 21px; }
  .att__browser { order: 2; grid-column: 1 / -1; margin-top: 8px; }
  .att__arrivo { order: 3; grid-column: 1 / -1; margin-top: 8px; }
  .att__pallini { display: none; }
}
@media (prefers-reduced-motion: reduce) { .att__schermo iframe { transition: none; } }

/* l'apertura da computer, più raccolta (16 ottobre, sera: «occupa troppo spazio, il 3D resta troppo basso»):
   titolo, testo e pulsanti più piccoli, meno aria sopra, il cruscotto più in alto e un po' più piccolo. Il telefono
   resta com'era. */
@media (min-width: 1001px) {
  .crs__pannello { padding-top: 112px; padding-bottom: 48px; }
  .main.comp-deserto .crs__titolo { font-size: clamp(2.6rem, 1.4rem + 2.6vw, 3.6rem); }
  .crs__sotto { max-width: 880px; margin-top: 14px; font-size: 1rem; }
  .crs__azioni { margin-top: 22px; }
  .crs__scena { grid-template-columns: 262px minmax(0, 1fr); margin-top: 44px; }
  .crs__lista { gap: 5px; }
  .crs__lista li { padding: 7px 10px; font-size: 13px; }
  .crs__pac { padding: 12px 14px; }
  .crs__pac b { font-size: 19px; }
  .crs__fumetto { top: -34px; font-size: 13px; }
}

/* ============================================================ le nicchie: la stessa apertura col cruscotto, nel vestito di ognuna
   (16 ottobre, sera). Colori e carattere vengono dal vestito (stili.css); pezzi e cruscotto del mestiere da cruscotto.json. */
.comp-deserto.su-nicchia .testata { top: 32px; }
@media (max-width: 640px) { .comp-deserto.su-nicchia .testata { top: 14px; } }
.crs__et { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 16px; color: var(--crs-acc-testo); font: 600 12.5px/1 "Onest", Inter, sans-serif; letter-spacing: .12em; text-transform: uppercase; }
.crs__et i { width: 8px; height: 8px; background: var(--crs-acc); }
.su-nicchia .crs__titolo { max-width: 15em; margin: 0 auto; color: var(--scuro); font-family: var(--font-titoli); font-size: clamp(2.4rem, 1.2rem + 3.6vw, 4.2rem); font-weight: 600; line-height: 1.02; }
.su-nicchia .crs__titolo em { color: var(--ruolo-testo); }
.stile-officina .crs__titolo { font-weight: 700; text-transform: uppercase; letter-spacing: .005em; line-height: .96; }
.stile-legale .crs__titolo { font-weight: 700; }
.stile-clinica .crs__titolo { font-weight: 700; letter-spacing: -.02em; }
.stile-clinica .crs__titolo em { font-style: normal; }
.su-nicchia .crs__sotto b { color: var(--scuro); }
.crs .cr-logo { display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 9px; background: var(--crs-soft); color: var(--crs-acc-testo); }
.crs .cr-logo .i { width: 17px; height: 17px; }
.su-nicchia .crs .cr-marca b { font-family: var(--font-titoli); font-size: 19px; letter-spacing: 0; }
.stile-officina .crs .cr-marca b { text-transform: uppercase; }
.stile-bellezza .crs .cr-marca b { font-size: 21px; }
@media (min-width: 1001px) { .su-nicchia .crs__titolo { font-size: clamp(2.4rem, 1.2rem + 2.6vw, 3.7rem); } }

/* le tre attività nuove del 16 ottobre (parrucchieri e barber shop, bar e gelaterie, ristoranti) nella sezione delle attività */
.att__scelta[data-k="parrucchiere"] { --a-scuro: #0E1B2C; --a-soft: #FBE3E4; }
.att__scelta[data-k="bar"] { --a-scuro: #4A2B21; --a-soft: #E9EECE; }
.att__scelta[data-k="ristorante"] { --a-scuro: #191512; --a-soft: #F4D4BB; }

/* i nomi lunghi dei pezzi (nelle nicchie) vanno a capo dentro la loro scheda; il browser delle attività resta fermo
   mentre la colonna di sinistra scorre (con sei attività è più lunga) */
.crs__lista { grid-template-columns: minmax(0, 1fr); }
.crs__lista li { min-width: 0; white-space: normal; }
.crs__nome { line-height: 1.25; }
@media (min-width: 1001px) { .su-nicchia .crs__scena { grid-template-columns: 280px minmax(0, 1fr); } .att__browser { position: sticky; top: 112px; } }
@media (max-width: 1000px) { .crs__lista { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }

/* ============================================================ il riquadro dell'apertura, come nelle altre aree (16 ottobre, sera:
   «stiamo mettendo il box a tutti quanti… c'è un bordo intorno a tutto, metti lo stesso anche qui»). Come DigitaSocial: un
   riquadro colorato staccato dal bordo dello schermo, la testata dentro e trasparente, i testi bianchi. Sulla principale il
   viola dello sviluppo, sulle nicchie il colore scuro del vestito. Il cruscotto e i pezzi restano chiari sopra. */
.crs { --crs-pannello: #473AE0; }
.su-nicchia .crs { --crs-pannello: var(--scuro); }
.crs__pannello { min-height: calc(100svh - 20px); color: #fff; background-color: var(--crs-pannello);
  background-image: radial-gradient(rgba(255, 255, 255, .08) 1px, transparent 1.2px); background-size: 6px 6px; box-shadow: none; }
.comp-deserto .testata { position: absolute; }
.comp-deserto .testata__barra { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .24); box-shadow: none;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.comp-deserto .marca, .comp-deserto .marca .pittogramma, .comp-deserto .testata__nav a, .comp-deserto .testata .altri__bottone { color: #fff; }
.comp-deserto .marca__di { color: rgba(255, 255, 255, .7); }
@media (hover: hover) { .comp-deserto .testata__nav a:hover, .comp-deserto .testata .altri__bottone:hover { background: rgba(255, 255, 255, .14); } }
.comp-deserto .testata__invito.pulsante--scuro { background: #fff; color: var(--crs-pannello, #473AE0); border-color: #fff; }
.comp-deserto .testata__invito .saetta { color: var(--crs-pannello, #473AE0); }
.main.comp-deserto .testata__invito.pulsante--scuro, .main.comp-deserto .testata__invito .saetta { color: #473AE0; }
.su-nicchia.comp-deserto .testata__invito.pulsante--scuro, .su-nicchia.comp-deserto .testata__invito .saetta { color: var(--scuro); }
.main.comp-deserto .crs__titolo { color: #fff; }
.main.comp-deserto .crs__titolo em { color: #D4CFFF; }
.main.comp-deserto .crs__titolo .q { background: #D4CFFF; }
.su-nicchia .crs__titolo { color: #fff; }
.su-nicchia .crs__titolo em { color: var(--ruolo-luce); }
.crs__sotto, .su-nicchia .crs__sotto { color: rgba(255, 255, 255, .84); }
.crs__sotto b, .su-nicchia .crs__sotto b { color: #fff; }
.crs__et { color: var(--crs-chiaro); }
.crs__et i { background: var(--crs-chiaro); }
.crs__azioni .pulsante--scuro { background: #fff; color: var(--crs-pannello); border-color: #fff; }
.crs__azioni .pulsante--scuro .saetta { color: var(--crs-pannello); }
.su-nicchia .crs__azioni .pulsante--scuro { background: var(--ruolo); color: var(--su-ruolo); border-color: var(--ruolo); }
.su-nicchia .crs__azioni .pulsante--scuro .saetta { color: var(--su-ruolo); }
.crs__azioni .pulsante--bordo { background: transparent; color: #fff; border: 1px solid rgba(255, 255, 255, .4); -webkit-backdrop-filter: none; backdrop-filter: none; }
@media (hover: hover) { .crs__azioni .pulsante--bordo:hover { background: rgba(255, 255, 255, .1); } }
.main.comp-deserto .crs__fumetto { background: #14151F; color: #fff; }
.crs__esempio { background: rgba(255, 255, 255, .16); }
.crs__pezzi { box-shadow: 0 24px 50px rgba(0, 0, 0, .22); }
@media (max-width: 640px) { .crs__pannello { min-height: 0; } }
/* dentro il riquadro colorato i testi sono bianchi: la scheda bianca dei pezzi torna scura */
.crs__pezzi { color: #15162A; }

/* ============================================================ l'apertura, disposizione (17 ottobre, dopo le foto del titolare da computer e
   da tablet: «togli i pezzi, più compatto, deve prendere i margini del menu sopra, allineamento da sinistra a destra»).
   Senza i pezzi: titolo, testo e pulsanti; il cruscotto da solo. Sugli schermi larghi testo a sinistra e gestionale a
   destra, larghi come la testata (il testo parte dal bordo sinistro del menu, il gestionale arriva al bordo destro del
   pulsante). Regola di Alfredo per tutte le aree (16 ottobre, passata da DigitaSito): sopra 1100 px il testo è alto quanto
   il gestionale, il titolo parte alla sua cima e i pulsanti finiscono al suo fondo. Sotto: uno sotto l'altro, centrati. */
.crs__scena { display: block; max-width: 980px; margin: 52px auto 0; }
.crs__vista { margin-top: 0; }
@media (max-width: 1000px) { .crs__scena { margin-top: 44px; } }
@media (max-width: 640px) { .crs__scena { margin-top: 40px; } }
@media (min-width: 1100px) {
  .crs__pannello { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); align-items: stretch; column-gap: clamp(36px, 3.6vw, 64px);
    align-content: center; min-height: 0; padding: 136px calc(var(--margine) - 10px) 64px; text-align: left; }
  .crs__testo { grid-column: 1; grid-row: 1; display: flex; flex-direction: column; align-items: flex-start; }
  .crs__testo .crs__sotto { margin: auto 0 0; padding-top: 28px; }
  .crs__pannello { padding-inline: max(calc(var(--margine) - 10px), calc((100% - (var(--larga) - 2 * var(--margine) + 120px)) / 2)); }
  .crs__scena { display: contents; }
  .crs__vista { grid-column: 2; grid-row: 1; align-self: center; height: calc(780px * var(--s, .55)); }
  .crs__tilt { top: 0; left: auto; right: 0; transform-origin: 100% 0; transform: rotateY(-12deg) rotateX(5deg) scale(var(--s, .55)); animation-name: crs-dondola-destra; }
  @keyframes crs-dondola-destra { to { transform: rotateY(-8deg) rotateX(3deg) scale(var(--s, .55)); } }
  .main.comp-deserto .crs__titolo, .su-nicchia .crs__titolo { max-width: none; margin: 0; font-size: clamp(2.6rem, .9rem + 3vw, 3.7rem); line-height: 1.14; letter-spacing: -.05em; }
  .su-nicchia .crs__titolo { font-size: clamp(2.4rem, .9rem + 2.3vw, 3.9rem); letter-spacing: -.02em; }
  .stile-officina .crs__titolo, .stile-barbiere .crs__titolo { line-height: 1.04; }
  .crs__sotto { max-width: 30em; font-size: 1.06rem; line-height: 1.6; }
  .crs__azioni { justify-content: flex-start; margin-top: 0; padding-top: 26px; align-self: start; }
  .crs__fumetto { right: 0; top: -34px; }
}
/* il riquadro si stringe intorno a quello che contiene, anche sul tablet in verticale */
.crs__pannello { min-height: 0; }

/* la riga che scorre in fondo all'apertura (come su DigitaSito): «Fatto per» con le attività sulla principale,
   «Nel tuo gestionale» con le funzioni sulle nicchie */
.crs__nastro { display: flex; align-items: center; gap: 20px; margin-top: 48px; padding-top: 16px; border-top: 1px solid rgba(255, 255, 255, .2); text-align: left; }
.crs__nastro small { flex: none; color: rgba(255, 255, 255, .62); font: 600 11px/1 "Onest", Inter, sans-serif; letter-spacing: .14em; text-transform: uppercase; }
.crs__nastro-vista { flex: 1; min-width: 0; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.crs__nastro-riga { display: flex; gap: 34px; width: max-content; animation: crs-nastro 45s linear infinite; }
.crs__nastro-riga span { display: inline-flex; align-items: center; gap: 8px; color: rgba(255, 255, 255, .92); font: 600 14px/1 "Onest", Inter, sans-serif; white-space: nowrap; }
.crs__nastro-riga .i { width: 19px; height: 19px; }
.crs__nastro-riga .altri { color: rgba(255, 255, 255, .55); font-weight: 500; }
@keyframes crs-nastro { to { transform: translateX(calc(-50% - 17px)); } }
@media (min-width: 1100px) { .crs__nastro { grid-column: 1 / -1; grid-row: 2; } .crs__pannello { padding-bottom: 36px; } }
@media (max-width: 1099px) { .crs__nastro { max-width: 980px; margin-left: auto; margin-right: auto; } }
@media (max-width: 640px) { .crs__nastro { flex-direction: column; align-items: flex-start; gap: 10px; margin-top: 36px; } .crs__nastro-vista { width: 100%; } }
@media (prefers-reduced-motion: reduce) { .crs__nastro-riga { animation: none; flex-wrap: wrap; width: auto; } }

/* telefono e finestre strette: la testata più staccata dal bordo del riquadro (17 ottobre: «abbassa un po' i pulsanti
   sopra, che ci sia più margine») */
@media (max-width: 760px) {
  .main.comp-deserto .testata, .comp-deserto.su-nicchia .testata { top: 28px; }
  .crs__pannello { padding-top: 124px; }
}

/* l'etichetta «Il tuo gestionale» in basso a sinistra del cruscotto, con la punta in su: in alto si confondeva coi pulsanti
   (17 ottobre) */
.crs__fumetto, .crs .crs__fumetto { top: auto; right: auto; bottom: -18px; left: 22px; z-index: 6; }
.crs__fumetto::after { top: -5px; bottom: auto; left: 20px; right: auto; }
@media (min-width: 1100px) { .crs__fumetto, .crs .crs__fumetto { top: auto; right: auto; bottom: -18px; left: 34px; } }

/* sotto i 1100 px (tablet e telefono) il gestionale va da filo a filo del menu e cresce o cala con lo schermo: largo quanto
   la testata, inclinato solo all'indietro (così i bordi restano dritti e allineati) (17 ottobre) */
@media (max-width: 1099px) {
  .crs__pannello { padding-left: calc(var(--margine) - 10px); padding-right: calc(var(--margine) - 10px); }
  .crs__scena { max-width: none; }
  .crs__vista { height: calc(780px * var(--s, .5) + 8px); }
  .crs__tilt { left: 0; right: auto; transform-origin: 0 0; transform: rotateX(7deg) scale(var(--s, .5)); animation: crs-dondola-x 10s ease-in-out infinite alternate; }
  .crs__nastro { max-width: none; }
}
@keyframes crs-dondola-x { to { transform: rotateX(4deg) scale(var(--s, .5)); } }
@media (max-width: 640px) {
  .crs__pannello { padding-left: calc(var(--margine) - 6px); padding-right: calc(var(--margine) - 6px); }
  .crs__tilt { transform: rotateX(7deg) scale(var(--s, .3)); animation: crs-dondola-x 10s ease-in-out infinite alternate; }
}

/* sotto i 1100 px il gestionale sta dritto (niente inclinazione), così va esattamente da filo a filo del menu; ondeggia piano */
@media (max-width: 1099px) {
  .crs__tilt, .crs .crs__tilt { transform: scale(var(--s, .5)); animation: crs-galla-dritto 6s ease-in-out infinite alternate; }
  .crs__vista { height: calc(780px * var(--s, .5)); }
}
@keyframes crs-galla-dritto { to { transform: translateY(-6px) scale(var(--s, .5)); } }

/* l'etichetta «Il tuo gestionale»: in basso a destra del gestionale, bianca, col puntino che pulsa, e galleggia (17 ottobre) */
.comp-deserto .crs .crs__fumetto { top: auto !important; left: auto !important; right: 26px !important; bottom: -22px !important;
  display: inline-flex; align-items: center; gap: 9px; padding: 9px 15px 9px 12px; border-radius: 12px; background: #fff; color: #15162A;
  font-size: 14px; font-weight: 600; box-shadow: 0 16px 34px rgba(0, 0, 0, .28), 0 0 0 1px rgba(255, 255, 255, .6);
  animation: crs-fumetto .9s var(--rimbalzo) both 1.2s, crs-fluttua 4.6s ease-in-out 2.1s infinite alternate; }
.comp-deserto .crs .crs__fumetto::before { content: ""; flex: none; width: 9px; height: 9px; border-radius: 3px; background: var(--crs-acc); animation: crs-punto 1.8s ease-out infinite; }
.comp-deserto .crs .crs__fumetto::after { top: -5px; bottom: auto; left: auto; right: 24px; background: #fff; }
@keyframes crs-fluttua { from { transform: translateY(0) rotate(-1.2deg); } to { transform: translateY(-7px) rotate(1.2deg); } }
@keyframes crs-punto { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--crs-acc) 55%, transparent); } 70%, 100% { box-shadow: 0 0 0 9px transparent; } }
@media (max-width: 640px) { .comp-deserto .crs .crs__fumetto { right: 14px !important; bottom: -18px !important; font-size: 13px; } }
/* «Esempio» in fondo al riquadro non copre più la riga che scorre */
.crs__pannello, .comp-deserto .crs__pannello { padding-bottom: 54px; }

/* l'etichetta: niente puntino («sembra intelligenza artificiale»), al suo posto una freccetta curva disegnata a mano che
   punta al gestionale e ogni tanto si ridisegna, come un appunto a penna (17 ottobre) */
.comp-deserto .crs .crs__fumetto::before { content: none; }
.comp-deserto .crs .crs__fumetto::after { content: none; }
.crs__freccia { flex: none; width: 26px; height: 20px; overflow: visible; fill: none; stroke: var(--crs-acc-testo); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.crs__freccia-linea { stroke-dasharray: 40; stroke-dashoffset: 40; animation: crs-penna 5s ease-in-out 1.6s infinite; }
.crs__freccia-punta { stroke-dasharray: 14; stroke-dashoffset: 14; animation: crs-punta 5s ease-in-out 1.6s infinite; }
@keyframes crs-penna { 0% { stroke-dashoffset: 40; } 16%, 86% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: -40; } }
@keyframes crs-punta { 0%, 14% { stroke-dashoffset: 14; } 22%, 86% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: -14; } }
@media (prefers-reduced-motion: reduce) { .crs__freccia-linea, .crs__freccia-punta { stroke-dashoffset: 0; animation: none; } }
.crs .nw { white-space: nowrap; }

/* da computer il riquadro arriva fino al fondo dello schermo (meno i 10 px di bordo) e il cruscotto si fa più piccolo se lo
   schermo è basso; il contenuto sta al centro dello spazio, la riga che scorre in fondo. Sotto, un po' di spazio vuoto
   prima delle altre sezioni. Il bollino «Esempio» è tolto: i dati d'esempio lo dicono dentro il cruscotto (17 ottobre). */
@media (min-width: 1100px) {
  .crs__pannello { min-height: min(calc(100svh - 20px), 1000px); grid-template-rows: minmax(0, 1fr) auto; }
  .crs__testo { align-self: center; height: calc(780px * var(--s, .55)); }
  .crs__vista { align-self: center; }
}
.crs { padding-bottom: clamp(28px, 5vh, 56px); }
.crs .cr-esempio { margin-left: auto; padding: 4px 9px; border-radius: 8px; background: #F4F5F9; color: #8B8DA3; font-size: 11.5px; font-weight: 600; letter-spacing: .02em; }
.crs .cr-esempio + .cr-icona { margin-left: 0; }

/* il titolo della principale: Saira Extra Condensed, tutto in maiuscolo (17 ottobre: scelto il 13 delle venti prove di
   proposte/caratteri/, «con l'interlinea un po' più larga»: 1 invece di 0,9). Le nicchie tengono il carattere del vestito. */
.main.comp-deserto .crs__titolo { font-family: "Saira Extra Condensed", "Onest", sans-serif; font-weight: 800; font-style: normal; text-transform: uppercase;
  letter-spacing: .01em; line-height: 1; font-size: calc(1.5 * clamp(2.3rem, 1rem + 3.2vw, 3.7rem)); }
.main.comp-deserto .crs__titolo .q { width: .14em; height: .14em; }

/* il menu di DigitaPlan: tutte le voci in grassetto (17 ottobre) */
.comp-deserto .testata__nav a, .comp-deserto .testata .altri__bottone { font-weight: 700; }
/* il logo nella barra delle nicchie: bianco sul riquadro scuro (una regola comune lo faceva blu notte, quasi invisibile) */
.comp-deserto.su-nicchia .testata .marca .pittogramma { color: #fff; }

/* il cruscotto vive: notifica, numero che sale, cursore che spunta, contagiri (17 ottobre) */
.crs .cr-corpo { position: relative; }
.crs .cr-toast { position: absolute; top: 74px; right: 22px; z-index: 8; display: flex; align-items: center; gap: 12px; width: 340px; padding: 12px 14px;
  border-radius: 16px; background: #fff; border: 1px solid #ECEDF3; box-shadow: 0 18px 40px rgba(20, 22, 60, .18); opacity: 0; transform: translateY(-14px) scale(.96); pointer-events: none; }
.crs .cr-toast.su { animation: cr-toast 4.6s cubic-bezier(.34, 1.4, .64, 1) both; }
@keyframes cr-toast { 0% { opacity: 0; transform: translateY(-14px) scale(.96); } 9%, 82% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(-8px) scale(.98); } }
.crs .cr-toast__ico { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 11px; background: var(--crs-soft); color: var(--crs-acc-testo); }
.crs .cr-toast__ico .i { width: 18px; height: 18px; }
.crs .cr-toast b { display: block; font-size: 14px; font-weight: 600; }
.crs .cr-toast small { display: block; margin-top: 2px; color: #7A7C92; font-size: 12.5px; }
.crs .cr-toast em { margin-left: auto; align-self: flex-start; color: #A0A2B4; font-size: 11.5px; font-style: normal; white-space: nowrap; }
.crs .cr-num.batte { animation: cr-batte .6s cubic-bezier(.34, 1.8, .64, 1); }
@keyframes cr-batte { 40% { transform: scale(1.35); } }
.crs .cr-k { transition: transform .5s cubic-bezier(.34, 1.56, .64, 1), box-shadow .5s; }
.crs .cr-k.sale { animation: cr-sale 1.6s cubic-bezier(.34, 1.4, .64, 1); }
.crs .cr-k.sale b { animation: cr-cifra .6s cubic-bezier(.34, 1.6, .64, 1); }
.crs .cr-k.sale .cr-su { animation: cr-luce 1.6s ease; }
@keyframes cr-sale { 0%, 100% { transform: none; box-shadow: none; } 25%, 70% { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(20, 22, 60, .12); } }
@keyframes cr-cifra { from { transform: translateY(8px); opacity: .2; } }
@keyframes cr-luce { 20%, 60% { background: #12805C; color: #fff; } }
.crs .cr-fare em { transition: background .35s, color .35s; }
.crs .cr-fare li.fatta em { background: #E6F6EE; color: #12805C; }
.crs .cr-fare li.fatta em::before { content: "✓ "; }
.crs .cr-fare li.fatta { opacity: .62; transition: opacity .5s; }
.crs .cr-mouse { position: absolute; left: 0; top: 0; z-index: 9; width: 22px; height: 28px; opacity: 0; transform: translate(900px, 640px);
  transition: transform 1.05s cubic-bezier(.45, 0, .2, 1), opacity .4s; pointer-events: none; filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .25)); }
.crs .cr-mouse svg { width: 100%; height: 100%; fill: #15162A; stroke: #fff; stroke-width: 1.2; stroke-linejoin: round; transition: transform .18s; transform-origin: 20% 10%; }
.crs .cr-mouse.visto { opacity: 1; }
.crs .cr-mouse.clic svg { transform: scale(.82); }

/* la barra fissa dopo l'apertura: scende dall'alto, vetro chiaro, scritte scure, pulsante nel colore dell'area o del vestito */
.comp-deserto .testata.fissa { position: fixed; top: 14px; animation: testata-scende .5s cubic-bezier(.34, 1.3, .64, 1) both; }
@keyframes testata-scende { from { opacity: 0; transform: translateY(-110%); } }
.comp-deserto .testata.fissa .testata__barra { background: rgba(255, 255, 255, .84); border-color: rgba(20, 22, 60, .08); box-shadow: 0 12px 34px rgba(20, 22, 60, .12);
  -webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4); }
.comp-deserto .testata.fissa .marca, .comp-deserto .testata.fissa .testata__nav a, .comp-deserto .testata.fissa .altri__bottone { color: #15162A; }
.comp-deserto .testata.fissa .marca__di { color: #6B6D82; }
.main.comp-deserto .testata.fissa .marca .pittogramma { color: #473AE0; }
.comp-deserto.su-nicchia .testata.fissa .marca .pittogramma { color: var(--scuro); }
@media (hover: hover) { .comp-deserto .testata.fissa .testata__nav a:hover, .comp-deserto .testata.fissa .altri__bottone:hover { background: rgba(20, 22, 60, .06); } }
.main.comp-deserto .testata.fissa .testata__invito.pulsante--scuro { background: #473AE0; border-color: #473AE0; color: #fff; }
.main.comp-deserto .testata.fissa .testata__invito .saetta { color: #fff; }
.su-nicchia.comp-deserto .testata.fissa .testata__invito.pulsante--scuro { background: var(--scuro); border-color: var(--scuro); color: #fff; }
.su-nicchia.comp-deserto .testata.fissa .testata__invito .saetta { color: var(--ruolo-luce); }
@media (max-width: 640px) { .comp-deserto .testata.fissa { top: 10px; } }
@media (prefers-reduced-motion: reduce) { .comp-deserto .testata.fissa { animation: none; } }
/* arrivato il piede, la barra fissa risale e sparisce */
.comp-deserto .testata.fissa.via { animation: testata-sale .4s cubic-bezier(.5, 0, .75, 0) both; pointer-events: none; }
@keyframes testata-sale { to { opacity: 0; transform: translateY(-120%); } }
@media (prefers-reduced-motion: reduce) { .comp-deserto .testata.fissa.via { animation: none; visibility: hidden; } }

/* il titolo si mostra quando il suo carattere è arrivato ed è misurato (niente salto da piccolo a grande); senza
   JavaScript o dopo 2,5 s si vede comunque */
html.js .crs:not(.crs--pronto) .crs__titolo { opacity: 0; }
.crs .crs__titolo { transition: opacity .25s ease; }

/* i titoli delle nicchie in grassetto e in maiuscolo, come nel modello hero-approdo (17 ottobre, richiesta di Alfredo
   passata da DigitaSocial: «i testi dei titoli delle nicchie siano in grassetto e in maiuscolo») */
.comp-deserto.su-nicchia .crs .crs__titolo { font-family: var(--font-titoli); font-weight: 700; font-synthesis: none; text-transform: uppercase; letter-spacing: .01em; line-height: 1.02;
  font-size: clamp(2.2rem, .8rem + 2.1vw, 3.6rem); }
.comp-deserto.su-nicchia .crs .crs__titolo em { font-weight: inherit; }

/* meno spazio fra le sezioni (17 ottobre, Alfredo: «tra la sezione dell'hero e l'inizio di questa sezione mettere meno spazi,
   e idem tra tutte le varie sezioni»): circa la metà di prima, da 120 a 60 px sopra e sotto */
.comp-deserto .sezione { padding-top: clamp(36px, 4vw, 60px); padding-bottom: clamp(36px, 4vw, 60px); }
.comp-deserto .deserto-righe, .comp-deserto .deserto-tabella { padding-top: clamp(36px, 4vw, 60px); }