/* Levlo Studio — pagina della guida gratuita (31/10/2026).
   Stessa regola della home: senza "js" (o con movimento ridotto) è tutto fermo e visibile;
   gli stati iniziali delle animazioni li imposta guida.js. */

/* ---------- Icone (maschere SVG, prendono il colore dal testo) ---------- */
.ico { display: inline-block; width: 22px; height: 22px; flex: none; background: currentColor; -webkit-mask: var(--m) center/contain no-repeat; mask: var(--m) center/contain no-repeat; }
.ico--carrello { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='20' r='1.5'/%3E%3Ccircle cx='18' cy='20' r='1.5'/%3E%3Cpath d='M2 3h3l2.7 12.4a2 2 0 0 0 2 1.6h7.8a2 2 0 0 0 2-1.5L21 8H6'/%3E%3C/svg%3E"); }
.ico--doc { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 2v6h6M8 13h8M8 17h5'/%3E%3C/svg%3E"); }
.ico--scatola { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 8 12 3 3 8v8l9 5 9-5z'/%3E%3Cpath d='m3 8 9 5 9-5M12 13v8'/%3E%3C/svg%3E"); }
.ico--chat { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12a8 8 0 0 1-11.6 7.1L4 20.5l1.4-5A8 8 0 1 1 21 12z'/%3E%3C/svg%3E"); }
.ico--persone { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='8' r='3.5'/%3E%3Cpath d='M2.5 20a6.5 6.5 0 0 1 13 0M16 4.5a3.5 3.5 0 0 1 0 7M18 14a6 6 0 0 1 3.5 6'/%3E%3C/svg%3E"); }
.ico--ingranaggio { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M12 2v3M12 19v3M4.9 4.9l2.1 2.1M17 17l2.1 2.1M2 12h3M19 12h3M4.9 19.1 7 17M17 7l2.1-2.1'/%3E%3C/svg%3E"); }
.ico--squadra { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='17' rx='2'/%3E%3Cpath d='M3 9h18M8 2v4M16 2v4M8 14h3M8 17h6'/%3E%3C/svg%3E"); }
.ico--euro { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6.5A7 7 0 1 0 18 17.5M4 10h10M4 14h10'/%3E%3C/svg%3E"); }
.ico--grafico { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 3v18h18'/%3E%3Cpath d='m7 15 4-4 3 3 6-7'/%3E%3C/svg%3E"); }

.pulsante--mini { min-height: 40px; padding: 8px 18px; font-size: .9rem; background: var(--accento); color: var(--notte); }
@media (max-width: 520px) { .navigazione__destra .navigazione__indietro { display: none; } }

/* ---------- 1 · Apertura ---------- */
.g-apertura { position: relative; overflow: hidden; isolation: isolate; padding: clamp(56px, 9vw, 120px) 0 clamp(64px, 9vw, 110px); }
.g-apertura__dentro { display: grid; gap: 48px; align-items: center; }
@media (min-width: 1000px) { .g-apertura__dentro { grid-template-columns: 1.15fr .85fr; gap: 64px; } }
.g-apertura__dentro > * { min-width: 0; }
.g-titolo { font-size: clamp(2.5rem, 7.4vw, 5.2rem); line-height: 1.02; letter-spacing: -.045em; text-wrap: balance; }
.g-titolo .riga { display: block; overflow: hidden; padding: 0 .1em .08em 0; }
.g-titolo .riga > span { display: inline-block; }
.g-sotto { color: var(--tenue); font-size: clamp(1.02rem, 1.5vw, 1.18rem); max-width: 52ch; margin-top: 24px; }
.g-apertura__azioni { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.g-pulsante { background: var(--accento); color: var(--notte); box-shadow: 0 14px 40px -14px rgba(143, 117, 255, .8); }
.g-numeri { display: flex; flex-wrap: wrap; gap: 14px 40px; margin-top: 40px; padding-top: 26px; border-top: 1px solid rgba(143, 117, 255, .15); }
.g-numeri li { display: grid; }
.g-numeri b { font-size: clamp(1.8rem, 3.4vw, 2.4rem); font-weight: 800; color: #fff; letter-spacing: -.03em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.g-numeri span { font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--tenue); }

/* Il flusso che gira */
.flusso-vivo { position: relative; border-radius: 22px; padding: 22px; background: linear-gradient(165deg, rgba(58, 44, 128, .5), rgba(18, 18, 25, .85)); border: 1px solid rgba(143, 117, 255, .25); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 40px 90px -40px rgba(143, 117, 255, .55); }
.flusso-vivo__testa { display: flex; align-items: center; gap: 10px; padding-bottom: 16px; border-bottom: 1px solid rgba(143, 117, 255, .15); font-size: .92rem; color: #fff; }
.flusso-vivo__testa small { margin-left: auto; color: var(--tenue); font-size: .8rem; }
.flusso-vivo__luce { width: 10px; height: 10px; border-radius: 50%; background: var(--wa); box-shadow: 0 0 0 4px rgba(37, 211, 102, .18); animation: luce 1.6s ease-in-out infinite; }
@keyframes luce { 50% { box-shadow: 0 0 0 8px rgba(37, 211, 102, 0); } }
.flusso-vivo__passi { position: relative; display: grid; gap: 12px; margin-top: 18px; }
.flusso-vivo__passi::before { content: ''; position: absolute; left: 21px; top: 22px; bottom: 22px; width: 2px; background: rgba(143, 117, 255, .18); }
.flusso-vivo__passi li { position: relative; display: flex; align-items: center; gap: 14px; padding: 10px 12px 10px 0; border-radius: 14px; }
.flusso-vivo__passi li > .ico { position: relative; z-index: 1; width: 44px; height: 44px; padding: 11px; border-radius: 12px; background: var(--vetro); color: var(--accento); -webkit-mask: none; mask: none; }
.flusso-vivo__passi li > .ico::after { content: ''; position: absolute; inset: 11px; background: currentColor; -webkit-mask: var(--m) center/contain no-repeat; mask: var(--m) center/contain no-repeat; }
.flusso-vivo__passi li > .ico { background: var(--vetro); box-shadow: inset 0 0 0 1px rgba(143, 117, 255, .3); }
.flusso-vivo__passi div { min-width: 0; display: grid; }
.flusso-vivo__passi b { color: #fff; font-size: .95rem; font-weight: 600; }
.flusso-vivo__passi small { color: var(--tenue); font-size: .8rem; }
.spunta { margin-left: auto; width: 24px; height: 24px; flex: none; border-radius: 50%; background: var(--wa); position: relative; }
.spunta::after { content: ''; position: absolute; left: 8px; top: 5px; width: 6px; height: 11px; border: solid var(--notte); border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); }
.flusso-vivo__piede { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 16px; margin-top: 16px; padding-top: 14px; border-top: 1px solid rgba(143, 117, 255, .15); font-size: .85rem; color: var(--tenue); }
.flusso-vivo__piede b { color: var(--wa); }
/* Il ciclo: ogni passo si accende e si spunta, uno dopo l'altro, poi si ricomincia (8 s) */
.js:not(.ridotto) .flusso-vivo__passi li { animation: passo 8s infinite both; }
.js:not(.ridotto) .flusso-vivo__passi li .spunta { animation: spunta 8s infinite both; }
.js:not(.ridotto) .flusso-vivo__passi li:nth-child(2), .js:not(.ridotto) .flusso-vivo__passi li:nth-child(2) .spunta { animation-delay: .9s; }
.js:not(.ridotto) .flusso-vivo__passi li:nth-child(3), .js:not(.ridotto) .flusso-vivo__passi li:nth-child(3) .spunta { animation-delay: 1.8s; }
.js:not(.ridotto) .flusso-vivo__passi li:nth-child(4), .js:not(.ridotto) .flusso-vivo__passi li:nth-child(4) .spunta { animation-delay: 2.7s; }
@keyframes passo {
  0% { opacity: .35; background: transparent; }
  6% { opacity: 1; background: rgba(143, 117, 255, .14); }
  14% { background: transparent; }
  80% { opacity: 1; }
  92%, 100% { opacity: .35; }
}
@keyframes spunta {
  0%, 9% { transform: scale(0); }
  13% { transform: scale(1.2); }
  16%, 82% { transform: scale(1); }
  90%, 100% { transform: scale(0); }
}

/* ---------- 2 · Reparti ---------- */
.reparti { display: grid; gap: 16px; margin-top: 48px; }
@media (min-width: 700px) { .reparti { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .reparti { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1240px) { .reparti { grid-template-columns: repeat(5, 1fr); gap: 14px; } .reparto { padding: 24px 20px; } }
.reparto { padding: 26px 24px; border-radius: var(--r); background: linear-gradient(160deg, rgba(58, 44, 128, .34), rgba(27, 23, 48, .6)); border: 1px solid rgba(143, 117, 255, .18); transition: border-color .3s, transform .3s cubic-bezier(.2,.8,.2,1); }
@media (hover: hover) { .reparto:hover { border-color: rgba(143, 117, 255, .55); transform: translateY(-4px); } }
.reparto header { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.reparto__ico { width: 40px; height: 40px; color: var(--accento); -webkit-mask: none; mask: none; background: rgba(143, 117, 255, .14); border-radius: 12px; position: relative; }
.reparto__ico::after { content: ''; position: absolute; inset: 9px; background: currentColor; -webkit-mask: var(--m) center/contain no-repeat; mask: var(--m) center/contain no-repeat; }
.reparto h3 { font-size: 1.15rem; letter-spacing: -.02em; }
.reparto ol { display: grid; gap: 10px; }
.reparto li { display: flex; gap: 12px; font-size: .95rem; color: var(--testo); }
.reparto li b { color: var(--accento); font-weight: 600; font-size: .85rem; min-width: 1.6em; padding-top: .1em; }

/* ---------- 3 · Esempi animati ---------- */
.esempi-vivi { background: linear-gradient(180deg, transparent, rgba(18, 18, 25, .9) 20%, rgba(18, 18, 25, .9) 80%, transparent); }
.demo-griglia { display: grid; gap: 24px; margin-top: 48px; }
@media (min-width: 760px) { .demo-griglia { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1280px) { .demo-griglia { grid-template-columns: repeat(4, 1fr); gap: 18px; } }
.demo { margin: 0; display: grid; gap: 16px; align-content: start; }
.demo > * { min-width: 0; }
.demo figcaption { color: var(--tenue); font-size: .92rem; }
.demo figcaption b { display: block; color: #fff; font-size: 1rem; margin-bottom: 4px; }
.demo__schermo { position: relative; min-height: 430px; overflow: hidden; border-radius: 22px; padding: 18px; background: var(--notte); border: 1px solid rgba(143, 117, 255, .22); box-shadow: 0 30px 70px -40px rgba(143, 117, 255, .5); font-size: .88rem; }

/* Chat */
.demo--chat { display: flex; flex-direction: column; background: #0b141a; }
.chat__testa { display: flex; align-items: center; gap: 10px; padding-bottom: 12px; border-bottom: 1px solid rgba(255, 255, 255, .08); }
.chat__testa div { display: grid; }
.chat__testa b { color: #fff; font-size: .92rem; }
.chat__testa small { color: var(--wa); font-size: .76rem; }
.chat__avatar { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--bagliore); color: #fff; font-weight: 700; font-size: .78rem; }
.chat__corpo { display: flex; flex-direction: column; gap: 8px; padding-top: 14px; }
.bolla { max-width: 85%; padding: 8px 12px; border-radius: 12px; line-height: 1.45; color: #e9edef; }
.bolla b { color: #fff; }
.bolla--lui { align-self: flex-end; background: #005c4b; border-top-right-radius: 3px; }
.bolla--ai { align-self: flex-start; background: #202c33; border-top-left-radius: 3px; }
.scrive { align-self: flex-start; display: flex; gap: 4px; padding: 11px 14px; border-radius: 12px; background: #202c33; }
.scrive i { width: 6px; height: 6px; border-radius: 50%; background: #8696a0; animation: scrive 1s infinite; }
.scrive i:nth-child(2) { animation-delay: .15s; }
.scrive i:nth-child(3) { animation-delay: .3s; }
@keyframes scrive { 50% { transform: translateY(-3px); opacity: .5; } }
.chat__evento { align-self: center; margin-top: 4px; padding: 6px 12px; border-radius: 99px; font-size: .76rem; color: var(--wa); background: rgba(37, 211, 102, .12); border: 1px solid rgba(37, 211, 102, .3); }
/* Senza animazione il "sta scrivendo" non serve */
html:not(.js) .scrive, .ridotto .scrive { display: none; }

/* Magazzino */
.demo--magazzino { display: flex; flex-direction: column; gap: 12px; }
.mag__testa { display: grid; }
.mag__testa b { color: #fff; }
.mag__testa small { color: var(--tenue); font-size: .76rem; }
.mag__righe { display: grid; gap: 8px; }
.mag__riga { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; padding: 10px 12px; border-radius: 12px; background: rgba(27, 23, 48, .6); border: 1px solid rgba(143, 117, 255, .12); }
.mag__riga div:first-child { display: grid; min-width: 0; }
.mag__riga b { color: #fff; font-weight: 600; font-size: .86rem; }
.mag__riga small { color: var(--tenue); font-size: .74rem; }
.mag__scade { align-self: center; font-size: .74rem; font-weight: 600; color: #ffb35c; white-space: nowrap; }
.mag__scade--ok { color: var(--tenue); font-weight: 400; }
.mag__barra { grid-column: 1 / -1; height: 4px; border-radius: 4px; background: rgba(169, 165, 184, .15); overflow: hidden; }
.mag__barra i { display: block; height: 100%; width: 86%; border-radius: inherit; background: linear-gradient(90deg, var(--accento), #ffb35c); }
.mag__riga--calda { border-color: rgba(255, 179, 92, .5); box-shadow: 0 0 0 3px rgba(255, 179, 92, .08); }
.mag__offerta { display: grid; gap: 4px; padding: 12px 14px; border-radius: 14px; background: linear-gradient(150deg, rgba(143, 117, 255, .22), rgba(58, 44, 128, .4)); border: 1px solid rgba(143, 117, 255, .4); }
.mag__badge { justify-self: start; font-size: .7rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--notte); background: var(--accento); padding: 3px 10px; border-radius: 99px; }
.mag__prezzi { display: flex; align-items: baseline; gap: 12px; }
.mag__prezzi s { color: var(--tenue); }
.mag__prezzi b { color: #fff; font-size: 1.5rem; font-weight: 800; letter-spacing: -.02em; }
.mag__offerta small { color: var(--wa); font-size: .78rem; font-weight: 600; }
.mag__invio { margin-top: auto; padding: 10px 12px; border-radius: 12px; background: rgba(37, 211, 102, .12); border: 1px solid rgba(37, 211, 102, .3); color: var(--testo); font-size: .82rem; }
.mag__invio b { color: var(--wa); }

/* Documento */
.demo--doc { display: flex; flex-direction: column; gap: 14px; }
.doc__foglio { position: relative; overflow: hidden; padding: 14px; border-radius: 10px; background: #eef2fa; display: grid; gap: 8px; }
.doc__intestazione { display: flex; justify-content: space-between; gap: 8px; color: #1B1730; font-size: .78rem; padding-bottom: 6px; border-bottom: 1px solid #c9d3e6; }
.doc__intestazione small { color: #5E5A70; }
.doc__riga { display: block; height: 7px; border-radius: 4px; background: #c9d3e6; }
.doc__riga--corta { width: 45%; }
.doc__riga--media { width: 70%; }
.doc__scanner { position: absolute; left: 0; right: 0; top: 0; height: 36px; background: linear-gradient(180deg, rgba(143, 117, 255, 0), rgba(143, 117, 255, .45)); border-bottom: 2px solid var(--accento); opacity: 0; }
.doc__campi { margin: 0; display: grid; gap: 6px; }
.doc__campi div { display: flex; justify-content: space-between; gap: 10px; padding: 7px 12px; border-radius: 10px; background: rgba(27, 23, 48, .6); border: 1px solid rgba(143, 117, 255, .14); }
.doc__campi dt { color: var(--tenue); font-size: .8rem; }
.doc__campi dd { margin: 0; color: #fff; font-weight: 600; font-size: .84rem; text-align: right; }
.doc__ok { margin-top: auto; padding: 10px 12px; border-radius: 12px; background: rgba(37, 211, 102, .12); border: 1px solid rgba(37, 211, 102, .3); color: var(--wa); font-weight: 600; font-size: .84rem; }

/* ---------- 4 · Calcolatore ---------- */
.calcolo__dentro { display: grid; gap: 40px; align-items: center; }
@media (min-width: 960px) { .calcolo__dentro { grid-template-columns: 1fr 1fr; gap: 64px; } }
.calcolo__dentro > * { min-width: 0; }
.calcolatore { display: grid; gap: 22px; padding: clamp(22px, 4vw, 34px); border-radius: 22px; background: linear-gradient(160deg, rgba(58, 44, 128, .42), rgba(27, 23, 48, .7)); border: 1px solid rgba(143, 117, 255, .25); }
.cursore { display: grid; gap: 10px; }
.cursore span { display: flex; justify-content: space-between; gap: 12px; font-size: .92rem; color: var(--testo); }
.cursore output { color: #fff; font-weight: 800; font-variant-numeric: tabular-nums; }
.cursore input { width: 100%; height: 28px; margin: 0; accent-color: var(--accento); cursor: pointer; }
.risultato { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding-top: 18px; border-top: 1px solid rgba(143, 117, 255, .18); }
.risultato div { display: grid; gap: 2px; padding: 14px; border-radius: 14px; background: rgba(11, 11, 16, .55); }
.risultato small { color: var(--tenue); font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; }
.risultato b { color: #fff; font-size: clamp(1.4rem, 3.4vw, 2rem); font-weight: 800; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.risultato__meta { color: var(--testo); }
.risultato__meta b { color: var(--wa); }
.risultato__nota { color: var(--tenue); font-size: .78rem; }

/* ---------- 5 · Modulo ---------- */
.richiedi__dentro { display: grid; gap: 48px; align-items: center; }
@media (min-width: 960px) { .richiedi__dentro { grid-template-columns: .9fr 1.1fr; gap: 72px; } }
.richiedi__dentro > * { min-width: 0; }
.copertina-scena { perspective: 1200px; display: grid; place-items: center; }
.copertina { position: relative; width: min(100%, 340px); aspect-ratio: 3 / 4; padding: 30px 28px; border-radius: 6px 18px 18px 6px; display: flex; flex-direction: column; gap: 14px; overflow: hidden; background: radial-gradient(circle at 80% 10%, rgba(143, 117, 255, .55), transparent 55%), linear-gradient(160deg, #3A2C80, #121219 70%); border: 1px solid rgba(143, 117, 255, .4); box-shadow: -10px 0 0 -2px #17132B, 0 50px 90px -30px rgba(143, 117, 255, .55); transform: rotateY(-16deg) rotateX(4deg); transition: transform .6s cubic-bezier(.2,.8,.2,1); }
@media (hover: hover) { .copertina-scena:hover .copertina { transform: rotateY(-4deg) rotateX(0); } }
.js:not(.ridotto) .copertina { animation: galleggia 6s ease-in-out infinite; }
@keyframes galleggia { 50% { translate: 0 -10px; } }
.copertina img { border-radius: 10px; }
.copertina__anno { font-size: .74rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--accento); margin-top: auto; }
.copertina__titolo { font-size: clamp(1.5rem, 4vw, 1.9rem); font-weight: 800; line-height: 1.1; letter-spacing: -.03em; color: #fff; text-wrap: balance; }
.copertina__sotto { font-size: .78rem; color: var(--tenue); }
.copertina__linee { position: absolute; top: 34px; right: 26px; display: grid; gap: 6px; }
.copertina__linee i { display: block; width: 46px; height: 3px; background: rgba(213, 222, 242, .3); }
.copertina__linee i:nth-child(2) { width: 30px; }
.copertina__linee i:nth-child(4) { width: 20px; }

.modulo { background: linear-gradient(160deg, rgba(58, 44, 128, .45), rgba(27, 23, 48, .7)); border: 1px solid rgba(143, 117, 255, .3); border-radius: 22px; padding: clamp(22px, 4vw, 36px); display: grid; gap: 14px; box-shadow: 0 40px 90px -50px rgba(143, 117, 255, .6); }
.modulo h2 { font-size: clamp(1.6rem, 3.6vw, 2.2rem); }
.modulo > p { color: var(--tenue); font-size: .95rem; }
.campo { display: grid; gap: 6px; }
.campo span { font-size: .9rem; font-weight: 600; color: var(--testo); }
.campo small { color: var(--tenue); font-weight: 400; }
.campo input { font: inherit; color: #fff; background: rgba(11, 11, 16, .7); border: 1px solid rgba(213, 222, 242, .25); border-radius: 12px; padding: 13px 14px; min-height: 50px; width: 100%; transition: border-color .2s, box-shadow .2s; }
.campo input:focus { outline: none; border-color: var(--accento); box-shadow: 0 0 0 4px rgba(143, 117, 255, .2); }
.consenso { display: flex; gap: 10px; align-items: flex-start; font-size: .86rem; color: var(--tenue); }
.consenso input { width: 22px; height: 22px; flex: none; margin-top: 2px; accent-color: var(--accento); }
.consenso a { color: var(--accento); }
.nascosto { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.modulo button { border: 0; cursor: pointer; font-family: inherit; width: 100%; background: var(--accento); color: var(--notte); }
.modulo button[disabled] { opacity: .6; cursor: wait; }
.errore { color: #ffb4b4; font-size: .92rem; min-height: 1.2em; }

/* ---------- 6 · La guida ---------- */
.guida { padding-top: 0; }
.guida__testa .titolo { max-width: 20ch; }
.indice { position: sticky; top: 64px; z-index: 20; display: flex; gap: 8px; overflow-x: auto; margin: 36px calc(-1 * var(--gutter)) 0; padding: 12px var(--gutter); background: rgba(11, 11, 16, .9); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); scrollbar-width: none; }
.indice::-webkit-scrollbar { display: none; }
.indice a { flex: none; padding: 7px 14px; border-radius: 99px; font-size: .82rem; font-weight: 600; text-decoration: none; color: var(--tenue); border: 1px solid rgba(143, 117, 255, .2); transition: color .2s, background-color .2s, border-color .2s; }
.indice a.attivo { color: var(--notte); background: var(--accento); border-color: var(--accento); }
@media (hover: hover) { .indice a:not(.attivo):hover { color: #fff; border-color: rgba(143, 117, 255, .6); } }

.capitoli { display: grid; gap: 24px; margin-top: 32px; }
.capitoli__reparto { margin-top: 28px; font-size: .8rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--accento); display: flex; align-items: center; gap: 14px; }
.capitoli__reparto::after { content: ''; flex: 1; height: 1px; background: rgba(143, 117, 255, .25); }
.cap { scroll-margin-top: 130px; padding: clamp(22px, 4vw, 38px); border-radius: 22px; background: rgba(27, 23, 48, .45); border: 1px solid rgba(143, 117, 255, .16); }
.cap__testa { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; align-items: center; margin-bottom: 8px; }
.cap__num { grid-row: span 2; display: grid; place-items: center; width: 54px; height: 54px; border-radius: 14px; background: var(--vetro); border: 1px solid rgba(143, 117, 255, .35); color: var(--accento); font-weight: 800; font-size: 1.1rem; }
.cap__testa h3 { font-size: clamp(1.3rem, 3vw, 1.75rem); line-height: 1.15; letter-spacing: -.025em; text-wrap: balance; }
.cap__ore { justify-self: start; font-size: .78rem; font-weight: 600; color: var(--wa); border: 1px solid rgba(37, 211, 102, .35); padding: 2px 10px; border-radius: 99px; }
.cap h4 { margin: 22px 0 8px; font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: var(--tenue); }
.cap p { color: var(--testo); }

/* Il flusso del capitolo: passi collegati da una linea */
.flusso { counter-reset: passo; display: grid; gap: 0; }
.flusso li { counter-increment: passo; position: relative; padding: 0 0 14px 44px; color: #fff; font-size: .96rem; }
.flusso li::before { content: counter(passo); position: absolute; left: 0; top: -2px; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: rgba(143, 117, 255, .16); border: 1px solid rgba(143, 117, 255, .5); color: var(--accento); font-size: .78rem; font-weight: 600; }
.flusso li:not(:last-child)::after { content: ''; position: absolute; left: 13.5px; top: 28px; bottom: 0; width: 1px; background: linear-gradient(rgba(143, 117, 255, .5), rgba(143, 117, 255, .1)); }
.flusso li:last-child { padding-bottom: 0; }
.flusso li:last-child::before { background: var(--accento); color: var(--notte); }

.cap__esempio { margin-top: 22px; padding: 4px 20px 18px; border-radius: 16px; background: rgba(143, 117, 255, .08); border-left: 3px solid var(--accento); }
.cap__due { display: grid; gap: 14px; margin-top: 18px; }
@media (min-width: 720px) { .cap__due { grid-template-columns: 1fr 1fr; } }
.cap__due > div { padding: 4px 18px 18px; border-radius: 16px; border: 1px solid rgba(143, 117, 255, .14); }
.cap__gratis { background: rgba(37, 211, 102, .06); border-color: rgba(37, 211, 102, .25) !important; }
.cap__gratis h4 { color: var(--wa); }
.cap__misura h4 { color: var(--accento); }
.cap__due p { font-size: .94rem; }

.metodo { margin-top: 80px; }
.metodo__passi { display: grid; gap: 16px; margin-top: 36px; }
@media (min-width: 720px) { .metodo__passi { grid-template-columns: repeat(2, 1fr); } }
.metodo__passi li { padding: 24px; border-radius: var(--r); background: rgba(27, 23, 48, .45); border: 1px solid rgba(143, 117, 255, .16); }
.metodo__passi b { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--accento); color: var(--notte); font-weight: 800; margin-bottom: 14px; }
.metodo__passi h3 { font-size: 1.15rem; letter-spacing: -.02em; }
.metodo__passi p { color: var(--tenue); margin-top: 6px; font-size: .95rem; }

.chiusura { margin-top: 56px; display: grid; gap: 16px; justify-items: start; background: linear-gradient(160deg, rgba(37, 211, 102, .14), rgba(27, 23, 48, .55)); border: 1px solid rgba(37, 211, 102, .3); border-radius: 22px; padding: clamp(24px, 4vw, 40px); }
.chiusura h2 { font-size: clamp(1.6rem, 3.8vw, 2.4rem); text-wrap: balance; }
.chiusura p { color: var(--testo); max-width: 60ch; }

/* ---------- Barra in basso sul telefono ---------- */
.barra-cta { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; display: flex; align-items: center; justify-content: center; min-height: 56px; margin: 0 max(12px, env(safe-area-inset-left, 0px)) calc(12px + env(safe-area-inset-bottom, 0px)) max(12px, env(safe-area-inset-right, 0px)); border-radius: 99px; background: var(--accento); color: var(--notte); font-weight: 600; text-decoration: none; box-shadow: 0 16px 40px -10px rgba(11, 11, 16, .9); transform: translateY(160%); transition: transform .4s cubic-bezier(.2,.8,.2,1); }
.barra-cta.visibile { transform: none; }
@media (min-width: 900px) { .barra-cta { display: none; } }

@media (prefers-reduced-motion: reduce) {
  .flusso-vivo__luce, .scrive i, .copertina { animation: none; }
  .reparto, .copertina, .barra-cta { transition: none; }
}

html:not(.ridotto) { scroll-behavior: smooth; }

.guida__pdf { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin-top: 28px; }
.guida__pdf span { color: var(--tenue); font-size: .9rem; }
.guida__pdf-link { color: var(--accento); font-weight: 600; font-size: .95rem; }

/* Telefonata */
.demo--telefono { display: flex; flex-direction: column; gap: 12px; background: linear-gradient(180deg, #15121F, var(--notte) 55%); }
.tel__testa { display: grid; justify-items: center; text-align: center; gap: 2px; padding: 6px 0 12px; border-bottom: 1px solid rgba(143, 117, 255, .15); }
.tel__stato { font-size: .72rem; color: var(--wa); letter-spacing: .04em; }
.tel__testa b { color: #fff; font-size: 1rem; }
.tel__testa small { color: var(--tenue); font-size: .76rem; }
.tel__onda { display: flex; align-items: center; gap: 4px; height: 30px; margin-top: 8px; }
.tel__onda i { width: 4px; height: 30%; border-radius: 4px; background: var(--accento); }
.js:not(.ridotto) .tel__onda i { animation: onda 1.1s ease-in-out infinite; }
.tel__onda i:nth-child(3n) { animation-delay: .2s; }
.tel__onda i:nth-child(3n+1) { animation-delay: .45s; }
.tel__onda i:nth-child(4n) { animation-delay: .7s; }
@keyframes onda { 50% { height: 100%; } }
.tel__righe { display: grid; gap: 8px; }
.tel__riga { padding: 8px 12px; border-radius: 12px; background: rgba(27, 23, 48, .6); border: 1px solid rgba(143, 117, 255, .12); color: var(--testo); line-height: 1.45; }
.tel__riga b { display: block; font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--tenue); font-weight: 600; }
.tel__riga--ai { background: rgba(143, 117, 255, .12); border-color: rgba(143, 117, 255, .3); }
.tel__riga--ai b { color: var(--accento); }
.tel__evento { margin-top: auto; }
@media (prefers-reduced-motion: reduce) { .tel__onda i { animation: none; } }