/* ============================================================
   Classi per i moduli del tema.

   Le sezioni nuove sono righe e colonne WPBakery con dentro i moduli di
   Woodmart (titolo, testo, immagine, contatore, lista, bottone, info box).
   Quei moduli NON stanno sotto lo scope `.tg-page`: le classi del template
   (.card .btn .grid .wrap) collidono con quelle di Woodmart, ed e' proprio
   per questo che lo scope esiste.

   Qui ci sono quindi solo classi da scrivere nel campo "Extra class name"
   del modulo, per dargli il tono del progetto. I token (--ink, --paper,
   --blue, --orange, --font) sono globali, li definisce tg-base.css su :root.
   ============================================================ */

/* ---------- Modulo TG · SVG animato ---------- */
.tg-svg {
  position: relative;
  width: 100%;
}

.tg-svg--center { margin-inline: auto; }
.tg-svg--left   { margin-inline: 0 auto; }
.tg-svg--right  { margin-inline: auto 0; }

/* La torre nel template stava in un contenitore alto quanto lo schermo e si
   misurava su quello. In una colonna quel riferimento non c'e' e `height:100%`
   collasserebbe a zero: qui si misura sulla larghezza. */
.tg-svg .mast {
  height: auto;
  width: 100%;
  max-height: 78svh;
}

/* Per usare un disegno come sfondo di una riga: la riga deve avere
   "Design Options > position: relative" oppure la classe tg-row-relative. */
.tg-svg--bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.tg-row-relative { position: relative; }

.tg-svg .wind-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* ---------- Occhiello (il testo piccolo sopra i titoli) ----------
   Si mette su un Text block, campo "Extra class name": tg-kicker */
.tg-kicker {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: .8rem;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.tg-kicker::before {
  content: "";
  width: 26px;
  height: 2px;
  background: var(--orange);
  flex: 0 0 auto;
}

.tg-kicker--blue::before { background: var(--blue); }

.tg-align-center .tg-kicker,
.tg-kicker--center { justify-content: center; }

/* ---------- Paragrafo d'apertura ---------- */
.tg-lead p,
p.tg-lead {
  font-size: clamp(1.1rem, 1.5vw, 1.35rem);
  font-weight: 300;
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: 54ch;
}

/* ---------- Parola d'accento dentro un titolo ---------- */
.tg-accent  { color: var(--orange); font-style: normal; }
.tg-accent-b { color: var(--blue); font-style: normal; }

/* Nel campo "Titolo" del modulo del tema basta scrivere <em> attorno alla
   parola: niente classe, niente attributi.
   Serve davvero: dentro un ATTRIBUTO di shortcode le virgolette singole di un
   class='...' vengono convertite in doppie al salvataggio, l'attributo si
   chiude in anticipo e il titolo arriva vuoto (visto succedere su questa
   pagina: `.title` con display:none e testo ""). Nei Text block invece il
   testo sta fra i tag e la classe si puo' usare senza problemi. */
.tg-title em,
.tg-title i { color: var(--orange); font-style: normal; }

/* ---------- Testo che si colora allo scroll ----------
   Sui moduli del tema si attiva scrivendo `tg-fill-scroll` in "Extra class
   name". La classe `tg-fill` la aggiunge tg-main.js: senza JS il testo resta
   del suo colore invece di restare grigio per sempre. */
.tg-fill {
  --tg-fill-from: #C3BCB3;
  --tg-fill-to: var(--ink);
}

.tg-fill .tg-fw { color: var(--tg-fill-from); }
.tg-fill .tg-fw.tg-fw-keep { color: inherit; }

@media (prefers-reduced-motion: reduce) {
  .tg-fill .tg-fw { color: var(--tg-fill-to); }
}

/* ---------- Contatori ----------
   Il modulo del tema non ha un campo per il suffisso: lo mette il CSS. */
.tg-counter--plus .counter-value::after    { content: "+"; color: var(--blue); }
.tg-counter--percent .counter-value::after { content: "%+"; color: var(--blue); }

/* ---------- Badge sopra un'immagine ----------
   Si mette su un Contatore o un Text block dentro la stessa colonna
   dell'immagine, che deve avere la classe tg-media. */
.tg-media { position: relative; }

.tg-badge {
  position: absolute;
  left: 22px;
  bottom: 22px;
  z-index: 2;
  background: var(--paper);
  border-radius: 18px;
  padding: 18px 24px;
  box-shadow: var(--nm-out-sm);
}

@media (max-width: 767px) {
  .tg-badge { position: static; display: inline-block; margin-top: 16px; }
}

/* ---------- Righe e colonne ----------
   Il ritmo verticale delle sezioni. Si potrebbe fare dalle Design Options di
   ogni riga, ma tenerlo qui vuol dire che tutte le sezioni respirano uguale
   senza doverlo reimpostare a mano riga per riga. Chi vuole uno scarto
   diverso su una riga singola usa comunque le Design Options, che vincono. */
.tg-row {
  padding-top: clamp(80px, 11vw, 160px);
  padding-bottom: clamp(80px, 11vw, 160px);
}

/* Tutte le righe sono "Stretch row": il fondo colorato arriva ai bordi dello
   schermo mentre il contenuto resta in griglia. Su schermi piu' larghi della
   larghezza sito (1440) e' l'unico modo perche' le sezioni colorate non si
   fermino a meta'.

   Il rientro orizzontale sta sulle COLONNE, non sulla riga: a una riga stirata
   WPBakery scrive un padding inline (la distanza dal bordo schermo alla
   griglia) e qualunque padding di foglio di stile viene scavalcato. Mettendolo
   sulle colonne si somma sempre, con o senza stretch, e le sezioni restano
   incolonnate fra loro. */
.tg-row > .wpb_column > .vc_column-inner {
  padding-left: clamp(22px, 2.2vw, 40px);
  padding-right: clamp(22px, 2.2vw, 40px);
}

.tg-row--hero {
  --tg-hero-top: clamp(40px, 6vw, 90px);
  padding-top: var(--tg-hero-top);
  padding-bottom: clamp(60px, 8vw, 110px);
  background-color: var(--paper);
  overflow: hidden;
}

/* Header impostato sopra il contenuto (Header Builder): il primo elemento
   della hero gli finirebbe dietro - succedeva all'occhiello, che spariva.
   L'altezza la espone il tema in --wd-header-h e la riserviamo qui, cosi' se
   l'header cambia altezza la hero si adatta da sola. */
.wd-header-overlap .tg-row--hero {
  --tg-hero-top: calc(var(--wd-header-h, 82px) + clamp(20px, 4vw, 50px));
}

.tg-row--paper2 { background-color: var(--paper-2); }

/* Le due colonne di una sezione a metà: il testo non deve arrivare a filo
   dell'immagine. */
.tg-col--text > .vc_column-inner { padding-right: clamp(0px, 3vw, 48px); }
.tg-col--media > .vc_column-inner { padding-left: clamp(0px, 2vw, 32px); }

@media (max-width: 991px) {
  .tg-col--text > .vc_column-inner,
  .tg-col--media > .vc_column-inner { padding-left: 0; padding-right: 0; }
}

/* Titolo di sezione: il modulo del tema porta la sua scala, qui gli diamo
   quella del progetto. Il tracking sta QUI e non in tg-wp.css: questo foglio
   si carica dopo, e a parita' di specificita' vincerebbe comunque lui. */
.tg-title .title {
  font-size: clamp(2.1rem, 4.6vw, 4rem);
  line-height: 1.04;
  letter-spacing: -.035em;
}

/* Occhiello e titolo si toccano: sono la stessa unità di lettura. */
.tg-kicker { margin-bottom: 22px; }
.tg-title  { margin-bottom: 26px; }
.tg-lead   { margin-bottom: 34px; }

/* I due bottoni della hero stanno in fila. */
.tg-btn { margin-right: 18px; margin-bottom: 14px; }

/* La riga dei contatori sotto i bottoni. */
.tg-meta { margin-top: clamp(30px, 4vw, 54px); }

/* ---------- Respiro della testata ----------
   Nella hero gli elementi sono pochi e grandi: la spaziatura del resto della
   pagina li fa sembrare incollati. Qui il ritmo verticale è più largo e cresce
   con la finestra. Il titolo non ha margini propri (`.tg-headline { margin: 0 }`
   e il tema non ne dà ai suoi text block), quindi lo stacco fra titolo e
   paragrafo va dichiarato: senza questa riga i due si toccavano.

   Sotto i 768px vince il blocco mobile in fondo al file, che ordina i pezzi
   in modo diverso e ha già le sue misure. */
.tg-row--hero .tg-kicker   { margin-bottom: clamp(20px, 2vw, 30px); }
.tg-row--hero .tg-headline { margin-bottom: clamp(26px, 2.8vw, 42px); }
.tg-row--hero .tg-lead     { margin-bottom: clamp(30px, 3.2vw, 46px); }
.tg-row--hero .tg-meta     { margin-top: clamp(44px, 5vw, 76px); }

.tg-counter .counter-value {
  font-size: clamp(2.4rem, 3.4vw, 3.4rem);
  letter-spacing: -.03em;
  line-height: 1;
  color: var(--ink);
}

.tg-counter .counter-label {
  margin-top: 8px;
  font-size: .95rem;
  letter-spacing: .04em;
  color: var(--ink-soft);
}

.tg-list { margin-bottom: 26px; }

/* ---------- Correzioni sui moduli del tema ----------
   Sono aggiustamenti sul markup che generano i moduli di Woodmart: qui sotto
   i nomi delle classi sono i loro, non nostri. */

/* Le colonne di una riga interna sono inline-block e si allineano sulla base
   del testo: con etichette di lunghezza diversa i contatori scendevano a
   scaletta invece di stare in fila. */
.tg-meta > .wpb_column { vertical-align: top; }

/* Bottoni: il tema li fa grigi e piccoli, questi sono i due del progetto.
   `.btn` e' una classe di Woodmart, per questo si aggancia alla nostra
   `.tg-btn` e non alla sua. */
.btn.tg-btn {
  padding: 16px 30px;
  border-radius: 999px;
  font-weight: 500;
  font-size: 1rem;
  letter-spacing: .01em;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}

.btn.tg-btn.btn-style-default {
  background: var(--orange);
  color: #fff;
  border: 0;
}

.btn.tg-btn.btn-style-default:hover {
  background: var(--orange);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 14px 28px -14px rgba(255, 136, 69, .9);
}

.btn.tg-btn.btn-style-bordered {
  background: transparent;
  color: var(--ink);
  border: 1px solid rgba(25, 24, 23, .18);
}

.btn.tg-btn.btn-style-bordered:hover {
  border-color: var(--ink);
  color: var(--ink);
  background: transparent;
  transform: translateY(-2px);
}

/* Il bottone "link" resta un link con la freccia, allineato al testo. */
.tg-btn-link { text-align: left; }

.btn.tg-btn-link,
.tg-btn-link .btn {
  padding-left: 0;
  padding-right: 0;
  color: var(--ink);
  font-weight: 500;
}

/* Elenco puntato. */
.tg-list li { margin-bottom: 10px; }

.tg-list .wd-list-content {
  font-size: 1rem;
  color: var(--ink-soft);
}

.tg-list .wd-icon { color: var(--blue); }

/* L'immagine riempie la colonna. */
.tg-img img {
  width: 100%;
  height: auto;
  display: block;
}

/* Le colonne di una riga interna sono float con dei nodi di testo in mezzo:
   ne usciva una scaletta invece di tre contatori in fila. Flex toglie sia i
   float sia il peso degli spazi bianchi. */
.tg-meta {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(20px, 3vw, 44px);
}

.tg-meta::before,
.tg-meta::after { display: none; }

.tg-meta > .wpb_column {
  float: none;
  width: auto;
  flex: 1 1 0;
  min-width: 130px;
}

/* ---------- Hero su mobile ----------
   Ordine voluto: occhiello, titolo, pulsanti, paragrafo, numeri. Nel sorgente
   il paragrafo sta fra titolo e pulsanti (e' l'ordine giusto su desktop), qui
   lo si sposta con `order` invece di duplicare i moduli: uno solo da tradurre,
   uno solo da modificare nel builder.

   La torre e' tolta dal flusso e ancorata in alto a destra, cosi' affianca
   titolo e pulsanti e ci passa un po' sotto, senza spingere in basso il resto.
   Sta dietro al testo (z-index) ed e' trasparente: dove il titolo la scavalca
   resta uno sfondo. Il taglio a destra lo fa l'overflow della riga, che e'
   anche cio' che evita lo scroll orizzontale. */
@media (max-width: 767.98px) {
  .tg-row--hero > .tg-col--text {
    width: 100%;
    position: relative;
    z-index: 2;
  }

  .tg-row--hero .tg-col--text > .vc_column-inner > .wpb_wrapper {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }

  /* Il rientro orizzontale ora lo danno le colonne (vedi `.tg-row > .wpb_column`),
     uguale per tutte le sezioni. Qui resta a zero: sommandosi produceva 44px
     nella hero contro i 22px del resto della pagina, cioe' due incolonnamenti
     diversi. La variabile resta perche' i pezzi della hero la usano: basta
     rimetterla a un valore per rientrare solo questa sezione. */
  .tg-row--hero { --tg-hero-pad: 0px; }

  .tg-row--hero .tg-kicker          { order: 1; padding-left: var(--tg-hero-pad); }
  .tg-row--hero .tg-headline        { order: 2; padding-left: var(--tg-hero-pad); }
  .tg-row--hero .wd-button-wrapper  { order: 3; padding-left: var(--tg-hero-pad); }
  .tg-row--hero .tg-lead            { order: 4; padding-inline: var(--tg-hero-pad); }
  .tg-row--hero .tg-meta            { order: 5; width: 100%; padding-inline: var(--tg-hero-pad); }

  /* Lo stacco fra titolo e pulsanti lo da' il margine del TITOLO, non un
     `:first-of-type` sui pulsanti: quel selettore prende il primo <div> della
     colonna, che e' l'occhiello, e non aveva alcun effetto. In un contenitore
     flex i margini non collassano, quindi qui il conto e' esatto. */
  .tg-row--hero .tg-headline { margin-bottom: 44px; }
  .tg-row--hero .tg-lead { margin-top: 44px; }

  /* Titolo e pulsanti lasciano respiro alla torre; il paragrafo e i numeri,
     che vengono dopo, si riprendono tutta la larghezza. */
  .tg-row--hero .tg-headline { width: 76%; }

  /* La colonna della torre e' decorativa e deve sbordare: il rientro delle
     colonne le toglierebbe 44px di larghezza di riferimento e il disegno
     rimpicciolirebbe del 30% (e' successo). */
  .tg-row--hero > .tg-col--media > .vc_column-inner {
    padding-left: 0;
    padding-right: 0;
  }

  .tg-row--hero > .tg-col--media {
    position: absolute;
    /* L'assoluto si misura dal bordo della riga, non dal contenuto: senza
       ripartire dallo stesso scarto la torre resterebbe su mentre il testo
       scende sotto l'header. */
    top: calc(var(--tg-hero-top) + 26px);
    right: 0;
    width: 38%;
    z-index: 0;
    pointer-events: none;
  }

  /* Il modulo scrive max-width inline (campo "Larghezza massima"): per farla
     sbordare va scavalcato. Il palo sta al centro del disegno, quindi senza
     allargarlo oltre la colonna si vedrebbe solo il cielo vuoto di sinistra.
     Vale SOLO per la torre: la stessa regola presa larga ingrandiva al 170%
     anche le linee di vento, che devono invece coprire esattamente la riga. */
  .tg-row--hero .tg-col--media .tg-svg {
    width: 170%;
    max-width: none !important;
    opacity: .4;
  }

  .tg-row--hero .tg-col--media .tg-svg .mast {
    max-height: none;
  }

  /* Numeri: due per riga, il terzo va a capo da solo e sta al centro.
     `justify-content: center` non tocca le prime due (riempiono la riga) e
     centra la terza, che resta sola. */
  .tg-meta {
    justify-content: center;
    row-gap: 28px;
    /* WPBakery da' alle righe interne margini negativi di 15px e alle colonne
       un padding che li compensa. Qui li annulliamo entrambi: cosi' il primo
       numero si allinea al paragrafo sopra, e il terzo - che occupa tutta la
       riga - si centra sul centro vero dello schermo invece che 15px a sinistra. */
    margin-left: 0;
    margin-right: 0;
    box-sizing: border-box;
  }

  .tg-meta > .wpb_column > .vc_column-inner {
    padding-left: 0;
    padding-right: 0;
  }

  /* Esattamente meta' riga a testa (meno meta' del gap): riempiono la larghezza
     e il primo numero si allinea al paragrafo sopra. Con una base piu' stretta
     `justify-content: center` li rientrava di una decina di pixel. */
  .tg-meta > .wpb_column {
    flex: 0 1 calc(50% - 10px);
    min-width: 0;
  }

  /* Il terzo prende tutta la riga invece di restare un blocco stretto
     centrato: la riga interna ha margini negativi, quindi centrare l'elemento
     non coincideva col centro visivo (era fuori di 15px). Cosi' e' il testo a
     essere centrato dentro l'intera larghezza, e il conto torna sempre. */
  .tg-meta > .wpb_column:last-child {
    flex: 0 0 100%;
    text-align: center;
  }

  /* Numero ed etichetta incolonnati sullo stesso centro: il numero e' molto
     piu' largo del testo sotto, allineati a sinistra sembravano scollegati. */
  .tg-meta .woodmart-counter {
    text-align: center;
  }

  /* La DIMENSIONE del numero non sta piu' qui: era un doppione dello stesso
     selettore usato fuori dalla media query, e vinceva quello scritto piu' in
     basso nel file - su mobile il numero tornava a 43px invece di 58.
     Ora c'e' una clamp sola, valida a tutte le larghezze. */

  /* L'etichetta non cresce: a cambiare e' solo il numero. */
  .tg-row--hero .tg-meta .woodmart-counter .counter-label,
.tg-row--orange .woodmart-counter .counter-label {
    font-size: 1rem;
    margin-top: 6px;
  }
}

/* ---------- Moduli TG: niente sfondo proprio ----------
   `.tg-page` porta `background: var(--paper)` perche' nel template statico era
   il contenitore di pagina. Ma i moduli aggiungono quella classe anche a
   elementi piccoli - il titolo e il contenitore dell'SVG - che cosi'
   dipingono un rettangolo opaco su cio' che sta dietro.

   Si vedeva sulla hero mobile: il titolo copriva la scritta "200 m +" del
   LiDAR, che rendeva come "0 m +". Lo sfondo appartiene alla sezione, non a
   un titolo o a un disegno.

   ED E' TORNATO A MORDERE: la fila dei loghi dipingeva un rettangolo avorio in
   mezzo a una sezione bianca, e la stessa cosa faceva la storia dentro una
   sezione piu' scura. Ogni modulo nuovo che si scrive con la classe `tg-page`
   va aggiunto a questo elenco - la classe serve per il CSS dei componenti, non
   per portarsi dietro il fondo della pagina. */
.tg-page.tg-headline,
.tg-page.tg-svg,
.tg-page.tg-loghi,
.tg-page.tg-storia,
.tg-page.tg-schede,
.tg-page.tg-schede-vuoto,
.tg-page.tg-schede-sezione {
  background: none;
}

/* ============================================================
   Sezioni 2-10 - classi applicate ai moduli del tema
   ============================================================ */

.tg-row--tight {
  padding-top: clamp(40px, 5vw, 70px);
  padding-bottom: clamp(40px, 5vw, 70px);
}

/* Sezione scura dei numeri. Il testo chiaro lo mette il parametro
   "color scheme" dei contatori; qui serve solo il fondo e i titoli. */
.tg-row--dark {
  background-color: var(--ink);
}

.tg-row--dark .tg-title .title,
.tg-row--dark .tg-kicker { color: var(--paper); }
.tg-row--dark .tg-counter .counter-value { color: var(--paper); }
.tg-row--dark .tg-counter .counter-label { color: rgba(253, 250, 247, .7); }

/* Blocco finale: una card centrata che stacca dal fondo pagina. */
.tg-row--cta { padding-bottom: clamp(90px, 12vw, 170px); }

.tg-col--cta > .vc_column-inner {
  background: var(--paper);
  border-radius: var(--r-lg);
  box-shadow: var(--nm-out);
  padding: clamp(48px, 7vw, 96px) clamp(24px, 5vw, 80px);
  text-align: center;
}

.tg-col--cta .tg-title .title { max-width: 18ch; margin-inline: auto; }
/* Il testo era centrato DENTRO al paragrafo, ma il paragrafo restava a
   sinistra: ha una larghezza massima di 54ch e margine zero, quindi in una
   colonna larga il blocco si vedeva spostato rispetto al titolo sopra.
   Il centraggio va messo sul paragrafo, che e' l'elemento stretto. */
.tg-lead--center,
.tg-lead--center p,
p.tg-lead--center {
  margin-inline: auto;
  text-align: center;
}

/* ---------- Information box del tema con il tono del progetto ----------
   Il tema li disegna piatti; qui prendono il rilievo morbido del template.
   Nomi di classe con il prefisso wd-*: sono i suoi, non nostri. */
.tg-box {
  height: 100%;
}

.tg-box .info-box-inner,
.tg-box .info-box-content > .info-box-title { color: var(--ink); }

.tg-box .info-box-title {
  font-size: clamp(1.25rem, 1.8vw, 1.6rem);
  font-weight: 400;
  letter-spacing: -.01em;
}

.tg-box .info-box-subtitle {
  font-size: .8rem;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.tg-box .info-box-inner {
  font-size: 1rem;
  color: var(--ink-soft);
}

/* Le card dei servizi.
   Struttura del tema: `.info-box-wrapper > .wd-info-box > .info-box-content`.
   La classe che passiamo noi finisce su `.wd-info-box`, quindi lo stile della
   card va li'. `.info-box-wrapper` e' il GENITORE, non un figlio: conta solo
   per l'allineamento in griglia (vedi `.tg-row--cards`). */
.tg-box {
  background: var(--paper);
  border-radius: var(--r-lg);
  padding: clamp(26px, 3vw, 34px);
  box-shadow: var(--nm-out-sm);
  transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}

.tg-box:hover {
  transform: translateY(-6px);
  box-shadow: var(--nm-out);
}

/* La prima card dei servizi e' quella in evidenza.
   Doppia classe sui figli: il titolo del tema porta anche `.title` e le sue
   regole di colore vincevano su un selettore a due classi - il titolo restava
   nero su fondo nero, cioe' invisibile. */
.tg-box--feature { background: var(--ink); }

.tg-box.tg-box--feature .info-box-title,
.tg-box.tg-box--feature .info-box-title a,
.tg-box.tg-box--feature h3.title { color: var(--paper); }

.tg-box.tg-box--feature .info-box-subtitle { color: rgba(253, 250, 247, .55); }
.tg-box.tg-box--feature .info-box-inner { color: rgba(253, 250, 247, .7); }
.tg-box.tg-box--feature .info-box-btn-wrapper a,
.tg-box.tg-box--feature .btn { color: var(--paper); }

/* Passi numerati (tecnologia, processo, perche noi): niente card, solo il
   numero in arancio e una riga sopra che si accende al passaggio. */
.tg-box--step,
.tg-box--why {
  position: relative;
  background: none;
  box-shadow: none;
  border: 0;
  border-radius: var(--r);
  /* Il margine negativo compensa il padding: il testo resta allineato alla
     colonna com'era, e la cornice cresce nel corridoio fra le colonne. Senza,
     al passaggio del mouse il contenuto si sposterebbe di 16px. */
  margin: 0 -16px;
  padding: 26px 16px 24px;
  transition: transform .45s var(--ease), box-shadow .45s var(--ease);
}

/* A riposo resta solo la riga grigia in cima. E' un pseudo-elemento e non un
   border vero cosi' non litiga con la cornice, che occupa lo stesso bordo. */
.tg-box--step::after,
.tg-box--why::after {
  content: '';
  position: absolute;
  top: 0;
  left: 16px;
  right: 16px;
  height: 2px;
  background: var(--gray);
  transition: opacity .35s var(--ease);
}

/* Tutti e quattro i bordi, sfumati da azzurro ad arancio. La cornice si fa
   con una maschera: due livelli, uno grande quanto il riquadro e uno grande
   quanto il contenuto, sottratti l'uno dall'altro. Restano i 2px del bordo. */
.tg-box--step::before,
.tg-box--why::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 2px;
  background: linear-gradient(135deg, var(--blue) 0%, var(--orange) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  opacity: 0;
  pointer-events: none;
  transition: opacity .35s var(--ease);
}

.tg-box--step:hover::before,
.tg-box--why:hover::before { opacity: 1; }
.tg-box--step:hover::after,
.tg-box--why:hover::after { opacity: 0; }

/* Il rilievo: la scheda si stacca dal fondo mentre compare la cornice. */
.tg-box--step:hover,
.tg-box--why:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-soft);
}

.tg-box--step .info-box-icon-text,
.tg-box--why .info-box-icon-text,
.tg-box--step .info-box-icon,
.tg-box--why .info-box-icon {
  font-size: .85rem;
  font-weight: 500;
  letter-spacing: .1em;
  color: var(--orange);
}

/* ---------- Marquee del tema ----------
   `woodmart_marquee` NON espone il campo "Extra class name": la classe che
   gli passavo non arrivava da nessuna parte. Ci si aggancia dalla riga. */
.tg-row--tight .wd-marquee-wrapp { margin-top: 22px; }

.tg-row--tight .wd-marquee-item {
  font-size: clamp(1.4rem, 3vw, 2.4rem);
  font-weight: 300;
  color: var(--ink-soft);
  letter-spacing: -.01em;
}

/* Un punto fra una voce e l'altra, come nel disegno del template. */
.tg-row--tight .wd-marquee-item::after {
  content: "·";
  margin-left: 46px;
  color: var(--orange);
}

/* ---------- Elenchi: specifiche tecniche e certificazioni ---------- */
.tg-specs { margin-bottom: 34px; }

.tg-specs .wd-list-content {
  font-size: 1.05rem;
  color: var(--ink);
}

/* `flex-direction: row` non e' ridondante: l'elenco del tema e' gia' un flex
   in COLONNA, quindi senza questa riga gli <li> restano impilati e si
   allargano a tutta la riga (l'asse principale sarebbe verticale). */
.tg-col--certs ul.tg-certs {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 14px;
}

/* Gli <li> dell'elenco del tema occupano tutta la riga: qui devono stare in
   fila come pastiglie, quindi larghezza sul contenuto. */
.tg-col--certs ul.tg-certs li {
  flex: 0 0 auto;
  width: auto;
  background: var(--paper);
  box-shadow: var(--nm-out-sm);
  border-radius: 14px;
  padding: 14px 22px;
  margin: 0;
}

.tg-certs .wd-icon { display: none; }

.tg-certs .wd-list-content {
  font-weight: 500;
  font-size: .95rem;
  color: var(--ink);
}

.tg-col--certs { margin-top: clamp(40px, 5vw, 70px); }

@media (max-width: 767.98px) {
  .tg-certs { gap: 10px; }
  .tg-certs li { padding: 11px 16px; }
}

/* ---------- Linee di vento: sfondo animato della hero ----------
   Sono le curve che attraversano la hero da destra a sinistra (tratteggio che
   scorre lungo il tracciato). Vivono in una colonna dedicata, messa per prima
   nella riga e tolta dal flusso: cosi' copre tutta la sezione senza spostare
   di un pixel le due colonne di contenuto. */
.tg-col--bg {
  position: absolute;
  inset: 0;
  width: 100%;
  z-index: 0;
  pointer-events: none;
}

.tg-col--bg > .vc_column-inner {
  padding: 0 !important;
  height: 100%;
}

.tg-col--bg > .vc_column-inner > .wpb_wrapper,
.tg-col--bg .tg-svg {
  height: 100%;
}

/* Nel template le linee stavano a z-index -1 perche' il fondo colorato era
   piu' in su nell'albero. Qui il fondo e' della riga stessa, e un figlio a -1
   verrebbe dipinto DIETRO quel fondo, cioe' non si vedrebbe affatto. */
.tg-col--bg .wind-svg {
  z-index: 0;
  opacity: .9;
}

@media (min-width: 768px) {
  .tg-row--hero > .tg-col--text,
  .tg-row--hero > .tg-col--media {
    position: relative;
    z-index: 2;
  }
}

/* Riga dei recapiti sotto i pulsanti della CTA. */
.tg-contatti {
  margin-top: 34px;
  font-size: .92rem;
  color: var(--ink-soft);
}

/* ============================================================
   Pagine interne
   ============================================================ */

/* Testata di pagina: piu' bassa della hero della home, stessa logica per
   riservare lo spazio all'header che sta sopra il contenuto. */
.tg-row--pagehero {
  --tg-hero-top: clamp(50px, 7vw, 110px);
  padding-top: var(--tg-hero-top);
  padding-bottom: clamp(50px, 7vw, 90px);
  background-color: var(--paper);
  overflow: hidden;
}

.wd-header-overlap .tg-row--pagehero {
  --tg-hero-top: calc(var(--wd-header-h, 82px) + clamp(30px, 5vw, 70px));
}

.tg-row--pagehero .tg-headline { max-width: 20ch; }
.tg-row--pagehero .tg-lead { max-width: 60ch; margin-top: clamp(28px, 3vw, 40px); }

/* Il paragrafo introduttivo di una sezione a tutta larghezza non deve
   diventare una riga lunghissima. */
.tg-lead--wide p,
p.tg-lead--wide { max-width: 72ch; }

/* Timeline del tema. I nomi delle classi sono i suoi: il titolo e'
   `.wd-timeline-title`, il testo `.wd-timeline-content`. */
.tg-timeline { margin-top: clamp(30px, 4vw, 50px); }

.tg-timeline .wd-timeline-title {
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  font-weight: 300;
  color: var(--orange);
  letter-spacing: -.02em;
  margin-bottom: 10px;
}

.tg-timeline .wd-timeline-content {
  color: var(--ink-soft);
  font-size: 1rem;
  line-height: 1.6;
}

/* Ogni tappa ha una colonna "secondaria" che qui non usiamo mai: il tema la
   disegna comunque come card bianca e la pagina si riempiva di rettangoli
   fantasma accanto a ogni anno. `:empty` non bastava - dentro ci sono un
   titolo e un contenuto vuoti, quindi il nodo non e' vuoto per il CSS. */
.tg-timeline .wd-timeline-item .timeline-col-secondary {
  background: none;
  box-shadow: none;
  border: 0;
}

.tg-timeline .timeline-col-secondary .timeline-arrow { display: none; }

/* Il colore di linea e pallini lo danno i parametri del modulo
   (line_color / dots_color), non una regola qui: e' il modo previsto dal tema. */

/* Elenchi su fondo scuro (welfare). */
.tg-row--dark .tg-list .wd-list-content { color: rgba(253, 250, 247, .78); }
.tg-row--dark .tg-list .wd-icon { color: var(--blue); }
.tg-row--dark .tg-lead p,
.tg-row--dark p.tg-lead { color: rgba(253, 250, 247, .78); }

/* ---------- Righe a griglia di card ----------
   Le colonne WPBakery sono float: con card di altezza diversa quella dopo si
   aggancia alla piu' alta e la griglia va a scaletta, lasciando buchi bianchi.
   Con flex le card si dispongono in righe pulite e, potendo, si allungano
   fino alla stessa altezza. */
.tg-row--cards {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
}

.tg-row--cards::before,
.tg-row--cards::after { display: none; }

.tg-row--cards > .wpb_column { float: none; }

/* Perche' le card di una stessa riga finiscano tutte alla stessa altezza non
   basta `height: 100%`: la catena si spezza su uno dei wrapper intermedi di
   WPBakery, che non ha altezza propria. Con flex ogni anello si allunga fino
   al successivo e la card arriva davvero a fondo riga. */
.tg-row--cards > .wpb_column { display: flex; }

.tg-row--cards > .wpb_column > .vc_column-inner {
  display: flex;
  flex: 1;
}

.tg-row--cards > .wpb_column > .vc_column-inner > .wpb_wrapper {
  display: flex;
  flex-direction: column;
  flex: 1;
}

/* Fra il wrapper della colonna e la card c'e' un `.info-box-wrapper` del tema
   che di suo non cresce: e' li' che la catena si fermava, lasciando le card di
   una stessa riga con altezze diverse. */
.tg-row--cards .info-box-wrapper {
  display: flex;
  flex: 1;
}

.tg-row--cards .tg-box { flex: 1; }

/* La colonna del titolo occupa la riga per intero e non deve allungarsi. */
.tg-row--cards > .wpb_column.vc_col-sm-12 { align-self: flex-start; }

/* ---------- Contatori della hero ----------
   Numero ed etichetta incolonnati sullo stesso centro, e numero un po' piu'
   grande del resto: sono la prima prova di credibilita' della pagina.
   Il PESO lo decide il parametro "font weight" del modulo (500), non una
   regola qui: cosi' resta regolabile dal builder senza toccare il CSS. */
.tg-row--hero .tg-meta .woodmart-counter,
.tg-row--orange .woodmart-counter,
.tg-row--blue .woodmart-counter { text-align: center; }

.tg-row--hero .tg-meta .woodmart-counter .counter-value,
.tg-row--orange .woodmart-counter .counter-value,
.tg-row--blue .woodmart-counter .counter-value {
  /* Minimo alto apposta: il numero deve restare grande anche sullo stretto,
     dove 4vw da solo lo ridurrebbe a meno della meta'. */
  font-size: clamp(3.5rem, 4vw, 4rem);
  line-height: 1;
  letter-spacing: -.035em;
}

.tg-row--hero .tg-meta .woodmart-counter .counter-label {
  margin-top: 10px;
  font-size: 1rem;
  line-height: 1.45;
  max-width: 20ch;
  margin-inline: auto;
}

/* ---------- Accordion dei servizi ----------
   Otto card affiancate erano illeggibili: qui si apre una voce per volta e il
   resto resta un indice scorrevole. Il comportamento (una aperta, click su una
   chiusa per riaprirla) e' quello nativo del modulo con state="first". */
.tg-accordion { margin-top: clamp(20px, 3vw, 34px); }

.tg-accordion .wd-accordion-item {
  border-top: 1px solid rgba(25, 24, 23, .12);
}

.tg-accordion .wd-accordion-item:last-child {
  border-bottom: 1px solid rgba(25, 24, 23, .12);
}

.tg-accordion .wd-accordion-title {
  padding-top: 22px;
  padding-bottom: 22px;
  font-size: clamp(1.05rem, 1.4vw, 1.25rem);
  letter-spacing: -.01em;
  color: var(--ink);
  transition: color .3s var(--ease);
}

.tg-accordion .wd-accordion-title:hover,
.tg-accordion .wd-accordion-item.wd-active .wd-accordion-title {
  color: var(--orange);
}

.tg-accordion .wd-accordion-content {
  padding-bottom: 24px;
  font-size: 1rem;
  line-height: 1.65;
  color: var(--ink-soft);
  max-width: 58ch;
}

/* L'immagine resta in vista mentre si scorrono le voci. */
@media (min-width: 992px) {
  .tg-col--sticky > .vc_column-inner {
    position: sticky;
    top: calc(var(--wd-header-h, 82px) + 30px);
  }
}

/* ---------- Modulo TG · Schede impilate ----------
   Ogni scheda resta appesa in alto e la successiva le scivola sopra. Lo scarto
   crescente (--i) fa sbucare il bordo di quelle sotto, cosi' si capisce che
   sono cliccabili. Riferimento: sezione "benefits" di mitchy.webflow.io. */
.tg-stack {
  --tg-stack-top: calc(var(--wd-header-h, 82px) + 24px);
  --tg-stack-peek: 14px;
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.tg-stack__item {
  position: sticky;
  top: calc(var(--tg-stack-top) + var(--i) * var(--tg-stack-peek));
  display: flex;
  flex-direction: column;
  min-height: 300px;
  padding: clamp(26px, 3vw, 38px);
  border-radius: var(--r-lg);
  cursor: pointer;
  transition: border-color .35s var(--ease);
}

.tg-stack__item:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 3px;
}

.tg-stack__text {
  font-size: 1rem;
  line-height: 1.6;
  max-width: 46ch;
}

.tg-stack__media { margin-top: auto; }
.tg-stack__media img { width: 54px; height: auto; }

.tg-stack__title {
  margin: auto 0 0;
  font-size: clamp(1.4rem, 2.2vw, 1.9rem);
  font-weight: 400;
  letter-spacing: -.02em;
  line-height: 1.15;
}

/* ---- tono scuro ---- */
.tg-stack--dark .tg-stack__item {
  background: var(--ink);
  border: 1px solid rgba(253, 250, 247, .16);
}

.tg-stack--dark .tg-stack__item:hover { border-color: rgba(253, 250, 247, .4); }
.tg-stack--dark .tg-stack__text { color: rgba(253, 250, 247, .68); }
.tg-stack--dark .tg-stack__title { color: var(--paper); }

/* ---- tono chiaro ---- */
.tg-stack--light .tg-stack__item {
  background: var(--paper);
  border: 1px solid rgba(25, 24, 23, .1);
  box-shadow: var(--nm-out-sm);
}

.tg-stack--light .tg-stack__item:hover { border-color: rgba(25, 24, 23, .28); }
.tg-stack--light .tg-stack__text { color: var(--ink-soft); }
.tg-stack--light .tg-stack__title { color: var(--ink); }

@media (max-width: 767.98px) {
  /* Su schermo stretto l'impilamento toglie leggibilita': le schede tornano
     una sotto l'altra. */
  .tg-stack__item {
    position: static;
    min-height: 0;
  }
  .tg-stack__title { margin-top: 22px; }
}

/* Il riempimento del titolo su fondo scuro va al contrario: parte da un grigio
   scuro e arriva al chiaro, non al nero. */
.tg-row--dark .tg-fill {
  --tg-fill-from: #4a4642;
  --tg-fill-to: var(--paper);
}

/* Nella sezione servizi la colonna di sinistra resta ferma mentre le schede
   scorrono: e' il senso della pila. */
.tg-col--stack > .vc_column-inner { padding-top: 0; }

/* ---------- Righe a due colonne con colonna ferma ----------
   Perche' `position: sticky` funzioni serve spazio nel contenitore: una
   colonna alta quanto il suo contenuto non ha nulla dentro cui restare
   appesa, e sparisce appena si scorre. Con flex le due colonne prendono la
   stessa altezza e la colonna ferma ha la corsa della piu' lunga. */
.tg-row--split {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
}

.tg-row--split::before,
.tg-row--split::after { display: none; }

.tg-row--split > .wpb_column { float: none; }

/* WPBakery mette `overflow: hidden` sulle righe stirate (per non far comparire
   barre orizzontali durante il ridimensionamento). Ma un antenato con overflow
   nascosto DISATTIVA `position: sticky` su tutti i discendenti: la colonna
   ferma spariva appena si scorreva. Qui lo riapriamo - lo stretch di WPBakery
   usa padding inline, non margini negativi, quindi non genera traboccamento. */
.vc_row.tg-row--split[data-vc-full-width] { overflow: visible; }

/* ---------- Fascia a contrasto (arancione) ----------
   Un solo punto di massimo contrasto cromatico nella pagina: fondo arancione,
   testi chiari, accenti azzurri (il codice colore del progetto: blu = misura,
   arancio = valutazione, qui invertiti per far respirare). */
/* I colori vengono dal pannello del tema (Woodmart > Colori): cosi' se cambia
   la palette la fascia segue, senza rimettere mano al CSS.
   --wd-primary-color = arancio, --wd-alternative-color = azzurro. */
.tg-row--orange { background-color: var(--wd-primary-color, #FF8845); }

.tg-row--orange .tg-title .title,
.tg-row--orange .tg-kicker,
.tg-row--orange .woodmart-counter .counter-value { color: var(--paper); }

.tg-row--orange .tg-kicker::before { background: var(--wd-alternative-color, #4CC7FF); }

.tg-row--orange .woodmart-counter .counter-label { color: rgba(253, 250, 247, .88); }

/* Il suffisso (+ / %+) e' l'elemento azzurro che stacca sull'arancio. */
.tg-row--orange .tg-counter--plus .counter-value::after,
.tg-row--orange .tg-counter--percent .counter-value::after { color: var(--wd-alternative-color, #4CC7FF); }

/* Il titolo centrato non deve diventare una riga interminabile. */
.tg-row--orange .tg-title .title { max-width: 22ch; margin-inline: auto; }

/* Pulsante della scheda verso la sua pagina. Sta in fondo, staccato dal
   titolo, e non deve far scattare lo scroll della pila: il JS lo esclude. */
.tg-stack__btn {
  display: inline-flex;
  align-items: center;
  gap: .5em;
  margin-top: 18px;
  font-size: .95rem;
  font-weight: 500;
  text-decoration: none;
  align-self: flex-start;
}

.tg-stack__arrow { transition: transform .35s var(--ease); }
.tg-stack__btn:hover .tg-stack__arrow { transform: translateX(5px); }

.tg-stack--dark .tg-stack__btn { color: var(--paper); }
.tg-stack--dark .tg-stack__btn .tg-stack__arrow { color: var(--wd-alternative-color, #4CC7FF); }
.tg-stack--light .tg-stack__btn { color: var(--ink); }
.tg-stack--light .tg-stack__btn .tg-stack__arrow { color: var(--wd-primary-color, #FF8845); }

/* Il titolo non deve piu' spingere in fondo se sotto c'e' il pulsante. */
.tg-stack__item:has(.tg-stack__btn) .tg-stack__title { margin-bottom: 0; }

/* I contatori della fascia stavano appiccicati al titolo. */
.tg-row--orange > .wpb_column.vc_col-sm-12 { margin-bottom: clamp(24px, 3vw, 44px); }
.tg-row--orange .tg-title { margin-bottom: 0; }

/* L'ombra neumorfica di .tg-box ha una luce chiara come mezza componente:
   sul fondo scuro diventava un alone bianco intorno a ogni card. Li' serve
   un bordo, come gia' fa .tg-stack--dark. */
.tg-row--dark .tg-box {
  box-shadow: none;
  border: 1px solid rgba(253, 250, 247, .16);
}
.tg-row--dark .tg-box:hover { border-color: rgba(253, 250, 247, .3); }

/* ── Certificazioni: elenco in riga, con lo stato al posto del numero ─────
   Riusa .tg-box ma in orizzontale, perche' qui l'informazione utile e' lo
   stato (Attiva / In corso) e va letto per primo. */
.tg-box--cert { margin-bottom: 14px; }
.tg-box--cert .info-box-icon {
  margin: 0 0 8px;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--wd-primary-color, #FF8845);
}
.tg-box--cert .info-box-title, .tg-box--cert h3.title { margin-bottom: 4px; }

/* ── Modulo contatti ──────────────────────────────────────────────────────
   Woodmart stila gia' input e bottoni: qui serve solo il ritmo verticale e
   il bottone allineato al resto del sito. */
.tg-col--form .wpcf7 .tg-field { margin-bottom: 14px; }
.tg-col--form .wpcf7 input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]),
.tg-col--form .wpcf7 select,
.tg-col--form .wpcf7 textarea { width: 100%; }
.tg-col--form .wpcf7 input[type="checkbox"],
.tg-col--form .wpcf7 input[type="radio"] { width: auto; flex: none; }
.tg-col--form .wpcf7 textarea { min-height: 130px; }
.tg-col--form .tg-field--privacy {
  font-size: .88rem;
  line-height: 1.5;
  opacity: .8;
}
.tg-col--form .wpcf7 input[type="submit"] { border-radius: 999px; }

/* Nei recapiti i puntini dell'elenco sono rumore: sono quattro righe di dati. */
.tg-contatti .wd-list-content { font-size: 1rem; }
.tg-contatti a { text-decoration: none; border-bottom: 1px solid currentColor; }

/* Sotto-etichetta di colonna: il kicker con il trattino era gia' usato dalla
   riga, ripeterlo dentro faceva sembrare due sezioni diverse. */
.tg-sublabel p {
  margin-bottom: 16px;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  opacity: .55;
}

/* Ottenuta vs in corso: in arancio solo la prima, o "in corso di
   conseguimento" si legge come un traguardo raggiunto. */
.tg-cert--corso .info-box-icon-text,
.tg-cert--corso .info-box-icon { color: var(--ink-soft);
  opacity: .6; }

/* CF7 mette il consenso dentro una <span> in blocco: la casella finiva
   centrata sopra il testo invece che a fianco. */
.tg-field--privacy .wpcf7-list-item { display: block; margin: 0; }
.tg-field--privacy .wpcf7-list-item label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
}
.tg-field--privacy input[type="checkbox"] { margin-top: .2em; flex: none; }

/* Il modulo candidature e' lungo: su una colonna intera i campi diventano
   righe da 1400px, illeggibili. Meglio incolonnarli e limitare la misura. */
.tg-col--form-wide .wpcf7 { max-width: 720px; margin: 0 auto; }
.tg-col--form .wpcf7 label {
  display: block;
  margin-bottom: 6px;
  font-size: .88rem;
  font-weight: 500;
}
.tg-field--file input[type="file"] {
  width: 100%;
  padding: 14px 18px;
  border: 1px dashed var(--gray);
  border-radius: var(--r);
  background: none;
  font-size: .92rem;
}
.tg-field--group .wpcf7-checkbox { display: flex; flex-direction: column; gap: 8px; }
.tg-field--group .wpcf7-list-item { margin: 0; }
.tg-field--group .wpcf7-list-item label {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-weight: 400;
  cursor: pointer;
}
.tg-field--group .wpcf7-list-item input { flex: none; }

/* Nota di legge: c'e' perche' deve esserci, non deve pesare sulla pagina. */
.tg-nota p {
  max-width: 820px;
  font-size: .82rem;
  line-height: 1.6;
  opacity: .55;
}

/* ── Fascia a contrasto, versione azzurra ─────────────────────────────────
   Gemella di .tg-row--orange ma con i ruoli invertiti: l'azzurro del tema e'
   chiaro, quindi qui il testo e' scuro e l'accento passa all'arancio. */
.tg-row--blue { background-color: var(--wd-alternative-color, #4CC7FF); }

.tg-row--blue .tg-title .title,
.tg-row--blue .tg-kicker,
.tg-row--blue .woodmart-counter .counter-value { color: var(--ink); }

.tg-row--blue .tg-kicker::before { background: var(--wd-primary-color, #FF8845); }
.tg-row--blue .woodmart-counter .counter-label { color: rgba(25, 24, 23, .75); }

.tg-row--blue .tg-counter--plus .counter-value::after,
.tg-row--blue .tg-counter--percent .counter-value::after { color: var(--wd-primary-color, #FF8845); }

.tg-row--blue .woodmart-counter { text-align: center; }
.tg-row--blue .tg-title .title { max-width: 22ch; margin-inline: auto; }
.tg-row--blue > .wpb_column.vc_col-sm-12 { margin-bottom: clamp(24px, 3vw, 44px); }
.tg-row--blue .tg-title { margin-bottom: 0; }

/* ── Certificazioni in home: chip con icona ───────────────────────────────
   Le icone c'erano ma erano nascoste: con otto voci in fila una accanto
   all'altra non si capiva dove finisse una e cominciasse l'altra. */
.tg-col--certs ul.tg-certs .wd-icon {
  display: inline-block;
  margin-right: 9px;
  font-size: .95em;
  color: var(--orange);
  vertical-align: -1px;
}
.tg-col--certs ul.tg-certs--form .wd-icon { color: var(--blue); }

.tg-col--certs ul.tg-certs li { transition: box-shadow .35s var(--ease), transform .35s var(--ease); }

/* La sola certificazione gia' ottenuta ha una pagina da mostrare: il chip
   diventa cliccabile e lo si deve vedere. */
.tg-certs .wd-list-content a {
  color: inherit;
  text-decoration: none;
}
.tg-col--certs ul.tg-certs li:has(a) {
  box-shadow: var(--nm-out-sm), inset 0 0 0 1px var(--orange);
  cursor: pointer;
}
.tg-col--certs ul.tg-certs li:has(a):hover {
  transform: translateY(-3px);
  box-shadow: var(--nm-out), inset 0 0 0 1px var(--orange);
}
.tg-certs .wd-list-content a::after {
  content: '\2192';
  margin-left: .5em;
  color: var(--orange);
  transition: transform .3s var(--ease);
  display: inline-block;
}
.tg-col--certs ul.tg-certs li:has(a):hover .wd-list-content a::after { transform: translateX(4px); }

/* Etichetta del gruppo sopra i chip (Certificazioni / Formazione). */
.tg-col--certs .tg-sublabel p { margin-bottom: 12px; margin-top: 26px; }

/* ── Riferimenti normativi: elenco fitto, righe corte ─────────────────────*/
.tg-list--norme .wd-list-content { font-size: .92rem; line-height: 1.5; }

/* ── Chiusura della home ──────────────────────────────────────────────────
   Le tre frasi vanno su righe proprie: e' un payoff, non un paragrafo. */
.tg-row--cta .tg-headline { margin-bottom: clamp(20px, 2.5vw, 32px); }
.tg-payoff .tg-headline__line { display: block; }

/* Il certificato e' un documento, non una fotografia: sta meglio contenuto. */
.tg-img--doc img { max-width: 420px; }

/* ── Fascia azzurra: numeri grandi, due per riga ──────────────────────────
   Quattro in fila su una riga sola li costringeva a rimpicciolirsi. Con due
   per riga c'e' spazio per farli davvero grandi, che e' il punto della fascia. */
.tg-row--blue > .vc_col-sm-6 .woodmart-counter .counter-value {
  font-size: clamp(4rem, 6.4vw, 6rem);
  line-height: 1;
  letter-spacing: -.04em;
}
.tg-row--blue > .vc_col-sm-6 .woodmart-counter .counter-label {
  margin-top: 12px;
  font-size: 1.05rem;
  line-height: 1.4;
  max-width: 26ch;
  margin-inline: auto;
}
.tg-row--blue > .wpb_column.vc_col-sm-6 { margin-bottom: clamp(30px, 4vw, 56px); }

/* Il titolo della fascia va a capo dove glielo chiediamo, quindi niente
   `max-width` in caratteri che manderebbe a capo anche altrove. */
.tg-row--blue .tg-title--band .title {
  max-width: none;
  line-height: 1.08;
}

/* La parola in evidenza: <em> nudo nel titolo, colorato da qui. Un attributo
   quotato dentro un attributo di shortcode non sopravvive al salvataggio. */
.tg-row--blue .tg-title--band em {
  font-style: normal;
  color: #FFFFFF;
}

/* Con due contatori per riga le colonne di WPBakery sono float e hanno
   altezze diverse (le etichette vanno a capo in modo diverso): la terza si
   incastrava sotto la seconda invece di aprire una riga nuova, e la fascia
   veniva a scaletta. Con flex-wrap ogni riga si chiude da sola. */
.tg-row--blue {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
}
.tg-row--blue::before,
.tg-row--blue::after { display: none; }
.tg-row--blue > .wpb_column { float: none; }

/* ============================================================
   TG · Storia - un nastro che scorre, non una timeline
   ============================================================
   Prima versione (24/08 mattina): asse dritto, pannelli in dissolvenza
   incrociata, un pulsante per anno. Funzionava e non piaceva - troppo
   "classica", ferma fra un clic e l'altro.

   Cosa la muove adesso, in ordine di quanto si nota:

   1. I pannelli stanno su una PISTA unica che trasla: si vede scorrere, e si
      puo' trascinare col dito o col mouse. Non c'e' piu' un pannello che sparisce
      e uno che appare, c'e' un nastro che si sposta.
   2. Un ANNO GIGANTE dietro alla scena, che scorre con la pista ma piu' piano.
      E' la parallasse a dare profondita': due cose che si muovono alla stessa
      velocita' sembrano un'immagine sola.
   3. Il binario e' una SCIA DI VENTO, non una riga: e' il segno che il sito usa
      dappertutto, tratteggiato e sempre in movimento. E' quello che tiene viva
      la sezione anche quando nessuno tocca niente.
   4. L'immagine non compare in dissolvenza ma si SCOPRE, con un taglio che
      corre da sinistra a destra.

   Il cambio di tappa NON e' agganciato allo scorrimento della pagina: clic sugli
   anni, frecce, tastiera, trascinamento. Un'animazione pilotata dallo scroll
   toglie a chi legge il controllo di quanto resta su una tappa. */

.tg-storia {
  --tg-s-i: 0;              /* tappa corrente, la scrive il JS */
  --tg-s-drag: 0px;         /* scostamento del trascinamento in corso */
  --tg-s-par: 48px;         /* di quanto slitta l'anno gigante a ogni tappa */
  --tg-s-molla: .72s cubic-bezier(.16, 1, .3, 1);
  margin-top: clamp(30px, 4vw, 50px);
  position: relative;
}

/* ---------- scena: anno gigante + pista ---------- */
.tg-storia__scena {
  position: relative;
  /* La pista trasla di una schermata per tappa: quello che esce va nascosto.
     `clip` e non `hidden` per non creare un contenitore di scorrimento; il
     margine di 24px lascia respirare le ombre delle immagini, che con un taglio
     netto sui bordi sparivano. Serve anche a tagliare l'anno gigante, che se no
     scendeva sopra la scia degli anni. */
  overflow: clip;
  overflow-clip-margin: 24px;
}

/* In basso a destra e tagliato dal bordo: sopra finiva esattamente dietro al
   titolo della tappa, e due numeri uguali sovrapposti sembravano un errore.
   Sotto invece riempie l'angolo che il testo lascia vuoto. */
.tg-storia__annone {
  position: absolute;
  bottom: -.26em;
  right: -.03em;
  z-index: 0;
  font-size: clamp(7rem, 22vw, 20rem);
  font-weight: 700;
  line-height: .8;
  letter-spacing: -.05em;
  color: var(--gray);
  opacity: .55;
  pointer-events: none;
  user-select: none;
  white-space: nowrap;
  /* Scorre con la pista ma molto piu' piano: e' la parallasse a dare
     profondita', due cose alla stessa velocita' sembrano un'immagine sola.
     Lo slittamento e' in pixel e non in percentuale: la percentuale si riferisce
     alla larghezza del NUMERO, quindi alla quarta tappa era gia' uscito di
     scena a sinistra invece di spostarsi di poco. */
  transform: translate3d(calc((var(--tg-s-i) * var(--tg-s-par) * -1) + (var(--tg-s-drag) * .28)), 0, 0);
  transition: transform var(--tg-s-molla);
}

.tg-storia__annone b { font-weight: inherit; }

.tg-storia__pista {
  position: relative;
  z-index: 1;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 100%;
  transform: translate3d(calc((var(--tg-s-i) * -100%) + var(--tg-s-drag)), 0, 0);
  transition: transform var(--tg-s-molla);
  cursor: grab;
  touch-action: pan-y;      /* il dito deve poter scorrere la pagina in verticale */
}

.tg-storia--trascina .tg-storia__pista {
  cursor: grabbing;
  transition: none;         /* sotto il dito deve seguire, non inseguire */
}

.tg-storia--trascina .tg-storia__annone { transition: none; }

.tg-storia__slide {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 64px);
  align-items: center;
  padding-bottom: 8px;
}

/* Le tappe che non sono in scena restano leggibili dai lettori di schermo ma
   non rubano l'attenzione mentre passano. */
.tg-storia__slide {
  opacity: .18;
  transition: opacity .5s var(--ease);
}

.tg-storia__slide.is-on { opacity: 1; }

/* ---------- immagine: si scopre, non compare ---------- */
.tg-storia__media {
  position: relative;
  border-radius: var(--r);
  overflow: hidden;
  box-shadow: var(--nm-out-sm);
  /* Il taglio corre da sinistra a destra quando la tappa entra in scena. */
  clip-path: inset(0 100% 0 0 round var(--r));
  transition: clip-path .85s cubic-bezier(.22, 1, .36, 1) .12s;
}

.tg-storia__slide.is-on .tg-storia__media { clip-path: inset(0 0 0 0 round var(--r)); }

.tg-storia__media img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  /* Dentro al taglio l'immagine si muove al contrario, di poco: e' il secondo
     piano della parallasse. */
  transform: scale(1.06) translateX(4%);
  transition: transform 1.1s var(--ease);
}

.tg-storia__slide.is-on .tg-storia__media img { transform: none; }

/* Segnaposto: stesso ingombro della foto che arrivera', cosi' il giorno che si
   caricano le immagini non si sposta niente. */
.tg-storia__ph {
  aspect-ratio: 4 / 3;
  background: linear-gradient(115deg, var(--gray), #EEEAE6 55%, var(--gray));
  display: flex;
  align-items: center;
  justify-content: center;
}

.tg-storia__ph span {
  font-size: .72rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(25, 24, 23, .3);
}

/* ---------- testo: sale sfalsato rispetto all'immagine ---------- */
.tg-storia__testo > * {
  transform: translateY(26px);
  opacity: 0;
  transition: opacity .55s var(--ease), transform .7s var(--ease);
}

.tg-storia__slide.is-on .tg-storia__periodo { transform: none; opacity: 1; transition-delay: .14s; }
.tg-storia__slide.is-on .tg-storia__titolo  { transform: none; opacity: 1; transition-delay: .22s; }
.tg-storia__slide.is-on .tg-storia__desc    { transform: none; opacity: 1; transition-delay: .3s; }

.tg-storia__periodo {
  margin: 0 0 14px;
  font-size: clamp(1.9rem, 3.4vw, 3rem);
  font-weight: 300;
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--orange);
}

.tg-storia__titolo {
  margin: 0 0 18px;
  font-size: clamp(1.3rem, 2vw, 1.8rem);
  font-weight: 500;
  line-height: 1.2;
  color: var(--ink);
}

.tg-storia__desc {
  margin: 0;
  font-size: clamp(1rem, 1.2vw, 1.12rem);
  font-weight: 300;
  line-height: 1.65;
  color: var(--ink-soft);
  max-width: 46ch;
}

/* ---------- l'asse: una scia di vento con gli anni sopra ---------- */
.tg-storia__asse {
  position: relative;
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin-top: clamp(30px, 3.6vw, 52px);
  padding-top: 46px;        /* lo spazio in cui vive la scia */
}

.tg-storia__scia {
  position: absolute;
  inset: 0 0 auto;
  width: 100%;
  height: 64px;
  overflow: visible;
}

.tg-storia__scia-base,
.tg-storia__scia-fatta {
  stroke-width: 2;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;   /* il viewBox e' stirato: il tratto no */
}

/* La scia da percorrere: tratteggiata e in movimento, come le linee di vento
   della hero. E' l'unica cosa che si muove da sola in tutta la sezione. */
.tg-storia__scia-base {
  stroke: var(--gray);
  stroke-dasharray: 7 9;
  animation: tg-scia 3.4s linear infinite;
}

@keyframes tg-scia { to { stroke-dashoffset: -32; } }

/* La parte gia' percorsa: si vede attraverso una finestra che si allarga fino
   al punto acceso. --tg-s-fatto va da 0 a 1 e lo scrive il JS. */
.tg-storia__scia-fatta { stroke: var(--orange); }

.tg-storia__scia-finestra {
  transform: scaleX(var(--tg-s-fatto, 0));
  transform-origin: 0 0;
  transition: transform var(--tg-s-molla);
}

.tg-storia__anno {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  flex: 1 1 0;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
  font: inherit;
  color: var(--ink-soft);
  -webkit-appearance: none;
  appearance: none;
}

/* Il punto si siede sulla scia: l'altezza gliela scrive il JS leggendo la
   curva, cosi' i punti la seguono davvero invece di stare su una riga dritta
   che con una curva dietro sembrerebbe un errore. */
.tg-storia__punto {
  position: absolute;
  top: 0;
  left: 50%;
  width: 11px;
  height: 11px;
  margin: -5.5px 0 0 -5.5px;
  border-radius: 50%;
  background: var(--paper);
  box-shadow: inset 0 0 0 2px var(--gray);
  transform: translateY(var(--tg-y, -46px));
  transition: box-shadow .35s var(--ease), background .35s var(--ease), scale .35s var(--ease);
}

.tg-storia__anno-txt {
  font-size: .92rem;
  font-weight: 500;
  letter-spacing: .04em;
  white-space: nowrap;
  opacity: .5;
  transition: opacity .3s var(--ease), color .3s var(--ease);
}

.tg-storia__anno:hover .tg-storia__anno-txt { opacity: 1; }
.tg-storia__anno:hover .tg-storia__punto { box-shadow: inset 0 0 0 2px var(--orange); }

.tg-storia__anno.is-on .tg-storia__anno-txt { opacity: 1; color: var(--ink); }

.tg-storia__anno.is-on .tg-storia__punto {
  background: var(--orange);
  box-shadow: inset 0 0 0 2px var(--orange), 0 0 0 7px rgba(255, 136, 69, .16);
  scale: 1.2;
}

.tg-storia__anno:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 4px;
  border-radius: 8px;
}

/* ---------- frecce, contatore, invito a trascinare ---------- */
.tg-storia__comandi {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: clamp(24px, 2.6vw, 36px);
}

.tg-storia__frec {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid var(--gray);
  background: var(--paper);
  color: var(--ink);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  transition: border-color .3s var(--ease), transform .3s var(--ease), box-shadow .3s var(--ease), opacity .3s var(--ease);
}

.tg-storia__frec:hover:not(:disabled) {
  border-color: var(--orange);
  transform: translateY(-2px);
  box-shadow: var(--nm-out-sm);
}

/* Doppia classe: il tema ha una sua regola su button:disabled che vinceva, e
   la freccia spenta restava quasi identica a quella viva. */
.tg-storia .tg-storia__frec:disabled { opacity: .3; cursor: default; }

.tg-storia__frec:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }

.tg-storia__conta {
  margin: 0 0 0 6px;
  font-size: .88rem;
  letter-spacing: .14em;
  color: var(--ink-soft);
}

.tg-storia__conta b { color: var(--ink); font-weight: 500; }

/* L'invito a trascinare: se non si dice, nessuno prova. Sparisce dopo il primo
   trascinamento - a quel punto lo si e' capito. */
.tg-storia__suggerimento {
  margin: 0 0 0 auto;
  font-size: .72rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink-soft);
  opacity: .5;
  transition: opacity .4s var(--ease);
}

.tg-storia__suggerimento::before { content: "↔ "; }

.tg-storia--provato .tg-storia__suggerimento { opacity: 0; }

/* ---------- sotto i 992px: immagine sopra, testo sotto ---------- */
@media (max-width: 991.98px) {
  .tg-storia__slide {
    grid-template-columns: minmax(0, 1fr);
    gap: 22px;
  }

  .tg-storia__desc { max-width: none; }

  .tg-storia__annone { font-size: clamp(6rem, 26vw, 12rem); opacity: .42; }
}

/* Sul telefono l'anno gigante si mette dietro all'immagine invece che sopra:
   sopra rubava mezzo schermo prima ancora di cominciare a leggere. */
@media (max-width: 767.98px) {
  /* Piu' basso e piu' scarico che sul desktop: la colonna e' stretta, il numero
     finisce comunque dietro al testo della tappa e a mezza tinta si legge male. */
  .tg-storia__annone { bottom: -.16em; right: -.06em; opacity: .34; --tg-s-par: 30px; }

  .tg-storia__asse {
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 8px 6px;
    padding-top: 0;
  }

  /* A capo la scia non ha piu' senso: seguirebbe solo la prima riga. */
  .tg-storia__scia { display: none; }

  .tg-storia__anno {
    flex: 0 0 auto;
    flex-direction: row;
    gap: 8px;
    padding: 7px 13px;
    border: 1px solid var(--gray);
    border-radius: 999px;
    background: var(--paper);
  }

  .tg-storia__anno.is-on { border-color: var(--orange); background: rgba(255, 136, 69, .08); }

  .tg-storia__punto {
    position: static;
    width: 8px;
    height: 8px;
    margin: 0;
    transform: none;
  }

  .tg-storia__anno.is-on .tg-storia__punto {
    box-shadow: inset 0 0 0 2px var(--orange);
    scale: 1;
  }

  .tg-storia__anno-txt { font-size: .85rem; }
}

/* Chi ha chiesto meno movimento vede il cambio di tappa, non il viaggio. */
@media (prefers-reduced-motion: reduce) {
  .tg-storia__pista,
  .tg-storia__annone,
  .tg-storia__media,
  .tg-storia__media img,
  .tg-storia__testo > *,
  .tg-storia__scia-fatta {
    transition-duration: .01ms;
  }

  .tg-storia__media { clip-path: none; }
  .tg-storia__media img { transform: none; }
  .tg-storia__scia-base { animation: none; }
}

/* ---------- Ingresso dei moduli del tema ----------
   La classe la mette tg-main.js: senza JS non c'e' niente di nascosto, e questo
   e' il punto. La comparsa e' una transizione CSS e non un'animazione pilotata
   a fotogrammi, cosi' se il motore delle animazioni non gira si salta l'effetto,
   non il contenuto - che e' il modo in cui su questo sito sono gia' sparite
   intere sezioni due volte.

   Il ritardo di ogni elemento lo scrive il JS (transition-delay in linea), in
   base alla sua posizione dentro la riga. */
.tg-anim {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}

.tg-anim.is-in {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .tg-anim {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ============================================================
   TG · Griglia di schede - case study e risorse
   ============================================================
   Stesso disegno per tutte e due le sezioni: cambiano il tipo di contenuto e
   le parole, non la scheda. Il markup lo genera tg_griglia() in inc/griglia.php
   ============================================================ */

.tg-schede { margin-top: clamp(26px, 3vw, 44px); }

/* ---------- filtri ---------- */
.tg-schede__filtri {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: clamp(26px, 3vw, 42px);
}

.tg-schede__filtro {
  padding: 8px 16px;
  border: 1px solid var(--gray);
  border-radius: 999px;
  background: var(--paper);
  color: var(--ink-soft);
  font: inherit;
  font-size: .86rem;
  cursor: pointer;
  transition: border-color .3s var(--ease), background .3s var(--ease), color .3s var(--ease);
}

.tg-schede__filtro:hover { border-color: var(--orange); color: var(--ink); }

.tg-schede__filtro.is-on {
  border-color: var(--orange);
  background: rgba(255, 136, 69, .1);
  color: var(--ink);
}

.tg-schede__filtro:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }

/* ---------- griglia ---------- */
.tg-schede__griglia {
  display: grid;
  grid-template-columns: repeat(var(--tg-schede-col, 3), minmax(0, 1fr));
  gap: clamp(20px, 2.4vw, 34px);
}

.tg-schede--col2 { --tg-schede-col: 2; }

/* Una scheda che esce per via di un filtro non deve lasciare il buco. */
.tg-schede__scheda.is-fuori { display: none; }

.tg-schede__link {
  display: flex;
  flex-direction: column;
  height: 100%;
  color: inherit;
  text-decoration: none;
  border-radius: var(--r);
  overflow: hidden;
  background: var(--paper);
  box-shadow: var(--nm-out-sm);
  transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}

.tg-schede__link:hover {
  transform: translateY(-4px);
  box-shadow: var(--nm-out);
}

.tg-schede__link:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }

/* ---------- copertina ---------- */
.tg-schede__cop {
  display: block;
  overflow: hidden;
  background: var(--gray);
}

.tg-schede__cop img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  transition: transform .7s var(--ease);
}

.tg-schede__link:hover .tg-schede__cop img { transform: scale(1.04); }

.tg-schede__ph {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 3 / 2;
  background: linear-gradient(115deg, var(--gray), #EEEAE6 55%, var(--gray));
}

.tg-schede__ph span {
  font-size: .7rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(25, 24, 23, .3);
}

/* ---------- corpo della scheda ---------- */
.tg-schede__corpo {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: clamp(18px, 1.8vw, 26px);
  flex: 1 1 auto;
}

.tg-schede__tag {
  align-self: flex-start;
  padding: 3px 11px;
  border-radius: 999px;
  background: rgba(76, 199, 255, .16);
  color: var(--ink-soft);
  font-size: .72rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}

/* `.tg-page` davanti perche' serve: da quando il titolo di scheda e' un
   heading vero, `.tg-page h1..h4 {font-weight:300}` di tg-components.css lo
   batteva sul peso (0,1,1 contro 0,1,0) e le schede uscivano tutte leggere. */
.tg-page .tg-schede__tit {
  margin: 0;   /* e' un heading vero: il margine del tema sballerebbe il flex */
  letter-spacing: -0.015em;   /* a questo corpo il tracking dei titoloni stringe troppo */
  font-size: clamp(1.1rem, 1.5vw, 1.35rem);
  font-weight: 500;
  line-height: 1.25;
  color: var(--ink);
  text-transform: none;
}

.tg-schede__sommario {
  font-size: .95rem;
  font-weight: 300;
  line-height: 1.6;
  color: var(--ink-soft);
}

/* Il richiamo resta in fondo anche se i sommari hanno lunghezze diverse: e'
   quello che tiene allineate le schede di una riga. */
.tg-schede__vai {
  margin-top: auto;
  padding-top: 6px;
  font-size: .88rem;
  font-weight: 500;
  color: var(--orange);
}

.tg-schede__link:hover .tg-schede__vai span { display: inline-block; transform: translateX(4px); transition: transform .3s var(--ease); }

/* ---------- nessun caso ancora ---------- */
.tg-schede-vuoto {
  padding: clamp(30px, 4vw, 54px);
  border: 1px dashed var(--gray);
  border-radius: var(--r);
  text-align: center;
  color: var(--ink-soft);
}

.tg-schede-vuoto p { margin: 0; }

@media (max-width: 991.98px) {
  .tg-schede__griglia { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 575.98px) {
  .tg-schede__griglia { grid-template-columns: minmax(0, 1fr); }
}

/* ============================================================
   Testata della pagina di un case study
   ============================================================ */

/* La testata sta dentro il contenitore del tema, quindi non serve un .wrap suo.
   Lo spazio sopra tiene conto dell'header sovrapposto, come fa la hero. */
.tg-dettaglio-testata {
  padding-block: clamp(24px, 4vw, 54px) clamp(26px, 3.4vw, 46px);
  /* Il titolo deve stare sulla stessa colonna del contenuto sotto. Le righe del
     builder sbordano fino ai bordi e poi rientrano di `clamp(22px,2.2vw,40px)`
     col padding della colonna, meno i 15px di gutter che vc_row si porta
     dietro: quello scarto va rifatto anche qui, se no la testata risultava
     venti pixel piu' a sinistra di tutto il resto. */
  padding-inline: calc(clamp(22px, 2.2vw, 40px) - 15px);
}

.wd-header-overlap .tg-dettaglio-testata {
  padding-top: calc(var(--wd-header-h, 82px) + clamp(20px, 3vw, 44px));
}

.tg-dettaglio-testata__tag {
  display: inline-block;
  margin-bottom: 18px;
  padding: 4px 13px;
  border-radius: 999px;
  background: rgba(76, 199, 255, .16);
  color: var(--ink-soft);
  font-size: .74rem;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.tg-dettaglio-testata__tit {
  margin: 0 0 28px;
  font-size: clamp(2.1rem, 4.4vw, 3.8rem);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -.02em;
  color: var(--ink);
  max-width: 20ch;
}

.tg-dettaglio-testata__sommario {
  margin: 0;
  font-size: clamp(1.05rem, 1.4vw, 1.3rem);
  font-weight: 300;
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: 60ch;
}

.tg-dettaglio-cop {
  margin: clamp(24px, 3vw, 44px) 0 clamp(30px, 4vw, 56px);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--nm-out-sm);
}

.tg-dettaglio-cop img { display: block; width: 100%; height: auto; }

.tg-dettaglio-altri {
  padding-block: clamp(40px, 5vw, 80px) clamp(30px, 4vw, 60px);
  padding-inline: calc(clamp(22px, 2.2vw, 40px) - 15px);
  border-top: 1px solid var(--gray);
}

/* La sezione "casi di questo servizio" in fondo a una pagina servizio. */
.tg-schede-sezione__tit {
  margin: 0;
  font-size: clamp(1.8rem, 3.2vw, 2.8rem);
  font-weight: 300;
  line-height: 1.06;
  letter-spacing: -.02em;
  color: var(--ink);
}

/* ============================================================
   TG · Loghi - certificazioni, software, enti
   ============================================================
   I loghi non stanno tutti nella stessa proporzione: quello SGS e' quasi
   quadrato, quelli dei software sono lunghi e bassi. Quindi la casella e' fissa
   e il logo ci sta dentro senza deformarsi (`object-fit: contain`), invece di
   lasciare che sia il file a decidere l'altezza della riga. */

.tg-loghi {
  list-style: none;
  margin: clamp(24px, 3vw, 40px) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: clamp(20px, 2.6vw, 40px);
}

.tg-loghi__voce {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
}

.tg-loghi__segno {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: clamp(76px, 8vw, 104px);
}

.tg-loghi__segno img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

/* Senza file: stesso ingombro, riquadro grigio con dentro il nome. */
.tg-loghi__segno--vuoto {
  border: 1px dashed var(--gray);
  border-radius: 12px;
  background: rgba(228, 225, 222, .35);
}

.tg-loghi__segno--vuoto span {
  font-size: .74rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(25, 24, 23, .34);
  padding: 0 10px;
}

.tg-loghi__nome {
  font-size: .95rem;
  font-weight: 500;
  color: var(--ink);
}

.tg-loghi__note {
  font-size: .84rem;
  font-weight: 300;
  line-height: 1.45;
  color: var(--ink-soft);
}

/* Su fondo scuro il marchio grigio sparirebbe: la casella si schiarisce. */
.tg-row--dark .tg-loghi__nome { color: var(--paper); }
.tg-row--dark .tg-loghi__note { color: rgba(253, 250, 247, .7); }

.tg-row--dark .tg-loghi__segno--vuoto {
  border-color: rgba(253, 250, 247, .28);
  background: rgba(253, 250, 247, .06);
}

.tg-row--dark .tg-loghi__segno--vuoto span { color: rgba(253, 250, 247, .5); }

/* ---------- La certificazione già ottenuta ---------- */
/* Il marchio esce dal PDF del certificato a 600px: senza un freno il modulo
   immagine del tema lo stampa a grandezza naturale e diventa piu' grande del
   titolo che dovrebbe accompagnare. */
.tg-cert-marchio { margin: clamp(22px, 2.4vw, 34px) 0; }

.tg-cert-marchio img {
  width: clamp(120px, 12vw, 170px);
  height: auto;
}

/* ---------- Le altre, in colonna, solo testo ---------- */
.tg-cert-attesa {
  list-style: none;
  margin: 0;
  padding: 0;
}

.tg-cert-attesa li {
  padding: 16px 0;
  border-top: 1px solid var(--gray);
}

.tg-cert-attesa li:last-child { border-bottom: 1px solid var(--gray); }

.tg-cert-attesa b {
  display: block;
  font-size: 1.02rem;
  font-weight: 500;
  color: var(--ink);
}

.tg-cert-attesa span {
  display: block;
  margin-top: 3px;
  font-size: .9rem;
  font-weight: 300;
  color: var(--ink-soft);
}

.tg-cert-attesa em {
  display: inline-block;
  margin-top: 7px;
  font-style: normal;
  font-size: .72rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--orange);
}

/* ============================================================
   Footer Tecnogaia
   ============================================================
   Fondo nero, marchio bianco, tre colonne: chi siamo, dove andare, come
   raggiungerci. Sostituisce quello della demo Keyboards, che parlava di
   spedizioni, resi e tracking di un ordine su un sito che non vende niente.

   Vive in un blocco HTML del tema (Woodmart > Footer > blocco), quindi i testi
   si cambiano dal builder. Qui c'e' solo il vestito. */

.tg-piede {
  background: var(--ink);
  color: rgba(253, 250, 247, .72);
  padding: clamp(48px, 6vw, 88px) 0 0;
}

.tg-piede a { color: inherit; text-decoration: none; transition: color .3s var(--ease); }
.tg-piede a:hover { color: var(--paper); }

.tg-piede__marchio { width: 46px; height: auto; margin-bottom: 22px; }

.tg-piede__nome {
  margin: 0 0 12px;
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--paper);
}

.tg-piede p { margin: 0 0 8px; font-size: .92rem; font-weight: 300; line-height: 1.6; }

.tg-piede__titolo {
  margin: 0 0 20px;
  font-size: .74rem;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(253, 250, 247, .5);
}

/* I tre elenchi del footer, uguali fra loro. */
.tg-piede__voci {
  list-style: none;
  margin: 0;
  padding: 0;
}

.tg-piede__voci li { margin-bottom: 11px; }

.tg-piede__voci a {
  font-size: .95rem;
  font-weight: 300;
  position: relative;
}

/* La sottolineatura cresce da sinistra invece di comparire tutta insieme. */
.tg-piede__voci a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -3px;
  width: 0;
  height: 1px;
  background: var(--orange);
  transition: width .35s var(--ease);
}

.tg-piede__voci a:hover::after { width: 100%; }

/* La riga in fondo: separata da un filo, non da un blocco di colore. */
.tg-piede__coda {
  margin-top: clamp(38px, 4.5vw, 64px);
  padding: 22px 0 26px;
  border-top: 1px solid rgba(253, 250, 247, .14);
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  align-items: center;
  justify-content: space-between;
  font-size: .84rem;
  font-weight: 300;
  color: rgba(253, 250, 247, .5);
}

.tg-piede__coda p { margin: 0; font-size: inherit; }

@media (max-width: 767.98px) {
  .tg-piede { padding-top: 44px; }
  .tg-piede__titolo { margin-bottom: 14px; }
  .tg-piede__coda { justify-content: flex-start; }
}

/* Il LinkedIn del footer: una voce sola, con il segno del brand davanti. */
.tg-piede__social { margin-top: 18px; }

.tg-piede__social a::before {
  content: "↗";
  margin-right: 7px;
  color: var(--orange);
  font-size: .9em;
}

/* Segnaposto per un contenuto che arrivera' da fuori (il codice di Iubenda
   nelle pagine legali). Stesso principio delle immagini mancanti: si dice cosa
   ci andra', invece di lasciare una pagina bianca che sembra rotta. */
.tg-segnaposto {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: clamp(180px, 22vw, 300px);
  border: 1px dashed var(--gray);
  border-radius: var(--r);
  background: rgba(228, 225, 222, .28);
}

.tg-segnaposto span {
  font-size: .78rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(25, 24, 23, .36);
}

/* Versione ridotta della fila di loghi: in home sta dentro una colonna stretta,
   accanto ai sei riquadri dei motivi, e a grandezza piena rubava la scena. */
.tg-loghi--mini {
  gap: clamp(14px, 1.6vw, 24px);
  margin-top: 14px;
  grid-template-columns: repeat(auto-fit, minmax(92px, 1fr));
}

.tg-loghi--mini .tg-loghi__segno { height: clamp(46px, 4.4vw, 62px); }
.tg-loghi--mini .tg-loghi__voce { gap: 8px; }
.tg-loghi--mini .tg-loghi__nome { font-size: .8rem; font-weight: 400; }
.tg-loghi--mini .tg-loghi__segno--vuoto span { font-size: .6rem; letter-spacing: .08em; }

/* ============================================================
   Planisfero con le rotte internazionali
   ============================================================
   Sta nella pagina Internazionale, al posto della foto di repertorio che
   c'era prima. Il disegno lo genera build/gen-svg-mondo.py dai contorni
   Natural Earth 110m: nel file non ci sono coste, ci sono solo i PUNTINI,
   cioe' una griglia regolare in cui resta acceso quello che cade sulla
   terraferma. Pesa poco e permette di colorare i singoli paesi.

   Tre gruppi di puntini: le terre (neutre), i mercati prioritari (arancio),
   i paesi dove abbiamo gia' lavorato (blu). L'Italia e' la partenza.

   Le rotte hanno `pathLength="100"`: cosi' una sola coppia di keyframes va
   bene per tutte, corte o lunghe che siano, senza calcolare la lunghezza
   vera di ognuna. Il ritardo di partenza e' scritto nel file, una rotta
   ogni 0,85 s. */

.tg-page .tgm {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

/* La carta sta sotto al testo e prende tutta la riga: in mezza colonna il
   corridoio che racconta - Italia, Balcani, Kazakhstan, MENA, Australia -
   finiva schiacciato in un angolo, con le etichette una sull'altra. */
.tg-col--carta { margin-top: clamp(28px, 4vw, 56px); }

/* Il secondo sommario fa da spalla al primo: senza, la riga resterebbe
   sbilanciata a sinistra ora che l'immagine non c'e' piu'. */
.tg-col--spalla > .vc_column-inner { padding-top: clamp(0px, 3vw, 46px); }

/* ---------- i puntini ---------- */
.tgm-terre    { stroke: var(--ink); stroke-opacity: .17; }
.tgm-priorita { stroke: var(--orange); stroke-opacity: .9; }
.tgm-fatto    { stroke: var(--blue); stroke-opacity: .85; }
.tgm-casa     { stroke: var(--ink); stroke-opacity: .85; }

/* ---------- le rotte ---------- */
.tgm-rotta {
  stroke: var(--orange);
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  opacity: 0;
  animation: tgm-traccia 12s cubic-bezier(.35, 0, .2, 1) infinite;
}

/* Le rotte sono tutte arancio, anche quella per l'Australia (scelta
   dell'utente, 02/09): il movimento e' una cosa sola. La distinzione fra
   mercati nuovi e paesi dove abbiamo gia' lavorato resta nei puntini dei
   paesi, che restano blu. Le classi --f nell'SVG ci sono ancora, se un
   domani si volesse tornare a due colori.

   La punta che percorre la rotta. `offset-path` vuole di nuovo il tracciato
   scritto per intero: e' nel file, accanto a ogni rotta. */
.tgm-punta {
  fill: var(--orange);
  opacity: 0;
  offset-rotate: auto;
  animation: tgm-punta 12s cubic-bezier(.35, 0, .2, 1) infinite;
}

/* ---------- gli arrivi ---------- */
.tgm-meta,
.tgm-onda {
  transform-box: fill-box;
  transform-origin: center;
}

.tgm-meta {
  fill: var(--orange);
  opacity: 0;
  animation: tgm-arrivo 12s cubic-bezier(.2, .8, .3, 1) infinite;
}

.tgm-onda {
  fill: none;
  stroke: var(--orange);
  stroke-width: 1.4;
  opacity: 0;
  animation: tgm-onda 12s ease-out infinite;
}

/* Le etichette sono dentro l'SVG, quindi la misura e' in unita' del viewBox e
   rimpicciolisce insieme alla carta: a 1380 px 13 unita' fanno 18 px, ma su un
   telefono farebbero 5 px. Sotto una certa larghezza si tolgono - i mercati
   sono comunque scritti nelle schede subito sotto, e il disegno continua a
   dire quello che deve: da dove si parte e dove si arriva. */
.tgm-eti {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .03em;
  fill: var(--ink-soft, #3A3734);
  opacity: 0;
  animation: tgm-eti 12s ease infinite;
}

@media (max-width: 1023.98px) {
  .tgm-eti { font-size: 19px; }
}

@media (max-width: 767.98px) {
  .tgm-eti { display: none; }
}

.tgm-eti--casa {
  fill: var(--ink);
  opacity: 1;
  animation: none;
}

/* ---------- la sede ---------- */
.tgm-sede { fill: var(--ink); }

.tgm-battito {
  fill: none;
  stroke: var(--ink);
  stroke-width: 1.4;
  transform-box: fill-box;
  transform-origin: center;
  animation: tgm-battito 2.8s ease-out infinite;
}

@keyframes tgm-traccia {
  0%        { stroke-dashoffset: 100; opacity: 0; }
  3%        { opacity: 1; }
  24%       { stroke-dashoffset: 0; }
  82%       { stroke-dashoffset: 0; opacity: 1; }
  90%, 100% { stroke-dashoffset: 0; opacity: 0; }
}

@keyframes tgm-punta {
  0%        { offset-distance: 0%; opacity: 0; }
  3%        { opacity: 1; }
  24%       { offset-distance: 100%; opacity: 1; }
  29%, 100% { offset-distance: 100%; opacity: 0; }
}

@keyframes tgm-arrivo {
  0%, 21%   { transform: scale(0); opacity: 0; }
  29%       { transform: scale(1); opacity: 1; }
  82%       { transform: scale(1); opacity: 1; }
  90%, 100% { transform: scale(1); opacity: 0; }
}

@keyframes tgm-onda {
  0%, 22%   { transform: scale(.4); opacity: 0; }
  27%       { opacity: .65; }
  48%, 100% { transform: scale(3.4); opacity: 0; }
}

@keyframes tgm-eti {
  0%, 25%   { opacity: 0; }
  33%, 82%  { opacity: 1; }
  90%, 100% { opacity: 0; }
}

@keyframes tgm-battito {
  0%   { transform: scale(.7); opacity: .55; }
  70%  { transform: scale(2.6); opacity: 0; }
  100% { transform: scale(2.6); opacity: 0; }
}

/* Chi ha chiesto meno movimento vede la carta ferma, con tutte le rotte
   disegnate: l'informazione c'e' lo stesso, manca solo il viaggio. */
@media (prefers-reduced-motion: reduce) {
  .tgm-rotta,
  .tgm-meta,
  .tgm-eti,
  .tgm-battito { animation: none; opacity: 1; }
  .tgm-rotta   { stroke-dashoffset: 0; }
  .tgm-meta    { transform: none; }
  .tgm-punta,
  .tgm-onda    { display: none; }
}

/* ============================================================
   Home 2 - la testata senza torre
   ============================================================
   Rifatta sul riferimento del progetto (mitchy.webflow.io), con la richiesta
   dell'utente: titolo a sinistra e sotto la foto del pickup fra gli
   aerogeneratori. Tre pezzi, nell'ordine in cui stanno nel riferimento: il
   titolone da una parte e il sommario dall'altra, una riga di occhielli sotto
   un filo, la fascia foto con il cartellino appoggiato sopra.

   Vive solo nella pagina Home 2: la home attuale non la tocca. */

.tg-row--hero2 {
  --tg-hero-top: clamp(40px, 6vw, 90px);
  padding-top: var(--tg-hero-top);
  padding-bottom: clamp(30px, 4vw, 56px);
  background-color: var(--paper);
  overflow: hidden;
}

.wd-header-overlap .tg-row--hero2 {
  --tg-hero-top: calc(var(--wd-header-h, 82px) + clamp(24px, 5vw, 64px));
}

/* Il titolo tiene tutta la sua colonna: qui non c'e' un'immagine a fianco che
   gli contenda lo spazio, e il riferimento lo vuole grande. */
.tg-row--hero2 .tg-headline--display { font-size: clamp(2.5rem, 5.4vw, 4.9rem); }

/* La spalla destra scende all'altezza della seconda riga del titolo: allineata
   in alto sembrerebbe un secondo titolo, non un commento. */
/* 16/09: lo scarto era di 58px a 1440 e il sommario partiva praticamente alla
   stessa quota della prima riga del titolo - i due blocchi si leggevano
   allineati, non sfalsati. Ora sono 98px: il sommario cade fra la prima e la
   seconda riga del titolo. Non una riga intera (sarebbero 73px in piu' e
   sembrerebbe scollato): abbastanza da vedere lo scalino. */
.tg-col--fianco > .vc_column-inner { padding-top: clamp(8px, 6.8vw, 116px); }

.tg-col--fianco .tg-lead p { max-width: 46ch; }

/* ---------- la riga di occhielli sotto il filo ---------- */
/* Il filo sta sulla RIGA, non su un involucro interno: in una riga "stretch"
   le colonne sono figlie dirette e un involucro non c'e'. Va bene cosi', il
   filo attraversa la pagina da un bordo all'altro come nel riferimento. */
.tg-row--filo {
  border-top: 1px solid rgba(25, 24, 23, .12);
  padding-top: clamp(22px, 2.8vw, 38px);
  padding-bottom: clamp(26px, 3.4vw, 46px);
  background-color: var(--paper);
}

.tg-kicker--grande {
  font-size: .92rem;
  color: var(--orange);
}

.tg-kicker--grande::before { display: none; }

.tg-kicker--mezzo { justify-content: center; }
.tg-kicker--fine  { justify-content: flex-end; }

/* ---------- la fascia foto ---------- */
/* Qui finisce l'avorio della testata e comincia il bianco della pagina. Lo
   stacco secco si vedeva come una riga: l'avorio si spegne in sfumatura.
   Il colore di arrivo e' lo STESSO avorio con alfa 0 e non `transparent`
   generico, se no a meta' strada passa da un grigio. Contro il nero invece lo
   stacco resta netto: li' e' voluto. */
.tg-row--foto {
  padding-top: 0;
  padding-bottom: clamp(34px, 4.4vw, 66px);
  background-color: transparent;
  background-image: linear-gradient(to bottom,
    var(--paper) 0%,
    var(--paper) 52%,
    rgba(253, 250, 247, 0) 100%);
}

/* Il riferimento dell'assoluto e' il WRAPPER, non la colonna.
   La colonna di una riga "stretch" e' larga quanto lo schermo (1440 su 1440):
   il cartellino misurato da li' finiva 32px piu' in la' della foto, e sotto i
   1333px - dove il 2,4vw dello scarto scende sotto i 32px di respiro del
   container - usciva davvero dall'immagine. Il wrapper invece e' largo quanto
   la foto (32...1408), quindi "a filo" vuol dire zero. */
.tg-col--foto .wpb_wrapper { position: relative; }

.tg-foto__img img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 14px;
}

/* Il cartellino si appoggia sull'angolo in basso a sinistra, come nel
   riferimento. Sotto i 768 px scende sotto la foto: sovrapposto coprirebbe
   meta' immagine e il testo diventerebbe illeggibile sul cielo. */
/* `.wd-text-block:not(.inline-element)` del tema porta gia' un max-width e ha
   0,2,0 di specificita': con la sola classe nostra la larghezza non teneva. */
/* A destra e non a sinistra come nel riferimento: a sinistra c'e' il marchio
   sulla fiancata del pickup, e il cartellino ci finiva sopra. */
.tg-col--foto .wd-text-block.tg-foto__nota {
  position: absolute;
  /* A filo della foto, angolo in basso a destra (scelta dell'utente, 16/09).
     L'angolo che sta sopra quello tondo della foto prende lo stesso raggio,
     se no spunta fuori dalla curva. */
  right: 0;
  bottom: 0;
  /* Il tema da' 30px di margine sotto a ogni blocco di testo. Su un elemento
     assoluto quel margine NON sparisce: `bottom: 0` allinea il margine, non
     il bordo, e il cartellino restava 30px sopra il bordo della foto. */
  margin-bottom: 0;
  max-width: 384px;
  padding: clamp(20px, 2vw, 30px);
  border-radius: 12px;
  border-bottom-right-radius: 14px;
  background: var(--paper);
}

.tg-foto__nota p {
  margin: 0;
  font-size: .98rem;
  font-weight: 300;
  line-height: 1.6;
  color: var(--ink-soft);
}

.tg-foto__vai { margin-top: 14px !important; }

.tg-foto__vai a {
  font-size: .84rem;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--orange);
}

.tg-foto__vai a span { margin-left: 6px; transition: margin-left .3s var(--ease); }
.tg-foto__vai a:hover span { margin-left: 12px; }

@media (max-width: 767.98px) {
  .tg-col--foto .wd-text-block.tg-foto__nota {
    position: static;
    max-width: none;
    margin-top: -26px;
    margin-inline: clamp(10px, 4vw, 22px);
  }
}

/* ---------- i tre numeri sotto la foto ---------- */
.tg-row--cifre {
  padding-top: 0;
  padding-bottom: clamp(50px, 7vw, 96px);
  background-color: var(--paper);
}

/* ============================================================
   Una card sola per tutto il sito
   ============================================================
   Scelta dell'utente (11/09): vale lo stile delle card scure - fondo pieno,
   un filo di bordo, angoli arrotondati, **niente ombra** - e vale anche
   quando cambia il colore. Prima convivevano due linguaggi: le scure con il
   bordo e le chiare con l'ombra neumorfica, che al cambio di fondo facevano
   sembrare due componenti diversi.

   Le regole stanno qui in fondo, tutte insieme, invece che dentro ai singoli
   blocchi: cosi' si legge in un colpo solo quali sono le card del sito, e
   aggiungerne una vuol dire scriverla in questo elenco.

   Anche il sollevamento al passaggio del mouse se ne va: le scure non lo
   hanno mai avuto, e un movimento che c'e' solo su meta' delle card e'
   esattamente la disparita' che si voleva togliere. Resta il bordo che si
   accende, che e' il comportamento delle scure. */

.tg-box,
.tg-stack--light .tg-stack__item,
.tg-schede__link,
.tg-col--certs ul.tg-certs li,
.tg-storia__media,
.tg-badge,
.tg-col--foto .wd-text-block.tg-foto__nota,
.tg-col--cta > .vc_column-inner {
  box-shadow: none;
  border: 1px solid rgba(25, 24, 23, .12);
  transition: border-color .35s var(--ease), background-color .35s var(--ease);
}

/* Su fondo scuro il filo e' chiaro, se no sparisce. Stesso valore delle
   card scure della pila, che sono il modello. */
.tg-row--dark .tg-box,
.tg-row--dark .tg-schede__link,
.tg-box.tg-box--feature,
.tg-stack--dark .tg-stack__item {
  border-color: rgba(253, 250, 247, .16);
}

.tg-box:hover,
.tg-schede__link:hover,
.tg-col--certs ul.tg-certs li:hover,
.tg-stack--light .tg-stack__item:hover {
  transform: none;
  box-shadow: none;
  border-color: rgba(25, 24, 23, .3);
}

.tg-row--dark .tg-box:hover,
.tg-row--dark .tg-schede__link:hover,
.tg-box.tg-box--feature:hover,
.tg-stack--dark .tg-stack__item:hover {
  border-color: rgba(253, 250, 247, .4);
}

/* Le due card che si coloravano al passaggio del mouse tenevano l'ombra in
   una regola loro. */
.tg-box--step:hover,
.tg-box--why:hover { box-shadow: none; }

/* ---------- il richiamo dentro la card diventa un bottone ----------
   Era un link con la freccia. Ora e' un pulsante con gli stessi angoli
   tondi di quelli della testata: un solo modo di dire "vai" in tutto il
   sito. */
.tg-stack__btn,
.tg-schede__vai,
.tg-foto__vai a {
  display: inline-flex;
  align-items: center;
  gap: .55em;
  align-self: flex-start;
  padding: 11px 22px;
  border: 1px solid currentColor;
  border-radius: 999px;
  font-size: .88rem;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  text-decoration: none;
  transition: background-color .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}

.tg-stack--dark .tg-stack__btn:hover {
  background: var(--paper);
  color: var(--ink);
}

.tg-stack--light .tg-stack__btn:hover,
.tg-schede__link:hover .tg-schede__vai,
.tg-foto__vai a:hover {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
}

/* La freccia non si sposta piu' fuori dal bottone. */
.tg-stack__btn:hover .tg-stack__arrow { transform: translateX(3px); }
.tg-foto__vai a:hover span { margin-left: 6px; }

/* ---------- La targa della pagina ----------
   Nella brochure ogni pagina servizio porta il suo codice in un riquadro
   arancio in alto a destra (VPE, QAS...). Qui l'occhiello della testata
   diventa quella targa: stesso ruolo, stesso segno. Gli angoli sono tondi
   come i bottoni del sito - un solo modo di disegnare le cose cliccabili e
   le etichette, invece di tre.

   Vale per tutte le testate di pagina insieme, senza toccare i contenuti:
   e' l'occhiello che sta dentro `.tg-row--pagehero`. */
.tg-row--pagehero .tg-kicker,
.tg-kicker--targa {
  display: inline-flex;
  align-items: center;
  padding: 10px 20px;
  line-height: 1.1;   /* le maiuscole accentate toccavano il bordo: AFFIDABILITÀ */
  border: 1.5px solid var(--orange);
  border-radius: 999px;
  color: var(--orange);
}

.tg-row--pagehero .tg-kicker::before,
.tg-kicker--targa::before { display: none; }

.tg-row--pagehero .tg-kicker--blue,
.tg-kicker--targa.tg-kicker--blue {
  border-color: var(--blue);
  color: var(--blue);
}

/* I richiami scritti come link ("I nostri numeri", "Tutte le certificazioni")
   erano l'unica cosa cliccabile del sito che non sembrava un bottone: il tema
   li rende testo sottolineato. Diventano anche loro pillole, bordate come i
   secondari. Un solo modo di dire "vai". */
.btn.tg-btn.btn-style-link,
.btn.tg-btn-link {
  padding: 14px 26px;
  border-radius: 999px;
  border: 1px solid rgba(25, 24, 23, .18);
  background: transparent;
  color: var(--ink);
  text-decoration: none;
  font-size: .95rem;
}

.btn.tg-btn.btn-style-link:hover,
.btn.tg-btn-link:hover {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
  transform: none;
  box-shadow: none;
}

.tg-row--dark .btn.tg-btn.btn-style-link,
.btn.tg-btn-link {
  border-color: rgba(253, 250, 247, .3);
  color: var(--paper);
}

.tg-row--dark .btn.tg-btn.btn-style-link:hover,
.btn.tg-btn-link:hover {
  background: var(--paper);
  border-color: var(--paper);
  color: var(--ink);
}

/* Il sollevamento del bottone pieno era l'ultimo movimento rimasto con
   l'ombra: tolto anche li', per la stessa ragione delle card. */
.btn.tg-btn.btn-style-default:hover {
  transform: none;
  box-shadow: none;
  filter: brightness(1.06);
}

/* ============================================================
   Know-how in bianco e nero
   ============================================================
   Scelta dell'utente (11/09): la fascia "Know-how e tecnologia" esce dalla
   tavolozza del sito e va in bianco e nero, con una foto sotto che si muove
   piano. La foto e' un traliccio anemometrico vero, ripreso dal drone.

   La riga porta anche `tg-row--dark`, che e' gia' il tono scuro del sito:
   cosi' titoli, occhielli, card e contatori si girano da soli e qui resta
   solo cio' che e' proprio di questa fascia - la foto, il movimento e lo
   spegnimento dei colori.

   La foto e' gia' in bianco e nero nel file: un `filter: grayscale()` su
   un'immagine che si ingrandisce in continuo la farebbe ricalcolare a ogni
   fotogramma. */

.tg-row--bn {
  position: relative;
  isolation: isolate;
}

/* Le colonne vanno sollevate: il velo della foto e' un elemento posizionato e
   coprirebbe il testo, che invece sta nel flusso normale. Con `z-index:-1`
   finiva sotto al fondo pieno della riga e non si vedeva affatto. */
.tg-row--bn > .wpb_column { position: relative; z-index: 1; }

.tg-row--bn::before {
  content: "";
  /* Serve dirlo: `.tg-row--split::before` spegne il clearfix di WPBakery con
     un `display:none`, e la riga del know-how e' proprio una --split. */
  display: block;
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: var(--tg-bn, url(../img/knowhow-bn.webp));
  /* `cover` + `no-repeat`: prima la misura era `auto 104%`, che copre in
     ALTEZZA e basta - su una riga larga e bassa la foto non arrivava ai lati e
     `repeat` (il valore di serie) la ripeteva a mattonella. Segnalato il
     18/09. */
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  opacity: .34;   /* 18/09: l'utente le vuole piu' scure */
  /* Lo zoom e' lento e va avanti e indietro: un respiro, non un movimento
     che chiede di essere guardato. `alternate` evita lo scatto del ritorno.

     Si allarga lo SFONDO, non si scala l'elemento: con `transform` la foto
     usciva dalla sezione (il "sfora sempre"), e la riga non si puo' chiudere
     con `overflow:hidden` perche' li' dentro c'e' una colonna che sta
     appiccicata allo scroll - e lo sticky muore sotto un overflow nascosto.
     Lo sfondo, invece, dal suo riquadro non esce mai. */
  /* Il respiro non e' piu' uno zoom sulla misura dello sfondo: con `cover` non
     si puo' interpolare senza perdere la copertura. Ora e' una deriva lenta
     della posizione - stesso effetto di respiro, e la foto copre sempre. */
  animation: tg-bn-respiro 38s ease-in-out infinite alternate;
  will-change: background-position;
}

/* Un velo scuro in diagonale: il testo sta a sinistra e li' la foto deve
   farsi da parte, mentre a destra resta leggibile. Senza, il sommario
   capitava sopra il cielo chiaro. */
.tg-row--bn::after {
  content: "";
  display: block;
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(100deg,
    rgba(25, 24, 23, .94) 0%,
    rgba(25, 24, 23, .74) 38%,
    rgba(25, 24, 23, .38) 100%);
  pointer-events: none;
}

@keyframes tg-bn-respiro {
  from { background-position: 50% 42%; }
  to   { background-position: 50% 58%; }
}

/* Qui dentro non c'e' colore: gli accenti del sito (il trattino arancio
   dell'occhiello, le parole in sfumatura del titolo, le frecce blu) tornano
   tutti al bianco. */
.tg-row--bn .tg-kicker { color: rgba(253, 250, 247, .75); }
.tg-row--bn .tg-kicker::before { background: var(--paper); }

.tg-row--bn .tg-title .title,
.tg-row--bn .tg-title .title em,
.tg-row--bn .tg-lead p,
.tg-row--bn .tg-list .wd-list-content { color: var(--paper); }

.tg-row--bn .tg-lead p,
.tg-row--bn .tg-list .wd-list-content { color: rgba(253, 250, 247, .72); }

.tg-row--bn .tg-list .wd-icon,
.tg-row--bn .tg-box .info-box-icon,
.tg-row--bn .tg-stack__arrow { color: rgba(253, 250, 247, .55); }

/* Le card della pila: stesso disegno di quelle scure, che e' il modello
   unico del sito. Il fondo e' pieno e non trasparente, se no il testo
   finisce sopra il traliccio e non si legge piu'. */
.tg-row--bn .tg-stack--light .tg-stack__item {
  background: var(--ink);
  border-color: rgba(253, 250, 247, .16);
}

.tg-row--bn .tg-stack--light .tg-stack__item:hover { border-color: rgba(253, 250, 247, .4); }
.tg-row--bn .tg-stack--light .tg-stack__title { color: var(--paper); }
.tg-row--bn .tg-stack--light .tg-stack__text { color: rgba(253, 250, 247, .68); }

.tg-row--bn .tg-stack--light .tg-stack__btn {
  color: var(--paper);
  border-color: rgba(253, 250, 247, .45);
}

.tg-row--bn .tg-stack--light .tg-stack__btn:hover {
  background: var(--paper);
  color: var(--ink);
}

/* Il numero della card (01, 02...) era arancio. */
.tg-row--bn .tg-box .info-box-icon,
.tg-row--bn .tg-box--step .info-box-icon { color: rgba(253, 250, 247, .5); }

@media (prefers-reduced-motion: reduce) {
  .tg-row--bn::before { animation: none; background-size: cover; }
}

/* Gli elenchi numerati (i dieci punti del know-how, le sei ragioni della
   home) erano l'eccezione rimasta: non una card ma un filo di 2px in cima,
   che al passaggio del mouse diventava una cornice sfumata. Con la regola
   unica delle card diventano card anche loro - stesso fondo pieno, stesso
   filo di bordo, stessi angoli. Sopra la foto in bianco e nero era anche
   l'unico modo di renderli leggibili: senza fondo, il testo finiva sul
   traliccio. */
.tg-box--step,
.tg-box--why {
  margin: 0;
  padding: clamp(24px, 2.6vw, 32px);
  background: var(--paper);
  border: 1px solid rgba(25, 24, 23, .12);
  border-radius: var(--r-lg);
  transform: none;
}

.tg-box--step::after,
.tg-box--why::after { display: none; }

/* Su fondo scuro la card e' piena di inchiostro: sotto c'e' una foto, e una
   card trasparente non si leggerebbe. */
.tg-row--dark .tg-box,
.tg-row--dark .tg-box--step,
.tg-row--dark .tg-box--why {
  background: var(--ink);
}

.tg-row--dark .tg-box .info-box-title,
.tg-row--dark .tg-box .info-box-content > .info-box-title { color: var(--paper); }
.tg-row--dark .tg-box .info-box-inner { color: rgba(253, 250, 247, .7); }
.tg-row--dark .tg-box .info-box-subtitle { color: rgba(253, 250, 247, .55); }

/* ---------- "Know-how, tecnologia e dati che parlano" ----------
   Era una fascia azzurra piena, incastrata fra la sezione scura dei servizi e
   quella in bianco e nero del know-how: tre fondi diversi uno sull'altro, e
   scorrendo il traliccio spuntava da sotto dentro una striscia di colore.
   Ora e' chiara come le sezioni intorno, con i testi e le cifre a sinistra e
   a destra la torre anemometrica - lo stesso disegno che nella home 1 sta
   nella testata, e che nella home 2 era rimasto senza posto. */
/* Stesso fondo di "Chi siamo", che le sta subito sopra - e "Chi siamo" non
   ha fondo proprio: e' il bianco della pagina. Con l'avorio erano due chiari
   diversi attaccati e si vedeva la giunzione. */
.tg-row--cifre2 { background-color: transparent; }

.tg-col--torre { display: flex; justify-content: center; }

/* Il disegno della torre si misura in ALTEZZA, non in larghezza: il CSS del
   disegno e' `height:100%; width:auto`, quindi `max_width` sullo shortcode non
   lo tocca. L'altezza qui e' quella della colonna di testo a fianco, cosi' le
   due meta' della riga finiscono pari. */
.tg-col--torre .tg-svg {
  display: flex;
  justify-content: center;
  width: 100%;
  max-width: none;
}

/* L'altezza va data al DISEGNO, non alla cassa: con `height:100%` sul disegno
   il 100% si misura sul contenitore, e fra padding e allineamento il conto non
   tornava mai. */
/* Tre classi e non due: `.tg-page .mast` di tg-components.css ha la stessa
   specificita' e quel foglio si carica dopo, quindi vinceva lui. */
.tg-col--torre .tg-svg .mast {
  height: clamp(440px, 48vw, 780px);
  width: auto;
  max-width: 100%;
  /* `.tg-svg .mast` tiene un `max-height:78svh` per la torre della hero, dove
     serve a non farla uscire dallo schermo. Qui la torre sta dentro una
     sezione e deve solo pareggiare la colonna a fianco. */
  max-height: none;
}

/* Le quattro cifre in due colonne sotto al titolo. Griglia vera e non le
   colonne di WPBakery: con quelle, un'etichetta su due righe sfasava la
   cifra successiva e le quattro non stavano piu' in quadrato. */
/* Le quattro cifre **incolonnate**, non in quadrato: cosi' la colonna di
   sinistra cresce fino all'altezza della torre che le sta a fianco, e le due
   meta' della riga finiscono pari. Sta tutto piu' stretto, che era la
   richiesta. */
.tg-griglia-cifre {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(18px, 2.2vw, 30px);
  margin-top: clamp(26px, 3.2vw, 44px);
}

.tg-griglia-cifre > .wpb_column {
  width: 100%;
  margin: 0;
  float: none;
}

/* Il clearfix di WPBakery (`.vc_row::before{display:table}`) in una griglia
   diventa una CELLA: occupava la prima casella e spingeva tutte le cifre di
   un posto. */
.tg-griglia-cifre::before,
.tg-griglia-cifre::after { display: none; }

@media (max-width: 767.98px) {
  .tg-col--torre { margin-top: 30px; }
  .tg-col--torre .tg-svg { max-width: 280px; margin-inline: auto; }
}

/* ---------- la riga dei clienti ----------
   Ha preso il posto della fascia scorrevole dei tipi di cliente: senza i
   loghi veri quella diceva poco. Qui e' una frase sola, centrata, con il
   rimando a "Clienti e referenze" di Chi siamo. */
.tg-row--clienti .tg-lead p { max-width: 76ch; }

.tg-row--clienti a {
  color: var(--orange);
  font-weight: 500;
  white-space: nowrap;
  border-bottom: 1px solid currentColor;
  padding-bottom: 1px;
  transition: color .3s var(--ease), border-color .3s var(--ease);
}

.tg-row--clienti a:hover { color: var(--ink); }

.tg-row--clienti a::after { content: " \2192"; }

/* ---------- i richiami del piede diventano bottoni ----------
   Nel footer ci sono due cose: gli ELENCHI di navigazione (Pagine,
   Assistenza), che restano link, e i due richiami veri - LinkedIn e i
   documenti legali - che invece si comportano da bottone. Ora lo sembrano,
   con gli stessi angoli tondi del resto del sito. */
.tg-piede__social a,
.tg-piede__legali a {
  display: inline-flex;
  align-items: center;
  padding: 9px 20px;
  border: 1px solid rgba(253, 250, 247, .28);
  border-radius: 999px;
  font-size: .86rem;
  font-weight: 500;
  transition: background-color .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}

.tg-piede__social a:hover,
.tg-piede__legali a:hover {
  background: var(--paper);
  border-color: var(--paper);
  color: var(--ink);
}

/* La sottolineatura che cresce non ha piu' senso su un bottone. */
.tg-piede__social a::after,
.tg-piede__legali a::after { display: none; }

/* I due documenti stanno in fila, non incolonnati. */
.tg-piede__legali {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 22px;
}

.tg-piede__legali li { margin-bottom: 0; }

.tg-piede__social { margin-top: 22px; }

/* La freccetta del social sta dentro al bottone, non prima. */
.tg-piede__social a::before { margin-right: 8px; }

/* ---------- i tre disegni del metodo (pagina VPE) ----------
   Tre illustrazioni dello stesso tratto: la correlazione fra due stazioni,
   l'estrapolazione in quota, la produzione attesa. Hanno proporzioni molto
   diverse (una larga e bassa, due alte) e il fondo trasparente: per stare in
   fila servono una cassa di altezza fissa e il disegno centrato dentro. */
.tg-row--disegni { background-color: var(--paper-2); }

.tg-col--disegno .tg-disegno {
  display: flex;
  align-items: center;
  justify-content: center;
  height: clamp(180px, 20vw, 280px);
  margin-bottom: 24px;
}

.tg-col--disegno .tg-disegno img {
  max-height: 100%;
  width: auto;
  max-width: 100%;
  object-fit: contain;
}

.tg-disegno__tit {
  margin-bottom: 8px !important;
  font-size: 1.15rem;
  font-weight: 500;
  color: var(--ink);
}

.tg-disegno__testo p {
  font-size: .98rem;
  font-weight: 300;
  line-height: 1.6;
  color: var(--ink-soft);
}

@media (max-width: 767.98px) {
  .tg-col--disegno .tg-disegno { height: 200px; }
}

/* Qui dentro si sta su due colori: inchiostro e arancio. Il "+" era blu e
   faceva il terzo - regola dell'utente: al massimo due, il fondo a parte. */
.tg-row--cifre2 .tg-counter--plus .counter-value::after,
.tg-row--cifre2 .tg-counter--percent .counter-value::after { color: var(--orange); }

/* Cifra ed etichetta si stringono: quattro numeri incolonnati con
   l'interlinea di prima sfondavano l'altezza della torre. */
.tg-row--cifre2 .counter-value { line-height: 1; }

.tg-row--cifre2 .counter-label {
  margin-top: 4px;
  line-height: 1.35;
}

/* ---------- il nastro: le tre frasi che scorrono ----------
   Stavano ferme come tre occhiellini e dicevano poco. Ora sono una scritta
   grande che scorre fra il titolo e la foto, con le parole strette fra loro,
   e la foto che sale a coprirne il fondo: si leggono tagliate, ed e' voluto. */
.tg-row--nastro {
  padding-top: clamp(10px, 1.8vw, 30px);
  /* Niente scarto in basso: la distanza dalla foto la decide il gambo delle
     lettere, non la riga. Vedi il padding dell'elemento qui sotto. */
  padding-bottom: 0;
  background-color: var(--paper);
  overflow: hidden;
}

.tg-row--nastro .wd-marquee-item {
  font-size: clamp(3.4rem, 12vw, 12rem);
  font-weight: 500;
  line-height: 1.06;
  letter-spacing: -0.07em;   /* le parole molto vicine, come chiesto */
  /* Tono su tono: qualche grado piu' scuro del fondo, come se fosse fondo
     anche lei. Scritto in alfa sull'inchiostro e non in esadecimale, cosi'
     resta giusto anche se la sezione cambia colore. */
  color: rgba(25, 24, 23, .085);
  text-transform: none;
  /* Aria fra una frase e l'altra. Era .32em: con la spaziatura negativa
     restavano 63px a 1440, poco piu' del doppio di uno spazio fra due parole
     (33px), e all'aggancio del nastro "Scelte efficaci" e "Dati affidabili"
     si leggevano attaccate - la sovrapposizione segnalata il 16/09. Ora
     l'aria fra due frasi vale tre volte quella fra due parole. */
  padding-right: .6em;
  /* Il gambo della "p" di Competenze deve toccare la foto.
     Con line-height 1.06 l'inchiostro esce SOTTO la riga di testo: la
     discendente di Inter sta a 0,204em dalla linea di base, che a sua volta
     cade a 0,9664em dal bordo alto meno il mezzo-interlinea negativo. Quel
     che avanza sotto la riga e' 0,036em, e questo padding lo restituisce -
     scritto in em resta giusto a ogni corpo del clamp qui sopra.
     La riga (`.tg-row--nastro`) non ha piu' scarto in basso: sommati, il
     fondo della sezione cade esattamente sulla punta del gambo. */
  padding-bottom: .036em;
}

/* Le lettere si tagliano qui, non spostando la foto: il margine negativo
   sulla riga successiva veniva riassorbito dall'impaginazione di WPBakery e
   la sovrapposizione restava a zero. Il nastro tiene un'altezza minore del
   corpo del testo, il fondo delle parole finisce fuori, e la foto attacca
   subito sotto: a vedersi e' la foto che le mangia. */
/* Niente taglio: le frasi si devono leggere tutte (scelta dell'utente,
   11/09). Il nastro tiene la sua altezza naturale. */

.tg-row--foto {
  position: relative;
  z-index: 1;
  margin-top: 0;
}

/* Le card di una griglia che va a capo: finche' erano trasparenti si
   separavano da sole, ora che hanno un fondo pieno si toccavano riga contro
   riga. Lo scarto verticale va sulla RIGA, che e' il contenitore flex; quello
   orizzontale ce l'hanno gia' le colonne di WPBakery. */
/* Lo scarto fra una fila di card e l'altra e' lo stesso che c'e' fra una
   colonna e l'altra: la griglia di Woodmart mette 2,2vw di respiro per lato,
   quindi fra due card ce ne sono 4,4vw. Messo qui, le card hanno la stessa
   aria sopra, sotto e ai lati. */
.tg-row--cards {
  --tg-scarto-file: clamp(24px, 4.4vw, 64px);
  row-gap: var(--tg-scarto-file);
}

/* ---------- le card si muovono ----------
   Al passaggio del mouse si accende **solo il bordo**: una sfumatura che gira
   attorno alla card. Il contenuto non cambia - niente ribaltamento a nero,
   niente testo che si schiarisce (scelta dell'utente, 11/09).

   Il bordo colorato e' un riquadro sopra la card a cui si ritaglia il centro
   con due maschere in `exclude`: resta solo la cornice. A girare e' l'angolo
   di partenza di una conica, che per essere animabile va dichiarato con
   `@property` - senza, il browser lo tratta come una stringa e la sfumatura
   resta ferma (accesa, ma ferma: un ripiego accettabile). */
@property --tg-giro {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

.tg-box--step,
.tg-box--why {
  position: relative;
  transition: border-color .4s var(--ease);
}

/* Il cartellino della foto e' una card come le altre e da qui in poi si
   comporta come tale anche al passaggio del mouse (scelta dell'utente,
   16/09). Non entra nella regola qui sopra perche' il suo `position` e'
   `absolute`, che gli serve per stare appoggiato sulla foto: come
   contenitore del bordo va bene lo stesso. */
.tg-box--step::before,
.tg-box--why::before,
.tg-col--foto .wd-text-block.tg-foto__nota::before {
  content: "";
  display: block;
  position: absolute;
  inset: -1px;                 /* copre il filo di bordo della card */
  border-radius: inherit;
  padding: 1.5px;
  background: conic-gradient(from var(--tg-giro),
    transparent 0deg,
    var(--blue) 50deg,
    var(--orange) 130deg,
    transparent 200deg,
    transparent 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  opacity: 0;
  transition: opacity .35s var(--ease);
  pointer-events: none;
}

.tg-box--step:hover::before,
.tg-box--why:hover::before,
.tg-col--foto .wd-text-block.tg-foto__nota:hover::before {
  opacity: 1;
  animation: tg-giro 2.6s linear infinite;
}

@keyframes tg-giro {
  to { --tg-giro: 360deg; }
}

.tg-box--step::after,
.tg-box--why::after { display: none; }

@media (prefers-reduced-motion: reduce) {
  .tg-box--step:hover::before,
  .tg-box--why:hover::before,
  .tg-col--foto .wd-text-block.tg-foto__nota:hover::before { animation: none; }
}

/* La foto sotto ai passi di "Come lavoriamo": una fascia bassa, non una foto
   intera - qui serve un respiro fra le card e la sezione dopo, non un secondo
   soggetto. Il taglio lo fa il CSS, cosi' l'originale resta intero in libreria. */
/* La foto chiude la sezione, e fra lei e "Copertura territoriale" si sommavano
   tre scarti: i 30px di margine che il tema mette sotto a ogni blocco, i 158px
   di fondo di questa riga e i 158px di testa della riga dopo - 371px in tutto
   (16/09: l'utente li ha trovati troppi). Il ritmo fra due sezioni resta
   quello del sito: a rientrare e' la fascia foto, che con un margine negativo
   si riprende parte del fondo della riga. Scritto in vw come i padding delle
   righe, cosi' scala insieme a loro: a 1440 restano 226px, a 390 ne restano
   153. */
.tg-col--fotoprocesso {
  margin-top: clamp(26px, 3.4vw, 52px);
  margin-bottom: calc(-1 * clamp(24px, 8vw, 116px));
}

.tg-processo__foto { margin-bottom: 0; }

.tg-processo__foto img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 21 / 8;
  object-fit: cover;
  object-position: center 88%;   /* l'orizzonte sta in basso: tagliando al centro restava solo cielo */
  border-radius: var(--r-lg);
}

@media (max-width: 767.98px) {
  .tg-processo__foto img { aspect-ratio: 3 / 2; }
}

/* Il nastro esce dalla griglia e va da bordo a bordo: e' una fascia, non un
   paragrafo. La riga e' gia' larga quanto lo schermo (stretch row), a stare
   in colonna e' il contenuto: lo si sfila con il margine negativo invece di
   cambiare il tipo di riga, cosi' non si tocca il contenuto della pagina.
   La riga ha `overflow:hidden`, quindi il 100vw non fa comparire la barra. */
.tg-row--nastro > .wpb_column,
.tg-row--nastro > .wpb_column > .vc_column-inner,
.tg-row--nastro .wd-marquee-wrapp {
  width: 100vw;
  max-width: none;
  margin-left: calc(50% - 50vw);
  padding-left: 0;
  padding-right: 0;
}

.tg-row--nastro > .wpb_column > .vc_column-inner,
.tg-row--nastro .wd-marquee-wrapp { margin-left: 0; }

/* ============================================================
   Il campo di trattini (decoro)
   ============================================================
   Richiesta dell'utente (16/09): da "Perche' Tecnogaia" in giu' il fondo resta
   bianco per quattro sezioni di fila. Il segno che rompe quel bianco lo ha
   indicato lui: i trattini del company profile, pagina 12 (la pagina
   "Archivio") - una griglia di trattini a 45 gradi, fitta da un lato e che si
   dirada fino a sparire. Nel profilo sono arancioni; qui azzurri e tenui,
   perche' non devono diventare il soggetto della sezione.

   Il disegno lo genera `build/gen-tratteggio.py` in
   `templates/svg/tratteggio.svg` - **non si edita a mano**: l'ordine dei
   trattini nel file e' l'ordine in cui si accendono, e ogni trattino porta due
   numeri (`--o` la sua opacita', `--i` la sua posizione lungo il vento) che
   servono alle regole qui sotto. Lo mette in pagina `[tg_svg
   preset="tratteggio"]`.

   Sta agganciato all'angolo in basso dell'ultima scheda di "Sei ragioni per
   sceglierci" e da li' cola in giu' e verso sinistra, passando sotto alla
   sezione seguente. */

/* WPBakery mette `overflow: hidden` sulle righe stirate: senza toglierlo il
   campo verrebbe tagliato netto sul bordo basso della riga e non uscirebbe
   mai da "Sei ragioni". E' lo stesso scavalco gia' fatto per `--split`. */
.vc_row.tg-row--decoro,
.vc_row.tg-row--decoro[data-vc-full-width] { overflow: visible; }

/* La colonna esiste solo per far entrare il decoro dal builder: non deve
   occupare spazio ne' fare da riferimento.
   - il margine negativo annulla il `row-gap` della griglia di schede, cosi' il
     bordo alto del campo cade ESATTAMENTE sul fondo dell'ultima scheda;
   - a fare da riferimento e' il `.wpb_wrapper`, che e' largo quanto la griglia
     (la colonna e l'inner sono larghi quanto lo schermo): e' li' che `right: 0`
     vuol dire "il bordo destro dell'ultima scheda". */
.tg-col--decoro { position: static; }

/* Solo nella griglia di schede: li' fra una fila e l'altra c'e' un `row-gap`, e
   senza annullarlo il campo partirebbe 63px sotto all'angolo della scheda.
   Nelle righe a due colonne quel gap non c'e' e il margine negativo tirerebbe
   su il decoro dentro al testo. */
.tg-row--cards .tg-col--decoro { margin-top: calc(-1 * var(--tg-scarto-file)); }

.tg-col--decoro > .vc_column-inner { padding-block: 0; }

.tg-col--decoro .wpb_wrapper {
  position: relative;
  height: 0;
}

/* Le colonne vere vanno tenute sopra: e' lo stesso inciampo del velo del
   know-how - un decoro a z-index 0 sparisce sotto al fondo pieno della riga se
   non si sollevano i fratelli. */
.tg-row--decoro > .wpb_column:not(.tg-col--decoro) { position: relative; z-index: 1; }

.tg-tratteggio {
  position: absolute;
  top: 0;               /* il fondo dell'ultima scheda */
  right: 0;             /* il bordo destro dell'ultima scheda */
  width: clamp(300px, 46vw, 660px);
  color: var(--blue);
  opacity: .6;
  pointer-events: none;
  z-index: 0;
}

.tg-tratteggio svg { display: block; width: 100%; height: auto; }

/* Il gemello di sinistra: stessa logica, angolo fitto dall'altra parte e
   arancione invece che azzurro (scelta dell'utente, 16/09). Si aggancia in
   fondo alla colonna di "Certificazione ottenuta" e cola verso destra.
   L'arancione e' molto piu' carico dell'azzurro alla stessa opacita': va tenuto
   piu' basso, se no il decoro diventa il soggetto della sezione. */
.tg-tratteggio--sx {
  right: auto;
  left: 0;
  /* Il bottone "Tutte le certificazioni" e' un `inline-flex` piu' alto della
     riga di testo che lo contiene: sborda di 24px dal fondo della colonna, e
     il campo agganciato li' gli finiva sopra. Questo scarto lo scavalca. */
  top: clamp(20px, 2.4vw, 36px);
  color: var(--orange);
  opacity: .42;
}

/* ---------- la raffica ----------
   "Deve darmi quel senso di vento" (utente, 16/09). Il campo non resta fermo:
   una raffica lo attraversa in continuo, nella direzione dei trattini stessi -
   dal basso a sinistra verso l'alto a destra. Il keyframe e' uno solo per
   tutti; a sfasarli e' il ritardo, calcolato sul `--i` che il generatore ha
   scritto su ogni trattino. Quello che passa e' quindi un'ONDA, non un
   lampeggio di tutto il campo insieme.

   Il trattino fa due cose insieme, poche ma nella stessa direzione: si
   schiarisce e scivola di un paio di pixel lungo il proprio asse.

   `--tg-raff` va dichiarato con `@property`, se no il browser lo tratta come
   una stringa e fra un fotogramma e l'altro non interpola: stessa trappola
   della cornice che gira sulle card. Dove `@property` non c'e', il `calc`
   dell'opacita' non regge e vale l'attributo `opacity` scritto nell'SVG - il
   campo resta disegnato e fermo, che e' il modo giusto di rompersi. */
@property --tg-raff {
  syntax: '<number>';
  initial-value: 1;
  inherits: false;
}

.tratteggio__t {
  opacity: calc(var(--o, 1) * var(--tg-raff));
  /* Lo scivolamento e' lungo circa meta' trattino: sotto si legge come un
     tremolio, sopra il campo si sfalsa e la griglia si perde. */
  transform: translate(calc((var(--tg-raff) - 1) * 22px), calc((1 - var(--tg-raff)) * 22px));
  animation: tg-raffica 4.6s ease-in-out infinite;
  animation-delay: calc(var(--i, 0) * -0.13s);
}

@keyframes tg-raffica {
  0%, 100% { --tg-raff: .62; }
  42%      { --tg-raff: 1.35; }
}

@media (max-width: 767.98px) {
  /* Sotto i 768px la sezione e' incolonnata: il campo resta, piu' piccolo e
     piu' tenue, cosi' non finisce sotto al testo della sezione seguente. */
  .tg-tratteggio { width: 66vw; opacity: .45; }
}

@media (prefers-reduced-motion: reduce) {
  .tratteggio__t { animation: none; transform: none; opacity: var(--o, 1); }
}

/* ---------- il riquadro di chiusura si avvicina ----------
   Fra il fondo della sezione che precede e la scheda avorio passavano 294px a
   1440: i due padding pieni delle righe, uno sopra l'altro. L'utente li ha
   trovati troppi (16/09).

   Si accorciano SOLO dove la sezione sopra non ha un fondo suo. Dove sopra c'e'
   una fascia colorata - e succede in meta' delle pagine: `--dark` su
   affidabilita', chi-siamo e internazionale, `--blue` su azienda e servizi,
   `--paper2` su archivio-storico, certificazioni, qas, repowering e
   supporto-legale - quei due padding sono cio' che separa i due fondi, e
   mangiarli farebbe salire la scheda avorio dentro al colore.

   Fra una riga stirata e l'altra WPBakery infila un `.vc_row-full-width`
   vuoto: da qui la catena di fratelli a due passi. La seconda riga del
   selettore copre il caso in cui quel separatore non ci sia. */
.tg-row:not(.tg-row--dark):not(.tg-row--blue):not(.tg-row--paper2):not(.tg-row--orange):not(.tg-row--disegni) + .vc_row-full-width + .tg-row--cta,
.tg-row:not(.tg-row--dark):not(.tg-row--blue):not(.tg-row--paper2):not(.tg-row--orange):not(.tg-row--disegni) + .tg-row--cta {
  margin-top: calc(-1 * clamp(20px, 6.5vw, 94px));
}

/* ---------- una fascia di sola foto fra due sezioni ----------
   Non e' una sezione: e' un respiro. Percio' non porta padding proprio - il
   ritmo lo danno le due righe che ha intorno, con i loro. Serve dove la
   sezione che chiude la pagina non e' una griglia di schede e quindi non c'e'
   una riga a cui appendere la foto (vedi `.tg-col--fotoprocesso`). */
.tg-row--fascia {
  padding-top: 0;
  padding-bottom: 0;
}

/* Il margine NEGATIVO in fondo, quello che sulla home si riprende parte del
   fondo della riga, qui va azzerato: la fascia non ha padding da mangiare e la
   sezione seguente salirebbe SOPRA la foto, tagliandola a meta'. */
.tg-row--fascia .tg-col--fotoprocesso {
  margin-top: 0;
  margin-bottom: 0;
}

/* Il taglio 21:8 di serie guarda in basso (`center 88%`): serve alla foto
   della home, dove l'orizzonte sta sul fondo. Per le foto che hanno il
   soggetto in alto - un traliccio, una macchina, il cielo - si sposta. */
.tg-processo__foto--alto img   { object-position: center 28% !important; }
.tg-processo__foto--centro img { object-position: center 50% !important; }

/* La carta di uso del suolo sta in fila con tre disegni al tratto: senza un
   bordo si legge come un rettangolo colorato che galleggia. Con il filo e gli
   angoli tondi si legge come quello che e': una figura. */
.tg-disegno--carta img {
  border-radius: 8px;
  border: 1px solid rgba(25, 24, 23, .12);
}

/* Una seconda immagine sotto a un disegno, nella stessa colonna: le serve solo
   lo stacco, il resto lo fa gia' `.tg-img`. */
.tg-img--sotto { margin-top: clamp(20px, 2.6vw, 40px); }

/* ---------- le sezioni che restano vuote ----------
   `[tg_case_correlati]` non trova casi per quel servizio e non stampa niente:
   restava una fascia avorio alta trecento pixel, vuota (segnalata dall'utente
   il 18/09 su VPE, Archivio storico, Supporto legale e Repowering). Ora il
   modulo lascia un segnaposto e la riga che lo contiene sparisce.

   Si usa `:has()` invece di togliere la sezione dalle pagine: il giorno che un
   caso viene pubblicato la sezione torna da sola. */
.vc_row:has(> .wpb_column .tg-sezione-vuota) { display: none; }

/* ============================================================
   Fondi fotografici sulle sezioni scure (18/09)
   ============================================================
   Richiesta dell'utente su quattro sezioni: QAS "Validazione e analisi
   statistica", VPE "Asseverazione", Repowering "Il vantaggio di un sito
   storico" e Servizi "Numeri costruiti sul campo".

   Non serve un meccanismo nuovo: e' quello della fascia know-how
   (`.tg-row--bn`), che tiene la foto nello SFONDO di uno pseudo-elemento - non
   in un `img` - e la fa respirare allargandola. Li' la foto arriva da
   `--tg-bn`, quindi basta cambiare quella variabile.

   Le foto stanno nel tema e non in libreria, come `knowhow-bn.webp`: sono
   decoro, non contenuto, e l'indirizzo relativo regge un cambio di dominio.
   Tutte desaturate al 55% (la carta al 28%): sotto al testo devono restare
   sfondo. */
.tg-row--sf-validazione   { --tg-bn: url(../img/sfondo-validazione.webp); }
.tg-row--sf-asseverazione { --tg-bn: url(../img/sfondo-asseverazione.webp); }
.tg-row--sf-repowering    { --tg-bn: url(../img/sfondo-repowering.webp); }
.tg-row--sf-numeri        { --tg-bn: url(../img/sfondo-numeri.webp); }

/* La carta di uso del suolo e' un disegno, non una fotografia: piu' chiara e
   piu' contrastata delle altre, va tenuta piu' bassa. */
.tg-row--sf-asseverazione.tg-row--bn::before { opacity: .22; }

/* ---------- l'impaginazione della fascia delle cifre ----------
   Era legata al fondo azzurro (`.tg-row--blue`): cifre centrate, titolo
   stretto e centrato, respiro sotto all'intestazione. Sono scelte di
   impaginazione, non di colore, e servono anche alla versione nera di Servizi
   e a quella bianca di Archivio storico. Qui si separano dal colore. */
/* ATTENZIONE: qui c'era `.tg-row--cifre`, che pero' ESISTE GIA' piu' su -
   e' la fascia dei tre numeri sotto la foto della home, e porta
   `padding-top: 0`. Riusare quel nome ha azzerato il respiro in cima alle
   fasce nuove e il titolo finiva attaccato al bordo (segnalato il 18/09).
   Il nome ora e' diverso. */
.tg-row--cifre-fascia .woodmart-counter { text-align: center; }
.tg-row--cifre-fascia .tg-title .title { max-width: 22ch; margin-inline: auto; }
.tg-row--cifre-fascia .tg-title { margin-bottom: 0; }
.tg-row--cifre-fascia > .wpb_column.vc_col-sm-12 { margin-bottom: clamp(24px, 3vw, 44px); }

/* Sulla fascia nera di Servizi le cifre reggono un corpo piu' grande: c'e' la
   foto sotto e devono stare sopra al rumore. */
.tg-row--cifre-fascia.tg-row--dark .woodmart-counter.counter-large .counter-value,
.tg-row--cifre-fascia.tg-row--dark .tg-counter .counter-value {
  font-size: clamp(3.2rem, 5vw, 4.6rem);
}

/* "distanziala dall'immagine sopra": la fascia foto non ha scarto proprio, e
   la sezione nera le finiva addosso. */
.tg-row--fascia + .vc_row-full-width + .tg-row--cifre-fascia,
.tg-row--fascia + .tg-row--cifre-fascia { margin-top: clamp(40px, 6vw, 96px); }

/* ---------- il passaggio dall'avorio al bianco ----------
   "In generale tieni piu' sfumato il passaggio dallo sfondo avorio al bianco"
   (utente, 18/09). L'avorio non finisce piu' di netto: sfuma sugli ultimi
   settanta pixel, sopra e sotto. Il colore d'arrivo e' lo STESSO avorio con
   alfa 0 e non `transparent` generico - se no a meta' strada la sfumatura
   passa da un grigio, ed e' la trappola gia' vista sulla home l'11/09. */
/* PRIMA VERSIONE, SBAGLIATA e tenuta qui come promemoria: sfumare i due bordi
   di ogni riga avorio. Dove due zone avorio si toccavano - la testata e la
   sezione sotto, per dire - in mezzo si apriva un varco bianco, e il colore
   "ripartiva" subito dopo. La sfumatura non e' una proprieta' della riga: e'
   una proprieta' del CONFINE fra due righe di colore diverso.

   Il fondo avorio torna pieno; a sfumare sono i confini, qui sotto. */
.tg-row--paper2,
.tg-row--disegni {
  background-color: var(--paper-2);
  background-image: none;
}

/* ---------- i confini fra avorio e chiaro ----------
   Ogni confine lo tratta UNA sola delle due righe, cosi' non si sommano:

   · avorio seguito da chiaro -> l'avorio si spegne negli ultimi 220px;
   · chiaro seguito da avorio -> il chiaro diventa avorio negli ultimi 220px.

   Avorio contro NERO non si tocca: li' lo stacco netto e' voluto (vale dal
   11/09). Avorio contro avorio non si tocca: e' continuo, ed e' proprio il
   caso che la prima versione rompeva.

   Fra una riga stirata e l'altra WPBakery infila un `.vc_row-full-width`
   vuoto: da qui la catena di fratelli a due passi, piu' la variante senza. */
.tg-row--paper2:has(+ .vc_row-full-width + .tg-row:not(.tg-row--paper2):not(.tg-row--disegni):not(.tg-row--dark)),
.tg-row--disegni:has(+ .vc_row-full-width + .tg-row:not(.tg-row--paper2):not(.tg-row--disegni):not(.tg-row--dark)),
.tg-row--paper2:has(+ .tg-row:not(.tg-row--paper2):not(.tg-row--disegni):not(.tg-row--dark)),
.tg-row--disegni:has(+ .tg-row:not(.tg-row--paper2):not(.tg-row--disegni):not(.tg-row--dark)) {
  background-color: transparent;
  /* La sfumatura vale META' RIGA, non 220px: e' la misura della home
     (`.tg-row--foto` sfuma dal 52% al 100%) ed e' quella che si vede. A 220px
     su una riga alta 900 il passaggio restava un filo in fondo e l'utente non
     notava differenza (18/09). */
  background-image: linear-gradient(to bottom,
    var(--paper-2) 0,
    var(--paper-2) 50%,
    rgba(244, 240, 235, 0) 100%);
}

/* La testata di pagina e' esclusa: ha un fondo suo e una regola sua piu' sotto.
   Senza il `:not`, questa regola le azzerava il colore e la meta' alta della
   testata diventava bianca. */
.tg-row:not(.tg-row--paper2):not(.tg-row--disegni):not(.tg-row--dark):not(.tg-row--pagehero):has(+ .vc_row-full-width + :is(.tg-row--paper2, .tg-row--disegni)),
.tg-row:not(.tg-row--paper2):not(.tg-row--disegni):not(.tg-row--dark):not(.tg-row--pagehero):has(+ :is(.tg-row--paper2, .tg-row--disegni)) {
  background-image: linear-gradient(to bottom,
    rgba(244, 240, 235, 0) 50%,
    var(--paper-2) 100%);
}

/* ---------- due cifre affiancate a fianco di un testo ----------
   Repowering, "Il vantaggio di un sito storico": le due cifre erano
   incolonnate a tutta larghezza nella mezza colonna di destra e si leggevano
   come due blocchi scollegati (utente, 18/09). Ora stanno fianco a fianco,
   allineate fra loro e con il testo accanto, e il corpo cresce: sopra c'e' una
   foto e devono reggerla. */
/* Le cifre vanno centrate sull'altezza del testo accanto, non appoggiate in
   cima: la riga ha `columns_placement=middle` ma l'`align-items` che arriva e'
   `normal`, quindi la colonna corta restava in alto (utente, 18/09). */
/* La riga e' un blocco con le colonne flottate: `columns_placement=middle` non
   ha aggiunto le classi flex di WPBakery, quindi `align-self` da solo non fa
   niente. La riga che contiene le due cifre diventa flex, e li' il centraggio
   vale. */
.tg-row:has(> .tg-col--duecifre) {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.tg-col--duecifre { align-self: center; }

.tg-col--duecifre > .vc_column-inner > .wpb_wrapper {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(18px, 2.6vw, 40px);
  align-items: start;
}

.tg-col--duecifre .woodmart-counter { text-align: center; margin-bottom: 0; }

.tg-col--duecifre .woodmart-counter .counter-value {
  font-size: clamp(3rem, 4.4vw, 4.2rem);
  line-height: 1;
}

.tg-col--duecifre .woodmart-counter .counter-label {
  margin-top: 10px;
  line-height: 1.35;
}

@media (max-width: 767.98px) {
  .tg-col--duecifre > .vc_column-inner > .wpb_wrapper { grid-template-columns: 1fr; row-gap: 28px; }
}

/* ---------- titoli delle schede sullo stesso numero di righe ----------
   In una griglia di schede corte un titolo che va a capo sfalsa tutto quello
   che ha sotto (TDD, "A chi si rivolge": "Fondi infrastrutturali" su due righe
   e gli altri su una). Si riservano due righe a tutti: e' lo spazio del caso
   peggiore, e le schede tornano allineate. */
.tg-row--titoli-pari .tg-box .info-box-title,
.tg-row--titoli-pari .tg-box h3 {
  min-height: 2.5em;
}

/* Altri fondi fotografici (18/09) */
.tg-row--sf-azienda        { --tg-bn: url(../img/sfondo-azienda.webp); }
.tg-row--sf-hse            { --tg-bn: url(../img/sfondo-hse.webp); }
.tg-row--sf-internazionale { --tg-bn: url(../img/sfondo-internazionale.webp); }
.tg-row--sf-welfare        { --tg-bn: url(../img/sfondo-welfare.webp); }

/* La foto della squadra e' l'unica con delle persone riconoscibili: va tenuta
   piu' presente delle altre, che sono paesaggio. */
.tg-row--sf-welfare.tg-row--bn::before { opacity: .3; }

/* ---------- una sezione bianca che nasce dall'avorio ----------
   "Sfondo bianco a sfumare dal colore sopra avorio" (utente, 18/09). La riga
   non ha un fondo pieno: porta l'avorio in cima e lo spegne nei primi 200px.
   Il colore d'arrivo e' lo STESSO avorio con alfa 0, non `transparent`. */
/* `.tg-row--da-avorio` non serve piu': a sfumare e' la TESTATA, sulla propria
   altezza. Tenendola, l'avorio si spegneva nella testata e ripartiva qui per
   300px - di nuovo il colore che "riparte", che e' il difetto segnalato. La
   regola resta vuota per non rompere le pagine che hanno ancora la classe. */
.tg-row--da-avorio { }

/* ---------- l'ultima scheda di una fila spaiata ----------
   "Know-how e tecnologia" ha dieci schede su tre colonne: l'ultima restava da
   sola a sinistra (utente, 18/09). Centrando le righe del flex si sistema solo
   quella: le file piene occupano gia' tutta la larghezza e non si muovono. */
.tg-row--cards.tg-row--centra-coda { justify-content: center; }

/* L'anteprima del certificato: e' un documento, non una foto - si vede che e'
   un foglio, quindi bordo sottile e un filo d'ombra, e non occupa tutta la
   colonna. */
.tg-cert-anteprima {
  max-width: 300px;
  margin-block: clamp(18px, 2.4vw, 30px);
}

.tg-cert-anteprima img {
  border: 1px solid rgba(25, 24, 23, .14);
  box-shadow: 0 10px 30px rgba(25, 24, 23, .08);
}

.tg-col--loghi { margin-top: clamp(34px, 4.4vw, 64px); }

/* La "t" del marchio al posto della scritta "Italia" sulla carta (18/09).
   Stesso arancione del punto della sede: e' la stessa cosa, detta due volte. */
.tgm-marchio { fill: var(--orange, #FF8845); }

/* "Valutazione di lungo periodo" andava a capo nel suo riquadro mentre gli
   altri due stavano su una riga (utente, 18/09). Il titolo scende un filo e il
   respiro interno si stringe: a 1440 e a 1280 ci sta. Sotto va ancora a capo -
   la colonna e' troppo stretta - ma li' `--titoli-pari` tiene i tre riquadri
   allineati, cosi' il ritorno a capo si legge come una scelta. */
.tg-row--titoli-stretti .tg-box {
  padding-inline: clamp(20px, 1.9vw, 27px);
}

.tg-row--titoli-stretti .tg-box .info-box-title,
.tg-row--titoli-stretti .tg-box h3 {
  font-size: clamp(1.15rem, 1.5vw, 1.4rem);
}


/* ---------- piu' respiro dove il fondo si vede ----------
   "Molte sezioni con immagini o colore di sfondo non hanno padding e il titolo
   risulta attaccato al bordo" (utente, 18/09). Su un fondo bianco il respiro
   della riga si confonde con quello della pagina; su un fondo pieno si vede, e
   158px non bastano. */
.tg-row--dark,
.tg-row--bn,
.tg-row--paper2,
.tg-row--disegni,
.tg-row--cifre-fascia {
  padding-top: clamp(96px, 13vw, 200px);
  padding-bottom: clamp(96px, 13vw, 200px);
}

/* ---------- la foto verticale a fianco del testo ----------
   QAS, "Standard internazionali": la foto del tecnico in salita e' un ritratto
   2316x3102 e da sola faceva alta la riga, lasciando mezza colonna di bianco
   accanto al testo (utente, 18/09). Si ritaglia in verticale con un rapporto
   fisso e si guarda la parte alta, dove c'e' l'operatore. */
/* Il rapporto 3:4 non bastava: su mezza colonna larga 720 la foto veniva alta
   876px contro i 540 del testo accanto, e restava mezza colonna di bianco
   (utente, 18/09). Qui l'altezza la decide il TESTO, non la foto: si fissa in
   un intervallo vicino a quello della colonna di fianco e il ritaglio lo fa
   `object-fit`. */
.tg-img--ritratto img {
  width: 100%;
  height: clamp(340px, 36vw, 540px);
  object-fit: cover;
  object-position: center 30%;
}


/* ---------- la testata di pagina si scioglie ----------
   Come sulla home, dove l'avorio della testata si spegne sulla fascia foto:
   qui la testata di pagina fa lo stesso sulla propria altezza. Se sotto c'e'
   una riga avorio il colore d'arrivo e' quell'avorio (nessun varco bianco in
   mezzo); se sotto c'e' il bianco, si spegne del tutto. */
.tg-row--pagehero {
  background-color: transparent;
  background-image: linear-gradient(to bottom,
    var(--paper) 0,
    var(--paper) 42%,
    rgba(253, 250, 247, 0) 100%);
}

.tg-row--pagehero:has(+ .vc_row-full-width + :is(.tg-row--paper2, .tg-row--disegni)),
.tg-row--pagehero:has(+ :is(.tg-row--paper2, .tg-row--disegni)) {
  background-image: linear-gradient(to bottom,
    var(--paper) 0,
    var(--paper) 38%,
    var(--paper-2) 100%);
}

/* Una colonna che porta solo un pulsante di richiamo in fondo a una fascia.
   NON si usa `tg-col--cta`: quella e' la scheda di chiusura, e porta con se'
   fondo, bordo e angoli tondi - il pulsante finiva dentro a un riquadro. */
.tg-col--pulsante {
  margin-top: clamp(26px, 3.2vw, 46px);
  text-align: center;   /* l'allineamento del pulsante lo dava la colonna della chiusura */
}

/* I recapiti non sono un elenco puntato: sono dati. Via il segno di elenco che
   il tema mette davanti a ogni voce (uno `<span class="wd-icon">`, non un
   `::before` - da qui il tentativo a vuoto di spegnerlo con `content: none`). */
/* Il tema disegna l'icona con una regola piu' forte della nostra: serve
   scendere in specificita' come gia' per le certificazioni (nota del 21/08). */
ul.wd-list.tg-contatti .wd-icon { display: none; }
ul.wd-list.tg-contatti li { padding-left: 0; gap: 0; }

/* ============================================================
   Schermi piu' piccoli: il gradino dei 1200 (20/09)
   ============================================================
   Il sito era tarato su 1440. Sotto, la larghezza si adatta da sola (il
   container e' fluido) ma il RITMO VERTICALE no: i respiri delle righe e i
   corpi dei titoli restano quelli di 1440, e una sezione che li' stava in una
   schermata su un monitor da 1280x800 diventa una volta e mezza.

   Richiesta dell'utente: un gradino a 1200 che scali anche in altezza, con
   l'obiettivo che una fascia ci stia in una schermata - dove e' possibile: le
   griglie di schede (otto servizi, dieci voci di know-how) non ci staranno mai,
   e va bene cosi'.

   La chiave e' misurare i respiri anche in **vh**, non solo in vw: un monitor
   da 1280x800 e uno da 1280x1024 hanno la stessa larghezza e un problema
   diverso. Con `min(..., Nvh)` il respiro non supera mai una frazione
   dell'altezza dello schermo, e la stessa regola serve tutte e due.

   Sopra i 1400 non cambia niente: quel disegno e' approvato. */
@media (max-width: 1400px) {
  .tg-row { padding-block: min(clamp(72px, 9vw, 130px), 12vh); }

  .tg-row--dark,
  .tg-row--bn,
  .tg-row--paper2,
  .tg-row--disegni,
  .tg-row--cifre-fascia { padding-block: min(clamp(80px, 10vw, 150px), 14vh); }

  /* Le immagini si devono vedere INTERE in altezza, senza scorrere. */
  .tg-col--media .tg-img img,
  .tg-media .tg-img img { max-height: 62vh; object-fit: cover; }

  .tg-foto__img img { max-height: 70vh; object-fit: cover; }

  .tg-col--torre .tg-svg,
  .tg-col--media .tg-svg { max-height: 58vh; }

  .tg-img--ritratto img { height: min(clamp(320px, 34vw, 500px), 58vh); }

  /* Anche i corpi scendono, ma di poco: qui si corregge il portatile da
     1366x768, che e' la misura piu' diffusa fra quelle "piccole" e che con i
     corpi di 1440 si riempie di titolo. Il taglio vero resta a 1200. */
  .tg-headline.tg-headline--display { font-size: clamp(2.2rem, 4.6vw, 3.8rem); }
  .tg-row--hero2 .tg-headline--display { font-size: clamp(2.3rem, 5vw, 4.1rem); }
  .tg-title .title { font-size: clamp(1.9rem, 4vw, 3.2rem); }
  .tg-headline--h2 { font-size: clamp(1.9rem, 4vw, 3.2rem); }
}

@media (max-width: 1200px) {
  .tg-row { padding-block: min(clamp(56px, 7.4vw, 100px), 10vh); }

  .tg-row--dark,
  .tg-row--bn,
  .tg-row--paper2,
  .tg-row--disegni,
  .tg-row--cifre-fascia { padding-block: min(clamp(62px, 8.4vw, 116px), 12vh); }

  /* I corpi scendono insieme ai respiri: un titolo da 68px su uno schermo alto
     700 si mangia da solo un decimo di schermata. */
  .tg-headline.tg-headline--display { font-size: clamp(2.1rem, 4.4vw, 3.3rem); }
  .tg-row--hero2 .tg-headline--display { font-size: clamp(2.1rem, 4.8vw, 3.6rem); }
  .tg-title .title { font-size: clamp(1.8rem, 3.6vw, 2.7rem); }
  .tg-headline--h2 { font-size: clamp(1.8rem, 3.6vw, 2.7rem); }

  .tg-lead p,
  .tg-lead { font-size: .98rem; }
  .tg-lead { margin-bottom: 26px; }

  .tg-col--media .tg-img img,
  .tg-media .tg-img img { max-height: 52vh; }

  .tg-foto__img img { max-height: 56vh; }

  .tg-col--torre .tg-svg,
  .tg-col--media .tg-svg { max-height: 48vh; }

  /* Le schede si stringono: meno respiro interno, testo un filo piu' piccolo. */
  .tg-box { padding: clamp(20px, 2.4vw, 28px); }
  .tg-box .info-box-title,
  .tg-box h3 { font-size: clamp(1.05rem, 1.7vw, 1.3rem); }

  /* Il nastro della home e le cifre grandi scendono in proporzione. */
  .tg-row--cifre-fascia.tg-row--dark .woodmart-counter.counter-large .counter-value,
  .tg-row--cifre-fascia.tg-row--dark .tg-counter .counter-value { font-size: clamp(2.6rem, 4.4vw, 3.6rem); }
}

/* ---------- quello che dipende dall'ALTEZZA, non dalla larghezza ----------
   Un portatile da 1366x768 e un monitor da 1366x1024 hanno la stessa
   larghezza e un problema diverso. Queste regole guardano l'altezza dello
   schermo: e' li' che si decide se una fascia ci sta o no. */
@media (max-height: 860px) {
  /* La fascia foto 21:8 si mangiava mezza schermata: il taglio si abbassa. */
  .tg-processo__foto img { aspect-ratio: 21 / 6; }

  /* Fra una fila di schede e l'altra basta meno aria. */
  .tg-row--cards { --tg-scarto-file: clamp(18px, 3vw, 38px); }

  /* Il nastro della home: e' decoro, non deve prendersi un quinto di schermo. */
  .tg-row--nastro .wd-marquee-item { font-size: clamp(3rem, 9vw, 8rem); }
}

@media (max-height: 720px) {
  .tg-processo__foto img { aspect-ratio: 21 / 5; }
  .tg-col--media .tg-img img,
  .tg-media .tg-img img { max-height: 56vh; }
  .tg-foto__img img { max-height: 60vh; }
}

/* ---------- mobile: le etichette piccole ----------
   Occhielli e sottotitoli delle schede stanno a 12,8px: e' un corpo da
   etichetta, scelto per il desktop, ma su un telefono con la spaziatura larga
   delle maiuscolette si legge male. Salgono di un filo. */
@media (max-width: 767.98px) {
  .tg-kicker,
  .tg-kicker p { font-size: 13.5px; letter-spacing: .1em; }
  .tg-box .info-box-subtitle { font-size: 13.5px; }
}

/* La foto della testata della home e' un ritratto 1186x1327: a piena griglia
   viene alta 1541px, cioe' piu' di qualunque schermo - ed e' proprio quella
   che l'utente diceva di dover scorrere per vedere (20/09). Il tetto vale a
   ogni misura, non solo sotto i 1400: un'immagine non si guarda a pezzi. */
.tg-foto__img img {
  max-height: 82vh;
  /* Il taglio guarda in basso: il marchio sulla fiancata del pickup sta li', e
     centrando lo si perdeva. */
  object-position: center 62%;
}

/* ---------- si alza il contenuto sotto i titoli (21/09) ----------
   Misurato a 1440x900 su qas, affidabilita, certificazioni e vpe: fra il
   sommario della testata e il primo occhiello della pagina c'erano 282-311px
   di bianco. Sono il fondo della testata (90px) piu' il respiro PIENO della
   riga che segue (158px, 187px se colorata): due respiri interi uno sopra
   l'altro, nel punto in cui il lettore ha appena finito di leggere il titolo
   e cerca il contenuto. E' il salto piu' grande della pagina, ed e' quello che
   l'utente chiama "molta distanza fra i titoli e il contenuto".

   Si accorcia SOLO questa giunzione: il ritmo fra le sezioni interne resta
   quello approvato. La specificita' e' 0,2,0 apposta, cosi' vince sul
   `padding-block` dei gradini responsive che stanno piu' su nel file. */
/* L'ultimo blocco della testata porta anche il suo margine (34px), che e'
   spazio morto: dentro la testata non c'e' piu' niente sotto. */
.tg-row--pagehero .tg-lead:last-child,
.tg-row--pagehero .wpb_wrapper > *:last-child { margin-bottom: 0; }

.tg-row.tg-row--pagehero { padding-bottom: clamp(30px, 3.4vw, 48px); }

.tg-row--pagehero + .vc_row-full-width + .tg-row,
.tg-row--pagehero + .tg-row { padding-top: clamp(50px, 6.2vw, 88px); }

/* Le fasce colorate hanno di suo un respiro piu' largo: qui scende in
   proporzione, non allo stesso valore delle bianche. */
.tg-row--pagehero + .vc_row-full-width + .tg-row:is(.tg-row--dark, .tg-row--bn, .tg-row--paper2, .tg-row--disegni, .tg-row--cifre-fascia, .tg-row--orange, .tg-row--blue),
.tg-row--pagehero + .tg-row:is(.tg-row--dark, .tg-row--bn, .tg-row--paper2, .tg-row--disegni, .tg-row--cifre-fascia, .tg-row--orange, .tg-row--blue) {
  padding-top: clamp(58px, 7.2vw, 104px);
}

@media (max-width: 1400px) {
  .tg-row.tg-row--pagehero { padding-bottom: min(clamp(24px, 2.8vw, 40px), 4.5vh); }

  .tg-row--pagehero + .vc_row-full-width + .tg-row,
  .tg-row--pagehero + .tg-row { padding-top: min(clamp(42px, 5.2vw, 76px), 7.5vh); }

  .tg-row--pagehero + .vc_row-full-width + .tg-row:is(.tg-row--dark, .tg-row--bn, .tg-row--paper2, .tg-row--disegni, .tg-row--cifre-fascia, .tg-row--orange, .tg-row--blue),
  .tg-row--pagehero + .tg-row:is(.tg-row--dark, .tg-row--bn, .tg-row--paper2, .tg-row--disegni, .tg-row--cifre-fascia, .tg-row--orange, .tg-row--blue) {
    padding-top: min(clamp(48px, 6vw, 90px), 9vh);
  }
}

/* ---------- titolo di una griglia di schede ----------
   La colonna del titolo e' una riga a se' dentro il flex: sotto di se' ha il
   proprio margine (26px) E lo scarto fra le file di schede (fino a 64px).
   Sommati fanno 89px, il doppio dello stacco che lo stesso titolo ha nelle
   sezioni a due colonne (26-37px): il titolo resta sospeso sopra le schede.
   Si azzera il margine dell'ultimo blocco della colonna e si recupera una
   parte dello scarto, come gia' si fa per `.tg-col--decoro` qui sopra.

   Sul telefono no: li' lo scarto fra le schede e' gia' il minimo (18px) e
   togliere anche il margine del titolo lo attaccherebbe alla prima scheda. */
@media (min-width: 768px) {
  .tg-row--cards > .wpb_column.vc_col-sm-12:has(.tg-title) > .vc_column-inner > .wpb_wrapper > *:last-child {
    margin-bottom: 0;
  }

  .tg-row--cards > .wpb_column.vc_col-sm-12:has(.tg-title) {
    margin-bottom: calc(var(--tg-scarto-file) * -.38);
  }
}

/* ---------- la fascia WELFARE di Chi siamo (22/09) ----------
   "Scurisci ulteriormente la foto e magari centra meglio il testo o rivedi
   l'organizzazione della fascia" (utente).

   Due problemi distinti. Il primo e' il velo: `.tg-row--bn::after` e' un
   gradiente a 100 gradi che va da .94 a sinistra a .38 a destra, disegnato per
   le fasce in cui il testo sta tutto nella meta' sinistra. Qui il testo
   attraversa tutta la riga - due colonne di elenco - e la seconda colonna
   finiva sopra i volti del team e la targa di un'auto, a .38 di velo.

   Il secondo e' l'impaginazione: titolo e sommario in alto a sinistra, i due
   elenchi larghi da bordo a bordo. Il secondo elenco partiva a 765px dal
   margine, cioe' dopo il punto in cui finisce il titolo: tre blocchi con tre
   allineamenti diversi dentro la stessa fascia.

   Qui il blocco diventa uno solo, centrato e stretto: la fascia e' una
   dichiarazione sulle persone, non una tabella. */
/* 22/09, secondo giro: con .95/.90/.82 la squadra non si vedeva piu' - "ora e'
   troppo scura". Il velo si alza sulla sinistra (dove sta il titolo grande, che
   e' il testo piu' delicato) e si alleggerisce verso destra, dove le voci
   dell'elenco sono corte e su fondo gia' mosso. */
.tg-row--sf-welfare::after {
  background: linear-gradient(100deg,
    rgba(25, 24, 23, .90) 0%,
    rgba(25, 24, 23, .82) 45%,
    rgba(25, 24, 23, .72) 100%);
}

/* La foto resta leggibile come contesto, ma sotto al testo: era .34, poi .24. */
.tg-row--sf-welfare::before { opacity: .32; }

/* Le colonne di WPBakery sono float: con flex si riallineano e `center` fa il
   resto. Il `float: none` va dichiarato, se no il flex non le prende. */
.tg-row--sf-welfare {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.tg-row--sf-welfare > .wpb_column { float: none; }

.tg-row--sf-welfare .tg-kicker { justify-content: center; }

/* L'h2 del modulo Woodmart e' un `inline-block`: `margin-inline: auto` non lo
   centra e il `max-width` glielo sovrascrive qualcun altro. Si centra il
   contenitore - che porta un `.text-left` dal parametro `align` dello
   shortcode - e l'inline-block segue. */
.tg-row--sf-welfare .tg-title { text-align: center; }

.tg-row--sf-welfare .tg-lead p {
  text-align: center;
  max-width: 66ch;
  margin-inline: auto;
}

/* I due elenchi stanno vicini al centro, non ai due bordi: larghi al massimo
   440px ciascuno, quindi 880px in coppia contro i 1320px di prima. Le voci
   restano allineate a sinistra - un elenco puntato centrato non si legge. */
.tg-row--sf-welfare > .wpb_column.vc_col-sm-6 {
  flex: 0 0 auto;
  width: min(50%, 500px);
}

/* Fra il sommario e gli elenchi ci vuole uno stacco vero: sono due cose
   diverse, e centrate una sotto l'altra si impastano. */
.tg-row--sf-welfare .tg-lead { margin-bottom: clamp(34px, 4vw, 56px); }

/* Centrando, i due elenchi si accorciano e vanno a capo: la fascia era
   cresciuta da 855 a 1036px, cioe' non ci stava piu' in una schermata da 900.
   Il respiro di questa fascia scende (le altre scure restano a 13vw) e torna
   sotto i 900. */
.tg-row--sf-welfare {
  padding-top: clamp(80px, 9vw, 140px);
  padding-bottom: clamp(80px, 9vw, 140px);
}

@media (max-width: 767.98px) {
  .tg-row--sf-welfare > .wpb_column.vc_col-sm-6 { width: 100%; }
  .tg-row--sf-welfare .tg-lead { margin-bottom: 28px; }
}

/* ---------- rete di sicurezza per gli a capo dei titoli (22/09) ----------
   Il campo Title del modulo Woodmart mangia i `<br>`: chi apre la riga nel
   builder e risalva se li porta via, e al loro posto nel `post_content`
   restano a capo veri dentro l'attributo `title="..."`, che l'HTML collassa in
   uno spazio. E' successo quattro volte in due giorni - Affidabilita, Azienda,
   Repowering e Contatti - e succedera' ancora, perche' il pannello e' la fonte
   di verita' e quelle righe si aprono.

   Con `pre-line` l'a capo vero torna a essere un'interruzione: i `<br>` messi
   a mano continuano a funzionare, e quando il builder li mangia il titolo
   resta impaginato lo stesso.

   Condizione: nessun titolo deve avere `<br>` **e** un a capo subito dopo, se
   no le interruzioni diventano due. Il 22/09 l'unico era Chi siamo
   (`<br />\n`), normalizzato. Vale la pena ricontrollarlo con:
     grep -o 'title="[^"]*"' out/*.txt | grep -c '<br[^>]*>[[:space:]]*$' */
.tg-title .title { white-space: pre-line; }

/* ---------- il case study respira meno (22/09) ----------
   "C'è molta distanza tra il COSA ABBIAMO FATTO, IL RISULTATO ecc., abbassa le
   distanze tra le fasce" (utente).

   Il case study e' una pagina corta: cinque fasce, ognuna con tre o quattro
   righe di testo. Con il ritmo delle pagine di servizio - 158px per riga, 187
   se colorata - fra la fine di un elenco e l'occhiello successivo ci sono
   345px di vuoto, cioe' piu' dell'altezza del contenuto che separano. Su una
   pagina lunga quel respiro regge il passo; qui fa sembrare la storia
   interrotta.

   Vale SOLO sul singolo case study (`body.single-tg_case`): il resto del sito
   tiene il suo ritmo, che e' approvato. La specificita' 0,3,0 sulle fasce
   colorate serve a non farle schiacciare dalla regola generica 0,2,0 qui
   sopra. I tetti in `vh` ci sono gia' qui perche' queste misure non sono mai
   passate dai gradini responsive piu' su nel file. */
.single-tg_case .tg-row { padding-block: min(clamp(52px, 6.6vw, 96px), 11vh); }

.single-tg_case .tg-row.tg-row--dark,
.single-tg_case .tg-row.tg-row--bn,
.single-tg_case .tg-row.tg-row--paper2,
.single-tg_case .tg-row.tg-row--disegni {
  padding-block: min(clamp(62px, 7.8vw, 114px), 13vh);
}