@charset "UTF-8";
/* ============================================================
   MEZZO METRO DI TACCO — concept «MEZZO METRO»
   Firma: il righello che misura la pagina e finisce a 50 cm.
   Palette misurata sui pixel del logo. Nessuna libreria.
   ============================================================ */

@font-face{font-family:"Gabarito";src:url("../font/gabarito-latin.woff2") format("woff2");
  font-weight:400 900;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215}
@font-face{font-family:"Figtree";src:url("../font/figtree-latin.woff2") format("woff2");
  font-weight:300 800;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215}

:root{
  --nero:#14100F;      --nero-2:#1D1817;   --nero-3:#2A2322;
  --crema:#F6E9D8;     --crema-soft:#C9BCAE;
  --fucsia:#F9296E;    --fucsia-chiaro:#FF5C90;
  --giallo:#FBC607;    --neon:#63D9EB;
  --filo:rgba(246,233,216,.14);
  --rail:76px;         --spazio:clamp(4.5rem,9vw,8rem);
  --dentro:1240px;
  --r:14px;
  --t:.55s cubic-bezier(.2,.7,.25,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;background:var(--nero);color:var(--crema);
  font-family:"Figtree",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:clamp(1rem,.96rem + .22vw,1.1rem);line-height:1.62;font-weight:380;
  overflow-x:hidden;-webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
button{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--neon);outline-offset:3px;border-radius:4px}

h1,h2,h3{font-family:"Gabarito",system-ui,sans-serif;font-weight:800;line-height:1.02;
  letter-spacing:-.022em;margin:0;text-wrap:balance}
h1{font-size:clamp(2.5rem,7.2vw,5.6rem)}
h2{font-size:clamp(2rem,4.6vw,3.5rem)}
h3{font-size:clamp(1.2rem,2vw,1.5rem);font-weight:700;letter-spacing:-.01em}
p{margin:0 0 1rem}
.salta{position:absolute;left:-9999px}
.salta:focus{left:1rem;top:1rem;z-index:200;background:var(--fucsia);color:#fff;padding:.7rem 1.1rem;border-radius:10px}

/* ---------- 📏 IL RIGHELLO — la firma ---------- */
.righello{position:fixed;inset:0 auto 0 0;width:var(--rail);z-index:40;pointer-events:none;
  background:linear-gradient(180deg,var(--nero-2),#191413);border-right:1px solid var(--filo)}
.righello__tacche{position:absolute;inset:0 0 0 auto;width:22px;
  background:
    repeating-linear-gradient(to bottom,var(--giallo) 0 1px,transparent 1px 8px),
    linear-gradient(to bottom,transparent,transparent);
  opacity:.34}
.righello__tacche::after{content:"";position:absolute;inset:0;width:13px;left:9px;
  background:repeating-linear-gradient(to bottom,var(--giallo) 0 2px,transparent 2px 40px);opacity:.85}
.righello__cursore{position:absolute;left:0;right:0;top:0;height:2px;background:var(--fucsia);
  box-shadow:0 0 14px 2px rgba(249,41,110,.85);will-change:transform;
  transform:translate3d(0,calc(var(--p,0) * (100svh - 2px)),0)}
.righello__lettura{position:absolute;left:0;right:0;top:0;will-change:transform;
  text-align:center;padding-top:.4rem;
  transform:translate3d(0,calc(var(--p,0) * (100svh - 66px)),0)}
.righello__num{display:block;font-family:"Gabarito",sans-serif;font-weight:800;font-size:1.35rem;
  color:var(--giallo);font-variant-numeric:tabular-nums;line-height:1}
.righello__um{display:block;font-size:.62rem;letter-spacing:.16em;color:var(--crema-soft);text-transform:uppercase}
.righello__fine{position:absolute;left:8px;right:8px;bottom:1.1rem;text-align:center;
  font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:var(--crema-soft);
  opacity:0;transition:opacity .5s}
.righello.compiuto .righello__fine{opacity:1;color:var(--neon)}
.righello.compiuto .righello__tacche{opacity:.75}

/* quota stampata accanto a ogni sezione */
.quota{display:inline-flex;align-items:center;gap:.5rem;font-family:"Gabarito",sans-serif;
  font-weight:700;font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--giallo);margin:0 0 1rem}
.quota::before{content:"";width:26px;height:1px;background:var(--giallo);opacity:.6}

/* ---------- intestazione ---------- */
.testa{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;align-items:center;gap:1rem;
  padding:.7rem clamp(1rem,3vw,2rem) .7rem calc(var(--rail) + clamp(1rem,3vw,2rem));
  background:rgba(20,16,15,0);transition:background .4s,box-shadow .4s,padding .4s}
.testa.giu{background:rgba(20,16,15,.93);box-shadow:0 1px 0 var(--filo)}
.testa__logo{display:flex;align-items:center;flex:0 0 auto}
.testa__logo img{width:clamp(112px,15vw,168px)}
.testa__nav{margin-left:auto;display:flex;align-items:center;gap:clamp(.8rem,2vw,1.9rem)}
.testa__nav a{text-decoration:none;font-size:.95rem;font-weight:500;opacity:.85;transition:opacity .25s,color .25s}
.testa__nav a:hover{opacity:1;color:var(--giallo)}
@media (max-width:860px){.testa__nav .solo-grande{display:none}}

.wa{display:inline-flex;align-items:center;gap:.5rem;background:var(--fucsia);color:#fff;
  text-decoration:none;font-weight:700;padding:.62rem 1.15rem;border-radius:999px;
  font-size:.95rem;border:0;cursor:pointer;
  transition:transform .25s,box-shadow .25s,background .25s}
.wa:hover{transform:translateY(-2px);box-shadow:0 10px 26px -8px rgba(249,41,110,.75);background:var(--fucsia-chiaro)}
.wa svg{width:17px;height:17px;fill:currentColor;flex:0 0 auto}
.wa--vuoto{background:transparent;color:var(--crema);border:1px solid var(--filo)}
.wa--vuoto:hover{background:rgba(246,233,216,.07);box-shadow:none;border-color:var(--crema-soft)}

/* ---------- impianto ---------- */
main{padding-left:var(--rail)}
.sezione{padding:var(--spazio) clamp(1.1rem,4vw,3.2rem);position:relative}
.dentro{width:100%;max-width:var(--dentro);margin-inline:auto}
.stretta{width:100%;max-width:720px;margin-inline:auto}
.occhiello{font-size:1.16rem;color:var(--crema-soft);max-width:62ch}

/* ---------- apertura ---------- */
.apertura{min-height:100svh;display:grid;place-items:center;text-align:center;
  padding:6rem clamp(1.1rem,4vw,3rem) 5rem;position:relative;overflow:hidden}
.apertura::before{content:"";position:absolute;left:50%;top:34%;translate:-50% -50%;
  width:min(1100px,120vw);aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,rgba(249,41,110,.42),rgba(99,217,235,.20) 40%,transparent 66%);
  opacity:0;animation:accendi 2.4s .35s cubic-bezier(.2,.8,.3,1) forwards}
@keyframes accendi{
  0%{opacity:0}   9%{opacity:.9}  13%{opacity:.15} 19%{opacity:1}
  23%{opacity:.3} 30%{opacity:.95} 100%{opacity:1}}
.apertura__box{position:relative;z-index:1;display:grid;justify-items:center;gap:clamp(.9rem,2vh,1.5rem)}
.apertura__logo{width:min(510px,70vw);opacity:0;animation:entra .9s .15s ease-out forwards;
  filter:drop-shadow(0 14px 40px rgba(0,0,0,.6))}
.apertura h1{max-width:16ch;font-size:clamp(2rem,4.6vw,3.9rem)}
.apertura .occhiello{max-width:46ch;margin-inline:auto;margin-bottom:0}
.apertura__data{display:inline-flex;align-items:center;gap:.6rem;border:1px solid var(--filo);
  border-radius:999px;padding:.45rem 1.1rem;font-size:.85rem;letter-spacing:.06em;color:var(--giallo)}
.bottoni{display:flex;flex-wrap:wrap;gap:.8rem;justify-content:center}
@keyframes entra{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

/* ---------- nastro che non si ferma mai ---------- */
.nastro{overflow:hidden;white-space:nowrap;border-block:1px solid var(--filo);
  padding:.85rem 0;background:var(--nero-2);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.nastro__pista{display:inline-flex;gap:2.6rem;animation:scorri 34s linear infinite;will-change:transform}
.nastro__pista span{font-family:"Gabarito",sans-serif;font-weight:800;font-size:clamp(1.1rem,2.4vw,1.7rem);
  letter-spacing:.02em;color:var(--crema);display:inline-flex;align-items:center;gap:2.6rem}
.nastro__pista span::after{content:"●";color:var(--fucsia);font-size:.5em}
@keyframes scorri{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
@media (prefers-reduced-motion:reduce){.nastro__pista{animation-duration:260s}}

/* ---------- il volantino appeso ---------- */
.manifesto{display:grid;gap:clamp(2rem,5vw,4rem);align-items:center;grid-template-columns:1fr}
@media (min-width:900px){.manifesto{grid-template-columns:minmax(0,.85fr) minmax(0,1fr)}}
.manifesto__foto{position:relative;justify-self:center;max-width:420px;rotate:-2.4deg;
  border-radius:6px;overflow:hidden;box-shadow:0 26px 60px -22px rgba(0,0,0,.85);
  transition:rotate var(--t),transform var(--t)}
.manifesto__foto:hover{rotate:0deg;transform:translateY(-6px)}
.manifesto__foto::before{content:"";position:absolute;left:50%;top:-9px;translate:-50% 0;
  width:54px;height:18px;background:var(--giallo);opacity:.85;border-radius:2px;z-index:2;rotate:-3deg}
.fatti{list-style:none;margin:1.6rem 0 0;padding:0;display:grid;gap:.1rem}
.fatti li{display:flex;gap:1rem;padding:.85rem 0;border-top:1px solid var(--filo);align-items:baseline}
.fatti b{font-family:"Gabarito",sans-serif;font-size:1.35rem;color:var(--giallo);
  min-width:5.5rem;font-variant-numeric:tabular-nums}

/* ---------- griglia dei modelli ---------- */
.filtro{display:flex;flex-wrap:wrap;gap:.55rem;margin:2rem 0 2.4rem}
.filtro button{background:transparent;border:1px solid var(--filo);border-radius:999px;
  padding:.5rem 1.05rem;cursor:pointer;font-size:.92rem;font-weight:500;
  transition:background .25s,border-color .25s,color .25s,transform .2s}
.filtro button:hover{border-color:var(--crema-soft);transform:translateY(-1px)}
.filtro button[aria-pressed="true"]{background:var(--fucsia);border-color:var(--fucsia);color:#fff;font-weight:700}

.griglia{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(.7rem,2vw,1.4rem)}
@media (min-width:760px){.griglia{grid-template-columns:repeat(4,1fr)}}
.cartellino{background:#fff;border-radius:var(--r);overflow:hidden;position:relative;
  transition:transform var(--t),box-shadow var(--t)}
.cartellino:hover{transform:translateY(-7px);box-shadow:0 22px 44px -20px rgba(0,0,0,.8)}
.cartellino__foto{aspect-ratio:1;overflow:hidden;background:#fff}
.cartellino__foto img{width:100%;height:100%;object-fit:contain;padding:6%;
  transition:transform .6s cubic-bezier(.2,.7,.25,1)}
.cartellino:hover .cartellino__foto img{transform:scale(1.07)}
.cartellino__testo{padding:.85rem .9rem 1rem;border-top:1px solid #EDE6DC;background:#FCF8F2}
.cartellino__testo h3{color:var(--nero);font-size:1rem;line-height:1.24}
.cartellino__cat{display:block;font-size:.68rem;letter-spacing:.13em;text-transform:uppercase;
  color:#8A7F74;margin-bottom:.3rem}
.cartellino .wa{width:100%;justify-content:center;margin-top:.75rem;padding:.5rem .8rem;font-size:.86rem}
.vuoto{grid-column:1/-1;padding:2.5rem 0;color:var(--crema-soft);text-align:center}

/* ---------- passaggi ---------- */
.passi{list-style:none;counter-reset:p;margin:2.2rem 0 0;padding:0;display:grid;gap:1rem}
@media (min-width:820px){.passi{grid-template-columns:repeat(3,1fr);gap:1.4rem}}
.passi li{counter-increment:p;background:var(--nero-2);border:1px solid var(--filo);
  border-radius:var(--r);padding:1.5rem 1.4rem;position:relative;transition:border-color var(--t),transform var(--t)}
.passi li:hover{border-color:var(--fucsia);transform:translateY(-4px)}
.passi li::before{content:counter(p);display:grid;place-items:center;width:38px;height:38px;
  border-radius:50%;background:var(--fucsia);color:#fff;font-family:"Gabarito",sans-serif;
  font-weight:800;margin-bottom:.9rem}
.passi h3{margin-bottom:.35rem}
.passi p{margin:0;color:var(--crema-soft);font-size:.98rem}

/* ---------- due colonne testo+foto ---------- */
.duo{display:grid;gap:clamp(1.8rem,4vw,3.4rem);align-items:center;grid-template-columns:1fr}
@media (min-width:900px){
  .duo{grid-template-columns:1fr 1fr}
  .duo--rovescio .duo__foto{order:-1}
}
.duo__foto{border-radius:var(--r);overflow:hidden;position:relative}
.duo__foto img{width:100%;aspect-ratio:4/3;object-fit:cover;transition:transform .8s cubic-bezier(.2,.7,.25,1)}
.duo__foto:hover img{transform:scale(1.04)}
.didascalia{margin-top:.7rem;font-size:.78rem;color:var(--crema-soft);opacity:.8}

/* ---------- il misuratore ---------- */
.misuratore{background:var(--nero-2);border:1px solid var(--filo);border-radius:var(--r);
  padding:clamp(1.4rem,3vw,2.2rem);margin-top:2rem}
.campo{display:grid;gap:.45rem;margin-bottom:1.2rem}
.campo label{font-size:.86rem;letter-spacing:.05em;color:var(--crema-soft)}
.campo input,.campo select{background:var(--nero);border:1px solid var(--filo);border-radius:10px;
  padding:.7rem .9rem;color:var(--crema);font:inherit;font-size:1rem;width:100%}
.campo input:focus,.campo select:focus{border-color:var(--neon);outline:none}
.anteprima{background:var(--nero);border:1px dashed var(--filo);border-radius:10px;
  padding:.9rem 1rem;font-size:.94rem;color:var(--crema-soft);margin-bottom:1.1rem;min-height:3.2rem}
.anteprima b{color:var(--crema);font-weight:600}

/* ---------- il nome, col righello ---------- */
.nome{display:grid;gap:clamp(1.6rem,4vw,3.4rem);align-items:center;grid-template-columns:1fr}
@media (min-width:820px){.nome{grid-template-columns:auto 1fr}}
.nome__righello{justify-self:center;max-width:150px;border-radius:var(--r);overflow:hidden;
  box-shadow:0 0 0 1px var(--filo),0 24px 50px -26px rgba(99,217,235,.5)}
.grande{font-family:"Gabarito",sans-serif;font-weight:900;font-size:clamp(3.4rem,11vw,7rem);
  line-height:.9;letter-spacing:-.04em;color:var(--giallo);margin:.2rem 0 1rem}
.grande small{display:block;font-size:.24em;letter-spacing:.2em;color:var(--crema-soft);
  font-weight:600;margin-top:.6rem;text-transform:uppercase}

/* ---------- tappe ---------- */
.tappe{list-style:none;margin:2rem 0 0;padding:0;display:grid;gap:0}
.tappe li{display:grid;grid-template-columns:auto 1fr;gap:1.2rem;padding:1.3rem 0;
  border-top:1px solid var(--filo);align-items:start}
.tappe li:last-child{border-bottom:1px solid var(--filo)}
.tappe time{font-family:"Gabarito",sans-serif;font-weight:800;color:var(--fucsia);
  font-size:1.05rem;min-width:6.5rem;letter-spacing:.02em}
.tappe p{margin:0;color:var(--crema-soft)}

/* ---------- domande ---------- */
.domanda{border-top:1px solid var(--filo)}
.domanda:last-of-type{border-bottom:1px solid var(--filo)}
.domanda summary{cursor:pointer;list-style:none;padding:1.25rem .5rem 1.25rem 0;
  display:flex;gap:1rem;align-items:center;font-family:"Gabarito",sans-serif;font-weight:700;
  font-size:clamp(1.02rem,1.8vw,1.2rem);transition:color .25s}
.domanda summary::-webkit-details-marker{display:none}
.domanda summary:hover{color:var(--giallo)}
.domanda summary::after{content:"+";margin-left:auto;font-size:1.5rem;color:var(--fucsia);
  transition:transform .3s;line-height:1}
.domanda[open] summary::after{transform:rotate(45deg)}
.domanda__c{padding:0 2.5rem 1.4rem 0;color:var(--crema-soft);max-width:70ch}
.domanda__c p{margin:0}

/* ---------- dove siamo ---------- */
.dove{display:grid;gap:2rem;align-items:center;grid-template-columns:1fr}
@media (min-width:900px){.dove{grid-template-columns:1.1fr .9fr}}
.indirizzo{font-family:"Gabarito",sans-serif;font-weight:800;
  font-size:clamp(1.6rem,3.6vw,2.6rem);line-height:1.14;letter-spacing:-.02em}
.indirizzo span{color:var(--giallo);display:block}

/* ---------- piede ---------- */
.pie{border-top:1px solid var(--filo);background:var(--nero-2);
  padding:clamp(2.5rem,5vw,4rem) clamp(1.1rem,4vw,3.2rem) 2rem}
.pie__griglia{display:grid;gap:2rem;grid-template-columns:1fr}
@media (min-width:760px){.pie__griglia{grid-template-columns:1.4fr 1fr 1fr}}
.pie h4{font-family:"Gabarito",sans-serif;font-size:.82rem;letter-spacing:.15em;text-transform:uppercase;
  color:var(--crema-soft);margin:0 0 .9rem;font-weight:700}
.pie ul{list-style:none;margin:0;padding:0;display:grid;gap:.5rem}
.pie a{text-decoration:none;opacity:.85;transition:opacity .25s,color .25s}
.pie a:hover{opacity:1;color:var(--giallo)}
.pie__logo{width:190px;margin-bottom:1rem}
.pie__barra{margin-top:2.6rem;padding-top:1.4rem;border-top:1px solid var(--filo);
  display:flex;flex-wrap:wrap;gap:.8rem 1.6rem;align-items:center;font-size:.84rem;color:var(--crema-soft)}
.credito{margin-left:auto}
.credito a{color:var(--crema);text-decoration:underline;text-underline-offset:3px}

/* ---------- banner cookie ---------- */
.cookie{position:fixed;inset:auto 0 0 0;z-index:60;display:flex;gap:1rem;align-items:center;
  justify-content:center;padding:.6rem 1rem;font-size:.82rem;line-height:1.35;
  background:var(--nero-3);border-top:1px solid var(--filo)}
.cookie p{margin:0}
.cookie a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.cookie button{background:none;border:0;font-size:1.25rem;line-height:1;cursor:pointer;opacity:.6}
.cookie button:hover{opacity:1}
@media (max-width:480px){.cookie{font-size:.75rem;padding:.5rem .8rem}}

/* ---------- comparsa alla vista ---------- */
.rivela{opacity:0;transform:translateY(26px);transition:opacity .7s cubic-bezier(.2,.7,.25,1),transform .7s cubic-bezier(.2,.7,.25,1)}
.rivela--visto{opacity:1;transform:none}
.rivela:nth-child(2){transition-delay:.07s}
.rivela:nth-child(3){transition-delay:.14s}
@media (prefers-reduced-motion:reduce){
  .rivela{opacity:1;transform:none;transition:none}
  .apertura::before,.apertura__logo{animation:none;opacity:1}
}

/* ---------- telefono: il righello diventa una riga ---------- */
@media (max-width:899px){
  :root{--rail:0px}
  .righello{inset:auto 0 auto 0;width:100%;height:34px;border-right:0;border-bottom:1px solid var(--filo);
    top:0;background:rgba(20,16,15,.96);display:flex;align-items:center}
  .righello__tacche{inset:auto 0 0 0;width:100%;height:9px;
    background:repeating-linear-gradient(to right,var(--giallo) 0 1px,transparent 1px 8px);opacity:.34}
  .righello__tacche::after{content:none}
  .righello__cursore{left:0;right:auto;top:auto;bottom:0;height:4px;width:3px;
    background:var(--fucsia);box-shadow:0 0 10px 1px rgba(249,41,110,.9);
    transform:translate3d(calc(var(--p,0) * (100vw - 3px)),0,0)}
  .righello__lettura{position:static;transform:none!important;display:flex;align-items:baseline;
    gap:.35rem;padding:0 0 0 1rem;text-align:left}
  .righello__num{font-size:1rem}
  .righello__um{font-size:.58rem}
  .righello__fine{display:none}
  .testa{top:34px;padding-left:clamp(1rem,4vw,2rem)}
  main{padding-left:0;padding-top:34px}
}
@media (min-width:900px){main{padding-top:0}}


/* ============================================================
   APERTURA v2 — la scena. Sostituisce l'apertura centrata.
   Tutto e' incapsulato in .apertura--scena: il resto del sito
   (righello, nastro, catalogo, sezioni) non cambia di una riga.
   ============================================================ */
.apertura--scena{min-height:100svh;display:flex;align-items:center;
  padding:0;text-align:left;position:relative;overflow:hidden;isolation:isolate}
.apertura--scena::before{content:none}          /* via l'alone della v1: c'e' la scena */

.apertura__scena{position:absolute;inset:0;z-index:0}
.apertura__scena img{width:100%;height:100%;object-fit:cover;object-position:70% 50%;
  transform-origin:72% 50%;animation:respira 26s ease-in-out infinite alternate}
@keyframes respira{from{transform:scale(1.045)}to{transform:scale(1.11)}}

.apertura__velo{position:absolute;inset:0;z-index:1;
  background:
    linear-gradient(100deg, rgba(4,2,6,.95) 0%, rgba(4,2,6,.88) 22%, rgba(4,2,6,.62) 42%,
                            rgba(4,2,6,.18) 62%, rgba(4,2,6,0) 78%),
    linear-gradient(180deg, rgba(4,2,6,.7) 0%, transparent 22%),
    linear-gradient(0deg, rgba(4,2,6,.92) 0%, rgba(4,2,6,.35) 20%, transparent 42%)}

.apertura--scena .apertura__box{position:relative;z-index:3;display:block;text-align:left;
  width:min(620px,54%);margin-left:clamp(1.2rem,4vw,4.5rem);
  padding:clamp(5rem,10vh,7rem) 0 clamp(9rem,18vh,12rem)}
.apertura--scena .apertura__logo{width:min(450px,100%);margin:0 0 clamp(1.6rem,4.5vh,3rem) -.4rem;
  opacity:0;animation:entra .8s .1s ease-out forwards;
  filter:drop-shadow(0 0 36px rgba(99,217,235,.5)) drop-shadow(0 18px 38px rgba(0,0,0,.9))}

.apertura--scena h1{max-width:none;font-size:inherit;line-height:1.05;
  opacity:0;animation:entra .8s .22s ease-out forwards}
.apertura--scena .h1__su{display:block;font-weight:700;letter-spacing:.005em;
  font-size:clamp(1.65rem,2.9vw,2.8rem);color:var(--crema);text-shadow:0 3px 22px rgba(0,0,0,.9)}
.apertura--scena h1 em{display:inline-block;position:relative;margin-top:.06em;
  font-style:italic;font-weight:700;letter-spacing:-.005em;
  font-size:clamp(2rem,3.9vw,3.6rem);color:var(--fucsia-chiaro);
  text-shadow:0 0 34px rgba(249,41,110,.85), 0 3px 18px rgba(0,0,0,.7)}
.apertura--scena h1 em::after{content:"";position:absolute;left:.02em;right:.02em;bottom:-.16em;
  height:5px;border-radius:5px;
  background:linear-gradient(90deg,var(--fucsia),var(--fucsia-chiaro));
  box-shadow:0 0 18px rgba(249,41,110,1)}

.apertura--scena .occhiello{max-width:none;margin:clamp(1.8rem,4vh,2.7rem) 0 clamp(1.5rem,3.2vh,2.2rem);
  font-family:"Gabarito",sans-serif;font-weight:600;letter-spacing:.02em;
  font-size:clamp(.94rem,1.2vw,1.1rem);line-height:1.6;color:var(--crema);
  text-shadow:0 2px 14px rgba(0,0,0,.9);opacity:0;animation:entra .8s .34s ease-out forwards}
.apertura--scena .occhiello b{color:var(--giallo);font-weight:800}
.apertura--scena .bottoni{justify-content:flex-start;gap:.9rem;
  opacity:0;animation:entra .8s .46s ease-out forwards}
.apertura--scena .wa{padding:1rem 1.9rem;font-size:1rem}

/* i tre fatti, in basso */
.apertura__fatti{position:absolute;left:clamp(1.2rem,4vw,4.5rem);bottom:clamp(1.4rem,4vh,2.4rem);
  z-index:4;background:rgba(6,3,8,.72);border-radius:16px;
  box-shadow:inset 0 0 0 1px rgba(246,233,216,.16), 0 22px 46px -20px rgba(0,0,0,.95);
  padding:.85rem clamp(1rem,2vw,1.5rem);display:grid;grid-template-columns:1fr;gap:.5rem;
  width:min(680px,88%);opacity:0;animation:entra .8s .58s ease-out forwards}
@media (min-width:760px){.apertura__fatti{grid-template-columns:repeat(3,auto);
  gap:clamp(1rem,2.2vw,2rem);justify-content:start;width:auto;max-width:min(740px,86%)}}
.apertura__fatti span{display:grid;grid-template-columns:auto 1fr;column-gap:.65rem;align-items:center}
.apertura__fatti svg{grid-row:span 2;width:24px;height:24px;fill:var(--fucsia);
  filter:drop-shadow(0 0 9px rgba(249,41,110,.9))}
.apertura__fatti b{font-family:"Gabarito",sans-serif;font-size:.78rem;letter-spacing:.07em;
  color:var(--crema);font-weight:800;line-height:1.25}
.apertura__fatti i{font-style:normal;font-size:.75rem;color:var(--crema-soft);line-height:1.25}

@media (max-width:620px){
  .apertura--scena{align-items:flex-start}
  .apertura__scena img{object-position:50% 30%}
  .apertura__velo{background:
    linear-gradient(180deg, rgba(4,2,6,.86) 0%, rgba(4,2,6,.6) 26%, rgba(4,2,6,.35) 44%,
                            rgba(4,2,6,.72) 66%, rgba(4,2,6,.96) 100%)}
  .apertura--scena .apertura__box{width:100%;margin:0;padding:4.4rem 1.1rem 11rem}
  .apertura--scena .apertura__logo{width:min(280px,74%);margin-bottom:1.1rem}
  .apertura--scena .h1__su{font-size:1.4rem}
  .apertura--scena h1 em{font-size:1.74rem}
  .apertura--scena .occhiello{font-size:.9rem;margin:1rem 0 1.1rem}
  .apertura--scena .wa{padding:.76rem 1.2rem;font-size:.92rem}
  .apertura__fatti{left:1.1rem;right:1.1rem;width:auto;bottom:1.1rem;padding:.8rem 1rem;gap:.55rem}
  .apertura__fatti b{font-size:.72rem}
  .apertura__fatti i{font-size:.7rem}
  .apertura__fatti svg{width:20px;height:20px}
}

@media (prefers-reduced-motion:reduce){
  .apertura__scena img{animation:none;transform:scale(1.05)}
  .apertura--scena .apertura__logo,.apertura--scena h1,.apertura--scena .occhiello,
  .apertura--scena .bottoni,.apertura__fatti{opacity:1;animation:none}
}

/* sulla hero il logo grande basta: quello della barra compare scorrendo */
.testa__logo{opacity:0;transition:opacity .35s}
.testa.giu .testa__logo{opacity:1}

/* da telefono i tre fatti non devono finire sotto la riga dei cookie */
@media (max-width:620px){.apertura__fatti{bottom:4.6rem}}


/* ============================================================
   📏 IL RIGHELLO RESTA DI LATO ANCHE DA TELEFONO
   (prima da telefono diventava una riga in alto)
   ============================================================ */
@media (max-width:899px){
  :root{--rail:46px}
  .righello{inset:0 auto 0 0;width:var(--rail);height:auto;
    border-right:1px solid var(--filo);border-bottom:0;display:block;
    background:linear-gradient(180deg,var(--nero-2),#191413)}
  .righello__tacche{inset:0 0 0 auto;width:17px;height:auto;
    background:repeating-linear-gradient(to bottom,var(--giallo) 0 1px,transparent 1px 8px);opacity:.34}
  .righello__tacche::after{content:"";position:absolute;inset:0;width:10px;left:7px;
    background:repeating-linear-gradient(to bottom,var(--giallo) 0 2px,transparent 2px 40px);opacity:.85}
  .righello__cursore{left:0;right:0;top:0;bottom:auto;width:auto;height:2px;
    transform:translate3d(0,calc(var(--p,0) * (100svh - 2px)),0)}
  .righello__lettura{position:absolute;left:0;right:0;top:0;display:block;text-align:left;
    padding:.35rem 0 0;
    transform:translate3d(0,calc(var(--p,0) * (100svh - 56px)),0)!important}
  .righello__num{display:block;text-align:center;font-size:1rem}
  .righello__um{display:block;text-align:center;font-size:.5rem;letter-spacing:.1em}
  .righello__fine{display:block;left:3px;right:3px;bottom:.9rem;font-size:.48rem;letter-spacing:.08em}
  .testa{top:0;padding-left:calc(var(--rail) + clamp(.7rem,3vw,1.2rem))}
  main{padding-left:var(--rail);padding-top:0}
  .cookie{padding-left:calc(var(--rail) + .8rem)}
}

/* ============================================================
   MOVIMENTO — una passata su ogni sezione.
   Si animano SOLO transform e opacity. Nessuna libreria.
   ============================================================ */

/* la comparsa: i blocchi entrano sfalsati, non tutti insieme */
.rivela{transition-delay:calc(var(--ritardo,0ms))}
.dentro > .rivela:nth-child(1){--ritardo:0ms}
.dentro > .rivela:nth-child(2){--ritardo:90ms}
.dentro > .rivela:nth-child(3){--ritardo:170ms}

/* parallasse sulle immagini grandi: il JS scrive --pp, il CSS lo usa */
[data-par]{will-change:transform}
[data-par] img{transform:translate3d(0,var(--pp,0px),0) scale(1.06);
  transition:transform .8s cubic-bezier(.2,.7,.25,1)}
[data-par]:hover img{transform:translate3d(0,var(--pp,0px),0) scale(1.12)}

/* il nastro accelera mentre si scorre, ma non si ferma mai */
.nastro__pista{animation-duration:calc(34s / var(--vel,1))}

/* il volantino: appeso di sbieco, si raddrizza entrando */
.manifesto__foto{transform:rotate(-2.4deg)}
.manifesto__foto.rivela--visto{transform:rotate(-1deg)}
.manifesto__foto:hover{transform:rotate(0deg) translateY(-6px)}

/* i tre fatti dell'inaugurazione, uno dopo l'altro */
.fatti b[data-scatta]{display:inline-block;opacity:0;transform:translateY(10px) scale(.9);
  transition:opacity .5s cubic-bezier(.2,.7,.25,1), transform .5s cubic-bezier(.2,.7,.25,1)}
.fatti b[data-scatta].scattato{opacity:1;transform:none}

/* il filtro: la pastiglia attiva si gonfia, le schede rientrano sfalsate */
.filtro button{transition:transform .25s cubic-bezier(.2,.7,.25,1),background .25s,border-color .25s,color .25s}
.filtro button:hover{transform:translateY(-2px)}
.filtro button[aria-pressed="true"]{transform:scale(1.04)}
@keyframes rientra{from{opacity:0;transform:translateY(14px) scale(.97)}to{opacity:1;transform:none}}
.cartellino--entra{animation:rientra .45s cubic-bezier(.2,.7,.25,1) both;animation-delay:var(--ritardo,0ms)}

/* le schede prodotto: si sollevano e la scarpa cresce */
.cartellino{transition:transform .45s cubic-bezier(.2,.7,.25,1),box-shadow .45s}
.cartellino:hover{transform:translateY(-8px) rotate(-.6deg)}

/* i passi di «come ordinare»: il numero gira entrando */
.passi li{transition:transform .5s cubic-bezier(.2,.7,.25,1),border-color .5s}
.passi li:hover{transform:translateY(-6px)}
.passi li::before{transition:transform .5s cubic-bezier(.2,.7,.25,1)}
.passi li:hover::before{transform:rotate(-12deg) scale(1.12)}

/* il misuratore: un righello che si riempie col numero scritto */
.misuratore{position:relative}
.misuratore::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;border-radius:3px;
  background:linear-gradient(90deg,var(--giallo),var(--fucsia));
  transform:scaleX(var(--misura,0));transform-origin:0 50%;
  transition:transform .5s cubic-bezier(.2,.7,.25,1);box-shadow:0 0 14px rgba(251,198,7,.6)}
.misuratore.pronto .anteprima{color:var(--crema)}
.misuratore input,.misuratore select{transition:box-shadow .25s,transform .25s}
.misuratore input:focus,.misuratore select:focus{transform:translateY(-1px)}

/* la linea del tempo del negozio, che si disegna scorrendo */
.tappe{position:relative}
.tappe::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;
  background:linear-gradient(180deg,var(--fucsia),var(--giallo));
  transform:scaleY(var(--linea,0));transform-origin:50% 0;
  box-shadow:0 0 12px rgba(249,41,110,.55)}
.tappe li{transition:transform .45s cubic-bezier(.2,.7,.25,1)}
.tappe li:hover{transform:translateX(6px)}

/* il 50: sale da zero, e il righello del logo respira */
.nome__righello{transition:transform .8s cubic-bezier(.2,.7,.25,1)}
.nome__righello.rivela--visto{animation:oscilla 7s ease-in-out infinite}
@keyframes oscilla{0%,100%{transform:rotate(-1.5deg)}50%{transform:rotate(1.5deg)}}

/* le domande: la risposta scivola dentro invece di comparire secca */
.domanda summary{transition:color .25s,transform .25s}
.domanda summary:hover{transform:translateX(4px)}
.domanda__t{opacity:0;transform:translateY(-6px);
  transition:opacity .35s ease .04s, transform .35s cubic-bezier(.2,.7,.25,1) .04s}
.domanda[open] .domanda__t{opacity:1;transform:none}

/* ogni pulsante risponde al dito e al mouse */
.wa,.filtro button,.cartellino .wa{transition:transform .2s cubic-bezier(.2,.7,.25,1),box-shadow .25s,background .25s}
.wa:active,.filtro button:active{transform:translateY(1px) scale(.98)}

/* i link del piede */
.pie a{display:inline-block;transition:transform .25s,opacity .25s,color .25s}
.pie a:hover{transform:translateX(3px);color:var(--fucsia-chiaro)}

@media (prefers-reduced-motion:reduce){
  [data-par] img{transform:none!important}
  .nastro__pista{animation-duration:260s!important}
  .tappe::before{transform:scaleY(1)}
  .fatti b[data-scatta]{opacity:1;transform:none}
  .nome__righello.rivela--visto{animation:none}
  .cartellino--entra{animation:none}
}

/* la barra in alto non manda a capo le voci */
.testa__nav a{white-space:nowrap}
@media (max-width:520px){
  .testa__nav{gap:.7rem}
  .testa__nav a{font-size:.86rem}
  .testa .wa{padding:.55rem .9rem;font-size:.86rem}
  .testa__logo img{width:84px}
}


/* ============================================================
   IL VOLANTINO — arriva piegato in due, si apre, e la puntina
   lo inchioda al muro con un colpo. Poi resta appeso e dondola.
   Solo transform e opacity. Zero librerie.
   ============================================================ */
.manifesto__foto{transform:none;rotate:none;overflow:visible}  /* l'inclinazione la fa il volantino */
.manifesto__foto.rivela--visto{transform:none;rotate:none}
.manifesto__foto:hover{transform:none;rotate:none}
.manifesto__foto::before{display:none}    /* via il nastro adesivo della v1: adesso c'e' la puntina */

.volantino{position:relative;perspective:1500px;perspective-origin:50% 40%}
.volantino__oscilla,.volantino__colpo{transform-origin:50% 0}
.volantino__carta{position:relative;transform-style:preserve-3d;transform-origin:50% 0}
.volantino__carta img{display:block;width:100%;height:auto;border-radius:var(--r);opacity:0}

/* le due ante: la stessa immagine, tagliata a metà */
.volantino__meta{position:absolute;top:0;height:100%;width:50%;
  background-image:url("../img/volantino.jpg");background-size:200% 100%;
  background-repeat:no-repeat;backface-visibility:hidden}
.volantino__meta--sx{left:0;background-position:left center;
  border-radius:var(--r) 0 0 var(--r)}
.volantino__meta--dx{left:50%;background-position:right center;
  border-radius:0 var(--r) var(--r) 0;
  transform-origin:left center;transform-style:preserve-3d;
  transform:rotateY(-158deg)}
/* il retro della carta: quando l'anta e' chiusa si vede il rovescio, non la stampa */
.volantino__meta--dx::before{content:"";position:absolute;inset:0;
  transform:rotateY(180deg);backface-visibility:hidden;
  border-radius:var(--r) 0 0 var(--r);
  background:linear-gradient(105deg,#efe2cf 0%,#dccbb4 46%,#cbb79c 100%);
  box-shadow:inset 22px 0 30px -22px rgba(0,0,0,.55)}
/* l'ombra della piega sull'anta ferma */
.volantino__meta--sx::after{content:"";position:absolute;inset:0;border-radius:inherit;
  background:linear-gradient(90deg,transparent 55%,rgba(0,0,0,.55) 100%);
  opacity:var(--piega,1);transition:opacity .8s ease}

/* la puntina */
.volantino__puntina{position:absolute;z-index:9;top:8px;left:50%;width:32px;height:32px;
  margin-left:-16px;opacity:0;pointer-events:none;
  filter:drop-shadow(0 5px 8px rgba(0,0,0,.9))}
.volantino__puntina::before{content:"";position:absolute;inset:0;border-radius:50%;
  background:radial-gradient(circle at 34% 30%,#ff8fb6,var(--fucsia) 52%,#9c0f3f 100%);
  box-shadow:0 6px 14px -4px rgba(0,0,0,.8), 0 0 22px -4px rgba(249,41,110,.9),
             inset -2px -3px 6px rgba(0,0,0,.35)}
.volantino__puntina::after{content:"";position:absolute;inset:-14px;border-radius:50%;
  border:2px solid var(--fucsia);opacity:0}

/* ---------- la sequenza ---------- */
.volantino.avvia .volantino__carta{animation:volEntra .75s cubic-bezier(.2,.8,.25,1) both}
.volantino.avvia .volantino__meta--dx{animation:volApri 1s .38s cubic-bezier(.22,.9,.24,1.04) both}
.volantino.avvia .volantino__meta--sx{--piega:0}
.volantino.avvia .volantino__meta--dx::before{animation:volRetro .01s 1.3s both}
@keyframes volRetro{to{opacity:0}}
.volantino.avvia .volantino__puntina{animation:volPuntina .42s 1.32s cubic-bezier(.5,-.5,.35,1.5) both}
.volantino.avvia .volantino__puntina::after{animation:volOnda .5s 1.72s ease-out both}
.volantino.avvia .volantino__colpo{animation:volColpo .55s 1.7s cubic-bezier(.24,.9,.3,1) both}
.volantino.avvia .volantino__oscilla{animation:volDondola 7s 2.3s ease-in-out infinite}

@keyframes volEntra{
  from{opacity:0;transform:translateY(-26px) rotate(-9deg) scale(.93)}
  to  {opacity:1;transform:translateY(0) rotate(-2.4deg) scale(1)}}
@keyframes volApri{
  from{transform:rotateY(-158deg)}
  60% {transform:rotateY(9deg)}
  to  {transform:rotateY(0deg)}}
@keyframes volPuntina{
  from{opacity:0;transform:translateY(-70px) scale(.55)}
  70% {opacity:1;transform:translateY(4px) scale(1.14)}
  to  {opacity:1;transform:translateY(0) scale(1)}}
@keyframes volOnda{
  from{opacity:.85;transform:scale(.5)}
  to  {opacity:0;transform:scale(1.5)}}
@keyframes volColpo{                         /* il boom: due oscillazioni che si smorzano */
  0%  {transform:rotate(0deg)}
  22% {transform:rotate(2.2deg)}
  48% {transform:rotate(-1.4deg)}
  74% {transform:rotate(.6deg)}
  100%{transform:rotate(0deg)}}
@keyframes volDondola{                       /* poi resta appeso e respira */
  0%,100%{transform:rotate(-.7deg)}
  50%    {transform:rotate(.7deg)}}

/* col dito o col mouse si fa dondolare di nuovo */
.volantino:hover .volantino__colpo,.volantino:focus-within .volantino__colpo{
  animation:volColpo .6s cubic-bezier(.24,.9,.3,1) both}

@media (prefers-reduced-motion:reduce){
  .volantino__meta--dx{transform:none}
  .volantino__meta--sx{--piega:0}
  .volantino .volantino__carta,.volantino .volantino__colpo,
  .volantino .volantino__oscilla,.volantino .volantino__puntina{animation:none!important}
  .volantino__carta{transform:rotate(-2.4deg)}
  .volantino__puntina{opacity:1}
}


/* ============================================================
   1) IL RIGHELLO DA TELEFONO — sottile ed elegante, non un muro
   ============================================================ */
@media (max-width:899px){
  :root{--rail:30px}
  .righello{background:linear-gradient(90deg,rgba(20,16,15,.92) 0%,rgba(20,16,15,.55) 62%,rgba(20,16,15,0) 100%);
    border-right:0}
  .righello__tacche{inset:0 0 0 auto;width:10px;
    background:repeating-linear-gradient(to bottom,var(--giallo) 0 1px,transparent 1px 12px);opacity:.26}
  .righello__tacche::after{content:"";position:absolute;inset:0;width:6px;left:4px;
    background:repeating-linear-gradient(to bottom,var(--giallo) 0 2px,transparent 2px 60px);opacity:.62}
  /* la lettura diventa una pastiglia piccola che scorre col cursore */
  .righello__lettura{position:absolute;left:2px;right:2px;top:0;display:block;text-align:center;
    padding:.16rem 0 .2rem;border-radius:8px;
    background:rgba(20,16,15,.9);box-shadow:0 0 0 1px rgba(251,198,7,.35);
    transform:translate3d(0,calc(var(--p,0) * (100svh - 40px)),0)!important}
  .righello__num{display:block;font-size:.72rem;line-height:1}
  .righello__um{display:block;font-size:.42rem;letter-spacing:.06em;line-height:1;margin-top:1px}
  .righello__fine{display:none}
  .righello__cursore{height:2px}
  .testa{padding-left:calc(var(--rail) + clamp(.7rem,3vw,1.1rem))}
  main{padding-left:var(--rail)}
  .cookie{padding-left:calc(var(--rail) + .6rem)}
}

/* ============================================================
   2) IL METRO DISEGNATO — sostituisce il ritaglio del logo.
   Si riempie di fucsia mentre si scorre, fino a 50 cm.
   ============================================================ */
.metro{display:flex;align-items:stretch;gap:.7rem;
  height:clamp(300px,44vh,430px);justify-self:center}
.metro__asta{position:relative;width:clamp(54px,7vw,72px);border-radius:12px;overflow:hidden;
  background:linear-gradient(180deg,#1E1715,#141110);
  box-shadow:inset 0 0 0 1px var(--filo), 0 18px 40px -22px #000}
.metro__tacche{position:absolute;inset:0;z-index:2;
  background:
    repeating-linear-gradient(to bottom,rgba(251,198,7,.85) 0 1px,transparent 1px 8.6px),
    repeating-linear-gradient(to bottom,rgba(251,198,7,.95) 0 2px,transparent 2px 43px);
  background-size:38% 100%, 62% 100%;
  background-position:left top, left top;background-repeat:no-repeat,no-repeat;
  opacity:.72}
.metro__riempi{position:absolute;left:0;right:0;bottom:0;height:100%;z-index:1;
  background:linear-gradient(0deg,var(--fucsia) 0%,var(--fucsia-chiaro) 70%,#FFA8C6 100%);
  transform:scaleY(var(--linea,0));transform-origin:50% 100%;
  box-shadow:0 0 30px rgba(249,41,110,.65)}
.metro__cima{position:absolute;left:0;right:0;top:.5rem;text-align:center;z-index:2;
  font-family:"Gabarito",sans-serif;font-weight:900;font-size:1.1rem;color:var(--nero);
  opacity:0;transition:opacity .4s ease .2s}
.metro__cima small{display:block;font-size:.5rem;letter-spacing:.14em}
.metro.pieno .metro__cima{opacity:1}
.metro__numeri{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;
  justify-content:space-between;font-family:"Gabarito",sans-serif;font-weight:700;
  font-size:.78rem;color:var(--crema-soft);letter-spacing:.04em}
.metro__numeri li{position:relative;padding-left:.6rem}
.metro__numeri li::before{content:"";position:absolute;left:-.5rem;top:50%;width:.35rem;height:1px;
  background:var(--crema-soft);opacity:.5}
.metro__numeri li:first-child{color:var(--giallo)}

@media (max-width:819px){
  .metro{height:clamp(240px,36vh,320px);gap:.55rem}
  .metro__asta{width:46px}
  .metro__numeri{font-size:.7rem}
}
@media (prefers-reduced-motion:reduce){
  .metro__riempi{transform:scaleY(1)}
  .metro__cima{opacity:1}
}


/* ============================================================
   CORREZIONI 02/09 — il righello non deve MAI finire sul testo
   ============================================================ */
/* il piede sta fuori da <main>, quindi non ereditava il rientro del righello */
.pie{padding-left:calc(var(--rail) + clamp(1.1rem,4vw,3.2rem))}
.cookie{padding-left:calc(var(--rail) + .9rem)}
/* e per sicurezza: niente puo' passare sotto la colonna del righello */
.testa,.pie,.cookie,main{box-sizing:border-box}

/* ---- la locandina: sequenza piu' lenta, si capisce cosa succede ---- */
.volantino.avvia .volantino__carta{animation:volEntra 1.1s cubic-bezier(.2,.8,.25,1) both}
.volantino.avvia .volantino__meta--dx{animation:volApri 1.9s .75s cubic-bezier(.24,.86,.28,1.02) both}
.volantino.avvia .volantino__meta--dx::before{animation:volRetro .01s 2.5s both}
.volantino.avvia .volantino__puntina{animation:volPuntina .85s 2.75s cubic-bezier(.45,-.4,.35,1.45) both}
.volantino.avvia .volantino__puntina::after{animation:volOnda .9s 3.45s ease-out both}
.volantino.avvia .volantino__colpo{animation:volColpo 1.1s 3.4s cubic-bezier(.24,.9,.3,1) both}
.volantino.avvia .volantino__oscilla{animation:volDondola 8s 4.4s ease-in-out infinite}
.volantino__meta--sx::after{transition:opacity 1.6s ease .8s}


/* ---- il logo della hero: un'ombra sola e leggera ----
   Due drop-shadow impilati su un'immagine grande, su Safari, vengono
   rasterizzati nel rettangolo dell'elemento: si vedeva un riquadro
   attorno al logo, come se fosse appiccicato. */
.apertura--scena .apertura__logo{
  filter:drop-shadow(0 12px 26px rgba(0,0,0,.72));
  width:min(410px,94%)}
@media (max-width:620px){
  .apertura--scena .apertura__logo{width:min(252px,68%);
    filter:drop-shadow(0 8px 18px rgba(0,0,0,.7))}
}


/* ============================================================
   CORREZIONI dal controllo del 02/09 (misurate a 390 e 1440 px)
   ============================================================ */
/* La barra in alto: TRASPARENTE sulla hero (se no taglia il logo),
   e piena solo quando si scorre — prima era al 93% e i titoli ci
   trasparivano sotto. */
.testa{background:transparent}
.testa.giu{background:var(--nero);box-shadow:0 10px 30px -18px #000}

/* le schede prodotto: stessa altezza, pulsante sempre in fondo */
.cartellino{display:flex;flex-direction:column}
.cartellino__testo{display:flex;flex-direction:column;flex:1}
.cartellino__testo .wa{margin-top:auto}

/* lo scaglione a 3 colonne: prima a 760px la scheda crollava da 327 a 154 px */
@media (min-width:560px){.griglia{grid-template-columns:repeat(3,1fr)}}
@media (min-width:1000px){.griglia{grid-template-columns:repeat(4,1fr)}}

/* bersagli da dito: minimo 44x44 */
.cookie button{min-width:44px;min-height:44px;display:inline-flex;align-items:center;
  justify-content:center;font-size:1.1rem}
.cookie{padding-block:.35rem}
.filtro button{min-height:44px}
.testa .wa{min-height:44px}
.testa__nav a{display:inline-flex;align-items:center;min-height:44px}
.pie a{display:inline-flex;align-items:center;min-height:40px}
.pie__barra a{min-height:44px}

/* il piede non deve finire sotto la riga dei cookie */
.pie{padding-bottom:5.5rem}

/* le quattro foto grandi non piu' una sotto l'altra da telefono */
@media (max-width:759px){
  .duo{display:grid;grid-template-columns:1fr;gap:1.2rem}
  .duo__foto img{aspect-ratio:16/10}
}


/* ============================================================
   CORREZIONI 02/09 (secondo giro dal telefono)
   ============================================================ */

/* 1 · IL NASTRO — velocità fissa. Prima il JS cambiava
   animation-duration mentre si scorreva e l'animazione saltava. */
.nastro__pista{animation:scorri 34s linear infinite!important;will-change:transform}
@media (prefers-reduced-motion:reduce){.nastro__pista{animation-duration:260s!important}}

/* 2 · LA HERO DA TELEFONO — si deve vedere la scena.
   Il velo era troppo carico: la foto spariva. */
@media (max-width:620px){
  .apertura__velo{background:
    linear-gradient(180deg,
      rgba(4,2,6,.62) 0%,       /* dietro la barra in alto */
      rgba(4,2,6,.20) 16%,      /* qui la scena si vede pulita */
      rgba(4,2,6,.10) 34%,
      rgba(4,2,6,.55) 56%,      /* da qui comincia il testo */
      rgba(4,2,6,.88) 76%,
      rgba(4,2,6,.97) 100%)}
  /* il logo più compatto e più in alto, per lasciare spazio alla scena */
  .apertura--scena .apertura__box{padding:3.6rem 1.1rem 9.5rem}
  .apertura--scena .apertura__logo{width:min(228px,62%);margin-bottom:.5rem}
  /* il testo scende sotto la figura */
  .apertura--scena h1{margin-top:34svh}
  .apertura--scena .h1__su{font-size:1.34rem}
  .apertura--scena h1 em{font-size:1.66rem}
  .apertura--scena .occhiello{font-size:.86rem;margin:.8rem 0 .9rem}
  .apertura--scena .bottoni{gap:.5rem}
  .apertura--scena .wa{padding:.7rem 1.1rem;font-size:.9rem}
  /* la barra dei fatti più bassa e discreta */
  .apertura__fatti{padding:.6rem .85rem;gap:.35rem;bottom:4.2rem;
    background:rgba(6,3,8,.62)}
  .apertura__fatti b{font-size:.68rem}
  .apertura__fatti i{font-size:.66rem}
  .apertura__fatti svg{width:17px;height:17px}
  /* la scena inquadra la figura più in alto, così si vede */
  .apertura__scena img{object-position:52% 22%}
}

/* 3 · LA LOCANDINA — via di mezzo: ~3s, e l'anta si apre più decisa */
.volantino.avvia .volantino__carta{animation:volEntra .8s cubic-bezier(.2,.8,.25,1) both}
.volantino.avvia .volantino__meta--dx{animation:volApri 1.25s .5s cubic-bezier(.25,.9,.28,1.02) both}
.volantino.avvia .volantino__meta--dx::before{animation:volRetro .01s 1.65s both}
.volantino.avvia .volantino__puntina{animation:volPuntina .6s 1.8s cubic-bezier(.45,-.4,.35,1.45) both}
.volantino.avvia .volantino__puntina::after{animation:volOnda .7s 2.3s ease-out both}
.volantino.avvia .volantino__colpo{animation:volColpo .85s 2.25s cubic-bezier(.24,.9,.3,1) both}
.volantino.avvia .volantino__oscilla{animation:volDondola 8s 3.1s ease-in-out infinite}
.volantino__meta--sx::after{transition:opacity 1s ease .5s}


/* ---- sezione abbigliamento: le foto del cliente, verticali ---- */
.cartellino--capo .cartellino__foto{background:#0F0C0B}
.cartellino--capo .cartellino__foto img{aspect-ratio:3/4;object-fit:cover;padding:0;
  border-radius:10px}

/* gli abiti sono 10: su 3 colonne resterebbe un pezzo solo in fondo.
   Per questa griglia si passa da 2 a 4 colonne, senza lo scaglione intermedio. */
@media (min-width:560px) and (max-width:999px){#abbigliamento .griglia{grid-template-columns:repeat(2,1fr)}}


/* ---- la locandina, più svelta: sequenza da ~3,1s a ~1,8s ---- */
.volantino.avvia .volantino__carta{animation:volEntra .5s cubic-bezier(.2,.85,.25,1) both}
.volantino.avvia .volantino__meta--dx{animation:volApri .8s .28s cubic-bezier(.26,.92,.28,1.03) both}
.volantino.avvia .volantino__meta--dx::before{animation:volRetro .01s 1s both}
.volantino.avvia .volantino__puntina{animation:volPuntina .4s 1.05s cubic-bezier(.45,-.45,.35,1.5) both}
.volantino.avvia .volantino__puntina::after{animation:volOnda .45s 1.38s ease-out both}
.volantino.avvia .volantino__colpo{animation:volColpo .6s 1.35s cubic-bezier(.24,.9,.3,1) both}
.volantino.avvia .volantino__oscilla{animation:volDondola 8s 1.85s ease-in-out infinite}
.volantino__meta--sx::after{transition:opacity .6s ease .3s}


/* ---- «Dove siamo»: mappa statica, scaricata e servita da noi.
   Nessun iframe, nessuna richiesta a terzi, nessun cookie. ---- */
.mappa{position:relative;border-radius:var(--r);overflow:hidden;
  box-shadow:0 0 0 1px var(--filo), 0 26px 50px -26px #000}
.mappa a{display:block;position:relative}
.mappa img{width:100%;aspect-ratio:5/3;object-fit:cover;
  transition:transform .8s cubic-bezier(.2,.7,.25,1)}
.mappa a:hover img{transform:scale(1.04)}
.mappa__eti{position:absolute;left:.9rem;bottom:.9rem;z-index:2;
  background:var(--nero);color:var(--crema);font-family:"Gabarito",sans-serif;font-weight:700;
  font-size:.82rem;padding:.5rem .9rem;border-radius:999px;
  box-shadow:0 8px 22px -8px #000}
.mappa__cred{margin:.5rem 0 0;font-size:.68rem;color:var(--crema-soft);opacity:.7}
@media (max-width:620px){
  .mappa img{aspect-ratio:4/3}
  .mappa__eti{font-size:.74rem;left:.6rem;bottom:.6rem;padding:.42rem .72rem}
}


/* quanti modelli sto guardando: cosi' si vede che il filtro ha fatto qualcosa */
.filtro__conta{margin-left:auto;align-self:center;font-family:"Gabarito",sans-serif;
  font-weight:700;font-size:.82rem;letter-spacing:.06em;text-transform:uppercase;
  color:var(--giallo);white-space:nowrap}
@media (max-width:620px){.filtro__conta{margin-left:.2rem;font-size:.76rem}}


/* ============================================================
   HERO DA TELEFONO — rifatta: tutto in FLUSSO, niente assoluti.
   Prima «I nostri bestseller» finiva sopra la barra dei fatti,
   e il logo entrava sotto la barra in alto.
   ============================================================ */
@media (max-width:620px){
  /* 🔴 IN COLONNA: in riga la barra dei fatti diventava una seconda
     colonna alta quanto lo schermo, e schiacciava testo e pulsanti. */
  .apertura--scena{display:flex;flex-direction:column;align-items:stretch;
    min-height:100svh;padding:0}
  .apertura--scena .apertura__box{
    display:flex;flex-direction:column;flex:1 1 auto;width:100%;margin:0;
    min-height:0;padding:calc(env(safe-area-inset-top,0px) + 4.6rem) 1.05rem 1.2rem}

  /* il logo sta in alto e SOTTO la barra, mai tagliato */
  .apertura--scena .apertura__logo{width:min(186px,50%);margin:0 0 auto -.2rem}

  /* il testo e i pulsanti scendono in fondo: in mezzo si vede la scena */
  .apertura--scena h1{margin-top:0}
  .apertura--scena .h1__su{font-size:1.3rem}
  .apertura--scena h1 em{font-size:1.58rem}
  .apertura--scena .occhiello{font-size:.85rem;line-height:1.5;margin:.85rem 0 .95rem}
  .apertura--scena .bottoni{gap:.5rem;margin-bottom:.9rem}
  .apertura--scena .wa{padding:.68rem 1.05rem;font-size:.88rem;flex:1 1 auto;min-width:0}

  /* i tre fatti: IN FLUSSO, non piu' in posizione assoluta */
  .apertura__fatti{position:static;left:auto;right:auto;bottom:auto;
    flex:0 0 auto;width:100%;max-width:none;border-radius:0;
    margin:0;padding:.6rem .9rem;gap:.28rem;background:rgba(6,3,8,.72);
    box-shadow:inset 0 1px 0 rgba(255,243,228,.14)}
  .apertura__fatti b{font-size:.66rem;letter-spacing:.05em}
  .apertura__fatti i{font-size:.64rem}
  .apertura__fatti svg{width:16px;height:16px}

  /* il velo: piu' scuro solo dove c'e' il testo, trasparente sulla figura */
  .apertura__velo{background:
    linear-gradient(180deg,
      rgba(4,2,6,.72) 0%, rgba(4,2,6,.22) 13%, rgba(4,2,6,.06) 34%,
      rgba(4,2,6,.42) 52%, rgba(4,2,6,.86) 74%, rgba(4,2,6,.97) 100%)}
  .apertura__scena img{object-position:54% 18%}
}
/* schermi bassi: si stringe ancora, senza mai far collidere niente */
@media (max-width:620px) and (max-height:700px){
  .apertura--scena .apertura__logo{width:min(150px,42%)}
  .apertura--scena .h1__su{font-size:1.15rem}
  .apertura--scena h1 em{font-size:1.38rem}
  .apertura--scena .occhiello{font-size:.8rem;margin:.6rem 0 .7rem}
  .apertura__fatti{padding:.5rem .7rem}
}


/* ============================================================
   TELEFONO — due correzioni sulla hero
   1. la striscia dei cookie copriva «RESI FACILI»: finche' c'e',
      la barra dei fatti si alza di quel tanto.
   2. il pulsante WhatsApp in alto era piu' alto del logo: si stringe.
   ============================================================ */
@media (max-width:620px){
  body.con-cookie .apertura__fatti{padding-bottom:calc(.6rem + var(--h-cookie,3rem))}
  .testa__nav{gap:.55rem}
  .testa__nav a{font-size:.84rem}
  .testa .wa{padding:.52rem .95rem;font-size:.84rem;gap:.4rem}
  .testa .wa svg{width:15px;height:15px}
}

/* schermi bassi (360x640 e simili): i due pulsanti si impilano,
   quindi si stringono in altezza per non mangiare la scena */
@media (max-width:620px) and (max-height:700px){
  .apertura--scena .apertura__box{padding-bottom:.9rem}
  .apertura--scena .bottoni{gap:.42rem;margin-bottom:.7rem}
  .apertura--scena .wa{padding:.58rem .95rem;font-size:.85rem}
  .apertura--scena .occhiello{margin:.55rem 0 .65rem}
}

/* «Perche' Mezzo Metro di Tacco» — ora la storia sta in due tempi:
   il nome scartato, e il nome scelto. Servono aria fra i due. */
.nome .occhiello + .occhiello{margin-top:.95rem}
.nome .occhiello i{font-style:italic;color:var(--crema);white-space:nowrap}

/* ============================================================
   🔴 IL BUG DEL FILTRO — questo e' il motivo vero per cui
   premendo una categoria «le scarpe rimanevano sempre le stesse».
   Il JS metteva l'attributo hidden sulle schede da nascondere, ma
   `.cartellino{display:flex}` batte la regola del browser
   `[hidden]{display:none}`: le schede restavano a schermo tutte e 40.
   Si nasconde per davvero, e per qualunque elemento nascosto.
   ============================================================ */
[hidden]{display:none !important}

/* ============================================================
   «Perche' Mezzo Metro di Tacco» DA TELEFONO.
   Prima il metro stava sopra al testo: 300px di barra quasi vuota,
   mezzo schermo buttato, e il titolo finiva sotto la piega.
   Ora il metro sta DI FIANCO e si allunga quanto il testo:
   un righello che misura le righe, non un blocco messo li'.
   ============================================================ */
@media (max-width:819px){
  .nome{grid-template-columns:40px 1fr;gap:1.05rem;align-items:stretch}
  .nome .metro{height:auto;gap:0;justify-self:start;align-self:stretch}
  .nome .metro__asta{width:40px}
  .nome .metro__numeri{display:none}          /* di fianco non ci stanno */
  .nome .metro__cima{font-size:.92rem;top:.4rem}
  .nome .metro__cima small{font-size:.46rem}
  .nome .quota{margin-top:0}
}

/* ============================================================
   🔴 IL RIGHELLO FINIVA SOTTO LA BARRA IN ALTO.
   .testa e' fixed con left:0 e z-index 50; il righello aveva 40.
   Cosi' la lettura in cm e il cursore restavano nascosti dietro
   la barra per i primi 2000px di scroll (fino a 8 cm): aprivi il
   sito, scorrevi, e il righello sembrava morto.
   Ora sta davanti alla barra e dietro al banner dei cookie (60).
   Le scritte non si toccano: la barra parte dopo il righello
   (padding-left 108px su 76 da computer, 42px su 30 da telefono),
   e il righello non prende clic (pointer-events:none).
   ============================================================ */
.righello{z-index:55}

/* ============================================================
   💡 L'INSEGNA AL NEON accanto al titolo di sezione.
   Un tubo al neon vero: vetro chiaro, alone dentro e fuori,
   leggermente storto come le insegne appese male.
   ============================================================ */
.neon{display:inline-block;vertical-align:.14em;margin-left:.42em;
  font-family:"Gabarito",sans-serif;font-weight:800;font-size:.40em;
  letter-spacing:.15em;text-transform:uppercase;line-height:1;
  padding:.5em .95em .46em;border-radius:999px;
  color:#fff;border:2px solid var(--tubo);
  rotate:-3deg;
  text-shadow:0 0 5px var(--tubo), 0 0 16px var(--tubo), 0 0 34px var(--tubo);
  box-shadow:0 0 10px -1px var(--tubo), 0 0 30px -6px var(--tubo),
             inset 0 0 14px -5px var(--tubo);
  animation:respiroNeon 4.5s ease-in-out infinite}
.neon--rosa{--tubo:var(--fucsia-chiaro)}
.neon--ciano{--tubo:var(--neon)}
@keyframes respiroNeon{0%,100%{opacity:1}47%{opacity:.86}}
@media (max-width:620px){.neon{font-size:.46em;margin-left:.35em;letter-spacing:.11em}}

/* ============================================================
   👠 LE COPERTINE DI CATEGORIA — si sceglie prima il tipo di
   scarpa, e solo dopo compaiono i modelli. Prima il catalogo
   si apriva su una sfilza di 40 scarpe tutte insieme.
   Sono SEI riquadri: 2 per riga da telefono, 3 da computer,
   cosi' nessuna riga resta con un pezzo solo.
   ============================================================ */
.categorie{display:grid;grid-template-columns:repeat(2,1fr);
  gap:clamp(.65rem,2vw,1.1rem);margin-top:clamp(1.4rem,4vw,2.2rem)}
@media (min-width:760px){.categorie{grid-template-columns:repeat(3,1fr)}}

.categoria{position:relative;display:flex;flex-direction:column;gap:0;
  padding:0 0 .95rem;border:1px solid var(--filo);border-radius:16px;
  background:var(--nero-2);color:var(--crema);text-align:left;cursor:pointer;
  overflow:hidden;font:inherit;
  transition:transform .28s cubic-bezier(.2,.7,.25,1),border-color .28s,box-shadow .28s}
.categoria:hover,.categoria:focus-visible{transform:translateY(-4px);
  border-color:var(--fucsia);
  box-shadow:0 22px 44px -26px #000, 0 0 36px -14px var(--fucsia)}
.categoria__foto{display:block;aspect-ratio:1;background:#fff;overflow:hidden}
.categoria__foto img{width:100%;height:100%;object-fit:contain;display:block;
  transition:transform .5s cubic-bezier(.2,.7,.25,1)}
.categoria:hover .categoria__foto img{transform:scale(1.06)}
.categoria__nome{font-family:"Gabarito",sans-serif;font-weight:800;line-height:1.2;
  font-size:clamp(.95rem,2.6vw,1.08rem);padding:.8rem .9rem .15rem}
.categoria__conta{font-size:.76rem;letter-spacing:.05em;color:var(--giallo);padding:0 .9rem}

/* il riquadro «tutte»: niente foto, un numero al neon */
.categoria--tutte{align-items:center;justify-content:center;text-align:center;
  padding:1.3rem .9rem;border-color:rgba(249,41,110,.45);
  background:radial-gradient(120% 92% at 50% 0%,rgba(249,41,110,.3),transparent 64%),var(--nero-2)}
.categoria--tutte .categoria__num{font-family:"Gabarito",sans-serif;font-weight:900;
  font-size:clamp(2.5rem,9vw,3.7rem);line-height:1;color:#fff;
  text-shadow:0 0 10px var(--fucsia),0 0 36px var(--fucsia)}
.categoria--tutte .categoria__nome{padding:.5rem 0 .1rem}
.categoria--tutte .categoria__conta{padding:0;color:var(--crema-soft)}

/* la freccia che riporta alle copertine */
.filtro .indietro{border-color:rgba(246,233,216,.3);color:var(--crema-soft);font-weight:600}
.filtro .indietro:hover{color:var(--crema);border-color:var(--crema-soft)}

/* i modelli entrano quando si sceglie la categoria */
.aperto{animation:apreCategoria .45s cubic-bezier(.2,.7,.25,1) both}
@keyframes apreCategoria{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

@media (prefers-reduced-motion:reduce){
  .neon{animation:none}
  .aperto{animation:none}
  .categoria,.categoria__foto img{transition:none}
}

/* il disegno dentro l'insegna: la scarpa e il vestito, a tubo di neon */
.neon{display:inline-flex;align-items:center;gap:.42em;padding:.36em .9em .34em .62em}
.neon__segno{width:2.15em;height:2.15em;flex:0 0 auto;overflow:visible;
  color:var(--tubo);display:block}
@media (max-width:620px){.neon__segno{width:2em;height:2em}}

/* la scarpa e il vestito hanno proporzioni diverse: si pareggia l'ALTEZZA,
   la larghezza la decide il disegno. Prima erano schiacciati in un quadrato. */
.neon__segno{height:2.9em;width:auto;flex:0 0 auto;overflow:visible;
  color:var(--tubo);display:block}
@media (max-width:620px){.neon__segno{height:3.1em}}

/* ============================================================
   L'insegna resta solo il DISEGNO: la parola sparisce dalla vista
   ma resta nel codice per chi naviga con un lettore di schermo
   (il disegno e' aria-hidden, da solo non direbbe niente).
   Il tubo si stringe attorno al disegno.
   ============================================================ */
.solo-voce{position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.neon{gap:0;padding:.34em .62em}

/* ============================================================
   TAGLIE · COLORI · PREZZI · ETICHETTE · BANNER
   Aggiunto in coda: vince sulla cascata e non tocca niente di
   quello che c'era prima. Tutti i valori arrivano dagli attributi
   data-* della scheda, cosi' il pannello li potra' riscrivere.
   ============================================================ */

/* --- il banner promozionale: si spegne con data-promo="off".
       Tutta la striscia e' cliccabile, cosi' il bersaglio da dito e'
       l'intera barra e non un link di 18px. --- */
.promo{background:linear-gradient(90deg,var(--fucsia),#D31B8E 55%,var(--fucsia));color:#fff}
.promo[data-promo="off"]{display:none}
.promo__dentro{display:flex;align-items:center;justify-content:center;gap:.25rem .9rem;
  flex-wrap:wrap;text-align:center;min-height:48px;
  padding:.55rem clamp(1.1rem,4vw,3.2rem);
  color:#fff;text-decoration:none;font-size:.92rem;line-height:1.32;
  transition:background .25s}
.promo__dentro:hover{background:rgba(20,16,15,.14)}
.promo__dentro:focus-visible{outline:2px solid var(--giallo);outline-offset:-3px}
.promo__testo{max-width:70ch}
.promo__testo b{font-weight:800}
.promo__link{font-weight:700;white-space:nowrap;text-decoration:underline;
  text-underline-offset:3px;color:var(--giallo)}
@media (max-width:620px){
  .promo__dentro{font-size:.82rem;padding:.5rem .9rem;gap:.1rem .7rem}
  .promo__link{font-size:.8rem}
}
@media (prefers-reduced-motion:reduce){.promo__dentro{transition:none}}

/* --- prezzo sulla scheda --- */
.prezzo{margin:.35rem 0 0;font-size:.98rem;line-height:1.2;color:var(--nero)}
.prezzo__ora{font-family:Gabarito,system-ui,sans-serif;font-weight:800;font-size:1.12rem}
.prezzo__prima{color:#8A8078;font-size:.86rem;margin-left:.35rem}
.prezzo--vuoto{font-size:.78rem;color:#8A8078;font-weight:500}

/* --- etichetta sulla foto: saldi, sottocosto, novita --- */
.etichetta{position:absolute;top:.55rem;left:.55rem;z-index:2;
  padding:.24rem .5rem;border-radius:999px;
  font-family:Gabarito,system-ui,sans-serif;font-weight:800;
  font-size:.66rem;letter-spacing:.09em;text-transform:uppercase;color:#fff}
.etichetta--saldi{background:var(--fucsia)}
.etichetta--sottocosto{background:#B31226}
.etichetta--novita{background:var(--nero);color:var(--giallo)}
.cartellino__foto{position:relative}

/* --- misura e colori --- */
/* le scelte si agganciano al fondo della scheda: cosi' fra due schede
   affiancate con titolo di lunghezza diversa, misura, colore e bottone
   restano tutti sulla stessa riga. */
.scelte{display:flex;flex-direction:column;gap:.4rem;margin-top:auto;padding-top:.6rem}
.cartellino__testo .scelte + .wa{margin-top:.55rem}
.misura{width:100%;min-height:44px;padding:.4rem .6rem;border-radius:10px;
  border:1px solid #DCD3C6;background:#fff;color:var(--nero);
  font:inherit;font-size:.88rem;cursor:pointer;
  transition:border-color .2s,box-shadow .2s}
.misura:hover{border-color:#B9AC9B}
.misura:focus-visible{outline:2px solid var(--neon);outline-offset:2px}

.colori{display:flex;align-items:center;gap:.34rem;flex-wrap:wrap;min-height:22px}
.colore{width:18px;height:18px;border-radius:50%;flex:0 0 auto;
  background:var(--c,#000);box-shadow:inset 0 0 0 1px rgba(20,16,15,.28)}
.colore--scelta{position:relative;padding:0;border:0;cursor:pointer;
  transition:transform .2s cubic-bezier(.2,.7,.25,1),box-shadow .2s}
/* area di tocco allargata a 44px senza allargare il pallino */
.colore--scelta::before{content:"";position:absolute;inset:-13px}
.colore--scelta:hover{transform:scale(1.15)}
.colore--scelta[aria-pressed="true"]{box-shadow:inset 0 0 0 1px rgba(20,16,15,.28),
  0 0 0 2px #FCF8F2,0 0 0 4px var(--fucsia)}
.colore--scelta:focus-visible{outline:2px solid var(--neon);outline-offset:4px}
.colori__nome{font-size:.74rem;color:#6F665C;margin-left:.1rem}

@media (prefers-reduced-motion:reduce){
  .colore--scelta,.misura{transition:none}
  .colore--scelta:hover{transform:none}
}