/* ==========================================================================
   Datagest / Aves.NET - foglio di stile unico.
   Nessun framework: l'intero CSS del sito sta in un solo file, scaricato in
   un giro e servito precompresso da MapStaticAssets.
   Palette e font ripresi dal sito di produzione (Poppins, #0ba1e7, #14141c).
   ========================================================================== */

/* --- Font autoprodotti ---------------------------------------------------- */
/* font-display: swap - il testo e' leggibile subito col fallback di sistema,
   poi viene sostituito: nessun blocco del first paint. */
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("../fonts/poppins-300.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC, U+2122;
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/poppins-400.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC, U+2122;
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/poppins-600.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC, U+2122;
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/poppins-700.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC, U+2122;
}

/* --- Token --------------------------------------------------------------- */
:root {
  --ink: #14141c;
  --ink-2: #1f1c31;
  --ink-3: #272338;
  --line: rgba(255, 255, 255, 0.12);

  --paper: #ffffff;
  --paper-dim: rgba(255, 255, 255, 0.72);
  --paper-faint: rgba(255, 255, 255, 0.55);

  --cyan: #0ba1e7;
  --cyan-deep: #0064bd;

  /* Il corallo di marca #eb3f43 con testo bianco sopra si ferma a 3,94:1,
     sotto il 4,5:1 richiesto da WCAG AA per il testo normale. Resta quindi
     riservato agli elementi decorativi (bordi, evidenziazioni grandi), e per
     l'uso come colore di testo c'e' la variante dedicata:
       --coral-text   corallo usato come colore di testo -> 5,0:1 e oltre
       --coral-solid  variante scura, per i bordi che segnalano un errore
     Nessun elemento cliccabile e' corallo: le azioni primarie del sito sono
     ciano (--cyan con testo #00131f), cosi' il colore dice sempre la stessa
     cosa. Il corallo segnala o decora, non invita a premere.                */
  --coral: #eb3f43;
  --coral-solid: #d32629;
  --coral-text: #f4666a;
  --violet: #473a92;
  --magenta: #943a71;

  --header-h: 4.5rem;
  --radius: 0.875rem;
  --radius-sm: 0.5rem;
  --shell: 78rem;
  --gap: clamp(1rem, 2.5vw, 2rem);
  --gutter: clamp(1rem, 4vw, 2.5rem);
  --section-y: clamp(3.5rem, 8vw, 7rem);

  --font: "Poppins", ui-sans-serif, system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --shadow: 0 1.25rem 2.5rem rgba(0, 0, 0, 0.45);
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

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

html {
  scroll-behavior: smooth;
  /* Compensa l'header fisso quando si salta a un'ancora. */
  scroll-padding-top: calc(var(--header-h) + 1rem);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font);
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.65;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img,
picture,
svg {
  display: block;
  max-width: 100%;
}

img {
  height: auto;
}

a {
  color: inherit;
  text-decoration: none;
}

p {
  margin: 0 0 1rem;
}

ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

h1,
h2,
h3 {
  margin: 0 0 0.5rem;
  line-height: 1.15;
  font-weight: 700;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

/* Contorno di focus sempre visibile e con contrasto sufficiente: e' la
   bussola di chi naviga da tastiera. */
:focus-visible {
  outline: 3px solid var(--cyan);
  outline-offset: 3px;
  border-radius: 0.25rem;
}

/* Chi ha attivato "riduci animazioni" nel sistema operativo non le subisce. */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* --- Utilita' ------------------------------------------------------------ */

/* Testo per i soli screen reader: presente nell'albero di accessibilita' ma
   invisibile. Non usare display:none, che lo rimuoverebbe anche da la'. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.container {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.skip-link {
  position: absolute;
  left: 1rem;
  top: -4rem;
  z-index: 200;
  padding: 0.75rem 1.25rem;
  border-radius: var(--radius-sm);
  background: var(--cyan);
  color: #001523;
  font-weight: 600;
  transition: top 0.18s var(--ease);
}

.skip-link:focus-visible {
  top: 1rem;
}

.section-title {
  font-size: clamp(1.75rem, 4.2vw, 2.75rem);
}

.section-lead {
  max-width: 46rem;
  color: var(--paper-dim);
  font-size: clamp(1rem, 1.6vw, 1.125rem);
  font-weight: 300;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.75rem; /* bersaglio tattile >= 44px */
  padding: 0.75rem 1.5rem;
  border: 2px solid transparent;
  border-radius: 999px;
  font-size: 0.9375rem;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.18s var(--ease), background-color 0.18s var(--ease),
    border-color 0.18s var(--ease), color 0.18s var(--ease);
}

.btn--primary {
  background: var(--cyan);
  color: #00131f;
}

.btn--primary:hover {
  background: #37b6f0;
  transform: translateY(-2px);
}

.btn--ghost {
  border-color: rgba(255, 255, 255, 0.35);
  color: var(--paper);
}

.btn--ghost:hover {
  border-color: var(--cyan);
  color: var(--cyan);
  transform: translateY(-2px);
}

/* --- Header e navigazione ------------------------------------------------ */
.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 100;
  background: rgba(20, 20, 28, 0.88);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}

.site-header__bar {
  display: flex;
  align-items: center;
  gap: var(--gap);
  width: 100%;
  max-width: var(--shell);
  min-height: var(--header-h);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.site-header__logo {
  flex: 0 0 auto;
}

.site-header__logo-img {
  width: clamp(7.5rem, 14vw, 9.5rem);
  height: auto;
}

.nav-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-left: auto;
  min-height: 2.75rem;
  padding: 0.5rem 0.875rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: transparent;
  color: var(--paper);
  font: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
}

.nav-toggle__bars {
  display: grid;
  gap: 0.25rem;
  width: 1.125rem;
}

.nav-toggle__bars span {
  display: block;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: transform 0.2s var(--ease), opacity 0.2s var(--ease);
}

/* L'icona hamburger si trasforma in croce leggendo aria-expanded del proprio
   bottone. Il pannello, che e' un fratello, usa invece data-nav-open
   sull'header (vedi piu' sotto). */
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(1) {
  transform: translateY(0.375rem) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(2) {
  opacity: 0;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(3) {
  transform: translateY(-0.375rem) rotate(-45deg);
}

.site-nav__list {
  display: flex;
  align-items: center;
  gap: clamp(0.5rem, 1.6vw, 1.75rem);
}

.site-nav__link,
.site-nav__sublink,
.site-nav__cta {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  font-size: 0.9375rem;
  font-weight: 600;
}

/* Le voci di primo livello restano su una riga sola: "Web Solutions" mandato a
   capo alzerebbe la barra e disallineerebbe le altre voci. */
.site-nav__link {
  white-space: nowrap;
}

.site-nav__group {
  position: relative;
}

/* Il passaggio del mouse e il focus tingono di ciano la voce, ma solo se e'
   davvero un link (6,4:1 sul fondo dell'header): il ciano nel sito significa
   "premi qui", quindi un'intestazione di gruppo senza pagina propria resta
   bianca e continua ad annunciarsi solo con l'apertura del sottomenu.
   Niente sottolineatura: dentro un inline-flex un ::after diventa un secondo
   elemento *in riga* accanto al testo, non una riga sotto, e comprimendo il
   testo lo mandava a capo. */
.site-nav__group:hover a.site-nav__link,
.site-nav__group:focus-within a.site-nav__link {
  color: var(--cyan);
}

.site-nav__submenu {
  position: absolute;
  top: 100%;
  left: -1rem;
  min-width: 14rem;
  padding: 0.5rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--ink-2);
  box-shadow: var(--shadow);
  /* visibility (non display) mantiene i link tabulabili in ordine e permette
     la transizione; :focus-within li rivela anche da tastiera. */
  visibility: hidden;
  opacity: 0;
  transform: translateY(0.5rem);
  transition: opacity 0.18s var(--ease), transform 0.18s var(--ease), visibility 0.18s;
}

.site-nav__group:hover .site-nav__submenu,
.site-nav__group:focus-within .site-nav__submenu {
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
}

.site-nav__sublink {
  width: 100%;
  padding: 0.375rem 0.75rem;
  border-radius: var(--radius-sm);
  font-weight: 400;
  color: var(--paper-dim);
}

.site-nav__sublink:hover {
  background: rgba(11, 161, 231, 0.14);
  color: var(--paper);
}

/* Stesso ciano di .btn--primary, con lo stesso testo scuro sopra: il richiamo
   ai contatti e' un'azione primaria e nel sito le azioni primarie sono ciano.
   Il corallo resta dove segnala qualcosa (errori del form) o decora (bordi dei
   pilastri, corsivo dell'hero), senza essere un secondo colore d'azione.
   Il testo e' #00131f e non bianco perche' il bianco sul ciano si ferma a
   2,89:1; con il blu scurissimo siamo a 6,53:1. */
.site-nav__cta {
  padding: 0.5rem 1.125rem;
  border-radius: 999px;
  background: var(--cyan);
  color: #00131f;
}

.site-nav__cta:hover {
  background: #37b6f0;
}

/* Da 1024px in su il menu e' sempre visibile: l'hamburger sparisce. */
@media (min-width: 64rem) {
  .nav-toggle {
    display: none;
  }

  .site-nav {
    margin-left: auto;
  }
}

@media (max-width: 63.999rem) {
  /* Pannello a tutta pagina. Lo stato chiuso e' dichiarato in CSS ed e' quello
     dell'HTML servito, quindi il menu non lampeggia aperto prima che parta il
     JavaScript.
     visibility: hidden lo tiene anche fuori dall'ordine di tabulazione e
     dall'albero di accessibilita', quindi non si "tabula nel vuoto". */
  .site-nav {
    position: fixed;
    top: var(--header-h);
    left: 0;
    right: 0;
    /* Altezza esplicita invece di top+bottom: il pannello e' figlio fuori
       flusso di un flex container e in quel caso il box non viene stirato.
       dvh tiene conto della barra URL mobile, che appare e sparisce; vh e' il
       ripiego per i browser che non lo conoscono. */
    height: calc(100vh - var(--header-h));
    height: calc(100dvh - var(--header-h));
    overflow-y: auto;
    padding: var(--gap) var(--gutter) 4rem;
    background: var(--ink);
    border-top: 1px solid var(--line);
    visibility: hidden;
    transform: translateX(12%);
    opacity: 0;
    transition: transform 0.24s var(--ease), opacity 0.24s var(--ease), visibility 0.24s;
  }

  /* Lo stato aperto arriva da data-nav-open sull'header. Si potrebbe risalire
     al bottone con :has(.nav-toggle[aria-expanded="true"]), ma :has() e'
     arrivato in Firefox solo con la 121: su un browser piu' vecchio il menu
     mobile non si aprirebbe affatto, e per un comando essenziale non vale la
     pena dipendere da quel supporto. Un selettore di attributo funziona
     dappertutto.
     site.js scrive i due attributi nella stessa funzione, cosi' l'aspetto e
     lo stato annunciato alle tecnologie assistive restano allineati. */
  .site-header[data-nav-open] .site-nav {
    visibility: visible;
    transform: none;
    opacity: 1;
  }

  .site-nav__list {
    flex-direction: column;
    align-items: stretch;
    gap: 0.25rem;
  }

  .site-nav__group {
    border-bottom: 1px solid var(--line);
    padding-block: 0.5rem;
  }

  .site-nav__link {
    font-size: 1.125rem;
  }

  .site-nav__submenu {
    position: static;
    visibility: visible;
    opacity: 1;
    transform: none;
    min-width: 0;
    padding: 0 0 0.5rem;
    border: 0;
    background: transparent;
    box-shadow: none;
  }

  .site-nav__group--cta {
    border-bottom: 0;
    margin-top: 1rem;
  }

  .site-nav__cta {
    justify-content: center;
  }
}

/* Intestazione di gruppo senza pagina propria: stesso aspetto di un link,
   ma non e' cliccabile, quindi niente cursore a manina che prometterebbe una
   pagina che non esiste. */
.site-nav__link--statico {
  cursor: default;
}

/* --- Hero ---------------------------------------------------------------- */
.hero {
  position: relative;
  display: grid;
  align-items: center;
  min-height: min(42rem, 88svh);
  padding-top: var(--header-h);
  isolation: isolate;
}

.hero__media {
  position: absolute;
  inset: 0;
  z-index: -2;
}

.hero__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
}

/* Velo scuro: porta il testo bianco oltre il rapporto di contrasto 4.5:1
   qualunque sia la zona della fotografia sotto. */
.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
      180deg,
      rgba(20, 20, 28, 0.78) 0%,
      rgba(20, 20, 28, 0.55) 45%,
      rgba(20, 20, 28, 0.9) 100%
    ),
    radial-gradient(120% 80% at 50% 40%, rgba(11, 161, 231, 0.22), transparent 70%);
}

.hero__content {
  text-align: center;
  padding-block: clamp(3rem, 10vw, 6rem);
}

.hero__title {
  font-size: clamp(2.75rem, 11vw, 7rem);
  font-weight: 700;
  letter-spacing: 0.02em;
  margin-bottom: 0.75rem;
}

.hero__tagline {
  font-size: clamp(1.125rem, 3.4vw, 2rem);
  font-weight: 300;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 1.25rem;
}

.hero__tagline strong {
  color: var(--cyan);
  font-weight: 700;
}

/* La quarta parola si distingue per il corsivo, non per il colore: nessun
   colore dichiarato qui vuol dire il bianco ereditato dal paragrafo. Sulla riga
   resta cosi' un solo accento cromatico, il ciano della seconda parola. */
.hero__tagline em {
  font-style: italic;
  font-weight: 600;
}

.hero__tagline-sep {
  font-weight: 300;
}

.hero__subtitle {
  max-width: 34rem;
  margin-inline: auto;
  font-size: clamp(1.0625rem, 2.2vw, 1.5rem);
  font-weight: 400;
  color: var(--paper-dim);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
  margin-top: clamp(1.5rem, 4vw, 2.5rem);
}

/* --- Carosello soluzioni ------------------------------------------------- */
.soluzioni {
  padding-block: var(--section-y) calc(var(--section-y) - 1rem);
  background: linear-gradient(180deg, var(--ink) 0%, var(--ink-2) 100%);
  /* Bordo interno del carosello: la gutter del container piu' la fascia che
     resta ai lati quando la finestra supera --shell. */
  --edge: max(var(--gutter), calc((100% - var(--shell)) / 2 + var(--gutter)));
}

/* Carosello in puro CSS: scroll-snap + overflow orizzontale. Scorre con dito,
   trackpad, barra e frecce, senza una riga di JavaScript. */
.carousel {
  display: grid;
  grid-auto-flow: column;
  /* Larghezza fissa per traccia: a 1280px+ entrano esattamente quattro schede
     nella stessa griglia del testo, sotto se ne vede una piu' un accenno della
     successiva, che segnala che il carosello scorre. */
  grid-auto-columns: clamp(15rem, 24vw, 18rem);
  gap: var(--gap);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  /* proximity e non mandatory: con mandatory il browser aggancia la prima
     scheda al caricamento e cosi' si mangia il padding iniziale. */
  scroll-snap-type: x proximity;
  /* La prima scheda parte allineata al titolo della sezione: il padding
     replica la gutter del .container, comprese le fasce laterali oltre --shell. */
  padding: 0.5rem var(--edge) 1rem;
  scroll-padding-inline: var(--edge);
  scrollbar-color: var(--cyan) var(--ink-3);
  scrollbar-width: thin;
}

.carousel__item {
  scroll-snap-align: start;
}

.card {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--ink-3);
  transition: transform 0.22s var(--ease), border-color 0.22s var(--ease);
}

.card:hover {
  transform: translateY(-0.375rem);
  border-color: var(--cyan);
}

.card__media {
  aspect-ratio: 3 / 4;
  overflow: hidden;
}

.card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s var(--ease);
}

.card:hover .card__img {
  transform: scale(1.04);
}

.card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 1.125rem 1.25rem 1.5rem;
}

.card__title {
  font-size: 1.125rem;
  margin-bottom: 0.375rem;
}

.card__text {
  flex: 1;
  font-size: 0.9375rem;
  font-weight: 300;
  color: var(--paper-dim);
  margin-bottom: 0.75rem;
}

.card__more {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--cyan);
}

.card__more::after {
  content: " \2192";
}

/* --- News ---------------------------------------------------------------- */
.news {
  padding-block: var(--section-y);
  background: var(--ink-2);
}

.news__grid {
  display: grid;
  gap: var(--gap);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
}

.news-card {
  height: 100%;
}

.news-card__link {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--ink-3);
  transition: transform 0.22s var(--ease), border-color 0.22s var(--ease);
}

.news-card__link:hover {
  transform: translateY(-0.375rem);
  border-color: var(--cyan);
}

.news-card__media {
  aspect-ratio: 3 / 2;
  overflow: hidden;
}

.news-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.news-card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 1.25rem 1.375rem 1.5rem;
}

.news-card__title {
  font-size: 1.25rem;
}

.news-card__text {
  flex: 1;
  font-weight: 300;
  color: var(--paper-dim);
}

.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  margin-bottom: 0.875rem;
}

.tag {
  padding: 0.125rem 0.5rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 0.75rem;
  color: var(--paper-faint);
}

.news-card__more {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--cyan);
}

.news-card__more::after {
  content: " \2192";
}

.news__all {
  margin-top: clamp(1.5rem, 4vw, 2.5rem);
}

/* --- Punti di forza ------------------------------------------------------ */
.forza {
  padding-block: var(--section-y);
  background:
    linear-gradient(180deg, rgba(20, 20, 28, 0.94), rgba(31, 28, 49, 0.97)),
    var(--ink);
}

.forza__grid {
  display: grid;
  gap: var(--gap);
  /* 22rem come minimo porta a tre colonne su desktop: i sei punti riempiono
     due righe intere, senza la riga orfana da due che si otteneva con quattro. */
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
}

.forza__item {
  padding: clamp(1.25rem, 3vw, 1.75rem);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.03);
}

.forza__icon {
  width: 3rem;
  margin-bottom: 1rem;
}

.forza__icon-img {
  width: 3rem;
  height: 3rem;
  object-fit: contain;
  /* Le icone originali sono monocrome scure: le riporto sul ciano del brand. */
  filter: brightness(0) saturate(100%) invert(58%) sepia(72%) saturate(2100%)
    hue-rotate(168deg) brightness(96%) contrast(96%);
}

.forza__title {
  font-size: 1.25rem;
  color: var(--cyan);
}

.forza__claim {
  font-weight: 600;
  margin-bottom: 0.375rem;
}

.forza__text {
  font-weight: 300;
  font-size: 0.9375rem;
  color: var(--paper-dim);
  margin-bottom: 0;
}

/* --- Pilastri ------------------------------------------------------------ */
.pilastri {
  padding-block: var(--section-y);
  background: var(--ink-2);
}

.pilastri__list {
  display: grid;
  gap: var(--gap);
  counter-reset: pilastro;
}

.pilastro {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(1rem, 3vw, 2rem);
  align-items: start;
  padding: clamp(1.25rem, 3vw, 2rem);
  border: 1px solid var(--line);
  border-left: 3px solid var(--cyan);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.03);
}

.pilastro:nth-child(2n) {
  border-left-color: var(--coral);
}

.pilastro:nth-child(3n) {
  border-left-color: var(--violet);
}

/* Il numero e' volutamente in secondo piano, ma resta testo grande visibile:
   WCAG AA chiede 3:1 e al 18% di opacita' si fermava a 1,79:1 sul fondo delle
   card (--ink-3), cioe' era quasi invisibile per chiunque, non solo per un
   controllo automatico. Al 40% sale a 3,66:1 tenendo l'aria di sfondo.
   aria-hidden sul markup non c'entra: il contrasto riguarda chi guarda. */
.pilastro__num {
  font-size: clamp(1.5rem, 4vw, 2.5rem);
  font-weight: 700;
  line-height: 1;
  color: rgba(255, 255, 255, 0.4);
}

.pilastro__title {
  font-size: clamp(1.25rem, 2.6vw, 1.75rem);
}

.pilastro__claim {
  font-weight: 600;
  color: var(--cyan);
}

.pilastro__text {
  font-weight: 300;
  color: var(--paper-dim);
}

.pilastro__close {
  margin-bottom: 0;
  font-weight: 600;
}

/* --- Evento -------------------------------------------------------------- */
.evento {
  padding-block: clamp(2rem, 5vw, 3.5rem);
  background: linear-gradient(90deg, var(--violet), var(--magenta));
}

.evento__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(1rem, 3vw, 2rem);
}

.evento__logo-img {
  width: clamp(4rem, 10vw, 6rem);
  height: auto;
}

.evento__kicker {
  margin-bottom: 0.25rem;
  font-size: 0.875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--paper-dim);
}

.evento__title {
  font-size: clamp(1.5rem, 4vw, 2.25rem);
}

.evento__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
  margin-bottom: 0;
  font-weight: 600;
}

.evento__meta span {
  padding: 0.125rem 0.75rem;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 999px;
  font-size: 0.875rem;
}

/* --- Contatti ------------------------------------------------------------ */
.contatti {
  padding-block: var(--section-y);
  background: var(--ink);
}

.contatti__grid {
  display: grid;
  gap: clamp(2rem, 5vw, 4rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
  align-items: start;
}

.contatti__lista {
  display: grid;
  gap: 1rem;
  margin-bottom: 2rem;
}

.contatti__lista li {
  display: grid;
  gap: 0.125rem;
}

.contatti__etichetta {
  font-size: 0.8125rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--paper-faint);
}

.contatti__lista a {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--cyan);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

.contatti__lista a:hover {
  color: var(--paper);
}

/* --- Condivisione -------------------------------------------------------- */
.share {
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
}

.share__label {
  display: block;
  margin-bottom: 0.625rem;
  font-size: 0.8125rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--paper-faint);
}

.share__list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.share__btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4375rem;
  min-height: 2.75rem;
  padding: 0.5rem 0.875rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--paper);
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.18s var(--ease), border-color 0.18s var(--ease),
    transform 0.18s var(--ease);
}

.share__btn svg {
  width: 1.125rem;
  height: 1.125rem;
  fill: currentColor;
  flex: 0 0 auto;
}

.share__btn:hover {
  transform: translateY(-2px);
  border-color: currentColor;
}

.share__btn--linkedin:hover { color: #0a66c2; background: rgba(10, 102, 194, 0.16); }

@media (max-width: 30rem) {
  /* Su schermi molto stretti resta la sola icona: l'etichetta accessibile
     e' garantita dall'aria-label sul link, quindi nulla si perde. */
  .share__btn-text {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .share__btn {
    padding: 0.6875rem;
  }
}

/* --- Form ---------------------------------------------------------------- */
.form {
  padding: clamp(1.25rem, 3vw, 2rem);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--ink-2);
}

.form__title {
  font-size: 1.375rem;
  margin-bottom: 1.25rem;
}

.form__row {
  display: grid;
  gap: 0.3125rem;
  margin-bottom: 1rem;
}

.form__row label {
  font-size: 0.875rem;
  font-weight: 600;
}

/* Marcatore dei campi obbligatori. Il margine e' in CSS e non uno spazio nel
   markup perche' Razor comprime lo spazio fra @Etichetta e il tag successivo,
   e l'asterisco finirebbe attaccato al testo dell'etichetta. */
.form__row abbr,
.form__row--check abbr {
  margin-left: 0.2em;
  color: var(--coral-text);
  text-decoration: none;
}

.form input[type="text"],
.form input[type="email"],
.form input[type="tel"],
.form textarea {
  width: 100%;
  min-height: 2.75rem;
  padding: 0.625rem 0.875rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: rgba(0, 0, 0, 0.35);
  color: var(--paper);
  font: inherit;
  font-size: 1rem; /* >=16px: evita lo zoom automatico su iOS */
}

.form input:focus,
.form textarea:focus {
  border-color: var(--cyan);
}

/* Campo in errore. Il bordo colorato e' solo un rinforzo: l'informazione
   portante e' il messaggio di testo sotto il campo, perche' il colore da solo
   non e' percepibile da chi non distingue il rosso. */
.form input[aria-invalid="true"],
.form textarea[aria-invalid="true"],
.form input.invalid,
.form textarea.invalid {
  border-color: var(--coral-text);
  border-width: 2px;
}

.form__error {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--coral-text);
}

/* Vuoto quando non ci sono errori: non deve occupare spazio ne' lasciare un
   margine visibile in mezzo al form. */
.form__error:empty {
  display: none;
}

/* Riepilogo in cima al form dopo un invio rifiutato. */
.form__summary {
  margin-bottom: 1.25rem;
  padding: 0.875rem 1rem;
  border: 1px solid var(--coral-text);
  border-left-width: 4px;
  border-radius: var(--radius-sm);
  background: rgba(235, 63, 67, 0.12);
}

.form__summary p {
  margin: 0 0 0.5rem;
  font-size: 0.9375rem;
  font-weight: 600;
}

.form__summary ul {
  display: grid;
  gap: 0.25rem;
  list-style: disc;
  padding-left: 1.25rem;
  font-size: 0.875rem;
  color: var(--coral-text);
}

.form__summary li {
  list-style: inherit;
}

.form textarea {
  resize: vertical;
}

.form__hint {
  font-size: 0.8125rem;
  color: var(--paper-faint);
}

.form__row--check {
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: 0.625rem;
  margin-block: 1.25rem;
}

.form__row--check input {
  width: 1.125rem;
  height: 1.125rem;
  margin-top: 0.3125rem;
  accent-color: var(--cyan);
}

.form__row--check label {
  font-weight: 400;
  font-size: 0.875rem;
}

.form__row--check a {
  color: var(--cyan);
  text-decoration: underline;
}

/* Errore del consenso: sta fuori dalla riga, quindi si distanzia da solo. */
.form__row--check + .form__error {
  display: block;
  margin: -0.75rem 0 1rem;
}

/* Honeypot: fuori dallo schermo, non display:none, altrimenti alcuni bot lo
   riconoscono e lo saltano. */
.form__honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form__required-note {
  font-size: 0.8125rem;
  color: var(--paper-faint);
}

.form__submit {
  width: 100%;
  justify-content: center;
}

/* --- Pagine interne: intestazione ---------------------------------------- */
/* Fascia di apertura delle pagine diverse dalla homepage. Piu' bassa dell'hero
   (che occupa quasi tutto lo schermo) perche' qui sotto c'e' il contenuto, non
   un invito a scorrere. */
.intestazione {
  position: relative;
  display: grid;
  align-items: center;
  min-height: min(26rem, 60svh);
  padding-top: var(--header-h);
  isolation: isolate;
}

.intestazione__media {
  position: absolute;
  inset: 0;
  z-index: -2;
}

.intestazione__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Velo scuro. E' piu' coprente di quello dell'hero (0,82 come punto piu'
   chiaro) e non e' una scelta estetica: la fotografia sotto cambia da pagina a
   pagina, e con 0,82 anche una zona di bianco pieno resta a 10:1 per il testo
   bianco e 6,3:1 per --paper-dim. Abbassandolo il contrasto tornerebbe a
   dipendere dall'immagine, cioe' non sarebbe piu' garantito. */
.intestazione__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
      180deg,
      rgba(20, 20, 28, 0.9) 0%,
      rgba(20, 20, 28, 0.82) 45%,
      rgba(20, 20, 28, 0.95) 100%
    ),
    radial-gradient(120% 80% at 50% 40%, rgba(11, 161, 231, 0.18), transparent 70%);
}

.intestazione__content {
  padding-block: clamp(2.5rem, 7vw, 4.5rem);
  max-width: 52rem;
}

.intestazione__occhiello {
  margin: 0 0 0.5rem;
  color: var(--cyan);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.intestazione__titolo {
  font-size: clamp(2rem, 6vw, 3.75rem);
  font-weight: 700;
  line-height: 1.12;
  margin: 0 0 0.75rem;
}

.intestazione__claim {
  font-size: clamp(1.0625rem, 2.2vw, 1.5rem);
  font-weight: 400;
  margin: 0 0 0.5rem;
}

.intestazione__lead {
  color: var(--paper-dim);
  font-weight: 300;
  margin: 0 0 0.5rem;
}

/* --paper-faint sta a 4,46:1 sopra il velo: sotto la soglia AA. Dentro
   l'intestazione i tag passano quindi al tono piu' chiaro. */
.intestazione .tag {
  color: var(--paper-dim);
}

/* Frase che accompagna il titolo di una sezione, sopra il sommario. */
.section-claim {
  max-width: 46rem;
  font-size: clamp(1.0625rem, 1.8vw, 1.25rem);
  font-weight: 600;
  margin: 0 0 0.75rem;
}

/* --- Pagine interne: griglia dei punti ----------------------------------- */
.punti {
  padding-block: var(--section-y);
  background: linear-gradient(180deg, var(--ink) 0%, var(--ink-2) 100%);
}

.punti__grid {
  display: grid;
  gap: var(--gap);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  list-style: none;
  margin: 0;
  padding: 0;
}

.punti__item {
  padding: clamp(1.25rem, 3vw, 1.75rem);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.03);
}

.punti__icon {
  width: 3rem;
  margin-bottom: 1rem;
}

.punti__icon-img {
  width: 3rem;
  height: 3rem;
  object-fit: contain;
  /* Stessa conversione al ciano di marca usata dai punti di forza in home:
     le icone originali sono monocrome e non nascono per un fondo scuro. */
  filter: brightness(0) saturate(100%) invert(58%) sepia(72%) saturate(2100%)
    hue-rotate(168deg) brightness(96%) contrast(96%);
}

/* Variante a fotografie: la card e' l'immagine, il titolo le sta sotto.
   L'immagine esce dal padding della card, quindi il padding va tolto e
   restituito al solo blocco di testo. */
.punti__item--foto {
  padding: 0;
  overflow: hidden;
}

.punti__foto-img {
  width: 100%;
  height: auto;
}

.punti__item--foto .punti__title,
.punti__item--foto .punti__text {
  padding-inline: clamp(1rem, 2.5vw, 1.25rem);
}

.punti__item--foto .punti__title {
  margin-top: 1rem;
}

.punti__item--foto .punti__title:last-child {
  margin-bottom: 1rem;
}

.punti__title {
  font-size: 1.1875rem;
  color: var(--cyan);
  margin: 0 0 0.5rem;
}

.punti__text {
  font-weight: 300;
  font-size: 0.9375rem;
  color: var(--paper-dim);
  margin: 0 0 0.5rem;
}

.punti__text:last-child {
  margin-bottom: 0;
}

/* --- Pagine interne: racconto -------------------------------------------- */
.racconto {
  padding-block: var(--section-y);
  background: var(--ink-2);
}

.racconto__inner {
  display: grid;
  gap: var(--gap);
}

/* Non ha stili propri: esiste per tenere titolo e sommario in una sola cella
   della griglia di .racconto__inner. */
.racconto__intro > :last-child {
  margin-bottom: 0;
}

.racconto__media {
  border-radius: var(--radius);
  overflow: hidden;
}

.racconto__img {
  width: 100%;
  height: auto;
}

.racconto__blocchi {
  display: grid;
  gap: var(--gap);
}

.racconto__blocco {
  padding-left: 1.25rem;
  border-left: 3px solid var(--cyan);
}

.racconto__titolo {
  font-size: 1.375rem;
  margin: 0 0 0.25rem;
}

.racconto__claim {
  font-weight: 600;
  color: var(--cyan);
  margin: 0 0 0.5rem;
}

.racconto__testo {
  font-weight: 300;
  color: var(--paper-dim);
  margin: 0 0 0.75rem;
}

.racconto__testo:last-child {
  margin-bottom: 0;
}

.racconto__elenco {
  display: grid;
  gap: 0.5rem;
  margin: 0;
  padding-left: 1.25rem;
  color: var(--paper-dim);
  font-weight: 300;
}

.racconto__elenco li::marker {
  color: var(--cyan);
}

@media (min-width: 60rem) {
  /* Con l'immagine: testo a sinistra, fotografia a destra, blocchi sotto a due
     colonne. Senza immagine la stessa griglia collassa a una colonna sola. */
  .racconto__inner {
    grid-template-columns: 1fr 1fr;
    align-items: start;
  }

  .racconto__blocchi {
    grid-column: 1 / -1;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
  }

  .racconto--solo-testo .racconto__inner {
    grid-template-columns: 1fr;
  }
}

/* --- Pagine interne: loghi dei partner ------------------------------------ */
.loghi {
  padding-block: var(--section-y);
  background: linear-gradient(180deg, var(--ink-2) 0%, var(--ink) 100%);
}

.loghi__gruppo {
  margin-bottom: clamp(1.75rem, 4vw, 2.5rem);
}

.loghi__gruppo-titolo {
  font-size: 1.125rem;
  color: var(--cyan);
  margin: 0 0 0.875rem;
}

.loghi__grid {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr));
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Pastiglia orizzontale, non una card grande: i marchi dei provider sono le
   loro favicon, fra i 28 e i 512px, quindi quadrate e piccole. Una card larga
   con dentro un'icona da 48px sarebbe soprattutto spazio vuoto. */
.loghi__item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-height: 2.75rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.04);
}

/* Fondo chiaro dietro il marchio. I loghi dei provider sono pensati per uno
   sfondo bianco e molti sono scuri: su questo fondo scomparirebbero. La
   pastiglia e' un contenitore, non testo, e i marchi restano nei loro colori. */
.loghi__media {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border-radius: var(--radius-sm);
  background: #ffffff;
  padding: 0.25rem;
}

.loghi__img {
  width: auto;
  max-width: 2.5rem;
  max-height: 2.5rem;
  height: auto;
  object-fit: contain;
}

.loghi__nome {
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.3;
}

a.loghi__nome {
  color: var(--cyan);
}

.loghi__nota {
  color: var(--paper-dim);
  font-weight: 300;
  margin: 0;
}

/* --- Pagina Azienda: apertura e sedi -------------------------------------- */
.intro {
  padding-block: var(--section-y) 0;
}

.intro__inner {
  max-width: 52rem;
}

.intro__testo {
  font-size: clamp(1rem, 1.7vw, 1.1875rem);
  font-weight: 300;
  color: var(--paper-dim);
}

.sedi {
  padding-block: var(--section-y);
  background: var(--ink);
}

.sedi__grid {
  display: grid;
  gap: var(--gap);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
  list-style: none;
  margin: 0;
  padding: 0;
}

.sede {
  padding: clamp(1.25rem, 3vw, 1.75rem);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.03);
}

.sede__icon {
  width: 3rem;
  margin-bottom: 0.75rem;
}

.sede__icon-img {
  width: 3rem;
  height: 3rem;
  object-fit: contain;
  filter: brightness(0) saturate(100%) invert(58%) sepia(72%) saturate(2100%)
    hue-rotate(168deg) brightness(96%) contrast(96%);
}

.sede__nome {
  font-size: 1.25rem;
  color: var(--cyan);
  margin: 0 0 0.5rem;
}

.sede__indirizzo {
  font-style: normal;
  font-weight: 300;
  color: var(--paper-dim);
  margin-bottom: 0.5rem;
}

.sede__contatti {
  margin: 0;
}

/* --- Articolo del blog ---------------------------------------------------- */
.articolo {
  display: block;
  padding-block: var(--section-y);
  background: linear-gradient(180deg, var(--ink) 0%, var(--ink-2) 100%);
}

.articolo__inner {
  max-width: 48rem;
}

.articolo__firma {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  align-items: baseline;
  font-weight: 600;
  margin: 1rem 0 0.75rem;
}

.articolo__data {
  font-weight: 300;
  color: var(--paper-dim);
}

.articolo__media {
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: clamp(1.5rem, 4vw, 2.5rem);
}

.articolo__img {
  width: 100%;
  height: auto;
}

.articolo__testo {
  font-size: clamp(1rem, 1.7vw, 1.125rem);
  font-weight: 300;
  color: var(--paper-dim);
}

.articolo__elenco {
  display: grid;
  gap: 0.75rem;
  margin: 0 0 1.5rem;
  padding-left: 1.25rem;
  color: var(--paper-dim);
  font-weight: 300;
}

.articolo__elenco li::marker {
  color: var(--cyan);
}

.articolo__chiusura {
  font-weight: 600;
}

.articolo__ritorno {
  margin-top: clamp(1.5rem, 4vw, 2.5rem);
}

/* --- Informative legali --------------------------------------------------- */
.legale {
  padding-block: var(--section-y);
  background: var(--ink);
}

.legale__inner {
  max-width: 52rem;
}

.legale__premessa {
  font-size: clamp(1rem, 1.7vw, 1.125rem);
  color: var(--paper-dim);
  font-weight: 300;
}

.legale__pdf {
  margin-bottom: clamp(1.5rem, 4vw, 2.5rem);
}

.legale__indice {
  padding: clamp(1rem, 3vw, 1.5rem);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.03);
  margin-bottom: clamp(2rem, 5vw, 3rem);
}

.legale__indice-titolo {
  font-size: 1.125rem;
  margin: 0 0 0.75rem;
}

.legale__indice ol {
  display: grid;
  gap: 0.375rem;
  margin: 0;
  padding-left: 1.25rem;
}

/* Bersaglio tattile: le voci dell'indice sono vicine fra loro, e senza
   l'altezza minima su un telefono si preme quella sbagliata. */
.legale__indice a {
  display: inline-block;
  min-height: 2.75rem;
  padding-block: 0.5rem;
  color: var(--cyan);
}

.legale__sezione {
  margin-bottom: clamp(2rem, 5vw, 3rem);
  scroll-margin-top: calc(var(--header-h) + 1rem);
}

.legale__titolo {
  font-size: clamp(1.25rem, 2.6vw, 1.625rem);
  color: var(--cyan);
  margin: 0 0 0.75rem;
}

.legale__sezione p {
  color: var(--paper-dim);
  font-weight: 300;
}

.legale__elenco {
  display: grid;
  gap: 0.75rem;
  margin: 0;
  padding-left: 1.25rem;
  color: var(--paper-dim);
  font-weight: 300;
}

.legale__elenco li::marker {
  color: var(--cyan);
}

/* --- Pagine di esito ---------------------------------------------------- */
.esito {
  display: grid;
  align-items: center;
  min-height: 70svh;
  padding-block: calc(var(--header-h) + var(--section-y)) var(--section-y);
}

/* --- Footer -------------------------------------------------------------- */
.site-footer {
  background: #0f0f15;
  border-top: 1px solid var(--line);
}

.site-footer__grid {
  display: grid;
  gap: clamp(2rem, 5vw, 3.5rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  padding-block: clamp(2.5rem, 6vw, 4rem);
}

.site-footer__logo {
  width: 9.5rem;
  height: auto;
  margin-bottom: 1.25rem;
}

.site-footer__address {
  font-style: normal;
  font-weight: 300;
  color: var(--paper-dim);
  margin-bottom: 1.25rem;
}

.site-footer__data {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.25rem 0.875rem;
  margin: 0;
  font-size: 0.875rem;
}

.site-footer__data dt {
  color: var(--paper-faint);
}

.site-footer__data dd {
  margin: 0;
}

.site-footer__data a {
  color: var(--cyan);
  text-decoration: underline;
}

.site-footer__sitemap {
  display: grid;
  gap: var(--gap);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 9.5rem), 1fr));
}

.site-footer__column-title {
  margin-bottom: 0.625rem;
  font-size: 0.875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--cyan);
}

.site-footer__column li + li {
  margin-top: 0.25rem;
}

.site-footer__column a {
  display: inline-block;
  padding-block: 0.25rem;
  font-size: 0.9375rem;
  font-weight: 300;
  color: var(--paper-dim);
}

.site-footer__column a:hover {
  color: var(--paper);
  text-decoration: underline;
}

.site-footer__bottom {
  border-top: 1px solid var(--line);
}

.site-footer__bottom-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem var(--gap);
  padding-block: 1.25rem;
}

.site-footer__copy {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--paper-faint);
}

.site-footer__legal {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
}

.site-footer__legal a {
  font-size: 0.8125rem;
  color: var(--paper-dim);
  text-decoration: underline;
}

.site-footer__legal a:hover {
  color: var(--cyan);
}

/* ==========================================================================
   Area di amministrazione (/admin)
   Fondo chiaro e testo nero: e' uno strumento di lavoro, si guarda per mezz'ora
   di fila con la luce accesa, mentre il sito pubblico resta scuro. Le pagine
   sono servite in static SSR come il resto, quindi qui non c'e' niente che
   dipenda da JavaScript.

   Il tema chiaro non e' una palette sparsa nelle regole: sono gli stessi token
   del sito, ridefiniti qui dentro una volta sola. Ogni regola .cms-* qui sotto
   continua a leggere var(--ink), var(--paper), var(--cyan) e vale per il tema
   chiaro senza sapere di essere cambiata — non esiste un colore dichiarato solo
   in un tema, che e' il modo tipico di rompersene uno.

   I valori sono scelti sopra le soglie WCAG AA sul bianco: testo 18,5:1,
   secondari 10:1 e 6,2:1, link e contorno di focus 5,9:1. Il ciano di marca
   #0ba1e7 sul bianco si ferma a 2,89:1, quindi qui il ruolo di «colore
   dell'azione» passa a #0064bd, che e' il ciano scuro gia' in palette: le
   azioni restano di un solo colore, come sul sito.
   ========================================================================== */
.cms {
  --ink: #ffffff;
  --ink-2: #f2f4f7;
  --ink-3: #e4e8ee;
  --line: rgba(0, 0, 0, 0.14);

  --paper: #14141c;
  --paper-dim: rgba(0, 0, 0, 0.74);
  --paper-faint: rgba(0, 0, 0, 0.62);

  --cyan: #0064bd;
  --cyan-deep: #004b8f;

  --coral-solid: #c02024;
  --coral-text: #b3181b;

  /* Un divisore puo' restare leggero, il bordo di un campo no: e' l'unica cosa
     che dice dove si scrive, e 1.4.11 chiede 3:1 col fondo. */
  --bordo-controllo: #8a8f98;

  min-height: 100vh;
  background: var(--ink);
  color: var(--paper);
}

/* Il fondo del documento sta sotto l'area: senza questo il rimbalzo dello
   scorrimento e la fascia oltre il contenuto resterebbero scuri. */
body:has(.cms) {
  background: #fff;
}

.cms__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap);
  padding: 0.875rem var(--gutter);
  background: var(--ink-2);
  border-bottom: 1px solid var(--line);
}

.cms__brand {
  font-weight: 600;
  color: var(--paper);
  text-decoration: none;
}

.cms__brand:hover {
  color: var(--cyan);
}

.cms__account {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.cms__utente {
  color: var(--paper-dim);
  font-size: 0.9375rem;
}

/* Bottone di uscita: e' un submit, ma legge come un link. */
.cms__esci {
  min-height: 2.75rem;
  padding: 0 0.75rem;
  border: 1px solid var(--bordo-controllo);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--paper);
  font: inherit;
  cursor: pointer;
}

.cms__esci:hover {
  border-color: var(--cyan);
  color: var(--cyan);
}

.cms__body {
  display: grid;
  grid-template-columns: minmax(13rem, 16rem) minmax(0, 1fr);
  align-items: start;
}

@media (max-width: 52rem) {
  .cms__body {
    grid-template-columns: minmax(0, 1fr);
  }
}

.cms__nav {
  padding: 1.5rem 1rem;
  border-right: 1px solid var(--line);
}

/* Su schermo largo l'albero resta in vista mentre si scorre un modulo lungo,
   con la sua barra di scorrimento se le pagine sono piu' dell'altezza. */
@media (min-width: 52.0625rem) {
  .cms__nav {
    position: sticky;
    top: 0;
    max-height: 100vh;
    overflow-y: auto;
  }
}

/* --- Albero delle pagine ------------------------------------------------- */
/* I rami sono <details>: si aprono senza JavaScript, e il ramo della pagina
   aperta arriva dal server gia' aperto. Ramo e foglia condividono la riga, cosi'
   hanno la stessa altezza (2,75rem = 44px, la soglia tattile del progetto) e i
   nomi si incolonnano. */
.cms-albero,
.cms-albero ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.cms-albero {
  display: grid;
  gap: 0.125rem;
}

/* Il filo verticale dice a colpo d'occhio dove finisce un ramo. Il selettore ha
   due classi di proposito: il reset «.cms-albero ul» qui sopra ha specificita'
   piu' alta di una classe sola e azzererebbe questi margini. */
.cms-albero .cms-albero__figli {
  display: grid;
  gap: 0.125rem;
  margin: 0 0 0 1.375rem;
  padding-left: 0.75rem;
  border-left: 1px solid var(--line);
}

.cms-albero__riga {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.75rem;
  padding: 0 0.5rem;
  border-radius: var(--radius-sm);
  color: var(--paper-dim);
  text-decoration: none;
  font-size: 0.9375rem;
}

.cms-albero__riga:hover {
  background: var(--ink-3);
  color: var(--paper);
}

.cms-albero__nome {
  flex: 1 1 auto;
}

/* Una pagina senza ramo (Azienda, Contatti) sta al primo livello: il suo nome
   va incolonnato con quello dei rami, non con la loro freccia. */
.cms-albero > li > .cms-albero__foglia {
  padding-left: 1.75rem;
}

/* Il triangolo predefinito di <summary> lascia il posto alla freccia disegnata,
   che ruota all'apertura: list-style per i browser aggiornati, il pseudo-elemento
   per WebKit. */
.cms-albero__ramo {
  cursor: pointer;
  color: var(--paper);
  list-style: none;
}

.cms-albero__ramo::-webkit-details-marker {
  display: none;
}

.cms-albero__freccia {
  flex: none;
  width: 0.75rem;
  height: 0.75rem;
  border-right: 2px solid var(--paper-faint);
  border-bottom: 2px solid var(--paper-faint);
  transform: rotate(-45deg);
  transition: transform 0.15s ease;
}

details[open] > .cms-albero__ramo .cms-albero__freccia {
  transform: rotate(45deg);
}

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

.cms-albero__foglia--attiva {
  background: var(--ink-3);
  color: var(--paper);
  font-weight: 600;
  box-shadow: inset 3px 0 0 var(--cyan);
}

.cms__nav-fuori {
  margin: 1.25rem 0 0;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
  font-size: 0.9375rem;
}

.cms__nav-fuori a {
  color: var(--cyan);
}

.cms__main {
  padding: 1.5rem var(--gutter) 4rem;
  max-width: 56rem;
}

.cms__titolo {
  margin: 0 0 0.5rem;
  font-size: clamp(1.5rem, 3vw, 2rem);
  line-height: 1.2;
}

/* Occhiello sopra il titolo: il ramo dell'albero in cui sta la sezione aperta. */
.cms__ramo {
  margin: 0 0 0.375rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--paper-faint);
}

/* Rotta della pagina modificata, col link che la apre. */
.cms__percorso {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.75rem;
  margin: 0 0 1.25rem;
  font-size: 0.875rem;
}

.cms__percorso code {
  color: var(--paper-dim);
  font-size: 0.8125rem;
}

.cms__percorso a {
  color: var(--cyan);
}

.cms__sottotitolo {
  margin: 0 0 2rem;
  color: var(--paper-dim);
}

.cms__sezione-titolo {
  margin: 2.5rem 0 1rem;
  font-size: 1.125rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--paper-dim);
}

.cms__vuoto {
  color: var(--paper-faint);
  font-size: 0.9375rem;
}

.cms__note {
  margin: 0;
  padding-left: 1.25rem;
  color: var(--paper-dim);
  font-size: 0.9375rem;
}

/* Spiegazione in cima a una sezione della maschera (TextGroup.Nota). */
.cms__nota-sezione {
  margin: -1rem 0 2rem;
  padding: 0.75rem 1rem;
  border-left: 3px solid var(--line);
  background: var(--ink-2);
  border-radius: var(--radius-sm);
  color: var(--paper-dim);
  font-size: 0.9375rem;
}

/* --- Segnaposti dei modelli e-mail -------------------------------------- */
.cms-segnaposti {
  margin: 0 0 2rem;
  padding: 0.75rem 1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--ink-2);
}

.cms-segnaposti__titolo {
  cursor: pointer;
  color: var(--paper);
  font-weight: 600;
}

.cms-segnaposti__aiuto {
  margin: 0.75rem 0;
  color: var(--paper-dim);
  font-size: 0.9375rem;
}

.cms-segnaposti code {
  color: var(--cyan);
  white-space: nowrap;
}

.cms__note li + li {
  margin-top: 0.5rem;
}

/* --- Accesso ------------------------------------------------------------- */
.cms--accesso {
  display: grid;
  place-items: center;
  padding: var(--gutter);
}

.cms__accesso {
  width: 100%;
  max-width: 24rem;
}

/* --- Form ---------------------------------------------------------------- */
.cms-form {
  display: grid;
  gap: 1.5rem;
}

.cms-form__errore,
.cms-form__esito {
  margin: 0 0 1.5rem;
  padding: 0.875rem 1rem;
  border-radius: var(--radius-sm);
  border-left: 4px solid var(--coral-solid);
  background: var(--ink-2);
}

.cms-form__esito {
  border-left-color: var(--cyan);
}

.cms-form__azioni {
  position: sticky;
  bottom: 0;
  padding: 1rem 0;
  background: var(--ink);
  border-top: 1px solid var(--line);
}

.cms-campo {
  display: grid;
  gap: 0.375rem;
}

.cms-campo__label {
  font-weight: 600;
  font-size: 0.9375rem;
}

.cms-campo__input {
  width: 100%;
  padding: 0.625rem 0.75rem;
  border: 1px solid var(--bordo-controllo);
  border-radius: var(--radius-sm);
  background: var(--ink-2);
  color: var(--paper);
  /* 16px: sotto questa misura iOS ingrandisce la pagina al focus. */
  font: 400 1rem/1.5 var(--font);
  resize: vertical;
}

.cms-campo__input:focus-visible {
  border-color: var(--cyan);
}

.cms-campo--errore .cms-campo__input {
  border-color: var(--coral-text);
}

.cms-campo__messaggio {
  margin: 0;
  color: var(--coral-text);
  font-size: 0.875rem;
}

.cms-campo__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  color: var(--paper-faint);
  font-size: 0.8125rem;
}

.cms-campo__meta code {
  color: var(--paper-dim);
}

.cms-campo__meta a {
  color: var(--cyan);
}

/* --- Pulsanti ------------------------------------------------------------ */
.cms-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.75rem;
  padding: 0 1.25rem;
  border: 1px solid var(--bordo-controllo);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--paper);
  font: 600 1rem/1 var(--font);
  cursor: pointer;
}

.cms-btn:hover {
  border-color: var(--cyan);
  color: var(--cyan);
}

.cms-btn--primario {
  border-color: transparent;
  background: var(--cyan-deep);
  color: #fff;
}

.cms-btn--primario:hover {
  background: var(--cyan);
  color: #fff;
}

/* --- Elenchi e tabelle --------------------------------------------------- */
/* Mappa dei contenuti nel cruscotto. Sono una quarantina di sezioni: righe
   raccolte sotto il nome del ramo, non altrettante card, che appiattirebbero
   la gerarchia proprio dove serve leggerla. */
.cms-sezioni,
.cms-sezioni ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.cms-sezioni {
  display: grid;
  gap: 1.75rem;
}

.cms-sezioni__ramo {
  display: block;
  padding-bottom: 0.375rem;
  border-bottom: 1px solid var(--line);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--paper-faint);
}

/* Due classi di proposito: il reset «.cms-sezioni ul» qui sopra ha specificita'
   piu' alta di una classe sola e azzererebbe questo margine. */
.cms-sezioni .cms-sezioni__figli {
  display: grid;
  margin: 0.25rem 0 0;
}

.cms-sezioni__voce {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.75rem;
}

/* Il link occupa l'altezza della riga: il bersaglio e' 44px anche se il testo
   e' una parola. */
.cms-sezioni__link {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  font-weight: 600;
  color: var(--paper);
}

.cms-sezioni__conteggio {
  color: var(--paper-faint);
  font-size: 0.875rem;
}

/* Le tabelle larghe scorrono dentro il proprio contenitore, non trascinano
   la pagina in orizzontale. */
.cms-tabella {
  display: block;
  overflow-x: auto;
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9375rem;
}

.cms-tabella th,
.cms-tabella td {
  padding: 0.5rem 0.75rem;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--line);
}

.cms-tabella th {
  color: var(--paper-dim);
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.cms-tabella__gruppo {
  display: block;
  color: var(--paper-faint);
  font-size: 0.8125rem;
}

.cms-tabella__valore {
  color: var(--paper-dim);
}

.cms-revisioni {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1rem;
}

.cms-revisioni__voce {
  padding: 1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--ink-2);
}

.cms-revisioni__meta {
  margin: 0 0 0.5rem;
  color: var(--paper-faint);
  font-size: 0.8125rem;
}

.cms-revisioni__azione {
  margin-top: 0.75rem;
}

.cms-valore {
  margin: 0;
  padding: 0.75rem 1rem;
  border-left: 3px solid var(--cyan);
  background: var(--ink-3);
  white-space: pre-wrap;
}

/* --- Integrazioni di terze parti ----------------------------------------- */
/* Voce di menu fuori dall'albero: l'albero elenca sezioni di testi, questa non
   lo e'. Staccata da un filo come "Apri il sito", che sta poco sotto. */
.cms__nav-extra {
  margin: 1.25rem 0 0;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
  font-size: 0.9375rem;
  font-weight: 600;
}

.cms__nav-extra a {
  display: block;
  min-height: 2.75rem;
  padding: 0.6875rem 0;
  color: var(--cyan);
}

/* Riga di stato: dice se in questo momento il sito serve codice di terze parti.
   Il bordo corallo compare solo quando lo sta servendo — corallo segnala, e
   questa e' la cosa che vale la pena notare aprendo la maschera. */
.cms-stato {
  margin: 0 0 1.5rem;
  padding: 0.875rem 1rem;
  border-left: 4px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--ink-3);
  font-size: 0.9375rem;
}

.cms-stato--acceso {
  border-left-color: var(--coral-solid);
}

.cms-stato a {
  color: var(--cyan);
}

/* Avviso permanente, non chiudibile: le conseguenze di questa maschera non si
   vedono guardando il sito, quindi restano scritte sopra i campi. */
.cms-avviso {
  margin: 0 0 2rem;
  padding: 1rem 1.25rem;
  border-left: 4px solid var(--coral-solid);
  border-radius: var(--radius-sm);
  background: var(--ink-2);
}

.cms-avviso__titolo {
  margin: 0 0 0.75rem;
  font-size: 1rem;
  color: var(--paper);
}

.cms-avviso__elenco {
  margin: 0;
  padding-left: 1.25rem;
  font-size: 0.9375rem;
}

.cms-avviso__elenco li + li {
  margin-top: 0.625rem;
}

.cms-avviso__elenco a {
  color: var(--cyan);
}

/* Spiegazione sotto l'etichetta di un campo. Distinta da .cms-campo__meta, che
   sta sotto il controllo e porta la chiave e lo storico. */
.cms-campo__aiuto {
  margin: 0;
  color: var(--paper-dim);
  font-size: 0.875rem;
}

/* Un frammento e' codice: a spaziatura fissa si conta un carattere sbagliato,
   a spaziatura proporzionale no. Le righe restano a capo invece di scorrere in
   orizzontale, perche' i frammenti dei fornitori arrivano spesso minificati su
   una riga sola e cercarli a scorrimento sarebbe peggio. */
.cms-campo__input--codice,
.cms-valore--codice {
  font-family: ui-monospace, "SFMono-Regular", "Cascadia Mono", "Consolas", monospace;
  font-size: 0.875rem;
  line-height: 1.6;
}

.cms-valore--codice {
  overflow-x: auto;
  margin: 0;
  padding: 0.75rem 1rem;
  border-left: 3px solid var(--cyan);
  border-radius: 0;
  background: var(--ink-3);
  color: var(--paper);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* Casella di spunta della maschera. Il bersaglio tattile e' la riga intera,
   alta 44px: la casella da sola sarebbe 24px e il progetto tiene la soglia
   piu' alta di quella che 2.5.8 chiede. */
.cms-check {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  min-height: 2.75rem;
}

.cms-check__input {
  flex: none;
  width: 1.5rem;
  height: 1.5rem;
  accent-color: var(--cyan);
}

.cms-check__label {
  display: flex;
  align-items: center;
  min-height: 2.75rem;
  font-weight: 600;
  font-size: 0.9375rem;
  cursor: pointer;
}

/* Conteggio accanto al titolo di una sezione: dice quante schede ci sono senza
   diventare parte del titolo. */
.cms__conteggio {
  margin-left: 0.5rem;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: var(--paper-faint);
}

/* --- Scheda di uno script ------------------------------------------------ */
/* fieldset e legend, non un div con un titolo dentro: i controlli sono di uno
   script solo, e la legenda lo annuncia insieme a ogni campo. Il fieldset porta
   un bordo e una larghezza minima suoi, che qui vanno azzerati. */
.cms-nodo {
  display: grid;
  gap: 1rem;
  min-width: 0;
  margin: 0;
  padding: 1.25rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--ink-2);
}

.cms-nodo__legenda {
  padding: 0 0.5rem;
  font-weight: 600;
  font-size: 1rem;
  color: var(--paper);
}

/* I campi restano bianchi sul fondo grigio della scheda: sono la parte in cui
   si scrive, e devono staccarsi da quella che li contiene. */
.cms-nodo .cms-campo__input {
  background: var(--ink);
}

/* Interruttore a sinistra, cestino a destra: le due azioni della scheda. */
.cms-nodo__testata {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

/* Riga che introduce i quattro campi del codice. */
.cms-nodo__istruzione {
  margin: 0.5rem 0 -0.5rem;
  color: var(--paper-dim);
  font-size: 0.875rem;
}

/* I quattro pezzi di uno script: su schermo largo due per riga, cosi' la
   scheda resta leggibile senza diventare una colonna lunghissima; sotto,
   uno sotto l'altro. L'ordine di lettura resta quello del documento. */
.cms-nodo__parti {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 1.25rem;
}

@media (max-width: 52rem) {
  .cms-nodo__parti {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Il cestino resta un pulsante come gli altri: nell'area protetta il colore
   dell'azione e' uno solo, e il corallo qui significherebbe «attenzione» in un
   punto in cui invece si preme. */
.cms-nodo__cestino {
  gap: 0.5rem;
  padding: 0 1rem;
}

.cms-nodo__icona {
  flex: none;
}

/* --- Stampa -------------------------------------------------------------- */
@media print {
  .site-header,
  .nav-toggle,
  .share,
  .hero__media,
  .hero__scrim {
    display: none !important;
  }
  body {
    background: #fff;
    color: #000;
  }
}