/* ==========================================================================
   Autoricambi Marchetti Settimio — variante scura.
   Riferimenti di settore: una concessionaria di usato premiata su Awwwards e
   una feature sportiva nota per le scroll transitions.

   Le tre scelte che ne sono uscite:
   1. si apre scuro, con la foto a tutta pagina. Il chiaro arriva dopo.
   2. raggio 8px, bottoni 5px. Lo spigolo vivo a 3px era da catalogo di
      carta, non da automotive del 2026.
   3. accento arancio-rosso caldo, campionato sul fanale della foto di
      testata.

   Le note di lavoro (misure, confronti, cronologia) stanno in riferimenti/,
   fuori dal deploy: qui non entrano nomi di altri progetti.
   ========================================================================== */
:root{
  --nero:#0E1116;
  --nero-alto:#171C24;
  --nero-riga:#242B36;
  --carta:#F4F5F7;
  --bianco:#FFFFFF;
  --inchiostro:#1A202B;
  --inchiostro-medio:#59636F;
  --tinta:#C6CEDA;
  --fuoco:#E3101E;   /* il rosso del suo logo (pagina Facebook), non piu' l'arancio del fanale */
  --fuoco-scuro:#B30C17;
  --r:8px;
  --r-bottone:5px;
  --font:'Archivo',system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:'JetBrains Mono',ui-monospace,Consolas,monospace;
  --gutter:clamp(18px,4vw,48px);
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  background:var(--carta);color:var(--inchiostro);
  font-family:var(--font);font-size:17px;line-height:1.6;
  font-variant-numeric:tabular-nums;padding-bottom:78px;
}
@media(min-width:900px){body{padding-bottom:0}}
.wrap{max-width:1180px;margin:0 auto;padding:0 var(--gutter)}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2{font-weight:800;line-height:1.06;letter-spacing:-0.025em}
h2{font-size:clamp(28px,4.2vw,46px)}
h3{font-weight:700;font-size:20px;line-height:1.25}
p{max-width:68ch}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.sez{padding:clamp(48px,7vw,92px) 0}
.scura{background:var(--nero);color:var(--tinta)}
.scura h2,.scura h3{color:#fff}
.occhio{display:block;font-family:var(--mono);font-size:12px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--fuoco-scuro);margin-bottom:14px}
.sotto{color:var(--inchiostro-medio);margin-bottom:30px}
.scura .sotto{color:var(--tinta)}

/* ---------- bottoni: un raggio, un accento ---------- */
.azioni{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  min-height:54px;padding:0 24px;border-radius:var(--r-bottone);
  font-size:17px;font-weight:700;text-decoration:none;border:1px solid transparent;
  transition:background .15s ease,border-color .15s ease,transform .1s ease;
}
.btn:active{transform:translateY(1px)}
.btn-fuoco{background:var(--fuoco);color:#fff}
.btn-fuoco:hover,.btn-fuoco:focus-visible{background:var(--fuoco-scuro)}
.btn-bianco{background:#fff;color:var(--inchiostro)}
.btn-bianco:hover,.btn-bianco:focus-visible{background:#E6E8EC}
.btn-linea{background:transparent;color:#fff;border-color:rgba(255,255,255,.42)}
.btn-linea:hover,.btn-linea:focus-visible{background:rgba(255,255,255,.1)}
.btn-scuro{background:var(--inchiostro);color:#fff}
.btn-scuro:hover,.btn-scuro:focus-visible{background:#0B0F15}
.oppure{font-weight:700;color:#fff;font-size:16px}
:focus-visible{outline:3px solid var(--fuoco);outline-offset:3px}
svg{flex:none}

/* ---------- fascia di servizio + barra alta, come su Stampede ---------- */
.servizio{background:var(--nero-alto);color:var(--tinta);font-size:15px}
.servizio .wrap{display:flex;justify-content:flex-end;gap:22px;flex-wrap:wrap;padding-top:2px;padding-bottom:2px}
.servizio a{display:inline-flex;align-items:center;gap:8px;text-decoration:none;min-height:44px}
.servizio a:hover{color:#fff}
.barra-alta{background:var(--nero);border-bottom:1px solid var(--nero-riga)}
.barra-alta .wrap{display:flex;align-items:center;justify-content:space-between;gap:18px;padding-top:14px;padding-bottom:14px}
.logotipo{color:#fff;font-weight:800;font-size:19px;letter-spacing:-0.02em;text-decoration:none;line-height:1.1}
.logotipo small{display:block;font-family:var(--mono);font-size:11px;font-weight:400;letter-spacing:.16em;color:var(--fuoco);text-transform:uppercase;margin-top:3px}
.barra-alta .btn{min-height:46px;padding:0 18px;font-size:16px}


/* ---------- navigazione fra le tre pagine ---------- */
.menu{display:none;gap:26px;align-items:center;margin-left:auto;margin-right:22px}
@media(min-width:760px){.menu{display:flex}}
.menu a{color:var(--tinta);text-decoration:none;font-weight:600;font-size:16px;
  display:inline-flex;align-items:center;min-height:44px;border-bottom:2px solid transparent;
  transition:color .15s ease,border-color .15s ease}
.menu a:hover{color:#fff}
.menu a[aria-current=page]{color:#fff;border-bottom-color:var(--fuoco)}
.menu-telefono{display:flex;gap:18px;align-items:center;margin-left:auto;margin-right:16px}
@media(min-width:760px){.menu-telefono{display:none}}
.menu-telefono a{color:var(--tinta);text-decoration:none;font-size:15px;font-weight:600;
  display:inline-flex;align-items:center;min-height:44px}

/* ---------- HERO scuro a tutta pagina ---------- */
.hero{position:relative;background:var(--nero);isolation:isolate;overflow:hidden}
.hero-foto{position:absolute;inset:0;z-index:-2;background:#000 center/cover no-repeat}
.hero::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(14,17,22,.84) 0%,rgba(14,17,22,.7) 45%,rgba(14,17,22,.95) 100%);
}
.hero .wrap{padding-top:clamp(50px,8vw,110px);padding-bottom:clamp(44px,6vw,80px);text-align:center}
.hero h1{color:#fff;font-size:clamp(34px,6.4vw,74px);max-width:15ch;margin:0 auto 22px}
.hero h1 em{font-style:normal;color:var(--fuoco)}
.hero-fatti{color:#D5DCE6;max-width:74ch;margin:0 auto 30px;font-size:clamp(16px,1.35vw,18px)}
.hero-fatti strong{color:#fff;font-weight:600}
.hero .azioni{justify-content:center}
.stato{display:inline-flex;align-items:center;gap:10px;font-weight:700;color:#fff;margin-bottom:26px;
  background:rgba(0,0,0,.45);border:1px solid rgba(255,255,255,.22);border-radius:var(--r-bottone);padding:9px 16px}
.spia{width:10px;height:10px;border-radius:50%;background:#7D8899;flex:none}
.stato.aperto .spia{background:#35C46B;box-shadow:0 0 0 0 rgba(53,196,107,.6);animation:battito 2.4s ease-out infinite}
.stato.chiuso .spia{background:var(--fuoco)}
@keyframes battito{0%{box-shadow:0 0 0 0 rgba(53,196,107,.5)}70%{box-shadow:0 0 0 10px rgba(53,196,107,0)}100%{box-shadow:0 0 0 0 rgba(53,196,107,0)}}

/* ---------- le quattro schede coi pezzi scontornati ---------- */
.schede{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:clamp(28px,4vw,44px)}
@media(min-width:860px){.schede{grid-template-columns:repeat(4,1fr)}}
.scheda{
  background:var(--nero-alto);border:1px solid var(--nero-riga);border-radius:var(--r);
  padding:14px 14px 18px;text-align:center;text-decoration:none;color:#fff;
  display:flex;flex-direction:column;gap:10px;
  transition:border-color .15s ease,background .15s ease;
}
.scheda:hover,.scheda:focus-visible{border-color:var(--fuoco);background:#1C222B}
.scheda img,.scheda .vuota{width:100%;aspect-ratio:1;background:#000;border-radius:var(--r-bottone)}
.scheda img{object-fit:contain}
.scheda .vuota{display:flex;align-items:center;justify-content:center;color:#39424F;font-family:var(--mono);font-size:12px;text-align:center;padding:10px}
.scheda span{font-weight:700;font-size:17px}
.scheda small{color:var(--tinta);font-size:14px;line-height:1.35}

/* ---------- il banco ---------- */
.banco{background:var(--bianco);border:1px solid #DDE1E7;border-radius:var(--r);padding:clamp(20px,3vw,34px);box-shadow:0 1px 3px rgba(26,32,43,.05)}
.campo{margin-bottom:20px}
.campo label{display:block;font-family:var(--mono);font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--inchiostro-medio);margin-bottom:9px}
.campo input[type=text],.campo textarea{
  width:100%;font:inherit;font-size:17px;color:var(--inchiostro);background:#fff;
  border:1px solid #C9CFD8;border-radius:var(--r-bottone);padding:14px;min-height:52px;
}
.campo input[type=text]:focus,.campo textarea:focus{outline:none;border-color:var(--fuoco);box-shadow:0 0 0 3px rgba(232,67,26,.18)}
.campo textarea{min-height:96px;resize:vertical}
.campo input::placeholder,.campo textarea::placeholder{color:#9AA2AD}
.targa{display:flex;max-width:400px;border:2px solid var(--inchiostro);border-radius:6px;overflow:hidden;background:#fff}
.targa-banda{background:#003399;color:#fff;width:38px;flex:none;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:8px 0}
.targa-stelle{font-size:9px;line-height:1.05;letter-spacing:-1px;color:#FFCC00;text-align:center}
.targa-paese{font-family:var(--mono);font-size:16px;font-weight:700;line-height:1}
.targa input{
  flex:1;min-width:0;border:0;background:transparent;text-align:center;
  font-family:var(--mono);font-size:clamp(27px,6vw,36px);font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;padding:10px 4px;min-height:64px;color:var(--inchiostro);
}
.targa input:focus{outline:none;box-shadow:none;border:0}
.targa:focus-within{box-shadow:0 0 0 3px rgba(232,67,26,.28)}
.due{display:grid;grid-template-columns:1fr;gap:20px}
@media(min-width:620px){.due{grid-template-columns:1fr 1fr}}
/* La foto: qui c'era un selettore di file. Tolto il 17/09 — dal sito la foto
   non puo' partire (nessun link apre una chat con un allegato), quindi un
   campo che la fa scegliere promette una cosa che non succede. */
.foto-dritta{border:1px dashed #B4BCC7;border-radius:var(--r);background:#F7F8FA;
  padding:clamp(16px,2vw,22px);margin-bottom:6px;text-align:center}
.foto-dritta strong{display:block;font-size:19px;font-weight:700;color:var(--inchiostro);margin-bottom:6px}
.foto-dritta p{font-size:16px;color:var(--inchiostro-medio);max-width:46ch;margin:0 auto}
.foto-freccia{color:var(--fuoco);margin-top:10px;margin-bottom:-6px}
@media(prefers-reduced-motion:no-preference){
  .foto-freccia{animation:indica 2.2s ease-in-out infinite}
}
@keyframes indica{0%,100%{transform:translateY(0)}50%{transform:translateY(7px)}}

/* i tre passi, prima del modulo */
.passi-riga{display:grid;grid-template-columns:1fr;gap:clamp(24px,3vw,40px)}
@media(min-width:760px){.passi-riga{grid-template-columns:repeat(3,1fr)}}
.passi-riga .passo{border-top:2px solid var(--fuoco);padding-top:18px}
.passi-riga .passo-n{display:block;font-family:var(--mono);font-size:14px;font-weight:700;
  letter-spacing:.2em;color:var(--fuoco);margin-bottom:12px}
.passi-riga h3{font-size:clamp(21px,2vw,26px);margin-bottom:10px;color:#fff}
.passi-riga p{color:var(--tinta);font-size:17px}

/* il pezzo e la marca, quando li clicchi, riempiono il modulo */
.campo input.appena-scritto,.campo textarea.appena-scritto{
  border-color:var(--fuoco);box-shadow:0 0 0 3px rgba(227,16,30,.18)}
.nota{font-size:15px;color:var(--inchiostro-medio);margin-top:10px}
.nota a{color:var(--fuoco-scuro);font-weight:700}

/* ---------- avviso «da confermare» ---------- */
.avviso{display:inline-flex;align-items:center;gap:9px;border:1px solid var(--fuoco);color:var(--fuoco-scuro);
  border-radius:var(--r-bottone);padding:7px 14px;font-family:var(--mono);font-size:13px;font-weight:700;
  text-transform:uppercase;letter-spacing:.06em;margin-bottom:20px;background:rgba(232,67,26,.07)}

/* ---------- orari: tabella, disegnata bene.
     La striscia a barre della versione precedente non si leggeva
     e lo confermava anche il mio dubbio: torna una lista, con oggi marcato. */
.orari{display:grid;grid-template-columns:1fr;gap:10px;max-width:620px}
.riga-orario{display:grid;grid-template-columns:1fr auto;gap:16px;align-items:center;
  background:var(--bianco);border:1px solid #DDE1E7;border-radius:var(--r);padding:15px 18px}
.riga-orario.oggi{border-color:var(--fuoco);border-width:2px;padding:14px 17px}
.riga-orario .giorno{font-weight:700;display:flex;align-items:center;gap:10px}
.riga-orario.oggi .giorno::after{content:"OGGI";font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.1em;color:#fff;background:var(--fuoco);padding:3px 7px;border-radius:3px}
.riga-orario .ore{font-family:var(--mono);font-size:16px;text-align:right;color:var(--inchiostro-medio)}
.riga-orario.oggi .ore{color:var(--inchiostro);font-weight:700}
.riga-orario.chiuso .ore{color:#9AA2AD}


/* ---------- muro delle marche ----------
   Richiesto in revisione: elenco a logo, non a testo. I loghi sono SVG
   monocromatici di Simple Icons (CC0 l'icona; il marchio resta di chi ce
   l'ha, e un rivenditore puo' mostrarlo per dire cosa vende).
   Lancia, Alfa Romeo e Mercedes non ci sono in nessuna fonte libera
   decente: servono i file veri. */
.muro{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--nero-riga);
  border:1px solid var(--nero-riga);border-radius:var(--r);overflow:hidden}
@media(min-width:620px){.muro{grid-template-columns:repeat(5,1fr)}}
.marca{background:var(--nero);border:0;width:100%;font:inherit;cursor:pointer;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:11px;min-height:118px;padding:18px 12px;transition:background .2s ease}
.marca img{width:100%;max-width:64px;height:34px;object-fit:contain;opacity:.55;
  transition:opacity .2s ease,transform .2s ease}
.marca b{font-family:var(--mono);font-size:12px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:#7C8797;transition:color .2s ease;text-align:center;line-height:1.2}
.marca:hover{background:var(--nero-alto)}
.marca:hover img{opacity:1;transform:translateY(-2px)}
.marca:hover b{color:#fff}

/* ---------- dal 1970 ---------- */
.storia{display:grid;grid-template-columns:1fr;gap:28px;align-items:center}
@media(min-width:900px){.storia{grid-template-columns:auto 1fr;gap:64px}}
.numerone{font-family:var(--mono);font-weight:700;font-size:clamp(84px,13vw,170px);line-height:.82;letter-spacing:-0.05em;color:#fff}
.numerone small{display:block;font-family:var(--font);font-size:13px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--fuoco);margin-top:16px;line-height:1.4}

/* ---------- dove siamo ---------- */
.due-col{display:grid;grid-template-columns:1fr;gap:28px;align-items:start}
@media(min-width:840px){.due-col{grid-template-columns:1fr 1fr;gap:44px}}
.mappa{width:100%;height:auto;aspect-ratio:768/460;object-fit:cover;border:1px solid #DDE1E7;border-radius:var(--r);background:#E4E6EA}
.foto-storia{width:100%;max-width:340px;height:auto;aspect-ratio:2/3;object-fit:cover;border-radius:var(--r);background:#E4E6EA;margin:0 auto}

/* ---------- piede ---------- */
.piede{background:var(--nero);color:var(--tinta);padding:52px 0 44px;font-size:16px}
.piede a{color:#fff}
.piede h4{color:#fff;font-size:17px;font-weight:700;margin-bottom:12px}
.piede-griglia{display:grid;grid-template-columns:1fr;gap:28px}
@media(min-width:720px){.piede-griglia{grid-template-columns:1.4fr 1fr 1fr}}
.piede-contatto{display:inline-flex;align-items:center;min-height:44px;font-weight:700;font-family:var(--mono);text-decoration:underline;text-underline-offset:4px}
.piede-fine{border-top:1px solid var(--nero-riga);margin-top:36px;padding-top:20px;font-size:14px;color:#8C97A6;display:grid;gap:8px}

/* ---------- barra pollice ---------- */
.pollice{position:fixed;left:0;right:0;bottom:0;z-index:40;display:grid;grid-template-columns:1fr 1fr;gap:8px;
  background:var(--nero);padding:calc(9px + env(safe-area-inset-bottom,0px)) 9px 9px;box-shadow:0 -2px 18px rgba(0,0,0,.4)}
.pollice a{display:flex;align-items:center;justify-content:center;gap:9px;min-height:52px;border-radius:var(--r-bottone);
  text-decoration:none;font-weight:700;font-size:17px}
.pollice .chiama{background:var(--fuoco);color:#fff}
.pollice .wa{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.42)}
@media(min-width:900px){.pollice{display:none}}

/* ---------- movimento: CSS nativo, zero librerie, zero KB.
     GSAP sarebbe ~150 KB su una pagina che deve aprirsi in 1,5s sul telefono
     di uno fermo sulla Flaminia. Il @supports non e' facoltativo: senza,
     Firefox stable lascerebbe questi blocchi invisibili a opacity 0. -------- */
.entra{opacity:1;transform:none}
@supports (animation-timeline: view()){
  .entra{opacity:0;transform:translateY(22px);animation:entra-in linear both;
    animation-timeline:view();animation-range:entry 0% entry 34%}
}
@keyframes entra-in{to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){
  .entra{animation:none;opacity:1;transform:none}
  html{scroll-behavior:auto}
  .stato.aperto .spia{animation:none}
}

/* ---------- pagine interne: testata corta ---------- */
.hero-corta .wrap{padding-top:clamp(40px,6vw,76px);padding-bottom:clamp(36px,5vw,64px)}
.hero-corta h1{font-size:clamp(30px,5vw,58px);max-width:18ch}
.numerone-scuro{color:var(--inchiostro)}
.numerone-scuro small{color:var(--fuoco-scuro)}

/* muro delle marche su fondo chiaro (pagina Chi siamo) */
.sez:not(.scura) .muro{background:#DDE1E7;border-color:#DDE1E7}
.sez:not(.scura) .marca{background:var(--bianco)}
.sez:not(.scura) .marca img{filter:invert(1);opacity:.78}
.sez:not(.scura) .marca b{color:var(--inchiostro-medio)}
.sez:not(.scura) .marca:hover{background:#F7F8FA}
.sez:not(.scura) .marca:hover img{opacity:1}
.sez:not(.scura) .marca:hover b{color:var(--inchiostro)}

/* ---------- contatti: le tre tessere ---------- */
.contatti-griglia{display:grid;grid-template-columns:1fr;gap:14px}
@media(min-width:760px){.contatti-griglia{grid-template-columns:repeat(3,1fr)}}
.contatto{display:flex;flex-direction:column;gap:7px;text-decoration:none;color:var(--inchiostro);
  background:var(--bianco);border:1px solid #DDE1E7;border-radius:var(--r);padding:24px;
  min-height:132px;transition:border-color .15s ease,transform .15s ease}
.contatto:hover{border-color:var(--fuoco);transform:translateY(-2px)}
.contatto-che{font-family:var(--mono);font-size:12px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--fuoco-scuro)}
.contatto strong{font-size:clamp(21px,2.4vw,27px);font-weight:800;letter-spacing:-0.02em}
.contatto small{color:var(--inchiostro-medio);font-size:15px;line-height:1.4}

/* ---------- il riquadro onesto su Chi siamo ---------- */
.da-scrivere{background:var(--bianco);border:1px dashed #B4BCC7;border-radius:var(--r);
  padding:clamp(20px,3vw,32px)}
.da-scrivere p{color:var(--inchiostro-medio)}