@charset "utf-8";
/* giochicrypto.com — foglio di stile.

   La palette viene dal logo del sito: il ciano e il magenta del lettering,
   l'ambra dell'emblema a gamepad. Tre accenti e basta — il ciano per i
   collegamenti, il magenta per lo stato degli articoli, l'ambra per i richiami
   di affiliazione — e tutti e tre nella variante misurata che tiene 4,5:1 sul
   fondo di carta, non nella tinta satura del marchio.

   Il campo dei marchi è una variabile sua, `--campo-marchi`, ed è l'unico
   colore che il tema scuro non tocca. Misurato: il marchio Upland su bianco dà
   1,19:1, cioè invisibile, e su questo inchiostro 15,5:1; il logo del sito
   rispettivamente 3,85:1 e 4,80:1. Se il campo schiarisce, i marchi spariscono.

   Il corpo del testo è a 19 px su una misura di 66 caratteri. I siti
   concorrenti del settore stanno fra 12 e 13 px su righe da 100 a 138: è lo
   scarto che si vede al primo sguardo. */

/* ------------------------------------------------------------------ font */
@font-face {
  font-family: 'Literata';
  src: url('/font/literata-latin-wght-normal.woff2') format('woff2-variations');
  font-weight: 200 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Literata';
  src: url('/font/literata-latin-wght-italic.woff2') format('woff2-variations');
  font-weight: 200 900; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Space Grotesk';
  src: url('/font/space-grotesk-latin-wght-normal.woff2') format('woff2-variations');
  font-weight: 300 700; font-style: normal; font-display: swap;
}

/* ----------------------------------------------------------------- token */
:root {
  --campo-marchi: #14121f;  /* testata, piè, piastre dei marchi. NON si inverte */

  --profondo: #14121f;
  --profondo-2: #0c0a16;
  --acqua: #007ca9;         /* ciano del logo, variante testo — 4,52:1 */
  --acqua-chiara: #ddf1fa;
  --terra: #df0079;         /* magenta del logo, variante testo — 4,56:1 */
  --terra-scura: #b2005f;
  --ambra: #ffa500;         /* ambra dell'emblema: solo campiture, mai testo */
  --ambra-scura: #9e6600;   /* la variante che regge il testo — 4,62:1 */
  --verde: #0f7a46;         /* variazione positiva — 5,17:1 sulla carta */

  --carta: #fbfaf8;
  --carta-2: #f2f0f3;
  --scheda-fondo: #ffffff;
  --inchiostro: #15131c;
  --tenue: #5b5668;
  --riga: #e2dee4;

  --serif: 'Literata', Iowan Old Style, Georgia, serif;
  --sans: 'Space Grotesk', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  --t12: .75rem;  --t13: .8125rem; --t14: .875rem; --t15: .9375rem;
  --t16: 1rem;    --t17: 1.0625rem; --t18: 1.125rem; --t19: 1.1875rem;
  --t20: 1.25rem;
  --t24: 1.5rem;  --t28: 1.75rem;  --t34: 2.125rem; --t42: 2.625rem;

  --largo: 1240px;
  --r: 10px;
  --ombra: 0 1px 2px rgba(20,18,31,.06), 0 8px 24px -14px rgba(20,18,31,.30);
}

/* --------------------------------------------------------------- di base */
/* Misurato il 30 ottobre 2026 sui siti dello stesso settore — eGamers,
   BlockchainGamer, PlayToEarn, NFT Now, NFT Evening, DappRadar — aprendo i loro
   fogli di stile e leggendo il corpo del testo reso a 1280 px:

     eGamers            13 px   170 caratteri per riga
     BlockchainGamer    14 px    50
     PlayToEarn         16 px   105
     NFT Now            16 px   105
     NFT Evening        12 px    39
     DappRadar          14 px    51

   Nessuno di loro usa un carattere con grazie per il testo: sono tutti Inter,
   Roboto, system-ui o simili. Il corpo di questo sito è a 19 px su 66
   caratteri, con Literata: è lo scarto che si vede al primo sguardo, e il
   motivo per cui non si tocca.

   Metà di loro ha il fondo scuro, che in questo settore è la convenzione: qui
   il fondo è chiaro per scelta, ma il tema scuro è curato alla pari e non è un
   ripiego. */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--carta);
  color: var(--inchiostro);
  font: 400 var(--t19)/1.7 var(--serif);
  font-synthesis-weight: none;
}

/* `text-wrap: balance` evita la parola orfana in fondo ai titoli, che su titoli
   lunghi come quelli di questo sito capita di continuo. `scroll-margin-top` fa
   sì che il sommario, saltando a un titolo, non lo incolli al bordo in alto. */
h1, h2, h3, h4 {
  font-family: var(--sans); line-height: 1.18; margin: 0 0 .5em;
  font-weight: 600; letter-spacing: -.018em;
  text-wrap: balance; scroll-margin-top: 1.4em;
}
h1 { font-size: clamp(1.85rem, 1.25rem + 2.4vw, var(--t42)); letter-spacing: -.02em; }
h2 { font-size: var(--t28); }
h3 { font-size: var(--t20); }
/* `pretty` lascia al browser il compito di evitare le righe finali orfane.
   Dove non è supportato non succede niente. */
p { margin: 0 0 1.1em; text-wrap: pretty; }

/* Questi articoli sono pieni di cifre messe a confronto — volumi, prezzi
   minimi, percentuali di calo. Le cifre a larghezza fissa si incolonnano e si
   confrontano a occhio, che è il motivo per cui esistono. */
.testo, .scheda, table, time, .chip { font-variant-numeric: tabular-nums; }

::selection { background: var(--acqua-chiara); color: var(--inchiostro); }
a { color: var(--acqua); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--profondo); }
img { max-width: 100%; height: auto; }
code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .92em; }
hr { border: 0; border-top: 1px solid var(--riga); margin: 2em 0; }

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

.salta {
  position: absolute; left: -9999px; top: 0; z-index: 99;
  background: var(--profondo); color: #fff; padding: .7em 1.1em; font-family: var(--sans);
}
.salta:focus { left: 0; }

.involucro { width: 100%; max-width: var(--largo); margin: 0 auto; padding: 0 20px; }

/* --------------------------------------------------- impaginazione a due */
.impaginato { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; align-items: start; }
@media (min-width: 1060px) {
  .impaginato { grid-template-columns: minmax(0, 1fr) 302px; gap: 52px; }
  .impaginato__laterale { position: sticky; top: 20px; }
}

/* -------------------------------------------------------------- testata */
.testata {
  background: var(--campo-marchi);
  color: #eaf2f4;
  border-bottom: 3px solid var(--terra);
}
.testata__riga { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; padding-top: 14px; padding-bottom: 14px; }
.marchio { display: flex; align-items: center; gap: 16px; text-decoration: none; color: inherit; margin-right: auto; }
/* il logotipo è ciano e magenta su trasparente, con l'emblema a gamepad:
   sull'inchiostro della testata regge 4,80:1, senza riquadro chiaro sotto */
.marchio img { height: 30px; width: auto; display: block; }
.marchio__claim { font-family: var(--sans); font-size: var(--t13); color: #a9c6cf; max-width: 21ch; line-height: 1.35;
  border-left: 1px solid #2d5b73; padding-left: 16px; }
@media (max-width: 620px) { .marchio__claim { display: none; } }

.menu-bottone {
  display: none; align-items: center; gap: 8px; background: none; border: 1px solid #2d5b73;
  color: #eaf2f4; font-family: var(--sans); font-size: var(--t14); padding: .5em .8em;
  border-radius: 7px; cursor: pointer;
}
.menu-bottone__barre { display: inline-flex; flex-direction: column; gap: 3px; }
.menu-bottone__barre span { display: block; width: 16px; height: 2px; background: currentColor; }
.menu-bottone em { font-style: normal; }

.navigazione ul { display: flex; flex-wrap: wrap; gap: 4px; list-style: none; margin: 0; padding: 0; }
.navigazione a {
  display: block; padding: .45em .8em; border-radius: 7px; text-decoration: none;
  color: #d4e5ea; font-family: var(--sans); font-size: var(--t15); white-space: nowrap;
}
.navigazione a:hover { background: #14455f; color: #fff; }
.navigazione a[aria-current] { background: var(--terra); color: var(--profondo-2); font-weight: 600; }
.navigazione__cerca a { border: 1px solid #2d5b73; }

@media (max-width: 940px) {
  .menu-bottone { display: inline-flex; }
  .navigazione { display: none; flex-basis: 100%; }
  .navigazione.aperta { display: block; }
  .navigazione ul { flex-direction: column; gap: 2px; padding-bottom: 10px; }
  .navigazione a { padding: .6em .7em; }
}

/* ------------------------------------------------------------- sezioni */
main { padding: 34px 0 60px; }
.sezione { margin: 0 0 46px; }
.sezione__titolo { font-size: var(--t24); margin-bottom: .3em; }
.sezione__titolo--secondo { margin-top: 1.6em; }
.sezione__nota { color: var(--tenue); font-size: var(--t16); max-width: 62ch; margin-bottom: 1.3em; }
.sezione__azione { margin-top: 1.4em; }
.sezione--chiusura { text-align: center; padding-top: 10px; }

/* ------------------------------------------------- apertura a mosaico

   Il tema originale apriva con un riquadro grande e due piccoli accanto, e il
   titolo scritto sopra l'immagine. Si rifà qui perché adesso ogni articolo
   nuovo ha una copertina vera.

   Il velo (`.riquadro::after`) è la parte che conta: le copertine sono
   schermate, qualcuna su fondo chiaro, e il titolo è bianco. Il velo è calcato
   in basso e trasparente in alto, così il titolo regge sempre e l'immagine si
   vede comunque. Non si schiarisce nel tema scuro, per la stessa ragione per
   cui non si schiarisce `--campo-marchi`. */

.apertura { margin: 0 0 34px; }

.mosaico { display: grid; gap: 14px; grid-template-columns: 1fr; }
@media (min-width: 880px) {
  .mosaico { grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; }
  .mosaico .riquadro--grande { grid-column: 1; grid-row: 1 / 3; }
}

.riquadro {
  position: relative; display: flex; flex-direction: column; justify-content: flex-end;
  overflow: hidden; border-radius: var(--r); background: var(--campo-marchi);
  aspect-ratio: 16 / 10; text-decoration: none; isolation: isolate;
}
.riquadro > img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transition: transform .45s ease;
}
.riquadro__marchio {
  width: auto; height: auto; max-width: 58%; max-height: 38%;
  margin: auto; object-fit: contain; inset: 0;
}
.riquadro::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top,
    rgba(10,8,18,.97) 0%, rgba(10,8,18,.95) 40%,
    rgba(10,8,18,.72) 58%, rgba(10,8,18,.18) 80%, rgba(10,8,18,0) 100%);
}
/* Sul riquadro piccolo il blocco di testo occupa una fetta molto più grande
   del riquadro, e arriva dove il velo è ancora chiaro: lì sotto si leggeva in
   trasparenza la scritta della schermata. Velo più fitto solo per quelli. */
.riquadro:not(.riquadro--grande)::after {
  background: linear-gradient(to top,
    rgba(10,8,18,.97) 0%, rgba(10,8,18,.96) 50%,
    rgba(10,8,18,.82) 66%, rgba(10,8,18,.24) 86%, rgba(10,8,18,0) 100%);
}

.riquadro__testo {
  position: relative; z-index: 1; display: block;
  padding: 16px 18px 17px; color: #fff;
}
.riquadro__titolo {
  margin: 8px 0 7px; color: #fff; font-size: var(--t20);
  line-height: 1.22; letter-spacing: -.012em; text-wrap: balance;
}
.riquadro--grande .riquadro__titolo { font-size: var(--t28); }
.riquadro__meta { display: block; font-family: var(--sans); font-size: var(--t13); color: #cdc7da; }
.riquadro .chips { gap: 6px; }
.riquadro .chip { background: rgba(255,255,255,.14); color: #fff; border-color: transparent; }

@media (hover: hover) {
  .riquadro:hover > img { transform: scale(1.035); }
  .riquadro:hover .riquadro__titolo { text-decoration: underline; text-underline-offset: 3px; }
}
.riquadro:focus-visible { outline: 3px solid var(--acqua); outline-offset: 3px; }

@media (max-width: 879px) {
  .riquadro--grande .riquadro__titolo { font-size: var(--t24); }
}
@media (prefers-reduced-motion: reduce) {
  .riquadro > img { transition: none; }
  .riquadro:hover > img { transform: none; }
}

/* ------------------------------------------------- carosello che scorre

   Scorre da solo con il dito e con il trackpad. I due bottoni servono al mouse
   senza rotella orizzontale e restano `hidden` finché il JavaScript non li
   accende, perché senza non farebbero niente. */

.carosello { position: relative; }
.striscia {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(266px, 1fr);
  gap: 14px; overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x proximity; scroll-padding-left: 2px;
  padding-bottom: 12px; scrollbar-width: thin;
}
/* Nella striscia il riquadro è più alto che largo: con il rapporto 16:10 il
   titolo su tre righe sconfinava sopra l'immagine, dove il velo è ancora
   chiaro e la schermata sottostante si legge in trasparenza. */
.striscia > .riquadro { scroll-snap-align: start; aspect-ratio: 4 / 3; }
.striscia .riquadro__titolo {
  font-size: var(--t17);
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3;
  overflow: hidden;
}
.striscia:focus-visible { outline: 3px solid var(--acqua); outline-offset: 4px; border-radius: var(--r); }

.carosello__freccia {
  /* in alto, sopra l'immagine: a metà altezza coprirebbero le etichette */
  position: absolute; top: 26%; z-index: 2;
  width: 42px; height: 42px; border-radius: 50%; cursor: pointer;
  border: 1px solid var(--riga); background: var(--scheda-fondo); color: var(--inchiostro);
  font-size: 22px; line-height: 1; box-shadow: var(--ombra);
}
.carosello__freccia--sx { left: -8px; }
.carosello__freccia--dx { right: -8px; }
.carosello__freccia:disabled { opacity: .32; cursor: default; }
.carosello__freccia:focus-visible { outline: 3px solid var(--acqua); outline-offset: 2px; }
@media (max-width: 700px) { .carosello__freccia { display: none; } }

.inquadramento {
  display: flex; align-items: center; gap: 30px; flex-wrap: wrap;
  border-left: 4px solid var(--terra);
  padding: 2px 0 2px 24px;
  margin: 0 0 42px;
  font-size: var(--t20);
  line-height: 1.6;
}
.inquadramento p { margin: 0; flex: 1 1 24ch; max-width: 56ch; }
.inquadramento__logo { flex: 0 0 auto; width: 188px; height: auto; }
@media (max-width: 560px) {
  .inquadramento { gap: 20px; font-size: var(--t18); }
  .inquadramento__logo { width: 142px; }
}

.fascia {
  background: var(--carta-2);
  border: 1px solid var(--riga);
  border-radius: var(--r);
  padding: 30px 26px;
  margin: 0 0 46px;
}
.fascia .sezione__titolo { margin-top: 0; }

.presentazione { margin: 0 0 34px; max-width: 68ch; font-size: var(--t17); }
.presentazione__tile { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 1.2em; }

/* ------------------------------------------------------------- griglie */
.griglia { display: grid; gap: 26px; }
.griglia--terzi { grid-template-columns: repeat(auto-fill, minmax(236px, 1fr)); }

.scheda {
  display: flex; flex-direction: column; min-width: 0;
  background: var(--scheda-fondo); border: 1px solid var(--riga);
  border-left: 3px solid var(--acqua);
  border-radius: 0 var(--r) var(--r) 0; padding: 16px 18px 15px;
  transition: border-color .15s, transform .15s;
}
.scheda:hover { border-color: var(--acqua); transform: translateY(-2px); }
/* il filo di sinistra dice a colpo d'occhio di quale gioco parla il pezzo */
.scheda[data-piattaforma="Il settore"]    { border-left-color: var(--terra); }
.scheda[data-piattaforma="Collezionabili"] { border-left-color: var(--ambra-scura); }
.scheda[data-piattaforma="Alien Worlds"]  { border-left-color: #2fa36b; }
.scheda[data-piattaforma="The Sandbox"]   { border-left-color: var(--acqua); }
.scheda[data-piattaforma="Upland"]        { border-left-color: #2f7f8c; }
.scheda[data-piattaforma="Axie Infinity"] { border-left-color: #7a5cc4; }
.scheda[data-piattaforma="Decentraland"]  { border-left-color: #d1562f; }
.scheda[data-piattaforma="Altri giochi"]  { border-left-color: var(--tenue); }
.scheda__testo { display: flex; flex-direction: column; flex: 1; }
.scheda h3 { font-size: var(--t18); margin: .4em 0 .3em; line-height: 1.28; }

/* la copertina esce dai margini della scheda, così tocca i bordi */
.scheda__figura { display: block; margin: -16px -18px 14px; overflow: hidden;
  border-radius: 0 var(--r) 0 0; background: var(--carta-2); }
.scheda__figura img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }

/* Dove la schermata non c'è — succede solo ai pezzi nuovi — ci va il logotipo
   del sito sul campo dei marchi, che è lo stesso della testata e del piè di
   pagina. Il logotipo è orizzontale e sta comodo in un riquadro 16:10: l'emblema
   quadrato, al suo posto, sborda e copre l'etichetta. */
.scheda__figura--marchio { position: relative; display: grid; place-items: center;
  aspect-ratio: 16 / 10; background: var(--campo-marchi);
  padding: 14px 18px 30px; }
.scheda__figura--marchio img { width: auto; height: auto;
  max-height: 54%; max-width: 72%; aspect-ratio: auto; object-fit: contain; }
.scheda__figura--marchio span { position: absolute; left: 16px; right: 16px;
  bottom: 11px; font-family: var(--sans); font-size: var(--t12); font-weight: 600;
  letter-spacing: .05em; color: rgba(255,255,255,.62);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.scheda h3 a { text-decoration: none; color: var(--inchiostro); }
.scheda h3 a:hover { color: var(--acqua); text-decoration: underline; }
.scheda__estratto { color: var(--tenue); font-size: var(--t15); margin: 0 0 .5em; }
.scheda__meta { font-family: var(--sans); font-size: var(--t12); color: var(--tenue); margin: auto 0 0; }

/* --------------------------------------------------------------- chips */
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 4px; }
.chip {
  font-family: var(--sans); font-size: var(--t12); font-weight: 600; letter-spacing: .02em;
  padding: .22em .6em; border-radius: 999px; border: 1px solid var(--riga);
  color: var(--tenue); background: #fff; white-space: nowrap;
}
.chip--piattaforma { border-color: #b4d3d8; background: var(--acqua-chiara); color: #0a5a65; }
.chip--valido   { border-color: #b9d9c3; background: #e6f4ea; color: #1d6b38; }
.chip--superato { border-color: #e2d3b0; background: #f7efdc; color: #7a5a16; }
.chip--cronaca  { border-color: #cfd6dc; background: #eef1f4; color: #4a5a68; }
.chip--data { background: none; border: 0; padding-left: 0; }

/* -------------------------------------------------------------- ingressi */
.ingressi { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(248px, 1fr)); }
.ingresso {
  display: block; text-decoration: none; color: inherit; background: #fff;
  border: 1px solid var(--riga); border-radius: var(--r); padding: 20px 20px 18px;
  box-shadow: var(--ombra); transition: border-color .15s, transform .15s;
}
.ingresso:hover { border-color: var(--acqua); transform: translateY(-2px); }
.ingresso b { display: block; font-size: var(--t18); margin-bottom: .35em; line-height: 1.3; }
.ingresso span { display: block; color: var(--tenue); font-size: var(--t15); }
.ingresso i { display: block; margin-top: .7em; font-style: normal; font-family: var(--sans); font-size: var(--t12); color: var(--acqua); font-weight: 600; }

/* ----------------------------------------------------------------- tile */
.tiles { display: flex; flex-wrap: wrap; gap: 10px; }
.tile {
  display: inline-flex; flex-direction: column; gap: 2px; text-decoration: none;
  background: #fff; border: 1px solid var(--riga); border-radius: 8px;
  padding: .6em .9em; color: var(--inchiostro); font-family: var(--sans); font-size: var(--t15);
}
.tile:hover { border-color: var(--acqua); color: var(--acqua); }
.tile i { font-style: normal; font-size: var(--t12); color: var(--tenue); }
.tile--piccola { font-size: var(--t14); padding: .45em .75em; }

/* ------------------------------------------------- richiami affiliazione */
.richiami { display: grid; gap: 16px; }
@media (max-width: 1059px) {
  .richiami { grid-template-columns: repeat(auto-fit, minmax(262px, 1fr)); margin-top: 10px; }
}
.richiamo {
  background: #fff; border: 1px solid var(--riga); border-radius: var(--r);
  padding: 16px; box-shadow: var(--ombra);
  border-top: 4px solid var(--terra);
}
.richiamo--upland { border-top-color: var(--ambra); }

/* Il marchio di Upland è giallo su trasparente: disegnato per fondo scuro.
   Misurato, su bianco dà 1,19:1 — invisibile — e sul campo scuro 15,5:1.
   La piastra usa quindi lo stesso campo della testata, e il tema scuro non lo
   schiarisce. */
.richiamo__piastra {
  display: grid; place-items: center; height: 104px; margin: 0 0 14px;
  background: var(--campo-marchi); border: 1px solid var(--campo-marchi);
  border-radius: 9px; padding: 10px 14px; overflow: hidden;
}
.richiamo__logo { display: block; width: auto; height: auto;
  max-height: 84px; max-width: 100%; object-fit: contain; }

/* ripiego, se i file dei marchi non ci sono */
.richiamo__piastra--targa { grid-auto-flow: column; gap: 12px; height: auto; padding: 14px; }
.richiamo__targa {
  width: 44px; height: 44px; border-radius: 9px; display: grid; place-items: center;
  background: var(--terra); color: var(--profondo-2);
  font-family: var(--sans); font-weight: 800; font-size: var(--t15); letter-spacing: .02em;
}
.richiamo--upland .richiamo__targa { background: var(--acqua); color: #fff; }
.richiamo__nome { font-size: var(--t17); line-height: 1.2; color: var(--inchiostro); }
.richiamo__testo { min-width: 0; }
.richiamo__nota { font-family: var(--sans); font-size: var(--t13); color: var(--tenue); margin: .3em 0 .5em; }
.richiamo__codice { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0 0 .6em; }
.richiamo__codice code {
  font-size: var(--t16); font-weight: 700; letter-spacing: .06em;
  background: var(--carta-2); border: 1px dashed var(--ambra-scura);
  padding: .26em .5em; border-radius: 6px; color: var(--profondo);
}
.richiamo__linkforte { font-family: var(--sans); font-size: var(--t14); font-weight: 700; word-break: break-all; }
.richiamo__copia {
  font-family: var(--sans); font-size: var(--t12); font-weight: 600; cursor: pointer;
  background: var(--profondo); color: #fff; border: 0; border-radius: 6px; padding: .4em .7em;
}
.richiamo__copia:hover { background: var(--acqua); }
.richiamo__copia[data-fatto] { background: var(--terra-scura); }
.richiamo__dettaglio { font-size: var(--t13); color: var(--tenue); margin: 0 0 .7em; line-height: 1.5; }
.richiamo__link { font-family: var(--sans); font-size: var(--t13); font-weight: 600; }
.richiami__nota { font-family: var(--sans); font-size: var(--t12); color: var(--tenue); line-height: 1.5; margin: 0; }

/* ------------------------------------------------------------- articolo */
.articolo { max-width: 72ch; }
.articolo h1 { margin-bottom: .3em; }
.articolo__sommario { font-size: var(--t20); color: var(--tenue); line-height: 1.5; margin-bottom: .9em; }
.articolo__firma { font-family: var(--sans); font-size: var(--t14); color: var(--tenue); margin-bottom: 1.6em; }

.briciole ul { display: flex; flex-wrap: wrap; gap: .4em; list-style: none; margin: 0 0 1em; padding: 0;
  font-family: var(--sans); font-size: var(--t13); }
.briciole li + li::before { content: '›'; margin-right: .4em; color: var(--tenue); }
.briciole a { color: var(--tenue); text-decoration: none; }
.briciole a:hover { color: var(--acqua); text-decoration: underline; }

.avviso-data {
  background: var(--carta-2); border-left: 3px solid #b6bec6;
  padding: 14px 18px; margin: 0 0 1.8em; border-radius: 0 7px 7px 0;
  font-size: var(--t15); color: #46525d; line-height: 1.55;
}

.sommario {
  background: #fff; border: 1px solid var(--riga); border-radius: var(--r);
  padding: 18px 22px; margin: 0 0 2em;
}
.sommario b { display: block; font-family: var(--sans); font-size: var(--t13); text-transform: uppercase;
  letter-spacing: .08em; color: var(--tenue); margin-bottom: .7em; }
.sommario ol { margin: 0; padding-left: 1.3em; }
.sommario li { margin-bottom: .34em; font-size: var(--t16); }
.sommario a { text-decoration: none; }
.sommario a:hover { text-decoration: underline; }

.testo { font-size: var(--t18); }
.testo h2 { font-size: var(--t28); margin-top: 1.7em; }
.testo h3 { font-size: var(--t24); margin-top: 1.6em; }
.testo h4 { font-size: var(--t20); margin-top: 1.4em; }
.testo h2 strong, .testo h3 strong, .testo h4 strong { font-weight: inherit; }
.testo ul, .testo ol { padding-left: 1.3em; margin: 0 0 1.2em; }
.testo li { margin-bottom: .42em; }
.testo blockquote {
  margin: 1.8em 0; padding: 18px 22px;
  background: #fffdf2; border: 1px solid #e8e3c4; border-left: 4px solid var(--terra);
  border-radius: 0 var(--r) var(--r) 0; font-size: var(--t17);
}
.testo blockquote p:last-child { margin-bottom: 0; }
.testo table { width: 100%; border-collapse: collapse; margin: 1.6em 0; font-size: var(--t15); }
.testo th, .testo td { border: 1px solid var(--riga); padding: .6em .7em; text-align: left; vertical-align: top; }
.testo th { background: var(--carta-2); font-weight: 650; }

.schermata { margin: 1.9em 0; }
.schermata img { display: block; width: 100%; border-radius: 8px; border: 1px solid var(--riga); background: #fff; }
.schermata .zoom { display: block; }
.schermata figcaption { margin-top: .62em; font-family: var(--sans); font-size: var(--t14);
  line-height: 1.5; color: var(--tenue); }
.schermata figcaption b { color: var(--inchiostro); font-weight: 600; }
.schermata.alignleft, .schermata.alignright { max-width: 320px; }
@media (min-width: 760px) {
  .schermata.alignleft { float: left; margin: .4em 1.8em 1.2em 0; }
  .schermata.alignright { float: right; margin: .4em 0 1.2em 1.8em; }
}

.etichette { display: flex; gap: 12px; align-items: baseline; flex-wrap: wrap; margin: 1.5em 0 0;
  padding-top: 1.1em; border-top: 1px solid var(--riga); font-family: var(--sans); }
.etichette b { font-size: var(--t12); text-transform: uppercase; letter-spacing: .08em; color: var(--tenue); }
.etichette div { display: flex; flex-wrap: wrap; gap: 7px; }
.etichette a { font-size: var(--t13); background: var(--carta-2); border: 1px solid var(--riga);
  border-radius: 999px; padding: .22em .7em; text-decoration: none; color: var(--tenue); }
.etichette a:hover { border-color: var(--acqua); color: var(--acqua); }

.scorri { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); margin: 2.4em 0 0; }
.scorri a { display: block; padding: 14px 16px; border: 1px solid var(--riga); border-radius: var(--r);
  text-decoration: none; color: var(--inchiostro); background: #fff; }
.scorri a:hover { border-color: var(--acqua); }
.scorri i { display: block; font-style: normal; font-family: var(--sans); font-size: var(--t12);
  color: var(--tenue); margin-bottom: .3em; }
.scorri b { font-weight: 600; font-size: var(--t16); line-height: 1.3; }
.scorri__succ { text-align: right; }

/* -------------------------------------------------------------- archivio */
.archivio__testa { margin-bottom: 30px; max-width: 72ch; }
.archivio__descrizione { color: var(--tenue); font-size: var(--t18); margin: 0; }

.filtri { background: var(--carta-2); border: 1px solid var(--riga); border-radius: var(--r);
  padding: 16px 18px; margin-bottom: 26px; font-family: var(--sans); }
.filtri__riga { display: flex; gap: 12px; align-items: baseline; flex-wrap: wrap; margin-bottom: 10px; }
.filtri__riga > b { font-size: var(--t12); text-transform: uppercase; letter-spacing: .08em;
  color: var(--tenue); min-width: 7.5em; }
.filtri__riga > div { display: flex; flex-wrap: wrap; gap: 6px; }
.filtri button { font-family: inherit; font-size: var(--t13); cursor: pointer;
  background: #fff; border: 1px solid var(--riga); border-radius: 999px; padding: .3em .8em; color: var(--inchiostro); }
.filtri button:hover { border-color: var(--acqua); }
.filtri button[aria-pressed="true"] { background: var(--profondo); border-color: var(--profondo); color: #fff; }
.filtri__esito { margin: 4px 0 0; font-size: var(--t13); color: var(--tenue); }
.filtri__azzera { margin-left: 6px; }

.righe { list-style: none; margin: 0; padding: 0; }
.riga { display: flex; gap: 18px; padding: 15px 0; border-top: 1px solid var(--riga); }
.riga:last-child { border-bottom: 1px solid var(--riga); }
.riga__anno { flex: 0 0 3.4em; font-family: var(--sans); font-size: var(--t14); color: var(--tenue); padding-top: .15em; }
.riga__corpo { min-width: 0; }
.riga__corpo > a { font-size: var(--t18); text-decoration: none; color: var(--inchiostro); font-weight: 600; }
.riga__corpo > a:hover { color: var(--acqua); text-decoration: underline; }
.riga__sintesi { display: block; color: var(--tenue); font-size: var(--t15); margin: .2em 0 .45em; }
.riga[hidden] { display: none; }

/* -------------------------------------------------------------- bottoni */
.bottone {
  display: inline-block; font-family: var(--sans); font-size: var(--t15); font-weight: 600;
  background: var(--profondo); color: #fff; text-decoration: none; cursor: pointer;
  border: 1px solid var(--profondo); border-radius: 8px; padding: .62em 1.15em;
}
.bottone:hover { background: var(--acqua); border-color: var(--acqua); color: #fff; }
.bottone--chiaro { background: #fff; color: var(--profondo); }
.bottone--chiaro:hover { background: var(--acqua-chiara); color: var(--profondo); border-color: var(--acqua); }

/* ----------------------------------------------------------- segnaposto */
.segnaposto {
  background: #ffe95c; color: #4a3b00; font-family: var(--sans); font-size: .92em;
  font-weight: 700; padding: .1em .4em; border-radius: 4px; box-decoration-break: clone;
}

/* ------------------------------------------------------------------ pie */
.pie { background: var(--campo-marchi); color: #c6dae1; margin-top: 50px; padding: 44px 0 0;
  font-family: var(--sans); font-size: var(--t15); }
.pie a { color: #eaf2f4; }
.pie h2 { font-family: var(--sans); font-size: var(--t13); text-transform: uppercase;
  letter-spacing: .09em; color: #8fb1bd; margin: 0 0 .9em; }
.pie__griglia { display: grid; gap: 34px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); padding-bottom: 36px; }
.pie__blocco--largo { grid-column: span 2; max-width: 46ch; }
@media (max-width: 680px) { .pie__blocco--largo { grid-column: span 1; } }
.pie__logo { display: block; width: 210px; height: auto; margin: 0 0 18px; }
.pie__elenco { list-style: none; margin: 0; padding: 0; }
.pie__elenco li { margin-bottom: .45em; display: flex; gap: .5em; align-items: baseline; }
.pie__elenco span { font-size: var(--t12); color: #7fa0ad; }
.pie__contatto, .pie__codice { font-size: var(--t14); }
.pie__codice code { background: #11425b; padding: .16em .45em; border-radius: 5px; color: #e7f3b8; }
.pie__consenso { background: none; border: 0; color: #eaf2f4; font: inherit; cursor: pointer;
  padding: 0; text-decoration: underline; }
.pie__riga { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  border-top: 1px solid #1b4a63; padding-top: 16px; padding-bottom: 20px; font-size: var(--t13); color: #8fb1bd; }
.pie__riga p { margin: 0; }

/* -------------------------------------------------------------- consenso */
.consenso { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  background: #fff; border-top: 3px solid var(--terra); box-shadow: 0 -8px 30px rgba(11,51,72,.18); }
.consenso__corpo { max-width: var(--largo); margin: 0 auto; padding: 18px 20px;
  display: flex; gap: 20px; align-items: center; flex-wrap: wrap; }
.consenso p { margin: 0; font-size: var(--t15); max-width: 66ch; }
.consenso__azioni { display: flex; gap: 10px; flex-wrap: wrap; margin-left: auto; }

/* ---------------------------------------------------------- ricerca (UI) */
:root { --pagefind-ui-primary: #007ca9; --pagefind-ui-text: #15131c;
  --pagefind-ui-background: #fff; --pagefind-ui-border: #e2dee4;
  --pagefind-ui-font: 'Literata', Georgia, serif; --pagefind-ui-border-radius: 8px; }

/* ------------------------------------------------------------ tema scuro */
/* `--campo-marchi` non compare qui, ed è voluto: è il colore su cui stanno il
   logo del sito e quello di Upland, entrambi disegnati per fondo scuro. Se si
   schiarisce in tema scuro, i marchi spariscono — è l'errore che su earth2france
   è costato tre giri ed è la prima cosa che si è notata. */
@media (prefers-color-scheme: dark) {
  :root {
    --carta: #121018; --carta-2: #1c1926; --scheda-fondo: #1c1926;
    --inchiostro: #ece9f1; --tenue: #a9a2b8;
    --riga: #2e2a3a; --acqua: #4ec3ee; --acqua-chiara: #0e2d3a;
    --terra: #ff5fb0; --terra-scura: #ff8cc6;
    --ambra: #ffa500; --ambra-scura: #e8b65c;
    --verde: #4ddb93;
    --profondo: #0c0a16; --profondo-2: #08060f;
    --ombra: 0 1px 2px rgba(0,0,0,.5), 0 10px 26px -16px rgba(0,0,0,.8);
  }
  .scheda h3 a, .riga__corpo > a, .ingresso, .tile, .scorri a { color: var(--inchiostro); }
  .ingresso, .tile, .scorri a, .sommario, .richiamo, .filtri button, .chip { background: var(--carta-2); }
  .richiamo__codice code { background: #241f12; color: #ffd27a; }
  .testo blockquote { background: #1e1a2a; border-color: #3a3350; }
  .avviso-data { background: var(--carta-2); color: #bdb5cc; border-left-color: #463f5a; }
  .chip--valido { background: #14301f; border-color: #2a5636; color: #8fd5a4; }
  .chip--superato { background: #322a16; border-color: #5c4b22; color: #dcc07e; }
  .chip--cronaca { background: #1e1b28; border-color: #3a3448; color: #b6aec6; }
  .chip--piattaforma { background: var(--acqua-chiara); border-color: #1c5063; color: #a9e2ec; }
  .consenso { background: var(--carta-2); }
  /* nessun fondo chiaro sotto il logo: la testata è già il campo dei marchi */
  .schermata img, .testo th { background: var(--carta-2); }
  .bottone--chiaro { background: var(--carta-2); color: var(--inchiostro); }
  :root { --pagefind-ui-background: #1c1926; --pagefind-ui-text: #ece9f1;
          --pagefind-ui-border: #2e2a3a; --pagefind-ui-primary: #4ec3ee; }
}

/* ------------------------------------------------------------- stampa */
@media print {
  .testata, .pie, .richiami, .consenso, .filtri, .scorri, .sommario { display: none !important; }
  body { background: #fff; font-size: 11pt; }
  .impaginato { display: block; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #555; }
}


/* ------------------------------------------------- tabella dei gettoni

   Due colonne di percentuali che vanno lette a coppie, quindi si distinguono
   per colore e non solo per segno. Il verde e il rosso non bastano da soli —
   il segno resta scritto — perché chi non distingue i due colori deve poter
   leggere la stessa cosa. */

.tabella-avvolta { overflow-x: auto; margin: 1.6em 0; }

.gettoni { width: 100%; border-collapse: collapse; font-size: var(--t15); }
.gettoni caption {
  caption-side: bottom; margin-top: .8em; text-align: left;
  font-family: var(--sans); font-size: var(--t13); color: var(--tenue); line-height: 1.5;
}
.gettoni th, .gettoni td { border-bottom: 1px solid var(--riga); padding: .62em .7em; }
.gettoni thead th {
  font-family: var(--sans); font-size: var(--t13); text-transform: uppercase;
  letter-spacing: .04em; color: var(--tenue); border-bottom: 2px solid var(--riga);
  white-space: nowrap; font-weight: 600;
}
.gettoni tbody th {
  text-align: left; font-weight: 400; white-space: nowrap;
}
.gettoni tbody th b { font-family: var(--sans); font-weight: 650; letter-spacing: .01em; }
.gettoni tbody th span { display: block; font-size: var(--t13); color: var(--tenue); }
.gettoni .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.gettoni .anno { color: var(--tenue); font-size: var(--t13); }
.gettoni tbody tr:hover { background: var(--carta-2); }

.var { font-family: var(--sans); font-weight: 600; }
.var--su { color: var(--verde); }
.var--giu { color: var(--terra-scura); }
.nd { color: var(--tenue); font-style: italic; }

.fonte-dati {
  margin-top: 2em; padding-top: 1em; border-top: 1px solid var(--riga);
  font-family: var(--sans); font-size: var(--t13); color: var(--tenue);
}