/* ============================================================
   Maqer — le sezioni

   Gli stili dei blocchi di pagina: testata, accreditamenti, dati,
   metodo, numeri, brand beliefs, rottura, insight, contatti, sedi.
   Piu' gli adattamenti che servono perche' WordPress avvolge le cose
   in modo diverso dal prototipo.

   Vale la stessa regola dell'impianto: nessun colore scritto per
   esteso, e si aggiorna modificando il prototipo e ricopiando.
   ============================================================ */

/* ============================================================
   maqer.it — home corporate

   Foglio dei soli blocchi che esistono su questa pagina e su
   nessun'altra. Tutto il resto (griglia, bottoni, header, footer,
   tipografia) arriva da maqer-v2.css e dai token.

   Due cose vanno tenute a mente leggendo questo file.

   PRIMA. Qui dentro non c'e' un solo colore scritto per esteso.
   Ogni valore e' una variabile, quindi ogni colore della pagina
   si puo' cambiare da un punto solo. Vale anche per il verde Job
   e il blu Advisory: sono variabili, non costanti.

   SECONDA. Le due superfici a tinta piena (C03 verde, C04 blu)
   sono l'unica eccezione al fatto che il master vive di bianchi.
   Non sono decorazione: sono le due divisioni che si presentano
   con il proprio colore. Fuori da quei due blocchi il verde e il
   blu non compaiono mai.
   ============================================================ */

/* ---------- Ancore di riferimento ---------------------------
   Le misure ricorrenti della pagina, in un posto solo. */

/* Nel prototipo queste due stavano su `.scope-master`, una classe che
   il tema non mette da nessuna parte: il risultato era che l'anello
   dell'apertura usciva con il tratto sottile invece che spesso, perche'
   la variabile non esisteva e il browser usava il valore di ripiego.
   Qui stanno alla radice, dove valgono sempre. */
:root {
  --cerchio-tratto: 11;          /* spessore del segno O., da specifica */
  --misura-lettura: 62ch;        /* larghezza massima dei paragrafi */
}

/* ---------- Titoli di sezione -------------------------------
   L'H1 corporate NON e' l'H1 di Job. Job spinge sul peso 700
   perche' parla a una persona sola; il master sta sul 500, che
   e' la scelta della specifica: piu' composto, meno urlato. */

.display-corp, h1.display-corp {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(2.125rem, 1.2rem + 3.9vw, 3.25rem);
  line-height: 1.08;
  letter-spacing: -0.025em;
  margin: 0;
}

.titolo-sez, h2.titolo-sez {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.625rem, 1.1rem + 2.3vw, 2.5rem);
  line-height: 1.16;
  letter-spacing: -0.02em;
  margin: 0;
  max-width: 32ch;
}

.testo-sez {
  font-size: var(--fs-body-l);
  line-height: 1.6;
  color: inherit;
  max-width: var(--misura-lettura);
  margin: 20px 0 0;
}

.fonte {
  font-size: var(--fs-body-s);
  color: var(--ink-3);
  margin: 6px 0 0;
}

/* ============================================================
   GLI A CAPO

   Nel prototipo gli a capo dei titoli erano scritti a mano, uno per
   uno, nel punto in cui la frase respirava. Su una pagina sola, con un
   testo che non cambia, e' la scelta migliore.

   IN UN TEMA NON PUO' FUNZIONARE COSI'.

   Il testo di una pagina cambia in continuazione, e ogni volta gli a
   capo scritti a mano diventano sbagliati: restano dov'erano mentre le
   parole si sono spostate. Chi scrive dovrebbe rimetterli a ogni
   correzione, e nessuno lo fa.

   Qui decide il browser, ma non a caso: gli si dice come.

   PRIMO. I titoli hanno `text-wrap: balance`: il browser pareggia la
   lunghezza delle righe invece di riempire la prima fino all'orlo e
   lasciare due parole sulla seconda. Vale SEMPRE, a ogni larghezza —
   nel prototipo sopra i 1200px era spento perche' c'erano gli a capo a
   mano, e portando la regola nel tema restava spento senza che ci
   fosse piu' niente al suo posto. Era il motivo per cui i titoli si
   spezzavano a caso.

   SECONDO. I testi hanno `text-wrap: pretty`: niente parole sole in
   fondo al paragrafo.

   TERZO. Ogni testo ha una misura in `ch`, cioe' in caratteri. E' la
   misura che decide davvero dove cadono gli a capo: una colonna larga
   il doppio spezza in un punto diverso. Contarla in caratteri invece
   che in pixel vuol dire che resta giusta anche se cambi il corpo.

   QUARTO. Le parole che non si devono spezzare si marcano con
   `<span class="unito">`: nomi di luogo, sigle, orari, numeri civici.
   Si fa dall'editor, campo "Classi CSS aggiuntive". Sono le uniche
   decisioni che restano a mano, perche' dipendono dal significato e
   non dalla larghezza.

   Chi vuole comunque forzare un a capo puo' usare <br class="a-capo">,
   che si spegne sotto i 1200px. Ma e' l'eccezione, non la regola.
   ============================================================ */

h1, h2, h3,
.display, .display-corp, .display-sm,
.titolo-sez, .credo__titolo, .card-alta__titolo, .passo__titolo {
  text-wrap: balance;
}

p, li,
.lead, .testo-sez, .passo__corpo, .credo__corpo, .dato__cosa,
.breve__dettaglio, .piede__claim, .piede__desc, .articolo__titolo {
  text-wrap: pretty;
  hyphens: manual;
}

/* Le misure. Un testo largo quanto lo schermo non si legge: l'occhio
   perde la riga tornando a capo. Sopra le 75 battute si comincia a
   sbagliare riga, sotto le 45 si legge a singhiozzo. */
.testo-sez, .lead        { max-width: 62ch; }
.passo__corpo,
.credo__corpo            { max-width: 40ch; }
.dato__cosa              { max-width: 34ch; }
.articolo__titolo        { max-width: 48ch; }
.titolo-sez              { max-width: 30ch; }
.display, .display-corp  { max-width: 24ch; }

.unito { white-space: nowrap; }

/* L'eccezione, per chi vuole comandare un a capo preciso. */
.a-capo { display: none; }
@media (min-width: 1200px) { .a-capo { display: inline; } }

/* ---------- Il quadrato --------------------------------------
   Il punto del marchio e' quadrato, mai tondo. Vale per gli
   elenchi e per i marcatori sopra i numeri. */

.quadro {
  display: block;
  width: 12px; height: 12px;
  background: var(--marcatore, var(--ink));
}

/* La voce di elenco NON e' una griglia.
   Sembra comoda, ma una griglia trasforma ogni elemento figlio in
   una cella: basta un <span> nel testo (un nome che non si spezza,
   un grassetto) e quel pezzo di frase salta alla riga sotto da
   solo. Qui il marcatore e' fuori dal flusso e il testo resta
   testo, qualunque cosa ci si scriva dentro. */
.elenco-quadri,
.is-style-quadri {display: grid; gap: 14px; margin: 28px 0 0; }
.elenco-quadri li,
.is-style-quadri li {
  position: relative;
  padding-left: 22px;
  font-size: var(--fs-body-l);
  line-height: 1.45;
  text-wrap: pretty;
}
.elenco-quadri li::before,
.is-style-quadri li::before {
  content: "";
  position: absolute;
  left: 0;
  top: -0.06em; /* un filo in su: centro OTTICO delle lettere (l'inchiostro sta sopra la meta' del box-riga) */
  width: 16px;
  height: 1.45em; /* una riga: il quadretto si centra dentro, a qualsiasi corpo */
  background: currentColor;
  -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' fill='%23000'/%3E%3C/svg%3E") no-repeat left center / 9px 9px;
          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' fill='%23000'/%3E%3C/svg%3E") no-repeat left center / 9px 9px;
}

/* ---------- S01 · Header ------------------------------------
   Il pallino accanto a Maqer Job e Maqer Advisory dice a quale
   mondo porta la voce. E' l'unica spiegazione che la pagina da'
   della propria struttura, e non usa parole. */

.pallino {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--pallino, var(--ink));
  margin-right: 8px;
  vertical-align: 0.05em;
}
.pallino--job { --pallino: var(--job); }
.pallino--adv { --pallino: var(--adv); }

/* Il marchio master e' largo quattro volte e mezzo la sua altezza:
   a 30px la scritta diventa illeggibile. Qui sale a 40px come da
   specifica. */
.site-header .logo { height: 30px; }
@media (min-width: 760px) { .site-header .logo { height: 40px; } }

/* Sotto l'header passa il contenuto: senza velo semitrasparente
   il testo che scorre si legge attraverso. */
.site-header {
  background: color-mix(in srgb, var(--paper) 92%, transparent);
  backdrop-filter: blur(10px);
}

/* ---------- S02 · Hero --------------------------------------
   Griglia 7/5 sopra i 1024px, impilata sotto. A destra
   l'apertura circolare: la foto sta dentro il cerchio, il segno
   nero le gira intorno. */

.hero-corp {
  background: var(--paper);
  color: var(--ink);
  padding-block: 56px 72px;
}
@media (min-width: 1024px) { .hero-corp { padding-block: 88px 120px; } }

.hero-corp__griglia { display: grid; gap: 48px; align-items: center; }
@media (min-width: 1024px) {
  .hero-corp__griglia { grid-template-columns: 7fr 5fr; gap: 72px; }
}

/* La misura si applica al TITOLO, non al blocco.
   Un 'ch' vale la larghezza dello zero nel carattere dell'elemento
   su cui e' scritto: sul blocco vale il corpo del testo, e 22ch
   diventano 190px, cioe' due parole per riga. Sul titolo, che e'
   grande il triplo, gli stessi 22ch sono la misura giusta. */
.hero-corp__testo { max-width: 100%; }
.hero-corp .display-corp { max-width: var(--misura-testata, 22ch); }
.hero-corp .testo-sez { max-width: 46ch; margin-top: 24px; }

.hero-corp__azioni {
  display: flex; flex-wrap: wrap; gap: 12px;
  margin-top: 36px;
}

/* L'apertura circolare.
   Il cerchio e' un SVG disegnato apposta, non il marchio
   ritagliato: il marchio non si ricostruisce mai. */
.apertura {
  position: relative;
  width: min(420px, 82vw);
  margin-inline: auto;
  aspect-ratio: 1;
}
.apertura__foto {
  position: absolute;
  inset: 5.5%;
  width: 89%; height: 89%;
  border-radius: 50%;
  object-fit: cover;
  background: var(--paper-2);
}
.apertura__segno {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  overflow: visible;
  pointer-events: none;
}
.apertura__segno circle {
  fill: none;
  stroke: var(--ink);
  stroke-width: var(--cerchio-tratto);
}
/* Segnaposto: c'e' finche' non si carica una foto vera. */
.apertura__vuoto {
  position: absolute; inset: 5.5%;
  border-radius: 50%;
  background: var(--paper-2);
  display: grid; place-content: center;
  text-align: center;
  padding: 32px;
  font-size: var(--fs-body-s);
  color: var(--ink-3);
}

.carica-foto {
  display: inline-flex; align-items: center; gap: 10px;
  margin-top: 20px;
  font-size: var(--fs-body-s);
  color: var(--ink-3);
  justify-content: center;
  width: 100%;
}
.carica-foto input { font: inherit; }

/* ---------- S04 · Accreditamenti -----------------------------
   Nessun logo di ente, nessun badge: solo la sigla e cosa
   certifica. E' l'unica prova verificabile che la pagina porta
   prima di chiedere fiducia, e per questo non va addobbata. */

.prove { border-block: 1px solid var(--line); padding-block: 28px; }
.prove__label {
  font-size: var(--fs-body-s);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 0 0 20px;
}
.prove__lista {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(190px, 1fr);
  gap: 28px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding-bottom: 4px;
}
.prove__lista::-webkit-scrollbar { display: none; }
.prove__lista > li { scroll-snap-align: start; }
@media (min-width: 768px) {
  /* Sette voci di lunghezza molto diversa: una griglia a numero
     fisso di colonne o stringe "sicurezza delle informazioni" fino
     a spezzarla male, o lascia mezzo metro di vuoto accanto a
     "ISO 9001". Con auto-fit le colonne si contano da sole. */
  .prove__lista {
    grid-auto-flow: row;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    overflow: visible;
    gap: 24px 20px;
  }
}

/* I due livelli sono uno sopra l'altro. Da riquadri in linea la
   sigla e la qualifica finivano attaccate: "ANPALsezioni IV e V". */
.prove__sigla {
  display: block;
  font-size: var(--fs-h4);
  font-weight: 500;
  line-height: 1.2;
}
.prove__cosa {
  display: block;
  font-size: var(--fs-body-s);
  color: var(--ink-3);
  margin-top: 4px;
  line-height: 1.3;
}

/* ---------- C01 · Il punto di partenza -----------------------
   Superficie paper-2 e due dati. I numeri sono grandi perche'
   il resto della sezione li commenta, non viceversa. */

.fascia { background: var(--fascia, var(--paper-2)); color: var(--ink); }
.fascia--3 { --fascia: var(--paper-3); }


.dati { display: grid; gap: 40px; }
.dato__valore {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(2.25rem, 1.5rem + 3vw, 2.625rem);
  line-height: 1;
  letter-spacing: -0.025em;
  margin: 14px 0 0;
}
.dato__cosa {
  font-size: var(--fs-body-l);
  line-height: 1.45;
  margin: 10px 0 0;
  max-width: 34ch;
}

/* ---------- B01 · Ponte visivo -------------------------------
   Zero testo. Il segno della testata si divide in due orbite e
   da li' arrivano i due plate.

   Lo stato scritto nel CSS e' quello FINALE, gia' diviso e gia'
   colorato. E' il JavaScript che lo richiude per poi riaprirlo.
   Cosi' chi ha il JavaScript spento, o chi ha chiesto meno
   animazioni, vede comunque la cosa giusta: due orbite. Il
   contrario (partire uniti e dividere via JS) lascerebbe un
   cerchio solo e nero a chi non esegue lo script. */

/* ============================================================
   C03 + C04 · LE DUE DIVISIONI NASCONO DAL MARCHIO

   Qui non c'e' un'animazione seguita da due sezioni: le due
   sezioni SONO le due meta' del marchio, cresciute. Alla fine del
   gesto lo schermo e' diviso a meta' e si vedono tutte e due
   insieme, nello stesso momento, con i loro contenuti.

   Il gesto:
     1. il marchio Maqer, intero e nero
     2. il quadrato gira intorno all'anello
     3. l'anello si apre in due e le meta' si tingono
     4. da dentro il foro il colore dilaga
     5. ogni meta' diventa un pannello alto mezzo schermo, e il
        testo della divisione compare sopra

   Il marchio resta piccolo apposta: deve stare tutto dentro lo
   schermo per l'intera durata, quadrato in orbita compreso.

   Il gesto vale anche sul telefono. Perche' il testo stia in mezzo
   schermo da 390px la scala tipografica dentro i pannelli scende:
   e' la stessa gerarchia, in un corpo piu' piccolo, non un altro
   contenuto. L'unico caso in cui il gesto si spegne e' la finestra
   piu' bassa di 620px, tipicamente un telefono girato di lato:
   li' meta' schermo sono 270px e non ci sta niente.
   ============================================================ */

.divisioni { background: var(--paper); }

.divisioni__scena { position: relative; }
.divisioni__area { position: relative; }

.pannello {
  background: var(--superficie);
  color: var(--testo);
  --surface: var(--superficie);
  --on-surface: var(--testo);
  overflow: hidden;
}
/* Testo bianco anche sul verde, per scelta del committente,
   dichiarata due volte.

   Il numero, perche' resti scritto: bianco su #00C890 fa 2,17:1;
   nero sullo stesso verde fa 9,66:1; la soglia per il testo
   corrente e' 4,5:1. Non esiste un modo di rispettarla tenendo
   questo verde e il testo bianco: servirebbe un verde intorno a
   #007A55, che non e' piu' il verde Job.

   Per tornare al nero si cambia una parola: --testo: var(--ink).
   Non c'e' altro da toccare, il resto del pannello segue. */
.pannello--job { --superficie: var(--job); --testo: var(--paper); }
.pannello--adv { --superficie: var(--adv); --testo: var(--paper); }

.pannello__testo { padding-block: 56px; }

/* ============================================================
   LA GRIGLIA DELLE COLONNE — UNA REGOLA, NON UNA PER SEZIONE

   Prima qui c'erano due regole: una per il pannello Job, che ha tre
   blocchi, e una per tutti gli altri, che ne hanno due. Scritte a mano,
   una per caso. Il risultato era che le due meta' della stessa sezione
   avevano colonne di larghezza diversa e i titoli non si allineavano.

   Adesso la regola e' una e si adatta da sola:

     la prima colonna vale sempre il 34% della larghezza
     tutte le altre si dividono in parti uguali quello che resta

   Cosi' il titolo sta nello stesso punto in tutte le sezioni,
   qualunque sia il numero di blocchi dentro, e aggiungerne uno non
   richiede di toccare il CSS. E' la differenza fra un tema che ti fa
   perdere tempo e uno che lavora per te.

   `grid-auto-flow: column` piu' `grid-auto-columns` e' quello che
   rende la cosa automatica: le colonne oltre la prima non sono
   dichiarate, nascono quando serve.
   ============================================================ */

.pannello__griglia,
.sezione__griglia,
.contesto__griglia,
.contatti__griglia {
  display: grid;
  gap: 28px;
  align-items: start;
}

@media (min-width: 700px) {
  .pannello__griglia,
  .sezione__griglia,
  .contesto__griglia,
  .contatti__griglia {
    grid-template-columns: minmax(0, 34%);
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    gap: 48px;
  }
}

.pannello .titolo-sez {
  max-width: 16ch;
  font-size: clamp(1.5rem, 1rem + 1.6vw, 2rem);
}
.pannello .testo-sez { color: inherit; margin-top: 0; font-size: var(--fs-body); }
.pannello .elenco-quadri,
.pannello .is-style-quadri { margin-top: 0; gap: 10px; }
.pannello .elenco-quadri li,
.pannello .is-style-quadri li { font-size: var(--fs-body); }

/* Il collegamento esce dal dominio, e l'etichetta lo dice per
   esteso invece di affidarlo a un'iconcina.
   Il 'color: inherit' con il prefisso 'a.' non e' pedanteria: il
   foglio dei token colora tutti i collegamenti, e senza questa riga
   il collegamento resta nero anche dove il testo intorno e' bianco.
   E' successo, appena il pannello e' passato al testo bianco. */
.esci {
  display: inline-flex; align-items: center; gap: 10px;
  font-weight: 500;
  border-bottom: 2px solid currentColor;
  padding-bottom: 3px;
  text-decoration: none;
}
a.esci, a.esci:hover, a.esci:focus { color: inherit; }
a.esci:hover { gap: 16px; }

/* Nota di lavorazione: sparisce quando il testo Advisory arriva. */
.in-attesa {
  font-size: var(--fs-body-s);
  padding: 14px 16px;
  border: 1px dashed currentColor;
  opacity: 0.8;
  max-width: 46ch;
}

.pannello .esci { margin-top: 20px; font-size: var(--fs-body-s); }
.pannello .in-attesa { margin-top: 0; }

/* Sul telefono la scala scende di due gradini, perche' meta' di
   844px sono 385px e il testo, tutto intero, deve starci. Non si
   taglia niente: si compone piu' stretto.
   ATTENZIONE ALL'ORDINE: queste righe hanno la stessa forza di
   quelle qui sopra, quindi devono venire DOPO, altrimenti perdono
   e sul telefono resta la scala grande. */
/* La condizione e' solo sulla LARGHEZZA, non anche sull'altezza.
   Sotto i 900px il testo dei pannelli sta su una colonna sola, e
   una colonna sola e' alta: serve la scala compatta a prescindere
   da quanto e' alto lo schermo. Con la condizione doppia, un tablet
   verticale (768x1024) prendeva la scala grande su una colonna e
   sbordava di un pelo. Le misure sono in 'vh', quindi dove c'e'
   piu' altezza il testo cresce da solo fino al suo massimo. */
@media (max-width: 899.98px) {
  /* La scala segue l'ALTEZZA della finestra, non solo la larghezza.
     Il pannello e' mezzo schermo: su un telefono da 667px sono
     302px, su uno da 926px sono 432px. Con una misura fissa il
     testo entrava sul telefono grande e usciva su quello piccolo,
     ed e' esattamente il taglio che mi hai segnalato.
     I 'vh' qui dentro non sono un vezzo: sono la variabile da cui
     dipende il problema. */
  .pannello .titolo-sez { font-size: clamp(0.875rem, 2.1vh, 1.125rem); line-height: 1.15; }
  .pannello .testo-sez,
  .pannello .elenco-quadri li,
  .pannello .is-style-quadri li { font-size: clamp(0.625rem, 1.45vh, 0.78125rem); line-height: 1.35; }
  .pannello .in-attesa { font-size: clamp(0.625rem, 1.45vh, 0.78125rem); padding: clamp(6px, 1.1vh, 9px) 11px; }
  .pannello .esci { font-size: clamp(0.625rem, 1.45vh, 0.78125rem); margin-top: clamp(5px, 1.1vh, 10px); padding-bottom: 2px; }
  .pannello .elenco-quadri,
  .pannello .is-style-quadri { gap: clamp(2px, 0.6vh, 5px); }
  .pannello .elenco-quadri li,
  .pannello .is-style-quadri li { padding-left: 16px; }
  .pannello__griglia { gap: clamp(4px, 1.2vh, 10px); }
  .marchio-divisione { height: clamp(14px, 2.4vh, 20px); margin-bottom: clamp(3px, 0.8vh, 7px); }
}


.marchio-divisione { height: 30px; width: auto; margin-bottom: 18px; }
@media (min-width: 1024px) { .marchio-divisione { height: 38px; } }

/* ---------- La versione animata ------------------------------
   Da qui in giu' vale solo dove c'e' spazio per farla. */

@media (min-height: 620px) {

  .divisioni {
    /* Questa altezza serve a DUE cose, non a una sola.
       La prima parte della corsa e' il gesto. La seconda e' una
       trattenuta: il gesto e' gia' finito, le due sezioni sono li'
       ferme e piene, e la pagina non riparte. Senza la trattenuta
       basta un colpo di rotellina per uscirne, in avanti o
       indietro, e non le legge nessuno. Quanta corsa spetta al
       gesto e quanta alla trattenuta lo decide il JavaScript. */
    height: 280vh;
    position: relative;
  }

  .divisioni__scena {
    position: sticky;
    top: 0;
    /* 'dvh' e non 'vh'. Sul telefono la barra degli indirizzi si
       ritira e ricompare: 'vh' resta fermo all'altezza massima,
       quindi la scena e' piu' alta di quello che si vede e il testo
       in fondo finisce sotto il bordo. 'dvh' segue l'altezza vera.
       'vh' resta come ripiego per i browser che non lo conoscono. */
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
  }

  /* La testata e' incollata in alto e passa SOPRA la scena: senza
     questo riquadro rientrato, la cima del pannello verde le
     finisce sotto e il contenuto risulta tagliato. Le due meta' si
     dividono lo spazio che resta, non lo schermo intero. */
  .divisioni__area {
    position: absolute;
    inset: var(--testata) 0 0 0;
  }

  /* I due pannelli partono grandi quanto il foro del marchio e
     finiscono alti mezzo schermo ciascuno. Non escono mai dallo
     schermo: a fine corsa lo riempiono esattamente, meta' e meta'. */
  /* IL COLORE NON E' UN PANNELLO SOTTO IL MARCHIO.
     Le due superfici sono i due semicerchi del marchio, ingranditi
     fino a debordare dallo schermo. Nessuna forma nuova compare
     sopra o sotto: c'e' una cosa sola, e cresce.
     I riquadri qui sotto restano, ma solo per tenere il testo. */
  .pannello {
    position: absolute;
    left: 0; right: 0;
    height: 50%;
    background: none;
    z-index: 1;
    pointer-events: none;
  }
  .pannello--job { top: 0; }
  .pannello--adv { bottom: 0; }
  .pannello a, .pannello button { pointer-events: auto; }

  /* Il testo compare quando il pannello e' ormai grande: prima
     sarebbe schiacciato dentro una forma tonda di duecento pixel. */
  .pannello__testo {
    opacity: var(--mostra);
    padding-block: 0;
  }
  .pannello__testo {
    position: absolute;
    inset: 0;
    display: grid;
    align-content: center;
    /* Un margine che il testo non puo' mangiarsi: senza, su uno
       schermo appena piu' basso le prime e le ultime righe toccano
       il bordo del pannello e sembrano tagliate. Anche questo segue
       l'altezza: su un telefono corto ogni pixel serve al testo. */
    padding-block: clamp(8px, 1.6vh, 16px);
  }

  /* ---------- Il marchio -----------------------------------
     Non e' un cerchio disegnato per l'occasione: sono i due
     tracciati di assets/maqer-omark.svg, letti dal file. L'anello
     compare due volte perche' serve mostrarne una meta' per parte,
     e due copie dello stesso tracciato non sono un ridisegno.

     Il riquadro del marchio e' 272x222 e il centro dell'anello sta
     a (111,1 · 111,4), che NON e' il centro del riquadro: il
     quadrato sporge a destra. Il marchio va quindi spostato in modo
     che sia il centro dell'ANELLO a cadere al centro della scena,
     perche' e' intorno a quello che gira il quadrato ed e' da li'
     che si apre. */
  .marchio {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 0;
    width: var(--marchio-l);
    height: auto;
    overflow: visible;
    transform: translate(-40.846%, -50.180%);
  }

  /* Ogni meta' si stacca, si tinge e poi si ingrandisce intorno al
     centro dell'anello finche' non esce da tutti i bordi. Lo
     spostamento e' scritto PRIMA dell'ingrandimento, cosi' non
     viene moltiplicato per la scala e le due meta' tornano a
     combaciare esattamente sulla linea di mezzo. */
  .marchio__meta {
    transform-origin: 111.1px 111.4px;
  }
  .marchio__meta--job {
    fill: color-mix(in srgb, var(--job) calc(var(--tinta) * 100%), var(--ink));
    transform: translateY(calc(var(--apre-u) * -1))
               scale(calc(1 + var(--cresci) * (var(--scala) - 1)));
  }
  .marchio__meta--adv {
    fill: color-mix(in srgb, var(--adv) calc(var(--tinta-2) * 100%), var(--ink));
    transform: translateY(var(--apre-u))
               scale(calc(1 + var(--cresci) * (var(--scala) - 1)));
  }

  /* Il tappo del foro. L'anello del marchio ha un buco: ingrandito
     resterebbe una ciambella gigante invece di una superficie
     piena. Questo disco chiude il buco dall'interno, con lo stesso
     colore, e cresce insieme al resto perche' sta dentro lo stesso
     gruppo. Non tocca il tracciato del marchio: lo copre. */
  .marchio__tappo { opacity: var(--tappa); }
  .marchio__meta--job .marchio__tappo {
    fill: color-mix(in srgb, var(--job) calc(var(--tinta) * 100%), var(--ink));
  }
  .marchio__meta--adv .marchio__tappo {
    fill: color-mix(in srgb, var(--adv) calc(var(--tinta-2) * 100%), var(--ink));
  }

  /* Il quadrato gira intorno al centro dell'anello e ruota anche su
     se stesso: tenendolo dritto sembrerebbe trascinato. */
  .marchio__quadro {
    fill: var(--ink);
    transform: rotate(calc(var(--orbita) * 360deg));
    transform-origin: 111.1px 111.4px;
    opacity: calc(1 - var(--svanisce));
  }

  /* Stato di riposo: gesto compiuto. E' quello che vedono chi ha il
     JavaScript spento e chi ha chiesto meno animazioni al sistema
     operativo. */
  .divisioni {
    --testata: 74px;
    --marchio-l: clamp(150px, 22vh, 280px);
  }
  @media (max-width: 899.98px) {
    .divisioni { --testata: 62px; --marchio-l: clamp(130px, 18vh, 200px); }
    --foro: calc(var(--marchio-l) * 0.3644);
    --orbita: 1; --apre-u: 0px; --tinta: 1; --tinta-2: 1;
    --svanisce: 1; --tappa: 1; --cresci: 1; --mostra: 1; --scala: 9;
  }

  html.con-animazioni .divisioni {
    --orbita: 0; --apre-u: 0px; --tinta: 0; --tinta-2: 0;
    --svanisce: 0; --tappa: 0; --cresci: 0; --mostra: 0;
  }
}

/* Senza il gesto, il marchio in scena non serve. */
@media (max-height: 619.98px) {
  .marchio { display: none; }
}

/* ---------- La griglia a due colonne delle sezioni -----------
   Titolo a sinistra, contenuto a destra. E' la disposizione piu'
   ricorrente e prima non aveva un nome suo: ogni sezione se ne
   scriveva una, e cambiarne una sola faceva divergere le altre.

   Il commento c'era da tempo, la regola no: nel prototipo ogni
   sezione a due colonne se la riscrive con uno `style` in linea
   (v2-job.html riga 223). Scritta qui il 26 agosto 2026, con gli
   stessi valori di quello, perche' il blocco Fascia possa offrirla
   invece di lasciare che ogni pagina se la reinventi. */

.wrap--due {
  display: grid;
  gap: var(--sp-12);
  align-items: center;
}

@media (min-width: 900px) {
  .wrap--due { grid-template-columns: 1fr 1fr; }
}

/* Sette colonne a sinistra e cinque a destra: la misura del testo di
   apertura nelle guidelines. Sotto la soglia le due colonne si
   impilano, e la prima resta prima. */
@media (min-width: 900px) {
  .wrap--sette-cinque { grid-template-columns: 7fr 5fr; }
}

/* In una griglia la distanza la decide il gap: i margini dei blocchi
   di WordPress si sommerebbero e sfalserebbero le due colonne. */
.wrap--due > * > :first-child { margin-top: 0; }
.wrap--due > * > :last-child  { margin-bottom: 0; }

/* ---------- C05 · Il metodo ----------------------------------
   Quattro passaggi, nessuna icona. La numerazione fa da appiglio
   visivo al posto dei pittogrammi. */


/* Il singolo passaggio. Nel prototipo non aveva una regola: funzionava
   perche' era una cella di griglia e basta. Scritta qui perche' un
   controllo automatico non puo' distinguere "non serve" da "manca", e
   una classe usata senza stile e' sempre un dubbio. */
.passo { display: grid; align-content: start; }

/* Il numero del passo era in --ink-4: grigio chiaro su bianco, un
   rapporto di 3,45 contro il 4,5 che serve. Si leggeva bene sul
   portatile in ufficio e spariva su uno schermo al sole. --ink-3 e' un
   grigio, resta chiaramente meno importante del titolo, e arriva a 7. */
.passo__n {
  font-family: var(--font-mono);
  font-size: var(--fs-h3);
  color: var(--ink-3);
  display: block;
  margin-bottom: 18px;
}
/* Stesso motivo di sopra: marcatore fuori dal flusso, non griglia. */
.passo__titolo {
  position: relative;
  padding-left: 20px;
  font-size: var(--fs-h3);
  font-weight: 500;
  margin: 0 0 10px;
}
.passo__titolo::before {
  content: "";
  position: absolute;
  left: 0; top: 0.52em;
  width: 8px; height: 8px;
  background: var(--ink);
}
.passo__corpo {
  font-size: var(--fs-body);
  line-height: 1.55;
  color: var(--ink-2);
  margin: 0;
}

/* ---------- S06 · Numeri -------------------------------------- */


.breve__valore {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(2.75rem, 1.8rem + 4vw, 4rem);
  line-height: 0.95;
  letter-spacing: -0.03em;
  margin: 14px 0 0;
}
.breve__cosa { font-size: var(--fs-body-l); margin: 12px 0 0; }
.breve__dettaglio { font-size: var(--fs-body-s); color: var(--ink-3); margin: 6px 0 0; }

/* ============================================================
   LE GRIGLIE A COLONNE PARI — anche queste, una regola sola

   I passaggi del metodo, i numeri, i brand beliefs e le sedi sono la
   stessa cosa: un elenco di blocchi uguali, affiancati finche' c'e'
   spazio. Prima erano quattro regole con soglie diverse scritte a mano
   — 640, 768, 900, 1024 — decise una alla volta e senza un motivo.

   `auto-fit` con `minmax` fa la stessa cosa senza soglie: mette tante
   colonne quante ne stanno, e quando non ci stanno piu' va a capo da
   solo. Aggiungere un quinto passaggio o una quinta sede non richiede
   di toccare niente.

   La misura minima e' 220px perche' sotto quella larghezza un titolo
   corto piu' due righe di testo cominciano a spezzarsi male. `min()`
   con 100% evita che su un telefono la colonna sia piu' larga dello
   schermo.
   ============================================================ */

.passi, .breve, .credo, .sedi, .colonne {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
  gap: 40px 32px;
  margin-top: 48px;
}

/* ---------- C06 · Brand beliefs ------------------------------
   Sopra ogni titolo il segno O. del marchio, ricolorato con una
   maschera CSS. Il file SVG non viene toccato: la maschera
   ritaglia il colore sulla forma originale. */


.credo__segno {
  /* Senza questa riga il segno non esiste: uno <span> sta in linea,
     e un elemento in linea ignora larghezza e altezza. Il box era
     0x0 e la maschera non aveva niente da ritagliare. */
  display: block;
  width: 34px; height: 34px;
  background: var(--ink);
  -webkit-mask: url("./assets/maqer-omark.svg") no-repeat center / contain;
  mask: url("./assets/maqer-omark.svg") no-repeat center / contain;
  margin-bottom: 22px;
}
.credo__titolo {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.25rem, 1rem + 1vw, 1.5rem);
  line-height: 1.25;
  letter-spacing: -0.015em;
  margin: 0 0 12px;
  max-width: 20ch;
}
.credo__corpo {
  font-size: var(--fs-body);
  line-height: 1.55;
  color: var(--ink-2);
  margin: 0;
  max-width: 34ch;
}

/* ---------- S08 · La rottura ---------------------------------
   Una sola volta in tutta la pagina. Al centro della home
   istituzionale non c'e' un claim: c'e' un numero che risponde.
   La rottura la fa la scala tipografica, non un colore nuovo. */

.rottura {
  position: relative;
  overflow: hidden;
  background: var(--paper-3);
  color: var(--ink);
  padding-block: 96px;
}
@media (min-width: 768px) { .rottura { padding-block: 144px; } }

.rottura__cerchio {
  position: absolute;
  top: 50%;
  right: -140px;
  translate: 0 -50%;
  width: 420px; height: 420px;
  pointer-events: none;
  overflow: visible;
}
.rottura__cerchio circle {
  fill: none;
  stroke: var(--ink);
  stroke-width: var(--cerchio-tratto);
  opacity: 0.12;
}
@media (min-width: 1024px) {
  .rottura__cerchio { right: -180px; width: 560px; height: 560px; }
}

.rottura__wrap { position: relative; }

.numero-grande {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(2.75rem, 1rem + 8vw, 4.5rem);
  line-height: 1;
  letter-spacing: -0.035em;
  text-decoration: none;
  white-space: nowrap;
}
a.numero-grande, a.numero-grande:hover, a.numero-grande:focus { color: var(--ink); }
a.numero-grande:hover { text-decoration: underline; text-underline-offset: 0.12em; }

.rottura__orari {
  font-size: var(--fs-h4);
  color: var(--ink-3);
  margin: 24px 0 0;
}

/* ---------- S12 · Insight ------------------------------------
   Data e titolo. Niente estratto, niente immagine: la scheda
   promette un articolo, non lo riassume. */

.insight { display: grid; gap: 0; margin-top: 48px; border-top: 1px solid var(--line); }
.articolo {
  display: block;
  padding: 28px 0;
  border-bottom: 1px solid var(--line);
  text-decoration: none;
}
a.articolo, a.articolo:hover, a.articolo:focus { color: var(--ink); }
.articolo__data {
  font-size: var(--fs-body-s);
  color: var(--ink-3);
  display: block;
  margin-bottom: 8px;
}
.articolo__titolo {
  font-size: clamp(1.125rem, 1rem + 0.6vw, 1.375rem);
  font-weight: 500;
  line-height: 1.3;
  max-width: 48ch;
}
a.articolo:hover .articolo__titolo {
  text-decoration: underline;
  text-underline-offset: 0.14em;
  text-decoration-thickness: 2px;
}

/* ---------- S13 · Contatti e form ----------------------------
   Il primo campo instrada la richiesta. E' il punto in cui la
   struttura del gruppo diventa operativa senza che nessuna riga
   di testo l'abbia mai spiegata: per questo sta in cima. */


.recapiti { display: grid; gap: 20px; margin-top: 32px; }
.recapito__cosa {
  font-size: var(--fs-body-s);
  color: var(--ink-3);
  display: block;
  margin-bottom: 2px;
}
.recapito__valore { font-size: var(--fs-body-l); font-weight: 500; }
a.recapito__valore, a.recapito__valore:hover { color: var(--ink); }
a.recapito__valore:hover { text-decoration: underline; text-underline-offset: 0.14em; }

.modulo { display: grid; gap: 20px; }
.campo { display: grid; gap: 8px; }
.campo > span { font-size: var(--fs-body-s); font-weight: 500; }
.campo input, .campo textarea {
  font: inherit;
  font-size: var(--fs-body);
  padding: 14px 16px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-2);
  background: var(--paper);
  color: var(--ink);
  width: 100%;
}
.campo textarea { min-height: 140px; resize: vertical; }
.campo input:focus-visible, .campo textarea:focus-visible {
  outline: 3px solid var(--evidenza);
  outline-offset: 1px;
  border-color: var(--evidenza);
}

/* I campi devono VEDERSI. Con `.campo input` e basta il bordo spariva
   (un azzeramento a monte lo vinceva), e il modulo sembrava tre
   etichette sospese nel vuoto — segnalato guardando l'anteprima il 3
   settembre 2026. Selettore piu' forte (`.modulo .campo`), cosi' il
   bordo netto e il fondo chiaro vincono comunque. */
.modulo .campo input, .modulo .campo textarea {
  border: 1.5px solid var(--line-strong);
  background: var(--paper);
  border-radius: var(--r-2);
}

/* Instradamento: due scelte, mai una tendina. Una tendina
   nasconde la scelta dietro un clic; qui la scelta e' il senso
   del blocco e deve stare in vista. */
.instrada { display: grid; gap: 10px; }
.instrada__scelte { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.instrada__scelta {
  position: relative;
  display: block;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-2);
  padding: 14px 16px;
  cursor: pointer;
  font-size: var(--fs-body);
  text-align: center;
}
.instrada__scelta input {
  position: absolute;
  opacity: 0;
  width: 100%; height: 100%;
  inset: 0;
  cursor: pointer;
}
.instrada__scelta:has(input:checked) {
  border-color: var(--evidenza);
  box-shadow: inset 0 0 0 1px var(--evidenza);
  font-weight: 500;
}
.instrada__scelta:has(input:focus-visible) {
  outline: 3px solid var(--evidenza);
  outline-offset: 2px;
}

.consenso {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  align-items: start;
  font-size: var(--fs-body-s);
  line-height: 1.45;
  color: var(--ink-2);
}
.consenso input { margin-top: 2px; width: 18px; height: 18px; accent-color: var(--evidenza); }
.consenso a, .consenso a:hover { color: var(--ink); }

.errori {
  font-size: var(--fs-body-s);
  color: var(--ink);
  background: var(--paper-3);
  border-left: 3px solid var(--ink);
  padding: 12px 14px;
}
.errori:empty { display: none; }

/* ---------- S14 · Sedi ---------------------------------------
   Nessuna mappa incorporata: pesa e porta cookie di terze parti.
   La mappa sta sulla pagina della singola sede. */


.sede { border-top: 2px solid var(--ink); padding-top: 18px; }
.sede__citta { font-size: var(--fs-h3); font-weight: 500; margin: 0 0 6px; }
.sede__via { font-size: var(--fs-body); color: var(--ink-2); margin: 0; line-height: 1.45; }
.sede__nota { font-size: var(--fs-body-s); color: var(--ink-3); margin: 6px 0 0; }

/* ---------- S15 · Footer -------------------------------------
   Il payoff sta qui e in nessun altro punto della pagina. */

.piede { background: var(--paper); border-top: 1px solid var(--line); padding-block: 64px 40px; }
/* Il logo SVG non porta dimensioni: lo vincolo qui, come nell'header. */
.piede .wp-block-site-logo img, .piede img.custom-logo { height: 44px; width: auto; max-width: none; }

/* ---------- Team — schede "ritratto" (chi-siamo) --------------
   Riquadro verticale 4/5 come una foto: per ora tinta tenue diversa per
   ognuno + iniziali grandi in peso leggero; poi nome in grassetto e ruolo
   piccolo grigio. Quando arrivano le foto, si sostituisce il fondo della
   .membro__foto con un <img> dello stesso aspetto. */
.team { display: grid; gap: 24px; grid-template-columns: 1fr 1fr; margin-top: var(--sp-8); }
@media (min-width: 720px){ .team { grid-template-columns: 1fr 1fr 1fr; } }
@media (min-width: 1040px){ .team { grid-template-columns: repeat(5, 1fr); } }
.membro { display: flex; flex-direction: column; }
.membro__foto { position: relative; aspect-ratio: 4 / 5; border-radius: var(--r-4);
  overflow: hidden; background: var(--paper-2); display: block; }
.membro__foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.membro__iniziali { position: absolute; left: 20px; bottom: 16px;
  font-family: var(--font-display); font-weight: 300; font-size: 64px; line-height: 1;
  letter-spacing: -0.02em; color: var(--ink); }
.membro:nth-child(1) .membro__foto { background: #EAF8FF; }
.membro:nth-child(2) .membro__foto { background: #FFF3E6; }
.membro:nth-child(3) .membro__foto { background: #FEF3F3; }
.membro:nth-child(4) .membro__foto { background: #E6F6EC; }
.membro:nth-child(5) .membro__foto { background: #FCFCE5; }
.membro__nome { font-family: var(--font-display); font-weight: 700; font-size: 20px;
  letter-spacing: -0.01em; line-height: 1.2; margin: 16px 0 5px; }
.membro__ruolo { font-size: var(--fs-body-s); color: var(--ink-3); line-height: 1.45; margin: 0; }

/* ---------- Ricerca e selezione — "Il nostro metodo" (4 schede numerate,
              bordo superiore ciano) ---- */
.principi { display: grid; gap: 20px; margin-top: var(--sp-8); }
@media (min-width: 780px){ .principi { grid-template-columns: 1fr 1fr; } }
.principio { border: 1px solid var(--line); border-top: 4px solid #62D5FB;
  border-radius: var(--r-4); padding: 30px 28px; background: var(--paper); color: var(--ink);
  display: flex; flex-direction: column; gap: 12px; }
.principio__n { font-family: var(--font-display); font-weight: 700; font-size: 15px;
  letter-spacing: .04em; color: #1BA7D6; }
.principio h3 { font-family: var(--font-display); font-weight: 700; font-size: 21px;
  letter-spacing: -0.01em; line-height: 1.2; margin: 0; }
.principio p { color: var(--ink-3); font-size: var(--fs-body-s); line-height: 1.6; margin: 0; }

/* ---------- CSR Campania — interventi numerati (smeraldo) ---- */
.interventi { display: grid; gap: 20px; margin-top: var(--sp-8); }
@media (min-width: 820px){ .interventi { grid-template-columns: 1fr 1fr; } }
.intervento { border: 1px solid var(--line); border-radius: var(--r-4);
  padding: 32px 28px; background: var(--paper); }
.intervento__n { font-family: var(--font-display); font-weight: 700; font-size: 30px;
  line-height: 1; letter-spacing: -0.02em; color: #008524; display: block; margin: 0 0 16px; }
.intervento p { margin: 0; color: var(--ink-3); font-size: var(--fs-body); line-height: 1.6; }

/* ---------- Statement istituzionale a tutta larghezza (gioco di pesi) ---- */
.citazione2 { max-width: none; position: relative; }
.citazione2__q { font-family: var(--font-display);
  font-size: clamp(1.7rem, 1rem + 2.4vw, 3rem);
  line-height: 1.24; letter-spacing: -0.015em; max-width: none;
  text-wrap: pretty; margin: 0 0 var(--sp-8); }
.citazione2__q .q-leggero { font-weight: 300; }
.citazione2__q .q-forte   { font-weight: 700; }
.piede__griglia { display: grid; gap: 48px; }
@media (min-width: 900px) {
  .piede__griglia { grid-template-columns: 5fr 3fr 4fr; gap: 56px; }
}
.piede__payoff {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.75rem, 1.2rem + 2vw, 2.25rem);
  letter-spacing: -0.025em;
  margin: 24px 0 0;
}
.piede__claim { font-size: var(--fs-body); margin: 16px 0 0; max-width: 40ch; line-height: 1.5; }
.piede__desc { font-size: var(--fs-body-s); color: var(--ink-3); margin: 8px 0 0; max-width: 44ch; line-height: 1.5; }
.piede__titolo {
  font-size: var(--fs-body-s);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 0 0 16px;
}
.piede__voci { display: grid; gap: 10px; font-size: var(--fs-body); }
.piede__voci--legale { font-size: var(--fs-body-s); }
.piede a, .piede a:hover { color: var(--ink); text-decoration: none; }
.piede a:hover { text-decoration: underline; text-underline-offset: 0.16em; }
.piede__chiusura {
  margin-top: 56px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  font-size: var(--fs-body-s);
  color: var(--ink-3);
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: space-between;
}

/* Le entrate in scena non stanno qui: sono gia' in maqer-v2.css
   ([data-anim] + .is-in), e riscriverle vorrebbe dire avere due
   comportamenti da tenere allineati per sempre. */





.testo-sez {
  font-size: var(--fs-body-l);
  line-height: 1.6;
  color: inherit;
  max-width: var(--misura-lettura);
  margin: 20px 0 0;
}

.display-corp, .titolo-sez, .credo__titolo { text-wrap: balance; }

.unito { white-space: nowrap; }

.testo-sez, .passo__corpo, .credo__corpo, .dato__cosa, .breve__dettaglio, .piede__claim, .piede__desc, .articolo__titolo {
  text-wrap: pretty;
  hyphens: manual;
}

.elenco-quadri li,
.is-style-quadri li {
  position: relative;
  padding-left: 22px;
  font-size: var(--fs-body-l);
  line-height: 1.45;
  text-wrap: pretty;
}

.elenco-quadri li::before,
.is-style-quadri li::before {
  content: "";
  position: absolute;
  left: 0;
  top: -0.06em; /* un filo in su: centro OTTICO delle lettere (l'inchiostro sta sopra la meta' del box-riga) */
  width: 16px;
  height: 1.45em; /* una riga: il quadretto si centra dentro, a qualsiasi corpo */
  background: currentColor;
  -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' fill='%23000'/%3E%3C/svg%3E") no-repeat left center / 9px 9px;
          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' fill='%23000'/%3E%3C/svg%3E") no-repeat left center / 9px 9px;
}

a.esci, a.esci:hover, a.esci:focus { color: inherit; }

a.esci:hover { gap: 16px; }

.marchio-divisione { height: clamp(14px, 2.4vh, 20px); margin-bottom: clamp(3px, 0.8vh, 7px); }

.marchio-divisione { height: 30px; width: auto; margin-bottom: 18px; }

/* ---------- Azzeramenti, DENTRO LE SEZIONI ------------------
   ATTENZIONE, QUESTA E' LA PARTE PIU' FACILE DA ROMPERE.

   Questi azzeramenti servono dove lo spazio e' contato: dentro i
   pannelli delle divisioni, che sono alti mezzo schermo, e dentro le
   griglie in cui la distanza la decide il `gap` e non i margini dei
   singoli blocchi.

   NON devono valere su tutta la pagina. E' successo: portandoli qui da
   un altro foglio ho tolto il prefisso con una sostituzione grossolana,
   sono diventati globali, e la pagina ha perso OGNI spaziatura fra un
   paragrafo e l'altro. Il risultato sembra un errore di impianto e
   invece sono quattro selettori senza prefisso.

   Se aggiungi una regola qui sotto, il prefisso ci va sempre. */

.divisioni p,
.divisioni h1, .divisioni h2, .divisioni h3,
.divisioni ul, .divisioni ol, .divisioni figure,
.divisioni .wp-block-group,
.pannello__griglia p,
.pannello__griglia h1, .pannello__griglia h2, .pannello__griglia h3,
.pannello__griglia ul, .pannello__griglia figure { margin: 0; }

/* Gli elenchi con il marcatore quadrato non usano quello del browser. */
.elenco-quadri,
.is-style-quadri {padding: 0; list-style: none; }

/* «Pallini normali» — lo stile predefinito dell'elenco.
   Il reset globale `ul { list-style: none }` (impianto.css) toglie i punti
   a OGNI elenco: erano spariti anche da quelli di contenuto, che invece i
   punti li vogliono. Qui tornano, ma SOLO sull'elenco di contenuto di
   WordPress (`.wp-block-list`) e solo se non e' «Quadretti Maqer» ne'
   l'elenco a quadri dei pattern: le liste di utilita' (prove, menu) usano
   altre classi e restano pulite. Cosi' «Pallini normali» mostra davvero i
   pallini, e «Quadretti Maqer» il quadrato — la scelta c'e' e funziona. */
ul.wp-block-list:not(.is-style-quadri):not(.elenco-quadri) {
  list-style: disc;
  padding-inline-start: 1.4em;
}

ol.wp-block-list:not(.is-style-quadri):not(.elenco-quadri) {
  list-style: decimal;
  padding-inline-start: 1.6em;
}

/* Le immagini non escono mai dalla loro colonna. Questa vale ovunque:
   e' un limite, non uno spazio. */
:where(img, svg) { max-width: 100%; }

/* Nelle colonne dei pannelli la distanza la decide il gap. */
.pannello__griglia > * { display: grid; align-content: start; gap: inherit; }

/* Il marchio di divisione, dentro WordPress.
   Nel prototipo e' un <img> nudo; WordPress lo avvolge in un <figure>,
   e la misura data al riquadro non arriva all'immagine: il riquadro
   resta largo quanto il file, milleduecento pixel, e sfonda la colonna
   portandosi dietro l'altezza. Queste righe valgono per tutti e due i
   casi. */
.marchio-divisione { display: block; width: auto; max-width: 100%; margin: 0; }
figure.marchio-divisione img { display: block; height: 100%; width: auto; }

/* Il paragrafo che WordPress usa per il collegamento in uscita non
   deve aggiungere un margine suo: lo spazio lo decide .esci. */
p.esci { margin: 0; }
p.esci a { color: inherit; text-decoration: none; }




/* ---------- I bottoni dentro WordPress ----------------------
   WordPress avvolge il bottone in un <div class="wp-block-button"> e
   mette la classe sul contenitore, non sul collegamento. Il risultato
   e' che le nostre regole vestono il contenitore e il collegamento
   dentro resta un collegamento qualunque: sottolineato, e del colore
   dei link invece che del bottone.

   Queste righe rimettono le cose a posto senza toccare i pattern, che
   restano scritti nel modo naturale per chi usa l'editor. */
.wp-block-button.btn {
  /* Il contenitore NON deve vestirsi: le regole di .btn nell'impianto
     lo colpirebbero e si vedrebbero due riquadri, uno dentro l'altro.
     Il vestito lo porta il collegamento, qui sotto. */
  display: inline-flex;
  padding: 0;
  border: 0;
  background: none;
  border-radius: 0;
}
.wp-block-button.btn > .wp-block-button__link {
  all: unset;
  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);
}
.wp-block-button.btn-lg > .wp-block-button__link { padding: 17px 32px; font-size: var(--fs-body); }

.wp-block-button.btn-primary > .wp-block-button__link {
  background: var(--brand);
  color: var(--on-brand);
}
.wp-block-button.btn-primary > .wp-block-button__link:hover { filter: brightness(0.92); }

.wp-block-button.btn-line > .wp-block-button__link {
  background: transparent;
  color: var(--ink);
  border-color: var(--line-strong);
}
.wp-block-button.btn-line > .wp-block-button__link:hover {
  border-color: var(--evidenza);
  color: var(--evidenza);
}

/* Dentro una superficie piena il bottone secondario prende i colori
   della superficie, altrimenti sparisce nel fondo. */
.plate .wp-block-button.btn-line > .wp-block-button__link {
  color: var(--on-surface);
  border-color: var(--on-surface);
}
.plate .wp-block-button.btn-line > .wp-block-button__link:hover {
  background: var(--on-surface);
  color: var(--surface);
}


/* ---------- Il catalogo dei corsi ---------------------------
   Nel prototipo i corsi scorrevano da soli in un carosello. Qui no, ed
   e' una scelta: un carosello mostra tre corsi alla volta e nasconde
   gli altri dietro un movimento che chi legge non controlla. Su un
   catalogo che deve far trovare un corso, nascondere e' il contrario
   di quello che serve.

   Sono una griglia, con la stessa regola delle altre: tante colonne
   quante ne stanno. Il numero di corsi lo decide il database, non il
   CSS. */
.corsi {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  gap: 32px 24px;
  margin-top: 40px;
}
.corsi .wp-block-post-title { font-size: var(--fs-h3); font-weight: 500; line-height: 1.25; margin: 12px 0 0; }
.corsi .wp-block-post-title a { color: inherit; text-decoration: none; }
.corsi .wp-block-post-title a:hover { text-decoration: underline; text-underline-offset: 0.14em; }
.corsi .corso__copertina img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r-3); }
.corsi .corso__meta { font-size: var(--fs-body-s); color: var(--ink-3); margin: 6px 0 0; }

/* La grandezza dei titoli delle schede, scelta sul blocco catalogo: arriva
   come `--corso-titolo` sul contenitore. Senza scelta, la misura di prima. */
.corso__titolo {
  font-size: var(--corso-titolo, clamp(1.125rem, 1rem + 0.6vw, 1.375rem));
}

/* IL CHIP «MODIFICA» — SOLO NELL'EDITOR.
   ------------------------------------------------------------
   Le schede del catalogo si popolano da sole dai corsi, e nell'editor
   ognuna e' un accesso per correggere QUEL corso: il render aggiunge
   questa etichetta solo li' (con `maqerEdit`), e cliccando la scheda si
   apre il corso. In pagina pubblicata l'etichetta non esiste. */
.corso--modifica { position: relative; }
.corso__modifica {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  font-size: var(--fs-caption, 0.8125rem);
  font-weight: 700;
  color: var(--ink);
  background: var(--paper);
  border: 1.5px solid var(--ink);
  border-radius: 999px;
  padding: 4px 12px;
}
.corso__modifica::before {
  content: "";
  width: 13px;
  height: 13px;
  background-color: currentColor;
  -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%3Cpath d='M12 20h9'/%3E%3Cpath d='M16.5 3.5a2.12 2.12 0 0 1 3 3L7 19l-4 1 1-4Z'/%3E%3C/svg%3E") no-repeat center / contain;
          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%3Cpath d='M12 20h9'/%3E%3Cpath d='M16.5 3.5a2.12 2.12 0 0 1 3 3L7 19l-4 1 1-4Z'/%3E%3C/svg%3E") no-repeat center / contain;
}
.corso--modifica:hover .corso__modifica { background: var(--ink); color: var(--paper); }


/* ============================================================
   IL CAROSELLO

   Ce n'era uno per Job e uno per Advisory, costruiti in due modi
   diversi, con due difetti diversi da scoprire. Adesso e' uno.

   La pista e' una zona che scorre. Si muove da sola (lo fa
   caroselli.js), e si muove anche col dito, con la rotellina, con le
   frecce e col Tab. Tutti e cinque i modi sullo stesso oggetto: e' il
   motivo per cui lo scorrimento non puo' farlo il CSS traslando la
   fila — l'animazione riporterebbe indietro quello che il dito ha
   appena spostato.

   Va bene sia per le schede scritte a mano sia per quelle che arrivano
   dal database: la pista puo' essere un <div> o l'elenco di un blocco
   Query, e le regole sono le stesse.
   ============================================================ */

.carosello__pista {
  animation: none;
  width: auto;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;

  /* NIENTE scroll-snap QUI, ed e' una correzione.

     Con `scroll-snap-type: x mandatory` il browser, dopo ogni
     spostamento, riporta la pista sul bordo della scheda piu' vicina.
     Va benissimo quando a spostarla e' un dito. Quando a spostarla e'
     il carosello, a ventotto pixel al secondo, il risultato e' che
     resta ferma dieci secondi e poi salta di una scheda intera: uno
     scatto, non uno scorrimento. I numeri lo dicevano — la posizione
     era sempre 300, 600, 900, cioe' multipli esatti della scheda.

     L'aggancio lo rimette il JavaScript quando prendi in mano tu il
     carosello, e lo toglie quando riparte da solo. */
  scroll-snap-type: none;
}

.carosello__pista::-webkit-scrollbar { display: none; }

/* L'aggancio vale solo mentre lo muovi tu. La classe la mette e la
   toglie caroselli.js. */
.carosello__pista.agganciato { scroll-snap-type: x mandatory; }
.carosello__pista.agganciato > * { scroll-snap-align: start; }

/* Il contorno del fuoco: la pista si raggiunge col Tab, perche' e'
   una zona che scorre, e chi arriva da tastiera deve vedere dov'e'. */
.carosello__pista:focus-visible {
  outline: 3px solid var(--evidenza);
  outline-offset: 4px;
}

.carosello__comandi {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: var(--sp-5);
}

/* Il bottone di pausa ha un margine sopra suo, che serve quando sta da
   solo. In fila con le frecce lo faceva scendere di mezza altezza. */
.carosello__comandi .carosello__pausa { margin-top: 0; }

/* Stesso vestito del bottone di pausa: sono due comandi dello stesso
   oggetto e devono somigliarsi. */
.carosello__freccia {
  display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px;
  background: transparent; color: var(--on-surface);
  border: 2px solid var(--on-surface); border-radius: 50%;
  font: inherit; font-size: 1.25rem; line-height: 1; cursor: pointer;
  transition: background-color 180ms, color 180ms, opacity 180ms;
}

.carosello__freccia:hover { background: var(--on-surface); color: var(--surface); }

/* Arrivati in fondo la freccia resta al suo posto e smette di
   rispondere: sparire farebbe saltare l'altra. */
.carosello__freccia[disabled] { opacity: 0.35; cursor: default; }
.carosello__freccia[disabled]:hover { background: transparent; color: var(--on-surface); }


/* Le tre colonne di «Per le imprese». Il contenitore lo dispone la
   griglia adattiva piu' sopra; qui c'e' solo quello che serve dentro
   una colonna: titolo attaccato al suo testo, e una misura di lettura
   piu' stretta, perche' una colonna e' stretta. Nel prototipo questa
   classe era rimasta senza stile e la colonna prendeva le spaziature
   di WordPress, che sono un'altra cosa. */
.colonna > :first-child { margin-top: 0; }
.colonna h3 { margin: 0; }
.colonna p { max-width: 34ch; margin: 12px 0 0; }


/* ============================================================
   LE SPAZIATURE CHE PRIMA STAVANO DENTRO IL TESTO

   Negli HTML di prova ogni distanza era scritta addosso al singolo
   paragrafo: `style="margin-top:var(--sp-5)"`. Su una pagina sola, con
   un testo che non cambia, funziona.

   In un tema no, per due motivi.

   PRIMO, PRATICO. Un blocco di WordPress salva solo gli attributi che
   sa produrre. Uno style scritto a mano non lo sa produrre: all'apertura
   della pagina l'editor confronta quello che ricostruisce con quello
   che trova, vede l'attributo in piu' e mostra il riquadro rosso
   «questo blocco contiene contenuto imprevisto». Trentasette blocchi su
   duecentoquindici lo facevano.

   SECONDO, PIU' IMPORTANTE. Una distanza scritta dentro il testo va
   rimessa a mano ogni volta che il testo cambia, e chi scrive dal
   pannello non ha modo di rimetterla. Cioe' era esattamente la cosa da
   non fare: dover aggiustare a mano ogni singolo pezzo.

   I valori qui sotto non sono inventati: sono quelli che ricorrevano di
   piu' nelle tre pagine approvate. Dove c'erano due valori diversi per
   la stessa cosa ho preso il piu' frequente, che e' quello che si vede
   guardando la pagina.
   ============================================================ */

/* Il sommario sotto il titolo. Quattro volte su cinque era --sp-5. */
.lead { margin-top: var(--sp-5); }

/* Fra il titolo di sezione e quello che segue.
   Il selettore ripete `h2.display-sm` perche' nell'impianto la regola
   che azzera i margini e' scritta cosi', e una regola con meno peso non
   la batte anche se viene dopo. Con il solo `.display-sm` il titolo
   restava attaccato alla scheda sotto. */
.display-sm, h2.display-sm { margin-bottom: var(--sp-12); }

/* La misura del titolo grande: negli originali andava da 18ch a 28ch a
   seconda della frase. Una sola misura per tutti, perche' la frase
   cambia e la misura scritta a mano resta quella di prima. 24ch e' il
   valore che ricorreva di piu' ed e' dentro l'intervallo leggibile. */
.display-sm, h2.display-sm { max-width: 24ch; }

/* Il paragrafo che contiene solo un bottone: e' un'azione, non un
   testo, e vuole aria sopra. Si riconosce da cosa contiene, non da una
   classe che qualcuno deve ricordarsi di mettere. */
p:has(> .btn) { margin-top: var(--sp-8); }

/* I due bottoni della testata. */
.hero__comandi { margin-top: var(--sp-8); }

/* Il primo elemento di un blocco non ha niente sopra da cui staccarsi:
   il margine li' fa un buco, non una spaziatura. */
.wrap > :first-child,
.hero__testo > :first-child { margin-top: 0; }


/* ---------- Le schede che arrivano dal database ---------------
   Il blocco Query non produce i <a class="corso"> scritti a mano del
   prototipo: produce un <ul> di <li>. Sono la stessa scheda, quindi
   prendono lo stesso vestito invece di averne uno somigliante — due
   vestiti quasi uguali si allontanano alla prima correzione. */

.carosello__pista > li {
  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);
  list-style: none;

  /* La scheda e' una superficie chiara anche dentro una fascia a tinta
     piena: se non lo dichiara, eredita i ruoli della fascia e scrive
     bianco su bianco. */
  --surface:    var(--paper);
  --on-surface: var(--ink);
  --evidenza:   var(--evidenza-carta);
}

.carosello__pista > li .wp-block-post-featured-image {
  margin: 0;
  border-radius: var(--r-3);
  overflow: hidden;
}

.carosello__pista > li .wp-block-post-featured-image img {
  width: 100%; aspect-ratio: 3 / 2; object-fit: cover;
}

/* Il segnaposto per i corsi senza immagine: una scheda alta la meta'
   delle altre in una fila che scorre si nota, e male. */
.carosello__pista > li .wp-block-post-featured-image:empty::before,
.carosello__pista > li:not(:has(.wp-block-post-featured-image))::before {
  content: "";
  display: block;
  aspect-ratio: 3 / 2;
  border-radius: var(--r-3);
  background: var(--paper-3);
}

.carosello__pista > li .wp-block-post-title,
.carosello__pista > li .corso__titolo {
  font-family: var(--font-display);
  font-size: var(--corso-titolo, var(--fs-h3)); font-weight: 700; line-height: 1.25;
  margin: 0;
}

.carosello__pista > li .wp-block-post-title a {
  color: inherit; text-decoration: none;
}

.carosello__pista > li .wp-block-post-title a:hover {
  text-decoration: underline; text-underline-offset: 0.14em;
}

.carosello__pista > li .wp-block-post-title a:focus-visible {
  outline: 3px solid var(--evidenza-carta); outline-offset: 3px;
}

/* Quando non c'e' ancora nessun corso pubblicato. Non e' un errore, e
   non deve sembrarlo: e' un sito nuovo. */
.corsi__vuoto {
  margin: 0;
  padding: var(--sp-8);
  border: 2px dashed var(--line-strong);
  border-radius: var(--r-3);
  color: var(--ink-3);
  text-align: center;
}


/* ============================================================
   DOVE VA A CAPO QUESTO TITOLO

   Gli a capo non si scrivono, si governano. Il motivo sta piu' su in
   questo file: un a capo scritto a mano resta dov'era mentre le parole
   si spostano, e chi riscrive il testo dal pannello non ha modo di
   rimetterlo.

   Quello che decide davvero dove cade un a capo e' LA MISURA: quanti
   caratteri stanno su una riga. Fin qui era una sola per tutti i
   titoli, scritta nel foglio. Andava cambiata a mano, cioe' non si
   cambiava.

   Adesso e' una voce nel pannello degli stili del blocco: si seleziona
   il titolo, Stili, e si sceglie fra stretta, normale e larga. Vale per
   quel titolo e basta.

   PERCHE' RESTA GIUSTO SUL TELEFONO

   Le misure sono in `ch`, cioe' in caratteri, non in pixel. Un titolo
   largo 18 caratteri e' largo 18 caratteri su qualunque schermo: sul
   telefono quei 18 caratteri occupano meno spazio, e il titolo va a
   capo prima, da solo. Non c'e' una versione mobile da tenere
   allineata, perche' non c'e' un numero di pixel scritto da nessuna
   parte.

   E se lo schermo e' piu' stretto della misura, comanda lo schermo:
   `max-width` e' un massimo, non una larghezza.
   ============================================================ */

/* Sui titoli. Stretta = titolo alto e compatto, tre o quattro righe
   corte. Larga = titolo che riempie la riga. */
.is-style-misura-stretta.wp-block-heading,
h1.is-style-misura-stretta, h2.is-style-misura-stretta,
h3.is-style-misura-stretta { max-width: 16ch; }

.is-style-misura-larga.wp-block-heading,
h1.is-style-misura-larga, h2.is-style-misura-larga,
h3.is-style-misura-larga { max-width: 34ch; }

/* Sui testi. Sotto le 45 battute si legge a singhiozzo, sopra le 75
   l'occhio sbaglia riga tornando a capo: le due voci stanno dentro
   quell'intervallo, non lo scavalcano. */
p.is-style-misura-stretta { max-width: 46ch; }
p.is-style-misura-larga   { max-width: 74ch; }

/* Il pareggio delle righe si puo' anche spegnere, per un titolo che
   deve riempire la riga fino in fondo. */
.is-style-righe-piene { text-wrap: normal; }

/* ============================================================
   DOMANDE FREQUENTI / APPROFONDIMENTI — l'accordion

   Le voci si aprono e si chiudono. In pagina e' un <details> nativo:
   apre, chiude e va da tastiera senza JavaScript. Nell'editor la voce e'
   un <div class="acc"> sempre aperto, per poterla scrivere; le due rese
   condividono lo stesso vestito. Il segno «+» che diventa «-» e' il CSS
   su .acc-sign, uguale nei due posti. Ripreso 1:1 dal prototipo, portato
   sui token del tema. ============================================================ */

.faq-elenco { max-width: var(--rigo, 80ch); }

.acc { border-top: 1px solid var(--line); }
.acc:last-of-type { border-bottom: 1px solid var(--line); }

/* La riga della domanda: in pagina e' <summary>, nell'editor
   .acc-summary-editor. Stesso aspetto. */
.acc > summary,
.acc-summary-editor {
  list-style: none;
  cursor: pointer;
  padding: 24px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.125rem, 1rem + 0.7vw, 1.375rem);
  letter-spacing: -0.015em;
  line-height: 1.25;
}
.acc > summary::-webkit-details-marker { display: none; }
.acc > summary:hover { opacity: 0.72; }

/* Nell'editor la domanda si scrive: cursore da testo, non da mano. */
.acc-summary-editor { cursor: text; }
.acc-domanda { flex: 1 1 auto; }

/* Il segno: una croce (+) che, aperta la voce, perde la stanghetta
   verticale e diventa un meno (-). */
.acc-sign {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  position: relative;
}
.acc-sign::before,
.acc-sign::after {
  content: "";
  position: absolute;
  background: currentColor;
  transition: transform 0.18s cubic-bezier(0.22, 1, 0.36, 1);
}
.acc-sign::before { left: 0; top: 9px; width: 20px; height: 2px; }
.acc-sign::after  { left: 9px; top: 0; width: 2px; height: 20px; }
.acc[open] .acc-sign::after { transform: scaleY(0); }
/* Nell'editor la voce e' sempre aperta: il segno mostra il meno. */
.acc-summary-editor .acc-sign::after { transform: scaleY(0); }

.acc-body { padding: 0 0 30px; max-width: 80ch; }
.acc-body > :first-child { margin-top: 0; }
.acc-body > :last-child { margin-bottom: 0; }

/* La chiusura, resa esplicita. Il <details> nativo dovrebbe nascondere da
   solo il corpo quando e' chiuso, ma non tutti i motori lo fanno allo
   stesso modo: questa riga lo garantisce ovunque. E' legata a `details`
   apposta — nell'editor la voce e' un <div class="acc"> sempre aperto, e
   quella NON deve sparire, se no non si scriverebbe la risposta. */
details.acc:not([open]) > .acc-body { display: none; }

/* ============================================================
   COMPONENTI PRONTI — Etichetta e Nota

   Due stili di blocco (si scelgono dal pannello «Stili» del blocco), presi
   1:1 dai prototipi. Non sono blocchi nuovi: sono un vestito per un
   paragrafo o un gruppo che gia' c'e'.
   ============================================================ */

/* Etichetta a pillola: un cartellino piccolo, in maiuscoletto, col bordo.
   Prende il colore del testo dov'e', cosi' regge su ogni fondo. */
.is-style-etichetta {
  display: inline-flex;
  align-items: center;
  padding: 5px 12px;
  border: 1px solid currentColor;
  border-radius: 999px;
  font-size: var(--fs-micro, 0.6875rem);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 1;
  margin: 0;
}

/* Nota / richiamo: staccata da una riga sopra. Su un gruppo tiene insieme
   piu' blocchi; su un paragrafo vale per quella riga. */
.is-style-nota {
  margin-top: var(--sp-7, 36px);
  padding-top: 22px;
  border-top: 2px solid currentColor;
  max-width: var(--rigo, 70ch);
}
.is-style-nota > :first-child { margin-top: 0; }
.is-style-nota > :last-child { margin-bottom: 0; }

/* ---------- Certificazioni (blocco maqer/certificazioni) ----------
   Home e footer pescano le certificazioni da un unico elenco: ne
   aggiungi una nel backend e compare qui, da sola. */
.certi { display: grid; gap: 20px; grid-template-columns: 1fr; }
@media (min-width: 760px) { .certi { grid-template-columns: 1fr 1fr 1fr; } }
.certi__c { border: 1px solid var(--line); border-radius: var(--r-4); padding: 28px 26px; background: var(--paper); color: var(--ink); }
.certi__badge { display: block; height: 60px; width: auto; max-width: 100%; object-fit: contain; margin: 0 0 18px; }
.certi__ente { font-family: var(--font-display); font-weight: 700; font-size: 19px; letter-spacing: -0.01em; margin: 0 0 8px; }
.certi__norma { font-size: var(--fs-body-s); color: var(--ink-3); margin: 0; }

/* ---------- Certificazioni in elenco (footer) + banda accreditamenti ---------- */
.certi-elenco { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: var(--fs-body-s); }
.certi-elenco li { color: var(--ink-3); line-height: 1.4; }
.certi-elenco__ente { font-weight: 600; color: var(--ink); }
.certi-elenco__norma { color: var(--ink-3); }
.piede__accredito { margin-top: 48px; padding-top: 40px; border-top: 1px solid var(--line); display: grid; gap: 40px; }
@media (min-width: 760px) { .piede__accredito { grid-template-columns: 1fr 1fr; } }

/* ============================================================
   SEZIONI DI PAGINA (dalle anteprime approvate → pagine vere)
   Classi usate dalle pagine montate a blocchi. Stavano nel <style>
   delle anteprime: qui diventano parte del tema, cosi' le pagine
   reali (core/group con queste classi) appaiono identiche.
   ============================================================ */

/* Segnaposto foto (carosello, accreditamenti, partner) */
.finta-foto { display: grid; place-content: center; aspect-ratio: 3/2; background: var(--paper-3);
  color: var(--ink-3); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; text-align: center; padding: 8px; }

/* Servizi — schede compatte */
.servizi { display: grid; gap: 20px; grid-template-columns: 1fr; margin-top: var(--sp-8); }
@media (min-width: 820px){ .servizi { grid-template-columns: 1fr 1fr 1fr; } }
.servizio { display: flex; flex-direction: column; border: 1px solid var(--line);
  border-radius: var(--r-4); padding: 32px 28px; background: var(--paper);
  text-decoration: none; color: var(--ink); transition: border-color .15s, transform .15s; }
.servizio:hover { border-color: var(--ink); transform: translateY(-2px); }
.servizio h3, .servizio .wp-block-heading { font-family: var(--font-display); font-weight: 700; font-size: 22px;
  letter-spacing: -0.01em; line-height: 1.2; margin: 0 0 12px; }
.servizio p { color: var(--ink-3); font-size: var(--fs-body-s); line-height: 1.55; margin: 0 0 20px; }
.servizio__vai { margin-top: auto; font-family: var(--font-display); font-weight: 600; color: var(--job-600); }

/* Mattonelle "perché sceglierci" */
.mattonelle { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line);
  border-radius: var(--r-4); overflow: hidden; grid-template-columns: 1fr; margin-top: var(--sp-8); }
@media (min-width: 640px){ .mattonelle { grid-template-columns: 1fr 1fr; } }
@media (min-width: 980px){ .mattonelle { grid-template-columns: 1fr 1fr 1fr; } }
.mattonella { background: var(--paper); padding: 32px 28px; display: flex; flex-direction: column; gap: 14px; min-height: 150px; }
.mattonella__n { font-family: var(--font-display); font-weight: 700; font-size: 30px; line-height: 1; letter-spacing: -0.02em; }
.mattonella__voce, .mattonella .wp-block-heading { font-family: var(--font-display); font-weight: 700; font-size: 19px; line-height: 1.2; letter-spacing: -0.01em; margin: 0; }
.mattonella:nth-child(1) .mattonella__n { color: var(--job); }
.mattonella:nth-child(2) .mattonella__n { color: var(--ext-orange); }
.mattonella:nth-child(3) .mattonella__n { color: var(--ext-cyan-600); }
.mattonella:nth-child(4) .mattonella__n { color: var(--ext-pink-600); }
.mattonella:nth-child(5) .mattonella__n { color: var(--ext-emerald); }
.mattonella:nth-child(6) .mattonella__n { color: var(--job-600); }

/* Accreditamenti in bella vista */
.accredito { display: grid; gap: 28px; margin-top: var(--sp-8); }
@media (min-width: 820px){ .accredito { grid-template-columns: 1.2fr 1fr; align-items: center; } }
.accredito__loghi { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; }
.accredito__loghi .finta-foto { border-radius: var(--r-3); }
.accredito__voci { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; font-size: var(--fs-body-s); color: var(--ink-3); line-height: 1.5; }
.accredito__voci strong { color: var(--ink); font-family: var(--font-display); }

/* Partner: loghi in celle bianche */
.partner-strip { display: grid; grid-template-columns: repeat(2,1fr); gap: 1px; background: var(--line);
  border: 1px solid var(--line); border-radius: var(--r-4); overflow: hidden; margin-top: var(--sp-6); }
@media (min-width: 560px){ .partner-strip { grid-template-columns: repeat(4,1fr); } }
.partner-strip img { width: 100%; aspect-ratio: 1/1; object-fit: contain; background: var(--paper); padding: 22px; display: block; }

/* News: grassetto solo prima dei due punti */
.notizie .notizia h3, .notizie .notizia h3.h3 { font-weight: 400; }
.notizie .notizia h3 strong { font-weight: 700; }

/* Loghi accreditamento nel footer */
.piede__loghi { display: flex; flex-wrap: wrap; gap: 20px; align-items: center; margin: 0 0 16px; }
.piede__loghi .piede__logo-accr { margin: 0; }
.piede__loghi .piede__logo-accr img { height: 46px; width: auto; display: block; }