/* ==========================================================================
   Pepita — sistema visivo "blu notte e champagne"
   Layout: barra superiore blu notte (come CardTrader), contenuto centrato largo max 1240px,
   galleria di tessere per le pepite, tabelle con intestazione scura. Su telefono: barra in basso.
   Lusso = spazio, linee sottili, pochi colori, cifre grandi in Bodoni. L'oro solo dove c'è valore.
   ========================================================================== */

:root {
  /* colore */
  --notte: #0f1b2e;          /* barra, intestazioni tabelle, testo forte */
  --notte-2: #1a2a43;
  --notte-testo: #e8edf5;
  --bg: #f4f5f7;             /* porcellana fredda */
  --surface: #ffffff;
  --surface-2: #f9fafb;
  --fg: #141b26;
  --muted: #6a7280;
  --line: #e4e7ec;
  --line-forte: #d3d8e0;
  --oro: #a8854f;            /* champagne */
  --oro-forte: #8a6a38;
  --oro-chiaro: #f2ebdf;
  --oro-su-notte: #d6b67f;
  --ok: #1d7a55;  --ok-chiaro: #e3f2ea;
  --warn: #a1620f; --warn-chiaro: #faeedc;
  --bad: #b23b33;  --bad-chiaro: #f8e3e1;
  --info: #2f5f9e; --info-chiaro: #e4ecf7;
  /* enti di grading */
  --psa: #c8102e; --bgs: #16181c; --cgc: #1f4f9c; --sgc: #2b2b2b;

  /* tipografia */
  --f-display: "Bodoni Moda", "Didot", "Bodoni 72", Georgia, serif;
  --f-body: "Work Sans", "Segoe UI", system-ui, sans-serif;

  --r: 6px;
  --barra-h: 64px;
  --ombra: 0 1px 2px rgba(15, 27, 46, .04), 0 8px 24px rgba(15, 27, 46, .06);
}
@media (prefers-color-scheme: dark) {
  :root {
    --notte: #0a1220; --notte-2: #142035; --notte-testo: #e8edf5;
    --bg: #0d1420; --surface: #131c2b; --surface-2: #172234; --fg: #e9edf3; --muted: #94a0b2;
    --line: #22304a; --line-forte: #2c3c58;
    --oro: #d2b07a; --oro-forte: #e4c792; --oro-chiaro: #2b2619; --oro-su-notte: #d6b67f;
    --ok: #57c497; --ok-chiaro: #13291f; --warn: #e9a752; --warn-chiaro: #2d2213;
    --bad: #ec7a70; --bad-chiaro: #33191a; --info: #8fb3e6; --info-chiaro: #182740;
    --psa: #e0384f; --bgs: #0b0c0e; --cgc: #3f73c9; --sgc: #444;
    --ombra: 0 1px 2px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.25);
    color-scheme: dark;
  }
}

/* ---------- base ---------- */
* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--bg); color: var(--fg); font-family: var(--f-body); font-size: 15px; line-height: 1.55; -webkit-font-smoothing: antialiased; font-feature-settings: "tnum" 1, "lnum" 1; }
a { color: inherit; text-decoration-color: var(--line-forte); text-underline-offset: 3px; }
a:hover { text-decoration-color: var(--oro); }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible { outline: 2px solid var(--oro); outline-offset: 2px; }
img { max-width: 100%; }
.num, .mono { font-variant-numeric: tabular-nums lining-nums; }
.display { font-family: var(--f-display); font-weight: 500; letter-spacing: -0.01em; }
.etichetta, th, .cifra .k, .riquadro h2, .sezione-titolo { font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }

/* ---------- barra superiore ---------- */
.barra { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; background: var(--notte); color: var(--notte-testo); border-bottom: 1px solid rgba(255,255,255,.06); }
.barra .dentro { max-width: 1240px; margin: 0 auto; height: var(--barra-h); padding-inline: 24px; display: flex; align-items: center; gap: 36px; }
.marchio { display: inline-flex; align-items: center; gap: 10px; color: #fff; text-decoration: none; }
.marchio svg { width: 22px; height: 22px; flex: none; }
.marchio b { font-family: var(--f-body); font-weight: 600; font-size: 14px; letter-spacing: .42em; }
.menu { display: flex; align-items: stretch; gap: 4px; height: 100%; margin: 0; padding: 0; list-style: none; }
.menu a { position: relative; display: flex; align-items: center; gap: 8px; height: 100%; padding: 0 12px; color: rgba(232,237,245,.72); text-decoration: none; font-size: 14px; font-weight: 500; letter-spacing: .01em; }
.menu a svg { width: 17px; height: 17px; flex: none; opacity: .8; }
.menu a:hover { color: #fff; }
.menu a.attiva { color: #fff; }
.menu a.attiva::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 0; height: 2px; background: var(--oro-su-notte); }
.menu .conta { font-size: 11px; font-weight: 600; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--oro-su-notte); color: var(--notte); display: inline-grid; place-items: center; }
.barra .destra { margin-left: auto; display: flex; align-items: center; gap: 16px; font-size: 13px; color: rgba(232,237,245,.6); }
.barra .destra form { margin: 0; }
.barra .link-btn { color: rgba(232,237,245,.8); }
.link-btn { background: none; border: 0; padding: 0; font: inherit; color: var(--muted); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.solo-telefono { display: none; }

/* ---------- pagina ---------- */
.main { padding-block: 36px 96px; padding-inline: 24px; }
.contenuto { max-width: 1240px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; }
/* Una tabella larga scorre nel suo contenitore, non allarga la pagina. */
.contenuto > *, .scheda-carta > * { min-width: 0; }
.briciole { font-size: 13px; color: var(--muted); display: flex; gap: 8px; align-items: center; }
.briciole a { color: var(--muted); }
.testata { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 24px; padding-bottom: 20px; border-bottom: 1px solid var(--line); }
.testata h1 { font-family: var(--f-display); font-weight: 500; font-size: 40px; line-height: 1.05; margin: 0; letter-spacing: -0.015em; text-wrap: balance; }
.testata p { margin: 8px 0 0; color: var(--muted); font-size: 14px; max-width: 70ch; }

/* cifre in riga, separate da linee sottili */
.cifre-riga { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.cifre-riga .cifra { padding: 18px 20px; border-left: 1px solid var(--line); }
.cifre-riga .cifra:first-child { border-left: 0; padding-left: 0; }
.cifra .v { font-family: var(--f-display); font-size: 34px; line-height: 1.1; margin-top: 6px; font-variant-numeric: lining-nums; }
.cifra .s { font-size: 13px; color: var(--muted); margin-top: 2px; }

/* compatibilità con le viste che usano ancora riquadro + griglia-num */
.riquadro { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 22px; min-width: 0; }
.riquadro h2 { margin: 0 0 14px; }
.griglia-num { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 0; padding: 0; }
.griglia-num .cifra { padding: 20px 22px; border-left: 1px solid var(--line); }
.griglia-num .cifra:first-child { border-left: 0; }
.sezione-titolo { margin: 0 0 12px; }

/* ---------- etichette ---------- */
.pill { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 9px; border-radius: 11px; font-size: 12px; font-weight: 500; white-space: nowrap; color: var(--muted); background: var(--surface-2); border: 1px solid var(--line); }
.pill.oro { background: var(--oro-chiaro); color: var(--oro-forte); border-color: transparent; }
.pill.ok { background: var(--ok-chiaro); color: var(--ok); border-color: transparent; }
.pill.warn { background: var(--warn-chiaro); color: var(--warn); border-color: transparent; }
.pill.bad { background: var(--bad-chiaro); color: var(--bad); border-color: transparent; }
.pill.info { background: var(--info-chiaro); color: var(--info); border-color: transparent; }
.punto { width: 7px; height: 7px; border-radius: 50%; background: currentColor; display: inline-block; }

/* etichetta del voto, nei colori dell'ente */
.voto { display: inline-flex; align-items: stretch; height: 24px; border-radius: 3px; overflow: hidden; font-size: 11px; font-weight: 700; letter-spacing: .06em; box-shadow: 0 0 0 1px rgba(0,0,0,.06); white-space: nowrap; }
.voto .ente { display: grid; place-items: center; padding: 0 7px; color: #fff; background: var(--sgc); }
.voto .n { display: grid; place-items: center; padding: 0 8px; background: #fff; color: #111; font-size: 13px; letter-spacing: 0; }
.voto.psa .ente { background: var(--psa); }
.voto.bgs .ente { background: var(--bgs); color: #e2c48c; }
.voto.bgs .n { background: #e2c48c; }
.voto.cgc .ente { background: var(--cgc); }
.voto.raw .ente { background: var(--muted); }

/* ---------- filtri ---------- */
form.filtri { display: flex; flex-wrap: wrap; gap: 12px; align-items: end; }
.segmenti { display: inline-flex; border: 1px solid var(--line-forte); border-radius: var(--r); overflow: hidden; background: var(--surface); }
.segmenti a { padding: 7px 14px; font-size: 13px; font-weight: 500; text-decoration: none; color: var(--muted); border-left: 1px solid var(--line); }
.segmenti a:first-child { border-left: 0; }
.segmenti a.attivo { background: var(--notte); color: #fff; }
label.campo { display: grid; gap: 5px; font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
input[type=text], input[type=password], input[type=number], input[type=search], select {
  font: inherit; font-size: 14px; letter-spacing: 0; text-transform: none; color: var(--fg); background: var(--surface); border: 1px solid var(--line-forte); border-radius: var(--r); padding: 8px 12px; min-width: 0; height: 38px;
}
input[type=number] { width: 120px; text-align: right; }
input:focus, select:focus { border-color: var(--oro); }
.spunta { display: inline-flex; gap: 8px; align-items: center; height: 38px; font-size: 13px; color: var(--muted); }

/* ---------- pulsanti ---------- */
.btn { font: inherit; font-size: 13px; font-weight: 600; letter-spacing: .02em; height: 38px; padding: 0 16px; border-radius: var(--r); border: 1px solid var(--line-forte); background: var(--surface); color: var(--fg); cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: 8px; transition: background .15s, border-color .15s; }
.btn:hover { border-color: var(--notte); }
.btn.primario { background: var(--notte); border-color: var(--notte); color: #fff; }
.btn.primario:hover { background: var(--notte-2); }
.btn.oro { background: var(--oro); border-color: var(--oro); color: #fff; }
.btn.piccolo { height: 30px; padding: 0 12px; font-size: 12px; }
.btn.pericolo { color: var(--bad); }
.btn.pieno { width: 100%; }

/* ---------- galleria delle pepite ---------- */
.galleria { display: grid; grid-template-columns: repeat(auto-fill, minmax(268px, 1fr)); gap: 20px; }
.tessera { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; display: flex; flex-direction: column; transition: box-shadow .2s, transform .2s, border-color .2s; }
.tessera:hover { box-shadow: var(--ombra); border-color: var(--line-forte); transform: translateY(-2px); }
.tessera.alta { border-color: var(--oro); box-shadow: inset 0 0 0 1px var(--oro); }
.tessera .vetrina { position: relative; aspect-ratio: 4 / 3; background: linear-gradient(160deg, var(--surface-2), var(--bg)); display: grid; place-items: center; border-bottom: 1px solid var(--line); }
.tessera .vetrina img { max-height: 92%; max-width: 70%; object-fit: contain; filter: drop-shadow(0 6px 14px rgba(15,27,46,.18)); }
.tessera .vetrina .segnaposto { width: 34%; aspect-ratio: 63 / 88; border-radius: 6px; border: 1px solid var(--line-forte); background: var(--surface); display: grid; place-items: center; color: var(--line-forte); }
.tessera .vetrina .voto { position: absolute; top: 12px; left: 12px; }
.anello { position: absolute; top: 10px; right: 10px; width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: var(--surface); box-shadow: 0 0 0 1px var(--line); font-family: var(--f-display); font-size: 17px; color: var(--fg); }
.anello svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.anello svg circle { fill: none; stroke-width: 2.5; }
.anello .traccia { stroke: var(--line); }
.anello .valore { stroke: var(--oro); stroke-linecap: round; }
.tessera .corpo { padding: 18px 18px 16px; display: grid; gap: 12px; flex: 1; }
.tessera .nome { font-weight: 600; font-size: 15px; line-height: 1.3; text-decoration: none; }
.tessera .nome:hover { text-decoration: underline; }
.tessera .set { font-size: 13px; color: var(--muted); margin-top: 2px; }
.tessera .margine { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding-top: 12px; border-top: 1px solid var(--line); }
.tessera .margine .v { font-family: var(--f-display); font-size: 30px; line-height: 1; color: var(--ok); }
.tessera .margine .p { font-size: 13px; color: var(--muted); }
.tessera dl { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; margin: 0; font-size: 13px; }
.tessera dt { color: var(--muted); }
.tessera dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
.tessera .chips { display: flex; flex-wrap: wrap; gap: 6px; }
.tessera .azioni { display: flex; gap: 8px; margin-top: auto; }
.tessera .titolo-annuncio { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- tabelle ---------- */
.tabella-wrap { overflow-x: auto; border-radius: 8px; border: 1px solid var(--line); background: var(--surface); }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
thead th { background: var(--notte); color: rgba(232,237,245,.78); text-align: left; padding: 12px 14px; white-space: nowrap; font-size: 11px; }
td { padding: 13px 14px; border-bottom: 1px solid var(--line); vertical-align: middle; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover td { background: var(--surface-2); }
td.n, th.n { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
td .sotto { display: block; font-size: 12px; color: var(--muted); margin-top: 2px; }
td.titolo { min-width: 260px; }
.miniatura { width: 40px; height: 54px; border-radius: 3px; object-fit: cover; background: var(--surface-2); border: 1px solid var(--line); display: block; }
.con-miniatura { display: flex; gap: 12px; align-items: center; }

/* ---------- dettaglio carta (come la pagina prodotto di CardTrader) ---------- */
.scheda-carta { display: grid; grid-template-columns: 260px minmax(0, 1fr) 300px; gap: 32px; align-items: start; }
.scheda-carta .immagine { position: sticky; top: calc(var(--barra-h) + 24px); }
.scheda-carta .immagine .cornice { aspect-ratio: 63 / 88; border-radius: 12px; background: linear-gradient(160deg, var(--surface), var(--surface-2)); border: 1px solid var(--line); display: grid; place-items: center; overflow: hidden; box-shadow: var(--ombra); }
.scheda-carta .immagine img { width: 100%; height: 100%; object-fit: contain; }
.scheda-carta .immagine .voto { margin-top: 14px; }
.scheda-carta h1 { font-family: var(--f-display); font-weight: 500; font-size: 38px; line-height: 1.08; margin: 0; letter-spacing: -0.015em; }
.scheda-carta .sottotitolo { color: var(--muted); margin-top: 6px; }
.scheda-carta .cifre-riga { margin-top: 24px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.scheda-carta .cifre-riga .cifra { padding: 16px 14px; }
.scheda-carta .cifre-riga .cifra:first-child { padding-left: 0; }
.scheda-carta .cifra .v { font-size: 28px; }
.affare { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 22px; display: grid; gap: 14px; position: sticky; top: calc(var(--barra-h) + 24px); }
.affare .prezzo { font-family: var(--f-display); font-size: 36px; line-height: 1; }
.affare dl { display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; margin: 0; font-size: 13px; }
.affare dt { color: var(--muted); }
.affare dd { margin: 0; text-align: right; }

.grafico { margin-top: 28px; }
.grafico svg { width: 100%; height: auto; display: block; }
.grafico .asse { stroke: var(--line); }
.grafico .asse-testo { fill: var(--muted); font-family: var(--f-body); font-size: 11px; letter-spacing: 0; text-transform: none; font-weight: 400; }
.grafico .venduto { fill: var(--oro); }
.grafico .linea-rif { stroke: var(--notte); fill: none; stroke-width: 2; }
.grafico .linea-rich { stroke: var(--muted); fill: none; stroke-width: 1.25; stroke-dasharray: 4 4; }
.legenda { display: flex; flex-wrap: wrap; gap: 18px; font-size: 12px; color: var(--muted); margin-top: 10px; }
.legenda i { display: inline-block; width: 14px; height: 2px; vertical-align: middle; margin-right: 6px; background: var(--notte); }
.legenda i.punto-oro { width: 7px; height: 7px; border-radius: 50%; background: var(--oro); }
.legenda i.tratteggio { background: repeating-linear-gradient(90deg, var(--muted) 0 4px, transparent 4px 7px); }
@media (prefers-color-scheme: dark) {
  .grafico .linea-rif { stroke: var(--notte-testo); }
  .legenda i { background: var(--notte-testo); }
  /* In scuro il blu notte sparirebbe sul fondo: azioni principali e selezioni passano allo champagne. */
  .btn.primario, .segmenti a.attivo, .paginazione .corrente { background: var(--oro); border-color: var(--oro); color: #10161f; }
  .btn.primario:hover { background: var(--oro-forte); border-color: var(--oro-forte); }
  .btn:hover { border-color: var(--oro); }
  .tessera .vetrina { background: linear-gradient(160deg, #182337, #0f1724); }
}

/* ---------- impostazioni ---------- */
.impostazioni { display: grid; gap: 20px; }
.gruppo-imp { display: grid; }
.riga-imp { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--line); }
.riga-imp:last-child { border-bottom: 0; }
.riga-imp .et { font-weight: 600; font-size: 14px; }
.riga-imp .desc { font-size: 13px; color: var(--muted); max-width: 62ch; }
.riga-imp .val { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); }

/* ---------- varie ---------- */
.avviso-pagina { padding: 12px 16px; border-radius: var(--r); background: var(--ok-chiaro); color: var(--ok); font-weight: 500; font-size: 14px; }
.avviso-pagina.errore { background: var(--bad-chiaro); color: var(--bad); }
.vuoto { text-align: center; padding: 56px 20px; color: var(--muted); background: var(--surface); border: 1px solid var(--line); border-radius: 10px; }
.vuoto svg { width: 36px; height: 36px; color: var(--oro); }
.vuoto h3 { font-family: var(--f-display); font-weight: 500; color: var(--fg); margin: 12px 0 6px; font-size: 24px; }
.vuoto p { margin: 0 auto; max-width: 54ch; font-size: 14px; }
.paginazione { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: center; font-size: 13px; }
.paginazione a, .paginazione span { padding: 7px 14px; border-radius: var(--r); border: 1px solid var(--line-forte); background: var(--surface); text-decoration: none; }
.paginazione .corrente { background: var(--notte); color: #fff; border-color: var(--notte); }
.paginazione .spenta { color: var(--muted); border-color: var(--line); }
.due-colonne { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 20px; }
.elenco-semplice { list-style: none; padding: 0; margin: 0; }
.elenco-semplice li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.elenco-semplice li:last-child { border-bottom: 0; }
.conto-alla-rovescia { font-family: var(--f-display); font-size: 22px; line-height: 1; }
.conto-alla-rovescia.urgente { color: var(--bad); }

/* ---------- accesso ---------- */
.accesso { min-height: 100vh; display: grid; grid-template-columns: 1fr 1fr; }
.accesso .lato { background: var(--notte); color: var(--notte-testo); padding: 48px; display: flex; flex-direction: column; justify-content: space-between; }
.accesso .lato .marchio b { font-size: 15px; }
.accesso .lato blockquote { margin: 0; font-family: var(--f-display); font-size: 40px; line-height: 1.12; max-width: 14ch; color: #fff; }
.accesso .lato blockquote em { color: var(--oro-su-notte); font-style: italic; }
.accesso .lato small { color: rgba(232,237,245,.5); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; }
.accesso .modulo { display: grid; place-items: center; padding: 32px 16px; }
.accesso form { width: 100%; max-width: 340px; display: grid; gap: 18px; }
.accesso h1 { font-family: var(--f-display); font-weight: 500; font-size: 34px; margin: 0; }
.accesso p { margin: 0; color: var(--muted); font-size: 14px; }
.accesso input { width: 100%; }
.accesso .errore { color: var(--bad); font-size: 14px; }

/* ---------- telefono ---------- */
@media (max-width: 960px) {
  .scheda-carta { grid-template-columns: 200px minmax(0, 1fr); }
  .scheda-carta .affare { grid-column: 1 / -1; position: static; }
}
@media (max-width: 820px) {
  .barra .dentro { height: 56px; padding-inline: 16px; }
  .barra .menu, .barra .destra .solo-largo { display: none; }
  .solo-telefono { display: block; }
  .solo-largo { display: none; }
  .barra-basso { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; background: var(--notte); padding: 6px 4px calc(6px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid rgba(255,255,255,.06); }
  .barra-basso ul { list-style: none; margin: 0; padding: 0; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; }
  .barra-basso a { position: relative; display: grid; justify-items: center; gap: 3px; padding: 6px 2px; font-size: 10px; font-weight: 500; letter-spacing: .04em; color: rgba(232,237,245,.6); text-decoration: none; }
  .barra-basso a svg { width: 20px; height: 20px; }
  .barra-basso a.attiva { color: #fff; }
  .barra-basso a.attiva svg { color: var(--oro-su-notte); }
  .barra-basso .conta { position: absolute; top: 2px; left: calc(50% + 6px); font-size: 9px; font-weight: 700; min-width: 15px; height: 15px; padding: 0 4px; border-radius: 8px; background: var(--oro-su-notte); color: var(--notte); display: grid; place-items: center; }
  .main { padding-block: 24px 104px; padding-inline: 16px; }
  .testata h1 { font-size: 32px; }
  .cifre-riga { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cifre-riga .cifra { padding: 14px 10px 14px 12px; }
  .cifra .v { font-size: 26px; }
  .cifra .s { font-size: 12px; }
  .scheda-carta .cifre-riga { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .scheda-carta .cifre-riga .cifra { padding: 14px 12px; }
  .scheda-carta .cifre-riga .cifra:nth-child(odd) { border-left: 0; padding-left: 0; }
  .scheda-carta .cifre-riga .cifra:nth-child(n+3) { border-top: 1px solid var(--line); }
  .conto-alla-rovescia { white-space: nowrap; font-size: 19px; }
  .galleria { grid-template-columns: 1fr; gap: 14px; }
  .scheda-carta { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .scheda-carta .immagine { position: static; display: grid; grid-template-columns: 120px 1fr; gap: 16px; align-items: end; }
  .scheda-carta h1 { font-size: 30px; }
  .riga-imp { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .accesso { grid-template-columns: 1fr; }
  .accesso .lato { padding: 28px 20px; gap: 28px; }
  .accesso .lato blockquote { font-size: 30px; }
}
@media (min-width: 821px) { .barra-basso { display: none; } }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } .tessera:hover { transform: none; } }