/* GRAFICA NUOVA (copia di lavoro, 1/11/2026). Carattere e mappa valgono ovunque; tutto il resto solo da 64rem (1024 px) in su:
   il telefono resta la schermata di prima. Griglia della home a 1440: 32 + 440 risposta + mappa fino al bordo. */

@font-face { font-family: "Barlow"; font-weight: 400; font-display: swap; src: url("vendor/fonts/barlow-400.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-weight: 500; font-display: swap; src: url("vendor/fonts/barlow-500.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-weight: 600; font-display: swap; src: url("vendor/fonts/barlow-600.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-weight: 700; font-display: swap; src: url("vendor/fonts/barlow-700.woff2") format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-weight: 600; font-display: swap; src: url("vendor/fonts/barlow-condensed-600.woff2") format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-weight: 700; font-display: swap; src: url("vendor/fonts/barlow-condensed-700.woff2") format("woff2"); }

:root {
  --f-testo: "Barlow", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --f-cifre: "Barlow Condensed", "Barlow", system-ui, sans-serif;
  --fondo: #f5f3f1;
  --linea: #e6e0dc;
  --tabellone: #1b1315;          /* il totem del distributore */
  --tabellone-2: #2a2023;
  --tabellone-tenue: #b9adb0;
  --prezzo-basso: #58e08f;       /* verde "economico" leggibile sul tabellone */
}
body { font-variant-numeric: tabular-nums; }

/* mappa quieta: il colore sono i prezzi */
.leaflet-container .leaflet-pane.leaflet-tile-pane { filter: saturate(.14) contrast(.9) brightness(1.06); }
/* la zona di tocco di un puntino con prezzo vecchio prendeva lo sfondo giallo di .stale: un riquadro di 44 px sulla mappa */
.mappa .puntino.stale { background: none; border: 0; border-radius: 0; padding: 0; }
.mappa.schermo .puntino .eti { background: #fff; font-family: var(--f-cifre); font-size: 14px; font-weight: 700; line-height: 1; padding: 3px 5px; border-radius: 4px; }
.mappa.schermo .puntino.f-verde .eti, .mappa.schermo .puntino.f-giallo .eti, .mappa.schermo .puntino.f-rosso .eti { background: #fff; color: var(--fascia-testo); border: 1.5px solid var(--fascia-bordo); }
.mappa.schermo .puntino.top .eti { background: var(--fascia-verde); color: #fff; border-color: var(--fascia-verde); font-size: 16px; padding: 4px 7px; z-index: 2; }

.totem { display: none; }

/* Simbolo del distributore sulla mappa, da vicino: logo o iniziali su fondo bianco, l'anello porta il colore della fascia di prezzo */
.mappa.schermo:not(.stemmi) .puntino i > * { display: none; }
.mappa.schermo.stemmi .puntino.stemmato i, .mappa.schermo.stemmi .puntino.stemmato.top i { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; margin: -16px 0 0 -16px; padding: 3px; overflow: hidden; background: #fff; border: 3px solid var(--fascia-grigio); box-shadow: 0 1px 4px rgba(0, 0, 0, .4); }
.mappa.schermo.stemmi .puntino.stemmato.f-verde i { background: #fff; border-color: var(--fascia-verde); }
.mappa.schermo.stemmi .puntino.stemmato.f-giallo i { background: #fff; border-color: var(--fascia-arancione); }
.mappa.schermo.stemmi .puntino.stemmato.f-rosso i { background: #fff; border-color: var(--fascia-rosso); }
.mappa.schermo.stemmi .puntino.stemmato.top i { width: 38px; height: 38px; margin: -19px 0 0 -19px; border-width: 4px; }
.mappa.schermo.stemmi .puntino.stemmato.stale i { border-style: dashed; }
.mappa.schermo .puntino.stemmato i img { display: block; width: 100%; height: 100%; object-fit: contain; }
.mappa.schermo.stemmi .puntino.stemmato i .ini { color: var(--inchiostro); font: 800 11px/1 var(--f-testo); letter-spacing: 0; }
.mappa.schermo.stemmi .puntino.stemmato .eti { bottom: 36px; }
.mappa.schermo.stemmi .puntino.stemmato.top .eti { bottom: 40px; }
@media (max-width: 48rem) {
  .mappa.schermo.stemmi .puntino.stemmato i, .mappa.schermo.stemmi .puntino.stemmato.top i { width: 27px; height: 27px; margin: -13.5px 0 0 -13.5px; padding: 2px; border-width: 2.5px; }
  .mappa.schermo.stemmi .puntino.stemmato.top i { width: 32px; height: 32px; margin: -16px 0 0 -16px; }
  .mappa.schermo.stemmi .puntino.stemmato i .ini { font-size: 10px; }
  .mappa.schermo.stemmi .puntino.stemmato .eti { bottom: 33px; }
  .mappa.schermo.stemmi .puntino.stemmato.top .eti { bottom: 36px; }
}

/* Prima schermata: solo carburante e dove sei. Modalita', distanza e altri filtri compaiono dopo la ricerca (senza JS restano visibili) */
html.js .schermata[data-stato="1"] .su-comandi { display: none; }

/* Strada sulla mappa: barra sotto la mappa con minuti, km e il link al navigatore */
.percorso-barra { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3); padding: var(--s-2) var(--s-3); background: var(--bianco); border-top: 1px solid var(--linea); }
.percorso-testo { flex: 1 1 14rem; min-width: 0; margin: 0; font-size: .9375rem; line-height: 1.3; }
.percorso-testo b { font-size: 1.0625rem; }
.percorso-vai { flex: 0 0 auto; min-height: 44px; }
.percorso-chiudi { flex: 0 0 auto; min-height: 44px; }
.mappa .leaflet-overlay-pane svg, .mappa .leaflet-overlay-pane canvas { max-width: none; max-height: none; }
/* con la strada in vista contano partenza e arrivo: gli altri distributori si fanno da parte */
.mappa.con-percorso .puntino-icona:not(.percorso-arrivo) { opacity: .3; }
.mappa.con-percorso .puntino-icona:not(.percorso-arrivo) .eti { display: none; }
.mappa.con-percorso .puntino-icona.percorso-arrivo { z-index: 2000 !important; }
.mappa.con-percorso .puntino-icona.percorso-arrivo .eti { display: block; }

/* Prezzo vecchio sulla mappa: grigio e tratteggiato, mai il colore di una fascia, cosi' non sembra un affare di oggi */
.mappa.schermo .puntino.stale i, .mappa.schermo .puntino.stale.f-verde i, .mappa.schermo .puntino.stale.f-giallo i, .mappa.schermo .puntino.stale.f-rosso i { background: var(--fascia-grigio); }
.mappa.schermo.stemmi .puntino.stemmato.stale i, .mappa.schermo.stemmi .puntino.stemmato.stale.f-verde i, .mappa.schermo.stemmi .puntino.stemmato.stale.f-giallo i, .mappa.schermo.stemmi .puntino.stemmato.stale.f-rosso i { background: #fff; border: 3px dashed var(--fascia-grigio); }
.mappa.schermo .puntino.stale .eti, .mappa.schermo .puntino.stale.f-verde .eti, .mappa.schermo .puntino.stale.f-giallo .eti, .mappa.schermo .puntino.stale.f-rosso .eti { background: var(--fascia-grigio-fondo); color: var(--fascia-grigio-testo); border: 1.5px dashed var(--fascia-grigio); }

/* Prezzo piu' basso ma non aggiornato: riga sotto la risposta, tocco = scheda sulla mappa */
.prezzo-vecchio { display: block; width: 100%; margin: var(--s-3) 0 0; padding: var(--s-3); border: 1.5px dashed var(--fascia-arancione); border-radius: var(--r-medio); background: var(--bianco); color: var(--inchiostro); font: 500 .9375rem/1.35 var(--f-testo); text-align: left; cursor: pointer; }
.prezzo-vecchio[hidden] { display: none; }
.prezzo-vecchio:hover { background: var(--rosso-tinta); }
.prezzo-vecchio-nota { margin: 2px 0 0; color: var(--inchiostro); font-weight: 600; }

/* Telefono e tablet, dopo la ricerca: una riga sola (riepilogo, CAP, posizione) e piu' mappa. Carburante e filtri si riaprono dal riepilogo. */
.riepilogo-filtri { display: none; }
@media (max-width: 63.99rem) {
  .schermata[data-stato="2"] .riepilogo-filtri { display: flex; flex: 0 0 auto; flex-direction: column; justify-content: center; min-width: 0; min-height: 48px; padding: 2px var(--s-3); border: 1.5px solid var(--rosso-scuro); border-radius: var(--r-medio); background: var(--bianco); color: var(--inchiostro); font: inherit; line-height: 1.15; text-align: left; cursor: pointer; touch-action: manipulation; }
  .schermata[data-stato="2"] .riepilogo-filtri b { font-size: .9375rem; font-weight: 700; white-space: nowrap; }
  .schermata[data-stato="2"] .riepilogo-filtri small { font-size: .75rem; color: var(--tenue); white-space: nowrap; }
  .schermata[data-stato="2"] .riepilogo-filtri[aria-expanded="true"] { background: var(--rosso-tinta); }
  .schermata[data-stato="2"]:not(.filtri-aperti) .carb-grandi, .schermata[data-stato="2"]:not(.filtri-aperti) .su-comandi { display: none; }
  .schermata[data-stato="2"] .su-apertura { align-items: stretch; }
  .schermata[data-stato="2"] .campo-blocco { order: 1; flex: 1 1 0; min-width: 0; }
  .schermata[data-stato="2"] .campo-posto { width: 100%; min-height: 48px; }
  .schermata[data-stato="2"] .bottone-posizione { order: 2; width: 48px; min-height: 48px; padding: 0; justify-content: center; }
  .schermata[data-stato="2"] .bottone-posizione .testo-bottone { display: none; }
  .su-esito .legenda.legenda-schermo { justify-content: space-between; white-space: nowrap; }
  .su-esito .legenda.legenda-schermo .chi { display: none; }
}
@media (max-width: 48rem) {
  .schermata[data-stato="2"] .su-esito .mappa { height: 46vh; min-height: 260px; }
}

/* CAP scritto ma carburante non scelto: si deve capire subito che manca solo quello (tutti e quattro, non due) */
.schermata[data-stato="1"] .riga-ricerca.avviso-riga { margin: var(--s-2) 0; padding: var(--s-3) var(--s-4); background: var(--rosso-scuro); color: #fff; border-radius: var(--r-medio); font-size: 1.0625rem; font-weight: 600; line-height: 1.3; }
.carb-grandi.chiedi .chip span, .carb-grandi.chiedi .chip-grande span { border-color: var(--rosso-scuro); box-shadow: 0 0 0 2px var(--rosso-scuro); }
.carb-grandi.lampo .chip span { animation: chiedi-lampo 420ms ease-out 2; }
@keyframes chiedi-lampo { 50% { transform: scale(1.035); } }
@media (prefers-reduced-motion: reduce) { .carb-grandi.lampo .chip span { animation: none; } }

@media (min-width: 64rem) {
  :root { --barra-nav-h: 0px; --sotto-barra: 0px; --alto-testata: 64px; --alto-barra: 72px; --larghezza: 70rem; }
  body, .schermata-unica { padding-bottom: 0; }

  /* ---------- intestazione: nome a sinistra, voci a destra, niente barra in basso */
  .testata, .schermata-unica .testata { position: sticky; top: 0; z-index: 1100; display: flex; flex-wrap: nowrap; align-items: center; justify-content: space-between; height: var(--alto-testata); min-height: 0; padding: 0 var(--s-6); box-shadow: none; }
  .marchio, .schermata-unica .testata .marchio { display: inline-flex; align-items: center; gap: .6rem; font-size: 1.25rem; font-weight: 700; letter-spacing: -.005em; }
  .barra-nav { position: static; left: auto; right: auto; bottom: auto; transform: none; width: auto; flex: 0 0 auto; display: flex; gap: var(--s-1); background: none; border: 0; border-radius: 0; box-shadow: none; padding: 0; }
  .barra-nav .voce { flex: 0 0 auto; flex-direction: row; gap: .5rem; min-height: 40px; padding: 0 .9rem; font-size: 1rem; font-weight: 500; border: 0; border-radius: var(--r-medio); color: rgba(255, 255, 255, .82); transition: background var(--d-veloce), color var(--d-veloce); }
  .barra-nav .voce svg { width: 1.125rem; height: 1.125rem; }
  .barra-nav .voce:hover { background: rgba(255, 255, 255, .1); color: #fff; }
  .barra-nav .voce[aria-current="page"] { background: rgba(255, 255, 255, .16); color: #fff; font-weight: 600; border: 0; }

  /* ---------- home: pagina piena */
  .schermata-unica .contenuto { max-width: none; padding: 0; }
  .schermata-unica .pie { max-width: none; padding: var(--s-5) var(--s-6); }
  .schermata .spazio-a, .schermata > .spazio { max-width: 1240px; margin: var(--s-6) auto; }

  /* controlli comuni ai due stati */
  .carb-grandi { margin: 0; }
  .carb-grandi .chip, .carb-grandi .chip-grande { flex: none; margin: 0; }
  .carb-grandi .chip span, .carb-grandi .chip-grande span { display: flex; align-items: center; justify-content: center; width: 100%; border: 1.5px solid var(--linea-forte); border-radius: var(--r-medio); background: var(--bianco); color: var(--inchiostro); font-weight: 600; white-space: nowrap; transition: background var(--d-veloce), border-color var(--d-veloce), color var(--d-veloce); }
  .carb-grandi .chip:hover span { border-color: var(--rosso-scuro); }
  .carb-grandi .chip input:checked + span { background: var(--rosso-scuro); border-color: var(--rosso-scuro); color: #fff; }
  .chip-cmd, .filtri-cmd { min-height: 44px; border: 1.5px solid var(--linea); border-radius: var(--r-medio); background: var(--bianco); font-weight: 500; font-size: 1rem; white-space: nowrap; transition: border-color var(--d-veloce); }
  .chip-cmd:hover, .filtri-cmd:hover { border-color: var(--rosso-scuro); }
  .filtri-cmd { width: 44px; padding: 0; }
  .su-comandi { flex-wrap: nowrap; margin: 0; }
  .bottone-posizione { transition: background var(--d-veloce), transform var(--d-veloce); box-shadow: none; }
  .bottone-posizione:active { transform: translateY(1px); }

  /* le scelte (self, distanza, filtri) si aprono come un menu: non spostano niente */
  .form-posto { position: relative; }
  .form-posto > .su-scelta { position: absolute; z-index: 1050; background: var(--bianco); border: 1px solid var(--linea); border-radius: var(--r-grande); padding: var(--s-4); box-shadow: var(--ombra-forte); margin: 0; }
  .form-posto > .su-scelta .chip span { min-height: 40px; }
  .form-posto > .su-scelta legend { margin-bottom: var(--s-2); font-size: 1rem; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--inchiostro); }

  /* ---------- STATO 1: domanda a sinistra, totem a destra, tutto nello schermo */
  .schermata[data-stato="1"] { display: grid; grid-template-columns: minmax(0, 1fr) 380px; column-gap: clamp(2.5rem, 5vw, 5rem); align-items: center; max-width: 1240px; margin: 0 auto; padding: 0 var(--s-6); }
  .schermata[data-stato="1"] > .form-posto, .schermata[data-stato="1"] > .totem { min-height: calc(100vh - var(--alto-testata)); }
  .schermata[data-stato="1"] > .spazio, .schermata[data-stato="1"] > .spazio-a { grid-column: 1 / -1; width: 100%; }
  .schermata[data-stato="1"] .form-posto { display: flex; flex-direction: column; justify-content: center; gap: var(--s-5); padding: var(--s-5) 0; }
  .schermata[data-stato="1"] .carb-grandi { order: -2; scroll-margin-top: calc(var(--alto-testata) + var(--s-3)); }
  .schermata[data-stato="1"] .riga-ricerca.avviso-riga { order: -1; margin: calc(var(--s-3) * -1) 0 0; }
  .schermata[data-stato="1"] .frase-home { order: -3; margin: 0 0 var(--s-2); font-size: clamp(1.75rem, 2.35vw, 2.25rem); line-height: 1.15; font-weight: 600; letter-spacing: -.02em; color: var(--inchiostro); }
  .schermata[data-stato="1"] .carb-grandi { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-3); }
  .schermata[data-stato="1"] .domanda-carb { float: none; padding: 0; margin: 0 0 var(--s-3); font-size: 1.125rem; font-weight: 600; color: var(--inchiostro); }
  .schermata[data-stato="1"] .carb-grandi .chip span { min-height: 64px; font-size: 1.125rem; }
  .schermata[data-stato="1"] .su-apertura { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto auto; column-gap: var(--s-4); row-gap: var(--s-2); min-height: 0; padding: 0; }
  .schermata[data-stato="1"] .bottone-posizione { grid-column: 1; grid-row: 1 / 3; align-self: end; width: 100%; min-height: 68px; margin: 0; padding: .5rem var(--s-5); border-radius: var(--r-medio); font-size: 1.125rem; font-weight: 600; line-height: 1.2; text-align: left; }
  .schermata[data-stato="1"] .bottone-posizione:hover { background: var(--rosso-scuro-hover); }
  .schermata[data-stato="1"] .oppure { grid-column: 2; grid-row: 1; margin: 0; text-align: left; font-size: 1rem; color: var(--tenue); }
  .schermata[data-stato="1"] .campo-blocco { grid-column: 2; grid-row: 2; position: relative; }
  .schermata[data-stato="1"] .campo-posto { width: 100%; min-height: 68px; padding: 0 var(--s-4); border: 1.5px solid var(--linea-forte); border-radius: var(--r-medio); font-size: 1.375rem; font-weight: 600; letter-spacing: 0; text-align: left; }
  .schermata[data-stato="1"] .campo-posto::placeholder { font-weight: 400; color: #8d8086; }
  .schermata[data-stato="1"] .suggerimenti { position: absolute; left: 0; right: 0; top: 100%; z-index: 1000; }
  /* qui la colonna e' centrata e alta quanto lo schermo: la scelta si apre al suo posto, sotto i filtri */
  .schermata[data-stato="1"] .form-posto > .su-scelta { position: static; box-shadow: none; }

  /* il totem del distributore: le medie d'Italia di oggi, come si leggono dalla strada */
  .schermata[data-stato="1"] > .totem { display: flex; align-items: center; }
  .totem-tavola { width: 100%; padding: var(--s-6); background: var(--tabellone); color: #fff; border-radius: 20px; }
  .totem-tavola h2 { margin: 0 0 var(--s-5); font-size: 1.25rem; font-weight: 600; letter-spacing: -.005em; color: #fff; }
  .totem-righe { margin: 0; }
  .totem-riga { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-3); padding: var(--s-3) 0; }
  .totem-riga + .totem-riga { border-top: 1px solid var(--tabellone-2); }
  .totem-riga { align-items: center; }
  .totem-riga dt { font-size: 1.125rem; font-weight: 600; line-height: 1.2; color: #fff; }
  .totem-riga dt small { display: block; font-size: .875rem; font-weight: 400; color: var(--tabellone-tenue); }
  .totem-riga dd { margin: 0; white-space: nowrap; font-family: var(--f-cifre); font-size: 3.75rem; font-weight: 700; line-height: 1; letter-spacing: -.01em; }
  .totem-riga dd small { margin-left: .25rem; font-family: var(--f-testo); font-size: .9375rem; font-weight: 500; letter-spacing: 0; color: var(--tabellone-tenue); }
  .totem-nota { margin: var(--s-4) 0 0; font-size: .9375rem; line-height: 1.4; color: var(--tabellone-tenue); }

  /* ---------- STATO 2: una barra sola, risposta a sinistra, mappa grande a destra */
  .schermata[data-stato="2"] { display: block; }
  .schermata[data-stato="2"] > .totem { display: none; }
  .schermata[data-stato="2"] .form-posto { display: flex; align-items: center; gap: var(--s-3); height: var(--alto-barra); padding: 0 var(--s-6); background: var(--bianco); border-bottom: 1px solid var(--linea); }
  .schermata[data-stato="2"] .carb-grandi { display: flex; flex-wrap: nowrap; gap: var(--s-2); flex: 0 0 auto; }
  .schermata[data-stato="2"] .carb-grandi .chip span, .schermata[data-stato="2"] .chip-grande span { min-height: 44px; padding: 0 var(--s-4); font-size: 1rem; }
  .schermata[data-stato="2"] .su-comandi { flex: 0 0 auto; padding-left: var(--s-3); border-left: 1px solid var(--linea); }
  .schermata[data-stato="2"] .su-apertura { flex: 1 1 auto; min-width: 16rem; padding: 0; margin-left: auto; align-items: center; }
  .schermata[data-stato="2"] .bottone-posizione { min-height: 44px; border-radius: var(--r-medio); font-weight: 600; }
  .schermata[data-stato="2"] .campo-posto { min-height: 44px; border: 1.5px solid var(--linea); border-radius: var(--r-medio); font-weight: 600; letter-spacing: 0; }
  .schermata[data-stato="2"] .campo-posto:hover { border-color: var(--linea-forte); }
  .schermata[data-stato="2"] .riga-ricerca.avviso-riga { position: absolute; top: 100%; right: var(--s-6); z-index: 1050; margin: 0; padding: var(--s-2) var(--s-4); background: var(--avviso-fondo); color: var(--avviso-testo); border-radius: 0 0 var(--r-medio) var(--r-medio); font-weight: 500; }
  .schermata[data-stato="2"] #scelta-mod, .schermata[data-stato="2"] #scelta-km, .schermata[data-stato="2"] #pannello-filtri { top: calc(var(--alto-barra) - 6px); left: var(--s-6); max-width: 44rem; }

  .su-esito:not([hidden]) { display: grid; grid-template-columns: 440px minmax(0, 1fr); height: calc(100vh - var(--alto-testata) - var(--alto-barra)); min-height: 34rem; }
  .su-esito .risposta { grid-column: 1; grid-row: 1; min-height: 0; overflow-y: auto; margin: 0; padding: var(--s-4) var(--s-5) var(--s-4) var(--s-6); background: var(--fondo); border: 0; border-radius: 0; box-shadow: none; }
  .su-esito .mappa-blocco { grid-column: 2; grid-row: 1; display: flex; flex-direction: column; min-height: 0; margin: 0; }
  .su-esito .mappa { flex: 1 1 auto; height: auto; min-height: 0; max-height: none; border: 0; border-radius: 0; }
  .su-esito .legenda.legenda-schermo { flex: 0 0 auto; padding: var(--s-2) var(--s-4); background: var(--bianco); border: 0; border-bottom: 1px solid var(--linea); border-radius: 0; }
  .su-esito .mappa-strumenti { flex: 0 0 auto; border: 0; border-top: 1px solid var(--linea); border-radius: 0; background: var(--bianco); }
  .su-esito .mappa-nota { position: absolute; left: var(--s-3); top: 3.25rem; z-index: 5; margin: 0; padding: var(--s-1) var(--s-3); background: var(--bianco); border-radius: var(--r-piccolo); }
  .scheda-rapida.schermo { left: auto; right: var(--s-4); width: 24rem; }

  /* la risposta: lo stesso tabellone, con il prezzo piu' basso */
  .riga-riferimento { margin: 0 0 var(--s-3); font-size: .875rem; line-height: 1.35; color: var(--tenue); }
  .riga-dati { display: block; white-space: normal; }
  .migliore:not([hidden]) { display: block; padding: var(--s-5); background: var(--tabellone); color: #fff; border: 0; border-radius: 18px; }
  .migliore .carb-migliore { margin: 0; font-size: 1rem; font-weight: 500; color: var(--tabellone-tenue); }
  .migliore .prezzo-migliore { display: flex; align-items: baseline; gap: .375rem; margin: var(--s-1) 0 var(--s-2); }
  .migliore .prezzo-migliore .v-prezzo { font-family: var(--f-cifre); font-size: 5.25rem; font-weight: 700; line-height: .95; letter-spacing: -.01em; color: var(--prezzo-basso); }
  .migliore .prezzo-migliore .v-unita { font-size: 1.125rem; font-weight: 500; color: var(--tabellone-tenue); }
  .migliore .chi-migliore { margin: 0; font-size: 1.0625rem; line-height: 1.3; font-weight: 600; color: #fff; }
  .migliore .chi-migliore b, .migliore .chi-migliore span { color: inherit; }
  .migliore .chi-migliore .v-km { font-weight: 500; color: var(--tabellone-tenue); }
  .migliore .pieno-migliore { margin: var(--s-2) 0 0; font-size: .9375rem; line-height: 1.35; color: #d9d0d2; }
  .migliore .giudizio { margin: var(--s-3) 0 0; font-size: .9375rem; line-height: 1.35; color: var(--inchiostro); }
  .migliore > .portami { display: flex; justify-content: center; align-items: center; gap: .5rem; width: 100%; min-height: 48px; margin: var(--s-4) 0 0; background: #fff; color: var(--rosso-scuro); border: 0; border-radius: var(--r-medio); font-size: 1.0625rem; font-weight: 700; box-shadow: none; text-decoration: none; transition: background var(--d-veloce); }
  .migliore > .portami:hover { background: #f1e7e9; color: var(--rosso-scuro-hover); }

  .altri { margin-top: var(--s-2); }
  .altri li { min-height: 56px; gap: var(--s-3); padding: var(--s-1) 0; border-bottom: 1px solid var(--linea); font-size: .9375rem; line-height: 1.3; }
  .altri .chi { gap: var(--s-3); }
  .altri .chi .p { font-family: var(--f-cifre); font-size: 1.75rem; font-weight: 700; line-height: 1; min-width: 3.25rem; }
  .altri .chi b { font-weight: 600; }
  .altri .nome-via { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
  .altri .portami-mini { width: 38px; height: 38px; }
  .altri .portami-mini svg { width: 18px; height: 18px; }
  .altri .km { font-size: .875rem; }
  .altri .portami-mini { transition: color var(--d-veloce), background var(--d-veloce); }
}

/* ---------- le altre pagine: stesso carattere, stessi controlli, larghezza del computer */
@media (min-width: 64rem) {
  h1 { letter-spacing: -.02em; }
  .chip span { border-radius: var(--r-medio); }
  body:not(.schermata-unica) .carb-grandi { align-items: center; }
  body:not(.schermata-unica) .carb-grandi .chip span, body:not(.schermata-unica) .carb-grandi .chip-grande span { min-height: 48px; padding: 0 1.125rem; font-size: 1rem; }
  .prezzo { font-family: var(--f-cifre); }

  /* /vicino/: le schede occupano tutta la riga, anche quando sono due; "Portami qui" era testo sopra un cerchio di 44 px */
  .consigliati { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
  .consigliato .portami-mini.testo { width: auto; height: auto; min-height: 44px; margin-top: var(--s-2); padding: 0 var(--s-4); border: 0; border-radius: var(--r-medio); background: var(--rosso-scuro); color: #fff; white-space: nowrap; text-decoration: none; font-weight: 600; }
  .consigliato .portami-mini.testo:hover { background: var(--rosso-scuro-hover); color: #fff; }

  /* scheda dell'impianto: chi e dove a sinistra, prezzo e azione a destra, tutto nella prima schermata */
  .intestazione-impianto { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--s-7); align-items: start; padding: var(--s-6); background: var(--bianco); border: 1px solid var(--linea); border-radius: 18px; }
  .intestazione-impianto > * { grid-column: 1; margin-top: 0; }
  .intestazione-impianto h1 { margin: 0 0 var(--s-2); font-size: 2.25rem; color: var(--inchiostro); }
  .intestazione-impianto .indirizzo { font-size: 1.125rem; }
  .intestazione-impianto > .prezzo-in-testa { grid-column: 2; grid-row: 1 / span 3; justify-self: stretch; display: flex; flex-direction: column; align-items: flex-end; gap: var(--s-1); margin: 0; text-align: right; }
  .intestazione-impianto > .prezzo-in-testa .prezzo.grande { font-size: 3.25rem; line-height: 1; }
  .intestazione-impianto > .azioni-testa { grid-column: 2; grid-row: 4 / span 3; justify-self: stretch; align-self: end; margin: var(--s-3) 0 0; }
  .intestazione-impianto > .azioni-testa .bottone { width: 100%; min-width: 16rem; }
}

/* barra su due righe dove non ci sta in una */
@media (min-width: 64rem) and (max-width: 74.99rem) {
  :root { --alto-barra: 124px; }
  .schermata[data-stato="2"] .form-posto { flex-wrap: wrap; align-content: center; row-gap: var(--s-2); }
  .schermata[data-stato="2"] .su-apertura { flex: 1 1 100%; margin-left: 0; }
}
/* schermi bassi: la risposta si stringe invece di uscire */
@media (min-width: 64rem) and (max-height: 820px) {
  .migliore .prezzo-migliore .v-prezzo { font-size: 4.25rem; }
  .migliore:not([hidden]) { padding: var(--s-4); }
  .migliore > .portami { margin-top: var(--s-3); }
  .altri li { min-height: 46px; padding: 0; }
  .altri .chi .p { font-size: 1.5rem; }
  .riga-riferimento { margin-bottom: var(--s-2); }
  .migliore .pieno-migliore { margin-top: var(--s-1); font-size: .875rem; }
  .su-esito .risposta { padding-top: var(--s-3); padding-bottom: var(--s-3); }
  .totem-riga dd { font-size: 3rem; }
  .totem-riga { padding: var(--s-2) 0; }
}
@media (prefers-reduced-motion: reduce) { .bottone-posizione:active { transform: none; } }

/* ---- In viaggio: mappa della risposta (2/11/2026, richiesta del socio) ---- */
.viaggio-mappa { position: relative; z-index: 0; height: min(62vh, 540px); min-height: 300px; margin: var(--s-3) 0 var(--s-4); border-radius: var(--r-grande); overflow: hidden; background: #e9e5dc; box-shadow: var(--ombra); }
@media (max-width: 48rem) { .viaggio-mappa { height: 52vh; margin-left: calc(-1 * var(--s-3)); margin-right: calc(-1 * var(--s-3)); border-radius: 0; } }
.viaggio-mappa .leaflet-popup-content { margin: 10px 12px; font: 500 .9375rem/1.4 var(--f-testo); color: var(--inchiostro); }
.viaggio-mappa .leaflet-popup-content .vm-nota { color: var(--inchiostro-tenue, #555); font-size: .8125rem; }
.viaggio-mappa .vm-portami { display: inline-flex; margin-top: 8px; padding: 8px 12px; font-size: .875rem; color: #fff; }
.vm-ab span { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; margin: -15px 0 0 -15px; border-radius: 50%; background: #1a5fd0; color: #fff; border: 3px solid #fff; box-shadow: 0 1px 5px rgba(0,0,0,.45); font: 700 15px/1 var(--f-testo); }
.vm-top { display: flex; align-items: center; white-space: nowrap; transform: translate(-14px, -14px); filter: drop-shadow(0 1px 3px rgba(0,0,0,.4)); cursor: pointer; }
.vm-top .vm-n { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: var(--fascia-verde); color: #fff; border: 2.5px solid #fff; font: 700 14px/1 var(--f-testo); position: relative; z-index: 1; }
.vm-top .vm-p { margin-left: -8px; padding: 3px 7px 3px 12px; border-radius: 0 6px 6px 0; background: #fff; color: var(--inchiostro); border: 1.5px solid var(--fascia-verde); font: 700 13px/1.2 var(--f-testo); }
.vm-top.f-giallo .vm-n { background: var(--fascia-arancione); } .vm-top.f-giallo .vm-p { border-color: var(--fascia-arancione); }
.vm-top.f-stale .vm-n, .vm-top.f-grigio .vm-n { background: var(--fascia-grigio); } .vm-top.f-stale .vm-p { border-style: dashed; border-color: var(--fascia-grigio); }
.viaggio-elenco .consigliato { position: relative; }
.viaggio-num { position: absolute; top: var(--s-3); right: var(--s-3); z-index: 1; display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; border-radius: 50%; border: 2.5px solid #fff; background: var(--fascia-verde); color: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.35); font: 700 15px/1 var(--f-testo); cursor: pointer; }
.viaggio-elenco .consigliato.f-giallo .viaggio-num { background: var(--fascia-arancione); }
.viaggio-elenco .consigliato.f-grigio .viaggio-num { background: var(--fascia-grigio); }
@media (min-width: 64rem) { .consigliati.viaggio-elenco { grid-auto-flow: row; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); grid-auto-columns: auto; } }
/* In viaggio: tasti Tutti / Solo in autostrada (2/11/2026) */
.viaggio-filtro { display: flex; flex-wrap: wrap; gap: var(--s-2); margin: var(--s-3) 0 0; }
.chip-filtro { min-height: 44px; padding: 0 var(--s-4); border: 1.5px solid var(--rosso-scuro, #7a1023); border-radius: 999px; background: var(--bianco, #fff); color: var(--rosso-scuro, #7a1023); font: 600 .9375rem/1.2 var(--f-testo); cursor: pointer; }
.chip-filtro.attivo { background: var(--rosso-scuro, #7a1023); color: #fff; }
/* In viaggio: scheda del distributore in una finestra sopra la pagina (2/11/2026, richiesta del socio) */
html.in-finestra .testata, html.in-finestra .pie, html.in-finestra #consenso, html.in-finestra .barra-nav { display: none !important; }
html.in-finestra body { padding-bottom: 0 !important; }
.viaggio-scheda { width: min(760px, 94vw); height: min(88vh, 900px); max-width: none; max-height: none; padding: 0; border: 0; border-radius: var(--r-grande); overflow: hidden; box-shadow: 0 10px 40px rgba(0,0,0,.35); background: var(--bianco, #fff); }
.viaggio-scheda[open] { display: flex; flex-direction: column; }
.viaggio-scheda::backdrop { background: rgba(20, 10, 12, .55); }
.viaggio-scheda .vs-testa { display: flex; justify-content: flex-end; padding: 8px; border-bottom: 1px solid var(--linea, #e5e0d8); background: var(--bianco, #fff); }
.viaggio-scheda .vs-chiudi { min-height: 44px; padding: 0 var(--s-4); border: 0; border-radius: var(--r-medio); background: var(--rosso-scuro, #7a1023); color: #fff; font: 600 .9375rem/1 var(--f-testo); cursor: pointer; }
.viaggio-scheda iframe { flex: 1; width: 100%; border: 0; }
@media (max-width: 48rem) { .viaggio-scheda { width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0; border-radius: 0; } }

/* nome del sito nella barra rossa: la regola generale a:hover lo faceva diventare rosso scuro su rosso (quasi invisibile) */
.testata .marchio, .testata .marchio:hover, .testata .marchio:focus-visible, .testata .marchio:active { color: #fff; text-decoration: none; }
.testata .marchio { transition: opacity .2s; }
.testata .marchio:hover { opacity: .82; }
.testata .marchio:focus-visible { outline: 2px solid #fff; outline-offset: 4px; border-radius: 6px; }

/* HOME SUL TELEFONO, schermo iniziale (2/11/2026 notte, richiesta del socio: «armonica e ordinata»). Solo stato 1 e solo sotto
   i 64rem: computer e risultati (stato 2) non cambiano. Un ritmo solo: angoli da 14 px, altezze da 56/64 px, spazi da 12/20 px.
   Ordine: la frase (h1) in cima, poi la domanda con i quattro carburanti in una griglia 2x2 tutti uguali, poi il bottone della
   posizione e il campo CAP/citta' con l'etichetta sopra. */
@media (max-width: 63.99rem) {
  .schermata[data-stato="1"] .form-posto { display: flex; flex-direction: column; gap: 0; padding-top: var(--s-4); }
  .schermata[data-stato="1"] .frase-home { order: -3; margin: 0 0 var(--s-5); font-size: 1.5rem; font-weight: 800; line-height: 1.2; letter-spacing: -.01em; }
  .schermata[data-stato="1"] .riga-ricerca.avviso-riga { order: -2; }
  .schermata[data-stato="1"] .carb-grandi { order: -1; display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); margin: 0 0 var(--s-5); }
  .schermata[data-stato="1"] .carb-grandi > .domanda-carb { grid-column: 1 / -1; margin: 0 0 var(--s-1); font-size: 1.125rem; font-weight: 700; }
  .schermata[data-stato="1"] .carb-grandi .chip, .schermata[data-stato="1"] .carb-grandi .chip-grande { flex: none; min-width: 0; }
  .schermata[data-stato="1"] .carb-grandi .chip span { width: 100%; min-height: 56px; padding: 0 var(--s-3); justify-content: center; border-radius: var(--r-grande); font-size: 1.0625rem; font-weight: 700; line-height: 1.15; text-align: center; }
  .schermata[data-stato="1"] .su-apertura { min-height: 0; gap: var(--s-3); padding: 0 0 var(--s-5); }
  .schermata[data-stato="1"] .bottone-posizione { min-height: 64px; padding: var(--s-3) var(--s-4); gap: var(--s-3); border-radius: var(--r-grande); font-size: 1.125rem; font-weight: 700; line-height: 1.2; box-shadow: none; }
  .schermata[data-stato="1"] .bottone-posizione svg { width: 28px; height: 28px; }
  .schermata[data-stato="1"] .oppure { margin: var(--s-2) 0 0; text-align: left; font-size: 1rem; }
  .schermata[data-stato="1"] .campo-posto { min-height: 64px; padding: 0 var(--s-4); border-radius: var(--r-grande); font-size: 1.25rem; font-weight: 700; letter-spacing: 0; text-align: left; }
  .schermata[data-stato="1"] .campo-posto::placeholder { font-weight: 500; letter-spacing: 0; color: #9c8f93; }
}