/* =====================================================================
   style.css — vetrina pubblica rt-rental-portal
   =====================================================================
   Impianto ispirato ai grandi del noleggio online: una fascia d'apertura
   che dice cosa vendiamo, il modulo di ricerca appoggiato sopra il suo
   bordo, poi una griglia di schede in cui la FOTO comanda e il prezzo si
   legge senza cercarlo.

   Tre regole che tengono insieme il tutto:
     1. la scala tipografica ha pochi gradini e li rispetta ovunque;
     2. lo spazio è generoso in vetrina (si sceglie) e stretto nel
        gestionale (si lavora) — sono due CSS diversi apposta;
     3. mai un'informazione affidata al solo colore.

   Mobile-first davvero: l'ospite arriva col link nel messaggio di
   benvenuto, quindi dal telefono. Le media query salgono, non scendono.

   Tema giorno/notte: variabili CSS + preferenza di sistema + interruttore
   manuale che vince (localStorage), come gli altri portali RT.

   ⚠️ Nessuna risorsa esterna: font di sistema, icone SVG nostre. La CSP di
   produzione (`default-src 'self'`) blocca CDN e Google Fonts, e in locale
   non se ne accorgerebbe nessuno.
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. TOKEN — solo quelli della VETRINA.
   Il nucleo comune (superfici, testo, marchio, ombre, raggi) vive in
   assets/tokens.css, caricato PRIMA di questo foglio: era copiato qui e in
   gestionale.css, e cambiare il verde in un posto solo disallineava metà
   portale senza rompere niente — cioè nel modo peggiore.
   --------------------------------------------------------------------- */
:root {
  /* La fascia d'apertura è scura in ENTRAMBI i temi: è una scelta grafica,
     non una variante del tema. */
  --eroe-sfondo: #0b0b0b;
  --eroe-testo: #f5f5f5;
  --eroe-tenue: #b0b0b0;
  --testata-h: 64px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="chiaro"]) {
    --eroe-sfondo: #0b0b0b; --eroe-testo: #f5f5f5; --eroe-tenue: #b0b0b0;
  }
}
:root[data-tema="scuro"] {
  --eroe-sfondo: #0b0b0b; --eroe-testo: #f5f5f5; --eroe-tenue: #b0b0b0;
}


/* ---------------------------------------------------------------------
   2. BASE
   --------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.55;
  background: var(--sfondo);
  color: var(--testo);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* Rete di sicurezza: nessuna pagina deve scorrere di lato sul telefono.
     `clip` e non `hidden`: `hidden` farebbe del body un contenitore di
     scorrimento e romperebbe la testata `position: sticky`. Non sostituisce
     il `min-width: 0` sui campi, lo affianca. */
  overflow-x: clip;
}

h1, h2, h3 { margin: 0 0 .5rem; line-height: 1.15; letter-spacing: -.021em; font-weight: 700; }
h1 { font-size: clamp(1.6rem, 1.25rem + 1.6vw, 2.35rem); }
h2 { font-size: clamp(1.1rem, 1rem + .4vw, 1.3rem); }
h3 { font-size: 1rem; }
p { margin: 0 0 .8rem; }

a { color: var(--accento); text-underline-offset: .18em; }
a:hover { color: var(--accento-forte); }

/* Il focus si vede sempre, e si vede bene: chi naviga da tastiera non deve
   indovinare dov'è. `:focus-visible` non disturba chi usa il mouse. */
:focus-visible {
  outline: 2px solid var(--accento);
  outline-offset: 2px;
  border-radius: var(--raggio-s);
}

.contenitore { width: 100%; max-width: 1140px; margin: 0 auto; padding: 0 1rem; }
@media (min-width: 720px) { .contenitore { padding: 0 1.5rem; } }

/* Le icone stanno sulla riga del testo senza spingerla. */
.icona { display: inline-block; vertical-align: -.18em; flex: none; }

/* Visibile solo agli screen reader (etichette che a schermo sarebbero rumore). */
.solo-lettori {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* ---------------------------------------------------------------------
   3. TESTATA
   --------------------------------------------------------------------- */
.testata {
  position: sticky; top: 0; z-index: 30;
  background: color-mix(in srgb, var(--sfondo) 86%, transparent);
  backdrop-filter: saturate(1.6) blur(12px);
  border-bottom: 1px solid var(--bordo);
}
.testata .contenitore {
  display: flex; align-items: center; gap: .5rem; height: var(--testata-h);
}
.marchio {
  display: inline-flex; align-items: center; gap: .55rem;
  font-weight: 700; font-size: 1.02rem; letter-spacing: -.02em;
  text-decoration: none; color: var(--testo);
}
/* Il quadratino del marchio: ORO RT col segno scuro dentro.
   ⚠️ Il nero e scritto a mano e non e var(--accento), apposta: al buio
   l'accento DIVENTA oro, e un segno oro dentro un quadrato oro sparirebbe.
   L'oro del marchio non cambia col tema, quindi non cambia nemmeno cio che ci
   sta sopra. Contrasto misurato: 6,71:1.
   ⚠️ E sta in QUESTO file, non in gestionale.css: la vetrina carica
   public/style.css, il backoffice assets/gestionale.css. Ci sono cascato. */
/* Il logo vero nella testata. Si dimensiona sull ALTEZZA e la larghezza
   segue: e un logo orizzontale, e vincolarne la larghezza lo schiaccerebbe.
   ⚠️ width/height stanno anche nell HTML, col rapporto vero 1444x581: senza,
   la riga della testata salta quando l immagine arriva. */
/* Il segno AM Motori e' quadrato (201x201): si dimensiona sull'altezza. */
.marchio .logo { height: 46px; width: auto; display: block; }
@media (max-width: 460px) { .marchio .logo { height: 40px; } }

/* Resta per il backoffice e l agenda, che hanno la testata stretta e usano
   ancora il quadratino. */
.marchio .segno {
  display: grid; place-items: center; width: 34px; height: 34px;
  border-radius: 10px; background: var(--oro); color: #1a1a1a;
}
.testata .spinta { margin-left: auto; }
/* Le righe fisse delle schede auto (2026-09-22, come Europcar). */
.righe-fisse { list-style: none; margin: .45rem 0 0; padding: 0; display: grid; gap: .15rem; font-size: .82rem; color: var(--ok); }
.righe-fisse li { display: flex; gap: .35rem; align-items: center; }

/* ⚠️ LA TESTATA E' NERA IN ENTRAMBI I TEMI (dal 2026-09-21): il logo AM Motori
   e' bianco e nasce su fondo nero. Invece di riscrivere i colori di ogni
   bottone che ci sta dentro, qui si RIDEFINISCONO I TOKEN per la sola
   testata: le variabili CSS si ereditano, quindi selettore delle lingue,
   bottone del tema e «Esci» prendono da soli i colori giusti. */
.testata {
  --sfondo: #0b0b0b; --superficie: #161616; --superficie-2: #1f1f1f; --superficie-3: #2a2a2a;
  --bordo: #262626; --bordo-forte: #3d3d3d;
  --testo: #f5f5f5; --testo-tenue: #d0d0d0; --testo-debole: #a3a3a3;
  --accento: #f5f5f5; --accento-forte: #d6d6d6; --accento-tenue: #262626; --accento-testo: #0b0b0b;
  background: #0b0b0b; backdrop-filter: none; border-bottom-color: #1f1f1f; color: var(--testo);
}


/* Visibile agli screen reader, non agli occhi. ⚠️ NON `display:none`: quello
   lo toglie anche a loro, ed e il modo piu comune di sbagliare questa cosa. */
.visivamente-nascosto {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}

.bottone-icona {
  display: inline-flex; align-items: center; gap: .35rem;
  border: 1px solid var(--bordo); background: var(--superficie); color: var(--testo);
  border-radius: 999px; padding: .4rem .75rem; cursor: pointer;
  font: inherit; font-size: .85rem; font-weight: 500; line-height: 1.2;
  text-decoration: none; transition: background .12s ease, border-color .12s ease;
}
.bottone-icona:hover { background: var(--superficie-2); border-color: var(--bordo-forte); color: var(--testo); }

/* Interruttore del tema: sole quando siamo in chiaro, luna quando in scuro.
   Tutto in CSS — le regole esplicite vengono DOPO la media query e vincono. */
.i-luna { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="chiaro"]) .i-sole { display: none; }
  :root:not([data-tema="chiaro"]) .i-luna { display: inline-block; }
}
:root[data-tema="scuro"] .i-sole { display: none; }
:root[data-tema="scuro"] .i-luna { display: inline-block; }
:root[data-tema="chiaro"] .i-sole { display: inline-block; }
:root[data-tema="chiaro"] .i-luna { display: none; }

/* ---------------------------------------------------------------------
   4. FASCIA D'APERTURA + RICERCA
   --------------------------------------------------------------------- */
/* Le saline di Marsala col mulino, al tramonto (roadmap A5, 2026-08-05).
   Sostituisce la fascia verde piatta: «coerente con l'alloggio, non con
   l'aeroporto» era la richiesta della riunione, e le saline sono un posto in
   cui ci si arriva GUIDANDO — che è poi il motivo per cui uno noleggia un'auto.

   Tre accortezze, e la ragione di ognuna:
   1. `background-color` resta e viene PRIMA: se la foto non carica (rete lenta,
      immagine persa in un deploy) il testo chiaro resta su un fondo scuro
      invece che su bianco, cioè leggibile invece che invisibile;
   2. la foto sta sotto una VELATURA a gradiente, più densa a sinistra dove
      vive il testo e più leggera a destra dove c'è solo cielo. Non è gusto: è
      ciò che rende il titolo leggibile qualunque immagine ci si metta domani;
   3. due file, non uno. Sul telefono la fascia è quasi quadrata e un ritaglio
      panoramico taglierebbe via proprio il mulino: `eroe-marsala-stretta.jpg`
      è centrata su di lui e pesa 44 KB invece di 92. */
.eroe {
  background-color: var(--eroe-sfondo); color: var(--eroe-testo);
  /* ⚠️ Sopra il titolo 1.25rem invece di 2.5 (24/09/2026, chiesto da Paolo con
     la schermata di Europcar: la loro ricerca comincia quasi sotto la testata).
     Il fondo resta com'era: e' lo spazio su cui sale il modulo di ricerca. */
  padding: 1.25rem 0 5.5rem;
  background-image:
    linear-gradient(100deg, rgba(8, 20, 15, .86) 0%, rgba(8, 20, 15, .62) 48%, rgba(8, 20, 15, .38) 100%),
    url('assets/img/eroe-marsala-stretta.jpg');
  background-size: cover;
  background-position: center 42%;
  background-repeat: no-repeat;
}
@media (min-width: 720px) {
  .eroe {
    padding: 1.75rem 0 6.5rem;
    background-image:
      linear-gradient(100deg, rgba(8, 20, 15, .84) 0%, rgba(8, 20, 15, .58) 45%, rgba(8, 20, 15, .30) 100%),
      url('assets/img/eroe-marsala.jpg');
  }
}
.eroe h1 { color: var(--eroe-testo); max-width: 20ch; margin-bottom: .6rem; }
.eroe .occhiello {
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: .76rem; font-weight: 600; letter-spacing: .09em; text-transform: uppercase;
  color: var(--eroe-tenue); margin-bottom: .6rem;
}
.eroe .sommario { color: var(--eroe-tenue); font-size: 1.02rem; max-width: 46ch; margin: 0; }

/* Il modulo di ricerca sale sopra il bordo della fascia: è il gesto che
   dice "si comincia da qui". */
.ricerca {
  background: var(--superficie); border: 1px solid var(--bordo);
  border-radius: var(--raggio-l); box-shadow: var(--ombra-3);
  padding: 1.1rem; margin: -4rem 0 1.75rem;
}
@media (min-width: 720px) { .ricerca { padding: 1.35rem 1.5rem; } }

.campi { display: grid; gap: .9rem; grid-template-columns: 1fr; }
@media (min-width: 760px) { .campi { grid-template-columns: 1fr 1fr auto; align-items: end; } }

label {
  display: flex; align-items: center; gap: .35rem;
  font-size: .72rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: var(--testo-tenue); margin-bottom: .35rem;
}
label .icona { color: var(--testo-debole); }
.coppia { display: flex; gap: .5rem; }
.coppia > * { min-width: 0; }

input, select, textarea {
  width: 100%; padding: .68rem .75rem; font: inherit; color: var(--testo);
  background: var(--sfondo); border: 1px solid var(--bordo-forte);
  border-radius: var(--raggio-s);
  transition: border-color .12s ease, box-shadow .12s ease;
  /* ⚠️ `input[type=date]` ha una larghezza minima INTRINSECA generosa: senza
     questo, a 375px il modulo di ricerca sfonda la pagina in orizzontale e
     tutto il sito scorre di lato. Si vede solo sul telefono. */
  min-width: 0;
}
input:hover, select:hover, textarea:hover { border-color: var(--testo-debole); }
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: none; border-color: var(--accento);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accento) 26%, transparent);
}
textarea { resize: vertical; min-height: 3.2rem; }
select {
  appearance: none;
  /* la freccetta è disegnata col gradiente: nessuna immagine esterna */
  background-image:
    linear-gradient(45deg, transparent 50%, currentColor 50%),
    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 15px) calc(50% + 1px), calc(100% - 10px) calc(50% + 1px);
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 2rem;
}

.bottone {
  display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
  padding: .72rem 1.35rem; font: inherit; font-weight: 600; cursor: pointer;
  background: var(--accento); color: var(--accento-testo);
  border: 1px solid transparent; border-radius: var(--raggio-s); white-space: nowrap;
  transition: background .12s ease, transform .08s ease;
}
.bottone:hover { background: var(--accento-forte); }
.bottone:active { transform: translateY(1px); }
.bottone:disabled { opacity: .5; cursor: not-allowed; background: var(--accento); transform: none; }
.bottone.grande { padding: .85rem 1.5rem; font-size: 1.02rem; }
.bottone.secondario {
  background: var(--superficie); color: var(--testo); border-color: var(--bordo-forte);
}
.bottone.secondario:hover { background: var(--superficie-2); }

/* ⚠️ Regole dei FILTRI, tolti dalla pagina il 2026-08-05 (roadmap B1). Il CSS
   resta qui apposta: i filtri vanno rimessi quando la flotta arrivera a 20-30
   auto, e riscriverlo sarebbe lavoro buttato. Non e codice morto per svista. */
.filtri {
  display: flex; flex-wrap: wrap; gap: .5rem; align-items: center;
  margin-top: .9rem; padding-top: .9rem; border-top: 1px solid var(--bordo);
}
.filtri select {
  width: auto; min-width: 8.5rem; font-size: .875rem; padding: .42rem 1.9rem .42rem .6rem;
  border-radius: 999px; background-color: var(--superficie);
}
.filtri label.riga {
  display: inline-flex; align-items: center; gap: .45rem; margin: 0;
  text-transform: none; letter-spacing: 0; font-size: .875rem; font-weight: 500;
  color: var(--testo); border: 1px solid var(--bordo-forte); border-radius: 999px;
  padding: .38rem .8rem; cursor: pointer; background: var(--superficie);
}
.filtri label.riga:hover { background: var(--superficie-2); }
.filtri input[type="checkbox"] { width: auto; accent-color: var(--accento); }

/* ---------------------------------------------------------------------
   5. RISULTATI
   --------------------------------------------------------------------- */
.barra-risultati {
  display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap; margin: 0 0 1rem;
}
.barra-risultati .quante { font-size: 1.15rem; font-weight: 700; letter-spacing: -.02em; }
.barra-risultati .periodo { color: var(--testo-tenue); font-size: .9rem; }

/* Le auto in FASCE ORIZZONTALI, non a griglia (deciso il 2026-09-02).
   In riunione `[12:00]`: «cosi e piu ordinato perche vedi tutti i dettagli in
   un'unica pagina senza doverla cliccare».

   ⚠️ Il motivo vero non e estetico: con quattro auto tutte della stessa
   categoria e allo stesso prezzo, la griglia obbligava a confrontare tre
   riquadri affiancati leggendo su e giu. In fascia i dati stanno incolonnati e
   il confronto e una lettura verticale sola.

   ⚠️ Sotto i 700px si torna alla scheda impilata: una fascia stretta
   schiaccerebbe foto e testo in due colonne da niente. */
.griglia { display: flex; flex-direction: column; gap: .9rem; }

@media (min-width: 700px) {
  .griglia .scheda { flex-direction: row; align-items: stretch; }
  .griglia .scheda .cornice-foto { flex: 0 0 34%; max-width: 300px; }
  .griglia .scheda .foto { height: 100%; aspect-ratio: auto; min-height: 170px; }
  .griglia .scheda .corpo { flex: 1; flex-direction: row; align-items: center; gap: 1.4rem; }
  .griglia .scheda .corpo > div:first-child { flex: 1; min-width: 0; }
  /* Il prezzo si stacca a destra con un filetto, come su un listino. */
  .griglia .scheda .prezzo {
    flex: 0 0 auto; text-align: right; border-left: 1px solid var(--bordo);
    padding-left: 1.4rem; align-self: stretch;
    display: flex; flex-direction: column; justify-content: center;
  }
  /* In fascia la scheda non si solleva: alzare una riga larga fa ballare
     l'elenco intero. Si accende il bordo, che basta. */
  .griglia .scheda:hover { transform: none; }
}

.scheda {
  position: relative; display: flex; flex-direction: column;
  background: var(--superficie); border: 1px solid var(--bordo);
  border-radius: var(--raggio); overflow: hidden; box-shadow: var(--ombra-1);
  text-decoration: none; color: inherit;
  transition: box-shadow .16s ease, transform .16s ease, border-color .16s ease;
}
.scheda:hover {
  transform: translateY(-3px); box-shadow: var(--ombra-3); border-color: var(--bordo-forte);
  color: inherit;
}
.scheda .cornice-foto { position: relative; background: var(--superficie-2); }
.scheda .foto {
  display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover;
  background: var(--superficie-2);
}
.scheda .marchietto {
  position: absolute; top: .6rem; left: .6rem;
  background: color-mix(in srgb, var(--superficie) 92%, transparent);
  backdrop-filter: blur(6px);
  border: 1px solid var(--bordo); border-radius: 999px;
  font-size: .7rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--testo-tenue); padding: .2rem .55rem;
}
.scheda .corpo { display: flex; flex-direction: column; gap: .7rem; padding: .95rem 1rem 1.05rem; flex: 1; }
.scheda .titolo { font-size: 1.06rem; font-weight: 700; letter-spacing: -.02em; line-height: 1.25; }
.scheda .sotto { color: var(--testo-tenue); font-size: .86rem; }

/* Le caratteristiche: icona + parola. L'icona aiuta la scansione, la parola
   resta perché l'icona da sola non è mai un'informazione. */
.caratteristiche {
  display: flex; flex-wrap: wrap; gap: .3rem .85rem;
  font-size: .82rem; color: var(--testo-tenue);
}
.caratteristiche span { display: inline-flex; align-items: center; gap: .3rem; white-space: nowrap; }
/* ⚠️ Fino al 2026-09-22 in fascia stavano su una riga sola (nowrap). Con le sei
   caratteristiche di Europcar — posti, porte, valigie, cambio, aria, eta' —
   una riga sola non basta: ogni voce andava a capo DENTRO se stessa («4 /
   posti»). Ora vanno a capo fra una voce e l'altra, mai in mezzo. */
.caratteristiche .icona { color: var(--testo-debole); }

.etichette { display: flex; flex-wrap: wrap; gap: .35rem; }
.etichetta {
  display: inline-flex; align-items: center; gap: .28rem;
  font-size: .74rem; font-weight: 600; padding: .2rem .55rem; border-radius: 999px;
  background: var(--superficie-2); color: var(--testo-tenue); border: 1px solid var(--bordo);
}
.etichetta.verde { background: var(--accento-tenue); color: var(--oro-testo); border-color: transparent; }

/* Le due etichette sui neopatentati, sopra la foto sotto la categoria.
   ⚠️ Il verde e il rosso NON bastano da soli: chi non distingue i colori
   vedrebbe due pillole identiche. Il si porta una spunta, il no porta la
   parola «almeno 3 anni» — la forma dice quello che dice il colore. */
.scheda .marchietto.neo-si,
.scheda .marchietto.neo-no { top: 2.4rem; font-size: .64rem; letter-spacing: .04em; }
.scheda .marchietto.neo-si { color: var(--oro-testo); }
.scheda .marchietto.neo-no { color: var(--allarme); }

/* La riga che spiega cosa vuol dire, accanto all'etichetta nella scheda. */
.nota-etichetta { font-size: .82rem; color: var(--testo-tenue); }

/* «A partire da»: piccolo e tenue sopra la cifra, non un'etichetta che grida. */
.da {
  font-size: .72rem; color: var(--testo-tenue); letter-spacing: .03em;
  text-transform: uppercase; font-weight: 600;
}
.da.grande { font-size: .78rem; margin: 0 0 .1rem; }
.prezzo-grande { font-size: 2rem; font-weight: 700; margin: 0 0 .35rem; letter-spacing: -.02em; }

.prezzo {
  margin-top: auto; padding-top: .7rem; border-top: 1px solid var(--bordo);
  display: flex; align-items: flex-end; justify-content: space-between; gap: .6rem;
}
.prezzo .totale { font-size: 1.5rem; font-weight: 800; letter-spacing: -.035em; line-height: 1.05; }
.prezzo .unitario { color: var(--testo-tenue); font-size: .82rem; }
.prezzo .invito {
  font-size: .84rem; font-weight: 600; color: var(--accento);
  display: inline-flex; align-items: center; gap: .25rem;
}

/* ---------------------------------------------------------------------
   6. PAGINA AUTO
   --------------------------------------------------------------------- */
.due-colonne { display: grid; gap: 1.25rem; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 940px) { .due-colonne { grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: 1.75rem; } }

.pannello {
  background: var(--superficie); border: 1px solid var(--bordo);
  border-radius: var(--raggio); box-shadow: var(--ombra-1); padding: 1.15rem;
}
@media (min-width: 720px) { .pannello { padding: 1.4rem; } }
.pannello + .pannello { margin-top: 1.1rem; }
.pannello.appiccicoso { position: sticky; top: calc(var(--testata-h) + 1rem); }
@media (max-width: 939px) { .pannello.appiccicoso { position: static; } }

.pannello > h2 {
  display: flex; align-items: center; gap: .45rem;
  padding-bottom: .6rem; margin-bottom: .9rem; border-bottom: 1px solid var(--bordo);
}
.pannello > h2 .icona { color: var(--testo-debole); }

.foto-grande {
  display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover;
  border-radius: var(--raggio); background: var(--superficie-2);
}

.torna {
  display: inline-flex; align-items: center; gap: .3rem;
  font-size: .9rem; font-weight: 600; text-decoration: none; color: var(--testo-tenue);
}
.torna:hover { color: var(--accento); }

.specifiche { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; margin: 0; }
@media (min-width: 560px) { .specifiche { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.specifiche > div {
  display: flex; align-items: flex-start; gap: .55rem;
  padding: .7rem .2rem; border-top: 1px solid var(--bordo);
}
.specifiche > div .icona { color: var(--testo-debole); margin-top: .12rem; }
.specifiche dt { font-size: .72rem; font-weight: 600; letter-spacing: .05em;
                 text-transform: uppercase; color: var(--testo-tenue); }
.specifiche dd { margin: 0; font-weight: 600; font-size: .95rem; }

/* Tabella del preventivo: le cifre incolonnate, il totale che stacca. */
.righe { width: 100%; border-collapse: collapse; font-size: .93rem; }
.righe td { padding: .5rem 0; border-bottom: 1px solid var(--bordo); vertical-align: top; }
.righe td:last-child { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.righe tr:last-child td { border-bottom: none; }
.righe tr.totale td {
  border-bottom: none; border-top: 2px solid var(--testo); padding-top: .8rem;
  font-weight: 800; font-size: 1.22rem; letter-spacing: -.025em;
}
.righe tr.deposito td { color: var(--testo-tenue); font-size: .86rem; border-top: 1px dashed var(--bordo); }
.righe .incluso {
  display: inline-flex; align-items: center; gap: .25rem;
  color: var(--ok); font-weight: 600; font-size: .84rem;
}
.nota { color: var(--testo-tenue); font-size: .86rem; }
.nota-forte { color: var(--testo-tenue); font-size: .86rem; display: flex; gap: .4rem; align-items: flex-start; }
.nota-forte .icona { color: var(--testo-debole); margin-top: .1rem; }

/* ---------------------------------------------------------------------
   7. CONFERMA
   --------------------------------------------------------------------- */
.sigillo {
  display: grid; place-items: center; width: 56px; height: 56px; margin: 0 auto .8rem;
  border-radius: 50%; background: var(--accento-tenue); color: var(--oro-testo);
}
.codice-riquadro {
  margin: 1.1rem auto 0; max-width: 22rem; padding: .9rem 1rem;
  border: 2px dashed var(--bordo-forte); border-radius: var(--raggio);
  background: var(--superficie-2);
}
.codice-grande {
  font-size: clamp(1.7rem, 1.2rem + 2.4vw, 2.2rem); font-weight: 800;
  letter-spacing: .06em; color: var(--testo); font-variant-numeric: tabular-nums;
  margin: .1rem 0 0;
}
.passi { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; }
.passi li { display: flex; gap: .7rem; align-items: flex-start; }
.passi .numero {
  flex: none; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%;
  background: var(--accento-tenue); color: var(--oro-testo);
  font-size: .78rem; font-weight: 700;
}

/* ---------------------------------------------------------------------
   8. MESSAGGI E STATI
   --------------------------------------------------------------------- */
.avviso {
  display: flex; align-items: flex-start; gap: .55rem;
  border-radius: var(--raggio-s); padding: .8rem .95rem; margin: 1rem 0;
  background: var(--allarme-tenue); color: var(--allarme);
  border: 1px solid color-mix(in srgb, var(--allarme) 24%, transparent);
  font-size: .92rem;
}
.avviso .icona { flex: none; margin-top: .1rem; }
.avviso.buono {
  background: var(--accento-tenue); color: var(--oro-testo);
  border-color: color-mix(in srgb, var(--accento) 24%, transparent);
}
.vuoto { text-align: center; color: var(--testo-tenue); padding: 3rem 1rem; }
.vuoto .icona { color: var(--testo-debole); margin-bottom: .5rem; }

.caricamento { display: grid; gap: 1.1rem; grid-template-columns: 1fr; }
@media (min-width: 640px) { .caricamento { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .caricamento { grid-template-columns: repeat(3, 1fr); } }
.scheletro {
  height: 292px; border-radius: var(--raggio);
  background: linear-gradient(100deg, var(--superficie-2) 30%, var(--superficie-3) 50%, var(--superficie-2) 70%);
  background-size: 220% 100%;
  animation: scorri 1.5s ease-in-out infinite;
}
@keyframes scorri { from { background-position: 180% 0; } to { background-position: -40% 0; } }
@media (prefers-reduced-motion: reduce) {
  .scheletro { animation: none; }
  .scheda:hover { transform: none; }
  * { scroll-behavior: auto; }
}

/* ---------------------------------------------------------------------
   9. RASSICURAZIONI E PIEDE
   --------------------------------------------------------------------- */
.rassicurazioni {
  display: grid; gap: .9rem; grid-template-columns: 1fr;
  margin: 2.5rem 0 0; padding-top: 1.6rem; border-top: 1px solid var(--bordo);
}
/* Due colonne e non tre: la terza voce («Nessun anticipo») e stata tolta il
   2026-08-05 con la promessa che conteneva. Con `repeat(3, 1fr)` restava una
   colonna vuota a destra. */
@media (min-width: 700px) { .rassicurazioni { grid-template-columns: repeat(2, 1fr); gap: 1.5rem; } }
.rassicurazioni .voce { display: flex; gap: .7rem; align-items: flex-start; }
.rassicurazioni .voce .icona { color: var(--accento); flex: none; margin-top: .15rem; }
.rassicurazioni .voce b { display: block; font-size: .95rem; }
.rassicurazioni .voce span { color: var(--testo-tenue); font-size: .86rem; }

.pie {
  color: var(--testo-tenue); font-size: .85rem; padding: 2.5rem 0 2.5rem;
  margin-top: 2.5rem; border-top: 1px solid var(--bordo); text-align: center;
}
.pie p { margin: 0; }

/* Chi vende (roadmap 1.10). Vuoto finché la scheda Società non è compilata:
   il blocco semplicemente non viene disegnato, e il piè di pagina resta
   com'era. Nessun riquadro, nessun segnaposto, nessuna promessa. */
.venditore:not(:empty) { margin-bottom: 1.1rem; line-height: 1.65; }
.venditore p { margin: 0; }
.venditore .venditore-et {
  font-size: .72rem; text-transform: uppercase; letter-spacing: .08em;
  color: var(--testo-debole); margin-bottom: .3rem;
}
.venditore a { color: inherit; text-decoration: underline; text-underline-offset: .18em; }
.venditore a:hover { color: var(--accento); }

/* ---------------------------------------------------------------------
   LA BARRA DEI PASSI (roadmap C1)
   Lo stato non sta nel solo colore: il passo fatto porta una spunta, quello
   corrente il proprio numero, e il futuro è spento. Stampata in bianco e nero
   resta leggibile — stessa regola del calendario della flotta.
   --------------------------------------------------------------------- */
.passi {
  display: flex; flex-wrap: nowrap; gap: .3rem; align-items: stretch;
  margin: 0 0 1.4rem; overflow-x: auto; scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.passi::-webkit-scrollbar { display: none; }

.passo {
  display: inline-flex; align-items: center; gap: .45rem; flex: 1 1 0; min-width: 0;
  padding: .55rem .7rem; border-radius: var(--raggio);
  font-size: .82rem; font-weight: 500; text-decoration: none;
  border: 1px solid var(--bordo); background: var(--superficie);
  color: var(--testo-tenue); white-space: nowrap;
}
.passo-n {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 1.35em; height: 1.35em; border-radius: 999px;
  background: var(--superficie-2); color: inherit; font-size: .82em; font-weight: 700;
}
/* L'etichetta sparisce sotto i 640px: restano numeri e spunte, che bastano a
   dire «sono al terzo di quattro» senza far scorrere la barra di lato. */
.passo-t { overflow: hidden; text-overflow: ellipsis; }
/* Il riassunto della scelta sotto il nome del passo fatto (2026-09-22, come Europcar). */
.passo-testi { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.passo-r { font-size: .72rem; font-weight: 400; color: var(--testo-debole); overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 39.99rem) {
  .passo { flex: 0 0 auto; padding: .5rem .6rem; }
  .passo-t { display: none; }
  .passo.corrente .passo-t { display: inline; }
  .passo-r { display: none; }
}

.passo.fatto { color: var(--testo); border-color: var(--bordo-forte); }
.passo.fatto:hover { border-color: var(--accento); color: var(--accento); }
.passo.fatto .icona { color: var(--accento); flex: none; }
/* ⚠️ `--accento-testo` e non `--eroe-testo`. Sono due cose diverse: il primo
   e "cosa si legge SOPRA l accento", il secondo e il bianco della fascia eroe.
   Finche l accento era verde scuro i due coincidevano di fatto e nessuno se ne
   accorgeva; col passaggio all oro RT il passo attivo e diventato oro con
   scritta quasi bianca, contrasto 2,36 — illeggibile. */
.passo.corrente {
  color: var(--accento-testo); background: var(--accento); border-color: var(--accento);
  font-weight: 600;
}
/* Il pallino del numero: scuro, perche sopra ci va testo scuro. */
/* ⚠️ Nel passo ATTIVO il pallino si scurisce E il numero si schiarisce: il
   numero eredita il colore del passo, che li e scuro, e scuro su scuro non
   si legge (misurato 1,21). */
.passo.corrente .passo-n { background: rgba(0, 0, 0, .55); color: #fff; }
.passo.futuro { opacity: .55; }

/* La riga «indietro / continua» in fondo a un passo. */
.navigazione-passo {
  display: flex; gap: .7rem; align-items: center; justify-content: space-between;
  margin-top: 1.4rem; padding-top: 1.2rem; border-top: 1px solid var(--bordo);
}

/* Il «Modifica» accanto a ogni voce del riepilogo. È piccolo di proposito: non
   deve competere col bottone Prenota, ma senza di lui un percorso a quattro
   schermate diventa una prigione. */
.modifica {
  margin-left: .5rem; font-size: .8em; color: var(--accento);
  text-decoration: underline; text-underline-offset: .18em; white-space: nowrap;
}
.modifica:hover { text-decoration-thickness: 2px; }

/* «o equivalente» accanto al nome dell'auto (roadmap B7). Sta in tono minore
   perche e una riserva, non parte del nome: deve leggersi, non gridare.
   `white-space: nowrap` perche spezzato su due righe («o» / «equivalente»)
   sembra un errore di impaginazione. */
.equivalente {
  font-weight: 400; font-size: .8em; color: var(--testo-tenue);
  white-space: nowrap;
}

/* ---------------------------------------------------------------------
   Qui stavano le regole del calendario di disponibilita della SCHEDA AUTO
   (.cal-*, #calendario). Tolte il 2026-08-05 con il calendario stesso
   (roadmap B6).
   ⚠️ Da non confondere con le .cal-* del BACKOFFICE, che vivono in
   assets/gestionale.css e sono tutt'altra cosa: quelle restano, perche il
   calendario della flotta e vivo. Le due fogli di stile non si incrociano
   mai (le pagine pubbliche caricano style.css, il gestionale gestionale.css).
   --------------------------------------------------------------------- */

/* ---------------------------------------------------------------------
   Le tre schede della copertura (passo ③, roadmap C3).
   Affiancate sopra i 640px, impilate sotto: sono tre cose che si
   CONFRONTANO, e un confronto a colonne è l'unica forma in cui i tre
   numeri stanno sulla stessa riga dell'occhio.
   --------------------------------------------------------------------- */
.coperture { display: grid; gap: .75rem; grid-template-columns: 1fr; }
@media (min-width: 640px) { .coperture { grid-template-columns: repeat(3, 1fr); } }

.copertura {
  display: flex; flex-direction: column; gap: .35rem;
  border: 1px solid var(--bordo); border-radius: var(--raggio-m);
  padding: .85rem .8rem; background: var(--superficie-2);
}
/* Il bordo, non il riempimento: la scheda scelta deve distinguersi senza
   che le altre due diventino illeggibili — si sta ancora confrontando. */
.copertura.scelta { border-color: var(--accento-forte); border-width: 2px; padding: calc(.85rem - 1px) calc(.8rem - 1px); }
.copertura .nome { font-weight: 700; font-size: 1rem; display: flex; align-items: center; gap: .45rem; }
/* Lo scudo prende il colore del testo e si riempie da solo: piu protezione,
   piu pieno. Sulla scheda scelta diventa dell'accento, cosi il confronto si
   legge anche con la coda dell'occhio. */
.copertura .scudo { flex: 0 0 auto; color: var(--testo-tenue); }
.copertura.scelta .scudo { color: var(--accento-forte); }

/* Le voci di cosa copre. Il segno sta PRIMA del testo e non e un'emoji:
   un carattere disegnato qui resta nitido e segue il tema. */
.cop-voci { list-style: none; margin: .1rem 0 .2rem; padding: 0; display: grid; gap: .22rem; }
.cop-voci li { position: relative; padding-left: 1.05rem; font-size: .8rem; line-height: 1.4; color: var(--testo-tenue); }
.cop-voci li::before {
  position: absolute; left: 0; top: .05rem; font-weight: 700;
}
/* ⚠️ Segni scritti come ESCAPE CSS, non come caratteri: fino al 2026-09-22 qui
   c'erano ✓ e ✗ rovinati da un salvataggio con la codifica sbagliata, e la
   vetrina mostrava «¹3» e un quadratino accanto a ogni voce dei pacchetti. */
.cop-voci li.si::before { content: '\2713'; color: var(--accento-forte); }
.cop-voci li.no::before { content: '\2717'; color: var(--testo-debole); }
.copertura .rischio { margin: 0; font-size: .82rem; color: var(--testo-tenue); line-height: 1.45; }
.copertura .aggiunta { margin: 0; font-size: .82rem; color: var(--testo-debole); }
.copertura .totale { font-size: 1.25rem; font-weight: 700; margin-top: auto; padding-top: .4rem; }
.copertura .bottone { width: 100%; justify-content: center; }

/* Il bottone «secondario»: stessa forma, senza il riempimento.
   Serve dove due bottoni stanno vicini e uno solo è la cosa da fare — le tre
   schede della copertura, e il «disdici» in fondo alla conferma, che deve
   esserci senza gridare. */
.bottone.chiaro {
  background: var(--superficie);
  color: var(--testo);
  border-color: var(--bordo-forte);
}
.bottone.chiaro:hover:not(:disabled) { background: var(--superficie-2); }

/* ---------------------------------------------------------------------
   La prova di stato: com'era e com'è tornata, affiancate.
   ⚠️ Due colonne anche sul telefono, e non una sotto l'altra: il confronto
   fra due foto impilate obbliga a ricordare la prima mentre si guarda la
   seconda, che è esattamente quello che questa pagina esiste per evitare.
   Le foto diventano piccole, ma il paragone resta possibile.
   --------------------------------------------------------------------- */
.stato-intestazioni {
  display: grid; grid-template-columns: 1fr 1fr; gap: .5rem;
  font-size: .72rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: var(--testo-tenue); margin-bottom: .5rem;
}
.stato-riga { margin-bottom: 1rem; }
.stato-etichetta {
  display: flex; align-items: center; gap: .45rem;
  font-size: .85rem; font-weight: 600; margin-bottom: .35rem;
}
.stato-coppia { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.stato-foto {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: var(--raggio-s); border: 1px solid var(--bordo); background: var(--superficie-2);
}
/* Il bordo rosso è l'unica cosa che distingue una foto con un danno segnalato:
   si vede subito scorrendo, senza leggere. */
.stato-foto.con-danno { border-color: var(--allarme); border-width: 2px; }
.stato-vuota {
  aspect-ratio: 4 / 3; display: flex; align-items: center; justify-content: center;
  border: 1px dashed var(--bordo); border-radius: var(--raggio-s); color: var(--testo-debole);
}

/* Il piede sparisce quando non ha niente da dire: dal 2026-09-22 non porta piu'
   la riga «Noleggio auto · Marsala», e finche' la scheda Societa' non ha i
   recapiti anche «chi vende» resta vuoto. Una fascia vuota in fondo sembra
   una pagina rotta. */
.pie:has(#pie:empty) { display: none; }

/* ---------------------------------------------------------------------
   RICERCA come Europcar (2026-09-22)
   Etichette in chiaro (non maiuscoletto), data e ora in UN riquadro solo col
   filetto in mezzo, eta' e paese come tendine in riga, bottone largo.
   --------------------------------------------------------------------- */
.ricerca-ec label { text-transform: none; letter-spacing: 0; font-size: .95rem; font-weight: 700; color: var(--testo); }
.rc-griglia { display: grid; gap: 1rem; grid-template-columns: 1fr; }
.rc-unita {
  display: flex; border: 1px solid var(--bordo-forte); border-radius: var(--raggio-s);
  background: var(--sfondo); overflow: hidden;
}
.rc-unita input { border: 0; border-radius: 0; background: transparent; }
.rc-unita input[type=date] { flex: 1 1 auto; }
.rc-unita input[type=time] { flex: 0 0 7rem; border-left: 1px solid var(--bordo-forte); }
.rc-unita:focus-within { border-color: var(--accento); }
/* ⚠️ minmax(0, …) e min-width: 0 non sono pignoleria: con 243 paesi la tendina
   «Vivo in» prende la larghezza del nome piu' lungo, e senza questi limiti
   spingeva tutto il modulo fuori dal riquadro sul telefono (visto il 22/09). */
.rc-griglia > * { min-width: 0; }
.rc-opzioni { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .6rem 1rem; align-items: center; }
.ricerca-ec .in-riga { min-width: 0; }
.ricerca-ec .in-riga > span { white-space: nowrap; }
.rc-promo { grid-column: 1 / -1; display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; }
.ricerca-ec .in-riga {
  display: inline-flex; align-items: center; gap: .45rem; margin: 0;
  font-weight: 400; color: var(--testo-tenue);
}
.sel-riga {
  width: auto; border: 0; background-color: transparent; padding: .3rem 1.7rem .3rem .1rem;
  font-weight: 700; color: var(--testo); min-width: 0; max-width: 100%; text-overflow: ellipsis;
}
.rc-promo input[type=checkbox] { width: 1.35rem; height: 1.35rem; margin: 0; }
.rc-promo #codice-promo { max-width: 12rem; text-transform: uppercase; }
.rc-cerca { width: 100%; }
@media (min-width: 900px) {
  .rc-griglia { grid-template-columns: 1.7fr 1fr 1fr; }
  .rc-opzioni, .rc-cerca { grid-column: 1 / -1; }
  .rc-opzioni { grid-template-columns: auto minmax(0, 16rem) 1fr; gap: 1rem 3rem; }
  .rc-promo { grid-column: auto; justify-content: flex-end; }
}


/* ---------------------------------------------------------------------
   AREA CLIENTE, AIUTO E VOCI IN TESTATA (2026-09-23)
   Le due pagine che Europcar tiene in alto a destra: «Gestione prenotazioni»
   e «Aiuto». Le voci stanno accanto alla tendina delle lingue; sul telefono
   resta l'icona e il testo sparisce, altrimenti la testata va a capo.
   --------------------------------------------------------------------- */


.area-testa { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; }
.area-testa h1 { flex: 1 1 auto; }

.pren-elenco { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: .7rem; }
.pren-riga {
  display: flex; align-items: center; justify-content: space-between; gap: .9rem;
  border: 1px solid var(--bordo); border-radius: var(--raggio-s); padding: .8rem .9rem;
}
.pren-riga > div { min-width: 0; }
.pren-auto { font-weight: 700; margin: 0; }
.pren-riga p { margin: .1rem 0 0; }
/* Una prenotazione annullata resta nell'elenco, ma non deve sembrare viva. */
.pren-riga.spenta { opacity: .6; }

.faq { border-top: 1px solid var(--bordo); padding: .7rem 0; }
.faq summary { cursor: pointer; font-weight: 600; }
.faq summary::marker { color: var(--testo-debole); }
.faq p { margin: .5rem 0 0; color: var(--testo-tenue); }

/* ---------------------------------------------------------------------
   LA TESTATA COME EUROPCAR (2026-09-24)
   Quattro voci a destra — Login, lingua con bandiera, Aiuto, Menu — in
   bianco e grassetto sul nero, icona grande a sinistra del testo, come sul
   loro sito (misurati: testo 14px, peso 700, icone 24px). Sul telefono resta
   l'icona sola, e per la lingua la bandiera col codice.
   --------------------------------------------------------------------- */
.testata-azioni { display: flex; align-items: center; gap: .15rem; }
.voce-testata {
  display: inline-flex; align-items: center; gap: .45rem;
  border: 0; background: transparent; cursor: pointer;
  font: inherit; font-size: .875rem; font-weight: 700; color: var(--testo);
  text-decoration: none; white-space: nowrap;
  padding: .45rem .6rem; border-radius: var(--raggio-s);
}
.voce-testata:hover { background: var(--superficie-2); }
.voce-testata:focus-visible { outline: 2px solid var(--accento); outline-offset: 2px; }
@media (max-width: 600px) {
  .voce-testata span:not(.bandiera):not(.codice-lingua) { display: none; }
  .voce-testata { padding: .45rem .45rem; }
}
.bandiera { display: inline-flex; flex: none; }
.bandiera svg {
  width: 22px; height: 15px; display: block; border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .25);
}

/* Il pannello laterale: velo scuro a sinistra, pannello bianco a destra, la X
   in alto. Lo stesso per Login, lingua e Menu, come da Europcar. */
.cassetto { position: fixed; inset: 0; z-index: 100; }
.cassetto[hidden] { display: none; }
.cassetto-velo { position: absolute; inset: 0; background: rgba(0, 0, 0, .6); }
.cassetto-pannello {
  position: absolute; top: 0; right: 0; bottom: 0; width: min(486px, 100%);
  background: var(--superficie); color: var(--testo);
  overflow-y: auto; padding: 0 1.75rem 2rem;
  box-shadow: -10px 0 30px rgba(0, 0, 0, .25);
  transform: translateX(100%); transition: transform .22s ease;
}
.cassetto.aperto .cassetto-pannello { transform: none; }
@media (prefers-reduced-motion: reduce) { .cassetto-pannello { transition: none; } }
html.cassetto-aperto { overflow: hidden; }
.cassetto-testa { display: flex; align-items: center; justify-content: space-between; height: 84px; }
/* Il logo e' bianco (nasce sulla testata nera): sul pannello bianco si inverte. */
.cassetto-logo { height: 48px; width: auto; filter: invert(1); }
.cassetto-chiudi {
  width: 48px; height: 48px; display: grid; place-items: center;
  border: 0; border-radius: var(--raggio-s); background: transparent; color: var(--testo); cursor: pointer;
}
.cassetto-chiudi:hover { background: var(--superficie-2); }
.cassetto-titolo { font-size: 1.35rem; margin: .4rem 0 1rem; }
.cassetto-lista { list-style: none; margin: 0; padding: 0; }
.cassetto-voce {
  display: flex; align-items: center; gap: .8rem; width: 100%;
  padding: 1.05rem .1rem; border: 0; border-bottom: 1px solid var(--bordo);
  background: none; font: inherit; font-size: 1.08rem; font-weight: 700;
  color: var(--testo); text-decoration: none; text-align: left; cursor: pointer;
}
.cassetto-voce:hover { color: var(--testo-tenue); }
.cassetto-voce .icona:last-child { margin-left: auto; color: var(--testo-debole); }
.cassetto-voce.scelta .icona:last-child { color: var(--testo); }
.cassetto-voce .bandiera svg { width: 30px; height: 20px; box-shadow: 0 0 0 1px rgba(0, 0, 0, .15); }
.cassetto-corpo label { display: block; margin-top: .6rem; }
.cassetto-largo { display: flex; justify-content: center; width: 100%; margin-top: .8rem; text-decoration: none; }
.cassetto-altro { margin-top: 1.4rem; padding-top: 1.2rem; border-top: 1px solid var(--bordo); }
.cassetto-altro p { margin: 0 0 .2rem; }
.cassetto-altro .nota { margin-top: .9rem; font-size: .86rem; }

/* ---------------------------------------------------------------------
   I TRE VANTAGGI della home, in fila come quelli di Europcar (2026-09-24):
   cerchio pieno con l'icona, titolo in grassetto, una riga sotto.
   --------------------------------------------------------------------- */
.vantaggi {
  list-style: none; margin: 0 0 1.4rem; padding: 0;
  display: grid; gap: 1rem; grid-template-columns: 1fr;
}
@media (min-width: 760px) { .vantaggi { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; } }
.vantaggi li { display: flex; align-items: center; gap: .9rem; }
.vantaggio-icona {
  flex: none; width: 58px; height: 58px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--accento); color: var(--accento-testo);
}
.vantaggi b { display: block; font-size: 1.02rem; line-height: 1.3; }
.vantaggi div > span { display: block; color: var(--testo-tenue); font-size: .9rem; margin-top: .1rem; }