/* ==========================================================================
   AUTOSAPIO — Pagine (filtri, archivio, scheda, tab, wizard, finance, ecc.)
   ========================================================================== */

/* Prose / breadcrumb */
.asp-prose { max-width: 80ch; }
.asp-prose h2 { margin-top: var(--sp-6); }
.asp-breadcrumb { font-size: .85rem; color: var(--asp-muted); margin-bottom: var(--sp-3); }
.asp-breadcrumb a { color: var(--asp-silver); }

/* ------------------------------- Ricerca (rail segmentato) ------------------------------- */
.asp-catalog .asp-search { margin: var(--sp-4) 0 var(--sp-6); }
.asp-catalog__grid { margin-top: var(--sp-2); }
.asp-search { position: relative; }

.asp-search__rail {
	display: flex; align-items: stretch;
	background: var(--asp-surface); border: 1px solid var(--asp-border);
	border-radius: 999px; padding: 6px 6px 6px 8px;
	box-shadow: var(--shadow-2);
}
.asp-search__seg {
	flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 2px;
	padding: 8px 22px; border-right: 1px solid var(--asp-border);
}
.asp-search__seg:last-of-type { border-right: 0; }
.asp-search__seg label { font-size: .68rem; text-transform: uppercase; letter-spacing: .07em; color: var(--asp-muted); font-weight: 700; cursor: pointer; }
.asp-search__seg select {
	width: 100%; border: 0; background: transparent; color: var(--asp-text);
	font-family: var(--asp-font-display); font-weight: 600; font-size: .95rem; cursor: pointer;
	padding: 0 18px 0 0; appearance: none; -webkit-appearance: none; text-overflow: ellipsis;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%239AA4B2' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E");
	background-repeat: no-repeat; background-position: right center;
}
.asp-search__seg select:focus { outline: none; color: var(--asp-accent-2); }
.asp-search__seg select option { background: var(--asp-surface-2); color: var(--asp-text); }
.asp-search__go {
	flex-shrink: 0; display: inline-flex; align-items: center; gap: 8px;
	background: var(--asp-accent); color: #fff; border: 0; border-radius: 999px; cursor: pointer;
	padding: 0 28px; margin-left: 8px; font-family: var(--asp-font-display); font-weight: 700; font-size: 1rem;
	box-shadow: var(--shadow-glow); transition: background .2s, transform .15s var(--ease);
}
.asp-search__go:hover { background: var(--asp-accent-2); color: #04122e; transform: translateY(-1px); }
.asp-search__go svg { display: block; }

.asp-search__foot { display: flex; align-items: center; gap: var(--sp-3); margin-top: var(--sp-3); padding-inline: var(--sp-4); }
.asp-search__more, .asp-search__reset {
	background: none; border: 0; cursor: pointer; font-family: var(--asp-font-body);
	color: var(--asp-silver); font-weight: 600; font-size: .88rem;
	display: inline-flex; align-items: center; gap: 6px; padding: 6px 2px;
}
.asp-search__more:hover, .asp-search__reset:hover { color: var(--asp-accent-2); }
.asp-search__reset { margin-left: auto; }
.asp-search__chev { transition: transform .25s var(--ease); font-size: .7rem; }
.asp-search.is-open .asp-search__chev { transform: rotate(180deg); }

.asp-search__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .32s var(--ease); }
.asp-search.is-open .asp-search__panel { grid-template-rows: 1fr; }
.asp-search__panel-inner { overflow: hidden; min-height: 0; }
.asp-search__grid {
	display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--sp-3);
	margin-top: var(--sp-3); padding: var(--sp-4); background: var(--asp-surface); border: 1px solid var(--asp-border); border-radius: var(--radius);
}
.asp-search__grid label { display: flex; flex-direction: column; gap: 5px; }
.asp-search__grid label > span { font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: var(--asp-muted); font-weight: 600; }
.asp-search__grid input, .asp-search__grid select {
	width: 100%; padding: 11px 13px; border-radius: var(--radius-sm);
	background: var(--asp-surface-2); border: 1px solid var(--asp-border); color: var(--asp-text); font: inherit;
}
.asp-search__grid input:focus, .asp-search__grid select:focus { border-color: var(--asp-accent); box-shadow: 0 0 0 3px rgba(46,125,255,.2); outline: none; }

@media (max-width: 880px) {
	.asp-search__rail { flex-direction: column; align-items: stretch; border-radius: var(--radius-lg); padding: var(--sp-2); }
	.asp-search__seg { border-right: 0; border-bottom: 1px solid var(--asp-border); padding: 11px 14px; }
	.asp-search__seg:last-of-type { border-bottom: 0; }
	.asp-search__seg select { font-size: 1rem; }
	.asp-search__go { width: 100%; justify-content: center; margin: var(--sp-2) 0 0; padding: 15px; }
	.asp-search__foot { padding-inline: var(--sp-2); }
}

/* ------------------------------- Archivio ------------------------------- */
.asp-archive { display: grid; grid-template-columns: 300px 1fr; gap: var(--sp-6); align-items: start; }
.asp-archive__filters { position: sticky; top: calc(var(--header-h) + 12px); }

/* La barra di ricerca è pensata per essere larga (hero); nella sidebar stretta
   dell'archivio i segmenti vanno impilati come nel breakpoint mobile. */
.asp-archive__filters .asp-search__rail { flex-direction: column; align-items: stretch; border-radius: var(--radius-lg); padding: var(--sp-2); }
.asp-archive__filters .asp-search__seg { border-right: 0; border-bottom: 1px solid var(--asp-border); padding: 11px 14px; }
.asp-archive__filters .asp-search__seg:last-of-type { border-bottom: 0; }
.asp-archive__filters .asp-search__seg select { font-size: .95rem; }
.asp-archive__filters .asp-search__go { width: 100%; justify-content: center; margin: var(--sp-2) 0 0; padding: 15px; }
.asp-archive__filters .asp-search__foot { padding-inline: var(--sp-2); }
.asp-archive__toolbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--sp-4); }
.asp-archive__count { font-weight: 600; }
.asp-archive__view { display: flex; gap: var(--sp-2); }
.asp-card__placeholder { display: grid; place-items: center; height: 100%; font-family: var(--asp-font-display); letter-spacing: .2em; color: var(--asp-muted); }

/* Vista lista */
.asp-grid--list { grid-template-columns: 1fr; }
.asp-grid--list .asp-card { flex-direction: row; }
.asp-grid--list .asp-card__media { width: 38%; aspect-ratio: auto; }

.asp-archive__pager .page-numbers { display: inline-grid; place-items: center; min-width: 40px; height: 40px; padding: 0 10px; margin: 2px; border-radius: 10px; background: var(--asp-surface); border: 1px solid var(--asp-border); color: var(--asp-text); }
.asp-archive__pager .page-numbers.current { background: var(--asp-accent); color: #fff; }
.asp-archive__pager { margin-top: var(--sp-6); text-align: center; }

.asp-loading { opacity: .5; pointer-events: none; transition: opacity .2s; }

/* ------------------------------- Scheda auto ------------------------------- */
.asp-single { padding-block: var(--sp-5) var(--sp-9); }
.asp-single__top { display: grid; grid-template-columns: 1.5fr 1fr; gap: var(--sp-6); margin: var(--sp-4) 0 var(--sp-7); }
.asp-gallery__main { position: relative; cursor: zoom-in; }
.asp-gallery__main img { width: 100%; border-radius: var(--radius); aspect-ratio: 16/10; object-fit: cover; background: var(--asp-surface-2); display: block; }
.asp-gallery__arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border-radius: 50%; border: 0; background: rgba(14,17,22,.6); backdrop-filter: blur(6px); color: #fff; font-size: 1.8rem; line-height: 1; cursor: pointer; display: grid; place-items: center; transition: background .2s; }
.asp-gallery__arrow:hover { background: var(--asp-accent); }
.asp-gallery__arrow--prev { left: 10px; }
.asp-gallery__arrow--next { right: 10px; }
.asp-lightbox { position: fixed; inset: 0; z-index: 999; background: rgba(0,0,0,.92); display: flex; align-items: center; justify-content: center; }
.asp-lightbox img { max-width: 92vw; max-height: 86vh; border-radius: var(--radius-sm); }
.asp-lightbox__close { position: absolute; top: 18px; right: 22px; background: none; border: 0; color: #fff; font-size: 2.4rem; cursor: pointer; line-height: 1; }
.asp-lightbox__nav { position: absolute; top: 50%; transform: translateY(-50%); width: 54px; height: 54px; border-radius: 50%; border: 0; background: rgba(255,255,255,.12); color: #fff; font-size: 2rem; cursor: pointer; }
.asp-lightbox__prev { left: 3vw; } .asp-lightbox__next { right: 3vw; }
.asp-gallery__thumbs { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--sp-2); margin-top: var(--sp-2); }
.asp-gallery__thumb { padding: 0; border: 2px solid transparent; border-radius: 8px; overflow: hidden; cursor: pointer; background: none; aspect-ratio: 1; }
.asp-gallery__thumb img { width: 100%; height: 100%; object-fit: cover; }
.asp-gallery__thumb.is-active { border-color: var(--asp-accent); }

.asp-single__summary { background: var(--asp-surface); border: 1px solid var(--asp-border); border-radius: var(--radius); padding: var(--sp-5); position: sticky; top: calc(var(--header-h) + 12px); }
.asp-single__title { font-size: var(--asp-fs-600); }
.asp-single__price { font-family: var(--asp-font-display); font-weight: 800; font-size: var(--asp-fs-800); color: #fff; }
.asp-single__quickspecs { list-style: none; padding: 0; margin: var(--sp-3) 0; display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); color: var(--asp-muted); }
.asp-single__cta { margin-top: var(--sp-4); }
.asp-single__trust { margin-top: var(--sp-5); }
.asp-single__forms { margin-top: var(--sp-7); }

/* Tabs */
.asp-tabs { background: var(--asp-surface); border: 1px solid var(--asp-border); border-radius: var(--radius); overflow: hidden; }
.asp-tabs__nav { display: flex; gap: 0; overflow-x: auto; border-bottom: 1px solid var(--asp-border); }
.asp-tab { background: none; border: 0; padding: var(--sp-4) var(--sp-5); color: var(--asp-muted); font-family: var(--asp-font-display); font-weight: 600; cursor: pointer; white-space: nowrap; border-bottom: 2px solid transparent; }
.asp-tab.is-active { color: var(--asp-text); border-bottom-color: var(--asp-accent); }
.asp-tabs__panel { padding: var(--sp-5); }
.asp-spectable { width: 100%; border-collapse: collapse; }
.asp-spectable th, .asp-spectable td { text-align: left; padding: 10px 8px; border-bottom: 1px solid var(--asp-border); }
.asp-spectable th { color: var(--asp-muted); font-weight: 500; width: 40%; }
.asp-equip { columns: 2; list-style: none; padding: 0; }
.asp-equip li { padding: 4px 0 4px 22px; position: relative; }
.asp-equip li::before { content: "✓"; position: absolute; left: 0; color: var(--asp-success); }

/* Sticky CTA mobile */
.asp-sticky-cta { position: fixed; bottom: 0; left: 0; right: 0; z-index: 90; display: none; gap: var(--sp-2); padding: var(--sp-3); background: color-mix(in srgb, var(--asp-bg) 92%, transparent); backdrop-filter: blur(10px); border-top: 1px solid var(--asp-border); }
.asp-sticky-cta .asp-btn { flex: 1; justify-content: center; }

/* ------------------------------- Multimarche ------------------------------- */
.asp-brands-sec h2 { margin-bottom: var(--sp-5); }
.asp-brands { position: relative; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.asp-brands__track { display: flex; gap: var(--sp-4); width: max-content; animation: asp-marquee 44s linear infinite; will-change: transform; }
.asp-brands:hover .asp-brands__track { animation-play-state: paused; }
@keyframes asp-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.asp-brand { flex: 0 0 auto; width: 150px; height: 100px; background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.07); border-radius: var(--radius); display: grid; place-items: center; padding: 20px 24px; transition: transform .25s var(--ease), background .25s, border-color .25s, box-shadow .25s; }
.asp-brand:hover { transform: translateY(-5px); background: rgba(255,255,255,.06); border-color: rgba(46,125,255,.35); box-shadow: 0 14px 34px rgba(0,0,0,.4); }
.asp-brand img { max-width: 100%; max-height: 50px; width: auto; height: auto; object-fit: contain; filter: brightness(0) invert(1); opacity: .55; transition: opacity .25s, filter .25s; }
.asp-brand:hover img { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .asp-brands__track { animation: asp-marquee 44s linear infinite !important; } }
@media (max-width: 600px) { .asp-brand { width: 122px; height: 88px; padding: 16px; } }

/* ------------------------------- Servizi (feature grid premium) ------------------------------- */
.asp-services { position: relative; overflow: hidden; }
.asp-services__bg { position: absolute; inset: 0; z-index: 0; pointer-events: none;
	background:
		radial-gradient(60% 70% at 50% -10%, rgba(46,125,255,.12), transparent 60%),
		radial-gradient(40% 60% at 100% 100%, rgba(90,160,255,.07), transparent 60%); }
.asp-services > .asp-container { position: relative; z-index: 1; }
.asp-services__head { margin-bottom: var(--sp-7); max-width: 760px; }
.asp-services__lead { color: var(--asp-muted); font-size: var(--asp-fs-500); margin: var(--sp-3) 0 0; }
.asp-services__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-4); }

.asp-svc { position: relative; overflow: hidden; isolation: isolate;
	background: linear-gradient(180deg, var(--asp-surface), color-mix(in srgb, var(--asp-surface-2) 70%, var(--asp-surface)));
	border: 1px solid var(--asp-border); border-radius: var(--radius-lg); padding: var(--sp-6) var(--sp-5) var(--sp-5);
	transition: transform .25s var(--ease), border-color .25s, box-shadow .25s; }
/* Linea d'accento superiore che cresce all'hover */
.asp-svc::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
	background: linear-gradient(90deg, var(--asp-accent), var(--asp-accent-2));
	transform: scaleX(0); transform-origin: left; transition: transform .4s var(--ease); }
.asp-svc:hover { transform: translateY(-6px); border-color: rgba(46,125,255,.45); box-shadow: 0 22px 50px rgba(0,0,0,.45); }
.asp-svc:hover::before { transform: scaleX(1); }
.asp-svc__num { position: absolute; top: var(--sp-4); right: var(--sp-5); z-index: -1;
	font-family: var(--asp-font-display); font-weight: 800; font-size: 2.6rem; line-height: 1;
	color: transparent; -webkit-text-stroke: 1px rgba(255,255,255,.10);
	transition: -webkit-text-stroke-color .3s; pointer-events: none; }
.asp-svc:hover .asp-svc__num { -webkit-text-stroke-color: rgba(90,160,255,.45); }
.asp-svc__icon { display: inline-grid; place-items: center; width: 58px; height: 58px; border-radius: 16px;
	background: linear-gradient(135deg, rgba(46,125,255,.30), rgba(46,125,255,.05));
	border: 1px solid rgba(46,125,255,.25); color: var(--asp-accent-2); margin-bottom: var(--sp-4);
	transition: transform .25s var(--ease), box-shadow .25s; }
.asp-svc:hover .asp-svc__icon { transform: scale(1.07); box-shadow: 0 8px 26px rgba(46,125,255,.35); }
.asp-svc__title { font-size: var(--asp-fs-500); margin-bottom: var(--sp-2); }
.asp-svc__text { margin: 0; font-size: .94rem; color: var(--asp-muted); line-height: 1.6; }

/* Story / Chi siamo */
.asp-story__inner { display: grid; grid-template-columns: 1.05fr 1fr; gap: var(--sp-7); align-items: center; }
.asp-video { position: relative; margin: 0; }
.asp-video__glow { position: absolute; inset: -12% -8%; z-index: 0; background: radial-gradient(50% 55% at 60% 28%, rgba(46,125,255,.38), transparent 70%); filter: blur(45px); pointer-events: none; }
.asp-video__frame { position: relative; z-index: 1; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--asp-border); box-shadow: 0 30px 70px rgba(0,0,0,.5); }
.asp-video video { width: 100%; display: block; background: #000; aspect-ratio: 16/10; object-fit: cover; }
.asp-video figcaption { margin-top: var(--sp-3); font-size: .85rem; text-align: center; }
.asp-video__badge { position: absolute; top: 12px; left: 12px; z-index: 2; display: inline-flex; align-items: center; gap: 7px; background: rgba(14,17,22,.55); backdrop-filter: blur(8px); border: 1px solid var(--asp-border); border-radius: 999px; padding: 6px 12px; font-size: .72rem; font-weight: 600; color: var(--asp-silver); text-transform: uppercase; letter-spacing: .06em; }
.asp-video__badge-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--asp-accent-2); box-shadow: 0 0 0 0 rgba(46,125,255,.6); animation: asp-pulse-blue 2.2s infinite; }
@keyframes asp-pulse-blue { 0% { box-shadow: 0 0 0 0 rgba(46,125,255,.5); } 70% { box-shadow: 0 0 0 8px rgba(46,125,255,0); } 100% { box-shadow: 0 0 0 0 rgba(46,125,255,0); } }
.asp-video__controls { position: absolute; bottom: 12px; right: 12px; z-index: 2; display: flex; gap: 8px; }
.asp-video__btn { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%; background: rgba(14,17,22,.6); backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,.18); color: #fff; cursor: pointer; transition: background .2s, transform .2s; }
.asp-video__btn:hover { background: var(--asp-accent); transform: translateY(-2px); }
/* Audio: di default muto -> mostra icona "muto" */
.asp-video__ico--on { display: none; }
.asp-video:not(.is-muted) .asp-video__ico--muted { display: none; }
.asp-video:not(.is-muted) .asp-video__ico--on { display: block; }
/* Play/Pausa: di default in riproduzione -> mostra icona "pausa" */
.asp-video__ico--play { display: none; }
.asp-video.is-paused .asp-video__ico--pause { display: none; }
.asp-video.is-paused .asp-video__ico--play { display: block; }

/* Stats premium */
.asp-story__stats { display: flex; margin: var(--sp-6) 0; background: linear-gradient(180deg, var(--asp-surface), var(--asp-surface-2)); border: 1px solid var(--asp-border); border-radius: var(--radius-lg); padding: var(--sp-5) var(--sp-3); }
.asp-stat { flex: 1; text-align: center; padding: 0 var(--sp-2); position: relative; }
.asp-stat + .asp-stat::before { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 1px; height: 58%; background: var(--asp-border); }
.asp-stat strong { display: block; font-family: var(--asp-font-display); font-size: clamp(1.9rem, 4vw, 2.6rem); font-weight: 800; line-height: 1; background: linear-gradient(135deg, var(--asp-accent-2), #aecbff 70%, #fff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.asp-stat span { display: block; margin-top: 7px; color: var(--asp-muted); font-size: .85rem; }
/* Mobile: la fascia numeri diventa una griglia 2×2 così nessun dato esce dal box */
@media (max-width: 640px) {
	.asp-story__stats { display: grid; grid-template-columns: 1fr 1fr; row-gap: var(--sp-5); column-gap: var(--sp-2); padding: var(--sp-5) var(--sp-4); }
	.asp-stat { padding: 0 var(--sp-2); }
	.asp-stat + .asp-stat::before { display: none; }
	.asp-stat:nth-child(even)::before { content: ""; display: block; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 1px; height: 58%; background: var(--asp-border); }
}

/* Dove siamo */
.asp-dove__addr { font-size: 1.05rem; }

/* ------------------------------- Parco auto in evidenza ------------------------------- */
.asp-featured__count { color: var(--asp-muted); font-size: .95rem; align-self: center; }
.asp-featured__count strong { color: var(--asp-accent-2); font-family: var(--asp-font-display); font-size: 1.4rem; }
.asp-quickfilters { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-5); }
.asp-quickfilters .asp-chip { text-decoration: none; display: inline-flex; align-items: center; gap: 6px; padding: 9px 15px; font-size: .9rem; }
.asp-quickfilters .asp-chip span { background: rgba(255,255,255,.1); color: var(--asp-silver); border-radius: 999px; padding: 1px 7px; font-size: .72rem; }
.asp-quickfilters .asp-chip.is-active span,
.asp-quickfilters .asp-chip:hover span { background: rgba(0,0,0,.2); color: #fff; }
.asp-featured__more { text-align: center; margin-top: var(--sp-6); }
.asp-catalog__empty { text-align: center; color: var(--asp-muted); font-size: 1.05rem; padding: var(--sp-7) var(--sp-4); background: var(--asp-surface); border: 1px dashed var(--asp-border); border-radius: var(--radius); margin-top: var(--sp-4); }

/* ------------------------------- Wizard ------------------------------- */
.asp-wizard__box { background: var(--asp-surface); border: 1px solid var(--asp-border); border-radius: var(--radius-lg); padding: var(--sp-6); margin-top: var(--sp-5); }
.asp-chips { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.asp-chip { background: var(--asp-surface-2); border: 1px solid var(--asp-border); color: var(--asp-text); padding: 12px 18px; border-radius: 999px; cursor: pointer; font-weight: 600; transition: .15s; }
.asp-chip:hover, .asp-chip.is-active { background: var(--asp-accent); border-color: var(--asp-accent); color: #fff; transform: translateY(-2px); }

/* ------------------------------- Finance ------------------------------- */
.asp-finance__row { display: grid; grid-template-columns: repeat(3,1fr); gap: var(--sp-3); }
.asp-finance__row label { display: flex; flex-direction: column; gap: 4px; font-size: .85rem; color: var(--asp-muted); }
.asp-finance__result { display: flex; align-items: baseline; justify-content: space-between; margin: var(--sp-4) 0 var(--sp-2); padding: var(--sp-4); background: var(--asp-surface-2); border-radius: var(--radius); }
.asp-finance__rata { font-family: var(--asp-font-display); font-size: var(--asp-fs-700); color: var(--asp-accent-2); }
.asp-finance__disclaimer { font-size: .78rem; }

/* ------------------------------- Dove siamo ------------------------------- */
.asp-dove { display: grid; grid-template-columns: 1fr 1.4fr; gap: var(--sp-6); margin-top: var(--sp-5); align-items: start; }
.asp-dove__info .asp-btn { margin-top: var(--sp-4); }
.asp-dove__map iframe { display: block; width: 100%; }
@media (max-width: 900px) { .asp-dove { grid-template-columns: 1fr; } }

/* ------------------------------- FAQ ------------------------------- */
.asp-faq__item { border-bottom: 1px solid var(--asp-border); }
.asp-faq__q { width: 100%; text-align: left; background: none; border: 0; color: var(--asp-text); font-family: var(--asp-font-display); font-weight: 600; font-size: 1.05rem; padding: var(--sp-4) 0; display: flex; justify-content: space-between; cursor: pointer; }
.asp-faq__a { padding-bottom: var(--sp-4); color: var(--asp-muted); }

/* ------------------------------- Cookie banner ------------------------------- */
.asp-cookie { position: fixed; bottom: var(--sp-4); left: var(--sp-4); right: var(--sp-4); max-width: 520px; margin-inline: auto; z-index: 200; background: var(--asp-surface); border: 1px solid var(--asp-border); border-radius: var(--radius); padding: var(--sp-4); box-shadow: var(--shadow-2); }
.asp-cookie p { font-size: .88rem; color: var(--asp-muted); margin-bottom: var(--sp-3); }

/* Liste varie */
.asp-checklist, .asp-contact-list { list-style: none; padding: 0; display: flex; flex-direction: column; gap: var(--sp-2); }
.asp-checklist li { padding-left: 26px; position: relative; }
.asp-checklist li::before { content: "✓"; position: absolute; left: 0; color: var(--asp-success); font-weight: 700; }
.asp-notice--placeholder { background: var(--asp-surface); border: 1px dashed var(--asp-border); border-radius: var(--radius); padding: var(--sp-5); }

/* ------------------------------- Responsive ------------------------------- */
@media (max-width: 900px) {
	.asp-archive { grid-template-columns: 1fr; }
	.asp-archive__filters { position: static; }
	.asp-single__top { grid-template-columns: 1fr; }
	.asp-single__summary { position: static; }
	.asp-finance__row { grid-template-columns: 1fr; }
	.asp-equip { columns: 1; }
	.asp-story__inner { grid-template-columns: 1fr; }
	.asp-services__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
	.asp-services__grid { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
	.asp-sticky-cta { display: flex; }
	.asp-single { padding-bottom: 90px; }
	.asp-gallery__thumbs { grid-template-columns: repeat(4,1fr); }
}

/* ==========================================================================
   SEZIONI AGGIUNTIVE (home estesa, pagine, scheda)
   ========================================================================== */
.asp-mt-3 { margin-top: var(--sp-3); }
.asp-services__head.asp-center { margin-left: auto; margin-right: auto; }

/* ------- Come funziona (percorso a tappe collegato) ------- */
.asp-flow { list-style: none; padding: 0; margin: var(--sp-7) 0 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-4); position: relative; }
.asp-flow__step { position: relative; text-align: center; padding: 0 var(--sp-3); }
/* linea di collegamento tra un marker e il successivo */
.asp-flow__step:not(:last-child)::before { content: ""; position: absolute; top: 33px; left: 50%; width: 100%; height: 2px; z-index: 0;
	background: linear-gradient(90deg, var(--asp-accent), rgba(46,125,255,.12)); }
.asp-flow__marker { position: relative; z-index: 1; width: 66px; height: 66px; margin: 0 auto var(--sp-4); border-radius: 50%; display: grid; place-items: center;
	background: radial-gradient(circle at 32% 28%, #5aa0ff, var(--asp-accent));
	box-shadow: 0 0 0 6px color-mix(in srgb, var(--asp-accent) 16%, transparent), 0 14px 30px rgba(46,125,255,.40);
	transition: transform .25s var(--ease), box-shadow .25s; }
.asp-flow__step:hover .asp-flow__marker { transform: translateY(-4px) scale(1.06); box-shadow: 0 0 0 8px color-mix(in srgb, var(--asp-accent) 22%, transparent), 0 18px 38px rgba(46,125,255,.55); }
.asp-flow__num { font-family: var(--asp-font-display); font-weight: 800; font-size: 1.6rem; color: #fff; line-height: 1; }
.asp-flow__title { font-size: var(--asp-fs-500); margin-bottom: var(--sp-2); }
.asp-flow__text { margin: 0 auto; max-width: 32ch; color: var(--asp-muted); font-size: .92rem; line-height: 1.6; }
@media (max-width: 760px) {
	.asp-flow { grid-template-columns: 1fr; gap: 0; }
	.asp-flow__step { display: flex; gap: var(--sp-4); text-align: left; padding: 0 0 var(--sp-6); }
	.asp-flow__marker { margin: 0; flex-shrink: 0; width: 54px; height: 54px; }
	.asp-flow__num { font-size: 1.35rem; }
	.asp-flow__text { margin: 0; max-width: none; }
	.asp-flow__step:not(:last-child)::before { top: 54px; left: 27px; width: 2px; height: calc(100% - 54px);
		background: linear-gradient(180deg, var(--asp-accent), rgba(46,125,255,.12)); }
}

/* ------- Recensioni ------- */
.asp-reviews__score { margin-top: var(--sp-3); color: var(--asp-muted); }
.asp-reviews__score strong { color: #fff; font-family: var(--asp-font-display); font-size: 1.1rem; }
.asp-stars { color: #ffc23d; letter-spacing: 2px; }
.asp-reviews__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-4); margin-top: var(--sp-6); }
.asp-review { margin: 0; background: var(--asp-surface); border: 1px solid var(--asp-border); border-radius: var(--radius-lg); padding: var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-3); transition: transform .25s var(--ease), border-color .25s; }
.asp-review:hover { transform: translateY(-4px); border-color: rgba(46,125,255,.35); }
.asp-review__text { margin: 0; color: var(--asp-silver); line-height: 1.65; font-size: .98rem; }
.asp-review__by { display: flex; align-items: center; gap: var(--sp-3); margin-top: auto; }
.asp-review__avatar { width: 42px; height: 42px; border-radius: 50%; flex-shrink: 0; display: grid; place-items: center; font-family: var(--asp-font-display); font-weight: 700; color: #fff; background: linear-gradient(135deg, var(--asp-accent), var(--asp-accent-2)); }
.asp-review__meta { display: flex; flex-direction: column; line-height: 1.25; }
.asp-review__meta strong { color: var(--asp-text); }
.asp-review__meta span { color: var(--asp-muted); font-size: .82rem; }

/* ------- Fascia CTA (permuta) ------- */
.asp-cta-band { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-5); flex-wrap: wrap; background: linear-gradient(135deg, color-mix(in srgb, var(--asp-accent) 22%, var(--asp-surface)), var(--asp-surface)); border: 1px solid rgba(46,125,255,.3); border-radius: var(--radius-lg); padding: var(--sp-6); }
.asp-cta-band__text { max-width: 640px; }
.asp-cta-band__text h2 { margin: var(--sp-1) 0 var(--sp-2); }
.asp-cta-band__text p { margin: 0; color: var(--asp-silver); }
.asp-cta-band__actions { display: flex; gap: var(--sp-3); flex-wrap: wrap; }

/* ------- CTA finale ------- */
.asp-cta-final__box { text-align: center; background: radial-gradient(70% 120% at 50% 0%, rgba(46,125,255,.18), transparent 70%), var(--asp-surface); border: 1px solid var(--asp-border); border-radius: var(--radius-lg); padding: var(--sp-9) var(--sp-5); }
.asp-cta-final__box h2 { margin: 0 0 var(--sp-2); }
.asp-cta-final__box p { margin: 0 auto var(--sp-5); color: var(--asp-muted); max-width: 560px; }
.asp-cta-final__actions { display: flex; gap: var(--sp-3); justify-content: center; flex-wrap: wrap; }

/* ------- CTA WhatsApp (banner centrato) ------- */
.asp-cta-wa__inner { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--sp-3); max-width: 620px; margin-inline: auto; }
.asp-cta-wa__inner h2 { margin: 0; }
.asp-cta-wa__inner p { margin: 0; }

/* ------- FAQ (icona +/x) ------- */
.asp-faq__wrap { max-width: 820px; }
.asp-faq__icon { font-family: var(--asp-font-display); font-weight: 400; font-size: 1.5rem; line-height: 1; color: var(--asp-accent-2); transition: transform .25s var(--ease); }
.asp-faq__q[aria-expanded="true"] .asp-faq__icon { transform: rotate(45deg); }

/* ------- Timeline (chi siamo) ------- */
.asp-timeline { list-style: none; padding: 0; margin: var(--sp-6) 0 0; position: relative; }
.asp-timeline::before { content: ""; position: absolute; left: 18px; top: 8px; bottom: 8px; width: 2px; background: linear-gradient(180deg, var(--asp-accent), transparent); }
.asp-timeline__item { position: relative; padding: 0 0 var(--sp-6) 56px; }
.asp-timeline__item:last-child { padding-bottom: 0; }
.asp-timeline__dot { position: absolute; left: 9px; top: 2px; width: 20px; height: 20px; border-radius: 50%; background: var(--asp-accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--asp-accent) 25%, transparent); }
.asp-timeline__year { font-family: var(--asp-font-display); font-weight: 700; color: var(--asp-accent-2); }
.asp-timeline__title { margin: 2px 0 4px; font-size: var(--asp-fs-500); }
.asp-timeline__text { margin: 0; color: var(--asp-muted); line-height: 1.6; max-width: 70ch; }

/* ------- Contatti — card di contatto ------- */
.asp-contact-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-4); margin: var(--sp-5) 0 var(--sp-6); }
.asp-contact-card { display: flex; gap: var(--sp-3); align-items: center; background: var(--asp-surface); border: 1px solid var(--asp-border); border-radius: var(--radius-lg); padding: var(--sp-5); text-decoration: none; color: inherit; transition: transform .25s var(--ease), border-color .25s; }
.asp-contact-card:hover { transform: translateY(-4px); border-color: rgba(46,125,255,.4); }
.asp-contact-card__ico { flex-shrink: 0; width: 48px; height: 48px; border-radius: 12px; display: grid; place-items: center; color: var(--asp-accent-2); background: linear-gradient(135deg, rgba(46,125,255,.30), rgba(46,125,255,.05)); border: 1px solid rgba(46,125,255,.25); }
.asp-contact-card strong { display: block; color: var(--asp-text); }
.asp-contact-card span span { color: var(--asp-muted); font-size: .9rem; }

/* ------- Scheda — rata + trust ------- */
.asp-single__rata { display: flex; align-items: baseline; gap: 8px; margin: 6px 0 0; color: var(--asp-muted); font-size: .9rem; }
.asp-single__rata strong { font-family: var(--asp-font-display); font-size: 1.3rem; color: var(--asp-accent-2); }
.asp-single__trust { padding-top: var(--sp-4); border-top: 1px solid var(--asp-border); }
.asp-trust { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.asp-trust__item { display: flex; align-items: center; gap: 10px; color: var(--asp-silver); font-size: .92rem; }
.asp-trust__check { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 20px; height: 20px; border-radius: 50%; background: rgba(39,194,139,.16); color: var(--asp-success); font-size: .68rem; font-weight: 700; }
.asp-single__finenote { margin: var(--sp-3) 0 0; font-size: .72rem; color: var(--asp-muted); line-height: 1.4; }

/* ------- Responsive nuove griglie ------- */
@media (max-width: 900px) {
	.asp-reviews__grid { grid-template-columns: 1fr 1fr; }
	.asp-contact-cards { grid-template-columns: 1fr; }
	.asp-cta-band { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 600px) {
	.asp-reviews__grid { grid-template-columns: 1fr; }
}

/* ------- Riga di icone aperta (es. "Come raggiungerci") ------- */
.asp-iconrow { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-5); margin-top: var(--sp-7); }
.asp-iconrow__item { text-align: center; padding: 0 var(--sp-4); position: relative; }
.asp-iconrow__item + .asp-iconrow__item::before { content: ""; position: absolute; left: 0; top: 6px; bottom: 6px; width: 1px; background: linear-gradient(180deg, transparent, var(--asp-border) 20%, var(--asp-border) 80%, transparent); }
.asp-iconrow__ico { display: inline-grid; place-items: center; width: 76px; height: 76px; border-radius: 50%; margin-bottom: var(--sp-4); color: var(--asp-accent-2);
	background: radial-gradient(circle at 32% 28%, rgba(46,125,255,.22), transparent 70%); border: 1px solid rgba(46,125,255,.30);
	transition: transform .25s var(--ease), box-shadow .25s, border-color .25s; }
.asp-iconrow__item:hover .asp-iconrow__ico { transform: translateY(-4px); border-color: rgba(46,125,255,.6); box-shadow: 0 12px 30px rgba(46,125,255,.30); }
.asp-iconrow__item h3 { font-size: var(--asp-fs-500); margin-bottom: var(--sp-2); }
.asp-iconrow__item p { margin: 0 auto; max-width: 34ch; color: var(--asp-muted); font-size: .92rem; line-height: 1.6; }
@media (max-width: 760px) {
	.asp-iconrow { grid-template-columns: 1fr; gap: var(--sp-6); }
	.asp-iconrow__item + .asp-iconrow__item::before { display: none; }
}

/* ------- Pannelli orizzontali con barra d'accento (es. "In sede trovi") ------- */
.asp-panels { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-4); margin-top: var(--sp-7); }
.asp-panel { display: flex; gap: var(--sp-4); align-items: flex-start; background: var(--asp-surface); border: 1px solid var(--asp-border); border-left: 3px solid var(--asp-accent); border-radius: var(--radius); padding: var(--sp-5);
	transition: transform .25s var(--ease), border-color .25s, box-shadow .25s; }
.asp-panel:hover { transform: translateY(-4px); border-left-color: var(--asp-accent-2); box-shadow: 0 18px 40px rgba(0,0,0,.42); }
.asp-panel__ico { flex-shrink: 0; width: 48px; height: 48px; border-radius: 12px; display: grid; place-items: center; color: var(--asp-accent-2); background: linear-gradient(135deg, rgba(46,125,255,.30), rgba(46,125,255,.05)); border: 1px solid rgba(46,125,255,.25); }
.asp-panel__body h3 { font-size: var(--asp-fs-500); margin: 2px 0 6px; }
.asp-panel__body p { margin: 0; color: var(--asp-muted); font-size: .92rem; line-height: 1.55; }
@media (max-width: 760px) { .asp-panels { grid-template-columns: 1fr; } }

/* ------- Recensioni: badge verificato + avatar immagine ------- */
.asp-review__top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.asp-review__verified { display: inline-flex; align-items: center; gap: 5px; font-size: .74rem; font-weight: 700; letter-spacing: .01em; color: var(--asp-accent-2); white-space: nowrap; }
.asp-review__verified svg { display: block; }
.asp-review__meta strong { display: inline-flex; align-items: center; gap: 5px; }
.asp-review__meta strong svg { display: block; flex-shrink: 0; }
img.asp-review__avatar { object-fit: cover; }

/* ==========================================================================
   ANIMAZIONI & MICRO-INTERAZIONI
   ========================================================================== */
/* Numeri statistici con shimmer luminoso */
.asp-stat strong { background-size: 220% auto; animation: asp-shimmer 6s linear infinite; }
@keyframes asp-shimmer { to { background-position: 220% center; } }

/* CTA finale: aurora animata di sfondo */
.asp-cta-final__box { position: relative; overflow: hidden; isolation: isolate; }
.asp-cta-final__box::before { content: ""; position: absolute; inset: -40% -10%; z-index: -1; pointer-events: none;
	background: radial-gradient(40% 50% at 30% 30%, rgba(46,125,255,.28), transparent 60%), radial-gradient(40% 50% at 70% 60%, rgba(90,160,255,.20), transparent 60%);
	animation: asp-aurora 12s ease-in-out infinite alternate; }
@keyframes asp-aurora { 0% { transform: translate3d(-6%, -4%, 0) rotate(0deg); } 100% { transform: translate3d(6%, 4%, 0) rotate(8deg); } }

/* Sweep luminoso sui bottoni grandi */
.asp-btn--lg { position: relative; overflow: hidden; }
.asp-btn--lg::after { content: ""; position: absolute; top: 0; left: -130%; width: 55%; height: 100%; transform: skewX(-20deg);
	background: linear-gradient(100deg, transparent, rgba(255,255,255,.28), transparent); transition: left .6s var(--ease); pointer-events: none; }
.asp-btn--lg:hover::after { left: 150%; }

/* Glow morbido all'hover delle card recensione */
.asp-review:hover { box-shadow: 0 18px 44px rgba(0,0,0,.45), 0 0 0 1px rgba(46,125,255,.25); }

/* Avatar recensione: leggero zoom all'hover della card */
.asp-review img.asp-review__avatar { transition: transform .3s var(--ease); }
.asp-review:hover img.asp-review__avatar { transform: scale(1.06); }

@media (prefers-reduced-motion: reduce) {
	.asp-stat strong, .asp-cta-final__box::before { animation: none !important; }
	.asp-btn--lg::after { transition: none; }
}


/* --- Scheda auto su telefono: prima titolo e prezzo, poi le foto -----------
   In colonna singola la galleria finiva sopra al riquadro con titolo e prezzo:
   aprendo la scheda da telefono non si vedeva subito ne' quale auto fosse ne'
   quanto costasse. `display: contents` toglie l'aside come contenitore e
   promuove i suoi figli a figli diretti della colonna, cosi' si possono
   ordinare uno per uno: prima il titolo, poi le foto, poi prezzo e dati. I pulsanti restano sempre a portata di mano nella
   barra fissa in fondo allo schermo. Il desktop non e' toccato. */
@media (max-width: 900px) {
	.asp-single__top { display: flex; flex-direction: column; gap: var(--sp-4); }
	.asp-single__summary { display: contents; }

	.asp-single__title      { order: 1; }
	.asp-gallery            { order: 2; }
	.asp-single__price      { order: 3; }
	.asp-single__quickspecs { order: 4; }
	.asp-single__cta        { order: 5; }
	.asp-single__trust      { order: 6; }

	/* l'aside non fa piu' da riquadro: lo diamo al blocco dei pulsanti */
	.asp-single__cta {
		background: var(--asp-surface);
		border: 1px solid var(--asp-border);
		border-radius: var(--radius);
		padding: var(--sp-4);
	}
}