/* ─────────────────────────────────────────────────────────────────────────
   PREVENTIVO INTERATTIVO — il modello della pagina (P3, 24/10/2026)
   Viene dal mockup v3 adottato il 21/10 (spec/mockup/index.html): stesse
   misure, stessi colori, stesso movimento. Cambia ciò che il mockup aveva
   fisso e i dati veri non hanno: il numero di gradini, tappe, condizioni e
   opzioni lo decide il file di dati, e le slide le costruisce pagina.js.
   Palette SIAMONOI, ognuno col suo ruolo:
     --nero      #050505  fondo
     --sup       #0E1010  superficie di schede e campi
     --sup2      #161818  superficie più alta
     --linea     #2A2D2D  divisori
     --fungo     #A8A3A3  didascalie (Mooshroom)
     --cielo     #C0C4C2  testo secondario (Sky)
     --petrolio  #219D96  superfici importanti: la consigliata, l'ultimo
                          gradino, la pagina finale, la radice dello schema
     --diamante  #2ADED5  ciò che va notato: numeri, stato attivo
     --sfumatura petrolio → diamante, 135°: SOLO la parola chiave del titolo
                 (l'<em> dei dati) e l'azione principale
   Carattere: Montserrat, servito da noi (la CSP non carica niente da fuori).
   DIVIETI: vetro, ombre decorative, emoji, foto stock, testo che si scrive
   da solo, numeri che contano da soli.
   ───────────────────────────────────────────────────────────────────────── */
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 300; font-display: swap; src: url("font/montserrat-latin-300-normal.woff2") format("woff2"); }
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 400; font-display: swap; src: url("font/montserrat-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 600; font-display: swap; src: url("font/montserrat-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 700; font-display: swap; src: url("font/montserrat-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 800; font-display: swap; src: url("font/montserrat-latin-800-normal.woff2") format("woff2"); }

:root {
  --nero: #050505; --sup: #0E1010; --sup2: #161818; --linea: #2A2D2D;
  --fungo: #A8A3A3; --cielo: #C0C4C2; --bianco: #FFFFFF;
  --petrolio: #219D96; --diamante: #2ADED5; --errore: #FF6B5E;
  --sfumatura: linear-gradient(135deg, #219D96 0%, #2ADED5 100%);
  --lato: clamp(16px, 3vw, 76px);
  --r: 12px;
  --ease: cubic-bezier(.2, .7, .2, 1);
  /* in basso almeno 88 px: il tondo del presentatore occupa gli ultimi 84 (misurato a 1366×657 il 24/10) */
  --pt: clamp(80px, 13vh, 100px); --pb: clamp(88px, 12vh, 96px);
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
.solo-lettori { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
html, body { height: 100%; }
body { margin: 0; overflow: hidden; background: var(--nero); color: var(--bianco); font: 300 clamp(16px, 1vw, 20px)/1.6 "Montserrat", system-ui, sans-serif; }
a { color: inherit; }
img { display: block; max-width: 100%; }
p, h1, h2, h3, ol, ul, figure { margin: 0; }
ol, ul { padding: 0; list-style: none; }
h1, h2, h3 { font-weight: 800; }
button, input { font: inherit; color: inherit; }
/* la parola chiave dei titoli: nei dati è un <em> */
h1 em, h2 em, em.chiave { font-style: normal; background: var(--sfumatura); -webkit-background-clip: text; background-clip: text; color: transparent; }
.diamante { color: var(--diamante); }
strong { font-weight: 600; color: var(--bianco); }

/* in attesa dei dati, e quando il link non porta a niente */
.carico { position: fixed; inset: 0; display: grid; place-content: center; gap: 18px; justify-items: center; color: var(--cielo); font-size: 15px; }
.carico img { height: 30px; width: auto; }

/* barra, avanzamento, pillola, presentatore: restano fermi fra le slide */
.barra { position: fixed; inset: 0 0 auto 0; z-index: 30; display: flex; align-items: center; gap: 20px; height: 76px; padding-inline: var(--lato); background: rgba(5,5,5,.9); view-transition-name: barra; }
html[data-slide="firmato"] .barra { background: transparent; }
html[data-slide="firmato"] .barra img { filter: brightness(0); }
html[data-slide="firmato"] .barra .per, html[data-slide="firmato"] .barra .per b { color: var(--nero); }
.barra img { height: 30px; width: auto; }
.barra .per { margin-left: auto; font-size: 13px; color: var(--cielo); text-align: right; }
.barra .per b { color: var(--bianco); font-weight: 600; }
.barra .per .scaduto { color: var(--errore); font-weight: 600; }
.avanzamento { position: fixed; z-index: 31; inset: 0 0 auto 0; height: 3px; background: var(--sfumatura); transform-origin: left; transform: scaleX(0); transition: transform .6s var(--ease); view-transition-name: avanzamento; }
.pillola { position: fixed; z-index: 30; left: 50%; bottom: 20px; translate: -50% 0; display: flex; align-items: center; gap: 4px; padding: 5px; border-radius: 999px; background: var(--sup2); font-size: 14px; font-weight: 600; view-transition-name: pillola; }
.pillola button { width: 40px; height: 40px; border: 0; border-radius: 50%; background: transparent; color: var(--cielo); cursor: pointer; font-size: 18px; }
.pillola button:hover { background: var(--linea); color: var(--bianco); }
.pillola button:disabled { opacity: .3; cursor: default; background: transparent; }
.pillola .dove { padding: 0 14px; white-space: nowrap; color: var(--cielo); min-width: 230px; text-align: center; }
.pillola .dove b { color: var(--bianco); margin-right: 10px; font-variant-numeric: tabular-nums; }
.presentatore { position: fixed; z-index: 30; right: var(--lato); bottom: 20px; display: flex; view-transition-name: presentatore; }
.presentatore span { position: relative; width: 64px; height: 64px; border-radius: 50%; overflow: hidden; background: var(--petrolio); outline: 3px solid var(--nero); }
/* la sovrapposizione vale solo con tutti e due: da solo Giuseppe è comunque il secondo nel codice, e veniva spinto a sinistra */
html[data-chi="entrambi"] .presentatore span + span { margin-left: -12px; }
/* dentro il tondo c'è tutta la persona in piccolo, dalla testa alla vita: è lei che entra lì dentro col morphing */
.presentatore img { position: absolute; left: 50%; top: 10%; height: 125%; width: auto; max-width: none; translate: -50% 0; }
html[data-slide="apertura"] .presentatore, html[data-slide="segue"] .presentatore, html[data-slide="firmato"] .presentatore { display: none; }
/* chi compare: tech → Calogero, grafica → Giuseppe, tutti e due (dal campo «firmano» dei dati) */
html[data-chi="calogero"] [data-per]:not([data-per~="calogero"]),
html[data-chi="giuseppe"] [data-per]:not([data-per~="giuseppe"]),
html[data-chi="entrambi"] [data-per]:not([data-per~="entrambi"]) { display: none !important; }

/* il mazzo di slide */
.deck { position: fixed; inset: 0; }
.slide { position: absolute; inset: 0; display: none; flex-direction: column; justify-content: center; padding: var(--pt) var(--lato) var(--pb); overflow-y: auto; outline: none; }
.slide.attiva { display: flex; }
.occhiello { font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--diamante); margin-bottom: clamp(12px, 2.6vh, 22px); }
h2 { font-size: clamp(28px, min(4.2vw, 7.4vh), 100px); line-height: 1.02; letter-spacing: -.035em; max-width: 18ch; }
h3 { font-size: clamp(20px, 1.5vw, 30px); font-weight: 700; line-height: 1.2; letter-spacing: -.01em; }
h2.compatto { font-size: clamp(26px, min(3.4vw, 6vh), 80px); }
h2.largo { max-width: none; }
/* un titolo lungo (più di 60 caratteri) scende di una misura, sennò da solo riempie la slide */
h2.lungo { font-size: clamp(24px, min(3vw, 5.4vh), 64px); max-width: 26ch; }
.sotto { color: var(--cielo); max-width: 62ch; margin-top: clamp(12px, 3vh, 24px); }
.onesto { margin-top: clamp(14px, 3.4vh, 28px); color: var(--fungo); font-size: 15px; max-width: 70ch; }
/* condizioni: a vista titolo e valore, il testo intero nel pannello (lo stesso del PDF firmato) */
.intero { align-self: flex-start; margin-top: clamp(12px, 2.4vh, 20px); padding: 0; border: 0; background: none; color: var(--diamante); font-size: 15px; font-weight: 600; text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }
dialog.intere { color-scheme: dark; width: min(760px, calc(100vw - 32px)); max-width: none; max-height: calc(100dvh - 48px); padding: clamp(20px, 3vw, 36px); border: 0; border-radius: var(--r); background: var(--sup2); color: var(--bianco); overflow-y: auto; }
dialog.intere::backdrop { background: rgba(5,5,5,.82); }
.intere .testa { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 18px; }
.intere h2 { font-size: clamp(24px, 2.4vw, 36px); max-width: none; }
.intere .chiudi { flex: none; width: 40px; height: 40px; border: 0; border-radius: 50%; background: var(--linea); color: var(--bianco); font-size: 20px; cursor: pointer; }
.intere ol { display: grid; gap: 14px; }
.intere li { padding-bottom: 14px; border-bottom: 1px solid var(--linea); }
.intere li:last-child { padding-bottom: 0; border-bottom: 0; }
.intere h3 { font-size: 17px; }
.intere p, .intere ul { margin-top: 4px; color: var(--cielo); font-size: 15px; line-height: 1.55; }
.intere ul li { padding: 0; border: 0; }
.intere ul li::before { content: "— "; color: var(--fungo); }
.btn { display: inline-flex; align-items: center; gap: 10px; border: 0; cursor: pointer; font-weight: 700; font-size: 15px; border-radius: 999px; padding: 15px 26px; text-decoration: none; transition: filter .3s var(--ease), background .3s var(--ease); }
.btn-primario { background: var(--sfumatura); color: var(--nero); }
.btn-primario:hover { filter: brightness(1.08); }
.btn-primario:disabled { filter: grayscale(.6) brightness(.7); cursor: progress; }
.btn-secondario { background: var(--sup2); color: var(--bianco); }
.btn-secondario:hover { background: var(--linea); }
.btn:focus-visible, input:focus-visible, .opzione:focus-within, .tab:focus-visible { outline: 2px solid var(--diamante); outline-offset: 3px; }

/* passaggio fra le slide: orizzontale, con morphing degli elementi che tornano */
@keyframes esci-sx { to { transform: translateX(-10%); opacity: 0; } }
@keyframes entra-dx { from { transform: translateX(10%); opacity: 0; } }
@keyframes esci-dx { to { transform: translateX(10%); opacity: 0; } }
@keyframes entra-sx { from { transform: translateX(-10%); opacity: 0; } }
@keyframes svanisce { to { opacity: 0; } }
@keyframes appare { from { opacity: 0; } }
::view-transition-old(root) { animation: .5s var(--ease) both esci-sx; }
::view-transition-new(root) { animation: .5s var(--ease) both entra-dx; }
html.indietro::view-transition-old(root) { animation-name: esci-dx; }
html.indietro::view-transition-new(root) { animation-name: entra-sx; }
::view-transition-group(*) { animation-duration: .75s; animation-timing-function: var(--ease); }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root), html.indietro::view-transition-old(root) { animation: .25s linear both svanisce; }
  ::view-transition-new(root), html.indietro::view-transition-new(root) { animation: .25s linear both appare; }
  ::view-transition-group(*) { animation-duration: .25s; }
}
/* entrate dentro la slide, dopo il passaggio */
html.js .slide [data-b] { opacity: 0; transition: opacity .6s var(--ease), translate .6s var(--ease), scale .6s var(--ease); transition-delay: calc(var(--i, 0) * 90ms); }
@media (prefers-reduced-motion: no-preference) { html.js .slide [data-b] { translate: 0 26px; } }
html.js .slide.in [data-b] { opacity: 1; translate: 0 0; }
@media (prefers-reduced-motion: no-preference) { html.js .slide .gradino[data-b] { translate: 0 70px; transition-duration: .7s; transition-delay: calc(var(--i, 0) * 160ms); } html.js .slide.in .gradino[data-b] { translate: 0 0; } }

/* apertura: il ritratto scontornato, a braccia conserte */
.apertura { display: grid; grid-template-columns: 1.35fr 1fr; gap: clamp(24px, 3vw, 72px); align-items: center; height: 100%; }
.apertura h1 { font-size: clamp(34px, min(5vw, 9vh), 120px); line-height: .98; letter-spacing: -.045em; }
.apertura .per-chi { margin-top: 36px; display: flex; flex-wrap: wrap; gap: 8px 32px; font-size: 15px; color: var(--cielo); }
.apertura .per-chi b { color: var(--bianco); font-weight: 600; }
.palco { position: relative; align-self: end; justify-self: center; height: calc(100svh - var(--pt)); margin-bottom: calc(-1 * var(--pb)); display: flex; align-items: flex-end; }
.palco::before { content: ""; position: absolute; left: 50%; bottom: 9%; height: 80%; aspect-ratio: 1; translate: -50% 0; border-radius: 50%; background: var(--petrolio); }
/* Giuseppe ha la felpa petrolio: il suo disco è turchese, l'inverso di Calogero */
html[data-chi="giuseppe"] .palco::before { background: var(--diamante); }
.ritratto-grande { position: relative; display: flex; align-items: flex-end; height: 100%; view-transition-name: presentatore; }
.ritratto-grande img { height: 100%; width: auto; object-fit: contain; }
html[data-chi="entrambi"] .ritratto-grande img + img { margin-left: -14%; }
html[data-chi="entrambi"] .ritratto-grande img { height: 88%; }
/* tutti e due in apertura: la coppia si misura sulla larghezza del palco oltre che sull'altezza, sennò Giuseppe esce dal bordo destro */
@media (min-width: 901px) {
  html[data-chi="entrambi"] .apertura { grid-template-columns: 1.1fr 1fr; }
  html[data-chi="entrambi"] .apertura .palco { --h: min(88cqh, 93cqw); justify-self: stretch; justify-content: center; container-type: size; }
  html[data-chi="entrambi"] .apertura .palco::before { height: calc(var(--h) * .85); }
  html[data-chi="entrambi"] .apertura .ritratto-grande img { height: var(--h); }
  html[data-chi="entrambi"] .apertura .ritratto-grande img + img { margin-left: calc(var(--h) * -.27); }
  /* «chi ti segue»: stessa sovrapposizione (14% della coppia = 0,187 dell'altezza), in misura fissa */
  html[data-chi="entrambi"] .segue .ritratto-grande img + img { margin-left: calc((100svh - var(--pt) - 20px) * .88 * -.187); }
  /* la targhetta va sulle due figure, in basso al centro: a sinistra finiva sul testo (1366×657) */
  html[data-chi="entrambi"] .apertura .targhetta { left: 0; right: 0; bottom: 7%; width: max-content; margin-inline: auto; }
}
.targhetta { position: absolute; right: 96%; bottom: 30%; z-index: 2; white-space: nowrap; background: var(--nero); border-radius: 10px; padding: 8px 14px; font-size: 13px; font-weight: 600; }
.targhetta > span { display: block; }
.targhetta span span { display: block; color: var(--diamante); font-weight: 400; }

/* fatti, misure: righe numerate */
.righe { margin-top: clamp(22px, 5vh, 44px); display: grid; grid-template-columns: repeat(var(--cols, 3), 1fr); gap: 12px; }
.riga { background: var(--sup); border-radius: var(--r); padding: clamp(18px, 3.4vh, 28px); }
.riga .n { font-size: clamp(28px, 2.4vw, 52px); font-weight: 800; letter-spacing: -.03em; line-height: 1; color: var(--diamante); }
.riga .n.parola { font-size: 13px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.riga h3 { margin: clamp(8px, 1.8vh, 16px) 0 clamp(6px, 1.2vh, 10px); }
.riga p { color: var(--cielo); font-size: 16px; }

/* obiettivi: tre risultati */
.tre { margin-top: clamp(20px, 5vh, 40px); display: grid; grid-template-columns: repeat(var(--cols, 3), 1fr); gap: 12px; }
.tre > div { border-top: 3px solid var(--linea); padding-top: 24px; }
.tre > div:nth-child(2) { border-top-color: var(--petrolio); }
.tre b { display: block; font-size: clamp(36px, 4.6vw, 110px); font-weight: 800; line-height: 1; letter-spacing: -.04em; }
/* titoli di più parole: una misura sotto, sennò vanno a capo tre volte */
.tre.lunghi b { font-size: clamp(22px, 2vw, 44px); line-height: 1.1; letter-spacing: -.02em; }
.tre p { margin-top: 16px; color: var(--cielo); max-width: 34ch; }
.tre.lunghi p { font-size: clamp(14px, .95vw, 18px); }

/* la scelta: che tipo di lavoro e perché */
.scelta-box { margin-top: clamp(18px, 4vh, 36px); background: var(--sup); border-radius: var(--r); padding: clamp(18px, 3.4vh, 32px); max-width: 980px; }
.scelta-box .etichetta { font-size: 13px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--diamante); }
.scelta-box h3 { margin-top: 10px; font-size: clamp(20px, 1.8vw, 34px); }
.scelta-box p { margin-top: 10px; color: var(--cielo); font-size: clamp(15px, 1vw, 18px); }

/* lo schema delle pagine */
.schema-wrap { display: grid; grid-template-columns: .8fr 1.6fr; gap: clamp(24px, 4vw, 96px); align-items: center; }
.albero { view-transition-name: pagine; }
.radice { width: max-content; max-width: 100%; margin: 0 auto; background: var(--petrolio); color: var(--nero); border-radius: var(--r); padding: 16px 28px; text-align: center; font-weight: 800; font-size: clamp(18px, 1.4vw, 26px); }
.radice span { display: block; font-size: 13px; font-weight: 600; }
.rami { position: relative; margin-top: 44px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 34px 12px; }
.rami::before { content: ""; position: absolute; left: 50%; top: -44px; width: 2px; height: 22px; background: var(--diamante); translate: -50% 0; }
.rami::after { content: ""; position: absolute; left: 16.6%; right: 16.6%; top: -22px; height: 2px; background: var(--diamante); }
.ramo { position: relative; background: var(--sup); border-radius: var(--r); padding: 16px 18px; }
.ramo:nth-child(-n+3)::before { content: ""; position: absolute; left: 50%; top: -22px; width: 2px; height: 22px; background: var(--diamante); }
.ramo b { display: block; font-weight: 700; font-size: clamp(16px, 1.1vw, 21px); }
.ramo span { display: block; margin-top: 4px; font-size: 14px; color: var(--cielo); line-height: 1.4; }

/* in un numero */
.numero { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 clamp(24px, 4vw, 96px); }
.numero > div { display: flex; align-items: baseline; gap: 14px; }
.numero b { font-size: clamp(110px, 19vw, 420px); font-weight: 800; line-height: .85; letter-spacing: -.06em; background: var(--sfumatura); -webkit-background-clip: text; background-clip: text; color: transparent; }
.numero span { font-size: clamp(22px, 2.4vw, 56px); font-weight: 400; color: var(--cielo); }
.numero .pagine { view-transition-name: pagine; }
.numero-coda { margin-top: 32px; font-size: clamp(24px, 2.6vw, 62px); font-weight: 400; letter-spacing: -.015em; max-width: 30ch; }

/* il metodo a gradini → il calendario. --k è la posizione del gradino, --n quanti sono */
.gradini { margin-top: clamp(22px, 5vh, 44px); display: grid; grid-template-columns: repeat(var(--n, 5), 1fr); gap: 12px; align-items: end; }
.gradino { background: var(--sup); border-radius: var(--r); padding: clamp(16px, 3vh, 24px); display: flex; flex-direction: column; min-height: calc(max(230px, 31vh) + var(--k, 0) * max(25px, 4.5vh)); }
.gradino:last-child { background: var(--petrolio); color: var(--nero); }
.gradino .n { font-size: clamp(36px, 3vw, 64px); font-weight: 800; letter-spacing: -.04em; line-height: 1; color: var(--diamante); }
.gradino:last-child .n { color: var(--nero); }
.gradino h3 { margin-top: auto; padding-top: clamp(12px, 3vh, 24px); }
.gradino p { margin-top: 8px; font-size: 15px; color: var(--cielo); }
.gradino:last-child p, .gradino:last-child strong { color: var(--nero); }
.gradino .chi { margin-top: 12px; font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--fungo); }
.gradino:last-child .chi { color: var(--nero); }
.calendario { position: relative; margin-top: clamp(32px, 8vh, 64px); display: grid; grid-template-columns: repeat(var(--n, 4), 1fr); gap: 12px; }
.calendario .linea { position: absolute; left: 0; right: 0; top: 9px; height: 3px; background: var(--sfumatura); transform-origin: left; }
html.js .slide .calendario .linea { transform: scaleX(0); transition: transform 1.1s var(--ease) .1s; }
html.js .slide.in .calendario .linea { transform: scaleX(1); }
.tappa { position: relative; padding-top: 40px; }
.tappa::before { content: ""; position: absolute; left: 0; top: 0; width: 21px; height: 21px; border-radius: 50%; background: var(--sup2); border: 3px solid var(--petrolio); }
.tappa:last-child::before { background: var(--diamante); border-color: var(--diamante); }
.tappa time { display: block; font-size: clamp(26px, 2.4vw, 56px); font-weight: 800; letter-spacing: -.03em; line-height: 1; }
.tappa:last-child time { color: var(--diamante); }
.tappa h3 { margin-top: 12px; font-size: clamp(17px, 1.2vw, 24px); }
.tappa p { margin-top: 6px; color: var(--cielo); font-size: 15px; max-width: 26ch; }

/* cosa ottieni, e il lavoro di ogni livello */
.lista { margin-top: clamp(12px, 3.4vh, 32px); font-size: clamp(15px, min(1vw, 2.3vh), 20px); border-top: 1px solid var(--linea); }
.lista li { display: grid; grid-template-columns: 56px minmax(220px, 1fr) 1.4fr; gap: 20px; align-items: baseline; padding: clamp(6px, 1.7vh, 16px) 0; border-bottom: 1px solid var(--linea); }
.lista i { font-style: normal; font-weight: 800; color: var(--diamante); }
.lista b { font-size: clamp(18px, 1.4vw, 28px); font-weight: 700; letter-spacing: -.01em; }
.lista span { color: var(--cielo); font-size: .92em; line-height: 1.5; }
.lista .omaggio b::after { content: "senza costi"; margin-left: 12px; vertical-align: middle; font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--diamante); }

/* chi ti segue */
.segue { display: grid; grid-template-columns: auto 1fr; gap: clamp(56px, 8vw, 180px); align-items: end; height: 100%; }
.segue .palco { height: calc(100svh - var(--pt) - 20px); }
.segue .testo { align-self: center; padding-left: clamp(8px, 2vw, 48px); }
.segue .ruolo { margin-top: 20px; font-size: 15px; color: var(--fungo); }
.segue .ruolo span { display: block; }
.segue .ruolo b { color: var(--diamante); font-weight: 600; }

/* condizioni: --cols colonne; .largo prende tutta la riga (liste e testi interi) */
.condizioni { margin-top: clamp(14px, 3.4vh, 32px); display: grid; grid-template-columns: repeat(var(--cols, 4), 1fr); gap: 10px; }
.cond { background: var(--sup); border-radius: var(--r); padding: clamp(12px, 2.5vh, 20px) clamp(14px, 1.6vw, 20px); }
.cond h3 { font-size: clamp(16px, 1.15vw, 21px); }
.cond p, .cond li { margin-top: clamp(4px, 1vh, 8px); font-size: clamp(13px, 2.1vh, 14px); color: var(--cielo); line-height: 1.45; }
.cond li { margin-top: 4px; }
.cond .grande { display: block; margin-top: clamp(4px, 1.2vh, 10px); font-size: clamp(22px, min(2.4vw, 5vh), 48px); font-weight: 800; letter-spacing: -.03em; color: var(--diamante); line-height: 1; }

/* investimento */
.opzioni { margin-top: clamp(18px, 4vh, 32px); display: grid; grid-template-columns: 1fr 1.08fr 1fr; gap: 12px; align-items: stretch; }
.opzioni.n2 { grid-template-columns: 1fr 1fr; max-width: 980px; }
.opzioni.n1 { grid-template-columns: minmax(0, 560px); }
.opzione { position: relative; display: flex; flex-direction: column; background: var(--sup); border-radius: var(--r); padding: clamp(16px, 3vh, 24px); cursor: pointer; outline: 2px solid transparent; outline-offset: -2px; transition: background .3s var(--ease), outline-color .3s var(--ease); }
.opzione:hover { background: var(--sup2); }
.opzione:has(input:checked) { background: var(--sup2); outline-color: var(--diamante); }
.opzioni.n1 .opzione { cursor: default; }
.opzione input { position: absolute; opacity: 0; pointer-events: none; }
.opzione .flag { position: absolute; top: -12px; left: 24px; background: var(--sfumatura); color: var(--nero); font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; border-radius: 999px; padding: 4px 12px; }
.opzione h3 { font-size: clamp(24px, 2vw, 40px); font-weight: 800; letter-spacing: -.02em; }
.opzione .per { margin-top: 8px; color: var(--cielo); font-size: 15px; }
.opzione ul { margin: clamp(8px, 1.8vh, 14px) 0; font-size: clamp(13px, 2.2vh, 15px); color: var(--cielo); }
.opzione li { padding: clamp(3px, .6vh, 5px) 0; border-top: 1px solid var(--linea); }
.opzione .pieno { margin-top: auto; font-size: 15px; color: var(--fungo); }
.opzione .pieno s { text-decoration-thickness: 2px; }
.opzione .prezzo { margin-top: auto; width: max-content; font-size: clamp(26px, min(2.8vw, 6vh), 60px); font-weight: 800; letter-spacing: -.03em; line-height: 1; }
.opzione .pieno + .prezzo { margin-top: 6px; }
.opzione:has(input:checked) .prezzo { color: var(--diamante); view-transition-name: prezzo; }
.opzione .nota-prezzo, .opzione .mese { margin-top: 8px; font-size: 13px; color: var(--fungo); }
.opzione .mese b { color: var(--bianco); font-weight: 600; }
.opzione .scegli { margin-top: clamp(8px, 2vh, 18px); font-size: 13px; font-weight: 600; color: var(--fungo); }
.opzione:has(input:checked) .scegli { color: var(--diamante); }
.opzioni.n1 .scegli { display: none; }
.riepilogo { margin-top: clamp(8px, 2vh, 20px); display: flex; flex-wrap: wrap; gap: 8px 32px; color: var(--cielo); font-size: 15px; }
.riepilogo b { color: var(--bianco); font-weight: 600; }
.valore { margin-top: clamp(10px, 2.2vh, 20px); max-width: 80ch; font-size: 15px; color: var(--cielo); }
.valore b { display: block; font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--diamante); margin-bottom: 4px; }

/* come si paga */
.paga { display: grid; grid-template-columns: auto 1fr; gap: clamp(32px, 5vw, 120px); align-items: center; }
.anello { position: relative; width: clamp(220px, min(28vw, 52vh), 520px); aspect-ratio: 1; }
.anello svg { width: 100%; height: 100%; rotate: -90deg; }
.anello circle { fill: none; stroke-width: 14; }
.anello .base { stroke: var(--sup2); }
.anello .seg { stroke-dasharray: var(--len) 1000; stroke-dashoffset: var(--off); }
html.js .slide .anello .seg { stroke-dasharray: 0 1000; transition: stroke-dasharray .9s var(--ease); transition-delay: calc(.2s + var(--i) * .35s); }
html.js .slide.in .anello .seg { stroke-dasharray: var(--len) 1000; }
.anello .centro { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.anello .centro b { font-size: clamp(56px, 6vw, 140px); font-weight: 800; letter-spacing: -.05em; line-height: .9; color: var(--diamante); }
.anello .centro span { font-size: 15px; color: var(--cielo); }
.totale { display: flex; align-items: baseline; gap: 14px; margin-top: 18px; font-size: 15px; color: var(--cielo); }
.totale b { font-size: clamp(28px, 2.4vw, 52px); font-weight: 800; letter-spacing: -.03em; color: var(--bianco); view-transition-name: prezzo; }
.rate { margin-top: clamp(14px, 3.4vh, 28px); border-top: 1px solid var(--linea); }
.rate li { display: grid; grid-template-columns: 14px 1fr auto; gap: 16px; align-items: baseline; padding: clamp(9px, 2vh, 16px) 0; border-bottom: 1px solid var(--linea); }
.rate i { width: 12px; height: 12px; border-radius: 50%; translate: 0 1px; }
.rate b { font-size: clamp(18px, 1.4vw, 28px); font-weight: 700; }
.rate span { color: var(--cielo); font-size: 15px; display: block; font-weight: 300; }
.rate .euro { font-size: clamp(20px, 1.6vw, 32px); font-weight: 800; letter-spacing: -.02em; }

/* l'assistenza (canoni) */
.tiers-s { margin-top: clamp(18px, 4vh, 32px); display: grid; grid-template-columns: repeat(var(--cols, 3), 1fr); gap: 12px; }
.tier-s { display: flex; flex-direction: column; background: var(--sup); border-radius: var(--r); padding: clamp(16px, 3vh, 24px); }
.tier-s h3 { font-size: clamp(20px, 1.6vw, 32px); }
.tier-s p { margin-top: 8px; color: var(--cielo); font-size: clamp(13px, 2.1vh, 15px); line-height: 1.5; }
.tier-s .mese { margin-top: auto; padding-top: clamp(10px, 2vh, 18px); font-size: clamp(24px, min(2.4vw, 5vh), 48px); font-weight: 800; letter-spacing: -.03em; line-height: 1; color: var(--diamante); }
.tier-s .mese small { font-size: 14px; font-weight: 400; color: var(--cielo); letter-spacing: 0; }
.tier-s .anno { margin-top: 6px; font-size: 13px; color: var(--fungo); }

/* accetta e firma */
.accetta { display: grid; grid-template-columns: 1fr 1.25fr; gap: clamp(32px, 5vw, 120px); align-items: start; }
.scelta { background: var(--sup); border-radius: var(--r); padding: clamp(12px, 2.4vh, 24px) 28px; margin-top: clamp(16px, 4vh, 32px); }
.scelta .riga2 { display: flex; justify-content: space-between; gap: 16px; padding: clamp(6px, 1.2vh, 10px) 0; border-top: 1px solid var(--linea); font-size: 15px; color: var(--cielo); }
.scelta .riga2:first-child { border-top: 0; }
.scelta .riga2 b { color: var(--bianco); font-weight: 600; text-align: right; }
.scelta .riga2 b.diamante { color: var(--diamante); }
.passi { display: flex; gap: 6px; margin-bottom: clamp(12px, 3vh, 24px); }
.tab { flex: 1; text-align: left; background: none; border: 0; border-top: 3px solid var(--linea); padding: 10px 0 0; font-size: 13px; font-weight: 600; color: var(--fungo); cursor: pointer; }
.tab:hover { color: var(--bianco); }
.tab[aria-selected="true"] { color: var(--bianco); border-top-color: var(--diamante); }
.tab.fatto { color: var(--cielo); border-top-color: var(--petrolio); }
fieldset.passo { border: 0; padding: 0; margin: 0; min-width: 0; }
fieldset.passo > legend.occhiello { padding: 0; color: var(--fungo); }
.gruppi { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 2.4vw, 40px); }
.gruppo { display: grid; gap: clamp(8px, 1.4vh, 12px); align-content: start; }
.gruppo-titolo { font-size: 13px; font-weight: 700; color: var(--diamante); padding-bottom: 6px; border-bottom: 1px solid var(--linea); }
.aiuto { margin-top: 6px; font-size: 13px; color: var(--fungo); line-height: 1.4; }
.campo label { display: block; font-size: 13px; font-weight: 600; color: var(--cielo); margin-bottom: 4px; }
.campo input { width: 100%; background: var(--sup); border: 0; border-radius: var(--r); padding: clamp(7px, 1.4vh, 11px) 16px; font-size: 16px; font-weight: 400; outline: 2px solid transparent; outline-offset: -2px; }
.campo input[readonly] { color: var(--cielo); }
.campo input:user-invalid { outline-color: var(--errore); }
.errore { display: none; margin-top: 6px; font-size: 13px; color: var(--errore); }
.errore::before { content: "!"; display: inline-grid; place-content: center; width: 16px; height: 16px; margin-right: 6px; border-radius: 50%; background: var(--errore); color: var(--nero); font-weight: 800; font-size: 11px; }
.campo input:user-invalid + .errore { display: block; }
.spunte { display: grid; gap: clamp(6px, 1.2vh, 10px); }
.spunta { display: grid; grid-template-columns: 22px 1fr; gap: 12px; align-items: start; background: var(--sup); border-radius: var(--r); padding: clamp(9px, 1.7vh, 14px) 18px; font-size: clamp(14px, 2.2vh, 15px); line-height: 1.5; color: var(--cielo); cursor: pointer; }
.spunta input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--diamante); }
.spunta b { color: var(--bianco); font-weight: 600; }
.spunta.manca { outline: 2px solid var(--errore); outline-offset: -2px; }
.firma-box { position: relative; background: var(--sup); border-radius: var(--r); height: clamp(120px, 24vh, 190px); touch-action: none; }
.firma-box canvas { width: 100%; height: 100%; display: block; border-radius: var(--r); cursor: crosshair; }
.firma-box .linea-firma { position: absolute; left: 24px; right: 24px; bottom: 44px; height: 1px; background: var(--linea); pointer-events: none; }
.firma-box .vuoto { position: absolute; left: 24px; bottom: 16px; font-size: 13px; color: var(--fungo); pointer-events: none; }
.firma-box.firmata .vuoto { visibility: hidden; }
.firma-box.manca { outline: 2px solid var(--errore); outline-offset: -2px; }
.azioni { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: clamp(10px, 2.4vh, 20px); }
.azioni .piccolo { font-size: 13px; color: var(--fungo); }
.codice { margin-top: 20px; }
.codice input { letter-spacing: .5em; font-weight: 700; font-size: 20px; width: 220px; text-align: center; }
.rifai { position: absolute; top: 12px; right: 12px; border: 0; border-radius: 999px; background: var(--sup2); color: var(--cielo); font-size: 13px; font-weight: 600; padding: 6px 12px; cursor: pointer; }
.rifai:hover { color: var(--bianco); background: var(--linea); }
.stato-codice { margin-top: clamp(10px, 2vh, 16px); font-size: 14px; color: var(--cielo); }
.stato-codice.inviato { color: var(--diamante); }
.stato-codice.errore { display: block; color: var(--errore); }
.stato-codice.errore::before { content: none; }
.conferma { display: flex; align-items: end; gap: 16px; flex-wrap: wrap; margin-top: clamp(8px, 1.6vh, 14px); }
.conferma .codice { margin-top: 0; }
.esito-firma { margin-top: 10px; font-size: 14px; color: var(--cielo); }
.esito-firma.errore { display: block; color: var(--errore); }
.esito-firma.errore::before { content: none; }
.scaduto-box { margin-top: clamp(16px, 4vh, 32px); background: var(--sup); border-radius: var(--r); padding: clamp(16px, 3vh, 28px); color: var(--cielo); }
.scaduto-box b { display: block; color: var(--errore); font-size: clamp(20px, 1.6vw, 30px); font-weight: 800; margin-bottom: 8px; }

/* firmato, e il link riaperto dopo la firma: la pagina tutta petrolio */
.slide.finale { background: var(--petrolio); color: var(--nero); }
.finale .occhiello { color: var(--nero); }
.fatto-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: clamp(32px, 5vw, 120px); align-items: start; }
.finale h2 { color: var(--nero); }
.finale h2 em { background: none; color: var(--nero); }
.finale .sotto { color: rgba(5,5,5,.8); }
.scarico { margin-top: 28px; display: flex; align-items: center; gap: 16px; background: rgba(5,5,5,.12); border-radius: var(--r); padding: 18px 20px; font-size: 15px; }
.scarico b { display: block; font-weight: 700; }
.finale .btn-scuro { background: var(--nero); color: var(--bianco); }
.finale .btn-scuro:disabled { opacity: .6; cursor: progress; }
.finale .piccolo { color: rgba(5,5,5,.75); }
.prossimi { counter-reset: p; border-top: 1px solid rgba(5,5,5,.25); }
.prossimi li { counter-increment: p; display: grid; grid-template-columns: 48px 1fr; gap: 12px; padding: 20px 0; border-bottom: 1px solid rgba(5,5,5,.25); }
.prossimi li::before { content: counter(p, decimal-leading-zero); font-weight: 800; }
.prossimi b { display: block; font-weight: 700; font-size: clamp(17px, 1.3vw, 24px); }
.prossimi span { font-size: 15px; }
html[data-slide="firmato"] .pillola { background: var(--nero); }

/* ─── TELEFONO: la stessa presentazione, una slide per schermo, sfogliata col dito ───
   Ogni slide è ridisegnata per stare in uno schermo senza scorrere: le schede
   diventano righe, le opzioni si aprono una alla volta, cerchio e figure
   rimpiccioliscono, le figure escono dal bordo basso come da desktop.
   Scorrono solo la firma (è un modulo) e, sugli schermi bassi, le condizioni
   (sono il contratto: si leggono intere, niente testo tagliato). */
@media (max-width: 900px) {
  :root { --pt: 70px; --pb: 70px; }
  body { font-size: 15px; line-height: 1.5; }
  .barra { height: 56px; gap: 12px; }
  .barra img { height: 24px; }
  .barra .per { font-size: 11.5px; line-height: 1.3; }
  .barra .per .ref { display: none; }
  .pillola { bottom: 12px; padding: 3px; font-size: 13px; }
  .pillola .dove { min-width: 0; padding: 0 6px; } .pillola .dove b { margin-right: 0; } .pillola .dove span { display: none; }
  .presentatore { bottom: 12px; }
  .presentatore span { width: 46px; height: 46px; outline-width: 2px; }
  html[data-chi="entrambi"] .presentatore span + span { margin-left: -10px; }
  /* il dito in verticale scorre, in orizzontale cambia slide */
  .slide { justify-content: safe center; overflow-x: hidden; touch-action: pan-y; }
  .occhiello { font-size: 11px; margin-bottom: 10px; }
  h2, h2.compatto { font-size: clamp(24px, 6.8vw, 34px); line-height: 1.08; max-width: none; }
  h2.lungo { font-size: clamp(21px, 5.6vw, 28px); }
  h3 { font-size: 16px; }
  .sotto { margin-top: 12px; font-size: 15px; }
  .onesto { margin-top: 12px; font-size: 13px; line-height: 1.5; }
  .btn { padding: 13px 20px; font-size: 14px; }

  /* apertura e chi ti segue: testo sopra, figura che esce dal bordo basso */
  .apertura, .segue { display: flex; flex-direction: column; height: 100%; gap: 0; }
  .apertura h1 { font-size: clamp(28px, 8.4vw, 40px); }
  .apertura .per-chi { margin-top: 14px; flex-direction: column; gap: 2px; font-size: 14px; }
  .segue .testo { order: -1; padding-left: 0; }
  .segue .ruolo { margin-top: 10px; font-size: 13px; }
  .palco, .segue .palco { flex: 1 1 0; min-height: 200px; height: auto; margin: 16px 0 calc(-1 * var(--pb)); align-self: stretch; flex-direction: column; align-items: center; }
  .apertura .palco::before { height: min(calc((100% - 56px) * .8), calc(100vw - 48px)); }
  .ritratto-grande { flex: 1 1 0; min-height: 0; }
  .ritratto-grande img { height: 100%; }
  /* la targhetta fa da didascalia sopra la figura: accanto, su uno schermo stretto, finiva fuori o sul volto */
  .targhetta { position: static; order: -1; align-self: flex-start; margin-bottom: 12px; padding: 6px 12px; font-size: 12px; }
  /* tutti e due: la coppia si misura anche sulla larghezza dello schermo */
  html[data-chi="entrambi"] .ritratto-grande { width: 100%; justify-content: center; container-type: size; }
  html[data-chi="entrambi"] .ritratto-grande img { height: min(100cqh, 87cqw); }
  html[data-chi="entrambi"] .ritratto-grande img + img { margin-left: calc(min(100cqh, 87cqw) * -.27); }
  html[data-chi="entrambi"] .apertura .palco::before { height: min(calc((100% - 56px) * .8), calc((100vw - 32px) * .74)); }
  html[data-chi="entrambi"] .segue .palco::before { height: min(80%, calc((100vw - 32px) * .74)); }

  /* fatti, misure, risultati: righe compatte */
  .righe, .tre { margin-top: 18px; grid-template-columns: 1fr; gap: 8px; }
  .riga { display: grid; grid-template-columns: auto 1fr; column-gap: 12px; align-items: baseline; padding: 12px 14px; }
  .riga .n { font-size: 20px; }
  .riga .n.parola { grid-column: 1 / -1; font-size: 10.5px; margin-bottom: 4px; }
  .riga:has(.parola) { grid-template-columns: 1fr; }
  .riga h3 { margin: 0; font-size: 16px; }
  .riga p { grid-column: 1 / -1; margin-top: 4px; font-size: 14px; line-height: 1.45; }
  .tre > div { padding-top: 12px; }
  .tre b, .tre.lunghi b { font-size: 30px; }
  .tre.lunghi b { font-size: 20px; }
  .tre p, .tre.lunghi p { margin-top: 6px; font-size: 14px; max-width: none; }
  .scelta-box { padding: 14px; }
  .scelta-box h3 { font-size: 18px; }
  .scelta-box p { font-size: 14px; }

  /* le pagine: la radice e i rami su due colonne */
  .schema-wrap { grid-template-columns: 1fr; gap: 18px; }
  .radice { padding: 10px 20px; font-size: 16px; }
  .radice span { font-size: 11.5px; }
  .rami { margin-top: 12px; grid-template-columns: 1fr 1fr; gap: 8px; }
  .rami::before, .rami::after, .ramo::before { display: none; }
  .ramo { padding: 10px 12px; }
  .ramo b { font-size: 15px; }
  .ramo span { font-size: 12.5px; }

  /* il numero */
  .numero-coda { margin-top: 20px; font-size: 22px; }

  /* metodo: i gradini girati, uno più lungo dell'altro */
  .gradini { margin-top: 18px; grid-template-columns: 1fr; gap: 6px; justify-items: start; }
  .gradino { min-height: 0; width: calc(100% - (var(--n, 5) - 1 - var(--k, 0)) * 10%); display: grid; grid-template-columns: auto 1fr auto; column-gap: 10px; align-items: baseline; padding: 10px 14px; }
  .gradino .n { font-size: 18px; }
  .gradino h3 { margin: 0; padding: 0; font-size: 15px; }
  .gradino .chi { grid-row: 1; grid-column: 3; margin: 0; font-size: 10px; }
  .gradino p { grid-column: 1 / -1; margin-top: 2px; font-size: 13px; line-height: 1.4; }

  /* calendario: la linea scende invece di andare a destra */
  .calendario { margin-top: 20px; grid-template-columns: 1fr; gap: 16px; padding-left: 34px; }
  .calendario .linea { left: 9px; right: auto; top: 10px; bottom: 10px; width: 3px; height: auto; transform-origin: top; }
  html.js .slide .calendario .linea { transform: scaleY(0); }
  html.js .slide.in .calendario .linea { transform: scaleY(1); }
  .tappa { padding-top: 0; display: grid; grid-template-columns: 84px 1fr; column-gap: 10px; align-items: baseline; }
  .tappa::before { left: -34px; top: 1px; }
  .tappa time { grid-row: span 2; font-size: 21px; white-space: nowrap; }
  .tappa h3 { margin: 0; font-size: 15px; }
  .tappa p { grid-column: 2; margin-top: 2px; font-size: 13px; }

  /* cosa ottieni */
  .lista { margin-top: 14px; font-size: 14px; }
  .lista li { grid-template-columns: 28px 1fr; gap: 2px 8px; padding: 9px 0; }
  .lista li span { grid-column: 2; font-size: 13.5px; line-height: 1.45; }
  .lista b { font-size: 16px; }

  /* condizioni: due colonne, tutto il testo */
  .condizioni { margin-top: 12px; grid-template-columns: 1fr 1fr; gap: 5px; }
  .cond.largo { grid-column: 1 / -1; }
  .cond { padding: 8px 11px; }
  .cond h3 { font-size: 14px; line-height: 1.25; }
  .cond .grande { margin-top: 3px; font-size: 19px; }
  .cond p, .cond li { margin-top: 3px; font-size: 12px; line-height: 1.4; }
  .cond li { margin-top: 2px; }

  /* investimento: si apre solo l'opzione scelta, le altre restano una riga */
  .opzioni, .opzioni.n2, .opzioni.n1 { margin-top: 16px; grid-template-columns: 1fr; gap: 8px; }
  .opzione { display: grid; grid-template-columns: 1fr auto; column-gap: 12px; align-items: baseline; padding: 12px 14px; }
  .opzione h3 { grid-column: 1; font-size: 19px; }
  .opzione .prezzo { grid-column: 2; grid-row: 1; margin: 0; font-size: 19px; }
  .opzione:has(input:checked) .prezzo { font-size: 24px; }
  .opzione .per, .opzione ul, .opzione .pieno, .opzione .nota-prezzo, .opzione .mese, .opzione .scegli { grid-column: 1 / -1; }
  .opzione .pieno { order: 3; margin-top: 4px; }
  .opzione .per { margin-top: 4px; font-size: 14px; }
  .opzione ul { margin: 8px 0 0; font-size: 13.5px; }
  .opzione .scegli { margin-top: 2px; font-size: 12px; }
  .opzione:not(:has(input:checked)) :is(.per, ul, .nota-prezzo, .mese), .opzione:has(input:checked) .scegli { display: none; }
  .opzione .flag { top: -9px; left: 14px; padding: 2px 9px; font-size: 10px; }
  .riepilogo { margin-top: 12px; flex-direction: column; gap: 2px; font-size: 14px; }
  .valore { font-size: 13.5px; }

  /* come si paga: il cerchio piccolo accanto al titolo */
  .paga { display: block; }
  .anello { float: right; width: 120px; margin: 0 0 8px 12px; }
  .anello .centro b { font-size: 30px; }
  .anello .centro span { font-size: 10.5px; }
  .totale { margin-top: 10px; font-size: 14px; }
  .totale b { font-size: 26px; }
  .rate { clear: both; margin-top: 14px; }
  .rate li { grid-template-columns: 12px 1fr auto; gap: 12px; padding: 10px 0; }
  .rate b { font-size: 16px; }
  .rate span { font-size: 13.5px; }
  .rate .euro { font-size: 18px; }

  /* assistenza: righe */
  .tiers-s { grid-template-columns: 1fr; gap: 8px; margin-top: 14px; }
  .tier-s { padding: 12px 14px; }
  .tier-s h3 { font-size: 17px; }
  .tier-s p { font-size: 13px; }
  .tier-s .mese { font-size: 22px; padding-top: 8px; }

  /* firma: il riepilogo in caselle, il modulo scorre */
  .accetta { grid-template-columns: 1fr; gap: 16px; }
  .scelta { display: grid; grid-template-columns: 1fr 1fr; column-gap: 14px; margin-top: 12px; padding: 6px 14px; }
  .scelta .riga2 { flex-direction: column; gap: 0; padding: 6px 0; border-top: 0; font-size: 12px; }
  .scelta .riga2 b { font-size: 15px; text-align: left; }
  .passi { margin-bottom: 14px; }
  .tab { font-size: 11.5px; padding-top: 8px; }
  .gruppi { grid-template-columns: 1fr; gap: 16px; }
  .gruppo { gap: 8px; }
  .campo label { font-size: 12px; margin-bottom: 3px; }
  .campo input { padding: 10px 12px; }
  .aiuto { font-size: 12px; }
  .spunta { gap: 10px; padding: 10px 12px; font-size: 13.5px; }
  .firma-box { height: 170px; }
  .conferma { flex-direction: column; align-items: stretch; }
  .codice input { width: 100%; }

  /* firmato */
  .fatto-grid { grid-template-columns: 1fr; gap: 22px; }
  .scarico { margin-top: 16px; padding: 12px 14px; font-size: 13.5px; }
  .finale .azioni { margin-top: 16px; }
  .prossimi li { grid-template-columns: 36px 1fr; padding: 10px 0; }
  .prossimi b { font-size: 16px; }
  .prossimi span { font-size: 13.5px; }
}