/* Autorimessa De Gregorio — style.css
   «Via Petrarca, di notte» (Sito Web Codice/Design/DIREZIONE-GRAFICA.md, 23/10/2026).
   Il sito è l'ingresso di Via Petrarca 25 visto la sera: fondo blu notte (il blu delle lettere del logo),
   il neon «AUTO», i pilastri bianco, arancio e rosso. Tre firme: insegna, fascia del pilastro col nastro,
   misuratore 2,70 m. Caratteri serviti dal sito: Barlow Condensed 800 (titoli e numeri), Montserrat
   (H3, pulsanti, etichette), Inter (testo). Nessuna risorsa da terzi. */

@font-face {
  font-family: "Barlow Condensed";
  src: url("../fonts/barlow-condensed-800.woff2") format("woff2");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Montserrat";
  src: url("../fonts/montserrat-latin-var.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-latin-var.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --notte:       #00143A;
  --navy:        #00254C;
  --piede:       #000D27;
  --filigrana:   #0E2C5C;
  --linea-scura: #1E3A66;
  --palo:        #5B6B85;

  --blu:         #0067FD;
  --blu-scuro:   #0052CC;
  --cielo:       #44ACFC;
  --neon:        #FF2E3F;
  --rosso:       #D9142A;
  --rosso-scuro: #B0101F;
  --arancio:     #FF8A1F;

  --carta:       #F7F5F0;
  --cemento:     #ECEAE4;
  --bianco:      #FFFFFF;
  --grigio:      #4A5468;
  --nebbia:      #A9B8D0;
  --linea:       #D6D1C6;

  --accento:        var(--cielo);
  --accento-chiaro: var(--blu);

  --font-insegna: "Barlow Condensed", "Arial Narrow", Impact, sans-serif;
  --font-titoli:  "Montserrat", "Arial Black", Arial, sans-serif;
  --font-testo:   "Inter", "Helvetica Neue", Arial, sans-serif;

  --ease-out:    cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);

  --margine: clamp(16px, 4.4vw, 64px);
  --gap:     clamp(16px, 1.7vw, 24px);
  --sezione: clamp(64px, 2.5rem + 6.5vw, 144px);
  --testata: 64px;
}
@media (min-width: 1101px) { :root { --testata: 76px; } }
.pagina-lavaggio, .tono-lavaggio { --accento: var(--neon); --accento-chiaro: var(--rosso); }

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--testata) + 16px);
}
html.menu-aperto { overflow: hidden; }
body {
  margin: 0;
  background: var(--piede);
  color: var(--notte);
  font-family: var(--font-testo);
  font-size: 1rem;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
  overflow-wrap: break-word; /* una parola lunghissima va a capo invece di uscire (P11, giro 2 dell'audit 7-bis) */
}
main { display: block; background: var(--carta); }
img { display: block; max-width: 100%; height: auto; }
picture { display: block; }
p, li, summary { text-wrap: pretty; }
a { color: inherit; }
h1, h2, h3, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button { font: inherit; color: inherit; }
a, button, summary { touch-action: manipulation; }
strong { font-weight: 700; }

.salta {
  position: absolute; left: 12px; top: -80px; z-index: 100;
  background: var(--bianco); color: var(--notte); padding: 12px 16px; border-radius: 4px;
  font: 700 .9375rem/1 var(--font-titoli); text-decoration: none;
}
.salta:focus { top: 12px; }
:focus-visible { outline: 3px solid var(--blu-scuro); outline-offset: 3px; }
.scuro :focus-visible, .testata :focus-visible, .piede :focus-visible, .barra-telefono :focus-visible { outline-color: var(--cielo); }
.banda :focus-visible { outline-color: var(--bianco); }

/* ---------- Griglia e sezioni ---------- */
.contenitore { width: 100%; max-width: 1440px; margin-inline: auto; padding-inline: var(--margine); }
.griglia { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--gap); }
.griglia > * { grid-column: 1 / -1; min-width: 0; }
@media (min-width: 761px) { .griglia { grid-template-columns: repeat(8, minmax(0, 1fr)); } }
@media (min-width: 1101px) { .griglia { grid-template-columns: repeat(12, minmax(0, 1fr)); } }

.sezione { position: relative; padding-block: var(--sezione); }
.fondo-carta { background: var(--carta); }
.fondo-cemento { background: var(--cemento); }
.fondo-bianco { background: var(--bianco); }
.scuro { background: var(--notte); color: var(--bianco); }
.banda { color: var(--bianco); }
.banda--blu { background: var(--blu); }
.banda--rossa { background: var(--rosso); }

/* ---------- Testi ---------- */
.h1, .h2 {
  overflow-wrap: anywhere;
  font-family: var(--font-insegna);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .005em;
  color: var(--notte);
}
.h1 { font-size: clamp(2.125rem, 10.6vw, 5rem); line-height: .88; }
@media (min-width: 1101px) { .h1 { font-size: min(7.2vw, 6.5rem); } }
.h1.h1--interna { font-size: clamp(2.125rem, .9rem + 4.8vw, 5.25rem); line-height: .9; }
.h2 { font-size: clamp(2rem, 1.05rem + 4.1vw, 5rem); line-height: .92; text-wrap: balance; }
.h2--gigante { font-size: clamp(3.5rem, 1.5rem + 10vw, 10rem); line-height: .8; }
.scuro .h1, .scuro .h2, .banda .h2 { color: var(--bianco); }
.accento { color: var(--accento-chiaro); }
.scuro .accento { color: var(--accento); }
.banda .accento { color: inherit; }
.h3 { font: 800 clamp(1.25rem, 1.05rem + .9vw, 1.75rem)/1.15 var(--font-titoli); letter-spacing: -.01em; }
.unita { text-transform: none; }
.nowrap { white-space: nowrap; }

.attacco { font-size: clamp(1.125rem, 1rem + .55vw, 1.4375rem); line-height: 1.4; font-weight: 500; max-width: 36ch; }
.testo { font-size: clamp(1rem, .95rem + .25vw, 1.1875rem); line-height: 1.55; max-width: 60ch; }
.testo--forte { font-size: clamp(1.0625rem, 1rem + .3vw, 1.25rem); line-height: 1.5; font-weight: 500; }
.tenue { color: var(--grigio); }
.scuro .tenue { color: var(--nebbia); }
.testo a, .blocco p a { color: var(--blu-scuro); text-underline-offset: 3px; }
.scuro .testo a, .scuro .blocco p a { color: var(--cielo); }

/* Un blocco di testo: etichetta, titolo, frasi, pulsanti, con gli spazi della scala */
.blocco > * + * { margin-top: 16px; }
.blocco > .etichetta + * { margin-top: 20px; }
.blocco > .h1 + *, .blocco > .h2 + * { margin-top: clamp(20px, 1rem + .8vw, 28px); }
.blocco > .azioni, .blocco > .cartello, .blocco > .link-freccia { margin-top: 32px; }
.blocco > p + p { margin-top: 12px; }

/* Etichetta: il trattino del logo */
.etichetta {
  display: inline-flex; align-items: center; gap: 12px;
  font: 700 .8125rem/1 var(--font-titoli); letter-spacing: .14em; text-transform: uppercase;
  color: var(--grigio);
}
.etichetta::before { content: ""; width: 16px; height: 3px; background: var(--rosso); flex: none; }
.scuro .etichetta { color: var(--nebbia); }
.scuro .etichetta::before { background: var(--neon); }
.banda .etichetta { color: var(--bianco); }
.banda .etichetta::before { background: var(--notte); }
.etichetta--semplice::before { display: none; }

/* ---------- Icone del kit (maschere: prendono il colore del testo) ---------- */
.ico {
  display: inline-block; flex: none; width: 1em; height: 1em;
  background-color: currentColor;
  -webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat;
}
.ico--freccia { --m: url("../icone/freccia-diagonale.png"); }
.ico--telefono { --m: url("../icone/telefono.png"); }
.ico--whatsapp { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z'/%3E%3C/svg%3E"); }   /* il glifo ufficiale di WhatsApp (Copy/extra.md) */
.ico--auto { --m: url("../icone/auto.png"); }

/* ---------- Pulsanti come cartelli di direzione ---------- */
.cartello {
  display: inline-flex; align-items: stretch; min-height: 56px;
  border: 0; border-radius: 4px; padding: 0; margin: 0;
  color: var(--bianco); background: var(--blu);
  font: 700 1rem/1.2 var(--font-titoli); text-decoration: none; text-align: left;
  cursor: pointer; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
  transition: background-color .2s var(--ease-out), transform .14s var(--ease-out);
}
.cartello__testo { display: flex; align-items: center; gap: 10px; padding: 14px 20px; }
.cartello__freccia { flex: 0 0 56px; display: grid; place-items: center; border-left: 2px solid rgb(255 255 255 / .28); }
.cartello__freccia .ico { width: 20px; height: 20px; transition: transform .22s var(--ease-out); }
.cartello__freccia .ico--telefono { width: 26px; height: 26px; }
.cartello__freccia .ico--whatsapp { width: 22px; height: 22px; }
.cartello:active { transform: scale(.97); }
.cartello--rosso { background: var(--rosso); }
.cartello--notte { background: var(--notte); }
.cartello--linea { background: transparent; color: inherit; box-shadow: inset 0 0 0 2px currentColor; }
.cartello--linea .cartello__freccia { border-left-color: currentColor; }
.cartello--piccolo { min-height: 48px; }
.cartello--piccolo .cartello__freccia { flex-basis: 48px; }
.cartello--piccolo .cartello__testo { padding: 12px 16px; }
.cartello__numero { font: 800 1.625rem/1 var(--font-insegna); letter-spacing: .01em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cartello--chiama .cartello__testo { gap: 12px; padding-block: 10px; padding-inline: 18px; }
@media (max-width: 360px) { .cartello__numero { font-size: 1.375rem; } .cartello--chiama .cartello__testo { gap: 8px; padding-inline: 14px; } }
.azioni { display: flex; flex-wrap: wrap; gap: 12px; }
@media (max-width: 760px) {
  .cartello { width: 100%; justify-content: space-between; }
  .azioni { flex-direction: column; }
}
@media (max-width: 420px) {
  .cartello__testo { padding-inline: 16px; font-size: .9375rem; letter-spacing: -.01em; }
  .cartello__freccia, .cartello--piccolo .cartello__freccia { flex-basis: 48px; }
  .cartello--chiama .cartello__testo { padding-inline: 16px; }
}
@media (max-width: 360px) {
  .cartello__testo { padding: 10px 14px; font-size: .875rem; }
  .cartello__freccia:not(.cartello__freccia--icona) { display: none; }
  .cartello__freccia--icona { flex-basis: 44px; }
}
@media (min-width: 1101px) { .hero .cartello--blu, .chiusura .cartello--blu { min-width: 380px; justify-content: space-between; } }

.link-freccia {
  display: inline-flex; align-items: center; gap: 10px;
  font: 700 .9375rem/1.3 var(--font-titoli); color: var(--blu-scuro);
  text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px;
}
.link-freccia .ico { width: 16px; height: 16px; transition: transform .22s var(--ease-out); }
.scuro .link-freccia { color: var(--cielo); }
.banda .link-freccia { color: var(--bianco); }

@media (hover: hover) and (pointer: fine) {
  .cartello:hover .cartello__freccia .ico--freccia { transform: translateX(4px); }
  .cartello--blu:hover { background: var(--blu-scuro); }
  .cartello--rosso:hover { background: var(--rosso-scuro); }
  .cartello--notte:hover { background: var(--navy); }
  .cartello--linea:hover { background: color-mix(in srgb, currentColor 10%, transparent); }
  .link-freccia:hover .ico { transform: translateX(3px); }
  .menu__voci a:hover { color: var(--cielo); }
  .piede a:hover { color: var(--cielo); }
  .voto:hover .voto__testo { text-decoration-color: currentColor; }
}

/* ---------- Testata ---------- */
.testata { position: sticky; top: 0; z-index: 50; background: var(--notte); color: var(--bianco); }
.testata::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--linea-scura);
  opacity: 0; transition: opacity .2s var(--ease-out); pointer-events: none;
}
.testata.scorsa::after { opacity: 1; }
.testata__riga { display: flex; align-items: center; justify-content: space-between; gap: 24px; height: var(--testata); }
.testata__logo { position: relative; z-index: 2; display: block; flex: none; }
.testata__logo img { width: auto; height: 32px; }
.menu__n, .menu__fascia { display: none; }

.testata__apri {
  position: relative; z-index: 2; display: inline-flex; align-items: center; gap: 12px;
  min-height: 48px; padding: 0 2px 0 12px; margin-right: -2px; border: 0; background: none; color: var(--bianco); cursor: pointer;
  font: 700 .8125rem/1 var(--font-titoli); letter-spacing: .14em; text-transform: uppercase;
}
.testata__apri-chiudi { display: none; }
.testata__apri[aria-expanded="true"] .testata__apri-testo { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.testata__apri[aria-expanded="true"] .testata__apri-chiudi { display: inline; }
.testata__apri-linee { position: relative; width: 26px; height: 14px; }
.testata__apri-linee::before, .testata__apri-linee::after {
  content: ""; position: absolute; left: 0; right: 0; height: 2px; background: currentColor;
  transition: transform .24s var(--ease-in-out);
}
.testata__apri-linee::before { top: 0; }
.testata__apri-linee::after { bottom: 0; }
.testata__apri[aria-expanded="true"] .testata__apri-linee::before { transform: translateY(6px) rotate(45deg); }
.testata__apri[aria-expanded="true"] .testata__apri-linee::after { transform: translateY(-6px) rotate(-45deg); }

@media (min-width: 1101px) {
  .testata__logo img { height: 40px; }
  .testata__apri { display: none; }
  .menu__dentro { display: flex; align-items: center; gap: clamp(24px, 2.4vw, 44px); }
  .menu__voci { display: flex; gap: clamp(18px, 1.9vw, 34px); }
  .menu__voci a {
    position: relative; display: block; padding: 10px 0;
    font: 600 .9375rem/1 var(--font-titoli); color: var(--bianco); text-decoration: none;
    transition: color .2s var(--ease-out);
  }
  .menu__voci a[aria-current="page"]::after {
    content: ""; position: absolute; left: 0; bottom: 0; width: 18px; height: 3px; background: var(--neon);
  }
  .menu__chiama { display: none; }
}

@media (max-width: 1100px) {
  .menu {
    position: fixed; inset: 0; z-index: 1; background: var(--notte);
    padding-top: var(--testata);
    transform: translateY(-100%); visibility: hidden;
    transition: transform .32s var(--ease-in-out), visibility 0s linear .32s;
  }
  .menu.aperto { transform: none; visibility: visible; transition: transform .5s var(--ease-in-out), visibility 0s; }
  .menu__dentro {
    height: 100%; overflow-y: auto; overscroll-behavior: contain;
    display: flex; flex-direction: column;
    padding: 0 var(--margine) calc(24px + env(safe-area-inset-bottom));
  }
  .menu__fascia { display: block; flex: none; margin-inline: calc(-1 * var(--margine)); }
  .menu__voci { margin-top: 12px; }
  .menu__voci li { border-bottom: 1px solid var(--linea-scura); }
  .menu__voci a {
    display: flex; align-items: center; gap: 12px; min-height: 64px; padding-block: 8px;
    font: 800 clamp(1.875rem, 10vw, 3.5rem)/1 var(--font-insegna); letter-spacing: .01em; text-transform: uppercase;
    color: var(--bianco); text-decoration: none;
  }
  .menu__voci a[aria-current="page"] { color: var(--cielo); }
  .menu__n { display: block; flex: 0 0 24px; font: 700 .8125rem/1 var(--font-titoli); letter-spacing: .04em; color: var(--nebbia); }
  .menu__azioni { margin-top: auto; padding-top: 32px; display: grid; gap: 12px; }
  .menu__azioni .cartello { width: 100%; min-height: 56px; justify-content: space-between; }
  .menu__azioni .cartello__freccia { flex-basis: 56px; }
  .menu__voci li, .menu__azioni { opacity: 0; transform: translateY(12px); transition: opacity .15s var(--ease-out), transform .15s var(--ease-out); }
  .menu.aperto .menu__voci li, .menu.aperto .menu__azioni { opacity: 1; transform: none; transition-duration: .36s; }
  .menu.aperto .menu__voci li:nth-child(1) { transition-delay: .16s; }
  .menu.aperto .menu__voci li:nth-child(2) { transition-delay: .2s; }
  .menu.aperto .menu__voci li:nth-child(3) { transition-delay: .24s; }
  .menu.aperto .menu__voci li:nth-child(4) { transition-delay: .28s; }
  .menu.aperto .menu__voci li:nth-child(5) { transition-delay: .32s; }
  .menu.aperto .menu__azioni { transition-delay: .36s; }
}

/* ---------- Barra fissa del telefono ---------- */
.barra-telefono { display: none; }
@media (max-width: 1100px) {
  .barra-telefono {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
    display: grid; grid-template-columns: minmax(0, 3fr) minmax(max-content, 2fr); gap: 8px;
    padding: 12px 8px calc(8px + env(safe-area-inset-bottom));
    background: var(--notte); color: var(--bianco);
    box-shadow: 0 -8px 24px rgb(0 20 58 / .18);
  }
  .barra-telefono::before {
    content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px;
    background: linear-gradient(var(--bianco) 0 1px, var(--arancio) 1px 3px, var(--rosso) 3px);
  }
  .barra-telefono .cartello { width: 100%; min-height: 52px; justify-content: space-between; }
  .barra-telefono .cartello__testo { padding: 10px 14px; }
  .barra-telefono .cartello__freccia { flex-basis: 52px; }
  html.menu-aperto .barra-telefono { visibility: hidden; }
  .barra-telefono { transition: transform .3s var(--ease-out), visibility 0s; }
  .js body:has(.hero .azioni, .errore .azioni) .barra-telefono:not(.vista) {
    transform: translateY(100%); visibility: hidden;
    transition: transform .2s var(--ease-out), visibility 0s linear .2s;
  }
}

/* ---------- Hero ---------- */
.hero { position: relative; padding-top: clamp(40px, 2rem + 2.5vw, 72px); }
.hero__griglia { align-items: end; }
.hero__testo { padding-bottom: 72px; }
.hero__titolo { margin-top: 20px; }
.hero__frasi { margin-top: 28px; }
.hero__frasi p { max-width: 36ch; }
.hero__frasi p + p { margin-top: 8px; color: var(--nebbia); }
.hero .azioni { margin-top: 32px; }
.hero__foto { position: relative; }
.hero__cornice { position: relative; overflow: hidden; background: var(--navy); }
.hero__cornice img { width: 100%; height: 100%; object-fit: cover; }
.hero__indirizzo { color: var(--bianco); text-decoration: underline; text-decoration-color: rgb(255 255 255 / .4); text-underline-offset: 5px; }

.targa {
  position: absolute; left: 16px; bottom: 16px; z-index: 1;
  width: 52px; height: 52px; display: grid; place-items: center;
  background: var(--blu); color: var(--bianco); border-radius: 4px;
  font: 800 2rem/1 var(--font-insegna); font-variant-numeric: tabular-nums;
}

.voto {
  display: inline-flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; margin-top: 20px;
  color: var(--bianco); text-decoration: none; font: 500 .9375rem/1.3 var(--font-testo);
}
.voto { max-width: 100%; }
.voto__testo { min-width: 0; text-decoration: underline; text-decoration-color: rgb(255 255 255 / .4); text-underline-offset: 4px; }
.stelle { display: inline-flex; gap: 3px; }
.stelle span {
  width: var(--stella, 16px); height: var(--stella, 16px); background: var(--arancio);
  clip-path: polygon(50% 0, 61.8% 35.4%, 100% 35.4%, 69.1% 57.3%, 80.9% 92.7%, 50% 70.8%, 19.1% 92.7%, 30.9% 57.3%, 0 35.4%, 38.2% 35.4%);
}
/* ogni stella si riempie per --pieno (4,6 → 100% 100% 100% 100% 60%): lo scrive il pannello dal voto su Google */
.stelle span { background: linear-gradient(90deg, var(--arancio) var(--pieno, 100%), rgb(169 184 208 / .4) var(--pieno, 100%)); }
.fondo-bianco .stelle span, .fondo-carta .stelle span { background: linear-gradient(90deg, var(--arancio) var(--pieno, 100%), var(--linea) var(--pieno, 100%)); }

/* Briciole (pagine interne): «Home · Parcheggio» nello stile dell'etichetta */
.briciole a { color: inherit; text-decoration: none; }
.briciole__sep { color: var(--palo); }
.briciole [aria-current] { color: var(--bianco); }

@media (max-width: 760px) {
  .hero { padding-top: 0; }
  .hero__foto { order: -1; margin-inline: calc(-1 * var(--margine)); }
  .hero__cornice { aspect-ratio: 16 / 10; }
  .hero__testo { padding-top: 20px; padding-bottom: 48px; }
  .hero__titolo { margin-top: 14px; }
  .hero__frasi { margin-top: 18px; line-height: 1.35; }
  .hero__frasi p + p { margin-top: 6px; }
  .voto { margin-top: 14px; }
  .hero .azioni { margin-top: 22px; }
  .hero--tipografica { padding-top: 32px; }
}
@media (min-width: 761px) and (max-width: 1100px) {
  .hero { padding-top: 32px; }
  .hero__foto { order: -1; width: 100%; max-width: 760px; margin-bottom: 40px; }
  .hero__cornice { aspect-ratio: 16 / 10; }
  .hero__testo { padding-bottom: 64px; }
}
@media (min-width: 1101px) {
  .hero__griglia { align-items: stretch; }
  .hero__testo { grid-column: 1 / span 8; grid-row: 1; align-self: end; }
  .hero__foto { grid-column: 9 / span 4; grid-row: 1; justify-self: end; align-self: stretch; width: 100%; max-width: 460px; }
  .hero__cornice { height: 100%; min-height: 480px; }
  .targa { left: -24px; top: 24px; bottom: auto; width: 72px; height: 72px; font-size: 2.75rem; }
  .hero--interna .hero__testo { grid-column: 1 / span 7; }
  .hero--interna .hero__foto { grid-column: 8 / span 5; max-width: none; }
  .hero--parcheggio .hero__foto { grid-column: 9 / span 4; max-width: 460px; }
}
.hero--tipografica .hero__testo { padding-bottom: clamp(56px, 2rem + 4vw, 104px); }
.hero--parcheggio .hero__cornice img { object-position: 50% 30%; }
.hero--lavaggio .hero__cornice img { object-position: 70% 50%; }

/* Il «?» gigante delle domande e l'insegna dei contatti, a destra della hero tipografica */
.hero__segno { display: none; }
@media (min-width: 761px) {
  .hero__segno {
    display: block; position: absolute; right: var(--margine); bottom: clamp(40px, 2rem + 2vw, 80px);
    font: 800 clamp(10rem, 4rem + 14vw, 20rem)/.8 var(--font-insegna);
    color: transparent; -webkit-text-stroke: 2px var(--cielo); pointer-events: none;
  }
}
.hero__insegna { display: flex; justify-content: flex-end; padding-top: 36px; }
@media (min-width: 1101px) {
  .hero__insegna { grid-column: 10 / span 3; grid-row: 1; align-self: center; padding-top: 28px; }
}
@media (max-width: 1100px) {
  .hero__insegna { order: -1; padding-top: 28px; margin-bottom: 8px; }
  .hero__insegna .insegna { font-size: 2.75rem; }
}

/* ---------- La fascia del pilastro, col nastro ---------- */
.fascia {
  --b: 6px; --r: 8px; position: relative; display: block; height: 48px; overflow: hidden; contain: paint;
  background: linear-gradient(var(--bianco) 0 var(--b), var(--arancio) var(--b) calc(100% - var(--r)), var(--rosso) calc(100% - var(--r)));
}
.fascia__nastro { display: flex; width: max-content; height: 100%; padding-block: var(--b) var(--r); animation: nastro 40s linear infinite; will-change: transform; }
.fascia__giro { display: flex; align-items: center; }
.fascia__giro > span {
  display: flex; align-items: center; padding-left: 28px; white-space: nowrap;
  font: 800 1.125rem/1 var(--font-insegna); text-transform: uppercase; letter-spacing: .04em; color: var(--notte);
}
.fascia__giro > span::after { content: ""; width: 10px; height: 10px; margin-left: 28px; background: var(--rosso); }
.fascia__giro .unita { margin-left: .3em; }
@keyframes nastro { to { transform: translateX(-50%); } }
@media (max-width: 760px) {
  .fascia { height: 40px; --b: 4px; --r: 6px; }
  .fascia__nastro { animation-duration: 28s; }
  .fascia__giro > span { font-size: 1rem; padding-left: 20px; }
  .fascia__giro > span::after { margin-left: 20px; }
}
.fascia--sottile { height: 10px; background: linear-gradient(var(--bianco) 0 2px, var(--arancio) 2px 7px, var(--rosso) 7px); }
.pilastro {
  position: absolute; top: clamp(48px, 4vw, 96px); bottom: clamp(48px, 4vw, 96px); left: calc(var(--margine) / 2 - 8px); width: 16px;
  background: linear-gradient(var(--bianco) 0 38%, var(--arancio) 38% 70%, var(--rosso) 70%);
}
@media (max-width: 760px) { .pilastro { left: 4px; width: 6px; top: 48px; bottom: 48px; } }

/* ---------- L'insegna «AUTO» ---------- */
.insegna {
  position: relative; display: inline-block; padding: .1em .22em .06em;
  font: 800 clamp(2.75rem, 1.6rem + 4.2vw, 6rem)/1 var(--font-insegna); letter-spacing: .06em;
  color: var(--neon); border: 2px solid var(--neon); border-radius: 4px;
  text-shadow: 0 0 4px rgb(255 46 63 / .9), 0 0 20px rgb(255 46 63 / .55);
  box-shadow: 0 0 14px rgb(255 46 63 / .4), inset 0 0 14px rgb(255 46 63 / .22);
  transform: rotate(-3deg);
}
.insegna::before {
  content: ""; position: absolute; left: 18%; right: 18%; bottom: 100%; height: 28px;
  border-inline: 2px solid var(--palo);
}

/* ---------- Il misuratore 2,70 m (1 px = 1 cm) ---------- */
.misuratore { --alto: 270px; position: relative; height: var(--alto); margin-top: clamp(72px, 3rem + 4vw, 136px); color: var(--bianco); }
.misuratore__righello {
  position: absolute; left: 0; bottom: 0; width: 28px; height: 100%; border-left: 2px solid currentColor;
  background:
    repeating-linear-gradient(to top, currentColor 0 1px, transparent 1px 50px) left bottom / 28px 100% no-repeat,
    repeating-linear-gradient(to top, rgb(255 255 255 / .5) 0 1px, transparent 1px 10px) left bottom / 14px 100% no-repeat;
  transform-origin: bottom;
}
.misuratore__linea { position: absolute; left: 0; right: 0; top: 0; border-top: 2px dashed var(--neon); transform-origin: left; }
.misuratore__quota {
  position: absolute; left: 48px; bottom: calc(100% + 10px); text-transform: none; white-space: nowrap;
  font: 800 clamp(3.5rem, 1.5rem + 6vw, 7.5rem)/.8 var(--font-insegna); font-variant-numeric: tabular-nums;
}
.misuratore__terra { position: absolute; left: 0; right: 0; bottom: 0; border-top: 2px solid currentColor; }
.misuratore__furgone { position: absolute; left: 48px; bottom: calc(2px - .194 * 96px); width: 96px; height: auto; filter: brightness(0) invert(1); }
.misuratore--chiaro { color: var(--notte); }
.misuratore--chiaro .misuratore__righello {
  background:
    repeating-linear-gradient(to top, currentColor 0 1px, transparent 1px 50px) left bottom / 28px 100% no-repeat,
    repeating-linear-gradient(to top, rgb(0 20 58 / .45) 0 1px, transparent 1px 10px) left bottom / 14px 100% no-repeat;
}
.misuratore--chiaro .misuratore__linea { border-top-color: var(--rosso); }
.misuratore--chiaro .misuratore__furgone { filter: none; }
.misuratore--200 { --alto: 200px; }
.misuratore--200 .misuratore__quota { left: 0; font-size: clamp(2.75rem, 1.5rem + 3vw, 4.5rem); }
.misuratore--stretto .misuratore__quota { left: 0; font-size: clamp(2.75rem, 1rem + 3vw, 4.25rem); }
.misuratore--stretto .misuratore__furgone { width: 72px; bottom: calc(2px - .194 * 72px); }
@media (max-width: 760px) {
  .misuratore { --alto: 200px; margin-top: 64px; }
  .misuratore__furgone { width: 64px; left: 40px; bottom: calc(2px - .194 * 64px); }
  .misuratore__quota { left: 0; font-size: 2.75rem; }
}

/* ---------- Tabellone delle durate ---------- */
.tabellone__intro { margin-bottom: 16px; }
.tabellone { border-top: 2px solid var(--notte); }
.tabellone li {
  display: grid; grid-template-columns: 56px minmax(0, 1fr); align-items: baseline;
  padding-block: clamp(16px, .75rem + 1vw, 28px); border-bottom: 1px solid var(--linea);
}
.tabellone__n { font: 800 1.125rem/1 var(--font-insegna); color: var(--grigio); font-variant-numeric: tabular-nums; }
.tabellone__voce { font: 800 clamp(1.75rem, 1.1rem + 2.4vw, 3.25rem)/.95 var(--font-insegna); text-transform: uppercase; color: var(--notte); text-wrap: balance; }

/* ---------- Tagliando ---------- */
.tagliando {
  --tacca: 14px; --m: 120px; position: relative;
  display: grid; grid-template-columns: var(--m) minmax(0, 1fr);
  background: var(--bianco); color: var(--notte); border-radius: 4px;
  -webkit-mask: radial-gradient(circle var(--tacca) at var(--m) 0, #0000 98%, #000) top / 100% 51% no-repeat,
                radial-gradient(circle var(--tacca) at var(--m) 100%, #0000 98%, #000) bottom / 100% 51% no-repeat;
          mask: radial-gradient(circle var(--tacca) at var(--m) 0, #0000 98%, #000) top / 100% 51% no-repeat,
                radial-gradient(circle var(--tacca) at var(--m) 100%, #0000 98%, #000) bottom / 100% 51% no-repeat;
}
.banda .tagliando { background: var(--carta); }
.fondo-carta .tagliando, .fondo-cemento .tagliando, .fondo-bianco .tagliando { outline: 1px solid var(--linea); outline-offset: -1px; }
.tagliando__matrice { display: grid; place-items: center; border-right: 2px dashed var(--linea); }
.tagliando__matrice img { width: 64px; height: 64px; }
.tagliando__corpo { padding: clamp(24px, 1rem + 2vw, 48px); }
.tagliando__matrice--notte { background: var(--notte); border-right-color: var(--bianco); }
.tagliando__matrice--rossa { background: var(--rosso); border-right-color: var(--bianco); color: var(--bianco); }
.tagliando__matrice .ico { width: 56px; height: 56px; }
@media (max-width: 760px) {
  .tagliando {
    --m: 88px; grid-template-columns: minmax(0, 1fr); grid-template-rows: var(--m) auto;
    -webkit-mask: radial-gradient(circle var(--tacca) at 0 var(--m), #0000 98%, #000) left / 51% 100% no-repeat,
                  radial-gradient(circle var(--tacca) at 100% var(--m), #0000 98%, #000) right / 51% 100% no-repeat;
            mask: radial-gradient(circle var(--tacca) at 0 var(--m), #0000 98%, #000) left / 51% 100% no-repeat,
                  radial-gradient(circle var(--tacca) at 100% var(--m), #0000 98%, #000) right / 51% 100% no-repeat;
  }
  .tagliando__matrice { border-right: 0; border-bottom: 2px dashed var(--linea); }
  .tagliando__matrice--notte, .tagliando__matrice--rossa { border-bottom-color: var(--bianco); }
  .tagliando__matrice img { width: 52px; height: 52px; }
}

/* Il listino dentro il tagliando */
.listino__riga {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px 24px;
  padding-block: 20px; border-bottom: 1px solid var(--linea);
}
.listino__riga:first-child { padding-top: 0; }
.listino__riga:last-child { padding-bottom: 0; border-bottom: 0; }
.listino__riga p { font: 600 1.25rem/1.35 var(--font-testo); color: var(--notte); }
.listino__voce { display: block; margin-bottom: 6px; font: 800 .875rem/1.2 var(--font-titoli); letter-spacing: .1em; text-transform: uppercase; color: var(--blu-scuro); }
.listino__riga--lavaggio .listino__voce, .pagina-lavaggio .listino__voce { color: var(--rosso); }
.listino__p {
  width: 48px; height: 48px; display: grid; place-items: center; border-radius: 4px;
  background: var(--blu); color: var(--bianco); font: 800 1.875rem/1 var(--font-insegna);
}
.listino__cifra {
  font: 800 clamp(2.75rem, 1.5rem + 3.4vw, 4.5rem)/.8 var(--font-insegna); color: var(--rosso);
  text-transform: none; font-variant-numeric: tabular-nums; white-space: nowrap;
}
@media (max-width: 760px) {
  .listino__riga--lavaggio { grid-template-columns: minmax(0, 1fr); }
  .listino__cifra { justify-self: end; font-size: 2.3125rem; }
  .listino__riga p { font-size: 1.125rem; }
}

/* ---------- Stalli: i passaggi numerati ---------- */
.stalli { position: relative; color: var(--bianco); }
.stallo { position: relative; }
.stallo p { font-size: 1.0625rem; line-height: 1.5; }
.stallo a { color: var(--cielo); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.stallo__n {
  font: 800 clamp(4rem, 2rem + 5vw, 7.5rem)/.8 var(--font-insegna); color: transparent;
  -webkit-text-stroke: 2px var(--accento); font-variant-numeric: tabular-nums;
}
@media (max-width: 1100px) {
  .stalli { margin-top: 40px; }
  .stallo { display: grid; grid-template-columns: 88px minmax(0, 1fr); align-items: start; gap: 16px; padding: 24px 0; border-top: 3px solid rgb(255 255 255 / .85); }
  .stallo__n { font-size: 4rem; }
}
@media (min-width: 1101px) {
  .stalli { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .stalli::before {
    content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: rgb(255 255 255 / .85); transform-origin: left;
  }
  .stallo { min-height: 320px; padding: 28px 22px; display: flex; flex-direction: column; justify-content: space-between; gap: 32px; }
  .stallo::before, .stalli > .stallo:first-child::after {
    content: ""; position: absolute; top: 0; bottom: 0; width: 3px; background: rgb(255 255 255 / .85); transform-origin: top;
  }
  .stallo::before { right: 0; }
  .stalli > .stallo:first-child::after { left: 0; }
  .stallo__n { order: 2; }
}

/* ---------- Targa degli orari ---------- */
.targa-orari { background: var(--notte); color: var(--bianco); border-radius: 8px; padding: 32px; }
.scuro .targa-orari { background: var(--navy); }
.targa-orari__titolo { font: 800 1.625rem/1.15 var(--font-titoli); letter-spacing: -.01em; color: var(--bianco); }
.targa-orari__nota { margin-top: 8px; color: var(--nebbia); }
.targa-orari .orari__lista { margin-top: 20px; }
.targa-orari .orari__lista li { padding-block: 16px; border-top: 1px solid var(--linea-scura); }
.targa-orari .orari__lista li:last-child { padding-bottom: 0; }
.orari__grande { display: block; font: 800 2.5rem/1 var(--font-insegna); color: var(--bianco); font-variant-numeric: tabular-nums; white-space: nowrap; }
.orari__riga { display: block; margin-top: 6px; font-size: .9375rem; line-height: 1.45; color: var(--nebbia); }
.targa-orari .orari__lista li.oggi { border-left: 4px solid var(--arancio); padding-left: 16px; }
.targa-orari .orari__lista li.oggi .orari__grande { color: var(--arancio); }
.targa-orari__sotto { margin-top: 20px; color: var(--nebbia); font-size: .9375rem; }
@media (max-width: 760px) { .targa-orari { padding: 24px; } }
@media (max-width: 360px) { .orari__grande { font-size: 2.125rem; } .lama { font-size: 1.25rem; padding: 14px 44px 14px 18px; } }

/* La linea degli orari 0-24 (contatti) */
.linea-orari { display: grid; gap: 28px; }
.linea-orari__riga { display: grid; gap: 10px; }
.linea-orari__giorno { font: 700 .8125rem/1 var(--font-titoli); letter-spacing: .14em; text-transform: uppercase; color: var(--nebbia); }
.linea-orari__traccia { position: relative; height: 14px; background: var(--navy); border-radius: 2px; }
.linea-orari__traccia span {
  position: absolute; top: 0; bottom: 0; border-radius: 2px; background: var(--blu);
  left: calc(var(--da) / 24 * 100%); width: calc((var(--a) - var(--da)) / 24 * 100%);
}
.linea-orari__riga.oggi .linea-orari__giorno { color: var(--arancio); }
.linea-orari__riga.oggi .linea-orari__traccia span { background: var(--arancio); }
.linea-orari__scala { display: flex; justify-content: space-between; font: 700 .75rem/1 var(--font-titoli); color: var(--nebbia); font-variant-numeric: tabular-nums; }

/* ---------- Cartello d'indicazione ---------- */
.indicazioni {
  position: relative; display: grid; align-content: start; justify-items: start; gap: 14px;
  min-height: clamp(260px, 12rem + 12vw, 440px); padding-left: 42px; align-self: stretch;
}
.indicazioni::before { content: ""; position: absolute; left: 42px; top: 48px; bottom: calc(-1 * var(--sezione)); width: 12px; background: var(--palo); }
.indicazioni__p { position: relative; z-index: 1; margin-left: -42px; margin-bottom: 6px; width: 96px; height: 96px; }
.lama {
  position: relative; padding: 18px 56px 18px 24px;
  font: 800 clamp(1.5rem, 1rem + 1.6vw, 2.5rem)/1 var(--font-insegna); text-transform: uppercase; letter-spacing: .03em;
  clip-path: polygon(0 0, calc(100% - 28px) 0, 100% 50%, calc(100% - 28px) 100%, 0 100%);
}
@media (max-width: 760px) { .indicazioni { min-height: 0; padding-bottom: 8px; } .indicazioni::before { bottom: 0; } }
.indicazioni--home { margin-top: 33px; }
.lama--blu { background: var(--blu); color: var(--bianco); }
.lama--bianca { background: var(--bianco); color: var(--notte); }
.fondo-bianco .lama--bianca { background: var(--cemento); }

/* ---------- Mappa disegnata (si carica al clic) ---------- */
.mappa__area {
  position: relative; aspect-ratio: 4 / 3; border-radius: 8px; overflow: hidden;
  background:
    linear-gradient(90deg, transparent calc(38% - 6px), rgb(255 255 255 / .16) calc(38% - 6px) calc(38% + 6px), transparent 0),
    linear-gradient(transparent calc(58% - 5px), rgb(255 255 255 / .16) calc(58% - 5px) calc(58% + 5px), transparent 0),
    repeating-linear-gradient(90deg, rgb(255 255 255 / .06) 0 1px, transparent 1px 40px),
    repeating-linear-gradient(rgb(255 255 255 / .06) 0 1px, transparent 1px 40px),
    var(--navy);
}
.mappa__segno { position: absolute; left: 38%; top: 58%; width: 72px; height: 72px; transform: translate(-50%, -50%); }
.mappa__area iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.mappa.caricata .mappa__segno { display: none; }
.fondo-carta .mappa__area, .fondo-bianco .mappa__area, .fondo-cemento .mappa__area { box-shadow: 0 24px 48px -24px rgb(0 20 58 / .35); }
.thk-al-clic { margin-top: 16px; }
.thk-al-clic p { font-size: .8125rem; line-height: 1.5; color: var(--grigio); }
.scuro .thk-al-clic p { color: var(--nebbia); }
.thk-al-clic p a { color: var(--blu-scuro); }
.scuro .thk-al-clic p a { color: var(--cielo); }
.thk-al-clic p + p { margin-top: 14px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.thk-al-clic p + p > a { font: 700 .9375rem/1.3 var(--font-titoli); text-underline-offset: 5px; }
.mappa.caricata [data-thk-carica] { display: none; }
@media (max-width: 760px) { .thk-al-clic .cartello { width: auto; } }

/* ---------- Senso vietato (404) ---------- */
.senso-vietato {
  position: relative; display: block; width: clamp(96px, 8vw, 140px); aspect-ratio: 1; border-radius: 50%;
  background: var(--rosso); box-shadow: 0 0 0 6px var(--bianco);
}
.senso-vietato::after { content: ""; position: absolute; left: 18%; right: 18%; top: 41%; bottom: 41%; background: var(--bianco); border-radius: 2px; }

/* ---------- Domande (fisarmonica) ---------- */
.faq { margin-top: 32px; }
.faq__voce { border-top: 2px solid var(--notte); }
.faq__voce:last-child { border-bottom: 1px solid var(--linea); }
.faq summary {
  display: grid; grid-template-columns: 40px minmax(0, 1fr); align-items: center; gap: 16px;
  padding: 20px 0; cursor: pointer; list-style: none;
  font: 700 clamp(1.0625rem, 1rem + .3vw, 1.25rem)/1.3 var(--font-titoli); color: var(--notte);
}
.faq summary::-webkit-details-marker { display: none; }
.faq__domanda, .faq__risposta { overflow-wrap: anywhere; min-width: 0; } /* P11 (giro 2): la domanda e la risposta vanno a capo anche con una parola di 40 lettere */
.faq__piu { position: relative; width: 40px; height: 40px; border-radius: 4px; background: var(--blu); }
.faq__piu::before, .faq__piu::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 16px; height: 2px; margin: -1px 0 0 -8px; background: var(--bianco);
  transition: transform .24s var(--ease-in-out);
}
.faq__piu::after { transform: rotate(90deg); }
.faq__voce[open] .faq__piu::before { transform: rotate(45deg); }
.faq__voce[open] .faq__piu::after { transform: rotate(135deg); }
.faq__risposta { padding: 0 0 24px 56px; font-size: 1.0625rem; line-height: 1.55; color: var(--grigio); max-width: 64ch; }
.faq__risposta p + * { margin-top: 10px; }
.faq__risposta a { color: var(--blu-scuro); text-underline-offset: 3px; }
.faq__voce[open] .faq__risposta { animation: risposta .24s var(--ease-out); }
@keyframes risposta { from { opacity: 0; transform: translateY(-6px); } }
@media (max-width: 760px) {
  .faq summary { grid-template-columns: 32px minmax(0, 1fr); gap: 12px; padding-block: 16px; }
  .faq__piu { width: 32px; height: 32px; }
  .faq__piu::before, .faq__piu::after { width: 14px; margin-left: -7px; }
  .faq__risposta { padding-left: 0; padding-bottom: 20px; font-size: 1rem; line-height: 1.5; }
}
.faq__orari li { padding: 6px 0 6px 14px; border-left: 4px solid var(--linea); }
.faq__orari li.oggi { border-left-color: var(--arancio); color: var(--notte); font-weight: 600; }
.faq + .cartello, .faq + .azioni-sotto { margin-top: 32px; }

/* ---------- Piccoli pezzi comuni ---------- */
.veicoli { display: flex; gap: 12px; }
.veicoli span { width: 56px; height: 56px; display: grid; place-items: center; background: var(--bianco); border-radius: 4px; }
.veicoli img { width: 36px; height: 36px; }
.fondo-bianco .veicoli span { background: var(--cemento); }
@media (min-width: 761px) { .veicoli span { width: 72px; height: 72px; } .veicoli img { width: 44px; height: 44px; } }

.frasi-linea li { padding-block: 16px; font-size: clamp(1.0625rem, 1rem + .2vw, 1.125rem); line-height: 1.5; max-width: 52ch; }
.frasi-linea li:first-child { padding-top: 0; }
.frasi-linea li + li { border-top: 1px solid var(--linea); color: var(--grigio); }
.scuro .frasi-linea li + li { border-top-color: var(--linea-scura); color: var(--nebbia); }

.con-icona { display: flex; align-items: flex-start; gap: 12px; font-weight: 600; }
.con-icona img { width: 28px; height: 28px; flex: none; margin-top: -2px; }

.foto { position: relative; overflow: hidden; background: var(--cemento); }
.foto img, .foto picture { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero__cornice picture { height: 100%; }
.tabellone__intro { display: flex; }
.azioni-lista { margin-top: 24px; }
.chiusura--breve { padding-block: clamp(48px, 2rem + 3vw, 88px); }
.banda .tagliando :focus-visible { outline-color: var(--blu-scuro); }
.targa-orari--grande .targa-orari__titolo { font-size: clamp(1.625rem, 1.2rem + 1vw, 2.25rem); }
.targa-orari--grande .orari__grande { font-size: clamp(2.5rem, 1.6rem + 2vw, 3.5rem); }

/* ---------- Home ---------- */
/* 01 · Parcheggio per uno o più giorni */
.giorni { row-gap: 40px; }
@media (min-width: 1101px) {
  .giorni__testo { grid-column: 1 / span 5; grid-row: 1; }
  .giorni__azione { grid-column: 1 / span 5; grid-row: 2; align-self: start; }
  .giorni__tab { grid-column: 7 / span 6; grid-row: 1 / span 2; }
}
@media (min-width: 761px) and (max-width: 1100px) { .giorni__azione { grid-row: 3; } }

/* 02 · Parcheggio coperto per auto, moto e furgoni */
.coperto__griglia { row-gap: 40px; }
.coperto .veicoli { margin-top: 32px; }
.coperto .frasi-linea { margin-top: 32px; }
.coperto__misura { grid-column: 1 / span 2; align-self: end; }
.coperto__cartello { grid-column: 3 / span 2; align-self: end; aspect-ratio: 4 / 5; }
.coperto__moto { aspect-ratio: 16 / 9; }
.coperto__moto img { object-position: 40% 50%; }
@media (max-width: 1100px) { .coperto__misura, .coperto__cartello { grid-row: 2; } .coperto__moto { grid-row: 3; } }
@media (max-width: 760px) { .coperto__griglia { row-gap: 24px; } .coperto__misura .misuratore { margin-top: 64px; } }
@media (min-width: 761px) and (max-width: 1100px) {
  .coperto__misura { grid-column: 1 / span 4; }
  .coperto__cartello { grid-column: 5 / span 4; }
}
@media (min-width: 1101px) {
  .coperto__griglia { row-gap: 64px; }
  .coperto__testo { grid-column: 1 / span 7; grid-row: 1; }
  .coperto__misura { grid-column: 9 / span 4; grid-row: 1; }
  .coperto__moto { grid-column: 1 / span 8; grid-row: 2; aspect-ratio: auto; }
  .coperto__cartello { grid-column: 9 / span 4; grid-row: 2; }
}

/* 03 · Prezzi */
.prezzi__griglia { row-gap: 40px; }
.prezzi__testo .testo-forte { font-size: clamp(1.125rem, 1rem + .4vw, 1.25rem); }
@media (min-width: 1101px) {
  .prezzi__testo { grid-column: 1 / span 5; grid-row: 1; }
  .prezzi__azione { grid-column: 1 / span 5; grid-row: 2; align-self: start; }
  .prezzi__tagliando { grid-column: 6 / span 7; grid-row: 1 / span 2; align-self: center; }
}
@media (max-width: 1100px) { .prezzi__azione { grid-row: 3; } }

/* 04 · Ospiti di B&B e alberghi */
.ospiti__griglia { row-gap: 40px; }
@media (min-width: 1101px) {
  .ospiti__testo { grid-column: 1 / span 6; grid-row: 1; }
  .ospiti__azione { grid-column: 1 / span 6; grid-row: 2; align-self: start; }
  .indicazioni { grid-column: 8 / span 5; grid-row: 1 / span 2; }
}
@media (max-width: 1100px) { .ospiti__azione { grid-row: 3; } }

/* 05 · Lavaggio */
.lavaggio__griglia { row-gap: 40px; }
.mosaico { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
.mosaico .foto { aspect-ratio: 1; }
.mosaico .mosaico__larga { grid-column: 1 / -1; aspect-ratio: 16 / 9; }
@media (min-width: 1101px) {
  .lavaggio__testo { grid-column: 8 / span 5; grid-row: 1; align-self: center; }
  .mosaico { grid-column: 1 / span 7; grid-row: 1; }
  .mosaico .mosaico__larga { aspect-ratio: 2.15 / 1; }
}

/* 06 · Come funziona */
@media (min-width: 1101px) {
  .passi__intro { grid-column: 1 / span 4; }
  .passi .stalli { grid-column: 5 / span 8; }
  .passi__intro .link-freccia { margin-top: 32px; }
}

/* 07-08 · Orari e domande */
.domande__griglia { row-gap: 64px; }
.targa-orari .etichetta { margin-bottom: 20px; color: var(--nebbia); }
.targa-orari .etichetta::before { background: var(--neon); }
@media (min-width: 1101px) {
  .orari { grid-column: 1 / span 4; grid-row: 1; align-self: start; position: sticky; top: calc(var(--testata) + 24px); }
  .domande__elenco { grid-column: 6 / span 7; grid-row: 1; }
}

/* 09 · Dove siamo */
.dove { overflow-x: clip; }
.dove__testa { position: relative; }
.dove__scritta {
  font: 800 clamp(3rem, 13vw, 13rem)/.8 var(--font-insegna); text-transform: uppercase; white-space: nowrap;
  color: var(--filigrana); letter-spacing: .005em;
}
.dove__testa .insegna { position: absolute; right: var(--margine); top: 0; transform: translateY(-34%) rotate(-3deg); }
.dove__griglia { margin-top: clamp(40px, 2rem + 3vw, 96px); row-gap: 48px; }
.dove__nome { font: 800 1.375rem/1.2 var(--font-titoli); }
.dove__dati p + p { margin-top: 6px; }
.dove__dati a { color: var(--bianco); text-decoration: underline; text-decoration-thickness: 1px; text-decoration-color: rgb(255 255 255 / .45); text-underline-offset: 4px; }
@media (max-width: 760px) {
  .dove { padding-top: 104px; }
  .dove__testa .insegna { font-size: 2.75rem; top: -72px; transform: rotate(-3deg); }
}
@media (min-width: 761px) { .dove { padding-top: clamp(140px, 6rem + 6vw, 220px); } .dove__testa .insegna { top: auto; bottom: 100%; transform: translateY(-24px) rotate(-3deg); } }
@media (min-width: 1101px) {
  .dove__testo { grid-column: 1 / span 6; }
  .dove .mappa { grid-column: 8 / span 5; }
}

/* ---------- Pagine interne ---------- */
/* Tariffa unica (parcheggio): il tagliando grande sulla banda blu */
.tagliando--grande { --m: 168px; }
.tagliando--grande .tagliando__matrice img { width: 96px; height: 96px; }
.tagliando--grande .h2 { color: var(--notte); }
.tagliando--grande .tagliando__corpo { padding: clamp(28px, 1rem + 3vw, 64px); }
@media (min-width: 1101px) { .tariffa__tagliando { grid-column: 2 / span 10; } }
@media (max-width: 760px) {
  .tagliando--grande { --m: 104px; }
  .tagliando--grande .tagliando__matrice img { width: 64px; height: 64px; }
  .tagliando--grande .tagliando__corpo { padding: 24px 20px 0; }
  .tagliando--grande .azioni { margin: 28px -20px 0; }   /* il pulsante chiude il biglietto, da bordo a bordo */
  .tagliando--grande .cartello { border-radius: 0 0 4px 4px; }
}

/* Fino a 2,70 m (parcheggio) */
.veicoli-pag .veicoli { margin-top: 32px; }
.veicoli-pag .frasi-linea { margin-top: 32px; }
.veicoli-pag__moto { aspect-ratio: 16 / 9; }
.veicoli-pag__moto img { object-position: 45% 55%; }
.veicoli-pag__griglia { row-gap: 40px; }
@media (min-width: 761px) and (max-width: 1100px) {
  .veicoli-pag__misura { grid-column: 1 / span 3; align-self: end; }
  .veicoli-pag__moto { grid-column: 4 / span 5; align-self: end; }
}
@media (min-width: 1101px) {
  .veicoli-pag__testo { grid-column: 1 / span 6; grid-row: 1; }
  .veicoli-pag__misura { grid-column: 7 / span 2; grid-row: 1; align-self: end; }
  .veicoli-pag__moto { grid-column: 9 / span 4; grid-row: 1; align-self: end; }
}

/* Ospiti (parcheggio): gli orari della sera e della mattina */
.ore { margin-top: 28px; border-top: 2px solid var(--notte); }
.ore li { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 12px; padding-block: 16px; border-bottom: 1px solid var(--linea); font-size: 1.0625rem; line-height: 1.5; }
.ore li::before { content: ""; width: 12px; height: 12px; margin-top: 7px; background: var(--rosso); }

/* Mensile: piccolo, senza risalto */
.mensile { background: var(--bianco); padding-block: clamp(48px, 2rem + 3vw, 88px); }
.mensile__riga { border-top: 2px solid var(--notte); padding-top: 32px; row-gap: 20px; align-items: start; }
.mensile__titolo { font-size: clamp(1.75rem, 1rem + 2.4vw, 3rem); }
.mensile__testo p { font-size: 1.0625rem; line-height: 1.55; max-width: 52ch; }
.mensile__testo p a { color: var(--blu-scuro); }
.mensile__testo .cartello { margin-top: 20px; }
@media (min-width: 1101px) {
  .mensile__titolo { grid-column: 1 / span 5; }
  .mensile__testo { grid-column: 7 / span 6; }
}

/* Chiusura delle pagine (notte): a destra il «25» gigante, solo contornato e tagliato dal bordo in basso */
.chiusura { overflow: clip; }
.chiusura__numero { display: none; }
@media (min-width: 761px) {
  .chiusura__griglia { display: grid; grid-template-columns: 7fr 5fr; column-gap: var(--gap); }
  .chiusura__numero {
    display: block; align-self: end; justify-self: end; margin-bottom: calc(-1 * var(--sezione) - .14em);
    font: 800 clamp(14rem, 6rem + 20vw, 28rem)/.8 var(--font-insegna); font-variant-numeric: tabular-nums;
    color: transparent; -webkit-text-stroke: 2px var(--accento); pointer-events: none;
  }
}
.chiusura__scritta {
  max-width: 100%; overflow: hidden;
  font: 800 clamp(2.75rem, .5rem + 4.6vw, 5.5rem)/.8 var(--font-insegna); text-transform: uppercase; white-space: nowrap;
  color: var(--linea-scura); letter-spacing: .005em;
}
.chiusura__azioni { display: grid; gap: 20px; justify-items: start; }
@media (min-width: 1101px) {
  .chiusura__riga { grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 48px; }
  .chiusura__azioni { justify-items: end; }
}
.chiusura__testo { max-width: 900px; }
.blocco > .chiusura__link { display: flex; flex-wrap: wrap; gap: 16px 32px; margin-top: 28px; }
.chiusura__riga { display: grid; gap: 28px; justify-items: start; }
.chiusura .dove__numeri a, .chiusura__testo p a { color: var(--bianco); text-decoration-color: rgb(255 255 255 / .45); text-underline-offset: 4px; }
.chiusura__testo p { max-width: 56ch; }

/* Lavaggio: cosa comprende (dittico) */
.dittico { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; margin-top: clamp(32px, 1.5rem + 2vw, 56px); }
.dittico .foto { aspect-ratio: 4 / 3; }
.dittico__voce { margin-top: 16px; font: 800 clamp(1.125rem, 1rem + .6vw, 1.375rem)/1.25 var(--font-titoli); color: var(--notte); }
.dittico__voce strong { color: var(--rosso); font-weight: 800; }
@media (max-width: 760px) { .dittico { gap: 8px; } .dittico__voce { font-size: 1rem; margin-top: 10px; } }
@media (min-width: 1101px) { .comprende__testo { grid-column: 1 / span 7; } .dittico { grid-column: 1 / -1; gap: var(--gap); } }

/* Lavaggio: anche se non parcheggi */
.solo-lavaggio__griglia { row-gap: 32px; align-items: center; }
.solo-lavaggio__foto { aspect-ratio: 1; width: 60%; justify-self: end; }
@media (min-width: 761px) { .solo-lavaggio__foto { width: 50%; } }
@media (min-width: 1101px) {
  .solo-lavaggio__testo { grid-column: 1 / span 6; grid-row: 1; }
  .solo-lavaggio__foto { grid-column: 8 / span 4; grid-row: 1; width: 100%; justify-self: stretch; }
}

/* Domande frequenti: indice dei gruppi e gruppi */
.indice { position: sticky; top: var(--testata); z-index: 20; background: var(--carta); border-bottom: 1px solid var(--linea); }
.indice__voci { display: flex; gap: 8px; padding-block: 10px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.indice__voci::-webkit-scrollbar { display: none; }
.indice__voci li { flex: none; scroll-snap-align: start; }
.indice__voci a {
  display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 8px 14px; border-radius: 4px;
  font: 800 1.25rem/1 var(--font-insegna); text-transform: uppercase; letter-spacing: .02em;
  color: var(--notte); text-decoration: none; box-shadow: inset 0 0 0 1px var(--linea);
  transition: background-color .2s var(--ease-out), box-shadow .2s var(--ease-out), transform .14s var(--ease-out);
}
.indice__voci a:active { transform: scale(.97); }
.indice__n { font: 700 .8125rem/1 var(--font-titoli); color: var(--grigio); letter-spacing: .04em; }
.indice__voci a.attiva { box-shadow: inset 0 -3px 0 var(--blu), inset 0 0 0 1px var(--linea); background: var(--bianco); }
@media (hover: hover) and (pointer: fine) { .indice__voci a:hover { background: var(--bianco); } }
@media (min-width: 1101px) { .indice__voci { justify-content: flex-start; } }
.gruppo { scroll-margin-top: calc(var(--testata) + 72px); }
.gruppo__griglia { row-gap: 8px; }
.gruppo__testa { display: flex; align-items: flex-end; gap: 20px; }
.gruppo__n {
  font: 800 72px/.8 var(--font-insegna); color: transparent; -webkit-text-stroke: 2px var(--blu);
  font-variant-numeric: tabular-nums; flex: none;
}
.gruppo__azioni { margin-top: 32px; display: flex; flex-wrap: wrap; gap: 16px 32px; align-items: center; }
@media (max-width: 760px) { .gruppo__n { font-size: 56px; } }
@media (min-width: 1101px) {
  .gruppo__lato { grid-column: 1 / span 4; }
  .gruppo__faq { grid-column: 5 / span 8; }
  .gruppo__testa { flex-direction: column; align-items: flex-start; gap: 20px; }
  .gruppo .faq { margin-top: 0; }
}

/* Contatti */
.raggiungi__griglia, .ingresso__griglia, .orari-pag__griglia, .scrivere__griglia { row-gap: 40px; }
@media (min-width: 1101px) {
  .raggiungi__testo { grid-column: 1 / span 5; }
  .raggiungi .mappa { grid-column: 7 / span 6; }
  .ingresso__testo { grid-column: 1 / span 4; }
  .ingresso__foto { grid-column: 6 / span 7; }
  .orari-pag .orari { grid-column: 1 / span 6; position: static; }
  .linea-orari { grid-column: 8 / span 5; align-self: center; }
  .scrivere__titolo { grid-column: 1 / -1; }
}
.ingresso__foto { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .8fr); gap: 8px; align-items: start; align-self: end; }
.ingresso__foto .foto:first-child { aspect-ratio: 1; }
.ingresso__foto .foto:last-child { aspect-ratio: 4 / 5; }
.ingresso__testo .misuratore { margin-top: 112px; }
@media (max-width: 760px) { .ingresso__testo .misuratore { margin-top: 72px; } }

.canali { display: grid; gap: 0; margin-top: 32px; }
.canale {
  display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 16px 20px; align-items: center;
  padding-block: 24px; border-top: 2px solid var(--notte);
}
.canale:last-child { border-bottom: 1px solid var(--linea); }
.canale__icona { width: 56px; height: 56px; display: grid; place-items: center; background: var(--notte); color: var(--bianco); border-radius: 4px; }
.canale__icona .ico { width: 30px; height: 30px; }
.canale__testo { font-size: 1.0625rem; line-height: 1.5; }
.canale__testo a { color: var(--notte); text-underline-offset: 4px; }
.canale__testo strong { font-family: var(--font-titoli); font-weight: 800; }
.canale .cartello { grid-column: 1 / -1; }
@media (min-width: 1101px) {
  .canali__intro { grid-column: 1 / span 4; }
  .canali { grid-column: 5 / span 8; margin-top: 0; }
  .canale { grid-template-columns: 56px minmax(0, 1fr) auto; }
  .canale .cartello { grid-column: auto; }
}

.scrivere__griglia .tagliando__corpo .etichetta { margin-bottom: 16px; }
.punti-lista li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 10px; padding-block: 10px; border-bottom: 1px solid var(--linea); font-size: 1.0625rem; line-height: 1.45; }
.punti-lista li::before { content: ""; width: 10px; height: 10px; margin-top: 7px; background: var(--rosso); }
.punti-lista + .cartello { margin-top: 24px; }
.scrivere__intro { font: 800 1.125rem/1.2 var(--font-titoli); margin-bottom: 8px; }
@media (min-width: 1101px) {
  .scrivere__griglia .tagliando:nth-of-type(1) { grid-column: 1 / span 6; }
  .scrivere__griglia .tagliando:nth-of-type(2) { grid-column: 7 / span 6; }
}
@media (min-width: 761px) and (max-width: 1100px) {
  .scrivere__griglia .tagliando:nth-of-type(1) { grid-column: 1 / span 4; }
  .scrivere__griglia .tagliando:nth-of-type(2) { grid-column: 5 / span 4; }
  .scrivere__griglia .tagliando { --m: 88px; grid-template-columns: minmax(0, 1fr); grid-template-rows: var(--m) auto;
    -webkit-mask: radial-gradient(circle var(--tacca) at 0 var(--m), #0000 98%, #000) left / 51% 100% no-repeat,
                  radial-gradient(circle var(--tacca) at 100% var(--m), #0000 98%, #000) right / 51% 100% no-repeat;
            mask: radial-gradient(circle var(--tacca) at 0 var(--m), #0000 98%, #000) left / 51% 100% no-repeat,
                  radial-gradient(circle var(--tacca) at 100% var(--m), #0000 98%, #000) right / 51% 100% no-repeat; }
  .scrivere__griglia .tagliando__matrice { border-right: 0; border-bottom: 2px dashed var(--bianco); }
}

.recensioni__voto { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 12px 28px; }
.recensioni__cifra { padding-bottom: .1em; font: 800 clamp(5rem, 2rem + 12vw, 13rem)/.78 var(--font-insegna); color: var(--notte); font-variant-numeric: tabular-nums; }
.recensioni .stelle { --stella: 28px; gap: 5px; padding-bottom: calc(8px + .1em); }
@media (min-width: 1101px) {
  .recensioni__testo { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--gap); align-items: end; }
  .recensioni__testo > * { grid-column: 1; }
  .recensioni__testo > .recensioni__voto { grid-column: 2; grid-row: 1 / span 3; margin-top: 0; justify-self: end; }
}

/* 404 */
.errore { padding-top: clamp(40px, 2rem + 3vw, 96px); padding-bottom: var(--sezione); background: var(--notte); }
.errore__griglia { row-gap: 40px; align-items: end; }
.errore__segni { display: flex; align-items: center; gap: clamp(20px, 2vw, 40px); }
.errore__numero { font: 800 clamp(5rem, 3rem + 8vw, 10rem)/.8 var(--font-insegna); color: transparent; -webkit-text-stroke: 2px var(--neon); font-variant-numeric: tabular-nums; }
.errore__foto { position: relative; padding-top: 0; }
.errore__foto .insegna { position: absolute; right: 16px; top: -12px; z-index: 1; font-size: clamp(2.75rem, 1.6rem + 2.5vw, 4.5rem); transform: translateY(-50%) rotate(-3deg); }
@media (max-width: 1100px) {
  .errore { padding-top: 0; }
  .errore__foto { order: -1; margin-inline: calc(-1 * var(--margine)); margin-top: 0; }
  .errore__foto .hero__cornice { aspect-ratio: 16 / 10; }
}
@media (min-width: 761px) and (max-width: 1100px) { .errore__foto { margin-inline: 0; max-width: 760px; } }
@media (min-width: 1101px) {
  .errore__testo { grid-column: 1 / span 7; grid-row: 1; }
  .errore__foto { grid-column: 9 / span 4; grid-row: 1; margin-top: 0; }
  .errore__foto .hero__cornice { aspect-ratio: 4 / 5; }
}

/* ---------- Piè di pagina ---------- */
.piede { background: var(--piede); color: var(--bianco); }
.piede__griglia { padding-block: clamp(48px, 2rem + 3vw, 96px) 40px; row-gap: 32px; font-size: .9375rem; line-height: 1.55; }
.piede__logo { display: inline-block; }
.piede__logo img { width: 220px; height: auto; }
.piede__descrizione { margin-top: 16px; color: var(--nebbia); max-width: 30ch; }
.piede__colonna p + p { margin-top: 8px; }
.piede__colonna { color: var(--nebbia); }
.piede__colonna a { color: var(--bianco); }
.piede a { text-decoration: none; transition: color .2s var(--ease-out); }
.piede__menu { display: grid; gap: 10px; align-content: start; }
.piede__legale {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px;
  padding-block: 24px; border-top: 1px solid var(--linea-scura);
  font-size: .8125rem; line-height: 1.5; color: var(--nebbia);
}
.piede__legale a { color: var(--bianco); text-decoration: underline; text-decoration-color: rgb(255 255 255 / .35); text-underline-offset: 3px; }
@media (min-width: 761px) and (max-width: 1100px) {
  .piede__marchio { grid-column: 1 / span 4; } .piede__colonna:nth-of-type(2) { grid-column: 5 / span 4; }
  .piede__colonna:nth-of-type(3) { grid-column: 1 / span 4; } .piede__menu { grid-column: 5 / span 4; }
}
@media (min-width: 1101px) {
  .piede__marchio { grid-column: 1 / span 4; }
  .piede__colonna:nth-of-type(2) { grid-column: 5 / span 3; }
  .piede__colonna:nth-of-type(3) { grid-column: 8 / span 3; }
  .piede__menu { grid-column: 11 / span 2; }
}
@media (max-width: 1100px) { .piede__legale { padding-bottom: calc(96px + env(safe-area-inset-bottom)); flex-direction: column; } }

/* ---------- Pagine legali: cambia solo la veste ---------- */
.pagina-semplice { background: var(--carta); }
.legale { max-width: 68ch; margin-inline: auto; padding-bottom: var(--sezione); font-size: 1.0625rem; line-height: 1.65; color: var(--notte); }
.legale > h1:first-child {
  padding-top: clamp(48px, 2rem + 4vw, 112px);
  font: 800 clamp(2.125rem, 1.4rem + 3vw, 4.5rem)/.92 var(--font-insegna); text-transform: uppercase; letter-spacing: .005em;
  color: var(--bianco);
  border-image: linear-gradient(var(--notte) 0 0) fill 0 / / 0 100vmax;
}
.legale > h1:first-child + p {
  margin: 0 0 clamp(40px, 2rem + 2vw, 72px); padding: 16px 0 calc(clamp(40px, 2rem + 2vw, 64px) + 10px);
  color: var(--nebbia); font-size: .9375rem;
  border-image: linear-gradient(var(--notte) 0 calc(100% - 10px), var(--bianco) calc(100% - 10px) calc(100% - 8px), var(--arancio) calc(100% - 8px) calc(100% - 3px), var(--rosso) calc(100% - 3px)) fill 0 / / 0 100vmax;
}
.legale h2 { margin-top: 40px; font: 800 1.5rem/1.2 var(--font-titoli); letter-spacing: -.01em; }
.legale p, .legale ul, .legale table { margin-top: 12px; }
.legale ul { padding-left: 0; list-style: none; }
.legale ul li { position: relative; padding-left: 22px; }
.legale ul li::before { content: ""; position: absolute; left: 2px; top: .62em; width: 8px; height: 8px; background: var(--rosso); }
.legale li + li { margin-top: 6px; }
.legale a { color: var(--blu-scuro); text-underline-offset: 3px; }
.legale table { width: 100%; border-collapse: collapse; font-size: .9375rem; background: var(--cemento); display: block; overflow-x: auto; }
.legale th, .legale td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--linea); vertical-align: top; }
.legale th { font-weight: 700; }
@media (max-width: 760px) {
  .legale table { display: block; overflow: visible; background: none; }
  .legale thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .legale tbody, .legale tr, .legale td { display: block; }
  .legale tr { margin-top: 12px; padding: 14px 16px; background: var(--cemento); border-radius: 4px; }
  .legale td { padding: 4px 0; border: 0; }
  .legale td::before { display: block; font: 700 .75rem/1.4 var(--font-titoli); letter-spacing: .1em; text-transform: uppercase; color: var(--grigio); }
  [data-thk-modello="cookie"] td:nth-child(1)::before { content: "Nome"; }
  [data-thk-modello="cookie"] td:nth-child(2)::before { content: "Di chi"; }
  [data-thk-modello="cookie"] td:nth-child(3)::before { content: "A cosa serve"; }
  [data-thk-modello="cookie"] td:nth-child(4)::before { content: "Durata"; }
  [data-thk-modello="cookie"] td:nth-child(1) { font-weight: 700; }
}

/* =========================================================
   Movimento: 8 effetti, solo transform e opacity.
   ========================================================= */
/* 1 · Foto della hero: visibile dal primo fotogramma, si assesta */
.hero__cornice img { animation: foto-entra 1.2s var(--ease-out) both; }
@keyframes foto-entra { from { transform: scale(1.06); } }

/* 2 · Righe dell'H1: salgono dentro la loro maschera, mai invisibili */
.riga { display: block; overflow: hidden; padding-block: .08em; margin-block: -.08em; }
.riga > span { display: block; text-wrap: balance; animation: riga-sale .7s var(--ease-out) both; }
.riga:nth-child(2) > span { animation-delay: 70ms; }
.riga:nth-child(3) > span { animation-delay: 140ms; }
@keyframes riga-sale { from { transform: translateY(40%); } }

/* 4 · Entrata delle sezioni, una volta sola (main.js: .reveal → .in) */
.reveal { transition: opacity .64s var(--ease-out), transform .64s var(--ease-out); transition-delay: var(--ritardo, 0ms); }
.js .reveal:not(.in) { opacity: 0; transform: translateY(24px); }

/* 5 · La segnaletica si disegna */
.misuratore__righello, .misuratore__linea { transition: transform .9s var(--ease-in-out); }
.misuratore__quota { transition: opacity .5s var(--ease-out), transform .5s var(--ease-out); }
.js .disegna:not(.in) .misuratore__righello { transform: scaleY(0); }
.js .disegna:not(.in) .misuratore__linea { transform: scaleX(0); }
.js .disegna:not(.in) .misuratore__quota { opacity: 0; transform: translateY(30%); }
.js .disegna.in .misuratore__linea { transition-delay: .15s; }
.js .disegna.in .misuratore__quota { transition-delay: .75s; }
.stallo__n { transition: opacity .5s var(--ease-out), transform .5s var(--ease-out); }
.js .stalli.disegna:not(.in) .stallo__n { opacity: 0; transform: translateY(30%); }
.js .stalli.disegna.in .stallo:nth-child(1) .stallo__n { transition-delay: .6s; }
.js .stalli.disegna.in .stallo:nth-child(2) .stallo__n { transition-delay: .69s; }
.js .stalli.disegna.in .stallo:nth-child(3) .stallo__n { transition-delay: .78s; }
.js .stalli.disegna.in .stallo:nth-child(4) .stallo__n { transition-delay: .87s; }
@media (min-width: 1101px) {
  .stalli::before, .stallo::before, .stalli > .stallo:first-child::after { transition: transform .9s var(--ease-in-out); }
  .js .stalli.disegna:not(.in)::before { transform: scaleX(0); }
  .js .stalli.disegna:not(.in) .stallo::before, .js .stalli.disegna:not(.in) > .stallo:first-child::after { transform: scaleY(0); }
}

/* 6 · L'insegna si accende, una volta */
.js .insegna:not(.in) { opacity: 0; }
.insegna.in { animation: accendi .9s var(--ease-out) both; }
@keyframes accendi { 0% { opacity: 0; } 20% { opacity: 1; } 30% { opacity: .35; } 45% { opacity: 1; } 55% { opacity: .7; } 100% { opacity: 1; } }

/* 3 (nastro) e 7 (menu) stanno coi loro pezzi; 8 (tocco) coi cartelli e con le domande */

/* Meno movimento, non zero */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero__cornice img { animation: none; }
  .riga > span { animation: riga-tenue .4s var(--ease-out) both; }
  .fascia__nastro { animation-duration: 120s; }
  .reveal { transition: opacity .25s var(--ease-out); }
  .js .reveal:not(.in) { transform: none; }
  .misuratore__righello, .misuratore__linea, .misuratore__quota, .stallo__n,
  .stalli::before, .stallo::before, .stalli > .stallo:first-child::after { transition: opacity .3s var(--ease-out); }
  .js .disegna:not(.in) .misuratore__righello, .js .disegna:not(.in) .misuratore__linea,
  .js .disegna:not(.in) .misuratore__quota, .js .stalli.disegna:not(.in) .stallo__n,
  .js .stalli.disegna:not(.in)::before, .js .stalli.disegna:not(.in) .stallo::before,
  .js .stalli.disegna:not(.in) > .stallo:first-child::after { transform: none; opacity: 0; }
  .insegna.in { animation: accendi-tenue .3s var(--ease-out) both; }
  .menu__voci li, .menu__azioni, .menu.aperto .menu__voci li, .menu.aperto .menu__azioni { transform: none; }
  .faq__voce[open] .faq__risposta { animation: risposta-tenue .24s var(--ease-out); }
}
@media (prefers-reduced-motion: reduce) and (hover: hover) and (pointer: fine) {
  .cartello:hover .cartello__freccia .ico--freccia, .link-freccia:hover .ico { transform: none; }
}
@media (prefers-reduced-motion: reduce) and (max-width: 1100px) {
  .barra-telefono, .js body:has(.hero .azioni, .errore .azioni) .barra-telefono:not(.vista) { transform: none; }
  .barra-telefono { transition: opacity .3s var(--ease-out), visibility 0s; }
  .js body:has(.hero .azioni, .errore .azioni) .barra-telefono:not(.vista) { opacity: 0; transition: opacity .2s var(--ease-out), visibility 0s linear .2s; }
  .menu, .menu.aperto { transform: none; }
  .menu { opacity: 0; transition: opacity .2s var(--ease-out), visibility 0s linear .2s; }
  .menu.aperto { opacity: 1; transition: opacity .2s var(--ease-out), visibility 0s; }
}
@keyframes riga-tenue { from { opacity: .6; } }
@keyframes accendi-tenue { from { opacity: 0; } }
@keyframes risposta-tenue { from { opacity: 0; } }

/* ---------- Sotto i 360 px (320, i telefoni piccoli): la scala appena più piccola, così i blocchi stanno in 3 righe.
   Da 360 px in su niente cambia (390 e 1440 come prima). Collaudo del 23/10/2026, punti C e D ---------- */
@media (max-width: 359px) {
  .h1.h1--interna { font-size: 1.875rem; }
  .attacco { font-size: 1.0625rem; }
  .listino__riga p { font-size: 1rem; }
  .tabellone__voce { font-size: 1.5rem; }
  .stallo { grid-template-columns: 60px minmax(0, 1fr); gap: 12px; }
  .stallo__n { font-size: 3.25rem; }
  .stallo p { font-size: .9375rem; }
  .canale { grid-template-columns: 44px minmax(0, 1fr); gap: 12px 14px; }
  .canale__icona { width: 44px; height: 44px; }
  .canale__testo { font-size: .9375rem; }
  .dove__scritta { font-size: 12vw; }
}

/* ---------- La pagina di pausa del pannello (kit 1.6-1.7, motore/pausa.js): «Via Petrarca, di notte».
   Fondo blu notte, il logo bianco della testata, testi bianchi; «Entra con la password» in azzurro e la firma in
   nebbia: tutti oltre il 4,5:1 (audit 7-bis del 23/10/2026, M1) ---------- */
.thk-pausa-corpo { background: var(--notte); color: var(--bianco); }
.thk-pausa-corpo .thk-pausa { background: transparent; color: var(--bianco); }
.thk-pausa-corpo .thk-pausa-logo { max-width: min(260px, 72vw); margin-bottom: 8px; }
.thk-pausa-corpo .thk-pausa-scritta { font-family: var(--font-insegna); font-weight: 800; letter-spacing: .01em; line-height: 1.1; }
.thk-pausa-corpo .thk-pausa-scritta::before { background: var(--arancio); opacity: 1; height: 4px; }
.thk-pausa-corpo .thk-pausa-contatti a { color: var(--bianco); border-color: rgb(255 255 255 / .85); }
.thk-pausa-corpo .thk-pausa-apri { color: var(--cielo); opacity: 1; }
.thk-pausa-corpo .thk-pausa-modulo .thk-pausa-campo { color: var(--bianco); border-color: rgb(255 255 255 / .85); }
.thk-pausa-corpo .thk-pausa-modulo .thk-pausa-entra { color: var(--notte); background: var(--bianco); border-color: var(--bianco); }
.thk-pausa-corpo .thk-pausa-errore { color: var(--bianco); border-color: var(--neon); }
.thk-pausa-corpo .thk-pausa-firma { color: var(--nebbia); opacity: 1; }
.thk-pausa-corpo .thk-pausa-firma a { color: var(--bianco); }
.thk-pausa-corpo :focus-visible { outline-color: var(--cielo); }