/* ==========================================================================
   SUNPRIME — Componenti condivisi: header, footer, card, stat, mappa hub
   ========================================================================== */

/* L'ingombro dell'header, che e' fisso: serve a ogni sezione che apre una
   pagina, altrimenti le briciole ci finiscono sotto. E' il padding superiore
   della barra piu' l'altezza della pillola. */
:root { --ingombro-header: calc(clamp(16px, 3vw, 58px) + 58px); }

/* ---------- Testata di pagina ----------
   La lastra navy che apre le pagine senza fotografia: BESS, Comunita'
   Energetiche, l'archivio news e ogni articolo. Non e' un hero — non ha
   immagine e non pretende l'altezza dello schermo — ma deve lasciare passare
   l'header fisso sopra di se'. */
/* Doppia classe: .section-dark porta il proprio padding ed e' dichiarata piu'
   avanti nel foglio, quindi a parita' di specificita' vincerebbe lei. */
/* Le testate senza fotografia usano la stessa scala dell'apertura fotografica:
   e' la stessa sezione, cambia solo se c'e' l'immagine. */
.page-testata .h1,
.archivio-testa .h1,
.articolo-testa .h1 {
  font-size: var(--fs-44);
  line-height: 1.2;
  letter-spacing: -0.01em;
  font-weight: 500;
}
.page-testata .lead,
.archivio-testa .lead,
.articolo-testa .lead { font-size: var(--fs-28); line-height: 1.5; letter-spacing: -0.01em; max-width: 56ch; }

.section-dark.page-testata,
.section-dark.archivio-testa,
.section-dark.articolo-testa {
  padding-top: calc(var(--ingombro-header) + var(--space-2xl));
  padding-bottom: var(--space-3xl);
}
.page-testata .crumbs,
.archivio-testa .crumbs,
.articolo-testa .crumbs { margin-bottom: var(--space-lg); }

/* ---------- Header ---------- */
/* Figma nodo 2632:1417 — la barra NON è a piena larghezza: è larga 1191px
   (pill 985 + gap 12 + CTA 194) e centrata, a 58px dal bordo superiore. */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  padding: clamp(16px, 3vw, 58px) 0 0;
  /* Feedback cliente: il menu persistente copriva il contenuto. Ora scorrendo
     verso il basso si ritrae e riappare appena si torna indietro. */
  transition: transform .38s var(--ease), padding .38s var(--ease), color .3s var(--ease);
  /* Il colore di logo, voci e icona segue il fondo della sezione che scorre
     sotto l'header: le classi is-dark / is-light le assegna js/main.js
     leggendo il data-nav-theme della sezione in quel momento. */
  --nav-fg: var(--c-white);
  --nav-fg-soft: rgba(255, 255, 255, 0.6);
}
/* Scorrendo verso il basso l'header esce dalla pagina (mai con il menu aperto) */
.site-header.is-hidden { transform: translateY(calc(-100% - 12px)); }
/* .mobile-nav è figlio dell'header: un transform (o un will-change: transform)
   sull'header lo rende il containing block dei discendenti position:fixed e il
   pannello finirebbe per coprire solo l'header invece del viewport. Con il menu
   aperto l'header resta quindi assolutamente fermo, senza transform in corso. */
.nav-open .site-header {
  transform: none;
  transition: none;
  will-change: auto;
}
/* Staccati dalla cima si stringe il margine superiore: meno ingombro */
.site-header.is-scrolled { padding-top: clamp(12px, 1.4vw, 20px); }
.site-header .wrap {
  display: flex;
  align-items: center;
  gap: 12px;
  /* Era min(1191px, ...), la misura del Figma con la CTA da 194px. Con
     "Valorizza la tua superficie" la pillola della CTA arriva a ~276px: dentro
     1191px la nav si comprimeva al punto che "Chi siamo" andava a capo su due
     righe. La barra cresce di quanto e' cresciuta la CTA, le proporzioni fra
     nav e CTA restano quelle disegnate. */
  max-width: min(1290px, calc(100% - 48px));
  padding-inline: 0;
}
.site-header.is-dark {
  --nav-fg: var(--c-white);
  --nav-fg-soft: rgba(255, 255, 255, 0.6);
  color: var(--nav-fg);
}
.site-header.is-light {
  --nav-fg: var(--c-navy);
  --nav-fg-soft: rgba(0, 13, 51, 0.62);
  color: var(--nav-fg);
}

/* Header Figma (nodo 2632:1190): pill in vetro smerigliato — 985×64, radius 20px,
   nessuno stroke, backdrop-blur 5.5px, padding 16px 60px 16px 48px */
.nav-pill {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* Con sette elementi in distribuzione il gap agisce da distanza minima:
     il passo vero lo calcola space-between. Tenerlo a 20px fa si' che alle
     larghezze intermedie le voci non si stringano piu' di prima. */
  gap: 20px;
  min-height: 64px;
  max-width: 985px;
  padding: 16px 60px 16px 48px;
  border-radius: 20px;
  border: none;
  background:
    linear-gradient(90deg, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0.15) 100%),
    linear-gradient(90deg, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0.10) 100%);
  -webkit-backdrop-filter: blur(5.5px);
  backdrop-filter: blur(5.5px);
  color: inherit;
}
/* Su sezione chiara il vetro scuro diventerebbe una macchia grigia: si inverte
   in vetro chiaro, così le voci navy restano leggibili. */
.site-header.is-light .nav-pill,
.site-header.is-light .header-cta-pill {
  background:
    linear-gradient(90deg, rgba(255,255,255,0.72) 0%, rgba(255,255,255,0.72) 100%),
    linear-gradient(90deg, rgba(0,13,51,0.04) 0%, rgba(0,13,51,0.04) 100%);
  border: 1px solid rgba(0, 13, 51, 0.10);
}
.site-header.is-light .header-cta-pill { text-shadow: none; }
/* Figma: l'header resta sempre identico allo scorrimento — nessun cambio di
   colore, posizione o dimensione. */

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 19px;
  letter-spacing: -0.01em;
}
/* Logo reale Figma (SVG inline, eredita currentColor: bianco su header scuro/footer, navy su header con scroll) */
.brand-logo {
  height: 32px;   /* Figma nodo 2632:1191 — 138×32 */
  width: auto;
  display: block;
  color: inherit;
}
.footer-logo .brand-logo { height: clamp(40px, 4.27vw, 82px); }   /* Figma nodo 2642:964 — 344×82 */

 /* Feedback cliente: lo spazio fra il logo e "Chi siamo" era piu' stretto
   degli altri. Il motivo e' strutturale: con <nav> e <ul> come scatole, quella
   distanza la decide il gap della pillola (32px) mentre le altre le calcola lo
   space-between dentro la lista (49px). Appiattendo i due contenitori con
   display: contents le sei voci diventano fratelli del logo e il browser
   distribuisce sette elementi con un unico passo, che resta giusto anche se
   domani una voce cambia nome o se ne aggiunge una.
   Sotto i 900px il menu torna nascosto: il display:none piu' avanti nel
   foglio vince perche' arriva dopo, a parita' di specificita'. */
.main-nav,
.main-nav ul { display: contents; }
/* Revisione 21/09: il logo deve leggersi come tasto home, non come la prima di
   sette voci. Lo stacco non si ottiene allargando il gap della pillola — quello
   e' la distanza minima fra tutti e sette gli elementi, e allargarlo li
   allontanerebbe tutti allo stesso modo, che e' esattamente cio' che qui non
   serve. Serve invece togliere spazio distribuibile subito dopo il logo: con
   space-between il margine si somma al passo calcolato solo in quel punto, e le
   sei voci restano equidistanti fra loro come prima.
   Il valore scala con la larghezza: a 1200px lo spazio libero e' poco e un
   margine fisso mangerebbe le voci. */
.nav-pill > .brand { margin-inline-end: clamp(8px, 2.1vw, 38px); }
/* list-style-type si eredita, quindi il reset serve anche se la lista non
   genera piu' una scatola propria. */
.main-nav ul { list-style: none; margin: 0; padding: 0; }
/* Voci nav Figma: 14px SemiBold, tracking 0.7px, line-height 1.5, uppercase, bianco 60% */
.main-nav a.nav-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.7px;
  text-transform: uppercase;
  /* "Chi siamo" e "Sostenibilita'" sono due parole: senza questo, appena lo
     spazio si stringe il browser le manda a capo e la pillola cresce in
     altezza invece di comprimersi in larghezza. */
  white-space: nowrap;
  color: var(--nav-fg-soft);
  transition: color .18s var(--ease);
}
.main-nav a.nav-link:hover,
.main-nav .dropdown:hover a.nav-link { color: var(--nav-fg); }
.main-nav .caret { width: 8px; height: 8px; transition: transform .18s var(--ease); }
.has-dropdown:hover .caret,
.has-dropdown:focus-within .caret { transform: rotate(180deg); }

.dropdown {
  position: relative;
}
/* Dropdown Soluzioni in vetro smerigliato, coerente con la nav-pill (Figma desktop) */
/* Feedback cliente: il pannello era poco contrastato sui contenuti sottostanti
   e si sovrapponeva alla pill dell'header. Ora è navy pieno, con bordo e ombra,
   e si apre SOTTO la pill (l'offset copre il mezzo-padding della pill). */
.dropdown-panel {
  position: absolute;
  top: calc(100% + 32px);
  left: 50%;
  transform: translateX(-50%) translateY(-10px);
  min-width: 300px;
  background: rgba(0, 13, 51, 0.97);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  backdrop-filter: blur(18px) saturate(140%);
  color: var(--c-white);
  /* Figma nodo 2632:1184 — radius 12, padding 24px/28px, gap 32px fra le voci */
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  padding: 24px 28px;
  /* Il testo delle voci e' centrato: il pannello e' centrato sulla voce di
     menu e le sue righe hanno lunghezze molto diverse, quindi allineate a
     sinistra darebbero un bordo destro frastagliato sotto una colonna
     simmetrica. */
  text-align: center;
  opacity: 0;
  visibility: hidden;
  /* Il pannello si srotola dall'alto verso il basso. Il taglio e' un
     clip-path invece di un'altezza o di uno scaleY: l'altezza andrebbe
     conosciuta in anticipo e lo scaleY schiaccerebbe il testo mentre scende.
     Lo spazio negativo in alto e in basso serve a non tagliare via il ponte
     invisibile sopra il pannello e l'ombra sotto. */
  clip-path: inset(0 0 100% 0);
  transition: opacity .26s var(--ease), transform .38s var(--ease),
              clip-path .38s var(--ease), visibility .38s;
  box-shadow: 0 24px 60px rgba(0, 6, 26, 0.55);
}
/* Ponte invisibile fra voce e pannello: attraversando lo spazio l'hover non cade */
.dropdown-panel::before {
  content: "";
  position: absolute;
  left: 0; right: 0;
  top: -34px;
  height: 34px;
}
.dropdown:hover .dropdown-panel,
.dropdown:focus-within .dropdown-panel {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
  clip-path: inset(-40px 0 -70px 0);
}
.dropdown-panel a {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 6px 0;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.7px;
  text-transform: uppercase;
  align-items: center;
  color: rgba(255, 255, 255, 0.88);
  /* Le voci scendono dietro al taglio, una dopo l'altra: il ritardo si
     applica solo in apertura, cosi' alla chiusura rientrano tutte insieme
     e il pannello non lascia code. */
  opacity: 0;
  translate: 0 -12px;
  transition: color .18s var(--ease), opacity .3s var(--ease), translate .34s var(--ease);
}
.dropdown:hover .dropdown-panel a,
.dropdown:focus-within .dropdown-panel a { opacity: 1; translate: 0 0; }
.dropdown:hover .dropdown-panel a:nth-child(1),
.dropdown:focus-within .dropdown-panel a:nth-child(1) { transition-delay: .06s; }
.dropdown:hover .dropdown-panel a:nth-child(2),
.dropdown:focus-within .dropdown-panel a:nth-child(2) { transition-delay: .10s; }
.dropdown:hover .dropdown-panel a:nth-child(3),
.dropdown:focus-within .dropdown-panel a:nth-child(3) { transition-delay: .14s; }
.dropdown:hover .dropdown-panel a:nth-child(4),
.dropdown:focus-within .dropdown-panel a:nth-child(4) { transition-delay: .18s; }
.dropdown:hover .dropdown-panel a:nth-child(5),
.dropdown:focus-within .dropdown-panel a:nth-child(5) { transition-delay: .22s; }
@media (prefers-reduced-motion: reduce) {
  .dropdown-panel { clip-path: none; transition: opacity .01ms, visibility .01ms; }
  .dropdown-panel a { opacity: 1; translate: none; transition: color .18s var(--ease); }
}
.dropdown-panel a + a { margin-top: 20px; }
.dropdown-panel a small { font-weight: 400; font-size: 12px; color: rgba(255, 255, 255, 0.66); text-transform: none; letter-spacing: 0; }
.dropdown-panel a:hover { color: var(--c-white); }

.header-actions { display: flex; align-items: center; gap: 12px; flex: none; }
/* CTA come pill frosted gemella della nav (Figma: stesso vetro + leggero glow lime dietro) */
/* Figma nodo 2632:1363 — 194×64, radius 20, glow lime "Lights" dietro al vetro */
.header-cta-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* Era 194px fissi, la misura del Figma per "Configura ora". Dal 21/09 la CTA
     dice "Valorizza la tua superficie": il testo e' nowrap e decide lui la
     larghezza, il minimo serve solo a non far collassare la pillola. */
  min-width: 194px;
  min-height: 64px;
  padding: 16px 26px;
  border-radius: 20px;
  border: none;
  background:
    radial-gradient(130% 170% at 50% 135%, rgba(246, 255, 151, 0.30), transparent 55%),
    linear-gradient(90deg, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0.15) 100%),
    linear-gradient(90deg, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0.10) 100%);
  -webkit-backdrop-filter: blur(5.5px);
  backdrop-filter: blur(5.5px);
  color: var(--nav-fg-soft);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.7px;
  text-transform: uppercase;
  text-shadow: 0 11px 23px rgba(255, 255, 255, 0.13);
  white-space: nowrap;
  transition: color .2s var(--ease), border-color .2s var(--ease);
}
.header-cta-pill:hover { color: var(--nav-fg); }

/* La CTA sta accanto a sei voci di menu tutte uguali e tutte ferme: per
   distinguersi non le serve un colore piu' forte, che romperebbe il vetro
   dell'header, ma un movimento che le altre non hanno. Un sole basso
   attraversa la pillola da sinistra a destra in cinque secondi e mezzo, poi
   la pillola resta ferma per due: e' un respiro, non un lampeggio.
   Il verso e' quello del sole visto da terra: sorge a est, alla nostra
   sinistra, e tramonta a ovest, alla nostra destra.
   Il bagliore e' sopra il vetro e sotto il testo (z-index negativo dentro il
   contesto di impilamento creato dal backdrop-filter) e viene ritagliato dagli
   angoli della pillola. */
.header-cta-pill { position: relative; overflow: hidden; }
.header-cta-pill::before {
  content: "";
  position: absolute;
  z-index: -1;
  /* Il centro del sole cade sopra il bordo superiore: dentro la pillola
     arriva solo la parte bassa del bagliore, cosi' il nucleo non passa mai
     sotto il testo e l'etichetta resta leggibile per tutta la traversata. */
  top: -178%;
  left: 0;
  width: 54%;
  height: 300%;
  background: radial-gradient(closest-side,
    rgba(246, 255, 151, 0.72),
    rgba(246, 255, 151, 0.26) 54%,
    rgba(246, 255, 151, 0) 78%);
  filter: blur(6px);
  pointer-events: none;
  animation: cta-sole 7.5s cubic-bezier(.45, 0, .55, 1) infinite;
}
/* Su fondo chiaro il vetro e' quasi bianco: lo stesso bagliore vi si stampa
   sopra come una macchia invece di leggersi come luce. Qui va tenuto molto
   piu' debole e molto piu' sfocato, fino a diventare un riflesso. */
.site-header.is-light .header-cta-pill::before { opacity: .40; filter: blur(15px); }
/* 0 -> 73% e' la traversata (5,5s su 7,5s); il resto e' la pausa fuori campo. */
@keyframes cta-sole {
  0%   { transform: translateX(-115%); opacity: 0; }
  12%  { opacity: 1; }
  62%  { opacity: 1; }
  73%  { transform: translateX(205%); opacity: 0; }
  100% { transform: translateX(205%); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .header-cta-pill::before { animation: none; opacity: 0; }
}

.nav-toggle {
  display: none;
  width: 44px; height: 44px;
  border-radius: 12px;
  border: 1px solid currentColor;
  background: transparent;
  color: inherit;
  align-items: center;
  justify-content: center;
}
.nav-toggle .bars { position: relative; width: 18px; height: 12px; }
.nav-toggle .bars span {
  position: absolute; left: 0; width: 100%; height: 2px; background: currentColor;
  transition: transform .22s var(--ease), opacity .22s var(--ease), top .22s var(--ease);
}
.nav-toggle .bars span:nth-child(1) { top: 0; }
.nav-toggle .bars span:nth-child(2) { top: 5px; }
.nav-toggle .bars span:nth-child(3) { top: 10px; }
.nav-open .nav-toggle .bars span:nth-child(1) { top: 5px; transform: rotate(45deg); }
.nav-open .nav-toggle .bars span:nth-child(2) { opacity: 0; }
.nav-open .nav-toggle .bars span:nth-child(3) { top: 5px; transform: rotate(-45deg); }

/* ---------- Mobile nav ---------- */
/* Glassmorphism anche su mobile: navy semitrasparente + blur (coerente con il Figma).
   Funziona correttamente perché con il menu aperto la pagina sottostante è bloccata. */
.mobile-nav {
  position: fixed;
  inset: 0;
  background: rgba(0, 13, 51, 0.82);
  -webkit-backdrop-filter: blur(22px) saturate(140%);
  backdrop-filter: blur(22px) saturate(140%);
  color: var(--c-white);
  z-index: 90;
  padding: 100px var(--pad-mobile) 40px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow-y: auto;
  overscroll-behavior: contain;
  transform: translateY(-100%);
  opacity: 0;
  visibility: hidden;
  transition: transform .32s var(--ease), opacity .32s var(--ease), visibility .32s;
}
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .mobile-nav { background: var(--c-navy); }
}
.nav-open .mobile-nav { transform: translateY(0); opacity: 1; visibility: visible; }

/* Body lock: con il menu aperto la pagina sotto non deve scorrere.
   L'uscita avviene solo dalla "X" (o navigando su una voce). */
body.nav-open {
  position: fixed;
  left: 0; right: 0;
  width: 100%;
  overflow: hidden;
  overscroll-behavior: none;
}

/* Pulsante X di chiusura, in alto a destra dentro il menu */
.mobile-nav-close {
  position: absolute;
  top: 20px; right: var(--pad-mobile);
  width: 44px; height: 44px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.4);
  background: transparent;
  color: var(--c-white);
  display: none;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.nav-open .mobile-nav-close { display: inline-flex; }

@media (max-width: 900px) {
  .main-nav { display: none; }
  .site-header .brand { padding-block: 8px; }
  .header-cta-pill.desktop-only { display: none; }
  .nav-toggle { display: inline-flex; }
  /* Su mobile il logo resta pulito, senza pill in vetro */
  .nav-pill {
    flex: 1;
    padding: 0;
    border: 0;
    background: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    transition: background-color .3s var(--ease), padding .3s var(--ease);
  }
  /* Feedback cliente: scorrendo, logo e icona si mimetizzavano. Il contrasto
     ora lo dà il colore, non un riquadro: bianchi sulle sezioni scure, navy su
     quelle chiare (vedi --nav-fg). Resta solo un'ombra impercettibile, che
     serve nei punti in cui l'header passa sopra una foto anziché su un fondo
     pieno (l'hero, il pentagono delle milestone). */
  .site-header .wrap { align-items: center; }
  .site-header .brand-logo,
  .site-header .nav-toggle {
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.30));
    transition: filter .3s var(--ease);
  }
  .site-header.is-light .brand-logo,
  .site-header.is-light .nav-toggle {
    filter: drop-shadow(0 1px 2px rgba(255, 255, 255, 0.55));
  }
  /* Il colore da solo non basta dove l'header passa sopra una foto chiara
     dentro una sezione scura (il pentagono delle milestone, l'hero). Invece
     del riquadro di prima, una velatura sfumata a tutta larghezza: non si
     legge come un elemento, ma garantisce lo stacco. Assente in cima, così
     sull'hero l'header resta pulito come nel Figma. */
  .site-header::before {
    content: "";
    position: absolute;
    left: 0; right: 0; top: 0;
    height: calc(100% + 42px);
    z-index: -1;
    pointer-events: none;
    opacity: 0;
    transition: opacity .3s var(--ease);
    background: linear-gradient(180deg,
      rgba(0, 13, 51, 0.88) 0%,
      rgba(0, 13, 51, 0.74) 45%,
      rgba(0, 13, 51, 0.30) 78%,
      rgba(0, 13, 51, 0) 100%);
  }
  .site-header.is-light::before {
    background: linear-gradient(180deg,
      rgba(255, 255, 255, 0.94) 0%,
      rgba(255, 255, 255, 0.82) 45%,
      rgba(255, 255, 255, 0.38) 78%,
      rgba(255, 255, 255, 0) 100%);
  }
  .site-header.is-scrolled::before { opacity: 1; }


  .mobile-nav > ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
  .mobile-nav > ul > li { border-bottom: 1px solid var(--c-line-on-dark); }
  .mobile-nav a, .mobile-nav .mnav-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 4px;
    font-family: var(--font-display);
    font-size: 22px;
    font-weight: 500;
    width: 100%;
    background: none;
    border: none;
    color: inherit;
    text-align: left;
  }
  .mnav-submenu {
    list-style: none;
    margin: 0 0 12px;
    padding: 0 0 0 12px;
    display: none;
  }
  .mnav-open .mnav-submenu { display: flex; flex-direction: column; }
  .mnav-submenu a { font-size: 16px; font-weight: 400; padding: 12px 4px; color: rgba(255,255,255,0.78); }
  .mnav-toggle .caret { transition: transform .2s var(--ease); width: 12px; height: 12px; }
  .mnav-open .mnav-toggle .caret { transform: rotate(180deg); }

  .mobile-nav-footer { display: flex; flex-direction: column; gap: 18px; padding-top: 24px; }
  /* Ripristina lo stile bottone lime (batte la regola generica .mobile-nav a) */
  .mobile-nav-footer a.btn {
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 16px 28px;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    text-align: center;
    border-radius: 12px;
    background: var(--c-lime);
    color: var(--c-navy);
  }
  /* Social come nel footer: cerchi bianchi con icona navy */
  .mobile-nav-footer .footer-socials { display: flex; gap: 14px; }
  .mobile-nav-footer .footer-socials a {
    width: 44px; height: 44px;
    border-radius: 50%;
    background: var(--c-white);
    border: none;
    color: var(--c-navy);
    display: flex; align-items: center; justify-content: center;
    padding: 0;
  }
}

/* ---------- Footer ---------- */
.site-footer {
  background: var(--c-navy);
  color: var(--c-white);
  padding: var(--section-gap) 0 32px;
}
@media (max-width: 900px) { .site-footer { padding: var(--section-gap-mobile) 0 28px; } }

.footer-top {
  display: grid;
  grid-template-columns: 1.4fr repeat(3, 1fr) 1.2fr;
  gap: 40px;
  padding-bottom: 64px;
  border-bottom: 1px solid var(--c-line-on-dark);
}
@media (max-width: 1100px) {
  .footer-top { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .footer-top { grid-template-columns: 1fr; gap: 32px; padding-bottom: 40px; }
}

.footer-brand p { margin-top: 14px; color: rgba(255,255,255,0.64); font-size: 14px; max-width: 30ch; }
.footer-col h4 { font-size: 13px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--c-lime); margin-bottom: 16px; }
.footer-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.footer-col a { font-size: 14px; color: rgba(255,255,255,0.8); }
.footer-col a:hover { color: var(--c-white); }

.newsletter-form { display: flex; margin-top: 14px; border: 1px solid var(--c-line-on-dark); border-radius: var(--radius-input); overflow: hidden; }
.newsletter-form input { flex: 1; background: transparent; border: none; color: var(--c-white); padding: 12px 14px; font-size: 14px; }
.newsletter-form input::placeholder { color: rgba(255,255,255,0.5); }
.newsletter-form button { background: var(--c-lime); color: var(--c-navy); border: none; padding: 0 18px; font-weight: 700; font-size: 13px; text-transform: uppercase; }

.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-top: 28px;
  font-size: 13px;
  color: rgba(255,255,255,0.56);
}
@media (max-width: 640px) { .footer-bottom { flex-direction: column; align-items: flex-start; } }
.footer-legal { display: flex; gap: 20px; flex-wrap: wrap; }
.footer-legal a { color: rgba(255,255,255,0.56); }
.footer-legal a:hover { color: var(--c-white); }
.footer-socials { display: flex; gap: 14px; }
.footer-socials a {
  width: 34px; height: 34px;
  border: 1px solid var(--c-line-on-dark);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}
.footer-socials a:hover { border-color: var(--c-lime); color: var(--c-lime); }

/* Footer card (Figma): icone social con sfondo BIANCO, icona navy */
.footer-card .footer-socials { gap: clamp(12px, 1.67vw, 32px); }   /* Figma: 3×48px in 208px */
.footer-card .footer-socials a {
  width: clamp(44px, 2.5vw, 48px);
  height: clamp(44px, 2.5vw, 48px);
  background: var(--c-white);
  border-color: var(--c-white);
  color: var(--c-navy);
}
.footer-card .footer-socials a:hover { background: #e9ecf5; border-color: #e9ecf5; color: var(--c-navy); }

/* .num e .label sono due <span>: senza un display dichiarato scorrono sulla
   stessa riga e l'etichetta si incastra dentro la cifra. Finora funzionava
   solo perche' ogni pagina che la usava ridichiarava il display per conto suo. */
.stat-callout { display: grid; justify-items: start; align-content: start; }
/* Peso regular, non bold: e' quello del Figma, ed e' quello che la home usava
   ridichiarandolo per conto suo. Con il grassetto altrove i numeri delle altre
   pagine sembravano di un altro carattere. Una cifra sola per tutto il sito. */
.stat-callout .num {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(32px, 3.6vw, 58px);
  color: var(--c-blue);
  line-height: 1.05;
  letter-spacing: -0.01em;
}
.stat-callout.on-dark .num { color: var(--c-white); }
/* Figma: etichette dei numeri in maiuscolo spaziato, ~26px sul canvas 1920 */
.stat-callout .label {
  margin-top: clamp(8px, 0.85vw, 16px);
  font-size: clamp(13px, 1.04vw, 18px);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--c-ink-soft);
}
.stat-callout.on-dark .label { color: var(--c-white); }

.step-numbered .n {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 40px;
  color: var(--c-lime);
  -webkit-text-stroke: 1px var(--c-navy);
}

.project-card {
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.project-card .thumb { aspect-ratio: 4/3; overflow: hidden; }
.project-card .thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.project-card:hover .thumb img { transform: scale(1.05); }
.project-card .body { padding: 20px 22px 24px; display: flex; flex-direction: column; gap: 10px; }
.project-card .meta { display: flex; gap: 18px; font-size: 13px; color: var(--c-ink-soft); flex-wrap: wrap; }

.news-card { display: flex; flex-direction: column; gap: 14px; }
.news .news-card > :not(.thumb) + :not(.thumb) { margin-top: calc(clamp(4px, 0.42vw, 8px) - clamp(12px, 1.04vw, 20px)); }
.news-card .thumb { aspect-ratio: 16/10; overflow: hidden; }
.news-card .thumb img { width: 100%; height: 100%; object-fit: cover; }
.news-card .cat { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--c-blue); }
.news-card h3 { font-size: 18px; margin-top: 4px; }
.news-card .date { font-size: 13px; color: var(--c-ink-soft); }
.news-card .read { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--c-navy); display: inline-flex; align-items: center; gap: 6px; }

/* ---------- Soluzioni: tab numerate (01-05) ---------- */
.solution-tabs { margin-top: 40px; }
.solution-item { border-top: 1px solid var(--c-sep); }
.tab-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 20px 4px;
  background: none;
  border: none;
  color: var(--c-white);
  text-align: left;
  font-family: var(--font-display);
  cursor: pointer;
  transition: color .25s var(--ease);
}
.tab-trigger .n { font-size: 15px; font-variant-numeric: tabular-nums; }
.tab-trigger .label { font-size: 17px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; }
.tab-trigger.is-active { color: var(--c-white); }
/* Figma: all'apertura il contenuto entra orizzontalmente da destra verso sinistra.
   Passando da display:none a flex l'animazione riparte a ogni cambio di tab. */
@keyframes solEnter {
  from { opacity: 0; transform: translateX(80px); }
  to   { opacity: 1; transform: none; }
}
.tab-panel.is-active > * { animation: solEnter .55s var(--ease) both; }
.tab-panel.is-active > *:nth-child(2) { animation-delay: .07s; }
.tab-panel.is-active > *:nth-child(3) { animation-delay: .14s; }
/* Mentre la sfogliata d'ingresso scorre le cinque schede, il contenuto non
   entra da destra a ogni passo: sarebbero cinque raffiche di testo e immagini
   in due secondi, ed e' quello che rendeva l'effetto illeggibile. Durante la
   sequenza si muovono solo le colonne; il contenuto entra una volta sola,
   alla fine, sulla scheda su cui la sfogliata si ferma. */
.solution-tabs.sta-sfogliando .tab-panel.is-active > * { animation: none; }
@media (prefers-reduced-motion: reduce) {
  .tab-panel.is-active > * { animation: none; }
}

/* clip necessario: senza, il translateX iniziale dell'animazione allarga la pagina */
.tab-panel { display: none; padding: 8px 4px 32px; overflow-x: hidden; }
.tab-panel.is-active { display: grid; grid-template-columns: 1fr; gap: 24px; align-items: start; }
.tab-panel .thumb { aspect-ratio: 708/364; overflow: hidden; border-radius: 12px; }

/* Coerenza UI: 12px su tutte le immagini di contenuto (come il pulsante Get in Touch) */
.project-card .thumb, .news-card .thumb, .featured-media,
.project-filmstrip img { border-radius: 12px; overflow: hidden; }
.project-card, .news-card .thumb { border-radius: 12px; overflow: hidden; }
.tab-panel .thumb img { width: 100%; height: 100%; object-fit: cover; }
.tab-panel > h3 { font-size: clamp(24px, 2.1vw, 40px); line-height: 1.15; color: var(--c-white); }
.tab-panel-body p { color: var(--c-white); font-size: clamp(14px, 1.15vw, 22px); line-height: 1.45; }
.tab-panel-body .btn { margin-top: 26px; }

/* ---- Desktop (Figma): 5 colonne separate da linee verticali, etichette ruotate ----
   La colonna attiva si espande e mostra titolo → immagine → testo → CTA blu. */
@media (min-width: 1100px) {
  .solution-tabs {
    /* larghezza colonna chiusa: 141px sul canvas Figma (1920), fluida sotto */
    --sol-col: clamp(88px, 7.35vw, 141px);
    display: flex;
    align-items: stretch;
    margin-top: 0;
    border: none;
  }
  /* Linee verticali di colonna (visibili nel render pulito del Figma) */
  /* Correzione 22/09: l'apertura era a scatto. Il pannello passava da
     display:none a display:grid e la colonna saltava alla larghezza nuova in
     un fotogramma; moltiplicato per le cinque schede della sfogliata
     d'ingresso, il risultato era quello che il cliente ha chiamato
     "scattoso e confusionario".
     Ora a cambiare e' flex-grow, che e' animabile: la colonna si apre e si
     chiude scorrendo. L'overflow nasconde il contenuto finche' la colonna e'
     stretta, cosi' il pannello non deborda mentre si allarga.
     Non si puo' usare la scorciatoia flex sullo stato attivo: riscriverebbe
     anche flex-basis, e la transizione non partirebbe. */
  .solution-item {
    display: flex;
    flex: 0 1 auto;
    flex-grow: 0;
    min-width: 0;
    overflow: hidden;
    min-height: clamp(560px, 40vw, 760px);
    border: none;
    border-left: 1px solid var(--c-sep);
    transition: flex-grow .26s var(--ease-morbido);
  }
  .solution-item:last-child { border-right: 1px solid var(--c-sep); }
  .solution-item.is-active { flex-grow: 1; }

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

  .tab-trigger {
    flex: 0 0 var(--sol-col);
    width: var(--sol-col);
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 26px;
    padding: 40px 0 40px;
    align-self: stretch;
  }
  .tab-trigger .n { font-size: clamp(16px, 2.08vw, 40px); opacity: 1; }
  .tab-trigger .label {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font-size: clamp(15px, 1.67vw, 32px);
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
    white-space: nowrap;
  }
  .tab-trigger.is-active .n,
  .tab-trigger.is-active .label { color: var(--c-white); }

  /* Larghezza fissa, non flessibile: la mette js/main.js in --sol-panel-w ed
     e' quella che il pannello avra' da aperto. Mentre la colonna si allarga il
     contenuto sta fermo e viene scoperto, invece di essere rimpaginato a ogni
     fotogramma. Se il JavaScript non gira la variabile non c'e' e si torna al
     comportamento flessibile di prima, che funziona lo stesso. */
  .tab-panel {
    flex: 0 0 auto;
    width: var(--sol-panel-w, auto);
    min-width: 0;
    padding: 40px 40px 48px 0;
  }
  .tab-panel.is-active {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 28px;
  }
  .tab-panel > *, .tab-panel-body { max-width: 710px; width: 100%; }
  .tab-panel-body { min-width: 0; }
  .tab-panel .thumb { aspect-ratio: 708 / 364; border-radius: 16px; }
  .tab-panel-body h3, .tab-panel > h3 { max-width: 700px; }
}
@media (max-width: 640px) {
  .tab-panel.is-active { grid-template-columns: 1fr; gap: 20px; }
}

/* ---------- Milestone / timeline homepage ----------
   Colonna di testo a sinistra, fotografia a tutta altezza a destra. Il Figma
   qui aveva un pentagono centrato: vedi sotto perche' non c'e' piu'. */
/* Revisione 21/09: via il pentagono, l'immagine diventa una colonna a tutta
   altezza sul lato destro.
   La griglia era a tre colonne con la fotografia nella seconda e la terza
   sempre vuota: su schermo largo restava un terzo di sezione senza niente, e
   la fotografia — chiusa in una sagoma da 506px — non reggeva il peso del
   testo accanto. Ora le colonne sono due e la seconda arriva fino al bordo. */
.milestone-block {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(24px, 3.3vw, 64px);
  align-items: stretch;
  margin-top: 40px;
}
.milestone-block > :first-child { grid-column: 1; align-self: center; }
.milestone-illustration { display: block; grid-column: 2; }
/* Il bleed cancella esattamente il gutter destro di .wrap, cosi' la colonna
   tocca il bordo dello schermo senza che serva sapere quanto e' larga. Sopra
   i 1920px il contenuto e' incappucciato e resta un margine: e' lo stesso
   comportamento di tutte le altre sezioni. */
.milestone-illustration {
  margin-right: calc(-1 * clamp(var(--pad-mobile), 5.5vw, var(--pad-desktop)));
}
.milestone-illustration .milestone-foto {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: clamp(300px, 34vw, 560px);
  overflow: hidden;
  background: var(--c-navy);
  /* Correzione 22/09: la prima versione aveva due raggi ellittici che si
     saldavano in una lente, e il cliente l'ha giustamente letta come una forma
     estranea — sul sito quella curva non esiste da nessun'altra parte.
     Qui c'e' il raggio delle immagini del sistema, --radius-media, lo stesso
     delle fotografie delle Soluzioni e delle schede. Solo sul lato sinistro,
     perche' gli altri tre escono dallo schermo e un raggio su un bordo che non
     si vede non serve a niente. */
  border-radius: var(--radius-media) 0 0 var(--radius-media);
}
.milestone-illustration .ms-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity .45s var(--ease);
}
.milestone-illustration .ms-img.is-active { opacity: 1; }
/* La foto della sede e' larga e il logo sta a sinistra: inquadrata al centro
   si leggeva "sunpr". Valeva dentro il pentagono e vale anche ora, perche' la
   colonna e' piu' stretta dell'immagine. */
.milestone-illustration .ms-img[data-year="2020"] { object-position: 22% 50%; }
.milestone-item { display: none; }
.milestone-item.is-active { display: block; }
/* Figma: l'anno è in sans, solo il titolo è in mono; descrizione in sans */
.milestone-item .year {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(15px, 1.41vw, 27px);
  line-height: 1.3;
  color: var(--c-white);
}
.milestone-item h3 {
  margin-top: 14px;
  font-size: clamp(24px, 2.3vw, 44px);
  line-height: 1.2;
  color: var(--c-white);
  max-width: 14ch;   /* Figma: "Primo Project" + "Financing" su 2 righe */
  font-weight: 500;
  letter-spacing: 0.01em;
  font-variation-settings: "MONO" 100, "wght" 500;
}
.milestone-item p { margin-top: 26px; color: var(--c-white); font-size: clamp(16px, 1.56vw, 30px); line-height: 1.2; max-width: 460px; }

/* Timeline Figma: anni sopra, pallini su una linea orizzontale continua */
.milestone-track {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-top: 64px;
  padding-top: 0;
  border-top: none;
  position: relative;
}
.milestone-track::before {
  content: "";
  position: absolute;
  /* estremi misurati da js/main.js sui pallini, così la linea non sborda */
  left: var(--ms-start, 0%);
  right: calc(100% - var(--ms-end, 100%));
  bottom: 5px;
  height: 1px;
  background: rgba(255, 255, 255, 0.4);
}
/* Figma: la linea è lime fino al punto attivo, poi bianca */
.milestone-track::after {
  content: "";
  position: absolute;
  left: var(--ms-start, 0%);
  bottom: 5px;
  width: max(0px, calc(var(--ms-progress, 0%) - var(--ms-start, 0%)));
  height: 1px;
  background: var(--c-lime);
  transition: width .45s var(--ease);
}
.milestone-point {
  background: none;
  border: none;
  color: var(--c-white);
  font-family: var(--font-display);
  font-size: clamp(12px, 0.89vw, 17px);
  font-weight: 400;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  /* Il pallino e' 11px, l'anno una riga di testo: il bersaglio da toccare
     misurava 39px, sotto i 44 raccomandati. Il padding verticale allarga la
     zona sensibile senza spostare ne' il pallino ne' l'anno, perche' la linea
     e' disegnata dal contenitore. */
  padding: 6px 8px;
  margin: -6px -8px;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  transition: color .25s var(--ease);
}
.milestone-point:focus-visible { outline: 2px solid var(--c-lime); outline-offset: 2px; border-radius: 6px; }
/* pallino sulla linea */
.milestone-point::after {
  content: "";
  width: 11px; height: 11px;
  border-radius: 50%;
  background: var(--c-white);
  transition: background-color .25s var(--ease), transform .25s var(--ease);
}
.milestone-point.is-active { color: var(--c-white); }
/* i punti già percorsi (e l'attivo) sono lime, i successivi bianchi */
.milestone-point.is-past::after,
.milestone-point.is-active::after { background: var(--c-lime); }

@media (max-width: 900px) {
  .milestone-block { grid-template-columns: 1fr; gap: 32px; text-align: left; }
  /* il grid-column: 2 del desktop va annullato, altrimenti finisce in una colonna da 0px */
  .milestone-block > :first-child { grid-column: auto; }
  /* In colonna singola la fotografia torna in cima. Il bleed sparisce: da
     telefono il gutter e' l'unica aria che separa l'immagine dal bordo, e
     toglierlo farebbe sembrare la pagina tagliata. La curva si ammorbidisce
     in un raggio normale, perche' su una figura larga quanto lo schermo un
     arco da 200px si mangerebbe la fotografia. */
  .milestone-illustration { order: -1; grid-column: auto; margin-right: 0; }
  .milestone-illustration .milestone-foto {
    min-height: clamp(220px, 56vw, 340px);
    border-radius: var(--radius-card);
  }
  .milestone-track { gap: 4px; }
  /* Feedback cliente: i pallini devono essere equidistanti. Colonne di uguale
     larghezza e pallino centrato in ciascuna: prima e ultima distanza tornano
     pari alle altre (agganciando gli estremi ai bordi valevano 1,5 volte). */
  .milestone-point { flex: 1 1 0; min-width: 0; font-size: 13px; padding: 8px 2px; margin-block: -8px;
                     text-align: center; gap: 12px; align-items: center; }
}

/* ---------- Progetto in evidenza ----------
   Valori letti dal nodo Figma 2694:2907: slide 1760×840 radius 64; card in vetro
   ancorata a 69px da sinistra e 36px dal fondo, radius 12, blur 16,
   bordo 1px bianco 15%, padding 32/16/16/32, colonne separate da 120 e 150px. */
/* Il pannello si ripiega nella barra titolo: l'altezza aperta arriva da JS
   (--panel-h); senza JS resta il rapporto 1760/840 del Figma. */
/* La chiusura è in due tempi (frame 021→032 del prototipo): prima il velo e il
   titolo entrano sulla foto ancora a piena altezza, poi il pannello si ripiega.
   Riaprendo l'ordine si inverte, quindi i ritardi stanno sui due stati. */
.featured-project {
  /* Il raggio esterno e lo scostamento della card in vetro sono variabili
     perche' il raggio interno si ricava da loro: vedi il commento su
     .featured-card nella media query da 900px. */
  --fp-radius: clamp(20px, 3.33vw, 64px);
  --fc-inset: clamp(16px, 1.88vw, 36px);
  position: relative;
  height: var(--panel-h, auto);
  border-radius: var(--fp-radius);
  overflow: hidden;
  transition: height .5s var(--ease), border-radius .5s var(--ease);
}
/* La foto non si schiaccia: mantiene la sua altezza e viene tagliata dal pannello.
   Da 900px in su --media-h coincide con --panel-h (la card è in sovrimpressione);
   sotto, la card sta in colonna e il pannello è più alto della foto. */
.featured-media { height: var(--media-h, auto); aspect-ratio: 1760 / 840; overflow: hidden; border-radius: 0; }
.featured-media img { width: 100%; height: 100%; object-fit: cover; }

.featured-card {
  position: relative;
  margin-top: -1px;
  background:
    linear-gradient(90deg, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.2) 100%),
    linear-gradient(90deg, rgba(255,255,255,0.15) 0%, rgba(255,255,255,0.15) 100%);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: var(--c-white);
  padding: clamp(20px, 1.67vw, 32px);
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-start;
}
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .featured-card { background: rgba(5, 7, 28, 0.86); }
}
/* ID: mono 20px, tracking -0.2px */
.featured-card .idx {
  font-size: clamp(12px, 1.04vw, 20px);
  line-height: 1.2;
  letter-spacing: -0.2px;
  color: var(--c-white);
  text-transform: none;
  font-variation-settings: "MONO" 100, "wght" 500;
}
/* Titolo: 40px, tracking -0.4px, interlinea compatta (ridotto col riquadro) */
.featured-card h3 {
  font-size: clamp(20px, 1.82vw, 35px);
  line-height: 1.05;
  letter-spacing: -0.4px;
  font-weight: 500;
}
/* Descrizione: 20px, tracking -0.2px, interlinea 1.2 */
.featured-card p {
  font-size: clamp(13px, 0.94vw, 18px);
  line-height: 1.25;
  letter-spacing: -0.2px;
  color: var(--c-white);
  max-width: min(38ch, 100%);
}
/* Citazione del CEO al posto della descrizione (feedback cliente, Campoluogo) */
.featured-card .fc-quote { font-style: italic; max-width: min(44ch, 100%); }
.featured-card .fc-quote-by {
  display: block;
  margin-top: 8px;
  font-style: normal;
  font-size: clamp(10px, 0.68vw, 13px);
  line-height: 1.3;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.88);
}
/* Badge: pill bianca, testo blu 20px, padding 40/12, radius 12 */
.featured-card .pill-badge {
  background: var(--c-white);
  color: var(--c-blue);
  font-weight: 500;
  font-size: clamp(12px, 1.04vw, 20px);
  line-height: 1.2;
  letter-spacing: -0.2px;
  padding: clamp(8px, 0.63vw, 12px) clamp(18px, 2.08vw, 40px);
  border-radius: clamp(8px, 0.63vw, 12px);
}
.fc-main { display: flex; flex-direction: column; align-items: flex-start; gap: clamp(12px, 1.25vw, 24px); }
/* Metriche: valore 40px, chiave semi-mono 16px tracking 0.8px */
/* Solo la chiave va in maiuscolo: il valore deve restare "12 GWh", non "12 GWH"
   (le unità SI distinguono maiuscole e minuscole). */
.fc-metric { display: flex; flex-direction: column; align-self: flex-end; }
.fc-metric .v { font-size: clamp(18px, 1.72vw, 33px); line-height: 1.4; font-weight: 400; white-space: nowrap; }
.fc-metric .k {
  font-size: clamp(12px, 0.73vw, 14px);
  line-height: 1.5;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--c-white);
  font-variation-settings: "MONO" 55, "wght" 500;
}
/* Pulsante freccia: 80×80, radius 16 */
/* Il pulsante e la sua freccia. Erano entrambi troppo grandi e la freccia
   troppo marcata: dentro una scheda in vetro il comando deve accompagnare la
   scheda, non gareggiare col titolo. La misura della freccia sta qui e non nel
   markup, cosi' vale ovunque compaia. */
.fc-go {
  align-self: flex-end;
  /* Mai sotto i 44px: e' un comando, e su telefono e' l'unico modo di aprire
     la scheda. Il clamp partiva da 38. */
  width: clamp(44px, 2.6vw, 48px);
  height: clamp(44px, 2.6vw, 48px);
  border-radius: clamp(9px, 0.7vw, 12px);
  border: none;
  background: var(--c-white);
  color: var(--c-navy);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  transition: background-color .2s var(--ease);
}
.fc-go svg { width: clamp(16px, 1.1vw, 19px); height: clamp(16px, 1.1vw, 19px); }
.fc-go svg path { stroke-width: 1.5; }
.fc-go:hover { background: #e9ecf5; }

@media (min-width: 900px) {
  /* La card in vetro sta appoggiata all'angolo in basso a sinistra della foto.
     Perche' i due angoli stiano bene insieme devono essere CONCENTRICI: la
     distanza fra le due curve deve restare costante, e questo si ottiene solo
     con lo stesso scostamento sui due lati e con
         raggio interno = raggio esterno - scostamento.
     Con scostamenti diversi (prima erano 69 a sinistra e 36 sotto) le due
     curve corrono a distanze diverse e l'occhio legge un errore. */
  .featured-card {
    position: absolute;
    left: var(--fc-inset);
    bottom: var(--fc-inset);
    right: auto;
    max-width: min(64%, 980px);
    margin-top: 0;
    border-radius: max(8px, calc(var(--fp-radius) - var(--fc-inset)));
    --fc-pad: clamp(12px, 0.83vw, 16px);
    --fc-btn: clamp(48px, 3.44vw, 66px);
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: end;
    /* Niente distanza fra le righe: la aggiungono i contenuti quando si aprono
       (vedi .fc-extra-inner). Un row-gap qui resterebbe anche da chiusa, e
       sposterebbe il fondo della scheda di venti pixel fra i due stati. */
    row-gap: 0;
    padding: clamp(14px, 1vw, 20px) calc(var(--fc-pad) * 2 + var(--fc-btn)) var(--fc-pad) clamp(16px, 1.25vw, 24px);
  }

  /* A riposo si vedono solo tipo e nome del progetto: la fotografia e' il
     contenuto principale della sezione e la card non deve coprirla. Il resto
     — codice, citazione, produzione, data — si apre al passaggio del mouse.
     La transizione usa grid-template-rows 0fr -> 1fr: anima l'altezza senza
     doverla conoscere in anticipo, cosa che con max-height non si puo' fare
     senza inventare un valore. */
  .featured-card .fc-main { grid-column: 1; grid-row: 1; }
  .fc-extra-testo { grid-column: 1; grid-row: 2; }
  .fc-extra-dati  { grid-column: 1; grid-row: 3; }
  /* Feedback cliente: aprendosi la scheda, il pulsante saliva con il contenuto.
     Deve restare dov'e' da chiusa. Ancorarlo all'angolo in basso a destra della
     scheda lo rende indipendente da quante righe si aprono: la scheda cresce
     verso l'alto (il suo fondo e' fissato a --fc-inset dalla foto), quindi il
     pulsante non si muove di un pixel fra i due stati. Lo spazio a destra e'
     riservato dal padding, cosi' il testo non gli finisce sotto. */
  .featured-card .fc-go {
    position: absolute;
    right: var(--fc-pad);
    bottom: var(--fc-pad);
    grid-column: 1;
    grid-row: 1;
  }

  /* Da chiusa la card deve aderire a badge e titolo. Senza il limite di
     larghezza il contenuto nascosto continuerebbe a dettare la misura della
     colonna, e resterebbe una fascia di vetro vuota fino alla freccia. */
  .fc-extra {
    display: grid;
    grid-template-rows: 0fr;
    max-width: 0;
    overflow: hidden;
    opacity: 0;
    transition: grid-template-rows .55s var(--ease), max-width .55s var(--ease), opacity .35s var(--ease);
  }
  /* Lo spazio sopra sta sul contenuto, non sul contenitore: un padding sul
     contenitore non si comprime insieme alla riga e da chiusa lascerebbe una
     striscia di una quindicina di pixel. */
  .fc-extra-inner { overflow: hidden; min-height: 0; }
  .fc-extra-testo .fc-extra-inner > :first-child { margin-top: clamp(10px, 0.83vw, 16px); }
  .fc-extra-dati .fc-extra-inner {
    display: flex;
    gap: clamp(24px, 3.6vw, 68px);
  }
  .fc-extra-dati .fc-metric { margin-top: clamp(12px, 1vw, 20px); }
  .fc-extra-dati .fc-metric { align-self: flex-start; }

  /* Si apre solo dove il passaggio del mouse esiste davvero. Su schermi
     tattili non c'e' hover: la card resta aperta, altrimenti quelle
     informazioni sarebbero irraggiungibili. */
  @media (hover: hover) {
    .featured-project:hover .fc-extra,
    .featured-project:focus-within .fc-extra {
      grid-template-rows: 1fr;
      max-width: min(58vw, 760px);
      opacity: 1;
    }
    .featured-project:hover .fc-extra-dati,
    .featured-project:focus-within .fc-extra-dati { transition-delay: .06s; }
  }
  @media (hover: none) {
    .fc-extra { grid-template-rows: 1fr; max-width: min(58vw, 760px); opacity: 1; }
  }
}

@media (max-width: 899px) {
  /* Sotto i 900px la scheda torna in sovrimpressione, come su desktop: la
     fotografia prende tutto il riquadro e il vetro ci appoggia sopra. Prima
     stavano in colonna — foto sopra, scheda sotto — e il progetto si leggeva
     come due oggetti separati invece che come una scheda su un'immagine.
     La proporzione diventa verticale perche' 1760x840 su un telefono e' una
     striscia alta 186px: non e' una fotografia, e' un bordo. */
  .featured-media { aspect-ratio: 4 / 5; height: auto; }

  .featured-card {
    position: absolute;
    left: var(--fc-inset); right: var(--fc-inset); bottom: var(--fc-inset);
    margin-top: 0;
    border-radius: calc(var(--fp-radius) - var(--fc-inset));
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
    padding: 18px;
  }
  .fc-main, .fc-extra { grid-column: 1 / -1; min-width: 0; max-width: none; overflow: visible; }
  .fc-extra-dati .fc-extra-inner { display: flex; gap: 22px; flex-wrap: wrap; }
  .fc-metric { align-self: start; min-width: 0; }
  .fc-go { grid-column: 2; grid-row: 3; align-self: end; margin-top: -44px; }
  /* I dati lasciano libera la colonna della freccia: affiancati, l'ultimo
     finiva sotto il pulsante ("DATA DI CONNESS…", feedback mobile 14/09). */
  .fc-extra-dati .fc-extra-inner { padding-right: 56px; }

  /* Sopra una fotografia la citazione e' troppo: restano l'etichetta, il
     comune, i due dati e la freccia — quello che serve per riconoscere il
     progetto e aprirlo. La citazione resta su desktop, dove c'e' spazio. */
  .featured-card .fc-extra-testo { display: none; }
  .featured-card h3 { font-size: clamp(19px, 5.2vw, 24px); line-height: 1.2; }

  /* I pallini stavano in mezzo a due vuoti: si stringono al riquadro. */
  .carousel-controls { margin-top: 14px; }
  .project-stack { margin-top: 24px; }
}

.project-filmstrip { display: flex; gap: 12px; margin-top: 16px; overflow-x: auto;
  /* overflow-y esplicito. Dichiarando solo overflow-x: auto, il CSS calcola
     overflow-y come "auto" e non come "visible": basta una riga di testo in
     piu' o un font che arriva tardi perche' dentro al nastro compaia uno
     scorrimento verticale di pochi pixel. Segnalato il 22/09 — "questa
     tipologia di sezioni non deve mai avere scorrimento verticale". */
  overflow-y: hidden; }
.project-filmstrip img { width: 180px; height: 120px; object-fit: cover; flex: none; }

/* ---------- Progetti ----------
   Feedback cliente: il ripiegamento dei pannelli in barre navy era troppo
   macchinoso. Resta un solo riquadro con la fotografia, i pallini a sinistra e
   niente indicatore a destra; scorrendo cambiano i tre contenuti dentro lo
   stesso riquadro, in dissolvenza. */
.project-stack-inner { position: relative; }

/* Il margine sta sullo stack, non sul carosello: dentro un elemento sticky
   collasserebbe verso l'alto e falserebbe l'altezza della pista di scorrimento. */
.project-stack { margin-top: 40px; }
.project-carousel { margin-top: 0; position: relative; }
.carousel-track { position: relative; }
/* I tre progetti stanno nella stessa cella: si sovrappongono invece di
   incolonnarsi, ed e' quello che rende possibile la dissolvenza. */
.carousel-inner { display: grid; }
.carousel-slide {
  grid-area: 1 / 1;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  /* la visibilita' si spegne a dissolvenza finita, altrimenti il progetto
     uscente resterebbe cliccabile sopra quello entrante */
  transition: opacity .5s var(--ease), visibility 0s .5s;
}
.carousel-slide.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity .5s var(--ease);
}

/* Con JS attivo il riquadro resta ancorato sotto l'header mentre si scorre:
   la traccia ha l'altezza di un pannello e i contenuti si danno il cambio. */
.project-stack.is-pinned .project-stack-inner {
  position: sticky;
  top: var(--stack-top, 0px);
}
.project-stack.is-pinned .carousel-track {
  height: var(--stack-h);
  overflow: hidden;
}
.carousel-controls { display: flex; align-items: center; justify-content: center; margin-top: 20px; }
.carousel-dots { display: flex; gap: 10px; }
.carousel-dots .dot {
  position: relative;
  width: 12px; height: 12px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.55); border: none; padding: 0; cursor: pointer;
  transition: background-color .2s var(--ease), transform .2s var(--ease);
}
/* area di tocco 44×44 attorno al pallino, senza ingrandirlo visivamente */
.carousel-dots .dot::after { content: ""; position: absolute; inset: -16px; }
.carousel-dots .dot.is-active { background: var(--c-navy); transform: scale(1.5); }

@media (min-width: 900px) {
  /* I pallini stanno nel gutter di pagina: la foto occupa tutta la colonna. */
  .carousel-controls {
    position: absolute;
    left: calc(clamp(24px, 5.5vw, 80px) / -2 - 6px);
    top: 50%;
    transform: translateY(-50%);
    margin-top: 0;
    z-index: 4;
  }
  .carousel-dots { flex-direction: column; gap: 16px; }
}
@media (max-width: 899px) {
  /* Feedback cliente: con il dito era quasi impossibile centrare il pallino
     giusto. Le aree di tocco erano da 44px ma con gap 10px si sovrapponevano.
     Ora ogni pallino è un bersaglio da 48×48 affiancato, senza sovrapposizioni:
     il cerchio visibile è il ::before, il pulsante è il bersaglio. */
  .carousel-controls { margin-top: 12px; }
  .carousel-dots { gap: 4px; }
  .carousel-dots .dot {
    width: 48px; height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border-radius: 50%;
    transform: none;
    -webkit-tap-highlight-color: transparent;
  }
  .carousel-dots .dot::after { content: none; }
  .carousel-dots .dot::before {
    content: "";
    width: 12px; height: 12px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.55);
    transition: background-color .2s var(--ease), transform .2s var(--ease);
  }
  .carousel-dots .dot.is-active { background: transparent; transform: none; }
  .carousel-dots .dot.is-active::before { background: var(--c-navy); transform: scale(1.5); }
}
@media (prefers-reduced-motion: reduce) {
  .featured-project,
  .carousel-slide,
  .featured-card { transition-duration: .01ms; }
}
.carousel-next {
  width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.5); background: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  color: var(--c-white);
}
.carousel-next:hover { background: rgba(255, 255, 255, 0.12); }

/* ---------- FAQ ----------
   Figma: non è una fisarmonica. Ogni riga mostra la domanda; al passaggio del
   mouse il blocco diventa giallo Sunprime e compare la risposta, testo blu.
   Su dispositivi touch (senza hover) resta il tocco per aprire. */
.faq-list { margin-top: 32px; }
/* ---------- Accordion / FAQ ----------
   Feedback cliente: non piu' righe separate da filetti, ma schede staccate,
   ciascuna col proprio raggio. Chiusa mostra +, aperta mostra x — che e' lo
   stesso segno ruotato di 45 gradi, non una seconda icona da tenere allineata.

   E si apre al clic, non al passaggio del mouse. Con le righe attaccate
   l'apertura in hover era una scoperta; con le schede staccate diventa un
   inciampo: scorrendo il mouse lungo l'elenco la pagina salta a ogni scheda.
   Il passaggio del mouse ora fa una cosa sola, schiarire la scheda. */
/* Da chiusa una domanda deve occupare la sua riga e basta: lo spazio se lo
   prende aprendosi. Su telefono anche il passo fra una e l'altra si stringe,
   perche' tre domande chiuse non sono tre sezioni. */
.faq-list { display: grid; gap: clamp(8px, .83vw, 16px); }

.acc-item {
  border: 1px solid rgba(255, 255, 255, 0.34);
  border-radius: var(--radius-card);
  background: transparent;
  overflow: hidden;
  transition: background-color .45s cubic-bezier(.33, 0, .2, 1),
              border-color .45s cubic-bezier(.33, 0, .2, 1);
}
.acc-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(16px, 1.7vw, 32px);
  padding: clamp(15px, 1.46vw, 28px) clamp(18px, 1.67vw, 32px);
  background: none;
  border: none;
  color: var(--c-white);
  text-align: left;
  font-family: var(--font-display);
  font-size: clamp(16px, 1.15vw, 22px);
  font-weight: 500;
  line-height: 1.35;
  cursor: pointer;
  transition: color .4s cubic-bezier(.33, 0, .2, 1);
}
/* Il segno: due filetti incrociati. Chiuso e' un +, aperto ruota di 45 gradi
   e diventa una x. Una sola forma, nessuna icona da sostituire. */
.acc-trigger::after {
  content: "";
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  background:
    linear-gradient(var(--segno, currentColor), var(--segno, currentColor)) center / 100% 1.6px no-repeat,
    linear-gradient(var(--segno, currentColor), var(--segno, currentColor)) center / 1.6px 100% no-repeat;
  transition: transform .4s var(--ease);
}
.acc-item.is-open .acc-trigger::after { transform: rotate(45deg); }

.acc-panel {
  overflow: hidden;
  display: grid;
  grid-template-rows: 0fr;
  padding: 0 clamp(18px, 1.67vw, 32px);
  max-width: 72ch;
  color: inherit;
  font-size: clamp(14px, 1.04vw, 18px);
  line-height: 1.55;
  opacity: 0;
  transition: grid-template-rows .45s cubic-bezier(.33, 0, .2, 1),
              opacity .35s cubic-bezier(.33, 0, .2, 1),
              padding-bottom .45s cubic-bezier(.33, 0, .2, 1);
}
/* grid-template-rows 0fr -> 1fr anima l'altezza reale del contenuto: niente
   max-height inventata che taglia la risposta lunga o lascia il vuoto sotto
   quella corta. Il figlio deve poter andare a zero. */
.acc-panel > * { min-height: 0; }
.acc-panel-inner { overflow: hidden; }

@media (hover: hover) {
  .acc-item:hover { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.5); }
}
/* Aperta: una fotografia dentro la scheda, con il vetro sopra.
   Revisione 22/09: "quando apro l'FAQ, nel box ci sara' un'immagine di sfondo
   con un effetto glass per far leggere all'utente la risposta completa".
   Prima era lime piena, e una scheda gialla in mezzo a tre trasparenti
   spezzava l'elenco; prima ancora avevo messo la fotografia sotto la sezione,
   che non era quello che serviva. La fotografia sta qui, dentro la scheda, e
   compare solo quando c'e' una risposta da leggere.

   Il velo non e' un vezzo: senza, il contrasto del testo bianco dipende da
   quanto e' chiaro il pixel di fotografia che gli capita sotto, e su una
   veduta aerea cambia riga per riga. Con il velo il fondo e' sempre almeno
   quel navy, e il minimo di contrasto e' garantito ovunque. */
.acc-item.is-open {
  position: relative;
  isolation: isolate;
  border-color: rgba(255, 255, 255, 0.30);
  --segno: var(--c-white);
}
.acc-item.is-open::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(0, 13, 51, 0.80), rgba(0, 13, 51, 0.88)),
    url("../assets/img/hero-ground.jpg") center / cover no-repeat;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .acc-item.is-open::before {
    background:
      linear-gradient(180deg, rgba(0, 13, 51, 0.90), rgba(0, 13, 51, 0.94)),
      url("../assets/img/hero-ground.jpg") center / cover no-repeat;
  }
}
.acc-item.is-open .acc-trigger,
.acc-item.is-open .acc-panel { color: var(--c-white); }
.acc-item.is-open .acc-panel {
  grid-template-rows: 1fr;
  opacity: 1;
  padding-bottom: clamp(18px, 1.46vw, 28px);
}
.acc-trigger:focus-visible { outline: 2px solid var(--c-lime); outline-offset: -4px; border-radius: var(--radius-card); }

/* Dove l'accordion contiene un modulo e non una risposta — la candidatura
   spontanea di Careers — la fotografia non ci va: sotto ci sono campi da
   compilare, e un fondo mosso dietro a sette caselle si legge peggio di un
   fondo fermo. Il pannello resta quello della sezione, com'era prima che
   l'accordion esistesse. */
.acc-item.senza-foto.is-open { border-color: rgba(255, 255, 255, 0.24); }
.acc-item.senza-foto.is-open::before { display: none; }

/* Rete di sicurezza: dentro una sezione a fondo chiaro la fotografia con il
   velo navy non ci va mai, che l'accordion lo dichiari o no. E' un fondo
   scuro dietro a un testo scuro, cioe' un testo che sparisce, ed e'
   esattamente cio' che e' successo alla descrizione dell'annuncio. */
.sezione-bianca .acc-item.is-open::before,
.section-light .acc-item.is-open::before { display: none; }
.sezione-bianca .acc-item.is-open .acc-trigger,
.sezione-bianca .acc-item.is-open .acc-panel,
.section-light .acc-item.is-open .acc-trigger,
.section-light .acc-item.is-open .acc-panel { color: var(--c-ink); }

@media (prefers-reduced-motion: reduce) {
  .acc-item, .acc-trigger, .acc-trigger::after, .acc-panel { transition: none; }
}

/* ---------- Footer: card scura arrotondata su sfondo blu (Figma) ---------- */
.site-footer-wrap { background: var(--c-blue); padding: 40px 0; }
@media (max-width: 900px) { .site-footer-wrap { padding: 24px 0; } }

.footer-card {
  position: relative;
  overflow: hidden;
  background: var(--c-navy);
  /* Figma nodo 2642:1003 — card 1760×456, radius 40, contenuto a x=113 / y=84 */
  border-radius: 40px;
  color: var(--c-white);
  padding: clamp(32px, 4.4vw, 84px) clamp(24px, 5.9vw, 113px) clamp(28px, 2.5vw, 48px);
  min-height: clamp(auto, 23.75vw, 456px);
}
/* Fondo piatto con i fili blu del Figma (Mask group 3129:3740). Proposta del
   cliente dell'11/09: sobrio a riposo, e al passaggio del mouse il filo sotto
   il cursore si accende di lime, come un flusso di energia. Prima qui c'era
   la fotografia footer-bg.jpg. */
.footer-card-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: var(--c-navy);
}
.footer-fili {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  fill: none;
  /* I fili sono decorazione, e una decorazione non deve contendere una riga di
     testo. Due tentativi di metterci qualcosa davanti — una lastra di vetro,
     poi un alone sfumato — sono stati bocciati entrambi (21 e 22/09): sul
     fondo animato qualunque cosa si interponga si legge come una toppa.
     La terza strada non aggiunge niente sopra: abbassa la voce dei fili e
     stacca il testo con un'ombra, che non avendo forma non si vede.
     Su navy il blu pieno a 2px e' un tratto; a 1,4 al 62% e' una texture. */
  stroke: var(--c-blue);
  stroke-width: 1.4;
  stroke-opacity: .62;
  stroke-miterlimit: 10;
}
/* La copia lime e' visibile solo dentro un cerchio che segue il cursore
   (--fx/--fy, aggiornate da main.js); fuori dalla card il cerchio si chiude. */
.footer-fili-luce {
  /* Era il colpevole vero: passando sotto "Tutte le soluzioni" o sotto i dati
     societari li tagliava a meta'. Non si spegne — e' la proposta approvata
     l'11/09 — ma perde il doppio alone e un punto di spessore. */
  stroke: var(--c-lime);
  stroke-width: 2;
  stroke-opacity: .85;
  filter: drop-shadow(0 0 5px rgba(246, 255, 151, .45));
  opacity: 0;
  -webkit-mask-image: radial-gradient(circle var(--fr, 130px) at var(--fx, 50%) var(--fy, 50%), #000 0%, rgba(0,0,0,.6) 45%, transparent 100%);
  mask-image: radial-gradient(circle var(--fr, 130px) at var(--fx, 50%) var(--fy, 50%), #000 0%, rgba(0,0,0,.6) 45%, transparent 100%);
  transition: opacity .45s var(--ease);
}
.footer-card.is-luce .footer-fili-luce { opacity: 1; }
/* Da telefono la card e' tutta testo — voci del menu, dati societari — e i
   fili ci passano sopra: restano, ma piu' tenui. */
@media (max-width: 900px) {
  .footer-fili:not(.footer-fili-luce) { opacity: .5; }
}
@media (prefers-reduced-motion: reduce) {
  .footer-fili-luce { display: none; }
}
/* L'ombra che stacca. Non e' un contorno e non ha bordi: allarga di pochi
   pixel il navy attorno a ogni lettera, e basta a far passare un filo dietro
   senza che tagli la riga. Vale per tutto il footer, navigazione compresa —
   nelle versioni precedenti era rimasta scoperta proprio lei. */
.footer-card-inner,
.footer-card-inner a,
.footer-card-inner h3,
.footer-card-inner p,
.footer-card-inner strong {
  text-shadow: 0 1px 3px rgba(0, 13, 51, .95), 0 0 12px rgba(0, 13, 51, .8);
}
/* I bottoni hanno il loro fondo pieno: li' l'ombra sporcherebbe e basta. */
.footer-card-inner .btn,
.footer-card-inner .footer-socials a { text-shadow: none; }

.footer-card-inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
}
.footer-card-left {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  gap: 40px;
  /* Figma: il titolo parte 40px sotto la colonna destra (y 124 vs 84) */
  padding-top: clamp(0px, 2.1vw, 40px);
}
.footer-left-top {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(18px, 1.7vw, 32px);
}
/* Figma: 32px / interlinea 1.25 */
.footer-left-top h3 { font-size: clamp(20px, 1.67vw, 32px); max-width: 20ch; line-height: 1.25; font-weight: 500; }
.footer-logo { color: var(--c-white); }

.footer-card-right {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  gap: 40px;
}
/* ---------- Navigazione del footer ----------
   Quattro colonne costruite da menu.json: una voce aggiunta al menu compare
   anche qui. Sta fra i social e i dati societari, cioe' dove l'occhio arriva
   scendendo, e su telefono diventa due colonne invece di una fila lunga. */
.footer-nav {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(22px, 2.4vw, 40px) clamp(20px, 2.2vw, 44px);
  width: 100%;
}
@media (min-width: 900px) { .footer-nav { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.footer-col-titolo {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  font-variation-settings: "MONO" 100, "wght" 500;
  color: rgba(255, 255, 255, 0.58);
  margin: 0 0 14px;
}
.footer-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.footer-col a {
  font-size: 15px;
  line-height: 1.4;
  color: var(--c-white);
  text-decoration: none;
  transition: color .18s var(--ease);
  /* Da telefono ogni voce e' alta quanto un dito. Su un puntatore preciso
     sarebbe spazio sprecato, quindi l'altezza minima vale dove serve. */
  display: block;
}
/* Sotto i 900px il footer si tocca con un dito. Il criterio e' la larghezza
   e non (pointer: coarse) perche' e' lo stesso di tutto il resto del foglio:
   due criteri diversi per la stessa domanda divergono al primo cambiamento. */
@media (max-width: 900px) {
  .footer-col ul { gap: 0; }
  .footer-col a { min-height: 44px; display: flex; align-items: center; }
}
.footer-col a:hover { color: var(--c-lime); }
.footer-col a:focus-visible { outline: 2px solid var(--c-lime); outline-offset: 3px; border-radius: 3px; }

.footer-social-block { display: flex; flex-direction: column; gap: clamp(16px, 1.9vw, 36px); }
/* Figma: 32px / interlinea 1.25, come il titolo a sinistra */
.footer-social-label { font-size: clamp(20px, 1.67vw, 32px); line-height: 1.25; }
/* Figma: blocco largo 501px, testo 20px / interlinea 1.3.
   Roobert TRIAL latino è un filo più largo dell'Hebrew VF del Figma: 540px
   mantiene gli stessi a-capo (2 righe + 1). */
/* Revisione 21/09: i fili animati passano proprio sotto a questo blocco e alla
   frase in alto a sinistra, e li' il testo diventava faticoso da leggere — un
   filo blu acceso sotto a una riga di dati societari la taglia a meta'.
   I fili restano — sono la proposta approvata l'11/09 — ma parlano piu' piano,
   e il testo si stacca con la propria ombra: vedi .footer-fili qui sopra.

   Resta la gerarchia che mancava: prima le due righe avevano stesso bianco e
   stesso corpo, quindi ragione sociale e copyright pesavano uguale. Ora la
   prima tiene il bianco pieno, la seconda scende di corpo e si attenua. */
.footer-legal-block { max-width: 540px; }
.footer-legal-block p { font-size: clamp(13px, 1.04vw, 20px); color: var(--c-white); line-height: 1.3; }
.footer-legal-block p + p {
  margin-top: clamp(10px, 1.5vw, 28px);
  font-size: clamp(12px, 0.88vw, 16px);
  color: var(--c-white-soft);
}
.footer-legal-block strong { color: var(--c-white); font-weight: 700; }
.footer-legal-block a { text-decoration: underline; margin-left: 8px; display: inline-block; padding-block: 6px; }
/* Da telefono anche i link legali si toccano con un dito. */
@media (max-width: 900px) { .footer-legal-block a { padding-block: 11px; } }
.footer-legal-block a:hover { color: var(--c-white); }

@media (max-width: 900px) {
  .footer-card { padding: 40px 24px; border-radius: 20px; }
  .footer-card-inner { grid-template-columns: 1fr; gap: 44px; }
  /* Footer mobile centrato (richiesta cliente) */
  .footer-card-inner { text-align: center; }
  .footer-card-left,
  .footer-card-right,
  .footer-left-top,
  .footer-social-block { align-items: center; }
  .footer-card-left { min-height: auto; gap: 32px; }
  .footer-left-top h3 { max-width: 20ch; margin-inline: auto; }
  .footer-card .footer-socials { justify-content: center; }
  .footer-legal-block { text-align: center; }
  .footer-legal-block a { margin-inline: 4px; }

  /* La navigazione fa eccezione al centrato del footer mobile: un elenco di
     link si legge allineato a sinistra, e l'etichetta del gruppo deve stare
     sopra la colonna che intitola. Centrandola sopra link allineati a
     sinistra — che e' quello che succedeva — le due cose sembravano
     scollegate, e le quattro colonne un mucchio.
     Le due colonne restano, ma su righe proprie: cosi' i gruppi non si
     incastrano l'uno nello spazio avanzato dell'altro. */
  .footer-nav {
    text-align: left;
    width: 100%;
    gap: 0;
    grid-template-columns: 1fr;
    border-top: 1px solid rgba(255, 255, 255, 0.16);
  }
  .footer-col {
    border-bottom: 1px solid rgba(255, 255, 255, 0.16);
    padding: 6px 0 14px;
  }
  .footer-col-titolo { margin: 10px 0 2px; }
  .footer-col ul { grid-template-columns: repeat(2, minmax(0, 1fr)); display: grid; }
  .footer-col a { padding-right: 12px; }
}

/* ---------- Feature stack (sezione piattaforma, sfondo scuro) ---------- */
.feature-stack { display: flex; flex-direction: column; gap: 2px; margin-top: 40px; }
.feature-row {
  display: flex;
  align-items: flex-start;
  gap: 24px;
  padding: 28px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
}
.feature-row:first-child { border-top: none; padding-top: 0; }
.feature-icon {
  flex: none;
  width: 52px; height: 52px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.24);
  display: flex; align-items: center; justify-content: center;
  color: var(--c-lime);
}
.feature-row h3 { font-size: 19px; color: var(--c-white); }
.feature-row p { margin-top: 8px; font-size: 16px; color: rgba(255, 255, 255, 0.68); max-width: 56ch; }
@media (max-width: 640px) {
  .feature-row { gap: 16px; }
  .feature-icon { width: 44px; height: 44px; }
}

/* ---------- Timeline ---------- */
.timeline { display: flex; gap: 0; position: relative; }
.timeline::before { content: ""; position: absolute; left: 0; right: 0; top: 10px; height: 1px; background: var(--c-line); }
.timeline-item { flex: 1; position: relative; padding-top: 30px; }
.timeline-item::before { content: ""; position: absolute; left: 0; top: 4px; width: 12px; height: 12px; border-radius: 50%; background: var(--c-blue); }
.timeline-item .year { font-family: var(--font-display); font-weight: 700; font-size: 15px; color: var(--c-blue); }
.timeline-item p { margin-top: 6px; font-size: 14px; color: var(--c-ink-soft); }
@media (max-width: 900px) {
  .timeline { flex-direction: column; gap: 28px; }
  .timeline::before { left: 5px; top: 0; bottom: 0; right: auto; width: 1px; height: auto; }
  .timeline-item { padding-top: 0; padding-left: 28px; }
  .timeline-item::before { top: 4px; left: 0; }
}

/* ==========================================================================
   Modulo di base per le pagine di servizio
   --------------------------------------------------------------------------
   Componenti previsti dal sistema ma non ancora usati in pagina: link inline,
   campi e moduli, tabelle di dati, messaggi di esito, briciole di pane,
   paginazione, finestra modale, stato vuoto e scheletro di caricamento.
   Esistono qui perche' la prima pagina che ne avra' bisogno — contatti,
   archivio news, careers, privacy — non debba inventarseli. Sono documentati
   nel sistema di interfaccia, sezione per sezione.
   ========================================================================== */

/* ---------- Link dentro il testo ----------
   Il sito usa quasi ovunque link senza sottolineatura, perche' sono blocchi
   interi (card, voci di menu). Dentro un paragrafo serve il contrario: un
   link deve essere riconoscibile senza dipendere dal solo colore, altrimenti
   chi non distingue il blu dal navy non lo vede. */
.link-inline {
  color: var(--c-blue);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  transition: color .18s var(--ease), text-decoration-color .18s var(--ease);
}
.link-inline:hover { color: #0036d6; text-decoration-thickness: 2px; }
.on-dark .link-inline,
.link-inline.on-dark { color: var(--c-lime); }
.on-dark .link-inline:hover,
.link-inline.on-dark:hover { color: var(--c-white); }
/* Il verso della freccia dice dove porta: fuori sito in diagonale, file in giu'. */
.link-inline[target="_blank"]::after { content: " ↗"; text-decoration: none; }
.link-inline[download]::after { content: " ↓"; text-decoration: none; }

/* ---------- Campi e moduli ----------
   Un campo e' etichetta + controllo + aiuto, sempre in quest'ordine e sempre
   con la <label> collegata: il segnaposto non e' un'etichetta, sparisce appena
   si scrive e con esso l'unica indicazione di che cosa va nel campo. */
.form-grid { display: grid; gap: var(--space-lg); }
@media (min-width: 720px) {
  .form-grid { grid-template-columns: 1fr 1fr; }
  .form-grid .field-wide { grid-column: 1 / -1; }
}
/* align-content: start, altrimenti in una riga di griglia dove il campo
   accanto ha un testo di aiuto le tracce automatiche si allungano e il
   controllo diventa piu' alto degli altri. */
.field { display: grid; align-content: start; gap: var(--space-2xs); }
.field-label {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-variation-settings: "MONO" 55, "wght" 600;
  color: var(--c-ink);
}
.field-label .req { color: var(--c-error); margin-left: 2px; }
.input, .select, .textarea {
  width: 100%;
  min-height: 52px;
  padding: 14px 16px;
  font: inherit;
  font-size: 16px;           /* sotto i 16px iOS ingrandisce la pagina al focus */
  color: var(--c-ink);
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-input);
  transition: border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.textarea { min-height: 140px; resize: vertical; line-height: 1.5; }
.select {
  appearance: none;
  padding-right: 44px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23000D33' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
}
.input::placeholder, .textarea::placeholder { color: var(--c-ink-soft); }
.input:hover, .select:hover, .textarea:hover { border-color: rgba(0, 13, 51, 0.28); }
.input:focus-visible, .select:focus-visible, .textarea:focus-visible {
  outline: none;
  border-color: var(--c-blue);
  box-shadow: 0 0 0 3px rgba(var(--c-blue-rgb), 0.18);
}
.field-hint { font-size: 13px; line-height: 1.45; color: var(--c-ink-soft); }
.field-error {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--c-error);
}
/* L'errore non e' solo il bordo rosso: c'e' anche un testo che dice come
   rimediare, ed e' legato al campo con aria-describedby. */
.field.is-invalid .input,
.field.is-invalid .select,
.field.is-invalid .textarea { border-color: var(--c-error); }
.field.is-invalid .input:focus-visible,
.field.is-invalid .select:focus-visible,
.field.is-invalid .textarea:focus-visible { box-shadow: 0 0 0 3px rgba(179, 38, 30, 0.18); }
.input:disabled, .select:disabled, .textarea:disabled {
  background: var(--c-surface-alt);
  color: var(--c-ink-soft);
  cursor: not-allowed;
}

/* Caselle e scelte: il bersaglio e' l'intera riga, non il quadratino. */
.choice { display: flex; align-items: flex-start; gap: 12px; cursor: pointer; font-size: 16px; line-height: 1.45; }
.choice input { flex: none; width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--c-blue); cursor: pointer; }
.choice:has(input:disabled) { color: var(--c-ink-soft); cursor: not-allowed; }

/* Campi su fondo scuro: stessa struttura, colori invertiti (footer, hero). */
.on-dark .field-label { color: var(--c-white); }
.on-dark .input, .on-dark .select, .on-dark .textarea {
  color: var(--c-white);
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.38);
}
.on-dark .input::placeholder, .on-dark .textarea::placeholder { color: rgba(255, 255, 255, 0.62); }
.on-dark .field-hint { color: var(--c-white-soft); }
.on-dark .input:focus-visible, .on-dark .select:focus-visible, .on-dark .textarea:focus-visible {
  border-color: var(--c-lime);
  box-shadow: 0 0 0 3px rgba(246, 255, 151, 0.28);
}

/* ---------- Tabelle di dati ----------
   Righe separate da filetti, niente zebratura: le righe alternate aggiungono
   rumore a una tabella gia' leggibile e diventano un problema quando una riga
   va evidenziata per un motivo vero. */
.data-table { width: 100%; border-collapse: collapse; font-size: 15px; }
.data-table caption {
  text-align: left;
  padding-bottom: var(--space-sm);
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-variation-settings: "MONO" 100, "wght" 500;
  color: var(--c-ink-soft);
}
.data-table th, .data-table td {
  text-align: left;
  padding: 14px 16px;
  border-bottom: 1px solid var(--c-line);
  vertical-align: top;
}
.data-table thead th {
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-variation-settings: "MONO" 100, "wght" 500;
  color: var(--c-ink-soft);
  border-bottom-width: 1px;
  border-bottom-color: rgba(0, 13, 51, 0.28);
}
.data-table tbody tr:last-child th,
.data-table tbody tr:last-child td { border-bottom: none; }
/* I numeri si leggono in colonna solo se allineati a destra e tabellari. */
.data-table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* Sotto i 720px la tabella scorre di lato invece di comprimere le colonne:
   una tabella che va a capo smette di essere una tabella. */
.table-scroll { overflow-x: auto; }
@media (max-width: 719px) { .data-table { min-width: 560px; } }

/* ---------- Messaggi di esito ----------
   Il colore non e' l'unico segnale: c'e' sempre un'icona e un testo. */
.msg {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 12px;
  padding: 16px 18px;
  border-radius: 12px;
  border: 1px solid;
  font-size: 15px;
  line-height: 1.5;
}
.msg b { display: block; font-weight: 600; }
.msg .msg-icon { width: 22px; height: 22px; flex: none; }
.msg-info    { color: var(--c-info);    background: var(--c-info-soft);    border-color: rgba(var(--c-blue-rgb), 0.22); }
.msg-ok      { color: var(--c-success); background: var(--c-success-soft); border-color: rgba(20, 107, 44, 0.24); }
.msg-warn    { color: var(--c-warning); background: var(--c-warning-soft); border-color: rgba(122, 82, 0, 0.24); }
.msg-error   { color: var(--c-error);   background: var(--c-error-soft);   border-color: rgba(179, 38, 30, 0.24); }

/* ---------- Briciole di pane ---------- */
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13px; color: var(--c-ink-soft); }
.crumbs ol { display: contents; list-style: none; margin: 0; padding: 0; }
.crumbs li { display: flex; align-items: center; gap: 8px; }
.crumbs li + li::before { content: "/"; color: var(--c-line); }
/* Da telefono le briciole si toccano con un dito: l'area del link cresce in
   altezza fino a 44px senza spostare la riga. */
@media (max-width: 900px) {
  .crumbs a { display: inline-flex; align-items: center; min-height: 44px; margin-block: -12px; }
}
.crumbs a { text-decoration: underline; text-underline-offset: 0.18em; text-decoration-color: transparent; transition: text-decoration-color .18s var(--ease); }
.crumbs a:hover { text-decoration-color: currentColor; }
/* L'ultima briciola e' la pagina corrente: non e' un link e va detto anche
   nel markup, con aria-current="page". */
.crumbs [aria-current="page"] { color: var(--c-ink); font-weight: 600; }

/* Le briciole erano scritte per il fondo chiaro, e --c-ink su navy e'
   invisibile: dentro una lastra scura prendono la stessa scala di
   attenuazione, ma in bianco. */
.section-dark .crumbs,
.section-blue .crumbs,
.page-hero .crumbs { color: var(--c-white-soft); }
.section-dark .crumbs li + li::before,
.section-blue .crumbs li + li::before,
.page-hero .crumbs li + li::before { color: rgba(255, 255, 255, 0.32); }
.section-dark .crumbs [aria-current="page"],
.section-blue .crumbs [aria-current="page"],
.page-hero .crumbs [aria-current="page"] { color: var(--c-white); }

/* ---------- Paginazione ---------- */
.pager { display: flex; align-items: center; gap: 8px; }
.pager a, .pager span {
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 12px;
  border-radius: 10px;
  border: 1px solid var(--c-line);
  font-size: 15px;
  font-variant-numeric: tabular-nums;
  transition: border-color .18s var(--ease), background-color .18s var(--ease);
}
.pager a:hover { border-color: var(--c-blue); }
.pager [aria-current="page"] { background: var(--c-blue); border-color: var(--c-blue); color: var(--c-white); }
.pager .is-disabled { color: var(--c-ink-soft); border-style: dashed; pointer-events: none; }
.pager .gap { border: none; min-width: 20px; padding: 0; color: var(--c-ink-soft); }

/* ---------- Finestra modale ----------
   Sul tag <dialog> nativo: la gestione del focus, la chiusura con Esc e lo
   strato superiore li fa il browser. Rifarli a mano significa rifarli peggio. */
.modal {
  width: min(560px, calc(100vw - 2 * var(--pad-mobile)));
  padding: clamp(24px, 3vw, 40px);
  border: none;
  border-radius: 20px;
  background: var(--c-surface);
  color: var(--c-ink);
  box-shadow: var(--shadow-2);
}
.modal::backdrop { background: rgba(0, 13, 51, 0.55); }
.modal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.modal-close {
  flex: none;
  width: 40px; height: 40px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--c-line);
  border-radius: 10px;
  background: none;
  color: var(--c-ink);
  transition: border-color .18s var(--ease);
}
.modal-close:hover { border-color: var(--c-blue); }
.modal-body { margin-top: var(--space-md); font-size: 16px; line-height: 1.55; color: var(--c-ink-soft); }
.modal-foot { margin-top: var(--space-xl); display: flex; flex-wrap: wrap; gap: 12px; justify-content: flex-end; }

/* ---------- Stato vuoto ----------
   Non dice "nessun risultato" e basta: dice anche che cosa si puo' fare. */
.empty-state {
  display: grid;
  justify-items: center;
  gap: var(--space-sm);
  padding: clamp(40px, 6vw, 80px) var(--space-lg);
  text-align: center;
  border: 1px dashed var(--c-line);
  border-radius: 20px;
}
.empty-state h3 { font-size: clamp(18px, 1.6vw, 22px); }
.empty-state p { max-width: 46ch; color: var(--c-ink-soft); line-height: 1.55; }

/* Lo stato vuoto vive anche sulle lastre colorate — sul blu di un archivio
   filtrato, per esempio — e li' il grigio del testo scende a 2,17:1. */
.section-dark .empty-state,
.section-blue .empty-state { border-color: rgba(255, 255, 255, 0.28); color: var(--c-white); }
.section-dark .empty-state p,
.section-blue .empty-state p { color: var(--c-white-soft); }

/* ---------- Scheletro di caricamento ----------
   Al posto di un cerchietto che gira: la forma di quello che sta arrivando,
   cosi' la pagina non salta quando il contenuto compare. */
.skeleton {
  border-radius: 8px;
  background: linear-gradient(90deg, var(--c-surface-alt) 25%, #EAECF3 37%, var(--c-surface-alt) 63%);
  background-size: 400% 100%;
  animation: skeleton-wave 1.4s ease-in-out infinite;
}
.skeleton.line { height: 12px; }
.skeleton.line + .skeleton.line { margin-top: 10px; }
.skeleton.media { aspect-ratio: 16 / 10; border-radius: 12px; }
@keyframes skeleton-wave {
  from { background-position: 100% 50%; }
  to   { background-position: 0 50%; }
}
@media (prefers-reduced-motion: reduce) {
  .skeleton { animation: none; }
}

/* ==========================================================================
   Coda di pagina — lo schema 6 del sistema
   --------------------------------------------------------------------------
   News, FAQ e footer in un unico blocco blu: chiude ogni pagina del sito.
   Viveva solo dentro .page-chisiamo, quindi per riusarla su Contatti o Privacy
   Policy sarebbe servito mettere class="page-chisiamo" su quelle pagine.
   Ora sta qui, e .cs-tail resta come alias: il markup di chi-siamo.html non si
   tocca.

   I corpi del testo vengono dalla scala di Chi siamo quando c'e' (--fs-*),
   altrimenti dal valore di ripiego, che e' lo stesso numero. Cosi' su Chi siamo
   la resa e' identica a prima, mobile compreso, e sulle altre pagine funziona
   senza dipendere da quel foglio.
   ========================================================================== */

.page-tail,
.cs-tail {
  /* Il colore del testo va dichiarato qui: su Chi siamo lo ereditava dalla
     pagina, ma su una pagina che non lo imposta il titolo delle card news
     restava navy sul blu — 2,94:1, cioe' illeggibile. */
  color: var(--c-white);
  --tail-radius: var(--cs-radius-panel, 40px);
  --tail-titolo: var(--fs-40, clamp(24px, 2.0833vw, 40px));
  --tail-testo:  var(--fs-24, clamp(16px, 1.25vw, 24px));
  background: var(--c-blue);
  border-radius: var(--tail-radius) var(--tail-radius) 0 0;
  padding-block: clamp(64px, 9.27vw, 178px) clamp(40px, 3.5vw, 67px);
}

/* --- Nastro news: schede piu' larghe della pagina, che scorrono di lato --- */
.tail-news-row,
.cs-news-row {
  display: flex;
  gap: clamp(14px, 1.67vw, 32px);
  margin-top: clamp(40px, 6.25vw, 120px);
  overflow-x: auto;
  /* overflow-y esplicito. Dichiarando solo overflow-x: auto, il CSS calcola
     overflow-y come "auto" e non come "visible": basta una riga di testo in
     piu' o un font che arriva tardi perche' dentro al nastro compaia uno
     scorrimento verticale di pochi pixel. Segnalato il 22/09 — "questa
     tipologia di sezioni non deve mai avere scorrimento verticale". */
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  list-style: none;
  padding: 0;
}
.tail-news-row::-webkit-scrollbar,
.cs-news-row::-webkit-scrollbar { display: none; }
.tail-news-row > li,
.cs-news-row > li {
  flex: 0 0 clamp(280px, 45.4vw, 872px);
  scroll-snap-align: start;
}
.tail-news-item,
.cs-news-item { display: block; color: inherit; text-decoration: none; }
.tail-news-item img,
.cs-news-item img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  transition: transform .7s var(--ease);
}
.tail-news-item:hover img,
.cs-news-item:hover img { transform: scale(1.03); }
.tail-news-date,
.cs-news-date {
  display: block;
  margin: clamp(12px, 1.04vw, 20px) 0 clamp(6px, .42vw, 8px);
  font-size: var(--tail-testo);
  line-height: 1.3;
  font-variation-settings: "MONO" 100, "wght" 400;
  color: var(--c-white);
}
.tail-news-item h3,
.cs-news-item h3 { font-size: var(--tail-titolo); line-height: 1.25; font-weight: 500; margin: 0; }
.tail-news-item p,
.cs-news-item p {
  font-size: var(--tail-testo);
  line-height: 1.25;
  font-weight: 500;
  margin: clamp(6px, .42vw, 8px) 0 0;
}

/* --- Fotografia della card: targhetta vettoriale e pulsante quadrato ------ */
.tail-news .thumb,
.cs-news .thumb {
  position: relative;
  aspect-ratio: 872 / 490;
  border-radius: clamp(8px, .63vw, 12px);
  overflow: hidden;
}
.tail-news .thumb img,
.cs-news .thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tail-news-cat,
.cs-news-cat {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  align-items: flex-end;
  padding: 0 0 clamp(10px, 1.3vw, 25px) clamp(14px, 1.82vw, 35px);
  color: var(--c-white);
  font-size: clamp(12px, 1.04vw, 20px);
  line-height: 1.3;
  text-transform: uppercase;
  font-variation-settings: "MONO" 100, "wght" 400;
  pointer-events: none;
}
/* La targhetta e' l'asset vettoriale del Figma (265.388x201.222 su 872x490):
   ricostruirla con border-radius da' una forma simile ma diversa. */
.tail-news-cat::before,
.cs-news-cat::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 0;
  bottom: 0;
  width: 30.43%;
  height: 41.07%;
  background-image: url("../assets/img/news-cat-shape.svg");
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.tail-news-go,
.cs-news-go {
  position: absolute;
  right: clamp(6px, .47vw, 9px);
  bottom: clamp(8px, .63vw, 12px);
  width: clamp(44px, 4.17vw, 80px);
  height: clamp(44px, 4.17vw, 80px);
  border-radius: clamp(10px, .83vw, 16px);
  background: var(--c-white);
  color: var(--c-navy);
  display: grid;
  place-items: center;
  z-index: 2;
  transition: background-color .2s var(--ease);
}
.tail-news-go:hover,
.cs-news-go:hover { background: #e9ecf5; }
.tail-news-go svg,
.cs-news-go svg { width: 26%; height: auto; }

/* --- FAQ: l'accordion del sito, rivestito con la grammatica della coda ---- */
.tail-faq,
.cs-faq { margin-top: clamp(64px, 6.4vw, 123px); }
.tail-faq .faq-list,
.cs-faq .faq-list { margin-top: clamp(32px, 3.33vw, 64px); }
/* Le FAQ della Coda e di Chi siamo condividono ormai tutto con l'accordion di
   base: qui resta solo la scala tipografica, che nella Coda e' piu' grande. */
/* Feedback cliente: la domanda era troppo grande. Scende di un gradino della
   scala — da --fs-40 a --fs-28 — invece di prendere una misura inventata: una
   domanda non e' un titolo di sezione, e a quel corpo lo sembrava. */
.tail-faq .acc-trigger,
.cs-faq .acc-trigger { font-size: var(--fs-28); }
.tail-faq .acc-panel,
.cs-faq .acc-panel { font-size: var(--fs-20); }

@media (max-width: 900px) {
  /* Su Chi siamo questi token li ritara' gia' chisiamo.css sulla pagina intera;
     qui si ritarano per le pagine che quel foglio non lo caricano. */
  .page-tail {
    --tail-radius: 24px;
    --tail-titolo: clamp(21px, 6.1vw, 30px);
    --tail-testo:  clamp(15px, 4.1vw, 19px);
  }
  .tail-news-row > li,
  .cs-news-row > li { flex-basis: 84vw; }
  .tail-faq .acc-trigger span, .tail-faq .acc-panel,
  .cs-faq .acc-trigger span,   .cs-faq .acc-panel { max-width: 100%; }
}

/* ==========================================================================
   Modificatori di fondo di sezione
   --------------------------------------------------------------------------
   Blu e' il tavolo, navy e' l'accento, il bianco alternativo serve alle
   superfici di servizio. Stavano in solutions.css quando era il foglio di una
   sola landing: adesso li usa ogni pagina, quindi stanno qui.
   Ogni sezione a tutta larghezza deve comunque dichiarare data-nav-theme,
   altrimenti l'header non sa di che colore diventare.
   ========================================================================== */

.section-alt  { background: var(--c-surface-alt); }
.section-blue { background: var(--c-blue); color: var(--c-white); }
.section-dark { background: var(--c-navy); color: var(--c-white); }
.section-blue .eyebrow,
.section-dark .eyebrow,
.section-blue .eyebrow { color: var(--c-white); }
.section-blue .lead { color: rgba(255, 255, 255, 0.85); }
.section-dark .lead { color: var(--c-white-soft); }

/* ==========================================================================
   Corpo di testo lungo — .prose
   --------------------------------------------------------------------------
   L'unica lacuna vera del sistema: privacy, cookie policy, dichiarazione di
   accessibilita' e il futuro template Articolo sono quarantamila battute di
   testo continuo, e non c'era un componente per tenerle.

   Due scelte che vanno spiegate perche' contraddicono le abitudini del resto
   del sito: la riga e' 68ch e non 62, perche' un testo che si legge in blocco
   tollera — anzi chiede — una riga piu' lunga di un paragrafo che si legge a
   colpo d'occhio; e il colore e' --c-ink pieno, non --c-ink-soft, perche' qui
   il testo lungo e' contenuto primario, non commento. Il grigio e' pensato per
   due righe, non per nove capitoli.
   ========================================================================== */

.prose {
  max-width: 68ch;
  font-size: 17px;
  line-height: 1.7;
  color: var(--c-ink);
}
.prose > * + * { margin-top: 1.1em; }

/* Due soli livelli di titolo. Se serve un quarto livello, il capitolo era due
   capitoli. */
.prose h2 {
  margin-top: 2.4em;
  font-size: clamp(22px, 1.88vw, 30px);
  line-height: 1.25;
  /* Senza questo, ogni ancora atterra sotto l'header fisso e il lettore vede
     il paragrafo invece del titolo che ha appena cliccato. */
  scroll-margin-top: clamp(88px, 8vw, 140px);
}
.prose h3 {
  margin-top: 1.8em;
  font-size: clamp(18px, 1.35vw, 21px);
  line-height: 1.35;
  scroll-margin-top: clamp(88px, 8vw, 140px);
}
.prose h2:first-child, .prose h3:first-child { margin-top: 0; }

/* Il reset globale delle liste ha specificita' zero (:where), quindi qui il
   rientro va ridichiarato: senza, gli elenchi puntati della privacy policy lo
   perdono e il testo si appiattisce. */
.prose ul, .prose ol { padding-left: 1.4em; margin-top: 1.1em; }
.prose li + li { margin-top: .5em; }
.prose li::marker { color: var(--c-ink-soft); }

/* Nella Cookie Policy gli indirizzi dei browser sono scritti per esteso, e un
   URL e' una parola sola lunga ottanta caratteri: sul telefono sfondava la
   pagina. Si spezza dove capita — e' un indirizzo, non una frase. */
.prose a[href^="http"] { overflow-wrap: anywhere; }

/* Anagrafiche e definizioni: due colonne, non una tabella. Una tabella serve a
   confrontare, e sei righe di dati societari non si confrontano fra loro. */
.prose dl { display: grid; grid-template-columns: max-content 1fr; gap: .6em 1.6em; margin-top: 1.4em; }
.prose dt { font-weight: 600; color: var(--c-ink); }
.prose dd { margin: 0; color: var(--c-ink-soft); }
@media (max-width: 560px) { .prose dl { grid-template-columns: 1fr; gap: .2em; } .prose dd { margin-bottom: .8em; } }

.prose strong { font-weight: 600; }
.prose .data-table { margin-top: 1.6em; }
.prose .msg { margin-top: 1.8em; }
/* Niente giustificato: fiumi bianchi, e in italiano con parole lunghe e' peggio. */
.prose p { text-wrap: pretty; }

/* --- Indice del documento -------------------------------------------------
   Non e' un settimo schema: e' la colonna sinistra dello schema 2, al posto
   dell'occhiello. Sotto i 1100px diventa un <details> nativo, che funziona
   senza JavaScript e occupa una riga. */
.prose-toc { font-size: 14.5px; line-height: 1.45; }
.prose-toc ol { list-style: none; margin: 0; padding: 0; counter-reset: toc; }
.prose-toc li { counter-increment: toc; }
.prose-toc li + li { margin-top: .7em; }
.prose-toc a {
  display: block;
  color: var(--c-ink-soft);
  text-decoration: none;
  border-left: 1px solid var(--c-line);
  padding-left: 12px;
  transition: color .18s var(--ease), border-color .18s var(--ease);
}
/* Su telefono l'indice e' un elenco di comandi, non di note: ogni voce si
   tocca con un dito. Su desktop resta compatto, dove il puntatore e' preciso. */
@media (max-width: 900px) {
  .prose-toc a { min-height: 44px; display: flex; align-items: center; }
  .prose-toc li + li { margin-top: 0; }
}
.prose-toc a::before { content: counter(toc) ". "; font-variation-settings: "MONO" 100, "wght" 500; }
.prose-toc a:hover { color: var(--c-ink); border-color: var(--c-blue); }
.prose-toc a.is-corrente { color: var(--c-ink); border-color: var(--c-blue); font-weight: 600; }
.prose-toc summary { cursor: pointer; font-weight: 600; color: var(--c-ink); padding: 12px 0; }
@media (min-width: 1100px) {
  .prose-toc { position: sticky; top: clamp(88px, 8vw, 140px); }
  .prose-toc summary { display: none; }
  .prose-toc[open] > ol, .prose-toc > ol { display: block; }
}

/* ==========================================================================
   Modificatrici mancanti dei componenti esistenti
   ========================================================================== */

/* Le targhette di tipologia erano quattro: mancavano la CER e una neutra per i
   tag senza colore proprio (le aree di Careers, la data di un documento). */
.pill-badge.cer     { background: rgba(var(--c-blue-rgb), 0.08); color: var(--c-navy); }
.pill-badge.neutral { background: rgba(var(--c-navy-rgb), 0.06); color: var(--c-ink-soft); }
/* Lime con testo blu: l'unico accostamento ammesso sul lime, 6,06:1. Serve al
   richiamo sull'amianto, che nella pagina Lastrico Solare deve vedersi da
   lontano. E' informazione, non decorazione: non va usata altrove. */
.pill-badge.amianto { background: var(--c-lime); color: var(--c-blue); font-size: 14px; padding: 9px 18px; }
/* Le pillole di categoria sono disegnate per il fondo chiaro: .bess e' navy
   su bianco, e su una lastra navy sparisce. Su fondo scuro prendono tutte lo
   stesso trattamento — velo bianco e testo bianco — e la categoria la porta
   l'etichetta, che e' scritta per esteso. Codificarle a colori richiederebbe
   quattro tinte leggibili sul navy che la palette non ha: due accenti (bianco
   e lime) non possono distinguere quattro categorie. */
.on-dark .pill-badge,
.section-blue .pill-badge,
.section-dark .pill-badge,
.proj-card .pill-badge,
.scheda-news .pill-badge { background: rgba(255, 255, 255, 0.14); color: var(--c-white); }
/* L'unica che resta se stessa: lime su blu, gia' pensata per il fondo scuro. */
.on-dark .pill-badge.amianto,
.section-blue .pill-badge.amianto,
.section-dark .pill-badge.amianto { background: var(--c-lime); color: var(--c-blue); }

/* Chip di filtro: e' .choice fatta a pillola. Sotto c'e' un radio nativo, che
   da' gratis le frecce da tastiera, il ruolo semantico e un solo attivo per
   volta — cose che rifatte a mano si sbagliano. */
.choice-chip {
  display: inline-flex;
  align-items: center;
  gap: 0;
  min-height: 44px;
  padding: 0 18px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--c-line-on-dark);
  color: rgba(255, 255, 255, 0.82);
  font-size: 14px;
  letter-spacing: .02em;
  cursor: pointer;
  transition: background-color .18s var(--ease), border-color .18s var(--ease), color .18s var(--ease);
}
.choice-chip input { position: absolute; opacity: 0; width: 0; height: 0; }
.choice-chip:hover { border-color: var(--c-white); color: var(--c-white); }
.choice-chip:has(input:checked) { background: var(--c-white); border-color: var(--c-white); color: var(--c-navy); font-weight: 600; }
.choice-chip:has(input:focus-visible) { outline: 2px solid var(--c-lime); outline-offset: 2px; }
.section-alt .choice-chip, .prose .choice-chip {
  border-color: var(--c-line); color: var(--c-ink-soft);
}
.section-alt .choice-chip:has(input:checked) { background: var(--c-blue); border-color: var(--c-blue); color: var(--c-white); }

/* ---------- Campo file ----------
   L'input nativo e' il pezzo di interfaccia piu' vecchio del web: un bottone
   grigio di sistema e la scritta «Nessun file selezionato». Non si puo'
   vestire, ma non va nemmeno tolto con display:none — sparirebbe dall'ordine
   di tabulazione. Si nasconde alla vista e si comanda con la sua <label>, che
   e' cliccabile per definizione e non ha bisogno di JavaScript.

   Quello che si vede e' un'area di rilascio: si puo' cliccare, ci si puo'
   trascinare dentro un file, e a scelta fatta racconta che cosa ha preso e
   quanto pesa, con un modo per toglierlo. */
.field-file { display: grid; gap: 10px; }
.field-file input[type="file"] {
  position: absolute;
  width: 1px; height: 1px;
  opacity: 0;
  overflow: hidden;
}
.field-file-area {
  display: flex;
  align-items: center;
  gap: clamp(12px, 1.1vw, 18px);
  min-height: 84px;
  padding: clamp(14px, 1.1vw, 20px) clamp(16px, 1.25vw, 22px);
  border: 1px dashed var(--c-line);
  border-radius: var(--radius-card);
  background: var(--c-surface);
  color: var(--c-ink);
  cursor: pointer;
  transition: border-color .2s var(--ease), background-color .2s var(--ease);
}
.field-file-icona {
  flex: none;
  width: 44px; height: 44px;
  border-radius: 12px;
  display: grid; place-items: center;
  background: rgba(var(--c-blue-rgb), 0.1);
  color: var(--c-blue);
  transition: background-color .2s var(--ease), color .2s var(--ease);
}
.field-file-icona svg { width: 22px; height: 22px; }
.field-file-testo { display: grid; gap: 3px; min-width: 0; }
.field-file-invito { font-size: 15px; font-weight: 500; }
.field-file-invito u { text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
.field-file-formati { font-size: 13px; line-height: 1.4; color: var(--c-ink-soft); }
.field-file-nome { font-size: 15px; font-weight: 500; overflow-wrap: anywhere; }
.field-file-peso { font-size: 13px; color: var(--c-ink-soft); }

@media (hover: hover) { .field-file-area:hover { border-color: var(--c-blue); } }
.field-file input[type="file"]:focus-visible + .field-file-area {
  border-color: var(--c-blue);
  box-shadow: 0 0 0 3px rgba(var(--c-blue-rgb), 0.18);
}
/* Mentre un file sta sopra l'area: la classe la mette js/main.js */
.field-file-area.is-sopra { border-color: var(--c-blue); border-style: solid; background: rgba(var(--c-blue-rgb), 0.06); }
/* A scelta fatta il tratteggio diventa pieno: non c'e' piu' niente da fare. */
.field-file.ha-file .field-file-area { border-style: solid; border-color: var(--c-blue); }
.field-file.ha-file .field-file-icona { background: var(--c-blue); color: var(--c-white); }

.field-file-togli {
  margin-left: auto;
  flex: none;
  width: 34px; height: 34px;
  border-radius: 10px;
  border: 1px solid var(--c-line);
  background: transparent;
  color: var(--c-ink-soft);
  display: grid; place-items: center;
  cursor: pointer;
  transition: color .18s var(--ease), border-color .18s var(--ease);
}
.field-file-togli svg { width: 15px; height: 15px; }
.field-file-togli:hover { color: var(--c-error); border-color: var(--c-error); }

/* Sulle lastre colorate, come ogni altro controllo del sistema. */
.section-dark .field-file-area,
.section-blue .field-file-area {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.38);
  color: var(--c-white);
}
.section-dark .field-file-icona,
.section-blue .field-file-icona { background: rgba(255, 255, 255, 0.14); color: var(--c-white); }
.section-dark .field-file-formati, .section-blue .field-file-formati,
.section-dark .field-file-peso,    .section-blue .field-file-peso { color: var(--c-white-soft); }
.section-dark .field-file-togli,
.section-blue .field-file-togli { color: var(--c-white-soft); border-color: rgba(255, 255, 255, 0.32); }
.section-dark .field-file-togli:hover,
.section-blue .field-file-togli:hover { color: var(--c-lime); border-color: var(--c-lime); }
@media (hover: hover) {
  .section-dark .field-file-area:hover,
  .section-blue .field-file-area:hover { border-color: var(--c-lime); }
}
.section-dark .field-file-area.is-sopra, .section-blue .field-file-area.is-sopra,
.section-dark .field-file.ha-file .field-file-area, .section-blue .field-file.ha-file .field-file-area {
  border-color: var(--c-lime); border-style: solid; background: rgba(255, 255, 255, 0.1);
}
.section-dark .field-file.ha-file .field-file-icona,
.section-blue .field-file.ha-file .field-file-icona { background: var(--c-lime); color: var(--c-blue); }

/* Testata della coda: occhiello a sinistra, testo e CTA da meta' pagina.
   E' lo schema 2, rifatto con classi proprie perche' .cs-split vive in
   chisiamo.css e le altre pagine quel foglio non lo caricano. */
.tail-head { display: grid; gap: clamp(16px, 2vw, 32px); align-items: start; }
@media (min-width: 900px) { .tail-head { grid-template-columns: 1fr 1fr; } }
.tail-eyebrow {
  font-size: clamp(13px, 1.5625vw, 30px);
  font-weight: 500;
  letter-spacing: .04em;
  text-transform: uppercase;
  font-variation-settings: "MONO" 100, "wght" 500;
  color: var(--c-white);
  margin: 0;
}
.tail-head p { color: rgba(255, 255, 255, .88); font-size: clamp(15px, 1.25vw, 20px); line-height: 1.45; }
.tail-head .btn { margin-top: clamp(16px, 1.46vw, 28px); }
.tail-faq { margin-top: clamp(64px, 6.4vw, 123px); }
.tail-faq .tail-eyebrow { margin-bottom: clamp(20px, 2vw, 40px); }

/* ==========================================================================
   Schema 2 — sezione a due colonne
   --------------------------------------------------------------------------
   Occhiello a sinistra, titolo, testo e CTA da meta' pagina: e' lo schema piu'
   usato del sito. Esisteva solo come .cs-split in chisiamo.css, cioe' su una
   pagina sola; qui serve a tutte.
   ========================================================================== */

.split { display: grid; gap: clamp(20px, 2.5vw, 48px); align-items: start; }
@media (min-width: 900px) { .split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.split > .split-col > * + * { margin-top: clamp(14px, 1.25vw, 24px); }
/* min-width: 0 sulle colonne: senza, un figlio largo — una tabella con
   min-width, un blocco di codice — allarga la traccia della griglia e con lei
   tutta la pagina. E' il comportamento predefinito di grid, non un difetto
   del figlio. */
.split > .split-col { min-width: 0; }

/* Schema 2 con una fotografia in una delle due colonne. .split-inverso mette
   l'immagine a sinistra senza cambiare l'ordine del markup: sotto i 900px le
   colonne si impilano e il testo deve venire comunque prima. */
.split-media { align-items: center; }
.split-figura { margin: 0; border-radius: 20px; overflow: hidden; aspect-ratio: 4/3; }
.split-figura img { width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 900px) {
  .split-inverso > .split-col:first-child { order: 2; }
  .split-inverso > .split-col:last-child { order: 1; }
}
@media (max-width: 899px) {
  .split-inverso > .split-col:first-child { order: 2; }
}

/* La tabella sulle lastre colorate: il grigio delle intestazioni e i filetti
   navy spariscono sul blu. */
.data-table.on-dark,
.section-dark .data-table,
.section-blue .data-table { color: var(--c-white); }
.data-table.on-dark caption,
.data-table.on-dark thead th,
.section-blue .data-table caption,
.section-blue .data-table thead th { color: var(--c-white-soft); }
.data-table.on-dark th, .data-table.on-dark td,
.section-blue .data-table th, .section-blue .data-table td { border-bottom-color: rgba(255, 255, 255, 0.22); }
.data-table.on-dark thead th,
.section-blue .data-table thead th { border-bottom-color: rgba(255, 255, 255, 0.4); }
/* ---------- Elenco di documenti ----------
   Erano quattro righe di tabella su due colonne, con un metro di spazio
   bianco fra il nome del documento e la parola «In aggiornamento», e il
   titolo appoggiato all'intestazione. Un elenco di quattro voci con un solo
   dato per voce non e' una tabella: non c'e' niente da confrontare in
   colonna. Qui ogni documento e' un riquadro con la sua icona, e i quattro
   stanno su due colonne invece che su una riga lunga come la pagina. */
.documenti-blocco { margin-top: clamp(56px, 6vw, 104px); }
.documenti-testa {
  display: flex; flex-wrap: wrap; align-items: baseline;
  justify-content: space-between; gap: 12px clamp(20px, 2vw, 40px);
  padding-bottom: clamp(18px, 1.6vw, 26px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.22);
}
.documenti-testa .nota-documenti { max-width: 46ch; margin: 0; }

/* Le colonne sono dichiarate, non calcolate: con auto-fill quattro documenti
   finivano 3 + 1, e una riga con un solo riquadro sembra un errore. Due o
   quattro per riga, mai tre. */
.doc-griglia {
  margin-top: clamp(20px, 2vw, 32px);
  list-style: none; padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(12px, 1.2vw, 20px);
}
@media (min-width: 620px) { .doc-griglia { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .doc-griglia { grid-template-columns: repeat(4, 1fr); } }
.doc-voce {
  display: grid;
  grid-template-columns: auto 1fr;
  /* La seconda riga si prende quello che avanza: cosi' l'etichetta di stato
     va in fondo e i quattro riquadri la mostrano tutti alla stessa altezza,
     anche quando i nomi occupano una riga sola o quattro. */
  grid-template-rows: auto 1fr;
  align-items: start;
  gap: 10px clamp(14px, 1.2vw, 20px);
  padding: clamp(18px, 1.6vw, 26px) clamp(18px, 1.6vw, 26px) clamp(16px, 1.4vw, 22px);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--radius-card, 16px);
  background: rgba(255, 255, 255, 0.04);
  color: var(--c-white);
  text-decoration: none;
}
.doc-icona { grid-row: 1 / 3; width: 26px; height: 26px; color: var(--c-white-soft); }
.doc-nome { font-size: 16px; font-weight: 500; line-height: 1.4; }
.doc-stato { justify-self: start; align-self: end; white-space: nowrap; }
/* L'etichetta di stato si dipinge da se': la pillola neutra prende il colore
   chiaro da .section-dark, e fuori da una lastra scura — nella pagina del
   design system, per esempio — restava scura su scuro. Un componente porta
   con se' il proprio contrasto. */
.doc-voce .pill-badge {
  font-size: 12px;
  background: rgba(255, 255, 255, 0.14);
  color: var(--c-white);
  border-color: transparent;
}

/* Quando il PDF arriva la voce diventa un <a>: la freccia prende il posto
   dell'etichetta di stato, e il riquadro reagisce al passaggio. */
a.doc-voce { transition: border-color .2s var(--ease), background-color .2s var(--ease); }
@media (hover: hover) {
  a.doc-voce:hover { border-color: var(--c-white); background: rgba(255, 255, 255, 0.09); }
}
a.doc-voce:focus-visible { outline: 2px solid var(--c-lime); outline-offset: 3px; }

@media (max-width: 720px) {
  .documenti-testa { flex-direction: column; align-items: flex-start; }
}

.nota-documenti { font-size: 14px; line-height: 1.5; color: var(--c-white-soft); }

/* ---------- Frecce di un nastro orizzontale: .strip-nav ----------
   Le costruisce js/main.js su ogni [data-strip-frecce]. Stanno sotto alla
   testata della sezione e sopra al nastro, dove il cliente le ha chieste.

   Sono piccole di proposito. Il sito ha gia' un bottone tondo grande — .news-go
   e .fc-go, 80px — ma quello e' l'invito ad aprire una scheda: e' il gesto
   principale di quella card. Questo e' un aiuto per chi ha un mouse senza
   rotella orizzontale, e se ha lo stesso peso dell'altro competono. Stessa
   famiglia visiva, meta' della voce. */
.strip-nav {
  display: flex;
  gap: 8px;
  margin: clamp(16px, 1.6vw, 28px) 0 clamp(14px, 1.3vw, 22px);
}
.strip-nav[hidden] { display: none; }
.strip-nav-btn {
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.34);
  background: transparent;
  color: var(--c-white);
  cursor: pointer;
  padding: 0;
  transition: background-color .2s var(--ease), border-color .2s var(--ease),
              color .2s var(--ease), opacity .2s var(--ease);
}
.strip-nav-btn svg { width: 18px; height: 18px; }
.strip-nav-btn.verso-indietro svg { transform: scaleX(-1); }
.strip-nav-btn:hover:not(:disabled) {
  background: var(--c-white);
  border-color: var(--c-white);
  color: var(--c-navy);
}
/* Disabilitata resta visibile ma spenta: farla sparire sposterebbe l'altra
   freccia sotto al cursore proprio mentre ci si sta cliccando sopra. */
.strip-nav-btn:disabled { opacity: .3; cursor: default; }

/* Su fondo chiaro il bianco sparisce. */
.sezione-bianca .strip-nav-btn,
.section-light .strip-nav-btn {
  border-color: rgba(0, 13, 51, 0.24);
  color: var(--c-navy);
}
.sezione-bianca .strip-nav-btn:hover:not(:disabled),
.section-light .strip-nav-btn:hover:not(:disabled) {
  background: var(--c-navy);
  border-color: var(--c-navy);
  color: var(--c-white);
}

/* Il cenno: due scatti verso destra, poi basta. Dice "di qua" senza chiedere
   niente e senza ripetersi all'infinito. */
@keyframes strip-cenno {
  0%, 100% { transform: translateX(0); }
  15%, 45%  { transform: translateX(5px); }
  30%, 60%  { transform: translateX(0); }
}
.strip-nav-btn.fa-cenno { animation: strip-cenno 1.6s var(--ease) 1; }

/* Questi nastri hanno un margine superiore grande, pensato per staccarli
   dalla testata della sezione. Con le frecce in mezzo quel margine finirebbe
   sotto ai bottoni e li lascerebbe a mezz'aria, lontani da cio' che comandano:
   lo stacco ce l'ha gia' la barra. */
/* Solo quando le frecce ci sono davvero. Con :not([hidden]) il margine resta
   al suo posto sui nastri che non hanno niente da scorrere e che quindi
   nascondono la barra: senza questa precisazione il margine spariva comunque
   e la CTA della sezione finiva incollata alle schede (segnalato il 22/09). */
.strip-nav:not([hidden]) + .tail-news-row,
.strip-nav:not([hidden]) + .cs-news-row,
.strip-nav:not([hidden]) + .cs-media-row,
.strip-nav:not([hidden]) + .cs-projects-grid,
.strip-nav:not([hidden]) + .news-grid { margin-top: 0; }

/* Mentre il codice anima lo scorrimento, lo snap si mette da parte: altrimenti
   riaggancia la posizione a ogni fotogramma e il movimento vibra. Vale per
   qualunque nastro, perche' la classe la mette js/main.js sull'elemento su cui
   sta lavorando. */
.sta-scorrendo { scroll-snap-type: none !important; scroll-behavior: auto !important; }

/* La sfumatura sul bordo destro del nastro: l'ultima card non finisce, sfuma.
   E' il secondo invito a scorrere, quello che si vede anche senza guardare le
   frecce. Sparisce quando non c'e' piu' niente a destra. */
[data-strip-frecce].ha-altro-a-destra {
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 90px), transparent 100%);
  mask-image: linear-gradient(to right, #000 calc(100% - 90px), transparent 100%);
}

@media (prefers-reduced-motion: reduce) {
  .strip-nav-btn.fa-cenno { animation: none; }
}

/* Quando la rete di sicurezza di [data-in-vista] interviene, le animazioni
   d'ingresso di quella sezione si spengono tutte: significa che su questo
   dispositivo non stanno girando, e cio' che conta e' che il contenuto si
   veda. Vale solo dentro una sezione che ha dichiarato [data-in-vista], mai
   per il resto della pagina. */
.e-in-vista.senza-attesa,
.e-in-vista.senza-attesa *,
.e-in-vista.senza-attesa *::before,
.e-in-vista.senza-attesa *::after { animation: none !important; }

/* ---------- Lastra di vetro dietro a un blocco: .lastra-vetro ----------
   Il vetro nel sito c'era gia' in quattro posti — la pillola della nav, il
   pannello del dropdown, il menu mobile, la scheda del progetto in evidenza —
   ma ogni volta riscritto, con sfocature diverse e un fallback diverso. Questa
   e' la stessa idea resa riusabile: serve ovunque un testo debba stare sopra a
   qualcosa che si muove o a una fotografia, e debba restare leggibile.

   La lastra e' un ::before dietro al contenuto, non un fondo sull'elemento:
   cosi' deborda oltre il testo di quel tanto che basta a fare da respiro, senza
   che il blocco debba avere un padding che ne cambierebbe la posizione.

   isolation:isolate e' necessario. Senza, lo z-index -1 farebbe sprofondare la
   lastra sotto al fondo della sezione che la ospita, e il testo tornerebbe
   esattamente sopra a cio' da cui lo si voleva staccare.

   Il fallback non e' opzionale: senza backdrop-filter la lastra sarebbe quasi
   trasparente e non farebbe niente, che e' il caso peggiore — l'effetto sembra
   funzionare in sviluppo e sparisce sul dispositivo di qualcuno. */
.lastra-vetro {
  position: relative;
  isolation: isolate;
}
/* Niente rettangolo. La prima versione era una lastra con un raggio e un
   bordo netto, e il cliente l'ha bocciata subito (22/09): su un fondo animato
   un riquadro pieno si legge come una toppa incollata sopra, non come
   profondita'.
   Ora l'alone non ha bordi. La sfocatura c'e' ancora, ma e' la maschera a
   spegnerla verso l'esterno: al centro il fondo e' calmo, ai lati torna il
   filo animato, e non c'e' nessuna linea che dica dove finisce una cosa e
   comincia l'altra. */
.lastra-vetro::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: calc(var(--lastra-y, 34px) * -1) calc(var(--lastra-x, 44px) * -1);
  background: radial-gradient(ellipse at center,
              var(--lastra-fondo, rgba(0, 13, 51, 0.72)) 0%,
              var(--lastra-fondo, rgba(0, 13, 51, 0.72)) 42%,
              rgba(0, 13, 51, 0) 78%);
  -webkit-backdrop-filter: blur(var(--lastra-sfocatura, 9px));
  backdrop-filter: blur(var(--lastra-sfocatura, 9px));
  -webkit-mask-image: radial-gradient(ellipse at center, #000 46%, transparent 76%);
  mask-image: radial-gradient(ellipse at center, #000 46%, transparent 76%);
  pointer-events: none;
}
/* Senza backdrop-filter resta il solo alone, che e' comunque sfumato: il
   ripiego non reintroduce il rettangolo che si e' appena tolto. */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .lastra-vetro::before {
    background: radial-gradient(ellipse at center,
                var(--lastra-fondo-pieno, rgba(0, 13, 51, 0.90)) 0%,
                var(--lastra-fondo-pieno, rgba(0, 13, 51, 0.90)) 48%,
                rgba(0, 13, 51, 0) 80%);
  }
}

/* La taratura per le sezioni di numeri. La scintilla sta bassa a
   sinistra, all'altezza delle cifre, dove prima non c'era niente; l'alone la
   raccoglie. Valori qui e non nella utility: la regola generale resta buona
   per ogni sezione, la posizione e' sempre una scelta di composizione. */
.sfondo-forme-numeri {
  --forme-x: -4%;
  --forme-y: 72%;
  --forme-dim: clamp(220px, 30vw, 540px);
  --forme-giro: -18deg;
  --forme-segno: rgba(255, 255, 255, 0.07);
  --forme-alone: rgba(0, 13, 51, 0.26);
}
/* Sta qui e non in home.css perche' la usano anche sostenibilita' e progetti,
   che caricano solutions.css: nel foglio della home sarebbe stata una regola
   scritta per tre pagine e applicata a una. */

/* ---------- Forme geometriche di sfondo: .sfondo-forme ----------
   Il cliente le ha chieste dicendo che certe sezioni sembravano "dimenticate,
   come se mancasse un'immagine". Non manca un'immagine: manca un fondo che
   abbia una profondita'. Qui la profondita' la fanno due strati sotto al
   contenuto — un'area di colore piu' densa che rompe la campitura piatta, e la
   scintilla del marchio ingrandita fino a diventare una forma astratta.

   Il segno e' il marchio, non un decoro inventato: assets/img/forma-scintilla.svg
   sono i quattro petali del logo. Entra come maschera e non come immagine, cosi'
   il colore arriva dal CSS e la stessa forma serve il blu e il navy senza avere
   due file da tenere allineati.

   I due strati sono sotto a tutto (z-index -1) e trasparenti agli eventi: non
   possono coprire un testo ne' intercettare un click. La sezione che li ospita
   ha bisogno di position:relative e di overflow:hidden, che .sfondo-forme mette
   da se'. Le variabili permettono di spostare la forma sezione per sezione
   senza riscrivere la regola. */
.sfondo-forme {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
/* L'area di colore: e' questa a dare il "contrasto di colori" chiesto in call.
   Un alone morbido, non un blocco con un bordo: un bordo netto su una sezione
   a tutta larghezza si legge come un errore di taglio dell'immagine. */
.sfondo-forme::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: auto auto 0 -10%;
  width: min(78%, 980px);
  aspect-ratio: 1;
  background: radial-gradient(circle at 35% 65%,
              var(--forme-alone, rgba(0, 13, 51, 0.30)) 0%,
              rgba(0, 13, 51, 0) 68%);
  pointer-events: none;
}
/* La scintilla. Grande, appena percepibile: deve dare un appiglio allo sguardo
   nella meta' vuota, non competere con le cifre. */
.sfondo-forme::after {
  content: "";
  position: absolute;
  z-index: -1;
  left: var(--forme-x, 2%);
  top: var(--forme-y, 50%);
  width: var(--forme-dim, clamp(180px, 26vw, 460px));
  aspect-ratio: 29.2 / 32;
  background-color: var(--forme-segno, rgba(255, 255, 255, 0.08));
  -webkit-mask: url("../assets/img/forma-scintilla.svg") center / contain no-repeat;
  mask: url("../assets/img/forma-scintilla.svg") center / contain no-repeat;
  transform: translateY(-50%) rotate(var(--forme-giro, -12deg));
  pointer-events: none;
}
/* Su schermo stretto la sezione non ha meta' vuote da riempire: la forma
   diventa solo rumore dietro al testo, e il contrasto ne soffre. */
@media (max-width: 900px) {
  .sfondo-forme::after { opacity: .5; }
  .sfondo-forme::before { width: 120%; }
}

/* Una riga di cifre a tutta larghezza. Dentro la colonna di uno .split quattro
   numeri si impilano 1/2/1 e lasciano mezza sezione vuota: quando le cifre
   sono il contenuto della sezione, la sezione e' loro. */
/* ---------- I numeri di una sezione ----------
   Due colonne, come i numeri della home.
   Erano impilati nella meta' destra — la disposizione del Figma — e lasciavano
   vuota tutta la meta' sinistra. E' lo stesso vuoto segnalato sulla home il
   21/09, e il 22/09 il cliente ha chiesto che tutte le sezioni di questo tipo
   avessero il layout nuovo: sostenibilita', progetti, valorizza-terreno e le
   cinque pagine soluzione usano questa classe, quindi cambia qui una volta
   sola.

   La scala resta quella di sezione, non quella della home: li' i numeri sono
   la pagina e arrivano a 93px, qui accompagnano un testo. */
.numeri-riga {
  margin-top: clamp(32px, 3.4vw, 64px);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(24px, 3.3vw, 64px);
  row-gap: clamp(28px, 3.2vw, 62px);
}
@media (max-width: 900px) { .numeri-riga { grid-template-columns: 1fr; } }
.numeri-riga .stat-callout .num { font-size: clamp(34px, 3.6vw, 58px); }
.numeri-riga .stat-callout .label { margin-top: clamp(6px, 0.7vw, 12px); }

/* La frase che si riempie allo scorrimento: e' l'affermazione della sezione,
   non un paragrafo in piu'. Una per pagina — applicata a due, non conta piu'
   niente. Il ripiego a bianco pieno vale quando il JavaScript non parte. */
/* La dichiarazione di una sezione: sta da sola, a tutta larghezza, staccata
   dal blocco di testo che la precede. Dentro la colonna diventava il terzo
   corpo di una pila — grande, piccolo, grande — e la gerarchia si perdeva. */
.section-evidenza {
  font-family: var(--font-display);
  font-size: clamp(24px, 2.6vw, 46px);
  line-height: 1.2;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--c-white);
  max-width: 22ch;
  margin-top: clamp(48px, 5.5vw, 104px);
}
@media (min-width: 900px) { .section-evidenza { max-width: 26ch; } }
.js-fill-text.section-evidenza .fw { color: rgba(255, 255, 255, 0.26); transition: color .35s var(--ease); }
.js-fill-text.section-evidenza .fw.is-on { color: var(--c-white); }
@media (prefers-reduced-motion: reduce) {
  .js-fill-text.section-evidenza .fw { color: var(--c-white); }
}

/* La sezione vetrina: una fotografia a tutta larghezza con la scheda in vetro.
   Il fondo e' quello della pagina — la fotografia e' il contenuto, non una
   decorazione sopra una tinta. */
/* Il colore del testo va dichiarato con il fondo: la lastra era navy e il
   titolo restava --c-ink, cioe' navy su navy. Il .lead aveva il suo colore e
   quindi il difetto si vedeva su una riga sola su due. */
.vetrina { background: var(--c-navy); color: var(--c-white); padding-block: 0; }
.vetrina-testa { padding-block: var(--section-gap) clamp(28px, 3vw, 56px); }
/* Il respiro fra il titolo e il testo che lo segue. Senza, il paragrafo si
   attacca all'ultima riga del titolo e i due si leggono come un blocco solo. */
.vetrina-testa > * + * { margin-top: clamp(18px, 1.7vw, 30px); }
.vetrina-testa .lead { color: var(--c-white-soft); max-width: 62ch; }
/* La fotografia e' la sezione: occupa tutta la larghezza, senza .wrap e senza
   raggio. E' il respiro fotografico dello schema 5, e per costruzione spezza
   qualunque sequenza di fondi uguali. */
.vetrina-media .featured-project {
  --panel-h: auto;
  --media-h: auto;
  --fp-radius: 0px;
  --fc-inset: clamp(24px, 4vw, 80px);
  border-radius: 0;
}

/* ==========================================================================
   Barra dei filtri
   --------------------------------------------------------------------------
   Sotto ci sono radio nativi: le frecce da tastiera, il ruolo semantico e
   l'unicita' della scelta sono gratis. Il filtro vero e' una regola CSS con
   :has() — senza JavaScript continua a funzionare, e sui browser che non
   conoscono :has() nessuna regola si applica, quindi restano visibili tutte le
   schede: il degrado atterra esattamente sullo stato «Tutti».
   ========================================================================== */

/* Le etichette scorrono con la pagina. Erano ancorate in alto (position:
   sticky) per restare a portata mentre si scorreva la griglia, ma il loro
   fondo e' ereditato dalla sezione e non copre le schede: scorrendo finivano
   sopra le card, illeggibili. Una barra ancorata ha bisogno di un fondo
   proprio; senza, e' meglio che scorra. */
.filtri {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 14px 0;
  margin-bottom: clamp(24px, 3vw, 48px);
}
.filtri fieldset { border: 0; margin: 0; padding: 0; display: contents; }
/* ---------- Testata di un elenco filtrabile ----------
   Il conteggio appartiene al titolo, non alla fila delle etichette: li' con
   le etichette che vanno a capo finiva sull'ultima riga, spaiato, a destra di
   una sola pillola. In alto dice quello che deve dire — quanti elementi ci
   sono — nel punto in cui lo si cerca. */
.testata-elenco {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px clamp(16px, 2vw, 32px);
  flex-wrap: wrap;
}
.testata-elenco > :first-child { margin: 0; }
.testata-elenco .filtri-conteggio { margin-left: auto; white-space: nowrap; }

.filtri-conteggio {
  margin-left: auto;
  font-size: 13px;
  letter-spacing: .04em;
  text-transform: uppercase;
  font-variation-settings: "MONO" 100, "wght" 500;
  color: rgba(255, 255, 255, .7);
}
.section-alt .filtri-conteggio, .prose .filtri-conteggio { color: var(--c-ink-soft); }

/* Griglia dei progetti: schede tutte uguali, senza fotografia. Metterne alcune
   con e altre senza — e le fotografie di sei impianti su otto non le abbiamo —
   avrebbe dato una griglia sbilenca. */
/* Quattro colonne al massimo, non calcolate. Con auto-fill a 1440px ne
   entravano cinque: schede da 215px per contenere etichetta, comune, due
   metriche affiancate, descrizione e codice — le metriche andavano a capo e
   la descrizione si spezzava in righe da quattro parole. E otto progetti su
   cinque colonne lasciavano una riga con tre celle vuote. */
.griglia-progetti {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(16px, 1.67vw, 28px);
  list-style: none;
  margin: 0;
  padding: 0;
}
@media (min-width: 620px)  { .griglia-progetti { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .griglia-progetti { grid-template-columns: repeat(4, 1fr); } }

/* L'estratto dentro una pagina Soluzione: due o tre schede secondo quante ne
   ha quella tipologia. auto-fit chiude le tracce vuote, quindi due schede
   riempiono la riga invece di lasciare una cella spaiata; il tetto di 400px
   impedisce che due schede si allarghino fino a sembrare due lastre. */
.griglia-progetti-estratto {
  margin-top: clamp(32px, 3.4vw, 56px);
  justify-content: start;
}
@media (min-width: 1000px) {
  .griglia-progetti-estratto { grid-template-columns: repeat(auto-fit, minmax(300px, 400px)); }
}
/* Le schede non si stirano all'altezza della riga: solo tre progetti su otto
   hanno una fotografia, e una scheda senza allungata fino a pareggiare quella
   con la foto lascia dentro di se' un buco di duecento pixel. Allineate in
   alto, la differenza di altezza si legge come quello che e' — una scheda ha
   un'immagine e un'altra no — invece che come un errore di impaginazione. */
.griglia-progetti { align-items: start; }
.griglia-progetti > li { display: flex; }
/* La ricerca nasconde le voci con l'attributo hidden, che vale display:none
   nel foglio del browser: un display dichiarato qui lo batte per specificita'
   e le voci nascoste resterebbero visibili. Vale per ogni elenco filtrabile. */
.griglia-progetti > li[hidden],
.griglia-news > li[hidden] { display: none; }
.griglia-progetti .proj-card { width: 100%; }
.griglia-progetti .proj-card .body { gap: 10px; }
.griglia-progetti .pill-badge { align-self: flex-start; }

/* Su una lastra navy la scheda progetto — che e' navy — sparirebbe: prende un
   velo bianco, come le schede degli articoli correlati. E' lo stesso rimedio
   in due punti perche' e' lo stesso problema: una card colorata come il fondo
   che la ospita. */
.section-dark .proj-card { background: rgba(255, 255, 255, 0.06); }
@media (hover: hover) {
  .section-dark .card-soluzione:hover,
  .section-dark .proj-card:hover { background: rgba(255, 255, 255, 0.1); }
}

/* Lo stato vuoto compare quando un filtro non trova nulla. E' CSS puro: la
   prima volta che questo componente, scritto e mai usato, serve davvero. */
.stato-vuoto-filtro { display: none; }

/* Le regole di filtro, una per categoria. Le genera tools/dati_progetti.py:
   aggiungere una categoria li' e rigenerare tiene allineati chip, schede e
   regole, che altrimenti divergono. */
.progetti:has(input[value="tetto"]:checked) .griglia-progetti > li:not([data-tipo="tetto"]) { display: none; }
.progetti:has(input[value="tetto"]:checked):not(:has(li[data-tipo="tetto"])) .stato-vuoto-filtro { display: grid; }
.progetti:has(input[value="terra"]:checked) .griglia-progetti > li:not([data-tipo="terra"]) { display: none; }
.progetti:has(input[value="terra"]:checked):not(:has(li[data-tipo="terra"])) .stato-vuoto-filtro { display: grid; }
.progetti:has(input[value="bess"]:checked) .griglia-progetti > li:not([data-tipo="bess"]) { display: none; }
.progetti:has(input[value="bess"]:checked):not(:has(li[data-tipo="bess"])) .stato-vuoto-filtro { display: grid; }

/* Indice delle soluzioni: la scheda progetto usata come collegamento. */
.card-soluzione { text-decoration: none; transition: transform .3s var(--ease), box-shadow .3s var(--ease); }
.card-soluzione .code { font-size: clamp(19px, 1.5vw, 24px); line-height: 1.2; font-weight: 500; }
.griglia-soluzioni { grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr)); }
@media (hover: hover) {
  .card-soluzione:hover { transform: translateY(-10px); box-shadow: var(--shadow-2); }
}

/* ---------- Moduli ----------
   La struttura di un modulo, non i suoi controlli: .field, .input, .textarea,
   .select, .is-invalid, .field-error e .msg-* esistono gia' sopra. Qui c'e'
   solo come stanno insieme. Il markup lo genera moduli/rendi.php dalla stessa
   definizione che il server usa per validare. */
.modulo { display: grid; gap: var(--space-lg); max-width: 720px; justify-items: start; }
.modulo-campi {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  gap: var(--space-md) var(--space-lg);
  width: 100%;
}
.modulo-campo-largo { grid-column: 1 / -1; }
.modulo-nota { font-size: 13px; color: var(--c-ink-soft); }
.modulo-nota .req { color: var(--c-error); }

/* L'esca anti-spam: fuori schermo, non type="hidden". Un campo hidden i bot
   lo compilano lo stesso; questo lo compilano solo loro, perche' i browser
   non lo mostrano e i lettori di schermo lo saltano. */
.esca {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Sulle lastre colorate i controlli sono chiari su fondo scuro: i bordi navy
   e il grigio delle etichette non si vedono. */
.section-dark .modulo,
.section-blue .modulo { color: var(--c-white); }
.section-dark .field-label, .section-blue .field-label { color: var(--c-white); }
.section-dark .field-hint, .section-blue .field-hint,
.section-dark .modulo-nota, .section-blue .modulo-nota { color: var(--c-white-soft); }
.section-dark .input, .section-dark .textarea, .section-dark .select,
.section-blue .input, .section-blue .textarea, .section-blue .select {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.3);
  color: var(--c-white);
}
.section-dark .input::placeholder, .section-blue .input::placeholder,
.section-dark .textarea::placeholder, .section-blue .textarea::placeholder { color: rgba(255, 255, 255, 0.6); }
.section-dark .input:focus-visible, .section-blue .input:focus-visible,
.section-dark .textarea:focus-visible, .section-blue .textarea:focus-visible,
.section-dark .select:focus-visible, .section-blue .select:focus-visible { border-color: var(--c-lime); }
.section-dark .choice, .section-blue .choice { color: var(--c-white); }
/* L'errore in rosso scuro sul blu sta sotto 3:1: sul fondo scuro diventa lime,
   che e' l'unico accento del sistema leggibile li'. */
.section-dark .field-error, .section-blue .field-error { color: var(--c-lime); }
.section-dark .field.is-invalid .input, .section-blue .field.is-invalid .input,
.section-dark .field.is-invalid .textarea, .section-blue .field.is-invalid .textarea,
.section-dark .field.is-invalid .select, .section-blue .field.is-invalid .select { border-color: var(--c-lime); }

/* Elenco di etichette: le aree in cui l'azienda opera, non filtri. */
.tag-list { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; margin: 0; padding: 0; }
.tag-list li {
  padding: 9px 16px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  font-size: 14px;
  line-height: 1.2;
}

/* Due CTA affiancate nell'apertura: una primaria e una secondaria, non due
   primarie — se pesano uguale non guidano piu' nessuno. */
.cta-coppia { display: flex; flex-wrap: wrap; gap: 14px; margin-top: clamp(26px, 2.4vw, 38px); }

/* La sezione bianca. Vale per il testo lungo (privacy, cookie, articoli) e per
   un componente di terzi che arriva coi suoi colori: imporre un fondo navy a
   un widget esterno vuol dire riscriverlo a ogni aggiornamento del fornitore.
   Non vale mai per una sezione di narrazione. */
.sezione-bianca { background: var(--c-white); color: var(--c-ink); }
.sezione-bianca .lead { color: var(--c-ink-soft); max-width: 68ch; }
.sezione-bianca .empty-state { margin-top: var(--space-xl); }
.ats { margin-top: var(--space-xl); }

/* La citazione: una testimonianza senza ritratto e' una citazione, non una
   scheda con l'iniziale al posto della faccia. */
.citazione { margin: var(--space-2xl) 0 0; max-width: 46ch; }
.citazione blockquote {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(22px, 2.2vw, 34px);
  line-height: 1.28;
  font-weight: 500;
  letter-spacing: -0.01em;
  text-wrap: balance;
}
.citazione blockquote::before { content: "\201C"; }
.citazione blockquote::after { content: "\201D"; }
.citazione figcaption {
  margin-top: 20px;
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-variation-settings: "MONO" 100, "wght" 500;
  color: var(--c-lime);
}

/* .link-inline e' blu: dentro una lastra scura scende sotto 3:1. Il
   modificatore .on-dark esiste, ma un link dentro un componente generato —
   il consenso privacy di un modulo, per esempio — non sa in che sezione
   finira'. Lo decide il contesto. */
.section-dark .link-inline,
.section-blue .link-inline,
.page-hero .link-inline { color: var(--c-lime); }
.section-dark .link-inline:hover,
.section-blue .link-inline:hover,
.page-hero .link-inline:hover { color: var(--c-white); }

/* ---------- I tre percorsi di Contatti ----------
   Non tre schede uguali con icona e titolo: tre scelte numerate, perche' qui
   la numerazione dice davvero qualcosa — sono tre strade alternative, e chi
   arriva ne prende una. Sono card a filo blu come la catena del valore di Chi
   siamo: numero in mono blu, e al passaggio il blu sale e riempie la card. */
.percorsi {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  gap: clamp(10px, 1.09vw, 21px);
  margin-top: clamp(36px, 3.4vw, 64px);
}
.percorso {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  padding: clamp(20px, 1.46vw, 28px);
  border: 2px solid var(--c-blue);
  border-radius: var(--radius-card);
  color: var(--c-white);
  text-decoration: none;
}
.percorso::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--c-blue);
  transform: translateY(101%);
  transition: transform var(--durata-riempimento) var(--ease-morbido);
}
.percorso .percorso-n {
  font-variation-settings: "MONO" 100, "wght" 500;
  font-size: clamp(18px, 1.25vw, 24px);
  line-height: 1.2;
  color: var(--c-blue);
  margin-bottom: clamp(12px, 1.6vw, 30px);
  transition: color .5s var(--ease);
}
.percorso p { font-size: 16px; line-height: 1.55; color: var(--c-white-soft); transition: color .5s var(--ease); }
.percorso .p-link {
  margin-top: auto;
  padding-top: 12px;
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  color: var(--c-white-soft);
  transition: color .5s var(--ease);
}
.percorso .p-link svg { width: 16px; height: 16px; }
.percorso:focus-visible { outline: 2px solid var(--c-lime); outline-offset: 3px; }
@media (hover: hover) {
  .percorso:hover::before { transform: translateY(0); }
  .percorso:hover .percorso-n,
  .percorso:hover p,
  .percorso:hover .p-link { color: var(--c-white); }
}
@media (prefers-reduced-motion: reduce) {
  .percorso::before { transition: none; }
}

/* Le sedi e i dati societari */
/* Le sedi hanno la forma dell'elenco hub di Chi siamo (.cs-hub-voce): nome
   grande a sinistra, ruolo in mono maiuscolo a destra, filetti fra le righe.
   Milano apre l'elenco con l'indirizzo, l'unico che si conosce per intero. */
.sedi { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--c-sep); }
.sede {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 16px;
  padding: clamp(14px, 1.25vw, 24px) 0;
  border-bottom: 1px solid var(--c-sep);
}
.sede .h3 { font-size: clamp(22px, 2.08vw, 40px); line-height: 1.1; font-weight: 500; margin: 0; }
.sede-ruolo {
  font-size: clamp(12px, 1.04vw, 20px);
  line-height: 1.2;
  font-variation-settings: "MONO" 100, "wght" 400;
  text-transform: uppercase;
  color: var(--c-white-soft);
}
.sede address { flex-basis: 100%; font-style: normal; font-size: 16px; line-height: 1.55; color: var(--c-white-soft); }
.sede-principale .h3 { color: var(--c-lime); }
.sedi-mappa { margin-top: clamp(24px, 2.08vw, 40px); }
.sedi-mappa svg { width: 13px; height: 13px; }

.dati-societari { display: grid; gap: 0; margin: 0; }
.dati-societari dt {
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-variation-settings: "MONO" 100, "wght" 500;
  color: rgba(255, 255, 255, 0.66);
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.22);
}
.dati-societari dt:first-child { padding-top: 0; border-top: 0; }
.dati-societari dd { margin: 6px 0 18px; font-size: 17px; }
.dati-societari dd:last-child { margin-bottom: 0; }

/* ---------- Pagine di documento (privacy, cookie, accessibilita') ----------
   Il corpo su fondo bianco e' l'unica eccezione del sistema, e vale solo per
   il testo lungo. L'indice a sinistra resta agganciato: sono documenti che si
   consultano, non che si leggono di seguito. */
.documento {
  display: grid;
  gap: clamp(28px, 3vw, 64px);
  padding-block: var(--space-3xl);
}
/* Stessa ragione dello .split: la tabella dei cookie ha min-width 560px e
   senza questo allarga la traccia, l'indice, e con loro tutta la pagina. */
.documento > * { min-width: 0; }
@media (min-width: 1000px) {
  .documento { grid-template-columns: minmax(200px, 260px) minmax(0, 1fr); align-items: start; }
  .prose-toc { position: sticky; top: calc(var(--ingombro-header) + 24px); }
}
.prose-toc-titolo {
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-variation-settings: "MONO" 100, "wght" 500;
  color: var(--c-ink-soft);
  margin-bottom: 14px;
}
/* Il numero sta fuori dal filetto, a sinistra: la lista deve lasciargli lo
   spazio, o sul telefono finisce mezzo fuori dallo schermo. */
.prose-toc ol { list-style: none; margin: 0; padding: 0 0 0 34px; display: grid; gap: 2px; counter-reset: toc; }
.prose-toc li { counter-increment: toc; }
.prose-toc a {
  display: block;
  padding: 7px 0 7px 26px;
  position: relative;
  font-size: 14px;
  line-height: 1.4;
  color: var(--c-ink-soft);
  border-left: 2px solid var(--c-line);
  padding-left: 14px;
  transition: color .18s var(--ease), border-color .18s var(--ease);
}
.prose-toc a::before {
  content: counter(toc, decimal-leading-zero);
  position: absolute;
  left: -34px;
  font-variation-settings: "MONO" 100, "wght" 500;
  font-size: 11px;
  color: var(--c-line);
}
.prose-toc a:hover { color: var(--c-ink); border-left-color: var(--c-blue); }
.prose-nota { font-size: 14px; color: var(--c-ink-soft); }

/* ==========================================================================
   IL GRIGIO SUL FONDO SCURO
   --c-ink-soft e' navy al 64%: sul bianco vale 5,88:1, sul navy vale 1:1 e
   sparisce. I componenti che lo usano sono nati per le lastre chiare e sono
   finiti anche su quelle scure — le tre sezioni navy obbligatorie delle
   pagine Soluzioni. Invece di aggiungere .on-dark a mano su ogni elemento,
   dove sarebbe sempre uno di troppo o uno di meno, lo decide il contesto.

   Resta fuori .news-card: ha un fondo chiaro proprio, e il grigio li' e'
   giusto.
   ========================================================================== */
.section-dark .step-item p,
.section-blue .step-item p,
.section-dark .company-copy p,
.section-blue .company-copy p,
.section-dark .project-card .meta,
.section-blue .project-card .meta { color: var(--c-white-soft); }

.section-dark .stat-callout .num,
.section-blue .stat-callout .num { color: var(--c-white); }
.section-dark .stat-callout .label,
.section-blue .stat-callout .label { color: rgba(255, 255, 255, 0.84); }

.section-dark .filtri-conteggio,
.section-blue .filtri-conteggio { color: rgba(255, 255, 255, 0.84); }

/* .btn-ghost e' bianco su bianco dentro una lastra chiara: e' nato per il
   fondo scuro, dove il sito lo usa quasi sempre. Nelle due sezioni bianche
   prende il navy, e il riempimento lime all'hover continua a funzionare. */
.sezione-bianca .btn-ghost,
.articolo-corpo .btn-ghost { color: var(--c-navy); border-color: var(--c-navy); }
.sezione-bianca .btn-ghost:hover,
.sezione-bianca .btn-ghost:focus-visible,
.articolo-corpo .btn-ghost:hover,
.articolo-corpo .btn-ghost:focus-visible { color: var(--c-navy); border-color: var(--c-lime); }

/* L'asterisco dei campi obbligatori e' rosso: sul blu vale 1,01:1. Sul fondo
   scuro prende il lime, come il messaggio d'errore. */
.section-dark .req,
.section-blue .req { color: var(--c-lime); }

/* ==========================================================================
   BENEFICI — schede, non colonne di testo
   Feedback cliente: una sezione fatta di sole colonne di testo non e' una
   sezione, e' un paragrafo spezzato in tre. Prendono il trattamento delle
   card della catena del valore di Chi siamo: filo blu, raggio, riempimento
   blu che sale dal basso al passaggio del mouse (solutions.css).

   Le icone sono le sette della catena del valore. Sono le uniche che il
   progetto possiede: l'abbinamento fra beneficio e icona sta nei dati
   (src/dati/soluzioni.json, campo «icona»), non qui, cosi' si puo' rivedere
   senza toccare il codice.
   ========================================================================== */
.ico-catena {
  display: block;
  width: clamp(52px, 4.2vw, 76px);
  height: clamp(52px, 4.2vw, 76px);
  background-color: var(--c-blue);
  -webkit-mask-position: left center;  mask-position: left center;
  -webkit-mask-size: contain;          mask-size: contain;
  -webkit-mask-repeat: no-repeat;      mask-repeat: no-repeat;
  transition: background-color .5s var(--ease);
}
.ico-01 { -webkit-mask-image: url("../assets/img/chisiamo/icone/01-origination.svg");        mask-image: url("../assets/img/chisiamo/icone/01-origination.svg"); }
.ico-02 { -webkit-mask-image: url("../assets/img/chisiamo/icone/02-project-development.svg"); mask-image: url("../assets/img/chisiamo/icone/02-project-development.svg"); }
.ico-03 { -webkit-mask-image: url("../assets/img/chisiamo/icone/03-engineering.svg");         mask-image: url("../assets/img/chisiamo/icone/03-engineering.svg"); }
.ico-04 { -webkit-mask-image: url("../assets/img/chisiamo/icone/04-construction.svg");        mask-image: url("../assets/img/chisiamo/icone/04-construction.svg"); }
.ico-05 { -webkit-mask-image: url("../assets/img/chisiamo/icone/05-connection.svg");          mask-image: url("../assets/img/chisiamo/icone/05-connection.svg"); }
.ico-06 { -webkit-mask-image: url("../assets/img/chisiamo/icone/06-asset-management.svg");    mask-image: url("../assets/img/chisiamo/icone/06-asset-management.svg"); }
.ico-07 { -webkit-mask-image: url("../assets/img/chisiamo/icone/07-om.svg");                  mask-image: url("../assets/img/chisiamo/icone/07-om.svg"); }

/* ==========================================================================
   IMMAGINI CON SCHEDA IN VETRO — [data-vetro]
   Feedback cliente: dove c'e' un'immagine intera deve esserci sempre la
   scheda in vetro che si apre al passaggio del mouse. Era il comportamento
   della card progetto in evidenza, e restava confinato li'; le fotografie
   delle altre pagine erano immagini e basta.

   E' la versione leggera di .featured-project: stessa ricetta di vetro,
   stessi raggi concentrici, ma la scheda porta una didascalia invece di una
   scheda progetto intera. Il raggio interno si ricava da quello esterno meno
   lo scostamento, come vuole la regola degli angoli annidati.
   ========================================================================== */
[data-vetro] {
  --vetro-radius: var(--radius-card);
  /* Lo scostamento deve restare sotto il raggio esterno: con 24px su un
     raggio di 20 il raggio interno veniva negativo, cioe' zero, e la scheda
     aveva gli spigoli vivi dentro una foto arrotondata (feedback 14/09). */
  --vetro-inset: clamp(8px, .625vw, 12px);
  position: relative;
  overflow: hidden;
  border-radius: var(--vetro-radius);
  isolation: isolate;
}
[data-vetro] img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); }

.vetro-scheda {
  position: absolute;
  left: var(--vetro-inset);
  right: var(--vetro-inset);
  bottom: var(--vetro-inset);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding: clamp(16px, 1.25vw, 24px);
  border-radius: max(8px, calc(var(--vetro-radius) - var(--vetro-inset)));
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.2) 100%),
    linear-gradient(90deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.15) 100%);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: var(--c-white);
  text-align: left;
  transform: translateY(calc(100% + var(--vetro-inset)));
  opacity: 0;
  transition: transform .5s var(--ease), opacity .4s var(--ease);
}
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .vetro-scheda { background: rgba(5, 7, 28, 0.86); }
}
.vetro-titolo {
  font-family: var(--font-display);
  font-size: clamp(17px, 1.25vw, 22px);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.2px;
}
.vetro-nota { font-size: clamp(13px, 0.94vw, 15px); line-height: 1.4; color: var(--c-white-soft); }

@media (hover: hover) {
  [data-vetro]:hover .vetro-scheda,
  [data-vetro]:focus-within .vetro-scheda { transform: translateY(0); opacity: 1; }
  [data-vetro]:hover img { transform: scale(1.04); }
}
/* Su schermo tattile il passaggio del mouse non esiste: la scheda resta
   aperta, altrimenti quelle informazioni sarebbero irraggiungibili. E' la
   stessa regola della card progetto in evidenza. */
@media (hover: none), (max-width: 720px) {
  .vetro-scheda { transform: translateY(0); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  [data-vetro] img, .vetro-scheda { transition: opacity .2s linear; }
  .vetro-scheda { transform: translateY(0); }
}

/* ==========================================================================
   GLI ANGOLI FRA LE LASTRE
   L'arco superiore della Coda scopre quello che c'e' dietro, e dietro c'e' il
   fondo della pagina: quando la sezione sopra era colorata, negli angoli
   comparivano due tacche bianche. Non era un difetto dell'arco — era che
   nessuno aveva detto alla Coda su che colore andava a poggiare.

   Ora glielo dice il generatore, leggendo l'ultima sezione del corpo. La Coda
   dipinge quel colore da bordo a bordo e ci appoggia sopra la propria lastra
   blu arrotondata: la tacca prende il colore di sopra e sparisce.

   Sopra una fotografia il raggio si annulla del tutto: un angolo arrotondato
   dovrebbe scoprire l'immagine, e nessun colore puo' farlo. Li' il taglio
   netto e' l'unica soluzione onesta, ed e' anche la piu' bella.
   ========================================================================== */
.page-tail,
.cs-tail { background: var(--sopra, var(--c-blue)); border-radius: 0; padding-block: 0; }
.page-tail-lastra,
.cs-tail-lastra {
  background: var(--c-blue);
  border-radius: var(--tail-radius) var(--tail-radius) 0 0;
  padding-block: clamp(64px, 9.27vw, 178px) clamp(40px, 3.5vw, 67px);
}
.coda-su-blu    { --sopra: var(--c-blue); }
.coda-su-navy   { --sopra: var(--c-navy); }
.coda-su-bianco { --sopra: var(--c-white); }
/* Sopra una fotografia niente arco: il taglio e' netto. Il fondo resta blu
   perche' col raggio a zero non se ne vede un pixel, e un fondo trasparente
   dichiarato fa credere a chiunque lo legga — un audit, una stampa — che il
   testo bianco stia sul bianco della pagina. */
.coda-su-foto   { --sopra: var(--c-blue); --tail-radius: 0; }

/* Due lastre blu di seguito: l'arco esiste ma non si vede, ed e' giusto cosi'
   — il confine lo segna l'occhiello della Coda, che comincia il suo racconto.
   Dopo il navy o il bianco l'arco si vede, e fa il suo mestiere. */

/* L'icona grande che ancora una sezione tematica: sulle lastre blu il blu
   non si vede, quindi diventa bianca — come le icone della catena del valore
   quando la card si riempie di blu. Era lime; da settembre il lime resta per
   gli stati attivi (pin, voci aperte), non per le icone. */
.ico-catena-grande { width: clamp(72px, 6.5vw, 120px); height: clamp(72px, 6.5vw, 120px); margin-top: clamp(20px, 2vw, 36px); }
/* Solo quella grande: l'icona dentro una card bianca resta blu, anche se la
   card sta su una lastra colorata. Il colore lo decide il fondo su cui
   l'icona poggia davvero, non la sezione che la contiene. */
.ico-catena-grande { background-color: var(--c-white); }

/* ==========================================================================
   UN PULSANTE NON PUO' AVERE IL COLORE DELLA LASTRA CHE LO OSPITA
   Un .btn-blue su una sezione blu e un .btn-primary su una sezione blu sono
   rettangoli invisibili: si vede solo il testo, e nessuno capisce che e' un
   comando. Lo decide il contesto, come per ogni altro colore del sistema.
   ========================================================================== */
.section-blue .btn-blue,
.section-blue .btn-primary,
.section-blue .modulo .btn-primary { background: var(--c-white); color: var(--c-navy); }
.section-blue .btn-blue:hover,
.section-blue .btn-primary:hover { background: #eef0f6; }
/* Sul navy il blu si vede: resta blu. */
.section-dark .btn-blue,
.section-dark .btn-primary { background: var(--c-blue); color: var(--c-white); }

/* ==========================================================================
   IL RESPIRO FRA UN TITOLO E IL TESTO CHE LO SEGUE
   Il titolo ha margine zero e il paragrafo pure: senza una regola il testo si
   attacca all'ultima riga del titolo e i due si leggono come un blocco solo.
   Vale ovunque, non nella singola sezione in cui ce se ne accorge.
   ========================================================================== */
/* :is() a sinistra, non :where(): il reset `p { margin: 0 }` di base.css ha
   specificita' 0,0,1 e batteva una regola tutta in :where(), che vale 0,0,0.
   La regola c'era, il respiro no. Con :is() la coppia vale 0,1,0 — sopra il
   reset, sotto qualunque regola di classe che voglia decidere da se'. */
:is(h1, h2, h3, .h1, .h2, .h3) + :where(p, .lead, .prose-toc, ul, ol, dl, figure, .tag-list) {
  margin-top: clamp(16px, 1.5vw, 26px);
}
:is(h3, .h3) + :where(p, .lead, ul, ol) { margin-top: clamp(10px, 0.9vw, 16px); }
/* Nella prosa lunga il ritmo lo decide .prose, che ha misure sue. */
.prose :is(h1, h2, h3) + * { margin-top: revert; }

/* ==========================================================================
   LA CTA DI CHIUSURA STA A DESTRA
   Chiude la sezione dalla parte in cui la lettura finisce: a sinistra torna
   indietro, e chi legge deve rifare il percorso all'incontrario.
   ========================================================================== */
.section-cta { margin-top: var(--space-2xl); display: flex; justify-content: flex-end; }
/* ---------- Dove chiude una CTA di sezione ----------
   Una regola sola per tutti i contenitori che chiudono una sezione, invece
   di sette regole sparse che su telefono tornavano tutte a sinistra. Il
   criterio non cambia con la larghezza: se la posizione dipendesse dallo
   schermo smetterebbe di essere un segnale e diventerebbe un caso.
   Restano allineate al proprio testo, e giustamente, le CTA che stanno
   DENTRO un contenuto: schede, moduli, stati vuoti, il pulsante che apre il
   resto di un elenco. Quelle non chiudono niente. */
.section-cta,
.correlata-cta,
.projects-head-right,
.news-head-right,
.tail-head > div,
.tab-panel-body {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.tail-head > div,
.projects-head-right,
.news-head-right,
.tab-panel-body { flex-direction: column; align-items: flex-end; }
/* Il testo resta allineato a sinistra: va a destra il comando, non il paragrafo. */
.tail-head > div > p,
.projects-head-right > p,
.news-head-right > p,
.tab-panel-body > p,
.tab-panel-body > ul { text-align: left; width: 100%; align-self: stretch; }

/* Anche su telefono la CTA di chiusura sta a destra. C'era un'eccezione —
   «su una colonna sola non c'e' una destra da cui chiudere» — ma il cliente
   la vuole a destra ovunque, e ha ragione su una cosa: se la posizione cambia
   con la larghezza, smette di essere un segnale e diventa un caso. */
@media (max-width: 720px) { .section-cta .btn { width: auto; } }

/* ==========================================================================
   ELENCO DI ETICHETTE — non pillole
   Le pillole hanno la forma dei chip di filtro, che si cliccano: usarle per un
   elenco che non fa niente e' una promessa che il componente non mantiene.
   Un elenco di competenze e' un elenco: filetti, non bottoni finti.
   ========================================================================== */
.tag-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(200px, 100%), 1fr));
  gap: 0 clamp(20px, 2vw, 40px);
  list-style: none;
  margin: 0;
  padding: 0;
}
.tag-list li {
  padding: clamp(10px, 0.9vw, 14px) 0;
  border: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 0;
  font-size: clamp(14px, 1.04vw, 17px);
  line-height: 1.35;
}