/* =====================================================================
   VORTIS DIGITAL — design system 2026
   Direzione scelta il 17/08/2026 guardando framer.com e ghost.org.

   Le regole del posto:
   - Le schermate vere dei gestionali si mostrano grandi. Mai mockup finti,
     mai icone al posto della cosa.
   - Una fascia a tutta larghezza = un concetto solo. Le fasce si alternano
     chiara/scura: e' quello che da' il ritmo, non i bordi delle card.
   - Un solo colore acceso (l'ambra) e usato poco.
   - Il movimento e' una comparsa morbida mentre si scorre, niente di piu'.
   - Mai domini o URL dei clienti nelle barre delle schermate: si scrive
     cosa fa il programma, non dove sta.

   Unico foglio di stile del sito. Le pagine non hanno CSS proprio:
   se serve una regola nuova, va qui, non in un <style> di pagina.
   ===================================================================== */

/* ---------------------------------------------------------------- token
   Chiaro o scuro lo decide l'impostazione del telefono/computer di chi
   visita (Marco, 10/09): lo script in testa a ogni pagina mette o toglie
   data-theme="dark" prima che la pagina si disegni. Senza JS resta scuro. */
:root {
  color-scheme: light;
  --paper:      #FFFFFF;
  --sheet:      #FFFFFF;
  --sheet-alt:  #F4F5F3;
  --ink:        #12161C;
  --slate:      #55606F;
  --rule:       #E2E4E0;

  --band:       #101519;   /* fascia scura dentro il tema chiaro */
  --band-ink:   #F2F4F6;
  --band-soft:  #97A1AE;
  --band-line:  #262D36;

  --signal:     #E09600;
  --signal-ink: #8A5B00;   /* ambra leggibile sul chiaro (contrasto AA) */

  --ok:         #1C7A4E;   --ok-bg:   #DFF0E6;
  --wait:       #9A5B00;   --wait-bg: #FBEBCC;
  --new:        #1D5B93;   --new-bg:  #DCEAF6;
  --stop:       #A32B1C;   --stop-bg: #F8DFDB;

  --shadow-sheet: 0 1px 2px rgba(18,22,28,.04);
  --shadow-shot:  0 24px 60px -30px rgba(10,16,24,.45);
  --shadow-pop:   0 2px 8px rgba(20,24,31,.3);

  --r:   12px;   /* pannelli */
  --r-s: 8px;    /* bottoni, chip */

  --font-display: 'Bricolage Grotesque', system-ui, sans-serif;
  --font-body:    'IBM Plex Sans', system-ui, sans-serif;
  --font-data:    'IBM Plex Mono', ui-monospace, monospace;

  --bar-h: 68px;
}

html[data-theme="dark"] {
  /* Dichiarato anche al browser, se no barre di scorrimento e campi dei
     moduli restano chiari sul fondo scuro. */
  color-scheme: dark;
  --paper:      #0B0E12;
  --sheet:      #11151A;
  --sheet-alt:  #161B21;
  --ink:        #ECEEF1;
  --slate:      #98A2B0;
  --rule:       #222932;

  --band:       #161C23;
  --band-ink:   #F2F4F6;
  --band-soft:  #9AA4B1;
  --band-line:  #2C343E;

  --signal:     #F3B12B;
  --signal-ink: #F3B12B;

  --ok:   #63C795;  --ok-bg:   #17321F;
  --wait: #E2A94A;  --wait-bg: #33270F;
  --new:  #74B4E4;  --new-bg:  #12293C;
  --stop: #E88C7D;  --stop-bg: #3A1B16;

  --shadow-sheet: none;
  --shadow-shot:  0 24px 60px -30px #000;
  --shadow-pop:   0 2px 8px rgba(0,0,0,.6);
}

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

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a { color: inherit; }
img { max-width: 100%; height: auto; display: block; }
button { font: inherit; }

:focus-visible { outline: 3px solid var(--signal); outline-offset: 2px; border-radius: 3px; }

.wrap { max-width: 1180px; margin: 0 auto; padding: 0 20px; }
.wrap-narrow { max-width: 760px; margin: 0 auto; padding: 0 20px; }
.section { padding: 72px 0; scroll-margin-top: var(--bar-h); }
.section-tight { padding: 40px 0; }

/* ------------------------------------------------- etichette e dati */
.field-label {
  font-family: var(--font-data);
  font-size: 12px; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--slate);
}
.data { font-family: var(--font-data); font-size: 13px; color: var(--slate); }

.badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-data);
  font-size: 11px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
  padding: 4px 9px; border-radius: 999px;
}
.badge::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.badge-ok   { background: var(--ok-bg);   color: var(--ok); }
.badge-wait { background: var(--wait-bg); color: var(--wait); }
.badge-new  { background: var(--new-bg);  color: var(--new); }
.badge-stop { background: var(--stop-bg); color: var(--stop); }

/* ----------------------------------------------------------- pannello
   Era "la scheda di lavorazione". Ora e' un pannello sobrio: serve a
   raggruppare, non a fare scenografia. */
.sheet {
  background: var(--sheet);
  border: 1px solid var(--rule);
  border-radius: var(--r);
  box-shadow: var(--shadow-sheet);
}
.sheet + .sheet { margin-top: 20px; }
.jobs .sheet + .sheet { margin-top: 0; }
.sheet-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
  padding: 12px 22px;
  border-bottom: 1px solid var(--rule);
  background: var(--sheet-alt);
  border-radius: var(--r) var(--r) 0 0;
}
.sheet-row {
  display: grid; grid-template-columns: 160px 1fr; gap: 22px;
  padding: 20px 22px;
  border-bottom: 1px solid var(--rule);
}
.sheet-row:last-child { border-bottom: 0; }
.sheet-row > .field-label { padding-top: 5px; }
.sheet-pad { padding: 26px 22px; }

/* ------------------------------------------------------------ tipografia */
h1, h2, h3 { font-family: var(--font-display); font-weight: 800; letter-spacing: -.025em; line-height: 1.05; }
.t-hero    { font-size: clamp(34px, 6vw, 68px); }
.t-section { font-size: clamp(28px, 3.6vw, 42px); }
.t-sub     { font-size: clamp(20px, 2.4vw, 27px); }
.lead { color: var(--slate); max-width: 60ch; margin-top: 10px; font-size: clamp(17px, 1.6vw, 19px); }
.section-head { margin-bottom: 28px; }
.section-head .t-section { margin-top: 8px; }

/* --------------------------------------------------------------- bottoni */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  min-height: 48px;
  font-size: 16px; font-weight: 600;
  padding: 12px 22px; border-radius: var(--r-s);
  text-decoration: none; border: 1px solid transparent; cursor: pointer;
}
.btn-primary { background: var(--ink); color: var(--paper); }
.btn-primary:hover { background: var(--signal-ink); color: #fff; }
html[data-theme="dark"] .btn-primary { background: var(--signal); color: #14181F; }
html[data-theme="dark"] .btn-primary:hover { background: #FFC64D; }
.btn-ghost { border-color: var(--rule); color: var(--ink); background: none; }
.btn-ghost:hover { border-color: var(--ink); background: var(--sheet-alt); }
.btn-group { display: flex; gap: 12px; flex-wrap: wrap; }

.cta-note {
  margin: 12px 0 0;
  font-size: 14px;
  line-height: 1.45;
  color: var(--slate);
}
.close .cta-note { text-align: center; }

/* ---------------------------------------------------------------- topbar */
.topbar {
  position: sticky; top: 0; z-index: 20;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--rule);
}
.topbar-in {
  max-width: 1180px; margin: 0 auto; padding: 10px 20px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  min-height: var(--bar-h);
}
/* Il marchio, non la scritta. Sta come background e non come <img> perche'
   cosi' il browser scarica solo la versione del tema acceso, non tutte e
   due. Il nome resta nel markup per chi usa un lettore di schermo e per
   il caso in cui il foglio di stile non arrivi. */
.logo {
  display: block; width: 152px; height: 24px;
  background: url('img/logo.svg') left center / contain no-repeat;
  text-decoration: none; flex: none;
}
html[data-theme="dark"] .logo { background-image: url('img/logo-bianco.svg'); }
.logo span {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}
@media (max-width: 760px) { .logo { width: 132px; height: 21px; } }
.topbar nav { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }

/* ------------------------------------------------------- menu a tendina
   Il pulsante e le voci hanno le stesse misure delle altre voci di menu, se
   no la riga si scompone. Si apre col clic, non al passaggio del mouse: col
   mouse si apre da sola mentre uno sta andando altrove, e sul telefono il
   passaggio non esiste proprio. */
.menu-giu { position: relative; }
.menu-giu-q {
  font-family: inherit; font-size: 15px; background: none; border: 0; cursor: pointer;
  color: var(--slate); padding: 10px 12px; border-radius: var(--r-s);
  min-height: 44px; display: inline-flex; align-items: center; gap: 6px;
}
.menu-giu-q:hover { color: var(--ink); background: var(--sheet-alt); }
.menu-giu-q[aria-current="page"] { color: var(--ink); font-weight: 600; }
.menu-giu-q span { font-size: 11px; transition: transform .16s ease; }
.menu-giu-q[aria-expanded="true"] span { transform: rotate(180deg); }

.menu-giu-a {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 30;
  min-width: 264px; padding: 8px;
  background: var(--sheet); border: 1px solid var(--rule);
  border-radius: var(--r-m); box-shadow: 0 18px 40px rgba(0,0,0,.28);
  display: grid; gap: 1px;
}
/* `display: grid` batte il display:none implicito dell'attributo `hidden`:
   senza questa riga la tendina resta aperta per sempre, ed e' quello che
   succedeva. Vale per qualunque elemento a cui si dia un display e che poi
   si voglia nascondere con `hidden`. */
.menu-giu-a[hidden] { display: none; }
.menu-giu-a a {
  padding: 9px 12px; font-size: 14px; min-height: 0; border-radius: var(--r-s);
  color: var(--slate); text-decoration: none; display: block;
}
.menu-giu-a a:hover { background: var(--sheet-alt); color: var(--ink); }
.menu-giu-a a[aria-current="page"] { color: var(--ink); font-weight: 600; }
.menu-giu-tutti {
  font-weight: 600; color: var(--ink) !important;
  border-bottom: 1px solid var(--rule); border-radius: 0 !important; margin-bottom: 6px;
}
.menu-giu-gruppo {
  font-family: var(--font-data); font-size: 10px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--slate);
  padding: 12px 12px 5px; margin: 0;
}

/* Sul telefono la tendina non galleggia: si apre nel flusso, se no esce
   dallo schermo e met&agrave; voci non si raggiungono. */
@media (max-width: 52rem) {
  .menu-giu { position: static; }
  .menu-giu-a { position: static; min-width: 0; box-shadow: none; margin: 4px 0 8px; }
}

.topbar nav a {
  font-size: 15px; text-decoration: none; color: var(--slate);
  padding: 10px 12px; border-radius: var(--r-s);
  min-height: 44px; display: inline-flex; align-items: center;
}
.topbar nav a:hover { color: var(--ink); background: var(--sheet-alt); }
.topbar nav a[aria-current="page"] { color: var(--ink); font-weight: 600; box-shadow: inset 0 -2px 0 var(--signal); }
.theme-btn {
  font-family: var(--font-data); font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  background: none; border: 1px solid var(--rule); color: var(--slate);
  padding: 10px 12px; border-radius: var(--r-s); cursor: pointer;
  min-height: 44px;
}
.theme-btn:hover { color: var(--ink); border-color: var(--ink); }

/* ------------------------------------------------------------------- hero
   Testata centrata, scelta da Marco contro l'asimmetrica: il titolo dice
   l'offerta, sotto c'e' subito una schermata vera e grande. */
.hero { padding: 76px 0 0; text-align: center; }
.hero .t-hero { max-width: 17ch; margin: 12px auto 0; }
.hero .lead { max-width: 56ch; margin: 20px auto 26px; }
.hero .btn-group { justify-content: center; }
.hero .shotwrap { margin-top: 56px; }

/* ------------------------------------------------------------- schermata
   Telaio da finestra. La barra dice cosa fa il programma: mai il dominio
   del cliente. */
.shot {
  border: 1px solid var(--rule);
  border-radius: var(--r);
  overflow: hidden;
  background: var(--sheet-alt);
  box-shadow: var(--shadow-shot);
}
.shot .bar {
  display: flex; align-items: center; gap: 6px;
  padding: 9px 14px;
  border-bottom: 1px solid var(--rule);
  background: var(--sheet);
}
.shot .bar i { width: 9px; height: 9px; border-radius: 50%; background: var(--rule); flex: none; }
.shot .bar span {
  font-family: var(--font-data); font-size: 12px; color: var(--slate);
  margin-left: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.shot img { width: 100%; }
.caption { font-family: var(--font-data); font-size: 13px; color: var(--slate); margin-top: 12px; }

/* ---------------------------------------------------------------- fasce
   Una fascia = un concetto. Le scure vanno a tutta larghezza e sono il
   ritmo della pagina. */
/* --------------------------------------------------------- la striscia
   Sta in cima a una fascia e dice UN fatto, non un aggettivo: "il piu'
   richiesto" da solo e' aria, "cinque attivita' lo usano tutti i giorni" si
   puo' controllare. Sta FUORI dalla fascia, subito sopra: dentro avrebbe
   dovuto mangiarsi il proprio spazio con un margine negativo, e quel numero
   cambia al breakpoint in cui la fascia passa da 84 a 56 pixel. */
.striscia {
  display: flex; align-items: center; justify-content: center;
  gap: 10px; flex-wrap: wrap;
  padding: 11px 20px;
  background: var(--signal);
  color: #14181F;
  font-size: 14px; line-height: 1.4; text-align: center;
}
.striscia b { font-weight: 700; }
.striscia-tag {
  font-family: var(--font-data); font-size: 11px; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase;
  padding: 3px 9px; border-radius: 20px;
  background: #14181F; color: var(--signal);
}
@media (max-width: 640px) {
  .striscia { padding: 10px 16px; font-size: 13px; }
}

.band { padding: 84px 0; }
.band + .band { padding-top: 84px; }
.band.dark { background: var(--band); color: var(--band-ink); }
.band.dark .lead,
.band.dark .field-label,
.band.dark .caption,
.band.dark .data { color: var(--band-soft); }
.band.dark .shot { border-color: var(--band-line); background: #0C1116; }
.band.dark .shot .bar { background: #0C1116; border-color: var(--band-line); }
.band.dark .shot .bar i { background: var(--band-line); }
/* In tema chiaro le fasce scure restano scure, ma questi testi prendevano il
   grigio pensato per il fondo bianco (--slate): grigio scuro su scuro, sotto
   il contrasto minimo. Trovati misurando le 19 pagine in chiaro (10/09). */
.band.dark .cta-note,
.band.dark .proof-note,
.band.dark .shot .bar span { color: var(--band-soft); }
.band.dark .proof-note a { color: var(--band-ink); }
.band.dark .btn-ghost { border-color: var(--band-line); color: var(--band-ink); }
.band.dark .btn-ghost:hover { background: #1B222A; border-color: var(--band-soft); }
.band.dark .btn-primary { background: var(--signal); color: #14181F; }
.band.dark a { color: inherit; }

/* minmax(0,1fr) e non "auto": una traccia implicita si dimensiona sul
   contenuto e sul telefono i figli sfondano il contenitore (misurato a
   375px: .stack largo 320 con dentro figli da 442). */
.band .split { display: grid; grid-template-columns: minmax(0, 1fr); gap: 34px; align-items: center; }
@media (min-width: 62rem) {
  .band .split { grid-template-columns: minmax(0, 26rem) minmax(0, 1fr); gap: 64px; }
  .band .split.flip > .split-text { order: 2; }
}

/* Fascia impilata: il testo sopra, la schermata sotto a tutta larghezza.
   Serve alle schermate dense — un gestionale dentro una mezza colonna non
   si legge, e ritagliarlo taglia via il resto del programma. */
.band .stack { display: grid; grid-template-columns: minmax(0, 1fr); gap: 34px; }
.band .stack .split-text { max-width: 62ch; }
.band .stack .shot { width: 100%; }

/* ------------------------------------------------------- fascia "rispondo io"
   Rompe di proposito il ritmo testo/schermata: e' il punto in cui il sito
   smette di parlare di software. Faccia grande, prima persona, e il numero
   scritto per esteso. Se questa fascia diventa una colonna come le altre,
   ha perso il suo motivo di esistere. */
.io {
  padding: 84px 0;
  background: var(--sheet-alt);
  border-top: 3px solid var(--signal);
}
.io .io-in { display: grid; gap: 34px; align-items: center; }
@media (min-width: 62rem) {
  .io .io-in { grid-template-columns: minmax(0, 25rem) minmax(0, 1fr); gap: 56px; }
}
/* La foto si mostra intera. Ritagliarla per farla sembrare piu' grande
   taglia sempre qualcosa: si allarga la colonna, non si zooma. */
.io img {
  width: 100%; border-radius: var(--r);
  border: 1px solid var(--rule);
}
.io-say {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(26px, 3.4vw, 40px); line-height: 1.1; letter-spacing: -.025em;
  max-width: 22ch;
}
.io p { color: var(--slate); margin-top: 18px; max-width: 54ch; }
.io-sign {
  font-family: var(--font-data); font-size: 13px; color: var(--slate);
  margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--rule);
}
.io-sign b { color: var(--ink); font-weight: 600; }

/* ------------------------------------------------------------ fascia prove */
.proof-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.proof-cell { padding: 30px 26px; border-right: 1px solid var(--rule); }
.proof-cell:last-child { border-right: 0; }
.proof-fact {
  font-family: var(--font-display); font-weight: 800;
  font-size: 30px; letter-spacing: -.02em; line-height: 1.15; margin: 10px 0 6px;
}
.proof-note { font-size: 14px; color: var(--slate); line-height: 1.5; }
.proof-note a { color: var(--ink); }

/* --------------------------------------------------------- chiamata Ariel */
.call { display: grid; grid-template-columns: 1fr auto; gap: 30px; align-items: center; padding: 30px 26px; }
.call p { color: var(--slate); font-size: 16px; max-width: 52ch; }
.call-num {
  font-family: var(--font-data); font-weight: 600;
  font-size: clamp(19px, 2.6vw, 26px);
  text-decoration: none; white-space: nowrap;
  display: inline-flex; align-items: center; gap: 10px;
  border: 1px solid var(--ink); border-radius: var(--r-s); padding: 15px 20px;
  min-height: 48px;
}
.call-num:hover { background: var(--ink); color: var(--paper); }
.ring { width: 9px; height: 9px; border-radius: 50%; background: var(--ok); flex: none; }
@media (prefers-reduced-motion: no-preference) {
  .ring { animation: ring 1.6s ease-in-out infinite; }
  @keyframes ring { 50% { opacity: .25; } }
}
.disclaimer { font-size: 13px; color: var(--slate); line-height: 1.5; margin-top: 14px; }

/* ------------------------------------------------------- registro lavori */
.register { margin-top: 56px; }
.register:first-of-type { margin-top: 0; }
.register-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
  border-bottom: 1px solid var(--rule); padding-bottom: 12px; margin-bottom: 24px;
}
.register-head .data { text-align: right; }

.jobs { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 22px; }

.job { display: flex; flex-direction: column; text-decoration: none; overflow: hidden; }
.job-shot { position: relative; }
.job-shot { border-bottom: 1px solid var(--rule); background: var(--sheet-alt); aspect-ratio: 16/10; overflow: hidden; }
.job-shot img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }

.job-badge { position: absolute; top: 12px; right: 12px; z-index: 1; box-shadow: 0 0 0 3px var(--sheet), var(--shadow-pop); }
.job-body { padding: 20px; display: flex; flex-direction: column; gap: 9px; flex: 1; }
.job-ref { min-width: 0; }
.job-ref .data { font-size: 12px; line-height: 1.4; }
.job-title { font-family: var(--font-display); font-weight: 800; font-size: 20px; letter-spacing: -.02em; }
.job-desc { font-size: 15px; color: var(--slate); line-height: 1.5; flex: 1; }
.job:hover { border-color: var(--ink); }
.job:hover .job-title { color: var(--signal-ink); }

.spec-line { display: grid; grid-template-columns: 80px 1fr; gap: 10px; align-items: baseline; }
.spec-line dt { font-family: var(--font-data); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--slate); }
.spec-line dd { font-size: 14px; line-height: 1.4; }

.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { font-family: var(--font-data); font-size: 11px; color: var(--slate); border: 1px solid var(--rule); border-radius: 999px; padding: 3px 9px; }

/* ------------------------------------------------------------- listino */

.listino-row {
  display: grid; grid-template-columns: 1fr auto; gap: 20px; align-items: baseline;
  padding: 16px 22px; border-bottom: 1px solid var(--rule);
}
.listino-row:last-child { border-bottom: 0; }
.listino-what { font-weight: 600; }
.listino-note { font-size: 14px; color: var(--slate); margin-top: 3px; }
.listino-price { font-family: var(--font-data); font-weight: 600; font-size: 17px; white-space: nowrap; }
.listino-price small { font-weight: 400; color: var(--slate); font-size: 12px; }

/* -------------------------------------------------------------- elenchi */
.ticks { list-style: none; display: grid; gap: 11px; }
.ticks li { display: grid; grid-template-columns: 20px 1fr; gap: 10px; align-items: start; font-size: 16px; }
.ticks li::before { content: '✓'; color: var(--ok); font-weight: 700; line-height: 1.5; }
.ticks-stop li::before { content: '×'; color: var(--stop); }

/* ------------------------------------------------------------------ FAQ */
.faq-item { border-bottom: 1px solid var(--rule); }
.faq-item:last-child { border-bottom: 0; }
.faq-q {
  width: 100%; text-align: left; background: none; border: 0; cursor: pointer;
  padding: 18px 22px; display: flex; justify-content: space-between; gap: 16px;
  font-size: 17px; font-weight: 600; color: var(--ink);
  min-height: 48px;
}
.faq-q::after { content: '+'; font-family: var(--font-data); color: var(--slate); flex: none; }
.faq-q[aria-expanded="true"]::after { content: '–'; }
.faq-a { padding: 0 22px 20px; color: var(--slate); max-width: 68ch; }
.faq-a[hidden] { display: none; }

/* ----------------------------------------------------------------- form */
.form-grid { display: grid; gap: 18px; }
.field label { display: block; margin-bottom: 6px; }
.field input, .field textarea, .field select {
  width: 100%; font: inherit; color: var(--ink);
  background: var(--sheet); border: 1px solid var(--rule); border-radius: var(--r-s);
  padding: 13px 14px; min-height: 48px;
}
.field textarea { min-height: 140px; resize: vertical; }
.field input:focus, .field textarea:focus, .field select:focus { border-color: var(--ink); outline-offset: 0; }
.field-hint { font-size: 13px; color: var(--slate); margin-top: 6px; }

/* La casella di spunta e il suo testo stanno sulla stessa riga: il label
   generico e' display:block e da solo la manderebbe a capo. */
.field-check label { display: flex; align-items: flex-start; gap: 10px; margin: 0; cursor: pointer; }
.field-check input[type="checkbox"] { width: 20px; height: 20px; min-height: 0; flex: none; margin-top: 3px; }

/* ----------------------------------------- la finestra di Vortis WhatsApp
   La cornice e' quella vera della dashboard, non un riquadro di fantasia:
   barra del marchio con logo, nome, "Cloud API · connesso" e i tasti che ci
   sono davvero — agenda, notifiche, nuova chat, impostazioni, aggiorna — con
   le stesse icone SVG di `public/index.html` sul server. Sotto, la riga del
   contatto e il thread.
   I tasti NON sono cliccabili: e' l'immagine di un programma, non il
   programma. Per questo sono <span> e non <button>, e chi naviga da tastiera
   non ci si perde dentro. */
.wa {
  border: 1px solid var(--rule); border-radius: var(--r);
  overflow: hidden; background: #0b141a; text-align: left;
}
.wa-barra {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px; background: var(--brand-wa, #6D28D9); color: #fff;
}
.wa-logo {
  width: 30px; height: 30px; border-radius: 50%; flex: none;
  background: rgba(255,255,255,.2); color: #fff;
  display: grid; place-items: center; font-weight: 700; font-size: 14px;
}
.wa-chi { display: grid; line-height: 1.25; min-width: 0; margin-right: auto; }
.wa-chi b { font-size: 14px; font-weight: 600; }
.wa-chi i { font-style: normal; font-size: 11px; color: #a7f3d0; }
.wa-tasti { display: flex; gap: 2px; flex: none; }
.wa-t {
  width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center; color: #fff; opacity: .92;
}
.wa-t svg { width: 17px; height: 17px; }
/* Sul telefono restano i due che contano: il resto e' arredamento. */
@media (max-width: 40rem) {
  .wa-t:nth-child(n+3):not(:last-child) { display: none; }
  .wa-chi b { font-size: 13px; }
}

.wa-chat {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px; background: #202c33; color: #e9edef;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.wa-avatar {
  width: 30px; height: 30px; border-radius: 50%; flex: none;
  background: #6b7c85; color: #0b141a;
  display: grid; place-items: center; font-weight: 700; font-size: 13px;
}
.wa-nome { display: grid; line-height: 1.25; font-size: 14px; font-weight: 600; min-width: 0; }
.wa-nome i {
  font-style: normal; font-family: var(--font-data);
  font-size: 10.5px; font-weight: 400; color: #8696a0;
}
/* Dentro la finestra il riquadro della chat non ripete bordo e sfondo. */
.wa .dialogo { border: 0; border-radius: 0; background: transparent; }
/* ------------------------------------------------------------ dialogo
   Tre pagine vendono una conversazione (i bot, la segreteria) e di una
   conversazione non esiste una schermata che si possa mostrare: sarebbe
   la chat di un cliente vero. Qui la conversazione si RISCRIVE, e la
   barra dichiara che è un esempio. Non imita Telegram né WhatsApp: usa i
   caratteri e i colori di questo sito, così nessuno la scambia per una
   fotografia di qualcosa che non ha visto. */
/* ---------------------------------------------- la chat, come si vede davvero
   Non e' un riquadro inventato: colori, misure e codine sono quelli della
   dashboard di Vortis WhatsApp, presi da `public/index.html` sul server
   (#0b141a lo sfondo, #202c33 chi scrive, #005c4b la risposta, raggio 7,5px).
   Il testo pero' e' riscritto: uno screenshot vero porterebbe dentro il nome
   e il numero di una cliente. */
.dialogo {
  text-align: left;
  border: 1px solid var(--rule);
  border-radius: var(--r);
  overflow: hidden;
  background: #0b141a;
}
.dialogo .bar {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 14px;
  border-bottom: 1px solid var(--rule);
  background: #202c33;
  font-family: var(--font-data); font-size: 12px; color: #8696a0;
}
.dialogo-in { padding: 18px; display: grid; gap: 8px; }
.dice {
  max-width: min(78%, 30rem); padding: 7px 10px 8px;
  border-radius: 7.5px; line-height: 1.42; font-size: 15px;
  position: relative; color: #e9edef;
}
/* Solo il PRIMO <b> e' il nome di chi scrive: un <b> nel mezzo della frase
   e' grassetto normale, e con la regola larga usciva in maiuscoletto come
   fosse un'altra etichetta. */
.dice > b:first-child {
  display: block;
  font-family: var(--font-data); font-size: 10px; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase;
  margin-bottom: 4px; opacity: .55;
}
.dice.loro { background: #202c33; justify-self: start; }
.dice.noi  { background: #005c4b; justify-self: end; }
/* La codina: solo sul primo di una fila, come nella dashboard. */
.dice.loro.punta::before {
  content: ""; position: absolute; top: 0; left: -8px; width: 8px; height: 13px;
  background: #202c33; clip-path: polygon(100% 0, 100% 100%, 0 0);
}
.dice.noi.punta::before {
  content: ""; position: absolute; top: 0; right: -8px; width: 8px; height: 13px;
  background: #005c4b; clip-path: polygon(0 0, 0 100%, 100% 0);
}
/* ------------------------------------------- la chat che si scrive da sola
   Le battute arrivano una dopo l'altra, coi tre puntini prima di ogni
   risposta. Non e' un video: e' lo stesso testo, quindi si legge, si
   seleziona, si trova con la ricerca del browser e non pesa niente.
   ⚠️ Queste regole vanno DOPO quelle delle bolle: hanno la stessa forza e
   vince l'ultima scritta. Messe prima, `opacity: 0` perdeva e la chat
   restava ferma — e' successo, riscrivendo il blocco qui sopra le ho
   cancellate senza accorgermene.
   Chi ha chiesto meno animazioni al sistema, e chi non ha JavaScript, vede
   tutto subito: la classe `recita` la mette lo script. */
.dialogo.recita .dice { opacity: 0; transform: translateY(6px); }
.dialogo.recita .dice.entra {
  opacity: 1; transform: none;
  transition: opacity .34s ease, transform .34s ease;
}
.scrive {
  justify-self: end; display: inline-flex; gap: 4px; align-items: center;
  padding: 12px 14px; border-radius: 7.5px; background: #005c4b;
}
.scrive i {
  width: 6px; height: 6px; border-radius: 50%; background: #e9edef;
  opacity: .5; animation: punti 1.1s infinite ease-in-out;
}
.scrive i:nth-child(2) { animation-delay: .16s; }
.scrive i:nth-child(3) { animation-delay: .32s; }
@keyframes punti { 0%,60%,100% { opacity:.28; transform:none } 30% { opacity:.9; transform:translateY(-3px) } }

@media (prefers-reduced-motion: reduce) {
  .dialogo.recita .dice { opacity: 1; transform: none; }
  .scrive { display: none; }
}


/* Due conversazioni una sotto l'altra: due mestieri diversi, stesso bot. */
.due-chat { display: grid; gap: 10px; }

.dialogo .nota {
  padding: 0 22px 20px;
  font-family: var(--font-data); font-size: 12px; color: var(--slate);
}
/* Dentro una fascia scura la conversazione NON cambia colore: e' la
   finestra della dashboard di Vortis WhatsApp, e una dashboard e' sempre
   quella. Qui c'era un residuo di quando la chat era un riquadro disegnato:
   in home le risposte uscivano AMBRA invece che verdi, cioe' una schermata
   che non esiste da nessuna parte. Resta solo la nota sotto, che e' testo
   del sito e non della finestra. */
.band.dark .dialogo .nota { color: var(--band-soft); }

/* -------------------------------------------------------------- flusso
   Le integrazioni non hanno una faccia: il lavoro è il passaggio fra due
   programmi. Si disegna il passaggio, e sotto il registro, perché la
   cosa che si vende non è che non fallisca mai — è che si sappia. */
.flusso { display: grid; gap: 14px; text-align: left; }
.flusso-riga { display: grid; gap: 14px; align-items: stretch; }
@media (min-width: 48rem) {
  .flusso-riga { grid-template-columns: 1fr auto 1fr auto 1fr; align-items: center; }
}
.nodo {
  text-align: center;
  border: 1px solid var(--rule); border-radius: var(--r);
  background: var(--sheet); padding: 18px 20px;
}
.nodo .field-label { display: block; margin-bottom: 6px; }
.nodo b { font-family: var(--font-display); font-weight: 800; font-size: 19px; letter-spacing: -.02em; }
.nodo p { font-size: 14px; color: var(--slate); margin-top: 5px; }
.nodo.mezzo { border-color: var(--signal-ink); }
.verso {
  font-family: var(--font-data); color: var(--signal-ink);
  text-align: center; font-size: 19px; line-height: 1;
}
.verso::before { content: '↓'; }
@media (min-width: 48rem) { .verso::before { content: '→'; } }
.registro {
  border: 1px solid var(--rule); border-radius: var(--r);
  background: var(--sheet); overflow: hidden;
}
.registro-riga {
  display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: baseline;
  padding: 11px 18px; border-bottom: 1px solid var(--rule);
  font-family: var(--font-data); font-size: 13px;
}
.registro-riga:last-child { border-bottom: 0; }
.registro-riga time { color: var(--slate); }
.registro-riga span { font-family: var(--font-body); font-size: 14px; }
.esito { font-weight: 600; white-space: nowrap; }
.esito.ok { color: var(--ok); }
.esito.ko { color: var(--stop); }
.band.dark .nodo, .band.dark .registro { background: #0C1116; border-color: var(--band-line); }
.band.dark .registro-riga { border-color: var(--band-line); }
.band.dark .nodo p, .band.dark .registro-riga time { color: var(--band-soft); }
.band.dark .nodo.mezzo { border-color: var(--signal); }
.band.dark .verso { color: var(--signal); }

/* -------------------------------------------------------------- clienti
   Un muro di loghi da solo non prova niente: sotto ognuno sta scritto il
   mestiere e cosa usa, altrimenti è la fascia "si fidano di noi" che sta
   su qualunque sito. I loghi vivono su una tessera chiara fissa in
   entrambi i temi: un marchio non si ricolora e non si scherisce, e molti
   sono neri su trasparente — sul fondo scuro sparirebbero. */
.clienti { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 18px; }
.cliente { display: grid; gap: 12px; }
.cliente-logo {
  height: 82px; border: 1px solid var(--rule); border-radius: var(--r);
  background: #FFFFFF;
  display: flex; align-items: center; justify-content: center;
  padding: 16px 22px;
}
.cliente-logo img { max-height: 100%; max-width: 100%; width: auto; object-fit: contain; }
/* Alcuni marchi sono disegnati per il fondo scuro: bianchi su trasparente,
   sulla tessera chiara resta solo la parte colorata. Nerdtopia diventava
   una N rossa e sembrava un'altra azienda. */
.cliente-logo.su-scuro { background: #101519; }
.band.dark .cliente-logo { border-color: var(--band-line); }
.cliente-che { font-weight: 600; font-size: 15px; line-height: 1.3; }
.cliente-usa { font-family: var(--font-data); font-size: 12px; color: var(--slate); line-height: 1.5; margin-top: 4px; }
.band.dark .cliente-usa { color: var(--band-soft); }

/* ------------------------------------------------------- scheda e stati
   La scheda di riparazione con la fila degli stati: è l'unica cosa che
   un centro riparazioni riconosce a colpo d'occhio, e non è una schermata
   ritagliata — è la stessa cosa ridisegnata coi caratteri del sito. */
.scheda-campi { display: grid; }
.scheda-campo {
  display: grid; grid-template-columns: 1fr auto; gap: 16px; align-items: baseline;
  padding: 12px 22px; border-bottom: 1px solid var(--rule);
}
.scheda-campo:last-of-type { border-bottom: 0; }
.scheda-campo dt { font-family: var(--font-data); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--slate); }
.scheda-campo dd { font-family: var(--font-data); font-size: 15px; font-weight: 600; }
.stati {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  padding: 16px 22px; border-top: 1px solid var(--rule); background: var(--sheet-alt);
}
.stati i { color: var(--slate); font-style: normal; }
.stati span {
  font-family: var(--font-data); font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--slate);
}
.stati span.qui { color: var(--ok); font-weight: 600; }
.stati span.qui::before { content: '● '; }
.band.dark .scheda-campo, .band.dark .stati { border-color: var(--band-line); }
.band.dark .stati { background: #131A21; }

/* -------------------------------------------------------- configuratore
   Le caselle sono caselle vere: senza JavaScript restano spente e il
   totale mostra la base, che è la verità. Lo script somma, non inventa. */
.configura { display: grid; gap: 22px; align-items: start; }
@media (min-width: 62rem) { .configura { grid-template-columns: minmax(0,1fr) minmax(0,20rem); gap: 34px; } }
.modulo {
  display: grid; grid-template-columns: 22px 1fr auto; gap: 14px; align-items: start;
  padding: 16px 20px; border-bottom: 1px solid var(--rule); cursor: pointer;
}
.modulo:last-child { border-bottom: 0; }
.modulo input { width: 20px; height: 20px; min-height: 0; margin-top: 2px; accent-color: var(--signal-ink); }
/* block e non inline: da span, nome e descrizione finiscono sulla stessa
   riga. E' la stessa trappola gia' presa sulla pagina live. */
.modulo .che, .sedi .che { display: block; font-weight: 600; }
.modulo .fa, .sedi .fa { display: block; font-size: 14px; color: var(--slate); margin-top: 4px; }
.modulo .quanto { font-family: var(--font-data); font-weight: 600; white-space: nowrap; }
.modulo:hover { background: var(--sheet-alt); }
.band.dark .modulo { border-color: var(--band-line); }
.band.dark .modulo:hover { background: #131A21; }
.band.dark .modulo .fa, .band.dark .sedi .fa { color: var(--band-soft); }
.band.dark .modulo input { accent-color: var(--signal); }

.sedi { display: grid; grid-template-columns: 1fr auto; gap: 14px; align-items: center; padding: 16px 20px; border-top: 1px solid var(--rule); }
.band.dark .sedi { border-color: var(--band-line); }
.conta { display: flex; align-items: center; gap: 4px; }
.conta button {
  width: 44px; height: 44px; border-radius: var(--r-s);
  border: 1px solid var(--rule); background: none; color: inherit; cursor: pointer;
  font-family: var(--font-data); font-size: 17px; line-height: 1;
}
.conta button:hover:not(:disabled) { border-color: var(--ink); }
.conta button:disabled { opacity: .35; cursor: default; }
.conta output { font-family: var(--font-data); font-weight: 600; min-width: 34px; text-align: center; }
.band.dark .conta button { border-color: var(--band-line); }
.band.dark .conta button:hover:not(:disabled) { border-color: var(--band-soft); }

.totale { padding: 24px; position: sticky; top: calc(var(--bar-h) + 14px); }
.totale .somma { font-family: var(--font-display); font-weight: 800; font-size: 46px; letter-spacing: -.03em; line-height: 1; margin: 8px 0 2px; }
.totale .al { font-family: var(--font-data); font-size: 12px; color: var(--slate); }
.righe { list-style: none; display: grid; gap: 7px; margin: 18px 0 0; padding-top: 16px; border-top: 1px solid var(--rule); }
.righe li { display: flex; justify-content: space-between; gap: 14px; font-size: 14px; }
.righe li span:last-child { font-family: var(--font-data); white-space: nowrap; }
.band.dark .righe { border-color: var(--band-line); }
.band.dark .totale .al, .band.dark .righe li { color: var(--band-ink); }
/* La voce una-tantum non e' un canone: si stacca dai moduli mensili con una
   riga piena, o si legge come il quinto modulo da 149 al mese. */
.modulo.una-tantum { border-top: 1px solid var(--rule); }
.band.dark .modulo.una-tantum { border-top-color: var(--band-line); }
.modulo .che em { font-style: normal; font-family: var(--font-data); font-size: 11px;
  letter-spacing: .08em; text-transform: uppercase; color: var(--slate); margin-left: 6px; }
.band.dark .modulo .che em { color: var(--band-soft); }

/* Mensile o annuale: due bottoni, non un menu a tendina. Sono due sole scelte
   e devono vedersi tutte e due senza aprire niente. */
.quando { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: 18px; }
.quando label {
  display: block; text-align: center; padding: 9px 8px; cursor: pointer;
  border: 1px solid var(--rule); border-radius: var(--r-s);
  font-size: 13px; font-weight: 600; line-height: 1.25;
}
.quando input { position: absolute; opacity: 0; width: 0; height: 0; }
.quando em { display: block; font-style: normal; font-family: var(--font-data);
  font-size: 10px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--slate); font-weight: 400; margin-top: 2px; }
.quando label:has(input:checked) { border-color: var(--signal-ink); background: var(--sheet-alt); }
.quando label:has(input:focus-visible) { outline: 3px solid var(--signal); outline-offset: 2px; }
.band.dark .quando label { border-color: var(--band-line); }
.band.dark .quando em { color: var(--band-soft); }
.band.dark .quando label:has(input:checked) { border-color: var(--signal); background: #131A21; }

/* Cosa si risparmia scegliendo l'anno. */
.risparmio { font-size: 13px; line-height: 1.45; color: var(--slate); margin: 10px 0 0; }
.band.dark .risparmio { color: var(--band-soft); }
.modulo input:disabled { opacity: .45; }
.modulo:has(input:disabled) { cursor: default; }
.modulo:has(input:disabled):hover { background: transparent; }
.band.dark .modulo:has(input:disabled):hover { background: transparent; }

/* Quanto esce di tasca il primo giorno, sotto il canone mensile. */
.oggi { display: flex; justify-content: space-between; align-items: baseline; gap: 14px;
  margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--rule); }
.oggi span { font-family: var(--font-data); font-size: 12px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--slate); }
.oggi strong { font-family: var(--font-data); font-size: 19px; font-weight: 700; white-space: nowrap; }
.band.dark .oggi { border-top-color: var(--band-line); }
.band.dark .oggi span { color: var(--band-soft); }

@media (max-width: 62rem) { .totale { position: static; } }

/* Le venti voci comprese: elenco lungo, va a colonne o diventa un muro. */
.ticks.a-colonne { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 11px 26px; }

/* Riferimento della scheda: il logo del cliente e il mestiere, al posto
   del numero di pratica. Il logo sta in una pastiglia col suo fondo,
   perche' i marchi bianchi su trasparente sparirebbero sul chiaro. */
.job-ref { display: flex; align-items: center; gap: 10px; }
.job-logo {
  height: 30px; width: auto; max-width: 92px; flex: none;
  object-fit: contain; border-radius: 5px; padding: 4px 7px;
  background: #FFFFFF; border: 1px solid var(--rule);
}
.job-logo.su-scuro { background: #101519; }

/* ------------------------------------------------------------ copertine
   Nove schede non hanno una schermata da mostrare, e per tre di loro non
   ne esiste proprio una: una conversazione e' la chat di un cliente, una
   chiamata non si fotografa. Invece di riempire con un'illustrazione —
   errore gia' fatto due volte su questo sito — ogni scheda mostra la cosa
   che il prodotto fa, ridisegnata coi caratteri del sito: il campo di
   ricerca col suo risultato, la riga di catalogo, il doppio prezzo.
   Sono oggetti, non fotografie, e si vede che lo sono. */
.cover {
  position: relative; aspect-ratio: 16/10;
  border-bottom: 1px solid var(--rule); background: var(--sheet-alt);
  padding: 18px; display: flex; flex-direction: column; justify-content: center; gap: 9px;
  overflow: hidden;
}
/* Dentro una scheda di lavori la copertina deve avere la forma di
   un'immagine (16/10), se no le schede della griglia vengono storte. In una
   pagina prodotto invece sta da sola, e quella proporzione lascia mezzo
   riquadro vuoto: li' si prende l'altezza che le serve. */
.shotwrap > .cover {
  aspect-ratio: auto;
  border: 1px solid var(--rule); border-radius: var(--r);
  padding: 26px;
}

.cover-eyebrow {
  font-family: var(--font-data); font-size: 10px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--slate);
}
/* finto campo: bordo e cursore, senza fingere il widget di nessuno */
.cover-campo {
  display: flex; align-items: center; gap: 8px;
  border: 1px solid var(--rule); border-radius: var(--r-s);
  background: var(--sheet); padding: 9px 11px;
  font-family: var(--font-data); font-size: 13px;
}
.cover-campo::after {
  content: ''; width: 1px; height: 15px; background: var(--signal-ink);
  margin-left: auto; flex: none;
}
@media (prefers-reduced-motion: no-preference) {
  .cover-campo::after { animation: cursore 1.1s steps(1) infinite; }
  @keyframes cursore { 50% { opacity: 0; } }
}
.cover-riga {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  background: var(--sheet); border: 1px solid var(--rule); border-radius: var(--r-s);
  padding: 8px 11px; font-size: 13px; line-height: 1.25;
}
.cover-riga b { font-weight: 600; }
.cover-riga .val { font-family: var(--font-data); font-size: 12px; white-space: nowrap; }
.cover-riga.spenta { opacity: .45; }
.cover-riga.spenta .val { color: var(--stop); }
.cover-riga .si { color: var(--ok); font-weight: 600; }
.cover-nota { font-family: var(--font-data); font-size: 11px; color: var(--slate); line-height: 1.4; }
.cover-forte { font-family: var(--font-data); font-weight: 600; font-size: 15px; }
.cover-forte small { font-weight: 400; font-size: 11px; color: var(--slate); }

/* ------------------------------------------------------------ chi sono */
.who { display: grid; grid-template-columns: 220px 1fr; gap: 34px; padding: 30px 26px; align-items: start; }
.who img { border-radius: var(--r); border: 1px solid var(--rule); }
.who p { color: var(--slate); margin-bottom: 14px; max-width: 62ch; }
.tecnico { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; justify-content: center; }
.tecnico img { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; border: 1px solid var(--rule); }
.tecnico-name { font-weight: 600; line-height: 1.3; }

/* ------------------------------------------------------- testo lungo */
.prose > * + * { margin-top: 15px; }
.prose h2 { font-size: 23px; margin-top: 34px; }
.prose h3 { font-size: 18px; margin-top: 24px; }
.prose p, .prose li { color: var(--slate); }
.prose ul, .prose ol { padding-left: 22px; display: grid; gap: 7px; }
.prose a { color: var(--signal-ink); }
html[data-theme="dark"] .prose a { color: var(--signal); }
.prose { overflow-wrap: anywhere; }

.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 8px 0; }
.prose table { border-collapse: collapse; min-width: 480px; font-size: 14px; }
.prose th, .prose td { border: 1px solid var(--rule); padding: 9px 11px; text-align: left; vertical-align: top; }
.prose th {
  background: var(--sheet-alt); color: var(--ink);
  font-family: var(--font-data); font-size: 11px;
  letter-spacing: .1em; text-transform: uppercase;
}

/* ------------------------------------------------------------- chiusura */
.close { padding: 34px 26px; text-align: center; }
.close p { color: var(--slate); margin: 12px auto 24px; max-width: 52ch; }
.close .btn-group { justify-content: center; }

/* --------------------------------------------------------------- footer */
footer { padding: 44px 0 64px; }
.footer-in {
  display: flex; justify-content: space-between; gap: 18px; flex-wrap: wrap;
  border-top: 1px solid var(--rule); padding-top: 22px;
  font-size: 14px; color: var(--slate);
}
/* Un link dentro una frase, non un pulsante: sottolineato, come si aspetta
   chiunque abbia mai usato un sito. Serve dove la riga continua e un
   pulsante spezzerebbe la lettura a meta'. */
.link-testo {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--signal);
  white-space: nowrap;
}
.link-testo:hover { color: var(--signal); }

.footer-in a { text-decoration: none; }
.footer-in a:hover { text-decoration: underline; }
.motto { font-family: var(--font-data); font-size: 12px; letter-spacing: .06em; }

/* ------------------------------------------------- pannelli su fascia scura
   Un .sheet dentro una fascia scura resterebbe bianco e la bucherebbe.
   Qui prende i colori della fascia, senza cambiare il markup della pagina. */
.band.dark .sheet { background: #0C1116; border-color: var(--band-line); }
.band.dark .sheet-head { background: #131A21; border-color: var(--band-line); }
.band.dark .sheet-row { border-color: var(--band-line); }
.band.dark .listino-row { border-color: var(--band-line); }
.band.dark .listino-note,
.band.dark .listino-price small,
.band.dark .price-note,
.band.dark .price-per,
.band.dark .disclaimer { color: var(--band-soft); }
.band.dark .call-num { border-color: var(--band-ink); }
.band.dark .call-num:hover { background: var(--band-ink); color: var(--band); }

.band.dark .job-desc { color: var(--band-soft); }
.band.dark .job { border-color: var(--band-line); }
.band.dark .job:hover { border-color: var(--band-soft); }
.band.dark .job:hover .job-title { color: var(--signal); }
.band.dark .field-hint { color: var(--band-soft); }

/* ------------------------------------------------------ dentro / fuori
   Le due liste stanno affiancate senza pannello: dentro una fascia il
   bordo di una card e' rumore, il contrasto della fascia basta gia'.
   La colonna di cosa resta fuori non e' un ripensamento: dirlo prima
   evita la telefonata dopo. */
.duo { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; }
@media (min-width: 62rem) { .duo { grid-template-columns: 1fr 1fr; gap: 64px; } }
.duo-col > .field-label { display: block; padding-bottom: 12px; border-bottom: 1px solid var(--rule); margin-bottom: 20px; }
.band.dark .duo-col > .field-label { border-color: var(--band-line); }
.duo .ticks li { font-size: 16px; }

/* ------------------------------------------------------------- i passi
   Numerati e in fila verticale: e' una sequenza nel tempo, non un menu.
   Il numero e' l'unico posto della pagina dove l'ambra fa da guida. */
.steps { display: grid; gap: 0; counter-reset: step; }
.step {
  display: grid; grid-template-columns: 54px 1fr; gap: 22px;
  padding: 24px 0; border-bottom: 1px solid var(--rule);
  counter-increment: step;
}
.step:last-child { border-bottom: 0; }
.band.dark .step { border-color: var(--band-line); }
.step::before {
  content: counter(step, decimal-leading-zero);
  font-family: var(--font-data); font-weight: 600; font-size: 15px;
  color: var(--signal-ink); padding-top: 2px;
}
html[data-theme="dark"] .step::before,
.band.dark .step::before { color: var(--signal); }
.step h3 { font-size: 20px; line-height: 1.2; }
.step p { color: var(--slate); margin-top: 7px; max-width: 60ch; }
.band.dark .step p { color: var(--band-soft); }

/* --------------------------------------------------- comparsa allo scroll
   Solo se il JavaScript ha acceso .js: senza script il contenuto resta
   visibile, che e' il requisito. */
html.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
html.js .reveal.on { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html.js .reveal { opacity: 1; transform: none; transition: none; }
  .ring { animation: none; }
}

/* --------------------------------------------------------------- mobile */
@media (max-width: 760px) {
  body { font-size: 16px; }
  .section { padding: 52px 0; }
  .band { padding: 56px 0; }
  .hero { padding: 48px 0 0; }
  .hero .shotwrap { margin-top: 36px; }
  .sheet-row { grid-template-columns: 1fr; gap: 6px; padding: 18px; }
  .sheet-row > .field-label { padding-top: 0; }
  .call, .who { grid-template-columns: 1fr; }
  .who img { max-width: 200px; }
  .proof-cell { border-right: 0; border-bottom: 1px solid var(--rule); }
  .proof-cell:last-child { border-bottom: 0; }
  .listino-row { grid-template-columns: 1fr; gap: 4px; }
  .duo { gap: 32px; }
  .step { grid-template-columns: 34px 1fr; gap: 14px; padding: 20px 0; }
  .dialogo-in { padding: 16px; }
  .dice { max-width: 100%; }
  .registro-riga { grid-template-columns: 1fr auto; }
  .registro-riga time { grid-column: 1 / -1; }
  .modulo { grid-template-columns: 22px 1fr; }
  .modulo .quanto { grid-column: 2; }
  .scheda-campo { padding: 12px 18px; }
}
.menu-apri {
  display: none; flex-direction: column; justify-content: center; gap: 5px;
  width: 44px; height: 44px; padding: 0 11px; margin-right: -8px;
  background: none; border: 0; border-radius: var(--r-s); cursor: pointer; color: var(--ink);
}
.menu-apri span { display: block; height: 2px; background: currentColor; border-radius: 2px; transition: transform .18s ease, opacity .18s ease; }
.menu-apri[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menu-apri[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.menu-apri[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.menu-apri:focus-visible { outline: 3px solid var(--signal); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .menu-apri span { transition: none; } }

/* ------------------------------------------------------- tasto WhatsApp
   Sempre in basso a destra. Il verde e' quello di WhatsApp: e' il segnale
   che si riconosce prima di leggere, e cambiarlo lo renderebbe un bottone
   qualunque. Niente pulsazione infinita: quella e' pubblicita'. */
.wa-fisso {
  position: fixed; right: 20px; bottom: 20px; z-index: 60;
  width: 58px; height: 58px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: #25D366; color: #fff;
  box-shadow: 0 10px 28px rgba(0, 0, 0, .45);
  transition: transform .18s ease, box-shadow .18s ease;
}
.wa-fisso svg { width: 30px; height: 30px; fill: currentColor; }
.wa-fisso:hover { transform: translateY(-2px); box-shadow: 0 14px 34px rgba(37, 211, 102, .35); }
.wa-fisso:focus-visible { outline: 3px solid var(--signal); outline-offset: 3px; }
@media (max-width: 600px) {
  .wa-fisso { right: 14px; bottom: 14px; width: 54px; height: 54px; }
  .wa-fisso svg { width: 28px; height: 28px; }
}
@media (prefers-reduced-motion: reduce) { .wa-fisso { transition: none; } }

/* Il marchio del prodotto sopra il titolo delle pagine prodotto (10/09):
   logo e nome, come nelle immagini dello shop. I loghi stanno in
   img/prodotti/ e li scrive scripts-shop/copertine/_scrivi-loghi.py. */
.marchio-prodotto {
  display: inline-flex; align-items: center; gap: 14px; margin: 0 0 14px;
  font-family: var(--font-display); font-weight: 700; font-size: clamp(30px, 4.4vw, 42px);
  letter-spacing: -.03em; line-height: 1;
}
.marchio-prodotto img { width: 1.35em; height: 1.35em; flex: none; }
.marchio-prodotto i { font-style: normal; font-weight: 400; opacity: .72; }

/* Il banner dei cookie (10/09, Marco: «i cookie devono essere accettati
   appena si apre il sito, quindi anche in home»). Lo script e' QUELLO del
   tema WordPress (/wp-content/themes/vortis-wp-theme/assets/js/cookie-consent.js),
   cosi' il cookie vortis_consent e' uno solo: chi sceglie qui non se lo
   ritrova nello shop. Qui c'e' solo la pelle del sito nuovo. */
#vt-consent-overlay {
  position: fixed; inset: 0; z-index: 1000; padding: 16px;
  display: flex; align-items: flex-end; justify-content: center;
  background: rgba(5, 7, 10, .62);
}
#vt-consent-banner {
  width: 100%; max-width: 620px; padding: 28px 28px 24px;
  background: var(--sheet); color: var(--ink); border: 1px solid var(--rule);
  border-radius: 16px; box-shadow: 0 -12px 48px rgba(0, 0, 0, .5);
  font-family: var(--font-body); max-height: calc(100vh - 32px); overflow: auto;
}
#vt-consent-banner h3 { font-family: var(--font-display); font-size: 22px; font-weight: 700; letter-spacing: -.02em; margin: 0 0 10px; }
#vt-consent-banner p { font-size: 15px; line-height: 1.55; color: var(--slate); margin: 0 0 10px; }
.vt-cb-links a { color: var(--signal); text-decoration: underline; text-underline-offset: 3px; }
.vt-cb-buttons { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.vt-cb-btn {
  min-height: 44px; padding: 10px 20px; border-radius: var(--r-s); cursor: pointer;
  font: 600 15px/1 var(--font-body); border: 1px solid transparent; white-space: nowrap;
}
.vt-cb-primary { background: var(--signal); color: #14181F; }
.vt-cb-secondary, .vt-cb-outline { background: transparent; color: var(--ink); border-color: var(--rule); }
.vt-cb-secondary:hover, .vt-cb-outline:hover { border-color: var(--signal); }
.vt-cb-btn:focus-visible, #vt-consent-icon:focus-visible { outline: 3px solid var(--signal); outline-offset: 3px; }
.vt-cb-category { border: 1px solid var(--rule); border-radius: 10px; padding: 14px 16px; margin-bottom: 10px; }
.vt-cb-cat-row { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 4px; }
.vt-cb-category > p { margin: 0 !important; font-size: 14px !important; }
.vt-cb-switch { position: relative; display: inline-block; width: 44px; height: 24px; flex: none; cursor: pointer; }
.vt-cb-switch.vt-cb-disabled { opacity: .5; cursor: not-allowed; }
.vt-cb-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.vt-cb-track { position: absolute; inset: 0; border-radius: 24px; background: var(--rule); transition: background .2s; }
.vt-cb-track::before { content: ""; position: absolute; left: 3px; bottom: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: transform .2s; }
.vt-cb-switch input:checked + .vt-cb-track { background: var(--signal); }
.vt-cb-switch input:checked + .vt-cb-track::before { transform: translateX(20px); }
.vt-cb-switch input:focus-visible + .vt-cb-track { outline: 3px solid var(--signal); outline-offset: 2px; }
@media (max-width: 600px) {
  #vt-consent-banner { padding: 22px 18px 18px; }
  .vt-cb-buttons { flex-direction: column; }
  .vt-cb-btn { width: 100%; }
}

/* Il carrello, in basso a sinistra come nello shop (10/09): prima spariva
   appena si usciva dallo shop. Il puntino compare se WooCommerce ha scritto
   il cookie woocommerce_items_in_cart (lo legge vortis.js). */
.carrello-fisso {
  position: fixed; left: 20px; bottom: 20px; z-index: 60;
  width: 58px; height: 58px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--sheet); color: var(--ink); border: 1px solid var(--rule);
  box-shadow: 0 10px 28px rgba(0, 0, 0, .45);
}
.carrello-fisso svg { width: 26px; height: 26px; }
.carrello-fisso:hover { border-color: var(--signal); }
.carrello-fisso:focus-visible { outline: 3px solid var(--signal); outline-offset: 3px; }
.carrello-punto { position: absolute; top: 6px; right: 6px; width: 13px; height: 13px; border-radius: 50%; background: var(--signal); border: 2px solid var(--sheet); }
#vt-consent-icon {
  position: fixed; left: 29px; bottom: 90px; z-index: 59;
  width: 40px; height: 40px; border-radius: 50%; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  background: var(--sheet); color: var(--slate); border: 1px solid var(--rule);
}
@media (max-width: 600px) {
  .carrello-fisso { left: 14px; bottom: 14px; width: 54px; height: 54px; }
  #vt-consent-icon { left: 21px; bottom: 80px; }
}

/* Il tasto sole/luna in alto a destra (Marco, 10/09). Si vede l'icona del
   tema verso cui si passa: il sole quando e' scuro, la luna quando e' chiaro. */
.tema-btn {
  width: 44px; height: 44px; flex: none; order: 5; margin-left: 4px;
  display: inline-flex; align-items: center; justify-content: center;
  background: none; border: 1px solid var(--rule); border-radius: 50%;
  color: var(--ink); cursor: pointer;
}
.tema-btn:hover { border-color: var(--signal); }
@media (min-width: 1001px) { .topbar nav { margin-left: auto; } }
.tema-btn:focus-visible { outline: 3px solid var(--signal); outline-offset: 2px; }
.tema-btn svg { width: 20px; height: 20px; }
.tema-sole { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.tema-luna { fill: currentColor; }
.tema-sole { display: none; }
html[data-theme="dark"] .tema-sole { display: block; }
html[data-theme="dark"] .tema-luna { display: none; }
@media (max-width: 1000px) {
  /* sotto i 1000px: logo a sinistra, poi sole/luna e hamburger a destra */
  .tema-btn { order: 1; margin-left: auto; }
  .menu-apri { order: 2; margin-left: 4px; }
  .topbar nav { order: 3; }
}

/* Il menu dietro l'hamburger fino a 1000px (10/09): con la voce Blog le
   voci non stavano piu' in una riga fra 761 e 1000 px e la barra andava a
   capo (113 px a 800). Sotto i 1000 si apre col pulsante. */
@media (max-width: 1000px) {
  /* Sotto i 1000px il menu sta dietro l'hamburger (Marco, 10/09). Si chiude
     solo se c'e' JavaScript (classe .js su <html>), che e' anche quello che
     lo riapre: senza, le voci restano in vista e il sito navigabile. */
  .topbar-in { flex-wrap: wrap; row-gap: 0; }
  .topbar nav { width: 100%; flex-direction: column; align-items: stretch; gap: 0; padding: 6px 0 12px; }
  .topbar nav > a, .topbar nav .menu-giu-q {
    width: 100%; min-height: 48px; padding: 12px 6px; font-size: 17px;
    justify-content: space-between; border-bottom: 1px solid var(--rule); border-radius: 0;
  }
  .topbar nav a[aria-current="page"] { box-shadow: inset 3px 0 0 var(--signal); padding-left: 14px; }
  .menu-giu-a { border: 0; padding: 0 0 6px 12px; background: transparent; }
  .menu-giu-a a { font-size: 16px; padding: 11px 8px; }
  .js .topbar nav:not(.aperto) { display: none; }
  .js .menu-apri { display: inline-flex; }
  /* La barra e' sticky: con Servizi aperto il menu diventava piu' alto dello
     schermo e le voci sotto non si raggiungevano (Marco, 10/09). Il menu
     scorre da solo, e il fondo lascia spazio ai tasti fissi (carrello,
     cookie, WhatsApp) che se no coprono le ultime voci. */
  .topbar nav.aperto {
    max-height: calc(100vh - var(--bar-h) - 20px);
    max-height: calc(100dvh - var(--bar-h) - 20px);
    overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 96px;
    /* con l'altezza limitata una colonna flex va a capo in una seconda
       colonna fuori schermo, e le voci si schiacciano: niente di tutti e due */
    flex-wrap: nowrap;
  }
  .topbar nav.aperto > * { flex-shrink: 0; }
}