/* Autoricambi Avarello — foglio di stile — revisione MENU-4 del 05/10/2026 */
/* ============================================================
Autoricambi Avarello - foglio di stile unico
Palette: inchiostro / acciaio / rosso Avarello (dal logo) / blu diagnostico
============================================================ */
:root{
--inchiostro:#15181C;
--inchiostro-2:#262C32;
--acciaio:#5E6A72;
--acciaio-chiaro:#8E999F;
--base:#E9EDEF;
--base-2:#F4F6F7;
--superficie:#FFFFFF;
--bordo:#D2D9DD;
--accento:#E4222A;
--accento-scuro:#B8181F;
--ambra:#F2B705;
--blu:#123A63;
--verde:#1C7A52;
--rosso:#B3322A;
--sp:clamp(3.5rem,6vw,6rem);
--raggio:3px;
--max:1200px;
--h-testata:84px;
--display:"Archivo",system-ui,sans-serif;
--testo:"IBM Plex Sans",system-ui,sans-serif;
--mono:"IBM Plex Mono",ui-monospace,monospace;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;overflow-x:hidden}
body{
margin:0;background:var(--base);color:var(--inchiostro);
font-family:var(--testo);font-size:17px;line-height:1.65;
padding-bottom:0;overflow-x:hidden;max-width:100vw;
}
img{max-width:100%;height:auto;display:block}
picture{display:contents}
a{color:var(--inchiostro);text-decoration-thickness:1px;text-underline-offset:3px}
h1,h2,h3,h4{font-family:var(--display);font-weight:800;line-height:1.08;letter-spacing:-.02em;margin:0 0 .6em}
h1{font-size:clamp(2.1rem,4.6vw,3.4rem)}
h2{font-size:clamp(1.6rem,3vw,2.3rem)}
h3{font-size:1.2rem;font-weight:700;letter-spacing:-.01em}
p{margin:0 0 1.1em;max-width:70ch}
ul,ol{max-width:70ch}
:focus-visible{outline:3px solid var(--accento);outline-offset:2px}
.salta{position:absolute;left:-9999px;top:0;background:var(--inchiostro);color:#fff;padding:.8rem 1.2rem;z-index:99}
.salta:focus{left:0}
.contenitore{width:min(100% - 2.4rem,var(--max));margin-inline:auto;max-width:100%}
table{max-width:100%}
.sezione,.pie,.hero,.testa-pagina{max-width:100vw}
/* ---------- barra info ---------- */
.barra-info{background:var(--inchiostro);color:#C9D1D6;font-size:.82rem;position:relative;z-index:41}
.barra-info__riga{display:flex;align-items:center;gap:1.2rem;min-height:38px;flex-wrap:wrap}
.barra-info a{color:#fff;text-decoration:none;font-weight:500}
.barra-info a:hover{color:var(--accento)}
.barra-info__luogo{color:var(--acciaio-chiaro)}
.barra-info__tel{margin-left:auto;display:flex;gap:.5rem;align-items:center}
.divisore{width:1px;height:14px;background:#3A4248;display:inline-block}
.stato{display:inline-flex;align-items:center;gap:.45rem;font-weight:600;color:#fff}
.stato::before{content:"";width:8px;height:8px;border-radius:50%}
.stato--aperto::before{background:#39C07B}
.stato--chiuso::before{background:#C9513F}
/* ---------- testata sempre visibile ---------- */
.testata{
position:sticky;top:0;z-index:40;background:var(--superficie);border-bottom:1px solid var(--bordo);
transition:background .25s ease,border-color .25s ease,box-shadow .25s ease
}
.testata__riga{display:flex;align-items:center;gap:1.2rem;min-height:var(--h-testata)}
.marchio{display:flex;align-items:center;gap:.8rem;text-decoration:none;margin-right:auto}
.marchio img{height:48px;width:auto;transition:filter .25s ease}
.marchio__claim{display:block;color:var(--acciaio);font-size:.74rem;letter-spacing:.02em;max-width:14ch;line-height:1.25}
/* max-width:none è obbligatorio: la regola generale ul{max-width:70ch} vale
anche per il menu e lo tagliava a 714px esatti. Le voci però non possono
restringersi, quindi uscivano dal riquadro e l'ultima finiva sotto il
pulsante rosso, senza che la larghezza del riquadro cambiasse di un pixel.
Lo spazio fra le voci è 1.1rem (prima 1.35rem) perché con dieci voci
serve tutto il rigo. */
.menu ul{list-style:none;margin:0;padding:0;display:flex;gap:1.1rem;align-items:center;max-width:none}
/* le voci non vanno mai a capo: con dieci voci "Chi siamo" si spezzava in
due righe e sballava l'altezza della testata */
.menu > ul > li > a{
text-decoration:none;font-weight:600;font-size:.95rem;padding:.5rem 0;display:inline-block;
position:relative;color:var(--inchiostro);transition:color .15s;white-space:nowrap
}
.menu > ul > li{flex:0 0 auto}
.menu > ul > li > a::after{
content:"";position:absolute;left:0;right:100%;bottom:0;height:2px;background:var(--accento);transition:right .2s ease
}
.menu > ul > li > a:hover::after{right:0}
.menu__gruppo{position:relative}
.menu__tendina{
position:absolute;top:100%;left:-1rem;display:none;flex-direction:column;gap:0;
background:var(--superficie);border:1px solid var(--bordo);border-top:3px solid var(--accento);
min-width:250px;padding:.4rem 0;z-index:50;box-shadow:0 18px 40px rgba(10,12,14,.14)
}
/* ------------------------------------------------------------------
APERTURA DELLA TENDINA — una sola strada
Niente :hover, niente :focus-visible, niente classi: l'unica cosa che
può aprirla è l'attributo data-aperta, che mette il JavaScript quando
decide lui. Sopra i 1200px — dove il menu è in orizzontale — la chiusura
è dichiarata !important, così nessun'altra regola, presente o futura,
può riaprirla per sbaglio.
------------------------------------------------------------------ */
@media (min-width:1200px){
.menu__gruppo:not([data-aperta]) .menu__tendina{display:none !important}
.menu__gruppo[data-aperta] .menu__tendina{display:flex}
}
/* ".menu ul" pesa più di ".menu__tendina" e le passava sopra il suo spazio
fra le voci e l'allineamento al centro: la tendina veniva fuori con le
voci centrate e staccate. Qui si rimette in colonna, attaccata. */
.menu ul.menu__tendina{gap:0;align-items:stretch}
.menu__tendina a{display:block;padding:.6rem 1.1rem;text-decoration:none;font-size:.93rem;color:var(--inchiostro)}
.menu__tendina a:hover{background:var(--base-2);box-shadow:inset 3px 0 0 var(--accento)}
.apri-menu{display:none}
/* sopra l'hero la testata è trasparente e diventa piena allo scorrimento */
body.con-hero .testata{background:transparent;border-bottom-color:transparent}
body.con-hero .menu > ul > li > a{color:#fff}
body.con-hero .marchio__claim{color:rgba(255,255,255,.7)}
body.con-hero .marchio img{filter:brightness(0) invert(1)}
body.con-hero .apri-menu span{background:#fff}
body.con-hero .apri-menu em{color:#fff}
.testata.solida{background:var(--superficie);border-bottom-color:var(--bordo);box-shadow:0 6px 24px rgba(10,12,14,.08)}
body.con-hero .testata.solida{background:var(--superficie);border-bottom-color:var(--bordo)}
body.con-hero .testata.solida .menu > ul > li > a{color:var(--inchiostro)}
body.con-hero .testata.solida .marchio img{filter:none}
body.con-hero .testata.solida .marchio__claim{color:var(--acciaio)}
body.con-hero .testata.solida .apri-menu span{background:var(--inchiostro)}
body.con-hero .testata.solida .apri-menu em{color:var(--inchiostro)}
/* ---------- bottoni ---------- */
.bottone{
display:inline-block;padding:.9rem 1.5rem;font-family:var(--display);font-weight:700;font-size:.88rem;
text-transform:uppercase;letter-spacing:.05em;
text-decoration:none;border:2px solid var(--inchiostro);background:var(--inchiostro);color:#fff;
border-radius:var(--raggio);cursor:pointer;transition:background .15s,color .15s,border-color .15s
}
.bottone:hover{background:var(--inchiostro-2);border-color:var(--inchiostro-2)}
.bottone--primario{background:var(--accento);border-color:var(--accento);color:#fff}
.bottone--primario:hover{background:var(--accento-scuro);border-color:var(--accento-scuro);color:#fff}
.bottone--chiaro{background:transparent;color:var(--inchiostro);border-color:var(--inchiostro)}
.bottone--chiaro:hover{background:var(--inchiostro);color:#fff}
.bottone--bordo-chiaro{background:transparent;color:#fff;border-color:rgba(255,255,255,.55)}
.bottone--bordo-chiaro:hover{background:#fff;color:var(--inchiostro);border-color:#fff}
.bottone--scuro{background:var(--inchiostro);border-color:var(--inchiostro);color:#fff}
.bottone--scuro:hover{background:#000;border-color:#000}
.bottone--bordo-scuro{background:transparent;color:var(--inchiostro);border-color:var(--inchiostro)}
.bottone--bordo-scuro:hover{background:var(--inchiostro);color:#fff}
/* gruppo di pulsanti: mai attaccati */
.azioni{display:flex;flex-wrap:wrap;gap:.8rem;align-items:center}
.azioni--fine{justify-content:flex-end}
.azioni--estremi{justify-content:space-between;width:100%}
.sezione p > .bottone + .bottone{margin-left:.8rem}
/* ---------- hero a schermo intero con slide grandi ---------- */
.hero{
position:relative;min-height:100vh;min-height:100svh;margin-top:calc(-1 * var(--h-testata));
display:flex;flex-direction:column;justify-content:flex-end;color:#fff;overflow:hidden;
background:var(--inchiostro);isolation:isolate
}
.hero__sfondo{position:absolute;inset:0;z-index:-2}
.hero__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
/* sotto i 900px e con animazioni ridotte resta l'immagine: il video pesa troppo */
@media (max-width:900px){.hero__video{display:none}}
@media (prefers-reduced-motion:reduce){.hero__video{display:none}}
@media (min-width:901px) and (prefers-reduced-motion:no-preference){
.hero__sfondo--nascosto{opacity:0}
.hero__sfondo--nascosto .hero__punti{display:none}
}
.hero__sfondo img{
position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;
transform:scale(1.08);transition:opacity 1s ease
}
.hero__sfondo img.attiva{opacity:1;transform:scale(1);transition:opacity 1s ease, transform 9s ease-out}
.hero::after{
content:"";position:absolute;inset:0;z-index:-1;
background:
linear-gradient(97deg, rgba(8,10,12,.95) 0%, rgba(8,10,12,.86) 34%, rgba(8,10,12,.42) 68%, rgba(8,10,12,.62) 100%),
linear-gradient(0deg, rgba(8,10,12,.75) 0%, rgba(8,10,12,0) 40%)
}
.hero__contenuto{
padding:calc(var(--h-testata) + 4.5rem) 0 1.5rem;width:min(100% - 2.4rem,var(--max));margin-inline:auto
}
.hero__occhiello{
display:inline-flex;align-items:center;gap:.7rem;font-family:var(--mono);font-size:.76rem;letter-spacing:.14em;
text-transform:uppercase;color:#fff;margin-bottom:1.6rem
}
.hero__occhiello::before{content:"";width:46px;height:2px;background:var(--accento)}
.hero__occhiello b{color:var(--accento);font-weight:700;letter-spacing:.14em}
.hero h1{
color:#fff;font-size:clamp(2.4rem,6vw,4.6rem);line-height:1.02;letter-spacing:-.03em;max-width:16ch;margin-bottom:.45em
}
.hero h1 em{font-style:normal;color:var(--accento)}
.hero__intro{font-size:clamp(1.02rem,1.4vw,1.22rem);color:#D6DCE0;max-width:52ch}
.hero__azioni{display:flex;gap:.8rem;flex-wrap:wrap;margin-top:1.8rem}
.hero__azioni .bottone{flex:0 1 auto}
/* ricerca rapida per targa */
.cerca-targa{
display:flex;gap:.55rem;flex-wrap:wrap;align-items:center;margin-top:2.2rem;max-width:560px;
background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.24);padding:.75rem;border-radius:var(--raggio);
backdrop-filter:blur(6px)
}
.cerca-targa label{font-size:.84rem;color:#C6CED3;flex:1 0 100%;margin-bottom:.15rem}
.cerca-targa input{
flex:1 1 190px;font-family:var(--mono);text-transform:uppercase;letter-spacing:.14em;font-size:1rem;
padding:.75rem .85rem;border:1px solid rgba(255,255,255,.28);background:rgba(0,0,0,.4);color:#fff;border-radius:var(--raggio)
}
.cerca-targa input::placeholder{color:#8E999F;letter-spacing:.1em}
/* didascalia slide e controlli */
.hero__piede{
width:min(100% - 2.4rem,var(--max));margin:0 auto;padding:1.4rem 0 2.6rem;
display:flex;align-items:flex-end;justify-content:space-between;gap:1.5rem;flex-wrap:wrap
}
.hero__didascalia{display:flex;align-items:center;gap:.9rem;font-size:.9rem;color:#C6CED3;max-width:48ch;margin:0}
.hero__didascalia .codice{
font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;background:var(--accento);color:#fff;
padding:.3rem .6rem;border-radius:2px;white-space:nowrap
}
.hero__didascalia strong{color:#fff;display:block;font-family:var(--display);font-size:1.02rem}
.hero__controlli{display:flex;align-items:center;gap:1rem}
.hero__conteggio{font-family:var(--mono);font-size:.82rem;color:#8E999F}
.hero__conteggio b{color:#fff;font-weight:500}
.hero__punti{display:flex;gap:.4rem}
.hero__punti button{
width:46px;height:3px;padding:0;border:0;background:rgba(255,255,255,.28);cursor:pointer;position:relative;overflow:hidden
}
.hero__punti button.attivo{background:rgba(255,255,255,.28)}
.hero__punti button.attivo::after{
content:"";position:absolute;inset:0;background:var(--accento);transform-origin:left;
animation:scorri 7s linear forwards
}
@keyframes scorri{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.hero__striscia{height:10px;background:repeating-linear-gradient(135deg,var(--accento) 0 16px,var(--inchiostro) 16px 32px)}
/* barra dei quattro servizi sotto l'hero */
.servizi-rapidi{background:var(--inchiostro-2)}
/* il margin:0 annullava il margin-inline:auto di .contenitore e teneva il
nastro incollato a sinistra: su schermi larghi restava un vuoto a destra */
.servizi-rapidi ul{list-style:none;margin-block:0;margin-inline:auto;padding:0;
display:grid;grid-template-columns:repeat(5,1fr)}
/* sotto i 1220 px cinque colonne spezzerebbero le righe di testo in due:
meglio tre voci sopra e due sotto */
@media (max-width:1220px){.servizi-rapidi ul{grid-template-columns:repeat(3,1fr)}}
.servizi-rapidi a{
display:flex;align-items:center;gap:.8rem;padding:1.15rem 1.3rem;color:#D6DCE0;text-decoration:none;
border-right:1px solid rgba(255,255,255,.1);font-size:.93rem;transition:background .18s,color .18s;position:relative
}
.servizi-rapidi li:last-child a{border-right:0}
/* su schermo largo la colonna è più larga del testo: il contenuto va al centro,
altrimenti ogni riquadro resta vuoto sulla destra */
@media (min-width:881px){
.servizi-rapidi a{justify-content:center}
}
.servizi-rapidi a::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--accento);transform:scaleX(0);transform-origin:left;transition:transform .2s}
.servizi-rapidi a:hover{background:#0F1215;color:#fff}
.servizi-rapidi a:hover::before{transform:scaleX(1)}
.servizi-rapidi svg{width:26px;height:26px;color:var(--accento);flex:0 0 26px}
.servizi-rapidi strong{display:block;font-family:var(--display);font-size:1rem;color:#fff}
.servizi-rapidi span span{font-size:.8rem;color:#8E999F}
/* ---------- intestazione delle pagine interne ---------- */
.testa-pagina{
position:relative;margin-top:calc(-1 * var(--h-testata));color:#fff;background:var(--inchiostro);
display:flex;align-items:flex-end;min-height:clamp(300px,46vh,460px);min-height:clamp(300px,46svh,460px);overflow:hidden;isolation:isolate
}
.testa-pagina img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;opacity:.85}
.testa-pagina::after{
content:"";position:absolute;inset:0;z-index:-1;
background:linear-gradient(95deg,rgba(8,10,12,.94) 0%,rgba(8,10,12,.8) 48%,rgba(8,10,12,.5) 100%)
}
.testa-pagina__corpo{
width:min(100% - 2.4rem,var(--max));margin-inline:auto;padding:calc(var(--h-testata) + 2.6rem) 0 2.8rem
}
.testa-pagina h1{color:#fff;margin-bottom:.35em;max-width:20ch;font-size:clamp(2rem,4.4vw,3.3rem)}
.testa-pagina p{color:#C6CED3;max-width:58ch;margin:0;font-size:1.05rem}
.testa-pagina .briciole{padding:0 0 1.2rem;color:#8E999F}
.testa-pagina .briciole a{color:#C6CED3}
.testa-pagina .briciole span{color:#5E6A72}
.testa-pagina__striscia{height:8px;background:repeating-linear-gradient(135deg,var(--accento) 0 14px,var(--inchiostro) 14px 28px)}
/* ---------- sezioni ---------- */
.sezione{padding:var(--sp) 0}
.sezione--bianca{background:var(--superficie)}
.sezione--scura{background:var(--inchiostro);color:#fff}
.sezione--scura h2,.sezione--scura h3{color:#fff}
.sezione--scura p{color:#C6CED3}
.sezione__intestazione{max-width:62ch;margin-bottom:2.4rem}
.sezione__intestazione p{color:var(--acciaio);font-size:1.05rem}
.sezione--scura .sezione__intestazione p{color:#C6CED3}
/* fascia scura con immagine in filigrana sulla destra:
si vede appena, ma resta un ![]()
vero con alt e title per i motori di ricerca */
.sezione--filigrana{position:relative;overflow:hidden;isolation:isolate}
.sezione--filigrana > .contenitore{position:relative;z-index:1}
.sezione__filigrana{
position:absolute;right:0;top:50%;transform:translateY(-50%);
width:min(48%,640px);height:auto;z-index:0;pointer-events:none;
opacity:.14;filter:grayscale(1) contrast(1.08);
-webkit-mask-image:linear-gradient(to right,transparent 0,#000 48%),linear-gradient(to bottom,transparent 0,#000 22%,#000 78%,transparent 100%);
-webkit-mask-composite:source-in;
mask-image:linear-gradient(to right,transparent 0,#000 48%),linear-gradient(to bottom,transparent 0,#000 22%,#000 78%,transparent 100%);
mask-composite:intersect}
@media (max-width:880px){.sezione__filigrana{display:none}}
@media (prefers-reduced-motion:no-preference){.sezione__filigrana{transition:opacity .4s}}
/* risposta diretta (AEO) */
.risposta{
background:var(--superficie);border:1px solid var(--bordo);border-left:5px solid var(--accento);
padding:1.3rem 1.5rem;border-radius:var(--raggio);margin:0 0 2.2rem;max-width:none
}
.risposta p{margin:0;font-size:1.06rem}
.sezione--bianca .risposta{background:var(--base-2)}
/* ---------- griglia settori ---------- */
.settori{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem}
.settore{
background:var(--superficie);border:1px solid var(--bordo);border-radius:var(--raggio);padding:1.5rem 1.4rem 1.6rem;
display:flex;flex-direction:column;position:relative;
box-shadow:0 6px 18px rgba(10,12,14,.07);transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease
}
.settore:hover{border-color:var(--inchiostro);transform:translateY(-5px);box-shadow:0 18px 36px rgba(10,12,14,.16)}
.settore__icona{width:38px;height:38px;color:var(--blu);margin-bottom:1rem}
.settore h3{margin-bottom:.5rem}
.settore p{font-size:.96rem;color:var(--acciaio);flex:1;margin-bottom:1rem}
.settore__link{font-family:var(--display);font-weight:700;font-size:.85rem;text-transform:uppercase;letter-spacing:.04em;text-decoration:none;border-bottom:2px solid var(--accento);align-self:flex-start;padding-bottom:2px}
/* elenco puntato tecnico */
.elenco-tecnico{list-style:none;padding:0;margin:0 0 1.6rem;display:grid;gap:.55rem}
.elenco-tecnico li{padding-left:1.5rem;position:relative;font-size:.98rem}
.elenco-tecnico li::before{content:"";position:absolute;left:0;top:.62em;width:9px;height:9px;background:var(--accento);border-radius:1px}
/* ---------- due colonne ---------- */
.duecol{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(2rem,5vw,3.6rem);align-items:start}
/* nessun figlio può allargare la propria colonna oltre lo spazio che c'è */
.duecol > *{min-width:0}
.duecol--invertita{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)}
/* testo a sinistra e pulsante al centro della colonna di destra: lo spazio
accanto al testo, limitato a 70 caratteri per riga, restava vuoto */
.risposta-diretta{display:grid;grid-template-columns:minmax(0,1fr) minmax(240px,340px);
gap:1.4rem 2.4rem;align-items:center;margin-bottom:2.2rem}
@media (max-width:980px){.risposta-diretta{grid-template-columns:minmax(0,1fr) minmax(200px,280px)}}
.risposta-diretta__testo > :last-child{margin-bottom:0}
.risposta-diretta__azione{display:flex;justify-content:center}
@media (max-width:760px){
.risposta-diretta{grid-template-columns:1fr}
.risposta-diretta__azione .bottone{width:100%;text-align:center}
}
.riquadro{background:var(--superficie);border:1px solid var(--bordo);border-radius:var(--raggio);padding:1.6rem}
/* riquadro che non si allunga per pareggiare la colonna accanto: resta alto
quanto il suo contenuto, invece di lasciare un fondo grigio vuoto */
.riquadro--alto h3{margin-top:1.6rem}
.riquadro--alto h3:first-child{margin-top:0}
.riquadro--alto .elenco-tecnico{margin-bottom:1rem}
.riquadro--alto > :last-child{margin-bottom:0}
.riquadro h3{margin-bottom:.9rem}
/* il riquadro accanto a una colonna piu' alta scende fino in fondo,
cosi' le due colonne chiudono alla stessa altezza */
.duecol > .riquadro,
.duecol > .scheda-costo{align-self:stretch}
.duecol > .riquadro--alto{align-self:start}
/* due riquadri affiancati con il pulsante in fondo: il pulsante scende in
fondo al riquadro, cosi' i due cadono sulla stessa riga anche se il
contenuto sopra non ha la stessa altezza */
.riquadro--pari{display:flex;flex-direction:column}
.riquadro--pari > .azioni{margin-top:auto;padding-top:1.2rem}
/* colonna con piu' riquadri impilati: l'ultimo si allunga fino in fondo */
.duecol > .pila{display:flex;flex-direction:column;gap:1.2rem;align-self:stretch}
.duecol > .pila > .riquadro:last-child{flex:1}
.sezione--bianca .riquadro{background:var(--base-2)}
/* ---------- tabella dati ---------- */
.tabella{
width:100%;border-collapse:separate;border-spacing:0;font-size:.95rem;background:var(--superficie);
border:1px solid var(--bordo);border-radius:var(--raggio);overflow:hidden
}
.tabella th,.tabella td{text-align:left;padding:.85rem 1rem;border-bottom:1px solid var(--bordo);vertical-align:top}
.tabella tr:last-child th,.tabella tr:last-child td{border-bottom:0}
.tabella th{font-family:var(--display);font-weight:700;background:var(--base-2);width:42%}
.tabella td.num{font-family:var(--mono);font-size:.92rem}
.tabella--intestata thead th,.tabella--intestata tr:first-child th{
background:var(--inchiostro);color:#fff;width:auto;font-size:.88rem;letter-spacing:.02em
}
.tabella--intestata td{width:auto}
.tabella--intestata tbody tr:nth-child(even) td{background:var(--base-2)}
.tabella--intestata tr td:first-child{font-weight:600}
.sezione--bianca .tabella{background:#fff}
/* periodicità della revisione: schede invece di una tabella stretta */
/* Due schede affiancate invece di una colonna sola: max-width:none perche' le
liste nascono limitate a 70ch per la leggibilita' della prosa, e qui quel
limite lasciava mezzo spazio vuoto a destra. */
.periodicita{display:grid;gap:.7rem;margin:0;padding:0;list-style:none;max-width:none;
grid-template-columns:repeat(auto-fit,minmax(min(420px,100%),1fr))}
.periodicita li{
display:grid;grid-template-columns:1.3fr .9fr .9fr;gap:1rem;align-items:center;
background:var(--superficie);border:1px solid var(--bordo);border-left:4px solid var(--accento);
border-radius:var(--raggio);padding:.95rem 1.1rem
}
.periodicita strong{font-family:var(--display);font-size:1.02rem}
.periodicita span{font-size:.9rem;color:var(--acciaio)}
.periodicita span b{display:block;font-family:var(--mono);font-size:.82rem;color:var(--inchiostro);font-weight:500;text-transform:uppercase;letter-spacing:.06em}
/* scheda costo e orari */
/* Le due metà si affiancano solo se c'è spazio nel riquadro, non nella
finestra: questa scheda vive dentro una colonna stretta, e a due colonne
fisse il prezzo andava a capo e gli orari si spezzavano su quattro righe. */
.scheda-costo{
background:var(--inchiostro);color:#fff;border-radius:var(--raggio);overflow:hidden;
display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr))
}
.scheda-costo__prezzo{padding:1.8rem 1.6rem;background:var(--accento);display:flex;flex-direction:column;
justify-content:center;align-items:center;text-align:center;gap:.3rem}
.scheda-costo__prezzo span{font-family:var(--mono);font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.85)}
/* prezzo piu' grande: la frase sotto sta su due righe invece di tre, e il
riquadro rosso recupera l'altezza dal numero */
.scheda-costo__prezzo strong{font-family:var(--display);font-size:clamp(2.6rem,6vw,3.7rem);line-height:1;letter-spacing:-.02em}
/* niente tetto di 30 caratteri: la frase usava meta' riquadro e andava a capo
tre volte, ora occupa tutta la larghezza e sta su due righe */
.scheda-costo__prezzo p{margin:.7rem 0 0;font-size:.9rem;color:rgba(255,255,255,.9);max-width:none}
.scheda-costo__orari{padding:1.5rem 1.6rem}
.scheda-costo__orari h3{color:#fff;font-size:.95rem;letter-spacing:.06em;text-transform:uppercase;margin-bottom:.9rem}
.orari{list-style:none;margin:0;padding:0;display:grid;gap:.1rem}
.orari li{display:flex;justify-content:space-between;gap:1rem;padding:.42rem 0;border-bottom:1px solid #2B3238;font-size:.92rem;color:#AEB8BE}
.orari li:last-child{border-bottom:0}
.orari b{font-weight:500;color:#D6DCE0}
.orari .ore{font-family:var(--mono);font-size:.86rem;color:#fff;text-align:right}
.orari li.oggi{color:#fff}
.orari li.oggi b::after{content:" · oggi";color:var(--accento);font-size:.78rem}
.scheda-costo__nota{padding:0 1.6rem 1.5rem;font-size:.84rem;color:#8E999F}
/* ---------- offerte shop ---------- */
.offerte{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}
.offerta{background:var(--superficie);border:1px solid var(--bordo);border-radius:var(--raggio);overflow:hidden;display:flex;flex-direction:column}
.offerta img{aspect-ratio:4/3;object-fit:cover}
.offerta__corpo{padding:1rem 1.1rem 1.2rem;display:flex;flex-direction:column;flex:1}
.offerta__corpo h3{font-size:1rem;margin-bottom:.35rem}
.offerta__corpo p{font-size:.9rem;color:var(--acciaio);flex:1}
.prezzo{font-family:var(--mono);font-weight:500;font-size:1.15rem}
.prezzo s{color:var(--acciaio-chiaro);font-size:.9rem;margin-right:.4rem}
.etichetta{display:inline-block;background:var(--accento);color:#fff;font-family:var(--mono);font-size:.74rem;padding:.2rem .5rem;border-radius:2px}
/* categorie a icone */
.categorie{display:grid;grid-template-columns:repeat(6,1fr);gap:.8rem}
.categoria{
background:var(--superficie);border:1px solid var(--bordo);border-radius:var(--raggio);
padding:1.1rem .7rem;text-align:center;text-decoration:none;font-size:.86rem;font-weight:500;
display:flex;flex-direction:column;align-items:center;gap:.6rem;transition:border-color .15s,background .15s
}
.categoria:hover{border-color:var(--inchiostro);background:var(--base-2)}
.categoria svg{width:30px;height:30px;color:var(--blu)}
/* ---------- FAQ ---------- */
.faq{max-width:none;border-top:1px solid var(--bordo)}
.faq details{border-bottom:1px solid var(--bordo)}
.faq summary{
cursor:pointer;padding:1.05rem 2.2rem 1.05rem 0;font-family:var(--display);font-weight:700;font-size:1.05rem;
position:relative;list-style:none
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:.3rem;top:.95rem;font-size:1.4rem;color:var(--accento-scuro)}
.faq details[open] summary::after{content:"–"}
.faq__risposta{padding:0 0 1.2rem}
.faq__risposta p:last-child{margin-bottom:0}
/* ---------- moduli ---------- */
.modulo{display:grid;gap:1rem;grid-template-columns:minmax(0,1fr)}
.campo{display:flex;flex-direction:column;gap:.35rem;min-width:0}
.campo label{font-size:.88rem;font-weight:600}
/* width e min-width: i campi di un modulo hanno una larghezza propria, decisa
dal browser, che non si restringe da sola. In una griglia questo allarga
tutta la colonna e il modulo esce dal riquadro. Qui invece si adattano. */
.campo input,.campo select,.campo textarea{
font-family:var(--testo);font-size:1rem;padding:.75rem .85rem;border:1px solid var(--bordo);
border-radius:var(--raggio);background:var(--superficie);color:var(--inchiostro);
width:100%;min-width:0;max-width:100%;box-sizing:border-box
}
.campo input:focus,.campo select:focus,.campo textarea:focus{border-color:var(--inchiostro);outline:2px solid var(--accento);outline-offset:0}
.campo--targa input{font-family:var(--mono);text-transform:uppercase;letter-spacing:.08em}
.modulo__riga{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:1rem}
.modulo__riga > *{min-width:0}
.aiuto{font-size:.82rem;color:var(--acciaio)}
.consenso{display:grid;grid-template-columns:auto minmax(0,1fr);gap:.65rem;align-items:start;font-size:.88rem;color:var(--acciaio);line-height:1.5}
.consenso input{margin:.3rem 0 0;width:18px;height:18px;flex:0 0 auto}
.consenso span{display:block}
.consenso a{color:var(--inchiostro)}
.trappola{position:absolute;left:-9999px}
.avviso{padding:.9rem 1.1rem;border-radius:var(--raggio);margin-bottom:1.2rem;font-size:.95rem}
.avviso--ok{background:#E6F4EC;border:1px solid var(--verde);color:#12543A}
.avviso--errore{background:#FBEAE8;border:1px solid var(--rosso);color:#7E231D}
/* ---------- blog ---------- */
/* auto-fit e non 3 colonne fisse: nel blog questa griglia sta accanto alla
barra laterale, e a tre colonne le schede restavano larghe 200px con tre
parole per riga. Cosi' il numero di colonne lo decide lo spazio vero. */
.articoli{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(350px,100%),1fr));gap:1.2rem}
.articolo-card{
background:var(--superficie);border:1px solid var(--bordo);border-radius:var(--raggio);overflow:hidden;
display:flex;flex-direction:column;box-shadow:0 10px 26px rgba(10,12,14,.10), 0 2px 6px rgba(10,12,14,.06);
transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease
}
.articolo-card:hover{transform:translateY(-7px);border-color:var(--inchiostro);box-shadow:0 22px 44px rgba(10,12,14,.20)}
.articolo-card__media{overflow:hidden;aspect-ratio:16/10}
.articolo-card__media img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.articolo-card:hover .articolo-card__media img{transform:scale(1.05)}
.articolo-card__leggi{
margin-top:1rem;align-self:flex-start;font-family:var(--display);font-weight:700;font-size:.82rem;
text-transform:uppercase;letter-spacing:.05em;text-decoration:none;border-bottom:2px solid var(--accento);padding-bottom:2px
}
.articolo-card img{aspect-ratio:16/9;object-fit:cover}
.articolo-card__corpo{padding:1.1rem 1.2rem 1.4rem;display:flex;flex-direction:column;flex:1}
.articolo-card h3{font-size:1.08rem;margin-bottom:.4rem}
.articolo-card h3 a{text-decoration:none}
.articolo-card p{font-size:.93rem;color:var(--acciaio);flex:1}
.data{font-family:var(--mono);font-size:.78rem;color:var(--acciaio);margin-bottom:.5rem;display:block}
.prosa{max-width:72ch}
.prosa h2{margin-top:2rem}
.prosa h3{margin-top:1.6rem}
.prosa img{margin:1.5rem 0;border:1px solid var(--bordo);border-radius:var(--raggio)}
.prosa table{
width:100%;border-collapse:separate;border-spacing:0;font-size:.94rem;margin:1.6rem 0;
border:1px solid var(--bordo);border-radius:var(--raggio);overflow:hidden;background:var(--superficie)
}
.prosa table th{background:var(--inchiostro);color:#fff;text-align:left;padding:.8rem 1rem;font-family:var(--display);font-size:.88rem}
.prosa table td{padding:.8rem 1rem;border-bottom:1px solid var(--bordo)}
.prosa table tr:last-child td{border-bottom:0}
.prosa table tr:nth-child(even) td{background:var(--base-2)}
.prosa blockquote{border-left:4px solid var(--accento);margin:1.5rem 0;padding:.3rem 0 .3rem 1.2rem;color:var(--acciaio)}
/* ---------- briciole ---------- */
.briciole{font-size:.84rem;color:var(--acciaio);padding:1rem 0 0}
.briciole a{color:var(--acciaio)}
.briciole span{margin:0 .4rem;color:var(--acciaio-chiaro)}
/* ---------- fascia CTA ---------- */
.fascia-cta{background:var(--accento);color:#fff;padding:2.6rem 0}
.fascia-cta h2{color:#fff}
.fascia-cta__riga{display:flex;gap:1.6rem 2rem;align-items:center;justify-content:space-between;flex-wrap:wrap}
.fascia-cta__riga > div:first-child{flex:1 1 420px}
.fascia-cta h2{margin-bottom:.3em;font-size:clamp(1.4rem,2.6vw,2rem)}
.fascia-cta p{margin:0;color:rgba(255,255,255,.88)}
.fascia-cta__azioni{display:flex;gap:.7rem;flex-wrap:wrap}
/* ---------- piede ---------- */
.pie{background:var(--inchiostro);color:#AEB8BE;padding:3.4rem 0 2.2rem;font-size:.94rem}
.pie h3{color:#fff;font-size:.9rem;letter-spacing:.06em;text-transform:uppercase;margin:0 0 .8rem}
.pie a{color:#AEB8BE;text-decoration:none}
.pie a:hover{color:#fff;text-decoration:underline}
.pie__alto{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:2.2rem;padding-bottom:2.4rem;border-bottom:1px solid #2B3238}
/* Da schermo largo la colonna centrale si prende lo spazio che le serve, cosi'
le righe "RICAMBI AUTO · OFFICINA · ..." stanno su un rigo solo invece di
andare a capo: lo spazio lo cede la colonna del logo, che ne ha d'avanzo. */
@media (min-width:1200px){
.pie__alto{grid-template-columns:minmax(0,1.12fr) minmax(0,1.38fr) minmax(0,1fr)}
.pie__uso{white-space:nowrap}
}
.pie__logo{width:min(230px,70%);height:auto;margin-bottom:1rem}
.pie__testo{font-size:.9rem;margin-bottom:.7rem;line-height:1.55}
.pie__social{display:flex;gap:1rem;flex-wrap:wrap;margin:.6rem 0 0}
.pie__dati{font-style:normal;display:grid;gap:.22rem;font-size:.92rem;line-height:1.5;margin-bottom:.6rem}
.pie__dati strong{color:#fff;font-family:var(--display);font-size:1rem}
.pie__dati a{color:#D6DCE0}
.pie__piva{font-family:var(--mono);font-size:.86rem;color:#8E999F;margin-top:.25rem}
.pie__contatto{display:flex;flex-direction:column;gap:.35rem}
.pie__contatto h3{margin-top:1.1rem}
.pie__contatto h3:first-child{margin-top:0}
.pie__numero{font-family:var(--mono);font-size:1.02rem;color:#fff}
.pie__tabella{width:100%;border-collapse:collapse;font-size:.88rem}
.pie__tabella th{text-align:left;color:#8E999F;font-weight:500;padding:.18rem .8rem .18rem 0;white-space:nowrap}
.pie__tabella td{padding:.18rem 0;font-family:var(--mono);font-size:.84rem;color:#D6DCE0}
.pie__nota{font-size:.8rem;color:#8E999F;margin:.8rem 0 0}
.pie__griglia{display:grid;grid-template-columns:repeat(4,1fr);gap:2rem;padding:2.2rem 0;border-bottom:1px solid #2B3238}
.pie ul{list-style:none;padding:0;margin:0;display:grid;gap:.5rem}
.pie__comuni{display:flex;flex-wrap:wrap;gap:.5rem .9rem;padding:1.4rem 0;border-bottom:1px solid #2B3238;font-size:.84rem}
.pie__comuni a{color:#8E999F}
.pie__chiusura{padding-top:1.3rem;display:grid;gap:.5rem;font-size:.84rem}
/* da desktop l'ultima riga sta tutta su un rigo: dati societari a sinistra,
note legali a destra. Sotto i 900px torna impilata, altrimenti su schermi
stretti i collegamenti si schiacciano o escono fuori. */
@media (min-width:900px){
.pie__chiusura{display:flex;flex-wrap:nowrap;align-items:center;
justify-content:space-between;gap:1.6rem}
.pie__chiusura .pie__riga-dati{flex:0 1 auto;min-width:0}
.pie__chiusura .pie__legale{flex:0 0 auto}
}
.pie__riga-dati{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pie__chiusura p{margin:0}
.pie__legale{display:flex;flex-wrap:nowrap;gap:1.1rem;align-items:center;font-size:.82rem;white-space:nowrap}
.pie__legale button{background:none;border:0;color:#AEB8BE;font:inherit;cursor:pointer;padding:0;text-decoration:none}
.pie__legale button:hover{color:#fff}
/* pulsante WhatsApp fluttuante */
.whatsapp-fluttuante{
position:fixed;right:1.1rem;bottom:1.1rem;z-index:55;width:48px;height:48px;border-radius:50%;
background:#25D366;color:#fff;display:grid;place-items:center;box-shadow:0 8px 24px rgba(10,12,14,.3);
transition:transform .18s ease
}
.whatsapp-fluttuante svg{width:26px;height:26px}
.whatsapp-fluttuante:hover{transform:scale(1.06)}
/* banner cookie */
.cookie{position:fixed;left:0;right:0;bottom:0;z-index:70;background:var(--inchiostro);color:#D6DCE0;border-top:3px solid var(--accento)}
.cookie__corpo{width:min(100% - 2.4rem,var(--max));margin-inline:auto;padding:1.3rem 0 1.5rem;display:grid;gap:.8rem}
.cookie h2{color:#fff;font-size:1.1rem;margin:0}
.cookie p{margin:0;font-size:.92rem;max-width:80ch}
.cookie a{color:#fff}
/* ---------- barra mobile ---------- */
.barra-mobile{display:none}
/* ---------- mappa ---------- */
.mappa{width:100%;aspect-ratio:16/9;border:1px solid var(--bordo);border-radius:var(--raggio);filter:grayscale(.3)}
/* ---------- responsive ---------- */
@media (max-width:1000px){
.pie__alto{grid-template-columns:1fr 1fr}
.pie__identita{grid-column:1 / -1}
.servizi-rapidi ul{grid-template-columns:repeat(2,1fr)}
.settori{grid-template-columns:repeat(2,1fr)}
.offerte{grid-template-columns:repeat(2,1fr)}
.categorie{grid-template-columns:repeat(3,1fr)}
.articoli{grid-template-columns:repeat(2,1fr)}
.pie__griglia{grid-template-columns:1fr 1fr}
}
/* ==================================================================
TESTATA: MENU IN ORIZZONTALE SOLO DA 1200px
Le voci del menu sono dieci. In orizzontale ne servono circa 740px,
più il logo e il pulsante rosso: sotto i 1200px non ci stanno, e
l'ultima voce finiva nascosta sotto il pulsante. Da qui in giù la
testata usa il pulsante "Menu", esattamente come sul telefono, e in
fondo allo schermo compare la barra con i due pulsanti.
Attenzione, se un domani si cambia il menu: va controllato lo
scrollWidth della barra, non la sua larghezza. La barra si restringe
e il contenuto le esce fuori senza che la misura esterna cambi — è
proprio così che la sovrapposizione era passata inosservata.
================================================================== */
@media (max-width:1199px){
.testata__cta{display:none}
.apri-menu{
display:flex;flex-direction:column;align-items:center;gap:3px;background:none;border:0;cursor:pointer;
font-family:var(--display);padding:.3rem .2rem
}
.apri-menu span{width:24px;height:2px;background:var(--inchiostro);display:block;transition:transform .2s,opacity .2s}
.apri-menu em{font-style:normal;font-size:.68rem;margin-top:2px}
.apri-menu[aria-expanded="true"] span:nth-child(1){transform:translateY(5px) rotate(45deg)}
.apri-menu[aria-expanded="true"] span:nth-child(2){opacity:0}
.apri-menu[aria-expanded="true"] span:nth-child(3){transform:translateY(-5px) rotate(-45deg)}
.menu{display:none;position:absolute;top:100%;left:0;right:0;background:var(--superficie);border-bottom:1px solid var(--bordo);padding:.6rem 0 1.2rem}
.menu.aperto{display:block}
body.con-hero .menu.aperto > ul > li > a,
body.con-hero .menu.aperto .menu__tendina a{color:var(--inchiostro)}
.menu ul{flex-direction:column;align-items:stretch;gap:0}
.menu > ul{width:min(100% - 2.4rem,var(--max));margin-inline:auto}
.menu > ul > li{flex:0 0 auto;width:100%}
/* display:block, altrimenti la riga di separazione finisce dov'è finita
la parola invece di arrivare in fondo */
.menu > ul > li > a{display:block;padding:.85rem 0;border-bottom:1px solid var(--bordo);border-left:3px solid transparent;padding-left:.6rem;white-space:normal}
.menu__tendina{position:static;display:flex;border:0;padding:0 0 .5rem .6rem;background:transparent;box-shadow:none;border-radius:0}
.menu__tendina a{padding:.6rem .6rem;color:var(--acciaio)}
/* la barra in fondo allo schermo tiene i due pulsanti che qui non
stanno più nella testata */
.barra-mobile{
display:flex;gap:.6rem;position:fixed;bottom:0;left:0;right:0;z-index:60;
padding:.6rem .7rem calc(.6rem + env(safe-area-inset-bottom, 0px));
background:rgba(21,24,28,.92);backdrop-filter:blur(8px);border-top:1px solid #000
}
.barra-mobile a{
flex:1;text-align:center;padding:.85rem .4rem;text-decoration:none;border-radius:var(--raggio);
font-family:var(--display);font-weight:700;font-size:.82rem;text-transform:uppercase;letter-spacing:.04em
}
.barra-mobile__sinistra{background:#fff;color:var(--inchiostro)}
.barra-mobile__destra{background:var(--accento);color:#fff}
.whatsapp-fluttuante{bottom:calc(5.4rem + env(safe-area-inset-bottom, 0px));right:.8rem}
body{padding-bottom:84px}
}
@media (max-width:880px){
.barra-info__tel{display:none}
.hero{min-height:86vh;min-height:86svh}
.hero__contenuto{padding:calc(var(--h-testata) + 2.4rem) 0 1.2rem}
.hero h1{max-width:100%;font-size:clamp(2rem,8vw,2.8rem)}
.hero__intro{font-size:1rem}
.hero__piede{padding:1rem 0 2rem}
.testa-pagina__corpo{padding:calc(var(--h-testata) + 1.8rem) 0 2rem}
.marchio img{height:40px}
.marchio__claim{display:none}
/* minmax(0,1fr) e non 1fr: con 1fr la colonna si allarga fino al
contenuto più largo che c'è dentro, e il testo esce dallo schermo
senza che la pagina scorra. Così invece è il contenuto ad adattarsi. */
.duecol,.duecol--invertita{grid-template-columns:minmax(0,1fr)}
/* la barra in fondo e il tasto WhatsApp sono dichiarati nel blocco dei
1199px: qui si rimpicciolisce solo la cornetta */
.whatsapp-fluttuante{width:42px;height:42px}
.whatsapp-fluttuante svg{width:22px;height:22px}
}
@media (max-width:620px){
:root{--h-testata:68px}
.pie{padding:2.6rem 0 2rem;font-size:.95rem}
.pie__alto{grid-template-columns:1fr;gap:1.8rem}
.pie__logo{width:200px}
.pie__griglia{grid-template-columns:1fr 1fr;gap:1.4rem}
.pie__comuni{gap:.45rem .8rem}
.pie__chiusura{font-size:.76rem}
.pie__riga-dati{font-size:.76rem}
.pie__legale{gap:.8rem;font-size:.74rem}
.fascia-cta__riga{gap:1.2rem}
.azioni--fine{justify-content:flex-start}
.azioni .bottone,.hero__azioni .bottone{flex:1 1 calc(50% - .4rem);text-align:center;padding-inline:.8rem}
.azioni .bottone:only-child,.hero__azioni .bottone:only-child{flex:1 1 100%}
.settori,.offerte,.articoli,.pie__griglia{grid-template-columns:1fr}
.passi li{grid-template-columns:40px 1fr;gap:.8rem}
.passi li::before{width:40px;height:40px;font-size:.8rem}
.numeri strong{font-size:1.7rem}
.cerca-targa{padding:.6rem}
.cerca-targa button{width:100%}
.servizi-rapidi ul{grid-template-columns:1fr}
.servizi-rapidi a{border-right:0;border-bottom:1px solid rgba(255,255,255,.1)}
.categorie{grid-template-columns:repeat(2,1fr)}
.modulo__riga{grid-template-columns:minmax(0,1fr)}
.barra-info__riga{justify-content:center}
.barra-info__luogo{display:none}
}
@media (prefers-reduced-motion:reduce){
*{animation-duration:.01ms !important;transition-duration:.01ms !important;scroll-behavior:auto !important}
}
@media print{
.testata,.barra-info,.barra-mobile,.fascia-cta,.menu{display:none}
}
/* stati e avvisi usano l'ambra, non il rosso del marchio */
.stato--aperto::before{background:#39C07B}
.pill--nuova{background:#FFF6DB;border-color:var(--ambra);color:#6B5200}
.seo-semaforo--giallo{background:var(--ambra)}
@media (max-width:880px){ .marchio img{height:38px} }
/* ---------- shop: barra vantaggi, selettore veicolo, marche ---------- */
.vantaggi{background:var(--superficie);border-top:1px solid var(--bordo);border-bottom:1px solid var(--bordo)}
.vantaggi ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr)}
.vantaggi li{display:flex;gap:.7rem;align-items:center;padding:1rem 1.2rem;border-right:1px solid var(--bordo)}
.vantaggi li:last-child{border-right:0}
.vantaggi svg{width:24px;height:24px;color:var(--accento);flex:0 0 24px}
.vantaggi strong{display:block;font-family:var(--display);font-size:.95rem}
.vantaggi span{font-size:.82rem;color:var(--acciaio)}
.selettore{background:var(--inchiostro);color:#fff;border-radius:var(--raggio);padding:1.6rem;overflow:hidden}
.selettore .modulo{min-width:0}
.selettore .campo{min-width:0}
.selettore input,.selettore select,.selettore button{max-width:100%}
.selettore h2{color:#fff;font-size:1.3rem;margin-bottom:.3em}
.selettore p{color:#C6CED3;font-size:.95rem}
.selettore .modulo__riga{grid-template-columns:repeat(3,minmax(0,1fr))}
.selettore label{color:#fff}
.selettore input,.selettore select{background:#1D2328;border-color:#3A4248;color:#fff}
.selettore input::placeholder{color:#8E999F}
.selettore__oppure{display:flex;align-items:center;gap:1rem;margin:1.2rem 0;color:#8E999F;font-size:.85rem}
.selettore__oppure::before,.selettore__oppure::after{content:"";height:1px;background:#3A4248;flex:1}
.marche{display:grid;grid-template-columns:repeat(6,1fr);gap:.7rem}
.marca{
background:var(--superficie);border:1px solid var(--bordo);border-radius:var(--raggio);padding:.85rem .6rem;
text-align:center;text-decoration:none;font-weight:600;font-size:.92rem;transition:border-color .15s,background .15s
}
.marca:hover{border-color:var(--inchiostro);background:var(--base-2)}
/* targhetta del comune: la chiave "Ricambi auto a" resta nel testo del link
(Google la legge) ma e' piccola e in secondo piano, cosi' non invade la pagina */
.marca--zona{display:block;line-height:1.25;padding:.6rem .55rem;font-size:.86rem}
.marca__kw{display:block;font-family:var(--mono);font-size:.6rem;letter-spacing:.1em;
text-transform:uppercase;color:var(--acciaio);font-weight:500;margin-bottom:.15rem}
.marca__km{display:block;font-family:var(--mono);font-size:.66rem;color:var(--acciaio);
font-weight:400;margin-top:.2rem}
/* le stesse targhette sulla fascia scura della home */
.sezione--scura .marca{background:#1C2126;border-color:#2B3238;color:#E6EBEE}
.sezione--scura .marca:hover{background:#22282E;border-color:var(--accento)}
.sezione--scura .marca__kw,.sezione--scura .marca__km{color:#8E999F}
/* doppia classe: cosi' queste regole vincono su quelle generiche di .marche,
che piu' sotto cambiano le colonne alle stesse larghezze */
.marche.marche--zone{grid-template-columns:repeat(5,1fr)}
@media (max-width:1100px){.marche.marche--zone{grid-template-columns:repeat(3,1fr)}}
@media (max-width:620px){.marche.marche--zone{grid-template-columns:repeat(2,1fr)}}
.marchi-lista{display:flex;flex-wrap:wrap;gap:.45rem;list-style:none;padding:0;margin:0}
.marchi-lista li{border:1px solid var(--bordo);background:var(--superficie);padding:.35rem .75rem;border-radius:var(--raggio);font-family:var(--mono);font-size:.82rem}
@media (max-width:1000px){
.vantaggi ul{grid-template-columns:repeat(2,1fr)}
.marche{grid-template-columns:repeat(4,1fr)}
.selettore .modulo__riga{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
}
@media (max-width:620px){
.vantaggi ul{grid-template-columns:1fr}
.vantaggi li{border-right:0;border-bottom:1px solid var(--bordo)}
.marche{grid-template-columns:repeat(2,1fr)}
.selettore .modulo__riga{grid-template-columns:minmax(0,1fr)}
}
/* ---------- occhiello di sezione ---------- */
.occhiello{
display:flex;align-items:center;gap:.7rem;font-family:var(--mono);font-size:.74rem;letter-spacing:.14em;
text-transform:uppercase;color:var(--accento);margin-bottom:1rem
}
.occhiello::before{content:"";width:34px;height:2px;background:var(--accento)}
.sezione--scura .occhiello{color:var(--accento)}
/* ---------- schede con fotografia ---------- */
.schede-foto{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem}
.scheda-foto{
position:relative;display:flex;flex-direction:column;background:var(--superficie);border:1px solid var(--bordo);
border-radius:var(--raggio);overflow:hidden;
box-shadow:0 10px 26px rgba(10,12,14,.10), 0 2px 6px rgba(10,12,14,.06);
transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease
}
.scheda-foto:hover{border-color:var(--inchiostro);transform:translateY(-7px);box-shadow:0 22px 44px rgba(10,12,14,.20), 0 4px 10px rgba(10,12,14,.10)}
.scheda-foto__media{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--inchiostro)}
.scheda-foto__media img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease;opacity:1}
.scheda-foto:hover .scheda-foto__media img{transform:scale(1.05)}
.scheda-foto__numero{
position:absolute;left:0;bottom:0;background:var(--accento);color:#fff;font-family:var(--mono);
font-size:.74rem;letter-spacing:.1em;padding:.3rem .65rem
}
.scheda-foto__corpo{padding:1.4rem 1.4rem 1.6rem;display:flex;flex-direction:column;flex:1}
.scheda-foto h3{margin-bottom:.5rem}
.scheda-foto p{font-size:.96rem;color:var(--acciaio);flex:1;margin-bottom:1rem}
.scheda-foto__link{
font-family:var(--display);font-weight:700;font-size:.85rem;text-transform:uppercase;letter-spacing:.04em;
text-decoration:none;align-self:flex-start;border-bottom:2px solid var(--accento);padding-bottom:2px
}
/* ---------- fascia numeri ---------- */
.numeri{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--bordo);border:1px solid var(--bordo)}
.numeri div{background:var(--superficie);padding:1.5rem 1.3rem}
.sezione--scura .numeri{background:#2B3238;border-color:#2B3238}
.sezione--scura .numeri div{background:var(--inchiostro)}
.numeri strong{display:block;font-family:var(--display);font-size:2.1rem;line-height:1;letter-spacing:-.02em}
.numeri span{font-size:.9rem;color:var(--acciaio)}
.sezione--scura .numeri strong{color:#fff}
.sezione--scura .numeri span{color:#8E999F}
/* ---------- passi numerati ---------- */
.passi{counter-reset:passo;display:grid;gap:1.4rem}
.passi li{list-style:none;display:grid;grid-template-columns:52px 1fr;gap:1rem;align-items:start}
.passi li::before{
counter-increment:passo;content:counter(passo,decimal-leading-zero);
font-family:var(--mono);font-size:.9rem;color:var(--accento);border:1px solid var(--bordo);
width:52px;height:52px;display:grid;place-items:center;border-radius:var(--raggio);background:var(--superficie)
}
.passi strong{display:block;font-family:var(--display);font-size:1.08rem;margin-bottom:.2rem}
.passi p{margin:0;font-size:.96rem;color:var(--acciaio)}
/* ---------- immagine affiancata al testo ---------- */
.figura{position:relative;border-radius:var(--raggio);overflow:hidden;border:1px solid var(--bordo)}
.figura img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block}
.figura figcaption{
position:absolute;left:0;bottom:0;right:0;padding:1rem 1.2rem;color:#fff;font-size:.88rem;
background:linear-gradient(0deg,rgba(8,10,12,.9),rgba(8,10,12,0))
}
@media (max-width:1000px){
.schede-foto{grid-template-columns:repeat(2,1fr)}
.numeri{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:620px){
.schede-foto{grid-template-columns:1fr}
.numeri{grid-template-columns:1fr}
.hero__piede{flex-direction:column;align-items:flex-start;gap:1rem}
}
@media (prefers-reduced-motion:reduce){
.hero__sfondo img.attiva{transform:none;transition:opacity .2s}
.hero__punti button.attivo::after{animation:none;transform:scaleX(1)}
}
/* ---------- fascia della sede: foto a sinistra, testo a destra ---------- */
.fascia-sede{display:grid;grid-template-columns:44% 56%;background:var(--inchiostro);color:#fff;position:relative}
.fascia-sede__media{position:relative;overflow:hidden;min-height:420px}
.fascia-sede__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.fascia-sede__media::after{
content:"";position:absolute;inset:0;
background:linear-gradient(90deg,rgba(8,10,12,.35) 0%,rgba(8,10,12,.1) 55%,rgba(21,24,28,.95) 100%)
}
.fascia-sede__testo{display:flex;align-items:center;padding:clamp(2.4rem,5vw,4.2rem) clamp(1.4rem,4vw,3.4rem)}
.fascia-sede__corpo{max-width:58ch}
.fascia-sede h2{color:#fff;margin-bottom:.7rem;font-size:clamp(1.6rem,2.6vw,2.3rem)}
.fascia-sede p{color:#C6CED3;margin-bottom:1rem}
.fascia-sede__dati{font-family:var(--mono);font-size:.82rem;color:#8E999F;margin-bottom:1.4rem}
@media (max-width:900px){
.fascia-sede{grid-template-columns:1fr;position:relative;isolation:isolate}
.fascia-sede__media{position:absolute;inset:0;min-height:0;z-index:-1}
.fascia-sede__media::after{background:linear-gradient(90deg,rgba(8,10,12,.92) 0%,rgba(8,10,12,.82) 60%,rgba(8,10,12,.7) 100%)}
.fascia-sede__testo{padding:2.6rem 1.2rem}
}
/* contenuto di terze parti in attesa di consenso */
.segnaposto-mappa{
display:grid;place-items:center;gap:.8rem;text-align:center;padding:2.5rem 1.5rem;
background:var(--base-2);border:1px solid var(--bordo);border-radius:var(--raggio);aspect-ratio:16/9
}
.segnaposto-mappa p{max-width:46ch;color:var(--acciaio);font-size:.92rem;margin:0}
/* ---------- adattamenti su schermo stretto ---------- */
@media (max-width:760px){
.periodicita li{grid-template-columns:1fr;gap:.5rem;padding:.9rem 1rem}
.periodicita span{display:flex;justify-content:space-between;gap:1rem;border-top:1px solid var(--bordo);padding-top:.4rem}
.periodicita span b{display:inline;font-size:.78rem}
.tabella--intestata{display:block}
/* la riga dei titoli sparisce: ogni cella si porta dietro la propria
etichetta. Vale sia dentro sia come prima riga semplice,
che è il modo in cui la scrive il pannello. */
.tabella--intestata thead{display:none}
/* regola a parte, non unita alla precedente: se un browser vecchio non
conosce :has() scarta solo questa riga e non anche quella sopra */
.tabella--intestata tr:first-child:has(th){display:none}
/* box-sizing: senza, il 100% si somma al bordo della tabella e le righe
sporgono di qualche pixel sulla destra */
.tabella--intestata tbody,.tabella--intestata tr,.tabella--intestata td{display:block;width:100%;box-sizing:border-box}
.tabella--intestata tr{border-bottom:1px solid var(--bordo)}
.tabella--intestata tr:last-child{border-bottom:0}
.tabella--intestata td{border:0;padding:.35rem 1rem;background:transparent !important}
.tabella--intestata td:first-child{padding-top:.9rem;font-family:var(--display);font-size:1.02rem}
.tabella--intestata td:last-child{padding-bottom:.9rem}
.tabella--intestata td[data-etichetta]::before{
content:attr(data-etichetta) ": ";font-family:var(--mono);font-size:.76rem;text-transform:uppercase;
letter-spacing:.06em;color:var(--acciaio)
}
.tabella th{width:45%}
.prosa table{display:block;overflow-x:auto}
}
/* ---------- categorie di ricambi con immagine ---------- */
.categorie-foto{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}
.categoria-foto{
display:flex;flex-direction:column;background:var(--superficie);border:1px solid var(--bordo);
border-radius:var(--raggio);overflow:hidden;text-decoration:none;color:var(--inchiostro);
box-shadow:0 8px 20px rgba(10,12,14,.08);transition:transform .22s ease, box-shadow .22s ease
}
.categoria-foto:hover{transform:translateY(-6px);box-shadow:0 20px 40px rgba(10,12,14,.18)}
.categoria-foto img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block}
.categoria-foto__corpo{padding:.9rem 1rem 1.1rem;display:flex;flex-direction:column;gap:.2rem}
.categoria-foto strong{font-family:var(--display);font-size:1rem}
.categoria-foto span{font-size:.84rem;color:var(--acciaio)}
/* ---------- recensioni ---------- */
.recensioni{position:relative}
.recensioni__pista{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem}
/* con più di tre recensioni diventa un carosello che scorre */
.recensioni--carosello .recensioni__pista{
display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;
gap:1.1rem;padding-bottom:.6rem;scrollbar-width:none
}
.recensioni--carosello .recensioni__pista::-webkit-scrollbar{display:none}
.recensioni--carosello .recensione{flex:0 0 min(360px, 82%);scroll-snap-align:start}
.carosello__freccia{
position:absolute;top:50%;transform:translateY(-50%);z-index:3;width:40px;height:40px;border-radius:50%;
background:#fff;border:1px solid var(--bordo);color:var(--inchiostro);font-size:1.4rem;line-height:1;
cursor:pointer;display:grid;place-items:center;box-shadow:0 4px 14px rgba(16,24,32,.14)
}
.carosello__freccia:hover{background:var(--inchiostro);color:#fff;border-color:var(--inchiostro)}
.carosello__freccia--prima{left:-18px}
.carosello__freccia--dopo{right:-18px}
@media (max-width:900px){
.recensioni__pista{grid-template-columns:1fr}
.carosello__freccia{display:none}
}
.recensione{
background:var(--superficie);border:1px solid var(--bordo);border-radius:var(--raggio);padding:1.4rem;
display:flex;flex-direction:column;gap:.7rem;box-shadow:0 8px 20px rgba(10,12,14,.07)
}
.recensione__stelle{color:#F5A623;letter-spacing:.12em;font-size:1rem}
.recensione p{margin:0;font-size:.97rem}
.recensione footer{margin-top:auto;font-size:.86rem;color:var(--acciaio);display:flex;justify-content:space-between;gap:1rem;align-items:baseline}
.recensione footer strong{color:var(--inchiostro);font-family:var(--display)}
/* ---------- blog con colonna laterale ---------- */
/* colonna laterale a sinistra, come nei blog classici; sotto i 1000 px
le due colonne si impilano e la barra scende sotto l'articolo */
.blog-griglia{display:grid;grid-template-columns:300px 1fr;gap:2.4rem;align-items:start}
/* min-width:0 su entrambe le colonne: senza, la casella di ricerca allarga
la barra oltre i suoi 300 px e finisce sopra il testo dell'articolo */
.blog-griglia > *{min-width:0}
.barra-laterale{display:grid;gap:1.3rem;position:sticky;top:calc(var(--h-testata) + 1rem);align-content:start}
.cerca-blog input{min-width:0}
/* I riquadri non devono mai sporgere dalla colonna: senza min-width:0 un
pulsante o una targhetta lunga allarga il riquadro oltre i 300px e finisce
sopra agli articoli. Per questo pulsanti e targhette possono andare a capo. */
.barra-laterale > *{min-width:0}
.riquadro-laterale{background:var(--superficie);border:1px solid var(--bordo);border-radius:var(--raggio);padding:1.2rem;min-width:0}
.riquadro-laterale .bottone{white-space:normal;max-width:100%}
.riquadro-laterale .marca,.riquadro-laterale .tag,.riquadro-laterale li{overflow-wrap:anywhere;min-width:0}
.riquadro-laterale h3{font-size:.86rem;text-transform:uppercase;letter-spacing:.08em;color:var(--acciaio);margin-bottom:.9rem}
.riquadro-laterale ul{list-style:none;padding:0;margin:0;display:grid;gap:.55rem}
.riquadro-laterale a{text-decoration:none;font-size:.94rem}
.riquadro-laterale a:hover{color:var(--accento)}
.cerca-blog{display:flex;gap:.4rem}
.cerca-blog input{flex:1;padding:.6rem .7rem;border:1px solid var(--bordo);border-radius:var(--raggio);font-size:.92rem}
.etichette{display:flex;flex-wrap:wrap;gap:.4rem}
.etichette a{
border:1px solid var(--bordo);padding:.26rem .6rem;border-radius:var(--raggio);font-size:.82rem;
font-family:var(--mono);text-decoration:none;color:var(--acciaio)
}
.etichette a:hover,.etichette a.attiva{border-color:var(--accento);color:var(--accento)}
.recente{display:grid;grid-template-columns:62px 1fr;gap:.7rem;align-items:center}
.recente img{width:62px;height:48px;object-fit:cover;border-radius:2px}
.recente a{font-size:.9rem;line-height:1.3;text-decoration:none;font-weight:600}
/* foto di copertina in apertura dell'articolo: la stessa dell'anteprima */
.articolo-copertina{margin:1.2rem 0 1.8rem}
.articolo-copertina img{width:100%;height:auto;border-radius:var(--raggio);display:block}
.articolo-copertina figcaption{margin-top:.5rem;font-size:.84rem;color:var(--acciaio)}
.categoria-pill{
display:inline-block;background:var(--inchiostro);color:#fff;font-family:var(--mono);font-size:.72rem;
letter-spacing:.08em;text-transform:uppercase;padding:.22rem .55rem;border-radius:2px;text-decoration:none;margin-bottom:.5rem
}
@media (max-width:1000px){
.categorie-foto{grid-template-columns:repeat(2,1fr)}
.recensioni{grid-template-columns:1fr}
.blog-griglia{grid-template-columns:1fr}
.blog-griglia > :not(.barra-laterale){order:1}
.barra-laterale{order:2;position:static;grid-template-columns:repeat(2,1fr);display:grid}
}
@media (max-width:620px){
.categorie-foto{grid-template-columns:repeat(2,1fr)}
.categoria-foto strong{font-size:.92rem}
.barra-laterale{grid-template-columns:1fr}
}
/* ---------- categorie in stile catalogo ---------- */
/* auto-fit: le colonne si contano da sole in base allo spazio, invece di
essere quattro per forza. Con repeat(4,1fr) a 1024px le quattro schede
chiedevano 1066px e sbordavano dal riquadro. */
.categorie-shop{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr));gap:.9rem}
.categorie-shop > *{min-width:0}
.categoria-shop{
display:flex;align-items:center;gap:.9rem;padding:.7rem .9rem .7rem .7rem;text-decoration:none;color:var(--inchiostro);
background:var(--superficie);border:1px solid var(--bordo);border-radius:var(--raggio);
box-shadow:0 6px 16px rgba(10,12,14,.06);transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease
}
.categoria-shop:hover{transform:translateY(-5px);box-shadow:0 18px 34px rgba(10,12,14,.16);border-color:var(--inchiostro)}
.categoria-shop__foto{flex:0 0 84px;border-radius:var(--raggio);overflow:hidden;background:var(--base-2)}
.categoria-shop__foto img{width:84px;height:64px;object-fit:cover;display:block;transition:transform .35s ease}
.categoria-shop:hover .categoria-shop__foto img{transform:scale(1.08)}
.categoria-shop__testo{flex:1;display:flex;flex-direction:column;gap:.1rem;min-width:0}
.categoria-shop__testo strong{font-family:var(--display);font-size:1rem;line-height:1.2}
.categoria-shop__testo span{font-size:.82rem;color:var(--acciaio)}
.categoria-shop__freccia{width:20px;height:20px;color:var(--accento);flex:0 0 20px;transition:transform .2s ease}
.categoria-shop:hover .categoria-shop__freccia{transform:translateX(4px)}
/* ---------- marchi trattati ---------- */
.marchi{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(7,1fr);gap:.8rem}
.marchi li{
background:var(--superficie);border:1px solid var(--bordo);border-radius:var(--raggio);
display:grid;place-items:center;padding:.9rem .7rem;transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease
}
.marchi img{
width:100%;max-width:130px;height:auto;filter:grayscale(1);opacity:.45;
transition:filter .25s ease, opacity .25s ease, transform .25s ease
}
.marchi li:hover{transform:translateY(-4px);box-shadow:0 14px 28px rgba(10,12,14,.14);border-color:var(--inchiostro)}
.marchi li:hover img{filter:none;opacity:1;transform:scale(1.04)}
.sezione--scura .marchi li{background:#fff;border-color:#2B3238}
.sezione--scura .marchi img{filter:grayscale(1);opacity:.55}
.sezione--scura .marchi li:hover img{filter:none;opacity:1}
@media (max-width:1000px){
/* .categorie-shop si regola da sola con auto-fit: qui non serve più */
.marchi{grid-template-columns:repeat(4,1fr)}
}
@media (max-width:620px){
.marchi{grid-template-columns:repeat(3,1fr)}
/* su telefono le azioni dell'hero sono già nella barra fissa in basso */
.hero__azioni{display:none}
}
/* ---------- nastro dei marchi, scorre da sinistra a destra ---------- */
.nastro-marchi{overflow:hidden;position:relative;padding:.4rem 0;
-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.nastro-marchi__pista{display:flex;width:max-content;animation:scorri-marchi 150s linear infinite}
.nastro-marchi:hover .nastro-marchi__pista{animation-play-state:paused}
.nastro-marchi__voce{
flex:0 0 auto;width:180px;margin-right:.8rem;background:var(--superficie);border:1px solid var(--bordo);
border-radius:var(--raggio);display:grid;place-items:center;padding:.5rem;transition:border-color .2s ease, transform .2s ease
}
.nastro-marchi__voce img{width:100%;height:auto;border-radius:2px;filter:grayscale(1);opacity:.5;transition:filter .25s ease, opacity .25s ease}
.nastro-marchi__voce:hover{border-color:var(--inchiostro);transform:translateY(-4px)}
.nastro-marchi__voce:hover img{filter:none;opacity:1}
.sezione--scura .nastro-marchi__voce{background:#fff;border-color:#2B3238}
.sezione--scura .nastro-marchi__voce img{filter:grayscale(1);opacity:.55}
.sezione--scura .nastro-marchi__voce:hover img{filter:none;opacity:1}
@keyframes scorri-marchi{from{transform:translateX(-50%)}to{transform:translateX(0)}}
@media (prefers-reduced-motion:reduce){.nastro-marchi__pista{animation:none;transform:none}}
@media (max-width:620px){.nastro-marchi__voce{width:140px;padding:.8rem .6rem}}
/* ---------- fascia video a tutta larghezza ---------- */
.fascia-video{
position:relative;isolation:isolate;display:grid;place-items:center;text-align:center;color:#fff;
min-height:clamp(380px,62vh,560px);background:var(--inchiostro);overflow:hidden
}
.fascia-video__media{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.fascia-video::after{
content:"";position:absolute;inset:0;z-index:-1;
background:linear-gradient(0deg,rgba(6,8,10,.94) 0%,rgba(6,8,10,.82) 45%,rgba(6,8,10,.9) 100%)
}
.fascia-video__corpo{width:min(100% - 2.4rem,760px);padding:3.4rem 0}
.fascia-video .occhiello{justify-content:center;color:#fff}
.fascia-video .occhiello::before{background:var(--accento)}
.fascia-video h2{color:#fff;font-size:clamp(1.8rem,3.4vw,2.8rem);margin-bottom:.7rem}
.fascia-video p{color:#D6DCE0;margin:0 auto 1.6rem;max-width:56ch}
.azioni--centro{justify-content:center}
@media (max-width:900px){
.fascia-video{min-height:clamp(420px,70vh,560px)}
.fascia-video__corpo{padding:2.8rem 0}
}
@media (prefers-reduced-motion:reduce){
.fascia-video__media{display:none}
.fascia-video{background-image:var(--poster);background-size:cover;background-position:center}
}
/* ---------- prenotazione revisione: solo telefono e WhatsApp ---------- */
/* Testo sopra, i due pulsanti sotto: questo riquadro sta dentro una colonna
stretta, e affiancare testo e pulsanti lasciava due colonne da nulla. */
.prenota-telefono{
display:flex;flex-direction:column;gap:1.4rem;
background:var(--inchiostro);color:#fff;border-radius:var(--raggio);padding:clamp(1.6rem,3.5vw,2.6rem)
}
.prenota-telefono__testo > :last-child{margin-bottom:0}
.prenota-telefono h2{color:#fff;margin-bottom:.6rem;font-size:clamp(1.5rem,2.6vw,2.1rem)}
.prenota-telefono p{color:#C6CED3;margin-bottom:.8rem}
.prenota-telefono__orari{font-family:var(--mono);font-size:.82rem;color:#8E999F}
/* i due pulsanti si affiancano se il riquadro e' largo abbastanza, e si
impilano quando non lo e': la misura e' quella del riquadro, non della
finestra, cosi' funziona anche dentro una colonna stretta */
.prenota-telefono__contatti{display:grid;gap:.8rem;
grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.contatto-grande{
display:flex;align-items:center;gap:.9rem;background:#fff;color:var(--inchiostro);border-radius:10px;
padding:.95rem 1.1rem;text-decoration:none;transition:transform .15s ease,box-shadow .15s ease
}
.contatto-grande:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(0,0,0,.25)}
.contatto-grande svg{width:26px;height:26px;flex:0 0 26px;stroke:currentColor;fill:none;stroke-width:1.7}
.contatto-grande small{display:block;font-size:.74rem;letter-spacing:.08em;text-transform:uppercase;color:var(--acciaio)}
.contatto-grande strong{font-family:var(--display);font-size:1.22rem;letter-spacing:.01em}
.contatto-grande--verde{background:#1FA855;color:#fff}
.contatto-grande--verde small{color:rgba(255,255,255,.8)}
/* ---------- numeri del piede, con il loro scopo ---------- */
.pie__numeri{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:1rem}
.pie__numeri li{display:flex;flex-direction:column;gap:.15rem}
.pie__uso{font-size:.76rem;letter-spacing:.06em;text-transform:uppercase;color:#6F7B82}
.pie__numeri a{color:#D6DCE0;text-decoration:none;font-size:.94rem}
.pie__numeri a:hover{color:#fff;text-decoration:underline}
/* ---------- offerte ricambi ---------- */
.offerte{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:1.4rem}
.offerta{
display:flex;flex-direction:column;background:#fff;border:1px solid var(--bordo);border-radius:var(--raggio);
overflow:hidden;transition:transform .18s ease,box-shadow .18s ease
}
.offerta:hover{transform:translateY(-3px);box-shadow:0 14px 34px rgba(16,24,32,.12)}
.offerta__foto{position:relative;aspect-ratio:4/3;background:var(--base);overflow:hidden}
.offerta__foto img{width:100%;height:100%;object-fit:cover;display:block}
.offerta__eti{
position:absolute;top:.7rem;left:.7rem;background:var(--accento);color:#fff;border-radius:4px;
padding:.2rem .6rem;font-family:var(--display);font-size:.72rem;letter-spacing:.07em;text-transform:uppercase
}
.offerta__corpo{padding:1.2rem;display:flex;flex-direction:column;gap:.6rem;flex:1}
.offerta__corpo h2{font-size:1.1rem;line-height:1.3}
.offerta__prezzo{display:flex;align-items:baseline;gap:.6rem;margin:0}
.offerta__prezzo strong{font-family:var(--display);font-size:1.6rem;color:var(--accento)}
.offerta__prezzo s{color:var(--acciaio);font-size:.95rem}
.offerta .azioni{margin-top:auto;flex-wrap:wrap;gap:.5rem}
/* ---------- chi siamo: storia e numeri ---------- */
.storia{display:grid;grid-template-columns:1.15fr .85fr;gap:2.4rem;align-items:start;margin:2.4rem 0}
.storia__testo p{margin-bottom:1rem}
.tappe{list-style:none;margin:0;padding:0 0 0 1.4rem;border-left:2px solid var(--bordo);display:flex;flex-direction:column;gap:1.3rem}
.tappe li{position:relative;display:flex;flex-direction:column;gap:.2rem}
.tappe li::before{content:"";position:absolute;left:-1.78rem;top:.45rem;width:11px;height:11px;border-radius:50%;background:var(--accento)}
.tappa__anno{font-family:var(--display);font-size:1.05rem;letter-spacing:.02em}
.tappa__testo{color:var(--acciaio);font-size:.94rem;line-height:1.6}
.numeri-azienda{
display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1px;background:var(--bordo);
border:1px solid var(--bordo);border-radius:var(--raggio);overflow:hidden;margin-bottom:2.4rem
}
.numeri-azienda div{background:#fff;padding:1.3rem 1rem;text-align:center}
.numeri-azienda strong{display:block;font-family:var(--display);font-size:2.1rem;line-height:1;color:var(--accento)}
.numeri-azienda span{display:block;margin-top:.35rem;font-size:.84rem;color:var(--acciaio)}
@media (max-width:860px){
.storia{grid-template-columns:1fr;gap:1.6rem}
.numeri-azienda{grid-template-columns:repeat(2,1fr)}
}
/* ---------- galleria delle foto reali ---------- */
.galleria{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1.2rem;margin:2.4rem 0}
.galleria figure{margin:0;display:flex;flex-direction:column;gap:.6rem}
.galleria img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:var(--raggio);display:block}
.galleria figcaption{font-size:.88rem;color:var(--acciaio);line-height:1.55}
/* ---------- selettore ricambi su telefono ---------- */
@media (max-width:760px){
.selettore{padding:1.2rem}
.selettore .modulo__riga{grid-template-columns:minmax(0,1fr)}
.selettore .azioni{flex-direction:column;align-items:stretch}
.selettore .azioni .bottone{width:100%;text-align:center}
/* la riga targa più pulsante diventa una colonna sola */
.selettore .riga-targa{grid-template-columns:1fr !important}
}
/* ---------- pulsanti di chiamata: numero a capo e testo più grande ---------- */
.bottone--chiamata{
display:inline-flex;flex-direction:column;align-items:center;gap:.1rem;line-height:1.25;padding:.9rem 1.3rem
}
.bottone--chiamata small{font-size:.78rem;letter-spacing:.1em;opacity:.8;font-weight:600}
.bottone--chiamata strong{font-size:1.18rem;letter-spacing:.01em}
@media (max-width:620px){
.bottone--chiamata{width:100%}
.bottone--chiamata strong{font-size:1.25rem}
}
/* ---------- su telefono i pulsanti stanno uno sotto l'altro ---------- */
@media (max-width:620px){
.azioni:not(.barra-mobile):not(.hero__azioni){flex-direction:column;align-items:stretch;gap:.6rem;width:100%}
.azioni .bottone{
width:100%;justify-content:center;text-align:center;
padding:.95rem 1rem;font-size:.86rem;white-space:normal
}
/* due pulsanti affiancati restano affiancati solo se sono corti */
.azioni--affiancate{flex-direction:row}
.azioni--affiancate .bottone{flex:1;min-width:0}
/* le azioni delle offerte restano in colonna, sono già larghe */
.offerta .azioni{flex-direction:column}
}
/* ---------- pulsanti dentro i blocchi rossi ---------- */
.fascia-cta .bottone--bordo-scuro,
.bottone--su-rosso{
background:#fff;color:var(--inchiostro);border-color:#fff;
box-shadow:0 4px 0 rgba(0,0,0,.22), 0 10px 22px rgba(0,0,0,.18)
}
.fascia-cta .bottone--bordo-scuro:hover,
.bottone--su-rosso:hover{
background:var(--inchiostro);color:#fff;border-color:var(--inchiostro);
box-shadow:0 2px 0 rgba(0,0,0,.3), 0 6px 14px rgba(0,0,0,.25);transform:translateY(2px)
}
/* ombra di rilievo su tutti i pulsanti secondari, così si capisce che sono cliccabili */
.bottone--chiaro,.bottone--bordo{
box-shadow:0 2px 0 rgba(16,24,32,.12), 0 6px 14px rgba(16,24,32,.10)
}
.bottone--chiaro:hover,.bottone--bordo:hover{
box-shadow:0 1px 0 rgba(16,24,32,.16), 0 3px 8px rgba(16,24,32,.14);transform:translateY(1px)
}
.fascia-cta .bottone--scuro{box-shadow:0 4px 0 rgba(0,0,0,.25), 0 10px 22px rgba(0,0,0,.2)}
.fascia-cta .bottone--scuro:hover{transform:translateY(2px);box-shadow:0 2px 0 rgba(0,0,0,.3), 0 6px 14px rgba(0,0,0,.25)}
/* ---------- verifica antispam ---------- */
.campo--verifica label strong{color:var(--accento)}
.campo--verifica input{max-width:220px}
.trappola{position:absolute !important;left:-9999px;width:1px;height:1px;opacity:0;pointer-events:none}
/* la testata resta attaccata in alto anche nelle pagine senza hero */
.testata{position:sticky;top:0;z-index:40}
@supports (position:sticky){ body{overflow-x:clip} }
/* ---------- su desktop il testo riempie la colonna ---------- */
@media (min-width:1000px){
.risposta p{max-width:none}
.sezione__intestazione{max-width:80ch}
.faq summary{max-width:none}
.faq__risposta p{max-width:none}
/* nelle sezioni a tutta larghezza i paragrafi non restano stretti a metà */
.sezione > .contenitore > p,
.sezione > .contenitore > .risposta p,
.fascia-sede__corpo p{max-width:none}
}
/* foto affiancata nella sezione revisioni */
.foto-revisioni img{width:100%;height:auto;border-radius:var(--raggio);margin:0 0 1.2rem;display:block}
@media (min-width:1000px){ .foto-revisioni img{aspect-ratio:16/9;object-fit:cover} }
.duecol--testo{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:1.6rem}
.duecol--testo p{max-width:none;margin:0}
/* tendina: più stretta, staccata, con il filetto rosso in alto.
Vale solo da 1200px in su, cioè dove la tendina è davvero una tendina:
sotto, il menu è a elenco e questi ritocchi disegnavano un riquadro
bianco con l'ombra in mezzo alle voci. */
@media (min-width:1200px){
.menu__tendina{
border-radius:0 0 10px 10px;border-top:3px solid var(--accento);
box-shadow:0 14px 34px rgba(10,12,14,.18);min-width:220px;padding:.4rem 0;overflow:hidden
}
}
/* ---------- su schermo grande il testo riempie la colonna ---------- */
@media (min-width:1000px){
.risposta p,
.risposta,
.faq summary,
.faq__risposta p,
.sezione > .contenitore > p,
.duecol--testo p,
.zone-testo p{max-width:none}
.faq{max-width:none}
.sezione__intestazione{max-width:none}
.sezione__intestazione p{max-width:90ch}
}
/* ---------- risposta breve pensata per le risposte automatiche ---------- */
.risposta-breve{margin-top:1.4rem;border-top:1px solid var(--bordo);padding-top:1.2rem}
.risposta-breve h3{font-size:1.05rem;margin-bottom:.6rem}
.risposta-breve p{font-size:.96rem;line-height:1.65;max-width:none}
.risposta-breve ul{list-style:none;padding:0;margin:0 0 1rem;display:flex;flex-direction:column;gap:.55rem;max-width:none}
.risposta-breve li{padding-left:1.1rem;position:relative;font-size:.94rem;line-height:1.6;color:var(--acciaio)}
.risposta-breve li::before{content:"";position:absolute;left:0;top:.55em;width:7px;height:7px;background:var(--accento);border-radius:1px}
.risposta-breve li strong{color:var(--inchiostro)}
/* ---------- zone servite: due colonne di testo su schermo grande ---------- */
.zone-testo{columns:2;column-gap:2.6rem}
.zone-testo p{max-width:none;break-inside:avoid;margin-bottom:1.1rem}
.zone-testo a{color:#fff;text-decoration:underline;text-decoration-color:rgba(255,255,255,.4);text-underline-offset:3px}
.zone-testo a:hover{text-decoration-color:var(--accento)}
@media (max-width:900px){ .zone-testo{columns:1} }
/* cornetta verde dentro il pulsante, stessa misura degli altri */
.bottone--con-cornetta{display:inline-flex;align-items:center;gap:.5rem;white-space:nowrap}
.bottone--con-cornetta .cornetta{width:17px;height:17px;flex:0 0 17px;stroke:#1FA855;fill:none;stroke-width:1.9}
.bottone--con-cornetta:hover .cornetta{stroke:#fff}
/* ---------- torna su: compare solo quando si scorre verso l'alto ---------- */
.torna-su{
position:fixed;right:1.1rem;bottom:5.4rem;z-index:54;display:inline-flex;align-items:center;gap:.35rem;
padding:.45rem .8rem .45rem .6rem;border-radius:999px;border:1px solid rgba(255,255,255,.18);
background:rgba(21,24,28,.72);backdrop-filter:blur(8px);color:#fff;font-family:var(--display);
font-size:.76rem;letter-spacing:.06em;text-transform:uppercase;cursor:pointer;
opacity:0;transform:translateY(8px);transition:opacity .22s ease, transform .22s ease, background .2s ease
}
.torna-su svg{width:15px;height:15px}
.torna-su.visibile{opacity:1;transform:none}
.torna-su:hover{background:var(--inchiostro)}
@media (max-width:620px){
.torna-su{bottom:calc(9.4rem + env(safe-area-inset-bottom, 0px));right:.8rem;padding:.4rem .7rem .4rem .55rem;font-size:.72rem}
}
@media (prefers-reduced-motion:reduce){ .torna-su{transition:none} }
/* ==================================================================
TESTATA SEMPRE BIANCA
Prima sopra l'hero era trasparente e diventava piena allo scorrimento.
Adesso è bianca da subito, su tutte le pagine. Di conseguenza l'hero
e l'intestazione delle pagine interne non le scorrono più sotto:
erano tirate su di 84px apposta per passarci dietro.
Per tornare indietro basta cancellare questo blocco.
================================================================== */
body.con-hero .testata{background:var(--superficie);border-bottom-color:var(--bordo)}
body.con-hero .menu > ul > li > a{color:var(--inchiostro)}
body.con-hero .marchio img{filter:none}
body.con-hero .apri-menu span{background:var(--inchiostro)}
body.con-hero .apri-menu em{color:var(--inchiostro)}
.hero{margin-top:0}
.hero__contenuto{padding-top:4.5rem}
.testa-pagina{margin-top:0}
.testa-pagina__corpo{padding-top:2.6rem}
/* logo un po' più grande */
.marchio img{height:56px}
@media (max-width:1000px){ .marchio img{height:46px} }
@media (max-width:880px){ .marchio img{height:44px} }
/* ---------- le due sedi: riquadro con recapiti e mappa ---------- */
/* Una sede per riga, a tutta larghezza: cosi' i tre recapiti stanno su un rigo
solo e la mappa e' larga quanto il riquadro, invece di spezzare le righe
lasciando mezzo riquadro vuoto. */
.sedi{display:grid;gap:1.6rem}
.sede{
display:flex;flex-direction:column;gap:1rem;background:var(--superficie);
border:1px solid var(--bordo);border-top:3px solid var(--accento);padding:1.4rem
}
/* intestazione: nome e indirizzo a sinistra, indicazioni stradali a destra */
.sede__testa{display:flex;flex-wrap:wrap;align-items:flex-start;
justify-content:space-between;gap:1rem 1.6rem}
.sede__chi{min-width:0}
.sede__indicazioni{flex:0 0 auto;align-self:flex-start}
.sede h3{margin-bottom:.4rem}
.sede__indirizzo{font-style:normal;font-weight:600;margin-bottom:0}
.sede__nota{margin:0}
/* i tre recapiti affiancati: sinistra, centro, destra */
/* max-width:none perche' le liste nascono limitate a 70ch per la leggibilita',
e qui invece devono occupare tutto il riquadro */
.elenco-tecnico--riga{grid-template-columns:repeat(3,1fr);gap:.55rem 1.6rem;
margin-bottom:0;max-width:none}
.elenco-tecnico--riga > li{min-width:0;overflow-wrap:anywhere}
@media (max-width:760px){
.elenco-tecnico--riga{grid-template-columns:1fr}
.sede__indicazioni{width:100%;text-align:center}
}
.sede__mappa iframe,.sede__mappa .mappa{width:100%;height:340px;border:0;display:block}
.sede__mappa .segnaposto-mappa{height:auto}
/* targhette dei comuni dentro un riquadro: colonne piu' strette */
.marche--riquadro{grid-template-columns:repeat(2,1fr);gap:.55rem}
@media (max-width:620px){.marche--riquadro{grid-template-columns:1fr}}
/* Campo "allega il libretto": il selettore di file nasce con un'altezza
sua, qui si pareggia a quella degli altri campi. Il pulsante interno
prende i colori del sito invece di quelli del sistema operativo. */
/* width e min-width non sono un vezzo: il campo "scegli file" ha una
larghezza propria di circa 356px e, lasciato libero, allargava tutta la
colonna del modulo. Sul telefono il testo della colonna accanto finiva
fuori dallo schermo. */
.campo--allegato input[type=file]{height:46px;padding:0 .85rem;line-height:44px;cursor:pointer;
box-sizing:border-box;overflow:hidden;width:100%;min-width:0;max-width:100%}
.campo--allegato input[type=file]::file-selector-button{
font:inherit;font-size:.92rem;font-weight:600;margin:7px .8rem 7px 0;padding:0 .85rem;height:30px;
line-height:28px;cursor:pointer;border:1px solid var(--inchiostro);border-radius:6px;
background:transparent;color:var(--inchiostro)}
.campo--allegato input[type=file]::file-selector-button:hover{background:var(--inchiostro);color:#fff}