/* Progetto Z · lo stile comune dei siti dei marchi.
   Viene dal sito Digitato 2026: palette 000538 · 473AE0 · FF3B30 · F6F7FB · 1B1D1A, Barlow per i titoli e Inter per i
   testi, vetro su riquadri e pulsanti, pulsanti con gli angoli della barra (16px), niente tondi, quadratino al posto del
   punto nei titoli. I colori vanno per ruolo: software (gestionali, siti) viola, comunicazione (social, branding) arancione,
   scuro se è di tutti e due. Mai sfumati fra loro.
   Disposizione del 15 ottobre sera: mix con due referenze del titolare (TaskGo e GeneX), vedi genera.py. */

@font-face { font-family: "Inter"; src: url(font/inter-latin.woff2) format("woff2"); font-weight: 400 700; font-display: swap; }
@font-face { font-family: "Barlow"; src: url(font/barlow-700.woff2) format("woff2"); font-weight: 700; font-display: swap; }

/* ------------------------------------------------------------ 1. colori, caratteri, misure */
:root {
  --scuro: #000538;
  --sw: #473AE0;
  --com: #FF3B30;
  --chiaro: #F6F7FB;
  --nero: #1B1D1A;
  --carta: #FFFFFF;
  --ruolo: var(--scuro);
  --ruolo-luce: #F6F7FB;
  --ruolo-velo: #EEF0F7;
  --testo: #1B1D1A;
  --tenue: #5A5E78;
  --filo: rgba(0, 5, 56, .09);

  --font-titoli: "Barlow", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-testo: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --margine: clamp(16px, 5vw, 88px);
  --larga: 1240px;
  /* le forme, uguali per tutte le attività, tutte le aree e tutte le sezioni (Alfredo, 17 ottobre): i vestiti (stili.css)
     e le composizioni (cielo, deserto, svizzero, fuoco…) non le cambiano più */
  --r-pulsante: 16px;
  --r-pulsante-basso: 12px;
  --r-scheda: 24px;
  --r-arco: 24px;
  --r-foto: 24px;
  --rimbalzo: cubic-bezier(.34, 1.56, .64, 1);
  --scatto: cubic-bezier(.7, -.35, .25, 1.35);
}
.ruolo-sw { --ruolo: #473AE0; --ruolo-luce: #A99BFF; --ruolo-velo: #ECE9FF; }
.ruolo-com { --ruolo: #FF3B30; --ruolo-luce: #FF8A80; --ruolo-velo: #FFE9E6; }
@media (max-width: 640px) { :root { --r-pulsante: 14px; --r-pulsante-basso: 10px; } }

/* ------------------------------------------------------------ 2. base */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 96px; }
body {
  margin: 0; background: var(--carta); color: var(--testo);
  font: 400 1rem/1.6 var(--font-testo); overflow-x: clip;
  -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3, h4, legend { font-family: var(--font-titoli); font-weight: 700; color: var(--scuro); line-height: 1.05; margin: 0; letter-spacing: -.005em; }
h1, h2 { text-wrap: balance; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button { font: inherit; color: inherit; }
code { font: .9em ui-monospace, SFMono-Regular, Menlo, monospace; background: var(--chiaro); padding: .1em .35em; border-radius: 6px; }
em { font-style: normal; color: var(--ruolo-testo, var(--ruolo)); }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 3px solid var(--ruolo); outline-offset: 3px; }

/* il quadratino: al posto del punto nei titoli, e davanti alle etichette */
.q { display: inline-block; width: .3em; height: .3em; margin-left: .07em; background: var(--ruolo); vertical-align: baseline; }
.etichetta {
  display: inline-flex; align-items: center; gap: .6em; margin-bottom: 18px;
  font: 600 .8125rem/1 var(--font-testo); letter-spacing: .09em; text-transform: uppercase; color: var(--scuro);
}
.etichetta .q { width: 9px; height: 9px; margin: 0; }
.etichetta--pillola { padding: 9px 14px; border-radius: 999px; background: rgba(255, 255, 255, .7); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .9), 0 8px 20px -14px rgba(0, 5, 56, .4); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }

/* ------------------------------------------------------------ 3. vetro e pulsanti */
.testata__barra, .prezzo, .modulo, .funzione, .anche, .nicchia, .scene__tab button, .pulsante--bordo, .passo {
  background: color-mix(in srgb, #fff 72%, transparent);
  -webkit-backdrop-filter: blur(12px) saturate(160%); backdrop-filter: blur(12px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, .8);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .95), 0 0 0 1px var(--filo), 0 18px 40px -28px rgba(0, 5, 56, .35);
}
.pulsante--scuro, .stima, .nicchia--misura {
  background: color-mix(in srgb, var(--scuro) 90%, transparent);
  -webkit-backdrop-filter: blur(12px) saturate(160%); backdrop-filter: blur(12px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, .12);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 16px 34px -16px rgba(0, 5, 56, .65);
  color: #fff;
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .testata__barra, .prezzo, .modulo, .funzione, .anche, .nicchia, .scene__tab button, .pulsante--bordo, .passo { background: rgba(255, 255, 255, .96); }
  .pulsante--scuro, .stima, .nicchia--misura { background: var(--scuro); }
}
@media (prefers-reduced-transparency: reduce) {
  .testata__barra, .prezzo, .modulo, .funzione, .anche, .nicchia, .scene__tab button, .pulsante--bordo, .passo { background: #fff; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .pulsante--scuro, .stima, .nicchia--misura { background: var(--scuro); -webkit-backdrop-filter: none; backdrop-filter: none; }
}

.pulsante {
  display: inline-flex; align-items: center; justify-content: center; gap: .55em;
  min-height: 52px; padding: 0 22px; border-radius: var(--r-pulsante);
  font: 600 1rem/1.1 var(--font-testo); text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: transform .35s var(--rimbalzo), box-shadow .3s;
  touch-action: manipulation; user-select: none; -webkit-user-select: none;
}
.pulsante--bordo { color: var(--scuro); }
.pulsante:active { transform: scale(.96); }
@media (hover: hover) { .pulsante:hover { transform: translateY(-2px); } }
.saetta { width: 1.05em; height: 1.05em; color: var(--ruolo-luce); }
.freccia { display: inline-block; transition: transform .35s var(--rimbalzo); }
@media (hover: hover) { a:hover > .freccia, .pulsante:hover .freccia { transform: translateX(4px); } }

/* ------------------------------------------------------------ 4. la testata */
.testata {
  position: fixed; z-index: 50; top: 14px; left: var(--margine); right: var(--margine);
  max-width: calc(var(--larga) - 2 * var(--margine) + 120px); margin: 0 auto;
  display: flex; gap: 12px; align-items: stretch;
}
.testata__barra {
  flex: 1; min-width: 0; height: 64px; padding: 0 12px 0 20px; border-radius: 16px;
  display: flex; align-items: center; gap: 16px;
}
.testata__invito { height: 64px; padding: 0 22px; border-radius: 16px; }
.marca { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--scuro); min-width: 0; }
.marca .pittogramma { width: 34px; height: auto; color: var(--marchio, var(--ruolo)); flex: none; }
.marca__nome { font: 700 1.25rem/1 var(--font-titoli); text-transform: uppercase; letter-spacing: .03em; white-space: nowrap; }
.marca__di { font-size: .75rem; color: var(--tenue); white-space: nowrap; padding-top: 3px; }
.testata__nav { display: flex; gap: 2px; margin: 0 auto; }
.testata__nav a { padding: 9px 13px; border-radius: 10px; font-weight: 500; font-size: .95rem; text-decoration: none; color: var(--scuro); }
@media (hover: hover) { .testata__nav a:hover { background: rgba(0, 5, 56, .06); } }
@media (max-width: 1060px) { .testata__nav { display: none; } }
@media (max-width: 640px) {
  .testata { top: 10px; gap: 8px; }
  .testata__barra, .testata__invito { height: 56px; border-radius: 14px; }
  .testata__barra { padding: 0 14px; }
  .testata__invito { padding: 0 16px; font-size: .95rem; }
  .marca__di { display: none; }
  .marca .pittogramma { width: 28px; }
  .marca__nome { font-size: 1.05rem; }
}
@media (max-width: 420px) { .testata__piu { display: none; } }

/* ------------------------------------------------------------ 5. l'apertura (centrata, col prodotto grande sotto: TaskGo) */
.apertura {
  position: relative; isolation: isolate; overflow: hidden;
  margin: 10px; border-radius: 32px; padding: 132px var(--margine) 0;
  background: linear-gradient(180deg, var(--ruolo-velo) 0%, color-mix(in srgb, var(--ruolo-velo) 45%, #fff) 55%, #fff 100%);
  text-align: center;
}
.apertura__cielo { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.apertura__cielo i { position: absolute; border-radius: 50%; background: #fff; filter: blur(40px); opacity: .9; }
.apertura__cielo i:nth-child(1) { width: 46%; height: 34%; left: -12%; top: 34%; }
.apertura__cielo i:nth-child(2) { width: 40%; height: 30%; right: -10%; top: 26%; }
.apertura__cielo i:nth-child(3) { width: 70%; height: 22%; left: 15%; top: -12%; opacity: .7; }
.apertura__testo { max-width: 940px; margin: 0 auto; }
.apertura__titolo { font-size: clamp(2.3rem, 1.4rem + 3.3vw, 4.3rem); line-height: 1.02; letter-spacing: -.015em; }
.apertura__sotto { max-width: 40em; margin: 22px auto 0; font-size: clamp(1.02rem, .98rem + .3vw, 1.18rem); color: var(--tenue); }
.apertura__sotto b { color: var(--scuro); }
.apertura__azioni { margin-top: 30px; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.apertura__prodotto { max-width: 1180px; margin: clamp(44px, 6vw, 72px) auto 0; }
@media (min-width: 1360px) { .apertura__prodotto { max-width: min(1080px, calc(100% - 300px)); } }
@media (max-width: 640px) {
  .apertura { margin: 6px; border-radius: 24px; padding-top: 96px; }
  .apertura__azioni .pulsante { flex: 1 1 100%; }
}

.scene__tab { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-bottom: 22px; }
.scene__tab button {
  min-height: 42px; padding: 0 16px; border-radius: var(--r-pulsante-basso); cursor: pointer;
  font-weight: 600; font-size: .9rem; color: var(--scuro); transition: transform .35s var(--rimbalzo);
}
.scene__tab button.attiva { background: var(--scuro); color: #fff; box-shadow: 0 10px 24px -14px rgba(0, 5, 56, .7); }
.scene__tab button:active { transform: scale(.95); }

/* ------------------------------------------------------------ 6. le sezioni */
.sezione { max-width: var(--larga); margin: 0 auto; padding: clamp(64px, 8vw, 120px) var(--margine); }
.sezione__testa { max-width: 780px; margin-bottom: clamp(32px, 4vw, 52px); }
.sezione__testa--centro { margin-left: auto; margin-right: auto; text-align: center; }
.sezione__testa h2 { font-size: clamp(2rem, 1.4rem + 2.4vw, 3.4rem); }
.sezione__testa p:not(.etichetta) { margin-top: 16px; font-size: 1.08rem; color: var(--tenue); }
.spunte li { position: relative; padding-left: 22px; margin: 7px 0; }
.spunte li::before { content: ""; position: absolute; left: 0; top: .55em; width: 9px; height: 9px; background: var(--ruolo); }

/* come funziona: i riquadri con un pezzo di schermata dentro (TaskGo) */
.bento { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-areas: "a b c" "d d c"; gap: 20px; }
.funzione { display: flex; flex-direction: column; gap: 18px; padding: 24px; border-radius: var(--r-scheda); background: color-mix(in srgb, var(--chiaro) 92%, transparent); text-align: left; }
.funzione:nth-child(1) { grid-area: a; } .funzione:nth-child(2) { grid-area: b; } .funzione:nth-child(3) { grid-area: c; }
.funzione:nth-child(4) { grid-area: d; display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: center; gap: 24px; }
.funzione:nth-child(3) { background: linear-gradient(180deg, var(--ruolo-velo), color-mix(in srgb, var(--chiaro) 92%, transparent) 55%); }
.funzione__parola { display: inline-flex; align-items: center; gap: 8px; font: 600 .78rem/1 var(--font-testo); letter-spacing: .09em; text-transform: uppercase; color: var(--tenue); }
.funzione__parola .q { width: 8px; height: 8px; margin: 0; }
.funzione h3 { margin-top: 12px; font-size: 1.35rem; line-height: 1.15; }
.funzione p { margin-top: 8px; color: var(--tenue); font-size: .95rem; }
.funzione .mini { margin-top: auto; }
@media (max-width: 960px) {
  .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: "a b" "c c" "d d"; }
}
@media (max-width: 640px) {
  .bento { grid-template-columns: minmax(0, 1fr); grid-template-areas: "a" "b" "c" "d"; }
  .funzione:nth-child(4) { grid-template-columns: minmax(0, 1fr); }
}
.dentro { margin-top: 36px; text-align: center; }
.dentro small { display: block; margin-bottom: 14px; font: 600 .78rem/1 var(--font-testo); letter-spacing: .09em; text-transform: uppercase; color: var(--tenue); }
.dentro__lista { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.dentro__lista li { padding: 9px 14px; border-radius: 999px; background: var(--chiaro); box-shadow: inset 0 0 0 1px var(--filo); font-size: .92rem; font-weight: 500; color: var(--scuro); }

/* i pezzetti di schermata dentro i riquadri */
.mini { padding: 16px; border-radius: 16px; background: #fff; box-shadow: 0 0 0 1px var(--filo), 0 14px 30px -22px rgba(0, 5, 56, .35); font-size: .86rem; }
.mini__testa { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 12px; }
.mini__testa small { color: var(--tenue); }
.mini__testa b { font: 700 1.15rem/1 var(--font-titoli); color: var(--scuro); }
.mini__testa i { width: 14px; height: 4px; background: rgba(0, 5, 56, .25); box-shadow: 0 6px 0 rgba(0, 5, 56, .25); }
.mini--conteggi li { display: flex; align-items: center; gap: 10px; padding: 5px 0; }
.mini--conteggi li span { flex: 1; color: var(--testo); }
.mini--conteggi li b { color: var(--scuro); }
.mini--conteggi li > i, .segmenti i { width: 9px; height: 9px; }
.segmenti { display: flex; gap: 4px; margin-top: 12px; height: 9px; }
.segmenti i { height: 100%; }
.t-pieno { background: var(--ruolo); } .t-medio { background: color-mix(in srgb, var(--ruolo) 55%, #fff); }
.t-chiaro { background: color-mix(in srgb, var(--ruolo) 25%, #fff); } .t-neutro { background: rgba(0, 5, 56, .18); }
.mini--scheda { display: grid; gap: 6px; }
.mini__tag { justify-self: start; padding: 4px 8px; background: var(--ruolo); color: var(--su-ruolo, #fff); font-size: .72rem; font-weight: 600; }
.mini--scheda b { font-size: 1rem; color: var(--scuro); }
.mini--scheda p { margin: 0; color: var(--tenue); font-size: .85rem; }
.mini__riga em { display: inline-block; padding: 3px 8px; background: color-mix(in srgb, var(--ruolo) 12%, #fff); color: var(--ruolo-testo, var(--ruolo)); font-size: .76rem; font-weight: 600; }
.mini__bottone { margin-top: 6px; padding: 10px 12px; border-radius: 10px; text-align: center; background: color-mix(in srgb, var(--ruolo) 10%, #fff); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ruolo) 35%, #fff); color: var(--ruolo-testo, var(--ruolo)); font-weight: 600; }
.mini--messaggi li { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-top: 1px solid var(--filo); }
.mini--messaggi li:first-child { border-top: 0; }
.mini--messaggi li div { flex: 1; min-width: 0; }
.mini--messaggi li b { display: block; color: var(--scuro); font-size: .86rem; }
.mini--messaggi li small { display: block; color: var(--tenue); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mini .avatar, .persone .avatar { flex: none; width: 32px; height: 32px; display: grid; place-items: center; background: color-mix(in srgb, var(--ruolo) 14%, #fff); color: var(--ruolo-testo, var(--ruolo)); font: 700 .9rem/1 var(--font-titoli); }
.ora { display: grid; justify-items: end; gap: 4px; font-size: .74rem; color: var(--tenue); }
.ora i { min-width: 18px; height: 18px; display: grid; place-items: center; background: var(--ruolo); color: var(--su-ruolo, #fff); font: 700 .7rem/1 var(--font-testo); font-style: normal; }
.mini__titolo { display: block; margin-bottom: 8px; color: var(--scuro); }
.mini table { width: 100%; border-collapse: collapse; }
.mini th { padding: 6px 0; text-align: left; font-size: .74rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--tenue); }
.mini td { padding: 8px 0; border-top: 1px solid var(--filo); color: var(--testo); }
.mini td:last-child, .mini th:last-child { text-align: right; font-weight: 600; color: var(--scuro); }
.mini tr.evidenzia td { color: var(--ruolo-testo, var(--ruolo)); font-weight: 600; }
.campioni { display: grid; gap: 8px; }
.campioni li { display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 10px; }
.campioni i { width: 34px; height: 34px; background: var(--c); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08); }
.campioni b { font-size: .86rem; color: var(--scuro); }
.campioni small { font: 600 .74rem/1 ui-monospace, Menlo, monospace; color: var(--tenue); }

/* prezzi (come le schede dei numeri di TaskGo: tinta in alto, di un colore solo) */
.prezzi { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; align-items: start; }
.prezzo { container-type: inline-size; display: flex; flex-direction: column; padding: 26px 26px 26px; border-radius: var(--r-scheda); background: linear-gradient(180deg, color-mix(in srgb, var(--ruolo-velo) 85%, #fff) 0, rgba(255, 255, 255, .75) 46%); }
.prezzo:nth-child(2) { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .95), 0 0 0 2px var(--ruolo), 0 28px 54px -28px rgba(0, 5, 56, .5); }
.prezzo__alto { display: flex; justify-content: space-between; align-items: center; }
.prezzo__misura { font: 600 .78rem/1 var(--font-testo); letter-spacing: .08em; text-transform: uppercase; color: var(--tenue); }
.prezzo__segno { width: 14px; height: 14px; background: var(--ruolo); box-shadow: 0 0 0 5px color-mix(in srgb, var(--ruolo) 18%, transparent); }
.prezzo__cifra { margin-top: 22px; font: 700 clamp(1.35rem, .1rem + 2.2vw, 2.1rem)/1.05 var(--font-titoli); color: var(--scuro); letter-spacing: -.01em; }
/* la cifra sta su una riga sola: la misura segue la larghezza della scheda, non quella della finestra */
@supports (font-size: 1cqi) { .prezzo__cifra { font-size: clamp(1.35rem, 9.4cqi, 2.1rem); } }
.prezzo__periodo { margin-top: 6px; color: var(--tenue); font-size: .95rem; }
.prezzo h3 { margin-top: 20px; font-size: 1.45rem; }
.prezzo .spunte { margin: 14px 0 24px; }
.prezzo .pulsante { margin-top: auto; }
.nota { margin: 26px auto 0; color: var(--tenue); font-size: .95rem; max-width: 52em; text-align: center; }
@media (max-width: 900px) { .prezzi { grid-template-columns: minmax(0, 1fr); } }

/* come si comincia: lo schermo sul telefono a sinistra, i passi a destra (TaskGo) */
.passi { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; align-items: stretch; }
.passi__vista {
  position: relative; overflow: hidden; display: grid; place-items: end center; padding: 40px 24px 0; border-radius: 28px;
  background: var(--ruolo-velo);
}
.passi__vista .scena { width: min(360px, 100%); margin-bottom: -60px; }
.passi__lista { display: grid; gap: 14px; align-content: center; }
.passo { display: flex; gap: 18px; align-items: flex-start; padding: 22px 24px; border-radius: 20px; text-align: left; }
.passo__n { flex: none; display: grid; place-items: center; width: 46px; height: 46px; background: var(--ruolo); color: var(--su-ruolo, #fff); font: 700 1.05rem/1 var(--font-titoli); }
.passo h3 { font-size: 1.3rem; }
.passo p { margin-top: 6px; color: var(--tenue); }
@media (max-width: 900px) { .passi { grid-template-columns: minmax(0, 1fr); } .passi__vista { max-height: 560px; } }

/* facciamo anche */
.anche__griglia { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.anche { display: flex; flex-direction: column; gap: 10px; padding: 28px; border-radius: var(--r-scheda); text-decoration: none; transition: transform .4s var(--rimbalzo); background: linear-gradient(180deg, color-mix(in srgb, var(--ruolo-velo) 70%, #fff), rgba(255, 255, 255, .75) 60%); }
.anche__area { font: 600 .75rem/1 var(--font-testo); letter-spacing: .09em; text-transform: uppercase; color: var(--tenue); }
.anche b { font: 700 1.7rem/1 var(--font-titoli); text-transform: uppercase; color: var(--scuro); display: flex; align-items: baseline; gap: .35em; }
.anche b .q { width: 12px; height: 12px; margin: 0; }
.anche p { color: var(--tenue); }
.anche__vai { margin-top: auto; padding-top: 10px; font-weight: 600; color: var(--scuro); }
@media (hover: hover) { .anche:hover, .nicchia:not(.nicchia--presto):hover { transform: translateY(-4px); } }
@media (max-width: 900px) { .anche__griglia { grid-template-columns: minmax(0, 1fr); } }

/* le nicchie, nella home del marchio */
.nicchie { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 16px; }
.nicchia { display: flex; flex-direction: column; gap: 8px; padding: 24px; border-radius: var(--r-scheda); text-decoration: none; min-height: 168px; transition: transform .4s var(--rimbalzo); }
.nicchia b { font: 700 1.45rem/1.05 var(--font-titoli); color: var(--scuro); }
.nicchia .q { width: 12px; height: 12px; margin: 0 0 6px; }
.nicchia p { color: var(--tenue); font-size: .95rem; }
.nicchia__vai { margin-top: auto; font-weight: 600; color: var(--scuro); }
.nicchia--presto { opacity: .55; box-shadow: inset 0 0 0 1px var(--filo); background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; border-style: dashed; border-color: rgba(0, 5, 56, .18); }
.nicchia--presto .q { background: var(--tenue); }
.nicchia--misura b, .nicchia--misura .nicchia__vai { color: #fff; }
.nicchia--misura p { color: rgba(255, 255, 255, .72); }
.nicchia--misura .q { background: #F6F7FB; }

/* ------------------------------------------------------------ 7. il modulo (preventivo istantaneo) */
.richiesta { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(28px, 5vw, 80px); align-items: start; }
.richiesta__testo h2 { font-size: clamp(2rem, 1.4rem + 2.4vw, 3.4rem); }
.richiesta__testo > p:not(.etichetta) { margin-top: 16px; font-size: 1.08rem; color: var(--tenue); }
.richiesta__testo .spunte { margin-top: 22px; font-weight: 500; }
.richiesta__chiama { margin-top: 26px; color: var(--tenue); }
.richiesta__chiama a { color: var(--scuro); font-weight: 600; }
@media (max-width: 960px) { .richiesta { grid-template-columns: minmax(0, 1fr); } }

.modulo { position: relative; padding: 30px 28px 26px; border-radius: 24px; min-height: 520px; display: flex; flex-direction: column; overflow: hidden; }
.modulo__avanza { position: absolute; left: 0; right: 0; top: 0; height: 5px; background: rgba(0, 5, 56, .06); }
.modulo__avanza i { display: block; height: 100%; width: calc(var(--passo, 1) / var(--passi, 3) * 100%); background: var(--ruolo); transition: width .6s var(--rimbalzo); }
.modulo__passo { border: 0; margin: 0; padding: 0; min-width: 0; }
.modulo__passo legend { padding: 0; font-size: clamp(1.5rem, 1.25rem + 1vw, 2rem); margin-bottom: 20px; }
.modulo__passo legend small { display: block; margin-bottom: 10px; font: 600 .78rem/1 var(--font-testo); letter-spacing: .09em; text-transform: uppercase; color: var(--tenue); }
.modulo__passo:not([hidden]) { animation: passo-entra .55s var(--rimbalzo) both; }
@keyframes passo-entra { from { opacity: 0; transform: translateX(28px); } }
.scelte { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.scelte--una { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 560px) { .scelte { grid-template-columns: minmax(0, 1fr); } }
.scelta { position: relative; display: block; cursor: pointer; }
.scelta input { position: absolute; opacity: 0; pointer-events: none; }
.scelta > span {
  display: block; position: relative; padding: 14px 44px 14px 16px; border-radius: 14px;
  background: #fff; box-shadow: inset 0 0 0 1px rgba(0, 5, 56, .14);
  transition: box-shadow .2s, background .2s, transform .35s var(--rimbalzo);
}
.scelta > span::after { content: ""; position: absolute; right: 16px; top: 18px; width: 14px; height: 14px; box-shadow: inset 0 0 0 2px rgba(0, 5, 56, .25); transition: background .2s, box-shadow .2s, transform .4s var(--rimbalzo); }
.scelta b { display: block; font-weight: 600; color: var(--scuro); }
.scelta small { display: block; margin-top: 2px; color: var(--tenue); font-size: .875rem; line-height: 1.35; }
.scelta input:checked + span { box-shadow: inset 0 0 0 2px var(--ruolo); background: color-mix(in srgb, var(--ruolo) 6%, #fff); }
.scelta input:checked + span::after { background: var(--ruolo); box-shadow: none; transform: rotate(90deg); }
.scelta input:focus-visible + span { outline: 3px solid var(--ruolo); outline-offset: 2px; }
.scelta:active > span { transform: scale(.98); }
.stima { margin-top: 16px; padding: 16px 18px; border-radius: 16px; display: grid; gap: 2px; }
.stima:not([hidden]) { animation: stima-entra .6s var(--rimbalzo) both; }
@keyframes stima-entra { from { opacity: 0; transform: translateY(12px) scale(.94); } }
.stima small { font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; color: rgba(255, 255, 255, .7); }
.stima b { font: 700 2rem/1.1 var(--font-titoli); color: #fff; }
.stima span { color: rgba(255, 255, 255, .75); font-size: .95rem; }
.campi { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.campo { display: grid; gap: 6px; }
.campo span { font-size: .875rem; font-weight: 600; color: var(--scuro); }
.campo input, .campo textarea {
  width: 100%; min-height: 50px; padding: 12px 14px; border-radius: 12px; border: 0;
  box-shadow: inset 0 0 0 1px rgba(0, 5, 56, .18); background: #fff; color: var(--testo); font: 16px/1.4 var(--font-testo);
}
.campo textarea { resize: vertical; min-height: 96px; }
.campo input:focus, .campo textarea:focus { outline: none; box-shadow: inset 0 0 0 2px var(--ruolo); }
.campo--largo, .consenso { grid-column: 1 / -1; }
.campo.sbagliato input { box-shadow: inset 0 0 0 2px var(--scuro); background: #FFF8F0; }
.campo-nascosto { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.consenso { display: flex; gap: 12px; align-items: flex-start; font-size: .9rem; color: var(--tenue); cursor: pointer; }
.consenso input { flex: none; width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--ruolo); border-radius: 0; }
.consenso a { color: var(--scuro); }
@media (max-width: 560px) { .campi { grid-template-columns: minmax(0, 1fr); } .modulo { padding: 26px 18px 20px; } }
.modulo__errore { margin-top: 16px; padding: 12px 14px; border-radius: 12px; background: #FFF4F2; color: var(--scuro); font-weight: 600; font-size: .95rem; }
.modulo__errore::before { content: "!"; display: inline-grid; place-items: center; width: 20px; height: 20px; margin-right: 10px; background: var(--scuro); color: #fff; font-size: .8rem; }
.modulo__piede { margin-top: auto; padding-top: 24px; display: flex; gap: 12px; }
.modulo__piede [data-avanti] { margin-left: auto; }
.modulo__invio, .modulo__fatto { flex: 1; display: grid; place-content: center; justify-items: center; text-align: center; gap: 18px; padding: 40px 10px; }
.modulo__invio b { font: 700 1.5rem/1 var(--font-titoli); letter-spacing: .22em; color: var(--scuro); }
.modulo__fatto h3 { font-size: 2.2rem; }
.modulo__fatto p { color: var(--tenue); max-width: 26em; }
.modulo__fatto a { color: var(--scuro); font-weight: 600; }
.modulo.invio > :not(.modulo__invio):not(.modulo__avanza), .modulo.fatto > :not(.modulo__fatto):not(.modulo__avanza) { display: none !important; }

/* 16 ottobre, notte: in fondo alle pagine resta il modulo corto «Come ti richiamiamo?», con sopra i pulsanti verso la
   pagina Preventivo; il preventivo a quattro passi (servizi, prezzi, dati, chiamata) sta su <sito>/preventivo/ */
.richiesta__azioni { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.richiesta__oppure { margin-top: 26px; font-weight: 600; color: var(--scuro); }
.modulo--corto { min-height: 0; }
.modulo__nota { margin-top: 16px; font-size: .9rem; line-height: 1.5; color: var(--tenue); }
.modulo__nota--sopra { margin: -6px 0 18px; }
.scelta--pacchetto > span { padding-right: 16px; }
.scelta--pacchetto > span::after { display: none; }
.scelta__prezzo { display: block; margin-top: 8px; font: 700 1.35rem/1.1 var(--font-titoli); font-style: normal; color: var(--scuro); }
.scelta__prezzo i { display: block; margin-top: 2px; font: 500 .8rem/1.3 var(--font-testo); color: var(--tenue); }
.scelta--pacchetto ul { margin: 10px 0 0; padding: 0 0 0 18px; color: var(--tenue); font-size: .875rem; line-height: 1.45; }
/* «Ti serve anche altro?»: gli altri servizi si spuntano (più di uno), col prezzo di partenza */
.scelta--spunta > span::after { border-radius: 0; }
.scelta--spunta input:checked + span::after { transform: none; content: "✓"; display: grid; place-items: center; color: #fff; font: 700 11px/1 var(--font-testo); }
.scelta__di { display: inline; margin: 0; font-weight: 500; color: var(--tenue); }
.scelta__prezzo--piccolo { font-size: 1.05rem; }
.stima__altri { display: grid; gap: 2px; margin-top: 8px; padding-top: 8px; border-top: 1px solid rgba(255, 255, 255, .2); font-size: .9rem; color: rgba(255, 255, 255, .8); }
.stima__altri:empty { display: none; }
.stima__altri b { color: #fff; font: 700 1rem/1.3 var(--font-testo); }
@media (min-width: 720px) {
  .scelta--pacchetto > span { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto; column-gap: 20px; align-items: start; }
  .scelta--pacchetto b { grid-column: 1; } .scelta--pacchetto small { grid-column: 1; }
  .scelta--pacchetto .scelta__prezzo { grid-column: 2; grid-row: 1 / 3; margin: 0; text-align: right; }
  .scelta--pacchetto ul { grid-column: 1 / -1; }
}
/* la pagina Preventivo (17 ottobre): è il modulo di digitato.eu, copiato in modello/preventivo/ con il suo stile; qui solo
   il fondo neutro della pagina sotto la testata fissa */
body.pagina-preventivo { background: #F3F4F9 !important; background-image: none !important; }
/* i colori del modulo (Alfredo, 17 ottobre: «non usare quel giallo fluo»): il risalto prende il colore della pagina, cioè l'accento
   del vestito sulle nicchie (--ruolo: oro, blu, …) e il colore dell'area sulle principali; l'accento scuro è --marchio; i due
   gruppi dei servizi restano viola (Software) e arancio (Comunicazione), i colori di Digitato */
body.pagina-preventivo { --p2-accento: var(--marchio, #473AE0); --p2-su-accento: #fff; --p2-accento-2: var(--ruolo, #473AE0); --p2-su-accento-2: #fff;
  --p2-sw: #473AE0; --p2-su-sw: #fff; --p2-com: #FF3B30; --p2-su-com: #fff; }
body.pagina-preventivo .pv-apre__risalto { color: var(--p2-accento-2); }  /* «il tuo progetto» nel colore della pagina, non in quello di Comunicazione */
.pagina-preventivo main { padding-top: 96px; padding-bottom: 40px; }
.pagina-preventivo .pv-scena { padding-top: 0; }
/* carattere neutro anche sulle nicchie: il vestito (Cormorant, Playfair…) non entra nel modulo del preventivo */
.pagina-preventivo .pv-scena, .pagina-preventivo .pv-scena :is(h1, h2, h3, legend, b, strong, .pv-titolo, .pv-apre__titolo) { font-family: var(--p2-font-titoli, "Barlow", "Inter", system-ui, -apple-system, sans-serif); font-style: normal; }
.pagina-preventivo .pv-scena :is(p, span, small, label, input, select, textarea, button, li, a) { font-family: var(--pv-font, "Inter", system-ui, -apple-system, sans-serif); }
/* il quarto passo: i giorni e gli orari liberi («orari», non «agenda»: .agenda è dello schermo del gestionale) */
.orari__attesa, .orari__vuota { padding: 18px; border-radius: 14px; background: #fff; box-shadow: inset 0 0 0 1px rgba(0, 5, 56, .12); color: var(--tenue); }
.orari__giorni { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 6px; scrollbar-width: thin; }
.orari__giorno { flex: none; padding: 10px 14px; border: 0; border-radius: 12px; background: #fff; box-shadow: inset 0 0 0 1px rgba(0, 5, 56, .14); font: 600 .9rem/1.2 var(--font-testo); color: var(--scuro); cursor: pointer; text-transform: capitalize; }
.orari__giorno.attivo { background: var(--scuro); color: #fff; box-shadow: none; }
.orari__orari { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 8px; margin-top: 12px; }
.orari__ora { padding: 12px 8px; border: 0; border-radius: 12px; background: #fff; box-shadow: inset 0 0 0 1px rgba(0, 5, 56, .14); font: 600 1rem/1 var(--font-testo); color: var(--scuro); cursor: pointer; transition: transform .3s var(--rimbalzo), box-shadow .2s; }
.orari__ora.scelta { box-shadow: inset 0 0 0 2px var(--ruolo); background: color-mix(in srgb, var(--ruolo) 10%, #fff); }
.orari__ora:active { transform: scale(.95); }
.orari__salta { margin-top: 18px; }
.orari__salta-bottone { padding: 0; border: 0; background: none; font: 500 .9rem/1.4 var(--font-testo); color: var(--tenue); text-decoration: underline; cursor: pointer; }
.orari__giorno:focus-visible, .orari__ora:focus-visible { outline: 2px solid var(--ruolo); outline-offset: 2px; }

/* dopo «Richiesta arrivata» la chiamata si può già fissare (17 ottobre, facoltativo). Alfredo: «deve essere molto più
   evidente… Fissa ora la tua chiamata… è l'informazione estremamente importante… non rosso, arancione vivo». Il riquadro
   sta subito sotto il titolo, col bordo e il titolo arancione vivo e il pulsante grande; poi quattro orari a caso, due per
   riga, grandi da toccare. L'arancione è uguale in tutte le aree e le nicchie: è il colore di questo invito. */
.modulo__fatto .prenota { --vivo: #F05A00; --vivo-forte: #D24E00; --vivo-velo: #FFF1E6;
  justify-self: stretch; display: grid; gap: 10px; width: 100%; max-width: 560px; margin: 4px auto 6px; padding: 24px 24px 22px;
  border-radius: var(--r-scheda); background: var(--vivo-velo); box-shadow: inset 0 0 0 2px var(--vivo), 0 24px 46px -30px rgba(240, 90, 0, .7);
  text-align: left; animation: prenota-entra .5s var(--rimbalzo) both; }
@keyframes prenota-entra { from { opacity: 0; transform: translateY(10px) scale(.97); } }
.modulo__fatto .prenota__titolo { margin: 0; font: 800 clamp(1.45rem, 1.1rem + 1.2vw, 1.9rem)/1.12 var(--font-titoli); letter-spacing: -.01em;
  color: var(--vivo-forte); text-wrap: balance; }
.modulo__fatto .prenota__riga, .modulo__fatto .prenota__nota { max-width: none; margin: 0; color: var(--testo); font-size: 1rem; line-height: 1.5; }
.modulo__fatto .prenota__nota--ok { color: var(--scuro); font-size: 1.08rem; }
.modulo__fatto .prenota__nota--ok b { color: var(--vivo-forte); }
.prenota--fatta { animation: none; }
.prenota__apri { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 64px; margin-top: 6px; padding: 0 30px;
  border: 0; border-radius: var(--r-pulsante); background: var(--vivo); color: #fff; font: 700 1.2rem/1 var(--font-testo); cursor: pointer;
  box-shadow: 0 16px 30px -16px rgba(240, 90, 0, .9); transition: transform .3s var(--rimbalzo), background .2s; }
.prenota__apri svg { width: 24px; height: 24px; flex: none; }
.prenota__apri:hover:not([disabled]) { background: var(--vivo-forte); transform: translateY(-2px); }
.prenota__apri:focus-visible, .prenota__scelta:focus-visible, .prenota__no:focus-visible { outline: 3px solid var(--vivo-forte); outline-offset: 3px; }
.prenota__apri[disabled] { opacity: .5; cursor: not-allowed; box-shadow: none; }
.prenota__scelte { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 4px; }
.prenota__scelta { display: grid; gap: 4px; justify-items: start; padding: 16px 18px; border: 0; border-radius: var(--r-pulsante); background: #fff;
  box-shadow: inset 0 0 0 1.5px rgba(240, 90, 0, .35); color: var(--scuro); cursor: pointer; text-align: left;
  transition: transform .3s var(--rimbalzo), box-shadow .2s, background .2s; }
.prenota__scelta span { font: 600 .92rem/1.2 var(--font-testo); color: var(--tenue); text-transform: capitalize; }
.prenota__scelta b { font: 800 1.6rem/1 var(--font-testo); font-variant-numeric: tabular-nums; }
.prenota__scelta--su { background: var(--vivo); box-shadow: none; color: #fff; }
.prenota__scelta--su span { color: rgba(255, 255, 255, .88); }
.prenota__scelta:active { transform: scale(.97); }
.prenota__avviso { margin: 0; padding: 10px 12px; border-radius: var(--r-pulsante-basso); background: #fff; color: var(--vivo-forte); font-size: .95rem; font-weight: 600; }
.prenota__azioni { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin-top: 6px; }
.prenota__no { padding: 0; border: 0; background: none; font: 500 .95rem/1.4 var(--font-testo); color: var(--tenue); text-decoration: underline; cursor: pointer; }
@media (max-width: 560px) {
  .modulo__fatto .prenota { padding: 20px 16px 18px; }
  .prenota__apri { width: 100%; padding: 0 18px; font-size: 1.12rem; }
  .prenota__scelta { padding: 14px; }
  .prenota__scelta b { font-size: 1.4rem; }
}
@media (prefers-reduced-motion: reduce) { .modulo__fatto .prenota { animation: none; } .prenota__apri, .prenota__scelta { transition: none; } }

/* caricamento: il quadratino si riempie, prima viola poi arancione, e gira (mai sfumato) */
.carica { position: relative; display: block; width: 48px; height: 48px; box-shadow: inset 0 0 0 3px var(--scuro); overflow: hidden; animation: carica-gira 2.2s var(--scatto) infinite; }
.carica i { position: absolute; inset: 0; transform-origin: 50% 100%; animation: carica-riempi 2.2s linear infinite; }
@keyframes carica-riempi {
  0% { transform: scaleY(0); background: var(--sw); }
  40%, 50% { transform: scaleY(1); background: var(--sw); }
  50.01% { transform: scaleY(0); background: var(--com); }
  90%, 100% { transform: scaleY(1); background: var(--com); }
}
@keyframes carica-gira { 0%, 42% { transform: rotate(0); } 50%, 92% { transform: rotate(180deg); } 100% { transform: rotate(180deg); } }
.carica--piena { animation: fatto-pop .7s var(--rimbalzo) both; }
.carica--piena i { animation: none; background: var(--ruolo); transform: none; }
@keyframes fatto-pop { from { transform: scale(.3) rotate(-90deg); opacity: 0; } }

/* ------------------------------------------------------------ 8. il piede (riquadro scuro arrotondato)
   16 ottobre, sera, dalla referenza «Studio» di Alfredo: tutto al centro. Il logo, i loghi dei quattro marchi uno di
   fianco all'altro col servizio sotto (da telefono su due colonne), una riga, le voci della pagina, i tasti di Instagram
   e Facebook, privacy e partita IVA. Telefono, email e indirizzo non ci sono più (li ha tolti Alfredo). */
.piede {
  margin: 10px; border-radius: 32px; background: var(--scuro); color: rgba(255, 255, 255, .72); text-align: center;
  padding: 64px max(var(--margine), calc((100% - var(--larga)) / 2 + var(--margine))) 30px;
}
.piede a { color: #fff; text-decoration: none; transition: color .15s, opacity .15s, background-color .15s; }
.piede__marca .marca { color: #fff; justify-content: center; }
.piede__marca .marca .pittogramma { width: 44px; }
.piede .piede__marca .marca__nome { font-size: 1.6rem; font-family: "Onest", Inter, sans-serif; font-weight: 650; text-transform: none; letter-spacing: -.02em; }
.piede .marca .pittogramma { color: var(--ruolo-luce); }
.piede__marca p { margin: 14px auto 0; max-width: 46em; font-size: .95rem; color: rgba(255, 255, 255, .6); }
.piede__marca p b { color: #fff; }
.piede__marchi { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px 64px; margin: 36px 0 0; padding: 0; list-style: none; }
.piede__marchi a { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 8px 4px; }
.piede__logo { display: inline-flex; align-items: center; gap: 9px; color: #fff; --quadratino: var(--c); }
.piede .piede__logo .pittogramma { width: 30px; height: auto; flex: none; color: var(--c); }
.piede__logo b { font: 650 1.15rem/1 "Onest", Inter, sans-serif; letter-spacing: -.02em; white-space: nowrap; }
.piede__marchi small { font-size: .85rem; color: rgba(255, 255, 255, .55); transition: color .15s; }
.piede__marchi a:hover small, .piede__marchi a[aria-current] small { color: rgba(255, 255, 255, .85); }
.q.ruolo-sw { background: #A99BFF; }
.q.ruolo-com { background: #FF8A80; }
.piede__riga { height: 1px; margin: 34px 0 30px; border: 0; background: rgba(255, 255, 255, .14); }
.piede__barra { display: flex; align-items: center; justify-content: space-between; gap: 16px 24px; }
.piede__nav { display: flex; flex-wrap: wrap; gap: 8px; }
.piede__nav a { display: inline-flex; align-items: center; height: 46px; padding: 0 18px; border-radius: 13px;
  background: rgba(255, 255, 255, .07); font-size: .95rem; color: rgba(255, 255, 255, .9); }
.piede__nav a:hover { background: rgba(255, 255, 255, .15); color: #fff; }
.piede__ic { width: 17px; height: 17px; flex: none; fill: currentColor; }
.piede__social { display: flex; flex: none; gap: 8px; }
.piede__tasto { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 13px; background: rgba(255, 255, 255, .09); color: #fff; }
.piede__tasto .piede__ic { width: 23px; height: 23px; }
a.piede__tasto:hover { background: rgba(255, 255, 255, .17); }
.piede__legale { margin-top: 34px; font-size: .85rem; color: rgba(255, 255, 255, .5); }
.piede__legale p { margin: 0; }
.piede__legale p + p { margin-top: 6px; }
.piede__legale a { display: inline-block; padding: 8px 4px; color: rgba(255, 255, 255, .78); }
.piede__legale a:hover { color: #fff; }
.piede__legale i { font-style: normal; margin: 0 14px; color: rgba(255, 255, 255, .3); }
@media (max-width: 800px) {
  .piede { margin: 6px; border-radius: 24px; padding-top: 48px; padding-bottom: 96px; }  /* «torna su» e la chat non coprono l'ultima riga */
  .piede .piede__marca .marca__nome { font-size: 1.35rem; }
  .piede__marchi { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 12px; max-width: 420px; margin: 28px auto 0; }
  .piede .piede__logo .pittogramma { width: 26px; }
  .piede__logo b { font-size: 1.02rem; }
  .piede__riga { margin: 26px 0 20px; }
  .piede__barra { flex-direction: column; }
  .piede__nav { justify-content: center; gap: 8px; }
  .piede__nav a { height: 42px; padding: 0 15px; }
}

/* ------------------------------------------------------------ 9. ingressi allo scorrimento (solo con JavaScript) */
.js .prezzo, .js .funzione, .js .passo, .js .anche, .js .nicchia, .js .passi__vista {
  opacity: 0; transform: translateY(26px) scale(.96);
  transition: opacity .5s ease, transform .75s var(--rimbalzo);
  transition-delay: calc(var(--i, 0) * 80ms);
}
.js .vista .prezzo, .js .vista .funzione, .js .vista .passo, .js .vista .anche, .js .vista .nicchia, .js .vista .passi__vista { opacity: 1; transform: none; }
.js .anche:nth-child(2), .js .nicchia:nth-child(2) { --i: 1; }
.js .anche:nth-child(3), .js .nicchia:nth-child(3) { --i: 2; }
.js .nicchia:nth-child(4) { --i: 3; } .js .nicchia:nth-child(5) { --i: 4; } .js .nicchia:nth-child(n+6) { --i: 5; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; transition-delay: 0s !important; }
  .js .prezzo, .js .funzione, .js .passo, .js .anche, .js .nicchia, .js .passi__vista { opacity: 1; transform: none; }
}

/* ------------------------------------------------------------ 10. il banco (pagina interna con tutti i siti) */
.banco { background: var(--chiaro); }
.banco__tabella { overflow-x: auto; border-radius: var(--r-scheda); background: #fff; box-shadow: 0 0 0 1px var(--filo); }
.banco table { border-collapse: collapse; width: 100%; min-width: 760px; }
.banco th, .banco td { padding: 16px 18px; text-align: left; border-bottom: 1px solid var(--filo); vertical-align: top; }
.banco thead th { font: 700 1.05rem/1.2 var(--font-titoli); color: var(--scuro); }
.banco thead small { display: block; margin-top: 4px; font: 500 .75rem/1 var(--font-testo); color: var(--tenue); text-transform: uppercase; letter-spacing: .08em; }
.banco thead .q { width: 10px; height: 10px; margin: 0 8px 0 0; }
.banco thead .q.ruolo-sw { background: var(--sw); } .banco thead .q.ruolo-com { background: var(--com); }
.banco tbody th { font-weight: 600; color: var(--scuro); white-space: nowrap; }
.banco td a { color: var(--scuro); font-weight: 500; }
.banco .pulsante { margin-top: 28px; }

/* ------------------------------------------------------------ 11. la pagina principale del marchio (digitaplan.it…)
   Il titolare, 15 ottobre: «ognuno ha una pagina main: un semplice hero + sotto "scegli la nicchia" con dei box glassati
   che aprono il dominio di terzo livello; preventivo istantaneo con info generiche; stile ispirato al sito Digitato, ma
   molto più semplice». Quindi: titolo grande centrato con la parola colorata, fascia a quadretti come quella dei servizi
   di Digitato, riquadri di vetro, la cornice di selezione con le maniglie che salta da un riquadro all'altro. */
.main { background: #fff; }
.main-apertura { max-width: 1000px; margin: 0 auto; padding: 156px var(--margine) 60px; text-align: center; }
.main-apertura .etichetta--pillola { background: var(--chiaro); box-shadow: inset 0 0 0 1px var(--filo); }
.main-titolo { font-size: clamp(2.6rem, 1.3rem + 4.8vw, 5.8rem); line-height: .96; letter-spacing: -.025em; }
.main-titolo em { color: var(--ruolo); }
.main-sotto { max-width: 36em; margin: 26px auto 0; font-size: clamp(1.02rem, .98rem + .3vw, 1.18rem); color: var(--tenue); }
.main-azioni { margin-top: 34px; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.main-apertura > * { animation: sale .9s var(--rimbalzo) both; }
.main-apertura > :nth-child(2) { animation-delay: .08s; } .main-apertura > :nth-child(3) { animation-delay: .16s; }
.main-apertura > :nth-child(4) { animation-delay: .24s; }
@keyframes sale { from { opacity: 0; transform: translateY(28px); } }
.freccia--giu { animation: giu 1.8s ease-in-out infinite; }
@keyframes giu { 50% { transform: translateY(4px); } }

.main-nicchie { padding-top: 24px; }
.main-nicchie .sezione__testa { padding: 0 var(--margine); margin-bottom: 30px; }
.griglia-banco {
  padding: 64px var(--margine); background-color: var(--chiaro); border-block: 1px solid var(--filo);
  background-image: linear-gradient(rgba(0, 5, 56, .055) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 5, 56, .055) 1px, transparent 1px);
  background-size: 36px 36px; background-position: center;
}
.scegli-griglia { position: relative; max-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.scegli {
  display: flex; flex-direction: column; gap: 10px; min-height: 236px; padding: 26px 24px 20px; border-radius: var(--r-scheda);
  text-decoration: none; color: var(--testo); transition: transform .45s var(--rimbalzo), box-shadow .3s;
  background: color-mix(in srgb, #fff 74%, transparent); -webkit-backdrop-filter: blur(12px) saturate(160%); backdrop-filter: blur(12px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, .85); box-shadow: inset 0 1px 0 #fff, 0 0 0 1px var(--filo), 0 22px 44px -30px rgba(0, 5, 56, .4);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .scegli { background: rgba(255, 255, 255, .96); } }
.scegli .icona { width: 30px; height: 30px; color: var(--ruolo); }
.scegli b { margin-top: 8px; font: 700 1.55rem/1.05 var(--font-titoli); color: var(--scuro); }
.scegli p { color: var(--tenue); font-size: .93rem; line-height: 1.45; }
.scegli__piede { margin-top: auto; padding-top: 14px; display: flex; align-items: center; justify-content: space-between; gap: 8px; border-top: 1px solid var(--filo); }
.scegli code { min-width: 0; padding: 0; background: none; font-size: .74rem; color: var(--tenue); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.scegli .freccia { color: var(--ruolo); font-weight: 700; }
@media (hover: hover) { .scegli:hover { transform: translateY(-6px); } .scegli:hover .freccia { transform: translateX(4px); } }
.scegli:active { transform: scale(.98); }

/* la cornice di selezione con le maniglie (come quella dei servizi nell'apertura di Digitato) */
.cornice {
  position: absolute; z-index: 3; left: 0; top: 0; width: 0; height: 0; border: 2px solid var(--ruolo); pointer-events: none; opacity: 0;
  transition: left .65s var(--rimbalzo), top .65s var(--rimbalzo), width .65s var(--rimbalzo), height .65s var(--rimbalzo), opacity .3s;
}
.cornice.su { opacity: 1; }
.cornice > i { position: absolute; width: 10px; height: 10px; background: #fff; border: 2px solid var(--ruolo); }
.cornice > i:nth-of-type(1) { left: -6px; top: -6px; } .cornice > i:nth-of-type(2) { right: -6px; top: -6px; }
.cornice > i:nth-of-type(3) { left: -6px; bottom: -6px; } .cornice > i:nth-of-type(4) { right: -6px; bottom: -6px; }
.cornice__etichetta {
  position: absolute; left: -2px; bottom: 100%; margin-bottom: 6px; padding: 5px 9px; background: var(--ruolo); color: #fff;
  font: 700 .74rem/1 var(--font-testo); letter-spacing: .06em; white-space: nowrap;
}
.cornice__cursore { position: absolute; right: -18px; bottom: -24px; width: 18px; height: 22px; }

.in-arrivo { max-width: 1180px; margin: 28px auto 0; padding: 0 var(--margine); display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 14px; }
.in-arrivo small { font: 600 .75rem/1 var(--font-testo); letter-spacing: .09em; text-transform: uppercase; color: var(--tenue); }
.in-arrivo ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.in-arrivo li { display: inline-flex; align-items: center; gap: 8px; padding: 8px 13px; border-radius: 999px; border: 1px dashed rgba(0, 5, 56, .22); color: var(--tenue); font-size: .88rem; font-weight: 500; }
.in-arrivo li .icona { width: 16px; height: 16px; }
.in-arrivo__altro { display: inline-flex; gap: 6px; padding: 10px 2px; font-weight: 600; color: var(--scuro); text-decoration: none; border-bottom: 2px solid var(--ruolo); }

.js .scegli { opacity: 0; transform: translateY(26px) scale(.96); transition: opacity .5s ease, transform .75s var(--rimbalzo), box-shadow .3s; transition-delay: calc(var(--i, 0) * 90ms); }
.js .vista .scegli { opacity: 1; transform: none; }
@media (hover: hover) { .js .vista .scegli:hover { transform: translateY(-6px); transition-delay: 0s; } }
@media (max-width: 1000px) { .scegli-griglia { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) {
  .main-apertura { padding: 112px 16px 44px; }
  .main-azioni .pulsante { flex: 1 1 100%; }
  .griglia-banco { padding: 40px 16px; }
  .scegli-griglia { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .scegli { min-height: 0; }
}
@media (prefers-reduced-motion: reduce) { .js .scegli { opacity: 1; transform: none; } .cornice { transition: opacity .3s; } }

/* ------------------------------------------------------------ 16 ottobre: regole comuni a tutte le pagine
   Il logo per area e per nicchia, la tendina «Altri servizi» sulle principali, «torna su» a sinistra e la chat a
   destra (compaiono dopo l'apertura). Lo scorrimento morbido è in pagina.js. */
.pittogramma__q { fill: var(--quadratino, currentColor); }
.main .testata .marca .pittogramma { color: var(--logo-area, var(--marchio)); }
body:not(.main) .testata .marca .pittogramma { color: #000538; }
.comp-cielo:not(.main) .testata .marca .pittogramma, .comp-fuoco:not(.main) .testata .marca .pittogramma { color: #fff; }
.main.comp-fuoco .testata .marca .pittogramma { background: #fff; border-radius: 9px; padding: 5px 4px; width: 40px; box-sizing: border-box; }
.piede .marca .pittogramma { color: var(--logo-area, var(--ruolo-luce)); }
body:not(.main) .piede .marca .pittogramma { color: #fff; }

/* la tendina «Altri servizi» */
.altri { position: relative; flex: none; margin-left: 6px; }
.altri__bottone { display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 13px; border: 0; border-radius: 10px;
  background: transparent; color: inherit; font: 500 .95rem/1 "Inter", system-ui, sans-serif; cursor: pointer; white-space: nowrap; }   /* stesso carattere in tutte le aree (17 ottobre) */
.testata .altri__bottone { color: var(--scuro); }
.comp-cielo .altri__bottone, .comp-fuoco .altri__bottone { color: #fff; }
@media (hover: hover) { .altri__bottone:hover { background: rgba(0, 5, 56, .06); } .comp-cielo .altri__bottone:hover, .comp-fuoco .altri__bottone:hover { background: rgba(255, 255, 255, .16); } }
.altri__bottone:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.altri__freccia { display: inline-block; font-size: .8em; transition: transform .2s; }
.altri__bottone[aria-expanded="true"] .altri__freccia { transform: rotate(180deg); }
.altri__lista { position: absolute; top: calc(100% + 10px); right: 0; z-index: 60; width: min(320px, calc(100vw - 32px)); margin: 0; padding: 8px;
  list-style: none; background: #fff; border: 1px solid rgba(0, 5, 56, .08); border-radius: 16px; box-shadow: 0 24px 60px -20px rgba(0, 5, 56, .35);
  font-family: Inter, system-ui, sans-serif; letter-spacing: 0; text-transform: none; }
.altri__lista[hidden] { display: none !important; }
.altri__lista a { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 11px; color: #000538; text-decoration: none; }
@media (hover: hover) { .altri__lista a:hover { background: #F6F7FB; } }
.altri__lista a:focus-visible { outline: 2px solid #473AE0; outline-offset: -2px; }
.altri__logo { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; background: #F6F7FB; flex: none; }
.altri__logo .pittogramma { width: 24px; height: auto; }
.altri__lista b { display: block; font: 700 1rem/1.2 Inter, system-ui, sans-serif; color: #000538; }
.altri__lista small { display: block; margin-top: 2px; font: 400 .85rem/1.3 Inter, system-ui, sans-serif; color: #5B5F73; }
/* la famiglia dell'area, Sviluppo (viola) o Comunicazione (arancio): un richiamo anche quando le scene hanno i colori della nicchia */
.altri__famiglia { display: inline-block; margin-left: 6px; padding: 2px 7px; border-radius: 999px; background: color-mix(in srgb, var(--f) 13%, #fff); color: var(--f); font: 700 .66rem/1.3 Inter, system-ui, sans-serif; font-style: normal; letter-spacing: .07em; text-transform: uppercase; vertical-align: 1px; }
.altri__icona { display: none; grid-template-columns: repeat(2, 7px); gap: 3px; }
.altri__icona i { width: 7px; height: 7px; border-radius: 1.5px; background: currentColor; }
@media (max-width: 1060px) { .altri { margin-left: auto; } }
@media (max-width: 640px) {
  .altri { margin-left: 8px; }
  .altri__bottone { width: 40px; height: 40px; padding: 0; justify-content: center; }
  .altri__testo-lungo, .altri__freccia { display: none; }
  .altri__icona { display: grid; }
  .altri__lista { position: fixed; top: 76px; left: 16px; right: 16px; width: auto; }
}

/* «torna su» a sinistra, la chat a destra: compaiono quando l'apertura è passata */
.torna-su, .chat__apri { position: fixed; bottom: max(18px, env(safe-area-inset-bottom)); z-index: 70; display: inline-flex; align-items: center;
  justify-content: center; gap: 8px; height: 52px; border: 0; cursor: pointer; font: 600 .95rem/1 Inter, system-ui, sans-serif;
  box-shadow: 0 16px 40px -14px rgba(0, 5, 56, .45); opacity: 0; transform: translateY(14px); pointer-events: none;
  transition: opacity .3s, transform .3s; }
.dopo-apertura .torna-su, .dopo-apertura .chat__apri { opacity: 1; transform: none; pointer-events: auto; }
.torna-su { left: 18px; width: 52px; border-radius: 16px; background: #fff; color: #000538; }
.torna-su svg { width: 22px; height: 22px; }
.chat__apri { right: 18px; padding: 0 20px 0 16px; border-radius: 16px; background: #000538; color: #fff; box-shadow: 0 0 0 1px rgba(255, 255, 255, .22), 0 12px 28px -14px rgba(0, 5, 56, .7); }
.chat__apri svg { width: 22px; height: 22px; }
.torna-su:focus-visible, .chat__apri:focus-visible { outline: 3px solid #473AE0; outline-offset: 3px; }
.chat-aperta .chat__apri { opacity: 0; pointer-events: none; }
.chat__pannello { position: fixed; right: 18px; bottom: max(18px, env(safe-area-inset-bottom)); z-index: 80; display: flex; flex-direction: column;
  width: min(380px, calc(100vw - 36px)); height: min(560px, calc(100vh - 120px)); background: #fff; color: #000538; border-radius: 20px;
  box-shadow: 0 30px 80px -24px rgba(0, 5, 56, .5); overflow: hidden; font-family: Inter, system-ui, sans-serif; letter-spacing: 0; text-transform: none; }
.chat__pannello[hidden] { display: none !important; }
.chat__testa { display: flex; align-items: center; gap: 12px; padding: 16px 16px 14px; background: #000538; color: #fff; }
.chat__testa .pittogramma { width: 30px; height: auto; color: #fff; }
.chat__testa b { display: block; font-size: 1rem; }
.chat__testa small { display: block; margin-top: 2px; font-size: .8rem; color: rgba(255, 255, 255, .7); }
.chat__chiudi { margin-left: auto; width: 36px; height: 36px; border: 0; border-radius: 10px; background: rgba(255, 255, 255, .12); color: #fff; font-size: 1.3rem; cursor: pointer; }
.chat__messaggi { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 16px; display: flex; flex-direction: column; gap: 10px; background: #F6F7FB; }
.chat__msg { max-width: 86%; padding: 10px 13px; border-radius: 14px; font-size: .95rem; line-height: 1.45; white-space: pre-line; }
.chat__msg--noi { align-self: flex-start; background: #fff; border-bottom-left-radius: 4px; }
.chat__msg--tu { align-self: flex-end; background: #473AE0; color: #fff; border-bottom-right-radius: 4px; }
.chat__msg a { color: inherit; font-weight: 600; }
.chat__rapide { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 16px 0; background: #F6F7FB; }
.chat__rapide button { padding: 8px 12px; border: 1px solid rgba(0, 5, 56, .12); border-radius: 999px; background: #fff; color: #000538; font: 500 .85rem/1 inherit; cursor: pointer; }
@media (hover: hover) { .chat__rapide button:hover { border-color: #473AE0; } }
.chat__scrivi { display: flex; gap: 8px; padding: 12px 16px 16px; background: #F6F7FB; }
.chat__scrivi input { flex: 1; min-width: 0; height: 44px; padding: 0 14px; border: 1px solid rgba(0, 5, 56, .14); border-radius: 12px; font: 400 1rem/1 inherit; color: #000538; background: #fff; }
.chat__scrivi input:focus-visible { outline: 2px solid #473AE0; outline-offset: 1px; }
.chat__scrivi button { height: 44px; padding: 0 16px; border: 0; border-radius: 12px; background: #473AE0; color: #fff; font: 600 .95rem/1 inherit; cursor: pointer; }
@media (max-width: 640px) {
  .torna-su { left: 14px; width: 48px; height: 48px; }
  .chat__apri { right: 14px; height: 48px; padding: 0 14px; }
  .chat__apri span { display: none; }
  .chat__pannello { right: 10px; left: 10px; width: auto; bottom: 10px; height: min(560px, calc(100vh - 90px)); }
}
@media (prefers-reduced-motion: reduce) { .torna-su, .chat__apri, .altri__freccia { transition: none; } }

/* 16 ottobre: la tendina «Altri servizi» con le scene
   A sinistra di ogni area una piccola scena inclinata che si muove: il gestionale (Plan), il sito che scorre (Sito),
   le carte dell'identità (Visual), il telefono con i post (Social). --c è il colore dell'area, --cl la sua tinta chiara. */
.altri__lista { width: min(400px, calc(100vw - 32px)); padding: 10px; }
.altri__lista a { gap: 16px; padding: 10px 12px 10px 10px; border-radius: 14px; transition: background .2s; }
.altri__vai { margin-left: auto; color: var(--c); font-weight: 700; opacity: 0; transform: translateX(-6px); transition: opacity .2s, transform .2s; }
@media (hover: hover) { .altri__lista a:hover .altri__vai { opacity: 1; transform: none; } }
.altri__lista a:focus-visible .altri__vai { opacity: 1; transform: none; }
.alscena { position: relative; display: grid; place-items: center; width: 104px; height: 76px; flex: none; border-radius: 14px; overflow: hidden;
  background: radial-gradient(120% 120% at 20% 0%, color-mix(in srgb, var(--cl) 38%, #fff), color-mix(in srgb, var(--c) 16%, #fff)); perspective: 420px; }
.alscena i { display: block; font-style: normal; }
.alscena > span { transition: transform .45s cubic-bezier(.2, .8, .2, 1); }
@media (hover: hover) { .altri__lista a:hover .alscena > span { transform: var(--su, none); } }

/* Plan: un gestionale di vetro, inclinato, con le righe che si riempiono e le barre che salgono */
.alscena__piano { display: flex; width: 80px; height: 56px; border-radius: 8px; overflow: hidden; background: #fff;
  box-shadow: 0 14px 24px -12px rgba(0, 5, 56, .55); transform: rotateX(16deg) rotateY(-22deg) rotateZ(3deg); --su: rotateX(6deg) rotateY(-8deg) scale(1.06); }
.almp-lato { display: flex !important; flex-direction: column; gap: 4px; width: 15px; padding: 6px 3px; background: var(--c); }
.almp-lato i { height: 3px; border-radius: 2px; background: rgba(255, 255, 255, .55); }
.almp-lato i:first-child { background: #fff; }
.almp-corpo { display: flex; flex-direction: column; gap: 4px; flex: 1; padding: 6px; }
.almp-testa { width: 55%; height: 4px; border-radius: 2px; background: #E4E6F0; }
.almp-righe { display: flex; flex-direction: column; gap: 3px; }
.almp-righe i { height: 5px; border-radius: 3px; background: color-mix(in srgb, var(--c) 30%, #fff); transform-origin: left; animation: almp-riga 3.2s ease-in-out infinite; }
.almp-righe i:nth-child(2) { width: 80%; animation-delay: .4s; }
.almp-righe i:nth-child(3) { width: 62%; animation-delay: .8s; background: color-mix(in srgb, var(--c) 55%, #fff); }
.almp-barre { display: flex; align-items: flex-end; gap: 3px; height: 16px; margin-top: auto; }
.almp-barre i { flex: 1; border-radius: 2px 2px 0 0; background: var(--c); transform-origin: bottom; animation: almp-barra 2.6s ease-in-out infinite; }
.almp-barre i:nth-child(1) { height: 40%; }
.almp-barre i:nth-child(2) { height: 70%; animation-delay: .2s; }
.almp-barre i:nth-child(3) { height: 52%; animation-delay: .4s; }
.almp-barre i:nth-child(4) { height: 90%; animation-delay: .6s; }
.almp-barre i:nth-child(5) { height: 64%; animation-delay: .8s; background: var(--cl); }
@keyframes almp-riga { 0%, 100% { transform: scaleX(.35); } 45%, 70% { transform: scaleX(1); } }
@keyframes almp-barra { 0%, 100% { transform: scaleY(.45); } 50% { transform: scaleY(1); } }

/* Sito: una finestra del browser inclinata dall'altra parte, con la pagina che scorre */
.alscena__browser { width: 78px; height: 58px; border-radius: 7px; overflow: hidden; background: #fff; box-shadow: 0 14px 24px -12px rgba(0, 5, 56, .55);
  transform: rotateX(14deg) rotateY(22deg) rotateZ(-3deg); --su: rotateX(4deg) rotateY(8deg) scale(1.06); }
.alms-barra { display: flex; gap: 2px; padding: 3px 4px; background: #EEF0F6; }
.alms-barra i { width: 3px; height: 3px; border-radius: 50%; background: #C5C9D8; }
.alms-barra i:first-child { background: var(--c); }
.alms-finestra { display: block; height: 51px; overflow: hidden; }
.alms-pagina { display: flex; flex-direction: column; gap: 3px; padding: 4px 5px; animation: alms-scorri 6s ease-in-out infinite; }
.alms-foto { height: 18px; border-radius: 3px; background: linear-gradient(135deg, var(--cl), var(--c)); }
.alms-titolo { width: 70%; height: 4px; border-radius: 2px; background: #2A2E45; }
.alms-riga { width: 90%; height: 3px; border-radius: 2px; background: #D9DCE8; }
.alms-bott { width: 34%; height: 6px; border-radius: 3px; background: var(--c); }
.alms-tre { display: grid !important; grid-template-columns: repeat(3, 1fr); gap: 2px; }
.alms-tre i { height: 10px; border-radius: 2px; background: color-mix(in srgb, var(--c) 22%, #fff); }
@keyframes alms-scorri { 0%, 18% { transform: translateY(0); } 50%, 68% { transform: translateY(-34px); } 100% { transform: translateY(0); } }

/* Visual: tre carte dell'identità che si aprono a ventaglio: palette, carta intestata, logo */
.alscena--visual > span { position: absolute; }
.almv-carta { width: 50px; height: 36px; border-radius: 6px; background: #fff; box-shadow: 0 10px 18px -10px rgba(0, 5, 56, .55);
  animation: almv-ventaglio 4.2s cubic-bezier(.45, .05, .25, 1) infinite; }
.almv-carta--1 { --r: -16deg; --x: -16px; display: grid; place-items: center; }
.almv-carta--2 { --r: 2deg; --x: 0px; display: flex; flex-direction: column; justify-content: center; gap: 4px; padding: 0 8px; animation-delay: .12s; }
.almv-carta--3 { --r: 18deg; --x: 16px; display: flex; align-items: center; gap: 4px; padding: 0 6px; background: var(--c); animation-delay: .24s; }
.almv-colori { display: flex !important; gap: 3px; }
.almv-colori i { width: 9px; height: 9px; border-radius: 50%; background: var(--c); }
.almv-colori i:nth-child(2) { background: var(--cl); }
.almv-colori i:nth-child(3) { background: #1B1D1A; }
.almv-riga { height: 3px; border-radius: 2px; background: #D9DCE8; }
.almv-riga--corta { width: 60%; background: var(--cl); }
.almv-logo { width: 14px; height: 14px; border-radius: 50% 50% 3px 3px; background: #fff; }
.almv-nome { width: 20px; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, .8); }
@keyframes almv-ventaglio { 0%, 100% { transform: translateX(0) rotate(0); } 35%, 75% { transform: translateX(var(--x)) rotate(var(--r)); } }

/* Social: un telefono inclinato con i post che si accendono uno dopo l'altro e un cuore che sale */
.almso-tel { width: 40px; height: 64px; padding: 4px 3px; border-radius: 8px; background: #111; box-shadow: 0 14px 22px -10px rgba(0, 5, 56, .6);
  transform: rotateX(10deg) rotateY(-18deg) rotateZ(6deg); --su: rotateX(2deg) rotateY(-6deg) rotateZ(0) scale(1.06); }
.almso-testa { width: 50%; height: 4px; margin: 1px auto 4px; border-radius: 2px; background: #fff; }
.almso-griglia { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5px; }
.almso-griglia i { aspect-ratio: 4 / 5; border-radius: 1px; background: color-mix(in srgb, var(--cl) 50%, #fff); animation: almso-post 3s ease-in-out infinite; }
.almso-griglia i:nth-child(3n + 1) { background: color-mix(in srgb, var(--c) 70%, #fff); }
.almso-griglia i:nth-child(2) { animation-delay: .25s; } .almso-griglia i:nth-child(3) { animation-delay: .5s; } .almso-griglia i:nth-child(4) { animation-delay: .75s; }
.almso-griglia i:nth-child(5) { animation-delay: 1s; } .almso-griglia i:nth-child(6) { animation-delay: 1.25s; } .almso-griglia i:nth-child(7) { animation-delay: 1.5s; }
.almso-griglia i:nth-child(8) { animation-delay: 1.75s; } .almso-griglia i:nth-child(9) { animation-delay: 2s; }
.almso-cuore { position: absolute; right: 18px; bottom: 10px; color: var(--c); font-size: 15px; line-height: 1; animation: almso-cuore 3s ease-out infinite; }
@keyframes almso-post { 0%, 100% { filter: brightness(1); } 12% { filter: brightness(1.35); transform: scale(1.12); } 24% { filter: brightness(1); transform: none; } }
@keyframes almso-cuore { 0%, 40% { opacity: 0; transform: translateY(6px) scale(.6); } 55% { opacity: 1; transform: translateY(0) scale(1.15); } 85% { opacity: 1; transform: translateY(-14px) scale(1); } 100% { opacity: 0; transform: translateY(-20px); } }

@media (prefers-reduced-motion: reduce) {
  .alscena *, .alscena > span { animation: none !important; transition: none !important; }
}
@media (max-width: 640px) {
  .alscena { width: 84px; height: 64px; }
  .alscena > span { scale: .86; }
}

/* ------------------------------------------------------------ 16 ottobre: Risorse (la sezione e le pagine degli articoli) */
.risorse .sezione__testa h2, .risorse .sezione__testa h1 { font: 700 clamp(1.9rem, 3.4vw, 2.8rem)/1.08 var(--font-titoli); margin: 12px 0 10px; }
.ris-griglia { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 16px; }
/* 17 ottobre, la scheda col modello di Alfredo: copertina nel colore della pagina (--marchio: l'area sulla principale, il
   vestito sulle nicchie) con marchio, icona del servizio, etichetta e parola grande; sotto la pillola del servizio e il titolo */
.ris { display: flex; flex-direction: column; gap: 10px; padding: 12px 12px 18px; border-radius: 20px; background: #fff;
  border: 1px solid rgba(0, 5, 56, .08); color: var(--scuro); text-decoration: none; box-shadow: 0 1px 0 rgba(0, 5, 56, .04);
  transition: transform .25s, box-shadow .25s, border-color .25s; }
@media (hover: hover) { .ris:hover { transform: translateY(-3px); border-color: rgba(0, 5, 56, .16); box-shadow: 0 22px 44px -26px rgba(0, 5, 56, .4); } }
.ris:focus-visible { outline: 3px solid var(--marchio, #473AE0); outline-offset: 3px; }
.ris__cop { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 14px; padding: 16px 18px; background: var(--marchio, #473AE0); color: #fff; }
.ris__cop::before { content: ""; position: absolute; inset: 0; left: 42%; background-image: radial-gradient(rgba(0, 0, 0, .22) 1.6px, transparent 1.7px); background-size: 15px 15px;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 45%); mask-image: linear-gradient(to right, transparent, #000 45%); }
.ris__marca { position: relative; display: inline-flex; align-items: center; gap: 6px; font: 700 .72rem/1 var(--font-testo); letter-spacing: .08em; text-transform: uppercase; }
.ris__marca .pittogramma, .ris__marca svg:first-child { width: 20px; height: auto; color: #fff; }
.ris__icona { position: absolute; right: 7%; top: 50%; width: 36%; max-width: 128px; height: auto; transform: translateY(-50%); fill: none; stroke: #fff; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.ris__icona * { stroke: #fff; fill: none; } .ris__icona .p { fill: rgba(255, 255, 255, .42); stroke: none; } .ris__icona .d { fill: rgba(0, 0, 0, .16); stroke: none; }
.ris__tema { position: absolute; left: 18px; bottom: calc(14px + 2.3em); display: inline-flex; align-items: center; gap: 6px; font: 700 .62rem/1 var(--font-testo); letter-spacing: .14em; text-transform: uppercase; }
.ris__tema i { width: 7px; height: 7px; background: var(--quadratino, #000538); }
.ris__parola { position: absolute; left: 18px; right: 44%; bottom: 12px; font: 800 clamp(1.75rem, 2.4vw, 2.2rem)/1 var(--font-titoli); letter-spacing: -.01em; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ris__tag { align-self: flex-start; margin: 4px 8px 0; padding: 5px 11px; border-radius: 999px; background: var(--marchio, #473AE0); color: #fff; font: 600 .8rem/1.2 var(--font-testo); }
.ris h3 { margin: 0 8px; font: 700 1.2rem/1.28 var(--font-titoli); }
.ris p { margin: 0 8px; font-size: .95rem; line-height: 1.55; color: var(--tenue); }
.ris small { margin: 0 8px; font: 600 .74rem/1 var(--font-testo); letter-spacing: .08em; text-transform: uppercase; color: var(--tenue); }
.ris__leggi { margin: auto 8px 0; padding-top: 6px; font-weight: 600; font-size: .95rem; }
.ris__cop--grande { aspect-ratio: 21 / 9; margin: 0 0 26px; padding: 22px 26px; border-radius: 20px; }
.ris__cop--grande .ris__parola { font-size: clamp(2.2rem, 5vw, 3.6rem); bottom: 18px; left: 26px; }
.ris__cop--grande .ris__tema { left: 26px; bottom: calc(20px + 3.2em); }
.ris__cop--grande .ris__icona { max-width: 170px; }
@media (max-width: 560px) { .ris__cop--grande { aspect-ratio: 16 / 10; } }
.risorse__tutte { margin: 28px 0 0; text-align: center; }

/* le pagine degli articoli e l'indice */
.pagina-articolo main { padding-top: 110px; }
.pagina-articolo .testata__nav { display: flex; }
.briciole { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 22px; font-size: .88rem; color: var(--tenue); }
.briciole a { color: var(--scuro); text-decoration: none; font-weight: 500; }
@media (hover: hover) { .briciole a:hover { text-decoration: underline; } }
.briciole [aria-current] { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 46ch; }
.articolo { max-width: 760px; margin: 0 auto; padding: 24px var(--margine) 0; }
.articolo__testa h1 { margin: 14px 0 12px; font: 700 clamp(2rem, 4.6vw, 3.1rem)/1.08 var(--font-titoli); color: var(--scuro); text-wrap: balance; }
.articolo__info { margin: 0 0 30px; color: var(--tenue); font-size: .95rem; }
.articolo__testo { font-size: 1.08rem; line-height: 1.75; color: var(--testo, var(--scuro)); }
.articolo__testo h2 { margin: 2.1em 0 .6em; font: 700 clamp(1.4rem, 2.6vw, 1.75rem)/1.2 var(--font-titoli); color: var(--scuro); }
.articolo__testo h3 { margin: 1.6em 0 .4em; font: 700 1.15rem/1.35 var(--font-testo); color: var(--scuro); }
.articolo__testo p { margin: 0 0 1.05em; }
.articolo__testo ul, .articolo__testo ol { margin: 0 0 1.2em; padding-left: 1.3em; }
.articolo__testo li { margin: .35em 0; }
.articolo__testo strong { color: var(--scuro); }
.articolo__invito { margin: 44px 0 0; padding: 26px; border-radius: 20px; background: var(--scuro, #000538); color: #fff; }
.articolo__invito b { display: block; font: 700 1.35rem/1.25 var(--font-titoli); }
.articolo__invito p { margin: 8px 0 18px; color: rgba(255, 255, 255, .78); }
.articolo__invito .pulsante--scuro { background: #fff; color: var(--scuro, #000538); border-color: #fff; }
.risorse--altri { padding-top: clamp(48px, 6vw, 80px); }
.risorse--indice { padding-top: 24px; }
@media (max-width: 640px) {
  .pagina-articolo main { padding-top: 92px; }
  .pagina-articolo .testata__nav { display: none; }
  .articolo__testo { font-size: 1.02rem; }
}

/* ------------------------------------------------------------ 16 ottobre: la sezione Esempi e il pulsante nell'apertura */
.vai-esempi { margin-left: 0; }
.vai-esempi-riga { margin: 18px 0 0; }
.comp-cielo .vai-esempi, .comp-fuoco .vai-esempi { background: rgba(255, 255, 255, .14); color: #fff; border-color: rgba(255, 255, 255, .6); }
.esempi .sezione__testa h2 { font: 700 clamp(1.9rem, 3.4vw, 2.8rem)/1.08 var(--font-titoli); margin: 12px 0 10px; }
.es-griglia { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 18px; }
.es { position: relative; display: flex; flex-direction: column; border-radius: 20px; overflow: hidden; background: #fff;
  border: 1px solid rgba(0, 5, 56, .08); box-shadow: 0 1px 0 rgba(0, 5, 56, .04); transition: transform .25s, box-shadow .25s; }
@media (hover: hover) { .es:hover { transform: translateY(-4px); box-shadow: 0 26px 50px -28px rgba(0, 5, 56, .45); } }
.es__schermo { position: relative; aspect-ratio: 16 / 11; overflow: hidden; background: #F6F7FB; border-bottom: 1px solid rgba(0, 5, 56, .06); }
.es__schermo iframe { position: absolute; top: 0; left: 0; width: 1280px; height: 880px; border: 0; transform-origin: 0 0; pointer-events: none; }
.es__testo { display: flex; flex-direction: column; gap: 4px; padding: 16px 18px 18px; color: var(--scuro); }
.es__testo small { font: 600 .74rem/1.2 var(--font-testo); letter-spacing: .08em; text-transform: uppercase; color: var(--tenue); }
.es__testo b { font: 700 1.25rem/1.25 var(--font-titoli); }
.es__apri { margin-top: 6px; font-weight: 600; color: var(--scuro); text-decoration: none; }
.es__apri::after { content: ""; position: absolute; inset: 0; }
.es__apri:focus-visible { outline: none; }
.es:focus-within { outline: 3px solid var(--marchio, #473AE0); outline-offset: 3px; }