/* ============================================================
   configuratore.css  —  Stili del configuratore Tesi online
   Importa i token condivisi da ../tokens.css
   S15: scheletro.  S16: scena full-screen + UI galleggiante.
   ============================================================ */

@import url("../tokens.css");

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: var(--font-body);
  color: var(--ink);
  background-color: var(--paper);
  background-image: url("assets/sfondo_configuratore.webp");
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  line-height: 1.6;
  min-height: 100vh;
  padding: var(--space-5) var(--space-4);
}

/* ----- gestione schermate (benvenuto <-> wizard) ----- */
.schermata { display: none; }
.schermata--attiva { display: block; }

/* S16: wizard centrato nella scena quando attivo */
#wizard.schermata--attiva {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 100vh;
}

/* ============================================================
   PANNELLO GALLEGGIANTE (base condivisa: velatura + blur)
   Sfondo protagonista: pannelli molto trasparenti ma leggibili.
   ============================================================ */
.pannello {
  background: rgba(245, 239, 227, 0.62);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(245, 239, 227, 0.55);
  border-radius: var(--radius);
  box-shadow: 0 2px 6px rgba(26,23,20,0.10), 0 12px 30px rgba(26,23,20,0.10);
}

/* ============================================================
   QUADRATO DI BENVENUTO (step 0)
   ============================================================ */
#benvenuto.schermata--attiva {
  min-height: 100vh;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  padding-top: 22vh;
  padding-left: 2vw;
}
.quadrato-benvenuto {
  background: rgba(245, 239, 227, 0.3);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  border: 2px solid transparent;
  border-radius: var(--radius);
  box-shadow: 0 2px 6px rgba(26,23,20,0.10), 0 12px 30px rgba(26,23,20,0.12);
  padding: var(--space-4) var(--space-4);
  width: 520px;
  max-width: 90vw;
  transition: border-color .6s ease, transform .6s cubic-bezier(.2,.8,.2,1), box-shadow .6s ease;
}
.quadrato-benvenuto.in-evidenza {
  border-color: var(--coral);
  transform: translateY(-4px);
  box-shadow: var(--shadow-coral);
}
.qb-testa { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: var(--space-4); }
.qb-num { font-family: var(--font-serif); font-style: italic; font-size: 44px; line-height: .85; color: var(--coral); }
.qb-tag { font-family: var(--font-mono); font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: var(--neutral); padding-top: var(--space-2); }
.qb-icona { margin-bottom: var(--space-3); }
.qb-lente { display: inline-block; width: 22px; height: 22px; border: 2.5px solid var(--ink); border-radius: var(--radius-full); position: relative; }
.qb-lente::after { content: ""; position: absolute; width: 10px; height: 2.5px; background: var(--ink); bottom: -3px; right: -7px; transform: rotate(45deg); }
.qb-titolo { font-family: var(--font-sans); font-weight: 400; font-size: 22px; line-height: 1.05; margin-bottom: var(--space-2); }
.qb-intro { font-size: 13px; color: var(--ink-soft); max-width: 60ch; margin-bottom: var(--space-3); }
.qb-azioni { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.qb-nota { font-family: var(--font-mono); font-size: 12px; color: var(--neutral); }

/* ============================================================
   PULSANTI
   ============================================================ */
.btn { font-family: var(--font-body); font-size: 15px; font-weight: 600; border: none; cursor: pointer; border-radius: var(--radius-pill); padding: 13px 28px; transition: transform .15s ease, opacity .15s ease; }
.btn:active { transform: scale(.98); }
.btn:disabled { opacity: .4; cursor: not-allowed; }
.btn--primario { background: var(--coral); color: var(--paper-light); }
.btn--primario:hover:not(:disabled) { background: var(--coral-deep); }
.btn--ghost { background: transparent; color: var(--ink-soft); border: 1.5px solid var(--neutral-light); }
.btn--ghost:hover:not(:disabled) { border-color: var(--ink-soft); }
.btn--inviato, .btn--inviato:disabled { background: #d1e7dd; color: #0f5132; opacity: 1; cursor: default; }

/* ============================================================
   WIZARD: layout a due colonne (anteprima SX, contenuto DX)
   Lo STEPPER verticale e le frecce arrivano nel passo 2 (CMD 23).
   ============================================================ */
.wizard-layout {
  display: grid;
  grid-template-columns: minmax(0, 420px) minmax(0, 1fr) auto;
  gap: var(--space-5);
  max-width: 1180px;
  margin: 0 auto;
  align-items: start;
}

/* ----- colonna sinistra: ANTEPRIMA VIVA ----- */
.anteprima {
  position: sticky;
  top: var(--space-4);
  background: rgba(245, 239, 227, 0.62);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(245, 239, 227, 0.55);
  border-radius: var(--radius);
  box-shadow: 0 2px 6px rgba(26,23,20,0.10), 0 12px 30px rgba(26,23,20,0.10);
  padding: var(--space-4);
}
.anteprima-mockup { aspect-ratio: 3 / 4; background: rgba(221,211,189,0.85); border-radius: var(--radius); display: flex; align-items: center; justify-content: center; margin-bottom: var(--space-3); }
.anteprima-placeholder { font-family: var(--font-mono); font-size: 12px; letter-spacing: 1px; color: var(--neutral); text-transform: uppercase; }
.anteprima-prezzo { display: flex; justify-content: space-between; align-items: baseline; border-top: 1px solid var(--paper-dark); padding-top: var(--space-3); }
.ap-label { font-family: var(--font-mono); font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: var(--neutral); }
.ap-valore { font-family: var(--font-serif); font-size: 28px; color: var(--coral); }

/* ----- colonna destra: stepper + contenuto ----- */
.stepper { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-5); }
.stepper-voce { font-family: var(--font-mono); font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: var(--neutral-light); padding: 6px 12px; border-radius: var(--radius-pill); border: 1px solid transparent; background: none; cursor: default; }
.stepper-voce.attiva { color: var(--coral); border-color: var(--coral); }
.stepper-voce.completata { color: var(--ink-soft); cursor: pointer; }

.step-contenuto {
  background: rgba(245, 239, 227, 0.42);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  border: 1px solid rgba(245, 239, 227, 0.55);
  border-radius: var(--radius);
  box-shadow: 0 2px 6px rgba(26,23,20,0.10), 0 12px 30px rgba(26,23,20,0.10);
  padding: var(--space-5);
  min-height: 320px;
  margin-bottom: var(--space-4);
}
.step-titolo { font-family: var(--font-sans); font-weight: 400; font-size: 24px; margin-bottom: var(--space-3); }
.step-vuoto { font-family: var(--font-mono); font-size: 15px; color: var(--ink); }

.wizard-nav { display: flex; justify-content: space-between; gap: var(--space-3); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 860px) {
  .wizard-layout { grid-template-columns: 1fr; }
  .anteprima { position: static; }
  body { background-attachment: scroll; }
}

/* ============================================================
   S17 — FEATURE B: frecce di navigazione dentro al riquadro
   Barra di vetro (velo 0.3 + blur 4px, come .step-contenuto).
   Frecce grandi, etichetta sotto. id invariati (motore intatto).
   ============================================================ */
.wizard-nav {
  margin-top: var(--space-4);
  background: rgba(245, 239, 227, 0.3);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  border: 1px solid rgba(245, 239, 227, 0.55);
  border-radius: var(--radius);
  padding: var(--space-3) var(--space-4);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.btn-freccia {
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 4px 10px;
  color: var(--ink-soft);
  transition: transform .15s ease, color .15s ease, opacity .15s ease;
}
.btn-freccia:hover:not(:disabled) { color: var(--coral); transform: translateY(-2px); }
.btn-freccia:active:not(:disabled) { transform: scale(.96); }
.btn-freccia:disabled { opacity: .3; cursor: not-allowed; }
.fr-chevron { font-size: 34px; line-height: .9; font-weight: 400; }
.fr-label { font-family: var(--font-mono); font-size: 11px; letter-spacing: 1px; text-transform: uppercase; }

/* ============================================================
   S17 — FEATURE A: stepper VERTICALE come 3a colonna a destra
   Numeri rossi (corallo) 01..05, separatori, nome grigio.
   Popolamento progressivo gestito dal motore (classi attiva/completata).
   ============================================================ */
.stepper {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  gap: 0;
  margin-bottom: 0;
  align-self: start;
  min-width: 150px;
  max-width: 190px;
}
.stepper-voce {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  width: 100%;
  text-align: left;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--neutral);
  padding: var(--space-3) var(--space-2);
  border: none;
  border-bottom: 1px solid rgba(26, 23, 20, 0.12);
  border-radius: 0;
  background: none;
  cursor: default;
}

.stepper-num {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 22px;
  line-height: 1;
  color: var(--coral);
  flex-shrink: 0;
}
.stepper-voce.attiva { color: var(--ink); }
.stepper-voce.completata { color: var(--ink-soft); cursor: pointer; }
.stepper-voce.completata:hover { color: var(--coral); }

/* ============================================================
   S17 — FEATURE A: vetro satinato sulla barra passi
   Stesso velo/blur di .step-contenuto e .wizard-nav (0.3 / blur 4px).
   ============================================================ */
.stepper {
  background: rgba(245, 239, 227, 0.3);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  border: 1px solid rgba(245, 239, 227, 0.55);
  border-radius: var(--radius);
  box-shadow: 0 2px 6px rgba(26,23,20,0.10), 0 12px 30px rgba(26,23,20,0.10);
  padding: var(--space-3) var(--space-4);
}

/* ============================================================
   S17 — COMPONENTE: regolatore anteprima (slider cliente)
   Vetro satinato coerente col sito, accento corallo.
   ============================================================ */
.anteprima-regola {
  width: 100%;
  box-sizing: border-box;
  margin-top: var(--space-3);
  background: rgba(245, 239, 227, 0.3);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  border: 1px solid rgba(245, 239, 227, 0.55);
  border-radius: var(--radius);
  box-shadow: 0 2px 6px rgba(26,23,20,0.10), 0 12px 30px rgba(26,23,20,0.12);
  padding: var(--space-3) var(--space-4);
}
.anteprima-regola .ar-tit {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 18px;
  color: var(--coral);
  margin-bottom: var(--space-2);
}
.anteprima-regola input[type="range"] {
  width: 100%;
  accent-color: var(--coral);
  cursor: pointer;
}
.anteprima-regola .ar-hint {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .5px;
  color: var(--ink-soft);
  margin-top: var(--space-2);
  line-height: 1.4;
}

/* ============================================================
   S17 — GUIDA: pulsante "Come funziona" + popup infografica
   Pulsante in basso a sinistra, popup centrato, vetro/overlay.
   ============================================================ */
.guida-btn {
  position: fixed;
  left: var(--space-4);
  bottom: var(--space-4);
  z-index: 9998;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  color: var(--paper-light);
  background: var(--coral);
  border: none;
  border-radius: var(--radius-pill);
  padding: 11px 20px;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(26,23,20,0.15), 0 8px 24px rgba(26,23,20,0.18);
  transition: background .15s ease, transform .15s ease;
}
.guida-btn:hover { background: var(--coral-deep); transform: translateY(-2px); }
.guida-btn-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border: 1.5px solid var(--paper-light);
  border-radius: var(--radius-full);
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 13px;
}
.guida-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(26, 23, 20, 0.66);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  padding: var(--space-4);
}
.guida-overlay.aperto { display: flex; }
.guida-modale {
  position: relative;
  max-width: 760px;
  max-height: 92vh;
  overflow: auto;
  border-radius: var(--radius);
  box-shadow: 0 20px 60px rgba(0,0,0,0.45);
}
.guida-img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius);
}
.guida-chiudi {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 38px;
  height: 38px;
  border: none;
  border-radius: var(--radius-full);
  background: rgba(26,23,20,0.72);
  color: var(--paper-light);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  transition: background .15s ease;
}
.guida-chiudi:hover { background: var(--coral); }

/* ============================================================
   S18 - N7: pulsante "?" di aiuto nel wizard (riapre la guida).
   Cerchio corallo in alto a destra, visibile solo nel wizard
   (e figlio di #wizard, quindi nascosto nel benvenuto).
   ============================================================ */
.aiuto-btn {
  position: fixed;
  top: var(--space-4);
  right: var(--space-4);
  z-index: 9998;
  width: 46px;
  height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--coral);
  color: var(--paper-light);
  border: none;
  border-radius: var(--radius-full);
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(26,23,20,0.15), 0 8px 24px rgba(26,23,20,0.18);
  transition: background .15s ease, transform .15s ease;
}
.aiuto-btn:hover { background: var(--coral-deep); transform: translateY(-2px); }
.aiuto-btn:active { transform: scale(.96); }

/* S18 - N7: slider anteprima abbassato di 58px per lasciare
   l angolo in alto a destra al "?" (override del top via cascata). */
/* S29 - slider spostato DENTRO la colonna .anteprima: regola S18 rimossa. */

/* ============================================================
   S18 - N7 (rifinitura): etichetta "Come funziona" a sinistra
   del "?", stesso stile (serif corsivo, bianco su corallo).
   .aiuto-btn diventa contenitore trasparente dei due pezzi.
   ============================================================ */
.aiuto-btn {
  width: auto;
  height: auto;
  background: none;
  box-shadow: none;
  padding: 0;
  gap: var(--space-2);
}
.aiuto-testo {
  background: var(--coral);
  color: var(--paper-light);
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 18px;
  line-height: 1;
  padding: 12px 18px;
  border-radius: var(--radius-pill);
  box-shadow: 0 2px 6px rgba(26,23,20,0.15), 0 8px 24px rgba(26,23,20,0.18);
  transition: background .15s ease;
}
.aiuto-q {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  background: var(--coral);
  color: var(--paper-light);
  border-radius: var(--radius-full);
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 24px;
  line-height: 1;
  box-shadow: 0 2px 6px rgba(26,23,20,0.15), 0 8px 24px rgba(26,23,20,0.18);
  transition: background .15s ease;
}
.aiuto-btn:hover .aiuto-testo,
.aiuto-btn:hover .aiuto-q { background: var(--coral-deep); }

/* ============================================================
   S18 - N7: "Torna al sito" in alto a sinistra (uscita verso la
   vetrina). Tono leggero: pillola semitrasparente, freccia +
   testo corsivo corallo. Visibile solo nel wizard (figlio di #wizard).
   ============================================================ */
.torna-sito {
  position: fixed;
  top: var(--space-4);
  left: var(--space-4);
  z-index: 9998;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  text-decoration: none;
  background: rgba(245, 239, 227, 0.45);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  border: 1px solid rgba(245, 239, 227, 0.55);
  border-radius: var(--radius-pill);
  padding: 9px 18px 9px 14px;
  box-shadow: 0 2px 6px rgba(26,23,20,0.10), 0 8px 24px rgba(26,23,20,0.12);
  transition: background .15s ease, transform .15s ease;
}
.torna-sito:hover { background: rgba(245, 239, 227, 0.7); transform: translateY(-2px); }
.torna-sito-fr {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 20px;
  line-height: 1;
  color: var(--coral);
}
.torna-sito-tx {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 16px;
  line-height: 1;
  color: var(--coral-deep);
}

/* S18 - N7 (fix): hover di "Come funziona" come pulsante unico.
   Prima il salto translateY mancava sui due pezzi nuovi: ora lo
   applico al contenitore, cosi pillola e "?" si alzano insieme. */
.aiuto-btn { cursor: pointer; transition: transform .15s ease; }
.aiuto-btn:hover { transform: translateY(-2px); }
.aiuto-btn:active { transform: scale(.97); }

/* ============================================================
   S18 - N7 (fix alone): il contenitore .aiuto-btn aveva ancora
   un box-shadow ereditato dal primo "?" (CMD4), ma ora e' 
   trasparente -> ombra senza scatola = alone corallo dietro i
   due pezzi. L'ombra resta solo su pillola (.aiuto-testo) e
   cerchietto (.aiuto-q), che hanno il loro sfondo. */
.aiuto-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  background: rgba(245, 239, 227, 0.45);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  border: 1px solid rgba(245, 239, 227, 0.55);
  border-radius: var(--radius-pill);
  padding: 9px 18px;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(26,23,20,0.10), 0 8px 24px rgba(26,23,20,0.12);
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 16px;
  line-height: 1;
  color: var(--coral-deep);
  transition: background .15s ease, transform .15s ease;
}
.aiuto-btn:hover { background: rgba(245, 239, 227, 0.7); transform: translateY(-2px); }
.aiuto-btn:active { transform: scale(.97); }
.aiuto-testo, .aiuto-q { all: unset; font-family: var(--font-serif); font-style: italic; color: var(--coral-deep); }

/* ============================================================
   S24 - CARD BENVENUTO: carta crema invecchiata + trascinabile
   Blocco ADDITIVO in coda: vince per cascata, NON sostituisce
   nulla sopra. Rollback = cancellare questo blocco.
   - carta: crema del menu secondario della vetrina (tono caldo)
   - opaca: risolve il nodo leggibilita (era velo 0.3 + blur 2px)
   - position:relative + left/top: base del DRAG. NON si usa
     transform, che resta riservato all effetto WOW (.in-evidenza).
   - lo SFONDO del body resta INTATTO (velo bocciato in collaudo S24).
   ============================================================ */
.quadrato-benvenuto {
  position: relative;
  left: 0;
  top: 0;
  background-color: #F5E6C8;
  background-image:
    radial-gradient(ellipse at 12% 8%, rgba(255,252,240,0.85) 0%, rgba(255,252,240,0) 55%),
    radial-gradient(ellipse at 88% 92%, rgba(196,168,118,0.30) 0%, rgba(196,168,118,0) 60%),
    linear-gradient(160deg, rgba(247,232,201,0.95) 0%, rgba(238,220,185,0.95) 100%);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border: 1px solid rgba(184, 156, 106, 0.55);
  box-shadow: 0 2px 6px rgba(26,23,20,0.14), 0 16px 40px rgba(26,23,20,0.22);
  cursor: grab;
  user-select: none;
}
.quadrato-benvenuto.si-trascina {
  cursor: grabbing;
  transition: none;
  box-shadow: 0 4px 10px rgba(26,23,20,0.18), 0 26px 60px rgba(26,23,20,0.30);
}
.quadrato-benvenuto .btn,
.quadrato-benvenuto .qb-intro {
  cursor: pointer;
}
.quadrato-benvenuto .qb-intro { cursor: text; user-select: text; }

/* ============================================================
   BLOCCO S25 - STEP 01 RILEGATURA (additivo, in coda)
   Rollback: cancellare da questo commento alla fine del file.
   ============================================================ */

.gruppo-scelta { margin-bottom: 26px; }

.gruppo-titolo {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: #8A7A63;
  margin: 0 0 12px 0;
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.gruppo-titolo .gt-num { color: #C0522D; font-weight: 600; }

.griglia-card {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 10px;
}

.card-opzione {
  text-align: left;
  border: 1px solid rgba(43, 43, 43, 0.16);
  border-radius: 8px;
  background: rgba(255, 253, 248, 0.72);
  padding: 12px 14px;
  cursor: pointer;
  transition: border-color 160ms ease, background 160ms ease, box-shadow 160ms ease;
  font-family: inherit;
}

.card-opzione:hover {
  border-color: rgba(192, 82, 45, 0.55);
  background: rgba(255, 253, 248, 0.95);
}

.card-opzione.scelta {
  border-color: #C0522D;
  background: #FFFDF8;
  box-shadow: inset 0 0 0 1px #C0522D;
}

.card-nome {
  display: block;
  font-weight: 600;
  font-size: 14px;
  color: #2B2B2B;
  margin-bottom: 4px;
}

.card-desc {
  display: block;
  font-size: 12px;
  line-height: 1.4;
  color: #6B6152;
  margin-bottom: 8px;
}

.card-prezzo {
  display: block;
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  color: #C0522D;
}

.fila-colori {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.colore-scelta {
  border: none;
  background: none;
  padding: 0;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  font-family: inherit;
}

.colore-pallino {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 2px solid rgba(43, 43, 43, 0.2);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
  transition: transform 140ms ease, border-color 140ms ease;
}

.colore-scelta:hover .colore-pallino { transform: scale(1.08); }

.colore-scelta.scelta .colore-pallino {
  border-color: #C0522D;
  box-shadow: 0 0 0 3px rgba(192, 82, 45, 0.22), 0 1px 3px rgba(0, 0, 0, 0.18);
}

.colore-nome {
  font-size: 11px;
  color: #6B6152;
}

.colore-scelta.scelta .colore-nome { color: #C0522D; font-weight: 600; }

.fila-pillole { display: flex; flex-wrap: wrap; gap: 8px; }

.pillola {
  border: 1px solid rgba(43, 43, 43, 0.18);
  border-radius: 999px;
  background: rgba(255, 253, 248, 0.72);
  padding: 7px 15px;
  font-size: 13px;
  color: #2B2B2B;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  text-align: left;
  transition: border-color 150ms ease, background 150ms ease;
  font-family: inherit;
}

.pillola:hover { border-color: rgba(192, 82, 45, 0.55); }

.pillola.scelta {
  border-color: #C0522D;
  background: #FFFDF8;
  box-shadow: inset 0 0 0 1px #C0522D;
  font-weight: 600;
}

.pillola-punto {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 1px solid rgba(43, 43, 43, 0.25);
}

.avviso-prezzi {
  margin-top: 22px;
  padding: 9px 13px;
  border-left: 3px solid #C0522D;
  background: rgba(192, 82, 45, 0.07);
  font-size: 12px;
  line-height: 1.45;
  color: #6B4A3A;
  border-radius: 0 5px 5px 0;
}

.ap-nota {
  display: block;
  font-family: "JetBrains Mono", monospace;
  font-size: 9px;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: #A08F76;
  margin-top: 3px;
}

/* ---- fine BLOCCO S25 ---- */

/* ============================================================
   BLOCCO S25b - TENDINA COPERTINA (additivo, in coda)
   Rollback: cancellare da questo commento alla fine del file.
   ============================================================ */

.tendina { position: relative; }

.tendina-testa {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  border: 1px solid rgba(43, 43, 43, 0.22);
  border-radius: 8px;
  background: rgba(255, 253, 248, 0.85);
  padding: 12px 15px;
  cursor: pointer;
  font-family: inherit;
  font-size: 14px;
  color: #2B2B2B;
  text-align: left;
  transition: border-color 150ms ease;
}

.tendina-testa:hover { border-color: rgba(192, 82, 45, 0.6); }
.tendina.aperta .tendina-testa { border-color: #C0522D; border-radius: 8px 8px 0 0; }
.tendina-testa .tt-nome { font-weight: 600; }
.tendina-testa .tt-vuoto { color: #8A7A63; font-weight: 400; }
.tendina-testa .tt-prezzo { font-family: "JetBrains Mono", monospace; font-size: 12px; color: #C0522D; margin-left: auto; }

.tendina-frec { font-size: 9px; color: #8A7A63; transition: transform 180ms ease; }
.tendina.aperta .tendina-frec { transform: rotate(180deg); }

.tendina-lista {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 40;
  max-height: 230px;
  overflow-y: auto;
  border: 1px solid #C0522D;
  border-top: none;
  border-radius: 0 0 8px 8px;
  background: #FFFDF8;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.14);
  scrollbar-width: thin;
  scrollbar-color: rgba(192, 82, 45, 0.35) transparent;
}

.tendina.aperta .tendina-lista { display: block; }
.tendina-lista::-webkit-scrollbar { width: 6px; }
.tendina-lista::-webkit-scrollbar-track { background: transparent; }
.tendina-lista::-webkit-scrollbar-thumb { background: rgba(192, 82, 45, 0.3); border-radius: 3px; }

.tendina-voce {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  border: none;
  border-bottom: 1px solid rgba(43, 43, 43, 0.08);
  background: none;
  padding: 11px 15px;
  cursor: pointer;
  font-family: inherit;
  font-size: 14px;
  color: #2B2B2B;
  text-align: left;
  transition: background 130ms ease;
}

.tendina-voce:last-child { border-bottom: none; }
.tendina-voce:hover { background: rgba(192, 82, 45, 0.08); }
.tendina-voce.scelta { background: rgba(192, 82, 45, 0.13); font-weight: 600; }
.tendina-voce .tv-prezzo { font-family: "JetBrains Mono", monospace; font-size: 12px; color: #C0522D; margin-left: auto; }

.tendina-desc {
  margin-top: 10px;
  padding: 10px 14px;
  border-left: 3px solid rgba(192, 82, 45, 0.4);
  background: rgba(245, 230, 200, 0.35);
  border-radius: 0 6px 6px 0;
  font-size: 13px;
  line-height: 1.5;
  color: #5C5344;
  font-style: italic;
}

.gt-hint {
  margin-left: auto;
  font-family: "JetBrains Mono", monospace;
  font-size: 9px;
  letter-spacing: 0.3px;
  text-transform: none;
  color: #A89578;
  font-style: italic;
}

/* ---- fine BLOCCO S25b ---- */
/* ============================================================
   BLOCCO S26 - additivo, in coda. Non sostituisce nulla.
   Rollback: cancellare da qui alla fine del file.
   Stili per: swatch fotografici, prezzo per copia,
   campi numerici STEP 02, contatore copie STEP 03.
   ============================================================ */

/* --- STEP 01: pallini colore con FOTO --- */
.fila-colori {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 18px;
  align-items: flex-start;
}
.colore-scelta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 68px;
  padding: 6px 2px;
  background: none;
  border: 1px solid transparent;
  border-radius: 8px;
  cursor: pointer;
}
.colore-scelta:hover { border-color: rgba(0,0,0,0.18); }
.colore-scelta.scelta { border-color: #C0492F; background: rgba(192,73,47,0.07); }
.colore-pallino {
  display: block;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0,0,0,0.28);
  flex: 0 0 auto;
}
.colore-pallino img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}
.colore-nome {
  font-size: 11px;
  line-height: 1.2;
  text-align: center;
  opacity: 0.85;
  word-break: break-word;
}

/* --- Testo introduttivo dello step e nota materiale --- */
.step-intro {
  margin: 0 0 18px 0;
  font-size: 14px;
  line-height: 1.55;
  opacity: 0.9;
}
.nota-materiale {
  margin: 6px 0 0 0;
  font-size: 12px;
  line-height: 1.45;
  font-style: italic;
  opacity: 0.75;
}

/* --- Prezzo dentro le pillole --- */
.pillola-prezzo {
  display: inline-block;
  margin-left: 7px;
  font-size: 11px;
  opacity: 0.75;
  white-space: nowrap;
}

/* --- IL PREZZO: una copia grande, totale dichiarato sotto --- */
#prezzoStimato {
  display: block;
  text-align: left;
  line-height: 1.25;
}
.pz-cifra {
  display: block;
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.pz-eti {
  display: block;
  margin-top: 2px;
  font-size: 11px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  opacity: 0.7;
}
.pz-tot {
  display: block;
  margin-top: 9px;
  padding-top: 8px;
  border-top: 1px solid rgba(0,0,0,0.14);
  font-size: 13px;
  opacity: 0.9;
}
.ap-nota {
  display: block;
  margin-top: 6px;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.6;
}

/* --- STEP 02: campi numerici --- */
.fila-numeri {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}
.campo-numero {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 12px;
  opacity: 0.9;
}
.campo-numero input {
  width: 130px;
  padding: 9px 11px;
  font-size: 15px;
  font-family: inherit;
  color: inherit;
  background: rgba(255,255,255,0.55);
  border: 1px solid rgba(0,0,0,0.22);
  border-radius: 6px;
}
.campo-numero input:focus {
  outline: none;
  border-color: #C0492F;
  background: rgba(255,255,255,0.8);
}

/* --- STEP 03: contatore copie --- */
.contatore-copie {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px;
  background: rgba(255,255,255,0.5);
  border: 1px solid rgba(0,0,0,0.18);
  border-radius: 8px;
}
.cc-btn {
  width: 34px;
  height: 34px;
  font-size: 19px;
  line-height: 1;
  font-family: inherit;
  color: inherit;
  background: rgba(255,255,255,0.7);
  border: 1px solid rgba(0,0,0,0.16);
  border-radius: 6px;
  cursor: pointer;
}
.cc-btn:hover { background: #C0492F; color: #fff; border-color: #C0492F; }
.cc-num {
  min-width: 44px;
  text-align: center;
  font-size: 18px;
  font-weight: 700;
}
/* ============================================================
   BLOCCO S26-B - LEGGIBILITA. Additivo, in coda.
   Rollback: cancellare da qui alla fine del file.

   PROBLEMA: le etichette di gruppo erano #8A7A63 a 11px monospace
   maiuscolo su pannello semitrasparente sopra foto: contrasto ~2.6:1,
   sotto la soglia di leggibilita (4.5:1). Peggio .gt-hint a 9px (~2:1).
   SOLUZIONE: colore piu scuro, corpo e peso maggiori, velo dietro
   al pannello. Font monospace e maiuscolo CONSERVATI: sono identita.
   ============================================================ */

.gruppo-titolo {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1.2px;
  color: #5A4E3C;
  margin: 0 0 13px 0;
}
.gruppo-titolo .gt-num {
  color: #A83A17;
  font-weight: 700;
}
.gt-hint {
  font-size: 10px;
  color: #7A6A52;
  font-style: italic;
}
.card-desc {
  margin-top: 6px;
  font-size: 12.5px;
  line-height: 1.5;
  color: #554C3E;
}
.step-intro {
  color: #443C30;
  opacity: 1;
}
.tendina-desc {
  color: #4A4235;
}
.nota-materiale {
  color: #5A5142;
  opacity: 1;
}

/* Velo chiaro dietro al contenuto: stacca il testo dalla foto di sfondo. */
.step-contenuto {
  background: rgba(247, 241, 228, 0.72);
  border-radius: 10px;
  padding: 18px 20px;
}

/* Prezzo: etichette piu leggibili */
.pz-eti {
  color: #6B5F4C;
  opacity: 1;
}
.pz-tot {
  color: #4A4235;
  opacity: 1;
}
.ap-nota {
  color: #7A6A52;
  opacity: 1;
}

/* ============================================================
   BLOCCO S27 - D1: la tendina non deve toccare la barra nav
   .step-contenuto e .wizard-nav sono fratelli, entrambi con
   backdrop-filter: creano due stacking context separati.
   Lo z-index 40 della tendina compete solo DENTRO la card e
   non puo passare sopra la barra. Scelta di Giorgio (S27):
   accorciare la lista invece di sovrapporre. Si scorre con la
   rotella, come dice l etichetta accanto al campo.
   230px -> 150px = circa 3 voci e mezzo visibili.
   LIMITE DICHIARATO: valore fisso, non adattivo. Versione
   basata sullo spazio disponibile in backlog S28.
   Rollback: cancellare da questo commento alla fine del file.
   ============================================================ */

.tendina-lista {
  max-height: 150px;
}
/* ============================================================
   BLOCCO S28 - ANTEPRIMA VIVA. Additivo, in coda.
   Rollback: cancellare da questo commento alla fine del file.

   v2 dopo la bocciatura di Giorgio: NIENTE prospettiva, niente testo
   sovrapposto alla foto. Un prodotto che viene costruito a mano non si
   simula: si mostra il materiale (foto), e a parte come verra la scritta
   (carta piatta). Due lavori diversi.

   .ant-modo-foto  = step 01-03. Solo l immagine, quadrata.
   .ant-modo-carta = step 04. Rettangolo A4 del colore copertina.
   ============================================================ */

.anteprima-mockup {
  aspect-ratio: auto;
  padding: 0;
  overflow: hidden;
  display: block;
  background: none;
}

.ant-scena { width: 100%; }

/* ---- MODALITA FOTO: il materiale ---- */
.ant-foto {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: var(--radius);
  background: rgba(221,211,189,0.85);
}
.ant-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* I 5 colori senza foto: il colore c e, l immagine arrivera. */
.ant-senza { display: flex; align-items: center; justify-content: center; }
.ant-tinta {
  position: absolute;
  left: 14%;
  top: 6%;
  width: 72%;
  height: 88%;
  border-radius: 3px;
  box-shadow: 0 6px 18px rgba(26,23,20,0.28);
}
.ant-attesa {
  position: relative;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #F5EFE3;
  background: rgba(26,23,20,0.55);
  padding: 5px 10px;
  border-radius: 4px;
}

/* ---- MODALITA CARTA: come verra la scritta ---- */
.ant-carta {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1.414;
  container-type: inline-size;
  border-radius: 3px;
  box-shadow: 0 3px 10px rgba(26,23,20,0.22), 0 12px 28px rgba(26,23,20,0.18);
  overflow: hidden;
}
.ant-testo {
  position: absolute;
  left: 11%;
  top: 6%;
  width: 78%;
  height: 88%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  font-family: Georgia, "Times New Roman", Times, serif;
  line-height: 1.3;
  overflow: hidden;
}

.ant-riga { width: 100%; margin: 0 0 0.35em 0; word-break: break-word; }
.ant-uni { font-size: 4.4cqw; font-weight: 700; }
.ant-fac { font-size: 3.8cqw; font-weight: 600; }
.ant-cor { font-size: 3.1cqw; font-style: italic; }
.ant-sot { font-size: 3.2cqw; font-weight: 600; }
.ant-lau { font-size: 3.2cqw; font-weight: 600; }
.ant-rel { font-size: 3.0cqw; }
.ant-ann { font-size: 3.0cqw; }

/* Titolo: quattro scaglioni, MAI troncato. */
.ant-tit  { font-weight: 700; text-transform: uppercase; }
.ant-t-g  { font-size: 5.0cqw; }
.ant-t-m  { font-size: 4.0cqw; }
.ant-t-p  { font-size: 3.3cqw; }
.ant-t-xp { font-size: 2.8cqw; }

/* Le righe non compilate NON prendono il colore dell incisione: il grigio
   dice da solo che sono un esempio, senza spiegarlo a parole. Regola
   diretta sull elemento, batte l ereditarieta: niente !important. */
.ant-vuoto {
  color: rgba(255,255,255,0.42);
  font-weight: 400;
  font-style: italic;
  text-transform: none;
}

.ant-filetto {
  width: 62%;
  height: 1px;
  background: currentColor;
  opacity: 0.7;
  margin: 0.5em 0 0.7em 0;
  flex: none;
}
.ant-stemma {
  width: 14cqw;
  height: 14cqw;
  border: 1px solid currentColor;
  border-radius: 50%;
  opacity: 0.45;
  margin-bottom: 0.6em;
  flex: none;
}
.ant-spazio { flex: 1 1 auto; min-height: 0.8em; }

/* --- STEP 04: i campi delle scritte --- */
.ant-campi {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 460px;
}
.ant-campo {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 12px;
  opacity: 0.9;
}
.ant-campo input,
.ant-campo textarea {
  width: 100%;
  padding: 9px 11px;
  font-size: 15px;
  font-family: inherit;
  color: inherit;
  background: rgba(255,255,255,0.55);
  border: 1px solid rgba(0,0,0,0.22);
  border-radius: 6px;
  box-sizing: border-box;
}
.ant-campo textarea { resize: vertical; line-height: 1.45; font-size: 14px; }
.ant-campo input:focus,
.ant-campo textarea:focus {
  outline: none;
  border-color: #C0492F;
  background: rgba(255,255,255,0.8);
}
.ant-campo--largo { max-width: 100%; }
/* --- STEP 04: i gruppi apribili ---
   Otto caselle in fila sono un muro. Uno aperto per volta: si vede
   quel che serve e l anteprima resta grande sotto gli occhi.
   Cliccando sul gruppo gia aperto si chiude tutto: serve a chi vuole
   guardare solo la copertina. */
.ant-gruppo {
  border: 1px solid rgba(0,0,0,0.14);
  border-radius: 8px;
  background: rgba(255,255,255,0.30);
  margin-bottom: 10px;
  overflow: hidden;
}
.ant-gruppo-testa {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 11px 14px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: #5A4E3C;
  text-align: left;
  background: none;
  border: 0;
  cursor: pointer;
}
.ant-gruppo-testa:hover { background: rgba(255,255,255,0.45); }
.ant-gruppo-testa .gt-num { color: #A83A17; font-weight: 700; }
.ant-frec {
  margin-left: auto;
  font-size: 10px;
  opacity: 0.55;
  transition: transform 0.18s ease;
}
.ant-gruppo.aperto .ant-frec { transform: rotate(180deg); }
.ant-gruppo.aperto { background: rgba(255,255,255,0.44); }
.ant-gruppo-corpo { display: none; padding: 2px 14px 14px 14px; }
.ant-gruppo.aperto .ant-gruppo-corpo { display: block; }
/* --- ant-prezzo-destra: il numero staccato dall etichetta --- */
.anteprima-prezzo { flex-wrap: wrap; gap: 10px; }
#prezzoStimato {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
  margin-left: auto;
}
/* ============================================================
   S29 - TESTA DEL WIZARD: "Torna al sito" + "Come funziona?"
   Blocco ADDITIVO in coda: vince per cascata, NON sostituisce
   nulla sopra. Rollback = cancellare questo blocco.
   I due pulsanti erano ancorati ai bordi della FINESTRA, mentre
   le colonne sono ancorate al CONTENUTO centrato (max 1180px):
   sotto quella soglia si sovrapponevano agli angoli delle
   schede. Ora sono una riga nel flusso, larga quanto il
   contenuto: non possono piu sovrapporsi a nessuna larghezza
   e con nessuno zoom di sistema.
   ============================================================ */
.wizard-testa {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  max-width: 1180px;
  margin: 0 auto var(--space-4) auto;
}
.wizard-testa .torna-sito,
.wizard-testa .aiuto-btn {
  position: static;
  z-index: auto;
}

/* ============================================================
   BLOCCO S31 - STEP 05: IL MODULO DI RICHIESTA
   Blocco ADDITIVO in coda: vince per cascata, NON sostituisce
   nulla sopra. Rollback = cancellare questo blocco.
   Nessuna forzatura di cascata: la coda basta da sola.
   ============================================================ */
.rq-blocco {
  background: rgba(255,255,255,0.44);
  border: 1px solid var(--paper-dark);
  border-radius: var(--radius);
  padding: var(--space-3);
  margin-bottom: var(--space-3);
}
.rq-tit {
  font-family: var(--font-sans);
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: var(--space-2);
}
.rq-voce {
  font-family: var(--font-serif);
  font-size: 15px;
  color: var(--ink);
  padding: 2px 0;
}
.rq-vuoto {
  font-size: 13px;
  color: var(--neutral);
  font-style: italic;
}
.rq-manca {
  font-size: 13px;
  color: var(--ink-soft);
  margin-top: var(--space-2);
  padding-top: var(--space-2);
  border-top: 1px dashed var(--paper-dark);
}
.rq-r {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  font-size: 13px;
  padding: 4px 0;
  border-bottom: 1px solid rgba(26,23,20,0.06);
}
.rq-r span { color: var(--neutral); }
.rq-r b { color: var(--ink); font-weight: 600; text-align: right; }
.rq-file {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) 0;
  border-bottom: 1px solid rgba(26,23,20,0.06);
}
.rq-file-eti {
  flex: 1 1 220px;
  font-size: 14px;
  color: var(--ink);
}
.rq-file-ok {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--coral-deep);
  background: rgba(232,90,79,0.08);
  border-radius: var(--radius-pill);
  padding: 3px 10px;
}
.rq-file-cambia {
  border: 1px solid var(--neutral-light);
  background: transparent;
  color: var(--ink-soft);
  font-family: var(--font-body);
  font-size: 12px;
  border-radius: var(--radius-pill);
  padding: 3px 12px;
  cursor: pointer;
}
.rq-file-cambia:hover { border-color: var(--coral); color: var(--coral-deep); }
.rq-file-nota {
  flex-basis: 100%;
  font-size: 12px;
  color: var(--neutral);
}
.rq-file input[type="file"] { font-size: 13px; color: var(--ink-soft); max-width: 100%; }
.rq-peso {
  font-size: 13px;
  margin-top: var(--space-2);
}
.rq-peso-ok { color: var(--neutral); }
.rq-peso-no {
  color: var(--coral-deep);
  background: rgba(232,90,79,0.08);
  border-radius: var(--radius);
  padding: var(--space-2);
}
.rq-nota {
  font-size: 13px;
  color: var(--ink-soft);
  min-height: 18px;
  padding-top: 4px;
}
.rq-privacy {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  font-size: 14px;
  color: var(--ink);
  cursor: pointer;
}
.rq-privacy input { margin-top: 3px; }
.rq-privacy-testo {
  margin-top: var(--space-2);
  font-size: 12px;
  line-height: 1.55;
  color: var(--neutral);
}
.rq-invio {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-4);
}
.rq-esito {
  font-size: 13px;
  text-align: center;
  max-width: 460px;
}
.rq-esito-attesa {
  color: var(--coral-deep);
  background: rgba(232,90,79,0.08);
  border-radius: var(--radius);
  padding: var(--space-2) var(--space-3);
}

.rq-esito-ok {
  color: #0f5132;
  background: #d1e7dd;
  border: 1px solid #badbcc;
}

.rq-esito-errore {
  color: #842029;
  background: #f8d7da;
  border: 1px solid #f5c2c7;
}
/* ---- fine BLOCCO S31 ---- */

/* ============================================================
   S31-B - Il campo QUALI pagine a colori, al passo 2.
   Additivo in coda. Rollback = cancellare questo blocco.
   ============================================================ */
.campo-quali {
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px dashed var(--paper-dark);
}
.campo-quali .ant-campo { display: block; }
.campo-quali .rq-nota { min-height: 0; }
/* ---- fine BLOCCO S31-B ---- */