/* Carburante - ANTEPRIMA, onda 1 rifatta (31/10/2026). Palette rosso-verde.
   UNICO file di identita' visiva. Sezione 1: TOKEN (colori, spazi, raggi, ombre, durate, tipografia di
   sistema, nessun font esterno). Sezione 2: componenti, uno per tipo (riga, prezzo, chip, mappa, scheda).
   Ogni accoppiata testo/fondo e' verificata con bin/contrasto.py (tabella in DECISIONI.md).
   Le fasce di prezzo (f-verde / f-giallo / f-rosso / f-grigio) sono l'UNICA fonte dei colori prezzo:
   elenco, scheda, puntini della mappa, legenda, chip di riepilogo. Ogni fascia ha anche l'etichetta scritta. */

:root {
  /* --- colori: identita' --- */
  --bianco: #ffffff;
  --fondo: #faf6f3;            /* pagina: bianco caldo */
  --inchiostro: #22171a;       /* testo */
  --tenue: #5d5155;            /* testo secondario */
  --linea: #eadfdc;
  --linea-forte: #c9b8b4;
  --rosso-scuro: #7a1023;      /* identita': barra, bottoni, titoli, link */
  --rosso-scuro-hover: #5e0b1a;
  --rosso-tinta: #f8e8ea;      /* fondo chip attivo chiaro, riga di confronto */
  --testata-testo: #fbf3f4;
  --verde-testo: #0e5a2b;      /* accento positivo: differenze in meno */
  --anteprima: #3b2f33;        /* banda anteprima */
  --avviso-fondo: #fff1e3;
  --avviso-testo: #8a3b00;
  --errore: #8d1620;

  /* --- colori: fasce di prezzo (verde = economico, giallo = nella media, rosso acceso = caro) --- */
  --fascia-verde: #1d8542;         --fascia-verde-fondo: #d6f1dd;   --fascia-verde-testo: #0e5a2b;
  --fascia-giallo: #f2c200;        --fascia-giallo-fondo: #fff0b3;  --fascia-giallo-testo: #6a4c00;  --fascia-giallo-bordo: #7a5a00;
  --fascia-rosso: #dc2f3a;         --fascia-rosso-fondo: #ffe1e1;   --fascia-rosso-testo: #8d1620;   /* piu' chiaro e acceso del rosso identita' */
  --fascia-grigio: #8d8588;        --fascia-grigio-fondo: #ececea;  --fascia-grigio-testo: #4a4648;
  /* freschezza: oltre 7 giorni giallo, oltre 30 grigio (stesse tinte delle fasce, stesso significato "attenzione"/"fuori") */
  --stale-fondo: #fff0b3;  --stale-testo: #6a4c00;
  --escluso-fondo: #ececea; --escluso-testo: #4a4648;

  /* --- tipografia di sistema --- */
  --f-testo: system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, Cantarell, "Noto Sans", "Liberation Sans", Arial, sans-serif;
  --f-mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --t-nota: .8125rem; --t-piccolo: .875rem; --t-base: 1rem; --t-medio: 1.125rem; --t-grande: 1.375rem;
  --t-titolo: 1.75rem; --t-prezzo: 1.875rem; --t-cap: 2.75rem;
  --interlinea: 1.5;

  /* --- spazi, raggi, ombre, durate --- */
  --s-1: .25rem; --s-2: .5rem; --s-3: .75rem; --s-4: 1rem; --s-5: 1.5rem; --s-6: 2rem; --s-7: 3rem;
  --tocco: 48px;
  --r-piccolo: 6px; --r-medio: 10px; --r-grande: 14px; --r-pillola: 999px;
  --ombra: 0 1px 2px rgba(34, 23, 26, .06), 0 4px 14px rgba(34, 23, 26, .05);
  --ombra-forte: 0 2px 6px rgba(34, 23, 26, .18), 0 10px 24px rgba(34, 23, 26, .12);
  --d-veloce: 120ms; --d-media: 220ms; --d-lenta: 360ms;
  --larghezza: 40rem;
  --barra: 6px;
  /* barra fissa a 5 voci (ordini 31/10/2026 sera): altezza sul telefono (in basso); su computer sta nella testata in alto */
  --barra-nav-h: 60px;
  --sotto-barra: calc(var(--barra-nav-h) + env(safe-area-inset-bottom, 0px));
}

/* ---------------------------------------------------------------- base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--fondo); color: var(--inchiostro); font: var(--t-base)/var(--interlinea) var(--f-testo); font-variant-numeric: tabular-nums; padding-bottom: var(--sotto-barra); }
/* ancore (#form-filtri, #elenco, #medie…): il bersaglio non finisce sotto la testata fissa */
[id] { scroll-margin-top: var(--s-3); }
a { color: var(--rosso-scuro); text-underline-offset: .15em; }
a:hover { color: var(--rosso-scuro-hover); }
:focus-visible { outline: 3px solid var(--rosso-scuro); outline-offset: 2px; border-radius: 4px; }
h1, h2, h3 { line-height: 1.2; margin: 0 0 var(--s-3); font-weight: 700; letter-spacing: -.01em; color: var(--rosso-scuro); }
h1 { font-size: var(--t-titolo); }
h2 { font-size: var(--t-grande); }
h3 { font-size: var(--t-medio); color: var(--inchiostro); }
h1 small { font-size: .6em; color: var(--tenue); font-weight: 600; }
.h-piccolo { font-size: var(--t-medio); }
p { margin: 0 0 var(--s-3); }
svg { width: 1.25em; height: 1.25em; vertical-align: -.25em; fill: none; }
code, pre { font-family: var(--f-mono); font-size: .9em; }
code, .nota, .testo p, .testo li { overflow-wrap: anywhere; }
small { font-size: var(--t-nota); }
.sprite { display: none; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.salta { position: absolute; left: -999px; top: var(--s-2); background: var(--rosso-scuro); color: #fff; padding: var(--s-2) var(--s-4); border-radius: var(--r-medio); z-index: 10; }
.salta:focus { left: var(--s-2); }

/* ---------------------------------------------------------------- testata e bande */
.testata { background: var(--rosso-scuro); color: var(--testata-testo); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 var(--s-3); padding: var(--s-1) var(--s-4); min-height: var(--tocco); }
.marchio { color: inherit; text-decoration: none; font-weight: 800; font-size: var(--t-medio); display: inline-flex; align-items: center; gap: var(--s-2); min-height: var(--tocco); }
.marchio svg { width: 1.6em; height: 1.6em; color: #fff; }
/* ---- barra a 5 voci: Vicino a te · Dove sono · Prezzi oggi · Salvati · Altro (UNA nel DOM, dentro la testata).
   Telefono: fissa in basso, sopra tutto (z-index 40; la mappa e' un contesto isolato a z-index 0, quindi non la copre mai;
   la scheda rapida e' nel flusso). Computer (da 48 rem): la testata e' sticky in alto e la barra sta li' dentro.
   Voce attiva: aria-current + riga bianca + grassetto, non solo il colore. "Dove sono" (punto 5) e' in attesa: non e' un link. */
.barra-nav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: flex; align-items: stretch; background: var(--rosso-scuro); color: var(--testata-testo); border-top: 1px solid rgba(255, 255, 255, .22); box-shadow: 0 -2px 10px rgba(34, 23, 26, .2); padding-bottom: env(safe-area-inset-bottom, 0px); }
.barra-nav .voce { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: var(--barra-nav-h); padding: 5px 2px 6px; color: inherit; text-decoration: none; font-size: .72rem; font-weight: 600; line-height: 1.1; text-align: center; border-top: 3px solid transparent; -webkit-tap-highlight-color: transparent; }
.barra-nav .voce svg { width: 1.5rem; height: 1.5rem; flex: 0 0 auto; }
.barra-nav .voce span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.barra-nav .voce:hover { color: #fff; background: rgba(255, 255, 255, .1); }
.barra-nav .voce[aria-current="page"] { color: #fff; font-weight: 800; border-top-color: #fff; background: rgba(255, 255, 255, .16); }
.barra-nav .voce:focus-visible { outline: 3px solid #fff; outline-offset: -4px; border-radius: 0; }
.barra-nav .in-attesa { opacity: .55; cursor: default; }
.barra-nav .in-attesa:hover { background: none; color: inherit; }
.banda-anteprima { margin: 0; background: var(--anteprima); color: #fff; font-size: var(--t-nota); padding: 2px var(--s-4); text-align: center; }
.banda { padding: var(--s-3) var(--s-4); border-radius: var(--r-medio); margin: var(--s-3) 0; }
.avviso-banda { background: var(--avviso-fondo); color: var(--avviso-testo); border: 1px solid #f1cfae; }
.contenuto { max-width: var(--larghezza); margin: 0 auto; padding: var(--s-4) var(--s-4) var(--s-6); }
.pie { max-width: var(--larghezza); margin: 0 auto; padding: var(--s-5) var(--s-4) var(--s-7); color: var(--tenue); font-size: var(--t-nota); border-top: 1px solid var(--linea); }
.pie p { margin-bottom: var(--s-2); }
.segnaposto { color: var(--avviso-testo); }
.briciole { font-size: var(--t-piccolo); color: var(--tenue); margin-bottom: var(--s-2); }
.briciole a, .sotto-titolo a { display: inline-block; padding: .55rem .1rem; }
.pie a { display: inline-block; padding: .4rem .1rem; }
.legenda-chip { text-transform: none; letter-spacing: 0; font-weight: 400; }
.sotto-titolo { color: var(--tenue); font-size: var(--t-piccolo); }
.nota { color: var(--tenue); font-size: var(--t-nota); }
.aiuto { color: var(--tenue); font-size: var(--t-piccolo); }
.errore { color: var(--errore); font-weight: 600; }
.avviso { color: var(--avviso-testo); }
.scheda { background: var(--bianco); border: 1px solid var(--linea); border-radius: var(--r-grande); padding: var(--s-4); margin: var(--s-4) 0; box-shadow: var(--ombra); }
.scheda.avviso { color: var(--inchiostro); border-color: #f1cfae; background: var(--avviso-fondo); }
.testo ul, .testo ol { padding-left: 1.25rem; }
.testo li { margin-bottom: var(--s-2); }
.passaggi li { margin-bottom: var(--s-3); }
.colonne { columns: 2 10rem; padding-left: 1.1rem; column-gap: var(--s-5); margin: 0; }
.colonne li { margin-bottom: var(--s-1); break-inside: avoid; }
.legame { background: none; border: 0; padding: 0; color: var(--rosso-scuro); text-decoration: underline; font: inherit; cursor: pointer; min-height: 44px; }
.legame-auto { display: inline-block; font-size: var(--t-piccolo); font-weight: 600; margin-top: var(--s-1); }

/* ---------------------------------------------------------------- riga di aggiornamento (dati reali) */
.aggiornamento { background: var(--bianco); border: 1px solid var(--linea); border-left: var(--barra) solid var(--rosso-scuro); border-radius: var(--r-medio); padding: var(--s-2) var(--s-3); font-size: var(--t-nota); color: var(--tenue); margin: var(--s-3) 0; }
.aggiornamento b { color: var(--inchiostro); }
.aggiornamento [data-conto] { font-weight: 700; color: var(--rosso-scuro); font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------- prima schermata */
.piega { padding-top: var(--s-4); }
.h-cap { font-size: var(--t-grande); color: var(--tenue); font-weight: 600; }
.eti-cap { display: block; font-size: var(--t-medio); font-weight: 700; margin-bottom: var(--s-2); }
.campo-cap { display: block; width: 100%; font: 700 var(--t-cap)/1.2 var(--f-testo); letter-spacing: .12em; padding: var(--s-3) var(--s-4); border: 2px solid var(--linea-forte); border-radius: var(--r-grande); background: var(--bianco); color: var(--inchiostro); font-variant-numeric: tabular-nums; text-align: center; }
.campo-cap:focus { border-color: var(--rosso-scuro); outline: 3px solid var(--rosso-tinta); }
.campo-cap[aria-invalid="true"] { border-color: var(--errore); }
/* riga "pieno da 40 litri" sotto il campo CAP (punto 6): numero reale dal DB, nota piccola con media e data del file */
.pieno-oggi { margin: var(--s-3) 0 0; font-size: var(--t-medio); color: var(--inchiostro); line-height: 1.45; }
.pieno-oggi b { color: var(--rosso-scuro); font-variant-numeric: tabular-nums; white-space: nowrap; }
.pieno-oggi .nota { display: block; margin-top: var(--s-1); }
.campo-cap::placeholder { color: var(--linea-forte); letter-spacing: .05em; }
.bottone { display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2); min-height: var(--tocco); padding: var(--s-2) var(--s-4); border-radius: var(--r-medio); border: 2px solid var(--rosso-scuro); background: var(--rosso-scuro); color: #fff; font: 600 var(--t-base) var(--f-testo); text-decoration: none; cursor: pointer; transition: background var(--d-veloce), transform 80ms; }
.bottone:hover { background: var(--rosso-scuro-hover); color: #fff; }
.bottone:active { transform: translateY(1px); }
.bottone.grande { width: 100%; font-size: var(--t-medio); min-height: 56px; margin-top: var(--s-3); }
.bottone.secondario { background: var(--bianco); color: var(--rosso-scuro); }
.bottone.secondario:hover { background: var(--rosso-tinta); color: var(--rosso-scuro-hover); }
.bottone[aria-pressed="true"] { background: var(--fascia-verde-fondo); color: var(--verde-testo); border-color: var(--fascia-verde); }
.bottone[aria-pressed="true"] svg { fill: var(--fascia-verde); color: var(--fascia-verde); }
.bottone:disabled, fieldset:disabled .bottone { opacity: .55; cursor: not-allowed; }
.sotto-piega { margin-top: var(--s-6); }

/* ---------------------------------------------------------------- chip (UN componente) */
.filtri { margin: var(--s-2) 0 var(--s-3); display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); align-items: flex-start; }
.filtri .raggio, .filtri .pieno { flex: 1 1 100%; }
.chips { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: center; }
.chips legend { float: left; width: 100%; font-size: var(--t-nota); color: var(--tenue); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 2px; }
.chip { position: relative; }
.chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.chip span { display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--s-3); border-radius: var(--r-pillola); border: 2px solid var(--linea-forte); background: var(--bianco); color: var(--inchiostro); font-weight: 600; cursor: pointer; transition: background var(--d-veloce), border-color var(--d-veloce); }
.chip input:checked + span { background: var(--rosso-scuro); border-color: var(--rosso-scuro); color: #fff; }
.chip input:focus-visible + span { outline: 3px solid var(--rosso-scuro); outline-offset: 2px; }
.raggio { margin: 0; }
.raggio label { font-weight: 600; display: block; }
.raggio output { color: var(--rosso-scuro); }
.raggio-modo { font-weight: 500; color: var(--tenue); font-size: var(--t-piccolo); margin-left: var(--s-2); }
.raggio input[type="range"] { width: 100%; height: 40px; accent-color: var(--rosso-scuro); margin: 0; cursor: pointer; }
.tacche { display: flex; flex-wrap: wrap; justify-content: space-between; font-size: var(--t-nota); padding: 0; margin-top: -6px; }
.tacche a { color: var(--tenue); text-decoration: none; min-width: 32px; min-height: 44px; padding: 0 var(--s-1); display: inline-flex; align-items: center; justify-content: center; border-radius: var(--r-piccolo); font-size: var(--t-piccolo); font-weight: 600; }
.tacche .km-eti { display: none; }
@media (min-width: 30rem) { .tacche .km-eti { display: inline; } }
.tacche a[aria-current="true"] { color: var(--rosso-scuro); font-weight: 700; background: var(--rosso-tinta); }
.pieno summary { cursor: pointer; min-height: 40px; display: flex; align-items: center; font-weight: 600; color: var(--rosso-scuro); font-size: var(--t-piccolo); }
.pieno .campi { display: flex; gap: var(--s-3); flex-wrap: wrap; padding-bottom: var(--s-2); }
.pieno label { display: flex; flex-direction: column; gap: var(--s-1); font-size: var(--t-piccolo); flex: 1 1 10rem; }
.pieno input { min-height: var(--tocco); font: var(--t-medio) var(--f-testo); padding: var(--s-2) var(--s-3); border: 2px solid var(--linea-forte); border-radius: var(--r-medio); width: 100%; }
html.js .solo-nojs { display: none; }

/* ---------------------------------------------------------------- in breve, cambia CAP */
.in-breve { display: grid; gap: var(--s-2); margin: var(--s-3) 0; }
.in-breve .voce { display: grid; gap: 2px; background: var(--bianco); border: 1px solid var(--linea); border-left: var(--barra) solid var(--rosso-scuro); border-radius: var(--r-grande); padding: var(--s-3) var(--s-4); text-decoration: none; color: inherit; box-shadow: var(--ombra); }
.in-breve .voce .eti { font-size: var(--t-nota); text-transform: uppercase; letter-spacing: .06em; color: var(--tenue); font-weight: 700; }
.in-breve .voce .chi { font-size: var(--t-piccolo); color: var(--inchiostro); overflow-wrap: anywhere; }
.in-breve .voce:hover .chi { text-decoration: underline; color: var(--rosso-scuro); }
@media (min-width: 30rem) { .in-breve { grid-template-columns: 1fr 1fr; } }
.titolo-cap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-2) var(--s-4); margin-bottom: var(--s-2); }
.titolo-cap h1 { margin-bottom: 0; }
.cambia-cap { display: flex; flex-wrap: wrap; gap: var(--s-2); max-width: 100%; }
.cambia-cap input { width: 7.5rem; max-width: 100%; min-width: 0; min-height: 44px; font: 700 var(--t-base) var(--f-testo); letter-spacing: .08em; padding: 0 var(--s-3); border: 2px solid var(--linea-forte); border-radius: var(--r-medio); text-align: center; }
.cambia-cap .bottone { min-height: 44px; padding: 0 var(--s-3); font-size: var(--t-piccolo); }
.altra-mod { background: var(--fascia-giallo-fondo); border: 1px solid var(--fascia-giallo-bordo); border-radius: var(--r-medio); padding: var(--s-2) var(--s-3); color: var(--inchiostro) !important; }
.spunta { display: flex; align-items: center; gap: var(--s-2); font-size: var(--t-piccolo); min-height: 44px; }
.spunta input { width: 22px; height: 22px; accent-color: var(--rosso-scuro); }
.pieno .ricalcola { align-self: flex-end; min-height: var(--tocco); }
.tipo.autostrada { background: var(--inchiostro); color: #fff; border-radius: var(--r-piccolo); padding: 0 .5em; margin-left: 0; font-weight: 700; }
.tipo.autostrada svg { color: #fff; }
.legenda .chiave.tratteggio i { background: #fff; border: 2px dashed var(--inchiostro); }

/* ---------------------------------------------------------------- medie e esiti */
.confronto { background: var(--bianco); border: 1px solid var(--linea); border-radius: var(--r-grande); padding: var(--s-3) var(--s-4); margin: var(--s-3) 0; font-size: var(--t-piccolo); }
.confronto p:last-child { margin-bottom: 0; }
.confronto .medie { font-size: var(--t-base); }
.rif-nota { color: var(--tenue); }
.conteggio { font-size: var(--t-piccolo); color: var(--tenue); }
.raggio-esito p { margin: var(--s-2) 0; font-size: var(--t-piccolo); color: var(--tenue); }
.raggio-esito b { color: var(--inchiostro); }

/* ---------------------------------------------------------------- fasce (UNICA fonte dei colori prezzo) */
.f-verde  { --fascia: var(--fascia-verde);  --fascia-fondo: var(--fascia-verde-fondo);  --fascia-testo: var(--fascia-verde-testo);  --fascia-bordo: var(--fascia-verde); }
.f-giallo { --fascia: var(--fascia-giallo); --fascia-fondo: var(--fascia-giallo-fondo); --fascia-testo: var(--fascia-giallo-testo); --fascia-bordo: var(--fascia-giallo-bordo); }
.f-rosso  { --fascia: var(--fascia-rosso);  --fascia-fondo: var(--fascia-rosso-fondo);  --fascia-testo: var(--fascia-rosso-testo);  --fascia-bordo: var(--fascia-rosso); }
.f-grigio { --fascia: var(--fascia-grigio); --fascia-fondo: var(--fascia-grigio-fondo); --fascia-testo: var(--fascia-grigio-testo); --fascia-bordo: var(--fascia-grigio); }
.blocco-prezzo { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; }
.prezzo { display: inline-flex; align-items: baseline; gap: .25em; padding: .1em .5em; border-radius: var(--r-piccolo); background: var(--fascia-fondo, var(--fascia-grigio-fondo)); color: var(--fascia-testo, var(--fascia-grigio-testo)); font-weight: 800; white-space: nowrap; }
.prezzo small { font-weight: 500; font-size: .7em; }
.prezzo.grande { font-size: var(--t-prezzo); padding: .02em .35em; letter-spacing: -.01em; }
.fascia-eti { display: inline-block; font-size: var(--t-nota); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--fascia-testo, var(--fascia-grigio-testo)); background: var(--fascia-fondo, var(--fascia-grigio-fondo)); padding: 0 .5em; border-radius: var(--r-pillola); border: 1px solid var(--fascia-bordo, var(--fascia-grigio)); }
.delta { font-size: var(--t-nota); color: var(--tenue); margin: var(--s-1) 0 0; display: block; }
.fresco { color: var(--tenue); }
.stale { color: var(--stale-testo); font-weight: 700; background: var(--stale-fondo); padding: 0 .4em; border-radius: var(--r-piccolo); border: 1px solid var(--fascia-giallo-bordo); }
.escluso { color: var(--escluso-testo); font-weight: 700; background: var(--escluso-fondo); padding: 0 .4em; border-radius: var(--r-piccolo); }

/* ---------------------------------------------------------------- LA riga impianto */
.elenco { list-style: none; margin: 0; padding: 0; }
.riga { position: relative; background: var(--bianco); border: 1px solid var(--linea); border-radius: var(--r-grande); margin-bottom: var(--s-3); box-shadow: var(--ombra); overflow: hidden; animation: entra var(--d-media) ease-out both; }
.riga .barra { position: absolute; left: 0; top: 0; bottom: 0; width: var(--barra); background: var(--fascia, var(--fascia-grigio)); }
.riga.f-giallo .barra { background: repeating-linear-gradient(180deg, var(--fascia-giallo) 0 10px, var(--fascia-giallo-bordo) 10px 12px); }
.riga-stale { border-style: dashed; }
.riga-esclusa { opacity: .85; }
.riga-link { display: block; padding: var(--s-3) var(--s-4) var(--s-3) calc(var(--s-4) + var(--barra)); color: inherit; text-decoration: none; }
.riga-link:hover .nome span, .riga-link:focus-visible .nome span { text-decoration: underline; color: var(--rosso-scuro); }
.riga .testa { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: var(--s-2) var(--s-3); }
.riga .dove { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; flex: 0 0 auto; }
.riga .dist { font-weight: 800; font-size: var(--t-grande); line-height: 1.1; }
.riga .mod { font-size: var(--t-nota); color: var(--tenue); text-transform: uppercase; letter-spacing: .06em; }
.riga .fresh { font-size: var(--t-nota); margin: var(--s-2) 0 var(--s-1); }
.riga .nome { margin: 0 0 var(--s-1); font-size: var(--t-medio); overflow-wrap: anywhere; display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); }
.riga .indirizzo { font-size: var(--t-piccolo); color: var(--tenue); margin-bottom: 0; overflow-wrap: anywhere; }
.riga .etichetta { font-size: var(--t-nota); color: var(--tenue); margin: var(--s-1) 0 0; }
.riga .ieri { font-weight: 700; font-size: var(--t-piccolo); }
.riga .ieri.su { color: var(--fascia-rosso-testo); } .riga .ieri.giu { color: var(--verde-testo); } .riga .ieri.uguale, .riga .ieri.nd { color: var(--tenue); font-weight: 500; }
.azioni-riga { margin: 0; padding: 0 var(--s-4) var(--s-2) calc(var(--s-4) + var(--barra)); font-size: var(--t-nota); }
.elenco-semplice { padding-left: 1.25rem; }
.elenco-semplice li { margin-bottom: var(--s-2); }

/* bandiera generica (testo, mai loghi) e tipo impianto */
.bandiera { display: inline-flex; align-items: center; gap: var(--s-1); font-size: var(--t-nota); color: var(--tenue); font-weight: 600; text-transform: uppercase; letter-spacing: .05em; }
.bandiera .sigla { display: inline-grid; place-items: center; min-width: 2em; height: 1.7em; padding: 0 .3em; border-radius: var(--r-piccolo); background: var(--rosso-tinta); color: var(--rosso-scuro); font-size: .85em; letter-spacing: 0; border: 1px solid var(--linea-forte); }
.bandiera .nome-bandiera { font-weight: 500; }
.bandiera.grande { font-size: var(--t-piccolo); }
.tipo { display: inline-flex; align-items: center; gap: var(--s-1); font-size: var(--t-nota); color: var(--tenue); margin-left: var(--s-3); }
.tipo svg { width: 1.5em; height: 1.5em; color: var(--tenue); }
.intesta { display: flex; flex-wrap: wrap; align-items: center; margin-bottom: var(--s-2); }

/* ---------------------------------------------------------------- scheda impianto */
.scheda-impianto > * { margin-bottom: var(--s-5); }
.prezzo-in-testa { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--s-2) var(--s-3); margin-bottom: var(--s-3); }
.prezzo-di { font-size: var(--t-nota); color: var(--tenue); }
.intestazione-impianto .indirizzo { font-size: var(--t-medio); }
.dati { display: grid; grid-template-columns: auto 1fr; gap: var(--s-1) var(--s-4); font-size: var(--t-piccolo); margin: var(--s-3) 0 0; }
.dati dt { color: var(--tenue); }
.dati dd { margin: 0; overflow-wrap: anywhere; }
.azioni { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.azioni .bottone { flex: 1 1 10rem; }
.tab-prezzi, .tab-registro { width: 100%; border-collapse: collapse; background: var(--bianco); border: 1px solid var(--linea); border-radius: var(--r-grande); overflow: hidden; }
.tab-prezzi th, .tab-prezzi td, .tab-registro th, .tab-registro td { text-align: left; vertical-align: top; padding: var(--s-3); border-top: 1px solid var(--linea); font-weight: 400; }
.tab-prezzi thead th, .tab-registro thead th { font-size: var(--t-nota); color: var(--tenue); text-transform: uppercase; letter-spacing: .06em; border-top: 0; background: var(--fondo); }
.tab-prezzi tbody th { font-weight: 700; }
.tab-prezzi .eti { overflow-wrap: anywhere; }
.tab-prezzi .mod { font-size: var(--t-nota); color: var(--tenue); text-transform: uppercase; letter-spacing: .06em; font-weight: 500; }
.tab-prezzi .fresh { font-size: var(--t-nota); display: block; margin-top: var(--s-1); color: var(--tenue); }
.tab-registro { font-size: var(--t-nota); }
.esito-ok { color: var(--verde-testo); font-weight: 700; } .esito-errore { color: var(--errore); font-weight: 700; } .esito-saltato { color: var(--tenue); }
.confronti { list-style: none; margin: 0; padding: 0; font-size: var(--t-nota); }
.confronti .meno { color: var(--verde-testo); }
.confronti .piu { color: var(--fascia-rosso-testo); }
.classifica { font-size: var(--t-piccolo); margin: var(--s-2) 0 0; }
.stato-escluso td, .stato-escluso th { background: #f6f4f4; color: var(--tenue); }
.etichetta-manuale { display: inline-block; font-size: var(--t-nota); font-weight: 700; padding: 0 .5em; border-radius: var(--r-pillola); border: 1px solid var(--linea-forte); background: var(--bianco); color: var(--inchiostro); }
.etichetta-manuale.in_verifica { background: var(--stale-fondo); color: var(--stale-testo); border-color: var(--fascia-giallo-bordo); }
.etichetta-manuale.posizione_corretta { background: var(--fascia-verde-fondo); color: var(--verde-testo); border-color: var(--fascia-verde); }
@media (max-width: 36rem) {
  .tab-prezzi thead, .tab-registro thead { display: none; }
  .tab-prezzi tr, .tab-registro tr { display: block; padding: var(--s-2) 0; border-top: 1px solid var(--linea); }
  .tab-prezzi th, .tab-prezzi td, .tab-registro th, .tab-registro td { display: block; border: 0; padding: var(--s-1) var(--s-3); }
}

/* ---------------------------------------------------------------- LA mappa (Leaflet, static/vendor/leaflet/) */
/* Nessun touch-action sulla pagina: lo imposta Leaflet sul suo contenitore (dentro la mappa un dito = pan e due dita = zoom
   senza far scorrere la pagina; fuori dalla mappa la pagina scorre normalmente). isolation: gli z-index di Leaflet restano
   dentro la mappa e non coprono il resto della pagina. */
.mappa-blocco { margin: var(--s-3) 0; }
.mappa { position: relative; height: 320px; overflow: hidden; border-radius: var(--r-grande); border: 1px solid var(--linea); background: #ebe6e3 repeating-linear-gradient(45deg, transparent 0 12px, rgba(122, 16, 35, .04) 12px 24px); isolation: isolate; z-index: 0; }
.mappa.leaflet-container { font: var(--t-nota)/1.3 var(--f-testo); color: var(--inchiostro); background: #ebe6e3; outline-offset: -3px; }
.mappa .leaflet-tile-pane { filter: saturate(.85); }
.mappa .leaflet-control-attribution { background: rgba(255, 255, 255, .88); font-size: 11px; padding: 1px 6px; border-top-right-radius: var(--r-piccolo); margin: 0; }
.mappa .leaflet-control-attribution a { color: var(--rosso-scuro); }
/* tasti grandi da pollice, in basso a destra: + , - , centra sul mio CAP */
/* in riga sul bordo basso (⌖ − +): il pollice ci arriva e il bordo destro a mezza altezza resta libero per il pizzico a due dita
   (un pizzico che parte con un dito sopra un tasto non zooma: il tasto resta un tasto, come nel controllo zoom di Leaflet) */
.mappa .comandi { display: flex; flex-direction: row; gap: 10px; margin: 0 var(--s-2) var(--s-2) 0; }
.mappa .comandi button { width: 52px; height: 52px; border-radius: var(--r-medio); border: 1px solid var(--linea-forte); background: #fff; color: var(--inchiostro); font: 700 1.6rem/1 var(--f-testo); cursor: pointer; box-shadow: var(--ombra-forte); display: flex; align-items: center; justify-content: center; padding: 0; touch-action: manipulation; }
.mappa .comandi button:active { background: var(--fondo); transform: scale(.96); }
.mappa .comandi button.centra { font-size: 1.5rem; color: var(--rosso-scuro); }
.mappa .conteggio-punti { background: rgba(255, 255, 255, .9); font-size: var(--t-nota); padding: 2px 8px; border-radius: var(--r-piccolo); margin: var(--s-2); box-shadow: var(--ombra); }
.mappa noscript p, .mappa .mappa-vuota { position: relative; z-index: 1; margin: 0; padding: var(--s-4); }
.mappa .mappa-vuota { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); background: rgba(255, 255, 255, .92); border-radius: var(--r-medio); font-weight: 700; color: var(--rosso-scuro); padding: var(--s-2) var(--s-4); box-shadow: var(--ombra); pointer-events: none; }
/* puntini: area di tocco 32 px, cerchio colorato per fascia, etichetta del prezzo solo da zoom 13 e con pochi punti */
.mappa .puntino-icona { background: none; border: 0; }
.mappa .puntino { position: absolute; left: 0; top: 0; width: 32px; height: 32px; display: block; cursor: pointer; }
.mappa .puntino i { position: absolute; left: 50%; top: 50%; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%; background: var(--fascia-grigio); border: 2px solid #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .35); box-sizing: border-box; animation: pop var(--d-lenta) cubic-bezier(.2, .9, .3, 1.3) both; }
.mappa .puntino.piccolo i { width: 12px; height: 12px; margin: -6px 0 0 -6px; }
.mappa .puntino.f-verde i { background: var(--fascia-verde); }
.mappa .puntino.f-giallo i { background: var(--fascia-giallo); border-color: var(--fascia-giallo-bordo); }
.mappa .puntino.f-rosso i { background: var(--fascia-rosso); }
.mappa .puntino.f-grigio i { background: var(--fascia-grigio); }
.mappa .puntino.stale i { border-style: dashed; }
.mappa .puntino.io i { width: 22px; height: 22px; margin: -11px 0 0 -11px; border: 3px solid var(--rosso-scuro); }
.mappa .puntino.scelto i { border: 3px solid var(--inchiostro); }
.mappa .leaflet-marker-icon:focus { outline: none; }
.mappa .leaflet-marker-icon:focus .puntino i { border: 4px solid var(--inchiostro); }
.mappa .puntino .eti { display: none; position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%); background: rgba(255, 255, 255, .92); color: var(--inchiostro); font: 700 11px/1 var(--f-testo); padding: 3px 5px; border-radius: 4px; white-space: nowrap; pointer-events: none; box-shadow: 0 1px 2px rgba(0, 0, 0, .2); }
.mappa.eti-visibili .puntino .eti { display: block; }
.mappa .puntino.f-verde .eti { color: var(--fascia-verde-testo); }
.mappa .puntino.f-rosso .eti { color: var(--fascia-rosso); }
/* centro del CAP: goccia rossa con punto bianco, non toccabile */
.mappa .pin-centro-icona { background: none; border: 0; }
.mappa .pin-centro { display: block; width: 24px; height: 24px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); background: var(--rosso-scuro); border: 2px solid #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .35); box-sizing: border-box; }
.mappa .pin-centro::after { content: ""; position: absolute; left: 50%; top: 50%; width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; border-radius: 50%; background: #fff; }
.legenda { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-3); font-size: var(--t-nota); padding: var(--s-2) 0 0; }
.legenda .chiave { display: inline-flex; align-items: center; gap: .35em; color: var(--inchiostro); }
.legenda .chiave i { width: 14px; height: 14px; border-radius: 50%; background: var(--fascia, var(--fascia-grigio)); border: 2px solid var(--fascia-bordo, #fff); box-shadow: 0 0 0 1px rgba(0, 0, 0, .15); }
.legenda .chiave.centro i { border-radius: 50% 50% 50% 0; transform: rotate(-45deg); background: var(--rosso-scuro); border-color: #fff; }
.legenda .chiave.f-giallo i { border-color: var(--fascia-giallo-bordo); }
.scheda-rapida { background: var(--bianco); border: 1px solid var(--linea); border-left: var(--barra) solid var(--fascia, var(--fascia-grigio)); border-radius: var(--r-grande); padding: var(--s-3) var(--s-4); margin-top: var(--s-2); box-shadow: var(--ombra-forte); animation: sale var(--d-media) ease-out both; }
.scheda-rapida .testa { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s-2) var(--s-3); align-items: flex-start; padding-right: 4.5rem; }
.scheda-rapida .dove { display: flex; flex-direction: row; align-items: baseline; gap: var(--s-2); }
.scheda-rapida .delta { display: block; }
.scelta-punti { list-style: none; margin: 0; padding: 0; }
.scelta-punti li { border-top: 1px solid var(--linea); }
.scelta-punti .legame { text-align: left; width: 100%; padding: var(--s-2) 0; }
.scheda-rapida .nome { font-size: var(--t-medio); font-weight: 700; margin: var(--s-2) 0 0; color: var(--inchiostro); }
.scheda-rapida .dist { font-weight: 800; font-size: var(--t-grande); }
.scheda-rapida .azioni { margin-top: var(--s-3); }
.scheda-rapida .azioni .bottone { flex: 1 1 7rem; min-height: 44px; font-size: var(--t-piccolo); }
.scheda-rapida .chiudi { position: absolute; right: var(--s-2); top: var(--s-2); }
.scheda-rapida { position: relative; }

/* ---------------------------------------------------------------- segnalazioni */
fieldset { min-inline-size: 0; }  /* i fieldset hanno min-content di default: al 200 % sborderebbero */
.form-segnala fieldset, .form-pubblicita fieldset { border: 0; padding: 0; margin: 0; }
.scelta span, .tab-registro td, .tab-prezzi td, .dati dd { overflow-wrap: anywhere; }
.campo textarea, .campo input, .campi-riga input { min-width: 0; width: 100%; }
.form-segnala legend { font-weight: 700; font-size: var(--t-medio); margin-bottom: var(--s-2); }
.scelte { display: grid; gap: var(--s-2); margin-bottom: var(--s-3); }
.scelta { display: flex; align-items: center; gap: var(--s-2); min-height: 44px; padding: var(--s-1) var(--s-2); border: 1px solid var(--linea); border-radius: var(--r-medio); cursor: pointer; }
.scelta input { width: 22px; height: 22px; accent-color: var(--rosso-scuro); margin: 0; }
.scelta:has(input:checked) { border-color: var(--rosso-scuro); background: var(--rosso-tinta); }
.campo { display: flex; flex-direction: column; gap: var(--s-1); font-weight: 600; margin-bottom: var(--s-3); font-size: var(--t-piccolo); }
.campo textarea, .campo input, .campo select { font: var(--t-base) var(--f-testo); padding: var(--s-2) var(--s-3); border: 2px solid var(--linea-forte); border-radius: var(--r-medio); background: var(--bianco); color: var(--inchiostro); min-height: 44px; }
.campo select { min-width: 0; width: 100%; }
.campi-riga { display: flex; gap: var(--s-2); flex-wrap: wrap; }
.campi-riga input { flex: 1 1 8rem; font: var(--t-base) var(--f-testo); padding: var(--s-2) var(--s-3); border: 2px solid var(--linea-forte); border-radius: var(--r-medio); min-height: var(--tocco); }
.form-id label { font-weight: 600; font-size: var(--t-piccolo); display: block; margin-bottom: var(--s-1); }

/* ---------------------------------------------------------------- legenda e soglie in "Come funziona" */
.legenda span { margin-right: var(--s-2); }
.formula { background: var(--fondo); border: 1px solid var(--linea); border-radius: var(--r-medio); padding: var(--s-3); overflow-x: auto; white-space: pre; font-size: var(--t-nota); }
.elenco-comuni summary { cursor: pointer; font-weight: 600; color: var(--rosso-scuro); min-height: 44px; display: flex; align-items: center; }

/* ---------------------------------------------------------------- tre medie, riga impostazioni */
.tre-medie { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-2); background: var(--bianco); border: 1px solid var(--linea); border-radius: var(--r-grande); padding: var(--s-3) var(--s-3) var(--s-2); margin: var(--s-3) 0; }
.tre-medie .media { display: grid; gap: 2px; text-align: center; }
.tre-medie .media .eti { font-size: var(--t-nota); text-transform: uppercase; letter-spacing: .06em; color: var(--tenue); font-weight: 700; }
.tre-medie .media .eti small { text-transform: none; letter-spacing: 0; font-weight: 500; }
.tre-medie .media b { font-size: var(--t-grande); font-weight: 800; color: var(--inchiostro); }
.tre-medie .unita-medie { grid-column: 1 / -1; text-align: center; margin: var(--s-1) 0 0; }
.riga-impostazioni { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-1) var(--s-3); font-size: var(--t-piccolo); font-weight: 600; background: var(--rosso-tinta); border-radius: var(--r-medio); padding: var(--s-2) var(--s-3); margin: var(--s-3) 0 var(--s-2); }
.riga-impostazioni a { min-height: 32px; display: inline-flex; align-items: center; }
.riga-impostazioni .ordina { margin-left: auto; font-weight: 500; color: var(--tenue); }
.chip-altri { display: inline-flex; align-items: center; gap: var(--s-2); }
.chip-altri summary { list-style: none; cursor: pointer; min-height: 44px; display: inline-flex; align-items: center; padding: 0 var(--s-3); border-radius: var(--r-pillola); border: 2px dashed var(--linea-forte); color: var(--tenue); font-weight: 600; }
.chip-altri summary::-webkit-details-marker { display: none; }

/* ---------------------------------------------------------------- spazi promozionali (A card, B banner): etichetta "Promozione" sempre visibile,
   nel flusso della pagina (mai sopra barra, chip, mappa o schede). B: sotto i filtri solo su computer, dopo il 10o risultato solo
   su telefono, laterale su comune/provincia solo su computer. */
.spazio { position: relative; background: var(--bianco); border: 1px dashed var(--linea-forte); border-radius: var(--r-grande); padding: var(--s-3) var(--s-4); margin: var(--s-3) 0; }
.promo-eti { position: absolute; right: var(--s-3); top: var(--s-2); font-size: .7rem; line-height: 1.6; text-transform: uppercase; letter-spacing: .08em; color: var(--tenue); font-weight: 700; border: 1px solid var(--linea-forte); border-radius: var(--r-pillola); padding: 0 .5em; background: var(--fondo); }
.promo-corpo { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-1) var(--s-3); }
.promo-titolo { font-weight: 800; margin: 0; color: var(--inchiostro); flex: 1 1 100%; padding-right: 6.5rem; }
.promo-sotto { margin: 0; color: var(--tenue); font-size: var(--t-piccolo); flex: 1 1 12rem; max-width: 36rem; }
/* banner tra gli annunci (A dopo la 5a riga e poi ogni 10): stessa card tratteggiata, senza barra colorata a sinistra (mai
   confondibile con un risultato), nome nel rosso dell'identita', testo che va a capo senza allargare l'elenco */
.spazio-a.pos-elenco .promo-titolo { color: var(--rosso-scuro); }
.spazio-a.pos-elenco .promo-sotto { line-height: 1.45; }
.promo-vai { min-height: 40px; font-size: var(--t-piccolo); padding: 0 var(--s-3); flex: 0 0 auto; }
.spazio-b.pos-filtri, .spazio-b.pos-laterale { display: none; }
@media (min-width: 48rem) {
  .spazio-b.pos-filtri { display: block; }
  .spazio-b.pos-elenco { display: none; }
  .con-laterale { display: grid; grid-template-columns: 1fr 300px; gap: var(--s-4); align-items: start; }
  .con-laterale > .spazio-b.pos-laterale { display: block; grid-column: 2; grid-row: 1 / span 3; min-height: 250px; margin: 0; position: sticky; top: calc(var(--tocco) + var(--s-4)); }
  .con-laterale > .spazio-b.pos-laterale .promo-corpo { flex-direction: column; align-items: flex-start; gap: var(--s-2); }
  .con-laterale > :not(.spazio) { grid-column: 1; }
}

/* ---------------------------------------------------------------- consenso (solo con Analytics attivo) */
.consenso { position: fixed; left: var(--s-3); right: var(--s-3); bottom: calc(var(--sotto-barra) + var(--s-3)); z-index: 20; background: var(--bianco); border: 1px solid var(--linea-forte); border-radius: var(--r-grande); box-shadow: var(--ombra-forte); padding: var(--s-3) var(--s-4); max-width: var(--larghezza); margin: 0 auto; font-size: var(--t-piccolo); }
.consenso-azioni { display: flex; gap: var(--s-2); }
.consenso-azioni .bottone { flex: 1 1 0; }

/* ---------------------------------------------------------------- movimento (solo CSS/SVG, leggero) */
@keyframes entra { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@keyframes pop { from { opacity: 0; transform: scale(.3); } to { opacity: 1; transform: scale(1); } }
@keyframes sale { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
@media (max-width: 22rem) {
  :root { --t-prezzo: 1.5rem; --t-titolo: 1.5rem; }
  .riga .dist { font-size: var(--t-medio); }
  .tab-prezzi, .tab-registro { display: block; width: 100%; }
}
@media (min-width: 48rem) {
  :root { --t-titolo: 2rem; --t-cap: 3rem; --barra-nav-h: 0px; --sotto-barra: 0px; }
  .contenuto { padding-top: var(--s-5); }
  .mappa { height: 420px; }
  .scelte { grid-template-columns: 1fr 1fr; }
  /* computer: la STESSA barra in alto, nella testata fissa (sticky) */
  .testata { position: sticky; top: 0; z-index: 40; box-shadow: 0 2px 10px rgba(34, 23, 26, .2); }
  .barra-nav { position: static; display: flex; flex: 0 1 auto; gap: var(--s-1); background: none; border: 0; box-shadow: none; padding: 0; }
  .barra-nav .voce { flex: 0 0 auto; flex-direction: row; gap: var(--s-2); min-height: 44px; padding: 0 var(--s-3); font-size: var(--t-piccolo); border-top: 0; border-bottom: 3px solid transparent; border-radius: var(--r-medio) var(--r-medio) 0 0; }
  .barra-nav .voce[aria-current="page"] { border-bottom-color: #fff; }
  .barra-nav .voce svg { width: 1.25rem; height: 1.25rem; }
  [id] { scroll-margin-top: calc(var(--tocco) + var(--s-4)); }
}
@media print {
  .barra-nav, .azioni, .filtri, .mappa, .banda-anteprima { display: none; }
  .testata { position: static; }
  body { padding-bottom: 0; }
}

/* ---------------------------------------------------------------- pagina "Altro" e "Chi siamo" */
.menu-altro { padding: 0; overflow: hidden; }
.elenco-menu { list-style: none; margin: 0; padding: 0; }
.elenco-menu li + li { border-top: 1px solid var(--linea); }
.elenco-menu a, .elenco-menu .in-attesa { display: flex; flex-direction: column; gap: 2px; padding: var(--s-3) var(--s-4); min-height: 56px; justify-content: center; text-decoration: none; color: var(--inchiostro); }
.elenco-menu a b { color: var(--rosso-scuro); font-size: var(--t-medio); }
.elenco-menu a:hover, .elenco-menu a:focus-visible { background: var(--rosso-tinta); }
.elenco-menu a:hover b { text-decoration: underline; }
.elenco-menu .in-attesa { color: var(--tenue); cursor: default; }
.elenco-menu .in-attesa b { font-size: var(--t-medio); font-weight: 700; color: var(--tenue); }
.chi-siamo p { font-size: var(--t-medio); }
.chi-siamo p:last-child { margin-bottom: 0; }
.tab-oggi .numero { font-size: var(--t-grande); font-weight: 800; }

/* ---------------------------------------------------------------- pagina "Pubblicita' e collaborazioni" (punto 3) */
.numeri-sito { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-2); margin: var(--s-3) 0; padding: 0; list-style: none; }
.numeri-sito li { display: grid; gap: 2px; text-align: center; background: var(--fondo); border: 1px solid var(--linea); border-radius: var(--r-medio); padding: var(--s-3) var(--s-2); }
.numeri-sito .eti { font-size: var(--t-nota); text-transform: uppercase; letter-spacing: .06em; color: var(--tenue); font-weight: 700; }
.numeri-sito b { font-size: var(--t-grande); font-weight: 800; color: var(--inchiostro); }
.numeri-sito small { color: var(--tenue); }
.offerta { list-style: none; padding: 0; margin: 0; }
.offerta li { padding: var(--s-3) 0; border-top: 1px solid var(--linea); margin: 0; }
.offerta li:first-child { border-top: 0; padding-top: 0; }
.offerta h3 { margin: 0 0 var(--s-1); display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); }
.offerta p { margin: 0; }
.tag-stato { font-size: var(--t-nota); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; padding: 1px var(--s-2); border-radius: var(--r-pillola); border: 1px solid; }
.tag-stato.attivo { color: var(--fascia-verde-testo); background: var(--fascia-verde-fondo); border-color: var(--fascia-verde); }
.tag-stato.progetto { color: var(--fascia-giallo-testo); background: var(--fascia-giallo-fondo); border-color: var(--fascia-giallo-bordo); }
@media (min-width: 48rem) { .numeri-sito { grid-template-columns: repeat(4, 1fr); } }
.prova-passi li { margin-bottom: var(--s-3); }
.prova-passi + .azioni { margin-top: var(--s-4); }