/* ==========================================================================
   VARIANTE B — Autoricambi Marchetti Settimio
   Lo leggo come: sito vetrina per un ricambista dal 1970, pubblico over 45
   dal telefono e meccanici della zona, linguaggio da bancone con la cura di
   un catalogo fotografico stampato, verso il chiaro editoriale monocromo con
   un accento solo. Famiglia Timeless (SOTD, bianco/nero, tipografia,
   parallasse) + Ballena (foto grande, aria) + ESPN F1 (lo scroll racconta).
   E' l'opposto voluto della variante A, che apre scura e fotografica.

   Dial: VARIANZA 7 · MOVIMENTO 6 · DENSITA' 4.

   Anti-default applicati:
   - fondo bianco e osso freddo (#F6F5F2), non il beige caldo bandito
   - un accento solo: il COBALTO della targa italiana, che e' del mestiere
   - Barlow + Barlow Condensed: nata dalla grafica delle targhe e delle
     insegne californiane, una famiglia sola in due larghezze
   - un raggio solo, 2px, su tutto (A sta a 8px: qui e' spigolo)
   - eyebrow: una in tutta la home
   - niente SVG decorativi, niente gradienti, niente glass
   ========================================================================== */
:root{
  --bianco:#FFFFFF;
  --osso:#F6F5F2;
  --inchiostro:#111318;
  --grigio:#5C6370;
  --linea:#E3E4E8;
  --linea-forte:#C9CBD2;
  --cobalto:#1F3BE0;
  --cobalto-scuro:#152CB0;
  --cobalto-tinta:#E8ECFB;
  --r:2px;
  --display:'Barlow Condensed','Archivo Narrow','Arial Narrow',sans-serif;
  --testo:'Barlow',system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:'JetBrains Mono',ui-monospace,Consolas,monospace;
  --gutter:clamp(18px,4vw,56px);
  --barra:76px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  background:var(--bianco);color:var(--inchiostro);
  font-family:var(--testo);font-size:18px;line-height:1.55;font-weight:400;
  font-variant-numeric:tabular-nums;padding-bottom:78px;
}
@media(min-width:900px){body{padding-bottom:0}}
.wrap{max-width:1240px;margin:0 auto;padding:0 var(--gutter)}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3{font-family:var(--display);font-weight:800;line-height:.92;letter-spacing:-0.01em;text-transform:uppercase}
h2{font-size:clamp(44px,7vw,96px)}
h3{font-size:clamp(26px,3vw,36px);font-weight:700}
p{max-width:62ch}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.sez{padding:clamp(56px,9vw,128px) 0}
.osso{background:var(--osso)}
.cobalto{background:var(--cobalto);color:#fff}
.cobalto h2,.cobalto h3{color:#fff}
.nero{background:var(--inchiostro);color:#D9DBE1}
.nero h2,.nero h3{color:#fff}
.occhio{display:block;font-family:var(--mono);font-size:12px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--cobalto);margin-bottom:18px}
.sotto{color:var(--grigio);font-size:19px;margin-bottom:34px}
.cobalto .sotto,.nero .sotto{color:rgba(255,255,255,.78)}

/* ---------- 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:10px;
  min-height:56px;padding:0 26px;border-radius:var(--r);
  font-family:var(--display);font-size:20px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;
  text-decoration:none;border:2px solid transparent;
  transition:background .15s ease,border-color .15s ease,color .15s ease,transform .1s ease;
}
.btn:active{transform:translateY(1px)}
.btn-cobalto{background:var(--cobalto);color:#fff;border-color:var(--cobalto)}
.btn-cobalto:hover,.btn-cobalto:focus-visible{background:var(--cobalto-scuro);border-color:var(--cobalto-scuro)}
.btn-nero{background:var(--inchiostro);color:#fff;border-color:var(--inchiostro)}
.btn-nero:hover,.btn-nero:focus-visible{background:#000}
.btn-linea{background:transparent;color:var(--inchiostro);border-color:var(--inchiostro)}
.btn-linea:hover,.btn-linea:focus-visible{background:var(--inchiostro);color:#fff}
.btn-bianco{background:#fff;color:var(--inchiostro);border-color:#fff}
.btn-bianco:hover,.btn-bianco:focus-visible{background:var(--osso);border-color:var(--osso)}
.cobalto .btn-linea{color:#fff;border-color:#fff}
.cobalto .btn-linea:hover{background:#fff;color:var(--cobalto)}
:focus-visible{outline:3px solid var(--cobalto);outline-offset:3px}
svg{flex:none}

/* ---------- barra che galleggia (Ballena), ma a spigolo ---------- */
.barra{
  position:fixed;top:14px;left:50%;transform:translateX(-50%);z-index:50;
  width:min(1240px - 2*var(--gutter),calc(100vw - 24px));
  background:rgba(255,255,255,.92);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border:1px solid var(--linea);border-radius:var(--r);
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:8px 8px 8px 18px;box-shadow:0 8px 30px rgba(17,19,24,.08);
}
.logotipo{font-family:var(--display);font-weight:800;font-size:22px;letter-spacing:.01em;text-transform:uppercase;
  color:var(--inchiostro);text-decoration:none;line-height:1;display:flex;flex-direction:column;justify-content:center;gap:3px;min-height:44px}
.logotipo small{font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.2em;color:var(--cobalto);text-transform:uppercase}
.menu{display:none;gap:4px;align-items:center;margin-left:auto}
@media(min-width:820px){.menu{display:flex}}
.menu a{font-family:var(--display);font-size:18px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  color:var(--grigio);text-decoration:none;padding:0 14px;min-height:44px;display:inline-flex;align-items:center;
  border-bottom:2px solid transparent;transition:color .15s ease,border-color .15s ease}
.menu a:hover{color:var(--inchiostro)}
.menu a[aria-current=page]{color:var(--inchiostro);border-bottom-color:var(--cobalto)}
.barra .btn{min-height:44px;padding:0 18px;font-size:18px}
/* sotto 820px il menu spariva e le due pagine interne restavano
   irraggiungibili (critico Codex). Due link compatti, sempre visibili. */
.menu-corto{display:flex;gap:2px;align-items:center;margin-left:auto}
@media(min-width:820px){.menu-corto{display:none}}
.menu-corto a{font-family:var(--display);font-size:16px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;
  color:var(--grigio);text-decoration:none;padding:0 9px;min-height:44px;display:inline-flex;align-items:center}
.menu-corto a[aria-current=page]{color:var(--inchiostro)}
@media(max-width:419px){.menu-corto a{font-size:14px;padding:0 6px}}
.spazio-barra{height:calc(var(--barra) + 14px)}

/* ---------- HERO: a due colonne, asimmetrica ----------
   NIENTE overflow:hidden qui: un antenato con overflow diverso da visible
   spegne position:sticky, e la colonna dell'esploso smetterebbe di restare
   ferma. Costato mezz'ora il 17/09. */
.hero{background:var(--osso);position:relative}
.hero .wrap{display:grid;grid-template-columns:1fr;gap:28px;align-items:center;
  padding-top:clamp(28px,4vw,60px);padding-bottom:clamp(40px,6vw,88px)}
@media(min-width:900px){.hero .wrap{grid-template-columns:1.05fr .95fr;gap:40px;min-height:calc(100vh - var(--barra) - 14px)}}

/* ---------- IL RACCONTO LUNGO: testi a sinistra, esploso fermo a destra ----------
   Una sola corsa: apertura + tre passi scorrono a sinistra, e a destra
   l'esploso resta fermo a tutto schermo e si smonta fino all'ultimo passo.
   Lo sticky e' CSS, non un pin GSAP: in pagina resta un solo pin, quello
   della striscia dei pezzi. */
@media(min-width:900px){
  /* align-items:stretch (il default) non e' un dettaglio: la colonna destra
     deve essere alta quanto TUTTA la riga, se no lo sticky ha pochi pixel di
     corsa e l'esploso si stacca a meta' dei passi. */
  .racconto-lungo .wrap{grid-template-columns:1fr 1fr;gap:clamp(40px,5vw,80px);align-items:stretch}
  .racconto-lungo .apertura{min-height:calc(100vh - var(--barra) - 90px);display:flex;flex-direction:column;justify-content:center}
  .racconto-lungo .passi{padding-top:clamp(20px,4vw,60px)}
  /* doppia classe non per vezzo: .hero-pezzo{position:relative} sta piu' in
     basso nel foglio e a parita' di specificita' vincerebbe lei */
  .hero-pezzo.esploso-fisso{position:sticky;top:calc(var(--barra) + 30px);
    height:calc(100vh - var(--barra) - 70px);aspect-ratio:auto;
    display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:22px}
  /* altezza esplicita obbligatoria: quando il JS impila i fotogrammi sono
     tutti in position:absolute, quindi in flusso non resta niente e con
     height:auto la pila collassa a zero (immagine invisibile) */
  .esploso-fisso .esploso-pila{width:100%;height:60vh;flex:none}
  /* la targhetta torna nel flusso, sotto l'immagine: da assoluta finiva in
     fondo a una colonna alta uno schermo, staccata dal pezzo che nomina */
  .esploso-fisso .hero-targhetta{position:static}
}
.esploso-pila{position:relative;width:100%;display:flex;align-items:center;justify-content:center}
.esploso-pila img{width:100%;height:100%;object-fit:contain}
/* Quando il JS impila i venti fotogrammi, TUTTI diventano sovrapposti e
   spenti, primo compreso: i fotogrammi hanno trasparenza vera, quindi uno
   sopra non copre quello sotto e si vedrebbero due esplosi insieme. */
.esploso-pila.impilata img{position:absolute;inset:0;opacity:0}
.hero h1{font-size:clamp(58px,8.2vw,118px);color:var(--inchiostro);margin-bottom:22px;max-width:11ch}
.hero h1 em{font-style:normal;color:var(--cobalto)}
.hero-fatti{font-size:clamp(18px,1.5vw,21px);color:var(--grigio);margin-bottom:30px;max-width:52ch}
.hero-fatti strong{color:var(--inchiostro);font-weight:600}
.hero-pezzo{position:relative;aspect-ratio:1;display:flex;align-items:center;justify-content:center}
/* i fotogrammi dell'esploso hanno trasparenza vera: niente mix-blend-mode, che
   serviva solo a far sparire il fondo bianco dei PNG senza canale alpha */
.hero-pezzo img{width:100%;height:100%;object-fit:contain}
.hero-targhetta{position:absolute;left:0;bottom:0;background:var(--inchiostro);color:#fff;
  font-family:var(--mono);font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  padding:9px 13px;border-radius:var(--r)}
@media(max-width:899px){
  /* l'order va sul figlio diretto della griglia: da quando l'esploso sta
     dentro .colonna-esploso, metterlo su .hero-pezzo non sposta piu' niente
     e l'immagine finiva in fondo alla sezione */
  .colonna-esploso{order:-1}
  .hero-pezzo{max-width:360px;margin:0 auto}
  /* Da telefono l'esploso non segue lo scroll (sarebbero venti immagini da
     scaricare per nulla): si smonta al tocco, e si rimonta ritoccando. */
  .esploso-pila{cursor:pointer}
  .tocca-esploso{margin-top:14px;align-self:flex-start;
    font-family:var(--mono);font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
    background:#fff;color:var(--inchiostro);border:2px solid var(--inchiostro);border-radius:var(--r);
    padding:0 16px;min-height:44px;display:inline-flex;align-items:center;gap:9px;cursor:pointer}
  .tocca-esploso::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--cobalto)}
  .tocca-esploso[aria-pressed="true"]::before{background:var(--inchiostro)}
  .tocca-esploso[disabled]{opacity:.55}
}

.stato{display:inline-flex;align-items:center;gap:10px;font-family:var(--display);font-size:19px;font-weight:700;
  letter-spacing:.03em;text-transform:uppercase;margin-bottom:20px;
  border:2px solid var(--inchiostro);border-radius:var(--r);padding:8px 14px;background:#fff}
.spia{width:11px;height:11px;border-radius:50%;background:#9AA0AA;flex:none}
.stato.aperto .spia{background:#17A94D;box-shadow:0 0 0 0 rgba(23,169,77,.5);animation:battito 2.4s ease-out infinite}
.stato.chiuso .spia{background:var(--cobalto)}
@keyframes battito{0%{box-shadow:0 0 0 0 rgba(23,169,77,.5)}70%{box-shadow:0 0 0 10px rgba(23,169,77,0)}100%{box-shadow:0 0 0 0 rgba(23,169,77,0)}}

/* ---------- I TRE PASSI ----------
   Il numero grande sticky e' sparito il 17/09: la colonna fissa adesso e'
   l'esploso, e due elementi fermi nella stessa schermata litigano. Il numero
   torna accanto al suo passo, dove serve a leggere. */
.passo{padding:clamp(26px,4vw,48px) 0;border-top:1px solid var(--linea);display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:start}
.passo:last-child{border-bottom:1px solid var(--linea)}
.passo-n{font-family:var(--display);font-weight:800;font-size:clamp(40px,5vw,64px);line-height:.85;color:var(--cobalto);min-width:2ch}
@media(min-width:900px){.passo{min-height:52vh;padding:clamp(40px,6vw,80px) 0;gap:26px}}
.passo h3{margin-bottom:12px}
.passo p{color:var(--grigio);font-size:19px}

/* ---------- LA STRISCIA DEI PEZZI: orizzontale, guidata dallo scroll ----------
   Da 900px in su GSAP la pinna e la fa scorrere di lato mentre scendi
   (la scroll transition premiata sulla feature F1). Sotto, e senza GSAP,
   e' una fila che si scorre col dito, con lo scatto sulle schede. */
.striscia-sez{overflow:hidden}
.striscia-testa{margin-bottom:clamp(24px,3vw,40px)}
.striscia-testa h2{margin-bottom:14px}
.striscia{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:12px;
  -webkit-overflow-scrolling:touch;scrollbar-width:none}
.striscia::-webkit-scrollbar{display:none}
@media(min-width:900px){.striscia{overflow:visible;padding-bottom:0}}
.pezzo{flex:0 0 min(78vw,300px);scroll-snap-align:start;background:#fff;border:1px solid var(--linea);border-radius:var(--r);
  padding:18px 18px 22px;text-decoration:none;color:var(--inchiostro);display:flex;flex-direction:column;gap:12px;
  transition:border-color .15s ease,transform .15s ease}
@media(min-width:900px){.pezzo{flex:0 0 340px}}
.pezzo:hover{border-color:var(--inchiostro);transform:translateY(-3px)}
.pezzo img{width:100%;aspect-ratio:1;object-fit:contain;background:#fff;mix-blend-mode:multiply}
.pezzo-nome{font-family:var(--display);font-size:30px;font-weight:800;text-transform:uppercase;line-height:1}
.pezzo-nota{color:var(--grigio);font-size:16px}
.pezzo-codice{font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.16em;color:var(--cobalto);text-transform:uppercase}

/* ---------- IL BANCO: targa e richiesta ---------- */
.banco{background:#fff;border:2px solid var(--inchiostro);border-radius:var(--r);padding:clamp(22px,3vw,40px)}
.campo{margin-bottom:22px}
.campo label{display:block;font-family:var(--mono);font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--grigio);margin-bottom:9px}
.campo input[type=text],.campo textarea{
  width:100%;font:inherit;font-size:18px;color:var(--inchiostro);background:#fff;
  border:1px solid var(--linea-forte);border-radius:var(--r);padding:14px 15px;min-height:54px;
}
.campo input[type=text]:focus,.campo textarea:focus{outline:none;border-color:var(--cobalto);box-shadow:0 0 0 3px var(--cobalto-tinta)}
.campo textarea{min-height:100px;resize:vertical}
.campo input::placeholder,.campo textarea::placeholder{color:#9AA0AA}
.targa{display:flex;max-width:420px;border:2px solid var(--inchiostro);border-radius:6px;overflow:hidden;background:#fff}
.targa-banda{background:#003399;color:#fff;width:40px;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(28px,6vw,38px);font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;padding:10px 4px;min-height:66px;color:var(--inchiostro)}
.targa input:focus{outline:none;box-shadow:none;border:0}
.targa:focus-within{box-shadow:0 0 0 3px var(--cobalto-tinta)}
.due{display:grid;grid-template-columns:1fr;gap:22px}
@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. Adesso c'e'
   l'istruzione vera, con la freccia che punta al pulsante. */
.foto-dritta{border:1px dashed var(--linea-forte);border-radius:var(--r);
  padding:clamp(16px,2vw,22px);margin-bottom:6px;text-align:center;background:var(--osso)}
.foto-dritta strong{display:block;font-family:var(--display);font-size:clamp(20px,2vw,24px);
  font-weight:800;letter-spacing:.02em;text-transform:uppercase;color:var(--inchiostro);margin-bottom:6px}
.foto-dritta p{font-size:17px;color:var(--grigio);max-width:46ch;margin:0 auto}
.foto-freccia{color:var(--cobalto);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)}}

/* il pezzo e la marca, quando li clicchi, riempiono il modulo: si accendono
   un attimo cosi' si capisce che qualcosa e' successo */
.campo input.appena-scritto,.campo textarea.appena-scritto{
  border-color:var(--cobalto);box-shadow:0 0 0 3px rgba(31,59,224,.16)}
.nota{font-size:16px;color:var(--grigio);margin-top:10px}
.nota a{color:var(--cobalto);font-weight:600}
.nota a.mono{display:inline-flex;align-items:center;min-height:44px;padding:0 2px}

/* ---------- avviso «da confermare» ---------- */
.avviso{display:inline-flex;align-items:center;gap:9px;border:1px solid var(--cobalto);color:var(--cobalto);
  border-radius:var(--r);padding:7px 14px;font-family:var(--mono);font-size:12px;font-weight:700;
  text-transform:uppercase;letter-spacing:.14em;margin-bottom:22px;background:var(--cobalto-tinta)}
.cobalto .avviso,.nero .avviso{color:#fff;border-color:rgba(255,255,255,.55);background:rgba(255,255,255,.12)}

/* ---------- ORARI: editoriale ---------- */
.orari{display:grid;grid-template-columns:1fr;max-width:720px;border-top:2px solid var(--inchiostro)}
.riga-orario{display:grid;grid-template-columns:1fr auto;gap:18px;align-items:center;padding:16px 0;border-bottom:1px solid var(--linea)}
.riga-orario .giorno{font-family:var(--display);font-size:clamp(26px,3vw,34px);font-weight:700;text-transform:uppercase;display:flex;align-items:center;gap:12px;line-height:1}
.riga-orario.oggi .giorno::after{content:"OGGI";font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.14em;color:#fff;background:var(--cobalto);padding:4px 8px;border-radius:var(--r)}
.riga-orario .ore{font-family:var(--mono);font-size:17px;color:var(--grigio);text-align:right}
.riga-orario.oggi .ore{color:var(--inchiostro);font-weight:700}
.riga-orario.chiuso .ore{color:#9AA0AA}

/* ---------- MARCHE ---------- */
.muro{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--linea);border:1px solid var(--linea);border-radius:var(--r);overflow:hidden}
@media(min-width:620px){.muro{grid-template-columns:repeat(5,1fr)}}
.marca{background:#fff;border:0;width:100%;font:inherit;cursor:pointer;text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
  min-height:116px;padding:16px 10px;transition:background .15s ease}
.marca img{width:100%;max-width:60px;height:32px;object-fit:contain;filter:invert(1);opacity:.8;transition:opacity .15s ease,transform .15s ease}
.marca b{font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--grigio);text-align:center;line-height:1.2}
.marca:hover{background:var(--osso)}
.marca:hover img{opacity:1;transform:translateY(-2px)}
.marca:hover b{color:var(--inchiostro)}

/* ---------- DAL 1970 ---------- */
.storia{display:grid;grid-template-columns:1fr;gap:26px;align-items:end}
@media(min-width:900px){.storia{grid-template-columns:auto 1fr;gap:72px}}
.numerone{font-family:var(--display);font-weight:800;font-size:clamp(120px,20vw,300px);line-height:.8;letter-spacing:-0.04em;color:var(--inchiostro)}
.numerone small{display:block;font-family:var(--mono);font-size:13px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--cobalto);margin-top:18px;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:56px}}
.mappa{width:100%;height:auto;aspect-ratio:768/460;object-fit:cover;border:1px solid var(--linea);border-radius:var(--r);background:var(--osso)}
.foto-storia{width:100%;max-width:340px;height:auto;aspect-ratio:2/3;object-fit:cover;border-radius:var(--r);background:var(--osso);margin:0 auto}

/* ---------- 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:8px;text-decoration:none;color:var(--inchiostro);
  background:#fff;border:1px solid var(--linea);border-radius:var(--r);padding:26px;min-height:140px;
  transition:border-color .15s ease,transform .15s ease}
.contatto:hover{border-color:var(--inchiostro);transform:translateY(-3px)}
.contatto-che{font-family:var(--mono);font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--cobalto)}
.contatto strong{font-family:var(--display);font-size:clamp(28px,3vw,38px);font-weight:800;text-transform:uppercase;line-height:1}
.contatto small{color:var(--grigio);font-size:16px}

/* ---------- riquadro onesto di Chi siamo ---------- */
.da-scrivere{background:#fff;border:1px dashed var(--linea-forte);border-radius:var(--r);padding:clamp(22px,3vw,36px)}
.da-scrivere p{color:var(--grigio)}

/* ---------- pagine interne: testata corta ---------- */
.hero-corta .wrap{min-height:0;padding-top:clamp(36px,5vw,72px);padding-bottom:clamp(36px,5vw,72px);grid-template-columns:1fr}
.hero-corta h1{font-size:clamp(52px,9vw,128px);max-width:14ch}

/* ---------- piede ---------- */
.piede{background:var(--inchiostro);color:#B9BEC8;padding:56px 0 48px;font-size:16px}
.piede a{color:#fff}
.piede h4{color:#fff;font-family:var(--display);font-size:22px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;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-nav{display:flex;flex-wrap:wrap;gap:4px 18px;margin-top:10px}
.piede-nav a{display:inline-flex;align-items:center;min-height:44px;font-family:var(--display);font-size:19px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;text-decoration:none}
.piede-fine{border-top:1px solid #2A2E38;margin-top:38px;padding-top:22px;font-size:14px;color:#8B919D;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(--inchiostro);padding:calc(9px + env(safe-area-inset-bottom,0px)) 9px 9px;box-shadow:0 -2px 18px rgba(0,0,0,.3)}
.pollice a{display:flex;align-items:center;justify-content:center;gap:9px;min-height:52px;border-radius:var(--r);
  text-decoration:none;font-family:var(--display);font-weight:700;font-size:20px;letter-spacing:.03em;text-transform:uppercase}
.pollice .chiama{background:var(--cobalto);color:#fff}
.pollice .wa{background:transparent;color:#fff;border:2px solid rgba(255,255,255,.5)}
@media(min-width:900px){.pollice{display:none}}

/* ---------- movimento in CSS nativo, come rete di sicurezza ----------
   Il grosso lo fa GSAP (movimento.js). Se non carica, i blocchi entrano
   col CSS scroll-driven; e senza nemmeno quello, restano visibili. */
.entra{opacity:1;transform:none}
@supports (animation-timeline: view()){
  .entra{opacity:0;transform:translateY(24px);animation:entra-in linear both;
    animation-timeline:view();animation-range:entry 0% entry 30%}
}
@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}
}