/**
 * Come funziona — Claude Design (_design/come-funziona.html). Sessione 22.
 *
 * Struttura (CLAUDE.md "CSS for showcase pages"): design system condiviso
 * (_design/stile.css via la copia già corretta nel plugin sitiamo-lead-traslochi,
 * stessa base di home.css) + stili specifici di questa pagina (da _design/stile.css,
 * sezione 15 "Pagine pubbliche interne"), scopati sotto body.sitiamo-page--come-funziona.
 */

/* =========================================================
   Sistema visivo — foglio di stile unico, riutilizzabile.
   Portabile su template PHP di WordPress: solo CSS a mano.
   ========================================================= */

/* ---------- 1. Variabili ---------- */
:root {
  /* Colori — verde petrolio */
  --c-petrolio-900: #06211f;
  --c-petrolio-800: #0b302d;  /* primario */
  --c-petrolio-700: #12423e;
  --c-petrolio-600: #1b5751;
  --c-petrolio-200: #c3d6d2;
  --c-petrolio-100: #e2ebe8;

  /* Colori — lime (solo azioni cliccabili) */
  --c-lime-500: #c6f04f;
  --c-lime-600: #b4e13a;      /* hover */
  --c-lime-700: #9ec92c;      /* active */

  /* Fondo e superfici */
  --c-fondo: #f8f8f5;
  --c-superficie: #ffffff;
  --c-superficie-alt: #f1f2ee;

  /* Testo */
  --c-testo: #0f1a18;         /* quasi nero, punta di verde */
  --c-testo-medio: #4a5a56;
  --c-testo-tenue: #7c8b87;
  --c-testo-inverso: #f4f7f5;

  /* Bordi */
  --c-bordo: #dfe2dc;
  --c-bordo-forte: #c3c9c1;

  /* Stati */
  --c-disabilitato-fondo: #e7e9e4;
  --c-disabilitato-testo: #a3aca8;
  --c-errore: #a8342a;
  --c-focus: #0b302d;

  /* Tipografia */
  --font-titoli: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-testo: "Source Sans 3", "Helvetica Neue", Helvetica, Arial, sans-serif;

  --t-xs: 0.8125rem;   /* 13px — note, etichette */
  --t-sm: 0.9375rem;   /* 15px */
  --t-base: 1.0625rem; /* 17px — corpo, campi */
  --t-lg: 1.1875rem;   /* 19px */
  --t-xl: 1.4375rem;   /* 23px */
  --t-2xl: 1.875rem;   /* 30px */
  --t-3xl: 2.5rem;     /* 40px */
  --t-4xl: clamp(2.125rem, 1.35rem + 3.2vw, 3.5rem); /* domanda */

  --peso-normale: 400;
  --peso-medio: 500;
  --peso-semi: 600;
  --peso-forte: 700;

  --interlinea-strette: 1.08;
  --interlinea-titoli: 1.16;
  --interlinea-testo: 1.5;

  /* Spaziature — passo 4px */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.25rem;
  --s-6: 1.5rem;
  --s-8: 2rem;
  --s-10: 2.5rem;
  --s-12: 3rem;
  --s-16: 4rem;
  --s-20: 5rem;
  --s-24: 6rem;

  /* Raggi */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 18px;
  --r-xl: 24px;
  --r-pill: 999px;

  /* Ombre — poche e leggere */
  --ombra-1: 0 1px 2px rgba(11, 48, 45, 0.05);
  --ombra-2: 0 8px 24px -12px rgba(11, 48, 45, 0.18);

  /* Misure */
  --larghezza-contenuto: 70%;
  --larghezza-testo: 34rem;
  --tocco-min: 48px;
  --transizione: 140ms ease;
}

/* ---------- 2. Reset essenziale ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--c-fondo);
  color: var(--c-testo);
  font-family: var(--font-testo);
  font-size: var(--t-base);
  line-height: var(--interlinea-testo);
  -webkit-font-smoothing: antialiased;
  text-wrap: pretty;
}
h1, h2, h3, h4 {
  font-family: var(--font-titoli);
  font-weight: var(--peso-semi);
  line-height: var(--interlinea-titoli);
  letter-spacing: -0.015em;
  margin: 0;
  text-wrap: balance;
}
p { margin: 0; }
[hidden] { display: none !important; }
img, svg { display: block; max-width: 100%; }
a { color: var(--c-petrolio-700); text-decoration: underline; text-underline-offset: 2px; }
a:hover { color: var(--c-petrolio-900); }
:focus-visible {
  outline: 2px solid var(--c-focus);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}

/* ---------- 3. Tipografia ---------- */
.t-domanda { font-size: var(--t-4xl); line-height: var(--interlinea-strette); letter-spacing: -0.025em; }
.t-titolo { font-size: var(--t-2xl); }
.t-sottotitolo { font-size: var(--t-xl); }
.t-corpo { font-size: var(--t-base); }
.t-piccolo { font-size: var(--t-sm); color: var(--c-testo-medio); }
.t-nota { font-size: var(--t-xs); color: var(--c-testo-tenue); }
.t-etichetta {
  font-family: var(--font-titoli);
  font-size: var(--t-xs);
  font-weight: var(--peso-semi);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-testo-medio);
}

/* ---------- 4. Wordmark ---------- */
.wordmark {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  font-family: var(--font-titoli);
  font-size: var(--t-lg);
  font-weight: var(--peso-forte);
  letter-spacing: -0.02em;
  color: var(--c-petrolio-800);
  text-decoration: none;
}
.wordmark:hover { color: var(--c-petrolio-900); }
.wordmark__segno { flex: none; }
.wordmark__nota {
  font-family: var(--font-testo);
  font-size: var(--t-xs);
  font-weight: var(--peso-normale);
  letter-spacing: 0;
  color: var(--c-testo-tenue);
}

/* ---------- 5. Pulsanti ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-3);
  min-height: var(--tocco-min);
  padding: var(--s-3) var(--s-8);
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  font-family: var(--font-titoli);
  font-size: var(--t-base);
  font-weight: var(--peso-semi);
  letter-spacing: -0.01em;
  line-height: 1.2;
  cursor: pointer;
  text-decoration: none;
  transition: background var(--transizione), color var(--transizione),
              border-color var(--transizione), transform var(--transizione);
}
.btn:active { transform: translateY(1px); }

.btn--primario {
  background: var(--c-lime-500);
  color: var(--c-petrolio-900);
}
.btn--primario:hover { background: var(--c-lime-600); }
.btn--primario:active { background: var(--c-lime-700); }

.btn--secondario {
  background: transparent;
  color: var(--c-petrolio-800);
  border-color: var(--c-bordo-forte);
}
.btn--secondario:hover { background: var(--c-petrolio-100); border-color: var(--c-petrolio-200); }

.btn--testo {
  background: none;
  color: var(--c-petrolio-700);
  padding-inline: var(--s-2);
}
.btn--testo:hover { color: var(--c-petrolio-900); }

.btn[disabled], .btn[aria-disabled="true"] {
  background: var(--c-disabilitato-fondo);
  color: var(--c-disabilitato-testo);
  border-color: transparent;
  cursor: not-allowed;
  transform: none;
}
.btn--largo { width: 100%; }

/* ---------- 6. Campi ---------- */
.campo { display: flex; flex-direction: column; gap: var(--s-2); }
.campo__etichetta { font-size: var(--t-sm); font-weight: var(--peso-semi); color: var(--c-testo); }
.campo__aiuto { font-size: var(--t-xs); color: var(--c-testo-tenue); }
.campo__controllo,
input[type="text"], input[type="tel"], input[type="email"], textarea, select {
  width: 100%;
  min-height: var(--tocco-min);
  padding: var(--s-3) var(--s-4);
  background: var(--c-superficie);
  border: 1px solid var(--c-bordo);
  border-radius: var(--r-md);
  font-family: var(--font-testo);
  font-size: var(--t-base);
  color: var(--c-testo);
  transition: border-color var(--transizione), box-shadow var(--transizione);
}
.campo__controllo::placeholder { color: var(--c-testo-tenue); }
.campo__controllo:hover { border-color: var(--c-bordo-forte); }
.campo__controllo:focus {
  outline: none;
  border-color: var(--c-petrolio-800);
  box-shadow: 0 0 0 3px rgba(11, 48, 45, 0.12);
}
.campo__controllo[disabled] {
  background: var(--c-disabilitato-fondo);
  color: var(--c-disabilitato-testo);
  border-color: transparent;
  cursor: not-allowed;
}
.campo--errore .campo__controllo { border-color: var(--c-errore); }
.campo__errore { font-size: var(--t-xs); color: var(--c-errore); }

/* ---------- 7. Card ---------- */
.card {
  background: var(--c-superficie);
  border: 1px solid var(--c-bordo);
  border-radius: var(--r-lg);
  padding: var(--s-6);
  box-shadow: var(--ombra-1);
}
.card--grande { padding: var(--s-8); border-radius: var(--r-xl); }
.card--piatta { box-shadow: none; }

/* ---------- 8. Card-opzione (radio) ---------- */
.opzioni {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-4);
  border: 0;
  padding: 0;
  margin: 0;
  min-width: 0;
}
.opzioni--due { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.opzioni--compatte .opzione__corpo { min-height: 0; padding: var(--s-4) var(--s-5); }
.opzioni--compatte .opzione__testi { margin-top: var(--s-2); }
.opzione { position: relative; display: flex; }
.opzione__input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.opzione__corpo {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  min-height: 152px;
  padding: var(--s-5);
  background: var(--c-superficie);
  border: 1px solid var(--c-bordo);
  border-radius: var(--r-lg);
  transition: border-color var(--transizione), background var(--transizione),
              box-shadow var(--transizione);
}
.opzione__icona { color: var(--c-petrolio-700); }
.opzione__testi { display: flex; flex-direction: column; gap: 2px; margin-top: auto; }
.opzione__nome {
  display: block;
  font-family: var(--font-titoli);
  font-size: var(--t-lg);
  font-weight: var(--peso-semi);
  letter-spacing: -0.015em;
}
.opzione__spiega {
  display: block;
  font-size: var(--t-sm);
  line-height: 1.4;
  color: var(--c-testo-medio);
}
.opzione__input:hover + .opzione__corpo {
  border-color: var(--c-petrolio-200);
  box-shadow: var(--ombra-2);
}
.opzione__input:focus-visible + .opzione__corpo {
  outline: 2px solid var(--c-focus);
  outline-offset: 3px;
}
.opzione__input:checked + .opzione__corpo {
  border-color: var(--c-petrolio-800);
  box-shadow: inset 0 0 0 1px var(--c-petrolio-800);
  background: var(--c-superficie);
}
.opzione__input:checked + .opzione__corpo .opzione__icona { color: var(--c-petrolio-800); }
/* segno di selezione */
.opzione__input:checked + .opzione__corpo::after {
  content: "";
  position: absolute;
  top: var(--s-5);
  right: var(--s-5);
  width: 20px;
  height: 20px;
  border-radius: var(--r-pill);
  background: var(--c-lime-500);
}

/* ---------- 9. Avanzamento ---------- */
.avanzamento { display: flex; align-items: center; gap: var(--s-4); }
.avanzamento__testo { font-size: var(--t-xs); color: var(--c-testo-medio); white-space: nowrap; }
.avanzamento__barra { display: flex; gap: 4px; width: 132px; }
.avanzamento__tacca {
  flex: 1;
  height: 3px;
  border-radius: var(--r-pill);
  background: var(--c-bordo);
}
.avanzamento__tacca--attiva { background: var(--c-petrolio-800); }

/* ---------- 10. Impianto di pagina ---------- */
.pagina {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}
.contenitore {
  width: 100%;
  max-width: var(--larghezza-contenuto);
  margin-inline: auto;
  padding-inline: var(--s-6);
}
.intestazione {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-6);
  padding-block: var(--s-6);
}
.principale { flex: 1; display: flex; flex-direction: column; justify-content: center; padding-block: var(--s-10) var(--s-12); }

@media (max-width: 900px) {
  .opzioni, .opzioni--due { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.opzioni--compatte .opzione__corpo { min-height: 0; padding: var(--s-4) var(--s-5); }
.opzioni--compatte .opzione__testi { margin-top: var(--s-2); }
}
@media (max-width: 760px) {
  .contenitore { max-width: 90%; padding-inline: 0; }
  /* nell'area imprese la larghezza è fissata a 78rem: lì serve il padding */
  .lavoro .contenitore { max-width: 100%; padding-inline: var(--s-5); }
  .modulo-stretto { padding-inline: var(--s-5); }
  /* la barra fissa in fondo non deve coprire l'ultima card */
  .modulo-stretto { padding-bottom: calc(var(--s-24) + var(--s-6) + env(safe-area-inset-bottom)); }
  /* barra alta: etichetta di sezione fuori, voci su una riga */
  .barra-lavoro__sezione { display: none; }
  .barra-lavoro__dentro { gap: var(--s-4); }
  .barra-lavoro a:not(.wordmark) { white-space: nowrap; }
  .barra-lavoro .wordmark { font-size: var(--t-sm); }
}
@media (max-width: 560px) {
  .opzioni, .opzioni--due { grid-template-columns: 1fr; gap: var(--s-3); }
  .opzione__corpo {
    min-height: 0;
    flex-direction: row;
    align-items: center;
    gap: var(--s-4);
    padding: var(--s-4);
  }
  .opzione__testi { margin-top: 0; }
  .opzione__nome { font-size: var(--t-base); }
  .opzione__input:checked + .opzione__corpo::after { top: 50%; right: var(--s-4); margin-top: -10px; }
  .principale { justify-content: flex-start; padding-block: var(--s-6) var(--s-10); }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}


/* =========================================================
   11. Passi del modulo — componenti condivisi (passi 2-6)
   ========================================================= */
.domanda { max-width: none; margin-bottom: var(--s-3); }
.domanda-nota { max-width: none; color: var(--c-testo-medio); margin-bottom: var(--s-8); }

.intestazione__sinistra { display: flex; align-items: center; gap: var(--s-6); min-width: 0; }
.indietro {
  display: inline-flex; align-items: center; gap: var(--s-2);
  min-height: var(--tocco-min);
  font-size: var(--t-sm);
  color: var(--c-petrolio-700);
  text-decoration: none;
}
.indietro:hover { color: var(--c-petrolio-900); }

/* blocchi di domande, per non sembrare un interrogatorio */
.blocco-form {
  background: var(--c-superficie);
  border: 1px solid var(--c-bordo);
  border-radius: var(--r-xl);
  padding: var(--s-6);
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
}
.blocco-form + .blocco-form { margin-top: var(--s-4); }
.percorso-ab .blocco-form + .blocco-form { margin-top: 0; }
.blocco-form__testata { display: flex; align-items: baseline; gap: var(--s-3); flex-wrap: wrap; }
.blocco-form__titolo {
  display: flex; align-items: center; gap: var(--s-3);
  font-family: var(--font-titoli); font-size: var(--t-lg); font-weight: var(--peso-semi);
  letter-spacing: -0.015em;
}
.blocco-form__segno { flex: none; color: var(--c-petrolio-700); }
.facoltativo {
  font-family: var(--font-testo);
  font-size: var(--t-xs);
  font-weight: var(--peso-normale);
  color: var(--c-testo-tenue);
}

.griglia-campi { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4); }
.griglia-campi--tre { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.campo--intero { grid-column: 1 / -1; }

/* percorso A → B tra due indirizzi */
.percorso-ab { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: var(--s-4); align-items: stretch; }
.percorso-ab--doppio { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.percorso-ab__giunto {
  align-self: stretch;
  width: 26px;
  border-left: 2px dashed var(--c-petrolio-200);
  margin-inline: 12px;
  overflow: hidden;
}
.pallino-ab {
  flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px;
  border-radius: var(--r-pill);
  font-family: var(--font-titoli); font-size: var(--t-xs); font-weight: var(--peso-forte);
}
.pallino-ab--a { border: 2px solid var(--c-petrolio-700); color: var(--c-petrolio-700); }
.pallino-ab--b { background: var(--c-petrolio-800); color: var(--c-lime-500); }

/* campo con suggerimenti (comune) */
.autocompleta { position: relative; z-index: 60; }
.autocompleta__elenco {
  position: absolute;
  left: 0; right: 0; top: calc(100% + 6px);
  z-index: 70;
  margin: 0; padding: var(--s-2);
  list-style: none;
  background: var(--c-superficie);
  border: 1px solid var(--c-bordo-forte);
  border-radius: var(--r-md);
  box-shadow: 0 20px 44px -16px rgba(6, 33, 31, 0.38);
  max-height: 260px;
  overflow-y: auto;
}
.autocompleta__elenco[hidden] { display: none; }
.autocompleta__voce {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
  width: 100%;
  min-height: 44px;
  padding: var(--s-2) var(--s-3);
  border: 0; border-radius: var(--r-sm);
  background: transparent;
  font-family: var(--font-testo); font-size: var(--t-base); color: var(--c-testo);
  text-align: left; cursor: pointer;
}
.autocompleta__voce:hover, .autocompleta__voce[aria-selected="true"] { background: var(--c-petrolio-100); }
.autocompleta__sigla { flex: none; font-size: var(--t-xs); color: var(--c-testo-tenue); }
.autocompleta__vuoto { padding: var(--s-3); font-size: var(--t-sm); color: var(--c-testo-tenue); }
.comune-scelto {
  display: none;
  align-items: center; gap: var(--s-3);
  min-height: var(--tocco-min);
  padding: var(--s-2) var(--s-3) var(--s-2) var(--s-4);
  background: var(--c-petrolio-100);
  border: 1px solid var(--c-petrolio-200);
  border-radius: var(--r-md);
}
.comune-scelto[data-attivo] { display: flex; }
.comune-scelto__nome { font-size: var(--t-base); }
.comune-scelto__sigla {
  font-family: var(--font-titoli); font-size: var(--t-xs); font-weight: var(--peso-semi);
  letter-spacing: 0.04em; color: var(--c-petrolio-700);
}
.comune-scelto__cambia {
  margin-left: auto;
  min-height: 36px; padding: 0 var(--s-4);
  border: 1px solid var(--c-bordo-forte); border-radius: var(--r-pill);
  background: var(--c-superficie);
  font-family: var(--font-testo); font-size: var(--t-sm); color: var(--c-petrolio-800);
  cursor: pointer;
}
.comune-scelto__cambia:hover { background: var(--c-petrolio-100); }

/* piano esatto, quando si sceglie +5° */
.piano-esatto { display: none; margin-top: var(--s-4); max-width: 12rem; }
.piano-esatto[data-attivo] { display: flex; flex-direction: column; gap: var(--s-2); }
.piano-esatto input { width: 100%; }

/* scelte brevi in fila (piano, ascensore, stanze) */
.scelte { display: flex; flex-wrap: wrap; gap: var(--s-2); border: 0; padding: 0; margin: 0; min-width: 0; }
.scelta { position: relative; display: inline-flex; }
.scelta__input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.scelta__corpo {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 0 var(--s-5);
  border: 1px solid var(--c-bordo);
  border-radius: var(--r-pill);
  background: var(--c-superficie);
  font-size: var(--t-sm);
  transition: border-color var(--transizione), background var(--transizione), box-shadow var(--transizione);
}
.scelta__input:hover + .scelta__corpo { border-color: var(--c-bordo-forte); }
.scelta__input:focus-visible + .scelta__corpo { outline: 2px solid var(--c-focus); outline-offset: 3px; }
.scelta__input:checked + .scelta__corpo {
  border-color: var(--c-petrolio-800);
  box-shadow: inset 0 0 0 1px var(--c-petrolio-800);
  background: var(--c-petrolio-100);
}

/* interruttori sì/no */
.interruttori { display: flex; flex-direction: column; border: 0; padding: 0; margin: 0; min-width: 0; }
.interruttore {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-5);
  min-height: 60px;
  padding: var(--s-3) 0;
  cursor: pointer;
}
.interruttore + .interruttore { border-top: 1px solid var(--c-bordo); }
.interruttore__testi { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.interruttore__nome { font-size: var(--t-base); }
.interruttore__spiega { font-size: var(--t-sm); color: var(--c-testo-medio); }
.interruttore__input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.interruttore__leva {
  flex: none; position: relative;
  width: 56px; height: 32px;
  border-radius: var(--r-pill);
  background: var(--c-disabilitato-fondo);
  border: 1px solid var(--c-bordo);
  transition: background var(--transizione), border-color var(--transizione);
}
.interruttore__leva::after {
  content: "";
  position: absolute; top: 3px; left: 3px;
  width: 24px; height: 24px;
  border-radius: var(--r-pill);
  background: var(--c-superficie);
  box-shadow: var(--ombra-1);
  transition: transform var(--transizione);
}
.interruttore__input:checked + .interruttore__leva { background: var(--c-petrolio-800); border-color: var(--c-petrolio-800); }
.interruttore__input:checked + .interruttore__leva::after { transform: translateX(24px); }
.interruttore__input:focus-visible + .interruttore__leva { outline: 2px solid var(--c-focus); outline-offset: 3px; }

/* caricamento file */
.caricatore {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--s-3);
  min-height: 220px;
  padding: var(--s-8);
  text-align: center;
  background: var(--c-superficie);
  border: 2px dashed var(--c-bordo-forte);
  border-radius: var(--r-xl);
  transition: border-color var(--transizione), background var(--transizione);
}
.caricatore--attivo { border-color: var(--c-petrolio-800); background: var(--c-petrolio-100); }
.caricatore__segno { color: var(--c-petrolio-700); }
.caricatore__titolo { font-family: var(--font-titoli); font-size: var(--t-lg); font-weight: var(--peso-semi); }
.caricatore__nota { font-size: var(--t-sm); color: var(--c-testo-medio); max-width: 26rem; }
.caricatore input[type="file"] { position: absolute; opacity: 0; width: 1px; height: 1px; }

.file-lista { list-style: none; padding: 0; margin: var(--s-4) 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-4); }
.file {
  position: relative;
  display: flex; flex-direction: column; gap: var(--s-3);
  padding: var(--s-4);
  background: var(--c-superficie);
  border: 1px solid var(--c-bordo);
  border-radius: var(--r-lg);
}
.file__anteprima {
  height: 116px;
  border-radius: var(--r-md);
  background: var(--c-superficie-alt);
  display: flex; align-items: center; justify-content: center;
  color: var(--c-testo-tenue);
  overflow: hidden;
}
.file__anteprima img { width: 100%; height: 100%; object-fit: cover; display: block; }
.galleria img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: var(--r-md); }
.galleria li { padding: 0; overflow: hidden; }
.file__nome { font-size: var(--t-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file__peso { font-size: var(--t-xs); color: var(--c-testo-tenue); }
.file__togli {
  position: absolute; top: var(--s-3); right: var(--s-3);
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--c-bordo);
  border-radius: var(--r-pill);
  background: var(--c-superficie);
  color: var(--c-testo-medio);
  font-size: var(--t-base);
  line-height: 1;
  cursor: pointer;
}
.file__togli:hover { color: var(--c-errore); border-color: var(--c-errore); }
.file__barra { height: 4px; border-radius: var(--r-pill); background: var(--c-superficie-alt); overflow: hidden; }
.file__barra span { display: block; height: 100%; background: var(--c-petrolio-800); }
.file--in-corso .file__anteprima { opacity: 0.5; }
.file--errore { border-color: var(--c-errore); }
.file__errore { font-size: var(--t-xs); color: var(--c-errore); line-height: 1.35; }
.file__annulla {
  align-self: flex-start;
  min-height: 34px; padding: 0 var(--s-4);
  border: 1px solid var(--c-bordo-forte); border-radius: var(--r-pill);
  background: var(--c-superficie);
  font-family: var(--font-testo); font-size: var(--t-sm); color: var(--c-petrolio-800);
  cursor: pointer;
}
.file__annulla:hover { background: var(--c-petrolio-100); }
.caricatore--spento {
  border-style: solid;
  border-color: var(--c-bordo);
  background: var(--c-disabilitato-fondo);
  color: var(--c-testo-tenue);
  cursor: not-allowed;
}
.caricatore--spento .caricatore__segno, .caricatore--spento .caricatore__titolo { color: var(--c-testo-tenue); }
.formati { margin-top: var(--s-3); font-size: var(--t-xs); color: var(--c-testo-tenue); }
.avviso {
  display: flex; gap: var(--s-4);
  margin-top: var(--s-4);
  padding: var(--s-5);
  background: var(--c-petrolio-100);
  border: 1px solid var(--c-petrolio-200);
  border-radius: var(--r-lg);
}
.avviso__segno { flex: none; color: var(--c-petrolio-700); }
.avviso__titolo { font-family: var(--font-titoli); font-size: var(--t-base); font-weight: var(--peso-semi); }
.avviso__testo { font-size: var(--t-sm); color: var(--c-petrolio-700); margin-top: var(--s-1); }
.avviso__azioni { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-4); }

/* consenso */
.consenso { display: flex; align-items: flex-start; gap: var(--s-4); }
.consenso input[type="checkbox"] { flex: none; width: 24px; height: 24px; margin-top: 2px; accent-color: var(--c-petrolio-800); }
.consenso__testo { font-size: var(--t-sm); color: var(--c-testo-medio); }

/* ---------- barra di navigazione del modulo ---------- */
.navigazione {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  grid-template-areas: "indietro rassicura avanti";
  align-items: center;
  gap: var(--s-5);
  margin-top: var(--s-10);
  padding-top: var(--s-6);
  border-top: 1px solid var(--c-bordo);
}
.navigazione__indietro { grid-area: indietro; justify-self: start; }
.navigazione__rassicura {
  grid-area: rassicura;
  justify-self: center;
  text-align: center;
  font-size: var(--t-sm);
  color: var(--c-testo-tenue);
  max-width: 24rem;
}
.navigazione__avanti { grid-area: avanti; justify-self: end; }
.navigazione__passo { display: none; }

@media (max-width: 760px) {
  .navigazione {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 40;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas: "passo passo" "indietro avanti";
    gap: var(--s-3);
    margin: 0;
    padding: var(--s-4) var(--s-4) calc(var(--s-4) + env(safe-area-inset-bottom));
    background: var(--c-superficie);
    border-top: 1px solid var(--c-bordo);
    box-shadow: 0 -10px 24px -18px rgba(6, 33, 31, 0.4);
  }
  .navigazione__indietro { grid-area: indietro; justify-self: start; }
  .navigazione__avanti { grid-area: avanti; justify-self: stretch; }
  .navigazione__avanti .btn { width: 100%; }
  .navigazione__rassicura { display: none; }
  .navigazione__passo {
    grid-area: passo;
    display: flex; align-items: center; gap: var(--s-3);
    font-size: var(--t-xs); color: var(--c-testo-medio);
  }
  .navigazione__passo .avanzamento__barra { width: 84px; }
  .principale { padding-bottom: var(--s-8); }
  .pie { padding-bottom: calc(var(--s-24) + var(--s-8) + env(safe-area-inset-bottom)); }
  .intestazione .avanzamento { display: none; }
}
.pie { padding-block: var(--s-6); }

@media (max-width: 1150px) {
  .percorso-ab, .percorso-ab--doppio { grid-template-columns: 1fr; }
  .percorso-ab__giunto {
    align-self: center;
    justify-self: center;
    width: 60%;
    height: 40px;
    border-left: 0;
    border-top: 2px dashed var(--c-petrolio-200);
    margin: 0;
  }
}
@media (max-width: 900px) {
  .file-lista { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .griglia-campi, .griglia-campi--tre { grid-template-columns: 1fr; }
  .scelte { gap: var(--s-2) var(--s-2); }
  .scelta__corpo { padding: 0 var(--s-4); }
}
@media (max-width: 560px) {
  .blocco-form { padding: var(--s-5); }
  .azioni { flex-direction: column-reverse; align-items: stretch; gap: var(--s-4); }
  .azioni .btn { width: 100%; }
  .azioni__rassicura { text-align: center; }
  .file-lista { grid-template-columns: 1fr; }
  .intestazione { flex-wrap: wrap; gap: var(--s-3); }
}


/* =========================================================
   12. Conferma, errori, consultazione della richiesta
   ========================================================= */
.esito { max-width: 46rem; }
.esito--centrato { max-width: 34rem; margin-inline: auto; text-align: center; }
.esito--centrato .esito__segno { margin-inline: auto; }
.esito--centrato .dopo li { text-align: left; }
.esito--centrato .codice { justify-content: center; text-align: center; }
.esito__segno { color: var(--c-petrolio-700); margin-bottom: var(--s-6); }
.esito__titolo { font-size: var(--t-3xl); letter-spacing: -0.025em; margin-bottom: var(--s-3); }
.esito__sotto { font-size: var(--t-lg); color: var(--c-testo-medio); }

.codice {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-2) var(--s-5);
  margin-top: var(--s-8);
  padding: var(--s-6);
  background: var(--c-petrolio-800);
  border-radius: var(--r-xl);
  color: var(--c-testo-inverso);
}
.codice__etichetta { font-family: var(--font-titoli); font-size: var(--t-xs); font-weight: var(--peso-semi); letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-lime-500); }
.codice__valore { font-family: var(--font-titoli); font-size: var(--t-2xl); font-weight: var(--peso-forte); letter-spacing: 0.02em; color: #fff; }
.codice__nota { flex-basis: 100%; font-size: var(--t-sm); color: rgba(244,247,245,0.75); }

.dopo { list-style: none; padding: 0; margin: var(--s-8) 0 0; display: flex; flex-direction: column; gap: var(--s-5); }
.dopo li { display: flex; gap: var(--s-4); align-items: flex-start; }
.dopo li > span:last-child { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.dopo__segno { flex: none; color: var(--c-petrolio-700); margin-top: 2px; }
.dopo__nome { font-family: var(--font-titoli); font-size: var(--t-base); font-weight: var(--peso-semi); }
.dopo__testo { font-size: var(--t-sm); color: var(--c-testo-medio); }

/* riepilogo errori */
.errori {
  margin-bottom: var(--s-8);
  padding: var(--s-6);
  background: var(--c-superficie);
  border: 1px solid var(--c-errore);
  border-radius: var(--r-lg);
}
.errori__titolo { font-family: var(--font-titoli); font-size: var(--t-lg); font-weight: var(--peso-semi); color: var(--c-errore); }
.errori__elenco { margin: var(--s-3) 0 0; padding-left: var(--s-5); display: flex; flex-direction: column; gap: var(--s-2); }
.errori__elenco a { font-size: var(--t-sm); color: var(--c-errore); }

/* consultazione */
.stato-riga { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-4); margin-top: var(--s-5); }
.pastiglia-stato {
  display: inline-flex; align-items: center; gap: var(--s-3);
  min-height: 36px; padding: 0 var(--s-5);
  border-radius: var(--r-pill);
  font-size: var(--t-sm);
  background: var(--c-petrolio-100);
  color: var(--c-petrolio-800);
  border: 1px solid var(--c-petrolio-200);
}
.pastiglia-stato__punto { width: 9px; height: 9px; border-radius: var(--r-pill); background: var(--c-lime-600); }
.pastiglia-stato--chiusa { background: var(--c-superficie-alt); color: var(--c-testo-medio); border-color: var(--c-bordo); }
.pastiglia-stato--chiusa .pastiglia-stato__punto { background: var(--c-bordo-forte); }

.riepilogo { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; }
.riepilogo li {
  display: grid; grid-template-columns: 11rem minmax(0, 1fr); gap: var(--s-5);
  padding: var(--s-4) 0;
  font-size: var(--t-base);
}
.riepilogo li + li { border-top: 1px solid var(--c-bordo); }
.riepilogo__voce { color: var(--c-testo-tenue); font-size: var(--t-sm); }
.galleria { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-3); }
.galleria li {
  height: 120px;
  display: flex; align-items: center; justify-content: center;
  background: var(--c-superficie-alt);
  border: 1px solid var(--c-bordo);
  border-radius: var(--r-md);
  color: var(--c-testo-tenue);
  font-size: var(--t-xs);
  text-align: center;
  padding: var(--s-3);
}
.zona-pericolo {
  margin-top: var(--s-10);
  padding-top: var(--s-8);
  border-top: 1px solid var(--c-bordo);
}
.btn--pericolo { background: transparent; color: var(--c-errore); border-color: var(--c-errore); }
.btn--pericolo:hover { background: var(--c-errore); color: #fff; }
.conferma {
  margin-top: var(--s-4);
  padding: var(--s-6);
  background: var(--c-superficie);
  border: 1px solid var(--c-errore);
  border-radius: var(--r-lg);
  max-width: 34rem;
}
.conferma[hidden] { display: none; }
.conferma__titolo { font-family: var(--font-titoli); font-size: var(--t-lg); font-weight: var(--peso-semi); }
.conferma__testo { font-size: var(--t-sm); color: var(--c-testo-medio); margin-top: var(--s-2); }
.conferma__azioni { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-5); }

@media (max-width: 760px) {
  .riepilogo li { grid-template-columns: 1fr; gap: var(--s-1); }
  .galleria { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .codice { padding: var(--s-5); }
  .esito__titolo { font-size: var(--t-2xl); }
}


/* =========================================================
   13. Area imprese — strumento di lavoro, non funnel.
   Densità maggiore, meno respiro, lime solo su ciò che costa.
   ========================================================= */
.lavoro { --riga: var(--s-3); background: var(--c-fondo); }
.lavoro .contenitore { max-width: 78rem; }

/* barra alta */
.barra-lavoro {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--c-petrolio-800);
  color: var(--c-testo-inverso);
}
.barra-lavoro__dentro {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-5);
  padding-block: var(--s-3);
}
.barra-lavoro .wordmark { color: #fff; font-size: var(--t-base); }
.barra-lavoro__sezione {
  font-family: var(--font-titoli); font-size: var(--t-xs); font-weight: var(--peso-semi);
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-lime-500);
}
.barra-lavoro__destra { display: flex; align-items: center; gap: var(--s-5); }
/* pastiglia dell'account: si distingue dalle voci di menu */
.barra-lavoro__ditta {
  display: flex; align-items: center; gap: var(--s-3);
  padding: 5px var(--s-4) 5px 5px;
  background: rgba(244, 247, 245, 0.1);
  border: 1px solid rgba(244, 247, 245, 0.18);
  border-radius: var(--r-pill);
  text-decoration: none;
  transition: background var(--transizione), border-color var(--transizione);
}
.barra-lavoro__ditta:hover { background: rgba(244, 247, 245, 0.18); border-color: rgba(244, 247, 245, 0.35); }
.barra-lavoro__sigla {
  flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px;
  border-radius: var(--r-pill);
  background: var(--c-lime-500);
  color: var(--c-petrolio-900);
  font-family: var(--font-titoli); font-size: var(--t-xs); font-weight: var(--peso-forte);
  letter-spacing: 0.02em;
}
.barra-lavoro__nome { font-size: var(--t-sm); color: #fff; white-space: nowrap; }
.barra-lavoro a.barra-lavoro__ditta .barra-lavoro__nome { color: #fff; }
.barra-lavoro__zona { font-size: var(--t-xs); color: rgba(244,247,245,0.65); }
.barra-lavoro a:not(.wordmark) { font-size: var(--t-sm); color: rgba(244,247,245,0.85); text-decoration: none; }
.barra-lavoro a:not(.wordmark):hover { color: #fff; }

/* testata di pagina */
.testata-lavoro { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s-5); flex-wrap: wrap; padding-block: var(--s-10) var(--s-5); }
/* testata del dettaglio: più aria tra briciola, titolo e tratta */
.testata-lavoro--dettaglio { align-items: flex-start; padding-block: var(--s-10) var(--s-6); }
.testata-lavoro--dettaglio h1 { margin-top: var(--s-4); }
.testata-lavoro--dettaglio .tratta { margin-top: var(--s-4); font-size: var(--t-lg); }
.testata-lavoro--dettaglio .testata-lavoro__conta { padding-top: var(--s-2); }
.testata-lavoro h1 { font-size: var(--t-2xl); }
.testata-lavoro__conta { font-size: var(--t-sm); color: var(--c-testo-medio); }

/* filtri */
.filtri {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--s-3);
  padding: var(--s-4);
  background: var(--c-superficie);
  border: 1px solid var(--c-bordo);
  border-radius: var(--r-lg);
}
.filtro { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.filtro__etichetta { font-size: var(--t-xs); color: var(--c-testo-tenue); }
.lavoro select.filtro__scelta, .lavoro input.filtro__scelta {
  width: auto; min-width: 9.5rem; min-height: 42px;
  padding: var(--s-2) var(--s-3);
  border: 1px solid var(--c-bordo); border-radius: var(--r-sm);
  background: var(--c-superficie);
  font-family: var(--font-testo); font-size: var(--t-sm); color: var(--c-testo);
}
.filtri__spinta { margin-left: auto; display: flex; align-items: center; gap: var(--s-3); }
.filtri__azzera { font-size: var(--t-sm); }

/* nota sulle zone dell'impresa */
.zona-attiva {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-4);
  margin-top: var(--s-3);
  padding: var(--s-3) var(--s-4);
  background: var(--c-petrolio-100);
  border-radius: var(--r-md);
  font-size: var(--t-sm);
  color: var(--c-petrolio-800);
}
.zona-attiva strong { font-weight: var(--peso-semi); }
.zona-attiva__allarga { margin-left: auto; }

/* elenco delle richieste */
.elenco-richieste { list-style: none; padding: 0; margin: var(--s-4) 0 0; display: flex; flex-direction: column; gap: var(--s-3); }
.scheda-richiesta {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 15rem;
  background: var(--c-superficie);
  border: 1px solid var(--c-bordo);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: border-color var(--transizione), box-shadow var(--transizione);
}
.scheda-richiesta:hover { border-color: var(--c-petrolio-200); box-shadow: var(--ombra-2); }
.scheda-richiesta--chiusa { background: var(--c-superficie-alt); }
.scheda-richiesta--chiusa .scheda-richiesta__dati { opacity: 0.72; }
.scheda-richiesta--chiusa .scheda-richiesta__acquisto { background: var(--c-superficie-alt); }
.scheda-richiesta__dati { padding: var(--s-4) var(--s-5); display: flex; flex-direction: column; gap: var(--s-3); min-width: 0; }
.scheda-richiesta__alto { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-2) var(--s-4); }
.scheda-richiesta__servizio {
  font-family: var(--font-titoli); font-size: var(--t-lg); font-weight: var(--peso-semi);
  letter-spacing: -0.015em;
}
.scheda-richiesta__servizio a { color: inherit; text-decoration: none; }
.scheda-richiesta__servizio a:hover { text-decoration: underline; }
.scheda-richiesta__quando { font-size: var(--t-xs); color: var(--c-testo-tenue); }
.tratta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); font-size: var(--t-base); }
.tratta__segno { flex: none; color: var(--c-petrolio-700); }
.tratta__solo { color: var(--c-testo); }
.etichette { display: flex; flex-wrap: wrap; gap: 6px; }
.etichetta-dato {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px var(--s-3);
  background: var(--c-superficie-alt);
  border-radius: var(--r-sm);
  font-size: var(--t-xs);
  color: var(--c-testo-medio);
  white-space: nowrap;
}
.etichetta-dato--forte { background: var(--c-petrolio-100); color: var(--c-petrolio-800); }
.urgenza {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--t-xs); font-weight: var(--peso-semi);
  color: var(--c-petrolio-800);
}
.urgenza__punto { width: 8px; height: 8px; border-radius: var(--r-pill); background: var(--c-lime-600); }
.urgenza--calma .urgenza__punto { background: var(--c-petrolio-200); }

/* colonna d'acquisto */
.scheda-richiesta__acquisto {
  display: flex; flex-direction: column; justify-content: center; gap: var(--s-2);
  padding: var(--s-4) var(--s-5);
  border-left: 1px solid var(--c-bordo);
  background: var(--c-superficie);
  text-align: right;
}
.prezzo { font-family: var(--font-titoli); font-size: var(--t-2xl); font-weight: var(--peso-forte); line-height: 1; letter-spacing: -0.02em; }
.prezzo small { display: block; font-family: var(--font-testo); font-size: var(--t-xs); font-weight: var(--peso-normale); color: var(--c-testo-tenue); margin-top: 4px; }
.posti { display: inline-flex; align-items: center; gap: var(--s-2); justify-content: flex-end; font-size: var(--t-xs); color: var(--c-testo-medio); }
.posti__tacche { display: flex; gap: 3px; }
.posti__tacca { width: 10px; height: 6px; border-radius: 2px; background: var(--c-bordo); }
.posti__tacca--presa { background: var(--c-petrolio-800); }
.posti--pochi { color: var(--c-errore); font-weight: var(--peso-semi); }
.scheda-richiesta__acquisto .btn { margin-top: var(--s-2); }

/* stato vuoto */
.vuoto-lavoro {
  margin-top: var(--s-4);
  padding: var(--s-10) var(--s-8);
  background: var(--c-superficie);
  border: 1px solid var(--c-bordo);
  border-radius: var(--r-xl);
  text-align: center;
}
.vuoto-lavoro__segno { color: var(--c-petrolio-700); margin: 0 auto var(--s-5); }
.vuoto-lavoro h2 { font-size: var(--t-xl); margin-bottom: var(--s-3); }
.vuoto-lavoro p { font-size: var(--t-base); color: var(--c-testo-medio); max-width: 34rem; margin: 0 auto; }
.vuoto-lavoro__azioni { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-3); margin-top: var(--s-6); }
.vuoto-lavoro__vicine { list-style: none; padding: 0; margin: var(--s-8) auto 0; max-width: 34rem; display: flex; flex-direction: column; gap: var(--s-2); text-align: left; }
.vuoto-lavoro__vicine li {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
  padding: var(--s-3) var(--s-4);
  border: 1px solid var(--c-bordo); border-radius: var(--r-md);
  font-size: var(--t-sm);
}

/* dettaglio */
.dettaglio { display: grid; grid-template-columns: minmax(0, 1fr) 21rem; gap: var(--s-5); align-items: start; padding-bottom: var(--s-12); }
.dettaglio > div > .pannello:first-child { margin-top: 0; }
.pannello {
  background: var(--c-superficie);
  border: 1px solid var(--c-bordo);
  border-radius: var(--r-lg);
  padding: var(--s-6);
}
.pannello + .pannello { margin-top: var(--s-4); }
.pannello__titolo {
  font-family: var(--font-titoli); font-size: var(--t-base); font-weight: var(--peso-semi);
  letter-spacing: 0.02em; text-transform: uppercase; font-size: var(--t-xs);
  color: var(--c-testo-tenue);
  margin-bottom: var(--s-4);
}
.dati-fitti { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-5) var(--s-6); }
.dati-fitti--uno { grid-template-columns: 1fr; }
.dati-fitti li { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.dati-fitti__voce { font-size: var(--t-xs); color: var(--c-testo-tenue); }
.dati-fitti__valore { font-size: var(--t-base); }
.coperto {
  display: inline-flex; align-items: center; gap: var(--s-2);
  font-size: var(--t-base); color: var(--c-testo-tenue);
}
.coperto__barre { display: inline-block; width: 6.5rem; height: 12px; border-radius: var(--r-sm); background: var(--c-superficie-alt); }

/* colonna d'acquisto del dettaglio */
.acquisto {
  position: sticky; top: 76px;
  background: var(--c-superficie);
  border: 1px solid var(--c-petrolio-200);
  border-radius: var(--r-lg);
  padding: var(--s-5);
}
.acquisto__prezzo { font-family: var(--font-titoli); font-size: var(--t-3xl); font-weight: var(--peso-forte); line-height: 1; letter-spacing: -0.03em; }
.acquisto__nota { font-size: var(--t-sm); color: var(--c-testo-medio); margin-top: var(--s-2); }
.acquisto__posti { margin-top: var(--s-4); padding-top: var(--s-4); border-top: 1px solid var(--c-bordo); }
.acquisto .btn { width: 100%; margin-top: var(--s-4); }
.acquisto__ottieni { list-style: none; padding: 0; margin: var(--s-4) 0 0; display: flex; flex-direction: column; gap: var(--s-2); }
.acquisto__ottieni li { display: flex; gap: var(--s-3); font-size: var(--t-sm); color: var(--c-testo-medio); }
.acquisto__spunta { flex: none; color: var(--c-petrolio-700); margin-top: 3px; }
.acquisto--chiuso { border-color: var(--c-bordo); background: var(--c-superficie-alt); }
.acquisto--chiuso .acquisto__prezzo { color: var(--c-testo-tenue); text-decoration: line-through; }

/* contatti sbloccati */
.contatti {
  background: var(--c-petrolio-800);
  color: var(--c-testo-inverso);
  border-radius: var(--r-lg);
  padding: var(--s-5);
}
.contatti__etichetta { font-family: var(--font-titoli); font-size: var(--t-xs); font-weight: var(--peso-semi); letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-lime-500); }
.contatti__nome { font-family: var(--font-titoli); font-size: var(--t-2xl); font-weight: var(--peso-semi); color: #fff; margin-top: var(--s-2); }
.contatti__righe { list-style: none; padding: 0; margin: var(--s-4) 0 0; display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-6); }
.contatti__righe li { font-size: var(--t-base); color: rgba(244,247,245,0.9); }
.contatti__righe a { color: #fff; text-decoration: none; }
.contatti__righe a:hover { text-decoration: underline; }
.contatti__azioni { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-3); margin-top: var(--s-5); }
.btn-contatto {
  display: flex; align-items: center; justify-content: center; gap: var(--s-3);
  min-height: 56px;
  border-radius: var(--r-md);
  background: var(--c-superficie);
  color: var(--c-petrolio-900);
  font-family: var(--font-titoli); font-size: var(--t-base); font-weight: var(--peso-semi);
  text-decoration: none;
  border: 1px solid transparent;
  transition: background var(--transizione), transform var(--transizione);
}
.btn-contatto:hover { background: #fff; color: var(--c-petrolio-900); }
.btn-contatto:active { transform: translateY(1px); }
.btn-contatto svg { flex: none; }

/* allegati scaricabili */
.allegati { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-3); }
.allegato {
  display: flex; flex-direction: column; gap: var(--s-2);
  border: 1px solid var(--c-bordo); border-radius: var(--r-md);
  overflow: hidden;
  background: var(--c-superficie);
}
.allegato__figura { height: 104px; background: var(--c-superficie-alt); display: flex; align-items: center; justify-content: center; color: var(--c-testo-tenue); }
.allegato__figura img { width: 100%; height: 100%; object-fit: cover; display: block; }
.allegato__pie { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); padding: 0 var(--s-3) var(--s-3); }
.allegato__nome { font-size: var(--t-xs); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.allegato__scarica { font-size: var(--t-xs); white-space: nowrap; }

/* riga contabile */
.contabile {
  display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-6);
  margin-top: var(--s-3);
  padding: var(--s-4) var(--s-5);
  border: 1px dashed var(--c-bordo-forte);
  border-radius: var(--r-md);
  font-size: var(--t-xs);
  color: var(--c-testo-medio);
}
.contabile strong { font-weight: var(--peso-semi); color: var(--c-testo); }

@media (max-width: 1000px) {
  .dettaglio { grid-template-columns: 1fr; }
  .acquisto { position: static; }
  .allegati { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .barra-lavoro__ditta { padding: 4px; }
  .barra-lavoro__nome { display: none; }
  .testata-lavoro, .testata-lavoro--dettaglio { padding-block: var(--s-6) var(--s-4); }
  .filtri { gap: var(--s-2); }
  .filtro { flex: 1 1 8rem; }
  .lavoro select.filtro__scelta, .lavoro input.filtro__scelta { min-width: 0; width: 100%; }
  .filtri__spinta { margin-left: 0; width: 100%; justify-content: space-between; }
  .zona-attiva__allarga { margin-left: 0; width: 100%; }
  .scheda-richiesta { grid-template-columns: 1fr; }
  .scheda-richiesta__acquisto {
    flex-direction: row; align-items: center; justify-content: space-between;
    text-align: left;
    border-left: 0; border-top: 1px solid var(--c-bordo);
    background: var(--c-superficie-alt);
  }
  .scheda-richiesta__acquisto .btn { margin-top: 0; }
  .posti { justify-content: flex-start; }
  .contatti__azioni { grid-template-columns: 1fr; }
  .dati-fitti { grid-template-columns: 1fr; }
  .allegati { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}


/* =========================================================
   14. Area imprese — dashboard, storico, accesso, registrazione
   ========================================================= */
.cruscotto { display: grid; grid-template-columns: minmax(0, 1fr) 21rem; gap: var(--s-5); align-items: start; padding-bottom: var(--s-12); }

/* riga di richiamo: cosa c'è da fare oggi */
.novita {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-4) var(--s-6);
  padding: var(--s-5);
  background: var(--c-petrolio-800);
  color: var(--c-testo-inverso);
  border-radius: var(--r-lg);
}
.novita__conta { font-family: var(--font-titoli); font-size: var(--t-3xl); font-weight: var(--peso-forte); line-height: 1; color: var(--c-lime-500); }
.novita__testi { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.novita__nome { font-family: var(--font-titoli); font-size: var(--t-lg); font-weight: var(--peso-semi); color: #fff; }
.novita__nota { font-size: var(--t-sm); color: rgba(244,247,245,0.75); }
.novita__azione { margin-left: auto; }
/* su fondo petrolio il secondario va in chiaro, altrimenti è invisibile */
.novita .btn--secondario,
.contatti .btn--secondario,
.imprese-banda .btn--secondario {
  color: #fff;
  border-color: rgba(244, 247, 245, 0.35);
}
.novita .btn--secondario:hover,
.contatti .btn--secondario:hover,
.imprese-banda .btn--secondario:hover {
  background: rgba(244, 247, 245, 0.12);
  border-color: rgba(244, 247, 245, 0.6);
  color: #fff;
}
.novita--calma { background: var(--c-superficie); color: var(--c-testo); border: 1px solid var(--c-bordo); }
.novita--calma .btn--secondario { color: var(--c-petrolio-800); border-color: var(--c-bordo-forte); }
.novita--calma .btn--secondario:hover { background: var(--c-petrolio-100); border-color: var(--c-petrolio-200); color: var(--c-petrolio-800); }
.novita--calma .novita__conta { color: var(--c-testo-tenue); }
.novita--calma .novita__nome { color: var(--c-testo); }
.novita--calma .novita__nota { color: var(--c-testo-medio); }

/* numeri del mese */
.numeri { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-4); }
.numero {
  padding: var(--s-5) var(--s-6);
  background: var(--c-superficie);
  border: 1px solid var(--c-bordo);
  border-radius: var(--r-lg);
}
.numero__valore { font-family: var(--font-titoli); font-size: var(--t-2xl); font-weight: var(--peso-forte); line-height: 1.1; letter-spacing: -0.02em; }
.numero__voce { font-size: var(--t-xs); color: var(--c-testo-tenue); margin-top: var(--s-2); }

/* contatti sbloccati di recente */
.recenti { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; }
.recente {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s-4);
  align-items: center;
  padding: var(--s-4) 0;
}
.recente + .recente { border-top: 1px solid var(--c-bordo); }
.recente__testi { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.recente__nome { font-size: var(--t-base); }
.recente__nome a { color: inherit; text-decoration: none; }
.recente__nome a:hover { text-decoration: underline; }
.recente__meta { font-size: var(--t-xs); color: var(--c-testo-tenue); }
.recente__azioni { display: flex; gap: var(--s-2); }
.btn-tondo {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;
  border: 1px solid var(--c-bordo-forte); border-radius: var(--r-pill);
  background: var(--c-superficie); color: var(--c-petrolio-800);
  text-decoration: none;
}
.btn-tondo:hover { background: var(--c-petrolio-100); color: var(--c-petrolio-900); border-color: var(--c-petrolio-200); }

/* storico acquisti */
.storico { width: 100%; border-collapse: collapse; background: var(--c-superficie); border: 1px solid var(--c-bordo); border-radius: var(--r-lg); overflow: hidden; }
.storico caption { text-align: left; padding: var(--s-4) var(--s-5); font-size: var(--t-sm); color: var(--c-testo-medio); border-bottom: 1px solid var(--c-bordo); }
.storico th, .storico td { padding: var(--s-4) var(--s-5); text-align: left; vertical-align: top; }
.storico thead th {
  font-family: var(--font-titoli); font-size: var(--t-xs); font-weight: var(--peso-semi);
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--c-testo-tenue);
  border-bottom: 1px solid var(--c-bordo);
  white-space: nowrap;
}
.storico tbody tr + tr td { border-top: 1px solid var(--c-bordo); }
.storico td { font-size: var(--t-sm); }
.storico__servizio { font-family: var(--font-titoli); font-size: var(--t-base); font-weight: var(--peso-semi); }
.storico__importo { font-family: var(--font-titoli); font-weight: var(--peso-semi); white-space: nowrap; text-align: right; }
.storico tfoot td { border-top: 2px solid var(--c-petrolio-200); font-family: var(--font-titoli); font-weight: var(--peso-forte); font-size: var(--t-base); }
.storico__contatti { display: flex; gap: var(--s-2); }
.storico .btn-tondo { width: 40px; height: 40px; }

/* accesso e registrazione */
.accesso { min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; }
.accesso__dentro {
  flex: 1; width: 100%; display: flex; align-items: center; justify-content: center;
  padding: var(--s-10) var(--s-4) var(--s-16);
}
.scheda-accesso { width: 100%; max-width: 27rem; }
.scheda-accesso__testata { margin-bottom: var(--s-6); }
.scheda-accesso__testata h1 { font-size: var(--t-2xl); margin-bottom: var(--s-2); }
.scheda-accesso__testata p { font-size: var(--t-base); color: var(--c-testo-medio); }
.scheda-accesso .blocco-form { gap: var(--s-4); }
.scheda-accesso__sotto { margin-top: var(--s-5); font-size: var(--t-sm); color: var(--c-testo-medio); text-align: center; }
.riga-ricorda { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); flex-wrap: wrap; }
.ricorda { display: flex; align-items: center; gap: var(--s-3); font-size: var(--t-sm); }
.ricorda input { width: 22px; height: 22px; accent-color: var(--c-petrolio-800); }

/* province scelte: pastiglie rimovibili */
.scelte-fatte { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-4); }
.scelte-fatte:empty { display: none; }
.pastiglia-scelta {
  display: inline-flex; align-items: center; gap: var(--s-2);
  min-height: 40px; padding: 0 var(--s-2) 0 var(--s-4);
  background: var(--c-petrolio-100);
  border: 1px solid var(--c-petrolio-200);
  border-radius: var(--r-pill);
  font-size: var(--t-sm);
  color: var(--c-petrolio-800);
}
.pastiglia-scelta__togli {
  width: 28px; height: 28px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: var(--r-pill);
  background: transparent;
  color: var(--c-petrolio-700);
  font-size: var(--t-base); line-height: 1;
  cursor: pointer;
}
.pastiglia-scelta__togli:hover { background: var(--c-superficie); color: var(--c-errore); }
.riga-cerca-province { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--s-3); }
.riga-cerca-province .autocompleta { flex: 1 1 18rem; min-width: 0; }
.nessuna-scelta { font-size: var(--t-sm); color: var(--c-testo-tenue); margin-top: var(--s-3); }

/*
 * mostra/nascondi password. Nel CSS del design (_design/stile.css) il pulsante era ancorato
 * a .campo-password (che contiene anche l'etichetta) con un top calcolato dall'altezza
 * presunta dell'etichetta — un'approssimazione che nel porting risultava disallineata
 * (segnalato da Simone, 30/09/2026, pulsante non centrato nel campo). Qui invece
 * assets/js/slt-mostra-password.js avvolge SOLO l'input in .campo-password__riga: il
 * pulsante si centra rispetto a quello con top:50%, corretto per costruzione qualunque sia
 * l'altezza reale dell'etichetta sopra.
 */
.campo-password__riga { position: relative; }
.campo-password__riga .campo__controllo { padding-right: 6.5rem; }
.mostra-password {
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  min-height: 40px;
  background: var(--c-superficie);
  padding: 0 var(--s-4);
  border: 0; border-radius: var(--r-pill);
  font-family: var(--font-testo); font-size: var(--t-sm); color: var(--c-petrolio-700);
  cursor: pointer;
}
.mostra-password:hover { background: var(--c-petrolio-100); color: var(--c-petrolio-900); }

/* chiusura delle pagine di consultazione */
.chiusura {
  max-width: 34rem;
  margin: var(--s-10) auto 0;
  padding-top: var(--s-8);
  border-top: 1px solid var(--c-bordo);
  text-align: center;
}
.chiusura p { font-size: var(--t-base); color: var(--c-testo-medio); text-wrap: balance; }
.chiusura__azioni { display: flex; flex-direction: column; align-items: center; gap: var(--s-4); margin-top: var(--s-6); }
.chiusura__secondaria { font-size: var(--t-sm); }

/* ragioni per iscriversi */
.ragioni { list-style: none; padding: 0; margin: 0 0 var(--s-6); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-3); }
.ragione {
  padding: var(--s-4) var(--s-5);
  background: var(--c-petrolio-100);
  border-radius: var(--r-md);
}
.ragione__nome { font-family: var(--font-titoli); font-size: var(--t-base); font-weight: var(--peso-semi); color: var(--c-petrolio-900); }
.ragione__testo { font-size: var(--t-sm); color: var(--c-petrolio-700); margin-top: 2px; }

.modulo-stretto { max-width: 52rem; padding-bottom: var(--s-12); }

@media (max-width: 1000px) {
  .cruscotto { grid-template-columns: 1fr; }
  .numeri { grid-template-columns: 1fr; }
  .ragioni { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .novita { gap: var(--s-3); }
  .novita__azione { margin-left: 0; width: 100%; }
  .novita__azione .btn { width: 100%; }
  .recente { grid-template-columns: 1fr; }
  .recente__azioni { justify-content: flex-start; }
  /* lo storico diventa un elenco di card */
  .storico, .storico thead, .storico tbody, .storico tfoot, .storico tr, .storico th, .storico td { display: block; }
  .storico { border: 0; background: transparent; }
  .storico caption { padding-inline: 0; border: 0; }
  .storico thead { display: none; }
  .storico tbody tr {
    background: var(--c-superficie);
    border: 1px solid var(--c-bordo);
    border-radius: var(--r-lg);
    padding: var(--s-4);
    margin-bottom: var(--s-3);
  }
  .storico tbody tr + tr td { border-top: 0; }
  .storico td { padding: 2px 0; }
  .storico__importo { text-align: left; font-size: var(--t-lg); margin-top: var(--s-2); }
  .storico__contatti { margin-top: var(--s-3); }
  .storico td[data-voce]::before {
    content: attr(data-voce) " ";
    font-size: var(--t-xs);
    color: var(--c-testo-tenue);
  }
  .storico tfoot tr {
    display: flex; justify-content: space-between; gap: var(--s-4);
    padding: var(--s-4);
    background: var(--c-petrolio-100);
    border-radius: var(--r-lg);
  }
  .storico tfoot td { border: 0; }
}

/* =========================================================
   15. Pagine pubbliche interne — Come funziona, FAQ, Contatti
   Le regole di barra, sezione, FAQ e footer sono le stesse della home.
   ========================================================= */
body.sitiamo-page--come-funziona .testata-scura { background: var(--c-petrolio-800); color: var(--c-testo-inverso); }
body.sitiamo-page--come-funziona .barra { display: flex; align-items: center; justify-content: space-between; gap: var(--s-6); padding-block: var(--s-5); }
body.sitiamo-page--come-funziona .barra__azioni { display: flex; align-items: center; gap: var(--s-4); }
body.sitiamo-page--come-funziona .barra .btn { white-space: nowrap; }
body.sitiamo-page--come-funziona .barra--scura .wordmark { color: #fff; }
body.sitiamo-page--come-funziona .barra--scura .btn--testo { font-family: var(--font-testo); font-size: var(--t-sm); font-weight: var(--peso-normale); color: rgba(244,247,245,0.82); }
body.sitiamo-page--come-funziona .barra--scura .btn--testo:hover { color: #fff; }
body.sitiamo-page--come-funziona .barra--scura .btn--secondario { color: #fff; border-color: rgba(244,247,245,0.35); }
body.sitiamo-page--come-funziona .barra--scura .btn--secondario:hover { background: rgba(244,247,245,0.1); border-color: rgba(244,247,245,0.6); }
body.sitiamo-page--come-funziona .barra--scura .barra__servizi { display: flex; gap: var(--s-5); list-style: none; padding: 0; margin: 0; }
body.sitiamo-page--come-funziona .barra--scura .barra__servizi a { font-size: var(--t-sm); color: rgba(244,247,245,0.82); text-decoration: none; white-space: nowrap; }
body.sitiamo-page--come-funziona .barra--scura .barra__servizi a:hover { color: #fff; }
body.sitiamo-page--come-funziona .barra--scura .barra__servizi a[aria-current="page"] { color: #fff; text-decoration: underline; text-decoration-color: var(--c-lime-500); text-decoration-thickness: 2px; text-underline-offset: 6px; }

/* banda del titolo di pagina */
body.sitiamo-page--come-funziona .titolo-pagina { padding-block: var(--s-12) var(--s-16); }
body.sitiamo-page--come-funziona .titolo-pagina__segno { color: var(--c-lime-500); margin-bottom: var(--s-6); }
body.sitiamo-page--come-funziona .titolo-pagina h1 { font-size: var(--t-4xl); line-height: 1.05; letter-spacing: -0.03em; color: #fff; }
body.sitiamo-page--come-funziona .titolo-pagina p { font-size: var(--t-lg); color: rgba(244,247,245,0.82); max-width: 38rem; margin-top: var(--s-4); }
body.sitiamo-page--come-funziona .titolo-pagina__salti { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-8); }
body.sitiamo-page--come-funziona .titolo-pagina__salti a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--s-5);
  border: 1px solid rgba(244,247,245,0.3); border-radius: var(--r-pill);
  font-size: var(--t-sm); color: #fff; text-decoration: none;
}
body.sitiamo-page--come-funziona .titolo-pagina__salti a:hover { background: rgba(244,247,245,0.1); border-color: rgba(244,247,245,0.6); }

body.sitiamo-page--come-funziona .sezione { padding-block: var(--s-16); }
body.sitiamo-page--come-funziona .sezione__testata { max-width: 38rem; margin-bottom: var(--s-10); }
body.sitiamo-page--come-funziona .sezione__testata h2 { font-size: var(--t-2xl); margin-bottom: var(--s-2); }
body.sitiamo-page--come-funziona .sezione__testata p { color: var(--c-testo-medio); font-size: var(--t-base); }


/* percorso verticale A → B: i passi in sequenza */
body.sitiamo-page--come-funziona .tappe { list-style: none; padding: 0; margin: 0; position: relative; display: flex; flex-direction: column; gap: var(--s-8); }
body.sitiamo-page--come-funziona .tappa { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: var(--s-5); position: relative; }
body.sitiamo-page--come-funziona .tappa::before {
  content: "";
  position: absolute;
  left: 21px; top: 44px; bottom: calc(-1 * var(--s-8));
  border-left: 2px dashed var(--c-petrolio-200);
}
body.sitiamo-page--come-funziona .tappa:last-child::before { display: none; }
body.sitiamo-page--come-funziona .tappa__punto {
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--r-pill);
  border: 2px solid var(--c-petrolio-700);
  background: var(--c-fondo);
  font-family: var(--font-titoli); font-size: var(--t-sm); font-weight: var(--peso-forte);
  color: var(--c-petrolio-700);
  position: relative; z-index: 1;
}
body.sitiamo-page--come-funziona .tappa:last-child .tappa__punto { background: var(--c-petrolio-800); border-color: var(--c-petrolio-800); color: var(--c-lime-500); }
body.sitiamo-page--come-funziona .tappa__chi { font-family: var(--font-titoli); font-size: var(--t-xs); font-weight: var(--peso-semi); letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-testo-tenue); }
body.sitiamo-page--come-funziona .tappa__nome { font-family: var(--font-titoli); font-size: var(--t-xl); font-weight: var(--peso-semi); letter-spacing: -0.015em; margin-top: var(--s-1); }
body.sitiamo-page--come-funziona .tappa__testo { font-size: var(--t-base); color: var(--c-testo-medio); margin-top: var(--s-2); max-width: 40rem; }

/* tre garanzie */
body.sitiamo-page--come-funziona .garanzie { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-4); margin-top: var(--s-12); }
body.sitiamo-page--come-funziona .garanzia { padding: var(--s-6); background: var(--c-petrolio-100); border-radius: var(--r-lg); }
body.sitiamo-page--come-funziona .garanzia__nome { font-family: var(--font-titoli); font-size: var(--t-lg); font-weight: var(--peso-semi); color: var(--c-petrolio-900); }
body.sitiamo-page--come-funziona .garanzia__testo { font-size: var(--t-sm); color: var(--c-petrolio-700); margin-top: var(--s-2); }

/* parte imprese su fondo pieno */
body.sitiamo-page--come-funziona .fondo-imprese { background: var(--c-petrolio-800); color: var(--c-testo-inverso); }
body.sitiamo-page--come-funziona .fondo-imprese .sezione__testata h2 { color: #fff; }
body.sitiamo-page--come-funziona .fondo-imprese .sezione__testata p { color: rgba(244,247,245,0.8); }
body.sitiamo-page--come-funziona .fondo-imprese .t-etichetta { color: var(--c-lime-500); }
body.sitiamo-page--come-funziona .fondo-imprese .tappa::before { border-left-color: rgba(244,247,245,0.25); }
body.sitiamo-page--come-funziona .fondo-imprese .tappa__punto { background: var(--c-petrolio-800); border-color: rgba(244,247,245,0.6); color: #fff; }
body.sitiamo-page--come-funziona .fondo-imprese .tappa:last-child .tappa__punto { background: var(--c-lime-500); border-color: var(--c-lime-500); color: var(--c-petrolio-900); }
body.sitiamo-page--come-funziona .fondo-imprese .tappa__chi { color: rgba(244,247,245,0.55); }
body.sitiamo-page--come-funziona .fondo-imprese .tappa__nome { color: #fff; }
body.sitiamo-page--come-funziona .fondo-imprese .tappa__testo { color: rgba(244,247,245,0.8); }
body.sitiamo-page--come-funziona .niente-canone {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4);
  margin-top: var(--s-12);
}
body.sitiamo-page--come-funziona .niente-canone__voce { padding: var(--s-6); border: 1px solid rgba(244,247,245,0.2); border-radius: var(--r-lg); }
body.sitiamo-page--come-funziona .niente-canone__nome { font-family: var(--font-titoli); font-size: var(--t-lg); font-weight: var(--peso-semi); color: #fff; }
body.sitiamo-page--come-funziona .niente-canone__testo { font-size: var(--t-sm); color: rgba(244,247,245,0.75); margin-top: var(--s-2); }

/* doppia chiamata all'azione */
body.sitiamo-page--come-funziona .doppia-cta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4); }
body.sitiamo-page--come-funziona .porta-cta {
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-3);
  padding: var(--s-8);
  background: var(--c-superficie);
  border: 1px solid var(--c-bordo);
  border-radius: var(--r-xl);
}
body.sitiamo-page--come-funziona .porta-cta--impresa { background: var(--c-petrolio-800); border-color: var(--c-petrolio-800); color: var(--c-testo-inverso); }
body.sitiamo-page--come-funziona .porta-cta h2 { font-size: var(--t-xl); }
body.sitiamo-page--come-funziona .porta-cta--impresa h2 { color: #fff; }
body.sitiamo-page--come-funziona .porta-cta p { font-size: var(--t-base); color: var(--c-testo-medio); }
body.sitiamo-page--come-funziona .porta-cta--impresa p { color: rgba(244,247,245,0.8); }
body.sitiamo-page--come-funziona .porta-cta .btn { margin-top: var(--s-3); white-space: nowrap; }


/* footer, identico alla home */
body.sitiamo-page--come-funziona .pie-pagina { background: var(--c-petrolio-800); color: var(--c-testo-inverso); padding-block: var(--s-12); }
body.sitiamo-page--come-funziona .pie-pagina .wordmark { color: #fff; }
body.sitiamo-page--come-funziona .pie-pagina .t-etichetta { color: var(--c-lime-500); }
body.sitiamo-page--come-funziona .pie-pagina__griglia { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, auto) minmax(0, auto); gap: var(--s-20); align-items: start; }
body.sitiamo-page--come-funziona .pie-pagina nav ul { list-style: none; padding: 0; margin: var(--s-3) 0 0; display: flex; flex-direction: column; gap: var(--s-2); }
body.sitiamo-page--come-funziona .pie-pagina a:not(.btn) { font-size: var(--t-sm); color: rgba(244,247,245,0.82); text-decoration: none; }
body.sitiamo-page--come-funziona .pie-pagina a:not(.btn):hover { color: #fff; text-decoration: underline; }
body.sitiamo-page--come-funziona .pie-pagina__nota { font-size: var(--t-xs); color: rgba(244,247,245,0.62); max-width: 26rem; margin-top: var(--s-4); }
body.sitiamo-page--come-funziona .pie-pagina__social { display: flex; flex-wrap: wrap; gap: var(--s-4); margin-top: var(--s-5); }
body.sitiamo-page--come-funziona .pie-pagina__cta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-5); margin-top: var(--s-10); padding-top: var(--s-8); border-top: 1px solid rgba(244,247,245,0.14); }
body.sitiamo-page--come-funziona .lingua { display: flex; align-items: center; gap: var(--s-3); margin-left: auto; }
body.sitiamo-page--come-funziona .lingua .t-etichetta { color: rgba(244,247,245,0.62); }
body.sitiamo-page--come-funziona .pie-pagina select.lingua__scelta {
  width: auto; min-height: 44px; padding: var(--s-2) var(--s-4);
  background: transparent; color: #fff;
  border: 1px solid rgba(244,247,245,0.35); border-radius: var(--r-pill);
  font-family: var(--font-testo); font-size: var(--t-sm);
}
body.sitiamo-page--come-funziona .pie-pagina select.lingua__scelta option { color: var(--c-testo); }
body.sitiamo-page--come-funziona .pie-pagina__legge { margin-top: var(--s-8); font-size: var(--t-xs); color: rgba(244,247,245,0.55); }


@media (max-width: 1150px) {
  body.sitiamo-page--come-funziona .pie-pagina__griglia { grid-template-columns: 1fr 1fr; gap: var(--s-8); }
  body.sitiamo-page--come-funziona .contatti-griglia { grid-template-columns: 1fr; }
  body.sitiamo-page--come-funziona .doppia-cta { grid-template-columns: 1fr; }
}
@media (max-width: 1050px) {
  body.sitiamo-page--come-funziona .barra--scura .barra__servizi { display: none; }
}
@media (max-width: 900px) {
  body.sitiamo-page--come-funziona .garanzie, body.sitiamo-page--come-funziona .niente-canone, body.sitiamo-page--come-funziona .doppia-cta, body.sitiamo-page--come-funziona .indirizza { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  body.sitiamo-page--come-funziona .titolo-pagina { padding-block: var(--s-8) var(--s-10); }
  body.sitiamo-page--come-funziona .sezione { padding-block: var(--s-12); }
  body.sitiamo-page--come-funziona .tappa { grid-template-columns: 36px minmax(0, 1fr); gap: var(--s-4); }
  body.sitiamo-page--come-funziona .tappa__punto { width: 36px; height: 36px; }
  body.sitiamo-page--come-funziona .tappa::before { left: 17px; top: 36px; }
  body.sitiamo-page--come-funziona .tappa__nome { font-size: var(--t-lg); }
  body.sitiamo-page--come-funziona .porta-cta { padding: var(--s-6); }
  body.sitiamo-page--come-funziona .porta-cta .btn { width: 100%; }
  body.sitiamo-page--come-funziona .barra__azioni .btn--testo { display: none; }
  body.sitiamo-page--come-funziona .pie-pagina__griglia { grid-template-columns: 1fr; gap: var(--s-6); }
  body.sitiamo-page--come-funziona .lingua { margin-left: 0; }
}