/* =========================================================================
   IsoTech — Fase 1: fondamenta
   Un solo sfondo continuo. Il ritmo lo fanno tipografia e spazi verticali.
   Nessuna animazione, nessuna transizione: arrivano nelle fasi successive.
   Scritto mobile-first: base a 360px, poi le media query.
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. Token
   ---------------------------------------------------------------------- */

:root {
  /* Il sito ha un solo tema, chiaro. "only light" dice ai browser da
     telefono di non applicare il loro scurimento automatico (Chrome
     Android, WebView delle app come WhatsApp): senza, in modalità notte
     invertivano i colori da soli — cubi grigi, blu sporchi. */
  color-scheme: only light;

  /* Colore — preso dal marchio, non da una palette generica */
  --sfondo:        #FAF9F7;  /* sfondo unico di tutta la pagina */
  --testo:         #0F1116;
  --testo-tenue:   #5A6270;
  --accento:       #0047FF;  /* blu della mascotte — accento su fondo chiaro */
  --scuro:         #07080B;  /* la singola sezione scura */
  --su-scuro:      #E9EDF3;  /* testo sulla sezione scura */
  --accento-scuro: #F0793C;  /* accento SOLO dentro la sezione scura */

  /* Le tre facce del cubo del logo — serviranno per le particelle */
  --cubo-alto:     #38B6FF;
  --cubo-destra:   #5170FF;
  --cubo-sinistra: #004AAD;

  /* L'accento cambia col fondo:
     --accento       su chiaro 5,95:1 -> testo ok | su scuro 3,19:1 -> mai testo
     --accento-scuro su chiaro 2,65:1 -> mai testo | su scuro 7,16:1 -> testo ok */
  --accento-premuto: #0038CC;               /* stato :hover del blu */
  --accento-testo:   var(--accento);        /* blu dei testi piccoli (di notte un filo più chiaro) */
  --su-scuro-tenue:  #9AA3B2;               /* derivato: testo tenue su scuro, 7,7:1 */

  /* Filetti: mai fasce, solo linee sottili */
  --linea:        rgba(15, 17, 22, 0.14);
  --linea-scura:  rgba(233, 237, 243, 0.18);
  --reticolo:     rgba(15, 17, 22, .05);   /* il motivo a griglia in cima alle pagine */
  --superficie:   #FFFFFF;                 /* card e riquadri */
  --superficie-2: #EFEFEF;                 /* elementi spenti dentro le card */
  --sfondo-alt:   #FBFBFA;                 /* fondo della sezione "Come lavoriamo" */
  --tinta:        rgba(15, 17, 22, .04);   /* velatura leggera */
  --alone-1:      rgba(56, 182, 255, .16); /* l'alone blu in cima alle pagine */
  --alone-2:      rgba(81, 112, 255, .07);

  /* Tipografia
     --font-titoli-hero: SOLO per il titolo + il paragrafo sotto, nella prima
     sezione di ogni pagina (.hero__titolo/.hero__sotto in home,
     .apertura__titolo/.apertura__sotto altrove) — un display bold, quello
     che si vede per primo aprendo una pagina.
     --font-titoli: tutti i titoli delle sezioni che vengono DOPO la prima
     (h2/h3, titoli di card, titoli del footer) — stesso ruolo di prima
     (era Chivo), font diverso. */
  --font-titoli-hero: "Sora", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-titoli: "Plus Jakarta Sans", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-corpo:  "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-dati:   "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;

  --t-h1:     clamp(2.1rem, 7.9vw, 4.6rem);   /* -16/-17% ca.: più spazio reale per l'anello */
  --t-h2:     clamp(1.9rem, 6.4vw, 3.5rem);
  --t-h3:     clamp(1.3rem, 4.4vw, 1.9rem);
  --t-lead:   clamp(1.05rem, 3.4vw, 1.375rem);
  --t-corpo:  1.0625rem;
  --t-mono:   0.75rem;

  /* Spazio */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: 4rem;
  --s-9: 6rem;

  /* Ritmo verticale tra sezioni: l'unico separatore ammesso */
  --ritmo:  clamp(5rem, 13vw, 9.5rem);
  --ritmo-testa: clamp(2.5rem, 6vw, 4.5rem);

  /* Griglia */
  --rail:    10rem;   /* colonna sinistra delle etichette */
  --wrap:    72rem;
  --margine: clamp(1.25rem, 5.5vw, 4rem);

  /* Area toccabile minima */
  --tocco: 44px;
}

/* -------------------------------------------------------------------------
   2. Reset essenziale
   ---------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: auto; /* niente scroll animato in questa fase */
}

body {
  margin: 0;
  background: var(--sfondo);   /* sfondo unico: hero -> footer, mai interrotto */
  color: var(--testo);
  font-family: var(--font-corpo);
  font-size: var(--t-corpo);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, p, ul, ol, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, canvas, svg { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; background: none; border: 0; }

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

.sezione--scura :focus-visible { outline-color: var(--accento-scuro); }

::selection { background: var(--accento); color: #fff; }

/* -------------------------------------------------------------------------
   3. Utilità
   ---------------------------------------------------------------------- */

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--margine);
}

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.salta {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: var(--s-3) var(--s-4);
  background: var(--testo);
  color: var(--sfondo);
  font-size: 0.875rem;
}
.salta:focus { left: var(--s-4); top: var(--s-4); }

/* Etichette e dati: monospace, testi brevi soltanto */
.etichetta {
  font-family: var(--font-dati);
  font-size: var(--t-mono);
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--testo-tenue);
}

/* Nella sezione scura l'ambra colora eyebrow e numeri dei passaggi, e basta */
.sezione--scura .etichetta { color: var(--accento-scuro); }

/* Segnaposto: si devono vedere, non devono somigliare a contenuto vero */
.segnaposto {
  font-family: var(--font-dati);
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--testo-tenue);
  padding: var(--s-3) var(--s-4);
  border: 1px dashed var(--linea);
  border-radius: 3px;
}

.segnaposto--scuro {
  color: var(--su-scuro-tenue);
  border-color: var(--linea-scura);
}

/* -------------------------------------------------------------------------
   4. Bottoni e collegamenti
   ---------------------------------------------------------------------- */

.bottone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  min-height: var(--tocco);
  padding: var(--s-3) var(--s-5);
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.2;
  text-decoration: none;
  border-radius: 2px;
}

.bottone--primario {
  background: var(--accento);
  color: #fff;
}
.bottone--primario:hover { background: var(--accento-premuto); }

.bottone--secondario {
  color: var(--testo);
  box-shadow: inset 0 0 0 1px var(--linea);
}
.bottone--secondario:hover { box-shadow: inset 0 0 0 1px var(--testo); }

.sezione--scura .bottone--secondario {
  color: var(--su-scuro);
  box-shadow: inset 0 0 0 1px var(--linea-scura);
}

.azioni {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
}

.collegamento {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  min-height: var(--tocco);
  font-family: var(--font-dati);
  font-size: 0.8125rem;
  letter-spacing: 0.03em;
  color: var(--accento-testo);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.collegamento:hover { border-bottom-color: var(--accento); }

/* -------------------------------------------------------------------------
   5. Intestazione e navigazione
   ---------------------------------------------------------------------- */

.intestazione {
  background: var(--sfondo); /* stesso colore della pagina: nessuna fascia */
}

.intestazione__interno {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-4);
  min-height: 64px;
  padding-block: var(--s-3);
}

/* Marchio: segno grafico + nome. Il segno è per ora l'icona del marchio
   (tessera scura), l'unico file reale in cartella. */
.marchio {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  min-height: var(--tocco);
  text-decoration: none;
  color: var(--testo);
  margin-right: auto;
}

/* assets/logo.svg è un export Canva: dentro non c'è vettoriale vero, è
   un PNG mascherato con filtri complessi. Ritagliato al volo via
   background-position su un pezzo così piccolo (solo il cubo, non tutta
   la composizione con la griglia intorno), quei filtri lasciano un
   residuo nero ai bordi in alcuni browser. marchio-segno.png è lo
   stesso ritaglio già "cotto" in un PNG piatto con alpha vero: niente
   filtri da ricalcolare a ogni render, niente residui. */
.marchio__segno {
  width: 32px;           /* mai oltre i 40px in header */
  height: 32px;
  flex: 0 0 auto;
  background: url("assets/marchio-segno.png") center / contain no-repeat;
}

.marchio__nome {
  font-family: var(--font-titoli);
  font-weight: 800;
  font-size: 1.0625rem;
  letter-spacing: -0.02em;
}

/* Su schermo piccolo la nav va a capo sotto il marchio e scorre in orizzontale:
   senza JavaScript un menù a panino sarebbe un pulsante che non apre niente. */
.nav {
  order: 3;
  flex-basis: 100%;
  border-top: 1px solid var(--linea);
}

.nav__voci {
  display: flex;
  align-items: center;
  gap: clamp(var(--s-4), 2vw, var(--s-6));
  overflow-x: auto;
  scrollbar-width: none;
}
.nav__voci::-webkit-scrollbar { display: none; }
.nav__voce { flex: 0 0 auto; }

.nav__voce { position: relative; }

.nav__link {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  min-height: var(--tocco);
  padding-inline: var(--s-1);
  font-size: 0.9375rem;
  color: var(--testo);
  text-decoration: none;
  cursor: pointer;
}
.nav__link:hover { color: var(--accento-testo); }

.nav__freccia { font-size: 0.75rem; }

/* Pannello Servizi: chiuso di default, lo apre nav.js con
   .nav__pannello--aperto. Il riferimento è .intestazione__interno e non la
   voce: così esce da .nav__voci, che su schermo stretto scorre (overflow)
   e lo taglierebbe. Senza left/right il pannello resta in orizzontale dove
   starebbe nel flusso, cioè sotto il pulsante Servizi.
   Da chiuso è visibility: hidden, quindi i link non ricevono il focus. */
.intestazione__interno { position: relative; }
.nav__voce--menu { position: static; }

.nav__pannello {
  position: absolute;
  top: calc(100% - var(--s-2));
  z-index: 60;
  width: 22rem;
  max-width: calc(100vw - 2 * var(--s-4));
  padding: var(--s-2) var(--s-4) var(--s-3);
  background: var(--sfondo);
  border: 1px solid var(--linea);
  border-radius: 6px;
  box-shadow: 0 24px 48px -24px rgba(15, 17, 22, 0.28);   /* --testo, trasparente */
  opacity: 0;
  transform: translateY(-6px);
  visibility: hidden;
  transition: opacity 0.18s ease-out, transform 0.18s ease-out, visibility 0s linear 0.18s;
}
.nav__pannello--aperto {
  opacity: 1;
  transform: none;
  visibility: visible;
  transition: opacity 0.18s ease-out, transform 0.18s ease-out, visibility 0s;
}
@media (prefers-reduced-motion: reduce) {
  .nav__pannello { transition: none; }
}

.nav__trigger .nav__freccia { transition: transform 0.18s ease-out; }
.nav__trigger[aria-expanded="true"] .nav__freccia { transform: rotate(180deg); }

.nav__pannello-lista li + li { border-top: 1px solid var(--linea); }
.nav__pannello-lista a:hover .nav__pannello-nome { color: var(--accento-testo); }
.nav__pannello-lista a[aria-current="page"] .nav__pannello-nome { color: var(--accento-testo); }

.nav__pannello-lista a {
  display: block;
  padding: var(--s-3) 0;
  text-decoration: none;
}
.nav__pannello-nome { display: block; font-weight: 500; }
.nav__pannello-desc { display: block; font-size: 0.875rem; color: var(--testo-tenue); }
.nav__pannello-tutti {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  min-height: var(--tocco);
  font-family: var(--font-dati);
  font-size: var(--t-mono);
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--accento-testo);
  text-decoration: none;
}

.intestazione__cta { padding-inline: var(--s-4); }

/* -------------------------------------------------------------------------
   6. Sezioni: il ritmo è tutto qui
   ---------------------------------------------------------------------- */

.sezione { padding-block: var(--ritmo); }

.sezione__testa {
  max-width: 30ch;
  margin-bottom: var(--ritmo-testa);
}

.sezione__titolo {
  font-family: var(--font-titoli);
  font-weight: 800;
  font-size: var(--t-h2);
  line-height: 1.02;
  letter-spacing: -0.03em;
  text-wrap: balance;
  margin-top: var(--s-3);
}

/* L'unica sezione a fondo scuro di tutta la pagina */
.sezione--scura {
  background: var(--scuro);
  color: var(--su-scuro);
}

/* Samsung Internet in modalità notte scurisce da sé ogni sito che non
   dichiara un proprio tema scuro, e ignora "only light". Se però trova
   una regola prefers-color-scheme: dark, lascia i colori al sito: questa
   regola non cambia nulla, ribadisce solo il tema chiaro. */
@media (prefers-color-scheme: dark) {
  :root { color-scheme: only light; }
  html, body { background: var(--sfondo); color: var(--testo); }
}

/* -------------------------------------------------------------------------
   7. Hero
   ---------------------------------------------------------------------- */

/* Hero a due colonne: testo a sinistra, a destra la scena del cubo
   (hero-cubo.js). Sotto i 900px le colonne si impilano, cubo sotto. */
.hero {
  position: relative;
  isolation: isolate;
  padding-block: clamp(2rem, 6vw, 4rem) clamp(3rem, 7vw, 5rem);
}

/* Griglia leggera + alone dei blu (vedi .apertura::before in
   servizio.css "14b."): l'alone sta a destra, dietro al cubo. */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    linear-gradient(var(--reticolo) 1px, transparent 1px),
    linear-gradient(90deg, var(--reticolo) 1px, transparent 1px),
    radial-gradient(42% 58% at 72% 46%, var(--alone-1), var(--alone-2) 50%, transparent 75%);
  background-size: 56px 56px, 56px 56px, 100% 100%;
  -webkit-mask-image: radial-gradient(90% 85% at 60% 40%, #000 40%, transparent 85%);
          mask-image: radial-gradient(90% 85% at 60% 40%, #000 40%, transparent 85%);
}

.hero__interno {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  gap: clamp(1rem, 4vw, 2.5rem);
}

.hero__testo {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.25rem;
  animation: hero-sale 700ms cubic-bezier(.2, .7, .2, 1) both;
}

.hero__titolo {
  font-family: var(--font-titoli-hero);
  font-weight: 800;
  font-size: clamp(2.4rem, 5.2vw, 4.25rem);
  line-height: 0.98;
  letter-spacing: -0.045em;
  max-width: 12ch;
  text-wrap: balance;
}

.hero__sotto {
  font-family: var(--font-titoli-hero);
  font-weight: 400;
  font-size: clamp(1.02rem, 1.6vw, 1.2rem);
  line-height: 1.55;
  color: var(--testo-tenue);
  max-width: 36ch;
  text-wrap: pretty;
}

.hero .azioni { margin-top: var(--s-2); }

/* Evita che una parola col trattino si spezzi a fine riga (e-/commerce) */
.senza-cesura { white-space: nowrap; }

.hero__scena {
  position: relative;
  width: 100%;
  max-width: 440px;
  justify-self: center;
  aspect-ratio: 1 / 1;
  margin-top: -0.5rem;
}

.hero__scena canvas {
  display: block;
  width: 100%;
  height: 100%;
}

@keyframes hero-sale {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .hero__testo { animation: none; }
}

/* -------------------------------------------------------------------------
   8. Video
   ---------------------------------------------------------------------- */

/* Il video cresce allo scroll mentre la sezione attraversa lo schermo
   (sezioni.js, da 768px): da circa metà viewport a quasi piena larghezza.
   Nessun pin: lo spazio di scroll è tutto qui, in min-height.
   La sezione ha lo sfondo chiaro della pagina; la cornice non ha bordo,
   ombra o alone. */
.video {
  padding-top: 0;
  min-height: 160vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Lo stato "a riposo" è quello di arrivo: 94% della larghezza, angoli di
   14px. Senza JavaScript o con reduced motion resta così, fermo. Lo script
   anima solo scale, quindi il rapporto resta quello in ogni istante.
   Il video è in object-fit: contain, quindi non viene mai ritagliato; il
   rapporto è quello del file perché non restino bande nere:
   showcase-compresso.mp4 è 1914×1080, cioè 16:9. */
.video__cornice {
  width: 94%;
  margin-inline: auto;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 14px;
  background: #000000;
  transform-origin: center center;
  will-change: transform;
}

.video__player {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;          /* il fotogramma sempre intero, mai ritagliato */
  background: #000000;          /* niente lampi prima del primo fotogramma */
}

/* Sotto i 768px: niente ingrandimento. Cornice a piena larghezza, senza
   angoli (toccherebbero il bordo dello schermo), e la sezione alta quanto
   il suo contenuto: i 160vh servono solo allo scroll dell'animazione. */
@media (max-width: 767.98px) {
  .video {
    min-height: 0;
    padding-block: var(--ritmo);
  }
  .video__cornice {
    width: 100%;
    border-radius: 0;
    will-change: auto;
  }
}

/* -------------------------------------------------------------------------
   9. Lavori (pagina lavori.html — il "prima/dopo" a schermo intero)
   ---------------------------------------------------------------------- */

.lavoro__media {
  display: grid;
  place-items: center;
  padding: var(--s-4);
  border: 1px solid var(--linea);
  border-radius: 4px;
}
/* Niente aspect-ratio fisso: un rapporto unico forzava lo stesso
   ritaglio (object-fit: cover) su screenshot con proporzioni diverse fra
   loro, e con qualunque rapporto scelto qualcosa finiva tagliato o
   schiacciato. Qui l'altezza la decide l'immagine stessa (width:100%,
   height:auto sotto): il riquadro si adatta a lei, mai il contrario —
   intera, senza ritagli, qualunque sia la sua proporzione. */
.lavoro__media--grande  { position: relative; overflow: hidden; }

/* -------------------------------------------------------------------------
   9b. Converter — promo di IsoTech Converter in home

   Testo a sinistra (titolo, sotto, nota, link), la finestra col video a
   destra — sotto i 768px la finestra scende sotto al testo.
   ---------------------------------------------------------------------- */
.converter__interno {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-6);
}

.converter__testo { flex: 1 1 22rem; }

.converter__titolo { margin-bottom: var(--s-4); }

.converter__sotto {
  font-size: var(--t-lead);
  line-height: 1.5;
  color: var(--testo);
  text-wrap: pretty;
  max-width: 42ch;
}

.converter__nota {
  margin-top: var(--s-2);
  font-size: 0.9375rem;
  color: var(--testo-tenue);
}

.converter__link { margin-top: var(--s-5); }

.converter__finestra {
  flex: 1 1 24rem;
  aspect-ratio: 16 / 9;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: #000000;
  border-radius: 14px;
}
.converter__finestra .segnaposto { padding: var(--s-4); color: var(--su-scuro-tenue); border-color: var(--linea-scura); text-align: center; }

/* Il file converter.mp4 ha già dentro, cotta nei pixel, una grande
   cornice nera intorno alla schermata registrata (non è un problema di
   riquadro/CSS: è così il video sorgente). object-fit: cover da solo
   non basta a "riempire" perché riquadro e fotogramma hanno LO STESSO
   rapporto 16:9 — cover non ha nulla da ritagliare. Lo zoom qui sotto
   (misurato sui pixel reali del video: il contenuto utile occupa 906×784
   su un fotogramma 1920×1080) tocca anche i bordi laterali, come
   richiesto — ma essendo il contenuto più "quadrato" del riquadro 16:9,
   per toccare i lati si ritaglia una fascia sopra e sotto (via titolo
   "Universal Converter" e riga file in fondo): è l'unico modo per
   arrivare ai bordi senza deformare l'immagine. */
.converter__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 14px;
  transform: scale(2.15);
}

/* -------------------------------------------------------------------------
   10. Punti di forza — tre figure isometriche, non più cliccabili

   Sostituisce le vecchie quattro card servizio (erano linkate alle pagine
   siti-web/e-commerce/software/bot): questa sezione è solo illustrativa,
   l'unico punto da cui si raggiungono quelle pagine ora è il dropdown
   "Servizi" della nav. Tre SVG isometrici negli stessi blu del cubo del
   marchio (--cubo-alto/--cubo-destra/--cubo-sinistra, gli stessi token
   usati per il cubo dell'hero — nessun colore nuovo). FIG 0.1 e FIG 0.3
   si animano da sole in loop continuo (forza.js non le tocca); FIG 0.2
   salta ad arco sempre, e forza.js accende/spegne solo la scia di
   cubetti dietro al salto, al passaggio del mouse sulla colonna.
   ---------------------------------------------------------------------- */

.forza {
  /* Toni neutri che il resto del sito non ha ancora come token: vivono
     solo qui, come --accento-caldo nelle card prima di questa sezione. */
  --forza-tenue: #8A8F99;
  --forza-tratto: #4A4F58;
  --forza-filo: rgba(15, 17, 22, .10);

  padding-block: var(--ritmo);
}

.forza__titolo {
  font-family: var(--font-corpo);
  font-weight: 500;
  font-size: clamp(1.4rem, 3.2vw, 2.1rem);
  line-height: 1.2;
  letter-spacing: -0.01em;
  max-width: 54rem;
  margin: 0 0 var(--s-8);
}
.forza__titolo span { color: var(--forza-tenue); }

.forza__griglia { display: grid; grid-template-columns: 1fr; row-gap: var(--s-8); }

.forza__col { padding: 0; }

.forza__lbl {
  display: block;
  font-family: var(--font-dati);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  color: var(--testo-tenue);
}

.forza__fig { display: block; width: 100%; height: 250px; margin: var(--s-4) 0 var(--s-6); overflow: visible; }

.forza__col h3 { font-size: 0.9375rem; font-weight: 600; margin: 0 0 var(--s-2); color: var(--testo); }
.forza__col p { font-size: 0.875rem; line-height: 1.55; color: var(--testo-tenue); margin: 0; max-width: 300px; }

/* --- Il disegno: contorno chiaro allo stato di riposo, i tre blu del
   marchio solo sul cubetto del logo (FIG 0.1/0.2). Niente colore nuovo. --- */

.fz-f { fill: var(--sfondo); stroke: var(--forza-tratto); stroke-width: .9; stroke-linejoin: round; transition: stroke .35s ease; }
.fz-nasc { stroke: var(--forza-tratto); stroke-width: .8; stroke-dasharray: 1.5 2.5; opacity: .5; }
.fz-cu { stroke: var(--testo); stroke-width: .6; stroke-linejoin: round; stroke-opacity: .25; }
.fz-cu--alto { fill: var(--cubo-alto); }
.fz-cu--destra { fill: var(--cubo-destra); }
.fz-cu--sinistra { fill: var(--cubo-sinistra); }
.fz-logo { animation: forza-galleggia 5s ease-in-out infinite; }
@keyframes forza-galleggia { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
.forza__fig g { transform-box: fill-box; transform-origin: center; }

/* FIG 0.1 — gli strati si chiudono e si riaprono, come un pezzo che si assembla */
.fz-strato { animation: forza-assembla 5s cubic-bezier(.6, 0, .2, 1) infinite; }
@keyframes forza-assembla {
  0%, 20%, 100% { transform: translateY(0); }
  55%, 70%      { transform: translateY(calc(var(--i) * -7px)); }
}

/* FIG 0.2 — la scia lasciata dal salto, e la sagoma d'arrivo tratteggiata */
.fz-orma .fz-cu { fill-opacity: .55; stroke-opacity: .15; }
.fz-arrivo { fill: none; stroke: var(--accento); stroke-width: 1; stroke-dasharray: 2 3; opacity: .6; }

/* FIG 0.3 — al passaggio del mouse sulla colonna, le lastre si alzano a onda */
.fz-lastra { transition: transform .5s cubic-bezier(.34, 1.4, .64, 1); transition-delay: calc(var(--i) * 35ms); }
.forza__col:hover .fz-lastra { transform: translateY(-16px); }
.forza__col:hover .fz-lastra .fz-f { stroke: var(--testo); }

@media (min-width: 900px) {
  .forza__griglia { grid-template-columns: repeat(3, 1fr); row-gap: 0; }
  .forza__col { padding: 0 var(--s-7) var(--s-2); border-left: 1px solid var(--forza-filo); }
  .forza__col:first-child { border-left: 0; padding-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .fz-strato, .fz-logo { animation: none; }
}

/* -------------------------------------------------------------------------
   11b. Metodo (solo home) — un riquadro tipo "prompt" che scrive da solo

   Il contrappunto della home: non testo statico, una piccola macchina da
   scrivere che compone e cancella in loop quattro frasi (metodo.js),
   dentro un fondo con alone sfocato che respira e una griglia che sale
   e sfuma. Fraunces solo qui dentro — --font-serif-metodo, non tocca
   var(--font-titoli)/var(--font-corpo) usati nel resto del sito, per
   non rischiare che la cascata lo propaghi altrove per errore. I colori
   sono gli stessi token del resto del sito (--testo, --testo-tenue,
   --accento, --cubo-alto, --cubo-destra): nessun colore nuovo.

   L'animazione parte da sola al caricamento, non dipende da scroll o
   hover, e va avanti in loop finché la pagina resta aperta — per questo
   niente ScrollTrigger qui, è metodo.js che gestisce tutto (compreso il
   controllo di prefers-reduced-motion: testo già scritto, cursore e
   alone fermi). Il bottone freccia è decorativo (aria-hidden,
   tabindex="-1" nell'HTML): segue solo lo stato "frase completa", non
   è mai a fuoco né cliccabile.
   ---------------------------------------------------------------------- */

.metodo {
  position: relative;
  overflow: hidden;
  background: var(--sfondo-alt);
  padding: 120px 24px 150px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Lo stesso motivo che apre ogni pagina (griglia + alone dei blu, vedi
   .apertura::before in servizio.css "14b." e .hero::before qui sopra),
   stessa griglia e stessi blu — ma capovolto: lì è in alto e sfuma
   scendendo, qui sale dal basso e sfuma salendo, perché il riquadro sta
   alla fine della sezione, non all'inizio. Un solo elemento invece di
   due (::before + ::after separati di prima) con la stessa ricetta,
   respira piano con la stessa animazione di sempre. */
.metodo::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(var(--reticolo) 1px, transparent 1px),
    linear-gradient(90deg, var(--reticolo) 1px, transparent 1px),
    radial-gradient(60% 100% at 50% 100%, var(--alone-1), var(--alone-2) 45%, transparent 72%);
  background-size: 56px 56px, 56px 56px, 100% 100%;
  -webkit-mask-image: linear-gradient(to top, #000, transparent);
          mask-image: linear-gradient(to top, #000, transparent);
  animation: metodo-respiro 20s ease-in-out infinite;
}
@keyframes metodo-respiro {
  0%, 100% { transform: scale(1) translateY(0); }
  50%      { transform: scale(1.07) translateY(12px); }
}

.metodo > * { position: relative; z-index: 1; }

.metodo__titolo {
  --font-serif-metodo: 'Fraunces', serif;
  font-family: var(--font-serif-metodo);
  font-weight: 600;
  font-style: italic;
  font-size: clamp(36px, 4.6vw, 58px);
  line-height: 1.08;
  text-align: center;
  margin: 0 0 16px;
  color: var(--testo);
}
.metodo__sotto {
  --font-serif-metodo: 'Fraunces', serif;
  font-family: var(--font-serif-metodo);
  font-weight: 400;
  text-align: center;
  color: var(--testo-tenue);
  font-size: 17px;
  line-height: 1.55;
  margin: 0 0 40px;
  max-width: 520px;
}

/* La barra tipo prompt */
.prompt {
  width: min(760px, 100%);
  background: var(--superficie);
  border-radius: 14px;
  box-shadow: 0 10px 40px rgba(15, 17, 22, .10), 0 1px 0 rgba(15, 17, 22, .04);
  padding: 26px 28px 58px;
  position: relative;
  min-height: 168px;
}
.prompt__testo {
  --font-serif-metodo: 'Fraunces', serif;
  font-family: var(--font-serif-metodo);
  font-weight: 400;
  font-size: 21px;
  line-height: 1.6;
  color: var(--testo);
  white-space: pre-wrap;
  min-height: 86px;
}
.prompt__cursore {
  display: inline-block;
  width: 2px;
  height: 20px;
  background: var(--accento);
  vertical-align: -3px;
  margin-left: 1px;
  animation: metodo-lampeggia 1s steps(1) infinite;
}
@keyframes metodo-lampeggia { 0%, 50% { opacity: 1; } 51%, 100% { opacity: 0; } }

.prompt__invio {
  position: absolute;
  right: 20px;
  bottom: 18px;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  border: 0;
  background: var(--superficie-2);
  color: var(--testo-tenue);
  cursor: default;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .3s ease, color .3s ease;
}
.prompt__invio.attivo { background: var(--accento); color: #fff; }
.prompt__invio svg { width: 16px; height: 16px; }

@media (prefers-reduced-motion: reduce) {
  .metodo::before { animation: none; }
  .prompt__cursore { animation: none; }
}

/* -------------------------------------------------------------------------
   13. FAQ — details/summary nativi
   ---------------------------------------------------------------------- */

.domanda { border-top: 1px solid var(--linea); }
.faq__elenco > .domanda:last-child { border-bottom: 1px solid var(--linea); }

.domanda__testa {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-4);
  min-height: var(--tocco);
  padding-block: var(--s-4);
  cursor: pointer;
  list-style: none;
}
.domanda__testa::-webkit-details-marker { display: none; }

.domanda__titolo {
  font-size: 1.0625rem;
  font-weight: 500;
  line-height: 1.35;
  margin: 0;
}

.domanda__testa::after {
  content: "+";
  font-family: var(--font-dati);
  font-size: 1.125rem;
  color: var(--testo-tenue);
  line-height: 1;
}
.domanda[open] .domanda__testa::after { content: "–"; }

.domanda__corpo { padding-bottom: var(--s-5); max-width: 62ch; }

/* -------------------------------------------------------------------------
   14. Laboratorio — UNA scheda sola, piccola e centrata

   Non due riquadri separati con uno spazio in mezzo: un unico bordo e
   un unico angolo arrotondato intorno a tutta la scheda (overflow:
   hidden sul contenitore, il "taglio" netto è quello), divisa a metà
   da una linea verticale (border-right sulla colonna sinistra). Larga
   poco più del testo sopra (max-width vicino a .laboratorio__intro),
   NON a piena larghezza — deve restare un riquadro piccolo, non
   dominare la pagina.

   Sinistra: la foto grande. Destra: le quattro piccole "a finestra" in
   una griglia compatta (dimensione fissa, non stirata a riempire tutto
   lo spazio) con un leggero fondo blu, come il pannello di Steam dietro
   ai consigliati; sotto, staccata, la didascalia (due parole, da
   scrivere a mano) — una sola volta per il gruppo delle quattro, non
   sotto ognuna.

   Al passaggio del mouse (o focus da tastiera) su un riquadro, grande o
   piccolo che sia, si apre la SUA mini finestra con la spiegazione più
   lunga — un fumetto a parte, sopra il riquadro, non un overlay sulla
   foto.

   Per ora un solo progetto per riquadro: niente carosello, niente
   frecce, niente pallini. Se in futuro serviranno più "pagine" si
   riprende laboratorio.js (già presente, oggi inerte per assenza del
   markup che cercava).
   ---------------------------------------------------------------------- */

/* Come .contatti-richiamo: niente "rail", nessun elenco da allineare a
   sinistra — titolo, paragrafo e scheda tutti centrati sull'asse della
   sezione. */
.laboratorio .wrap { text-align: center; }
.laboratorio .sezione__testa { display: block; max-width: none; }
.laboratorio .sezione__titolo { max-width: none; }

.laboratorio__intro {
  font-size: var(--t-lead);
  line-height: 1.5;
  color: var(--testo-tenue);
  text-wrap: pretty;
  max-width: 52ch;
  margin-inline: auto;
  margin-top: calc(var(--ritmo-testa) * -0.5);
}

.laboratorio__vetrina {
  max-width: 52rem;
  margin: var(--s-6) auto 0;
  display: flex;
  align-items: stretch;
  background: var(--superficie);
  border: 1px solid var(--linea);
  border-radius: 12px;
  overflow: hidden;
}

/* --- In attesa del prossimo esperimento: un unico riquadro bianco,
   piccolo, con solo l'immagine di anteprima dentro, intera (nessun
   ritaglio). Allineato alla colonna del titolo, non centrato in pagina. */
.laboratorio__presto {
  flex: 1 1 auto;
  display: flex;
}
.laboratorio__presto-img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: contain;
  background: #f6f7f9;
  display: block;
}

/* -------------------------------------------------------------------------
   LIFE RPG — pannello laboratorio

   Il font "Press Start 2P" (caricato in index.html) vive solo qui dentro:
   non tocca il resto del sito. Al passaggio del mouse (o tocco, o focus)
   sull'anteprima del gioco si apre una pergamena con i dettagli e il
   modulo per la lista d'attesa. Vedi laboratorio-gioco.js per il
   posizionamento e l'invio.
   ---------------------------------------------------------------------- */

.vetrina-gioco{position:relative;cursor:crosshair;margin:0;width:100%}
.vetrina-gioco::after{content:"";position:absolute;inset:0;background:rgba(8,5,3,0);transition:background .25s;pointer-events:none}
.vetrina-gioco.aperto::after{background:rgba(8,5,3,.35)}

.pannello{position:absolute;z-index:3;width:256px;opacity:0;transform:translateY(8px) scale(.96);
  transition:opacity .2s ease,transform .25s cubic-bezier(.34,1.4,.64,1);pointer-events:none;
  image-rendering:pixelated;filter:drop-shadow(0 14px 22px rgba(0,0,0,.6))}
.vetrina-gioco.aperto .pannello{opacity:1;transform:none;pointer-events:auto}

/* Il tastino per chiudere: esiste sempre nel markup ma è nascosto qui,
   visibile solo nella variante da telefono qui sotto — su desktop si
   chiude passando il mouse fuori, non serve. */
.pannello-chiudi{display:none}

/* Da telefono il pannello ancorato dentro la locandina (256px fissi) non
   ci sta: sull'immagine piccola trabocca sotto e resta quasi illeggibile,
   né si riesce a compilare la lista d'attesa. Qui, solo per i dispositivi
   senza mouse (tocco), il pannello esce dalla locandina e si apre come
   overlay sopra tutta la pagina, sempre leggibile per intero — con un
   tastino di chiusura in alto a destra, dato che non c'è più un "fuori
   dall'immagine" su cui toccare per richiuderlo capendo cosa succede.
   !important perché laboratorio-gioco.js scrive top/left in linea (per
   il posizionamento desktop): qui vanno sempre ignorati.
   La condizione non si fida del solo hover:none: diversi Samsung (per la
   S-Pen) dichiarano di avere un "mouse" e finivano nel ramo desktop, col
   pannello tagliato dentro la locandina. Anche larghezza e puntatore
   grossolano contano come telefono. Stessa condizione in
   laboratorio-gioco.js (MODO_TELEFONO). */
@media (max-width:899px),(hover:none),(pointer:coarse){
  .vetrina-gioco.aperto::after{position:fixed!important;inset:0!important;z-index:200}

  .pannello{
    position:fixed!important;
    top:50%!important; left:50%!important;
    width:min(90vw,340px)!important;
    max-height:min(86svh,560px);
    overflow-y:auto;
    transform:translate(-50%,-46%) scale(.96)!important;
    z-index:201;
  }
  .vetrina-gioco.aperto .pannello{transform:translate(-50%,-50%)!important}

  .pannello-chiudi{
    display:flex; align-items:center; justify-content:center;
    position:absolute; top:6px; right:6px; z-index:1;
    width:22px; height:22px; padding:0; border:2px solid #5a3d22;
    background:#1c130b; color:#c9a46a;
    font-family:'IBM Plex Mono',monospace; font-size:13px; line-height:1;
    cursor:pointer;
  }
  .pannello-chiudi:active{background:#2a1c10}
}

.cornice{background:#0b0704;padding:4px;
  clip-path:polygon(0 8px,4px 8px,4px 4px,8px 4px,8px 0,calc(100% - 8px) 0,calc(100% - 8px) 4px,calc(100% - 4px) 4px,calc(100% - 4px) 8px,100% 8px,
    100% calc(100% - 8px),calc(100% - 4px) calc(100% - 8px),calc(100% - 4px) calc(100% - 4px),calc(100% - 8px) calc(100% - 4px),calc(100% - 8px) 100%,
    8px 100%,8px calc(100% - 4px),4px calc(100% - 4px),4px calc(100% - 8px),0 calc(100% - 8px))}
.interno{position:relative;padding:11px 13px 11px;border:2px solid #5a3d22;
  background:repeating-linear-gradient(0deg,rgba(255,255,255,.018) 0 2px,transparent 2px 4px),
             radial-gradient(ellipse at 50% 0%,rgba(255,170,80,.16),transparent 60%),#1c130b;
  font-family:'IBM Plex Mono',monospace}

.candela{display:flex;flex-direction:column;align-items:center;margin:-2px 0 8px}
.fiamma{width:6px;height:10px;background:#ffcf7a;clip-path:polygon(50% 0,85% 45%,70% 100%,30% 100%,15% 45%);
  box-shadow:0 0 0 0 transparent;filter:drop-shadow(0 0 4px #ff9d2e) drop-shadow(0 0 10px rgba(255,140,40,.7));
  animation:trema 1.2s steps(3) infinite alternate}
.cera{width:8px;height:9px;background:#e9dcc2;margin-top:1px}
@keyframes trema{0%{transform:scaleY(1) translateX(0)}50%{transform:scaleY(1.2) translateX(-1px)}100%{transform:scaleY(.9) translateX(1px)}}
.interno::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(circle at 50% 12px,rgba(255,170,80,.18),transparent 55%);animation:luce 2.4s ease-in-out infinite alternate}
@keyframes luce{from{opacity:.6}to{opacity:1}}

.pannello .titolo{font-family:'Press Start 2P',monospace;font-size:11px;color:#ffd79a;text-align:center;margin:0 0 3px;
  text-shadow:2px 2px 0 #3a2410,0 0 10px rgba(255,150,50,.45)}
.pannello .sottotitolo{font-size:9.5px;color:#a8875c;text-align:center;letter-spacing:.14em;text-transform:uppercase;margin:0 0 11px}

.voce{display:grid;grid-template-columns:54px 1fr;gap:6px;font-size:10.5px;line-height:1.4;margin-bottom:6px}
.voce dt{color:#c9a46a;font-size:8.5px;letter-spacing:.1em;padding-top:2px;text-transform:uppercase}
.voce dd{margin:0;color:#f0e4cf}
.divisore{height:2px;margin:8px 0;background:repeating-linear-gradient(90deg,#5a3d22 0 4px,transparent 4px 8px)}

.lista-bottone{display:block;width:100%;border:0;cursor:pointer;padding:9px 8px;
  font-family:'Press Start 2P',monospace;font-size:8.5px;letter-spacing:.04em;color:#1c130b;background:#ffc46b;
  box-shadow:inset -3px -3px 0 #c98a2c,inset 3px 3px 0 #ffe0a8;transition:transform .08s}
.lista-bottone:hover{background:#ffd08a}
.lista-bottone:active{transform:translateY(2px);box-shadow:inset 3px 3px 0 #c98a2c}
.lista-form{display:none;gap:6px}
.lista-form.visibile{display:flex}
.lista-form input{flex:1;min-width:0;padding:8px;border:2px solid #5a3d22;background:#0f0a06;color:#f0e4cf;
  font-family:'IBM Plex Mono',monospace;font-size:10.5px;outline:none}
.lista-form input:focus{border-color:#ffc46b}
.lista-form button{border:0;padding:0 10px;cursor:pointer;font-family:'Press Start 2P',monospace;font-size:9px;
  background:#ffc46b;color:#1c130b;box-shadow:inset -3px -3px 0 #c98a2c}
.lista-esito{display:none;font-size:10.5px;color:#9fe0a0;text-align:center;line-height:1.5}
.lista-esito.visibile{display:block}
.lista-nota{font-size:9px;color:#8a7358;text-align:center;margin:7px 0 0}

@media (prefers-reduced-motion:reduce){.fiamma,.interno::before{animation:none}.pannello{transition:none}}

/* -------------------------------------------------------------------------
   14b. Contatti (solo il richiamo in home — le due card vere sono su
   contatti.html, con .contatti-scheda in servizio.css)
   ---------------------------------------------------------------------- */

/* Niente "rail" qui (la colonna stretta a sinistra dove di solito sta
   l'etichetta, vedi .sezione__testa a 900px in su): questa sezione non ha
   un'etichetta, quindi da 900px in su il titolo restava da solo nella
   seconda colonna, spostato a destra invece che centrato. È un CTA di
   chiusura, non un elenco: tutto centrato, come .metodo/.finale. */
.contatti-richiamo .wrap { text-align: center; }
.contatti-richiamo .sezione__testa { display: block; max-width: none; }
.contatti-richiamo .sezione__titolo { max-width: none; }

.contatti-richiamo__testo {
  font-size: var(--t-lead);
  line-height: 1.5;
  color: var(--testo-tenue);
  text-wrap: pretty;
  max-width: 52ch;
  margin-inline: auto;
  margin-top: calc(var(--ritmo-testa) * -0.5);
}
.contatti-richiamo .bottone { margin-top: var(--s-6); margin-inline: auto; }

/* -------------------------------------------------------------------------
   15. CTA finale
   ---------------------------------------------------------------------- */

.finale__titolo { max-width: 18ch; }

.finale__recapiti {
  display: grid;
  gap: var(--s-4);
  border-top: 1px solid var(--linea);
  padding-top: var(--s-5);
}
.finale__recapiti .etichetta { display: block; }
.finale__recapiti .collegamento { font-size: 0.9375rem; }

.finale__corpo .bottone { margin-top: var(--s-6); }

/* -------------------------------------------------------------------------
   16. Footer
   ---------------------------------------------------------------------- */

.pie{
  position:relative; overflow:hidden;
  background:var(--scuro); color:var(--su-scuro);
}

/* Come .sezione--scura: sul fondo nero l'anello di focus blu di default
   (--accento) fa 3,19:1, sotto soglia. L'ambra (--accento-scuro) sul nero
   fa 7,16:1. */
.pie :focus-visible { outline-color: var(--accento-scuro); }

/* trama isometrica fioca, riprende il linguaggio del reticolo del brand */

/* ---- banda CTA ---- */
.pie__cta{
  position:relative; z-index:1;
  max-width:1180px; margin:0 auto; padding:88px 32px 64px;
  display:flex; align-items:flex-end; justify-content:space-between; gap:32px;
  border-bottom:1px solid var(--linea-scura);
}
.pie__cta-testo{max-width:640px}
.pie__disp{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--font-dati); font-size:12px; letter-spacing:.03em;
  color:var(--accento-scuro);
  border-bottom:1px solid rgba(240,121,60,.4);
  padding:0 0 6px; margin-bottom:26px;
}
.pie__disp-punto{
  width:6px; height:6px; border-radius:50%; background:var(--accento-scuro); flex:none;
  animation:pulsa 2s ease-in-out infinite;
}
@keyframes pulsa{
  0%,100%{ box-shadow:0 0 0 0 rgba(240,121,60,.45); }
  50%{ box-shadow:0 0 0 6px rgba(240,121,60,0); }
}
.pie__cta-titolo{
  font-family:var(--font-titoli); font-weight:800; font-size:clamp(28px,3.4vw,44px);
  line-height:1.08; margin:0 0 14px; color:#fff;
}
.pie__cta-titolo em{color:var(--accento-scuro); font-style:normal}
.pie__cta-sotto{margin:0; color:var(--su-scuro-tenue); font-size:15px; line-height:1.5}

.pie__cta-azioni{display:flex; flex-direction:column; align-items:flex-end; gap:14px; flex:none}
.pie__bottone{
  display:inline-flex; align-items:center; gap:10px;
  background:var(--accento); color:#fff; text-decoration:none;
  font-weight:700; font-size:15px; padding:13px 22px; border-radius:2px;
  white-space:nowrap; transition:background .18s ease;
}
.pie__bottone:hover{background:var(--accento-premuto)}
.pie__email{
  font-family:var(--font-dati); font-size:13px; color:var(--su-scuro-tenue); text-decoration:none;
  border-bottom:1px solid transparent; transition:border-color .18s ease, color .18s ease;
}
.pie__email:hover{color:var(--su-scuro); border-color:var(--su-scuro-tenue)}

/* ---- colonne ---- */
.pie__corpo{
  position:relative; z-index:1;
  max-width:1180px; margin:0 auto; padding:56px 32px 40px;
  display:grid; grid-template-columns:1.3fr 1fr 1fr 1fr; gap:32px;
}
.pie__blocco-marchio .marchio__nome{
  font-family:var(--font-titoli); font-weight:800; font-size:22px; color:#fff;
}
.pie__blocco-marchio p{color:var(--su-scuro-tenue); font-size:13px; margin:10px 0 0; max-width:220px; line-height:1.5}

.pie__col h3{
  font-family:var(--font-dati); font-size:11px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--su-scuro-tenue); margin:0 0 16px; font-weight:500; opacity:.75;
}
.pie__col ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:11px}
.pie__col a{
  color:#C7CBD6; text-decoration:none; font-size:14px;
  position:relative; transition:color .18s ease;
}
.pie__col a::after{
  content:""; position:absolute; left:0; bottom:-2px; width:0; height:1px;
  background:var(--accento-scuro); transition:width .22s ease;
}
.pie__col a:hover{color:var(--su-scuro)}
.pie__col a:hover::after{width:100%}


/* ---- coda ---- */
.pie__coda{
  position:relative; z-index:1;
  max-width:1180px; margin:0 auto; padding:22px 32px 30px;
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px;
  border-top:1px solid var(--linea-scura);
  font-family:var(--font-dati); font-size:12px; color:var(--su-scuro-tenue);
}
.pie__coda a{color:var(--su-scuro-tenue); text-decoration:none}
.pie__coda a:hover{color:var(--su-scuro)}
.pie__legale{list-style:none; display:flex; gap:20px; margin:0; padding:0}
.pie__ora{display:flex; align-items:center; gap:7px}
.pie__ora-punto{width:5px;height:5px;border-radius:50%;background:var(--accento-scuro)}

@media (max-width:860px){
  .pie__cta{flex-direction:column; align-items:flex-start}
  .pie__cta-azioni{align-items:flex-start}
  .pie__corpo{grid-template-columns:1fr 1fr; row-gap:36px}
}
@media (max-width:520px){
  .pie__corpo{grid-template-columns:1fr}
}

/* -------------------------------------------------------------------------
   17. Da 600px
   ---------------------------------------------------------------------- */

@media (min-width: 600px) {

  .finale__recapiti { grid-template-columns: repeat(2, minmax(0, 1fr)); }

}

/* -------------------------------------------------------------------------
   18. Da 900px
   ---------------------------------------------------------------------- */

@media (min-width: 900px) {

  .intestazione {
    position: sticky;
    top: 0;
    z-index: 50;
  }

  .nav {
    order: 0;
    flex-basis: auto;
    border-top: 0;
    margin-right: var(--s-5);
  }

  .hero__interno {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    min-height: min(640px, calc(100svh - 140px));
  }
  .hero__scena { max-width: 620px; margin-top: 0; }

  .sezione__testa {
    display: grid;
    grid-template-columns: var(--rail) minmax(0, 1fr);
    column-gap: var(--s-6);
    align-items: baseline;
    max-width: none;
  }
  .sezione__titolo { grid-column: 2; margin-top: 0; max-width: 20ch; }

  .domanda__testa { padding-block: var(--s-5); }
  .domanda__titolo { font-size: 1.1875rem; max-width: 40ch; }
  .domanda__corpo { padding-left: 0; }


  .finale__corpo {
    display: grid;
    grid-template-columns: var(--rail) minmax(0, 1fr);
    column-gap: var(--s-6);
    align-items: start;
  }
  .finale__recapiti { grid-column: 2; }
  .finale__corpo .bottone { grid-column: 2; justify-self: start; }

}

/* -------------------------------------------------------------------------
   19. Pagine legali (privacy-policy.html, cookie-policy.html)
       Condividono questo foglio di stile: qui il minimo perché restino leggibili.
   ---------------------------------------------------------------------- */

.navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  min-height: 64px;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--margine);
}

.navbar__logo {
  font-family: var(--font-titoli);
  font-weight: 800;
  font-size: 1.0625rem;
  letter-spacing: -0.02em;
  text-decoration: none;
}

.navbar__back {
  display: inline-flex;
  align-items: center;
  min-height: var(--tocco);
  font-size: 0.9375rem;
  color: var(--testo-tenue);
  text-decoration: none;
}
.navbar__back:hover { color: var(--accento-testo); }

.legal {
  max-width: 46rem;
  margin-inline: auto;
  padding: var(--s-7) var(--margine) var(--s-9);
}

.legal h1 {
  font-family: var(--font-titoli);
  font-weight: 800;
  font-size: var(--t-h2);
  line-height: 1.05;
  letter-spacing: -0.03em;
}

.legal h2 {
  font-size: 1.1875rem;
  font-weight: 600;
  margin-top: var(--s-7);
  margin-bottom: var(--s-3);
}

.legal p, .legal li { color: var(--testo-tenue); }
.legal p { margin-top: var(--s-3); }
.legal a { color: var(--accento-testo); }

.legal ul, .legal ol {
  list-style: disc;
  padding-left: 1.25rem;
  margin-top: var(--s-3);
}
.legal li { margin-top: var(--s-2); }

.legal__updated {
  font-family: var(--font-dati);
  font-size: var(--t-mono);
  line-height: 1.6;
  color: var(--testo-tenue);
}

.legal table {
  display: block;        /* così su schermo stretto scorre la tabella, non la pagina */
  overflow-x: auto;
  width: 100%;
  border-collapse: collapse;
  margin-top: var(--s-4);
  font-size: 0.9375rem;
}
.legal th, .legal td {
  text-align: left;
  vertical-align: top;
  padding: var(--s-3);
  border-bottom: 1px solid var(--linea);
  color: var(--testo-tenue);
}
.legal th { color: var(--testo); font-weight: 600; }

/* Da telefono una tabella a 4 colonne non ci sta: scorreva di lato ma
   sembrava tagliata. Sotto i 600px ogni riga diventa una scheda, con il
   nome della colonna accanto a ogni valore (data-etichetta nell'HTML). */
@media (max-width: 600px) {
  .legal table, .legal tbody, .legal tr, .legal td { display: block; width: 100%; }
  .legal thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .legal tr { padding-block: var(--s-3); border-bottom: 1px solid var(--linea); }
  .legal td { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); gap: var(--s-3); padding: var(--s-1) 0; border-bottom: 0; }
  .legal td::before { content: attr(data-etichetta); color: var(--testo); font-weight: 600; }
}

/* Solo da telefono (richiesta: il desktop resta com'è). */
@media (max-width: 899px) {
  /* "Modifica preferenze cookie": era un <button> senza stile, sembrava
     testo qualsiasi. Stesso aspetto di .bottone--secondario. */
  .legal .btn {
    display: inline-flex; align-items: center; min-height: var(--tocco);
    margin-top: var(--s-3); padding: var(--s-3) var(--s-5);
    font: inherit; font-size: 0.9375rem; font-weight: 500; color: var(--testo);
    background: none; border: 0; border-radius: 2px; cursor: pointer;
    box-shadow: inset 0 0 0 1px var(--linea);
  }
  .legal .btn:hover { box-shadow: inset 0 0 0 1px var(--testo); }

  /* Piè di pagina delle pagine legali: non aveva stile, il testo toccava
     i bordi dello schermo da telefono. */
  .legal-footer {
    max-width: 46rem;
    margin-inline: auto;
    padding: var(--s-5) var(--margine) var(--s-7);
    border-top: 1px solid var(--linea);
    font-size: 0.875rem;
    color: var(--testo-tenue);
  }
  .legal-footer a { color: var(--testo-tenue); }
}

/* -------------------------------------------------------------------------
   20. Ciruzz — la mascotte Rive e la chat (ciruzz.js, tutte le pagine)

   Il pulsante che ospita il canvas resta hidden finché ciruzz.js non ha
   caricato mascotte.riv: senza JavaScript, o se il caricamento fallisce,
   non compare — niente elemento vuoto che non fa nulla. È position:fixed
   dal primo frame: l'ingresso e l'ancoraggio in basso a destra li anima
   il file .riv stesso, qui c'è solo la posizione, ferma.

   La chat riusa il tema scuro del sito (--scuro, --su-scuro) invece di
   una palette propria: --ciruzz-superficie è l'unico colore nuovo, un
   grigio-blu appena più chiaro dello sfondo per distinguere le bolle e i
   campi dal pannello. Il blu delle bolle utente e del tasto invio è
   --cubo-sinistra, già verificato altrove: bianco sopra fa 8,1:1.

   L'accento non è più --accento-scuro (l'ambra, riservata per contratto
   a .sezione--scura — la chat non lo è): è il blu del cubo/della
   mascotte (--cubo-alto, --cubo-destra, --cubo-sinistra), lo stesso
   gradiente isometrico che si vede nell'hero. Un filo di quel gradiente
   corre lungo il bordo superiore del pannello e disegna l'avatar: la
   chat si legge come un pezzo dello stesso sistema, non un widget
   incollato sopra.
   ---------------------------------------------------------------------- */

.ciruzz {
  position: fixed;
  right: var(--s-4);
  bottom: var(--s-4);
  z-index: 70;
  width: clamp(92px, 12vw, 148px);
  height: clamp(92px, 12vw, 148px);
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
}
.ciruzz:focus-visible { outline: 2px solid var(--accento-scuro); outline-offset: 3px; border-radius: 2px; }
.ciruzz[hidden] { display: none; }
/* Niente riquadro: il canvas è trasparente (mascotte.riv non ha più uno
   sfondo pieno), quindi un'ombra sulla BOX del pulsante disegnerebbe un
   quadrato attorno al vuoto. drop-shadow segue invece i pixel disegnati
   — un'ombra sagomata sul personaggio, non sul contenitore. */
.ciruzz canvas {
  display: block;
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 10px 16px rgba(15, 17, 22, 0.34));
}

@media (max-width: 480px) {
  .ciruzz {
    width: clamp(80px, 20vw, 108px);
    height: clamp(80px, 20vw, 108px);
    right: var(--s-3);
    bottom: var(--s-3);
  }
}

/* --- Il fumetto: figlio del pulsante, sopra di lui --- */

.ciruzz-fumetto {
  position: absolute;
  right: 0;
  bottom: calc(100% + var(--s-2));
  z-index: 1;
  width: max-content;
  max-width: 15rem;
  padding: var(--s-2) var(--s-3);
  background: var(--sfondo);
  color: var(--testo);
  border: 1px solid var(--linea);
  border-radius: 12px;
  font-size: 0.8125rem;
  line-height: 1.4;
  text-align: left;
  box-shadow: 0 16px 32px -16px rgba(15, 17, 22, 0.4);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.3s ease, transform 0.3s ease;
  pointer-events: none;
}
.ciruzz-fumetto::after {
  content: "";
  position: absolute;
  top: 100%;
  right: 1.25rem;
  border: 6px solid transparent;
  border-top-color: var(--sfondo);
}
.ciruzz-fumetto--visibile { opacity: 1; transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
  .ciruzz-fumetto { transition: none; }
}

/* --- La finestra di chat --- */

.ciruzz-chat {
  --ciruzz-superficie: #171B24;   /* su --scuro: distingue le bolle bot senza un nuovo tono di testo */
  --ciruzz-gradiente: linear-gradient(115deg, var(--cubo-alto), var(--cubo-destra) 55%, var(--cubo-sinistra));

  position: fixed;
  right: var(--s-4);
  bottom: calc(var(--s-4) + clamp(92px, 12vw, 148px) + var(--s-3));
  z-index: 95;
  width: 23rem;
  max-width: calc(100vw - 2 * var(--s-4));
  height: 32rem;
  max-height: calc(100vh - 220px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--scuro);
  color: var(--su-scuro);
  border: 1px solid var(--linea-scura);
  border-radius: 18px;
  /* Il bordo blu è un secondo box-shadow (inset non basterebbe da solo
     sopra border-radius): un filo di luce che avvolge il pannello,
     più un alone morbido dietro per staccarlo dalla pagina. */
  box-shadow:
    0 0 0 1px rgba(56, 182, 255, 0.28),
    0 32px 64px -24px rgba(15, 17, 22, 0.55),
    0 12px 40px -12px rgba(0, 71, 255, 0.25);
  opacity: 0;
  transform: scale(0.92) translateY(16px);
  transform-origin: bottom right;
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.ciruzz-chat--visibile { opacity: 1; transform: scale(1) translateY(0); pointer-events: all; }

/* Il filo di gradiente in cima al pannello: la stessa terna del cubo
   isometrico dell'hero, la firma visiva del marchio. */
.ciruzz-chat::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--ciruzz-gradiente);
}

@media (max-width: 480px) {
  .ciruzz-chat { bottom: calc(var(--s-3) + clamp(80px, 20vw, 108px) + var(--s-2)); }
}
@media (prefers-reduced-motion: reduce) {
  .ciruzz-chat { transition: none; }
}

.ciruzz-chat__testa {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  border-bottom: 1px solid var(--linea-scura);
  flex: 0 0 auto;
}
.ciruzz-chat__avatar {
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  flex: 0 0 auto;
  background: var(--ciruzz-gradiente);
  border-radius: 8px;
}
.ciruzz-chat__info { flex: 1; min-width: 0; }
.ciruzz-chat__nome { margin: 0; font-weight: 700; font-size: 0.9375rem; }
.ciruzz-chat__stato {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 2px 0 0;
  font-family: var(--font-dati);
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--cubo-alto);
}
.ciruzz-chat__stato::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--cubo-alto);
  box-shadow: 0 0 6px 1px rgba(56, 182, 255, 0.7);
  animation: ciruzz-pallino 2.2s ease-in-out infinite;
}
@keyframes ciruzz-pallino { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }

.ciruzz-chat__chiudi {
  padding: 4px 6px;
  font-size: 1.125rem;
  line-height: 1;
  color: var(--su-scuro-tenue);
  cursor: pointer;
  transition: color 0.15s ease;
}
.ciruzz-chat__chiudi:hover { color: var(--su-scuro); }

.ciruzz-chat__messaggi {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  padding: var(--s-4) var(--s-3);
}

.ciruzz-bolla-riga { display: flex; flex-direction: column; max-width: 84%; }
.ciruzz-bolla-riga--utente { align-self: flex-end; align-items: flex-end; }
.ciruzz-bolla-riga--bot { align-self: flex-start; }

.ciruzz-bolla {
  margin: 0;
  padding: 0.65em 0.95em;
  border-radius: 14px;
  font-size: 0.875rem;
  line-height: 1.5;
  text-wrap: pretty;
  word-break: break-word;
  white-space: pre-line;   /* gli a capo delle risposte (elenchi di prezzi) restano a capo */
}
/* Tinta piena, non il gradiente a tre colori: con cubo-alto dentro il
   bianco del testo scende sotto 4,5:1. --cubo-sinistra da solo resta a
   8,1:1, verificato. */
.ciruzz-bolla--utente { background: var(--cubo-sinistra); color: #fff; border-bottom-right-radius: 4px; }
.ciruzz-bolla--bot {
  background: var(--ciruzz-superficie);
  color: var(--su-scuro);
  border: 1px solid rgba(56, 182, 255, 0.16);
  border-bottom-left-radius: 4px;
}

.ciruzz-scrive {
  display: flex;
  gap: 5px;
  padding: 0.7em 0.95em;
  background: var(--ciruzz-superficie);
  border: 1px solid rgba(56, 182, 255, 0.16);
  border-radius: 14px;
}
.ciruzz-scrive span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--cubo-alto);
  animation: ciruzz-rimbalzo 1.2s ease-in-out infinite;
}
.ciruzz-scrive span:nth-child(2) { animation-delay: 0.16s; }
.ciruzz-scrive span:nth-child(3) { animation-delay: 0.32s; }
@keyframes ciruzz-rimbalzo { 0%, 80%, 100% { transform: translateY(0); } 40% { transform: translateY(-6px); } }
@media (prefers-reduced-motion: reduce) {
  .ciruzz-chat__stato::before, .ciruzz-scrive span { animation: none; }
}

.ciruzz-chat__area-input {
  display: flex;
  align-items: flex-end;
  gap: var(--s-2);
  padding: var(--s-3);
  border-top: 1px solid var(--linea-scura);
  flex: 0 0 auto;
}
.ciruzz-chat__input {
  flex: 1;
  resize: none;
  max-height: 120px;
  overflow-y: auto;
  padding: 0.6em 0.9em;
  font-family: var(--font-corpo);
  font-size: 0.875rem;
  line-height: 1.4;
  color: var(--su-scuro);
  background: var(--ciruzz-superficie);
  border: 1px solid var(--linea-scura);
  border-radius: 18px;
  outline: none;
  transition: border-color 0.2s ease;
}
.ciruzz-chat__input::placeholder { color: var(--su-scuro-tenue); }
.ciruzz-chat__input:focus { border-color: var(--cubo-alto); box-shadow: 0 0 0 3px rgba(56, 182, 255, 0.16); }

.ciruzz-chat__invia {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  flex: 0 0 auto;
  color: #fff;
  background: var(--ciruzz-gradiente);
  border-radius: 50%;
  cursor: pointer;
  transition: filter 0.15s ease, transform 0.15s ease;
}
.ciruzz-chat__invia:hover { filter: brightness(1.12); }
.ciruzz-chat__invia:active { transform: scale(0.94); }


/* =========================================================================
   MODALITÀ NOTTE — attivata dal pulsante nell'header (tema.js), salvata sul
   dispositivo. Regola: i colori del marchio (cubo, blu, arancio) restano
   IDENTICI al giorno; cambiano solo fondi, testi e linee. Ciò che su fondo
   scuro non si vedrebbe prende il colore opposto.
   ========================================================================= */
:root[data-theme="dark"] {
  color-scheme: dark;
  --sfondo:        #0B0D12;
  --testo:         #E9EDF3;
  --testo-tenue:   #A3ACBA;
  --scuro:         #15181F;   /* la sezione "scura" resta distinguibile */
  --su-scuro:      #E9EDF3;
  --linea:         rgba(233, 237, 243, 0.16);
  --linea-scura:   rgba(233, 237, 243, 0.18);
  --reticolo:      rgba(233, 237, 243, .045);
  --superficie:    #151922;
  --superficie-2:  #232936;
  --sfondo-alt:    #0E1118;
  --tinta:         rgba(233, 237, 243, .06);
  --alone-1:       rgba(56, 182, 255, .18);   /* stessa intensità percepita del giorno */
  --alone-2:       rgba(81, 112, 255, .07);
  --accento-testo: #4A78FF;   /* stesso blu, leggibile sui testi piccoli (5:1) */
}
/* Punti di forza: linee dei disegni e filetti chiari su fondo scuro */
:root[data-theme="dark"] .forza {
  --forza-tenue: #8C95A4;
  --forza-tratto: #8C95A4;
  --forza-filo: rgba(233, 237, 243, .12);
}
/* Il riquadro "prompt" di Come lavoriamo: ombra più scura, bordo sottile */
:root[data-theme="dark"] .prompt { box-shadow: 0 10px 40px rgba(0, 0, 0, .45), inset 0 0 0 1px rgba(233, 237, 243, .08); }
:root[data-theme="dark"] html,
:root[data-theme="dark"] body { background: var(--sfondo); color: var(--testo); }

/* passaggio morbido solo nel momento del cambio, non durante lo scroll */
.tema-in-cambio, .tema-in-cambio * {
  transition: background-color .35s ease, color .35s ease, border-color .35s ease, fill .35s ease !important;
}

/* Il pulsante sole/luna nell'header */
.tema-pulsante {
  display: inline-grid; place-items: center;
  width: 40px; height: 40px;
  margin-right: 10px;
  padding: 0;
  border: 1px solid var(--linea);
  border-radius: 999px;
  background: transparent;
  color: var(--testo);
  cursor: pointer;
  flex: none;
  transition: border-color .2s ease, transform .2s ease;
}
.tema-pulsante:hover { border-color: var(--testo); }
.tema-pulsante:active { transform: scale(.94); }
.tema-pulsante:focus-visible { outline: 2px solid var(--accento); outline-offset: 2px; }
.tema-pulsante svg { grid-area: 1 / 1; transition: opacity .3s ease, transform .4s ease; }
.tema-pulsante__sole { opacity: 0; transform: rotate(-90deg) scale(.6); }
:root[data-theme="dark"] .tema-pulsante__luna { opacity: 0; transform: rotate(90deg) scale(.6); }
:root[data-theme="dark"] .tema-pulsante__sole { opacity: 1; transform: none; color: #FFC940; }
/* Chi siamo, scena della storia: i blocchi "futuri" tratteggiati in blu
   su fondo scuro sparivano -> stesso tratteggio in azzurro del cubo */
:root[data-theme="dark"] .storia__scena-svg [stroke-dasharray] { stroke: var(--cubo-alto); stroke-opacity: .8; }
/* I titoli grandi in blu restano col blu esatto del giorno */
:root[data-theme="dark"] .apertura__accento,
:root[data-theme="dark"] .hero__titolo em { color: var(--accento); }
/* Demo delle pagine servizio: le variabili locali che su fondo scuro
   sparivano o si invertivano male */
:root[data-theme="dark"] .costruzione {
  --wf-pieno: #1C222D;
  --wf-tratto: #3A4454;
  --accento-caldo-testo: #FF8A5B;
  --ok: #2BC174;
}
:root[data-theme="dark"] .costruzione--soft {
  --allarme: #FF6B61;
  --app-lato: #121620;
}
:root[data-theme="dark"] [class*="cantiere"], :root[data-theme="dark"] .lavori-cantiere { --cantiere-caldo-testo: #FF8A5B; }
/* Pagine legali: il pulsante sta a destra, accanto a "Torna alla home" */
.navbar .tema-pulsante { margin-left: auto; margin-right: 16px; }

/* =========================================================================
   LINGUA — pulsante IT/EN nell'header e avviso alla prima visita (i18n.js)
   ========================================================================= */
.lingua-pulsante {
  display: inline-grid; place-items: center;
  min-width: 40px; height: 40px;
  margin-right: 8px;
  padding: 0 10px;
  border: 1px solid var(--linea);
  border-radius: 999px;
  background: transparent;
  color: var(--testo);
  font-family: var(--font-dati);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .08em;
  cursor: pointer;
  flex: none;
  transition: border-color .2s ease, transform .2s ease;
}
.lingua-pulsante:hover { border-color: var(--testo); }
.lingua-pulsante:active { transform: scale(.94); }
.lingua-pulsante:focus-visible { outline: 2px solid var(--accento); outline-offset: 2px; }
.navbar .lingua-pulsante { margin-left: auto; }
.navbar .lingua-pulsante + .tema-pulsante { margin-left: 0; }

.lingua-avviso {
  position: fixed;
  left: 16px; bottom: 16px;
  z-index: 2147483000;
  width: min(360px, calc(100vw - 32px));
  padding: 18px 18px 16px;
  background: var(--superficie);
  color: var(--testo);
  border: 1px solid var(--linea);
  border-radius: 14px;
  box-shadow: 0 18px 44px rgba(15, 17, 22, .18);
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .35s ease, transform .35s ease;
}
.lingua-avviso--visibile { opacity: 1; transform: none; }
.lingua-avviso__testo { margin: 0 0 14px; font-size: .95rem; line-height: 1.45; }
.lingua-avviso__azioni { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.lingua-avviso__no {
  background: none; border: 0; padding: 8px 4px;
  color: var(--testo-tenue); font: inherit; font-size: .875rem;
  text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
.lingua-avviso__no:hover { color: var(--testo); }
:root[data-theme="dark"] .lingua-avviso { box-shadow: 0 18px 44px rgba(0, 0, 0, .5); }
/* Telefono: logo, IT/EN, sole/luna e "Parliamo" devono stare su una riga */
@media (max-width: 899px) {
  .intestazione__interno { column-gap: 8px; }
  .intestazione__interno .lingua-pulsante,
  .intestazione__interno .tema-pulsante { min-width: 36px; width: auto; height: 36px; margin-right: 0; }
  .intestazione__interno .tema-pulsante { width: 36px; }
  .intestazione__interno .lingua-pulsante { padding: 0 8px; }
  .intestazione__cta { padding-inline: var(--s-3); }
}
@media (max-width: 380px) {
  .intestazione__interno { column-gap: 6px; }
  .intestazione__interno .lingua-pulsante { min-width: 32px; height: 32px; padding: 0 6px; font-size: 11px; }
  .intestazione__interno .tema-pulsante { width: 32px; height: 32px; }
  .intestazione__cta { padding-inline: var(--s-2); font-size: .875rem; }
  .marchio { gap: var(--s-2); }
}