/* ============================================================
   Maqer — l'impianto

   La griglia, la tipografia, le superfici, i bottoni, la testata e il
   piede. Tutto quello che vale per ogni pagina di ogni sito.

   COSA NON C'E' QUI DENTRO

   I colori. Non uno. Ogni valore passa da una variabile definita in
   ruoli.css, che a sua volta la prende dalla tavolozza di WordPress.
   Se in questo file compare un #, e' un errore.

   DA DOVE VIENE

   Copiato da prototype/maqer-v2.css, che e' il foglio su cui sono
   state approvate le pagine di esempio. Non e' stato riscritto a mano
   di proposito: dentro ci sono correzioni che sono costate giorni di
   caccia (il testo che diventava verde al passaggio del mouse, il
   sommario grigio nella testata, il carosello che usciva dal blocco),
   e riscriverlo a occhio vorrebbe dire rimetterle tutte.

   Per aggiornarlo: si modifica il prototipo, si riprova li', e poi si
   ricopia. Non si modifica questa copia e basta, altrimenti fra un mese
   i due file dicono cose diverse e non si sa quale sia quello giusto.
   ============================================================ */

/* ============================================================
   Maqer — layout v2

   Impianto ispirato alla struttura di goodhabitz.com:
   blocco di colore pieno con angoli bassi arrotondati, immagine
   larga che sborda sotto la testata, nastro scorrevole, sezione
   profonda a metà pagina, griglie di card.

   Cosa ho ripreso: la STRUTTURA e il MOVIMENTO.
   Cosa non ho ripreso e non va ripreso: i loro testi, le loro
   illustrazioni, le loro fotografie, il loro marchio, il loro viola.

   Tutto passa dai token Maqer: cambiando skin, lo stesso impianto
   serve Job, Advisory e il brand madre.

   Le animazioni originali sono due sole: un nastro orizzontale
   infinito e una rotazione. Qui ci sono entrambe, più le entrate
   in scena. Niente di più: il resto lo fa il layout.
   ============================================================ */



*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); overflow-x: hidden; }
img, svg, video { max-width: 100%; display: block; }
ul { margin: 0; padding: 0; list-style: none; }

/* La riga qui sopra batte la regola con cui il browser nasconde gli
   elementi che hanno l'attributo `hidden`. La testata senza foto mostrava
   il segno dell'immagine rotta nell'angolo in alto a sinistra, e un <img>
   vuoto grande quanto tutto il blocco steso dietro il velo. Trovata
   guardando la pagina il 26 agosto 2026. */
[hidden] { display: none !important; }

/* Il raggio grande della testata non esiste nella scala del design
   system: è una forma, non un colore, e questo impianto ci si regge. */
:root {
  --r-6: 40px;
}

/* ---------- Griglia ---------------------------------------- */

.wrap { width: 100%; max-width: 1280px; margin: 0 auto; padding-inline: 20px; }
@media (min-width: 760px) { .wrap { padding-inline: 40px; } }

.section { padding-block: 72px; }
@media (min-width: 760px)  { .section { padding-block: 104px; } }
@media (min-width: 1100px) { .section { padding-block: 128px; } }

.section-tight { padding-block: 48px; }

/* ---------- Segno O. di sfondo -------------------------------
   Il marchio ingrandito, dietro il contenuto di una sezione, come
   nel canone di riferimento (chi-siamo). Colore e opacita' NON
   sono qui: arrivano dallo stile in riga del segno, perche' il
   contrasto sul fondo cambia da sezione a sezione — nero tenue su
   chiaro (.08), bianco su colore (.14), un accento a piena voce
   (arancio .5). Il testo resta SEMPRE sopra (z-index), e la
   sezione ritaglia il segno ai propri bordi. Si accende solo dove
   il segno c'e': le sezioni senza non cambiano di una virgola. */
.omark-fondo {
  position: absolute; z-index: 0; pointer-events: none; user-select: none;
  display: block; background-color: currentColor; opacity: 0.08;
  -webkit-mask: url("../img/maqer-omark.svg") no-repeat center / contain;
  mask: url("../img/maqer-omark.svg") no-repeat center / contain;
  aspect-ratio: 272 / 222; width: 300px;
}
.omark-fondo--tr     { right: -70px;  top: -100px;    width: 300px; }
.omark-fondo--bl     { left: -60px;   bottom: -100px; width: 320px; }
.omark-fondo--tl     { left: -70px;   top: -100px;    width: 300px; }
.omark-fondo--br     { right: -60px;  bottom: -100px; width: 320px; }
.omark-fondo--xl     { width: min(48vw, 560px); }
.omark-fondo--centro {
  left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(60vw, 680px);
}

.section:has(> .omark-fondo) { position: relative; overflow: hidden; }
.section:has(> .omark-fondo) > .wrap { position: relative; z-index: 1; }

/* ALTEZZA MANUALE: IL CONTENUTO SI CENTRA, LE MANIGLIE HANNO SENSO.
   ------------------------------------------------------------
   Quando si allunga una sezione trascinando le maniglie (si salva come
   `min-height`), il contenuto si mette al centro invece di restare in
   alto. Cosi' la maniglia SOPRA, tirata in su, alza il bordo alto, e
   quella SOTTO, tirata in giu', abbassa il bordo basso: la sezione
   cresce dalla parte che stai tirando, non sempre verso il basso. Vale
   solo quando un'altezza c'e' (opt-in): le sezioni normali non cambiano. */
.wp-block-maqer-fascia[style*="min-height"],
.wp-block-maqer-pannello[style*="min-height"],
.wp-block-maqer-testata[style*="min-height"],
.hero[style*="min-height"] {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* ---------- Tipografia --------------------------------------
   GoodHabitz usa Plus Jakarta Sans in peso 800. Euclid Square
   arriva a 700: è il nostro massimo e va usato tutto. */

.display, h1.display {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.5rem, 1.4rem + 4.6vw, 3.5rem);
  line-height: 1.08;
  letter-spacing: -0.03em;
  /* `balance` distribuisce le parole per pareggiare le righe. E' il
     motivo per cui gli a capo sembrano arbitrari: li decide il browser
     contando i caratteri, non il senso della frase.
     Con `.a-capo-manuali` si spegne e comandano gli <br> scritti a mano. */
  text-wrap: balance;
  margin: 0;
}

.a-capo-manuali .display,
.a-capo-manuali .display-sm,
.a-capo-manuali .lead { text-wrap: normal; }
.display-sm, h2.display-sm {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.875rem, 1.2rem + 2.6vw, 2.75rem);
  line-height: 1.12;
  letter-spacing: -0.028em;
  text-wrap: balance;
  margin: 0;
}
.h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.125rem, 1rem + 0.6vw, 1.375rem);
  line-height: 1.25;
  letter-spacing: -0.015em;
  margin: 0;
}

.lead {
  /* Il file dei token contiene `.lead { color: var(--fg-muted) }`, cioe'
     un grigio fisso che ignora la superficie su cui sta. Sulla testata
     scura restava grigio invece di diventare bianco. `inherit` lo fa
     seguire il colore del blocco che lo contiene, sempre. */
  color: inherit;
  font-size: clamp(1.0625rem, 1rem + 0.5vw, 1.25rem);
  font-weight: 400;
  line-height: 1.55;
  /* `var(--rigo, ...)` e non `58ch` secco: la larghezza scelta nella
     barra del blocco entra qui dentro invece di dover battere questa
     regola per specificita'. Chi non sceglie niente resta a 58. */
  max-width: var(--rigo, 58ch);
  margin: 0;
}

.eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: var(--fs-micro); font-weight: 700;
  letter-spacing: var(--tracking-label); text-transform: uppercase;
  margin: 0 0 var(--sp-5);
}
.eyebrow::before {
  content: ""; flex: none; width: 13px; height: 11px;
  background-color: currentColor;
  -webkit-mask: url("../img/maqer-omark.svg") no-repeat center / contain;
  mask: url("../img/maqer-omark.svg") no-repeat center / contain;
}

/* Stesso problema di .lead: colore fisso nei token, ignora la superficie. */
.hero .caption, .hero .micro, .plate .caption, .plate .micro { color: inherit; }

/* ---------- Superfici ---------------------------------------
   Stessi ruoli della versione precedente: la skin decide i colori. */

.plate {
  /* Se un blocco ha gli angoli arrotondati deve anche tagliare quello
     che contiene, altrimenti il contenuto esce dalla curva. E' successo
     col carosello dei corsi: le schede spuntavano fuori dal viola. */
  overflow: hidden;
  background: var(--surface);
  color: var(--on-surface);
  --fg: var(--on-surface);
  --brand: var(--on-surface);
  --brand-600: var(--on-surface);
  --on-brand: var(--surface);
  --border: color-mix(in oklab, var(--on-surface) 26%, transparent);
}
.plate a { color: var(--on-surface); }

.plate-brand     { --surface: var(--surface-brand);  --on-surface: var(--on-surface-brand); }
.plate-profondo  { --surface: var(--surface-deep);   --on-surface: var(--on-surface-deep); }
.plate-a1        { --surface: var(--accent-1); --on-surface: var(--on-accent-1); }
.plate-a2        { --surface: var(--accent-2); --on-surface: var(--on-accent-2); }
.plate-flag      { --surface: var(--accent-flag); --on-surface: var(--ink); }
.plate-quiet     { background: var(--paper-2); }

/* ---------- Bottoni -----------------------------------------
   Raggio 8, peso 700, corpo piccolo: come l'originale. */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 15px 26px; border-radius: var(--r-2);
  font: inherit; font-size: var(--fs-body-s); font-weight: 700;
  border: 2px solid transparent; cursor: pointer; text-decoration: none;
  transition: background-color 180ms cubic-bezier(.22,1,.36,1),
              border-color 180ms cubic-bezier(.22,1,.36,1),
              color 180ms cubic-bezier(.22,1,.36,1),
              transform 180ms cubic-bezier(.22,1,.36,1);
}
.btn:active { transform: translateY(1px); }

.btn-primary { background: var(--brand); color: var(--on-brand); }
/* L'hover non cambia colore, scurisce: cosi' vale per qualunque
   colore il bottone abbia, oggi e dopo che l'avrai cambiato. */
.btn-primary:hover { filter: brightness(0.92); }

.btn-line { background: transparent; color: var(--ink); border-color: var(--line-strong); }
.btn-line:hover { border-color: var(--evidenza); color: var(--evidenza); }

.plate a.btn-primary, .plate .btn-primary { background: var(--brand); color: var(--on-brand); }
.plate a.btn-primary:hover, .plate .btn-primary:hover { opacity: 0.86; }
.plate a.btn-line, .plate .btn-line { color: var(--on-surface); border-color: var(--on-surface); }
.plate a.btn-line:hover, .plate .btn-line:hover { background: var(--on-surface); color: var(--surface); }

.btn-lg { padding: 17px 32px; font-size: var(--fs-body); }

.link-freccia {
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 700; font-size: var(--fs-body-s); text-decoration: none;
  transition: gap 180ms cubic-bezier(.22,1,.36,1);
}
.link-freccia:hover { gap: 13px; }

/* ---------- Testata del sito -------------------------------- */

.site-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--paper);
  transition: box-shadow 200ms;
}
.site-header[data-scrollata="si"] { box-shadow: var(--shadow-1); }
.site-header .bar {
  position: relative;
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-4); min-height: 58px;
}
/* Il vincolo va sull'IMG, non solo sul contenitore: un logo SVG non porta
   dimensioni intrinseche, quindi senza questo si stampa alla sua misura
   nativa (centinaia di pixel) e sfonda la barra. */
.site-header .logo,
.site-header .logo img,
.site-header img.custom-logo { height: 30px; width: auto; max-width: none; }
@media (min-width: 760px) {
  .site-header .logo,
  .site-header .logo img,
  .site-header img.custom-logo { height: 36px; }
}

.nav a {
  font-size: var(--fs-body-s); font-weight: 500; text-decoration: none; color: var(--ink);
  padding: 8px 0; border-bottom: 2px solid transparent;
}
.nav a:hover { border-bottom-color: var(--evidenza); }
/* Il menu e' quello nativo di WordPress (wp:navigation, overlayMenu
   "mobile"): sopra i ~600px sta in riga; sotto, il blocco mostra da se' il
   pulsante hamburger e apre il suo pannello. Il tema NON aggiunge un
   secondo hamburger: prima ne dichiarava uno (.nav-toggle) che nel markup
   non esisteva, e fra 600 e 1120px il menu spariva senza modo di aprirlo. */
.nav { align-items: center; gap: var(--sp-6); }
.nav .wp-block-navigation__container { gap: var(--sp-6); align-items: center; }
@media (min-width: 1120px) {
  .nav,
  .nav .wp-block-navigation__container { gap: var(--sp-8); }
}
/* Il pannello del menu su mobile: il blocco core lo apre (aggiunge
   .is-menu-open), il tema gli da' la forma di schermata piena. Senza,
   il foglio del core non sempre e' caricato e il pannello restava alto
   quanto la barra, con le voci schiacciate e illeggibili. */
.site-header .wp-block-navigation__responsive-container.is-menu-open {
  position: fixed; top: 0; left: 0; right: 0;
  /* Altezza esplicita, non da inset: il blocco core crea un contenitore
     per gli elementi fixed, e con top/bottom:0 il pannello collassava
     all'altezza della barra. 100dvh e' sempre l'altezza dello schermo. */
  height: 100dvh; z-index: 100; overflow-y: auto;
  background: var(--paper);
  padding: var(--sp-16) 24px var(--sp-12);
  display: flex; flex-direction: column; align-items: stretch;
}
.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
  display: flex; width: 100%;
}
.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
  flex-direction: column; gap: var(--sp-5); align-items: flex-start; width: 100%;
}
.site-header .wp-block-navigation__responsive-container.is-menu-open a {
  font-size: var(--fs-h4); font-weight: 600;
}
.site-header .wp-block-navigation__responsive-container-close {
  position: absolute; top: var(--sp-6); right: 24px;
}

.header-cta { display: flex; align-items: center; gap: var(--sp-3); }
/* Il bottone dell'header alla stessa misura delle voci di menu (15px):
   a 13px il testo in grassetto appariva piu' denso e sembrava avere una
   spaziatura fra le lettere diversa dal resto della barra. */
.header-cta .btn { padding: 9px 20px; font-size: var(--fs-body-s); font-weight: 600; }
.header-cta .hide-sm { display: none; }
@media (min-width: 700px) { .header-cta .hide-sm { display: inline-flex; } }

/* ---------- LA TESTATA: il blocco di colore -----------------
   È il gesto che regge tutto l'impianto. Blocco pieno del colore
   di divisione, angoli in basso arrotondati, immagine larga che
   sborda sotto il testo. */

.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--hero-superficie);
  color: var(--hero-testo);
  /* Scelta del brand: sul verde Job il testo della hero e' SEMPRE bianco
     (righe/bordi inclusi). Vale per ogni superficie di divisione. */
  --hero-testo: #fff;
  /* Hero squadrata: niente angoli arrotondati (scelta dell'utente,
     3 settembre 2026). Il blocco di colore va da bordo a bordo netto. */
  border-radius: 0;
  padding-block: var(--sp-24);
  /* Hero piu' alte: occupano buona parte dello schermo, cosi' l'immagine
     di sfondo respira. Il contenuto (colonna a sinistra) resta centrato
     in verticale. */
  min-height: clamp(500px, 72vh, 800px);
  display: flex; flex-direction: column; justify-content: center;
  --brand: var(--hero-testo);
  --on-brand: var(--hero-superficie);
  /* Densita' del velo di colore sopra la foto.
     1 = solo colore, la foto sparisce. 0 = solo foto, il testo non si legge.
     Sotto 0,6 il contrasto scende sotto la soglia: va verificato. */
  --velo: 0.86;
}
@media (min-width: 900px) { .hero { padding-block: var(--sp-32) var(--sp-24); } }

/* Variante chiara: colore di divisione pieno e testo nero.
   Si aggiunge .hero--chiara al blocco. */
/* Variante scura, facoltativa: si aggiunge .hero--scura al blocco. */
.hero--scura {
  --hero-superficie: var(--hero-superficie-scura);
  --hero-testo: var(--hero-testo-scuro);
}

/* La foto sta DIETRO tutto, a tutta superficie. */
.hero__sfondo {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover;
}

/* Il velo di colore fra la foto e il testo: e' quello che tiene il
   blocco riconoscibile come Maqer anche con una foto sotto. */
.hero__velo {
  position: absolute; inset: 0; z-index: -1;
  /* Overlay a SFUMATURA: pieno del colore a sinistra (dove sta il testo),
     che sfuma a trasparente verso destra, cosi' un'immagine di sfondo si
     vede bene nella meta' destra. Senza immagine, sotto c'e' comunque il
     colore pieno della hero: resta una fascia piena. */
  background: linear-gradient(90deg,
    var(--hero-superficie) 0%,
    var(--hero-superficie) 48%,
    transparent 100%);
  /* Lo slider «Densità del velo» agisce anche su desktop: scala tutta la
     sfumatura. 1 = fascia piena a sinistra; sotto, la foto affiora. Prima
     il gradiente ignorava --velo e lo slider non faceva niente. */
  opacity: var(--velo);
}
@media (max-width: 760px) {
  /* Su telefono il testo occupa tutta la larghezza: overlay pieno,
     cosi' resta leggibile anche sopra un'immagine. */
  .hero__velo { background: var(--hero-superficie); opacity: var(--velo); }
}

/* ---------- Foto di sfondo nelle fasce ----------------------
   La stessa idea della testata: la foto sta dietro, un velo del colore
   della sezione ci sta sopra, e il testo resta leggibile senza doverlo
   decidere a mano. Il velo prende --sezione-fondo, che ogni superficie
   dichiara col proprio colore: bianco su «carta», il colore pieno su
   «tinta», il colore scelto sul personalizzato. */
.section { --sezione-fondo: var(--paper); }
.section.plate-quiet { --sezione-fondo: #F5F5F4; }
.section.plate-brand { --sezione-fondo: var(--divisione); }
.section.tinta-a-mano { --sezione-fondo: var(--surface); }

.section--con-foto { position: relative; isolation: isolate; overflow: hidden; }
.section--con-foto > .wrap { position: relative; z-index: 1; }
.section__sfondo {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover;
}
.section__velo {
  position: absolute; inset: 0; z-index: -1;
  background: var(--sezione-fondo);
  opacity: var(--velo-sezione, 0.82);
}

/* Scelta del committente: sul verde Job il testo E le righe delle
   SUPERFICI piene sono sempre bianchi, ovunque — come gia' nella testata
   e nei pannelli delle divisioni. Il contrasto matematico vorrebbe il nero
   (il verde e' chiaro), ma e' una scelta di marchio, non una preferenza. */
.section.plate-brand.colore-job,
.plate.plate-brand.colore-job {
  --on-surface: var(--paper);
  color: var(--paper);
}

/* La larghezza del testo decide dove vanno gli a capo. Non e' una
   scelta arbitraria del browser: e' questa misura. Piu' e' stretta,
   piu' righe corte; piu' e' larga, meno righe e piu' lunghe.

   LA MISURA STA SUI FIGLI, NON SUL CONTENITORE.
   Stava qui, sul riquadro: ogni riga dentro la testata si trovava
   addosso gli stessi 48 caratteri e non c'era modo di cambiarne una
   sola. Un figlio non puo' allargarsi oltre il padre, quindi finche'
   il limite era qui il cursore della barra non poteva servire a
   niente.

   Passandola ai figli il risultato di partenza e' identico — ognuno
   resta a 48 caratteri, centrato, misurato prima e dopo — ma adesso
   ogni riga puo' avere la sua.

   Due classi e non una, perche' `.hero__azioni` piu' sotto ha una
   misura sua da 30rem che altrimenti vincerebbe per ordine: prima
   perdeva contro il contenitore e non ha mai avuto effetto, e cosi'
   resta. */
.hero__testo {
  /* Hero orientata a SINISTRA: il testo sta in una colonna a sinistra e
     lo spazio a destra resta libero per l'immagine di sfondo. */
  max-width: 640px;
  margin-inline: 0;
  text-align: left;
}

.hero .hero__testo > * {
  /* IN REM, NON IN CARATTERI.
     `ch` si misura sul carattere dell'elemento, non su quello del
     contenitore: finche' il limite stava sul riquadro, 48ch erano 48
     lettere di testo normale — 478px. Spostato sui figli, sul titolone
     da 56px gli stessi 48ch diventavano 1701px, e il titolo prendeva
     tutta la riga. Misurato.
     Congelata in rem, la misura di partenza e' identica a prima. Il
     valore scelto nella barra resta invece in caratteri, ed e' giusto
     che lo sia: li' vuol dire proprio «tante lettere di QUESTO testo». */
  max-width: var(--rigo, var(--misura-testata, 34rem));
  margin-inline: 0;
}

/* Il testo si stacca dalla foto sottostante. Senza, con il velo basso
   le lettere si confondono col fondo. */
.hero .display,
.hero .lead,
.hero .eyebrow,
.hero__prove { text-shadow: var(--ombra-testo); }
.hero .display { margin-bottom: var(--sp-6); }
.hero .lead { margin-inline: 0; }
.hero .eyebrow { justify-content: flex-start; }

.hero__azioni { display: flex; flex-wrap: wrap; gap: var(--sp-3); max-width: 34rem; margin: var(--sp-10) 0 0; justify-content: flex-start; }
.hero__azioni .btn { width: auto; }

/* Nella testata i bottoni sono tutti e due pieni: sopra una foto un
   bottone col solo contorno si perde. */
.hero .btn { box-shadow: var(--shadow-3); }
.hero .btn:hover { transform: translateY(-2px); }
.hero .btn:active { transform: translateY(0); }

.hero .btn-primary {
  background: var(--hero-testo); color: var(--hero-superficie);
  border-color: var(--hero-testo);
}
.hero .btn-primary:hover { opacity: 0.9; }

/* Il secondo bottone e' l'opposto del primo, altrimenti su testata
   scura escono due bottoni bianchi identici e non si distinguono. */
.hero .btn-line {
  background: var(--paper); color: var(--ink); border-color: var(--paper);
}
.hero--scura .btn-line {
  background: var(--ink); color: var(--paper); border-color: var(--ink);
}
.hero .btn-line:hover { opacity: 0.9; }

.hero__prove {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: var(--sp-4) var(--sp-8);
  margin-top: var(--sp-8); font-size: var(--fs-body-s); font-weight: 700;
}
/* Anche qui la voce non e' un contenitore.
   Era `display: flex`, e con un testo di un pezzo solo funzionava. Ma
   basta mettere una parola in grassetto perche' quel `<strong>` diventi
   un secondo elemento flex e vada a capo per conto suo. E' lo stesso
   difetto di `.elenco-problemi`, trovato prima che capitasse.
   Il segno di spunta esce dal flusso, il testo resta testo. */
.hero__prove li {
  position: relative;
  padding-left: 30px;
  min-height: 20px;
}
.hero__prove svg {
  position: absolute;
  left: 0;
  top: 0.15em;
  flex: none;
}

/* Comandi di prova: solo nel prototipo, non finiscono nel tema. */
.hero__comandi {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
  gap: var(--sp-4); margin-top: var(--sp-12);
  font-size: var(--fs-caption); font-weight: 700;
}
.carica {
  display: inline-flex; align-items: center;
  border: 2px solid currentColor; border-radius: var(--r-2);
  padding: 9px 16px; cursor: pointer;
}
.carica input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.hero__comandi label { display: inline-flex; align-items: center; gap: 10px; }
.hero__comandi input[type="range"] { accent-color: currentColor; }


/* ---------- I due ambiti -------------------------------------
   Il verde e' Job e c'e' sempre. Sopra al verde corrono due mondi
   con pubblici e contenuti diversi:

     .ambito-persone   rosa    i singoli
     .ambito-aziende   viola   le imprese

   La classe si mette sul blocco, oppure sul <body> nelle pagine
   dedicate: tutto quello che sta dentro prende il colore giusto.
   ------------------------------------------------------------ */

.ambito-persone { --ambito: var(--ambito-persone); --on-ambito: var(--on-ambito-persone); }
.ambito-aziende { --ambito: var(--ambito-aziende); --on-ambito: var(--on-ambito-aziende); }

/* La segnaletica: una fascia sottile in cima alle pagine dedicate,
   così si capisce in che mondo si è senza doverlo leggere. */
.segna-ambito {
  background: var(--ambito); color: var(--on-ambito);
  padding-block: var(--sp-3);
  font-size: var(--fs-micro); font-weight: 700;
  letter-spacing: var(--tracking-label); text-transform: uppercase;
}

/* Il bivio in home: due strade, una per mondo. */
.bivio { display: grid; gap: var(--sp-5); }
@media (min-width: 900px) { .bivio { grid-template-columns: 1fr 1fr; gap: var(--sp-6); } }

.bivio__via {
  position: relative; isolation: isolate; overflow: hidden;
  background: var(--ambito); color: var(--on-ambito);
  border-radius: var(--r-6);
  padding: var(--sp-16) var(--sp-8) var(--sp-12);
  display: flex; flex-direction: column;
  text-decoration: none;
  min-height: 24rem;
  transition: transform 240ms cubic-bezier(.22,1,.36,1),
              box-shadow 240ms cubic-bezier(.22,1,.36,1);
}
.bivio__via:hover { transform: translateY(-6px); box-shadow: var(--shadow-3); }

.bivio__foto { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.bivio__via::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--ambito); opacity: var(--velo-ambito, 0.88);
}

.bivio__via h3 {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.75rem, 1.2rem + 2.2vw, 2.5rem);
  line-height: 1.06; letter-spacing: -0.03em;
  margin: 0 0 var(--sp-4);
}
.bivio__via p { margin: 0 0 var(--sp-6); font-size: var(--fs-body-l); line-height: 1.5; max-width: var(--rigo, 34ch); }

.bivio__cosa { display: grid; gap: var(--sp-3); margin: 0 0 var(--sp-8); }
.bivio__cosa li {
  display: grid; grid-template-columns: 12px 1fr; gap: var(--sp-3); align-items: center;
  font-size: var(--fs-body-s); font-weight: 700;
}
.bivio__cosa li::before { content: ""; width: 12px; height: 12px; background: currentColor; }

.bivio__vai {
  margin-top: auto; display: inline-flex; align-items: center; gap: 10px;
  font-weight: 700; font-size: var(--fs-body);
}
.bivio__via:hover .bivio__vai { gap: 16px; }

/* ---------- Nastro scorrevole -------------------------------
   L'unica animazione continua dell'originale. Due copie della
   stessa lista scorrono all'infinito: quando la prima esce, la
   seconda è già in posizione e non si vede il salto. */

.nastro {
  overflow: hidden;
  padding-block: var(--sp-12);
  border-bottom: 1px solid var(--line);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.nastro__pista { display: flex; width: max-content; animation: scorri 38s linear infinite; }
.nastro:hover .nastro__pista { animation-play-state: paused; }
.nastro__gruppo { display: flex; align-items: center; gap: var(--sp-16); padding-right: var(--sp-16); }
.nastro__voce {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1rem, 0.9rem + 0.5vw, 1.25rem);
  letter-spacing: -0.01em; white-space: nowrap; color: var(--ink-2);
}

@keyframes scorri {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ---------- Elenco dei problemi -----------------------------
   Una riga per voce, icona a sinistra. Non una griglia di card:
   sono affermazioni da leggere in fila, non cose da confrontare. */

.elenco-problemi { display: grid; gap: var(--sp-5); max-width: var(--rigo, 62ch); }

/* LA VOCE DI ELENCO NON E' UNA GRIGLIA.

   Era `display: grid` con due colonne, icona e testo. In pagina
   funzionava, perche' il testo e' un nodo solo. Nell'editor no: la voce
   e' un campo modificabile e il testo sta in piu' nodi, cosi' OGNI nodo
   diventava una cella della griglia e usciva una lettera per riga.
   Misurato: 618px di larghezza, 783 di altezza, per 57 caratteri.

   E' lo stesso difetto gia' corretto su `.elenco-quadri`, con lo stesso
   rimedio: l'icona esce dal flusso, il testo resta testo. La regola sta
   scritta in sezioni.css riga 167, e valeva anche qui.
   Trovato guardando l'editor il 28 agosto 2026. */
.elenco-problemi li {
  position: relative;
  padding-left: 42px;
  min-height: 26px;
  font-size: clamp(1.0625rem, 0.95rem + 0.6vw, 1.25rem);
  font-weight: 700; line-height: 1.35;
}

/* Il segno della situazione — una croce dentro un cerchio — e' un
   ::before in CSS, non piu' una SVG scritta da render.php. Cosi' compare
   ANCHE nell'editor, non solo in pagina: prima il segno lo metteva solo
   il PHP e chi montava la sezione vedeva righe senza marcatore, e pensava
   di non poterlo mettere. Fuori dal flusso (assoluto): il testo
   modificabile resta intatto, e' la lezione di D-31. Il colore e'
   --evidenza, portato dalla mask che lascia passare solo il colore di
   sfondo dove il segno e' disegnato. */
.elenco-problemi li::before {
  content: "";
  position: absolute;
  left: 0;
  /* -0.09em: il box e' alto quanto la riga e la mask lo centra, ma il testo
     senza discendenti (nessuna g/p/q) ha l'inchiostro tutto sopra la meta'
     geometrica, e il segno sembrava basso. Un filo in su lo porta al centro
     OTTICO delle lettere. Misurato in editor. */
  top: -0.06em;
  width: 30px;
  height: 1.35em; /* alto quanto una riga: il segno si centra da solo, la mask lo mette a meta' riga */
  background-color: var(--evidenza);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='m15 9-6 6M9 9l6 6'/%3E%3C/svg%3E") no-repeat left center / 24px 24px;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='m15 9-6 6M9 9l6 6'/%3E%3C/svg%3E") no-repeat left center / 24px 24px;
}

/* IL SEGNO SI PUO' CAMBIARE, COME NEGLI ALTRI ELENCHI.
   ------------------------------------------------------------
   La croce e' il segno di partenza; dalla barra si sceglie un pallino o
   un quadretto. Stessa centratura della croce: box alto quanto la riga
   (`height: 1.35em`) e mask centrata in verticale, cosi' il segno sta a
   meta' del testo a QUALSIASI corpo.

   Questi selettori hanno due classi apposta: `is-style-quadri` la usa
   anche l'elenco del core (`.is-style-quadri li::before`, una classe), e
   a pari specificita' vincerebbe per ordine — cambiando colore
   (currentColor) e cornice, e sballando il segno. Due classi battono una:
   qui si riafferma TUTTO (cornice, colore, mask) per non ereditare niente
   da quella regola. */
.elenco-problemi.is-style-pallini li::before,
.elenco-problemi.is-style-quadri  li::before {
  left: 0;
  top: -0.06em;
  width: 30px;
  height: 1.35em;
  background-color: var(--evidenza);
}

.elenco-problemi.is-style-pallini li::before {
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Ccircle cx='5' cy='5' r='5' fill='%23000'/%3E%3C/svg%3E") no-repeat left center / 12px 12px;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Ccircle cx='5' cy='5' r='5' fill='%23000'/%3E%3C/svg%3E") no-repeat left center / 12px 12px;
}

.elenco-problemi.is-style-quadri li::before {
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Crect width='10' height='10' rx='1' fill='%23000'/%3E%3C/svg%3E") no-repeat left center / 12px 12px;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Crect width='10' height='10' rx='1' fill='%23000'/%3E%3C/svg%3E") no-repeat left center / 12px 12px;
}

/* ---------- Card alte della soluzione -----------------------
   Formato verticale 3:4, titolo in alto, foto che riempie, velo
   sfumato in basso nel colore di divisione.

   Il velo e' una sfumatura, e le regole di marca vietano le sfumature
   decorative. Questa non lo e': senza, il testo in basso sulla foto non
   si legge. Stessa logica del velo sul video. Non autorizza sfumature
   altrove. */

.card-alte { display: grid; gap: var(--sp-5); }
@media (min-width: 720px)  { .card-alte { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1080px) { .card-alte { grid-template-columns: repeat(3, 1fr); } }

.card-alta {
  position: relative; isolation: isolate; overflow: hidden;
  aspect-ratio: 3 / 4; border-radius: var(--r-5);
  background: var(--card-superficie); color: var(--card-testo);
  display: flex; flex-direction: column; padding: var(--sp-8);
  text-decoration: none;
}
.card-alta__foto { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.card-alta::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(188deg, transparent 58%, var(--card-superficie) 92%);
}
.card-alta h3 { margin: 0; font-size: clamp(1.25rem, 1.05rem + 0.9vw, 1.625rem); }
.card-alta p { margin: auto 0 0; font-size: var(--fs-body-s); line-height: 1.5; }
/* Ogni card e' una superficie a se': un colore per card, mai due
   colori dentro la stessa card. */
.card-alta-1 { --card-superficie: var(--accent-1); --card-testo: var(--on-accent-1); }
.card-alta-2 { --card-superficie: var(--accent-2); --card-testo: var(--on-accent-2); }
.card-alta-3 { --card-superficie: var(--accent-3); --card-testo: var(--on-accent-3); }

.card-alta__segnaposto {
  position: absolute; inset: 0; z-index: -2; display: grid; place-content: center;
  background: var(--paper-3); color: var(--ink-3);
  font-size: var(--fs-caption); font-weight: 500;
}

/* ---------- Sezione profonda -------------------------------- */

/* Stessa ragione della chiusura: l'imbottitura stava in un attributo
   style dentro il prototipo, e da qui in poi sta nel foglio. */
.plate-profondo { border-radius: var(--r-6); padding: var(--sp-16) var(--sp-8); }
@media (max-width: 760px) { .plate-profondo { border-radius: var(--r-5); } }

/* Stessa ragione della testata: la misura ai figli, il margine al
   contenitore. Qui il testo non e' centrato e non deve diventarlo. */
.profondo__intestazione { margin-bottom: var(--sp-12); }
/* 46ch del testo normale, congelati: vedi la nota sulla testata. */
.profondo__intestazione > * { max-width: var(--rigo, 28.625rem); }

/* ---------- Carosello dei corsi ----------------------------
   Scorrimento orizzontale con aggancio, senza librerie: bastano
   overflow-x e scroll-snap. Ogni scheda e' un link, quindi si
   raggiunge anche col tasto Tab e si apre con Invio. */

.carosello { position: relative; }

/* Il nastro dei corsi scorre da solo, come il nastro delle
   certificazioni: due copie della stessa fila, quando la prima esce
   la seconda e' gia' in posizione. Si ferma quando ci passi sopra,
   quando qualcosa dentro prende il fuoco, e col bottone di pausa.
   Le schede restano link veri: si cliccano e si raggiungono col Tab. */

.carosello__vista {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
}

.carosello__pista {
  display: flex; gap: var(--sp-5);
  padding-block: var(--sp-2);
  margin: 0; padding-inline: 0; list-style: none;
}
/* Lo scorrimento non lo fa piu' il CSS ma caroselli.js, perche' la
   pista e' una zona che scorre e deve rispondere anche al dito e alle
   frecce. Il bottone di pausa mette data-fermo, e il JavaScript guarda
   quello. */

@keyframes scorri-corsi {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.corso {
  flex: 0 0 clamp(15rem, 70vw, 17.5rem);
  display: flex; flex-direction: column; gap: var(--sp-3);
  background: var(--paper); color: var(--ink);
  border-radius: var(--r-5); padding: var(--sp-5);
  text-decoration: none;
  transition: transform 220ms cubic-bezier(.22,1,.36,1),
              box-shadow 220ms cubic-bezier(.22,1,.36,1);
}
.corso:hover { transform: translateY(-4px); box-shadow: var(--shadow-3); }
.corso:focus-visible { outline: 3px solid var(--evidenza-carta); outline-offset: 3px; }

.corso__copertina {
  aspect-ratio: 3 / 2; border-radius: var(--r-3); overflow: hidden;
  background: var(--paper-3); display: grid; place-content: center;
  color: var(--ink-3); font-size: var(--fs-micro); font-weight: 700;
}
.corso__meta {
  display: flex; align-items: center; gap: var(--sp-2);
  font-size: var(--fs-micro); font-weight: 700;
  letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--ink-3);
}
/* La scheda e' bianca anche quando la fascia sotto e' a tinta piena:
   qui serve l'evidenza da carta, non quella della fascia. Con
   `--evidenza` la parola «Corso» usciva bianca su bianco dentro il
   catalogo di Advisory. */
.corso__tipo { color: var(--evidenza-carta); }
.corso h3 { margin: 0; }

/* Obbligatorio: un contenuto che si muove da solo per piu' di cinque
   secondi deve poter essere fermato. */
.carosello__pausa {
  display: inline-flex; align-items: center; gap: 9px;
  margin-top: var(--sp-5); padding: 11px 20px;
  background: transparent; color: var(--on-surface);
  border: 2px solid var(--on-surface); border-radius: var(--r-pill);
  font: inherit; font-size: var(--fs-caption); font-weight: 700; cursor: pointer;
  transition: background-color 180ms, color 180ms;
}
.carosello__pausa:hover { background: var(--on-surface); color: var(--surface); }


/* ---------- Numeri ------------------------------------------ */

.numeri { display: grid; gap: var(--sp-10); }
@media (min-width: 620px)  { .numeri { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .numeri { grid-template-columns: repeat(4, 1fr); gap: var(--sp-8); } }
.numero { border-top: 2px solid var(--evidenza); padding-top: var(--sp-5); }
.numero b {
  display: block; font-family: var(--font-display); font-weight: 700;
  font-size: clamp(2.75rem, 1.8rem + 4vw, 4rem);
  line-height: 0.95; letter-spacing: -0.04em;
}
.numero span { display: block; margin-top: var(--sp-4); font-size: var(--fs-body-s); font-weight: 500; max-width: var(--rigo, 20ch); }

/* ---------- Motivi ------------------------------------------ */

.motivi { display: grid; gap: var(--sp-8); }
@media (min-width: 700px)  { .motivi { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .motivi { grid-template-columns: repeat(3, 1fr); gap: var(--sp-10); } }
.motivo { border-top: 1px solid var(--line); padding-top: var(--sp-5); }
.motivo h3 { margin: 0 0 var(--sp-3); }
.motivo p { margin: 0; color: var(--ink-3); font-size: var(--fs-body-s); line-height: 1.55; }

/* ---------- Notizie ----------------------------------------- */

.notizie { display: grid; gap: var(--sp-5); }
@media (min-width: 700px) { .notizie { grid-template-columns: repeat(3, 1fr); } }
.notizia {
  display: block; text-decoration: none; color: var(--ink);
  background: var(--paper-2); border-radius: var(--r-4);
  padding: var(--sp-6);
  transition: transform 220ms cubic-bezier(.22,1,.36,1),
              box-shadow 220ms cubic-bezier(.22,1,.36,1);
}
.notizia:hover { transform: translateY(-4px); box-shadow: var(--shadow-2); }
.notizia time {
  font-size: var(--fs-micro); font-weight: 700;
  letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--ink-3);
}
.notizia h3 { margin: var(--sp-3) 0 0; }

/* ---------- Fascia di chiusura ------------------------------ */

/* L'imbottitura era scritta a mano dentro l'attributo style di ogni
   pagina del prototipo. Portata qui il 26 agosto 2026, con gli stessi
   valori, perche' i blocchi non devono emettere stili in linea: il gate
   di qualita' li conta e li vuole a zero. */
.chiusura { border-radius: var(--r-6); text-align: center; padding: var(--sp-24) var(--sp-8); }
.chiusura .display-sm { margin-inline: auto; max-width: var(--rigo, 22ch); }
.chiusura .lead { margin-inline: auto; margin-top: var(--sp-5); text-align: center; }
.chiusura__azioni { display: flex; flex-wrap: wrap; gap: var(--sp-3); justify-content: center; margin-top: var(--sp-10); }
/* I bottoni della chiusura ora stanno in un `maqer/bottoni` (`.hero__azioni`),
   non piu' in `.chiusura__azioni`. Ma `.hero__azioni` e' la griglia della
   hero (bottoni impilati e larghi tutta la colonna): nella chiusura vanno
   in FILA, centrati, a larghezza naturale, come prima. */
.chiusura .hero__azioni {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  justify-content: center;
  max-width: none;
  margin-top: var(--sp-10);
}
.chiusura .hero__azioni .btn { width: auto; }

/* ---------- Il segno che ruota ------------------------------
   L'originale ha una rotazione lenta. Da noi ruota il segno O.,
   che è l'unico elemento decorativo del marchio. */

.omark-ruota {
  /* Senza questa riga il segno non si vede, e nell'ispettore l'elemento
     c'e'. Nel markup e' uno <span>, cioe' un elemento in linea, e un
     elemento in linea ignora width e height: box 0x0. Il segno che ruota
     in fondo alle fasce di chiusura non si e' mai visto, ne' su Job ne'
     su Advisory. Trovata guardando la pagina il 26 agosto 2026. */
  display: block;
  width: 64px; height: 53px;
  /* Centrato e staccato dal titolo. Nel prototipo lo faceva un
     `margin:0 auto var(--sp-8)` scritto in riga; tolto quello (i
     blocchi non emettono stili in linea), il margine va rimesso qui,
     se no l'O resta a sinistra e su schermo stretto tocca il titolo.
     Trovato guardando la home su telefono, 3 settembre 2026. */
  margin: 0 auto var(--sp-8);
  background-color: currentColor;
  -webkit-mask: url("../img/maqer-omark.svg") no-repeat center / contain;
  mask: url("../img/maqer-omark.svg") no-repeat center / contain;
  animation: gira 14s linear infinite;
}
@keyframes gira { to { transform: rotate(360deg); } }

/* ---------- Piede ------------------------------------------- */

.site-footer { border-top: 1px solid var(--line); padding-block: var(--sp-16) var(--sp-8); }
.footer-griglia { display: grid; gap: var(--sp-10); }
@media (min-width: 700px)  { .footer-griglia { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .footer-griglia { grid-template-columns: 1.4fr repeat(4, 1fr); } }
.footer-griglia h4 {
  font-size: var(--fs-micro); text-transform: uppercase;
  letter-spacing: var(--tracking-label); color: var(--ink-3); margin: 0 0 var(--sp-4); font-weight: 700;
}
.footer-griglia li + li { margin-top: 8px; }
.footer-griglia a, .footer-griglia address {
  font-size: var(--fs-body-s); font-style: normal; color: var(--ink-2);
  line-height: 1.5; text-decoration: none;
}
.footer-griglia a:hover { text-decoration: underline; }
.footer-legale {
  display: flex; flex-wrap: wrap; gap: var(--sp-3) var(--sp-6);
  border-top: 1px solid var(--line); margin-top: var(--sp-12); padding-top: var(--sp-6);
  font-size: var(--fs-caption); color: var(--ink-3);
}

/* ---------- Entrata in scena -------------------------------- */

/* `.anima-figli` sta accanto a [data-anim] e non lo sostituisce.
   Serve dove il contenuto lo scrivono i blocchi: un titolo inserito
   nell'editor non puo' marcarsi da solo, e chiedere a chi monta la
   pagina di spuntare «anima questo» per ogni riga sarebbe un lavoro in
   piu' fatto male. Lo dichiara la fascia una volta, per tutti i figli. */
[data-anim],
.anima-figli > * { opacity: 0; transform: translateY(20px); }

[data-anim].is-in,
.anima-figli > .is-in {
  opacity: 1; transform: none;
  /* La durata e' una variabile: il menu «Velocità» sul pezzo cambia --dur
     e con essa la velocita' di QUESTA entrata. Senza scelta, 640ms. */
  transition: opacity var(--dur, 640ms) cubic-bezier(.22,1,.36,1),
              transform var(--dur, 640ms) cubic-bezier(.22,1,.36,1);
  transition-delay: var(--d, 0ms);
}

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--ink); color: var(--paper); padding: 12px 20px;
}
.skip:focus { left: 12px; top: 12px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  [data-anim],
  .anima-figli > * { opacity: 1 !important; transform: none !important; transition: none !important; }
  .nastro__pista, .omark-ruota, .carosello__pista { animation: none !important; }
  .carosello__vista { overflow-x: auto; }
  .corso:hover { transform: none; }
}

/* Caricatore di prova: esiste solo nel prototipo, non nel tema. */
.carica {
  display: inline-flex; align-items: center; margin-top: var(--sp-4);
  border: 2px solid var(--line-strong); border-radius: var(--r-2);
  padding: 9px 16px; font-size: var(--fs-caption); font-weight: 700;
  cursor: pointer; background: var(--paper); color: var(--ink);
}
.carica:hover { border-color: var(--ink); }
.carica input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.hero__media .segnaposto { display: grid; justify-items: center; text-align: center; }

/* Segnaposto del logo mancante. Esiste solo finche' il file SVG
   ufficiale non arriva: non e' un logo, e' un promemoria. */
.logo-mancante {
  display: inline-block; font-size: var(--fs-caption); font-weight: 700;
  color: var(--ink-3); border: 2px dashed var(--line-strong);
  border-radius: var(--r-2); padding: 8px 12px;
}

/* ---------- Interazione ------------------------------------
   La selezione del testo e l'anello di focus seguono l'evidenza,
   non il colore di divisione. */

::selection { background: var(--evidenza); color: var(--on-evidenza); }

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

/* Dentro un ambito l'evidenza diventa il colore di quell'ambito. */
.ambito-persone, .ambito-aziende { --evidenza: var(--ambito); --on-evidenza: var(--on-ambito); }

/* Sopra una superficie colorata l'evidenza e' il colore del testo:
   qualunque altro colore sparirebbe o stonerebbe. */
.plate, .hero { --evidenza: var(--on-surface, var(--hero-testo)); --on-evidenza: var(--surface, var(--hero-superficie)); }

/* ---------- Pannello dei colori -----------------------------
   Esiste solo nel prototipo. Nel tema WordPress ognuna di queste
   voci diventa un campo nelle impostazioni: la struttura e' gia'
   quella giusta, ogni colore e' una variabile e nessuno e' scritto
   dentro il layout. */

.pannello-colori {
  position: fixed; right: 16px; bottom: 16px; z-index: 90;
  width: min(21rem, calc(100vw - 32px));
  background: var(--paper); color: var(--ink);
  border: 2px solid var(--ink); border-radius: var(--r-4);
  box-shadow: var(--shadow-3);
  font-size: var(--fs-caption);
}
.pannello-colori > summary {
  cursor: pointer; padding: 12px 16px; font-weight: 700;
  list-style: none; display: flex; justify-content: space-between; align-items: center;
}
.pannello-colori > summary::-webkit-details-marker { display: none; }
.pannello-colori > summary::after { content: "▾"; }
.pannello-colori[open] > summary::after { content: "▴"; }
.pannello-colori__corpo { padding: 0 16px 16px; max-height: 60vh; overflow-y: auto; }
.pannello-colori label {
  display: grid; grid-template-columns: 1fr auto; gap: 10px;
  align-items: center; padding: 7px 0; border-top: 1px solid var(--line);
}
.pannello-colori input[type="color"] {
  width: 42px; height: 28px; padding: 0; border: 1px solid var(--line-strong);
  border-radius: var(--r-1); background: none; cursor: pointer;
}
.pannello-colori .nota { color: var(--ink-3); font-size: var(--fs-micro); line-height: 1.4; padding-top: 10px; }
.pannello-colori button {
  width: 100%; margin-top: 12px; padding: 10px;
  font: inherit; font-weight: 700; cursor: pointer;
  background: var(--ink); color: var(--paper);
  border: 0; border-radius: var(--r-2);
}

/* ---------- Link: annulla il verde sui link -----------------
   Il file dei token del design system contiene questa riga:

       a:hover { color: var(--brand); }

   ed e' il motivo per cui ogni link della pagina diventava verde
   al passaggio del mouse. Qui la si annulla.

   Il segnale dell'hover diventa la sottolineatura, non un cambio
   di colore: funziona su qualunque superficie, con qualunque
   palette, e non fa dipendere uno stato dall'identita' di marca.

   Il selettore esclude i link che hanno una classe, cioe' bottoni
   e schede: quelli hanno gia' il loro comportamento e non vanno
   toccati. */

a:not([class]):hover,
.footer-griglia a:hover,
.nav a:hover {
  color: inherit;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.14em;
}

/* Anche la sottolineatura segue l'evidenza, mai il colore di marca. */
a:not([class]):hover { text-decoration-color: var(--evidenza); }

/* ============================================================
   PRECEDENZA SUI LINK

   Il file dei token contiene `a:hover { color: var(--brand) }`.
   Quel selettore vale (0,1,1). Tutti i nostri componenti cliccabili
   sono <a> con una classe, quindi valgono (0,1,0) e PERDONO: al
   passaggio del mouse bottoni e schede si tingevano di verde.

   Qui ogni componente ripete il proprio colore con il prefisso `a.`,
   che porta la specificita' a (0,2,1) e vince sempre.

   Non semplificare togliendo il prefisso: e' l'unica cosa che tiene
   il verde fuori dagli stati di interazione.

   La correzione giusta sarebbe togliere quella riga da
   colors_and_type.css nel design system. Finche' resta li', serve
   questo blocco.
   ============================================================ */

a.btn-primary,  a.btn-primary:hover  { color: var(--on-brand); }
a.btn-line,     a.btn-line:hover     { color: var(--ink); }

.hero a.btn-primary, .hero a.btn-primary:hover { color: var(--hero-superficie); }
.hero a.btn-line,    .hero a.btn-line:hover    { color: var(--ink); }
.hero--scura a.btn-line, .hero--scura a.btn-line:hover { color: var(--paper); }

.plate a.btn-primary, .plate a.btn-primary:hover { color: var(--on-brand); }
.plate a.btn-line:hover { color: var(--surface); }

a.card-alta,  a.card-alta:hover  { color: var(--card-testo); }
a.corso,      a.corso:hover      { color: var(--ink); }
a.notizia,    a.notizia:hover    { color: var(--ink); }
a.bivio__via, a.bivio__via:hover { color: var(--on-ambito); }
a.link-freccia, a.link-freccia:hover { color: inherit; }

/* ---------- Testata a sequenza (slider) ----------
   Le immagini si alternano in dissolvenza dietro il velo; i pallini in
   basso scorrono la sequenza. Il velo (gradiente) resta sopra le foto e
   sotto il testo, cosi' il testo a sinistra si legge e la foto respira a
   destra. */
/* Ogni schermata (foto + il SUO testo) si alterna in dissolvenza. Le slide
   si impilano nella stessa cella della griglia: il contenitore prende
   l'altezza della piu' alta e il testo dell'attiva resta cliccabile (le
   altre non ricevono i click). */
.hero--slider { display: block; }
/* Il titolo-link della slide non porta la sottolineatura fissa (su un
   titolo grande pesa): eredita il colore e si sottolinea al passaggio. I
   link dentro il sommario, invece, restano sottolineati — sono parole in
   mezzo al testo e si devono riconoscere. */
.hero .display a { color: inherit; text-decoration: none; }
.hero .display a:hover { text-decoration: underline; text-underline-offset: 5px; }
.hero__slider { position: relative; display: grid; min-height: inherit; }
.hero__slide {
  grid-area: 1 / 1; position: relative; isolation: isolate;
  display: flex; flex-direction: column; justify-content: center;
  min-height: clamp(500px, 72vh, 800px);
  opacity: 0; transition: opacity 900ms ease; pointer-events: none;
}
.hero__slide.is-attiva { opacity: 1; pointer-events: auto; }
.hero__slide-foto {
  position: absolute; inset: 0; z-index: -2;
  background-size: cover; background-position: center;
}
/* Il velo della slide: stesso gradiente della hero, guidato da --velo. */
.hero--slider .hero__velo {
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg,
    var(--hero-superficie) 0%, var(--hero-superficie) 48%, transparent 100%);
  opacity: var(--velo);
}
@media (max-width: 900px) {
  .hero--slider .hero__velo { background: var(--hero-superficie); opacity: var(--velo); }
}
.hero__dots {
  position: absolute; left: 0; right: 0; bottom: 22px; z-index: 3;
  display: flex; gap: 10px; justify-content: center;
}
.hero__dot {
  width: 11px; height: 11px; padding: 0; border: 0; border-radius: 999px;
  background: rgba(255, 255, 255, 0.55); cursor: pointer;
  transition: background 0.2s, transform 0.2s;
}
.hero__dot:hover { background: rgba(255, 255, 255, 0.85); }
.hero__dot.is-attivo { background: #fff; transform: scale(1.35); }
@media (prefers-reduced-motion: reduce) { .hero__slide { transition: none; } }