/* AUXORA — «Cosa facciamo»: indice dei servizi e un blocco per servizio con la sua dimostrazione disegnata.
   Le animazioni partono quando il blocco entra nello schermo (classe .in-vista da servizi.js)
   e solo se la pagina ha la classe .anima (niente animazioni con «meno movimento» o senza JavaScript). */

.servizi-apertura { padding-block: clamp(4.5rem, 3rem + 6vw, 8rem) clamp(3rem, 2rem + 3vw, 4.5rem); }
.servizi-indice { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.servizi-indice a {
  display: grid; gap: .35rem; align-content: start; height: 100%;
  padding: 1.3rem 1.3rem 1.4rem; border-radius: 18px; background: var(--bianco); text-decoration: none;
  box-shadow: 0 0 0 1px var(--linea); transition: box-shadow .2s ease, transform .2s ease;
}
.servizi-indice a:hover { box-shadow: 0 0 0 2px var(--cobalto); }
.servizi-indice .servizio-icona { margin-bottom: .6rem; }
.servizi-indice b { font: 800 1.35rem/1.1 var(--titoli); }
.servizi-indice a > span:last-child { color: var(--testo-2); font-size: 1rem; }
@media (max-width: 999px) { .servizi-indice { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 559px) {
  /* da telefono l'indice diventa un elenco compatto: icona a sinistra, nome e frase a destra */
  .servizi-indice { grid-template-columns: minmax(0, 1fr); gap: .6rem; }
  .servizi-indice a { grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: .1rem .9rem; padding: .85rem 1rem; }
  .servizi-indice .servizio-icona { grid-row: span 2; margin: 0; width: 2.6rem; height: 2.6rem; }
  .servizi-indice b { font-size: 1.2rem; }
  .servizi-indice a > span:last-child { font-size: .95rem; }
}

.servizio-icona { display: inline-grid; place-items: center; width: 3rem; height: 3rem; border-radius: 12px; background: #E8EEFF; color: var(--cobalto); }
.servizio-icona svg { width: 1.55rem; height: 1.55rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* --- I blocchi --- */
.servizio-blocco { padding-block: clamp(4.5rem, 3rem + 6vw, 8rem); scroll-margin-top: var(--testata-h); }
.blocco-siti { background: var(--bianco); }
.blocco-crm { background: var(--notte); color: var(--testo-chiaro); }
.blocco-app { background: var(--carta); }
.blocco-auto { background: var(--bianco); }
.servizio-griglia { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2.5rem, 1rem + 5vw, 6rem); align-items: center; }
.servizio-inverso .servizio-testo { order: 2; }
.servizio-testo h3 { margin-top: 1.1rem; font-size: clamp(2.3rem, 1.6rem + 2.6vw, 3.7rem); }
.servizio-promessa { margin-top: .8rem; font: 700 clamp(1.35rem, 1.1rem + .9vw, 1.75rem)/1.2 var(--titoli); color: var(--cobalto); }
.servizio-testo > p:not(.servizio-promessa) { margin-top: 1rem; color: var(--testo-2); }
.punti-doppi { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .55rem 1.4rem; font-size: 1.02rem; }
.servizio-cta { margin-top: 1.8rem; }
.blocco-crm .servizio-icona { background: rgba(255,255,255,.08); color: var(--ciano); }
.blocco-crm .servizio-promessa { color: var(--ciano); }
.blocco-crm .servizio-testo > p:not(.servizio-promessa) { color: var(--testo-chiaro-2); }
.blocco-crm .punti li::before { background: var(--ciano); }
.servizio-visivo { position: relative; margin: 0; }
@media (max-width: 899px) {
  .servizio-griglia { grid-template-columns: minmax(0, 1fr); }
  .servizio-inverso .servizio-testo { order: 0; }
}
@media (max-width: 559px) { .punti-doppi { grid-template-columns: minmax(0, 1fr); } }

/* Comparsa al primo sguardo (solo con .anima) */
.anima .servizio-blocco:not(.in-vista) .entra { opacity: 0; transform: translateY(14px); }
.entra { transition: opacity .6s ease, transform .6s cubic-bezier(.2,.8,.2,1); }

/* ================= 1. Siti web: computer, telefono, risultato su Google ================= */
.visivo-siti { padding: 2rem 2rem 3.5rem; border-radius: 24px; background: #E8EEFF; }
.vs-pc { width: 88%; border-radius: 12px; overflow: hidden; background: var(--bianco); box-shadow: 0 30px 50px -25px rgba(11,27,63,.45); }
.vs-barra { display: flex; align-items: center; gap: .3rem; height: 26px; padding: 0 .7rem; background: #F1F3F7; border-bottom: 1px solid rgba(0,0,0,.06); }
.vs-barra i { width: 8px; height: 8px; border-radius: 50%; background: #CDD3DE; }
.vs-barra span { margin-left: .6rem; padding: .05rem .8rem; border-radius: 999px; background: var(--bianco); font-size: .65rem; color: #6B7488; }
.vs-pagina { padding: .9rem 1.1rem 1.2rem; background: #F4F7FB; color: #0F2340; }
.vs-testata { display: flex; align-items: center; gap: .55rem; }
.vs-testata b { margin-right: auto; font: 800 .85rem/1 var(--titoli); }
.vs-testata span { width: 2.2rem; height: .38rem; border-radius: 4px; background: #CBD4E3; }
.vs-testata em { font-style: normal; font-weight: 600; font-size: .66rem; padding: .3rem .55rem; border-radius: 5px; background: #F5B700; }
.vs-eroe { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: 1rem; align-items: center; margin: 1.3rem 0 1.1rem; }
.vs-eroe small { font-size: .58rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: #1F7A4D; }
.vs-eroe strong { display: block; margin: .35rem 0 .6rem; font: 800 clamp(1.15rem, .8rem + 1.2vw, 1.6rem)/1.02 var(--titoli); }
.vs-eroe p, .vs-tel-schermo p { height: .42rem; margin-bottom: .32rem; border-radius: 4px; background: #CBD4E3; }
.vs-eroe p.corta, .vs-tel-schermo p.corta { width: 65%; }
.vs-eroe em, .vs-tel-schermo em { display: inline-block; margin-top: .55rem; padding: .45rem .7rem; border-radius: 5px; background: #F5B700; font-style: normal; font-weight: 600; font-size: .68rem; }
.vs-pannello { display: grid; grid-template-columns: repeat(4, 1fr); gap: 3px; aspect-ratio: 4 / 3; padding: 5px; border-radius: 4px; background: #0E2338; transform: rotate(-6deg); }
.vs-pannello i { border-radius: 1px; background: #1D4E7C; box-shadow: inset 0 0 0 1px rgba(255,255,255,.18); }
.vs-schede { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; }
.vs-schede span { height: 2.5rem; border-radius: 5px; background: var(--bianco); box-shadow: 0 0 0 1px rgba(15,35,64,.08); }
.vs-tel {
  position: absolute; right: 1.4rem; bottom: 1.4rem; width: 27%; aspect-ratio: 9 / 18.5;
  padding: 6px; border-radius: 24px; background: #0E1014; box-shadow: 0 24px 40px -18px rgba(11,27,63,.6);
}
.vs-tel-schermo { display: flex; flex-direction: column; gap: .3rem; height: 100%; padding: .9rem .6rem; border-radius: 18px; overflow: hidden; background: #F4F7FB; color: #0F2340; }
.vs-tel-schermo b { font: 800 .62rem/1 var(--titoli); margin-bottom: .5rem; }
.vs-tel-schermo strong { font: 800 .95rem/1.02 var(--titoli); margin-bottom: .3rem; }
.vs-tel-schermo em { align-self: stretch; text-align: center; margin-bottom: .4rem; }
.vs-tel-schermo span { height: 2rem; border-radius: 5px; background: var(--bianco); box-shadow: 0 0 0 1px rgba(15,35,64,.08); }
.vs-google {
  position: absolute; right: -.75rem; top: 1rem; width: min(52%, 330px); padding: .85rem 1rem;
  border-radius: 12px; background: var(--bianco); box-shadow: 0 20px 40px -18px rgba(11,27,63,.45); font-family: Arial, sans-serif;
}
.vs-google small { display: block; font-size: .72rem; color: #202124; }
.vs-google b { display: block; margin: .15rem 0 .25rem; font-weight: 400; font-size: 1rem; line-height: 1.25; color: #1A0DAB; }
.vs-google p { font-size: .76rem; line-height: 1.4; color: #4D5156; }
.vs-badge { position: absolute; left: -.75rem; bottom: 1.2rem; list-style: none; display: grid; gap: .45rem; justify-items: start; }
.vs-badge li {
  display: inline-flex; align-items: center; gap: .5rem; padding: .5rem .85rem .5rem .7rem;
  border-radius: 999px; background: var(--bianco); color: var(--testo); font-weight: 600; font-size: .9rem;
  box-shadow: 0 14px 28px -14px rgba(11,27,63,.45);
}
.vs-badge li::before { content: ""; width: .55rem; height: .85rem; background: var(--ciano); clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
.visivo-siti .vs-google, .visivo-siti .vs-badge li { transition: opacity .6s ease, transform .6s cubic-bezier(.2,.8,.2,1); }
.anima .servizio-blocco:not(.in-vista) .vs-google { opacity: 0; transform: translateY(-12px); }
.anima .servizio-blocco:not(.in-vista) .vs-badge li { opacity: 0; transform: translateX(-14px); }
.vs-badge li:nth-child(1) { transition-delay: .35s; }
.vs-badge li:nth-child(2) { transition-delay: .55s; }
.vs-badge li:nth-child(3) { transition-delay: .75s; }
.visivo-siti .vs-google { transition-delay: .15s; }
@media (max-width: 559px) {
  /* da telefono niente sovrapposizioni: computer, risultato su Google, poi i punti accanto al telefono */
  .visivo-siti { display: grid; grid-template-columns: minmax(0, 1fr) 36%; gap: 1rem .9rem; align-items: center; padding: 1.2rem; }
  .vs-pc { grid-area: 1 / 1 / 2 / 3; width: 100%; }
  .vs-google { grid-area: 2 / 1 / 3 / 3; position: static; width: auto; }
  .vs-badge { grid-area: 3 / 1 / 4 / 2; position: static; }
  .vs-badge li { font-size: .85rem; }
  .vs-tel { grid-area: 3 / 2 / 4 / 3; position: static; width: 100%; }
}

/* ================= 2. CRM: cruscotto, grafico, avviso di firma, agenda ================= */
.visivo-crm { padding: 1.5rem 0 4.2rem; }   /* l'agenda sporge sotto senza coprire l'ultima riga */
.vc-app { border-radius: 14px; overflow: hidden; background: #F6F7F9; color: #0C1A2B; font-size: .82rem; box-shadow: 0 30px 60px -20px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.06); }
.vc-barra { display: flex; align-items: center; gap: .6rem; padding: .6rem .9rem; background: var(--bianco); border-bottom: 1px solid #E2E5EB; }
.vc-segno { position: relative; width: 1.35rem; height: 1.35rem; border-radius: 5px; background: var(--notte); }
.vc-segno::after { content: ""; position: absolute; inset: 0; margin: auto; width: .42rem; height: .66rem; background: var(--ciano); clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
.vc-barra b { font-weight: 600; }
.vc-cerca { margin-left: auto; width: 28%; height: 1.6rem; border-radius: 8px; background: #EEF1F6; }
.vc-utente { display: grid; place-items: center; width: 1.8rem; height: 1.8rem; border-radius: 50%; background: #0C1A2B; color: var(--bianco); font-weight: 600; font-size: .65rem; }
.vc-corpo { display: grid; grid-template-columns: 3.2rem minmax(0, 1fr); }
.vc-menu { display: flex; flex-direction: column; gap: .55rem; padding: .8rem .6rem; background: var(--bianco); border-right: 1px solid #E2E5EB; }
.vc-menu span { height: 1.6rem; border-radius: 7px; background: #EEF1F6; }
.vc-menu span.on { background: #E8EEFF; box-shadow: inset 3px 0 0 var(--cobalto); }
.vc-main { display: grid; gap: .7rem; padding: .9rem; }
.vc-kpi { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6rem; }
.vc-kpi div, .vc-grafico, .vc-lista { border-radius: 10px; background: var(--bianco); box-shadow: 0 0 0 1px #E2E5EB; }
.vc-kpi div { padding: .6rem .7rem; }
.vc-kpi small, .vc-grafico small { display: block; font-size: .68rem; color: #4B576B; }
.vc-kpi b { font: 800 clamp(1.05rem, .8rem + .8vw, 1.45rem)/1.15 var(--titoli); }
.vc-kpi b.verde { color: #15803D; }
.vc-grafico { padding: .7rem .8rem .5rem; }
.vc-barre { display: flex; align-items: flex-end; gap: 5%; height: 4.6rem; margin-top: .5rem; }
.vc-barre i { flex: 1; height: var(--h); border-radius: 4px 4px 0 0; background: #C9D6FF; transform-origin: bottom; transition: transform .8s cubic-bezier(.2,.8,.2,1); }
.vc-barre i:last-child { background: var(--cobalto); }
.vc-barre i:nth-child(2) { transition-delay: .06s; } .vc-barre i:nth-child(3) { transition-delay: .12s; } .vc-barre i:nth-child(4) { transition-delay: .18s; } .vc-barre i:nth-child(5) { transition-delay: .24s; } .vc-barre i:nth-child(6) { transition-delay: .3s; }
.anima .servizio-blocco:not(.in-vista) .vc-barre i { transform: scaleY(.05); }
.vc-lista { display: grid; padding: .3rem .8rem; }
.vc-lista p { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr) auto; align-items: center; gap: .6rem; padding: .45rem 0; border-bottom: 1px solid #EEF1F6; }
.vc-lista p:last-child { border-bottom: 0; }
.vc-lista b { font-weight: 600; }
.vc-lista span { color: #4B576B; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vc-lista em { font-style: normal; font-weight: 600; font-size: .7rem; padding: .15rem .5rem; border-radius: 999px; white-space: nowrap; }
.p-firmato { background: #DCF5E5; color: #11643A; }
.p-preventivo { background: #E8EEFF; color: #1A43D9; }
.p-sopralluogo { background: #F0E9FF; color: #5B2BC2; }
.vc-avviso {
  position: absolute; right: -1rem; top: .2rem; display: flex; align-items: center; gap: .7rem; padding: .75rem 1rem;
  border-radius: 12px; background: var(--bianco); color: var(--testo); border-left: 4px solid #15803D;
  box-shadow: 0 22px 40px -14px rgba(0,0,0,.5); transition: opacity .6s ease .6s, transform .6s cubic-bezier(.2,.8,.2,1) .6s;
}
.vc-avviso b, .vc-agenda b { display: block; font-weight: 600; font-size: .95rem; }
.vc-avviso span:not(.vc-spunta), .vc-agenda span { font-size: .82rem; color: var(--testo-2); }
.vc-spunta { display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; background: #DCF5E5; color: #15803D; }
.vc-spunta svg { width: 1.1rem; height: 1.1rem; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.vc-agenda {
  position: absolute; left: -1rem; bottom: 0; display: grid; gap: .1rem; padding: .7rem 1rem;
  border-radius: 12px; background: var(--bianco); color: var(--testo); border-left: 4px solid #7C3AED;
  box-shadow: 0 22px 40px -14px rgba(0,0,0,.5); transition: opacity .6s ease .9s, transform .6s cubic-bezier(.2,.8,.2,1) .9s;
}
.vc-agenda small { font-size: .78rem; font-weight: 600; color: #5B2BC2; }
.anima .servizio-blocco:not(.in-vista) .vc-avviso { opacity: 0; transform: translateY(-14px); }   /* dall'alto: di lato sporgeva dallo schermo del telefono */
.anima .servizio-blocco:not(.in-vista) .vc-agenda { opacity: 0; transform: translateY(16px); }
@media (max-width: 559px) {
  .vc-corpo { grid-template-columns: minmax(0, 1fr); }
  .vc-menu { display: none; }
  .vc-lista span { display: none; }
  .vc-lista p { grid-template-columns: minmax(0, 1fr) auto; }
  .vc-avviso { right: -.25rem; }
  .vc-agenda { left: -.25rem; }
}

/* ================= 3. App: pannello dello staff, telefono con tessera e QR, notifica ================= */
.visivo-app { padding: 1rem 0 2rem; min-height: 26rem; }
.va-pannello { width: 80%; margin-left: auto; border-radius: 14px; overflow: hidden; background: var(--bianco); font-size: .85rem; box-shadow: 0 30px 50px -25px rgba(11,27,63,.4), 0 0 0 1px var(--linea); }
.va-testa { display: flex; align-items: center; justify-content: space-between; padding: .85rem 1rem; border-bottom: 1px solid var(--linea); }
.va-testa b { font: 800 1.05rem/1 var(--titoli); }
.va-testa span { padding: .2rem .6rem; border-radius: 999px; background: #E8EEFF; color: #1A43D9; font-size: .75rem; font-weight: 600; }
.va-righe { padding: .2rem 1rem .6rem 34%; }
.va-righe p { display: grid; grid-template-columns: 3rem minmax(0, 1fr) auto; align-items: center; gap: .2rem .6rem; padding: .55rem 0; border-bottom: 1px solid #EEF1F6; }
.va-righe p:last-child { border-bottom: 0; }
.va-righe time { grid-row: span 2; font-weight: 700; color: var(--cobalto); font-variant-numeric: tabular-nums; }
.va-righe b { font-weight: 600; }
.va-righe span { grid-column: 2; font-size: .78rem; color: var(--testo-2); }
.va-righe em { grid-column: 3; grid-row: 1 / span 2; font-style: normal; font-size: .72rem; font-weight: 600; padding: .15rem .55rem; border-radius: 999px; }
.va-righe em.ok { background: #DCF5E5; color: #11643A; }
.va-righe em.attesa { background: #FFF1D6; color: #8A5A00; }
.va-tel {
  position: absolute; left: 0; bottom: 0; width: 34%; aspect-ratio: 9 / 18.5; padding: 7px;
  border-radius: 28px; background: #0E1014; box-shadow: 0 28px 50px -20px rgba(11,27,63,.6);
}
.va-schermo { display: flex; flex-direction: column; gap: .55rem; height: 100%; padding: 1.1rem .75rem; border-radius: 21px; overflow: hidden; background: var(--carta); color: var(--testo); }
.va-schermo > small { font-size: .62rem; color: var(--testo-2); }
.va-schermo > b { margin-top: -.45rem; font: 800 1.05rem/1.1 var(--titoli); }
.va-tessera { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem .35rem; padding: .7rem .75rem; border-radius: 14px; background: var(--notte); color: var(--bianco); }
.va-tessera small { width: 100%; font-size: .55rem; color: var(--testo-chiaro-2); text-transform: uppercase; letter-spacing: .1em; }
.va-tessera strong { font: 800 1.7rem/1 var(--titoli); }
.va-tessera span { flex: 1 1 0; min-width: 0; font-size: .62rem; line-height: 1.1; color: var(--testo-chiaro-2); }   /* va a capo lei, non i pallini */
.va-tessera i { width: .45rem; height: .45rem; border-radius: 50%; background: var(--ciano); }
.va-tessera i.vuoto { background: transparent; box-shadow: inset 0 0 0 1.5px rgba(34,199,232,.6); }
.va-qr { display: flex; align-items: center; gap: .5rem; padding: .5rem .6rem; border-radius: 12px; background: var(--bianco); box-shadow: 0 0 0 1px var(--linea); }
.va-qr svg { width: 2.2rem; height: 2.2rem; flex: none; }
.va-qr span { font-weight: 600; font-size: .68rem; }
.va-prossima { padding: .5rem .6rem; border-radius: 12px; background: #E8EEFF; }
.va-prossima small { display: block; font-size: .55rem; color: #1A43D9; text-transform: uppercase; letter-spacing: .08em; font-weight: 600; }
.va-prossima b { font-size: .7rem; font-weight: 600; }
.va-notifica {
  position: absolute; left: 25%; top: 0; display: flex; align-items: center; gap: .65rem; padding: .7rem .95rem;
  border-radius: 14px; background: var(--bianco); box-shadow: 0 22px 40px -16px rgba(11,27,63,.45);
  transition: opacity .6s ease .5s, transform .6s cubic-bezier(.2,.8,.2,1) .5s;
}
.va-notifica b { display: block; font-weight: 600; font-size: .92rem; }
.va-notifica span:not(.va-campana) { font-size: .8rem; color: var(--testo-2); }
.va-campana { display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 10px; background: var(--notte); color: var(--ciano); }
.va-campana svg { width: 1.1rem; height: 1.1rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.anima .servizio-blocco:not(.in-vista) .va-notifica { opacity: 0; transform: translateY(-14px); }
.va-tel { transition: transform .8s cubic-bezier(.2,.8,.2,1); }
.anima .servizio-blocco:not(.in-vista) .va-tel { transform: translateY(24px); }
@media (max-width: 559px) {
  .visivo-app { min-height: 0; padding-bottom: 0; }
  .va-pannello { width: 100%; }
  .va-righe { padding-left: 1rem; }
  .va-tel { position: relative; width: 56%; margin: 1.5rem 0 0 6%; }
  .va-notifica { left: auto; right: 0; top: auto; bottom: 12%; }
}

/* ================= 4. Automazioni: la richiesta che passa da sola ================= */
.visivo-auto { padding: 1.6rem clamp(1rem, .6rem + 1.5vw, 1.8rem) 1.8rem; border-radius: 24px; background: var(--notte); color: var(--testo-chiaro); }
.flusso-titolo { margin-bottom: 1.1rem; font: 700 1.15rem/1.2 var(--titoli); color: var(--testo-chiaro-2); }
.flusso { position: relative; list-style: none; display: grid; gap: .55rem; }
.flusso::before { content: ""; position: absolute; left: 1.95rem; top: 1.6rem; bottom: 1.6rem; width: 2px; background: rgba(255,255,255,.14); }
.flusso li {
  position: relative; display: grid; grid-template-columns: 2.9rem minmax(0, 1fr) auto; align-items: center; gap: .9rem;
  padding: .7rem .9rem .7rem .5rem; border-radius: 14px; transition: background-color .35s ease;
}
.f-ico { position: relative; z-index: 1; display: grid; place-items: center; width: 2.9rem; height: 2.9rem; border-radius: 12px; background: #142A5C; color: var(--testo-chiaro-2); transition: background-color .35s ease, color .35s ease, box-shadow .35s ease; }
.f-ico svg { width: 1.35rem; height: 1.35rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.flusso b { display: block; font-weight: 600; color: var(--bianco); }
.flusso small { display: block; font-size: .9rem; color: var(--testo-chiaro-2); }
.flusso em { font-style: normal; font-size: .8rem; font-weight: 600; color: var(--ciano); opacity: 0; transition: opacity .35s ease; }
.flusso li.fatto .f-ico { background: var(--cobalto); color: var(--bianco); }
.flusso li.fatto em { opacity: 1; }
.flusso li.ora { background: rgba(255,255,255,.07); }
.flusso li.ora .f-ico { background: var(--ciano); color: var(--notte); box-shadow: 0 0 0 6px rgba(34,199,232,.18); }
/* con le animazioni attive il ciclo lo guida servizi.js: si parte con i passi spenti */
.anima .flusso li.fatto:not(.ora):not(.acceso) .f-ico { background: #142A5C; color: var(--testo-chiaro-2); }
.anima .flusso li.fatto:not(.acceso) em { opacity: 0; }
.anima .flusso li.acceso .f-ico { background: var(--cobalto); color: var(--bianco); }
.anima .flusso li.acceso em { opacity: 1; }
@media (max-width: 559px) { .flusso em { display: none; } }

/* «Provalo tu» ora sta in fondo, dopo «Come lavoriamo» */
.prova { background: var(--bianco); }

/* Contatti: il tasto WhatsApp */
.pulsante-wa { margin-top: 2rem; }
.pulsante-wa::before { background: #13804A; }   /* 5:1 con la scritta bianca */
.pulsante-wa:hover::before { background: #0F6B3D; }