@charset "utf-8";
@layer reset, base, layout, componenti, utilita, motion;

@font-face {
  font-family: "Google Sans Flex";
  font-style: oblique 0deg 10deg;
  font-weight: 400 600;
  font-display: swap;
  src: url("../fonts/google-sans-flex-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Google Sans Flex";
  font-style: oblique 0deg 10deg;
  font-weight: 400 600;
  font-display: swap;
  src: url("../fonts/google-sans-flex-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  size-adjust: 80%;
  src: url("../fonts/montserrat-latin-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  size-adjust: 80%;
  src: url("../fonts/montserrat-latin-ext-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Montserrat";
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  size-adjust: 80%;
  src: url("../fonts/montserrat-latin-italic.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Montserrat";
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  size-adjust: 80%;
  src: url("../fonts/montserrat-latin-ext-italic.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  color-scheme: light dark;

  /* Palette. Qui stanno i valori del tema chiaro; quelli scuri sono nei due
     blocchi subito dopo la chiusura di :root.

     Non si usa light-dark(): e' arrivata solo con Safari 17.5, e su iOS 16 e
     17.0-17.4 la funzione non e' riconosciuta. Le variabili accettano
     qualunque testo, quindi il browser non protesta: l'errore salta fuori al
     momento della sostituzione, dove var(--carta) non e' un colore valido e la
     dichiarazione decade. Sfondi di schede, pulsanti, testata e nastro
     diventano trasparenti, cioe' invisibili. Il modo qui sotto e' piu' lungo
     da scrivere ma funziona ovunque, ed e' lo stesso gia' usato per --inv-n. */
  --carta: #f9fafb;
  --carta-2: #eeeeee;
  --inchiostro: #111111;
  --inchiostro-2: #544c42;

  /* L'accento non puo' essere un colore solo. Serve sia come testo sia come
     sfondo, e come testo deve staccarsi da --carta, che nei due temi sta agli
     estremi opposti della scala: nessun valore unico arriva nemmeno al 4,5:1
     su entrambi i fondi, mentre questo sito dichiara AAA, cioe' 7:1. Quindi
     l'accento segue il tema, e il testo che gli sta sopra segue lui.

     La tinta e' la stessa, 19 gradi. Il valore chiaro e' saturo al massimo;
     quello scuro si ferma al 70% di saturazione perche' oltre quella soglia,
     su questa tinta, il 7:1 sul fondo scuro non si raggiunge per quanto si
     schiarisca: il canale blu e' quasi a zero e la luminanza ha un tetto. */
  --accento: #902e00;
  --su-accento: #f9fafb;

  /* Il pie' di pagina ha lo sfondo rovesciato rispetto alla pagina: li'
     l'accento del tema si troverebbe sulla stessa luminanza del fondo e
     l'icona sparirebbe al passaggio del mouse. Serve quello dell'altro tema. */
  --accento-inverso: #FF864D;

  /* Scritto in rgba e non con color-mix: e' lo stesso colore, e color-mix su
     Safari e' arrivato solo con la 16.2. Il filetto regge tutte le schede e le
     cornici, e se decade spariscono i bordi. */
  --tratto: rgba(20, 18, 16, 0.16);

  /* Il logo è un SVG monocromatico scuro: 0 = così com'è, 1 = invertito.
     Il marchio nella testata usa il valore, quello nel piè lo specchia. */
  --inv-n: 0;

  /* Tipografia */
  --font-display: "Montserrat", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-testo: "Google Sans Flex", "Segoe UI", system-ui, -apple-system, sans-serif;
  --t-xs: clamp(0.78rem, 0.74rem + 0.2vw, 0.86rem);
  --t-sm: clamp(0.9rem, 0.86rem + 0.25vw, 1rem);
  --t-testo: clamp(0.85rem, 0.81rem + 0.22vw, 0.94rem);
  --t-base: clamp(1.02rem, 0.96rem + 0.35vw, 1.16rem);
  --t-md: clamp(1.28rem, 1.05rem + 0.6vw, 1.65rem);

  --t-lg: clamp(1.5rem, 1.2rem + 1.4vw, 2.3rem);
  --t-xl: clamp(2.1rem, 1.4rem + 3vw, 4rem);
  --t-2xl: clamp(2.7rem, 1.5rem + 4vw, 4.2rem);

  /* Spazi & forme */
  --sp-2: 1rem;
  --sp-3: 1.5rem;
  --sp-4: 2.5rem;
  --sp-5: 4rem;
  --sp-6: 6rem;
  --sp-7: clamp(4.5rem, 9vw, 9rem);
  --r-sm: 10px;
  --r-md: 20px;
  --r-lg: 32px;
  --r-full: 999px;
  --bordo: 2px solid var(--inchiostro);
  --bordo-fine: 1px solid var(--tratto);
  --tratteggio: repeating-linear-gradient(90deg, var(--tratto) 0 6px, transparent 6px 12px);
  --margine: clamp(1.1rem, 5vw, 5.5rem);
  --colonna: min(100% - var(--margine) * 2, 74rem);
  --h-testata: 4.6rem;
  --molla: cubic-bezier(0.2, 0.9, 0.25, 1.15);
}

/* Tema forzato dall'interruttore */
:root[data-theme="chiaro"] {
  color-scheme: light;
}

:root[data-theme="scuro"] {
  color-scheme: dark;
}

/* I valori del tema scuro. Vanno scritti due volte, e non c'e' modo di
   evitarlo senza tornare a light-dark(): una volta per chi ha scelto il tema
   scuro con l'interruttore, una per chi non ha scelto niente e ha il sistema
   impostato su scuro. Il :not() serve a non ribaltare chi ha invece scelto il
   chiaro avendo il sistema scuro. Se si tocca un colore qui, va toccato anche
   nell'altro blocco. */
:root[data-theme="scuro"] {
  --carta: #111111;
  --carta-2: #1d1a16;
  --inchiostro: #f3ecde;
  --inchiostro-2: #b3a895;
  --accento: #FF864D;
  --su-accento: #141210;
  --accento-inverso: #902e00;
  --tratto: rgba(243, 236, 222, 0.22);
  --inv-n: 1;
}

@media (prefers-color-scheme: dark) {

  :root:not([data-theme="chiaro"]) {
    --carta: #111111;
    --carta-2: #1d1a16;
    --inchiostro: #f3ecde;
    --inchiostro-2: #b3a895;
    --accento: #FF864D;
    --su-accento: #141210;
    --accento-inverso: #902e00;
    --tratto: rgba(243, 236, 222, 0.22);
    --inv-n: 1;
  }
}

/* ---------------------------------------------------------------
   RESET
   --------------------------------------------------------------- */
@layer reset {

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

  * {
    margin: 0;
  }

  html {
    -webkit-text-size-adjust: 100%;
  }

  img, svg, video {
    display: block;
    max-inline-size: 100%;
    height: auto;
  }

  input, button, textarea, select {
    font: inherit;
    color: inherit;
  }

  /* I pulsanti del sito sono tutti disegnati da zero, quindi si azzera anche
     cio' che il browser mette per conto suo. Non e' pignoleria: su iOS il
     pulsante nativo porta margini interni suoi, non simmetrici, che nessuna
     regola di centratura corregge perche' non compaiono fra le proprieta'
     calcolate. E' il motivo per cui la freccia del "torna su" si vedeva
     spostata a destra su Safari e centrata altrove.

     appearance sta solo su button: sugli input toglierebbe il disegno nativo
     della casella di spunta, che qui serve e viene colorata con accent-color. */
  button {
    background: none;
    border: 0;
    padding: 0;
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
  }

  a {
    color: inherit;
  }

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

  :where(ul, ol)[role="list"] {
    list-style: none;
  }

  summary::-webkit-details-marker {
    display: none;
  }

  ::selection {
    background: var(--accento);
    color: var(--su-accento);
  }
}

/* ---------------------------------------------------------------
   BASE
   --------------------------------------------------------------- */
@layer base {

  html {
    scroll-behavior: smooth;
    scroll-padding-block-start: 7rem;
    overflow-x: clip;
  }

  body {
    background: var(--carta);
    color: var(--inchiostro);
    font-family: var(--font-testo);
    font-size: var(--t-base);
    line-height: 1.65;
    font-synthesis-weight: none;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
    position: relative;
    padding-block-start: var(--h-testata);
    transition: background-color 0.5s ease, color 0.5s ease;
  }

  h1, h2, h3 {
    font-family: var(--font-display);
    font-weight: 700;
    line-height: 1.02;
  }

  h3 {
    line-height: 1.14;
  }

  p {
    text-wrap: pretty;
  }

  em {
    font-style: italic;
  }

  strong {
    font-weight: 600;
  }

  abbr[title] {
    text-decoration: none;
    color: var(--accento);
  }

  a {
    text-decoration-thickness: 0;
  }

  a:hover {
    text-decoration-color: var(--accento);
  }

  :focus-visible {
    outline: 3px solid var(--accento);
    outline-offset: 3px;
    border-radius: 4px;
  }
}

/* ---------------------------------------------------------------
   LAYOUT
   --------------------------------------------------------------- */
@layer layout {

  .sezione {
    inline-size: var(--colonna);
    margin-inline: auto;
    padding-block: var(--sp-7);
    scroll-margin-block-start: 6rem;
  }

  .sezione + .sezione {
    padding-block-start: 0;
  }

  .sezione__testata {
    margin-bottom: 4ch;
  }

  .sezione__titolo {
    font-size: var(--t-xl);
    margin-block: 0.3em 0.45em;
    margin-top: 1ch;
  }

  .etichetta {
    font-family: var(--font-testo);
    letter-spacing: 0.22em;
    color: var(--accento);
    display: flex;
    align-items: center;
    gap: 0.7em;
  }

  .etichetta::after {
    content: "";
    flex: 1;
    block-size: 2px;
    background: var(--tratteggio);
  }
}

/* ---------------------------------------------------------------
   COMPONENTI
   --------------------------------------------------------------- */
@layer componenti {

  /* =========== RIPETIZIONI CONDIVISE ===========
     Raggruppo qui ciò che più componenti hanno in comune, così ogni
     blocco successivo dichiara solo le proprie differenze. */

  /* superfici a scheda */
  .carta, .progetto, .faq details {
    background: var(--carta-2);
  }

  .carta, .progetto, .faq details, .numeri, .elenco-competenze {
    border: var(--bordo-fine);
  }

  .carta, .progetto, .elenco-competenze {
    border-radius: var(--r-lg);
  }

  /* etichette minute in maiuscoletto */
  .etichetta, .tema, .menu, .lingue__scelta {
    font-size: var(--t-xs);
    text-transform: uppercase;
    font-weight: 600;
  }

  /* pulsanti tondi */
  .tema, .risali, .vetrina__scorri {
    display: grid;
    place-items: center;
    border-radius: 50%;
    line-height: 1;
  }

  /* Corpo del testo: una sola classe per ogni paragrafo di prosa, al posto
     dei sette selettori che prima dicevano la stessa cosa sezione per sezione. */
  .testo {
    font-size: var(--t-testo);
    color: var(--inchiostro-2);
  }

  /* Apertura di una sezione: lo stesso paragrafo degli altri, ma piu' grande e a
     inchiostro pieno, cosi' regge il peso di attacco.
     La regola era legata a .ritratto__testo e fuori di li' non faceva niente:
     il sommario di un articolo del blog restava della misura del testo minuto,
     piu' piccolo di un <p> qualunque. */
  .testo.grande {
    font-size: var(--t-md);
    color: var(--inchiostro);
  }

  /* testo di servizio che non è un paragrafo */
  .campo--scelta label, .numeri small, .documento__elenco li, .documento__aggiornamento, .modulo__azioni small {
    color: var(--inchiostro-2);
  }

  .campo--scelta label, .valori li, .documento__elenco li, .campo label {
    font-size: var(--t-sm);
  }

  .numeri small, .modulo__azioni small {
    font-size: var(--t-xs);
  }

  /* =========== COLLEGAMENTI =========== */
  .collegamento {
    position: relative;
    text-decoration: none;
    font-weight: 500;
  }

  .collegamento::after {
    content: "";
    position: absolute;
    inset-inline: 0;
    inset-block-end: -0.12em;
    block-size: 2px;
    background: var(--accento);
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 0.18s ease-in;
  }

  .collegamento:hover::after, .collegamento:focus-visible::after, .collegamento[aria-current]::after {
    transform: scaleX(1);
    transform-origin: left;
    transition: transform 0.28s ease-out;
  }

  /* figure incorniciate e immagini che riempiono */
  .ritratto__figura, .progetto__figura {
    border: var(--bordo);
    overflow: hidden;
  }

  .eroe__figura img, .ritratto__figura img, .progetto__figura img {
    inline-size: 100%;
    block-size: auto;
  }

  /* =========== SALTO CONTENUTO =========== */
  .salta {
    position: fixed;
    inset-block-start: -100%;
    inset-inline-start: var(--sp-2);
    z-index: 10000;
    background: var(--inchiostro);
    color: var(--carta);
    padding: 0.8em 1.4em;
    border-radius: var(--r-full);
    font-weight: 600;
    text-decoration: none;
  }

  .salta:focus-visible {
    inset-block-start: var(--sp-2);
  }

  /* =========== TESTATA =========== */
  .testata {
    position: fixed;
    inset-block-start: 0;
    inset-inline: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    inline-size: 100%;
    padding: 0.7rem var(--margine);
    background: var(--carta);
    border-block-end: var(--bordo-fine);
  }

  .marchio {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    text-decoration: none;
    margin-inline-end: auto;
  }

  .marchio__segno {
    inline-size: 2.9rem;
    block-size: auto;
    filter: invert(var(--inv-n));
  }

  .marchio__nome {
    font-family: var(--font-display);
    font-size: 1.05rem;
    letter-spacing: -0.01em;
  }

  .navigazione__lista {
    display: flex;
    align-items: center;
    gap: clamp(0.4rem, 1.1vw, 1.1rem);
    font-size: var(--t-sm);
  }

  .navigazione__lista a {
    padding: 0.45em 0.7em;
    border-radius: var(--r-full);
    white-space: nowrap;
    transition: color 0.25s ease, background-color 0.25s ease;
  }

  /* le voci di menu hanno un riempimento laterale: il filetto si accorcia per
     restare sotto al testo invece di allargarsi fino al bordo cliccabile */
  .navigazione__lista .collegamento::after {
    inset-inline: 0.7em;
    inset-block-end: 0.28em;
  }

  .navigazione__lista a[aria-current] {
    color: var(--accento);
  }

  .navigazione__cta {
    background: var(--inchiostro);
    color: var(--carta) !important;
    font-weight: 600;
    --riempimento: 0.45em;
  }

  .navigazione__cta::after {
    display: none;
  }

  .navigazione__cta:hover {
    background: var(--accento);
    color: var(--su-accento) !important;
  }

  .tema {
    inline-size: 2.4rem;
    block-size: 2.4rem;
    flex: none;
    letter-spacing: 0.12em;
    border: var(--bordo-fine);
    transition: border-color 0.25s ease;
  }

  .tema:hover {
    border-color: var(--accento);
  }

  .tema__icona {
    font-size: 1.05rem;
  }

  /* selettore di lingua: stessa altezza del pulsante del tema, cosi' i due
     comandi della testata restano allineati. La pastiglia e' piu' larga che
     alta perche' contiene due lettere, non un segno. */
  /* =========== SELETTORE DI LINGUA =========== */
  /* E' un <details>: si apre e si chiude da solo, da mouse e da tastiera, senza
     stato da tenere in JavaScript. Il riferimento per il posizionamento del
     pannello e' questo contenitore. */
  .lingue {
    position: relative;
    flex: none;
  }

  .lingue__scelta {
    display: inline-flex;
    align-items: center;
    gap: 0.45em;
    block-size: 2.4rem;
    padding-inline: 0.6rem;
    line-height: 1;
    letter-spacing: 0.08em;
    border: var(--bordo-fine);
    border-radius: var(--r-full);
    cursor: pointer;
    transition: color 0.25s ease, border-color 0.25s ease;
  }

  /* il triangolino nativo del <details> qui non serve: la bandiera e la sigla
     dicono gia' cosa fa il comando */
  .lingue__scelta {
    list-style: none;
  }

  .lingue__scelta::-webkit-details-marker {
    display: none;
  }

  .lingue__scelta:hover, .lingue[open] .lingue__scelta {
    color: var(--accento);
    border-color: var(--accento);
  }

  /* il filetto stacca la bandiera dallo sfondo quando il bianco che contiene
     ci finisce sopra */
  .lingue__bandiera {
    display: block;
    inline-size: 1.25rem;
    block-size: auto;
    border-radius: 2px;
    box-shadow: 0 0 0 1px var(--tratto);
  }

  .lingue__elenco {
    position: absolute;
    inset-block-start: calc(100% + 0.5rem);
    inset-inline-end: 0;
    z-index: 110;
    min-inline-size: 11rem;
    padding: 0.4rem;
    background: var(--carta);
    border: var(--bordo);
    border-radius: var(--r-lg);
  }

  .lingue__voce {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.55em 0.7em;
    border-radius: var(--r-md);
    font-size: var(--t-sm);
    text-decoration: none;
    white-space: nowrap;
    transition: color 0.25s ease, background-color 0.25s ease;
  }

  .lingue__voce:hover {
    color: var(--accento);
    background: color-mix(in srgb, var(--accento) 12%, transparent);
  }

  /* Sotto i 1200 pixel la barra e' al suo limite: la sigla e' cio' che si puo'
     togliere senza perdere niente, perche' la bandiera dice gia' quale lingua e'
     attiva e il nome per intero resta nell'etichetta letta dai lettori di
     schermo. */
  @media (max-width: 74.99rem) {

    .lingue__sigla {
      display: none;
    }
  }

  /* Fra i 1100 e i 1400 pixel il menu e' disteso e la barra e' piena: le voci si
     stringono di qualche pixel e il nome nel marchio smette di andare a capo.
     Sopra i 1400 lo spazio c'e', e le voci tornano respirate. */
  @media (min-width: 68.75rem) and (max-width: 87.49rem) {

    .marchio__nome {
      white-space: nowrap;
    }

    .navigazione__lista {
      gap: 0.3rem;
    }

    .navigazione__lista a {
      padding-inline: 0.45em;
    }

    .navigazione__lista .collegamento::after {
      inset-inline: 0.45em;
    }
  }

  .menu {
    display: none;
  }

  .menu__tratti, .menu__tratti::before, .menu__tratti::after {
    display: block;
    inline-size: 22px;
    block-size: 2px;
    background: currentColor;
    border-radius: 2px;
    transition: transform 0.35s var(--molla), opacity 0.2s ease;
  }

  .menu__tratti::before, .menu__tratti::after {
    content: "";
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: 0;
  }

  .menu__tratti::before {
    transform: translateY(-7px);
  }

  .menu__tratti::after {
    transform: translateY(7px);
  }

  /* =========== BOTTONI =========== */
  /* Centratura verticale del testo nei pulsanti.

     Il testo e' tutto in maiuscolo, quindi non scende sotto la riga di base; il
     carattere pero' riserva comunque quello spazio (0.286em per i discendenti),
     mentre sopra le maiuscole ne lascia meno (0.250em fino agli ascendenti).
     align-items: center centra la riga, non la scritta, e la scritta finisce un
     pelo alta. A questo si aggiunge che il browser arrotonda al pixel intero le
     misure verticali del carattere, il che in Chrome porta lo scarto a circa
     1,5px su un pulsante da 16px.

     Mezza differenza aggiunta sopra e tolta sotto rimette la scritta al centro
     ottico senza cambiare l'altezza del pulsante: i due ritocchi si compensano.
     Il valore e' in em, quindi segue il corpo del testo.

     La strada pulita sarebbe text-box: trim-both cap alphabetic, che fa fare il
     conto al browser; su un contenitore flex, pero', oggi non ha alcun effetto,
     e questi pulsanti sono flex per tenere insieme testo e freccia. */
  .bottone, .navigazione__lista .navigazione__cta, .progetto__apri {
    --centratura: 0.055em;
    padding-block: calc(var(--riempimento) + var(--centratura)) calc(var(--riempimento) - var(--centratura));
  }

  /* Il valore condiviso lascia la scritta dei pulsanti grandi 0,02em troppo in
     alto: hanno un riempimento e una interlinea propri, e lo scarto da
     recuperare non e' quello delle voci di menu. Misurato sulla banda delle
     maiuscole, cioe' fra la riga di base e l'altezza della M, che e' quello
     che l'occhio legge come centro. */
  .bottone {
    --centratura: 0.075em;
    --riempimento: 0.85em;
    display: inline-flex;
    align-items: center;
    gap: 0.55em;
    padding-inline: 1.6em;
    border-radius: var(--r-full);
    font-weight: 600;
    font-size: var(--t-sm);
    letter-spacing: 0.02em;
    text-decoration: none;
    text-transform: uppercase;
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
  }

  .bottone--pieno {
    background: var(--inchiostro);
    color: var(--carta);
  }

  .bottone--pieno:hover, .bottone--pieno:focus-visible {
    background: var(--accento);
    color: var(--su-accento);
  }

  .bottone--vuoto {
    border: var(--bordo);
    background: transparent;
  }

  .bottone--vuoto:hover {
    background: var(--accento);
    color: var(--su-accento);
    border-color: var(--accento);
  }

  /* La freccia va centrata sull'altezza del pulsante come la scritta accanto.
     Qui non si puo' usare align-self: baseline: in un contenitore flex con
     align-items: center un solo elemento allineato alla riga di base non si
     accorda con gli altri, forma un gruppo per conto suo e quel gruppo viene
     appoggiato al bordo superiore, spingendo la freccia in cima al pulsante.

     align-self: center pero' centra il riquadro della freccia, non il segno che
     ci sta dentro: la freccia sta tutta sopra la riga di base e nel proprio
     riquadro e' quindi alta, cosi' il segno finisce 2,5px sotto al centro
     ottico della scritta. Lo scostamento e' in em del corpo della freccia,
     quindi tiene a ogni misura del testo.

     Lo scostamento sta nel transform e non piu' in inset-block-start, ed e' la
     correzione di un difetto: con position: relative la freccia stava ferma a
     una quota frazionaria (-0,135em, cioe' circa 1,9px) mentre il transform si
     accendeva e si spegneva al passaggio del mouse. Ogni volta che il transform
     spariva, il browser smetteva di disegnare la freccia su un piano suo e la
     riportava alla griglia dei pixel interi: il segno saltava in su di meno di
     un pixel, ed e' il salto che si vedeva uscendo dal pulsante.
     Tenendo lo scostamento dentro al transform, la freccia ha sempre un
     transform: non c'e' piu' un momento in cui il browser cambia idea su come
     disegnarla, e la posizione a schermo resta quella. */
  .bottone__freccia {
    display: inline-block;
    align-self: center;
    font-size: 1.15em;
    line-height: 1;
    transform: translateY(-0.135em);
    transition: transform 0.4s var(--molla);
  }

  .bottone--vuoto:hover .bottone__freccia {
    transform: translate(6px, -0.135em);
  }

  /* =========== EROE =========== */
  .eroe {
    inline-size: var(--colonna);
    margin-inline: auto;
    padding-block: clamp(2.5rem, 6vw, 5rem) var(--sp-5);
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--sp-3);
    align-items: start;
  }

  .eroe__titolo {
    font-size: var(--t-2xl);
    line-height: 1.05;
    letter-spacing: -0.015em;
    max-inline-size: 18ch;
  }

  .eroe__accento {
    color: var(--accento);
    font-style: italic;
  }

  .eroe__azioni, .esito__azioni {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
    margin-block-start: var(--sp-2);
    margin-top: 4ch;
  }

  .eroe__figura {
    inline-size: min(100%, 30rem);
    margin-block-start: var(--sp-2);
    justify-self: center;
  }

  /* =========== NUMERI =========== */
  .numeri {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
    gap: 1px;
    inline-size: min(100%, 58rem);
    margin-block-start: var(--sp-5);
    margin-inline: auto;
    text-align: center;
    background: var(--tratto);
    border-radius: var(--r-md);
    overflow: hidden;
  }

  .numeri li {
    background: var(--carta);
    padding: 1.2rem;
    display: grid;
    gap: 0.2rem;
    justify-items: center;
    transition: background-color 0.3s ease;
  }

  .numeri li:hover {
    background: var(--carta-2);
  }

  .numeri strong {
    font-family: var(--font-display);
    font-size: var(--t-lg);
    line-height: 1;
    color: var(--accento);
  }

  .numeri small {
    line-height: 1.4;
  }

  /* =========== NASTRO SCORREVOLE =========== */
  .nastro {
    border-block: var(--bordo);
    background: var(--accento);
    color: var(--su-accento);
    overflow: hidden;
    padding-block: 0.6rem;
    margin-block: var(--sp-4);
    transform: rotate(-0.8deg) scale(1.03);
  }

  /* Nel markup la frase e' scritta una volta sola: main.js la duplica
     quanto basta a coprire la vista e scrive in --copie quante ne ha fatte.
     Il movimento resta al CSS, che lo affida al compositore. */
  .nastro__pista {
    display: flex;
    inline-size: max-content;
    font-family: var(--font-display);
    font-size: clamp(1rem, 2.4vw, 1.7rem);
    font-style: italic;
    white-space: nowrap;
    will-change: transform;
  }

  /* L'animazione si accende solo con JavaScript attivo: senza, --copie non
     esiste e la striscia scorrerebbe via lasciando un vuoto. Ferma resta
     leggibile, ed e' decorativa. */
  .js .nastro__pista {
    animation: scorri 32s linear infinite;
  }

  /* Il criterio WCAG 2.2.2 chiede che un movimento automatico piu' lungo di
     cinque secondi si possa fermare. Qui si ferma da se': col mouse sopra la
     striscia, e appena qualcuno comincia a spostarsi da tastiera.

     La seconda condizione non e' scritta come :focus-within perche' dentro al
     nastro non c'e' niente su cui si possa arrivare: e' decorativo e sta in un
     contenitore aria-hidden, e rendere focalizzabile un elemento li' dentro
     sarebbe un errore piu' grosso di quello che risolve. Si guarda quindi al
     documento: se da qualche parte c'e' un focus visibile vuol dire che si sta
     navigando da tastiera, ed e' quello il momento in cui il movimento da'
     fastidio. animation-play-state mette in pausa dove si trova, cosi' alla
     ripresa la striscia non salta. */
  .nastro:hover .nastro__pista,
  body:has(:focus-visible) .nastro__pista {
    animation-play-state: paused;
  }

  /* Lo spazio sta nel riempimento di ogni voce e non in un gap: il gap ne
     mette uno in meno del numero di voci, così la pista non è un multiplo
     esatto della singola copia e alla giunzione si apre un salto. */
  .nastro__pista span {
    padding-inline-end: 2.2rem;
  }

  /* =========== CARTE (soluzioni) =========== */
  .carte {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
    gap: var(--sp-2);
  }

  .carta {
    padding: var(--sp-3);
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    position: relative;
    overflow: hidden;
    transition: transform 0.45s var(--molla), border-color 0.3s ease, background-color 0.3s ease;
  }

  .carta:hover {
    transform: translateY(-6px) rotate(-0.6deg);
  }

  .carta:nth-child(2):hover {
    transform: translateY(-6px) rotate(0.7deg);
  }

  .carta__figura {
    inline-size: 100%;
    block-size: auto;
    aspect-ratio: 4 / 3;
    object-fit: contain;
    object-position: center bottom;
    margin-block-end: 0.4rem;
    transition: transform 0.5s var(--molla);
  }

  .carta:hover .carta__figura {
    transform: translateY(-4px) scale(1.03);
  }

  .carta__titolo {
    font-size: var(--t-lg);
  }

  /* L'unico elemento cliccabile della carta: un pulsante come gli altri del
     sito, per cui qui restano solo posizione e allineamento. Si stacca dal
     bordo inferiore con margin-block-start: auto, cosi' i pulsanti delle tre
     carte finiscono alla stessa altezza anche con testi di lunghezza diversa.
     L'aria-label nel markup distingue i tre "Come funziona", che altrimenti
     sarebbero identici nell'elenco dei collegamenti. */
  .carta__invito {
    margin-block-start: auto;
    align-self: flex-start;
    /* Piu' piccolo dei pulsanti principali: qui non e' l'azione della pagina
       ma l'approfondimento di una scheda fra tre. Resta comunque sopra i 44px
       di altezza chiesti dal criterio WCAG 2.5.5 per i bersagli tattili. */
    --riempimento: 0.6em;
    font-size: calc(var(--t-sm) * 0.88);
    padding-inline: 1.2em;
  }

  /* Il percorso e' una sequenza di passi dentro una sezione gia' titolata:
     i sottotitoli restano leggibili ma non competono con il titolo. */
  .percorso__passo {
    font-size: var(--t-md);
    margin-block: var(--sp-2) 0.5rem;
    color: var(--inchiostro-2);
  }

  .percorso .testo + .testo {
    margin-block-start: 0.8rem;
  }

  /* =========== BLOG =========== */
  /* Le schede degli articoli: una per riga su telefono, due su tavoletta, tre
     su scrivania. Il numero di colonne e' fisso e non auto-fit come nelle altre
     carte del sito, perche' qui e' una scelta di lettura e non il risultato
     della larghezza minima di una scheda. I punti di rottura stanno in fondo,
     con tutti gli altri. */
  .carte--articoli {
    grid-template-columns: minmax(0, 1fr);
  }

  /* La copertina arriva ai bordi della scheda: la carta ha un riempimento, e i
     margini negativi lo annullano. Gli angoli li taglia l'overflow: hidden
     della carta, quindi l'immagine segue il suo arrotondamento.
     La copertina c'e' sempre: agli articoli che non ne hanno una propria il
     modello della scheda passa quella generica, perche' senza immagine le
     schede accanto spingerebbero in basso data, titolo e testo, e nella stessa
     riga niente sarebbe piu' allineato. */
  .carta__copertina {
    inline-size: calc(100% + var(--sp-3) * 2);
    max-inline-size: none;
    margin: calc(var(--sp-3) * -1) calc(var(--sp-3) * -1) 0.4rem;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-block-end: var(--bordo-fine);
  }

  /* Titolo e testo delle schede hanno un'altezza fissa, contata in righe: due
     per il titolo, tre per il riassunto. Senza, una descrizione lunga il doppio
     di un'altra allunga la scheda e con essa tutta la riga, e le schede della
     seconda riga finiscono di un'altezza diversa da quelle della prima. Quello
     che avanza resta nascosto, ed e' comunque leggibile nell'articolo.
     L'altezza e' scritta in unita' lh, cioe' in righe di questo stesso testo:
     segue da sola i corpi variabili di --t-md e --t-testo. */
  .carta--articolo .carta__titolo,
  .carta--articolo .testo {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  /* Un corpo intermedio: piu' piccolo del titolo delle carte della home, che
     apre una sezione, ma sempre sopra il testo che lo segue. */
  .carta--articolo .carta__titolo {
    font-size: var(--t-md);
    -webkit-line-clamp: 2;
    block-size: 2lh;
  }

  .carta--articolo .testo {
    -webkit-line-clamp: 3;
    block-size: 3lh;
  }

  /* Tag e pulsante stanno in coda e si staccano dal fondo: cosi' finiscono alla
     stessa altezza in tutte le schede della riga, qualunque sia la lunghezza
     del titolo o del testo che li precede. */
  .carta__coda {
    margin-block-start: auto;
    display: grid;
    gap: 0.7rem;
    justify-items: start;
  }

  /* Un filo fra i tag e il pulsante: lo porta l'elenco dei tag, allargato a
     tutta la scheda, cosi' quando un articolo non ha tag non resta un filo
     sopra il nulla. */
  .carta__coda .tag {
    justify-self: stretch;
    padding-block-end: 0.8rem;
    border-block-end: var(--bordo-fine);
  }

  /* Il pulsante degli articoli prende i colori di .progetto__apri, il comando
     delle schede dei lavori: pieno d'accento a riposo, inchiostro al passaggio
     del mouse. Il bordo segue lo sfondo, cosi' la pastiglia si legge piena come
     quella dei progetti, che di bordo non ne ha.
     Il selettore nomina .carta--articolo e non il solo .carta__invito: la stessa
     classe la portano i pulsanti "Come funziona" delle schede della home, che
     devono restare come sono. */
  .carta--articolo .carta__invito {
    background: var(--accento);
    border-color: var(--accento);
    color: var(--su-accento);
  }

  .carta--articolo .carta__invito:hover,
  .carta--articolo .carta__invito:focus-visible {
    background-color: var(--inchiostro);
    border-color: var(--inchiostro);
    color: var(--carta);
  }

  .tag {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
  }

  .tag--articolo {
    margin-block-start: var(--sp-3);
  }

  .tag__voce {
    display: inline-block;
    padding: 0.25em 0.7em;
    border: var(--bordo-fine);
    border-radius: var(--r-full);
    font-size: var(--t-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    text-decoration: none;
    transition: color 0.25s ease, border-color 0.25s ease;
  }

  .tag__voce:hover, .tag__voce:focus-visible {
    color: var(--accento);
    border-color: var(--accento);
  }

  .impaginazione {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2);
    margin-block-start: var(--sp-4);
  }

  .impaginazione__stato {
    font-size: var(--t-sm);
    color: var(--inchiostro-2);
  }

  /* Il pulsante che non porta da nessuna parte resta al suo posto spento: se
     comparisse e scomparisse, gli altri si sposterebbero sotto il dito a ogni
     cambio di pagina. */
  .bottone.is-spento {
    opacity: 0.45;
    cursor: default;
    pointer-events: none;
  }

  /* =========== COMPETENZE =========== */
  .elenco-competenze {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    overflow: hidden;
    counter-reset: comp;
  }

  .competenza {
    background: var(--carta);
    padding: clamp(1.4rem, 3vw, 2.4rem);
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-content: start;
    gap: 0.7rem;
    position: relative;
    border-block-start: var(--bordo-fine);
    transition: background-color 0.4s ease;
  }

  .competenza:first-child {
    border-block-start: 0;
  }

  .competenza::after {
    counter-increment: comp;
    content: counter(comp, decimal-leading-zero);
    position: absolute;
    inset-block-start: 1rem;
    inset-inline-end: 1.4rem;
    font-family: var(--font-display);
    font-size: 3.4rem;
    line-height: 1;
    color: var(--inchiostro-2);
    transition: color 0.4s ease;
  }

  .competenza:hover {
    background: var(--carta-2);
  }

  .competenza:hover::after {
    color: var(--accento);
  }

  /* Icona e titolo affiancati sulla prima riga, il testo scorre sotto
     occupando entrambe le colonne.

     Il fiorellino passa dalla maschera come l'icona del pie': cosi' il colore
     lo decide il foglio di stile e non il file, e segue l'accento nei due
     temi. Resta fermo al passaggio del mouse; a segnalare la scheda attiva e'
     il numero grande in alto a destra, e due segnali per la stessa cosa si
     darebbero fastidio. */
  .competenza__icona {
    inline-size: 1.9rem;
    block-size: 1.9rem;
    align-self: center;
    background: var(--accento);
    -webkit-mask: url("../images/fiore.svg") center / contain no-repeat;
    mask: url("../images/fiore.svg") center / contain no-repeat;
  }

  /* Il contatore in alto a destra occupa 67,6px dal bordo della carta: il
     titolo si ferma prima, altrimenti quando va a capo ci finisce sopra. */
  .competenza__titolo {
    align-self: center;
    padding-inline-end: 3rem;
  }

  .competenza .testo {
    grid-column: 1 / -1;
  }

  /* =========== PASSI =========== */
  .passi {
    display: grid;
    gap: var(--sp-3);
    counter-reset: passo;
    position: relative;
  }

  .passo {
    display: grid;
    align-content: start;
    gap: 0.6rem;
    position: relative;
    z-index: 1;
    padding-block-start: 0.3rem;
  }

  .passo__numero {
    inline-size: 3.2rem;
    block-size: 3.2rem;
    display: grid;
    place-items: center;
    border: var(--bordo);
    border-radius: 50%;
    background: var(--carta);
    font-family: var(--font-display);
    font-size: 1.3rem;
    transition: background-color 0.4s ease, color 0.4s ease;
  }

  .passo:hover .passo__numero {
    background: var(--accento);
    color: var(--su-accento);
  }

  /* =========== CHI SONO =========== */
  .ritratto {
    display: grid;
    gap: var(--sp-4);
    align-items: center;
  }

  .ritratto .sezione__testata {
    grid-column: 1 / -1;
  }

  .ritratto__figura {
    position: relative;
    border-radius: var(--r-lg);
    background: var(--carta-2);
  }

  .ritratto__testo {
    display: grid;
    gap: 0.9rem;
    align-content: start;
  }

  .valori {
    display: grid;
    gap: 0.5rem;
    margin-block-start: 0.6rem;
  }

  .valori li {
    display: flex;
    gap: 0.7em;
    align-items: baseline;
  }

  .valori li::before {
    /* Il selettore di variazione \FE0E chiede la resa testuale: senza, iOS
       pesca il carattere da Apple Color Emoji e lo disegna come emoji, dentro
       il suo quadratino verde. */
    content: "\2733\FE0E";
    color: var(--accento);
    font-size: 0.9em;
  }

  /* =========== PROGETTI =========== */
  /* Su schermo stretto i comandi stanno sotto le carte: ai lati non ci sarebbe
     spazio senza strizzarle. Dal formato tavoletta in su passano in due corsie
     laterali riservate, sempre fuori dalle carte. */
  .progetti {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    row-gap: var(--sp-2);
  }

  .progetti .sezione__testata {
    grid-row: 1;
    grid-column: 1 / -1;
    margin-block-end: calc(var(--sp-4) - var(--sp-2));
  }

  .vetrina {
    grid-row: 2;
    grid-column: 1 / -1;
  }

  .vetrina__scorri {
    grid-row: 3;
    grid-column: 1 / -1;
  }

  .vetrina__scorri--prec {
    justify-self: start;
  }

  .vetrina__scorri--succ {
    justify-self: end;
  }

  .vetrina {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 100%;
    gap: var(--sp-2);
    align-items: stretch;
  }

  /* Lo scorrimento orizzontale si accende da due lavori in su: con uno solo
     la carta resta ferma. La barra di sistema resta nascosta, al suo posto
     ci sono i due comandi. */
  .vetrina:has(li:nth-child(2)) {
    overflow-x: auto;
    scroll-snap-type: x proximity;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
  }

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

  .vetrina__scorri {
    align-self: center;
    inline-size: 2.8rem;
    block-size: 2.8rem;
    font-size: 1.2rem;
    background: var(--carta);
    border: var(--bordo);
    transition: background-color 0.3s ease, color 0.3s ease;
  }

  .vetrina__scorri:hover {
    background-color: var(--inchiostro);
    color: var(--carta);
  }

  /* Lo spazio che avanza sta in fondo, in una riga vuota: copertina, titolo e
     testo restano impilati in alto qualunque sia la loro lunghezza, e le carte
     affiancate risultano comunque alte uguali. Il comando di apertura, quando
     c'è, cade in quella riga e si ancora al fondo; quando manca, la riga resta
     vuota e il testo non scivola in basso. */
  .progetto {
    display: grid;
    grid-template-rows: auto auto auto minmax(0, 1fr);
    min-block-size: 24rem;
    padding: 0;
    overflow: hidden;
    scroll-snap-align: start;
  }

  /* La copertina arriva ai bordi e chiude con la linea di separazione. La sua
     altezza dipende solo dalla larghezza della carta, mai dal testo sotto. */
  .progetto__figura {
    border-radius: 0;
    border: 0;
    border-block-end: var(--bordo-fine);
    aspect-ratio: 16 / 9;
    overflow: hidden;
  }

  .progetto__figura img {
    block-size: 100%;
    object-fit: cover;
  }

  /* La carta d'invito non ha una copertina: al suo posto un segno più, nello
     stesso riquadro delle altre, così la fila resta allineata. */
  .progetto__figura--vuota {
    display: grid;
    place-items: center;
    background: var(--carta);
  }

  .progetto__figura--vuota span {
    font-family: var(--font-display);
    font-size: 3.4rem;
    line-height: 1;
    color: var(--inchiostro-2);
  }

  .progetto__titolo {
    font-size: var(--t-md);
    padding: var(--sp-2) var(--sp-2) 0;
  }

  /* Il riempimento e' della descrizione, non di ogni paragrafo della scheda:
     anche la copertina e' un <p>, e con il selettore generico si prendeva
     mezzo rem di spazio in cima, scoprendo una striscia di sfondo sotto
     l'immagine. */
  .progetto > .testo {
    padding: 0.5rem var(--sp-2) 0;
  }

  /* comando della carta: angolo in basso a destra, testo più freccia */
  .progetto__apri {
    justify-self: end;
    align-self: end;
    margin: var(--sp-2);
    display: inline-flex;
    align-items: center;
    gap: 0.45em;

    /* Qui la scritta cade dalla parte opposta rispetto ai pulsanti grandi: la
       riga e' fitta come il testo (line-height: 1) e il valore condiviso la
       spinge troppo in basso. Un unico valore in em non puo' essere esatto a
       tutte le misure, perche' il browser arrotonda al pixel intero le
       metriche verticali del carattere e lo scarto non resta proporzionale:
       0,027em azzera lo scarto su scrivania ma lo porta a 0,45px su telefono.
       Questo lo tiene sotto i 0,25px in tutte e due. */
    --centratura: 0.044em;
    --riempimento: 0.65em;
    padding-inline: 1.1em;
    border-radius: var(--r-full);
    background: var(--accento);
    color: var(--su-accento);
    font-size: var(--t-xs);
    font-weight: 600;
    letter-spacing: 0.02em;
    line-height: 1;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color 0.3s ease, color 0.3s ease;
  }

  .progetto__apri:hover {
    background-color: var(--inchiostro);
    color: var(--carta);
  }

  /* Il comando della carta d'invito è una chiamata all'azione, non l'apertura
     di un sito: prende i colori del pulsante pieno, inchiostro che vira
     sull'accento. */
  .progetto__apri--invito {
    background: var(--inchiostro);
    color: var(--carta);
  }

  .progetto__apri--invito:hover {
    background-color: var(--accento);
    color: var(--su-accento);
  }

  /* La freccia dritta e quella obliqua non stanno alla stessa quota nel font:
     la obliqua di "Visita" e' gia' allineata alla scritta, questa le sta 1px
     sotto. Lo scostamento riguarda quindi il singolo segno, non la regola. */
  .progetto__apri--invito span {
    position: relative;
    inset-block-start: -0.073em;
  }

  /* =========== FAQ =========== */
  .faq {
    display: grid;
    gap: 0.6rem;
    inline-size: min(100%, 56rem);
    margin-inline: auto;
  }

  .faq details {
    border-radius: var(--r-md);
    overflow: hidden;
    transition: border-color 0.3s ease, background-color 0.3s ease;
  }

  .faq details[open] {
    border-color: var(--accento);
    background: var(--carta);
  }

  .faq summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-2);
    padding: 1.1rem 1.4rem;
    cursor: pointer;
    font-family: var(--font-display);
    font-size: calc(var(--t-md) * 0.9);
    font-weight: bold;
    line-height: 1.2;
    list-style: none;
  }

  .faq summary::after {
    content: "+";
    flex: none;
    font-size: 1.6em;
    line-height: 0.8;
    color: var(--accento);
    transition: transform 0.4s var(--molla);
  }

  .faq details[open] summary::after {
    transform: rotate(135deg);
  }

  .faq details p {
    padding: 0 1.4rem 1.4rem;
  }

  /* Il rimando alla pagina completa, sotto le domande della home, e il richiamo
     al modulo in fondo alla pagina delle domande: stesso pulsante, centrato. */
  .faq__oltre {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--sp-2);
    margin-block-start: var(--sp-4);
  }

  /* Nella pagina delle domande non c'e' nulla da aprire: domanda e risposta
     stanno gia' scritte una sotto l'altra. Il numero lo mette il contatore
     della lista, cosi' non passa dal dizionario delle lingue e non va
     rinumerato a mano quando una domanda si aggiunge o si toglie. */
  .domande {
    counter-reset: domanda;
    display: grid;
    gap: var(--sp-4);
    inline-size: min(100%, 56rem);
    margin-inline: auto;
  }

  .domanda {
    counter-increment: domanda;
  }

  .domanda__titolo {
    /* un gradino sotto --t-md, come le domande della home: restano il testo
       piu' grande della pagina senza pesare come un titolo di sezione */
    font-size: calc(var(--t-md) * 0.9);
    line-height: 1.2;
    margin-block-end: 0.6rem;
  }

  .domanda__titolo::before {
    content: counter(domanda, decimal-leading-zero) ".";
    margin-inline-end: 0.5ch;
    color: var(--accento);
  }

  /* =========== CONTATTI =========== */
  .contatti {
    display: grid;
    gap: var(--sp-4);
    align-items: start;
  }

  .contatti .sezione__testata {
    margin-block-end: 0;
  }

  .spalla {
    display: grid;
    gap: var(--sp-3);
    align-content: start;
    max-inline-size: 46ch;
  }

  /* =========== MODULO =========== */
  /* Esca antispam: un campo che nessuno vede e su cui non si può arrivare
     con il tabulatore. Se torna compilato l'ha riempito un automa, e invio.php
     scarta la richiesta senza dire niente. Spostata in alto e non di lato per
     non rischiare di allargare la pagina. */
  .esca {
    position: absolute;
    inset-block-start: -9999px;
    inline-size: 1px;
    block-size: 1px;
    overflow: hidden;
  }

  .modulo {
    display: grid;
    gap: var(--sp-2);
    inline-size: min(100%, 52rem);
  }

  .modulo__gruppo {
    border: 0;
    padding: 0;
    display: grid;
    gap: 0.7rem;
  }

  .campo {
    display: grid;
    gap: 0.35rem;
  }

  .campo label {
    font-weight: 600;
  }

  .campo :is(input, select, textarea) {
    inline-size: 100%;
    padding: 0.8em 1em;
    background: var(--carta);
    border: var(--bordo-fine);
    border-radius: var(--r-sm);
    font-size: var(--t-sm);
    transition: border-color 0.25s ease, box-shadow 0.25s ease;
  }

  .campo textarea {
    resize: none;
    min-block-size: 8rem;
  }

  .campo :is(input, textarea)::placeholder {
    color: color-mix(in srgb, var(--inchiostro-2) 65%, transparent);
  }

  /* la prima voce della tendina fa da segnaposto: finché è quella scelta,
     il controllo si legge come un campo ancora da compilare */
  .campo select:has(option[value=""]:checked) {
    color: color-mix(in srgb, var(--inchiostro-2) 65%, transparent);
  }

  .campo select option {
    color: var(--inchiostro);
  }

  .campo :is(input, select, textarea):hover {
    border-color: var(--inchiostro-2);
  }

  .campo :is(input, select, textarea):focus-visible {
    outline: none;
    border-color: var(--accento);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accento) 28%, transparent);
  }

  .campo:has([aria-invalid="true"]) :is(input, textarea, select) {
    border-color: var(--accento);
  }

  .campo--scelta {
    grid-template-columns: auto 1fr;
    align-items: start;
    gap: 0.7rem;
  }

  .campo--scelta input {
    inline-size: 1.5rem;
    block-size: 1.5rem;
    margin-block-start: 0.15rem;
    accent-color: var(--accento);
  }

  .campo--scelta label {
    font-weight: 400;
  }

  .campo--scelta .errore {
    grid-column: 1 / -1;
  }

  .errore {
    font-size: var(--t-xs);
    font-weight: 600;
    color: var(--accento);
  }

  .errore:empty {
    display: none;
  }

  .modulo__stato {
    font-weight: 600;
    font-size: var(--t-sm);
  }

  .modulo__stato:not(:empty) {
    padding: 0.8em 1.1em;
    border-radius: var(--r-sm);
    border: var(--bordo-fine);
    background: var(--carta);
  }

  .modulo__stato[data-esito="ko"] {
    border-color: var(--accento);
    color: var(--accento);
  }

  .modulo__azioni {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-2);
    margin-block-start: var(--sp-2);
  }

  /* =========== ESITO INVIO (grazie / errore) =========== */
  .esito {
    min-block-size: 62vh;
    display: grid;
    grid-template-columns: minmax(0, 1fr) min(100%, 34rem) minmax(0, 1fr);
    align-content: center;
  }

  .esito > * {
    grid-column: 2;
  }

  /* L'etichetta resta ancorata al margine sinistro come in tutte le altre
     sezioni: è il segnaposto della pagina, non parte del messaggio. */
  .esito .etichetta {
    grid-column: 1 / -1;
    justify-self: start;
  }

  /* =========== DOCUMENTI (privacy / accessibilità) =========== */
  .documento__corpo {
    display: grid;
    gap: var(--sp-2);
  }

  .documento__corpo h2 {
    margin-block-start: var(--sp-3);
  }

  .documento__corpo h3 {
    margin-block-start: var(--sp-2);
  }

  .documento__elenco {
    display: grid;
    gap: 0.5rem;
    margin-block-start: 0.2rem;
  }

  .documento__elenco li {
    display: flex;
    gap: 0.7em;
    align-items: baseline;
  }

  .documento__elenco li::before {
    content: "\2014";
    flex: none;
    color: var(--accento);
  }

  /* Gli elenchi scritti in Markdown non hanno una classe, e il reset del sito
     toglie i segni a tutti gli elenchi: restavano senza. Qui tornano, con lo
     stesso trattino delle liste dei documenti, cosi' il blog non introduce un
     secondo modo di fare la stessa cosa. */
  /* :not(.tag) tiene fuori l'elenco dei tag in fondo all'articolo: e' una lista
     anche lui e dentro il corpo, ma ha una forma sua e con queste regole si
     ritrovava un trattino davanti a ogni pastiglia. */
  .documento__corpo :is(ul, ol):not(.tag) {
    display: grid;
    gap: 0.5rem;
    margin-block: 0.2rem 0;
  }

  .documento__corpo :is(ul, ol):not(.tag) > li {
    display: flex;
    gap: 0.7em;
    align-items: baseline;
  }

  .documento__corpo ul:not(.tag) > li::before {
    content: "\2014";
    flex: none;
    color: var(--accento);
  }

  /* I numerati contano da soli: list-style e' spento dal reset, quindi il
     numero lo mette un contatore. */
  .documento__corpo ol:not(.tag) {
    counter-reset: voce;
  }

  .documento__corpo ol:not(.tag) > li {
    counter-increment: voce;
  }

  .documento__corpo ol:not(.tag) > li::before {
    content: counter(voce) ".";
    flex: none;
    color: var(--accento);
    font-weight: 600;
  }

  /* La citazione: un filetto in accento a sinistra e il testo in corsivo. Senza
     regola usciva indistinguibile da un paragrafo, e una citazione che non si
     vede non e' una citazione. */
  .documento__corpo blockquote {
    margin: 0;
    padding-inline-start: var(--sp-2);
    border-inline-start: 2px solid var(--accento);
    color: var(--inchiostro-2);
    font-style: italic;
  }

  .documento__corpo blockquote p + p {
    margin-block-start: 0.6rem;
  }

  .documento__aggiornamento {
    margin-block-start: var(--sp-3);
    padding-block-start: var(--sp-2);
    border-block-start: var(--bordo-fine);
  }

  /* =========== PIÈ DI PAGINA =========== */
  .pieDiPagina {
    margin-block-start: var(--sp-6);
    padding: var(--sp-5) var(--margine) var(--sp-3);
    background: var(--inchiostro);
    color: var(--carta);
    display: grid;
    gap: var(--sp-3);
    align-items: start;
    position: relative;
    border-start-start-radius: var(--r-lg);
    border-start-end-radius: var(--r-lg);
  }

  .pieDiPagina__firma {
    display: grid;
    grid-template-columns: 3.4rem 1fr;
    gap: 0.2rem 0.8rem;
    align-items: center;
  }

  .pieDiPagina__firma img {
    inline-size: 3.4rem;
    block-size: auto;
    filter: invert(calc(1 - var(--inv-n)));
  }

  .pieDiPagina__firma strong {
    font-family: var(--font-display);
    font-size: var(--t-md);
  }

  .pieDiPagina__ruolo {
    grid-column: 1 / -1;
    margin-block-start: 0.6rem;
    font-size: var(--t-sm);
    line-height: 1.55;
  }

  .pieDiPagina nav ul, .pieDiPagina__servizio {
    display: grid;
    gap: 0.2rem;
    font-size: var(--t-sm);
  }

  .pieDiPagina :is(nav ul, .pieDiPagina__servizio) a {
    display: inline-block;
    padding-block: 0.3rem;
  }

  /* DORMIENTE: il <li> di Instagram e' commentato in tutte le pagine, non
     cancellato. Queste due regole restano pronte per riattivarlo togliendo il
     commento, senza doverle riscrivere. Non sono codice morto da ripulire.

     L'icona e' una maschera, non un'immagine: cosi' il colore lo
     decide il CSS e non il file, e puo' cambiare al passaggio del mouse.
     var(--carta) e' il colore del testo del pie' di pagina, cioe' l'opposto del
     suo sfondo: resta leggibile sia col tema chiaro sia con quello scuro. */
  /* L'icona sta in una colonna sua, non in fondo all'elenco dei servizi: li'
     ogni voce aggiunta la spingeva piu' in basso, e con l'arrivo di "Blog" si
     e' visto. Qui parte dall'alto come le altre colonne del pie'.
     Il piccolo scostamento in cima non e' un capriccio: le voci degli elenchi
     accanto hanno 0,3rem di riempimento sopra, e senza questo l'icona resterebbe
     alta rispetto alla prima riga di testo che le sta a fianco. */
  .pieDiPagina__seguimi {
    padding-block-start: 0.3rem;
  }

  .pieDiPagina__social {
    display: block;

    /* 24px sulla scrivania, che scendono a 20 sugli schermi stretti: la stessa
       curva delle altre misure del foglio, cosi' l'icona non resta un blocco
       fisso in mezzo a un testo che si rimpicciolisce. */
    inline-size: clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);
    block-size: clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);
    padding: 0;
    background: var(--carta);

    /* Il nome del collegamento e' testo nascosto dentro l'elemento, e senza
       questa riga eredita il colore del pie', che qui e' lo stesso di questo
       sfondo: gli strumenti di verifica leggono un contrasto di 1,00 e lo
       segnalano. Il testo resta invisibile perche' lo ritaglia .sr-only, ma
       ora il suo colore e' quello giusto rispetto a cio' che gli sta sotto. */
    color: var(--inchiostro);
    -webkit-mask: url("../images/ig.svg") center / contain no-repeat;
    mask: url("../images/ig.svg") center / contain no-repeat;
    transition: background-color 0.25s ease;
  }

  .pieDiPagina__social:hover {
    background: var(--accento-inverso);
  }

  .pieDiPagina__copyright {
    border-block-start: 1px solid color-mix(in srgb, var(--carta) 40%, transparent);
    padding-block-start: var(--sp-2);
  }

  /* =========== TORNA SU =========== */
  .risali {
    position: fixed;
    inset-block-end: clamp(1rem, 3vw, 2rem);
    inset-inline-end: clamp(1rem, 3vw, 2rem);
    z-index: 90;
    inline-size: 3.2rem;
    block-size: 3.2rem;
    background: var(--accento);
    color: var(--su-accento);
    font-size: 1.35rem;
    border: var(--bordo);

    /* Il pulsante e' fisso e a fine pagina finisce sopra al pie', che ha lo
       sfondo rovesciato rispetto alla pagina: li' il riempimento in accento
       si confonde col fondo (2,3:1 in chiaro, 2,0:1 in scuro). Il bordo prende
       il colore della pagina, che del pie' e' l'opposto: sopra al contenuto e'
       invisibile perche' identico allo sfondo, sopra al pie' disegna l'anello
       che stacca il pulsante. */
    border-color: var(--carta);
    transition: transform 0.4s var(--molla), opacity 0.3s ease;
  }

  .risali[hidden] {
    display: none;
  }

  /* =========== CONSENSO ALLE STATISTICHE =========== */
  /* Il banner del consenso: una scheda fissa in basso, sopra il pulsante per
     risalire, che non copre la pagina e non blocca niente. Non e' modale di
     proposito: chi non risponde continua a leggere, e il tag di Google resta
     spento. Il markup sta nelle pagine, subito dopo il collegamento "salta al
     contenuto", cosi' da tastiera lo si incontra per primo; lo mostra
     js/consenso.js quando non c'e' ancora una scelta. */
  .consenso {
    position: fixed;
    inset-block-end: clamp(1rem, 3vw, 2rem);
    /* Centrato e largo quasi quanto lo schermo: lo stesso margine da
       entrambi i lati, e quel margine e' lo spazio che a destra serve al
       pulsante per risalire, che sta nello stesso angolo: il suo margine, la
       sua larghezza (3.2rem) e un altro margine di distanza. Cosi' i due non
       si coprono a nessuna larghezza, e il banner resta in mezzo. */
    inset-inline: calc(clamp(1rem, 3vw, 2rem) * 2 + 3.2rem);
    z-index: 95;
    padding: var(--sp-3);
    display: grid;
    gap: 0.8rem;
    background: var(--carta);
    color: var(--inchiostro);
    border: var(--bordo);
    border-radius: var(--r-md);
  }

  .consenso[hidden] {
    display: none;
  }

  .consenso__titolo {
    font-size: var(--t-md);
  }

  .consenso__scelte {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-block-start: 0.2rem;
  }

  /* Pulsanti piu' piccoli di quelli principali del sito, come i "Come
     funziona" delle schede: sono una risposta, non l'azione della pagina.
     Restano sopra i 44px di altezza chiesti per i bersagli tattili. */
  .consenso__scelte .bottone {
    --riempimento: 0.6em;
    font-size: calc(var(--t-sm) * 0.88);
    padding-inline: 1.2em;
  }

  /* "Accetta" e' il pulsante principale: pieno d'accento a riposo, come il
     comando delle schede dei progetti, inchiostro al passaggio del mouse.
     "Rifiuta" resta il pulsante vuoto accanto, della stessa misura. */
  .consenso__accetta {
    background: var(--accento);
    border-color: var(--accento);
    color: var(--su-accento);
  }

  .consenso__accetta:hover, .consenso__accetta:focus-visible {
    background-color: var(--inchiostro);
    border-color: var(--inchiostro);
    color: var(--carta);
  }

  /* Il comando nel pie' di pagina e' un pulsante vestito da collegamento:
     fa una cosa nella pagina, non porta altrove, quindi e' un <button>. */
  .consenso__gestisci {
    display: inline-block;
    padding: 0.3rem 0;
    border: 0;
    background: none;
    font: inherit;
    color: inherit;
    cursor: pointer;
  }

  .consenso__gestisci[hidden] {
    display: none;
  }

  /* Su schermi stretti lo spazio riservato al pulsante per risalire lascerebbe
     al banner una colonna alta e magra: qui il banner prende tutta la
     larghezza e, finche' e' aperto, il pulsante per risalire sta nascosto.
     Dura il tempo di una risposta. */
  @media (max-width: 39.99rem) {
    .consenso {
      inset-inline: clamp(1rem, 3vw, 2rem);
    }

    body:has(.consenso:not([hidden])) .risali {
      display: none;
    }
  }

  .risali:active {
    transform: translateY(0);
  }

  /* =========== PUNTI DI ROTTURA =========== */
  @media (min-width: 40rem) {

    .modulo__gruppo {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      column-gap: 0.7rem;
    }

    .campo {
      grid-column: 1 / -1;
    }

    .campo--meta {
      grid-column: auto;
    }
  }

  @media (min-width: 46rem) {

    .carte {
      grid-auto-rows: 1fr;
    }

    /* tavoletta: due articoli per riga */
    .carte--articoli {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    /* tablet: due lavori per schermata, comandi ai lati */
    .vetrina {
      grid-auto-columns: calc((100% - var(--sp-2)) / 2);
    }

    .progetti {
      grid-template-columns: 2.8rem minmax(0, 1fr) 2.8rem;
      column-gap: var(--sp-2);
    }

    .vetrina {
      grid-column: 2;
    }

    .vetrina__scorri {
      grid-row: 2;
    }

    .vetrina__scorri--prec {
      grid-column: 1;
    }

    .vetrina__scorri--succ {
      grid-column: 3;
    }

    .elenco-competenze {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      grid-auto-rows: 1fr;
    }

    .competenza:nth-child(2) {
      border-block-start: 0;
    }

    .competenza:nth-child(even) {
      border-inline-start: var(--bordo-fine);
    }
  }

  @media (min-width: 52rem) {

    .passi {
      grid-template-columns: repeat(4, 1fr);
      gap: var(--sp-2);
    }

    .passi::before {
      content: "";
      position: absolute;
      inset-block-start: 1.6rem;
      inset-inline: 8%;
      block-size: 2px;
      background: var(--tratteggio);
      z-index: 0;
    }

    /* Quattro colonne: firma, navigazione, servizi e l'icona. L'ultima e' auto
       perche' deve essere larga quanto l'icona e non un quarto del pie'. */
    .pieDiPagina {
      grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr) auto;
      column-gap: var(--sp-4);
    }

    .pieDiPagina__copyright {
      grid-column: 1 / -1;
    }
  }

  @media (min-width: 56rem) {

    .ritratto {
      grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
      column-gap: var(--sp-5);
      row-gap: var(--sp-2);
    }

  }

  @media (min-width: 62rem) {

    .eroe {
      grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
      column-gap: clamp(2rem, 4vw, 3.5rem);
      align-items: center;
    }

    .eroe__titolo {
      grid-area: 1 / 1;
    }

    .eroe__azioni {
      grid-area: 3 / 1;
    }

    .eroe__figura {
      grid-area: 1 / 2 / 4 / 3;
      margin-block-start: 0;
      inline-size: 100%;
    }

    .numeri {
      grid-column: 1 / -1;
    }

    /* scrivania: quattro lavori per schermata */
    .vetrina {
      grid-auto-columns: calc((100% - var(--sp-2) * 3) / 4);
    }

    /* e tre articoli per riga */
    .carte--articoli {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .contatti {
      grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
      grid-template-rows: auto 1fr;
      column-gap: var(--sp-5);
    }

    .contatti .sezione__testata {
      grid-area: 1 / 1;
    }

    .spalla {
      grid-area: 2 / 1;
    }

    .contatti .modulo {
      grid-area: 1 / 2 / 3 / 3;
    }
  }

  /* Sotto i 52rem i due elenchi di collegamenti del piè restano affiancati
     invece di impilarsi: le voci sono corte e in colonna unica il piè si
     allungava senza motivo. Firma e copyright continuano a prendere tutta
     la larghezza. */
  @media (max-width: 51.99rem) {
    .pieDiPagina {
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }

    .pieDiPagina__firma, .pieDiPagina__copyright {
      grid-column: 1 / -1;
    }

    /* Su schermo stretto le colonne sono due e l'icona finirebbe da sola su una
       terza riga, staccata da tutto. Torna in fila sotto i servizi, che e' la
       colonna a cui appartiene. */
    .pieDiPagina__seguimi {
      grid-column: 2;
      padding-block-start: 0;
    }
  }

  /* Sotto la scrivania i pulsanti si rimpiccioliscono: alla misura piena
     occupavano quasi 50px di altezza su uno schermo da 375, sproporzionati
     rispetto al testo intorno. Restano comunque ben oltre i 24px richiesti
     dal criterio WCAG 2.5.8 sulla dimensione dei bersagli. */
  @media (max-width: 61.99rem) {
    .bottone {
      --riempimento: 0.7em;
      gap: 0.45em;
      padding-inline: 1.3em;
      font-size: var(--t-xs);
    }
  }

  /* Navigazione a scomparsa. La soglia e' 1100px e non 992: con otto voci
     distese, il marchio, il selettore di lingua e i due pulsanti, sotto quella
     larghezza la barra e' talmente stretta che "Adriano Dassu" va a capo. */
  @media (max-width: 68.74rem) {

    /* Qui la barra porta marchio, selettore di lingua e due pulsanti tutti in
       fila: senza stringere gli spazi "Adriano Dassu" andrebbe a capo sotto al
       logo, che sembra un errore di impaginazione. */
    .testata {
      gap: 0.5rem;
    }

    .marchio__nome {
      white-space: nowrap;
    }

    .marchio__segno {
      inline-size: 2.4rem;
    }

    /* Sotto i 360 pixel nemmeno cosi' ci sta, e il nome finirebbe sotto il
       selettore di lingua: resta il solo segno, che porta gia' il collegamento
       alla home e la sua etichetta per i lettori di schermo. */
    @media (max-width: 22.49rem) {

      .marchio__nome {
        display: none;
      }
    }

    .menu {
      display: inline-flex;
      align-items: center;
      gap: 0.6em;
      position: relative;
      padding: 0.5em 0.9em;
      border: var(--bordo-fine);
      border-radius: var(--r-full);
      letter-spacing: 0.12em;
    }

    .menu__tratti {
      position: relative;
    }

    .menu[aria-expanded="true"] .menu__tratti {
      background: transparent;
    }

    .menu[aria-expanded="true"] .menu__tratti::before {
      transform: rotate(45deg);
    }

    .menu[aria-expanded="true"] .menu__tratti::after {
      transform: rotate(-45deg);
    }

    .navigazione {
      position: fixed;
      inset: calc(var(--h-testata) + 0.4rem) var(--margine) auto;
      background: var(--carta);
      border: var(--bordo);
      border-radius: var(--r-lg);
      padding: var(--sp-2);
      transform-origin: top right;
      transition: opacity 0.3s ease, transform 0.35s var(--molla), visibility 0.35s;
      opacity: 0;
      visibility: hidden;
      transform: scale(0.94) translateY(-10px);
    }

    .navigazione[data-aperto="si"] {
      opacity: 1;
      visibility: visible;
      transform: none;
    }

    .navigazione__lista {
      flex-direction: column;
      align-items: stretch;
      gap: 0.1rem;
      font-size: var(--t-md);
    }

    .navigazione__lista a {
      display: block;
      padding: 0.7em 1em;
      border-radius: var(--r-md);
      font-family: var(--font-display);
    }

    .navigazione__lista a::after {
      display: none;
    }

    .navigazione__cta {
      text-align: center;
      margin-block-start: 0.5rem;

      /* nel pannello le voci sono piu' spaziate: la formula del riempimento
         resta quella, cambia la misura di partenza */
      --riempimento: 0.7em;
    }
  }
}

/* ---------------------------------------------------------------
   UTILITÀ
   --------------------------------------------------------------- */
@layer utilita {

  [hidden] {
    display: none !important;
  }

  .sr-only {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

/* ---------------------------------------------------------------
   MOVIMENTO
   --------------------------------------------------------------- */
@layer motion {

  /* Lo spostamento e' una copia sola: -100% e' l'intera striscia, diviso il
     numero di copie che main.js ha generato. Alla fine del ciclo la copia
     successiva occupa il posto della prima e il ritorno non si vede.
     La durata e' fissa per copia, non una velocita' in pixel al secondo:
     cosi' su schermi stretti, dove il testo e' piu' piccolo, il nastro
     rallenta invece di sembrare frenetico. */
  @keyframes scorri {

    from {
      transform: translateX(0);
    }

    to {
      transform: translateX(calc(-100% / var(--copie, 1)));
    }
  }

  /* rivelazione allo scorrimento, bidirezionale (attivata da JS con .js) */
  .js [data-rivela] {
    opacity: 0;
    transform: translateY(var(--verso, 32px));
    transition: opacity 0.55s ease, transform 0.55s var(--molla);
    transition-delay: var(--ritardo, 0ms);
    will-change: opacity, transform;
  }

  .js [data-rivela="visibile"] {
    opacity: 1;
    transform: none;
  }

  @media (prefers-reduced-motion: reduce) {
    html {
      scroll-behavior: auto;
    }

    *, *::before, *::after {
      animation-duration: 0.001ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.001ms !important;
    }

    .js [data-rivela] {
      opacity: 1;
      transform: none;
    }

    .nastro__pista {
      animation: none;
    }
  }
}

/* ---------------------------------------------------------------
   STAMPA
   --------------------------------------------------------------- */
@media print {

  .testata, .nastro, .risali, .eroe__figura, .modulo__azioni {
    display: none;
  }

  body {
    background: #fff;
    color: #000;
  }

  .faq details {
    break-inside: avoid;
  }

  .faq details p {
    display: block !important;
  }
}