/* ==========================================================================
   Pescara Multiservice — Design System 2026
   Palette derivata dal brand ufficiale (#005D8C) + accenti Adriatico
   ========================================================================== */

/* ---------- 1. Reset ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:112px}
img,svg,video{display:block;max-width:100%;height:auto}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
table{border-collapse:collapse;width:100%}
:focus-visible{outline:3px solid var(--focus);outline-offset:3px;border-radius:6px}

/* ---------- 2. Tokens ---------- */
:root{
  --brand-900:#00293E; --brand-800:#003F5E; --brand-700:#005D8C; --brand-600:#0A76AE;
  --brand-500:#128FCE; --brand-400:#3FAEE4; --brand-300:#7ECDF1; --brand-100:#D6EEFA;
  --teal:#00B7A8; --teal-d:#008C81; --amber:#FF9F1C; --green:#2FBF71; --red:#E5484D; --violet:#7A5AF8;

  --bg:#F2F7FB; --bg-2:#E7F0F7; --surface:#FFFFFF; --surface-2:#F8FBFD;
  --ink:#0A1B26; --ink-2:#274353; --muted:#4E6979; --line:#DAE7F0; --line-2:#C6D9E6;
  /* testo d'accento: unico token, verificato >=4.5:1 sia su superficie
     chiara sia sul tint --brand-100 (5.93:1 su #D6EEFA, 7.13:1 su bianco) */
  --accent-txt:#005D8C;
  /* velo sopra le illustrazioni hero: tiene leggibile il testo */
  --scrim-a:rgba(242,247,251,.94); --scrim-b:rgba(242,247,251,.52); --hero-tint:transparent;
  --focus:#128FCE;
  --shadow-s:0 1px 2px rgba(0,41,62,.06),0 2px 6px rgba(0,41,62,.05);
  --shadow-m:0 4px 10px rgba(0,41,62,.07),0 12px 28px rgba(0,41,62,.08);
  --shadow-l:0 10px 24px rgba(0,41,62,.10),0 30px 64px rgba(0,41,62,.14);
  --glass:rgba(255,255,255,.72); --glass-b:rgba(255,255,255,.55);
  --grad:linear-gradient(120deg,var(--brand-700),var(--brand-500) 45%,var(--teal));
  --grad-soft:linear-gradient(140deg,#EAF5FC,#DFF4F1);
  --r-s:6px; --r-m:10px; --r-l:16px; --r-xl:22px; --r-pill:999px;
  --wrap:1240px; --gut:clamp(18px,4vw,44px);
  --ff-display:"Archivo","Plus Jakarta Sans",-apple-system,Segoe UI,Roboto,sans-serif;
  --ff:"Plus Jakarta Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --ff-mono:"JetBrains Mono",ui-monospace,"Cascadia Mono","Segoe UI Mono",Menlo,monospace;
  --e:cubic-bezier(.22,1,.36,1); --e-io:cubic-bezier(.65,0,.35,1);
  --hdr:96px;
}
[data-theme="dark"]{
  --bg:#050D14; --bg-2:#081722; --surface:#0C1B26; --surface-2:#102633;
  --ink:#E9F3F9; --ink-2:#C3D8E5; --muted:#9AB4C4; --line:#173344; --line-2:#20465C;
  /* in scuro l'accento va schiarito: #005D8C su #0C2E42 dava 1.98:1 */
  --accent-txt:#6FC8EE;
  --scrim-a:rgba(5,13,20,.93); --scrim-b:rgba(5,13,20,.58); --hero-tint:rgba(5,13,20,.42);
  --brand-100:#0C2E42; --focus:#4FC0EE;
  --shadow-s:0 1px 2px rgba(0,0,0,.5); --shadow-m:0 8px 26px rgba(0,0,0,.5);
  --shadow-l:0 18px 60px rgba(0,0,0,.62);
  --glass:rgba(12,27,38,.74); --glass-b:rgba(12,27,38,.55);
  --grad:linear-gradient(120deg,var(--brand-500),var(--brand-400) 45%,var(--teal));
  --grad-soft:linear-gradient(140deg,#0B2231,#0A2A2A);
}

/* ---------- 3. Base ---------- */
html{overflow-x:clip}
body{
  font-family:var(--ff);background:var(--bg) url('../img/motivo-chiaro-b.png') repeat;background-size:640px;color:var(--ink);
  line-height:1.65;font-size:17px;overflow-x:clip;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  transition:background .4s var(--e),color .4s var(--e);
}
h1,h2,h3,h4,h5{line-height:1.12;font-weight:800;letter-spacing:-.022em;color:var(--ink)}
h1{font-size:clamp(2.3rem,5.4vw,4.15rem)}
h2{font-size:clamp(1.75rem,3.5vw,2.85rem)}
h3{font-size:clamp(1.22rem,2vw,1.6rem);letter-spacing:-.012em}
h4{font-size:1.06rem;letter-spacing:-.005em}
/* Il livello del titolo serve alla struttura, la classe ne conserva la resa:
   cosi' si corregge la gerarchia per i lettori di schermo senza toccare il disegno. */
.as-h2{font-size:clamp(1.75rem,3.5vw,2.85rem);letter-spacing:-.022em}
.as-h3{font-size:clamp(1.22rem,2vw,1.6rem);letter-spacing:-.012em}
.as-h4{font-size:1.06rem;letter-spacing:-.005em}
.as-h5{font-size:.95rem;letter-spacing:0}
p{color:var(--ink-2)}
strong,b{font-weight:700;color:var(--ink)}
::selection{background:var(--brand-500);color:#fff}

.wrap{width:min(var(--wrap),100% - var(--gut)*2);margin-inline:auto}
.wrap-n{width:min(880px,100% - var(--gut)*2);margin-inline:auto}
.sec{padding:clamp(56px,8vw,110px) 0;position:relative}
.sec-tight{padding:clamp(38px,5vw,68px) 0}
.center{text-align:center}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* Il link di salto deve diventare visibile quando riceve il fuoco:
   altrimenti chi naviga da tastiera non sa di averlo raggiunto. */
a.sr-only:focus{
  position:fixed;top:14px;left:14px;width:auto;height:auto;margin:0;
  padding:14px 22px;overflow:visible;clip:auto;white-space:normal;z-index:200;
  background:var(--surface);color:var(--ink);border:2px solid var(--focus);
  border-radius:var(--r-m);box-shadow:var(--shadow-l);font-weight:700;text-decoration:none;
}

/* ---------- 4. Utility bits ---------- */
/* le "eyebrow" a pillola sono state ritirate da tutto il sito */
.eyebrow{display:none}
@keyframes pulse{70%{box-shadow:0 0 0 9px transparent}100%{box-shadow:0 0 0 0 transparent}}
.lead{font-size:clamp(1.02rem,1.5vw,1.2rem);color:var(--muted);max-width:66ch}
.sec-head{max-width:760px;margin-bottom:clamp(30px,4vw,54px)}
.sec-head.center{margin-inline:auto}
.sec-head h2{margin:16px 0 14px}
.divider{height:1px;background:linear-gradient(90deg,transparent,var(--line-2),transparent);border:0;margin:0}

/* ---------- 5. Buttons ---------- */
/* bottoni: rettangolo con angoli morbidi, tinta piena, nessun sollevamento */
.btn{
  --bg-b:var(--brand-600); --fg-b:#fff; --bg-h:var(--brand-700);
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:13px 22px;border-radius:9px;font-weight:700;font-size:.95rem;
  letter-spacing:-.01em;background:var(--bg-b);color:var(--fg-b);
  border:1px solid transparent;white-space:nowrap;
  transition:background .2s var(--e-io),border-color .2s var(--e-io),color .2s var(--e-io);
}
.btn:hover{background:var(--bg-h)}
.btn:active{background:var(--brand-800)}
.btn svg{width:18px;height:18px;flex:none;transition:transform .28s var(--e)}
.btn:hover svg:last-child{transform:translateX(3px)}
.btn-ghost{--bg-b:transparent;--fg-b:var(--ink);--bg-h:var(--brand-100);border-color:var(--line-2)}
.btn-ghost:hover{color:var(--accent-txt);border-color:var(--brand-400)}
.btn-solid{--bg-b:var(--ink);--fg-b:var(--bg);--bg-h:var(--brand-900)}
.btn-white{--bg-b:#fff;--fg-b:var(--brand-800);--bg-h:#E7F2FA}
.btn-sm{padding:10px 16px;font-size:.86rem}
.btn-lg{padding:16px 28px;font-size:1.02rem}
.btn-block{display:flex;width:100%}

.link-a{display:inline-flex;align-items:center;gap:8px;font-weight:700;color:var(--accent-txt);position:relative}
.link-a::after{content:"";position:absolute;left:0;bottom:-2px;width:100%;height:1.5px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .4s var(--e)}
.link-a:hover::after{transform:scaleX(1);transform-origin:left}
.link-a svg{width:15px;height:15px;transition:transform .3s var(--e)}
.link-a:hover svg{transform:translateX(4px)}

/* ---------- 6. Header ---------- */
.topbar{
  background:var(--brand-900);color:#BFE0F1;font-size:.8rem;position:relative;z-index:60;
  border-bottom:1px solid rgba(255,255,255,.07);
}
.topbar-in{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:40px;flex-wrap:wrap}
.topbar a{opacity:.85;transition:opacity .25s,color .25s}
.topbar a:hover{opacity:1;color:#fff}
.topbar-l,.topbar-r{display:flex;align-items:center;gap:6px}
.topbar-r{gap:4px;flex-wrap:wrap;justify-content:flex-end;min-width:0}
/* almeno 24px di altezza: soglia del criterio sulla dimensione dei bersagli */
.topbar-r>*{padding:8px 10px;border-radius:var(--r-s);min-height:24px;display:inline-flex;align-items:center}
.topbar-r>a{gap:7px}
.topbar-r>a svg{width:14px;height:14px;flex:none;opacity:.8}
.tb-chip{display:inline-flex;align-items:center;gap:7px;font-weight:600;min-height:24px}
.tb-chip svg{width:14px;height:14px;opacity:.75}
.tb-sep{width:1px;height:14px;padding:0!important;min-height:0!important;border-radius:0!important;background:rgba(255,255,255,.22);flex:none;align-self:center}

/* dropdown reclami */
.dd{position:relative}
.dd-btn{display:inline-flex;align-items:center;gap:6px;font-weight:700;color:#fff;padding:6px 10px;border-radius:var(--r-s);transition:background .25s}
.dd-btn:hover{background:rgba(255,255,255,.1)}
.dd-btn svg{width:13px;height:13px;transition:transform .3s var(--e)}
.dd.open .dd-btn svg{transform:rotate(180deg)}
.dd-menu{
  position:absolute;top:calc(100% + 10px);left:0;min-width:250px;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r-m);box-shadow:var(--shadow-l);padding:8px;
  opacity:0;visibility:hidden;transform:translateY(-8px);transition:all .32s var(--e);z-index:70;
}
.dd.open .dd-menu{opacity:1;visibility:visible;transform:none}
.dd-menu a{display:flex;align-items:center;gap:10px;padding:10px 13px;border-radius:var(--r-s);
  color:var(--ink-2);font-size:.9rem;font-weight:600;opacity:1;transition:background .22s,color .22s,transform .22s}
.dd-menu a:hover{background:var(--brand-100);color:var(--accent-txt);transform:translateX(3px)}
.dd-menu a i{width:7px;height:7px;border-radius:50%;background:var(--teal);flex:none}

/* main nav */
.hdr{
  position:sticky;top:0;z-index:50;background:var(--surface);
  border-bottom:1px solid var(--line);
  transition:box-shadow .4s var(--e);
}
.hdr.stuck{box-shadow:var(--shadow-s)}
.hdr{will-change:transform;transition:box-shadow .4s var(--e),border-color .4s var(--e),background .4s var(--e),transform .35s var(--e)}
.hdr.via{transform:translateY(-110%)}
.hdr-in{display:flex;align-items:center;justify-content:space-between;gap:22px;height:var(--hdr);transition:height .35s var(--e)}
.hdr.stuck .hdr-in{height:74px}
.brand{display:flex;align-items:center;gap:13px;flex:none}
.brand img{height:46px;width:auto;transition:height .35s var(--e)}
.hdr.stuck .brand img{height:38px}
[data-theme="dark"] .brand img{filter:brightness(0) invert(1)}
.brand-txt{display:flex;flex-direction:column;line-height:1.15}
.brand-txt b{font-size:1rem;font-weight:800;letter-spacing:-.02em}
.brand-txt span{font-size:.66rem;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);font-weight:700}

.nav{display:flex;align-items:center;gap:2px}
.nav a{
  position:relative;padding:10px 13px;font-weight:600;font-size:.94rem;
  color:var(--ink-2);transition:color .25s var(--e);
}
.nav a::after{content:"";position:absolute;left:13px;right:13px;bottom:2px;height:2px;
  background:var(--brand-600);transform:scaleX(0);transform-origin:left;transition:transform .28s var(--e)}
.nav a:hover{color:var(--accent-txt)}
.nav a:hover::after{transform:scaleX(1)}
.nav a.on{color:var(--accent-txt);font-weight:700}
.nav a.on::after{transform:scaleX(1)}
.hdr-act{display:flex;align-items:center;gap:9px;flex:none}
.icon-btn{
  width:40px;height:40px;display:grid;place-items:center;border-radius:var(--r-s);
  border:0;color:var(--ink-2);background:transparent;
  transition:background .25s var(--e),color .25s var(--e);
}
.icon-btn:hover{color:var(--accent-txt);background:color-mix(in srgb,var(--brand-500) 9%,transparent)}
.icon-btn svg{width:19px;height:19px}
.burger{display:none}
.burger span{display:block;width:19px;height:2px;background:currentColor;border-radius:2px;transition:.35s var(--e)}
.burger span+span{margin-top:4.5px}
.burger.x span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.burger.x span:nth-child(2){opacity:0;transform:scaleX(0)}
.burger.x span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

/* La barra avanza con scaleX, non con width: la trasformazione la fa il
   compositore e non costringe il browser a rifare impaginazione e disegno
   a ogni fotogramma dello scorrimento. */
.progress{position:fixed;top:0;left:0;height:3px;width:100%;background:var(--brand-500);
  z-index:100;transform:scaleX(0);transform-origin:0 50%;transition:transform .1s linear;
  border-radius:0 3px 3px 0;will-change:transform}

/* mobile drawer */
.drawer{
  position:fixed;inset:0;z-index:90;background:var(--surface);padding:26px var(--gut) 40px;
  /* overscroll-behavior ferma il gesto quando il menu e' arrivato in fondo:
     senza, lo scorrimento prosegue sulla pagina sotto e il sito si vede
     scorrere dietro al pannello. Il solo overflow:hidden sul body (impostato
     da main.js all'apertura) su iOS non basta a impedirlo. */
  overflow-y:auto;overscroll-behavior:contain;transform:translateX(100%);
  /* visibility toglie il pannello dall'ordine di tabulazione: con il solo
     transform i collegamenti restavano raggiungibili con Tab da chiuso */
  visibility:hidden;
  transition:transform .5s var(--e),visibility .5s var(--e);
}
.drawer.open{transform:none;visibility:visible}
.drawer-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:28px}
.drawer nav{display:flex;flex-direction:column;gap:3px}
.drawer nav a{
  padding:15px 16px;border-radius:var(--r-m);font-weight:700;font-size:1.12rem;
  display:flex;align-items:center;justify-content:space-between;border:1px solid transparent;
  opacity:0;transform:translateX(24px);
}
.drawer.open nav a{animation:dIn .5s var(--e) forwards}
@keyframes dIn{to{opacity:1;transform:none}}
.drawer nav a:hover,.drawer nav a.on{background:var(--brand-100);color:var(--accent-txt);border-color:var(--line)}
.drawer nav a svg{width:16px;height:16px;opacity:.4}
.drawer-sub{margin-top:26px;padding-top:22px;border-top:1px solid var(--line)}
.drawer-sub h5{font-size:.7rem;letter-spacing:.15em;text-transform:uppercase;color:var(--muted);margin-bottom:12px}
.drawer-sub a{display:block;padding:9px 0;color:var(--muted);font-weight:600;font-size:.94rem}
.drawer-sub a:hover{color:var(--accent-txt)}

/* search overlay */
.search-ov{position:fixed;inset:0;z-index:95;background:var(--glass-b);backdrop-filter:blur(22px);
  display:grid;place-items:start center;padding-top:16vh;opacity:0;visibility:hidden;transition:.4s var(--e)}
.search-ov.open{opacity:1;visibility:visible}
.search-box{width:min(680px,90vw);background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-l);box-shadow:var(--shadow-l);padding:12px;transform:translateY(-18px) scale(.97);transition:.45s var(--e)}
.search-ov.open .search-box{transform:none}
.search-box input{width:100%;border:0;background:none;padding:16px 18px;font-size:1.15rem;font-weight:600;outline:none}
.search-box input:focus-visible{outline:2px solid var(--focus);outline-offset:-2px;border-radius:var(--r-s)}
.search-res{max-height:46vh;overflow:auto;margin-top:6px;border-top:1px solid var(--line);padding-top:8px}
.search-res:empty{display:none}
.search-res a{display:block;padding:12px 16px;border-radius:var(--r-m);transition:background .2s}
.search-res a:hover,.search-res a.sel{background:var(--brand-100)}
.search-res b{display:block;font-size:.97rem}
.search-res span{font-size:.83rem;color:var(--muted)}
.search-hint{display:flex;gap:14px;padding:10px 18px 6px;font-size:.76rem;color:var(--muted)}
kbd{font-family:var(--ff-mono);font-size:.72rem;background:var(--surface-2);border:1px solid var(--line);
  border-bottom-width:2px;border-radius:5px;padding:2px 6px}

/* ---------- 7. Hero ---------- */
.hero{position:relative;overflow:hidden;padding:clamp(60px,9vw,120px) 0 clamp(72px,10vw,130px);isolation:isolate}
.hero-bg{position:absolute;inset:0;z-index:-3;background:var(--grad-soft);
  background-size:cover;background-position:72% center;background-repeat:no-repeat}
/* il velo che protegge il testo: le regole piu' sotto ne cambiano solo il
   disegno, la creazione dello pseudo-elemento sta qui */
.hero-bg::after{content:"";position:absolute;inset:0;pointer-events:none}
/* l'illustrazione arriva dalle variabili --hero/--hero-m impostate in pagina:
   sotto i 700px si usa la variante leggera da 800px */
.phero.has-hero,.hero-bg.has-hero,.mob-hero.has-hero-notte{background-image:var(--hero)}
@media(max-width:700px){
  .phero.has-hero,.hero-bg.has-hero,.mob-hero.has-hero-notte{background-image:var(--hero-m,var(--hero))}
}
/* con un'illustrazione: immagine + velo direzionale che protegge il testo */
.hero-bg.has-hero{background-position:center 78%}
.hero-bg.has-hero::after{
  background:linear-gradient(104deg,var(--scrim-a) 0%,var(--scrim-b) 34%,transparent 68%),
             linear-gradient(var(--hero-tint),var(--hero-tint));
}
/* variante notturna: velo scuro da sinistra e testo chiaro */
.hero.notte .hero-bg.has-hero{background-position:center top}
.hero.notte .hero-bg.has-hero::after{
  background:linear-gradient(104deg,rgba(3,17,31,.88) 0%,rgba(4,22,40,.68) 44%,rgba(4,22,40,.06) 74%),
             linear-gradient(rgba(3,15,28,.22),rgba(3,15,28,.22));
}
.hero.notte h1{color:#fff}
.hero.notte .hero-p{color:rgba(255,255,255,.86)}
.hero.notte .hero-fatti{color:rgba(255,255,255,.92);background:rgba(4,18,30,.5);
  border-color:rgba(255,255,255,.18);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.hero.notte .link-a{color:#BDE8F8}
/* mobile: illustrazione verticale, scena in basso e velo dall'alto */
@media(max-width:700px){
  .hero.notte .hero-bg.has-hero{background-position:center bottom}
  .hero.notte .hero-bg.has-hero::after{
    /* velo a due estremita': scuro sopra per il titolo, si apre a meta' sulla
       scena, torna scuro in fondo dove sta la riga dei numeri */
    background:linear-gradient(180deg,rgba(3,17,31,.72) 0%,rgba(4,22,40,.34) 48%,
               rgba(4,22,40,.42) 74%,rgba(3,17,31,.72) 100%)}
}

/* senza la pila di foto il testo sta a sinistra e il disegno respira a destra */
.hero:has(.hero-bg.has-hero) .hero-in{grid-template-columns:minmax(0,620px)}
.hero:has(.hero-bg.has-hero){min-height:min(76vh,660px);display:flex;align-items:center}
/* l'immagine ha il marchio disegnato dentro: se il riquadro diventa troppo
   alto rispetto alla larghezza, cover ritaglia ai lati e lo taglia. Legando
   l'altezza alla larghezza il rapporto resta vicino a quello dell'immagine. */
.hero.notte:has(.hero-bg.has-hero){min-height:min(92vh,850px,52vw)}

.hero-in{display:grid;grid-template-columns:1.06fr .94fr;gap:clamp(30px,5vw,64px);align-items:center}
.hero h1{margin:20px 0 20px}
[data-split] .w{display:inline-block;opacity:0;transform:translateY(34px) rotate(3deg);animation:wIn .85s var(--e) forwards}
@keyframes wIn{to{opacity:1;transform:none}}
.hero-p{font-size:clamp(1.02rem,1.55vw,1.2rem);color:var(--ink-2);max-width:56ch}
.hero-cta{display:flex;gap:13px;flex-wrap:wrap;margin-top:32px}
.hero-stats{display:flex;gap:clamp(20px,3vw,44px);margin-top:44px;padding-top:30px;border-top:1px solid var(--line-2);flex-wrap:wrap}
.hstat b{display:block;font-size:clamp(1.5rem,2.6vw,2rem);font-weight:700;letter-spacing:-.02em;color:var(--ink);line-height:1}
.hstat span{font-size:.85rem;color:var(--muted);font-weight:500}

/* hero visual: stacked cards */
.hero-vis{position:relative;aspect-ratio:1/1.03;perspective:1400px}
.hv-card{position:absolute;border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--shadow-l);
  border:1px solid rgba(255,255,255,.28);will-change:transform;transition:transform .9s var(--e)}
.hv-card img{width:100%;height:100%;object-fit:cover}
.hv-1{inset:0 22% 26% 0;z-index:3;animation:hv1 9s ease-in-out infinite}
.hv-2{inset:16% 0 30% 42%;z-index:2;animation:hv2 11s ease-in-out infinite}
.hv-3{inset:auto 30% 0 6%;height:32%;z-index:4;animation:hv2 10s ease-in-out infinite reverse}
@keyframes hv1{50%{transform:translateY(-16px) rotate(-1.4deg)}}
@keyframes hv2{50%{transform:translateY(14px) rotate(1.6deg)}}

/* ---------- 8. Ticker ---------- */
.ticker{background:var(--brand-900);color:#DCEEF8;padding:13px 0;overflow:hidden;position:relative}
.ticker::before,.ticker::after{display:none}
.ticker::before{left:0;background:linear-gradient(90deg,var(--brand-900),transparent)}
.ticker::after{right:0;background:linear-gradient(-90deg,var(--brand-900),transparent)}
.ticker-t{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 0;width:auto}
.ticker:hover .ticker-t{animation-play-state:paused}
@keyframes mar{to{transform:translateX(-50%)}}
.ticker-t span{display:inline-flex;align-items:center;gap:11px;padding:0 30px;font-size:.87rem;font-weight:600;white-space:nowrap}
/* il filetto verticale ha senso solo quando i tre avvisi stanno su una riga:
   quando vanno a capo resta appeso all'inizio della riga sotto */
.ticker-t span+span{border-left:0}

@media(max-width:700px){
  /* su telefono i tre avvisi diventano una fascia scorrevole: uno alla volta,
     con il successivo che sbircia dal bordo per far capire che si scorre.
     Cosi' la fascia resta alta una riga invece di sei. */
  .ticker{padding:0}
  /* justify-content:center, ereditato dal desktop, su un contenitore che
     trabocca spinge il primo elemento fuori a sinistra e lo rende irraggiungibile */
  .ticker-t{flex-direction:row;flex-wrap:nowrap;justify-content:flex-start;gap:0;padding:0 0 0 var(--gut);
    overflow-x:auto;overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory;scroll-padding-left:var(--gut);
    scrollbar-width:none;-ms-overflow-style:none}
  .ticker-t::-webkit-scrollbar{display:none}
  .ticker-t span{flex:0 0 auto;width:calc(100% - var(--gut) - 26px);
    scroll-snap-align:start;display:block;white-space:normal;
    padding:11px 0;margin-right:22px;font-size:.83rem;line-height:1.4;font-weight:500}
  .ticker-t span:last-child{margin-right:var(--gut)}
  .ticker-t span+span{border-left:0}
  .ticker-t b{margin-right:7px}
  /* piu' specifica di .ticker-nav qui sotto: la media query viene prima nel
     foglio, e a parita' di specificita' perderebbe */
  .ticker .ticker-nav{display:flex}
}
.ticker-t b{color:#FFCE8A;font-weight:700;font-size:.87rem}
/* Pallini di posizione della fascia avvisi. Su schermo largo gli avvisi stanno
   tutti in fila e non servono: si accendono solo dove la fascia scorre davvero.
   Il bersaglio toccabile e' di 24px anche se il pallino ne misura sei, come
   chiede il criterio sulla dimensione dei bersagli. */
.ticker-nav{display:none;justify-content:center;gap:2px;padding:0 0 6px}
.ticker-nav button{width:24px;height:24px;padding:0;border:0;background:none;
  display:grid;place-items:center;cursor:pointer}
.ticker-nav button::before{content:"";width:6px;height:6px;border-radius:var(--r-pill);
  background:rgba(255,255,255,.32);transition:width .28s var(--e-io),background .28s var(--e-io)}
.ticker-nav button[aria-current="true"]::before{width:18px;background:#FFCE8A}
.ticker-nav button:focus-visible{outline:2px solid #FFCE8A;outline-offset:-3px;border-radius:var(--r-s)}
.ticker-t:focus-visible{outline:2px solid #FFCE8A;outline-offset:-2px}

/* ---------- 9. Cards / services ---------- */
.grid{display:grid;gap:clamp(16px,2.2vw,26px)}
/* le celle 1fr devono poter restringersi sotto il min-content (tabelle nowrap ecc.) */
.grid>*{min-width:0}
.g-2{grid-template-columns:repeat(2,1fr)}
.g-3{grid-template-columns:repeat(3,1fr)}
.g-4{grid-template-columns:repeat(4,1fr)}
.g-auto{grid-template-columns:repeat(auto-fit,minmax(258px,1fr))}
.g-side{grid-template-columns:1fr 340px;align-items:start}

.card{
  position:relative;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-l);
  padding:clamp(22px,2.6vw,32px);box-shadow:var(--shadow-s);overflow:hidden;
  transition:transform .45s var(--e),box-shadow .45s var(--e),border-color .45s var(--e);
}
.card:hover{box-shadow:var(--shadow-m);border-color:var(--brand-300)}
.card:hover::after{transform:scaleX(1)}
.card>*{position:relative;z-index:1}
.card h3{margin-bottom:10px}
.card p{font-size:.95rem}
.card-flat:hover{transform:none}

.svc{display:flex;flex-direction:column;min-height:100%}
.svc-ico{
  width:74px;height:74px;border-radius:21px;display:grid;place-items:center;margin-bottom:20px;
  /* fondo chiaro in entrambi i temi: le icone sono line-art blu e devono staccare */
  background:#E8F3FA;color:var(--accent-txt);position:relative;
  transition:transform .5s var(--e),box-shadow .4s;
}
.svc-ico svg{width:34px;height:34px;stroke-width:1.7}
.svc-ico img{width:54px;height:54px;object-fit:contain}
.card:hover .svc-ico{background:#DCEDF8}
.svc .link-a{margin-top:auto;padding-top:18px}
.svc-tags{display:flex;flex-wrap:wrap;gap:7px;margin:14px 0 4px}
.svc-tags{display:none}
.tag{font-size:.73rem;font-weight:700;padding:4px 11px;border-radius:var(--r-pill);background:var(--surface-2);border:1px solid var(--line);color:var(--muted)}

/* service showcase (image cards) */
.shw{position:relative;border-radius:var(--r-xl);overflow:hidden;min-height:390px;display:flex;align-items:flex-end;
  box-shadow:var(--shadow-m);isolation:isolate;transition:transform .55s var(--e),box-shadow .55s var(--e)}
.shw img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;transition:transform 1.1s var(--e),filter .6s}
.shw::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(to top,rgba(0,25,40,.94) 8%,rgba(0,35,55,.55) 45%,rgba(0,45,70,.12) 88%)}
.shw:hover{box-shadow:var(--shadow-m)}
.shw:hover img{transform:scale(1.09)}
.shw-body{padding:clamp(22px,3vw,34px);color:#fff;width:100%}
.shw-body h3{color:#fff;margin-bottom:9px}
.shw-body p{color:rgba(255,255,255,.82);font-size:.95rem;max-width:44ch}
.shw-n{position:absolute;top:22px;right:26px;font-family:var(--ff-mono);font-size:2.6rem;font-weight:800;
  color:rgba(255,255,255,.2);line-height:1}
.shw .link-a{color:#fff;margin-top:16px}
.shw-tall{min-height:520px}

/* ---------- 9b. Allerta a tutta larghezza ---------- */
/* Diverso da .notice, che e' una scheda dentro il contenuto: questo e' un
   avviso che riguarda la sicurezza di chi legge, quindi sta sopra tutto e
   attraversa la pagina. Si chiude per la sessione e non per sempre - vedi
   initPage() in main.js. */
.allerta{background:#FBEAE8;border-bottom:1px solid #F0C4C0;color:#5C1410}
.allerta[hidden]{display:none}
.allerta-in{display:flex;align-items:flex-start;gap:14px;padding:14px 0 15px}
.allerta-ico{flex:none;width:26px;height:26px;margin-top:1px;color:#B3261E}
.allerta-t{flex:1;min-width:0}
/* `strong,b` porta color:var(--ink) da una regola di elemento: dentro l'allerta
   il grassetto deve prendere il rosso scuro della fascia, non il nero del testo
   normale, o la riga in evidenza stona con quella sotto. */
.allerta-t b,.allerta-t strong,.allerta-t p{color:inherit}
.allerta-t b{display:block;font-weight:700;font-size:.97rem;line-height:1.4}
.allerta-t p{margin:4px 0 0;font-size:.9rem;line-height:1.5;max-width:92ch}
.allerta-t a{color:inherit;text-decoration:underline;text-underline-offset:2px;font-weight:600}
/* La prima versione era una x grigia e trasparente appoggiata al bordo: un
   avviso che si puo' chiudere ma il cui tasto sembra decorazione e' un avviso
   che non si chiude. Qui e' una pastiglia con un bordo, opaca, 40x40. */
.allerta-x{flex:none;background:rgba(255,255,255,.55);border:1px solid #E3ADA7;
  color:inherit;cursor:pointer;width:40px;height:40px;display:grid;place-items:center;
  border-radius:var(--r-pill);margin:-3px -4px 0 0;transition:.25s var(--e)}
.allerta-x:hover{background:#fff;border-color:#B3261E}
.allerta-x svg{width:17px;height:17px}
[data-theme="dark"] .allerta{background:#2A100E;border-bottom-color:#4A1E1A;color:#FBD8D4}
[data-theme="dark"] .allerta-ico{color:#FCA5A5}
[data-theme="dark"] .allerta-x{background:rgba(255,255,255,.07);border-color:#5E2A26}
[data-theme="dark"] .allerta-x:hover{background:rgba(255,255,255,.15);border-color:#FCA5A5}

/* Variante verde: stessa fascia, ma non e' un'allerta. Il rosso dice "stai
   attento a qualcuno", e usarlo per invitare a segnalare l'erba alta
   spaventerebbe per niente e toglierebbe forza al rosso vero il giorno che
   serve. Testo #10492C su #E7F6EC = 9,3:1, e #CFEEDC su #0E2419 = 13,2:1. */
.allerta.verde{background:#E7F6EC;border-bottom-color:#BDE5CB;color:#10492C}
.allerta.verde .allerta-ico{color:#16804B}
.allerta.verde .allerta-x{border-color:#A9D9BC}
.allerta.verde .allerta-x:hover{background:#fff;border-color:#16804B}
[data-theme="dark"] .allerta.verde{background:#0E2419;border-bottom-color:#1E4530;color:#CFEEDC}
[data-theme="dark"] .allerta.verde .allerta-ico{color:#6EE7A8}
[data-theme="dark"] .allerta.verde .allerta-x{background:rgba(255,255,255,.07);border-color:#2A5A41}
[data-theme="dark"] .allerta.verde .allerta-x:hover{background:rgba(255,255,255,.15);border-color:#6EE7A8}

@media(max-width:700px){
  .allerta-in{gap:11px;padding:12px 0 13px}
  .allerta-ico{width:22px;height:22px}
  .allerta-x{width:38px;height:38px;margin:-2px -2px 0 0}
  .allerta-t b{font-size:.9rem}
  .allerta-t p{font-size:.84rem}
}

/* ---------- 9c. Ricontatto (fatti richiamare) ---------- */

/* Il tasto nella barra in alto. E' un <button> e non un <a> perche' non porta
   da nessuna parte: apre una finestra. Vestito come gli altri elementi della
   barra, se no sembra incollato sopra. */
.tb-chip.tb-ric{background:none;border:0;color:inherit;cursor:pointer;font:inherit;
  font-weight:600;padding:8px 10px;border-radius:var(--r-s);opacity:.85;
  transition:opacity .25s,background .25s}
.tb-chip.tb-ric:hover{opacity:1;background:rgba(255,255,255,.1)}
.tb-chip.tb-ric:focus-visible{outline:2px solid #fff;outline-offset:1px}

/* Il centraggio e' esplicito e non lasciato al browser: con width:100% la
   regola di serie di <dialog> lo appiccicava in alto a sinistra. */
.ric{position:fixed;inset:0;margin:auto;border:0;padding:0;background:none;
  width:min(520px,calc(100vw - 28px));max-width:100%;height:fit-content;
  max-height:calc(100dvh - 32px);overflow:auto;color:var(--ink)}
.ric::backdrop{background:rgba(3,22,34,.52);backdrop-filter:blur(3px)}
.ric-in{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-l);
  box-shadow:var(--shadow-l);padding:clamp(18px,3.4vw,26px);display:flex;flex-direction:column}

.ric-testa{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.ric-testa h2{margin:0;font-size:clamp(1.15rem,3.6vw,1.42rem);line-height:1.2;letter-spacing:-.01em}
.ric-x{flex:none;background:none;border:0;color:var(--muted);cursor:pointer;width:34px;height:34px;
  display:grid;place-items:center;border-radius:var(--r-s);margin:-4px -6px 0 0}
.ric-x:hover{background:var(--surface-2);color:var(--ink)}
.ric-x svg{width:17px;height:17px}

.ric-intro{margin:7px 0 18px;color:var(--ink-2);font-size:.92rem;line-height:1.5}

.ric-l{display:block;margin:0 0 5px;font-size:.84rem;font-weight:700;color:var(--ink)}
.ric-l b{color:var(--red);font-weight:700}

.ric-campo{width:100%;padding:11px 13px;border:1px solid var(--line-2);border-radius:var(--r-m);
  background:var(--surface-2);color:var(--ink);font:inherit;font-size:.95rem;margin:0 0 15px;
  transition:border-color .2s,box-shadow .2s}
.ric-campo:focus{outline:0;border-color:var(--focus);box-shadow:0 0 0 3px rgba(18,143,206,.18)}
textarea.ric-campo{resize:vertical;min-height:76px;line-height:1.5}

.ric-check{display:flex;align-items:flex-start;gap:9px;margin:2px 0 16px;
  font-size:.83rem;line-height:1.5;color:var(--ink-2);cursor:pointer}
.ric-check input{flex:none;margin-top:2px;width:17px;height:17px;accent-color:var(--brand-700)}
.ric-check a{color:var(--brand-700);text-decoration:underline;text-underline-offset:2px}
.ric-check b{color:var(--red)}

/* Fuori schermo e non display:none: i robot sanno riconoscere display:none e
   lasciano stare il campo, che e' esattamente il contrario di quel che serve. */
.ric-trappola{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}

.ric-esito{margin:0 0 12px;padding:9px 12px;border-radius:var(--r-m);
  background:var(--bg-2);color:var(--ink-2);font-size:.85rem;line-height:1.45}
.ric-esito.male{background:#FBEAE8;color:#5C1410}
.ric-esito[hidden]{display:none}

.ric-nota{margin:13px 0 0;color:var(--muted);font-size:.76rem;line-height:1.5}

.ric-fatto{text-align:center;padding:12px 4px 6px}
.ric-fatto svg{width:46px;height:46px;color:var(--green,#2FBF71);margin-bottom:10px}
.ric-fatto h2{margin:0 0 6px;font-size:1.26rem}
.ric-fatto p{margin:0;color:var(--ink-2);font-size:.92rem;line-height:1.5}
.ric-fatto .ric-rif{margin-top:10px;color:var(--muted);font-size:.82rem}
.ric-fatto .ric-rif b{color:var(--ink);letter-spacing:.5px}

[data-theme="dark"] .ric-esito.male{background:#2A100E;color:#FBD8D4}

@media(max-width:700px){
  .ric{width:100%;margin:auto auto 0;max-height:calc(100dvh - 10px);
    border-radius:var(--r-l) var(--r-l) 0 0}
  .ric-in{border-radius:var(--r-l) var(--r-l) 0 0;border-bottom:0;
    padding-bottom:calc(20px + env(safe-area-inset-bottom))}
}

@media(prefers-reduced-motion:reduce){.ric::backdrop{backdrop-filter:none}}

/* ---------- 10. Avvisi / notices ---------- */
.notice{
  display:flex;gap:0;padding:0;border-radius:var(--r-m);overflow:hidden;
  background:var(--surface);border:1px solid var(--line);
}
/* pannello illustrato a tutta altezza, tinto per categoria */
.notice-ico{flex:none;width:128px;align-self:stretch;display:grid;place-items:center;
  padding:16px 10px;background:#EAF4FB;color:var(--brand-600)}
.notice.ok .notice-ico{background:#E7F5EE;color:#0F6B3F}
.notice.warn .notice-ico{background:#FBF2E2;color:#9A5B00}
.notice.hot .notice-ico{background:#FBEAE8;color:#8E1B15}
[data-theme="dark"] .notice-ico{background:#0F2A3D;color:#7FB8DA}
[data-theme="dark"] .notice.ok .notice-ico{background:#0D2E22;color:#6EE7B7}
[data-theme="dark"] .notice.warn .notice-ico{background:#332508;color:#FBBF77}
[data-theme="dark"] .notice.hot .notice-ico{background:#331311;color:#FCA5A5}
.notice-ico img{width:88px;height:88px;object-fit:contain}
.notice-ico svg{width:34px;height:34px}
.notice-body{padding:18px 22px 20px;min-width:0;flex:1}
/* nelle colonne laterali strette il pannello si riduce */
.aside-box .notice-ico{width:88px;padding:14px 8px}
.aside-box .notice-ico img{width:62px;height:62px}
.aside-box .notice-body{padding:15px 16px 16px}
.notice h4{margin-bottom:5px;font-size:1rem}
.notice p{font-size:.92rem;margin-bottom:0}
.notice .meta{font-size:.83rem;font-weight:600;margin-bottom:4px;display:block;color:var(--muted)}
.notice.ok .meta{color:#0B6B4F}
.notice.warn .meta{color:#8A5200}
.notice.hot .meta{color:#B3261E}
[data-theme="dark"] .notice.ok .meta{color:#6EE7B7}
[data-theme="dark"] .notice.warn .meta{color:#FBBF77}
[data-theme="dark"] .notice.hot .meta{color:#FCA5A5}
.notice-body{flex:1;min-width:0}
.notice .docs{margin-top:14px}

/* file / doc list */
.docs{display:grid;gap:9px}
.doc{
  display:flex;align-items:center;gap:13px;padding:13px 17px;border-radius:var(--r-m);
  background:var(--surface);border:1px solid var(--line);font-weight:600;font-size:.93rem;
  transition:all .32s var(--e);
}
.doc:hover{border-color:var(--brand-400);background:var(--brand-100);transform:translateX(5px);color:var(--accent-txt)}
.doc-ico{width:44px;height:44px;flex:none;border-radius:9px;display:grid;place-items:center;
  background:color-mix(in srgb,var(--brand-500) 10%,transparent);color:var(--brand-600)}
.doc-ico svg{width:19px;height:19px}
.doc-ico img{width:44px;height:44px;object-fit:contain}
.doc-ico:has(img){width:48px;height:48px;background:transparent}
.doc .arw{margin-left:auto;opacity:.35;transition:.3s var(--e);flex:none}
.doc:hover .arw{opacity:1;transform:translateX(3px)}
.doc span{min-width:0}
.doc small{display:block;font-weight:600;color:var(--muted);font-size:.76rem}

/* ---------- 11. Accordion ---------- */
/* Vetrina delle app di pagamento della sosta: loghi di forme molto diverse
   (dal quadrato al panoramico), quindi ognuno sta in un riquadro uguale e si
   adatta dentro, limitato sia in altezza sia in larghezza. */
.app-pag{display:grid;place-items:center;min-height:104px;padding:18px}
.app-pag img{max-height:48px;max-width:100%;width:auto;height:auto;object-fit:contain}
a.app-pag:hover{border-color:var(--brand-300);box-shadow:var(--shadow-m)}
/* in tema scuro i loghi a colori su fondo chiaro sparirebbero: come per i
   loghi istituzionali si mette la piastrella bianca sotto */
[data-theme="dark"] .app-pag img{background:#fff;border-radius:var(--r-s);padding:8px}
@media(max-width:560px){.app-pag-griglia{grid-template-columns:repeat(2,1fr)}.app-pag{min-height:88px;padding:12px}}

.acc{border:1px solid var(--line);border-radius:var(--r-l);overflow:hidden;background:var(--surface);box-shadow:var(--shadow-s)}
/* FAQ divise per argomento (Cimiteri): un titolo per tema, sotto la sua
   fisarmonica. Il filetto separa i gruppi senza aggiungere altre scatole. */
.faq-col{max-width:900px;margin-inline:auto}
.faq-gruppo{margin:38px 0 14px;padding-top:16px;border-top:1px solid var(--line)}
.faq-col>.faq-gruppo:first-child{margin-top:0;padding-top:0;border-top:0}
.acc-i+.acc-i{border-top:1px solid var(--line)}
.acc-h{
  width:100%;display:flex;align-items:center;gap:15px;padding:19px 24px;text-align:left;
  font-weight:700;font-size:1rem;transition:background .3s;color:var(--ink);
}
.acc-h:hover{background:var(--surface-2)}
.acc-h .n{font-family:var(--ff-mono);font-size:.8rem;color:var(--accent-txt);font-weight:800;flex:none}
.acc-h .pm{margin-left:auto;width:30px;height:30px;flex:none;border-radius:50%;border:1.5px solid var(--line-2);
  display:grid;place-items:center;transition:.4s var(--e);position:relative}
.acc-h .pm::before,.acc-h .pm::after{content:"";position:absolute;background:currentColor;border-radius:2px;transition:.4s var(--e)}
.acc-h .pm::before{width:12px;height:2px}
.acc-h .pm::after{width:2px;height:12px}
.acc-i.open .acc-h{background:var(--brand-100);color:var(--accent-txt)}
.acc-i.open .pm{transform:rotate(180deg);background:var(--brand-600);border-color:transparent;color:#fff}
.acc-i.open .pm::after{transform:scaleY(0)}
.acc-b{display:grid;grid-template-rows:0fr;transition:grid-template-rows .5s var(--e)}
.acc-i.open .acc-b{grid-template-rows:1fr}
.acc-b>div{overflow:hidden}
.acc-in{padding:4px 24px 24px;color:var(--ink-2);font-size:.95rem}
.acc-in>*+*{margin-top:12px}
.acc-in ul{list-style:none;display:grid;gap:9px}
.acc-in ul li{position:relative;padding-left:22px}
.acc-in ul li::before{content:"";position:absolute;left:2px;top:.62em;width:7px;height:7px;border-radius:50%;background:var(--teal)}

/* ---------- 12. Tabs ---------- */
.tabs{display:flex;gap:6px;padding:6px;background:var(--surface-2);border:1px solid var(--line);
  border-radius:var(--r-pill);width:max-content;max-width:100%;overflow-x:auto;position:relative;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tab{padding:11px 21px;border-radius:var(--r-pill);font-weight:700;font-size:.9rem;color:var(--muted);
  white-space:nowrap;transition:color .3s var(--e);position:relative;z-index:1}
.tab.on{color:#fff}
.tab-pill{position:absolute;top:6px;bottom:6px;background:var(--brand-600);border-radius:var(--r-pill);
  transition:all .48s var(--e);z-index:0}
/* Su schermo stretto la barra a pillola costringeva a scorrere di lato per
   scoprire le sezioni oltre il bordo, e niente lo faceva capire: chi non
   provava a trascinare non sapeva nemmeno che ci fossero. Qui le voci vanno
   a capo e stanno tutte in vista. La pillola scorrevole sparisce - il suo
   riquadro viene calcolato da JavaScript su una riga sola e con il ritorno a
   capo finirebbe fuori posto - e il suo compito passa allo sfondo pieno
   della voce attiva. */
@media(max-width:760px){
  .tabs{flex-wrap:wrap;gap:8px;width:auto;padding:8px;border-radius:var(--r-m);overflow:visible}
  .tab{flex:1 1 auto;white-space:normal;text-align:center;padding:12px 14px;font-size:.86rem;
    min-height:46px;display:flex;align-items:center;justify-content:center;
    background:var(--surface);border:1px solid var(--line);border-radius:var(--r-s)}
  .tab.on{background:var(--brand-600);border-color:var(--brand-600);color:#fff}
  .tab-pill{display:none}
}
.tab-panel{display:none;animation:fadeUp .5s var(--e)}
.tab-panel.on{display:block}
@keyframes fadeUp{from{opacity:0;transform:translateY(16px)}}

/* ---------- 13. Tables ---------- */
.table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r-l);box-shadow:var(--shadow-s);
  /* ombre di scorrimento: segnalano che la tabella continua oltre il bordo */
  background:
    linear-gradient(90deg,var(--surface) 32%,transparent) 0 0,
    linear-gradient(270deg,var(--surface) 32%,transparent) 100% 0,
    radial-gradient(farthest-side at 0 50%,color-mix(in srgb,var(--ink) 22%,transparent),transparent) 0 0,
    radial-gradient(farthest-side at 100% 50%,color-mix(in srgb,var(--ink) 22%,transparent),transparent) 100% 0;
  background-repeat:no-repeat;background-size:48px 100%;background-color:var(--surface);
  background-attachment:local,local,scroll,scroll}
table th,table td{padding:14px 18px;text-align:left;font-size:.92rem;border-bottom:1px solid var(--line);white-space:nowrap}
table thead th{background:var(--surface-2);font-size:.74rem;letter-spacing:.11em;text-transform:uppercase;color:var(--muted);font-weight:800}
table tbody tr{transition:background .25s}
table tbody tr:hover{background:var(--brand-100)}
table tbody tr:last-child td{border-bottom:0}
table td b{font-weight:700}
.price{font-family:var(--ff-mono);font-weight:700;color:var(--accent-txt)}

/* ---------- 13b. Listino dei titoli di viaggio TUA ----------
   Due regole sole: la tabella e il prezzo riusano .table-wrap e .price della
   sezione 13. Serve solo far respirare la descrizione sotto il nome del titolo,
   che altrimenti erediterebbe il white-space:nowrap delle celle. */
.tua-d{display:block;margin-top:3px;font-size:.82rem;font-weight:400;color:var(--muted);
  white-space:normal;max-width:46ch}
.tua-nota{margin-top:14px;color:var(--muted);font-size:.84rem;line-height:1.6}

/* ---------- 14. News ---------- */
.post{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-l);overflow:hidden;box-shadow:var(--shadow-s);
  transition:transform .45s var(--e),box-shadow .45s var(--e),border-color .4s}
.post:hover{box-shadow:var(--shadow-m);border-color:var(--brand-300)}
.post-img{aspect-ratio:16/10;overflow:hidden;background:var(--surface-2);position:relative}
.post-img img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--e)}
/* card d'archivio senza immagine */
.post-txt .post-body{padding-top:18px}
.post-cat.post-cat-in{position:static;top:auto;left:auto;background:color-mix(in srgb,var(--brand-500) 12%,transparent);backdrop-filter:none;display:inline-block;margin-left:10px;font-size:.68rem;font-weight:800;
  letter-spacing:.1em;text-transform:uppercase;color:var(--accent-txt);
  background:color-mix(in srgb,var(--brand-500) 12%,transparent);border-radius:999px;padding:3px 9px;vertical-align:1px}
.post:hover .post-img img{transform:scale(1.07)}
.post-cat{position:absolute;top:14px;left:14px;background:var(--surface);
  border:1px solid var(--line);padding:5px 13px;border-radius:var(--r-pill);font-size:.72rem;font-weight:800;
  letter-spacing:.09em;text-transform:uppercase;color:var(--accent-txt)}
.post-body{padding:24px;display:flex;flex-direction:column;flex:1}
.post-date{font-size:.77rem;color:var(--muted);font-weight:700;letter-spacing:.05em;text-transform:uppercase;margin-bottom:9px}
.post h3{font-size:1.14rem;margin-bottom:10px;letter-spacing:-.015em}
.post p{font-size:.92rem;flex:1}
.post .link-a{margin-top:16px;align-self:flex-start}
.post-wide{flex-direction:row}
.post-wide .post-img{aspect-ratio:auto;flex:0 0 44%}
@media(max-width:760px){.post-wide{flex-direction:column}.post-wide .post-img{flex:none;aspect-ratio:16/10}}

/* ---------- 15. CTA band ---------- */
.band{position:relative;overflow:hidden;border-radius:var(--r-xl);padding:clamp(34px,5vw,64px);
  background:var(--brand-900);color:#fff;isolation:isolate;box-shadow:var(--shadow-l)}
.band::before{content:"";position:absolute;inset:0;z-index:-1;
  background:url('../img/spot/banda-notte.jpg') center bottom/cover no-repeat}
.band::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(100deg,rgba(5,22,38,.74) 0%,rgba(5,22,38,.42) 46%,rgba(5,22,38,.08) 78%)}
/* mobile: fascia quadrata, scena in basso e velo dall'alto */
@media(max-width:700px){
  .band::before{background:url('../img/spot/banda-notte-m.jpg') center bottom/cover no-repeat}
  .band::after{background:linear-gradient(180deg,rgba(5,22,38,.74) 0%,rgba(5,22,38,.42) 55%,rgba(5,22,38,.1) 100%)}
}
.band h2,.band h3{color:#fff}
.band p{color:rgba(255,255,255,.8)}
.band-in{display:flex;align-items:center;justify-content:space-between;gap:34px;flex-wrap:wrap}

/* ---------- 16. Stats strip ---------- */
.stat{text-align:center;padding:clamp(20px,2.5vw,30px);border-radius:var(--r-l);background:var(--surface);
  border:1px solid var(--line);box-shadow:var(--shadow-s);transition:.4s var(--e)}
.stat:hover{border-color:var(--brand-300)}
.stat b{display:block;font-size:clamp(1.9rem,3.6vw,2.9rem);font-weight:800;letter-spacing:-.035em;line-height:1;
  color:var(--brand-700)}
/* WCAG 1.4.3: --brand-700 su fondo scuro dava 2,45:1 (serve 3:1 sul testo
   grande). --accent-txt e' il blu gia' schiarito per il tema scuro. */
[data-theme="dark"] .stat b{color:var(--accent-txt)}
.stat span{display:block;margin-top:9px;font-size:.83rem;color:var(--muted);font-weight:700;letter-spacing:.05em;text-transform:uppercase}
.stat small{display:block;margin-top:5px;font-size:.78rem;color:var(--muted);text-transform:none;letter-spacing:0;font-weight:500}

/* ---------- 17. Page hero ---------- */
.phero{position:relative;overflow:hidden;padding:clamp(44px,6vw,86px) 0 clamp(38px,5vw,66px);isolation:isolate}
.phero::before{content:"";position:absolute;inset:0;z-index:-2;background:var(--grad-soft);
  background-size:cover;background-position:center;background-repeat:no-repeat}
/* l'illustrazione sta sull'elemento (inline), il velo sul ::before.
   Un url() dentro una custom property si risolverebbe rispetto al CSS, non al
   documento: per questo l'immagine e' impostata direttamente nell'HTML. */
.phero.has-hero{
  background-size:cover;background-position:center 72%;background-repeat:no-repeat;
  /* L'altezza cresce con la larghezza, altrimenti su schermi larghi la fascia
     diventa una feritoia e `cover` taglia sopra e sotto: a 360px fissi, a
     2560px restava visibile un terzo dell'illustrazione e le figure in piedi
     ci perdevano la testa.
     Il tetto non e' un numero fisso ma 62vh: un valore assoluto che va bene a
     2560 torna stretto a 3440, mentre legarlo all'altezza della finestra
     tiene la proporzione su qualunque monitor senza mai mangiarsi lo schermo.
     Il minimo resta 360px, quindi sotto i 1400px non cambia nulla. */
  min-height:clamp(360px,26vw,62vh);display:flex;align-items:center;padding-block:clamp(46px,6vw,74px);
}
.phero.has-hero::before{
  background:linear-gradient(104deg,var(--scrim-a) 0%,var(--scrim-b) 34%,transparent 70%),
             linear-gradient(var(--hero-tint),var(--hero-tint));
  z-index:0;
}
.phero.has-hero::after{display:none}
/* sotto i 700px il velo scende dall'alto invece che da sinistra: il testo sta
   in cima e la scena resta visibile sotto. Deve venire DOPO la regola generale. */
@media(max-width:700px){
  .phero.has-hero::before{
    background:linear-gradient(180deg,var(--scrim-a) 0%,var(--scrim-a) 44%,var(--scrim-b) 72%,transparent 95%),
               linear-gradient(var(--hero-tint),var(--hero-tint));
  }
}
.phero.has-hero>*{position:relative;z-index:1}
.phero.has-hero .phero-in>div:first-child{max-width:60ch}
.phero::after{content:"";position:absolute;inset:0;z-index:-1;opacity:.45;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:56px 56px;
  -webkit-mask-image:radial-gradient(ellipse 80% 100% at 30% 0%,#000,transparent 75%);
  mask-image:radial-gradient(ellipse 80% 100% at 30% 0%,#000,transparent 75%)}
.phero h1{margin:16px 0 14px;font-size:clamp(2rem,4.4vw,3.4rem)}
.phero-in{display:grid;grid-template-columns:1fr auto;gap:32px;align-items:end}
@media(max-width:900px){.phero-in{grid-template-columns:1fr}}
.crumb{display:flex;align-items:center;gap:9px;font-size:.83rem;color:var(--muted);font-weight:600;flex-wrap:wrap}
.crumb a:hover{color:var(--brand-600)}
.crumb svg{width:13px;height:13px;opacity:.5}
.crumb .cur{color:var(--ink);font-weight:700}

/* ---------- 18. Contact ---------- */
.ctct{display:flex;gap:16px;padding:22px;border-radius:var(--r-l);background:var(--surface);border:1px solid var(--line);
  box-shadow:var(--shadow-s);transition:.4s var(--e)}
.ctct:hover{border-color:var(--brand-300)}
.ctct-ico{width:50px;height:50px;flex:none;border-radius:14px;display:grid;place-items:center;background:#E8F3FA;color:var(--accent-txt);transition:.4s var(--e)}
.ctct-ico img{width:46px;height:46px;object-fit:contain}
.ctct-ico:has(img){background:transparent}
.ctct-ico svg{width:21px;height:21px}
.ctct h4{margin-bottom:4px}
.ctct p,.ctct a{font-size:.92rem;color:var(--ink-2);display:block;word-break:break-word}
.ctct a:hover{color:var(--brand-600)}
.ctct-body{min-width:0}

.field{display:flex;flex-direction:column;gap:7px}
.field label{font-size:.83rem;font-weight:700;color:var(--ink-2)}
.field label .req{color:var(--red)}
.field input,.field select,.field textarea{
  padding:13px 16px;border-radius:var(--r-m);border:1.5px solid var(--line);background:var(--surface);
  font-size:.95rem;transition:border-color .3s,box-shadow .3s,background .3s;width:100%;
}
.field textarea{min-height:140px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--brand-400);box-shadow:0 0 0 4px color-mix(in srgb,var(--brand-500) 15%,transparent)}
.check{display:flex;align-items:flex-start;gap:11px;font-size:.86rem;color:var(--muted)}
.check input{width:24px;height:24px;flex:none;margin-top:0;accent-color:var(--brand-600)}
.form-note{font-size:.79rem;color:var(--muted);line-height:1.6}
.form-ok{display:none;padding:16px 20px;border-radius:var(--r-m);background:color-mix(in srgb,var(--green) 12%,transparent);
  border:1px solid color-mix(in srgb,var(--green) 35%,transparent);color:var(--ink);font-size:.92rem;font-weight:600}
.form-ok.on{display:block;animation:fadeUp .5s var(--e);margin-top:18px}
/* stesso riquadro, in rosso, quando l'invio non riesce: l'utente deve
   vedere il motivo, non un messaggio verde che mente */
.form-ok.ko{background:color-mix(in srgb,var(--red) 10%,transparent);
  border-color:color-mix(in srgb,var(--red) 38%,transparent)}
/* campo trappola per i robot: fuori schermo, non nascosto con display:none
   (che i robot riconoscono) e fuori dall'ordine di tabulazione */
.trappola{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
/* il selettore dei file eredita il bordo dei campi ma non il padding alto:
   il bottone interno del browser ha gia' il suo */
.field input[type="file"]{padding:10px 12px;font-size:.92rem;cursor:pointer}
.field input[type="file"]+.form-note{margin-top:7px}
/* bottone in attesa: resta leggibile e non cliccabile due volte */
.btn[disabled]{opacity:.62;pointer-events:none}

/* ---------- 19. MOBILITÀ — Boards ---------- */
/* Come per le altre immagini grandi: l'altezza segue la larghezza,
   altrimenti a 3440px il riquadro diventa 6:1 e dell'illustrazione
   resta una fessura. Il minimo e' quello che serve al contenuto. */
.mob-hero{position:relative;overflow:hidden;color:#fff;padding:clamp(52px,7vw,96px) 0;
  min-height:clamp(554px,30vw,62vh);display:flex;align-items:center;isolation:isolate}
.mob-hero::before{content:"";position:absolute;inset:0;z-index:-3;background:#00202F}
.mob-hero h1,.mob-hero h2,.mob-hero h3{color:#fff}
.mob-hero p{color:rgba(255,255,255,.78)}
.mob-hero .eyebrow{background:rgba(255,255,255,.1);color:#9FE3F5;border-color:rgba(255,255,255,.16)}
.sky{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.sky i{position:absolute;width:2px;height:2px;background:#fff;border-radius:50%;opacity:.45;animation:tw 4s ease-in-out infinite}
@keyframes tw{50%{opacity:.95;transform:scale(1.9)}}
.plane{position:absolute;color:rgba(255,255,255,.13);animation:fly 30s linear infinite}
.plane svg{width:54px;height:54px}
@keyframes fly{from{transform:translate(-16vw,26vh) rotate(10deg)}to{transform:translate(116vw,-12vh) rotate(10deg)}}

.board{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-l);overflow:hidden;
  box-shadow:var(--shadow-m);position:relative;
}
.board-top{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  padding:18px 22px;background:var(--brand-800)}
.board-title{display:flex;align-items:center;gap:14px}
.board-title .bi{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;
  background:rgba(255,255,255,.16);color:#fff;flex:none}
.board-title .bi svg{width:24px;height:24px}
.board-title h3{color:#fff;font-size:1.16rem;margin:0}
.board-title span{font-size:.79rem;color:rgba(255,255,255,.78);font-weight:600;letter-spacing:.04em}
.board-tools{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.bseg{display:flex;background:rgba(255,255,255,.14);border-radius:var(--r-pill);padding:4px;gap:3px}
.bseg button{padding:8px 16px;border-radius:var(--r-pill);font-size:.83rem;font-weight:700;
  color:rgba(255,255,255,.85);transition:.32s var(--e);display:inline-flex;align-items:center;gap:7px}
.bseg button svg{width:15px;height:15px}
.bseg button.on{background:#fff;color:var(--brand-700);box-shadow:0 3px 12px rgba(0,0,0,.22)}
.bclock{font-family:var(--ff-mono);font-size:1.02rem;font-weight:700;color:#fff;letter-spacing:.06em;
  background:rgba(255,255,255,.14);padding:9px 15px;border-radius:var(--r-pill);white-space:nowrap}
/* Stato del tabellone.
   Era una pastiglia verde in maiuscolo spaziato con il punto che pulsava:
   tre segnali diversi per una informazione sola, e la pastiglia pesava piu'
   dei dati su cui stava commentando. Ora e' una riga di testo normale con un
   punto piccolo davanti - il colore del punto dice lo stato, le parole dicono
   l'ora. Il tabellone si aggiorna da solo: non serve un'animazione a
   ricordarlo, l'orologio in cima e' gia' in movimento. */
.blive{display:inline-flex;align-items:center;gap:9px;font-size:.8rem;font-weight:600;
  color:var(--muted);white-space:nowrap}
.blive .dot{width:6px;height:6px;border-radius:50%;background:var(--green);flex:none}
.blive.wait .dot{background:var(--brand-500)}
.blive.off .dot{background:var(--amber)}
.blive.err{color:#B3261E}
.blive.err .dot{background:var(--red)}
/* nella banda scura in cima al tabellone il testo va in chiaro */
.board-top .blive{color:rgba(255,255,255,.82)}
.board-top .blive .dot{background:#7BF0BF}
.board-top .blive.off .dot{background:#FFD08A}
.board-top .blive.err{color:#FFB4B0}
.board-top .blive.err .dot{background:#FFB4B0}
.brefresh{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;color:#fff;
  background:rgba(255,255,255,.14);transition:.32s var(--e)}
.brefresh:hover{background:rgba(255,255,255,.3);transform:rotate(90deg)}
.brefresh:focus-visible{outline:2px solid #fff;outline-offset:2px}
.brefresh.spin svg{animation:spin 1s linear infinite}
.brefresh svg{width:17px;height:17px}
@keyframes spin{to{transform:rotate(360deg)}}

.board-scroll{max-height:600px;overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--line-2) transparent}
.board-scroll::-webkit-scrollbar{width:8px}
.board-scroll::-webkit-scrollbar-track{background:transparent}
.board-scroll::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:8px}
.board-scroll:focus-visible{outline:3px solid var(--focus);outline-offset:-3px}
.brow{
  display:grid;align-items:center;gap:14px;padding:15px 24px;border-bottom:1px solid var(--line);
  transition:background .3s var(--e);animation:rowIn .55s var(--e) backwards;
}
@keyframes rowIn{from{opacity:0;transform:translateY(14px)}}
.brow:hover{background:var(--brand-100)}
.brow.head{position:sticky;top:0;z-index:3;background:var(--surface-2);border-bottom:1px solid var(--line-2);padding-block:11px;animation:none}
.brow.head span{font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:800}
.brow.past{opacity:.66}
.b-air{grid-template-columns:92px 76px 1fr 132px 138px}
.b-trn{grid-template-columns:92px 104px 1fr 68px 138px}
@media(max-width:900px){
  .b-air,.b-trn{grid-template-columns:76px 1fr 112px}
  .brow .hide-m{display:none}
}
.b-time{font-family:var(--ff-mono);font-size:1.16rem;font-weight:700;color:var(--ink);letter-spacing:.02em;line-height:1.2}
.b-time small{display:block;font-size:.7rem;color:var(--muted);font-weight:600;letter-spacing:.04em;font-family:var(--ff)}
.b-time.late{color:#8A5200}
.b-time s{color:var(--muted);font-size:.84rem;text-decoration-thickness:1px;display:block}
/* il monospaziato dice gia' che e' un codice: il riquadro azzurro era un
   secondo segnale per la stessa cosa */
.b-code{font-family:var(--ff-mono);font-size:.9rem;font-weight:700;color:var(--accent-txt);
  letter-spacing:.02em;white-space:nowrap}
.b-dest{font-weight:700;color:var(--ink);font-size:1rem;letter-spacing:-.01em;min-width:0}
.b-dest small{display:block;font-weight:500;color:var(--muted);font-size:.79rem;letter-spacing:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* il binario era un quadrato con gradiente e alone colorato: ora e' il
   numero, in monospaziato, con il peso che gli spetta */
.b-plat{display:inline-block;font-family:var(--ff-mono);font-weight:800;font-size:1.08rem;
  color:var(--accent-txt);letter-spacing:.02em}
.b-plat.na{color:var(--muted);font-weight:600;font-size:.95rem}
.b-op{color:var(--ink-2);font-size:.87rem;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Lo stato di una corsa e' una parola, non un'etichetta da incollare: il
   colore lo porta il punto, il resto e' testo. Venti pastiglie in colonna
   pesavano piu' degli orari, che sono il vero contenuto del tabellone. */
.b-st{display:inline-flex;align-items:center;gap:8px;font-size:.85rem;font-weight:600;
  white-space:nowrap}
.b-st .d{width:6px;height:6px;border-radius:50%;background:currentColor;flex:none}
.st-ok{color:#0B6B4F}
.st-ok .d{background:var(--green)}
.st-late{color:#8A5200}
.st-late .d{background:var(--amber)}
.st-warn{color:var(--accent-txt)}
.st-warn .d{background:var(--brand-500)}
.st-bad{color:#B3261E}
.st-bad .d{background:var(--red)}
.st-gone{color:var(--muted)}
.st-gone .d{background:var(--muted)}
/* tema scuro: i testi di stato tornano alle tinte luminose */
[data-theme="dark"] .st-ok{color:#6EE7B7}
[data-theme="dark"] .st-late,[data-theme="dark"] .b-time.late{color:#FBBF77}
[data-theme="dark"] .st-warn{color:#93C5FD}
/* la riga di stato resta neutra: il colore lo porta il punto, non il testo */
[data-theme="dark"] .st-bad,[data-theme="dark"] .blive.err{color:#FCA5A5}
[data-theme="dark"] .st-gone{color:#9CB6C5}
.flip{display:inline-block;animation:flip .55s var(--e)}
@keyframes flip{0%{transform:rotateX(-90deg);opacity:0}60%{transform:rotateX(12deg);opacity:1}100%{transform:none}}
.bskel{padding:17px 24px;border-bottom:1px solid var(--line);display:grid;gap:10px}
.bskel i{display:block;height:12px;border-radius:6px;
  background:linear-gradient(90deg,var(--surface-2),var(--brand-100),var(--surface-2));
  background-size:200% 100%;animation:shim 1.4s linear infinite}
@keyframes shim{to{background-position:-200% 0}}
.bskel i:first-child{width:38%}
.bskel i:last-child{width:62%}
.bempty{padding:52px 24px;text-align:center;color:var(--muted);font-size:.94rem}
.bempty svg{width:42px;height:42px;margin:0 auto 14px;opacity:.4}
.bempty b{display:block;color:var(--ink);margin-bottom:6px;font-size:1.02rem}
.bempty .btn{margin-top:18px}
.board-foot{padding:14px 24px;border-top:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;
  gap:14px;flex-wrap:wrap;font-size:.78rem;color:var(--muted);background:var(--surface-2)}
.board-foot a{color:var(--accent-txt);font-weight:600}
.board-foot a:hover{text-decoration:underline}
.bfilter{display:flex;align-items:center;gap:8px;background:rgba(255,255,255,.16);
  border-radius:var(--r-pill);padding:8px 15px;color:rgba(255,255,255,.85)}
.bfilter svg{width:15px;height:15px;flex:none}
.bfilter input{background:none;border:0;outline:none;color:#fff;font-size:.85rem;font-weight:600;width:120px}
.bfilter input::placeholder{color:rgba(255,255,255,.72)}
.bfilter:focus-within{background:rgba(255,255,255,.26)}

/* mobility mini cards */
/* Niente vetro smerigliato: erano schede sospese su un fondo scuro, con il
   bordo chiaro e la sfocatura dietro. Ora sono blocchi piatti, tenuti insieme
   da un filetto come le righe della scheda meteo. */
.mcard{background:none;border:0;border-top:1px solid rgba(255,255,255,.16);border-radius:0;
  padding:18px 0 4px;color:#fff;display:block}
.mcard h4{color:#fff;margin-bottom:6px}
/* l'orario non e' un titolo: un'intestazione "17:04:22" non aiuta
   chi naviga per intestazioni, ma la resa resta quella di prima */
.mcard .mcard-orario{color:#fff;margin-bottom:6px;font-weight:800;line-height:1.12;letter-spacing:-.022em}
/* Tolto il vetro, il testo poggia sull'illustrazione: serve piu' peso.
   Misurato a 0,72 dava 3,66:1 sulla parte piu' chiara del terminal. */
.mcard p{color:rgba(255,255,255,.88);font-size:.9rem}
/* l'icona non ha bisogno di una piastrella sotto: sta all'inizio della riga */
.mcard .mi{display:block;margin-bottom:11px;color:#9FE3F5}
.mcard .mi svg{width:21px;height:21px}

/* ---------- 20. Footer ---------- */
.ftr{background:var(--brand-900);color:#B6D6E8;padding-top:clamp(50px,6vw,84px);margin-top:clamp(40px,6vw,90px);position:relative;overflow:hidden}
.ftr>*{position:relative}
.ftr-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.3fr;gap:clamp(24px,3.4vw,50px);padding-bottom:46px}
.ftr h5{color:#fff;font-size:.76rem;letter-spacing:.16em;text-transform:uppercase;margin-bottom:18px;font-weight:800}
.ftr a{color:#B6D6E8;transition:color .28s,transform .28s;display:inline-block}
/* le pastiglie e i cerchi social hanno un display e un padding propri:
   la regola generica qui sopra e i ritocchi mobile non devono toccarli */
.ftr a.fbadge{display:inline-flex}
.ftr a:hover{color:#fff}
.ftr ul{display:grid;gap:10px}
.ftr ul a:hover{transform:translateX(4px)}
.ftr-brand img{height:52px;filter:brightness(0) invert(1);margin-bottom:18px}
.ftr-brand p{color:#94BDD3;font-size:.9rem;max-width:36ch}
.ftr-info{font-size:.88rem;display:grid;gap:9px;line-height:1.55}
.ftr-info b{color:#fff;display:block;font-size:.8rem;letter-spacing:.05em;text-transform:uppercase;margin-bottom:2px}
.ftr-badges{display:flex;gap:11px;flex-wrap:wrap;margin-top:18px}
.fbadge{display:inline-flex;align-items:center;gap:9px;padding:9px 15px;border-radius:var(--r-pill);white-space:nowrap;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);font-size:.8rem;font-weight:700;color:#fff;
  transition:.35s var(--e)}
.fbadge:hover{background:rgba(255,255,255,.14)}
.fbadge svg{width:15px;height:15px}
/* avviso nelle versioni tradotte: fa fede il testo italiano */
.lang-avviso{font-size:.82rem;color:#B6D6E8;padding:0 0 18px;font-style:italic}
.lang-avviso a{text-decoration:underline;text-underline-offset:2px;font-style:normal}
.ftr-bot{border-top:1px solid rgba(255,255,255,.1);padding:22px 0;display:flex;align-items:center;
  justify-content:space-between;gap:18px;flex-wrap:wrap;font-size:.83rem;color:#8FB6CC}
.ftr-bot nav{display:flex;gap:20px;flex-wrap:wrap}
/* "Preferenze cookie" e' un pulsante, non un collegamento: apre un pannello
   invece di portare altrove. Qui prende l'aspetto delle voci accanto. */
.ftr-pref{background:none;border:0;padding:0;font:inherit;color:inherit;cursor:pointer;
  min-height:24px;display:inline-flex;align-items:center}
.ftr-pref:hover{color:#fff}
.soc{display:flex;gap:9px}
.soc a{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.11);transition:.35s var(--e)}
.soc a:hover{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.28)}
.soc svg{width:17px;height:17px}

/* ---------- 2.5.8 Dimensione dei bersagli (WCAG 2.2 AA) ----------
   Collegamenti isolati (briciole di pane, recapiti, barra legale) devono
   offrire un'area cliccabile di almeno 24x24 px. Non riguarda i collegamenti
   dentro un periodo di testo, esclusi dal criterio. */
.crumb a,
.ftr-info a,
.ftr-bot nav a{min-height:24px;display:inline-flex;align-items:center}
.link-a{min-height:24px}

/* ---------- 21. FAB / to top ---------- */
.totop{position:fixed;right:22px;bottom:22px;z-index:60;width:50px;height:50px;border-radius:50%;
  background:var(--brand-600);color:#fff;display:grid;place-items:center;box-shadow:var(--shadow-m);
  opacity:0;visibility:hidden;transform:translateY(18px) scale(.85);transition:.45s var(--e)}
/* col chatbot attivo il lanciatore occupa l'angolo: il "torna su" sale sopra */
.pm-chatbot-on .totop{bottom:104px}
/* sul telefono il lanciatore dell'assistente e' piu' basso e piu' piccolo
   (vedi in fondo al foglio): i due comandi restano incolonnati, non sparsi */
@media(max-width:700px){.pm-chatbot-on .totop{bottom:84px}}
.totop.on{opacity:1;visibility:visible;transform:none}
.totop:hover{background:var(--brand-700)}
.totop svg{width:20px;height:20px}

/* ---------- 22. Reveal animations ---------- */
[data-rv]{opacity:0;transform:translateY(28px);transition:opacity .8s var(--e),transform .8s var(--e)}
[data-rv="l"]{transform:translateX(-34px)}
[data-rv="r"]{transform:translateX(34px)}
[data-rv="s"]{transform:scale(.93)}
[data-rv].in{opacity:1;transform:none}

/* ---------- 23. Misc ---------- */
.pill-list{display:flex;flex-wrap:wrap;gap:9px}
.pill{border-radius:8px!important;padding:9px 17px;border-radius:var(--r-pill);background:var(--surface);border:1px solid var(--line);
  font-size:.87rem;font-weight:700;color:var(--ink-2);transition:.32s var(--e)}
.pill:hover,.pill.on{background:var(--brand-600);color:#fff;border-color:transparent}
.kv{display:grid;grid-template-columns:auto 1fr;gap:11px 22px;font-size:.94rem}
.kv dt{font-weight:700;color:var(--muted)}
.kv dd{color:var(--ink);min-width:0;overflow-wrap:anywhere}
/* nelle colonne laterali strette: etichetta sopra, valore sotto */
.aside-box .kv{grid-template-columns:1fr;gap:2px 0}
.aside-box .kv dd{margin-bottom:12px}
.aside-box .kv dd:last-child{margin-bottom:0}
@media(max-width:520px){.kv{grid-template-columns:1fr;gap:2px 0}.kv dd{margin-bottom:10px}}
.hours{display:grid;gap:2px}
.hours li{display:flex;align-items:center;justify-content:space-between;gap:6px 16px;padding:11px 0;border-bottom:1px dashed var(--line);flex-wrap:wrap}
.hours li:last-child{border-bottom:0}
.hours b{font-family:var(--ff-mono);font-size:.9rem;color:var(--accent-txt);white-space:nowrap}
.map-embed{border-radius:var(--r-l);overflow:hidden;border:1px solid var(--line);box-shadow:var(--shadow-m);aspect-ratio:16/9;background:var(--surface-2)}
.map-embed iframe{width:100%;height:100%;border:0;filter:grayscale(.15)}
[data-theme="dark"] .map-embed iframe{filter:invert(.92) hue-rotate(180deg) grayscale(.2)}
.prose>*+*{margin-top:16px}
.prose h3{margin-top:34px}
.prose h4{margin-top:24px}
.prose ul{display:grid;gap:10px}
.prose ul li{position:relative;padding-left:24px;color:var(--ink-2)}
.prose ul li::before{content:"";position:absolute;left:3px;top:.62em;width:8px;height:8px;border-radius:50%;background:var(--teal)}
.prose ol{counter-reset:c;display:grid;gap:10px}
.prose ol li{position:relative;padding-left:38px;color:var(--ink-2);counter-increment:c}
.prose ol li::before{content:counter(c);position:absolute;left:0;top:.1em;width:26px;height:26px;border-radius:50%;
  background:var(--brand-100);color:var(--accent-txt);font-size:.78rem;font-weight:800;display:grid;place-items:center}
.callout{padding:20px 24px;border-radius:var(--r-l);background:var(--brand-100);
  border:1px solid color-mix(in srgb,var(--brand-500) 24%,transparent);font-size:.94rem;color:var(--ink-2)}
.callout b{color:var(--accent-txt)}
/* Le zone sono dieci: con le colonne calcolate in automatico ne entravano
   nove e la decima restava sola su una riga sua. Cinque per riga danno due
   righe uguali, due per riga sul telefono ne danno cinque.
   Se un domani le zone cambiano di numero, questi due valori vanno rivisti:
   servono divisori del totale, altrimenti l'ultima riga torna spaiata. */
.zone-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:11px}
@media(max-width:700px){.zone-grid{grid-template-columns:repeat(2,1fr)}}
.zone{padding:18px 12px;border-radius:var(--r-m);background:var(--surface);border:1px solid var(--line);
  text-align:center;transition:.35s var(--e);box-shadow:var(--shadow-s)}
.zone:hover{border-color:var(--brand-400);box-shadow:var(--shadow-s)}
.zone b{display:block;font-size:1.5rem;font-weight:700;letter-spacing:-.03em;color:var(--brand-700)}
[data-theme="dark"] .zone b{color:var(--accent-txt)}   /* WCAG 1.4.3, come .stat b */
.zone span{display:block;font-size:.76rem;color:var(--muted);font-weight:700;margin-top:4px}
/* le card zona sono cliccabili: portano alla mappa ed evidenziano l'area */
.zone[data-zona]{cursor:pointer}
.zone[data-zona]:hover{transform:translateY(-2px);box-shadow:var(--shadow-m)}
.zone[data-zona]:focus-visible{outline:2px solid var(--brand-500);outline-offset:2px}
/* ---------- "Cerca la tua via" (parcheggi.html, scheda residenti) ----------
   Il riquadro e' un combobox: campo + elenco di suggerimenti + risposta.
   L'elenco e' in posizione assoluta sopra il resto, quindi il contenitore
   deve restare position:relative e sopra le card che gli stanno accanto. */
.cv{position:relative;z-index:2;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-l);padding:20px 20px 22px;box-shadow:var(--shadow-s);margin-bottom:28px}
.cv h3.cv-h{margin:0 0 4px;font-size:1.12rem}
.cv .cv-occhiello{margin:0 0 14px;color:var(--muted);font-size:.92rem;max-width:62ch}
.cv-riquadro{position:relative;display:flex;gap:10px;flex-wrap:wrap}
.cv-campo{flex:1 1 260px;min-width:0;padding:12px 14px;font:inherit;color:var(--ink);
  background:var(--surface-2);border:1px solid var(--line-2);border-radius:var(--r-m)}
.cv-campo:focus-visible{outline:2px solid var(--focus);outline-offset:1px;border-color:var(--brand-400)}
.cv-lista{position:absolute;top:calc(100% + 6px);left:0;right:0;z-index:5;margin:0;padding:6px;
  list-style:none;max-height:290px;overflow-y:auto;background:var(--surface);
  border:1px solid var(--line-2);border-radius:var(--r-m);box-shadow:var(--shadow-m)}
.cv-opz{padding:9px 12px;border-radius:var(--r-s);cursor:pointer;font-size:.95rem}
.cv-opz:hover,.cv-opz.on{background:var(--brand-100);color:var(--ink)}
.cv-stato{margin:10px 0 0;font-size:.86rem;color:var(--muted);min-height:1em}
.cv-esito{margin-top:18px;border-top:1px solid var(--line);padding-top:16px}
.cv-titolo{margin:0 0 12px;font-size:1.18rem}
.cv-blocco{margin-bottom:14px}
.cv-blocco p{margin:0;font-size:.95rem}
/* la zona e' tutta la risposta: targhetta grande, niente altro accanto */
.cv-zone{display:flex;flex-wrap:wrap;gap:10px;margin:0}
/* la targhetta e' un pulsante: porta alla mappa con l'area isolata */
.cv-chip{display:inline-block;padding:10px 20px;border-radius:var(--r-m);
  background:var(--brand-100);color:var(--accent-txt);font-family:inherit;
  font-size:1.15rem;font-weight:700;letter-spacing:-.01em;
  /* il bordo c'e' sempre: su telefono non c'e' hover che riveli il comando */
  border:1px solid var(--brand-300);cursor:pointer;transition:.25s var(--e)}
.cv-chip:hover{border-color:var(--brand-400);box-shadow:var(--shadow-s)}
.cv-chip:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.cv-niente{margin:0;font-size:1rem;color:var(--ink-2)}
.cv-piede{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-top:16px}
@media(max-width:560px){.cv{padding:16px 15px 18px}.cv-piede .btn{width:100%}
  /* campo e pulsante devono restare sulla stessa riga anche a 360px */
  .cv-campo{flex:1 1 140px}.cv-vai{flex:0 0 auto;align-self:stretch}}
.aside-box{position:sticky;top:calc(var(--hdr) + 18px);display:grid;gap:16px}
@media(max-width:1080px){.g-side{grid-template-columns:1fr}.aside-box{position:static}}

/* ---------- 24. Responsive ---------- */
@media(max-width:1080px){
  .nav{display:none}
  .burger{display:grid;place-items:center}
  .hero-in{grid-template-columns:1fr;gap:44px}
  .hero-vis{max-width:520px;margin-inline:auto;width:100%}
  .ftr-grid{grid-template-columns:1fr 1fr}
  .g-4{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:460px){
  /* sotto questa larghezza l'etichetta del pulsante fa sbordare l'header */
  .hdr-act .btn span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .hdr-act .btn{padding:11px 13px}
  .hdr-act{gap:6px}
}
@media(max-width:760px){
  :root{--hdr:74px}
  html{scroll-padding-top:86px}
  body{font-size:16px}
  /* sparita la colonna di sinistra, quella di destra resterebbe appiccicata
     al bordo e andrebbe a capo allineata a destra: su schermo stretto sta
     meglio centrata, e le due righe si leggono come un blocco solo */
  /* su mobile la barra utility si assottiglia: Chi Siamo, Trasparenza e
     Contatti sono gia' nel menu hamburger, quindi in cima resta solo il
     selettore lingua (che nel drawer non c'e'). */
  .topbar-l,.topbar-r>a,.topbar-r>.tb-sep{display:none}
  .topbar-in{justify-content:center}
  .topbar-r{width:100%;justify-content:flex-end}
  .g-2,.g-3,.g-4,.g-auto{grid-template-columns:1fr}
  .ftr-grid{grid-template-columns:1fr}
  .band-in{flex-direction:column;align-items:flex-start}
  .hero-stats{gap:24px}
  .hstat{min-width:44%}
  .brand-txt{display:none}
  .board-scroll{max-height:none}
  .notice-ico{width:92px}
  .notice-ico img{width:64px;height:64px}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  [data-rv]{opacity:1;transform:none}
}
[data-theme="dark"] body{background-image:url('../img/motivo-scuro-b.png')}
@media print{
  .hdr,.topbar,.ftr,.totop,.ticker,.drawer,.search-ov{display:none!important}
  body{background:#fff;color:#000}
}

/* ---------- 25. Tabellone BUS (Albatross) ---------- */
.bus-form{
  display:grid;grid-template-columns:1fr auto 1fr 168px 132px auto;gap:12px;align-items:end;
  padding:20px 24px;border-bottom:1px solid var(--line);background:var(--surface-2);
}
.bus-field{display:flex;flex-direction:column;gap:6px;min-width:0}
.bus-field label{font-size:.7rem;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);font-weight:800}
.bus-field select,.bus-field input{
  width:100%;padding:12px 14px;border-radius:var(--r-s);background:var(--surface);color:var(--ink);
  border:1px solid var(--line-2);font-size:.93rem;font-weight:600;outline:none;
  transition:border-color .3s,box-shadow .3s;
}
.bus-field select:focus,.bus-field input:focus{border-color:var(--brand-500);box-shadow:0 0 0 4px color-mix(in srgb,var(--brand-500) 20%,transparent)}
.bus-field select:disabled,.bus-field input:disabled{opacity:.5;cursor:not-allowed}
[data-theme="dark"] .bus-field input[type="date"]::-webkit-calendar-picker-indicator{filter:invert(.7)}
.bus-swap{
  width:44px;height:44px;flex:none;border-radius:50%;display:grid;place-items:center;margin-bottom:1px;
  background:var(--surface);border:1px solid var(--line-2);color:var(--muted);transition:.35s var(--e);
}
.bus-swap:hover{color:var(--accent-txt);border-color:var(--brand-500);transform:rotate(180deg)}
.bus-swap svg{width:17px;height:17px}
.bus-go{margin-bottom:1px;white-space:nowrap}
.bus-go:disabled{opacity:.45;cursor:not-allowed;transform:none;box-shadow:none}
.b-bus{grid-template-columns:112px 112px 1fr 172px 168px}
.b-buy{display:flex;flex-direction:column;align-items:flex-end;gap:7px}
.b-price{font-family:var(--ff-mono);font-size:1.06rem;font-weight:700;color:#0B6B4F;line-height:1}
[data-theme="dark"] .b-price{color:#6EE7B7}
.b-price.muted{color:var(--muted)}
.b-buy .btn{padding:8px 16px;font-size:.82rem;box-shadow:none}
.bconf{text-align:left;max-width:640px;margin-inline:auto}
.bconf svg{margin-inline:0}
.bconf b{font-size:1.1rem}
.bconf-steps{display:grid;gap:11px;margin:20px 0 22px}
.bconf-steps>div{display:flex;gap:12px;align-items:flex-start;font-size:.9rem;line-height:1.55}
.bnum{
  width:24px;height:24px;flex:none;border-radius:50%;display:grid;place-items:center;
  background:linear-gradient(140deg,#0E4A6B,#0B7C74);color:#fff;font-size:.74rem;font-weight:800;margin-top:1px;
}
.bconf code{
  font-family:var(--ff-mono);font-size:.83rem;background:var(--surface-2);border:1px solid var(--line-2);
  border-radius:6px;padding:2px 7px;color:var(--accent-txt);overflow-wrap:anywhere;
}
.bconf-steps .btxt{min-width:0}
.bconf strong{color:var(--ink)}
@media(max-width:1080px){
  .bus-form{grid-template-columns:1fr 1fr;gap:14px}
  .bus-swap{display:none}
  .bus-go{grid-column:1/-1}
  .b-bus{grid-template-columns:100px 100px 1fr 150px}
  .b-bus .b-op{display:none}
}
@media(max-width:760px){
  .bus-form{grid-template-columns:1fr}
  .b-bus{grid-template-columns:82px 82px 1fr}
  .b-bus .hide-m{display:none}
  .b-buy{align-items:flex-start}
}

/* ---------- 26. Transizioni tra schermate ---------- */
/* Entrata della pagina: parte da opacity 0 solo se il JS è attivo, così
   senza JS il contenuto resta comunque visibile. */
html.pm-ready main{animation:pageIn .5s var(--e) both}
@keyframes pageIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* Uscita: applicata al click su un link interno, prima della navigazione */
html.pm-leaving main{opacity:0;transform:translateY(-10px);transition:opacity .28s var(--e),transform .28s var(--e)}
html.pm-leaving .hdr,html.pm-leaving .topbar{opacity:.65;transition:opacity .28s var(--e)}

/* Velo di transizione: copre il salto di rendering fra due documenti */
.pm-veil{
  position:fixed;inset:0;z-index:200;pointer-events:none;opacity:0;
  background:var(--brand-800);transform-origin:top;
  transition:opacity .3s var(--e);
}
html.pm-leaving .pm-veil{opacity:.14}

/* Barra di caricamento in cima durante il passaggio */
.pm-nav-bar{
  position:fixed;top:0;left:0;height:3px;width:0;z-index:201;
  background:var(--brand-500);
  transition:width .3s var(--e),opacity .3s var(--e);
}
html.pm-leaving .pm-nav-bar{width:72%}
/* navigazione interna del router: barra di avanzamento; il main montato dal
   router entra con i soli reveal, senza ripetere l'animazione di pagina */
html.pm-nav .pm-nav-bar{width:72%}
main[data-pm-swap]{animation:none}

/* Browser con View Transitions API: transizione nativa fra documenti */
@view-transition{navigation:auto}
::view-transition-old(root){animation:vtOut .3s var(--e) both}
::view-transition-new(root){animation:vtIn .42s var(--e) both}
@keyframes vtOut{to{opacity:0;transform:translateY(-12px) scale(.995)}}
@keyframes vtIn{from{opacity:0;transform:translateY(16px) scale(.995)}}
/* header e footer restano fermi durante la transizione */
.hdr{view-transition-name:pm-header}
.ftr{view-transition-name:pm-footer}
::view-transition-group(pm-header),::view-transition-group(pm-footer){animation-duration:.28s}

/* Cambio di pannello nei tab: sostituisce il salto secco */
.tab-panel.on{animation:panelIn .42s var(--e)}
@keyframes panelIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.tab-panel.pm-out{animation:panelOut .2s var(--e) both}
@keyframes panelOut{to{opacity:0;transform:translateY(-8px)}}

/* Cambio Partenze/Arrivi nei tabelloni */
.rows.pm-swap{animation:rowsSwap .38s var(--e)}
@keyframes rowsSwap{from{opacity:0;transform:translateX(14px)}to{opacity:1;transform:none}}

/* Cambio di tema: attenua il lampo del ricolore */
html.pm-theming *{transition:background-color .35s var(--e),border-color .35s var(--e),color .35s var(--e)!important}

@media(prefers-reduced-motion:reduce){
  html.pm-ready main,html.pm-leaving main,.tab-panel.on,.rows.pm-swap{animation:none;opacity:1;transform:none;transition:none}
  .pm-veil,.pm-nav-bar{display:none}
  @view-transition{navigation:none}
}

/* ---------- 26b. Lettore delle news ---------- */
.reader{position:fixed;inset:0;z-index:210;display:grid;place-items:center;padding:18px;
  background:rgba(4,18,28,.55);backdrop-filter:blur(6px);
  opacity:0;pointer-events:none;transition:opacity .3s var(--e)}
.reader.on{opacity:1;pointer-events:auto}
.reader-box{width:min(760px,100%);max-height:88vh;overflow:auto;background:var(--surface);
  border-radius:var(--r-l);box-shadow:var(--shadow-l);
  transform:translateY(16px) scale(.985);transition:transform .35s var(--e)}
.reader.on .reader-box{transform:none}
.reader-testa{position:sticky;top:0;display:flex;align-items:center;gap:12px;
  padding:15px 22px;background:var(--brand-800);color:#fff;z-index:2}
.reader-cat{font-size:.72rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  background:rgba(255,255,255,.18);border-radius:999px;padding:5px 12px;white-space:nowrap}
.reader-data{font-size:.8rem;font-weight:600;color:rgba(255,255,255,.88)}
.reader-x{margin-left:auto;width:36px;height:36px;flex:none;border-radius:50%;
  background:rgba(255,255,255,.16);color:#fff;display:grid;place-items:center;transition:background .25s,transform .25s}
.reader-x:hover{background:rgba(255,255,255,.32);transform:rotate(90deg)}
.reader-x:focus-visible{outline:2px solid #fff;outline-offset:2px}
.reader-x svg{width:17px;height:17px}
.reader-titolo{padding:24px 28px 0;font-size:clamp(1.25rem,2.4vw,1.5rem);letter-spacing:-.02em;line-height:1.25}
.reader-corpo{padding:16px 28px 32px}
.reader-corpo p{margin:0 0 14px;font-size:.98rem;line-height:1.72;color:var(--ink-2)}
.reader-corpo p:last-child{margin-bottom:0}
a.post{color:inherit}
a.post .link-a{display:none}
@media(max-width:560px){
  .reader{padding:0}
  .reader-box{width:100%;height:100%;max-height:none;border-radius:0}
}
@media(prefers-reduced-motion:reduce){.reader,.reader-box{transition:none}}

/* ---------- 26c. Pagine articolo ---------- */
.art-testa{max-width:820px}
.art-titolo{font-size:clamp(1.7rem,3.6vw,2.5rem);line-height:1.16;letter-spacing:-.025em}
.art-data{margin-top:10px;font-size:.95rem}
.art-col{max-width:820px}
.art-cover{border-radius:var(--r-l);overflow:hidden;box-shadow:var(--shadow-m);margin:0 0 30px}
.art-cover img{width:100%;height:auto;display:block}
.art-corpo p{font-size:1.03rem;line-height:1.78;color:var(--ink-2);margin-bottom:16px}
.art-corpo h3{margin:26px 0 10px}
.art-corpo p:last-child{margin-bottom:0}

/* ---------- 26c. Mappa dei parchi (colonna laterale) ---------- */
.mp-scatola{border:1px solid var(--line);border-radius:var(--r-l);overflow:hidden;background:var(--surface)}
.mp-mappa{height:340px;z-index:0}
.mp-scatola .field{padding:12px 12px 8px}
.mp-scatola .field input{width:100%}
.mp-elenco{overflow:auto;max-height:250px;padding:0 6px 8px;display:flex;flex-direction:column;gap:2px}
.mp-voce{display:flex;align-items:baseline;justify-content:space-between;gap:10px;width:100%;
  text-align:left;padding:8px 10px;border-radius:var(--r-s);font-size:.86rem;color:var(--ink)}
.mp-voce b{font-weight:600}
.mp-voce span{color:var(--muted);font-size:.78rem;white-space:nowrap;font-variant-numeric:tabular-nums}
.mp-voce:hover{background:color-mix(in srgb,var(--brand-500) 8%,transparent)}
.mp-voce:focus-visible{outline:2px solid var(--brand-500);outline-offset:-2px}
.mp-vuoto{padding:10px 12px;color:var(--muted);font-size:.86rem}
/* i giochi in forma di testo: i marker sulla mappa sono cerchi svg, che la
   tastiera non raggiunge. Qui l'informazione c'e' per tutti. */
.mp-giochi{margin:-2px 0 4px;padding:0 10px}
.mp-giochi>summary{display:inline-flex;align-items:center;gap:6px;cursor:pointer;list-style:none;
  font-size:.78rem;font-weight:700;color:var(--accent-txt);padding:3px 0}
.mp-giochi>summary::-webkit-details-marker{display:none}
.mp-giochi>summary::after{content:"";width:6px;height:6px;flex:none;border-right:2px solid currentColor;
  border-bottom:2px solid currentColor;transform:rotate(45deg) translate(-1px,-1px);transition:transform .25s var(--e)}
.mp-giochi[open]>summary::after{transform:rotate(225deg) translate(-1px,-1px)}
.mp-giochi>summary:focus-visible{outline:2px solid var(--focus);outline-offset:2px;border-radius:var(--r-s)}
.mp-giochi ul{margin:4px 0 8px;padding:0 0 0 14px;display:flex;flex-direction:column;gap:3px;list-style:disc}
.mp-giochi li{font-size:.8rem;color:var(--ink-2);line-height:1.45}
.mp-giochi li i{font-style:normal;font-weight:700;color:var(--muted)}
.mp-fonte{margin:0;border-top:1px solid var(--line);padding:10px 12px 12px;font-size:.75rem;color:var(--muted)}
.leaflet-container{font:inherit}
[data-theme="dark"] .leaflet-tile-pane{filter:invert(1) hue-rotate(200deg) saturate(.55) brightness(.9) contrast(.9)}
[data-theme="dark"] .leaflet-container{background:#0E1E2C}
.leaflet-popup-content-wrapper{border-radius:var(--r-s);box-shadow:var(--shadow-m)}
.leaflet-popup-content{margin:12px 16px;font-size:.88rem;line-height:1.5}
[data-theme="dark"] .leaflet-popup-content-wrapper,[data-theme="dark"] .leaflet-popup-tip{background:#12283B;color:#E7F0F7}

/* ---------- 27. Gallerie fotografiche ---------- */
.gal{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px}
/* su telefono due colonne: pagine molto piu' corte, anteprime comunque leggibili */
@media(max-width:560px){.gal{grid-template-columns:repeat(2,1fr);gap:9px}}
.gal-i{
  position:relative;display:block;aspect-ratio:4/3;border-radius:var(--r-m);overflow:hidden;
  background:var(--surface-2);border:1px solid var(--line);box-shadow:var(--shadow-s);
  transition:transform .45s var(--e),box-shadow .45s var(--e),border-color .4s;cursor:zoom-in;
}
.gal-i img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--e)}
.gal-i::after{
  content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(0,25,40,.5),transparent 55%);
  opacity:0;transition:opacity .4s var(--e);
}
.gal-i:hover{box-shadow:var(--shadow-m);border-color:var(--brand-400)}
.gal-i:hover img{transform:scale(1.08)}
.gal-i:hover::after{opacity:1}
.gal-i .zoom{
  position:absolute;right:10px;bottom:10px;width:32px;height:32px;border-radius:50%;
  background:var(--surface);border:1px solid var(--line);
  display:grid;place-items:center;color:var(--ink);opacity:0;transform:scale(.7);
  transition:.4s var(--e);
}
.gal-i:hover .zoom{opacity:1;transform:none}
.gal-i .zoom svg{width:15px;height:15px}
.gal-more{
  display:grid;place-items:center;aspect-ratio:4/3;border-radius:var(--r-m);
  background:var(--brand-100);border:1px dashed var(--line-2);color:var(--accent-txt);
  font-weight:800;font-size:.95rem;transition:.4s var(--e);text-align:center;padding:12px;
}
.gal-more:hover{background:var(--surface);border-color:var(--brand-400)}
.gal-i.hidden{display:none}

/* lightbox */
.lb{
  position:fixed;inset:0;z-index:120;background:rgba(2,12,20,.94);backdrop-filter:blur(10px);
  display:grid;place-items:center;opacity:0;visibility:hidden;transition:opacity .35s var(--e),visibility .35s;
}
.lb.on{opacity:1;visibility:visible}
.lb-fig{max-width:min(1200px,92vw);max-height:86vh;display:flex;flex-direction:column;gap:12px;
  transform:scale(.94);transition:transform .4s var(--e)}
.lb.on .lb-fig{transform:none}
.lb-fig img{max-width:100%;max-height:76vh;object-fit:contain;border-radius:var(--r-m);
  box-shadow:0 30px 80px rgba(0,0,0,.6);background:#0A1620}
.lb-cap{color:#C8DEEC;font-size:.9rem;text-align:center;display:flex;justify-content:center;gap:14px;align-items:center}
.lb-cap b{color:#fff;font-weight:700}
.lb-n{font-family:var(--ff-mono);font-size:.82rem;color:#7FA6BC}
.lb-btn{
  position:absolute;top:50%;transform:translateY(-50%);width:52px;height:52px;border-radius:50%;
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);color:#fff;
  display:grid;place-items:center;transition:.3s var(--e);
}
.lb-btn:hover{background:rgba(255,255,255,.22);transform:translateY(-50%) scale(1.08)}
.lb-prev{left:max(16px,3vw)}.lb-next{right:max(16px,3vw)}
.lb-btn svg{width:22px;height:22px}
.lb-close{position:absolute;top:20px;right:max(16px,3vw);width:46px;height:46px;border-radius:50%;
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);color:#fff;display:grid;place-items:center;transition:.3s var(--e)}
.lb-close:hover{background:rgba(229,72,77,.9);transform:rotate(90deg)}
.lb-close svg{width:20px;height:20px}
@media(max-width:640px){.lb-btn{width:42px;height:42px}.lb-prev{left:8px}.lb-next{right:8px}}

/* ---------- 28. Meteo ---------- */
/* bollettino: superficie piana, filetti al posto delle pillole, numeri tabellari */
.meteo{
  position:relative;overflow:hidden;border-radius:var(--r-m);
  background:var(--surface);border:1px solid var(--line);color:var(--ink);
  box-shadow:var(--shadow-s);
}
.meteo-top{display:flex;align-items:baseline;justify-content:space-between;gap:14px;
  padding:13px 20px;border-bottom:1px solid var(--line);background:var(--surface-2)}
.meteo-luogo{display:flex;align-items:center;gap:7px;font-weight:700;font-size:.74rem;
  letter-spacing:.12em;text-transform:uppercase;color:var(--accent-txt)}
.meteo-luogo svg{width:14px;height:14px}
.meteo-agg{font-size:.71rem;color:var(--muted);font-variant-numeric:tabular-nums}

.meteo-now{display:flex;align-items:center;gap:18px;padding:20px}
.meteo-ico{width:74px;height:74px;flex:none;border-radius:var(--r-m);
  display:grid;place-items:center;background:var(--surface-2);border:1px solid var(--line)}
.meteo-ico img{width:80%;height:80%;object-fit:contain}
.meteo-t{font-family:var(--ff-display);font-size:clamp(2.4rem,5vw,3.1rem);font-weight:700;
  letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums}
.meteo-t sup{font-size:.34em;font-weight:600;color:var(--muted);vertical-align:super;
  margin-left:3px;letter-spacing:0}
.meteo-desc{font-size:.98rem;font-weight:600;color:var(--ink-2);margin-top:7px}
.meteo-perc{font-size:.82rem;color:var(--muted);margin-top:2px}

.meteo-dati{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line)}
.meteo-dato{padding:12px 16px 13px;min-width:0}
.meteo-dato+.meteo-dato{border-left:1px solid var(--line)}
.meteo-dato span{display:block;font-size:.63rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);margin-bottom:4px}
.meteo-dato b{font-size:1.02rem;font-weight:700;font-variant-numeric:tabular-nums}
.meteo-dato b i{font-style:normal;font-size:.7em;font-weight:600;color:var(--muted);margin-left:3px}

.meteo-prev{border-top:1px solid var(--line)}
.meteo-g{display:flex;align-items:center;gap:12px;padding:9px 20px}
.meteo-g+.meteo-g{border-top:1px solid var(--line)}
.meteo-g i{font-style:normal;width:3em;flex:none;font-size:.75rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--muted)}
.meteo-g img{width:30px;height:30px;flex:none;object-fit:contain}
.meteo-g b{margin-left:auto;font-size:.92rem;font-weight:700;font-variant-numeric:tabular-nums}
.meteo-g b small{font-size:1em;font-weight:500;color:var(--muted);margin-left:10px}

.meteo-skel .meteo-t,.meteo-skel .meteo-desc{background:var(--bg-2);border-radius:6px;color:transparent}
.meteo-err{font-size:.86rem;color:var(--muted);margin-top:4px}
@media(max-width:420px){
  .meteo-now{padding:16px}
  .meteo-ico{width:64px;height:64px}
  .meteo-dato{padding:11px 12px}
  .meteo-g{padding:9px 16px}
}
@media(max-width:1080px){#evidenza{grid-template-columns:1fr!important}}

/* ---------- 29. Illustrazioni "spot" nelle card ---------- */
.svc-spot{
  width:100%;aspect-ratio:16/11;margin:-6px 0 16px;border-radius:var(--r-m);
  display:grid;place-items:center;overflow:hidden;position:relative;
  background:linear-gradient(160deg,#EDF6FC,#E3F1F7);
}
[data-theme="dark"] .svc-spot{background:linear-gradient(160deg,#0D2534,#0B2C33)}
.svc-spot img{width:78%;height:78%;object-fit:contain;transition:transform .55s var(--e)}
.card:hover .svc-spot img{transform:scale(1.07) rotate(-1.5deg)}
.svc-spot.scura{background:linear-gradient(160deg,#08202E,#06202A)}

/* illustrazione affiancata al testo, per gli avvisi */
.notice-spot{
  width:96px;height:96px;flex:none;border-radius:var(--r-m);display:grid;place-items:center;
  background:linear-gradient(160deg,#EDF6FC,#E3F1F7);overflow:hidden;
}
[data-theme="dark"] .notice-spot{background:linear-gradient(160deg,#0D2534,#0B2C33)}
.notice-spot img{width:84%;height:84%;object-fit:contain}
@media(max-width:760px){.notice-spot{width:72px;height:72px}}

/* ---------- 30. Divisori a onda fra le sezioni ---------- */
.onda{display:none;
  position:relative;height:clamp(52px,7vw,104px);margin:0;pointer-events:none;
  background-repeat:no-repeat;background-position:center bottom;background-size:100% 100%;
}
.onda-chiara{background-image:url('../img/decor/onda-chiara.png')}
.onda-scura{background-image:url('../img/decor/onda-scura.png')}
/* capovolta quando la sezione scura sta sopra */
.onda-su{transform:scaleY(-1)}
[data-theme="dark"] .onda-chiara{opacity:.28}

/* ---------- 31. Fondali decorativi ---------- */
/* pattern seamless, tenuto molto tenue: deve suggerire, non competere */
.sec-pattern{position:relative;isolation:isolate}
.sec-pattern::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background-image:url('../img/decor/pattern.png');background-size:520px;background-repeat:repeat;
  opacity:.5;
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 22%,#000 78%,transparent);
  mask-image:linear-gradient(180deg,transparent,#000 22%,#000 78%,transparent);
}
[data-theme="dark"] .sec-pattern::before{opacity:.06}

/* blob morbidi: sostituiscono gli orb sfocati generici */
.blob{
  position:absolute;z-index:-1;pointer-events:none;opacity:.55;
  background:url('../img/decor/blob.png') center/contain no-repeat;
  animation:blobFloat 26s ease-in-out infinite;
}
@keyframes blobFloat{50%{transform:translate(-22px,26px) scale(1.06) rotate(3deg)}}
.blob-1{width:min(38vw,420px);aspect-ratio:1;top:-8%;right:-6%}
.blob-2{width:min(30vw,330px);aspect-ratio:1;bottom:-12%;left:-8%;animation-delay:-9s;animation-direction:reverse}
[data-theme="dark"] .blob{opacity:.16}

/* ---------- 32. Stati vuoti illustrati ---------- */
.bempty img.empty-ill{width:150px;height:150px;object-fit:contain;margin:0 auto 16px;opacity:.95}
.stato-vuoto{text-align:center;padding:clamp(30px,5vw,56px) 20px}
.stato-vuoto img{width:190px;height:190px;object-fit:contain;margin:0 auto 20px}
.stato-vuoto b{display:block;font-size:1.1rem;margin-bottom:8px}
.stato-vuoto p{color:var(--muted);max-width:46ch;margin-inline:auto}

/* hero notturno dell'aeroporto: l'illustrazione sostituisce stelle e aereo in CSS */
.mob-hero.has-hero-notte{background-size:cover;background-position:center 62%;background-repeat:no-repeat}
.mob-hero.has-hero-notte::before{
  /* il velo si spegneva troppo presto a destra, proprio dove ora cade la
     colonna delle informazioni */
  background:linear-gradient(100deg,rgba(0,20,32,.93) 0%,rgba(0,20,32,.74) 40%,rgba(0,20,32,.5) 74%);
}
.mob-hero.has-hero-notte::after{
  background:linear-gradient(180deg,rgba(0,18,30,.35),transparent 40%,rgba(0,18,30,.5));
}

/* ---------- 33. Selettore di lingua ---------- */
.lang{margin-left:4px}
.lang-btn{gap:7px;min-height:24px}
.lang-btn span{font-variant-numeric:tabular-nums;letter-spacing:.04em}
/* bandierine: rettangolo arrotondato con bordo interno, cosi' i campi chiari
   (croce bianca inglese) restano leggibili su qualunque sfondo */
.lang-flag{width:21px;height:15px;border-radius:3px;overflow:hidden;flex:none;display:inline-flex;position:relative}
.lang-flag::after{content:"";position:absolute;inset:0;border-radius:inherit;
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ink) 22%,transparent)}
.lang-flag svg{width:100%;height:100%;display:block}
.lang-btn .lang-flag{width:18px;height:13px}
.lang-menu a span.lang-flag{flex:none}
.lang-menu{left:auto;right:0;min-width:210px}
.lang-menu a{justify-content:flex-start;gap:13px;min-height:42px}
.lang-menu a span{flex:1}
/* La lingua in uso si riconosce dalla spunta e dal peso del nome. Il fondo
   colorato era un terzo segnale per la stessa cosa, e faceva sembrare la voce
   un pulsante premuto invece che una scelta gia' fatta. */
.lang-menu a.lang-sel{font-weight:700}
.lang-ok{width:15px;height:15px;flex:none;margin-left:auto;color:var(--accent-txt)}
/* nel menu le bandiere sono l'unico segno grafico rimasto: un filo piu' grandi */
.lang-menu .lang-flag{width:24px;height:17px}
@media(max-width:760px){
  .lang-menu{right:0;left:auto}
  .lang-btn span{display:inline}
}

/* ---------- 34. Impianto sobrio (depurazione grafica) ---------- */
/* 19. i titoli hanno una famiglia propria: distacco dal testo corrente */
h1,h2,h3,h4,h5,.as-h2,.as-h3,.as-h4,.as-h5,.art-titolo{font-family:var(--ff-display);letter-spacing:-.018em}

/* 3. numerazioni decorative negli accordion e nelle tessere */
.acc-h .n,.shw-n{display:none}

/* 10. i contenuti sono presenti: niente comparse a cascata */
[data-rv]{opacity:1!important;transform:none!important;transition:none!important;animation:none!important}
html.pm-ready main{animation:none}
.rows.pm-swap,.tab-panel.on{animation:none}

/* 17. decorazioni atmosferiche */
.sky,.plane{display:none}
/* 9. sfere sfocate: una sola, ferma e piu' discreta */

/* 2. dati in breve: righe, non vetrina di numeri */
.dati-riga{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:0;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.dati-riga>div{padding:22px 26px;display:flex;flex-direction:column;gap:4px}
.dati-riga>div+div{border-left:1px solid var(--line)}
.dati-riga b{font-family:var(--ff-display);font-size:1.7rem;font-weight:700;color:var(--ink);letter-spacing:-.02em;line-height:1}
.dati-riga span{font-size:.9rem;color:var(--muted);line-height:1.45}
@media(max-width:900px){
  .dati-riga{grid-template-columns:1fr 1fr}
  .dati-riga>div:nth-child(odd)+div{border-left:1px solid var(--line)}
  .dati-riga>div:nth-child(n+3){border-top:1px solid var(--line)}
  .dati-riga>div:nth-child(3){border-left:0}
}
@media(max-width:560px){
  .dati-riga{grid-template-columns:1fr}
  .dati-riga>div+div{border-left:0;border-top:1px solid var(--line)}
}

/* fatti della testata: una frase, non quattro contatori */
/* i numeri chiave: un chip, non testo nudo sull'immagine. Sull'hero notturno
   il testo chiaro cadeva sulla parte dettagliata dello skyline e si leggeva
   male; un fondo semitrasparente garantisce il contrasto ovunque. */
.hero-fatti{margin-top:26px;display:inline-block;font-size:.9rem;color:var(--muted);
  background:rgba(0,0,0,.035);border:1px solid var(--line);padding:10px 15px;border-radius:10px}
/* 16. seconda azione della testata: bottone con bordo chiaro sull'hero
   scuro, piu' toccabile del vecchio collegamento di testo su mobile */
.hero-2nd{--bg-b:transparent;--fg-b:#fff;--bg-h:rgba(255,255,255,.12);border-color:rgba(255,255,255,.5)}
.hero-2nd:hover{border-color:#fff}
.hero-cta{align-items:center}
/* sottotitolo: versione piena su desktop, versione corta sul telefono */
.hero-p-short{display:none}
@media(max-width:700px){.hero-p-full{display:none}.hero-p-short{display:block}}

/* 14. banda di richiamo: piu' bassa e meno "vetrina" */
.band{padding:clamp(30px,3.6vw,44px) clamp(26px,3.4vw,44px)}

/* ---------- 29b. Mission ---------- */
.mis-tappe{margin-top:14px;display:grid;gap:0}
.mis-tappe>div{display:flex;align-items:baseline;gap:14px;padding:11px 0;border-top:1px solid var(--line)}
.mis-tappe>div:first-child{border-top:0}
.mis-tappe b{flex:none;width:44px;font-family:var(--ff-display);font-size:.85rem;color:var(--accent-txt)}
.mis-tappe span{font-weight:600;color:var(--ink)}
.mis-citazione{margin:0;max-width:70ch}
.mis-citazione p{font-family:var(--ff-display);font-size:clamp(1.05rem,2vw,1.3rem);line-height:1.6;
  color:#fff;margin:0}

/* ---------- 29c. Foto che si espande con lo scorrimento ----------
   Solo transform e border-radius: gira sul compositor, 60fps.
   Niente scroll bloccato: l'espansione segue la posizione reale di lettura. */
.espandi{margin:0 0 clamp(26px,4vw,44px)}
.espandi img{display:block;width:100%;aspect-ratio:21/9;object-fit:cover;border-radius:var(--r-xl)}
.espandi figcaption{margin-top:10px;font-size:.85rem;color:var(--muted);text-align:center}
@media(max-width:700px){.espandi img{aspect-ratio:4/3}}
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    .espandi img{will-change:transform;transform-origin:center;
      animation:pm-espandi linear both;
      animation-timeline:view();
      animation-range:entry 0% cover 42%}
  }
}
@keyframes pm-espandi{
  from{transform:scale(.78);border-radius:calc(var(--r-xl) + 8px)}
  to{transform:scale(1);border-radius:var(--r-xl)}
}

/* ---------- 29d. Mappa della sosta ---------- */
.ms-riquadro{border:1px solid var(--line);border-radius:var(--r-l);overflow:hidden;background:var(--surface)}
.ms-mappa{height:480px;z-index:0}
@media(max-width:700px){.ms-mappa{height:380px}}
/* ricerca per area, sopra la mappa */
.ms-cerca{display:flex;align-items:center;gap:9px;padding:11px 15px;border-bottom:1px solid var(--line);color:var(--muted)}
.ms-cerca svg{width:18px;height:18px;flex:none;opacity:.7}
.ms-cerca input{flex:1;min-width:0;border:0;background:none;font:inherit;color:var(--ink);padding:4px 0}
.ms-cerca input::placeholder{color:var(--muted)}
.ms-cerca input:focus-visible{outline:2px solid var(--focus);outline-offset:-2px;border-radius:var(--r-s)}
/* bottone "la mia posizione" nella barra di ricerca */
.ms-loc{flex:none;display:grid;place-items:center;width:34px;height:34px;border:0;border-radius:8px;
  background:none;color:var(--brand-600);cursor:pointer;transition:background .2s}
.ms-loc:hover{background:var(--brand-100)}
.ms-loc svg{width:19px;height:19px}
.ms-loc.carica{opacity:.55;pointer-events:none}
.ms-loc.carica svg{animation:pmspin 1s linear infinite}
@keyframes pmspin{to{transform:rotate(360deg)}}
/* legenda: dice che cosa sono i due colori e permette di spegnere un livello */
.ms-legenda{display:flex;flex-wrap:wrap;gap:10px 22px;align-items:center;
  padding:12px 14px;border-top:1px solid var(--line)}
.ms-legenda label{display:inline-flex;align-items:center;gap:8px;font-size:.85rem;cursor:pointer}
.ms-legenda input{accent-color:var(--brand-600);margin:0}
.ms-legenda b{font-weight:600;color:var(--muted)}
/* i segni della legenda sono gli stessi file della mappa, e restano nelle
   due misure diverse: sulla mappa il parcometro e' piu' grande della fermata
   e la legenda non deve smentirlo. Il margine negativo evita che la riga si
   alzi, visto che le immagini hanno il contorno trasparente. */
.ms-legenda .ms-pallino{flex:none;display:block;margin:-5px 0}
.ms-legenda label:first-child .ms-pallino{width:26px;height:26px}
.ms-legenda label+label .ms-pallino{width:22px;height:22px}
/* il quadratino delle aree a pagamento: rettangolo azzurro translucido come
   il riempimento dei poligoni sulla mappa */
.ms-legenda .ms-pallino.ms-p-area{width:24px;height:16px;border-radius:4px;
  background:rgba(27,111,168,.2);border:1.5px solid #0E4A6B;margin:0}
.ms-riquadro .mp-fonte{border-top:0;padding-top:0}
/* Fumetto della mappa. I colori sono scritti per esteso e non presi dalle
   variabili del tema: il fumetto ha un fondo suo, fissato piu' sotto, e le
   variabili seguono invece il fondo della pagina. */
.msp{display:flex;flex-direction:column;gap:9px}
.msp-tipo{font-size:.66rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:#0E4A6B}
.msp-fermata .msp-tipo{color:#8A4B00}
.msp-nome{font-size:.98rem;font-weight:700;line-height:1.28;margin-top:-6px}
.msp-et{font-size:.64rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;opacity:.6}
.msp-linee{display:flex;flex-wrap:wrap;gap:4px;margin-top:-4px}
.msp-linee i{font-style:normal;font-size:.72rem;font-weight:700;line-height:1;padding:5px 6px;
  border-radius:5px;background:rgba(255,159,28,.2);color:#7A4200;font-variant-numeric:tabular-nums}
.msp-linee .msp-piu{background:none;opacity:.6;padding-left:2px}
.msp-nota{font-size:.78rem;opacity:.7}
.msp-elenco{display:flex;flex-direction:column;gap:8px;padding-top:9px;
  border-top:1px solid rgba(0,0,0,.12)}
.msp-riga{display:grid;grid-template-columns:auto 1fr;gap:1px 9px;align-items:baseline}
.msp-riga>b{font-size:.76rem;font-weight:600;opacity:.6;font-variant-numeric:tabular-nums}
.msp-riga>span{font-size:.84rem;line-height:1.3}
.msp-riga .msp-linee{grid-column:2;margin-top:3px}
.msp-riga .msp-linee i{font-size:.66rem;padding:3px 5px}
/* pulsante morbido "Acquista" nel fumetto dell'area */
.leaflet-popup-content .msp-acq{display:inline-flex;align-items:center;gap:7px;align-self:flex-start;
  margin-top:3px;padding:8px 16px;border-radius:999px;background:var(--brand-600);color:#fff;
  font-weight:700;font-size:.82rem;text-decoration:none;box-shadow:0 3px 10px rgba(27,111,168,.35);
  transition:background .2s var(--e),transform .2s var(--e),box-shadow .2s var(--e)}
.leaflet-popup-content .msp-acq:hover{background:var(--brand-700);transform:translateY(-1px);
  box-shadow:0 5px 14px rgba(27,111,168,.42)}
.leaflet-popup-content .msp-acq svg{width:15px;height:15px;flex:none}
/* link "Tariffe e orari" nel fumetto dell'area: testo, non bottone */
.leaflet-popup-content .msp-tar{align-self:flex-start;font-size:.8rem;font-weight:600;
  color:var(--brand-600);text-decoration:none}
.leaflet-popup-content .msp-tar:hover{text-decoration:underline}
.msp-vai{font-size:.82rem;font-weight:600;text-decoration:none;align-self:flex-start}
.msp-vai::after{content:'\2192';margin-left:5px;display:inline-block;transition:transform .2s var(--e)}
.msp-vai:hover::after{transform:translateX(3px)}
[data-theme="dark"] .msp-tipo{color:#7FC4EA}
[data-theme="dark"] .msp-fermata .msp-tipo{color:#FFC670}
[data-theme="dark"] .msp-linee i{background:rgba(255,159,28,.24);color:#FFCE8A}
[data-theme="dark"] .msp-elenco{border-top-color:rgba(255,255,255,.16)}

/* il bottone del carrello nell'header e' un po' piu' compatto */
.hdr .btn{padding:11px 18px;font-size:.9rem}

/* ---------- 29e. Tendine della navigazione ---------- */
.nav-vd{position:relative;display:inline-flex}
.nav-vd::after{content:"";position:absolute;top:100%;left:0;right:0;height:14px}
.nav-vd-menu{position:absolute;top:calc(100% + 8px);left:6px;
  transform:translateY(6px);min-width:215px;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-m);
  box-shadow:var(--shadow-m);padding:8px;display:flex;flex-direction:column;gap:2px;
  opacity:0;visibility:hidden;transition:opacity .22s var(--e),transform .22s var(--e),visibility .22s;z-index:70}
.nav-vd:hover .nav-vd-menu,.nav-vd:focus-within .nav-vd-menu{
  opacity:1;visibility:visible;transform:none}
/* WCAG 1.4.13: contenuto che compare al passaggio del mouse dev'essere
   richiudibile. Esc mette questa classe; torna via quando il mouse esce. */
.nav-vd.nvd-off .nav-vd-menu{opacity:0;visibility:hidden;transform:translateY(6px)}
.nav-vd-menu a{display:block;padding:9px 12px;border-radius:var(--r-s);
  font-size:.9rem;font-weight:600;color:var(--ink-2);white-space:nowrap}
.nav-vd-menu a::after{content:none}
.nav-vd-menu a.on{color:var(--ink-2);font-weight:600}
.nav-vd-menu a:hover{background:color-mix(in srgb,var(--brand-500) 8%,transparent);color:var(--accent-txt)}
@media(prefers-reduced-motion:reduce){.nav-vd-menu{transition:none}}

/* ---------- 29f. Aree sgambettamento ---------- */
.sg-area{display:flex;align-items:center;gap:14px;color:var(--ink)}
.sg-area:hover{border-color:var(--brand-300)}
.sg-zampa{width:56px;height:56px;flex:none;display:grid;place-items:center}
.sg-zampa img{width:56px;height:56px;object-fit:contain}
.sg-area b{display:block;font-weight:700}
.sg-area small{color:var(--muted);font-size:.8rem}

/* ---------- 29g. Card servizi fotografiche ---------- */
.svc-foto{position:relative;display:flex;align-items:flex-end;aspect-ratio:4/5;
  border-radius:var(--r-l);overflow:hidden;isolation:isolate;box-shadow:var(--shadow-s);
  transition:transform .45s var(--e),box-shadow .45s var(--e);color:#fff}
.svc-foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;
  transition:transform .8s var(--e)}
.svc-foto::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(to top,rgba(0,22,36,.92) 0%,rgba(0,28,45,.45) 48%,rgba(0,30,48,.04) 78%)}
.svc-foto:hover{box-shadow:var(--shadow-m)}
.svc-foto:hover img{transform:scale(1.05)}
.svc-foto-body{padding:20px 20px 18px}
.svc-foto-body h3{color:#fff;margin-bottom:6px}
.svc-foto-body p{color:rgba(255,255,255,.86);font-size:.92rem;margin-bottom:0}
.svc-foto .link-a{color:#BDE8F8;margin-top:10px;font-size:.9rem}
@media(prefers-reduced-motion:reduce){.svc-foto,.svc-foto img{transition:none}}
@media(max-width:700px){.svc-foto{aspect-ratio:16/10}}

/* ---------- 29h. Inviti all'azione ----------
   Tre blocchi diversi al posto di tre bande scure identiche:
   .band resta la fascia fotografica, .cta-piana e' un blocco a filetti,
   .ist e' il rimando sobrio a un ente esterno con il suo stemma. */
.cta-piana{display:flex;align-items:center;justify-content:space-between;gap:clamp(20px,3vw,36px);
  flex-wrap:wrap;padding:clamp(26px,3.6vw,40px) 0;
  border-top:1px solid var(--line-2);border-bottom:1px solid var(--line-2)}
.cta-piana h2{font-size:clamp(1.35rem,2.4vw,1.8rem);margin:0}
.cta-piana p{color:var(--muted);margin:9px 0 0;max-width:56ch}
.cta-piana-azioni{display:flex;gap:12px;flex-wrap:wrap}

.ist{display:flex;align-items:center;gap:clamp(18px,3vw,32px);flex-wrap:wrap;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-m);
  padding:clamp(22px,3vw,30px)}
.ist-logo{flex:none;width:128px;display:grid;place-items:center}
.ist-logo img{width:100%;height:auto}
[data-theme="dark"] .ist-logo{background:#fff;border-radius:var(--r-s);padding:10px}
.ist-corpo{flex:1;min-width:min(100%,280px)}
.ist-corpo h3{margin:0 0 8px}
.ist-corpo p{color:var(--muted);margin:0 0 18px;max-width:62ch}
.ist-azioni{display:flex;gap:12px;flex-wrap:wrap}
@media(max-width:560px){.ist-logo{width:84px}}

/* ---------- 30. Rifiniture mobile ---------- */
.pag-news{margin-top:26px}
@media(max-width:700px){
  /* leggibilita' dei tabelloni */
  .b-time small{font-size:.78rem}
  .b-dest small{font-size:.85rem}
  .tag{font-size:.78rem}
  .bnum{font-size:.8rem}
  /* niente zoom automatico su iOS */
  /* 16px e' la soglia sotto la quale iOS ingrandisce la pagina al tocco del
     campo. La regola generica su "input" perdeva contro ".field input"
     (specificita' 0,1,1 contro 0,0,1): i campi restavano a 15,2px e il
     telefono zoomava a ogni modulo. Qui si nominano i contenitori veri. */
  input,select,textarea,
  .field input,.field select,.field textarea,
  .bus-field input,.bus-field select,
  .ms-cerca input{font-size:16px}
  /* bersagli di tocco piu' comodi */
  .ftr a:not(.fbadge):not(.soc a){padding:7px 0}
  .ftr ul{gap:2px}
  .link-a{padding-block:8px}
  /* footer a fisarmonica: il comando e' un bottone dentro l'h5, cosi' il
     titolo resta un'intestazione e lo stato aperto/chiuso e' dichiarato */
  /* la spaziatura sta sul bottone, non sull'h5: altrimenti il bersaglio
     e' alto quanto il testo (14px) e toccare appena sopra o sotto la
     parola non apre la sezione */
  .ftr-grid>div h5{margin-bottom:0;padding:0}
  .ftr-acc{display:flex;align-items:center;justify-content:space-between;width:100%;
    font:inherit;color:inherit;background:none;border:0;padding:14px 0;min-height:44px;
    text-align:left;cursor:pointer}
  .ftr-acc::after{content:"";width:8px;height:8px;flex:none;
    border-right:2px solid currentColor;border-bottom:2px solid currentColor;
    transform:rotate(45deg);transition:transform .3s var(--e);opacity:.7}
  .ftr-grid>div.aperto .ftr-acc::after{transform:rotate(225deg)}
  .ftr-acc:focus-visible{outline:2px solid var(--focus);outline-offset:3px;border-radius:var(--r-s)}
  .ftr-grid>div:not(.aperto) :is(ul,.ftr-info){display:none}
  /* spazio per il bottone "torna su", che e' fisso in basso a destra */
  .ftr-bot{padding-bottom:78px}
}

/* ==========================================================================
   30. Consenso ai tracciamenti
   Sobrio di proposito: e' una domanda, non una promozione. Niente ombre
   profonde ne' colori d'allarme, il velo dietro e' leggero e la pagina
   resta leggibile mentre si decide.
   ========================================================================== */
.cons-fondo{position:fixed;inset:0;z-index:120;display:flex;align-items:flex-end;
  justify-content:center;padding:clamp(12px,3vw,28px);background:rgba(10,27,38,.34);
  animation:cons-entra .22s var(--e-io)}
.cons-fondo.cons-dettaglio{align-items:center}
@keyframes cons-entra{from{opacity:0}to{opacity:1}}
@media(prefers-reduced-motion:reduce){.cons-fondo{animation:none}}

/* overscroll-behavior: come per il drawer, in fondo al pannello il gesto non
   deve proseguire sulla pagina sotto */
.cons{position:relative;width:100%;max-width:660px;max-height:88vh;overflow-y:auto;overscroll-behavior:contain;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-m);
  box-shadow:var(--shadow-m);padding:clamp(22px,3.2vw,32px);color:var(--ink)}
.cons:focus{outline:none}
.cons-tit{font-family:var(--ff-display);font-size:1.16rem;font-weight:700;
  letter-spacing:-.015em;margin:0 34px 10px 0}
.cons-testo{font-size:.92rem;line-height:1.62;color:var(--ink-2);margin:0}
.cons-x{position:absolute;top:14px;right:14px;width:34px;height:34px;border-radius:var(--r-s);
  display:grid;place-items:center;color:var(--muted);background:none;border:0;cursor:pointer;
  transition:background .18s var(--e-io),color .18s var(--e-io)}
.cons-x:hover{background:var(--surface-2);color:var(--ink)}
.cons-x svg{width:17px;height:17px}
.cons-x:focus-visible{outline:2px solid var(--focus);outline-offset:2px}

.cons-azioni{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:22px}
.cons-azioni .btn{flex:0 0 auto}
/* "Scegli" e' un terzo pulsante, non una scorciatoia nascosta: resta leggibile
   e alla stessa altezza degli altri due, come chiede il Garante. */
.cons-piu{background:none;border:0;padding:13px 4px;font:inherit;font-size:.95rem;
  font-weight:700;color:var(--accent-txt);text-decoration:underline;
  text-underline-offset:3px;cursor:pointer}
.cons-piu:hover{color:var(--brand-700)}
.cons-piu:focus-visible{outline:2px solid var(--focus);outline-offset:2px;border-radius:var(--r-s)}
.cons-info{margin-left:auto;font-size:.86rem;font-weight:600;color:var(--accent-txt)}
.cons-info:hover{text-decoration:underline}

.cons-lista{display:flex;flex-direction:column;margin-top:6px}
.cons-voce{display:flex;align-items:flex-start;gap:20px;padding:18px 0;
  border-top:1px solid var(--line)}
.cons-voce:first-child{border-top:0}
.cons-voce-txt{flex:1 1 auto;min-width:0}
.cons-voce-txt b{display:block;font-size:.95rem;font-weight:700;letter-spacing:-.01em}
.cons-voce-txt p{margin:5px 0 0;font-size:.86rem;line-height:1.58;color:var(--muted)}
.cons-sempre{flex:none;font-size:.78rem;font-weight:700;color:var(--muted);padding-top:2px}

/* interruttore: la parola accanto dice lo stato, il colore da solo non basta */
.cons-sw{flex:none;display:flex;align-items:center;gap:10px;cursor:pointer;padding-top:1px}
.cons-sw input{position:absolute;opacity:0;width:0;height:0}
.cons-sw-p{width:42px;height:24px;border-radius:var(--r-pill);background:var(--line-2);
  position:relative;transition:background .2s var(--e-io);flex:none}
.cons-sw-p::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;
  border-radius:50%;background:#fff;box-shadow:var(--shadow-s);transition:transform .2s var(--e-io)}
.cons-sw input:checked+.cons-sw-p{background:var(--brand-600)}
.cons-sw input:checked+.cons-sw-p::after{transform:translateX(18px)}
.cons-sw input:focus-visible+.cons-sw-p{outline:2px solid var(--focus);outline-offset:3px}
.cons-sw-et{font-size:.78rem;font-weight:700;color:var(--muted);min-width:44px}

@media(max-width:560px){
  .cons-voce{flex-direction:column;gap:12px}
  .cons-sw{align-self:flex-start}
  .cons-azioni .btn,.cons-piu{width:100%;justify-content:center}
  .cons-info{margin:4px auto 0}
}

[data-theme="dark"] .cons-fondo{background:rgba(0,8,14,.56)}

/* ==========================================================================
   Invito «Cerca la tua via»

   Stessa sobrieta' del banner del consenso: velo leggero, nessuna ombra
   profonda, la pagina sotto resta leggibile. Sta sotto al consenso
   (110 contro 120), ma a non farli mai coincidere pensa invito-via.js:
   lo z-index e' solo la rete di sicurezza.
   ========================================================================== */
.invito{position:fixed;inset:0;z-index:110;display:flex;align-items:center;
  justify-content:center;padding:clamp(12px,3vw,28px)}
/* senza questa riga la classe batte il display:none dell'attributo hidden */
.invito[hidden]{display:none}
.invito-velo{position:absolute;inset:0;background:rgba(10,27,38,.34);
  animation:cons-entra .22s var(--e-io)}
/* La scheda del sito: stessa superficie, stesso bordo, stesso raggio --r-l
   delle schede in pagina. overscroll-behavior: in fondo al riquadro il gesto
   non prosegue sulla pagina sotto. */
.invito-box{position:relative;width:100%;max-width:540px;max-height:88vh;
  overflow-y:auto;overscroll-behavior:contain;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r-l);box-shadow:var(--shadow-m);
  padding:clamp(26px,3.6vw,36px);color:var(--ink);
  animation:invito-entra .26s var(--e-io)}
.invito-box:focus{outline:none}
@keyframes invito-entra{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.invito-velo,.invito-box{animation:none}}
/* Titolo, testo e azioni tengono il ritmo di .cta-piana, la striscia che
   dice la stessa cosa sotto l'eroe: stessa scala, stesso colore, stessi
   9px fra titolo e testo. Il titolo lascia libero l'angolo della X. */
.invito-tit{font-family:var(--ff-display);font-size:clamp(1.35rem,2.4vw,1.8rem);
  font-weight:700;letter-spacing:-.02em;line-height:1.2;margin:0 40px 0 0}
.invito-testo{color:var(--muted);margin:9px 0 0;max-width:56ch}
.invito-azioni{display:flex;gap:12px;flex-wrap:wrap;margin-top:clamp(20px,2.4vw,26px)}
.invito-x{position:absolute;top:12px;right:12px;width:36px;height:36px;
  border-radius:var(--r-s);display:grid;place-items:center;color:var(--muted);
  background:none;border:0;cursor:pointer;
  transition:background .18s var(--e-io),color .18s var(--e-io)}
.invito-x:hover{background:var(--surface-2);color:var(--ink)}
.invito-x svg{width:17px;height:17px}
.invito-x:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
[data-theme="dark"] .invito-velo{background:rgba(0,8,14,.56)}
@media(max-width:560px){.invito-vai{width:100%;justify-content:center}}

/* ---------- Ritocchi per il telefono ----------
   Misure prese a 390px: il campo di filtro dei tabelloni stava a 22px di
   altezza (sotto i 24px richiesti per un bersaglio), le intestazioni di
   colonna a 10,9px e le date delle news a 12,3px. Qui salgono, solo dove
   serve: sopra i 700px restano come sono. */
@media(max-width:700px){
  .bfilter{padding:10px 15px}
  .bfilter input{font-size:16px;width:100%;min-height:30px}
  .brow.head span{font-size:.76rem;letter-spacing:.08em}
  .post-date{font-size:.86rem;letter-spacing:.03em}
  .post-cat,.post-cat.post-cat-in{font-size:.76rem}
}

/* ---------- Certificazione ISO 9001 (IMQ + IQNET) ---------- */
.ftr-cert{display:flex;align-items:center;gap:24px;flex-wrap:wrap;margin-top:22px}
.ftr-cert img{width:96px;height:auto;flex:none;filter:none;margin:0}   /* niente filtro bianco della colonna */
.ftr-cert p{color:#94BDD3;font-size:.8rem;line-height:1.45;max-width:36ch;margin:0;flex:1 1 100%}
.cert-loghi{display:flex;align-items:center;gap:26px;margin:12px 0 12px}
.cert-loghi img{width:96px;height:auto}
.cert-loghi .scuro{display:none}
[data-theme="dark"] .cert-loghi .chiaro{display:none}
[data-theme="dark"] .cert-loghi .scuro{display:inline}

/* ---------- Mappa parchi e giochi (sezione dedicata) ---------- */
.mp-layout{display:grid;grid-template-columns:1.7fr 1fr;gap:20px;align-items:start}
.mp-mappa.mp-grande{height:560px}
.mp-lato{display:flex;flex-direction:column;gap:10px}
.mp-lato .field input{width:100%}
.mp-elenco.mp-elenco-grande{max-height:430px;border:1px solid var(--line);border-radius:var(--r-m);padding:6px;margin:0}
.mp-legenda{display:flex;gap:18px;flex-wrap:wrap;align-items:center;font-size:.84rem;color:var(--muted)}
.mp-legenda .pallino{display:inline-block;width:12px;height:12px;border-radius:50%;border:1.5px solid #fff;box-shadow:0 0 0 1px var(--line);margin-right:6px;vertical-align:-1px}
.mp-toggle{background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:8px;padding:7px 12px;font-weight:600;font-size:.82rem;cursor:pointer;box-shadow:0 1px 5px rgba(0,0,0,.18)}
.mp-toggle:hover{background:var(--brand-100);color:var(--accent-txt)}
@media(max-width:820px){.mp-layout{grid-template-columns:1fr}.mp-mappa.mp-grande{height:420px}.mp-elenco.mp-elenco-grande{max-height:260px}}

/* ---------- Meteo: variante a striscia orizzontale (pagina Parchi) ---------- */
.meteo-striscia{display:flex;flex-wrap:nowrap;align-items:stretch;overflow-x:auto;-webkit-overflow-scrolling:touch;min-height:96px;border-radius:var(--r-l);scrollbar-width:thin}
.meteo-striscia>*{flex:0 0 auto}
.meteo-striscia .meteo-top{display:none}
.meteo-striscia .meteo-now{align-items:center;gap:14px;padding:14px 22px}
.meteo-striscia .meteo-ico{width:56px;height:56px}
.meteo-striscia .meteo-t{font-size:2.1rem}
.meteo-striscia .meteo-desc{margin-top:4px}
.meteo-striscia .meteo-dati{border-top:0;border-left:1px solid var(--line);grid-auto-flow:column;grid-template-columns:none;align-items:center}
.meteo-striscia .meteo-dato+.meteo-dato{border-left:1px solid var(--line)}
.meteo-striscia .meteo-prev{border-top:0;border-left:1px solid var(--line);display:flex;margin-left:auto}
.meteo-striscia .meteo-g{flex-direction:column;align-items:center;gap:6px;padding:10px 20px;text-align:center}
.meteo-striscia .meteo-g+.meteo-g{border-top:0;border-left:1px solid var(--line)}
.meteo-striscia .meteo-g i{width:auto}
.meteo-striscia .meteo-g b{margin-left:0;display:flex;flex-direction:column;gap:2px}
.meteo-striscia .meteo-g b small{margin-left:0}
@media(max-width:700px){
  .meteo-striscia{flex-wrap:wrap;overflow-x:visible;min-height:0}
  .meteo-striscia>*{flex:1 1 100%}
  .meteo-striscia .meteo-now{border-bottom:1px solid var(--line);justify-content:flex-start;padding:14px 18px}
  .meteo-striscia .meteo-dati{border-left:0;border-bottom:1px solid var(--line);grid-template-columns:repeat(3,1fr)}
  .meteo-striscia .meteo-prev{border-left:0;margin-left:0}
  .meteo-striscia .meteo-g{flex:1 1 0}
  .meteo-striscia .meteo-g+.meteo-g{border-left:1px solid var(--line)}
}

/* ==========================================================================
   ASSISTENTE VIRTUALE (widget JotForm) SU SCHERMO STRETTO
   Il widget e' di terze parti: si posiziona da solo, occupa una striscia a
   tutta larghezza in basso e sta a z-index 9999. A 390px questo voleva dire
   tre cose: la bolla di saluto arrivava a filo del bordo destro senza un
   pixel di margine, il lanciatore copriva il bottone "Invia segnalazione"
   del modulo segnalazioni e la casella del consenso privacy, e restava a
   galleggiare sopra al menu e alla ricerca a schermo intero.
   Qui il widget torna a essere un cerchio in un angolo, staccato dal bordo,
   e sparisce quando c'e' un pannello aperto sopra la pagina.
   ========================================================================== */
@media(max-width:700px){
  .embedded-agent-container{
    width:auto!important;left:auto!important;right:12px!important;
    padding:0!important;pointer-events:none}
  .embedded-agent-container .ai-agent-chat-avatar-container{pointer-events:auto}
  /* la bolla "Ciao! Come posso aiutarti?" non ci sta: resta il lanciatore */
  .ai-agent-chat-avatar-tooltip,
  .ai-agent-chat-avatar-pulse{display:none!important}
  .ai-agent-chat-avatar.size-lg{width:58px!important;height:58px!important}
}
/* con il menu o la ricerca aperti il widget non deve stare davanti */
body:has(#drawer.open) .embedded-agent-container,
body:has(#searchOv.open) .embedded-agent-container{display:none!important}

/* ==========================================================================
   MAPPE: NIENTE TRAPPOLA DI SCORRIMENTO SUL TELEFONO
   Con il trascinamento attivo Leaflet mette touch-action:none: un dito che
   parte dalla mappa muove la mappa e la pagina resta ferma. Su schermi dove
   la mappa occupa meta' schermo si resta incastrati. Le mappe partono quindi
   bloccate (il dito scorre la pagina) e si attivano con un tocco; i marcatori
   restano toccabili da subito. Vedi mappa-parchi.js e mappa-sosta.js.
   ========================================================================== */
.mappa-nota{
  position:absolute;left:50%;bottom:14px;transform:translateX(-50%);
  z-index:500;margin:0;padding:8px 15px;border-radius:var(--r-pill);
  background:rgba(8,26,40,.84);color:#fff;font-size:.82rem;font-weight:600;
  white-space:nowrap;pointer-events:none;box-shadow:var(--sh-1)}

/* ==========================================================================
   VALUTAZIONE DEL SITO (valuta.js)
   Riquadro in basso a SINISTRA: a destra ci sono gia' il pulsante "torna su"
   e il lanciatore dell'assistente. Sta sotto al banner dei cookie (z 120):
   se compaiono insieme, la scelta sui cookie viene prima.
   ========================================================================== */
.vl{
  position:fixed;left:22px;bottom:22px;z-index:110;width:340px;max-width:calc(100vw - 32px);
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-l);
  box-shadow:var(--shadow-l);padding:20px 22px 18px;
  opacity:0;transform:translateY(14px);
  transition:opacity .26s var(--e),transform .26s var(--e);
}
.vl.on{opacity:1;transform:none}
.vl h2{font-size:1.12rem;font-weight:800;letter-spacing:-.015em;margin:0 0 4px;padding-right:22px}
.vl-sot{font-size:.92rem;color:var(--muted);margin:0 0 14px;line-height:1.45}

.vl-x{
  position:absolute;top:12px;right:12px;width:30px;height:30px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:transparent;border:0;color:var(--muted);cursor:pointer;
}
.vl-x svg{width:16px;height:16px}
.vl-x:hover{background:var(--bg-2);color:var(--ink)}

/* le stelle sono radio veri: l'input resta li' per tastiera e lettori di
   schermo, si vede solo la stella */
.vl-stelle{display:flex;gap:4px}
.vl-s{position:relative;display:block;padding:3px;border-radius:8px;cursor:pointer}
.vl-s input{position:absolute;width:1px;height:1px;opacity:0;margin:0}
.vl-s svg{display:block;width:34px;height:34px;fill:none;stroke:var(--muted);
  stroke-width:1.6;stroke-linejoin:round;transition:fill .15s var(--e),stroke .15s var(--e)}
.vl-s:has(input:focus-visible){outline:2px solid var(--focus);outline-offset:1px}
.vl-stelle[data-su="1"] .vl-s:nth-child(-n+1) svg,
.vl-stelle[data-su="2"] .vl-s:nth-child(-n+2) svg,
.vl-stelle[data-su="3"] .vl-s:nth-child(-n+3) svg,
.vl-stelle[data-su="4"] .vl-s:nth-child(-n+4) svg,
.vl-stelle[data-su="5"] .vl-s:nth-child(-n+5) svg{fill:var(--amber);stroke:var(--amber)}

.vl-testo,.vl-mail{
  width:100%;font:inherit;font-size:.93rem;color:var(--ink);
  background:var(--surface-2);border:1px solid var(--line);border-radius:9px;
  padding:10px 12px;margin-bottom:9px;resize:vertical;
}
.vl-testo::placeholder,.vl-mail::placeholder{color:var(--muted)}
.vl-testo:focus-visible,.vl-mail:focus-visible{outline:2px solid var(--focus);outline-offset:1px;border-color:transparent}
.vl .btn{width:100%;padding:11px 18px}
.vl-nota{font-size:.78rem;color:var(--muted);margin:10px 0 0;line-height:1.4}
.vl-nota a{color:var(--accent-txt);text-decoration:underline}
.vl-err{color:var(--red)}

/* [hidden] vale display:none, ma lo dice il foglio del browser: basta un
   display: nella nostra regola per scavalcarlo e mostrare due passi insieme */
.vl-p[hidden]{display:none!important}
.vl-fine{display:flex;align-items:center;gap:12px;padding:6px 0}
.vl-fine svg{width:26px;height:26px;flex:0 0 auto;color:var(--green)}
.vl-fine p{margin:0;font-size:.95rem;font-weight:600}

.vl-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* sul telefono diventa un foglio appoggiato al fondo */
@media (max-width:700px){
  .vl{left:8px;right:8px;bottom:8px;width:auto;max-width:none;padding:18px 18px 16px}
  .vl-s svg{width:38px;height:38px}
}

@media (prefers-reduced-motion:reduce){
  .vl{transition:none}
}
@media print{ .vl{display:none} }