/* PLUMBING_V 1 — reset tecnico canonico (Toolkit/boilerplate/plumbing.css) */
[hidden] { display: none !important; }
img { max-width: 100%; height: auto; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}

/* ══════════ AUTOSCUOLA MECENATE — patenti e pratiche auto, Via Mecenate 1 all'angolo di Piazza Ovidio ══════════
   «In aula»: si entra dalla strada sotto la loro insegna (antracite, lettere magenta larghe e arrotondate: Goldman), si passa
   davanti alla vetrina coi cartellini bianchi a lettere verdi (Pragati Narrow), poi la pagina è la parete della loro aula: una
   tavola didattica per capitolo (cornice nera, striscia del titolo condensata, figure numerate con la legenda) sul foglio bianco a
   crocette. La firma è la tavola dei freni (_aum_firma.mjs). Gli orari sono pannelli arancioni come il 33/1203. Testo in Biryani. */
:root {
  --antracite: #29282C;
  --antracite-2: #1F1E22;
  --magenta: #EF4BB0;
  --magenta-chiaro: #F48ACB;
  --magenta-scuro: #A61F71;
  --rosso: #D8262F;
  --verde: #13864A;
  --pietra: #CFCFC9;
  --telaio: #34383B;
  --vetro: #222A29;
  --foglio: #F7F5EF;
  --compensato: #DCC69C;
  --adr: #F29B20;
  --blu-nodi: #1E2A47;
  --corda: #EDE6D3;
  --inchiostro: #19191C;
  --grigio: #55565C;
  --aperto: #2E8B4E;
  --f-insegna: 'Goldman', 'Arial Black', Arial, sans-serif;
  --f-cond: 'Pragati Narrow', 'Arial Narrow', Arial, sans-serif;
  --f-testo: 'Biryani', Arial, sans-serif;
  --gutter: 16px;
  --testata-h: 70px;
  --croci: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44'%3E%3Cpath d='M22 16v12M16 22h12' stroke='%23D2CAB8' stroke-width='1.6'/%3E%3C/svg%3E");
}
@media (min-width: 760px) { :root { --gutter: 24px; } }

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; color: var(--inchiostro); font: 400 1.02rem/1.68 var(--f-testo); font-variant-numeric: lining-nums; background: var(--foglio); }
a { color: var(--magenta-scuro); }
b, strong { font-weight: 800; }
.salta { position: absolute; left: 12px; top: -60px; z-index: 100; padding: 10px 16px; background: #fff; color: #111; text-decoration: none; }
.salta:focus { top: 10px; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
section[id] { scroll-margin-top: calc(var(--testata-h) + 14px); }
.intero { white-space: nowrap; }
:focus-visible { outline: 3px solid var(--magenta); outline-offset: 2px; }
.foglio :focus-visible, .facciata :focus-visible { outline-color: var(--inchiostro); }
/* finché i caratteri non arrivano il ripiego è più largo: una parola lunga va a capo invece di uscire (riserva-check, #233) */
h1, h2, h3 { overflow-wrap: anywhere; }

/* ── l'occhiello e i titoli grandi ── */
.occhio { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 12px; font: 700 1.2rem/1.2 var(--f-cond); letter-spacing: .1em; text-transform: uppercase; color: var(--magenta-scuro); }
.occhio::before { content: ''; flex: none; width: 12px; height: 12px; border-radius: 50%; background: var(--rosso); }
.occhio--chiaro { color: var(--magenta-chiaro); }
.titolone { max-width: 20em; margin: 0 0 18px; font: 700 clamp(2.1rem, 1.3rem + 3vw, 3.7rem)/1.04 var(--f-insegna); letter-spacing: .01em; text-transform: uppercase; color: var(--antracite); text-wrap: balance; }
.titolone--chiaro { color: #FFFFFF; }

/* ── la testata: l'insegna in piccolo ── */
.testata { position: sticky; top: 0; z-index: 50; background: var(--antracite); border-bottom: 3px solid var(--magenta); }
.testata__dentro { display: flex; align-items: center; gap: 10px; max-width: 1280px; margin: 0 auto; padding: 6px var(--gutter); min-height: 64px; }
.insegna { display: inline-flex; flex-direction: column; align-items: center; min-width: 0; text-decoration: none; line-height: 1; }
.insegna__sopra { font: 700 .74rem/1 var(--f-insegna); letter-spacing: .16em; text-transform: uppercase; color: var(--magenta); }
.insegna__nome { font: 700 1.5rem/1.05 var(--f-insegna); letter-spacing: .02em; text-transform: uppercase; color: var(--magenta); overflow-wrap: anywhere; }
.voci { display: none; }
.testata__azioni { margin-left: auto; display: flex; align-items: center; gap: 6px; flex: none; }
.lingue { display: flex; }
.lingue button { min-width: 34px; min-height: 40px; padding: 2px 5px 0; border: 2px solid #57565C; background: transparent; color: #FFFFFF; font: 700 1rem var(--f-cond); cursor: pointer; }
.lingue button + button { border-left: 0; }
.lingue button.is-on { background: #FFFFFF; color: var(--antracite); }
.chiama { display: none; align-items: center; min-height: 42px; padding: 3px 18px 0; background: var(--magenta); color: var(--inchiostro); font: 700 1.2rem var(--f-cond); letter-spacing: .08em; text-transform: uppercase; text-decoration: none; }
.chiama:hover { background: var(--magenta-chiaro); }
.burger { display: inline-flex; flex-direction: column; justify-content: center; gap: 5px; width: 44px; height: 44px; padding: 10px; border: 2px solid #57565C; background: transparent; cursor: pointer; }
.burger span { display: block; height: 2px; background: #FFFFFF; transition: transform .2s, opacity .2s; }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.menu-mobile { position: fixed; top: var(--testata-h); left: 0; right: 0; z-index: 49; max-height: calc(100vh - var(--testata-h)); overflow-y: auto; padding: 10px var(--gutter) 22px; background: var(--antracite); box-shadow: 0 12px 24px rgba(0, 0, 0, .35); }
.menu-mobile a { display: block; padding: 13px 2px 8px; border-bottom: 1px solid #3F3E44; color: #FFFFFF; font: 700 1.55rem/1.2 var(--f-cond); letter-spacing: .05em; text-transform: uppercase; text-decoration: none; }
.menu-mobile__tel { display: flex !important; justify-content: center; gap: 8px; margin-top: 14px; border: 0 !important; background: var(--magenta); color: var(--inchiostro) !important; padding: 13px 8px 10px !important; }

/* ── la strada: l'insegna e la facciata ── */
.strada { background: var(--antracite-2); color: #E9E7EE; padding: 26px var(--gutter) 54px; }
.cassonetto { max-width: 1240px; margin: 0 auto; padding: 22px 18px 18px; text-align: center; background: linear-gradient(180deg, #34333A 0%, #2A292F 100%); border: 5px solid #0F0F11; box-shadow: inset 0 0 0 2px #45444B, 0 18px 40px rgba(0, 0, 0, .45); }
.cassonetto__nome { margin: 0; line-height: 1; }
.cassonetto__sopra, .cassonetto__grande, .cassonetto__riga { color: var(--magenta); text-shadow: 0 0 .5em rgba(239, 75, 176, .35); }
.cassonetto__sopra { display: block; font: 700 clamp(1.25rem, .6rem + 3.2vw, 3.5rem)/1 var(--f-insegna); letter-spacing: .1em; text-transform: uppercase; }
/* «MECENATE» è largo circa 6,9 em: il corpo segue la larghezza utile del cassonetto, mai a capo dentro la parola */
.cassonetto__grande { display: block; margin-top: .06em; font: 700 clamp(1.9rem, 13.4vw - 12px, 9.4rem)/.98 var(--f-insegna); letter-spacing: .015em; text-transform: uppercase; overflow-wrap: anywhere; }
.cassonetto__riga { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 24px; max-width: 1060px; margin: .5em auto 0; font: 700 clamp(1rem, .6rem + 1.6vw, 2.1rem)/1.2 var(--f-insegna); letter-spacing: .05em; text-transform: uppercase; }
.cassonetto__tel { color: inherit; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .18em; }
.cassonetto__tel:hover { color: var(--magenta-chiaro); }
.strada__sotto { display: grid; grid-template-columns: minmax(0, 1fr); gap: 30px; max-width: 1240px; margin: 34px auto 0; }
.strada__frase { max-width: 32em; margin: 0 0 20px; font-size: 1.12rem; color: #F2F0F5; }
/* stato e voto su righe loro: lo stato scritto dal JS è più lungo di quello statico (firma-posto) */
.strada__riga { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.voto { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; margin: 0; }
.voto__n { font: 700 2.4rem/1 var(--f-insegna); color: var(--magenta); }
.stato { display: inline-flex; align-items: center; gap: 9px; margin: 0; font: 600 1.02rem/1.5 var(--f-testo); }
.stato::before { content: ''; width: 10px; height: 10px; border-radius: 50%; background: currentColor; opacity: .45; flex: none; }
.stato.is-aperto::before { opacity: 1; background: #3CC46E; box-shadow: 0 0 0 3px rgba(60, 196, 110, .25); }
.strada__azioni { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.strada .occhio { color: var(--magenta-chiaro); }
.bottone { display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: center; max-width: 100%; min-height: 52px; padding: 4px 24px 0; border: 3px solid var(--inchiostro); background: transparent; color: var(--inchiostro); font: 700 1.35rem/1 var(--f-cond); letter-spacing: .07em; text-transform: uppercase; text-align: center; text-decoration: none; cursor: pointer; transition: background .15s, color .15s; }
.bottone--pieno, .bottone--magenta { border-color: var(--magenta); background: var(--magenta); color: var(--inchiostro); }
.bottone--pieno:hover, .bottone--magenta:hover { background: var(--magenta-chiaro); border-color: var(--magenta-chiaro); }
.bottone--vuoto, .bottone--chiaro { border-color: #FFFFFF; color: #FFFFFF; }
.bottone--vuoto:hover, .bottone--chiaro:hover { background: #FFFFFF; color: var(--antracite); }
figure { margin: 0; }
figcaption { margin-top: 10px; font-size: 1rem; line-height: 1.5; color: var(--grigio); }
.strada figcaption, .sera figcaption { color: #C4C1CA; }
.foto { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; }
.foto img { display: block; width: 100%; height: auto; }
/* il riquadro bianco sottile delle foto (Specimens): corre nel passe-partout scuro, FUORI dalla foto, perché le scritte delle foto
   (l'insegna sopra la porta, il telefono del biglietto) arrivano fino ai bordi (correzioni-check, punto 3) */
.riquadro { position: relative; padding: 10px; background: #0F0F11; }
.riquadro::after { content: ''; position: absolute; inset: 4px; border: 2px solid rgba(255, 255, 255, .82); pointer-events: none; }

/* ── agenzia pratiche: la facciata e la vetrina ── */
.facciata { background: var(--pietra); padding: 60px var(--gutter) 64px; border-top: 10px solid #B9B9B2; }
.facciata__dentro { max-width: 1240px; margin: 0 auto; }
.targhetta { display: inline-block; margin: 0 0 14px; padding: 9px 14px 6px; background: var(--antracite); border: 3px solid #0F0F11; font: 700 1.05rem/1 var(--f-insegna); letter-spacing: .1em; text-transform: uppercase; color: var(--magenta); }
.facciata__intro { max-width: 42em; margin: 0 0 28px; font-size: 1.08rem; }
.vetrina { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; align-items: start; }
.cartellini { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; margin: 0; padding: 22px 18px; list-style: none; background: var(--vetro); border: 12px solid var(--telaio); box-shadow: inset 0 0 0 2px #4A4F53; }
.cartellino h3 { position: relative; margin: 0 0 6px; padding: 7px 12px 3px 34px; background: #FBFBF7; border: 2px solid #DCDCD3; font: 700 1.5rem/1.08 var(--f-cond); letter-spacing: .03em; text-transform: uppercase; color: var(--verde); }
.cartellino h3::before { content: ''; position: absolute; left: 12px; top: 50%; width: 11px; height: 11px; margin-top: -6px; border-radius: 50%; background: var(--rosso); }
.cartellino p { margin: 0; padding: 0 2px; color: #DCE4E1; font-size: 1rem; line-height: 1.55; }
/* le pratiche che non sono scritte sui cartellini: un foglio stampato accanto alla vetrina, non un cartellino (niente verde,
   niente pallino rosso) */
.sportello { padding: 20px 20px 6px; background: #FFFFFF; border: 3px solid var(--inchiostro); box-shadow: 6px 6px 0 rgba(25, 25, 28, .16); }
.sportello__titolo { margin: 0 0 8px; font: 700 1.2rem/1.2 var(--f-cond); letter-spacing: .1em; text-transform: uppercase; color: var(--magenta-scuro); }
.sportello__voci { margin: 0; padding: 0; list-style: none; }
.sportello__voci li { padding: 12px 0 14px; border-top: 2px dashed #A9A9A2; }
.sportello__voci h3 { margin: 0 0 4px; font: 700 1.5rem/1.08 var(--f-cond); letter-spacing: .03em; text-transform: uppercase; color: var(--inchiostro); }
.sportello__voci p { margin: 0; font-size: 1rem; line-height: 1.55; color: #3A3A40; }
.citazione { max-width: 46em; margin: 40px 0 0; padding: 0 0 0 22px; border-left: 6px solid var(--antracite); }
.citazione p { margin: 0; font: 800 clamp(1.35rem, 1.1rem + 1vw, 1.9rem)/1.35 var(--f-testo); color: var(--antracite); }
.citazione footer { margin-top: 8px; font: 700 1.15rem/1.3 var(--f-cond); letter-spacing: .06em; text-transform: uppercase; color: #3A3A40; }

/* ── il foglio a crocette e le tavole ── */
.foglio { padding: 64px var(--gutter); background-color: var(--foglio); background-image: var(--croci); }
.foglio--freni { padding-top: 10px; }
.tavola { max-width: 1240px; margin: 0 auto; background: #FFFFFF; border: 6px solid var(--inchiostro); box-shadow: 0 18px 36px rgba(25, 25, 28, .14); }
.tavola__testa { display: flex; align-items: stretch; border-bottom: 6px solid var(--inchiostro); }
.tavola__n { display: flex; align-items: center; flex: none; padding: 6px 14px 2px; background: var(--inchiostro); color: #FFFFFF; font: 700 1.2rem/1 var(--f-cond); letter-spacing: .08em; text-transform: uppercase; }
.tavola__titolo { min-width: 0; margin: 0; padding: 12px 18px 6px; font: 700 clamp(1.6rem, 1.1rem + 2.2vw, 2.8rem)/1.06 var(--f-cond); letter-spacing: .06em; text-transform: uppercase; color: var(--inchiostro); }
.tavola__corpo { padding: 24px 18px 28px; }
.tavola__intro { max-width: 46em; margin: 0 0 24px; font-size: 1.06rem; }
.tavola__nota { max-width: 48em; margin: 26px 0 0; color: var(--grigio); }

/* tav. 1 · l'aula coi numeri */
.aula { display: grid; grid-template-columns: minmax(0, 1fr); gap: 26px; align-items: start; }
.appunti { position: relative; }
.spillo { position: absolute; display: grid; place-items: center; width: 26px; height: 26px; margin: -13px 0 0 -13px; border: 2px solid #FFFFFF; border-radius: 50%; background: var(--inchiostro); color: #FFFFFF; font: 700 .95rem/1 var(--f-cond); padding-top: 2px; box-shadow: 0 2px 6px rgba(0, 0, 0, .4); pointer-events: none; }
.spillo--1 { left: 14.6%; top: 13%; }
.spillo--2 { left: 6%; top: 52%; }
.spillo--3 { left: 27.4%; top: 52%; }
.spillo--4 { left: 56.2%; top: 11.4%; }
.spillo--5 { left: 64.4%; top: 59%; }
.spillo--6 { left: 77.2%; top: 59.2%; }
.spillo--7 { left: 86%; top: 68.6%; }
/* lo spillo 8 al centro della tavola dei nodi (foto 1600×898: cornice x 1340–1600, y 372–572; correzioni-check, punto 4) */
.spillo--8 { left: 90.6%; top: 52%; }
.legenda { margin: 0; padding: 0; list-style: none; counter-reset: voce; }
.legenda li { position: relative; margin: 0 0 12px; padding: 1px 0 0 44px; counter-increment: voce; line-height: 1.55; }
.legenda li::before { content: counter(voce); position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 30px; height: 30px; padding-top: 2px; border-radius: 50%; background: var(--inchiostro); color: #FFFFFF; font: 700 1.1rem/1 var(--f-cond); }
.aula__sera { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; align-items: center; margin-top: 30px; padding-top: 26px; border-top: 3px solid var(--inchiostro); }
.aula__sera-testo { max-width: 30em; margin: 0; font-size: 1.06rem; }

/* tav. 2 · i freni (la firma) */
/* sul telefono: la frase, la tavola, poi la legenda; sul desktop la frase e la legenda a sinistra, la tavola a destra */
.freni { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "intro" "fig" "testo"; gap: 22px; align-items: center; }
.freni__intro { grid-area: intro; margin: 0; }
.freni__testo { grid-area: testo; }
.freni-fig { grid-area: fig; }
.freni__nota { max-width: 36em; margin: 18px 0 0; padding: 12px 14px 10px; background: var(--foglio); border-left: 6px solid var(--rosso); }
.freni-fig { margin: 0; -webkit-user-select: none; user-select: none; }
.freni-fig > svg { max-width: 760px; margin: 0 auto; }
.freni__didascalia { max-width: 36em; min-height: 3.2em; margin: 14px auto 0; font-size: 1rem; line-height: 1.55; text-align: center; color: var(--grigio); }
.freni__d { display: none; }
.freni-fig[data-modo="0"] .freni__d[data-m="0"], .freni-fig[data-modo="1"] .freni__d[data-m="1"] { display: inline; }
.freni__modi { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 10px; }
.freni__modi button { min-height: 48px; padding: 4px 20px 0; border: 3px solid var(--inchiostro); background: #FFFFFF; color: var(--inchiostro); font: 700 1.3rem/1.05 var(--f-cond); letter-spacing: .06em; text-transform: uppercase; cursor: pointer; }
.freni__modi button:hover { background: var(--foglio); }
.freni__modi button[aria-pressed="true"] { background: var(--inchiostro); color: #FFFFFF; }
/* senza JS il modo non cambia: i bottoni restano nascosti col loro posto (#240) */
.no-js .freni__modi { visibility: hidden; }

/* tav. 3 · le patenti, a caselle come i tabelloni dei segnali */
.caselle { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; margin: 0; padding: 0; list-style: none; border-top: 3px solid var(--inchiostro); border-left: 3px solid var(--inchiostro); }
.casella { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; padding: 14px 10px 14px; border-right: 3px solid var(--inchiostro); border-bottom: 3px solid var(--inchiostro); text-align: center; }
.casella:last-child { grid-column: 1 / -1; }
.casella__lettera { align-self: flex-start; font: 700 2.2rem/1 var(--f-insegna); color: var(--inchiostro); }
.casella__segno { display: block; width: 100%; max-width: 150px; height: auto; }
.casella h3 { margin: 0; font: 700 1.25rem/1.1 var(--f-cond); letter-spacing: .05em; text-transform: uppercase; }
.pg-pieno, .pg-gomma { fill: var(--inchiostro); }
.pg-vetro, .pg-cerchio { fill: #FFFFFF; }
.pg-ruota, .pg-telaio { fill: none; stroke: var(--inchiostro); stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; }

/* tav. 4 · gli allievi, sul blu della tavola dei nodi con la corda intorno */
.tavola--nodi { background: var(--blu-nodi); color: #E7EBF3; border: 12px solid var(--corda); border-image: repeating-linear-gradient(45deg, #EDE6D3 0 7px, #B8AD90 7px 11px) 12; }
.tavola--nodi .tavola__testa { border-bottom: 3px dashed rgba(237, 230, 211, .55); }
.tavola--nodi .tavola__n { background: var(--corda); color: var(--blu-nodi); }
.tavola--nodi .tavola__titolo { color: #FFFFFF; }
.voto--sezione { margin: 0 0 24px; }
.tavola--nodi .voto__n { color: var(--corda); }
/* le recensioni in colonne (sette, di lunghezze diverse: niente buchi in fondo alla griglia) */
.recensioni { margin: 0; padding: 0; list-style: none; column-gap: 34px; }
.recensione { margin: 0; padding: 18px 0 16px; border-top: 2px dashed rgba(237, 230, 211, .4); break-inside: avoid; }
.recensione__testo { margin: 0; font-size: 1.02rem; line-height: 1.62; overflow-wrap: anywhere; }
.recensione__chi { margin: 10px 0 0; font-size: 1rem; line-height: 1.4; color: #BCC5D8; }
.recensione__chi b { display: block; font: 700 1.25rem/1.15 var(--f-cond); letter-spacing: .06em; text-transform: uppercase; color: var(--corda); }
.recensioni__nota { max-width: 48em; margin: 22px 0 0; font-size: 1rem; color: #BCC5D8; }
.recensioni__nota a { color: #FFFFFF; }

/* ── la sera: orari sui pannelli arancioni e la strada ── */
.sera { background: var(--antracite-2); color: #E9E7EE; padding: 64px var(--gutter) 70px; }
.sera__dentro { max-width: 1240px; margin: 0 auto; }
.pannelli { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 12px; margin: 8px 0 18px; }
.giorno { display: grid; grid-template-columns: minmax(0, 1fr); align-items: start; gap: 5px; min-width: 0; }
.giorno__nome { min-width: 0; font: 700 1.25rem/1.1 var(--f-cond); letter-spacing: .06em; text-transform: uppercase; color: #D9D6DF; overflow-wrap: anywhere; }
.pannello { display: grid; grid-template-rows: auto auto; background: var(--adr); border: 5px solid #0E0E10; border-radius: 3px; color: #0E0E10; text-align: center; transition: box-shadow .3s; }
.pannello__su, .pannello__giu { display: block; padding: 6px 6px 1px; font: 700 1.6rem/1.15 var(--f-cond); letter-spacing: .02em; white-space: nowrap; }
.pannello__su { border-bottom: 5px solid #0E0E10; }
.pannello--chiuso { background: #8E877A; }
.giorno.is-today .giorno__nome { color: var(--adr); }
.giorno.is-today .pannello { background: #FFC24A; box-shadow: 0 0 0 3px var(--antracite-2), 0 0 28px 6px rgba(255, 186, 64, .5); }
.giorno.is-today .pannello--chiuso { background: #A69F92; box-shadow: none; }
.stato--orari { margin-top: 6px; }
.sera__nota { margin: 10px 0 0; color: #BDB9C4; }
.dove { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; align-items: start; margin-top: 40px; }
.indirizzo { margin: 0; }
.indirizzo div { display: grid; grid-template-columns: 8.4em minmax(0, 1fr); gap: 10px; padding: 9px 0 7px; border-bottom: 1px solid #3D3C42; }
.indirizzo dt { font: 700 1.2rem/1.45 var(--f-cond); letter-spacing: .06em; text-transform: uppercase; color: var(--magenta-chiaro); }
.indirizzo dd { margin: 0; overflow-wrap: anywhere; }
.indirizzo a, .sera a { color: #FFFFFF; }
.dove__biglietto { max-width: 480px; }
.dove__azioni { display: flex; flex-wrap: wrap; gap: 10px; margin: 26px 0 0; }
.cartina { margin-top: 34px; overflow: hidden; background: #FFFFFF; color: var(--inchiostro); border: 6px solid #0E0E10; }
.cartina a { color: var(--inchiostro); }
.cartina iframe { display: block; width: 100%; height: 380px; border: 0; }
/* la nota della mappa a 16 px: sotto i 15 px gli accenti piccoli si perdono (accenti-check, #306) */
.cartina .mappa-clic__nota { font-size: 1rem; }

/* ── le domande ── */
.domande-dentro { max-width: 900px; margin: 0 auto; }
.domande { border-top: 4px solid var(--inchiostro); }
.domanda { border-bottom: 2px solid var(--inchiostro); background: rgba(255, 255, 255, .7); }
.domanda summary { position: relative; padding: 15px 40px 9px 12px; font: 700 1.5rem/1.2 var(--f-cond); letter-spacing: .02em; color: var(--inchiostro); cursor: pointer; list-style: none; }
.domanda summary::-webkit-details-marker { display: none; }
.domanda summary::after { content: '+'; position: absolute; right: 12px; top: 12px; font: 400 1.6rem/1 Arial, sans-serif; color: var(--rosso); }
.domanda[open] summary::after { content: '−'; }
.domanda p { max-width: 42em; margin: 0; padding: 0 12px 16px; }

/* ── il piede: il segnale «Alt — scuola guida» e l'insegna ── */
.piede { background: var(--antracite); color: #CFCCD5; border-top: 3px solid var(--magenta); }
.piede__dentro { max-width: 900px; margin: 0 auto; padding: 48px var(--gutter) 100px; text-align: center; }
.piede__alt { display: block; width: 84px; height: 84px; margin: 0 auto 14px; }
.alt-t { font: 700 17px 'Pragati Narrow', 'Arial Narrow', sans-serif; fill: #19191C; letter-spacing: .5px; }
.alt-s { font: 700 11px 'Pragati Narrow', 'Arial Narrow', sans-serif; fill: #19191C; letter-spacing: .6px; }
.piede__insegna { display: inline-flex; flex-direction: column; align-items: center; max-width: 100%; margin: 0 0 20px; }
.piede__insegna .insegna__nome { font-size: 2.6rem; }
.piede__insegna .insegna__sopra { font-size: 1.05rem; }
.piede__dove, .piede__orario, .piede__srl { margin: 0 0 8px; overflow-wrap: anywhere; }
.piede a { color: #FFFFFF; }
.piede__cred { max-width: 54em; margin: 18px auto 10px; font-size: 1rem; }
.freccia { font-family: Arial, sans-serif; }

/* ── reveal (plumbing) ── */
.js .reveal { opacity: 0; }
.js .reveal.in-view { opacity: 1; }
html:not(.js) .reveal { opacity: 1; }
.reduced-motion .reveal { opacity: 1 !important; }

/* ── la barra e la lightbox ── */
.action-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); background: var(--antracite); box-shadow: 0 -3px 0 var(--magenta); transform: translateY(110%); transition: transform .25s; }
.action-bar.is-visible { transform: translateY(0); }
.action-bar a { display: flex; align-items: center; justify-content: center; min-width: 0; min-height: 54px; padding: 3px 4px 0; overflow-wrap: anywhere; text-align: center; color: #FFFFFF; font: 700 1.3rem var(--f-cond); letter-spacing: .07em; text-transform: uppercase; text-decoration: none; }
.action-bar a:first-child { background: var(--magenta); color: var(--inchiostro); }
#lightbox { position: fixed; inset: 0; z-index: 90; display: flex; align-items: center; justify-content: center; padding: 24px; background: rgba(14, 14, 16, .95); }
#lightbox[hidden] { display: none !important; }
#lightbox img { width: auto; max-width: min(1200px, 100%); max-height: 88vh; }
#lightboxClose { position: absolute; top: 14px; right: 16px; width: 48px; height: 48px; border: 1px solid rgba(255, 255, 255, .6); border-radius: 50%; background: transparent; color: #fff; font-size: 32px; line-height: 1; cursor: pointer; }

/* ── le larghezze ── */
@media (max-width: 379px) {
  .testata__dentro { gap: 6px; }
  .lingue button { min-width: 31px; }
  .bottone { padding: 4px 16px 0; }
  .indirizzo div { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .pannello__su, .pannello__giu { font-size: 1.4rem; }
  .insegna__nome { font-size: 1.3rem; }
}
/* sul telefono la tavola dei freni prende anche il margine della tavola di carta */
@media (max-width: 759px) {
  .freni-fig > svg { width: calc(100% + 16px); max-width: none; margin: 0 -8px; }
}
@media (min-width: 560px) {
  .chiama { display: inline-flex; }
  .spillo { width: 30px; height: 30px; margin: -15px 0 0 -15px; font-size: 1.1rem; }
  .cartellini { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 700px) {
  .caselle { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .casella:last-child { grid-column: auto / span 2; }
  .recensioni { columns: 2; }
  .pannelli { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px 14px; }
  .aula__sera { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 26px; }
}
@media (min-width: 760px) {
  .action-bar { display: none; }
  .piede__dentro { padding-bottom: 54px; }
  .tavola__corpo { padding: 28px 30px 32px; }
}
@media (min-width: 960px) {
  .strada { padding-top: 34px; }
  .strada__sotto { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: center; gap: 46px; }
  .vetrina { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 34px; }
  .dove { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: 46px; }
  .aula { grid-template-columns: minmax(0, 1.85fr) minmax(0, 1fr); gap: 30px; }
  .recensioni { columns: 3; }
  .caselle { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .casella:last-child { grid-column: auto; }
}
@media (min-width: 1060px) {
  .freni { grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr); grid-template-areas: "intro fig" "testo fig"; grid-template-rows: auto 1fr; gap: 20px 40px; align-items: start; }
  .freni-fig { align-self: center; }
  .pannelli { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 12px; }
  .pannello__su, .pannello__giu { font-size: 1.45rem; }
}
@media (min-width: 1100px) {
  .testata__dentro { gap: 16px; }
  .voci { display: flex; flex-wrap: wrap; gap: 4px 20px; margin-left: 26px; }
  .voci a { padding: 5px 1px 1px; color: #FFFFFF; font: 700 1.22rem var(--f-cond); letter-spacing: .07em; text-transform: uppercase; text-decoration: none; }
  .voci a:hover, .voci a[aria-current="true"] { color: var(--magenta); text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 7px; }
  .burger { display: none; }
}

/*FRENI*/
/* la tavola dei freni — generato da _aum_firma.mjs: non modificare a mano */
.freni__svg { display: block; width: 100%; height: auto; overflow: hidden; }
.fr-tavola { fill: #DCC69C; stroke: #A9884F; stroke-width: 5; }
.fr-venatura { fill: none; stroke: rgba(150, 108, 52, .22); stroke-width: 2; stroke-linecap: round; }
.fr-vite { fill: #B8BEC2; stroke: #6D7378; stroke-width: 1.5; }
.fr-vite-taglio { fill: none; stroke: #5A6065; stroke-width: 1.6; stroke-linecap: round; }
.fr-tubo { fill: none; stroke: #7E878D; stroke-width: 8; stroke-linecap: round; stroke-linejoin: round; }
.fr-tubo--rame { stroke: #B4632C; }
.fr-aria { fill: none; stroke: #DDF4FF; stroke-width: 3.4; stroke-dasharray: 9 9; stroke-linecap: butt; }
.fr-volano-cerchio { fill: #59626A; stroke: #343A3F; stroke-width: 4; }
.fr-raggi { fill: none; stroke: #C9CFD3; stroke-width: 5; stroke-linecap: round; }
.fr-segno { fill: #D8262F; }
.fr-albero { fill: #6E777E; }
.fr-comp { fill: #8E979D; stroke: #4A5157; stroke-width: 3; }
.fr-aletta { fill: #A6AEB3; stroke: #4A5157; stroke-width: 2; }
.fr-serbatoio { fill: #4F8C9C; stroke: #2E5C68; stroke-width: 3; }
.fr-fascia { fill: #3A6D7A; }
.fr-quadrante { fill: #FBF8F0; stroke: #2A2C30; stroke-width: 6; }
.fr-tacca { fill: none; stroke: #2A2C30; stroke-width: 2; }
.fr-tacca--lunga { stroke-width: 3.4; }
.fr-cifra { fill: #19191C; font: 700 14px 'Pragati Narrow', 'Arial Narrow', sans-serif; }
.fr-bar { fill: #55565C; font: 400 11px 'Pragati Narrow', 'Arial Narrow', sans-serif; letter-spacing: .5px; }
.fr-ago { fill: none; stroke: #D8262F; stroke-width: 3.4; stroke-linecap: round; }
.fr-perno { fill: #2A2C30; }
.fr-valvola { fill: #8E979D; stroke: #4A5157; stroke-width: 3; }
.fr-valvola-bocca { fill: #4A5157; }
.fr-braccio { fill: none; stroke: #3B4146; stroke-width: 9; stroke-linecap: round; }
.fr-braccio--leva { stroke-width: 7; }
.fr-piede { fill: #2A2C30; stroke: #121315; stroke-width: 2; stroke-linejoin: round; }
.fr-rigatura { fill: none; stroke: #6A7076; stroke-width: 2.4; stroke-linecap: round; }
.fr-pistoncino { fill: #C9CFD3; stroke: #4A5157; stroke-width: 1.5; }
.fr-pomello { fill: #E8B32A; stroke: #8A6512; stroke-width: 2.5; }
.fr-soffio { fill: rgba(232, 246, 255, .92); stroke: #8CBAD3; stroke-width: 1.5; }
.fr-camera { fill: #2E3236; stroke: #121315; stroke-width: 2.5; }
.fr-flangia { fill: #5D646A; }
.fr-finestra { fill: #EDE7DA; stroke: #121315; stroke-width: 1.5; }
.fr-molla-filo { fill: none; stroke: #D8262F; stroke-width: 3.6; stroke-linejoin: round; stroke-linecap: round; }
.fr-pistone { fill: #5D646A; }
.fr-asta { fill: #A8B0B5; stroke: #4A5157; stroke-width: 1.5; }
.fr-forcella { fill: #6E777E; stroke: #33383C; stroke-width: 1.5; }
.fr-piatto { fill: #3B4248; stroke: #23282C; stroke-width: 2; }
.fr-ganascia { fill: #8A9298; stroke: #2E3338; stroke-width: 1.5; }
.fr-guarnizione { fill: #6E4126; }
.fr-leva-camma { fill: #9AA2A7; stroke: #3B4146; stroke-width: 2; }
.fr-camma-s { fill: #C9CFD3; stroke: #3B4146; stroke-width: 2; }
.fr-foro { fill: #2A2C30; }
.fr-tamburo { fill: #6E7B84; stroke: #3E474D; stroke-width: 3; }
.fr-bullone { fill: #C2C9CE; stroke: #4A5157; stroke-width: 1; }
.fr-segno-ruota { fill: none; stroke: #D8262F; stroke-width: 6; stroke-linecap: round; }
.fr-mozzo { fill: #8E979D; stroke: #3E474D; stroke-width: 3; }
.fr-prigioniero { fill: #D5DADD; stroke: #4A5157; stroke-width: 1; }
.fr-num { fill: #19191C; }
.fr-num-t { fill: #FFFFFF; font: 700 19px 'Pragati Narrow', 'Arial Narrow', sans-serif; }
.freni-fig[data-modo="0"] .modo:not([data-m="0"]) { display: none; }
.freni-fig[data-modo="1"] .modo:not([data-m="1"]) { display: none; }
.firma-attesa .fr-m { transform: none; }
.firma-attesa .fr-aria { opacity: 0; }
/*/FRENI*/

/*MAPPACLIC*/
/* la mappa Google si carica solo al clic (giro privacy 1/10/2026) */
.mappa-clic { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; min-height: var(--mappa-h, 320px); box-sizing: border-box; padding: 24px; text-align: center; background: repeating-linear-gradient(0deg, rgba(127, 127, 127, 0.14) 0 1px, transparent 1px 28px), repeating-linear-gradient(90deg, rgba(127, 127, 127, 0.14) 0 1px, transparent 1px 28px); }
.mappa-clic__velo { display: flex; flex-direction: column; align-items: center; gap: 12px; max-width: 32em; }
.mappa-clic__btn { display: inline-block; padding: 0.75em 1.4em; border: 2px solid currentColor; border-radius: 999px; color: inherit; font: inherit; font-weight: 600; line-height: 1.2; text-decoration: none; background: transparent; cursor: pointer; }
.mappa-clic__btn:hover, .mappa-clic__btn:focus-visible { text-decoration: underline; }
.mappa-clic__nota { margin: 0; font-size: 0.85em; line-height: 1.45; }
/*/MAPPACLIC*/