/* ==========================================================================
   contatti.html — «l'ordine di lavoro»
   Il modulo è l'oggetto: una scheda d'acciaio in tre passi, con un solo
   indicatore di avanzamento, tasti che si premono davvero e un timbro
   «Ricevuta» che cade sulla scheda quando la richiesta è partita davvero.
   Leggerezza (2026-10-01): una sola informazione per cosa, e mentre si compila
   la scheda si ridipinge il meno possibile. Niente luce del puntatore, niente
   transizioni di ombre, sfondi o colori: si animano solo transform e opacity,
   il resto scatta in un colpo (un solo ridisegno, piccolo).
   Prefisso .con-  ·  Stato base = stato finale: gli stati di partenza nascosti
   esistono solo sotto html.js-motion (o con le classi messe da contatti.js).
   Grammatica dei tre stati: blu = fatto · ambra = in corso / in attesa · tratteggio = da fare.
   ========================================================================== */

.page-contatti {
  --con-ambra: #E0A050;
  --con-ambra-soft: rgba(224, 160, 80, .14);
  --con-errore: #F0A39C;
  --con-inciso: #A8B1B8;          /* scritte sull'acciaio del foglio: più chiare di --fg-3, restano AA anche sul riflesso */
}

/* ---------- Testata a due colonne ---------- */
.con-hero {
  isolation: isolate;
  padding-top: calc(var(--header-h) + clamp(32px, 4.5vw, 64px));
}
.con-hero::before {
  /* tavola tecnica appena accennata dietro la scheda */
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(195, 202, 208, .055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(195, 202, 208, .055) 1px, transparent 1px);
  background-size: 48px 48px;
  background-position: -1px -1px;
  -webkit-mask-image: radial-gradient(58% 52% at 72% 36%, #000 0%, transparent 80%);
  mask-image: radial-gradient(58% 52% at 72% 36%, #000 0%, transparent 80%);
}

.con-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "intro" "order" "next";
  gap: clamp(40px, 6vw, 64px);
}
.con-intro { grid-area: intro; display: grid; gap: 20px; align-content: start; }
.con-order { grid-area: order; position: relative; min-width: 0; }
.con-next { grid-area: next; }

.con-intro h1 { font-size: clamp(2.4rem, 7.4vw, 4.6rem); }
.con-intro__more { max-width: 34em; color: var(--fg-3); font-size: var(--fs-small); line-height: 1.6; }

@media (min-width: 1100px) {
  .con-grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    grid-template-rows: auto 1fr;
    grid-template-areas: "intro order" "next order";
    column-gap: clamp(48px, 5.4vw, 88px);
    row-gap: 56px;
    align-items: start;
  }
  .con-intro { padding-top: 12px; }
  .con-intro h1 { font-size: clamp(3rem, 4.5vw, 4.5rem); }
}

/* ---------- La scheda d'acciaio ---------- */
.con-sheet {
  container: con-sheet / inline-size;
  position: relative;
  isolation: isolate;
  border-radius: var(--radius-l);
  padding: clamp(34px, 3.6vw, 48px) clamp(18px, 3.4vw, 44px) clamp(22px, 3vw, 40px);
  background:
    var(--brushed),
    linear-gradient(180deg, #282E33 0%, #1D2226 52%, #181C1F 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .1),
    inset 0 -1px 0 rgba(0, 0, 0, .55),
    0 2px 0 rgba(0, 0, 0, .6),
    0 30px 60px -28px rgba(0, 0, 0, .85),
    0 70px 120px -60px rgba(0, 0, 0, .75);
}
.con-sheet::before {
  /* smusso lavorato */
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .24), rgba(255, 255, 255, .05) 30%, rgba(0, 0, 0, .4));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  pointer-events: none;
}
.con-sheet::after {
  /* quattro viti agli angoli */
  --v: radial-gradient(circle at 50% 50%, #C9D0D5 0 1.2px, #7A848B 1.6px 3.2px, #2A3035 3.6px 4.6px, transparent 5px);
  content: "";
  position: absolute;
  inset: 12px;
  z-index: -1;
  pointer-events: none;
  background:
    var(--v) left top / 10px 10px no-repeat,
    var(--v) right top / 10px 10px no-repeat,
    var(--v) left bottom / 10px 10px no-repeat,
    var(--v) right bottom / 10px 10px no-repeat;
}
.con-sheet__hole {
  /* l'asola per appendere la scheda alla bacheca */
  position: absolute;
  top: 14px;
  left: 50%;
  width: 58px;
  height: 11px;
  margin-left: -29px;
  border-radius: 6px;
  background: linear-gradient(180deg, #07090A, #121517);
  box-shadow: inset 0 2px 3px rgba(0, 0, 0, .95), 0 1px 0 rgba(255, 255, 255, .09);
}

.con-sheet__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
}
.con-sheet__title {
  font-family: var(--font-mono);
  font-size: .7rem;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--fg-2);
}

/* ---------- L'unico indicatore di avanzamento: i tre passi ----------
   Grammatica dei tre stati sul LED: blu = fatto · ambra = in corso · tratteggio = da fare.
   Gli stati scattano senza transizioni: un ridisegno piccolo per passo, niente bagliori animati. */
.con-progress { margin-top: 8px; border-bottom: 1px solid var(--line); }
.con-steps {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  padding: 6px 0;
}
.con-steps__btn {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 48px;
  padding: 6px 10px 6px 0;
  border: 0;
  border-radius: var(--radius-s);
  background: none;
  color: var(--fg-3);
  font-size: .8125rem;
  line-height: 1.25;
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
@media (hover: hover) { .con-steps__btn:hover { color: var(--fg); } }
.con-steps__btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.con-steps__num { font-family: var(--font-mono); font-size: .66rem; letter-spacing: .12em; }
.con-steps__led {
  /* da fare: anello tratteggiato */
  flex: none;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 1px dashed rgba(195, 202, 208, .6);
}
.con-steps__item.is-done .con-steps__led {
  border: 1px solid transparent;
  background: var(--blu);
  box-shadow: 0 0 0 3px rgba(140, 192, 230, .16), 0 0 8px rgba(140, 192, 230, .6);
}
.con-steps__item.is-current .con-steps__led {
  border: 1px solid transparent;
  background: var(--con-ambra);
  box-shadow: 0 0 0 3px var(--con-ambra-soft), 0 0 8px rgba(224, 160, 80, .6);
}
.con-steps__item.is-current .con-steps__btn { color: var(--fg); }
.con-steps__item.is-done .con-steps__btn { color: var(--fg-2); }

/* Riepilogo compatto delle scelte del passo 1: una riga, solo nei passi 2 e 3. Sempre alta una riga,
   anche vuota e con tante scelte (i nomi in più finiscono nei puntini; per intero sono sulle schede del
   passo 1 e nel riepilogo finale): scegliere non cambia l'altezza della scheda. */
.con-band {
  display: flex;
  align-items: baseline;
  gap: 2px 10px;
  min-height: 1.45em;
  font-size: .9375rem;
  line-height: 1.45;
  color: var(--fg);
}
.con-band svg { width: 14px; height: 14px; flex: none; align-self: center; color: var(--blu); }
.con-band__k { flex: none; font-family: var(--font-mono); font-size: .62rem; letter-spacing: .14em; text-transform: uppercase; color: var(--con-inciso); }
.con-band__v { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 560; }
/* senza scelte: vuota e invisibile, ma tiene il posto (i passi condividono la stessa cella e la stessa altezza) */
.con-band.is-empty { visibility: hidden; }

/* ---------- Il modulo ---------- */
.con-form { margin-top: 26px; }
.con-req { color: var(--fg); }

.con-step { min-width: 0; margin: 0; padding: 0; border: 0; }
.con-step + .con-step {
  /* senza JS i tre passi stanno uno sotto l'altro: la legenda siede sulla riga tratteggiata, come in una tavola */
  margin-top: 44px;
  padding-top: 0;
  border-top: 1px dashed var(--line-strong);
}
.con-step__legend { padding: 0 16px 0 0; }
.con-step__legend + * { margin-top: 14px; }
.con-step__title { font-size: clamp(1.35rem, 2vw, 1.62rem); font-stretch: 112%; font-weight: 740; line-height: 1.1; }
.con-step__title:focus, .con-receipt__title:focus { outline: none; }
.con-step__hint { font-size: var(--fs-small); color: var(--fg-3); }
.con-step__hint + * { margin-top: 16px; }
.con-band + .con-step__hint { margin-top: 14px; }

/* con JS: un passo alla volta, tutti nella stessa cella (la scheda non cambia altezza).
   Il passo che esce sparisce subito; quello che entra si accende in sola opacità, una volta: niente
   spostamenti e niente due passi grandi in dissolvenza nello stesso momento. */
.con-form.is-stepped .con-stack { display: grid; }
.con-form.is-stepped .con-step { grid-area: 1 / 1; margin: 0; padding: 0; border: 0; }
.con-form.is-stepped .con-step:not(.is-current) { visibility: hidden; pointer-events: none; }
.js-motion .con-form.is-stepped .con-step.is-current { animation: con-step-in 220ms var(--ease-out) backwards; }
@keyframes con-step-in { from { opacity: 0; } }

/* Passo 1 — i tasti */
.con-keys { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.con-key--ask { grid-column: 1 / -1; }
.con-key {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  padding: 13px 16px 14px 14px;
  border-radius: 10px;
  cursor: pointer;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(255, 255, 255, .06), transparent 60%),
    linear-gradient(180deg, #2B3136 0%, #22272B 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .1),
    inset 0 0 0 1px rgba(0, 0, 0, .35),
    0 3px 0 #0E1113,
    0 10px 18px -10px rgba(0, 0, 0, .85);
  /* si preme in transform; ombre e anello cambiano in un colpo, senza transizione (niente ridisegni a ogni fotogramma) */
  transition: transform 150ms var(--ease-press);
  -webkit-tap-highlight-color: transparent;
}
.con-key input { position: absolute; top: 0; left: 0; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
/* passando col puntatore il bordo del tasto prende luce: un riflesso già dipinto su un livello proprio
   che si accende in opacità. Cambiare l'ombra del tasto lo farebbe ridipingere a ogni entrata e uscita
   (in WebKit era la metà del lavoro mentre il puntatore gira sul modulo). */
.con-key::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), inset 0 0 0 1px rgba(195, 202, 208, .16);
  opacity: 0;
  will-change: opacity;
}
@media (hover: hover) { .con-key:hover::after { opacity: 1; } }
.con-key:has(input:checked) {
  transform: translateY(2px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .05),
    inset 0 0 0 1px rgba(140, 192, 230, .5),
    inset 0 3px 8px rgba(0, 0, 0, .45),
    0 1px 0 #0E1113,
    0 4px 10px -8px rgba(0, 0, 0, .8);
}
.con-key--ask:has(input:checked) {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .05),
    inset 0 0 0 1px rgba(224, 160, 80, .55),
    inset 0 3px 8px rgba(0, 0, 0, .45),
    0 1px 0 #0E1113,
    0 4px 10px -8px rgba(0, 0, 0, .8);
}
.con-key:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 3px; }
.con-key__cap {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  margin-top: 1px;
  border-radius: 50%;
  background: radial-gradient(circle at 42% 35%, #3A4247, #171B1E 70%);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .85), 0 1px 0 rgba(255, 255, 255, .08);
}
.con-key .led { --led-halo: rgba(140, 192, 230, .9); --led-blur: 12px; }
.con-key--ask .led { --led-color: var(--con-ambra); --led-ring: var(--con-ambra-soft); --led-halo: rgba(224, 160, 80, .85); }
.con-key:has(input:checked) .led { --led-lit: 1; }
.con-key__body { display: grid; gap: 2px; min-width: 0; }
.con-key__name { font-family: var(--font-display); font-stretch: 108%; font-weight: 650; font-size: 1.02rem; line-height: 1.25; color: var(--fg); }
.con-key__desc { font-size: .875rem; line-height: 1.45; color: var(--fg-3); }

/* il tasto che si preme da solo (preselezione dal link): stato di partenza solo con movimento */
.js-motion .con-sheet.is-arming .con-key.is-auto,
.js-motion .con-sheet.is-arming .con-key.is-auto:has(input:checked) {
  transform: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), inset 0 0 0 1px rgba(0, 0, 0, .35), 0 3px 0 #0E1113, 0 10px 18px -10px rgba(0, 0, 0, .85);
}
.js-motion .con-sheet.is-arming .con-key.is-auto .led { --led-lit: 0 !important; }
.js-motion .con-key.is-pressing { animation: con-key-press 460ms var(--ease-out); }
@keyframes con-key-press {
  0% { transform: translateY(0); }
  30% { transform: translateY(3.5px) scale(.992); }
  100% { transform: translateY(2px); }
}

/* Passi 2 e 3 — i campi */
.con-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 18px; }
.con-f--full { grid-column: 1 / -1; }
/* un errore sotto un campo allunga la riga: i vicini non si stirano (il loro campo resta dov'è) */
.con-fields > .field { align-content: start; }
.con-fields .field__hint { line-height: 1.45; }
.con-fields .textarea { min-height: 140px; }
.con-msg-note { color: var(--blu); }
/* il fuoco nei campi scatta senza transizione dell'ombra (la transizione del core ridipingerebbe il campo
   per 200 ms a ogni clic e a ogni Tab) */
.con-form .input, .con-form .select, .con-form .textarea { transition: none; }

.con-consent {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  padding: 14px 16px;
  border-radius: 8px;
  cursor: pointer;
  background: rgba(195, 202, 208, .03);
  box-shadow: inset 0 0 0 1px var(--line);
}
.con-consent input { position: absolute; top: 0; left: 0; width: 1px; height: 1px; opacity: 0; }
.con-check {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 6px;
  color: #0E1113;
  background: linear-gradient(180deg, #151A1D, #1C2125);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .7), inset 0 0 0 1px var(--line-strong);
}
.con-check svg { width: 16px; height: 16px; }
.con-check path { opacity: 0; }
.con-consent:has(input:checked) .con-check { background: var(--blu); box-shadow: 0 0 0 3px rgba(140, 192, 230, .16), 0 0 10px rgba(140, 192, 230, .5); }
.con-consent:has(input:checked) .con-check path { opacity: 1; }
.con-consent:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 3px; }
.con-consent__text { font-size: .9375rem; line-height: 1.5; color: var(--fg-2); }
.con-consent__text a { color: var(--fg); }
.field.is-invalid .con-consent { box-shadow: inset 0 0 0 1px #E0786E; }

/* trappola per i programmi automatici: fuori dalla vista e dal Tab */
.con-hp { position: absolute !important; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.con-alert {
  margin-top: 20px;
  padding: 12px 14px;
  border-radius: 8px;
  background: rgba(224, 120, 110, .1);
  box-shadow: inset 0 0 0 1px rgba(224, 120, 110, .42);
  color: #F6CBC6;
  font-size: .9375rem;
}
.con-alert:empty { margin: 0; padding: 0; background: none; box-shadow: none; }

.con-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
}
.con-nav__next, .con-nav__send { margin-left: auto; }
.con-nav__back svg { transition: transform var(--t-ui) var(--ease-out); }
.con-nav__back:hover svg { transform: translateX(-3px); }
.con-form__note { margin-top: 14px; font-size: .8125rem; line-height: 1.45; color: var(--fg-3); }
.con-form__note a { color: var(--fg-2); }
.con-nav button:disabled { opacity: .6; cursor: progress; }

/* ---------- Invio: esito, riepilogo, timbro ---------- */
.con-status {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 22px;
  padding: 13px 16px;
  border-radius: 8px;
  background: rgba(140, 192, 230, .08);
  box-shadow: inset 0 0 0 1px rgba(140, 192, 230, .4);
  color: var(--fg);
  font-size: .9375rem;
  line-height: 1.5;
}
.con-status::before {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  margin-top: .5em;
  border-radius: 50%;
  background: var(--blu);
  box-shadow: 0 0 10px rgba(140, 192, 230, .8);
}
.con-status:empty { margin: 0; padding: 0; background: none; box-shadow: none; }
.con-status:empty::before { display: none; }

.con-receipt { margin-top: 22px; }
.con-receipt__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px 20px;
  min-height: 132px;
}
.con-receipt__title { font-size: clamp(1.35rem, 2vw, 1.62rem); font-stretch: 112%; font-weight: 740; line-height: 1.1; }
.con-receipt__list {
  display: grid;
  grid-template-columns: minmax(0, 10.5rem) minmax(0, 1fr);
  margin: 14px 0 0;
  border-top: 1px solid var(--line);
}
.con-receipt__list dt, .con-receipt__list dd { margin: 0; padding: 11px 0; border-bottom: 1px solid var(--line); }
.con-receipt__list dt { padding-top: 14px; padding-right: 14px; font-family: var(--font-mono); font-size: .62rem; letter-spacing: .14em; text-transform: uppercase; color: var(--fg-3); }
.con-receipt__list dd { color: var(--fg); overflow-wrap: anywhere; white-space: pre-line; }
.con-receipt__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin-top: 24px; }
.con-receipt__actions .link-arrow { min-height: 44px; }

/* Il timbro: vista dall'alto. Stato base = segno finale, freddo; matrice, calore e scintille spenti. */
.con-stamp {
  position: relative;
  width: 212px;
  height: 112px;
  margin-right: 6px;
  transform: rotate(-6deg);
  pointer-events: none;
}
.con-stamp__mark, .con-stamp__hot {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 7px;
  border-radius: 10px;
}
.con-stamp__mark::before, .con-stamp__hot::before,
.con-stamp__mark::after, .con-stamp__hot::after {
  content: "";
  position: absolute;
  border-radius: inherit;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
}
.con-stamp__mark::before, .con-stamp__hot::before { inset: 0; padding: 3px; }
.con-stamp__mark::after, .con-stamp__hot::after { inset: 7px; padding: 1px; border-radius: 5px; }
.con-stamp__word {
  font-family: var(--font-display);
  font-stretch: 125%;
  font-weight: 820;
  font-size: 1.62rem;
  line-height: 1;
  letter-spacing: .07em;
  text-transform: uppercase;
}
.con-stamp__line { display: flex; gap: 14px; font-family: var(--font-mono); font-size: .64rem; font-weight: 600; letter-spacing: .22em; }
/* il segno: colori di rinvenimento (l'unico momento «forgia» della pagina) */
.con-stamp__mark {
  opacity: .94;
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' seed='7'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 -1.6 1.75'/></filter><rect width='100%' height='100%' filter='url(%23g)'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' seed='7'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 -1.6 1.75'/></filter><rect width='100%' height='100%' filter='url(%23g)'/></svg>");
}
.con-stamp__mark::before, .con-stamp__mark::after { background: var(--tempra); }
.con-stamp__mark .con-stamp__word, .con-stamp__mark .con-stamp__line {
  background: var(--tempra);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
/* il segno ancora caldo: si raffredda nei colori di tempra */
.con-stamp__hot { opacity: 0; color: #FFF4DC; text-shadow: 0 0 10px rgba(255, 196, 120, .95), 0 0 26px rgba(255, 140, 50, .6); }
.con-stamp__hot::before, .con-stamp__hot::after { background: #FFE9C2; }
.con-stamp__hot { filter: drop-shadow(0 0 8px rgba(255, 170, 80, .7)); }
/* la matrice d'acciaio che cade (vista dall'alto) e la sua ombra */
.con-stamp__die {
  position: absolute;
  inset: -5px;
  opacity: 0;
  border-radius: 12px;
  background:
    radial-gradient(90% 70% at 30% 20%, rgba(255, 255, 255, .55), transparent 60%),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .12) 0 1px, rgba(0, 0, 0, 0) 1px 3px),
    linear-gradient(160deg, #EEF1F3 0%, #AEB6BC 34%, #6F7980 56%, #B7BFC5 80%, #E4E8EB 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .95), inset 0 -2px 0 rgba(0, 0, 0, .3), inset 0 0 0 1px rgba(0, 0, 0, .25);
}
.con-stamp__knob {
  position: absolute;
  left: 50%; top: 50%;
  width: 46px; height: 46px;
  margin: -23px 0 0 -23px;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 32%, #FFFFFF 0, #C9D0D5 30%, #6B757C 72%, #3E464C 100%);
  box-shadow: 0 2px 3px rgba(0, 0, 0, .45), 0 0 0 5px rgba(0, 0, 0, .08), inset 0 -2px 3px rgba(0, 0, 0, .3);
}
.con-stamp__shadow {
  position: absolute;
  inset: 4px;
  opacity: 0;
  border-radius: 18px;
  /* sfumata con box-shadow e non con filter: resta morbida anche in modalità leggera */
  background: rgba(0, 0, 0, .5);
  box-shadow: 0 0 18px 8px rgba(0, 0, 0, .5);
}
.con-stamp__flash {
  position: absolute;
  left: 50%; top: 50%;
  width: 300px; height: 190px;
  margin: -95px 0 0 -150px;
  opacity: 0;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 236, 200, .55), rgba(255, 170, 80, .18) 55%, transparent 100%);
}
.con-stamp__sparks i {
  position: absolute;
  left: 50%; top: 50%;
  width: 3px; height: 3px;
  margin: -1.5px 0 0 -1.5px;
  opacity: 0;
  border-radius: 50%;
  background: #FFE6B5;
  box-shadow: 0 0 6px 1px rgba(255, 170, 80, .9);
}

/* ---------- Colonna accanto: cosa succede dopo ---------- */
.con-next { display: grid; gap: 28px; align-content: start; }
.con-next__title { font-family: var(--font-display); font-size: var(--fs-h3); font-stretch: 112%; font-weight: 720; line-height: 1.1; letter-spacing: -.01em; }
.con-next__list { list-style: none; display: grid; gap: 24px; }
/* una linea con tre punti, senza numeri: i numeri sono dei passi del modulo. Tratteggiata, perché è
   tutto ancora da fare; ogni tratto va da un punto al successivo. */
.con-next__item { position: relative; display: grid; grid-template-columns: 7px minmax(0, 1fr); gap: 20px; align-items: start; }
.con-next__item::before {
  content: "";
  width: 7px;
  height: 7px;
  margin-top: 7px;
  border-radius: 50%;
  background: rgba(195, 202, 208, .6);
}
.con-next__item:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 3px;
  top: 20px;
  bottom: -27px;
  border-left: 1px dashed rgba(195, 202, 208, .32);
}
.con-next__name { font-family: var(--font-display); font-size: 1.08rem; font-stretch: 106%; font-weight: 660; line-height: 1.25; }
.con-next__item p { margin-top: 4px; color: var(--fg-2); font-size: var(--fs-small); line-height: 1.55; }

.con-privacy-plate {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  padding: 18px 20px;
  border-radius: var(--radius);
  background: var(--brushed), linear-gradient(180deg, #20262A, #1A1E21);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), inset 0 0 0 1px var(--line), 0 18px 30px -24px rgba(0, 0, 0, .8);
  font-size: var(--fs-small);
  line-height: 1.55;
  color: var(--fg-2);
}
.con-privacy-plate strong { color: var(--fg); font-weight: 620; }
.con-privacy-plate a { color: var(--fg); }
.con-privacy-plate__icon svg { width: 24px; height: 24px; color: var(--blu); }

@media (min-width: 700px) and (max-width: 1099px) {
  /* in colonna unica, le tre stazioni si mettono in fila come una linea di lavorazione */
  .con-next__list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
  .con-next__item { grid-template-columns: 1fr; gap: 14px; }
  .con-next__item::before { margin-top: 0; }
  .con-next__item:not(:last-child)::after { left: 17px; right: -14px; top: 3px; bottom: auto; border-left: 0; border-top: 1px dashed rgba(195, 202, 208, .32); }
  .con-privacy-plate { max-width: 40rem; }
}

/* ---------- Sezione d'alluminio: un flusso in tre righe ---------- */
.con-sample {
  position: relative;
  margin: 0;
  padding: clamp(24px, 3.6vw, 48px);
  border-radius: var(--radius);
  background:
    linear-gradient(rgba(21, 24, 26, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(21, 24, 26, .045) 1px, transparent 1px),
    linear-gradient(180deg, #F7F8F9, #ECEFF1);
  background-size: 24px 24px, 24px 24px, auto;
  box-shadow: inset 0 1px 0 #fff, inset 0 0 0 1px rgba(21, 24, 26, .1), 0 24px 44px -32px rgba(21, 24, 26, .5);
}
.con-sample__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; }
.con-sample__ref { font-family: var(--font-mono); font-size: .62rem; letter-spacing: .16em; text-transform: uppercase; color: var(--fg-3); }
.con-sample__q { margin: clamp(22px, 3vw, 34px) 0 0; }
.con-sample__q p {
  max-width: 34em;
  font-family: var(--font-display);
  font-stretch: 108%;
  font-weight: 560;
  font-size: clamp(1.3rem, 2.3vw, 1.95rem);
  line-height: 1.75;
  letter-spacing: -.01em;
  color: var(--fg);
}
.con-sample__part {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-decoration-color: rgba(47, 110, 158, .5);
  text-underline-offset: .3em;
  border-radius: 4px;
  transition: background-color var(--t-ui) var(--ease-out), text-decoration-color var(--t-ui) var(--ease-out);
}
.con-balloon {
  display: inline-grid;
  place-items: center;
  width: 1.5em;
  height: 1.5em;
  margin-right: .14em;
  vertical-align: .62em;
  border-radius: 50%;
  border: 1.5px solid var(--blu-scuro);
  font-family: var(--font-mono);
  font-size: .62rem;
  font-weight: 600;
  font-style: normal;
  letter-spacing: 0;
  line-height: 1;
  color: var(--blu-scuro);
  background: #fff;
  text-decoration: none;
}
.con-sample__q .con-balloon { font-size: .4em; }
.con-sample__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px; margin-top: clamp(20px, 2.6vw, 30px); color: var(--fg-2); font-size: var(--fs-small); }
.con-sample__foot .link-arrow { min-height: 44px; }

.con-guide__grid { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 2vw, 24px); margin-top: clamp(20px, 2.6vw, 28px); }
.con-guide__item .plate__code { display: flex; align-items: center; gap: 10px; }
.con-guide__item .con-balloon { margin: 0; width: 24px; height: 24px; vertical-align: 0; transition: background-color var(--t-ui) var(--ease-out), color var(--t-ui) var(--ease-out), box-shadow var(--t-ui) var(--ease-out); }
/* acceso: la parte è stata riconosciuta nella frase */
.con-guide__item .con-balloon { background: var(--blu-scuro); color: #fff; box-shadow: 0 0 0 3px rgba(47, 110, 158, .16); }
.js-motion .con-guide.is-armed .con-guide__item:not(.is-on) .con-balloon { background: #fff; color: var(--blu-scuro); box-shadow: none; }
/* in attesa: il pallino è un anello tratteggiato vuoto («da fare»); riconosciuta la parte, scatta pieno col numero */
.js-motion .con-guide.is-armed .con-sample__part:not(.is-on) .con-balloon { border-style: dashed; border-color: rgba(47, 110, 158, .8); background: transparent; color: transparent; transform: scale(.88); }
.js-motion .con-guide.is-armed .con-sample__part .con-balloon { transition: color 200ms var(--ease-out) 80ms, background-color 200ms var(--ease-out), border-color 200ms var(--ease-out), transform 520ms var(--ease-clack); }
.js-motion .con-guide.is-armed .con-sample__part:not(.is-on) { text-decoration-color: rgba(47, 110, 158, 0); }

/* passando su una targa si illumina la sua parte della frase, e viceversa */
.con-guide:has(.con-guide__item[data-k="1"]:hover) .con-sample__part[data-k="1"],
.con-guide:has(.con-guide__item[data-k="2"]:hover) .con-sample__part[data-k="2"],
.con-guide:has(.con-guide__item[data-k="3"]:hover) .con-sample__part[data-k="3"] { background: rgba(47, 110, 158, .1); text-decoration-color: var(--blu-scuro); }
.con-guide:has(.con-sample__part[data-k="1"]:hover) .con-guide__item[data-k="1"],
.con-guide:has(.con-sample__part[data-k="2"]:hover) .con-guide__item[data-k="2"],
.con-guide:has(.con-sample__part[data-k="3"]:hover) .con-guide__item[data-k="3"] { outline: 2px solid rgba(47, 110, 158, .45); outline-offset: 3px; }

@media (max-width: 860px) {
  .con-guide__grid { grid-template-columns: 1fr; }
}

/* ---------- Domande ---------- */
.con-faq__grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(28px, 5vw, 80px); align-items: start; }
.con-faq__head { margin-bottom: 0; }
@media (max-width: 900px) { .con-faq__grid { grid-template-columns: 1fr; } }

/* ---------- Scheda stretta (telefono): regole sulla larghezza della scheda, non dello schermo ---------- */
@container con-sheet (max-width: 520px) {
  .con-sheet__head { padding-bottom: 14px; }
  /* i passi in colonna stretta: LED e numero sopra, il nome sotto, su due righe al massimo */
  .con-steps { gap: 4px; }
  .con-steps__btn { flex-wrap: wrap; align-content: center; gap: 4px 7px; padding: 8px 4px 8px 0; }
  .con-steps__name { flex-basis: 100%; font-size: .75rem; line-height: 1.3; }
  .con-keys { grid-template-columns: 1fr; gap: 10px; }
  .con-key { padding: 13px 14px 14px 12px; gap: 12px; }
  .con-fields { grid-template-columns: 1fr; gap: 20px; }
  .con-nav { gap: 10px; }
  .con-nav .btn { padding: 0 18px; }
  .con-receipt__head { grid-template-columns: 1fr; min-height: 0; }
  .con-stamp { order: -1; justify-self: end; width: 176px; height: 94px; margin: 4px 4px 0 0; }
  .con-stamp__word { font-size: 1.32rem; }
  .con-receipt__list { grid-template-columns: 1fr; }
  .con-receipt__list dt { padding: 12px 0 0; border-bottom: 0; }
  .con-receipt__list dd { padding: 2px 0 12px; }
  /* sul telefono i passi non si sovrappongono: la scheda si accorcia e si riparte dall'alto */
  .con-form.is-stepped .con-stack { display: block; }
  .con-form.is-stepped .con-step:not(.is-current) { display: none; }
  .con-band.is-empty { display: none; }
  /* sul telefono la scheda si accorcia comunque a ogni passo: il riepilogo va a capo e si legge tutto */
  .con-band { flex-wrap: wrap; }
  .con-band__v { white-space: normal; }
}
@container con-sheet (min-width: 521px) {
  /* a scheda larga i tre passi stanno a distanze uguali, dal bordo sinistro al destro (in colonne uguali
     «Il contesto», corto, lasciava un vuoto largo prima del terzo passo) */
  .con-steps { display: flex; justify-content: space-between; gap: 16px; }
}
@container con-sheet (min-width: 600px) {
  .con-fields--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  /* tre campi in fila: un'etichetta che va a capo («Telefono (facoltativo)») non abbassa il suo campo */
  .con-fields--3 > .field:not(.con-f--full) { grid-template-rows: minmax(2.2rem, auto); }
  .con-fields--3 > .field:not(.con-f--full) > .field__label { align-self: end; }
}
@media (max-width: 380px) {
  .con-sheet { padding-inline: 16px; }
  .con-nav .btn { padding: 0 14px; }
}

/* ---------- Movimento ridotto ----------
   Il cambio di passo si accende in dissolvenza solo sotto .js-motion: con il movimento ridotto il passo
   compare e basta. Il tasto preselezionato non si preme da solo (contatti.js) e il timbro resta fermo. */