/* Autoscuola Bligny — design system «la Linea». Nato per questo cliente: navy dell'insegna,
   giallo M3 come accento di percorso, Fredoka (eco delle lettere bombate) + Atkinson Hyperlegible. */

/* ── Font (self-hosted, subset latin + latin-ext) ── */
@font-face{font-family:'Fredoka';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/fredoka-500.woff2) format('woff2');}
@font-face{font-family:'Fredoka';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/fredoka-600.woff2) format('woff2');}
@font-face{font-family:'Atkinson';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/atkinson-400.woff2) format('woff2');}
@font-face{font-family:'Atkinson';font-style:italic;font-weight:400;font-display:swap;src:url(fonts/atkinson-400i.woff2) format('woff2');}
@font-face{font-family:'Atkinson';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/atkinson-700.woff2) format('woff2');}
@font-face{font-family:'AtkinsonExt';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/atkinson-ext-400.woff2) format('woff2');}
@font-face{font-family:'AtkinsonExt';font-style:italic;font-weight:400;font-display:swap;src:url(fonts/atkinson-ext-400i.woff2) format('woff2');}
@font-face{font-family:'AtkinsonExt';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/atkinson-ext-700.woff2) format('woff2');}

:root{
  --carta:#FAF7F0; --carta2:#F1EBDF; --ink:#22304F; --muted:#4C5670;
  --blu:#2A4390; --navy:#1D2C55; --navy2:#162244;
  --giallo:#F4C531; --giallo-g:#8A6D00; --verde:#176B44;
  --riga:rgba(29,44,85,.16); --riga-scura:rgba(250,247,240,.22);
  --hh:64px; --stacco:clamp(4.2rem, 9.5vh, 7.5rem);
  --tondo:22px; --tondino:14px;
  --f-titoli:'Fredoka', 'Trebuchet MS', sans-serif;
  --f-testo:'Atkinson','AtkinsonExt','Segoe UI',system-ui,sans-serif;
}
@media (max-width:699px){ :root{ --hh:56px; --stacco:clamp(3.1rem, 8.5vh, 5.5rem); } }

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth; background:var(--carta); -webkit-tap-highlight-color:rgba(42,67,144,.14)}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }
body{margin:0; font-family:var(--f-testo); color:var(--ink); background:var(--carta);
  font-size:1.06rem; line-height:1.62; -webkit-text-size-adjust:100%;}
h1,h2,h3{font-family:var(--f-titoli); font-weight:600; line-height:1.12; letter-spacing:.2px; margin:0 0 .6em; text-wrap:balance;}
h1{font-size:clamp(2.1rem, 5.2vw, 3.6rem)}
/* Segnavia: tre tappe e la linea, sotto ogni titolo di sezione — la firma del sito */
main section h2::after{content:''; display:block; width:86px; height:12px; margin-top:.5em;
  background:
    radial-gradient(circle at 6px 6px, var(--giallo) 3.1px, transparent 3.8px),
    radial-gradient(circle at 43px 6px, var(--giallo) 3.1px, transparent 3.8px),
    radial-gradient(circle at 80px 6px, var(--giallo) 3.1px, transparent 3.8px),
    radial-gradient(circle at 6px 6px, var(--orn) 5.6px, transparent 6.3px),
    radial-gradient(circle at 43px 6px, var(--orn) 5.6px, transparent 6.3px),
    radial-gradient(circle at 80px 6px, var(--orn) 5.6px, transparent 6.3px),
    linear-gradient(to bottom, transparent 5px, var(--orn) 5px 7px, transparent 7px);}
main section{--orn:var(--navy)}
main section.scura{--orn:#F2EDE2}
.sez-cta h2::after{margin-inline:auto}
h2{font-size:clamp(1.65rem, 3.6vw, 2.5rem)}
h3{font-size:clamp(1.15rem, 2.2vw, 1.45rem)}
p{margin:0 0 1em}
a{color:var(--blu)}
.scura a:not(.btn){color:#CFDBF6}
b,strong{font-weight:700}
img,svg{max-width:100%; height:auto}
:focus-visible{outline:3px solid var(--blu); outline-offset:2px; border-radius:4px}
.scura :focus-visible{outline-color:var(--giallo)}
[id]{scroll-margin-top:calc(var(--hh) + 2px)}
.cont{max-width:72rem; margin-inline:auto; padding-inline:clamp(1.1rem, 4vw, 2.4rem)}

.salta{position:absolute; left:0; top:0; width:26px; height:26px; opacity:0; font-size:0; overflow:hidden; background:var(--navy); color:#fff; z-index:200}
.salta:focus{position:fixed; width:auto; height:auto; opacity:1; font-size:1rem; overflow:visible; padding:.8em 1.2em; border-radius:0 0 var(--tondino) 0}

/* ── Testata ── */
.testata{position:sticky; top:0; z-index:90; height:var(--hh); background:var(--carta);
  border-bottom:1px solid var(--riga); display:flex; align-items:stretch;}
.testata-int{display:flex; align-items:center; gap:1rem; width:100%; max-width:78rem; margin-inline:auto; padding-inline:clamp(.9rem,3vw,2rem)}
.marchio{display:flex; align-items:center; gap:.6rem; text-decoration:none; color:var(--navy);
  font-family:var(--f-titoli); font-weight:600; font-size:1.14rem; letter-spacing:.4px; min-height:44px; white-space:nowrap;}
.marchio .m-punto{width:14px;height:14px;border-radius:50%;background:var(--giallo);border:3px solid var(--navy);flex:none}
.marchio img{height:34px;width:auto;display:block}
.menu-pc{display:flex; gap:.2rem; margin-left:auto; align-items:center}
.menu-pc a{color:var(--ink); text-decoration:none; font-weight:700; font-size:.94rem; padding:.65em .7em; border-radius:10px; min-height:24px}
.menu-pc a:hover{background:var(--carta2); color:var(--blu)}
.menu-pc a[aria-current="page"]{color:var(--blu); box-shadow:inset 0 -3px 0 var(--giallo)}
.tel-testata{display:flex; align-items:center; gap:.45rem; margin-left:.6rem; color:var(--navy); text-decoration:none; font-weight:700; font-size:.98rem; padding:.55em .8em; border:2px solid var(--navy); border-radius:999px; min-width:172px; justify-content:center;}
.tel-testata:hover{background:var(--navy); color:#fff}
.lingue{display:flex; gap:.15rem; margin-left:.5rem}
.lingue a{padding:.55em .5em; font-size:.85rem; font-weight:700; color:var(--muted); text-decoration:none; border-radius:8px; min-height:24px}
.lingue a:hover{color:var(--blu); background:var(--carta2)}
.lingue a[aria-current="true"]{color:var(--navy); box-shadow:inset 0 -3px 0 var(--giallo)}
.panino-btn{display:none}
@media (max-width:1023px){
  .menu-pc,.tel-testata,.lingue{display:none}
  .panino-btn{display:flex; align-items:center; gap:.5rem; margin-left:auto; background:none; border:2px solid var(--navy); border-radius:999px; color:var(--navy); font:inherit; font-weight:700; padding:.5em 1em; min-height:44px; min-width:44px; cursor:pointer}
  .panino-btn .p-linee{display:inline-block; width:18px}
  .panino-btn .p-linee span{display:block; height:2.5px; background:var(--navy); border-radius:2px; margin:3.5px 0; transition:transform .2s, opacity .2s}
  html.js body.panino-aperto .panino-btn .p-linee span:nth-child(1){transform:translateY(6px) rotate(45deg)}
  html.js body.panino-aperto .panino-btn .p-linee span:nth-child(2){opacity:0}
  html.js body.panino-aperto .panino-btn .p-linee span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
}

/* ── Pannello del panino ── */
.pannello{position:fixed; inset:0; top:var(--hh); background:var(--carta); z-index:80; overflow-y:auto; padding:1.2rem 1.2rem 7rem; display:none}
html.js body.panino-aperto .pannello{display:block}
html:not(.js) .pannello{display:none}
.pannello h2{font-size:.82rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); font-family:var(--f-testo); font-weight:700; margin:1.4rem 0 .4rem}
.pannello ul{list-style:none; margin:0; padding:0}
.pannello a{display:flex; align-items:center; gap:.7rem; min-height:48px; padding:.4em .4em; text-decoration:none; color:var(--ink); font-weight:700; font-size:1.06rem; border-radius:12px}
.pannello a:hover{background:var(--carta2)}
.pannello .p-sez a::before{content:''; width:10px; height:10px; border-radius:50%; background:var(--giallo); border:2.5px solid var(--navy); flex:none}
.pannello a[aria-current]{background:var(--carta2); color:var(--blu)}
.pannello .p-lingue{display:flex; gap:.5rem; margin-top:.4rem}
.pannello .p-lingue a{border:2px solid var(--riga); justify-content:center; flex:1}
.pannello .p-tel{display:grid; grid-template-columns:1fr; gap:.7rem; margin-top:1.4rem}
.pannello .p-tel a.btn{color:#fff}  /* .pannello a (0,1,1) batteva .btn-blu (0,1,0): numero navy su blu */
.pannello .p-tel .btn{justify-content:flex-start; min-height:62px; padding:.6em 1.2em}
.p-tel-e small{display:block; font-size:.84rem; font-weight:700; opacity:.92; letter-spacing:.07em; text-transform:uppercase}
.p-tel-e b{font-size:1.3rem; letter-spacing:.4px; font-variant-numeric:tabular-nums; line-height:1.25; display:block}
body.panino-aperto{overflow:hidden}

/* ── Sezioni: ognuna il suo spazio ── */
section{border-top:1px solid var(--riga); border-bottom:0; padding-block:var(--stacco);
  background:var(--carta); min-height:100vh; min-height:calc(100svh - var(--hh));
  display:grid; align-content:center;}
section:nth-of-type(even):not(.scura){background:var(--carta2)}
.scura{background:var(--navy); color:#F5F1E8; border-top-color:var(--riga-scura)}
.scura h2,.scura h3{color:#fff}
.scura .fonte{color:#B9C6E6}
.hero{border-top:0}
.occhiello{font-family:var(--f-testo); font-weight:700; letter-spacing:.14em; text-transform:uppercase; font-size:.82rem; color:var(--blu); margin-bottom:.9em}
.scura .occhiello,.fascia .occhiello{color:var(--giallo)}
.sez-sub{max-width:46em; color:var(--muted); font-size:1.1rem}
.scura .sez-sub{color:#D9E1F4}
.fonte{font-size:.85rem; color:var(--muted); margin-top:1.1em; max-width:46em}
.fonte a{color:inherit}
/* bersagli ≥24px senza toccare l'impaginazione: il padding verticale su un
   elemento inline allarga il rettangolo sensibile ma non sposta le righe */
.fonte a,.orari-nota a{padding-block:.45em}
.sez-doppia{display:grid; gap:clamp(1.6rem,4vw,3.6rem); align-items:start}
@media (min-width:900px){ .sez-doppia{grid-template-columns:1.1fr .9fr} }
.sez-cta{text-align:center; justify-items:center; display:grid}
.sez-cta .cta-riga{justify-content:center}

/* ── Bottoni ── */
.btn{display:inline-flex; align-items:center; gap:.55rem; min-height:48px; padding:.7em 1.35em;
  border-radius:999px; font-weight:700; font-size:1rem; text-decoration:none; border:2px solid transparent; transition:transform .15s, box-shadow .15s;}
html.js .btn:hover{transform:translateY(-2px); box-shadow:0 6px 18px rgba(29,44,85,.18)}
.btn-blu{background:var(--blu); color:#fff}
.btn-verde{background:var(--verde); color:#fff}
.btn-carta{background:var(--carta); color:var(--navy); border-color:var(--carta)}
.cta-riga{display:flex; gap:.8rem; flex-wrap:wrap; margin:1.4em 0 0}

/* ── Hero ── */
.hero-int{display:grid; gap:2rem; align-items:center}
@media (min-width:980px){ .hero-int{grid-template-columns:1.15fr .85fr} }
/* Evidenziato multiriga: sottolineatura dipinta col gradiente, animabile e che va a capo */
.hero h1 .evid{color:var(--blu); background-image:linear-gradient(var(--giallo),var(--giallo));
  background-repeat:no-repeat; background-position:0 .92em; background-size:100% .16em;
  -webkit-box-decoration-break:clone; box-decoration-break:clone;}
html.js .hero h1 .evid{background-size:0% .16em; animation:evid .7s .9s cubic-bezier(.2,.7,.2,1) forwards}
@keyframes evid{to{background-size:100% .16em}}
body.fermo .hero h1 .evid{background-size:100% .16em; animation:none}
.hero-sub{font-size:1.14rem; color:var(--muted); max-width:38em}
.hero-voto{margin-top:1.6em; font-size:1.02rem; min-height:1.7em; color:var(--muted)}
.hero-voto b{color:var(--ink)}
.stelle{color:var(--giallo-g); letter-spacing:.12em}
.scura .stelle{color:var(--giallo)}
.hero-linea{justify-self:center; width:340px; position:relative}
.rotta-viaggio{display:none}
@media (min-width:980px){
  html.js .rotta-viaggio{display:block; position:absolute; left:0; top:0; width:15px; height:15px;
    margin:-7.5px 0 0 -7.5px; border-radius:50%; background:var(--giallo); border:3.5px solid var(--navy);
    offset-path:path('M40 400 C 40 320, 150 330, 170 270 S 90 190, 130 130 S 300 120, 300 40');
    offset-rotate:0deg; opacity:0; animation:viaggio 5.6s 2.9s cubic-bezier(.55,.08,.45,.92) forwards;}
}
@keyframes viaggio{0%{opacity:0; offset-distance:0%} 6%{opacity:1} 94%{opacity:1} 100%{opacity:0; offset-distance:100%}}
body.fermo .rotta-viaggio{animation:none; opacity:0}
@media (max-width:979px){ .hero-linea{display:none} }
.rotta{display:block; width:100%}
.rotta-filo{stroke:var(--blu); stroke-width:6; stroke-linecap:round; stroke-dasharray:1; stroke-dashoffset:0}
html.js .rotta-filo{stroke-dashoffset:1; animation:fila 2.1s .35s cubic-bezier(.45,0,.2,1) forwards}
@keyframes fila{to{stroke-dashoffset:0}}
.rotta-tappe circle{fill:var(--giallo); stroke:var(--navy); stroke-width:4}
.rotta-etich text{font-family:var(--f-titoli); font-weight:600; font-size:17px; fill:var(--navy)}
html.js .rotta-tappe circle,html.js .rotta-etich text{opacity:0; animation:appari .5s forwards}
html.js .rotta-tappe circle:nth-child(1),html.js .rotta-etich text:nth-child(1){animation-delay:.55s}
html.js .rotta-tappe circle:nth-child(2),html.js .rotta-etich text:nth-child(2){animation-delay:1.15s}
html.js .rotta-tappe circle:nth-child(3),html.js .rotta-etich text:nth-child(3){animation-delay:1.7s}
html.js .rotta-tappe circle:nth-child(4),html.js .rotta-etich text:nth-child(4){animation-delay:2.35s}
.rotta-tappe circle{transform-box:fill-box; transform-origin:center}
html.js .rotta-tappe circle:nth-child(4){animation:appari .5s 2.35s forwards, arrivo .7s 8.3s}
@keyframes arrivo{50%{transform:scale(1.45)}}
@keyframes appari{to{opacity:1}}

/* ── Mini-rotta della hero sul telefono: la firma del sito anche dove l'svg grande non c'è ── */
.rotta-mini{display:none}
@media (max-width:979px){
  .rotta-mini{display:block; width:min(100%, 340px); margin:.2rem 0 .3rem}
  .mini-filo{stroke:var(--blu); stroke-width:5; stroke-linecap:round; stroke-dasharray:1; stroke-dashoffset:0}
  html.js .mini-filo{stroke-dashoffset:1; animation:fila 1.7s .4s cubic-bezier(.45,0,.2,1) forwards}
  .mini-tappe circle{fill:var(--giallo); stroke:var(--navy); stroke-width:3.5}
  .mini-viaggio{fill:var(--giallo); stroke:var(--navy); stroke-width:3}
  .mini-etich text{font-family:var(--f-titoli); font-weight:600; font-size:15px; fill:var(--navy)}
  html.js .mini-tappe circle,html.js .mini-etich text{opacity:0; animation:appari .45s forwards}
  html.js .mini-tappe circle:nth-child(1),html.js .mini-etich text:nth-child(1){animation-delay:.5s}
  html.js .mini-tappe circle:nth-child(2),html.js .mini-etich text:nth-child(2){animation-delay:1s}
  html.js .mini-tappe circle:nth-child(3),html.js .mini-etich text:nth-child(3){animation-delay:1.5s}
  html.js .mini-tappe circle:nth-child(4),html.js .mini-etich text:nth-child(4){animation-delay:2s}
}
body.fermo .mini-filo{animation:none; stroke-dashoffset:0}
body.fermo .mini-tappe circle,body.fermo .mini-etich text{opacity:1; animation:none}

/* ── Fascia (prima sezione delle pagine interne) ── */
.fascia{background:var(--navy); color:#F5F1E8; border-top:0}
.fascia h1{color:#fff}
.fascia-sub{font-size:1.14rem; color:#D9E1F4; max-width:42em}
.fascia .btn-blu{background:var(--giallo); color:var(--navy)}

/* ── Situazioni ── */
.situazioni{margin-top:1.8rem}
.sit-chips{display:grid; gap:.7rem; grid-template-columns:1fr}
@media (min-width:560px){ .sit-chips{grid-template-columns:repeat(2,1fr)} .sit-chips .sit-chip:last-child{grid-column:1 / -1} }
@media (min-width:1080px){ .sit-chips{grid-template-columns:repeat(4,1fr)} .sit-chips .sit-chip:last-child{grid-column:auto} }
.sit-chip{display:flex; align-items:center; gap:.7rem; min-height:56px; padding:.7em 1em;
  background:#fff; border:2px solid var(--riga); border-radius:var(--tondino);
  font-weight:700; color:var(--ink); text-decoration:none; font-size:.98rem; line-height:1.25;}
.sit-chip:hover{border-color:var(--blu); color:var(--blu)}
.sit-punto{width:12px; height:12px; border-radius:50%; background:var(--giallo); border:3px solid var(--navy); flex:none; transition:transform .2s}
.sit-chip:hover .sit-punto{transform:scale(1.25)}
html.js .sit-chip[aria-expanded="true"]{background:var(--navy); color:#fff; border-color:var(--navy)}
html.js .sit-chip[aria-expanded="true"] .sit-punto{background:#37B26C; border-color:var(--carta)}
html.js .sit-chip:hover .sit-punto{animation:lampeggia .8s steps(1,end) 2}
@keyframes lampeggia{0%,100%{background:var(--giallo)} 50%{background:transparent}}
.sit-pann{margin-top:1rem}
html.js .sit-pann{display:grid; grid-template-rows:0fr; overflow:clip; margin-top:0; transition:grid-template-rows .45s cubic-bezier(.2,.7,.2,1), margin-top .45s}
html.js .sit-pann.aperto{grid-template-rows:1fr; margin-top:1rem}
html.js .sit-pann > .sit-int{overflow:hidden; min-height:0}
html.js .sit-pann:not(.aperto){visibility:hidden}
.sit-int{background:#fff; border:2px solid var(--riga); border-radius:var(--tondo); padding:clamp(1.2rem,3vw,2.2rem)}
.sit-intro{max-width:46em; color:var(--muted)}
.sit-docs{background:var(--carta2); border-radius:var(--tondino); padding:.9em 1.1em; max-width:46em}
html:not(.js) .sit-pann + .sit-pann{margin-top:1.4rem}

/* ── Percorso (linea che si disegna) ── */
.percorso{position:relative; padding-left:2.1rem; margin:1.6rem 0 0; min-height:12rem}
.filo-svg{position:absolute; left:10px; top:8px; bottom:8px; width:6px; height:calc(100% - 16px)}
.filo{stroke:var(--blu); stroke-width:6; stroke-linecap:round; stroke-dasharray:1; stroke-dashoffset:0}
.scura .filo{stroke:var(--giallo)}
html.js .percorso .filo{stroke-dashoffset:1}
html.js .percorso.vivo .filo{stroke-dashoffset:0; transition:stroke-dashoffset 1.6s cubic-bezier(.45,0,.2,1)}
.tappe{list-style:none; margin:0; padding:0; counter-reset:tappa}
.tappe li{position:relative; padding:0 0 1.15em; max-width:42em}
.tappa-punto{position:absolute; left:-2.1rem; top:.28em; width:14px; height:14px; border-radius:50%;
  background:var(--giallo); border:3.5px solid var(--navy); transform:translateX(-1px)}
.scura .tappa-punto{border-color:var(--carta)}
.tappe li:last-child .tappa-punto{width:22px; height:22px; background:var(--verde); transform:translateX(-5px); top:.14em; display:grid; place-items:center}
.tappe li:last-child .tappa-punto::after{content:'\2713'; color:#fff; font-size:11px; font-weight:700; line-height:1}
html.js .percorso .tappe li{opacity:0; transform:translateY(10px)}
html.js .percorso.vivo .tappe li{opacity:1; transform:none; transition:opacity .5s, transform .5s; transition-delay:calc(.25s + var(--i) * .22s)}
html:not(.js) .percorso .tappe li,body.fermo .percorso .tappe li{opacity:1; transform:none}

/* ── Card servizi ── */
.srv-griglia{display:grid; gap:1rem; margin-top:1.8rem; grid-template-columns:1fr}
@media (min-width:700px){ .srv-griglia{grid-template-columns:repeat(2,1fr)} }
.srv-card{display:grid; grid-template-columns:auto 1fr; grid-template-rows:auto auto; gap:.4rem 1.1rem;
  background:#fff; border:2px solid var(--riga); border-radius:var(--tondo); padding:1.3rem 1.4rem; text-decoration:none; color:var(--ink); transition:border-color .2s, transform .2s;}
html.js .srv-card:hover{border-color:var(--blu); transform:translateY(-3px)}
.srv-ico{grid-row:1 / 3; width:58px; height:58px; display:grid; place-items:center; background:var(--carta2); border-radius:16px}
.srv-testo b{font-family:var(--f-titoli); font-weight:600; font-size:1.22rem; color:var(--navy); display:block}
.srv-testo > span{color:var(--muted); font-size:.98rem; line-height:1.5; display:block; margin-top:.2em}
.srv-vai{grid-column:2; color:var(--blu); font-weight:700; font-size:.95rem}
.srv-minori{display:flex; flex-wrap:wrap; gap:.55rem; margin-top:1.5rem}
.srv-minori a{display:inline-flex; align-items:center; min-height:44px; padding:.35em 1em; border:2px solid var(--riga); border-radius:999px; text-decoration:none; color:var(--muted); font-weight:700; font-size:.9rem}
.srv-minori a:hover{color:var(--blu); border-color:var(--blu)}

/* Icone: micro-animazioni geometriche (1-2s, una volta, mai decorative in loop) */
.ico{width:38px; height:38px; fill:var(--navy); stroke:var(--navy)}
.ico [class^="sc-"],.ico .med-anello,.ico .med-croce,.ico .spunta-segno,.ico .strada-riga,.ico .luc-arco{fill:none}
.ico .strada-bordo{stroke:var(--navy)}
.ico .strada-riga{stroke:var(--giallo-g)}
.timbro-segno{fill:var(--giallo-g)}
html.js .srv-card:hover .timbro-corpo, html.js .srv-card.vivo .timbro-corpo{animation:timbra .9s cubic-bezier(.5,0,.5,1) 1}
@keyframes timbra{0%,100%{transform:translateY(0)}35%{transform:translateY(-7px)}55%{transform:translateY(3px)}70%{transform:translateY(0)}}
html.js .srv-card:hover .sc-a, html.js .srv-card.vivo .sc-a{animation:scivolaA 1s ease 1}
html.js .srv-card:hover .sc-b, html.js .srv-card.vivo .sc-b{animation:scivolaB 1s ease 1}
@keyframes scivolaA{0%{transform:translateX(0)}45%{transform:translateX(5px)}100%{transform:translateX(0)}}
@keyframes scivolaB{0%{transform:translateX(0)}45%{transform:translateX(-5px)}100%{transform:translateX(0)}}
html.js .srv-card:hover .pt, html.js .srv-card.vivo .pt{animation:ricomponi 1.1s cubic-bezier(.3,.7,.3,1) 1}
.ico-punti .p1{--dx:-4px; --dy:-16px} .ico-punti .p2{--dx:6px; --dy:-26px} .ico-punti .p3{--dx:-6px; --dy:-22px} .ico-punti .p4{--dx:4px; --dy:-13px}
@keyframes ricomponi{0%{transform:translate(var(--dx),var(--dy)); opacity:.35}60%{opacity:1}100%{transform:translate(0,0)}}
html.js .srv-card:hover .med-croce, html.js .srv-card.vivo .med-croce{animation:pulsa 1s ease 1}
@keyframes pulsa{0%,100%{transform:scale(1)}40%{transform:scale(1.14)}}
.ico .med-croce,.ico .timbro-corpo,.ico .pt{transform-origin:center; transform-box:fill-box}
.spunta-segno{stroke-dasharray:1; stroke-dashoffset:0}
html.js .srv-card:hover .spunta-segno, html.js .srv-card.vivo .spunta-segno{stroke-dashoffset:1; animation:spunta .8s .1s ease forwards}
@keyframes spunta{to{stroke-dashoffset:0}}

/* ── Riquadri ── */
.riq-evid{background:#fff; border:2px solid var(--riga); border-radius:var(--tondo); padding:clamp(1.2rem,3vw,2rem)}
.scura .riq-evid{background:var(--navy2); border-color:var(--riga-scura)}
.med-riq{background:var(--navy2); border:2px solid var(--riga-scura); border-radius:var(--tondo); padding:clamp(1.2rem,3vw,2rem)}
.med-riq h3{color:var(--giallo)}
.lista-punti{list-style:none; margin:0 0 1em; padding:0}
.lista-punti li{position:relative; padding:.3em 0 .3em 1.7rem; min-height:24px}
.lista-punti li::before{content:''; position:absolute; left:0; top:.62em; width:11px; height:11px; border-radius:50%; background:var(--giallo); border:3px solid var(--navy)}
.scura .lista-punti li::before,.med-riq .lista-punti li::before{border-color:var(--carta)}

/* ── Categorie ── */
.cat-griglia{display:grid; gap:1rem; margin-top:1.6rem; grid-template-columns:1fr}
@media (min-width:640px){ .cat-griglia{grid-template-columns:repeat(2,1fr)} }
@media (min-width:1024px){ .cat-griglia{grid-template-columns:repeat(3,1fr)} }
.scad-griglia{max-width:56rem}
@media (min-width:1024px){ .scad-griglia{grid-template-columns:repeat(4,1fr)} }
.cat{background:var(--navy2); border:2px solid var(--riga-scura); border-radius:var(--tondo); padding:1.2rem 1.3rem}
.cat > b{font-family:var(--f-titoli); font-weight:600; font-size:1.7rem; color:var(--giallo); display:block; line-height:1.1}
.cat > span{display:block; font-weight:700; color:#fff; margin-top:.15em}
.cat p{color:#D9E1F4; font-size:.95rem; margin:.5em 0 0}
.cat-pro{grid-column:1 / -1; }
@media (min-width:1024px){ .cat-pro{grid-column:auto} }

/* ── Recensioni ── */
.rec-fila{display:grid; gap:1.1rem; margin-top:1.8rem; grid-template-columns:1fr}
@media (min-width:820px){ .rec-fila{grid-template-columns:repeat(2,1fr)} .rec-fila.rec-tre{grid-template-columns:repeat(3,1fr)} }
.rec{margin:0; background:#fff; color:var(--ink); border:2px solid var(--riga); border-radius:var(--tondo); padding:1.3rem 1.4rem; display:grid; align-content:space-between; gap:.8rem}
.rec blockquote{margin:0; font-style:italic}
.rec figcaption{color:var(--muted); font-size:.88rem; font-weight:700}
.voto-grande{font-size:1.1rem; margin:1.2em 0 0; min-height:5.2rem}
.voto-grande > b{font-family:var(--f-titoli); font-weight:600; font-size:clamp(3.2rem,7vw,4.6rem); color:var(--giallo); line-height:1; vertical-align:-.08em}
.voto-su{font-size:1.3rem; font-weight:700}
.voto-nota{color:#D9E1F4; display:inline-block; margin-top:.5em}

/* ── Dove / orari / trasporti ── */
.orari-riq{background:#fff; border:2px solid var(--riga); border-radius:var(--tondo); padding:clamp(1.2rem,3vw,2rem)}
.orari{border-collapse:collapse; width:100%}
.orari th,.orari td{text-align:left; padding:.55em .4em; border-bottom:1px solid var(--riga); font-size:1rem; vertical-align:top}
.orari th{font-weight:700; padding-right:1em; white-space:nowrap}
.orari tr:last-child th,.orari tr:last-child td{border-bottom:0}
.orari-nota{margin:.9em 0 0; font-size:.95rem; color:var(--muted)}
.dove-contatti{display:flex; gap:.8rem; flex-wrap:wrap; margin-top:1.4em}
.mappa-linee{width:100%; max-width:34rem; margin-top:1rem}
.linea-m3{stroke:var(--giallo-g)}
.linea-tram{stroke:var(--blu)}
.fermate circle{fill:var(--carta); stroke:var(--navy); stroke-width:4}
.etich-m3,.etich-tram{font-family:var(--f-testo); font-weight:700; font-size:15px; fill:var(--ink)}
.sigla-m3,.sigla-tram{font-family:var(--f-titoli); font-weight:600; font-size:15px; fill:var(--ink)}
.scura .etich-m3,.scura .etich-tram,.scura .sigla-m3,.scura .sigla-tram{fill:#F5F1E8}

/* ── Colonnina laterale (≥1280px) ── */
.colonnina{display:none}
@media (min-width:1280px){
  html.js .colonnina{display:flex; flex-direction:column; gap:14px; position:fixed; right:16px; top:50%; transform:translateY(-50%); z-index:60; opacity:0; pointer-events:none; transition:opacity .3s}
  html.js body.oltre-hero .colonnina{opacity:1; pointer-events:auto}
  .colonnina a{position:relative; width:26px; height:26px; display:grid; place-items:center}
  .colonnina a::after{content:''; width:11px; height:11px; border-radius:50%; background:transparent; border:2.5px solid var(--navy); transition:background .2s, transform .2s}
  .colonnina.chiara a::after{border-color:#fff}
  .colonnina a[aria-current]::after{background:var(--giallo); transform:scale(1.3)}
  .colonnina a .col-etich{position:absolute; right:34px; top:50%; transform:translateY(-50%); background:var(--navy); color:#fff; font-size:.8rem; font-weight:700; padding:.3em .7em; border-radius:8px; white-space:nowrap; opacity:0; pointer-events:none; transition:opacity .15s}
  .colonnina a:hover .col-etich,.colonnina a:focus-visible .col-etich{opacity:1}
}

/* ── Barra chiamata: sotto i 1024px c'è quando serve — si ritira se una CTA di
   chiamata è già in schermo (richiesta di Marco, 04/08). Senza JS resta sempre visibile. */
.barra{position:fixed; left:0; right:0; bottom:0; z-index:70; background:var(--navy); border-top:2px solid var(--giallo);
  display:none; grid-template-columns:1fr 1fr; gap:0; padding-bottom:env(safe-area-inset-bottom);
  transition:transform .2s ease;}
@media (max-width:1023px){
  .barra{display:grid}
  html.js body.senza-barra .barra{transform:translateY(105%)}
}
.barra a{display:flex; align-items:center; justify-content:center; gap:.5rem; min-height:58px; color:#fff; text-decoration:none; font-weight:700; font-size:1.02rem}
.barra a + a{border-left:1px solid var(--riga-scura)}
.barra svg{flex:none}

/* ── Piè di pagina ── */
footer{background:var(--navy2); color:#D9E1F4; padding:calc(var(--stacco) * .8) 0 calc(5.5rem + env(safe-area-inset-bottom)); border-top:2px solid var(--giallo)}
footer h2{font-size:1.05rem; color:#fff}
footer h3{font-size:.86rem; letter-spacing:.12em; text-transform:uppercase; color:#9FB0D6; font-family:var(--f-testo); font-weight:700}
.foot-griglia{display:grid; gap:2rem; grid-template-columns:1fr}
@media (min-width:760px){ .foot-griglia{grid-template-columns:repeat(3,1fr)} }
footer ul{list-style:none; margin:0; padding:0}
footer li a{display:inline-flex; align-items:center; min-height:32px; color:#D9E1F4; text-decoration:none; font-size:.96rem; padding:.15em 0}
footer li a:hover{color:var(--giallo)}
.foot-nap{margin-top:2.4rem; padding-top:1.4rem; border-top:1px solid var(--riga-scura); font-size:.92rem; color:#9FB0D6}
.foot-nap a{color:#D9E1F4}

/* ── Contatore ── */
[data-conta],[data-conta-int]{font-variant-numeric:tabular-nums}

/* ── Cambio pagina: dissolvenza breve ── */
html.js main{animation:pagina .3s ease}
@keyframes pagina{from{opacity:.25}to{opacity:1}}

/* ── Rete di sicurezza e stati fermi ── */
body.fermo .rotta-filo,body.fermo .hero h1 .evid::after{animation:none; stroke-dashoffset:0}
body.fermo .rotta-tappe circle,body.fermo .rotta-etich text{opacity:1; animation:none}
body.fermo .percorso .filo{stroke-dashoffset:0 !important; transition:none}

@media (prefers-reduced-motion:reduce){
  html.js *,html.js *::before,html.js *::after{animation:none !important; transition:none !important}
  html.js .percorso .filo,html.js .rotta-filo,html.js .mini-filo{stroke-dashoffset:0}
  html.js .mini-tappe circle,html.js .mini-etich text{opacity:1}
  html.js .percorso .tappe li{opacity:1; transform:none}
  html.js .rotta-tappe circle,html.js .rotta-etich text{opacity:1}
  html.js .hero h1 .evid{background-size:100% .16em}
}

@media print{ .testata,.barra,.colonnina,.pannello{display:none !important} section{min-height:0} }

/* Pavimento di leggibilità sul telefono: niente testo informativo sotto i ~15px. IN FONDO AL FOGLIO: a pari specificità vince l'ultima regola.
   Misurato il 04/08: 38 tipi di testo fra 13,1 e 14,4px — corretta la classe, non il sintomo. */
@media (max-width:1023px){
  .fonte{font-size:.95rem}
  .occhiello{font-size:.88rem; letter-spacing:.11em}
  footer h3{font-size:.92rem}
  .rec figcaption{font-size:.95rem}
  .srv-minori a{font-size:.95rem}
  .orari-nota{font-size:1rem}
  .pannello h2{font-size:.88rem}
}

/* Hero sul telefono: TUTTO dentro la prima schermata (misurato: a 360x640 la riga CTA
   sforava di 32-70px e il voto di 111-149px). In fondo al foglio: vince l'ultima regola. */
@media (max-width:699px){
  .hero{padding-block:clamp(1.3rem, 3.5vh, 2.6rem)}
  .hero .occhiello{margin-bottom:.55em}
  .hero h1{font-size:clamp(1.82rem, 7.6vw, 2.05rem)}
  .hero-sub{font-size:1.01rem; line-height:1.5; margin-bottom:.6em}
  .rotta-mini{width:min(100%, 292px); margin:0}
  .hero .cta-riga{margin-top:.8em; gap:.55rem}
  .hero .cta-riga .btn{min-height:44px; padding:.5em 1.1em; font-size:.95rem}
  .hero-voto{margin-top:.8em; font-size:.95rem; min-height:1.5em}
}
@media (max-width:699px) and (max-height:720px){
  .hero-sub{font-size:.97rem}
  .rotta-mini{width:min(100%, 258px)}
}