/* Bryan Motor · nero e oro, coi caratteri e i colori del sito vecchio (chiesto dal cliente il 2026-10-20):
   Roboto (titoli 900 e 700, testi), Arimo per i dettagli; giallo #FFDD00, oro #DFC51B, nero #1A1A1A e #000.
   La struttura resta quella della home 04 di AutoDeal, ricreata da zero (niente codice o immagini del tema). Prima il telefono. */

@font-face { font-family: 'Roboto'; font-style: normal; font-display: swap; font-weight: 100 900; src: url('/statici/font/roboto-latin-wght-normal.woff2') format('woff2-variations');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Roboto'; font-style: normal; font-display: swap; font-weight: 100 900; src: url('/statici/font/roboto-latin-ext-wght-normal.woff2') format('woff2-variations');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Arimo'; font-style: normal; font-display: swap; font-weight: 400 700; src: url('/statici/font/arimo-latin-wght-normal.woff2') format('woff2-variations');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  color-scheme: dark;
  --fondo: #0a0a0a;
  --fondo-2: #111111;
  --crema: #121008;
  --carta: #161616;
  --carta-2: #1f1f1f;
  --campo: #1c1c1c;
  --linea: #262626;
  --linea-2: #3b3b3b;
  --testo: #ffffff;
  --testo-2: #c8c8c8;
  --testo-3: #9c9c9c;
  --giallo: #ffdd00;
  --giallo-2: #ffe74d;
  --giallo-3: #dfc51b;
  --oro: linear-gradient(115deg, #ffdd00 0%, #dfc51b 55%, #b89a12 100%);
  --giallo-chiaro: rgba(255, 221, 0, .12);
  --su-giallo: #0a0a0a;
  --scuro: #000000;
  --scuro-2: #0d0d0d;
  --scuro-linea: #232323;
  --wa: #147d3e;
  --wa-2: #12753a;
  --verde-it: #1f8f4e;
  --rosso-it: #ce2b37;
  --errore: #ff6b6b;

  --raggio: 16px;
  --raggio-s: 12px;
  --raggio-xs: 8px;
  --ombra: 0 24px 60px rgba(0, 0, 0, .55);
  --ombra-s: 0 10px 28px rgba(0, 0, 0, .45);
  --curva: cubic-bezier(.2, .7, .2, 1);

  --largo: 1290px;
  --margine: 16px;
  --sezione: 64px;
  --riga-testata: 60px;
  --alto-testata: 76px;
  --barra-mobile: 0px;

  --t-display: clamp(2.125rem, 1.2rem + 4.2vw, 4.5rem);
  --t-h2: clamp(1.625rem, 1.2rem + 1.6vw, 2.375rem);
}
@media (min-width: 768px) {
  :root { --margine: 28px; --sezione: 92px; --riga-testata: 72px; --alto-testata: 88px; }
}
@media (min-width: 1100px) {
  :root { --riga-testata: 84px; --alto-testata: 146px; }
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 110px; }
body {
  margin: 0;
  font-family: 'Roboto', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--testo);
  background: var(--fondo);
  padding-bottom: var(--barra-mobile);
  overflow-x: clip;
}
html { overflow-x: hidden; }
/* La barra di scorrimento nello stile del sito (Zago, 2026-10-22): binario nero, cursore oro, sottile.
   Chrome, Edge e Firefox leggono scrollbar-color e scrollbar-width (e passano ai riquadri che scorrono);
   Safari le regole -webkit- qui sotto. Le strisce che nascondono la barra restano senza. */
html { scrollbar-color: var(--giallo-3) var(--fondo); scrollbar-width: thin; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track, ::-webkit-scrollbar-corner { background: var(--fondo); }
::-webkit-scrollbar-thumb { background: var(--giallo-3); border: 2px solid var(--fondo); border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: var(--giallo); }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, h4, p, ul, ol, dl, figure { margin: 0; }
:where(ul[role='list'], ol[role='list']) { list-style: none; padding: 0; }
:focus-visible { outline: 2px solid var(--giallo); outline-offset: 3px; }
::selection { background: var(--giallo); color: var(--su-giallo); }
main { padding-top: var(--alto-testata); }
body.con-eroe main { padding-top: 0; }

.salta { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--giallo); color: var(--su-giallo); padding: 10px 16px; font-weight: 600; border-radius: 999px; }
.salta:focus { top: 12px; }
.solo-lettori { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.contenitore { width: 100%; max-width: calc(var(--largo) + 2 * var(--margine)); margin: 0 auto; padding-left: var(--margine); padding-right: var(--margine); }
.sezione { padding-top: var(--sezione); padding-bottom: var(--sezione); position: relative; }
.sezione--2 { background: var(--fondo-2); }
.sezione--crema { background: var(--crema); }
.sezione--stretta { padding-top: calc(var(--sezione) * .6); padding-bottom: calc(var(--sezione) * .6); }
.centro { text-align: center; }

/* Niente barra di avanzamento in cima alla pagina: regola fissa di Zago (2026-10-21). --avanzamento serve solo al
   cerchio del «torna su» */

/* ---------- Tipografia ---------- */
.display { font-size: var(--t-display); font-weight: 900; line-height: 1.05; letter-spacing: -0.025em; }
.h2 { text-wrap: balance; font-size: var(--t-h2); font-weight: 800; line-height: 1.12; letter-spacing: -0.02em; }
.h3 { font-size: 1.1875rem; font-weight: 700; line-height: 1.3; }
.etichetta { display: inline-flex; align-items: center; gap: 12px; font-family: 'Arimo', 'Roboto', sans-serif; font-size: .78rem; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--giallo); }
.etichetta::before { content: ''; width: 34px; height: 1px; background: var(--oro); }
.introduzione { font-size: 1.0625rem; color: var(--testo-2); max-width: 62ch; }
.evidenzia { background: var(--oro); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.testa-sezione { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 16px 24px; margin-bottom: 28px; }
.testa-sezione > div { display: grid; gap: 10px; }
.testa-sezione > .pulsanti { display: flex; }
.testa-sezione--centro { justify-content: center; text-align: center; }
.testa-sezione--centro > div { justify-items: center; }

/* Il filo tricolore del logo */
.tricolore { display: block; width: 64px; height: 3px; border: 0; margin: 0; border-radius: 3px; background: linear-gradient(90deg, var(--verde-it) 0 33.33%, #fff 33.33% 66.66%, var(--rosso-it) 66.66% 100%); }

/* ---------- Bottoni ---------- */
.btn {
  position: relative; overflow: hidden; isolation: isolate;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 50px; padding: 0 26px; border-radius: 12px; border: 1px solid transparent;
  font-weight: 600; font-size: .9375rem; text-decoration: none; cursor: pointer; white-space: nowrap;
  background: var(--giallo); color: var(--su-giallo); transition: background-color .2s, color .2s, border-color .2s, transform .2s var(--curva), box-shadow .2s;
}
.btn:hover { color: var(--su-giallo); background: var(--giallo-2); box-shadow: 0 10px 24px rgba(242, 205, 0, .35); transform: translateY(-1px); }
.btn:active { transform: translateY(1px); }
/* Il lampo che attraversa i bottoni al passaggio */
.btn::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, .55) 48%, transparent 66%); transform: translateX(-120%); transition: transform .7s var(--curva); }
.btn:hover::after { transform: translateX(120%); }
.btn svg { flex: none; transition: transform .25s var(--curva); }
.btn:hover svg:last-child { transform: translateX(3px); }
.btn--bianco { background: #fff; color: var(--su-giallo); }
.btn--bianco:hover { color: var(--su-giallo); background: #fff; box-shadow: var(--ombra-s); }
.btn--linea { background: transparent; color: var(--testo); border-color: var(--linea-2); }
.btn--linea:hover { color: var(--giallo); border-color: var(--giallo); background: transparent; box-shadow: none; }
.btn--scuro { background: var(--scuro); color: #fff; border-color: var(--linea-2); }
.btn--scuro:hover { color: #fff; background: #000; box-shadow: 0 10px 24px rgba(0, 0, 0, .2); }
.btn--wa { background: var(--wa); color: #fff; }
.btn--wa:hover { color: #fff; background: var(--wa-2); box-shadow: 0 10px 24px rgba(22, 139, 69, .25); }
.btn--piccolo { min-height: 40px; padding: 0 16px; font-size: .875rem; border-radius: 10px; }
.btn--tondo { border-radius: 999px; }
.btn--largo { width: 100%; }
.btn:disabled { opacity: .5; cursor: default; transform: none; box-shadow: none; }
.link-freccia { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; text-decoration: none; color: var(--testo); background: linear-gradient(var(--giallo), var(--giallo)) 0 100% / 100% 3px no-repeat; padding-bottom: 2px; transition: background-size .25s; }
.link-freccia:hover { background-size: 100% 100%; }

/* ---------- Bollino «da confermare» (solo prototipo) ---------- */
.dc { outline: 1px dashed #c58a00; outline-offset: 2px; position: relative; }
.dc::after {
  content: 'da confermare'; position: absolute; left: 0; top: -1.4em; font-size: 10px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: #3d2b00; background: #ffd76a; padding: 1px 6px; line-height: 1.4; white-space: nowrap; pointer-events: none; border-radius: 4px; z-index: 3;
}
.dc--blocco { display: block; margin-top: 1.5em; }

/* ---------- Testata: una scatola bianca sospesa che si attacca in cima quando scorri ---------- */
.testata { position: fixed; top: 0; left: 0; right: 0; z-index: 50; padding: 8px max(var(--margine), calc((100% - var(--largo)) / 2)) 0; transition: padding .35s var(--curva), transform .35s var(--curva); }
.testata__scatola { background: rgba(10, 10, 10, .78); backdrop-filter: blur(16px) saturate(1.2); -webkit-backdrop-filter: blur(16px) saturate(1.2); border: 1px solid rgba(223, 197, 27, .22); border-radius: 16px; box-shadow: 0 10px 30px rgba(0, 0, 0, .35); transition: border-radius .35s var(--curva), box-shadow .35s; }
.testata.scorsa { padding: 0; }
.testata.scorsa .testata__scatola { border-radius: 0; border-width: 0 0 1px; background: rgba(10, 10, 10, .92); box-shadow: 0 10px 30px rgba(0, 0, 0, .5); }
.testata__info { display: none; }
@media (min-width: 1100px) {
  .testata { padding: 10px max(var(--margine), calc((100% - var(--largo)) / 2)) 0; }
  .testata__info { display: flex; align-items: center; gap: 28px; max-height: 52px; height: 52px; padding: 0 24px; border-bottom: 1px solid var(--linea); font-size: .875rem; color: var(--testo-2); overflow: hidden; transition: max-height .35s var(--curva), opacity .25s, border-color .35s; }
  .testata__info > * { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; }
  .testata__info svg { color: var(--testo-3); }
  .testata__info a:hover { color: var(--testo); }
  .testata__info .spinge { margin-left: auto; }
  .testata.scorsa .testata__info { max-height: 0; opacity: 0; border-color: transparent; }
}
.testata__riga { display: flex; align-items: center; gap: 12px; height: var(--riga-testata); padding: 0 8px 0 14px; }
@media (min-width: 768px) { .testata__riga { padding: 0 12px 0 22px; } }
.testata__logo img { height: 42px; width: auto; }
@media (min-width: 768px) { .testata__logo img { height: 58px; } }
.testata__menu { display: none; }
.testata__azioni { margin-left: auto; display: flex; align-items: center; gap: 4px; }
.testata__tel { display: none; }
.icona-btn { display: inline-grid; place-items: center; width: 44px; height: 44px; border: 0; padding: 0; border-radius: 999px; background: transparent; color: inherit; cursor: pointer; text-decoration: none; position: relative; transition: background-color .2s; }
.icona-btn:hover { background: var(--carta-2); }
.preferite-link__n { position: absolute; top: 3px; right: 1px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 999px; background: var(--giallo); color: var(--su-giallo); font-size: 11px; font-weight: 700; display: grid; place-items: center; line-height: 1; animation: salta .4s var(--curva); }
.testata__wa { display: none; }
@media (min-width: 1100px) {
  .testata__menu { display: flex; gap: 4px; margin-left: 40px; }
  .testata__menu a { position: relative; text-decoration: none; font-weight: 600; font-size: .95rem; letter-spacing: .01em; padding: 10px 14px; color: var(--testo); }
  .testata__menu a::after { content: ''; position: absolute; left: 14px; right: 14px; bottom: 4px; height: 3px; border-radius: 3px; background: var(--giallo); transform: scaleX(0); transform-origin: 0 50%; transition: transform .3s var(--curva); }
  .testata__menu a:hover::after, .testata__menu a[aria-current='page']::after { transform: scaleX(1); }
  .testata__tel { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; font-weight: 600; padding: 0 14px; }
  .testata__tel svg { color: var(--testo-2); }
  .testata__wa { display: inline-flex; margin-left: 8px; }
  .menu-apri, .menu-tel-mobile { display: none; }
}
.menu-mobile { border-top: 1px solid var(--linea); padding: 4px 18px 20px; max-height: calc(100svh - 90px); overflow: auto; }
.menu-mobile:not([hidden]) { animation: scende .3s var(--curva); }
.menu-mobile a.voce { display: flex; justify-content: space-between; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--linea); text-decoration: none; font-size: 1.125rem; font-weight: 500; }
.menu-mobile a.voce[aria-current='page'] { font-weight: 700; }
.menu-mobile a.voce svg { color: var(--testo-3); }
.menu-mobile .azioni { display: grid; gap: 10px; margin-top: 18px; }
/* Il velo sotto la testata col menu aperto: un tocco fuori chiude il menu (app.js) */
.menu-velo { position: fixed; inset: 0; z-index: 49; background: rgba(0, 0, 0, .5); -webkit-tap-highlight-color: transparent; }
.menu-velo:not([hidden]) { animation: velo-appare .25s ease-out; }
@keyframes velo-appare { from { opacity: 0; } }
@media (min-width: 1100px) { .menu-mobile, .menu-velo { display: none !important; } }
/* Le voci del menu stanno sempre su una riga. Fra 1100 e 1279 px (portatili, o lo zoom del browser) la riga si
   stringe: meno spazio fra le voci e il bottone dice solo «WhatsApp» */
@media (min-width: 1100px) { .testata__menu a { white-space: nowrap; } }
@media (min-width: 1100px) and (max-width: 1279px) {
  .testata__menu { margin-left: 20px; gap: 0; }
  .testata__menu a { padding: 10px 11px; }
  .testata__menu a::after { left: 11px; right: 11px; }
  .testata__wa-pre { display: none; }
}

/* ---------- Apertura della home: «Che auto stai cercando?» ----------
   La proposta C, scelta dal titolare il 2026-10-20. Dietro, il video dei dettagli d'auto nel buio (stock Pexels): solo atmosfera,
   scuro, velato e sfocato quanto basta perche' il pannello si legga. Davanti, centrati: il titolo, la ricerca in un
   pannello di vetro nero col filo d'oro, il voto e gli impegni del salone; in fondo le prime auto vere a schede, che
   spuntano per invitare a scorrere. Ogni pezzo e' largo quanto il contenitore del sito. Prima il telefono. */
.eroe {
  --filo: rgba(223, 197, 27, .42);
  --filo-tenue: rgba(223, 197, 27, .24);
  --bordo-vetro: rgba(255, 255, 255, .13);
  --dolce: cubic-bezier(.16, 1, .3, 1);
  position: relative; isolation: isolate; overflow: clip; background: var(--scuro); color: var(--testo);
  padding: calc(var(--alto-testata) + 10px) 0 40px;
}
.eroe::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--filo-tenue) 20%, var(--filo-tenue) 80%, transparent); }
.eroe__fondo { position: absolute; z-index: -1; inset: 0 0 auto; height: max(100svh, 640px); overflow: hidden; pointer-events: none; background: var(--scuro); }
/* Un po' piu' grande della finestra: la sfocatura non scopre i bordi. Il video (auto di notte, gia' calde e scure)
   tiene i suoi toni d'ambra, che stanno col giallo: solo un poco piu' scuro e morbido */
.eroe__schermo { position: absolute; inset: -12px; }
.eroe__poster, .eroe__video { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; filter: saturate(.9) brightness(.82) contrast(1.05) blur(1px); }
.eroe__video { opacity: 0; transition: opacity 1.4s ease; }
.eroe__video.pronto { opacity: 1; }
/* Il velo: piu' scuro dietro il titolo, ai bordi e in fondo, dove la pagina diventa nera */
.eroe__velo { position: absolute; inset: 0; background:
  radial-gradient(64% 40% at 50% 28%, rgba(0, 0, 0, .5), transparent 76%),
  radial-gradient(120% 90% at 50% 30%, transparent 45%, rgba(0, 0, 0, .6) 100%),
  linear-gradient(180deg, rgba(0, 0, 0, .62) 0%, rgba(0, 0, 0, .24) 24%, rgba(0, 0, 0, .32) 50%, rgba(0, 0, 0, .86) 78%, #000 94%); }

.eroe__corpo { position: relative; text-align: center; }
.eroe__occhiello { display: none; }
/* Il titolo come sul sito vecchio, Roboto 900; «cercando?» in giallo. Sul telefono su due righe fisse */
.eroe__titolo { font-size: clamp(2.25rem, 10.4vw, 2.75rem); font-weight: 900; line-height: 1.04; letter-spacing: -.03em; text-shadow: 0 2px 28px rgba(0, 0, 0, .45); }
.eroe__titolo .riga { display: block; }
.eroe__titolo .parola { display: inline-block; overflow: hidden; vertical-align: top; padding: 0 .04em .1em; margin: 0 -.04em -.1em; }
.eroe__titolo .parola > span { display: inline-block; }
/* L'ombra del titolo coprirebbe il giallo ritagliato nel testo: sulla parola d'oro non c'e' */
.eroe__titolo .oro { background: linear-gradient(100deg, var(--giallo) 0%, var(--giallo-3) 55%, var(--giallo) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: none; }
.eroe__sotto { max-width: 880px; margin: 8px auto 0; font-size: .9375rem; line-height: 1.5; color: #dedede; text-wrap: balance; text-shadow: 0 1px 14px rgba(0, 0, 0, .7); }
.eroe__sotto strong { display: block; color: var(--testo); font-weight: 700; }
.eroe__sotto-lungo { display: none; }

/* ---------- La ricerca: un pannello di vetro nero col filo d'oro ---------- */
.ricerca { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; margin-top: 14px; padding: 12px; text-align: left; background: rgba(10, 10, 10, .64); border: 1px solid var(--filo-tenue); border-radius: 18px; box-shadow: 0 40px 90px rgba(0, 0, 0, .6), inset 0 1px 0 rgba(255, 255, 255, .06); backdrop-filter: blur(18px) saturate(1.15); -webkit-backdrop-filter: blur(18px) saturate(1.15); }
/* Il pannello sta sopra le righe che seguono solo mentre i suggerimenti sono aperti: scendono sopra il voto e le
   auto, che coprono comunque. Il resto del tempo, anche col fuoco nel campo, la sua ombra resta sotto il voto */
.ricerca:has(.ricerca__suggerimenti:not([hidden])) { z-index: 5; }
.ricerca::before { content: ''; position: absolute; left: 24px; right: 24px; top: -1px; height: 1px; background: linear-gradient(90deg, transparent, var(--giallo), transparent) no-repeat; background-size: 40% 100%; background-position: -60% 0; opacity: 0; pointer-events: none; }
.ricerca__gruppo { min-width: 0; margin: 0; padding: 0; border: 0; }
/* I nomi dei gruppi: letti sempre, visti solo dove c'e' altezza */
.ricerca__etichetta { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ricerca__campo { position: relative; z-index: 3; display: flex; align-items: center; gap: 10px; height: 48px; padding: 0 6px 0 15px; background: rgba(255, 255, 255, .06); border: 1px solid var(--bordo-vetro); border-radius: 13px; transition: border-color .2s, background-color .2s, box-shadow .2s; }
.ricerca__campo > svg { flex: none; color: var(--giallo-3); }
.ricerca__campo:focus-within { border-color: var(--giallo); background: rgba(255, 255, 255, .085); box-shadow: 0 0 0 1px var(--giallo); }
.ricerca__campo input { flex: 1; min-width: 0; height: 100%; padding: 0; border: 0; outline: 0; background: none; font-size: 1rem; font-weight: 500; color: var(--testo); -webkit-appearance: none; appearance: none; }
.ricerca__campo input::placeholder { color: rgba(255, 255, 255, .58); }
.ricerca__campo input::-webkit-search-cancel-button { display: none; }
.ricerca__vuota { flex: none; display: grid; place-items: center; width: 38px; height: 38px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--testo-2); cursor: pointer; }
.ricerca__vuota:hover { background: rgba(255, 255, 255, .08); color: var(--testo); }
.ricerca__suggerimenti { position: absolute; left: -1px; right: -1px; top: calc(100% + 8px); z-index: 30; margin: 0; padding: 6px; list-style: none; background: #0d0d0d; border: 1px solid var(--filo); border-radius: 14px; box-shadow: 0 24px 50px rgba(0, 0, 0, .7); }
.ricerca__suggerimenti li { display: flex; justify-content: space-between; gap: 12px; padding: 11px 12px; border-radius: 9px; font-size: .9375rem; cursor: pointer; }
.ricerca__suggerimenti li small { flex: none; font-family: 'Arimo', 'Roboto', sans-serif; font-weight: 700; font-size: .78rem; color: var(--giallo-3); }
.ricerca__suggerimenti li[aria-selected='true'], .ricerca__suggerimenti li:hover { background: rgba(255, 221, 0, .12); }
.ricerca__suggerimenti li[aria-selected='true'] { box-shadow: inset 2px 0 0 var(--giallo); }

/* I tipi: tessere tutte uguali, con l'auto vista di lato, il nome e il numero */
.ricerca__tessere { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: 8px; }
.tessera, .scelta { position: relative; display: block; min-width: 0; cursor: pointer; }
.tessera input, .scelta input { position: absolute; left: 0; top: 0; width: 1px; height: 1px; margin: 0; opacity: 0; }
.tessera > span { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: 'auto n' 'nome nome'; align-content: space-between; row-gap: 4px; height: 100%; min-height: 58px; padding: 9px 9px 8px; border: 1px solid var(--bordo-vetro); border-radius: 12px; background: linear-gradient(180deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, .02)); transition: border-color .2s, background-color .2s, transform .35s var(--curva), opacity .2s; }
/* L'auto vista di lato, appoggiata in basso a sinistra; scelta, prende un riflesso d'oro */
.tessera__auto { grid-area: auto; width: 100%; max-width: 96px; height: 34px; object-fit: contain; object-position: left bottom; transition: transform .45s var(--curva), filter .3s; }
.tessera__nome { grid-area: nome; min-width: 0; font-size: clamp(.625rem, 3.2vw, .8125rem); font-weight: 600; line-height: 1.15; letter-spacing: -.005em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tessera small { grid-area: n; align-self: start; font-family: 'Arimo', 'Roboto', sans-serif; font-size: .75rem; font-weight: 700; line-height: 1; color: var(--giallo-3); font-variant-numeric: tabular-nums; transition: margin .2s; }
.tessera:hover > span { border-color: rgba(223, 197, 27, .55); }
.tessera:hover .tessera__auto { transform: translateX(4px); }
.tessera input:checked + span { border-color: var(--giallo); background: linear-gradient(180deg, rgba(255, 221, 0, .17), rgba(223, 197, 27, .05)); }
.tessera input:checked + span small { color: var(--giallo); }
.tessera input:checked + span .tessera__auto { filter: drop-shadow(0 0 8px rgba(255, 221, 0, .45)); }
/* La spunta della tessera scelta, in alto a destra; il numero le fa posto */
.tessera > span::after { content: ''; position: absolute; top: 7px; right: 7px; width: 16px; height: 16px; border-radius: 50%; background: var(--giallo) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center / 10px no-repeat; opacity: 0; transform: scale(.4); transition: opacity .2s, transform .3s var(--curva); }
.tessera input:checked + span::after { opacity: 1; transform: none; }
.tessera input:checked + span small { margin-right: 22px; }
.tessera input:focus-visible + span, .scelta input:focus-visible + span { outline: 2px solid var(--giallo); outline-offset: 2px; }
.tessera input:disabled + span, .scelta input:disabled + span { opacity: .34; }
.tessera:has(input:disabled), .scelta:has(input:disabled) { cursor: not-allowed; }

/* Budget, automatico, neopatentati: pillole coi numeri, a righe intere */
.ricerca__filtri { display: grid; gap: 10px; }
.ricerca__pillole { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
/* Sul telefono le cinque fasce vanno su tre righe intere: l'ultima prende tutta la riga */
.ricerca__budget .scelta:last-child:nth-child(odd) { grid-column: 1 / -1; }
.scelta > span { display: flex; align-items: center; justify-content: center; gap: 7px; height: 38px; padding: 0 12px; border: 1px solid rgba(255, 255, 255, .15); border-radius: 999px; background: rgba(255, 255, 255, .04); font-size: .8125rem; font-weight: 600; white-space: nowrap; transition: border-color .2s, background-color .2s, color .2s; }
.scelta .euro { margin-left: -7px; }
.scelta small { font-family: 'Arimo', 'Roboto', sans-serif; font-size: .75rem; font-weight: 700; color: var(--giallo-3); font-variant-numeric: tabular-nums; }
.scelta svg { flex: none; color: var(--giallo-3); }
.scelta .largo { display: none; }
.scelta:hover > span { border-color: rgba(223, 197, 27, .55); }
.scelta input:checked + span { background: var(--giallo); border-color: var(--giallo); color: var(--su-giallo); }
.scelta input:checked + span small, .scelta input:checked + span svg { color: var(--su-giallo); }

/* Il bottone col numero; accanto, solo quando serve, «Azzera» */
.ricerca__azioni { display: flex; gap: 8px; }
.ricerca__vai { flex: 1 1 auto; gap: 12px; min-height: 50px; padding: 0 22px; border-radius: 13px; font-size: 1rem; font-weight: 900; letter-spacing: -.005em; }
.ricerca__vai b { font-weight: 900; font-variant-numeric: tabular-nums; }
.ricerca__vai:disabled { background: rgba(255, 255, 255, .12); color: var(--testo); opacity: 1; }
.ricerca__vai:disabled svg { display: none; }
.ricerca__azzera { flex: none; display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 0 15px; border: 1px solid var(--bordo-vetro); border-radius: 13px; background: rgba(255, 255, 255, .05); color: var(--testo-2); font-size: .8125rem; font-weight: 600; cursor: pointer; transition: color .2s, border-color .2s; }
.ricerca__azzera svg { color: var(--giallo-3); }
.ricerca__azzera:hover { color: var(--testo); border-color: rgba(223, 197, 27, .55); }

/* ---------- Voto e impegni, su una riga sola ---------- */
.eroe__fiducia { position: relative; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; row-gap: 8px; margin-top: 14px; font-family: 'Arimo', 'Roboto', sans-serif; font-size: .8125rem; line-height: 1.3; color: var(--testo-2); }
.eroe__fiducia > li { display: inline-flex; align-items: center; gap: 9px; padding: 0 14px; }
.eroe__fiducia > li + li { border-left: 1px solid rgba(255, 255, 255, .18); }
.eroe__fiducia svg { flex: none; color: var(--giallo-3); }
.fiducia--garanzia, .fiducia--permuta, .fiducia--tel { display: none !important; }
.fiducia__voto, .fiducia__tel { display: inline-flex; align-items: center; gap: 8px; color: inherit; text-decoration: none; }
.fiducia__voto strong { font-family: 'Roboto', sans-serif; font-size: .9375rem; font-weight: 900; color: var(--testo); }
.fiducia__voto:hover .fiducia__fonte, .fiducia__tel:hover { color: var(--testo); }
.fiducia__tel { gap: 9px; font-weight: 700; color: var(--testo); }
.stelle { position: relative; display: inline-flex; flex: none; width: max-content; color: rgba(255, 255, 255, .22); }
.stelle__piene { position: absolute; inset: 0 auto 0 0; display: inline-flex; overflow: hidden; color: var(--giallo); }
.eroe__fiducia .stelle svg { color: inherit; }

/* ---------- Le prime auto vere: «In vetrina», «Ultimi arrivi» e, quando si sceglie, «La tua ricerca» ---------- */
.eroe__auto { position: relative; margin-top: 18px; }
.eroe__auto-testa { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.eroe__schede { display: inline-flex; gap: 2px; min-width: 0; padding: 4px; border: 1px solid rgba(255, 255, 255, .1); border-radius: 999px; background: rgba(255, 255, 255, .03); }
.eroe__schede [role='tab'] { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 13px; border: 0; border-radius: 999px; background: none; color: rgba(255, 255, 255, .72); font-size: .8125rem; font-weight: 600; white-space: nowrap; cursor: pointer; transition: background-color .3s, color .3s; }
.eroe__schede [role='tab']:hover { color: var(--testo); }
.eroe__schede [role='tab'][aria-selected='true'] { background: #fff; color: #000; }
.eroe__schede small { font-family: 'Arimo', 'Roboto', sans-serif; font-size: .75rem; font-weight: 700; color: var(--giallo-3); font-variant-numeric: tabular-nums; }
.eroe__schede [aria-selected='true'] small { color: #6b5d00; }
.eroe__schede .largo { display: none; }
.eroe__tutte { flex: none; display: inline-flex; align-items: center; justify-content: center; gap: 9px; width: 42px; height: 42px; border: 1px solid var(--filo); border-radius: 50%; color: var(--giallo); text-decoration: none; transition: border-color .2s, background-color .2s; }
.eroe__tutte svg { transition: transform .35s var(--curva); }
.eroe__tutte:hover svg { transform: translateX(4px); }
.eroe__tutte-testo { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* Le schede entrano una per una (sotto, nell'ingresso): il pannello non si muove anche lui */
.eroe .eroe__pannello[role='tabpanel'] { animation: none; }
.carte-eroe { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.carta-eroe a { display: flex; flex-direction: column; height: 100%; overflow: hidden; background: linear-gradient(180deg, #121212, #0b0b0b); border: 1px solid rgba(255, 255, 255, .09); border-radius: 13px; color: var(--testo); text-decoration: none; transition: border-color .35s, transform .5s var(--curva), box-shadow .5s; }
.carta-eroe a:hover { border-color: rgba(223, 197, 27, .55); transform: translateY(-4px); box-shadow: 0 24px 50px rgba(0, 0, 0, .55); }
.carta-eroe__foto { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; background: #0a0a0a; }
.carta-eroe__foto img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 72%; transition: transform .9s var(--curva); }
/* La copertina e' gia' 4:3 come la scheda: si vede intera, insegna e riquadro dell'indirizzo compresi */
.carta-eroe__foto--copertina img { object-position: 50% 50%; }
.carta-eroe__foto--copertina::after { display: none; }
.carta-eroe a:hover .carta-eroe__foto img { transform: scale(1.045); }
.carta-eroe__foto::after { content: ''; position: absolute; inset: auto 0 0; height: 38%; background: linear-gradient(180deg, transparent, rgba(0, 0, 0, .55)); }
.carta-eroe__anno { position: absolute; z-index: 1; top: 8px; left: 8px; padding: 4px 8px; border-radius: 8px; background: rgba(0, 0, 0, .72); font-family: 'Arimo', 'Roboto', sans-serif; font-size: .6875rem; font-weight: 700; letter-spacing: .04em; color: #fff; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.carta-eroe__corpo { display: grid; grid-template-columns: minmax(0, 1fr); padding: 10px 11px 12px; }
.carta-eroe__corpo > span { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.carta-eroe__tipo { font-family: 'Arimo', 'Roboto', sans-serif; font-size: .625rem; font-weight: 700; line-height: 1.5; letter-spacing: .12em; text-transform: uppercase; color: var(--giallo-3); }
.carta-eroe__nome { margin-top: 2px; font-size: .9375rem; font-weight: 700; line-height: 1.25; letter-spacing: -.01em; }
.carta-eroe__versione { min-height: 1.4em; font-family: 'Arimo', 'Roboto', sans-serif; font-size: .75rem; line-height: 1.4; color: var(--testo-3); }
.carta-eroe__dati { margin-top: 8px; padding-top: 8px; border-top: 1px solid rgba(255, 255, 255, .08); font-family: 'Arimo', 'Roboto', sans-serif; font-size: .75rem; line-height: 1.35; color: var(--testo-2); }
.carta-eroe__prezzo { margin-top: 2px; font-size: 1.0625rem; font-weight: 900; line-height: 1.25; letter-spacing: -.015em; color: var(--giallo); }
.carta-eroe__prezzo small { margin-left: 5px; font-family: 'Arimo', 'Roboto', sans-serif; font-size: .625rem; font-weight: 700; letter-spacing: .06em; color: var(--testo-3); }
.carte-eroe__vuoto { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; padding: 22px; border: 1px dashed var(--filo-tenue); border-radius: 14px; color: var(--testo-2); }
.carte-eroe__vuoto strong { display: block; margin-bottom: 2px; font-size: 1.0625rem; color: var(--testo); }

/* Dove le schede sono piu' strette, tipo e dati vanno a capo invece di finire coi puntini */
@media (max-width: 379px), (min-width: 900px) and (max-width: 999px) {
  .carta-eroe__corpo > .carta-eroe__tipo, .carta-eroe__corpo > .carta-eroe__dati { white-space: normal; }
}
/* Telefono stretto: tessere e pillole piu' piccole, tutto resta dentro */
@media (max-width: 379px) {
  .tessera > span { padding: 8px 8px 7px; }
  .tessera__auto { height: 30px; }
  .scelta > span { padding: 0 9px; gap: 6px; font-size: .78rem; }
  .eroe__schede [role='tab'] { padding: 0 10px; }
}

/* ---------- Dal tablet: occhiello, titolo su una riga, ricerca e bottone sulla stessa riga ---------- */
@media (min-width: 600px) {
  .eroe__occhiello { display: flex; justify-content: center; align-items: center; gap: 14px; min-height: 36px; margin-bottom: clamp(4px, 1.2vh, 12px); font-family: 'Arimo', 'Roboto', sans-serif; font-size: .75rem; font-weight: 700; letter-spacing: .24em; text-transform: uppercase; color: var(--giallo-3); }
  /* Lo spazio dopo l'ultima lettera si toglie: la scritta resta centrata davvero fra i due fili */
  .eroe__occhiello-testo { margin-right: -.24em; }
  .eroe__filo { width: 38px; height: 1px; background: linear-gradient(90deg, transparent, var(--giallo-3)); }
  .eroe__filo:last-child { transform: scaleX(-1); }
  .eroe__titolo { font-size: clamp(2.75rem, min(5.6vw, 9vh), 5.25rem); }
  .eroe__titolo .riga { display: inline; }
  .eroe__sotto { margin-top: clamp(8px, 1.6vh, 16px); font-size: clamp(1rem, 1.2vw, 1.125rem); }
  .eroe__sotto strong { display: inline; }
  .eroe__sotto-lungo { display: inline; }
  .ricerca { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: 'campo azioni' 'tipi tipi' 'filtri filtri'; gap: 12px; margin-top: clamp(16px, 2.8vh, 28px); padding: 14px; border-radius: 20px; }
  .ricerca__campo { grid-area: campo; }
  .ricerca__tipi { grid-area: tipi; }
  .ricerca__filtri { grid-area: filtri; }
  .ricerca__azioni { grid-area: azioni; }
  .ricerca__vai { min-width: 220px; min-height: 50px; }
  .scelta .largo { display: inline; }
  .scelta .corto { display: none; }
  .eroe__fiducia { margin-top: 16px; }
  .fiducia--garanzia { display: inline-flex !important; }
  .eroe__auto { margin-top: clamp(18px, 3vh, 32px); }
  .eroe__auto-testa { margin-bottom: 14px; }
  .eroe__schede [role='tab'] { padding: 0 16px; font-size: .84375rem; }
  .eroe__schede .largo { display: inline; }
  .eroe__schede .corto { display: none; }
  .eroe__tutte { width: auto; height: 42px; border: 0; border-radius: 0; font-size: .9375rem; font-weight: 700; }
  .eroe__tutte-testo { position: static; width: auto; height: auto; overflow: visible; clip: auto; }
  .carte-eroe { gap: 14px; }
  .carta-eroe a { border-radius: 16px; }
  .carta-eroe__anno { top: 10px; left: 10px; padding: 5px 9px; font-size: .75rem; }
}
/* Le fasce del budget su una riga sola, tutte larghe uguali */
@media (min-width: 660px) {
  .ricerca__budget .ricerca__pillole { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .ricerca__budget .scelta:last-child:nth-child(odd) { grid-column: auto; }
}
@media (min-width: 660px) and (max-width: 899px) {
  .ricerca__budget .scelta > span { padding: 0 6px; gap: 6px; }
  .ricerca__budget .euro { margin-left: -6px; }
}
@media (min-width: 1100px) and (max-width: 1239px) {
  .ricerca__budget .euro { display: none; }
}
@media (min-width: 768px) {
  .fiducia--permuta { display: inline-flex !important; }
}
@media (min-width: 900px) {
  .ricerca__tessere { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
  .carte-eroe { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
  .carta-eroe__corpo { padding: 14px 16px 16px; }
  .carta-eroe__tipo { font-size: .6875rem; letter-spacing: .16em; }
  .carta-eroe__nome { font-size: 1.125rem; }
  .carta-eroe__versione { font-size: .8125rem; }
  .carta-eroe__dati { margin-top: 12px; padding-top: 12px; font-size: .78rem; }
  .carta-eroe__prezzo { margin-top: 4px; font-size: 1.25rem; }
}
/* Dove le schede sono larghe abbastanza, dati e prezzo stanno sulla stessa riga, sotto un filo che li attraversa */
@media (min-width: 1280px) {
  .carta-eroe__corpo { grid-template-columns: minmax(0, 1fr) auto; }
  .carta-eroe__tipo, .carta-eroe__nome, .carta-eroe__versione { grid-column: 1 / -1; }
  .carta-eroe__dati, .carta-eroe__prezzo { margin-top: 12px; padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, .08); }
  .carta-eroe__dati { align-self: center; }
  .carta-eroe__prezzo { padding-left: 12px; text-align: right; }
  .carta-eroe__prezzo small { display: block; margin: 0; line-height: 1.2; }
}
/* Dove c'e' altezza si vedono i nomi dei gruppi */
@media (min-width: 600px) and (min-height: 761px) {
  .ricerca__etichetta { position: static; float: left; width: 100%; height: auto; margin: 0 0 8px; overflow: visible; clip: auto; font-family: 'Arimo', 'Roboto', sans-serif; font-size: .6875rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--testo-3); }
  .ricerca__etichetta + * { clear: both; }
}

/* ---------- Dal computer ---------- */
@media (min-width: 1100px) {
  /* Sulla home la riga dei recapiti in cima si toglie: il telefono e' nella riga del voto */
  body.con-eroe { --alto-testata: 96px; }
  body.con-eroe .testata__info { display: none; }
  .eroe { padding: calc(var(--alto-testata) + clamp(12px, 3.4vh, 40px)) 0 clamp(40px, 6vh, 64px); }
  .ricerca { gap: clamp(12px, 1.6vh, 16px) 12px; padding: clamp(14px, 2vh, 20px) clamp(14px, 1.8vw, 22px); border-radius: 22px; }
  .ricerca__campo { height: clamp(50px, 6.6vh, 60px); padding-left: 18px; }
  .ricerca__campo input { font-size: 1.0625rem; }
  .ricerca__vai { min-width: 240px; font-size: 1.03125rem; }
  .ricerca__azzera { padding: 0 18px; }
  .tessera > span { min-height: clamp(66px, 9.4vh, 86px); padding: 12px 14px 11px; border-radius: 14px; }
  .tessera__auto { max-width: clamp(84px, 7.6vw, 124px); height: clamp(34px, 3.4vw, 46px); }
  .tessera__nome { font-size: .90625rem; }
  .tessera small { font-size: .78rem; }
  .tessera > span::after { top: 9px; right: 9px; width: 18px; height: 18px; background-size: 12px; }
  .tessera input:checked + span small { margin-right: 24px; }
  /* Budget a sinistra, «per te» a destra, sulla stessa riga */
  .ricerca__filtri { display: flex; align-items: flex-end; gap: 12px 22px; }
  .ricerca__budget { flex: 1 1 auto; }
  .ricerca__extra { flex: none; }
  .ricerca__extra .ricerca__pillole { display: flex; gap: 8px; }
  .scelta > span { height: 42px; padding: 0 14px; font-size: .84375rem; }
  .ricerca__budget .scelta > span { padding: 0 10px; }
  .fiducia--tel { display: inline-flex !important; }
  .eroe__fiducia { margin-top: clamp(12px, 2.2vh, 20px); font-size: .84375rem; }
  .eroe__fiducia > li { padding: 0 18px; }
}
@media (min-width: 1100px) and (max-width: 1239px) {
  .ricerca__extra .largo { display: none; }
  .ricerca__extra .corto { display: inline; }
}
/* Portatili bassi (1366x657, 1280x720): le tessere si stendono, tutto un poco piu' stretto */
@media (min-width: 1100px) and (max-height: 760px) {
  .eroe { padding-top: calc(var(--alto-testata) + 8px); }
  .eroe__occhiello { min-height: 30px; margin-bottom: 2px; }
  .eroe__sotto { margin-top: 6px; font-size: 1rem; }
  .ricerca { margin-top: 14px; gap: 10px 12px; padding: 12px 16px; }
  .ricerca__campo, .ricerca__vai, .ricerca__azzera { height: 48px; min-height: 48px; }
  .tessera > span { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: 'auto nome' 'auto n'; align-content: center; column-gap: 10px; row-gap: 2px; min-height: 54px; padding: 7px 14px; }
  .tessera__auto { align-self: center; width: 50px; max-width: 50px; height: 24px; object-position: center; }
  .tessera__nome { align-self: end; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .tessera small { align-self: start; }
  .tessera small::after { content: ' auto'; }
  .tessera > span::after { top: 50%; margin-top: -9px; }
  .tessera input:checked + span small { margin-right: 0; }
  .tessera input:checked + span .tessera__nome { margin-right: 26px; }
  .scelta > span { height: 38px; }
  .eroe__fiducia { margin-top: 12px; }
  .eroe__auto { margin-top: 16px; }
  .eroe__auto-testa { margin-bottom: 12px; }
}

/* ---------- L'ingresso: lo schermo che si avvicina, il titolo che sale, il pannello e le auto che arrivano.
   I numeri sono giusti dal primo istante: li scrive la pagina. Con «riduci movimento» niente di tutto questo ---------- */
@media (prefers-reduced-motion: no-preference) {
  .eroe__schermo { animation: avvicina 7s var(--dolce) both; }
  body.con-eroe .testata { animation: scende .7s var(--dolce) .05s backwards; }
  .eroe__occhiello-testo { animation: affiora .7s var(--dolce) .1s backwards; }
  .eroe__filo { animation: filo-occhiello .9s var(--dolce) .2s backwards; }
  .eroe__titolo .parola > span { animation: parola-sale .95s var(--dolce) backwards; animation-delay: calc(.16s + var(--i, 0) * 70ms); }
  .eroe__sotto { animation: affiora .8s var(--dolce) .48s backwards; }
  .ricerca { animation: affiora .9s var(--dolce) .6s backwards; }
  .ricerca::before { animation: filo 1.8s var(--curva) 1.3s both; }
  .ricerca__tessere .tessera { animation: affiora .7s var(--dolce) backwards; }
  .ricerca__tessere .tessera:nth-child(1) { animation-delay: .78s; }
  .ricerca__tessere .tessera:nth-child(2) { animation-delay: .83s; }
  .ricerca__tessere .tessera:nth-child(3) { animation-delay: .88s; }
  .ricerca__tessere .tessera:nth-child(4) { animation-delay: .93s; }
  .ricerca__tessere .tessera:nth-child(5) { animation-delay: .98s; }
  .ricerca__tessere .tessera:nth-child(6) { animation-delay: 1.03s; }
  .ricerca__vai::after { animation: lampo 1.1s ease-out 1.6s backwards; }
  .eroe__fiducia { animation: affiora .8s var(--dolce) 1.05s backwards; }
  .eroe__auto-testa { animation: affiora .8s var(--dolce) 1.15s backwards; }
  .eroe:not(.dopo) .carta-eroe { animation: carta-entra .85s var(--dolce) backwards; animation-delay: calc(1.25s + var(--i, 0) * 80ms); }
  /* Dopo l'ingresso, a ogni cambio di scheda o di ricerca le schede arrivano svelte */
  .eroe.dopo .carta-eroe { animation: carta-entra .5s var(--dolce) backwards; animation-delay: calc(var(--i, 0) * 60ms); }
}
@keyframes parola-sale { from { transform: translateY(108%); } to { transform: none; } }
@keyframes filo-occhiello { from { transform: scaleX(0); opacity: 0; } to { opacity: 1; } }
@keyframes carta-entra { from { opacity: 0; transform: translateY(22px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes lampo { from { transform: translateX(-120%); } to { transform: translateX(120%); } }
@keyframes filo { 0% { opacity: 0; background-position: -60% 0; } 15% { opacity: 1; } 100% { opacity: 0; background-position: 160% 0; } }

/* ---------- Schede (tab) di sezione ---------- */
.schede { display: flex; gap: 6px 28px; overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid var(--linea); margin-bottom: 28px; }
.schede::-webkit-scrollbar { display: none; }
.schede--centro { justify-content: safe center; }
.schede button { position: relative; flex: none; border: 0; background: none; padding: 14px 2px; color: var(--testo-2); font-weight: 500; font-size: 1.0625rem; cursor: pointer; }
.schede button::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; border-radius: 3px 3px 0 0; background: var(--giallo); transform: scaleX(0); transition: transform .35s var(--curva); }
.schede button:hover { color: var(--testo); }
.schede button[aria-selected='true'] { color: var(--testo); font-weight: 600; }
.schede button[aria-selected='true']::after { transform: scaleX(1); }
.schede button small { color: var(--testo-3); margin-left: 4px; font-weight: 400; }
[role='tabpanel']:not([hidden]) { animation: affiora .5s var(--curva); }
/* Schede a pulsante (carrozzerie / marche) */
.pulsanti { display: flex; flex-wrap: wrap; gap: 10px; }
.pulsanti button { min-height: 42px; padding: 0 18px; border-radius: 999px; border: 1px solid var(--linea-2); background: var(--carta); font-weight: 500; font-size: .9375rem; cursor: pointer; transition: background-color .2s, border-color .2s; }
.pulsanti button:hover { border-color: var(--testo); }
.pulsanti button[aria-selected='true'] { background: var(--giallo); border-color: var(--giallo); color: var(--su-giallo); font-weight: 600; }

/* ---------- La scheda di un'auto nelle griglie ---------- */
.griglia-auto { display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 0; list-style: none; }
@media (min-width: 760px) { .griglia-auto { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; } }
@media (min-width: 1180px) { .griglia-auto--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 26px; } }
.auto-card { position: relative; display: flex; flex-direction: column; background: var(--carta); border: 1px solid var(--linea); border-radius: var(--raggio); overflow: hidden; transition: box-shadow .35s var(--curva), transform .35s var(--curva), border-color .35s; }
.auto-card:hover { box-shadow: var(--ombra), 0 0 0 1px rgba(223, 197, 27, .45); transform: translateY(-4px); border-color: transparent; }
.auto-card__foto { position: relative; z-index: 2; display: block; aspect-ratio: 4 / 3; background: var(--carta-2); overflow: hidden; }
.auto-card__striscia { display: flex; height: 100%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.auto-card__striscia::-webkit-scrollbar { display: none; }
.auto-card__striscia img { flex: 0 0 100%; width: 100%; height: 100%; object-fit: cover; scroll-snap-align: start; transition: transform .7s var(--curva); }
@media (hover: hover) { .auto-card__striscia { overflow: hidden; } }
.auto-card:hover .auto-card__striscia img { transform: scale(1.05); }
.auto-card__punti { position: absolute; left: 0; right: 0; bottom: 10px; display: flex; justify-content: center; gap: 5px; pointer-events: none; }
.auto-card__punti i { width: 7px; height: 7px; border-radius: 999px; background: rgba(255, 255, 255, .6); box-shadow: 0 1px 3px rgba(0, 0, 0, .3); transition: width .3s var(--curva), background-color .3s; }
.auto-card__punti i.attivo { width: 18px; background: #fff; }
/* Sulla copertina i puntini stanno sul bordo della pedana, sopra il riquadro bianco dell'indirizzo */
.auto-card .auto-card__punti--copertina { bottom: 12%; }
.bollini { position: absolute; left: 12px; right: 12px; top: 12px; display: flex; justify-content: space-between; gap: 6px; pointer-events: none; z-index: 1; }
.bollini > span { display: flex; gap: 6px; }
.bollino { display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 10px; border-radius: 999px; font-size: .75rem; font-weight: 600; background: rgba(0, 0, 0, .95); color: #fff; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.bollino--giallo { background: var(--giallo); color: var(--su-giallo); }
.auto-card__testo { display: flex; flex-direction: column; gap: 6px; padding: 18px 18px 0; flex: 1; }
.auto-card__tipo { display: inline-flex; align-items: center; gap: 7px; font-size: .8125rem; font-weight: 500; color: var(--testo-2); }
.auto-card__tipo::before { content: ''; width: 7px; height: 7px; border-radius: 999px; background: var(--giallo); box-shadow: 0 0 0 3px var(--giallo-chiaro); }
.auto-card__titolo { font-size: 1.125rem; font-weight: 600; line-height: 1.25; }
.auto-card__titolo a { text-decoration: none; }
.auto-card__titolo a::after { content: ''; position: absolute; inset: 0; z-index: 1; }
.auto-card__versione { font-size: .8125rem; color: var(--testo-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.auto-card__dati { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: .8125rem; color: var(--testo-2); padding: 0; list-style: none; margin-top: 2px; }
.auto-card__dati li { display: inline-flex; align-items: center; gap: 5px; }
.auto-card__dati svg { color: var(--testo-3); }
.auto-card__prezzo { font-size: 1.375rem; font-weight: 700; letter-spacing: -0.01em; margin-top: 6px; }
.auto-card__prezzo span { color: var(--giallo); padding: 0; }
/* Il piede della scheda: lo scudo della garanzia a sinistra, «Vedi auto» al centro, il cuore a destra (Zago, 2026-10-21:
   la scritta «Garanzia 12 mesi» finiva sotto il bottone) */
.auto-card__piede { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 8px; padding: 14px 16px 16px; margin-top: 14px; border-top: 1px solid var(--linea); }
.auto-card__nota { justify-self: start; display: inline-flex; align-items: center; min-width: 0; }
.auto-card__garanzia { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 999px; background: rgba(223, 197, 27, .1); color: var(--giallo-3); }
.auto-card__piede .cuore { grid-column: 3; justify-self: end; }
.auto-card__nota { grid-column: 1; }
.auto-card__vedi { grid-column: 2; }
.auto-card__vedi { position: relative; z-index: 2; padding: 0 14px; }
.cuore { position: relative; z-index: 2; width: 40px; height: 40px; border-radius: 999px; display: grid; place-items: center; border: 1px solid var(--linea-2); background: var(--carta); color: var(--testo); cursor: pointer; flex: none; transition: border-color .2s, color .2s, transform .2s; }
.cuore:hover { border-color: var(--testo); }
.cuore::before { content: ''; position: absolute; inset: -5px; border-radius: inherit; }
.cuore[aria-pressed='true'] { color: #ff4d7d; border-color: rgba(255, 77, 125, .45); background: rgba(255, 77, 125, .1); }
.cuore[aria-pressed='true'] svg { animation: battito .45s var(--curva); }
.pieno { opacity: 0; transition: opacity .15s; }
.cuore[aria-pressed='true'] .pieno, .preferite-link.ha-preferite .pieno { opacity: 1; }
.preferite-link.ha-preferite { color: #e0245e; }
/* Sul telefono, due colonne strette */
@media (max-width: 759px) {
  .auto-card__testo { padding: 12px 12px 0; gap: 4px; }
  .auto-card__tipo { font-size: .75rem; }
  .auto-card__titolo { font-size: .9375rem; }
  .auto-card__versione { display: none; }
  .auto-card__dati { font-size: .75rem; gap: 2px 8px; }
  .auto-card__dati li:nth-child(n + 3) { display: none; }
  .auto-card__prezzo { font-size: 1.125rem; }
  .auto-card__piede { padding: 8px 10px 10px; margin-top: 8px; }
  .auto-card__vedi { display: none; }
  .auto-card__garanzia { width: 32px; height: 32px; }
  .auto-card__garanzia svg { width: 17px; height: 17px; }
  .cuore { width: 34px; height: 34px; }
  .bollini { left: 8px; right: 8px; top: 8px; }
  .bollino { height: 22px; padding: 0 7px; font-size: .6875rem; }
  .auto-card__punti { bottom: 7px; }
}
/* Vista a elenco (parco auto) */
@media (min-width: 760px) {
  .griglia-auto.a-elenco { grid-template-columns: minmax(0, 1fr); }
  .a-elenco .auto-card { flex-direction: row; }
  .a-elenco .auto-card__foto { width: 340px; flex: none; aspect-ratio: auto; min-height: 240px; }
  .a-elenco .auto-card__corpo { display: flex; flex-direction: column; flex: 1; }
}
.auto-card__corpo { display: flex; flex-direction: column; flex: 1; }

/* Il nastro di schede che scorre di lato (appena arrivate) */
.nastro-auto { display: grid; grid-auto-flow: column; grid-auto-columns: 78%; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 6px var(--margine) 30px; margin: -6px calc(-1 * var(--margine)) -30px; list-style: none; scroll-padding: 0 var(--margine); }
.nastro-auto::-webkit-scrollbar { display: none; }
.nastro-auto > li { scroll-snap-align: start; }
@media (min-width: 640px) { .nastro-auto { grid-auto-columns: 44%; } }
@media (min-width: 1000px) { .nastro-auto { grid-auto-columns: calc((100% - 3 * 26px) / 4); gap: 26px; margin-left: 0; margin-right: 0; padding-left: 0; padding-right: 0; scroll-padding: 0; } }
.frecce-nastro { display: flex; gap: 8px; }
.frecce-nastro button { width: 46px; height: 46px; border-radius: 999px; border: 1px solid var(--linea-2); background: var(--carta); display: grid; place-items: center; cursor: pointer; transition: background-color .2s, border-color .2s, transform .2s var(--curva); }
.frecce-nastro button:hover { background: var(--giallo); border-color: var(--giallo); color: var(--su-giallo); transform: scale(1.06); }

/* Auto in riga (per budget): foto a sinistra */
.righe-auto { display: grid; gap: 14px; padding: 0; list-style: none; }
@media (min-width: 900px) { .righe-auto { grid-template-columns: 1fr 1fr; gap: 20px; } }
.riga-auto { position: relative; display: grid; grid-template-columns: 42% 1fr; background: var(--carta); border: 1px solid var(--linea); border-radius: var(--raggio); overflow: hidden; transition: box-shadow .3s; }
.riga-auto:hover { box-shadow: var(--ombra-s); }
.riga-auto__foto img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 3; }
.riga-auto__testo { padding: 14px 16px; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.riga-auto__testo h3 { font-size: 1rem; font-weight: 600; line-height: 1.25; }
.riga-auto__testo h3 a { text-decoration: none; }
.riga-auto__testo h3 a::after { content: ''; position: absolute; inset: 0; }
.riga-auto__testo p { font-size: .8125rem; color: var(--testo-2); }
.riga-auto__testo .riga-auto__prezzo { margin-top: auto; font-size: 1.25rem; font-weight: 700; color: var(--testo); }

/* ---------- Carrozzerie e marche ---------- */
.carrozzerie { display: grid; grid-auto-flow: column; grid-auto-columns: 46%; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 var(--margine); scrollbar-width: none; padding: 0 var(--margine) 8px; margin: 0 calc(-1 * var(--margine)); list-style: none; }
.carrozzerie::-webkit-scrollbar { display: none; }
.carrozzerie > li { scroll-snap-align: start; }
@media (min-width: 640px) { .carrozzerie { grid-auto-columns: 30%; } }
@media (min-width: 1000px) { .carrozzerie { grid-auto-flow: row; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 22px; overflow: visible; margin: 0; padding: 0; } }
.carrozzeria { display: grid; gap: 12px; text-align: center; text-decoration: none; }
.carrozzeria__foto { position: relative; display: grid; place-items: center; aspect-ratio: 16 / 11; padding: 14px; border: 1px solid var(--linea); border-radius: var(--raggio); background: radial-gradient(ellipse 70% 45% at 50% 82%, rgba(223, 197, 27, .16), transparent 70%), linear-gradient(180deg, #1c1c1c, #0f0f0f); overflow: hidden; isolation: isolate; transition: border-color .3s, box-shadow .3s; }
.carrozzeria__foto::before { content: ''; position: absolute; left: 12%; right: 12%; bottom: 16%; height: 34%; z-index: -1; border-radius: 50%; background: var(--giallo); filter: blur(18px); opacity: 0; transform: scale(.4); transition: opacity .45s, transform .6s var(--curva); }
.carrozzeria__foto img { width: 100%; height: auto; filter: drop-shadow(0 10px 12px rgba(0, 0, 0, .6)); transition: transform .7s var(--curva); }
.carrozzeria:hover .carrozzeria__foto { border-color: var(--giallo); box-shadow: var(--ombra-s); }
.carrozzeria:hover .carrozzeria__foto::before { opacity: .55; transform: scale(1); }
.carrozzeria:hover .carrozzeria__foto img { transform: translateX(8px) scale(1.06); }
.carrozzeria strong { display: block; font-size: 1.0625rem; font-weight: 600; line-height: 1.2; }
.carrozzeria strong + span { font-size: .875rem; color: var(--testo-3); }
.carrozzeria strong { color: var(--testo); }
.marche { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; padding: 0; list-style: none; }
@media (min-width: 640px) { .marche { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .marche { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; } }
.marca { display: grid; place-items: center; gap: 2px; min-height: 96px; padding: 14px 8px; border-radius: var(--raggio); background: var(--carta); border: 1px solid var(--linea); text-decoration: none; text-align: center; transition: border-color .2s, transform .3s var(--curva), box-shadow .3s; }
.marca:hover { border-color: var(--giallo); transform: translateY(-3px); box-shadow: var(--ombra-s); }
.marca strong { font-size: 1.0625rem; font-weight: 700; line-height: 1.2; letter-spacing: -0.01em; }
.marca span { font-size: .8125rem; color: var(--testo-3); }
.tipi { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding: 0; list-style: none; }
@media (min-width: 760px) { .tipi { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; } }
.tipo { display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: var(--raggio); background: var(--carta); border: 1px solid var(--linea); text-decoration: none; transition: border-color .2s; }
.tipo:hover { border-color: var(--giallo); }
.tipo__icona { flex: none; width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; background: var(--giallo-chiaro); color: var(--testo); }
.tipo strong { display: block; font-weight: 600; line-height: 1.2; }
.tipo > span:last-child > span { font-size: .8125rem; color: var(--testo-3); }
/* I filtri veloci. Sul telefono solo i sei piu' utili, due a due, coi nomi corti e niente da scorrere (Zago,
   2026-10-22: tutti e dodici in una fila che scorreva sbordavano); dai 600 px tre per riga coi nomi interi */
.scorciatoie { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 28px 0 0; padding: 0; }
.scorciatoie a { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 0 18px; border-radius: 999px; background: var(--carta-2); border: 1px solid transparent; text-decoration: none; font-weight: 500; font-size: .9375rem; white-space: nowrap; transition: background-color .2s, border-color .2s, transform .25s var(--curva); }
.scorciatoie a.solo-largo { display: none; }
.scorciatoie a:hover { background: var(--giallo); color: var(--su-giallo); transform: translateY(-2px); }
.scorciatoie a:hover svg, .scorciatoie a:hover .scorciatoie__n { color: var(--su-giallo); }
.scorciatoie a svg { flex: none; color: var(--testo-2); }
.scorciatoie .largo { display: none; }
@media (max-width: 599px) {
  .scorciatoie a { gap: 6px; padding: 0 10px; font-size: .875rem; }
  .scorciatoie a svg { width: 16px; height: 16px; }
}
@media (max-width: 359px) {
  .scorciatoie a { gap: 5px; padding: 0 6px; }
}
@media (min-width: 600px) {
  .scorciatoie { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .scorciatoie .largo { display: inline; }
  .scorciatoie .corto { display: none; }
}
@media (min-width: 1000px) {
  /* Sul computer ci sono tutti, vanno a capo e ogni riga si allunga fino al bordo destro */
  .scorciatoie { grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 30px 0 0; }
  .scorciatoie a { padding: 0 12px; }
  .scorciatoie a.solo-largo { display: inline-flex; }
}
@media (min-width: 1346px) {
  .scorciatoie { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}
.scorciatoie__n { color: var(--testo-3); font-size: .8125rem; }

/* ---------- Le marche che scorrono ---------- */
.nastro { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); margin-top: 34px; }
.nastro__binario { display: flex; width: max-content; animation: nastro 48s linear infinite; }
.nastro:hover .nastro__binario { animation-play-state: paused; }
.nastro ul { display: flex; gap: 0; padding: 0; margin: 0; list-style: none; }
.nastro a { display: block; padding: 8px 30px; font-size: clamp(1.5rem, 1.1rem + 1.5vw, 2.375rem); font-weight: 800; letter-spacing: -0.02em; text-transform: uppercase; color: #a3a3ad; text-decoration: none; white-space: nowrap; transition: color .25s; }
.nastro a:hover { color: var(--testo); }
.nastro li + li a::before, .nastro ul + ul li:first-child a::before { content: '•'; color: var(--giallo); margin-right: 30px; margin-left: -30px; }

/* ---------- Perche' sceglierci: le voci a sinistra, due foto vere a destra ---------- */
.perche { display: grid; gap: 40px; align-items: center; }
@media (min-width: 1000px) { .perche { grid-template-columns: 1fr 1fr; gap: 80px; } }
.perche__lista { display: grid; gap: 8px; padding: 0; list-style: none; margin-top: 28px; }
.perche__voce { display: grid; grid-template-columns: 60px 1fr; gap: 18px; padding: 20px; border-radius: 18px; border: 1px solid transparent; transition: background-color .35s, box-shadow .35s, border-color .35s; }
.perche__voce:hover, .perche__voce--evidenza { background: var(--carta); box-shadow: var(--ombra); border-color: var(--linea); }
.perche__voce .tipo__icona { width: 60px; height: 60px; border-radius: 18px; transition: background-color .3s, transform .4s var(--curva); }
.perche__voce:hover .tipo__icona { background: var(--giallo); color: var(--su-giallo); transform: rotate(-6deg) scale(1.05); }
.perche__voce h3 { font-size: 1.125rem; font-weight: 600; }
.perche__voce p { color: var(--testo-2); font-size: .9375rem; margin-top: 4px; }
.perche__foto { position: relative; min-height: 460px; }
@media (min-width: 640px) { .perche__foto { min-height: 600px; } }
.perche__foto figure { position: absolute; overflow: hidden; border-radius: 22px; box-shadow: var(--ombra); will-change: transform; }
.perche__foto img { width: 100%; height: 100%; object-fit: cover; }
.perche__foto .prima { left: 0; top: 0; width: 62%; height: 74%; }
.perche__foto .seconda { right: 0; bottom: 0; width: 62%; height: 72%; border: 6px solid #fff; }
.perche__foto .prima img { object-position: 40% 60%; }
.perche__foto .seconda img { object-position: 62% 60%; }
.galleggia { position: absolute; z-index: 2; display: inline-flex; align-items: center; gap: 10px; padding: 12px 18px 12px 12px; border-radius: 999px; background: var(--carta); box-shadow: 0 16px 40px rgba(0, 0, 0, .54); font-weight: 600; font-size: .9375rem; white-space: nowrap; animation: galleggia 5s ease-in-out infinite; }
.galleggia svg { width: 30px; height: 30px; padding: 7px; border-radius: 999px; background: var(--giallo); color: var(--su-giallo); }
.galleggia--1 { right: 2%; top: 8%; }
.galleggia--2 { left: 4%; top: 52%; animation-delay: -1.6s; }
.galleggia--3 { left: 18%; bottom: 4%; animation-delay: -3.2s; }
@media (max-width: 639px) { .galleggia { font-size: .8125rem; padding: 9px 14px 9px 9px; } .galleggia svg { width: 26px; height: 26px; padding: 6px; } .galleggia--1 { right: 0; } .galleggia--3 { left: 4%; } }

/* La Q8 con la livrea Bryan Motor */
.livrea { position: relative; border-radius: 24px; background: var(--giallo); padding: 34px 0 26px; overflow: hidden; }
.livrea::before { content: 'BRYAN MOTOR'; position: absolute; left: 0; right: 0; top: 20px; text-align: center; font-size: clamp(2rem, 7vw, 4.5rem); font-weight: 800; letter-spacing: .04em; color: rgba(0, 0, 0, .50); line-height: 1; }
.livrea img { position: relative; width: 108%; max-width: none; margin-left: -4%; margin-top: 38px; filter: drop-shadow(0 22px 22px rgba(0, 0, 0, .3)); }
.livrea.entra img { transform: translateX(60%); opacity: 0; transition: transform 1.4s var(--curva) .15s, opacity .6s .15s; }
.livrea.entra.visto img { transform: none; opacity: 1; }

/* ---------- Cerchi o vendi: due carte e l'auto gialla in mezzo ---------- */
.richiami { display: grid; gap: 20px; align-items: center; margin-top: 40px; }
@media (min-width: 1000px) { .richiami { grid-template-columns: 1fr 1.05fr 1fr; gap: 28px; } }
.richiamo { display: grid; gap: 16px; align-content: start; padding: 30px; border-radius: 22px; background: var(--carta); border: 1px solid var(--linea); transition: box-shadow .35s, transform .35s var(--curva); }
.richiamo:hover { box-shadow: var(--ombra); transform: translateY(-4px); }
.richiamo__testa { display: flex; align-items: center; gap: 16px; }
/* L'icona in una scatola nera col filo d'oro; al passaggio si riempie di giallo e fa il suo gesto */
.richiamo__icona { flex: none; width: 62px; height: 62px; border-radius: 17px; display: grid; place-items: center; border: 1px solid rgba(223, 197, 27, .4); background: radial-gradient(circle at 50% 30%, rgba(255, 221, 0, .14), rgba(255, 221, 0, .03) 70%); color: var(--giallo); transition: background-color .3s, color .3s, border-color .3s, transform .4s var(--curva); }
.richiamo:hover .richiamo__icona { background: var(--giallo); border-color: var(--giallo); color: var(--su-giallo); transform: rotate(-6deg); }
.richiamo__lente { transform-box: view-box; transform-origin: 21px 8.5px; }
.richiamo__cartellino { transform-box: view-box; transform-origin: 23.2px 5.8px; }
.richiamo:hover .richiamo__lente, .richiamo.entra.visto .richiamo__lente { animation: lente-scorre 1.3s var(--curva); }
.richiamo:hover .richiamo__cartellino, .richiamo.entra.visto .richiamo__cartellino { animation: cartellino-oscilla 1.3s ease-in-out; }
@keyframes lente-scorre { 0%, 100% { transform: translate(0, 0); } 30% { transform: translate(-9px, 5px); } 60% { transform: translate(-3px, 7px); } }
@keyframes cartellino-oscilla { 0%, 100% { transform: rotate(0); } 20% { transform: rotate(-18deg); } 45% { transform: rotate(12deg); } 68% { transform: rotate(-6deg); } 85% { transform: rotate(3deg); } }
@media (prefers-reduced-motion: reduce) { .richiamo__lente, .richiamo__cartellino { animation: none !important; } }
.richiamo h3 { font-size: 1.4375rem; font-weight: 600; line-height: 1.2; }
.richiamo p { color: var(--testo-2); font-size: .9375rem; }
.richiamo .btn { justify-self: start; }
.richiami__auto { position: relative; display: grid; place-items: center; order: -1; padding: 10px 0 20px; }
@media (min-width: 1000px) { .richiami__auto { order: 0; padding: 0; } }
/* L'auto gialla nel buio del salone (Artlist, 2026-10-21): i bordi neri della foto sfumano nel fondo della sezione */
.richiami__auto img { position: relative; z-index: 1; width: min(100%, 480px); -webkit-mask-image: radial-gradient(ellipse 66% 70% at 50% 50%, #000 58%, transparent 80%); mask-image: radial-gradient(ellipse 66% 70% at 50% 50%, #000 58%, transparent 80%); }
.richiami__auto::before { content: ''; position: absolute; left: 50%; top: 62%; width: 80%; aspect-ratio: 2.4; border-radius: 50%; background: radial-gradient(ellipse, rgba(255, 221, 0, .16) 0%, rgba(255, 221, 0, 0) 70%); transform: translate(-50%, -50%) scale(.6); opacity: 0; transition: transform 1.2s var(--curva) .2s, opacity 1s .2s; }
.richiami__auto.visto::before { transform: translate(-50%, -50%) scale(1); opacity: 1; }
.richiami__auto.entra img { transform: translateY(70px) scale(.82); opacity: 0; transition: transform 1.1s var(--curva), opacity .6s; }
.richiami__auto.entra.visto img { transform: none; opacity: 1; }

/* ---------- Recensioni ---------- */
.recensioni-testa { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 22px 40px; margin-bottom: 34px; }
.recensioni-testa > div:first-child { display: grid; gap: 10px; max-width: 620px; }
.recensioni-voto { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.recensioni { display: grid; grid-auto-flow: column; grid-auto-columns: 88%; gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 12px var(--margine) 34px; margin: -12px calc(-1 * var(--margine)) 0; list-style: none; scrollbar-width: none; scroll-padding: 0 var(--margine); align-items: stretch; }
.recensioni::-webkit-scrollbar { display: none; }
@media (min-width: 760px) { .recensioni { grid-auto-columns: 46%; } }
@media (min-width: 1100px) { .recensioni { grid-auto-columns: calc((100% - 2 * 26px) / 3); gap: 26px; margin-left: -10px; margin-right: -10px; padding-left: 10px; padding-right: 10px; scroll-padding: 0 10px; } }
.recensioni > li { scroll-snap-align: start; display: flex; }
.recensione { position: relative; flex: 1; width: 100%; background: var(--carta); border-radius: 22px; padding: 26px 26px 24px; display: flex; flex-direction: column; gap: 14px; min-height: 300px; border: 1px solid rgba(0, 0, 0, .25); box-shadow: 0 14px 40px rgba(0, 0, 0, .5); transition: transform .35s var(--curva), box-shadow .35s; }
.recensione:hover { transform: translateY(-4px); box-shadow: 0 22px 50px rgba(0, 0, 0, .6); }
.recensione::after { content: '\201D'; position: absolute; right: 22px; bottom: -14px; font-size: 7rem; line-height: 1; font-weight: 800; color: var(--giallo); opacity: .55; pointer-events: none; }
.recensione__chi { display: grid; grid-template-columns: 52px 1fr auto; align-items: center; gap: 12px; }
.recensione__foto { width: 52px; height: 52px; border-radius: 999px; overflow: hidden; display: grid; place-items: center; background: var(--giallo); color: var(--su-giallo); font-weight: 700; font-size: 1.25rem; box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--giallo-chiaro); }
.recensione__foto img { width: 100%; height: 100%; object-fit: cover; }
.recensione__nome { display: grid; min-width: 0; line-height: 1.25; }
.recensione__nome strong { font-weight: 600; font-size: 1.0625rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.recensione__nome small { color: var(--testo-3); font-size: .8125rem; }
.recensione__g { width: 34px; height: 34px; border-radius: 999px; display: grid; place-items: center; background: var(--carta); box-shadow: 0 2px 10px rgba(0, 0, 0, .08); }
.recensione__stelle { display: flex; gap: 3px; color: #f2b600; }
.recensione blockquote { position: relative; z-index: 1; margin: 0; font-size: 1rem; line-height: 1.65; color: var(--testo-2); }
.recensione blockquote.breve { font-size: 1.25rem; line-height: 1.45; font-weight: 500; color: var(--testo); }
.recensione blockquote.lunga { display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; }
.recensione blockquote.lunga.aperta { display: block; -webkit-line-clamp: unset; }
.recensione__altro { position: relative; z-index: 1; justify-self: start; align-self: flex-start; margin-top: auto; border: 0; padding: 0; background: none; font-weight: 600; font-size: .9375rem; cursor: pointer; text-decoration: underline; text-decoration-color: var(--giallo-3); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.recensioni-punti { display: flex; justify-content: center; gap: 8px; margin-top: 4px; position: relative; z-index: 1; }
/* La recensione intera, in una finestra */
.finestra-recensione { width: min(640px, calc(100% - 32px)); max-height: 86vh; padding: 0; border: 0; border-radius: 24px; background: var(--carta); color: var(--testo); box-shadow: 0 30px 80px rgba(0, 0, 0, .3); }
.finestra-recensione::backdrop { background: rgba(0, 0, 0, .95); backdrop-filter: blur(3px); }
.finestra-recensione[open] { animation: sale .35s var(--curva); }
.finestra-recensione .recensione { box-shadow: none; border: 0; min-height: 0; padding: 30px 30px 34px; }
.finestra-recensione .recensione:hover { transform: none; }
.finestra-recensione .recensione blockquote { display: block; -webkit-line-clamp: unset; overflow: visible; font-size: 1.0625rem; }
.finestra-recensione .recensione__altro { display: none; }
.finestra-recensione__chiudi { position: absolute; right: 12px; top: 12px; z-index: 2; background: var(--carta-2); }
.finestra-recensione .recensione__chi { padding-right: 48px; }
.recensioni-punti button { width: 10px; height: 10px; border-radius: 999px; border: 0; padding: 0; background: rgba(0, 0, 0, .58); cursor: pointer; transition: width .3s var(--curva), background-color .3s; }
.recensioni-punti button[aria-current='true'] { width: 30px; background: var(--testo); }
.voto { display: inline-flex; align-items: center; gap: 14px; padding: 12px 20px 12px 14px; border-radius: 18px; background: var(--carta); border: 1px solid rgba(0, 0, 0, .26); box-shadow: 0 10px 30px rgba(0, 0, 0, .5); text-decoration: none; transition: transform .3s var(--curva); }
.voto:hover { transform: translateY(-2px); }
.voto strong { font-size: 2rem; font-weight: 700; line-height: 1; padding: 6px 12px; border-radius: 12px; background: var(--giallo); color: var(--su-giallo); }
.voto > span { display: grid; gap: 2px; font-size: .875rem; color: var(--testo-2); }
.voto__stelle { display: flex; gap: 2px; color: #f2b600; }

/* ---------- Salone ---------- */
.trovarci { display: grid; gap: 32px; }
@media (min-width: 900px) { .trovarci { grid-template-columns: 1fr 1fr; gap: 64px; align-items: stretch; } }
.trovarci__mappa { display: flex; flex-direction: column; gap: 10px; min-height: 0; }
.recapiti { display: grid; gap: 10px; padding: 0; list-style: none; margin-top: 24px; }
.recapiti li { display: grid; grid-template-columns: 48px 1fr; gap: 14px; align-items: center; padding: 12px; border-radius: var(--raggio); background: var(--carta); border: 1px solid var(--linea); transition: border-color .2s, box-shadow .3s; }
.recapiti li:hover { border-color: var(--giallo); box-shadow: var(--ombra-s); }
.recapiti li > svg, .recapiti .tondo { width: 48px; height: 48px; border-radius: 14px; background: var(--giallo-chiaro); color: var(--testo); padding: 13px; }
.recapiti li { position: relative; }
.recapiti a { text-decoration: none; font-weight: 600; }
.recapiti a::after { content: ''; position: absolute; inset: 0; border-radius: var(--raggio); }
.recapiti small { display: block; color: var(--testo-3); font-size: .8125rem; }
.orari { width: 100%; border-collapse: collapse; font-size: .9375rem; }
.orari th, .orari td { text-align: left; padding: 12px 0; border-bottom: 1px solid var(--linea); font-weight: 400; }
.orari th { color: var(--testo-2); }
.orari td { text-align: right; font-weight: 500; }
.mappa { position: relative; flex: 1; min-height: 0; margin-top: 0; border-radius: 20px; overflow: hidden; border: 1px solid var(--linea); background: var(--carta-2); box-shadow: var(--ombra-s); }
.mappa__immagine { display: block; height: 100%; }
.mappa__immagine img { width: 100%; height: 100%; aspect-ratio: 4 / 5; max-height: 560px; object-fit: cover; object-position: 50% 50%; transition: transform 1.2s var(--curva); }
@media (min-width: 900px) { .mappa__immagine img { aspect-ratio: auto; max-height: none; min-height: 520px; } }
.mappa:hover .mappa__immagine img { transform: scale(1.03); }
.mappa__bottoni { position: absolute; left: 14px; right: 14px; bottom: 14px; display: flex; flex-wrap: wrap; gap: 8px; }
.mappa__bottoni .btn { box-shadow: 0 8px 20px rgba(0, 0, 0, .15); }
@media (max-width: 639px) { .mappa__bottoni { position: static; padding: 12px; background: var(--carta); } .mappa__bottoni .btn { flex: 1 1 auto; box-shadow: none; } }
.mappa__fonte { margin-top: 0; font-size: .75rem; color: var(--testo-3); }
.mappa__fonte a { color: inherit; }

/* ---------- Piede scuro ---------- */
.piede { background: var(--scuro); border-top: 1px solid rgba(223, 197, 27, .25); color: #fff; padding-bottom: calc(24px + var(--barra-mobile)); font-size: .9375rem; }
.piede__punti { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; padding: 44px 0; border-bottom: 1px solid var(--scuro-linea); }
@media (min-width: 900px) { .piede__punti { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.piede__punto { display: grid; grid-template-columns: 54px minmax(0, 1fr); gap: 14px; align-items: center; }
.piede__punto svg { width: 54px; height: 54px; padding: 12px; border-radius: 14px; border: 1px solid var(--scuro-linea); color: var(--giallo); transition: background-color .3s, color .3s, transform .4s var(--curva); }
.piede__punto:hover svg { background: var(--giallo); color: var(--su-giallo); transform: rotate(-8deg); }
.piede__punto strong { display: block; font-weight: 600; line-height: 1.2; font-size: 1.0625rem; }
.piede__punto span { font-size: .875rem; color: #9a9aa4; }
.piede__griglia { display: grid; gap: 34px; padding-top: 48px; }
@media (min-width: 900px) { .piede__griglia { grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; } }
.piede__logo img { height: 64px; width: auto; }
.piede h2 { font-size: 1.125rem; font-weight: 600; margin-bottom: 16px; }
.piede ul { list-style: none; padding: 0; display: grid; gap: 10px; color: #a9a9b3; }
.piede a { text-decoration: none; transition: color .2s; }
.piede a:not(.btn):hover { color: var(--giallo); }
/* Recapiti e orari con l'icona nella scatolina col filo d'oro */
.piede__recapiti a, .piede__orari li { display: inline-flex; align-items: center; gap: 12px; text-align: left; }
.piede__ico { flex: none; display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 11px; border: 1px solid rgba(223, 197, 27, .32); background: rgba(223, 197, 27, .06); color: var(--giallo); transition: background-color .3s, border-color .3s, box-shadow .3s; }
.piede__ico svg { display: block; }
.piede__recapiti a:hover .piede__ico, .piede__orari li:hover .piede__ico { border-color: var(--giallo); background: rgba(223, 197, 27, .14); box-shadow: 0 0 18px rgba(255, 221, 0, .18); }
.piede__orari strong { color: #ececf0; font-weight: 600; }
.piede__orari li.chiuso .piede__ico { color: #8a8a94; border-color: rgba(255, 255, 255, .14); background: none; }
.piede__orari .lancetta { transform-origin: 12px 12px; transform-box: view-box; }
/* I link del sito: la freccia d'oro scorre in avanti */
.piede__voce { display: inline-flex; align-items: center; gap: 8px; }
.piede__voce svg { color: var(--giallo-3); transition: transform .35s var(--curva); }
.piede__voce:hover svg { transform: translateX(4px); }
/* I gesti al passaggio del mouse */
.piede__recapiti a:hover .piede__ico--salto svg { animation: ico-salto .7s var(--curva); }
.piede__recapiti a:hover .piede__ico--squillo svg { animation: ico-squillo .8s ease-in-out; }
.piede__recapiti a:hover .piede__ico--battito svg { animation: ico-battito .7s var(--curva); }
.piede__recapiti a:hover .piede__ico--busta svg { animation: ico-busta .7s var(--curva); }
.piede__orari li:hover .lancetta { animation: ico-giro 1.2s var(--curva); }
.piede__orari li:hover .lancetta--corta { animation-duration: 1.6s; }
/* L'entrata: quando il piede arriva nella finestra, le icone si accendono una dopo l'altra */
.piede.acceso .piede__ico, .piede.acceso .piede__punto > svg { animation: ico-accende .9s var(--curva) calc(var(--i, 0) * 110ms) backwards; }
@keyframes ico-salto { 0%, 100% { transform: translateY(0); } 30% { transform: translateY(-5px); } 55% { transform: translateY(0); } 72% { transform: translateY(-2px); } }
@keyframes ico-squillo { 0%, 100% { transform: rotate(0); } 12%, 36%, 60% { transform: rotate(-16deg); } 24%, 48%, 72% { transform: rotate(16deg); } 84% { transform: rotate(0); } }
@keyframes ico-battito { 0%, 100% { transform: scale(1); } 30% { transform: scale(1.22); } 60% { transform: scale(.94); } }
@keyframes ico-busta { 0%, 100% { transform: rotate(0) translateY(0); } 35% { transform: rotate(-10deg) translateY(-2px); } 70% { transform: rotate(5deg); } }
@keyframes ico-giro { from { transform: rotate(0); } to { transform: rotate(360deg); } }
@keyframes ico-accende { 0%, 100% { transform: scale(1); box-shadow: none; } 40% { transform: scale(1.14); box-shadow: 0 0 22px rgba(255, 221, 0, .32); } }
@media (prefers-reduced-motion: reduce) {
  .piede__ico, .piede__ico svg, .piede__punto > svg, .piede .lancetta, .piede__voce svg { animation: none !important; transition: none !important; }
}
.piede__nota { color: #a9a9b3; font-size: .9375rem; margin: 16px 0 20px; max-width: 36ch; }
@media (max-width: 899px) {
  .piede__punti { grid-template-columns: 1fr 1fr; gap: 26px 14px; }
  .piede__punto { grid-template-columns: 1fr; justify-items: center; gap: 10px; text-align: center; }
  /* Sul telefono a due colonne (Zago, 2026-10-22: tutto in fila veniva «alto 30 metri»): il marchio al centro,
     poi il salone accanto agli orari come una coppia al centro, ognuno largo quanto gli serve (il salone al massimo
     300 px), poi il sito largo esattamente quanto la coppia. Marchio e sito non allargano le colonne (contain) */
  .piede__griglia { grid-template-columns: repeat(2, minmax(0, max-content)); justify-content: center; gap: 30px clamp(16px, 5vw, 32px); padding-top: 36px; }
  .piede__col--marchio, .piede__col--sito { grid-column: 1 / -1; contain: inline-size; }
  .piede__col--marchio { text-align: center; }
  .piede__col--salone { max-width: 300px; }
  .piede__logo img { height: 54px; margin: 0 auto; }
  .piede__nota { margin: 12px auto 16px; }
  .piede h2 { font-size: 1rem; margin-bottom: 12px; }
  .piede__recapiti, .piede__orari { gap: 12px; font-size: .875rem; }
  /* Le icone al centro del loro testo, come sul computer (allineate alla prima riga sembravano storte) */
  .piede__recapiti a, .piede__orari li { gap: 10px; }
  .piede__ico { width: 32px; height: 32px; border-radius: 10px; }
  /* L'email va a capo solo dopo la chiocciola (<wbr>), il numero resta intero, le due fasce degli orari una per riga */
  .piede__recapiti a > span, .piede__orari li > span { min-width: 0; }
  .piede .intero { white-space: nowrap; }
  .piede__fascia { display: block; }
  .piede__fra { display: none; }
  /* Il sito da bordo a bordo (Zago, 2026-10-22): sopra le tre voci corte, a sinistra, al centro e a destra,
     sotto le due lunghe («Valutiamo il tuo usato», «Prova su strada») una a sinistra e una a destra */
  .piede__col--sito ul { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0 10px; font-size: .875rem; }
  .piede__col--sito li { order: 1; }
  .piede__col--sito ul::after { content: ''; order: 2; flex-basis: 100%; }
  .piede__col--sito li.lunga { order: 3; margin-top: 14px; }
  /* Se una voce va a capo (sul 320 «Valutiamo il tuo usato») la freccia resta sulla prima riga, non a meta' */
  .piede__col--sito .piede__voce { align-items: flex-start; }
  .piede__col--sito .piede__voce svg { flex: none; margin-top: calc((1lh - 14px) / 2); }
  .piede__fondo { justify-content: center; text-align: center; margin-top: 34px; }
}
.piede__fondo { margin-top: 44px; padding-top: 22px; border-top: 1px solid var(--scuro-linea); display: flex; flex-wrap: wrap; gap: 8px 24px; color: #8a8a94; font-size: .8125rem; }

/* Torna su, col cerchio che si riempie mentre scorri */
.torna-su { position: fixed; right: 16px; bottom: calc(16px + var(--barra-mobile)); z-index: 45; width: 50px; height: 50px; border-radius: 999px; border: 0; padding: 0; cursor: pointer; background: conic-gradient(var(--giallo) calc(var(--avanzamento, 0) * 360deg), rgba(255, 255, 255, .16) 0); display: grid; place-items: center; opacity: 0; transform: translateY(20px) scale(.8); pointer-events: none; transition: opacity .3s, transform .4s var(--curva); box-shadow: var(--ombra-s); }
.torna-su span { width: 42px; height: 42px; border-radius: 999px; background: var(--scuro); color: #fff; display: grid; place-items: center; }
.torna-su.visibile { opacity: 1; transform: none; pointer-events: auto; }
.torna-su:hover span { background: #000; }

/* ---------- Barra fissa del telefono ---------- */
.barra-mobile { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 8px; padding: 8px 10px calc(8px + env(safe-area-inset-bottom)); background: rgba(10, 10, 10, .94); border-top: 1px solid var(--linea); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 -8px 24px rgba(0, 0, 0, .06); }
.barra-mobile a, .barra-mobile button { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 46px; border-radius: 12px; border: 1px solid var(--linea-2); background: var(--carta-2); color: var(--testo); text-decoration: none; font-size: .875rem; font-weight: 600; cursor: pointer; }
.barra-mobile .wa { background: var(--wa); border-color: var(--wa); color: #fff; }
.barra-mobile .primaria { background: var(--giallo); border-color: var(--giallo); color: var(--su-giallo); }
body.con-barra { --barra-mobile: calc(63px + env(safe-area-inset-bottom)); }
body.con-eroe .barra-mobile { grid-template-columns: 1fr 1fr 1.4fr; grid-auto-flow: row; }
body.con-eroe .barra-mobile .primaria { font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
@media (min-width: 1100px) { .barra-mobile { display: none; } body.con-barra { --barra-mobile: 0px; } }

/* ---------- Pagine interne ---------- */
.testa-pagina { padding: 34px 0 38px; background: radial-gradient(ellipse at 85% 0%, rgba(255, 221, 0, .22), transparent 55%), var(--fondo-2); border-bottom: 1px solid var(--linea); }
@media (min-width: 768px) { .testa-pagina { padding: 48px 0 54px; } }
.testa-pagina .display { font-size: clamp(2rem, 1.4rem + 2.4vw, 3.125rem); }
.briciole { display: flex; flex-wrap: wrap; gap: 6px; font-size: .8125rem; color: var(--testo-3); margin-bottom: 14px; padding: 0; list-style: none; }
.briciole li + li::before { content: '›'; margin-right: 6px; }
.briciole a { text-decoration: none; color: var(--testo-2); }
.briciole a:hover { color: var(--testo); text-decoration: underline; }
.testo-lungo { max-width: 72ch; display: grid; gap: 16px; font-size: 1.0625rem; color: var(--testo-2); }
.testo-lungo strong { color: var(--testo); }
.testo-lungo h2 { font-size: 1.375rem; font-weight: 600; color: var(--testo); margin-top: 16px; }
.testo-lungo ul { padding-left: 1.2em; display: grid; gap: 6px; }
.testo-lungo a { color: var(--testo); text-decoration-color: var(--giallo-3); text-decoration-thickness: 2px; text-underline-offset: 3px; }

/* ---------- Parco auto ---------- */
.parco { display: grid; gap: 20px; padding-top: 24px; padding-bottom: var(--sezione); }
@media (min-width: 1024px) { .parco { grid-template-columns: 300px minmax(0, 1fr); gap: 32px; padding-top: 36px; } }
.parco__barra { position: sticky; top: calc(var(--riga-testata) + 8px); z-index: 30; display: flex; gap: 8px; align-items: center; padding: 10px var(--margine); margin: -24px calc(-1 * var(--margine)) 0; background: rgba(14, 14, 14, .92); border-bottom: 1px solid var(--linea); backdrop-filter: blur(8px); }
.parco__barra .btn { min-height: 44px; padding: 0 18px; }
.parco__barra select { flex: 1; min-width: 0; }
@media (min-width: 1024px) { .parco__barra { display: none; } }
.parco__testa { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 18px; flex-wrap: wrap; }
.parco__conteggio { font-size: 1.125rem; font-weight: 600; }
.parco__conteggio span { color: var(--testo-2); font-weight: 400; font-size: 1rem; }
.parco__strumenti { display: none; align-items: center; gap: 10px; }
@media (min-width: 1024px) { .parco__strumenti { display: flex; } }
.vista { display: inline-flex; gap: 4px; padding: 4px; border-radius: 999px; background: var(--carta); border: 1px solid var(--linea); }
.vista button { width: 36px; height: 36px; border-radius: 999px; border: 0; display: grid; place-items: center; background: transparent; color: var(--testo-2); cursor: pointer; }
.vista button[aria-pressed='true'] { background: var(--giallo); color: var(--su-giallo); }
.campo-select { appearance: none; border: 1px solid var(--linea-2); background: var(--carta); color: var(--testo); padding: 0 38px 0 16px; min-height: 44px; border-radius: 999px; cursor: pointer; font-weight: 500;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23DFC51B' stroke-width='1.6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; }
.campo-select:hover { border-color: var(--testo); }


.filtri-colonna { display: none; }
@media (min-width: 1024px) { .filtri-colonna { display: block; position: sticky; top: calc(var(--riga-testata) + 24px); align-self: start; max-height: calc(100vh - var(--riga-testata) - 40px); overflow: auto; scrollbar-width: thin; border-radius: var(--raggio); } }
.filtri { background: var(--carta); border: 1px solid var(--linea); border-radius: var(--raggio); padding: 20px; display: grid; gap: 4px; }
.filtri__titolo { font-size: 1.125rem; font-weight: 600; margin-bottom: 8px; }
.filtri__gruppo { padding: 14px 0; border-top: 1px solid var(--linea); display: grid; gap: 10px; }
.filtri__gruppo:first-of-type { border-top: 0; padding-top: 4px; }
.filtri__nome { font-size: .875rem; font-weight: 600; display: flex; justify-content: space-between; gap: 8px; }
.filtri__nome output { color: var(--testo-2); font-weight: 500; }
.filtri select, .filtri input[type='text'] { width: 100%; min-height: 44px; border-radius: var(--raggio-s); border: 1px solid var(--linea); background: var(--campo); padding: 0 14px; }
.filtri select { appearance: none; padding-right: 34px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23DFC51B' stroke-width='1.6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; }
.filtri select:disabled { opacity: .5; }
.filtri input[type='text']::placeholder { color: var(--testo-3); }
/* Cursori (uno o due pallini) */
.cursore { position: relative; height: 28px; }
.cursore::before { content: ''; position: absolute; left: 0; right: 0; top: 12px; height: 4px; border-radius: 4px; background: var(--linea-2); }
.cursore__pieno { position: absolute; top: 12px; height: 4px; border-radius: 4px; background: var(--giallo-3); left: var(--da, 0%); right: calc(100% - var(--a, 100%)); }
.cursore input[type='range'] { position: absolute; left: 0; top: 0; width: 100%; height: 28px; margin: 0; background: none; -webkit-appearance: none; appearance: none; pointer-events: none; }
.cursore input[type='range']::-webkit-slider-thumb { -webkit-appearance: none; pointer-events: auto; width: 22px; height: 22px; border-radius: 999px; background: var(--giallo); border: 4px solid #fff; box-shadow: 0 0 0 1px var(--giallo-3), 0 2px 6px rgba(0, 0, 0, .2); cursor: pointer; transition: transform .15s; }
.cursore input[type='range']::-webkit-slider-thumb:hover { transform: scale(1.15); }
.cursore input[type='range']::-moz-range-thumb { pointer-events: auto; width: 16px; height: 16px; border-radius: 999px; background: var(--giallo); border: 4px solid #fff; box-shadow: 0 0 0 1px var(--giallo-3); cursor: pointer; }
.cursore input[type='range']::-webkit-slider-runnable-track { background: transparent; }
.cursore input[type='range']::-moz-range-track { background: transparent; }
.cursore input[type='range']:focus-visible::-webkit-slider-thumb { outline: 2px solid var(--testo); outline-offset: 2px; }
.gettoni { display: flex; flex-wrap: wrap; gap: 6px; }
.gettone { position: relative; }
.gettone input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.gettone span { display: inline-flex; gap: 6px; align-items: baseline; padding: 7px 12px; border-radius: 999px; border: 1px solid var(--linea-2); font-size: .875rem; line-height: 1.3; cursor: pointer; user-select: none; transition: background-color .15s, border-color .15s; }
.gettone span small { color: var(--testo-3); font-size: .75rem; }
.gettone input:checked + span { background: var(--giallo); border-color: var(--giallo); color: var(--su-giallo); }
.gettone input:checked + span small { color: rgba(0, 0, 0, .9); }
.gettone input:focus-visible + span { outline: 2px solid var(--testo); outline-offset: 2px; }
.gettone input:disabled + span { opacity: .35; cursor: default; }
.gettone:hover input:not(:disabled) + span { border-color: var(--testo); }
.interruttore { display: flex; gap: 10px; align-items: center; cursor: pointer; font-size: .9375rem; }
.interruttore input { width: 20px; height: 20px; accent-color: var(--giallo-3); margin: 0; }
.interruttore small { color: var(--testo-3); }
.filtri__azzera { background: none; border: 0; padding: 0; color: var(--testo); text-decoration: underline; text-decoration-color: var(--giallo-3); text-decoration-thickness: 2px; text-underline-offset: 3px; cursor: pointer; font-size: .9375rem; justify-self: start; margin-top: 8px; }

.pannello-filtri { width: 100%; max-width: 100%; max-height: 90vh; max-height: 90dvh; margin: auto 0 0; padding: 0; border: 0; border-radius: 22px 22px 0 0; background: var(--carta); color: var(--testo); }
.pannello-filtri::backdrop { background: rgba(0, 0, 0, .45); }
.pannello-filtri[open] { display: flex; flex-direction: column; animation: sale .3s var(--curva); }
.pannello-filtri__testa { display: flex; justify-content: space-between; align-items: center; padding: 10px 8px 10px var(--margine); border-bottom: 1px solid var(--linea); }
.pannello-filtri__corpo { overflow: auto; padding: 14px var(--margine); flex: 1; }
.pannello-filtri__corpo .filtri { border: 0; padding: 0; background: none; }
.pannello-filtri__corpo .filtri__titolo { display: none; }
.pannello-filtri__piede { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: center; padding: 12px var(--margine) calc(12px + env(safe-area-inset-bottom)); border-top: 1px solid var(--linea); }
.pannello-filtri__piede .filtri__azzera { margin: 0; }
@media (min-width: 1024px) { .pannello-filtri { display: none !important; } }

.filtri-attivi { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; padding: 0; list-style: none; }
.filtri-attivi:empty { display: none; }
.filtri-attivi button { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--giallo-3); background: var(--giallo-chiaro); color: var(--testo); font-size: .8125rem; cursor: pointer; animation: salta .35s var(--curva); }
.filtri-attivi button:hover { background: var(--giallo); color: var(--su-giallo); }
.nessuna { padding: 48px 24px; text-align: center; border: 1px dashed var(--linea-2); border-radius: var(--raggio); display: grid; gap: 14px; justify-items: center; }
.auto-card[hidden], li[hidden] { display: none; }

/* ---------- Scheda dell'auto ---------- */
.galleria { position: relative; margin-top: 8px; }
/* Telefono: una foto per volta da scorrere. Computer: una foto grande e le altre strette in fila */
.galleria__binario { display: flex; gap: 0; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin: 0 calc(-1 * var(--margine)); }
.galleria__binario::-webkit-scrollbar { display: none; }
.galleria__foto { flex: 0 0 100%; scroll-snap-align: start; aspect-ratio: 4 / 3; border: 0; padding: 0; background: var(--carta-2); cursor: zoom-in; overflow: hidden; }
.galleria__foto img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--curva); }
.galleria__foto:hover img { transform: scale(1.04); }
@media (min-width: 900px) {
  .galleria__binario { gap: 12px; margin: 0; }
  .galleria__foto { flex: 0 0 210px; aspect-ratio: auto; height: 460px; border-radius: var(--raggio); }
  .galleria__foto:first-child { flex-basis: min(640px, 52%); }
}
.galleria__comandi { position: absolute; left: 14px; bottom: 14px; display: flex; gap: 8px; }
.galleria__comandi button { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 16px; border-radius: 10px; border: 0; background: var(--carta); color: var(--testo); font-weight: 600; font-size: .875rem; cursor: pointer; box-shadow: var(--ombra-s); }
/* Con la copertina come prima foto «Tutte le foto» va in alto: in basso coprirebbe il riquadro dell'indirizzo */
.galleria--copertina .galleria__comandi { top: 14px; bottom: auto; }
.galleria__contatore { position: absolute; right: 14px; bottom: 14px; background: rgba(0, 0, 0, .95); color: #fff; font-size: .8125rem; font-weight: 600; padding: 6px 12px; border-radius: 999px; pointer-events: none; }
@media (min-width: 900px) { .galleria__contatore { display: none; } }
.galleria__frecce button { position: absolute; top: 50%; translate: 0 -50%; width: 48px; height: 48px; border-radius: 12px; border: 0; background: rgba(14, 14, 14, .92); color: var(--testo); display: none; place-items: center; cursor: pointer; z-index: 2; box-shadow: var(--ombra-s); transition: background-color .2s; }
.galleria__frecce button:hover { background: var(--giallo); color: var(--su-giallo); }
.galleria__frecce .prec { left: 14px; }
.galleria__frecce .succ { right: 14px; }
@media (hover: hover) and (min-width: 900px) { .galleria__frecce button { display: grid; } }

.lightbox { width: 100%; height: 100%; max-width: 100%; max-height: 100%; margin: 0; padding: 0; border: 0; background: #000; color: #fff; }
.lightbox::backdrop { background: #000; }
.lightbox[open] { display: grid; grid-template-rows: auto 1fr; }
.lightbox__testa { display: flex; justify-content: space-between; align-items: center; padding: 8px 8px 8px 20px; font-weight: 600; }
.lightbox .icona-btn:hover { background: rgba(255, 255, 255, .12); }
.lightbox .galleria__binario { margin: 0; height: 100%; gap: 0; }
.lightbox .galleria__foto { flex: 0 0 100% !important; aspect-ratio: auto; height: 100%; background: #000; cursor: default; border-radius: 0; }
.lightbox .galleria__foto img { object-fit: contain; }
.lightbox .galleria__foto:hover img { transform: none; }

.ancore { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 18px 0 4px; margin: 0 calc(-1 * var(--margine)); padding-left: var(--margine); padding-right: var(--margine); }
.ancore::-webkit-scrollbar { display: none; }
.ancore a { flex: none; display: inline-flex; align-items: center; min-height: 42px; padding: 0 18px; border-radius: 999px; border: 1px solid var(--linea-2); text-decoration: none; font-weight: 500; font-size: .9375rem; color: var(--testo-2); transition: background-color .2s, border-color .2s, color .2s; }
.ancore a:hover { color: var(--su-giallo); border-color: var(--giallo); background: var(--giallo); }
@media (min-width: 900px) { .ancore { margin: 0; padding-left: 0; padding-right: 0; } }

.scheda { display: grid; gap: 28px; padding-top: 24px; padding-bottom: var(--sezione); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1024px) { .scheda { grid-template-columns: minmax(0, 1fr) 370px; gap: 44px; } .scheda__lato { position: sticky; top: calc(var(--riga-testata) + 24px); align-self: start; display: grid; gap: 20px; } }
.scheda__titolo h1 { font-size: clamp(1.875rem, 1.3rem + 2.2vw, 2.875rem); font-weight: 700; line-height: 1.1; letter-spacing: -0.02em; }
.scheda__versione { color: var(--testo-2); margin-top: 6px; }
.scheda__dati { display: flex; flex-wrap: wrap; gap: 8px 18px; padding: 0; list-style: none; margin-top: 14px; color: var(--testo-2); font-size: .9375rem; }
.scheda__dati li { display: inline-flex; align-items: center; gap: 7px; }
.scheda__dati svg { color: var(--testo); }
.scheda__prezzo { display: flex; align-items: baseline; flex-wrap: wrap; gap: 12px; margin-top: 16px; }
.scheda__prezzo strong { font-size: clamp(1.875rem, 1.5rem + 1.4vw, 2.625rem); font-weight: 700; letter-spacing: -0.015em; color: var(--giallo); padding: 0; }
.scheda__prezzo span { color: var(--testo-2); font-size: .9375rem; }
.punti { display: flex; flex-wrap: wrap; gap: 8px; padding: 0; list-style: none; margin-top: 16px; }
.punti li { display: inline-flex; align-items: center; gap: 7px; font-size: .875rem; padding: 7px 12px; border-radius: 999px; background: var(--carta-2); }
.punti svg { color: var(--testo); }
.video-auto { width: 100%; height: auto; aspect-ratio: 16 / 9; border-radius: var(--raggio); background: #000; }
.blocco { padding-top: 36px; margin-top: 36px; border-top: 1px solid var(--linea); display: grid; gap: 20px; scroll-margin-top: calc(var(--riga-testata) + 24px); }
.blocco h2 { font-size: 1.5rem; font-weight: 600; }
.panoramica { display: grid; gap: 0 32px; margin: 0; }
@media (min-width: 700px) { .panoramica { grid-template-columns: 1fr 1fr; } }
.panoramica div { display: grid; grid-template-columns: 22px 1fr auto; gap: 12px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--linea); font-size: .9375rem; }
.panoramica svg { color: var(--testo-3); }
.panoramica dt { color: var(--testo-2); }
.panoramica dd { margin: 0; font-weight: 600; text-align: right; }
.dotazioni { display: grid; gap: 10px; }
.dotazioni details { border: 1px solid var(--linea); border-radius: var(--raggio-s); background: var(--carta); overflow: hidden; }
.dotazioni summary { list-style: none; display: flex; align-items: center; gap: 10px; padding: 16px 18px; cursor: pointer; font-weight: 600; }
.dotazioni summary::-webkit-details-marker { display: none; }
.dotazioni summary small { color: var(--testo-3); font-weight: 400; }
.dotazioni summary .giu { margin-left: auto; transition: rotate .25s; color: var(--testo-2); }
.dotazioni details[open] summary .giu { rotate: 180deg; }
.dotazioni ul { display: grid; grid-template-columns: 1fr; gap: 8px 20px; padding: 0 18px 18px; list-style: none; font-size: .9375rem; color: var(--testo-2); }
@media (min-width: 640px) { .dotazioni ul { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .dotazioni ul { grid-template-columns: 1fr 1fr 1fr; } }
.dotazioni li { display: grid; grid-template-columns: 18px 1fr; gap: 8px; align-items: start; }
.dotazioni li svg { color: var(--giallo-3); margin-top: 4px; }

.salone { background: var(--carta); border: 1px solid var(--linea); border-radius: 20px; padding: 24px; display: grid; gap: 16px; box-shadow: var(--ombra-s); }
.salone__chi { display: flex; align-items: center; gap: 14px; padding-bottom: 16px; border-bottom: 1px solid var(--linea); }
.salone__logo { width: 64px; height: 64px; border-radius: 999px; background: var(--scuro); display: grid; place-items: center; overflow: hidden; flex: none; }
.salone__logo img { width: 54px; height: auto; }
.salone__chi strong { display: block; font-size: 1.0625rem; font-weight: 600; }
.salone__chi span:not(.salone__logo) { display: inline-flex; align-items: center; gap: 5px; margin-top: 4px; font-size: .75rem; font-weight: 600; color: var(--testo); background: var(--giallo-chiaro); padding: 3px 10px; border-radius: 999px; }
.salone__prezzo { display: flex; justify-content: space-between; align-items: baseline; }
.salone__prezzo span { color: var(--testo-2); font-size: .875rem; }
.salone__prezzo strong { font-size: 1.75rem; font-weight: 700; color: var(--giallo); padding: 0; }
.salone__riga { display: flex; gap: 10px; align-items: flex-start; color: var(--testo-2); font-size: .875rem; }
.salone__riga svg { flex: none; margin-top: 2px; color: var(--testo-3); }
.salone__azioni { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.salone__azioni .btn--largo { grid-column: 1 / -1; }
.simili-lista { background: var(--carta); border: 1px solid var(--linea); border-radius: 20px; padding: 24px; }
.simili-lista h2 { font-size: 1.25rem; font-weight: 600; }
.simili-lista > p { color: var(--testo-3); font-size: .875rem; margin-top: 2px; }
.simili-lista ul { list-style: none; padding: 0; display: grid; gap: 14px; margin-top: 16px; }
.simile { position: relative; display: grid; grid-template-columns: 96px 1fr; gap: 12px; align-items: center; }
.simile img { width: 96px; height: 72px; object-fit: cover; border-radius: 12px; transition: transform .4s var(--curva); }
.simile:hover img { transform: scale(1.05); }
.simile a { text-decoration: none; font-weight: 600; font-size: .9375rem; line-height: 1.3; }
.simile a::after { content: ''; position: absolute; inset: 0; }
.simile strong { display: block; font-weight: 700; margin-top: 2px; }

/* ---------- Moduli ---------- */
.modulo { display: grid; gap: 14px; }
.modulo__righe { display: grid; gap: 14px; }
@media (min-width: 640px) { .modulo__righe--2 { grid-template-columns: 1fr 1fr; } }
.campo { display: grid; gap: 6px; }
.campo > span, .campo legend { font-size: .875rem; font-weight: 500; color: var(--testo); }
.campo > span small, .campo legend small { font-weight: 400; color: var(--testo-3); }
.campo input[type='text'], .campo input[type='tel'], .campo input[type='email'], .campo input[type='number'], .campo input[type='date'], .campo textarea, .campo select {
  width: 100%; min-height: 50px; padding: 12px 16px; border: 1px solid var(--linea); background: var(--campo); border-radius: var(--raggio-s); font-size: 1rem; color: var(--testo); transition: border-color .2s, background-color .2s; }
.campo input::placeholder, .campo textarea::placeholder { color: var(--testo-3); }
.campo textarea { min-height: 120px; resize: vertical; line-height: 1.5; }
.campo select { appearance: none; padding-right: 40px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23DFC51B' stroke-width='1.6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 16px center; }
.campo input:hover, .campo textarea:hover, .campo select:hover { border-color: var(--linea-2); }
.campo input:focus, .campo textarea:focus, .campo select:focus { border-color: var(--giallo-3); background: var(--carta); outline: 2px solid var(--giallo); outline-offset: 0; }
.campo[data-errore] input, .campo[data-errore] textarea, .campo[data-errore] select { border-color: var(--errore); }
.campo .errore { color: var(--errore); font-size: .8125rem; }
fieldset.campo { border: 0; padding: 0; margin: 0; }
.scelte { display: flex; flex-wrap: wrap; gap: 6px; }
.consenso { display: grid; grid-template-columns: 22px 1fr; gap: 10px; font-size: .875rem; color: var(--testo-2); align-items: start; }
.consenso input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--giallo-3); }
.consenso a { color: var(--testo); }
.esca { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.modulo__nota { font-size: .8125rem; color: var(--testo-3); }
.modulo__esito { padding: 20px; border-radius: var(--raggio-s); background: var(--giallo-chiaro); border: 1px solid var(--giallo-3); display: grid; gap: 10px; }
.modulo__esito a { color: var(--testo); font-weight: 600; }
.modulo__esito--errore { background: #fdecec; border-color: #f2a3a3; }
.foto-caricate { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 0; list-style: none; }
.foto-caricate li { position: relative; aspect-ratio: 4 / 3; background: var(--carta-2); border-radius: 10px; overflow: hidden; }
.foto-caricate img { width: 100%; height: 100%; object-fit: cover; }
.foto-caricate button { position: absolute; top: 4px; right: 4px; width: 28px; height: 28px; border-radius: 999px; border: 0; background: rgba(14, 14, 14, .92); color: var(--testo); cursor: pointer; display: grid; place-items: center; }
.carica-foto { position: relative; display: grid; place-items: center; gap: 6px; padding: 24px; border: 1px dashed var(--linea-2); border-radius: var(--raggio-s); text-align: center; cursor: pointer; font-size: .9375rem; background: var(--fondo-2); transition: border-color .2s, background-color .2s; }
.carica-foto svg { color: var(--testo); }
.carica-foto:hover { border-color: var(--giallo-3); background: var(--giallo-chiaro); }
.carica-foto input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.pannello-modulo { background: var(--carta); border: 1px solid var(--linea); border-radius: 20px; padding: 24px; display: grid; gap: 16px; box-shadow: var(--ombra-s); }
.schede-moduli { display: inline-grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; border-radius: 12px; background: var(--carta-2); }
.schede-moduli button { min-height: 42px; padding: 0 18px; border-radius: 9px; border: 0; background: transparent; color: var(--testo-2); font-weight: 600; cursor: pointer; font-size: .9375rem; transition: background-color .2s, color .2s; }
.schede-moduli button[aria-selected='true'] { background: var(--giallo); color: var(--su-giallo); }
.due-colonne { display: grid; gap: 32px; }
@media (min-width: 960px) { .due-colonne { grid-template-columns: 1.2fr 1fr; gap: 56px; } }
.passi { display: grid; gap: 12px; padding: 0; list-style: none; counter-reset: passo; }
.passi li { display: grid; grid-template-columns: 46px 1fr; gap: 14px; padding: 18px; border-radius: var(--raggio); background: var(--carta); border: 1px solid var(--linea); counter-increment: passo; }
.passi li::before { content: counter(passo); width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; background: var(--giallo); color: var(--su-giallo); font-weight: 700; }
.passi strong { display: block; font-weight: 600; color: var(--testo); }
.passi li > span { color: inherit; }
.passi span { color: var(--testo-2); font-size: .9375rem; }
.rassicura { display: grid; gap: 10px; padding: 0; list-style: none; }
.rassicura li { display: grid; grid-template-columns: 22px 1fr; gap: 10px; color: var(--testo-2); }
.rassicura svg { color: var(--giallo-3); margin-top: 3px; }
.vuoto { padding-top: 64px; padding-bottom: 64px; display: grid; gap: 18px; max-width: 720px; }

/* ---------- Movimento ---------- */
@keyframes avvicina { from { transform: scale(1.14); } to { transform: scale(1); } }
@keyframes affiora { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes scende { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }
@keyframes sale { from { transform: translateY(30px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes galleggia { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes nastro { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes battito { 0% { transform: scale(1); } 35% { transform: scale(1.35); } 60% { transform: scale(.9); } 100% { transform: scale(1); } }
@keyframes salta { 0% { transform: scale(.4); opacity: 0; } 70% { transform: scale(1.12); opacity: 1; } 100% { transform: scale(1); } }

/* Entrate allo scorrimento: solo transform e opacity. Senza JavaScript restano visibili */
.js .entra { opacity: 0; transform: translateY(34px); transition: opacity .8s var(--curva), transform .9s var(--curva); transition-delay: calc(var(--i, 0) * 90ms); }
.js .entra--sinistra { transform: translateX(-46px); }
.js .entra--destra { transform: translateX(46px); }
.js .entra--zoom { transform: scale(.92); }
.js .entra.visto { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; transition-delay: 0s !important; scroll-behavior: auto !important; }
  .nastro__binario { animation: none; }
  .js .entra { opacity: 1; transform: none; }
}

/* I menu a tendina nello stile del sito (Zago, 2026-10-21; in fondo al foglio, cosi' vince sulle regole dei campi): elenco nero col filo d'oro, la voce scelta in giallo.
   Dove il browser lo sa fare (Chrome ed Edge dal 135) la tendina si disegna con appearance: base-select; altrove resta
   quella del sistema, gia' scura (color-scheme: dark), e sul telefono la ruota del sistema, che e' la piu' comoda */
@supports (appearance: base-select) {
  .campo-select, .filtri select, .campo select, .parco__barra select, ::picker(select) { appearance: base-select; }
  /* Il testo al centro in altezza, come nei campi del sito */
  .campo-select, .filtri select, .campo select, .parco__barra select { display: inline-flex; align-items: center; }
  .campo-select::picker-icon, .filtri select::picker-icon, .campo select::picker-icon, .parco__barra select::picker-icon { display: none; }
  ::picker(select) { position-try-order: normal; position-try-fallbacks: flip-inline, flip-block, flip-block flip-inline; margin-top: 6px; margin-bottom: 6px; padding: 6px; min-width: anchor-size(width); max-height: min(360px, 60vh); overflow: auto; background: #0d0d0d; border: 1px solid rgba(223, 197, 27, .42); border-radius: 14px; box-shadow: 0 24px 50px rgba(0, 0, 0, .7); color: var(--testo); scrollbar-width: thin; }
  ::picker(select):popover-open { animation: tendina .18s var(--curva, ease-out); }
  /* «Ordina» sta a destra: l'elenco si apre sotto, allineato al suo bordo destro */
  .campo-select::picker(select) { position-area: block-end span-inline-start; }
  .campo-select option, .filtri select option, .campo select option, .parco__barra select option { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 9px; font-size: .9375rem; font-weight: 500; color: var(--testo); background: none; cursor: pointer; white-space: nowrap; }
  .campo-select option:hover, .filtri select option:hover, .campo select option:hover, .parco__barra select option:hover,
  .campo-select option:focus-visible, .filtri select option:focus-visible, .campo select option:focus-visible, .parco__barra select option:focus-visible { background: rgba(255, 221, 0, .12); outline: none; }
  .campo-select option:checked, .filtri select option:checked, .campo select option:checked, .parco__barra select option:checked { color: var(--giallo); font-weight: 700; box-shadow: inset 2px 0 0 var(--giallo); }
  .campo-select option::checkmark, .filtri select option::checkmark, .campo select option::checkmark, .parco__barra select option::checkmark { order: 1; margin-left: auto; color: var(--giallo); }
  .campo-select option:disabled, .filtri select option:disabled, .campo select option:disabled, .parco__barra select option:disabled { opacity: .4; cursor: default; }
}
@keyframes tendina { from { opacity: 0; transform: translateY(-4px); } }
@media (prefers-reduced-motion: reduce) { ::picker(select):popover-open { animation: none; } }