/* Forcellini Carburanti – stile chiaro (dal 21/10/2026; prima era scuro). Caratteri Barlow ospitati qui (licenza OFL).
   Pagina chiara; restano scuri, come contrasto di marca, solo il totem dei prezzi, il riquadro self, la banda di
   prenotazione, la scheda San Marino e il piede: i colori scuri di quei blocchi stanno nel gruppo "superfici scure". */
@font-face{font-family:Barlow;font-weight:400;font-display:swap;src:url(font/barlow-400.woff2) format("woff2")}
@font-face{font-family:Barlow;font-weight:500;font-display:swap;src:url(font/barlow-500.woff2) format("woff2")}
@font-face{font-family:Barlow;font-weight:600;font-display:swap;src:url(font/barlow-600.woff2) format("woff2")}
@font-face{font-family:Barlow;font-weight:700;font-display:swap;src:url(font/barlow-700.woff2) format("woff2")}
@font-face{font-family:"Barlow Condensed";font-weight:600;font-display:swap;src:url(font/barlow-condensed-600.woff2) format("woff2")}
@font-face{font-family:"Barlow Condensed";font-weight:700;font-display:swap;src:url(font/barlow-condensed-700.woff2) format("woff2")}
@font-face{font-family:"Barlow Condensed";font-weight:800;font-display:swap;src:url(font/barlow-condensed-800.woff2) format("woff2")}

:root{
  --bg:#f3f6fb; --bg-2:#e8edf6; --card:#ffffff; --card-2:#edf1fa; --bordo:#dde3ee; --campo:#f5f7fb;
  --testo:#14213d; --testo-2:#3a4663; --tenue:#56617a;
  --blu:#1e3a8a; --blu-scuro:#13265e; --blu-chiaro:#3b63d6;
  --ambra:#f5a300;          /* riempimenti (bottoni, barre, stelle) */
  --acc:#b45f00;            /* ambra per testi e icone su fondo chiaro (leggibile) */
  --verde:#16a34a; --rosso:#d32f2f; --raggio:14px; --ombra:0 18px 40px rgba(30,50,110,.14);
  color-scheme:light;
}
/* Superfici scure dentro la pagina chiara: stessi nomi di colore, valori scuri */
.totem,.self24,.smac,.piede,.sanmarino-scheda,.hero-pagina,.prenota-banda{
  --bg:#0b1430; --bg-2:#081027; --card:#121e44; --card-2:#17265a; --bordo:#22305e; --campo:#0b1430;
  --testo:#eef1f8; --testo-2:#d5dbea; --tenue:#a3adc6; --acc:#f5a300; --rosso:#ff6b6b; --verde:#3ddc84;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;font-family:Barlow,system-ui,sans-serif;background:var(--bg);color:var(--testo);font-size:17px;line-height:1.55}
img{max-width:100%;display:block}
a{color:inherit}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid var(--blu-chiaro);outline-offset:2px}
.totem :focus-visible,.self24 :focus-visible,.smac:focus-visible,.piede :focus-visible,.sanmarino-scheda:focus-visible,.prenota-banda :focus-visible{outline-color:var(--ambra)}
h1,h2,h3,.h3{font-family:"Barlow Condensed",Barlow,sans-serif;line-height:1.05;margin:0;font-weight:700}
h2{font-size:clamp(30px,4vw,44px);text-transform:uppercase;letter-spacing:.5px}
h3,.h3{font-size:24px;text-transform:uppercase;letter-spacing:.3px;display:block}
.contenitore{max-width:1180px;margin:0 auto;padding:0 20px}
.stretto{max-width:760px}
.tenue{color:var(--tenue)}
.sopratitolo{font-weight:700;font-size:13px;letter-spacing:2px;text-transform:uppercase;color:var(--acc);margin:0 0 8px;display:block}
.simboli{position:absolute;width:0;height:0;overflow:hidden}
.icona{width:22px;height:22px;flex:none;vertical-align:middle}
.icona.grande{width:56px;height:56px;color:var(--verde)}
.salta{position:absolute;left:-999px;top:8px;background:var(--ambra);color:#1a1300;padding:8px 14px;border-radius:8px;z-index:50}
.salta:focus{left:8px}
[hidden]{display:none!important}

/* Bottoni */
.bottone{display:inline-flex;align-items:center;gap:8px;padding:12px 20px;border-radius:999px;font:700 15px Barlow,sans-serif;
  text-decoration:none;border:0;cursor:pointer;line-height:1.2;transition:transform .15s,background .15s}
.bottone .icona{width:18px;height:18px}
.bottone.pieno{background:var(--ambra);color:#1a1300}
.bottone.pieno:hover{background:#ffb820}
.bottone.vuoto{background:#fff;color:var(--blu);border:1.5px solid var(--blu)}
.bottone.vuoto:hover{background:var(--card-2)}
.totem .bottone.vuoto,.sanmarino-scheda .bottone.vuoto{background:rgba(255,255,255,.08);color:#fff;border-color:rgba(255,255,255,.5)}
.totem .bottone.vuoto:hover,.sanmarino-scheda .bottone.vuoto:hover{background:rgba(255,255,255,.18)}
.bottone.grande{padding:16px 26px;font-size:17px}
.bottone:active{transform:scale(.98)}
.link-freccia{display:inline-flex;align-items:center;gap:6px;color:var(--acc);font-weight:700;text-decoration:none;font-size:15px}
.link-freccia .icona{width:16px;height:16px}

/* Intestazione */
.testata{position:sticky;top:0;z-index:20;border-bottom:1px solid var(--bordo)}
/* Lo sfondo sfocato sta in un livello a parte: un backdrop-filter sull'intestazione stessa la renderebbe il
   riferimento dei figli a posizione fissa (Safari e Chrome) e il menu del telefono si aprirebbe alto 40 px */
.testata:before{content:"";position:absolute;inset:0;z-index:-1;background:rgba(255,255,255,.92);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.barra{display:flex;align-items:center;gap:22px;height:68px}
.marchio{display:flex;align-items:center;gap:10px;text-decoration:none;flex:none}
.marchio img{width:44px;height:44px}
.marchio b{display:block;font-family:"Barlow Condensed";font-size:22px;letter-spacing:.5px;text-transform:uppercase;line-height:1}
.marchio small{display:block;font-size:11px;letter-spacing:2px;color:var(--tenue);text-transform:uppercase}
/* Il nome e' "Forcellini Carburanti": Carburanti sta a meta' fra Forcellini (22 px) e la scritta San Marino (11 px) */
.marchio-sotto{display:flex;align-items:baseline;gap:8px;margin-top:3px;white-space:nowrap}
.marchio .marchio-sotto em{font-style:normal;font-family:"Barlow Condensed";font-weight:700;font-size:16px;letter-spacing:1.5px;text-transform:uppercase;line-height:1}
.marchio .marchio-sotto small{display:inline;letter-spacing:1.5px}
.menu{display:flex;align-items:center;gap:20px;margin-left:auto;font-weight:600;font-size:15px}
.menu>a{text-decoration:none;opacity:.85;padding:6px 0;border-bottom:2px solid transparent}
.menu>a:hover{opacity:1;color:var(--acc)}
.menu>a[aria-current]{opacity:1;border-bottom-color:var(--ambra)}
.lingue{display:flex;gap:2px;border:1px solid var(--bordo);border-radius:999px;padding:2px}
.lingue a{text-decoration:none;font-size:12px;font-weight:700;padding:4px 8px;border-radius:999px;color:var(--tenue)}
.lingue a[aria-current]{background:var(--blu);color:#fff}
.tasti-tel{display:none;gap:8px;margin-left:auto}
.tasto-tondo{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:var(--card);color:var(--blu);border:1px solid var(--bordo);cursor:pointer}
.tasto-tondo .icona{width:20px;height:20px}

/* Hero: la foto con l'insegna Q8 in alto, senza velature; il testo sta in basso su una sfumatura chiara */
.hero{position:relative;min-height:720px;display:flex;align-items:flex-end;padding-bottom:90px;color:var(--testo);overflow:hidden;isolation:isolate}
.hero-foto{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:52% 12%;z-index:-2}
.hero:after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(243,246,251,0) 0%,rgba(243,246,251,0) 38%,rgba(243,246,251,.82) 66%,var(--bg) 100%)}
.hero-testo{width:100%}
.hero h1{font-size:clamp(44px,7vw,86px);text-transform:uppercase;letter-spacing:.5px;max-width:760px;font-weight:800}
.hero h1 span{color:var(--acc)}
.hero-sotto{font-size:20px;max-width:560px;margin:18px 0 28px;color:var(--testo-2)}
.azioni{display:flex;gap:12px;flex-wrap:wrap}
.stato{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.94);border:1px solid var(--bordo);color:var(--testo);
  padding:6px 14px;border-radius:999px;font-weight:600;font-size:14px;margin:0 0 18px;box-shadow:0 2px 8px rgba(20,35,80,.08)}
.stato i{width:9px;height:9px;border-radius:50%;background:var(--verde);box-shadow:0 0 0 4px rgba(22,163,74,.2)}
.stato.chiuso i{background:var(--rosso);box-shadow:0 0 0 4px rgba(211,47,47,.2)}
/* Pagina San Marino: foto scura con testo bianco */
.hero-pagina{min-height:520px;color:#fff}
.hero-pagina .hero-foto{object-position:center}
.hero-pagina:after{background:linear-gradient(180deg,rgba(10,20,50,.15),rgba(10,20,50,.78))}
.hero-pagina .hero-sotto{color:#e8ecf7}
.credito{position:absolute;right:12px;bottom:8px;font-size:11px;color:rgba(255,255,255,.7)}

/* Testata delle pagine interne */
.testata-pagina{padding:80px 0 40px;background:radial-gradient(1200px 400px at 20% 0%,rgba(30,58,138,.09),transparent 70%)}
.testata-pagina h1{font-size:clamp(38px,6vw,64px);text-transform:uppercase;font-weight:800}
.testata-pagina .hero-sotto{color:var(--tenue);margin-bottom:0}

/* Striscia informazioni */
.info{position:relative;z-index:2;margin-top:-44px}
.riquadro{display:grid;grid-template-columns:repeat(3,1fr);background:var(--card);border-radius:var(--raggio);box-shadow:var(--ombra);border:1px solid var(--bordo)}
.riquadro>div{padding:22px 26px;display:flex;gap:14px;align-items:flex-start}
.riquadro>div+div{border-left:1px solid var(--bordo)}
.riquadro .icona{width:28px;height:28px;color:var(--acc)}
.riquadro b{display:block;font-size:13px;letter-spacing:1.5px;text-transform:uppercase;color:var(--tenue)}
.riquadro span,.riquadro a{font-weight:600;text-decoration:none}

/* Sezioni */
.sezione{padding:90px 0}
.sezione.senza-sopra{padding-top:0}
.testa{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;margin-bottom:32px}
.testa>p{max-width:460px;color:var(--tenue);margin:0}

/* Prezzi (il totem resta scuro, come un vero totem con i numeri a LED) */
.prezzi-griglia{display:grid;grid-template-columns:1fr 1.25fr;grid-template-areas:"testa totem" "smac totem";
  grid-template-rows:auto 1fr;column-gap:40px;align-items:start}
.pz-testa{grid-area:testa}
.prezzi-griglia .totem{grid-area:totem}
.prezzi-griglia .smac{grid-area:smac}
.prezzi-griglia .testa{margin-bottom:24px}
.totem{background:linear-gradient(180deg,#0e1838,#070d22);border:1px solid #2c3d78;border-radius:18px;padding:22px 24px 18px;box-shadow:var(--ombra),inset 0 1px 0 rgba(255,255,255,.05);color:var(--testo)}
.totem.vuoto{display:flex;flex-direction:column;gap:16px;align-items:flex-start}
.totem.vuoto p{margin:0;color:var(--tenue)}
.tabella-prezzi{width:100%;border-collapse:collapse}
.tabella-prezzi thead th{font-size:12px;letter-spacing:1.5px;text-transform:uppercase;color:var(--tenue);font-weight:700;text-align:right;padding:0 6px 10px}
.tabella-prezzi tbody th{text-align:left;font-family:"Barlow Condensed";font-size:22px;text-transform:uppercase;font-weight:700;padding:10px 6px}
.tabella-prezzi tbody th small{display:block;font-family:Barlow;font-size:12px;color:var(--tenue);text-transform:none;font-weight:500;letter-spacing:.5px}
.tabella-prezzi td{text-align:right;padding:8px 6px;border-top:1px solid rgba(255,255,255,.06)}
.tabella-prezzi tbody th{border-top:1px solid rgba(255,255,255,.06)}
.tabella-prezzi tbody tr:first-child th,.tabella-prezzi tbody tr:first-child td,.tabella-prezzi thead td{border-top:0}
.led{display:inline-block;font-family:"Barlow Condensed";font-weight:700;font-size:30px;letter-spacing:2px;color:var(--ambra);
  text-shadow:0 0 14px rgba(245,163,0,.55);background:#05091a;border:1px solid #1b2756;border-radius:8px;padding:2px 10px;min-width:96px;text-align:center;font-variant-numeric:tabular-nums}
.led.spento{color:#3a4670;text-shadow:none}
.media{color:var(--tenue);font-family:"Barlow Condensed";font-size:20px;font-variant-numeric:tabular-nums}
.tabella-prezzi thead th.media{font-family:Barlow;font-size:12px}
.totem-piede{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:12px 0 0;font-size:13px;color:var(--tenue)}
.totem-nota{margin:8px 0 0;font-size:12px;color:#7d88a6}
.smac{display:flex;gap:18px;align-items:center;text-decoration:none;background:linear-gradient(135deg,#1b1240,#121e44);border:1px solid #3a2a6e;border-radius:var(--raggio);padding:20px;color:var(--testo)}
.smac img{width:110px;height:auto;flex:none}
.smac b{display:block;font-family:"Barlow Condensed";font-size:22px;text-transform:uppercase;line-height:1.1;margin-bottom:6px}
.smac>span>span{display:block;color:var(--tenue);font-size:15px;margin-bottom:8px}
.smac .link-freccia{color:#ff4fa3}

/* Servizi */
.servizi{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.servizio{background:var(--card);border:1px solid var(--bordo);border-radius:var(--raggio);overflow:hidden;display:flex;flex-direction:column;margin:0;box-shadow:0 6px 18px rgba(30,50,110,.06)}
.servizio .foto{height:180px;width:100%;object-fit:cover}
.servizio .corpo{padding:20px 20px 24px}
.servizio h3{margin-bottom:6px}
.servizio p{margin:0;color:var(--tenue);font-size:15.5px}
.servizi-extra{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:18px}
.servizi-extra>div{background:var(--card);border:1px solid var(--bordo);border-radius:var(--raggio);padding:20px 22px;box-shadow:0 6px 18px rgba(30,50,110,.06)}
.servizi-extra h3{font-size:18px;color:var(--tenue);margin-bottom:12px}
.chips{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.chips li{display:inline-flex;align-items:center;gap:6px;background:var(--card-2);border:1px solid var(--bordo);border-radius:999px;padding:6px 14px;font-weight:600;font-size:15px}
.chips .icona{width:18px;height:18px;color:var(--acc)}

/* Banda prenotazione (blu di marca) */
.prenota-banda{background:linear-gradient(135deg,#13265e,#1e3a8a);color:var(--testo);padding:90px 0}
.prenota-griglia{display:grid;grid-template-columns:1.1fr 1fr;gap:50px;align-items:center}
.foto-banda{width:100%;height:400px;object-fit:cover;border-radius:var(--raggio)}
.punti{list-style:none;padding:0;margin:22px 0 30px}
.punti li{display:flex;gap:12px;padding:7px 0;align-items:flex-start}
.punti .icona{color:var(--acc);margin-top:2px}

/* Recensioni */
.voto{display:flex;align-items:center;gap:14px;text-decoration:none}
.voto strong{font-family:"Barlow Condensed";font-size:56px;line-height:1}
.voto small{display:block;color:var(--tenue);font-size:14px}
.stelle{display:flex;gap:2px;color:var(--ambra)}
.stelle .icona{width:18px;height:18px}
.recensioni{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.recensione{background:var(--card);border:1px solid var(--bordo);border-radius:var(--raggio);padding:26px;margin:0;display:flex;flex-direction:column;box-shadow:0 6px 18px rgba(30,50,110,.06)}
.recensione blockquote{margin:12px 0 18px;font-size:16.5px;flex:1}
.recensione figcaption{font-weight:700;font-size:14px;color:var(--tenue)}
.recensione figcaption small{display:block;font-weight:500;font-size:12px;opacity:.8}

/* Notizie e San Marino */
.due{display:grid;grid-template-columns:1.2fr 1fr;gap:26px;align-items:start}
.due.uguali{grid-template-columns:1fr 1fr}
.due.uguali h2{margin-bottom:14px}
.notizie{background:var(--card);border:1px solid var(--bordo);border-radius:var(--raggio);padding:6px 24px;box-shadow:0 6px 18px rgba(30,50,110,.06)}
.notizia{display:block;padding:15px 0;border-bottom:1px solid var(--bordo);text-decoration:none}
.notizia:last-child{border-bottom:0}
.notizia small{color:var(--acc);font-weight:700;letter-spacing:.8px;text-transform:uppercase;font-size:12px}
.notizia b{display:block;font-size:17px;margin-top:3px;font-weight:600;line-height:1.35}
.notizia:hover b{text-decoration:underline;text-decoration-color:var(--ambra)}
.notizie>.tenue{padding:12px 0}
.sanmarino-scheda{position:relative;display:flex;align-items:flex-end;min-height:420px;border-radius:var(--raggio);overflow:hidden;text-decoration:none;color:#fff;isolation:isolate;background:#30477f}
.sm-foto{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;transition:transform .5s}
.sanmarino-scheda:hover .sm-foto{transform:scale(1.04)}
.sanmarino-scheda:after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(10,20,50,.05),rgba(10,20,50,.9))}
.sm-testo{display:flex;flex-direction:column;gap:8px;padding:30px;align-items:flex-start}
.sm-testo .h3{font-size:34px}
.sm-testo>span:nth-child(3){opacity:.9}
.sm-griglia{display:grid;grid-template-columns:1.5fr 1fr;gap:40px;align-items:start}
.sm-sezioni{display:grid;gap:18px}
.sm-sezione{background:var(--card);border:1px solid var(--bordo);border-radius:var(--raggio);padding:26px 28px;box-shadow:0 6px 18px rgba(30,50,110,.06)}
.sm-sezione p{margin:12px 0 0;color:var(--testo-2)}
.sm-sezione .punti{margin:10px 0 0}
.sm-griglia aside h2{margin-bottom:4px}

/* Contatti */
.contatti{display:grid;grid-template-columns:1fr 1.3fr;gap:30px;align-items:start}
.contatti-elenco{list-style:none;padding:0;margin:18px 0}
.contatti-elenco li{display:flex;gap:12px;padding:6px 0;align-items:center}
.contatti-elenco .icona{color:var(--acc)}
.contatti-elenco a{text-decoration:none;font-weight:600}
.orari{width:100%;border-collapse:collapse;margin-top:10px}
.orari td{padding:8px 0;border-bottom:1px solid var(--bordo)}
.orari td:last-child{text-align:right;font-weight:600}
.orari tr.oggi td{color:var(--acc)}
.mappa{position:relative;display:block;border-radius:var(--raggio);overflow:hidden;border:1px solid var(--bordo);aspect-ratio:3/2}
.mappa img{width:100%;height:100%;object-fit:cover}
.segnaposto{position:absolute;left:50%;top:50%;width:40px;height:52px;transform:translate(-50%,-100%);filter:drop-shadow(0 4px 6px rgba(0,0,0,.35))}
.mappa-apri{position:absolute;left:14px;bottom:14px;display:inline-flex;align-items:center;gap:6px;background:rgba(255,255,255,.95);color:var(--testo);
  border:1px solid var(--bordo);padding:8px 14px;border-radius:999px;font-weight:700;font-size:14px;box-shadow:0 2px 8px rgba(20,35,80,.15)}
.mappa-apri .icona{width:16px;height:16px}

/* Prenotazione */
.modulo-griglia{display:grid;grid-template-columns:1.6fr 1fr;gap:40px;align-items:start}
.modulo fieldset{border:1px solid var(--bordo);background:var(--card);border-radius:var(--raggio);padding:20px 22px 22px;margin:0 0 18px;box-shadow:0 6px 18px rgba(30,50,110,.06)}
.modulo fieldset.errato{border-color:var(--rosso)}
.modulo legend{font-family:"Barlow Condensed";font-size:20px;text-transform:uppercase;font-weight:700;padding:0 8px;letter-spacing:.3px}
.scelte{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.scelta{position:relative;cursor:pointer}
.scelta input{position:absolute;opacity:0}
.scelta-corpo{display:flex;flex-direction:column;gap:6px;height:100%;border:2px solid var(--bordo);border-radius:12px;padding:16px;background:var(--campo);color:var(--tenue);font-size:15px;transition:border-color .15s}
.scelta-testa{display:flex;justify-content:space-between;gap:10px;align-items:baseline;color:var(--testo)}
.scelta-testa b{font-size:17px}
.prezzo{font-family:"Barlow Condensed";font-size:24px;font-weight:700;color:var(--acc)}
.scelta input:checked+.scelta-corpo{border-color:var(--ambra);background:#fff7e3}
.scelta input:focus-visible+.scelta-corpo{outline:3px solid var(--blu-chiaro);outline-offset:2px}
.campi{display:grid;gap:14px;margin-bottom:14px}
fieldset>.campi:last-child{margin-bottom:0}
.due-col{grid-template-columns:1fr 1fr}
.campo{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
.campi .campo{margin-bottom:0}
.campo>span{font-weight:600;font-size:14px;color:var(--testo-2)}
.campo small{color:var(--tenue);font-weight:500}
.campo input,.campo select,.campo textarea{font:inherit;font-size:16px;color:var(--testo);background:var(--campo);border:1.5px solid #cdd5e4;border-radius:10px;padding:11px 12px;width:100%}
.campo textarea{resize:vertical}
.campo input::placeholder,.campo textarea::placeholder{color:#8a94ad}
.campo.errato input,.campo.errato select{border-color:var(--rosso)}
.spunta{display:flex;gap:10px;align-items:flex-start;font-size:15px;margin:6px 0 14px;cursor:pointer}
.spunta input{width:20px;height:20px;margin:1px 0 0;accent-color:var(--blu);flex:none}
.spunta.errato{color:var(--rosso)}
.spunta a{color:var(--blu);text-decoration:underline}
.nota{font-size:14px;color:var(--tenue);margin:8px 0 0}
.trappola{position:absolute;left:-5000px;width:1px;height:1px;overflow:hidden}
.avviso{border-radius:12px;padding:14px 18px;margin:0 0 18px;font-size:15px}
.avviso ul{margin:6px 0 0;padding-left:20px}
.avviso.errore{background:rgba(211,47,47,.08);border:1px solid rgba(211,47,47,.4)}
.avviso.ok{background:rgba(22,163,74,.09);border:1px solid rgba(22,163,74,.4)}
.avviso.attenzione{background:rgba(245,163,0,.13);border:1px solid rgba(245,163,0,.55);color:#6b4300}
.modulo-lato{position:sticky;top:90px;background:var(--card);border:1px solid var(--bordo);border-radius:var(--raggio);padding:24px;box-shadow:0 6px 18px rgba(30,50,110,.06)}
.modulo-lato ol{padding-left:20px;color:var(--testo-2)}
.modulo-lato ol li{margin-bottom:8px}
.modulo-lato a{color:var(--blu);font-weight:700;text-decoration:none}
.foto-lato{border-radius:10px;margin-top:16px;height:180px;width:100%;object-fit:cover}
.esito{text-align:center;background:var(--card);border:1px solid var(--bordo);border-radius:var(--raggio);padding:40px 30px;display:flex;flex-direction:column;align-items:center;gap:14px}
.esito p{margin:0;font-size:18px}

/* Staff */
.staff-griglia{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.persona{background:var(--card);border:1px dashed #c3cde0;border-radius:var(--raggio);padding:26px;text-align:center;color:var(--tenue)}
.ritratto{width:120px;height:120px;border-radius:50%;margin:0 auto 14px;background:radial-gradient(circle at 50% 38%,#c3cde6 0 22%,transparent 23%),radial-gradient(circle at 50% 100%,#c3cde6 0 42%,transparent 43%),var(--bg-2)}

/* Testi lunghi */
.testo-lungo h2{margin:28px 0 8px}
.testo-lungo p{color:var(--testo-2)}

/* Piede (scuro) */
.piede{background:#0b1430;color:#b9c2da;padding:44px 0;font-size:14px}
.piede-griglia{display:grid;grid-template-columns:1.4fr 1fr 1.2fr;gap:26px;align-items:start}
.piede-marchio{display:flex;gap:14px;align-items:flex-start}
.piede-marchio span{display:block}
.piede-marchio b{color:#fff;font-size:15px}
.piede-contatti,.piede-altro{display:flex;flex-direction:column;gap:8px}
.piede a{text-decoration:none}
.piede a:hover{color:var(--ambra)}
.piede .icona{width:16px;height:16px;margin-right:6px;color:var(--ambra)}
/* Il logo Q8 e' blu su fondo bianco: sul piede scuro sta dentro un riquadro bianco, in piccolo (secondario al logo FC) */
.marchio-q8{display:inline-flex;align-self:flex-start;align-items:center;gap:10px;font-weight:600;color:#cfd6e8}
.marchio-q8 img{width:auto;height:28px;background:#fff;border-radius:7px;padding:2px 6px}

/* Pannello di gestione */
.gestione-corpo{padding:30px 20px 60px}
.gestione-corpo h1{font-size:40px;text-transform:uppercase;margin-bottom:20px}
.schede-gestione{display:flex;gap:6px;margin-left:auto}
.schede-gestione a{text-decoration:none;padding:8px 14px;border-radius:999px;font-weight:600;color:var(--tenue)}
.schede-gestione a[aria-current]{background:var(--blu);color:#fff}
.esci{color:var(--tenue);font-size:14px}
.tabella-gestione{width:100%;border-collapse:collapse;background:var(--card);border:1px solid var(--bordo);border-radius:var(--raggio);overflow:hidden}
.tabella-gestione th,.tabella-gestione td{padding:10px 12px;border-bottom:1px solid var(--bordo);text-align:left}
.tabella-gestione thead th{font-size:12px;letter-spacing:1.2px;text-transform:uppercase;color:var(--tenue)}
.tabella-gestione tbody th{font-size:17px}
.tabella-gestione small{color:var(--tenue);font-weight:500}
.tabella-gestione input[type=text]{font:700 20px "Barlow Condensed";letter-spacing:1px;width:110px;padding:8px 10px;color:var(--blu);background:var(--campo);border:1.5px solid #cdd5e4;border-radius:8px;text-align:right}
.tabella-gestione input.errato{border-color:var(--rosso)}
.tabella-gestione .spunta{margin:0}
.non-previsto{color:#b8c0d4}
.modulo-prezzi .bottone{margin-top:18px}
.accesso{min-height:100vh;display:grid;place-items:center;padding:20px}
.riquadro-accesso{width:100%;max-width:360px;background:var(--card);border:1px solid var(--bordo);border-radius:18px;padding:30px 26px;display:flex;flex-direction:column;gap:12px;align-items:stretch;box-shadow:var(--ombra)}
.riquadro-accesso img{align-self:center}
.riquadro-accesso h1{font-size:26px;text-align:center;text-transform:uppercase}
.riquadro-accesso .errore{color:var(--rosso);min-height:1.4em;margin:0;font-size:14px}
.richieste{display:grid;gap:12px}
.richiesta{background:var(--card);border:1px solid var(--bordo);border-radius:12px;padding:16px 18px}
.richiesta.in-sospeso{border-color:var(--ambra)}
.richiesta header{font-size:16px}
.richiesta dl{margin:8px 0}
.richiesta dt{font-weight:700}
.richiesta dd{margin:2px 0;color:var(--testo-2)}
.richiesta dd a{color:var(--blu)}
.richiesta .note{font-style:italic}
.richiesta footer{font-size:12px;color:var(--tenue)}
.etichetta{font-size:12px;border:1px solid var(--bordo);border-radius:999px;padding:2px 8px;color:var(--tenue);margin-left:6px}
.numeri{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:18px}
.numero{background:var(--card);border:1px solid var(--bordo);border-radius:12px;padding:14px 16px}
.numero small{display:block;color:var(--tenue);font-size:13px;text-transform:uppercase;letter-spacing:1px}
.numero b{font-size:18px}
.riquadro-gestione{background:var(--card);border:1px solid var(--bordo);border-radius:var(--raggio);padding:20px}
.grafico{width:100%;height:auto;margin-top:12px}
.grafico .barra-pagine{fill:#2c4aa8}
.grafico .barra-visitatori{fill:var(--ambra)}
.grafico text{fill:var(--tenue);font-size:11px;text-anchor:middle;font-family:Barlow}
.legenda{display:inline-block;width:12px;height:12px;border-radius:3px;vertical-align:middle;margin:0 4px 0 10px}
.legenda.pagine{background:#2c4aa8}
.legenda.visitatori{background:var(--ambra)}
.classifiche{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px;margin-top:18px}
.classifica{background:var(--card);border:1px solid var(--bordo);border-radius:12px;padding:16px 18px}
.classifica h2{font-size:18px;margin-bottom:8px}
.classifica ol{list-style:none;padding:0;margin:0}
.classifica li{display:flex;gap:8px;padding:4px 0;border-bottom:1px solid var(--bordo)}
.classifica li span{flex:1}
.classifica li small{color:var(--tenue);width:38px;text-align:right}
code{background:var(--bg-2);padding:2px 6px;border-radius:6px}

/* Banner delle festivita' (oggi e domani) */
.avviso-festa{background:#fff6dc;border-bottom:1px solid #efd58a;padding:10px 0}
.avviso-festa p{max-width:1180px;margin:0 auto;padding:0 20px;display:flex;gap:10px;align-items:baseline;font-weight:600;font-size:15px;line-height:1.4}
.avviso-festa p+p{margin-top:4px}
.avviso-festa p:before{content:"";flex:none;width:10px;height:10px;border-radius:50%;transform:translateY(0)}
.avviso-festa p.chiuso:before{background:var(--rosso);box-shadow:0 0 0 4px rgba(211,47,47,.18)}
.avviso-festa p.aperto:before{background:var(--verde);box-shadow:0 0 0 4px rgba(22,163,74,.2)}

/* Self service 24 ore su 24 */
.stati{display:flex;gap:10px;flex-wrap:wrap;margin:0 0 18px}
.stati .stato{margin:0}
.stato.self i{background:var(--ambra);box-shadow:0 0 0 4px rgba(245,163,0,.25)}
.riquadro .sub{display:block;margin-top:2px;font-size:14px;color:var(--acc)}
.self24{display:flex;gap:22px;align-items:center;margin-top:18px;background:linear-gradient(135deg,#17265a,#101a3f);border:1px solid #3a4f9a;border-radius:var(--raggio);padding:22px 26px;color:var(--testo)}
.self24-sigla{flex:none}
.self24-sigla .led{font-size:44px;min-width:130px;padding:6px 14px;letter-spacing:3px}
.self24 h3{margin-bottom:6px;font-size:26px}
.self24 p{margin:0;color:var(--testo-2)}
.pag-no{display:flex;gap:8px;align-items:flex-start;margin:14px 0 0;color:#a32121;font-size:15px}
.pag-no .icona{width:18px;height:18px;margin-top:3px;color:var(--rosso)}
.self-nota{color:var(--acc)}

/* Telefono e tablet */
.menu>a,.bottone{white-space:nowrap}
@media (max-width:1120px){
  .barra .solo-pc{display:none}
}
@media (max-width:980px){
  .servizi{grid-template-columns:1fr 1fr}
  .prezzi-griglia{grid-template-columns:1fr;grid-template-areas:"testa" "totem" "smac";grid-template-rows:auto;row-gap:18px}
  .menu{gap:14px;font-size:14px}
}
@media (max-width:860px){
  body{font-size:16px}
  .tasti-tel{display:flex}
  .solo-pc{display:none}
  .menu{display:none;position:fixed;top:69px;left:0;right:0;bottom:0;background:var(--bg);flex-direction:column;align-items:stretch;
    gap:0;padding:10px 20px 30px;overflow-y:auto;font-size:20px;margin:0}
  .menu.aperto{display:flex}
  .menu>a{padding:14px 4px;border-bottom:1px solid var(--bordo)}
  .menu>a[aria-current]{border-bottom-color:var(--bordo);color:var(--acc)}
  .lingue{align-self:flex-start;margin-top:20px}
  .lingue a{font-size:15px;padding:8px 14px}
  /* home su telefono: la foto con l'insegna Q8 sta sopra, intera; il testo sotto, sul fondo chiaro */
  .hero:not(.hero-pagina){display:block;min-height:0;padding:0 0 76px}
  .hero:not(.hero-pagina) .hero-foto{position:relative;inset:auto;display:block;width:100%;height:330px;object-position:50% 10%;z-index:0;
    -webkit-mask-image:linear-gradient(180deg,#000 72%,transparent);mask-image:linear-gradient(180deg,#000 72%,transparent)}
  .hero:not(.hero-pagina):after{display:none}
  .hero:not(.hero-pagina) .hero-testo{position:relative;margin-top:-26px}
  .hero-pagina{min-height:560px;padding:60px 0 80px}
  .hero-sotto{font-size:17px}
  .riquadro{grid-template-columns:1fr}
  .riquadro>div+div{border-left:0;border-top:1px solid var(--bordo)}
  .riquadro>div{padding:16px 20px}
  .sezione,.prenota-banda{padding:60px 0}
  .testa{flex-direction:column;align-items:flex-start}
  .servizi{gap:12px}
  .servizio .foto{height:120px}
  .servizio .corpo{padding:14px}
  .servizio h3{font-size:19px}
  .servizio p{font-size:14px}
  .servizi-extra,.prenota-griglia,.due,.due.uguali,.contatti,.modulo-griglia,.sm-griglia,.piede-griglia{grid-template-columns:1fr}
  .foto-banda{height:220px;order:-1}
  .self24{flex-direction:column;align-items:flex-start;gap:14px;padding:20px}
  .self24-sigla .led{font-size:34px;min-width:0}
  .avviso-festa p{font-size:14px}
  .recensioni,.staff-griglia{grid-template-columns:1fr}
  .totem{padding:16px 12px 14px}
  .tabella-prezzi tbody th{font-size:18px;padding:8px 4px}
  .tabella-prezzi td{padding:6px 3px}
  .led{font-size:22px;min-width:0;padding:2px 6px;letter-spacing:1px}
  .media{font-size:16px}
  .smac{flex-direction:column;align-items:flex-start}
  .scelte,.due-col{grid-template-columns:1fr}
  .modulo fieldset{padding:16px}
  .modulo-lato{position:static}
  .numeri{grid-template-columns:1fr 1fr}
  .schede-gestione{margin-left:0}
  .gestione .barra{height:auto;flex-wrap:wrap;padding-top:10px;padding-bottom:10px;gap:10px}
  .tabella-gestione input[type=text]{width:84px;font-size:18px}
  .tabella-gestione th,.tabella-gestione td{padding:8px 6px}
  .tabella-gestione td:last-child{font-size:13px}
}
@media (max-width:389px){
  /* telefoni stretti: l'insegna con San Marino non sta accanto ai due tasti, resta "Forcellini Carburanti" */
  .marchio .marchio-sotto small{display:none}
}
@media (max-width:420px){
  .marchio small{letter-spacing:1px}
  .led{font-size:20px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition:none!important}
}