/* ══════════════════════════════════════════════════════════════════════
   VentiRent — sito-v2 — home (italiano e inglese)
   ══════════════════════════════════════════════════════════════════════
   Sezioni nell'ordine della pagina
     01 Apertura            04 Come funziona    07 Collezione (in pagina subito dopo la 03)
     02 Manifesto           05 Consegna         08 Requisiti e domande
     03 Le più richieste    06 Occasioni        09 Finale e richiesta
   Ogni sezione ha una composizione sua: nessuna griglia di card ripetuta.
   ══════════════════════════════════════════════════════════════════════ */

main{position:relative}
/* Tutto ciò che segue l'apertura le scorre sopra, come un sipario */
main>section:not(.apertura){position:relative;z-index:2;background:var(--nero)}
main>section.chiaro{background:var(--osso)}

/* ── 01 APERTURA ──────────────────────────────────────────────────────────
   Telefono: la fotografia (taglio 4:5, l'auto intera) occupa i due terzi
   alti e sfuma nel nero; titolo e pulsanti stanno sotto, sul nero.
   Da 700px: fotografia a tutto schermo, testo in basso a sinistra. */
.apertura{
  position:sticky;top:0;z-index:1;
  height:100vh;height:100svh;min-height:620px;
  overflow:hidden;background:var(--nero);isolation:isolate;
}
.apertura-foto{
  position:absolute;inset:0 0 34% 0;z-index:-3;
  transform-origin:50% 40%;
  -webkit-mask-image:linear-gradient(180deg,#000 58%,transparent 100%);
          mask-image:linear-gradient(180deg,#000 58%,transparent 100%);
}
.apertura-foto picture{display:block;width:100%;height:100%}
.apertura-foto img{width:100%;height:100%;object-fit:cover;object-position:50% 58%}
.apertura-velo{
  position:absolute;inset:0;z-index:-2;pointer-events:none;
  background:linear-gradient(180deg,rgba(0,0,0,.42) 0%,rgba(0,0,0,0) 20%);
}
/* il buio iniziale che si apre: solo con movimento consentito */
.apertura-buio{position:absolute;inset:0;z-index:-1;background:var(--nero);opacity:0;pointer-events:none}
@media(prefers-reduced-motion:no-preference){
  .js .apertura-buio{opacity:.72;transition:opacity 1.4s var(--e-morbida)}
  .js.pronto .apertura-buio{opacity:0}
  .js .apertura-foto img{transform:scale(1.12);transition:transform 3.2s var(--e-uscita)}
  .js.pronto .apertura-foto img{transform:none}
}
.apertura-testo{position:absolute;left:0;right:0;bottom:calc(84px + env(safe-area-inset-bottom));z-index:2}
.apertura .micro{color:var(--argento)}
/* Il titolo si misura sulla larghezza E sull'altezza: su uno schermo basso
   (laptop 13", telefono in orizzontale) non deve spingere fuori i pulsanti */
.apertura-titolo{
  grid-column:1/-1;margin-top:18px;max-width:13ch;
  font-size:clamp(2.35rem,min(10.4vw,7.4svh),8rem);font-weight:300;line-height:.97;letter-spacing:-.052em;
}
.apertura-titolo .tenue{color:rgba(238,235,230,.5)}
.apertura-lato{grid-column:1/-1;margin-top:20px}
.apertura-sommario{color:var(--argento);max-width:40ch;font-size:.98rem;line-height:1.6}
.apertura .azioni{margin-top:24px}
.apertura-piede{
  position:absolute;left:0;right:0;bottom:calc(22px + env(safe-area-inset-bottom));z-index:2;
  display:flex;justify-content:space-between;align-items:center;
}
.didascalia{color:var(--grigio)}
.scorri{display:flex;align-items:center;gap:14px;color:var(--argento)}
.scorri i{position:relative;display:block;width:42px;height:1px;background:var(--linea-forte);overflow:hidden}
.scorri i::after{content:"";position:absolute;inset:0;background:var(--osso);transform:translateX(-100%)}
@media(prefers-reduced-motion:no-preference){ .scorri i::after{animation:scorri 2.6s var(--e-morbida) infinite 1.8s} }
@keyframes scorri{0%{transform:translateX(-100%)}50%{transform:translateX(0)}100%{transform:translateX(100%)}}
@media(max-width:599px){
  .apertura .azioni{display:grid;gap:6px}
  .apertura .azioni .btn{width:100%}
  .apertura .azioni .link{justify-self:start}
  .apertura-piede .didascalia{display:none}
}
@media(max-height:700px) and (max-width:599px){
  .apertura-sommario{display:none}
}
@media(min-width:700px){
  .apertura-foto{inset:0;-webkit-mask-image:none;mask-image:none}
  .apertura-foto img{object-position:50% 55%}
  .apertura-velo{
    background:
      linear-gradient(180deg,rgba(0,0,0,.5) 0%,rgba(0,0,0,0) 22%,rgba(0,0,0,0) 42%,rgba(0,0,0,.55) 72%,rgba(0,0,0,.9) 100%),
      linear-gradient(90deg,rgba(0,0,0,.45) 0%,rgba(0,0,0,0) 55%);
  }
}
@media(min-width:900px){
  .apertura-testo{bottom:clamp(76px,11vh,130px)}
  /* Su schermo grande 22px dal bordo erano troppo pochi: didascalia e
     «Scorri» sembravano cadere fuori dalla pagina */
  .apertura-piede{bottom:clamp(26px,3.2vh,38px)}
  .apertura-titolo{grid-column:1/span 8;font-size:clamp(3.2rem,min(6.7vw,11svh),8.2rem)}
  .apertura-lato{grid-column:9/-1;align-self:end;margin:0;padding-bottom:.5em}
  .apertura-sommario{font-size:1.02rem}
}

/* ── 02 MANIFESTO ─────────────────────────────────────────────────────── */
.manifesto{padding:var(--sezione) 0}
.manifesto>.contenitore>.micro{grid-column:1/-1;margin-bottom:clamp(28px,4vw,48px)}
.manifesto-frase{
  grid-column:1/-1;
  font-size:clamp(1.85rem,4.6vw,5rem);font-weight:300;line-height:1.08;letter-spacing:-.042em;
}
@media(prefers-reduced-motion:no-preference){
  .js .manifesto-frase .p>span{opacity:.17;transition:opacity .7s var(--e-morbida)}
  .js .manifesto-frase .p.accesa>span{opacity:1}
}
.manifesto-coda{margin-top:clamp(44px,10vw,170px);align-items:end}
.manifesto-figura{grid-column:1/-1}
.manifesto-foto{position:relative;aspect-ratio:4/5;overflow:hidden;background:var(--grafite)}
.manifesto-figura figcaption{margin-top:14px}
.manifesto-testo{grid-column:1/-1;margin-top:44px}
.manifesto-testo .lead{max-width:34ch}
@media(min-width:600px){ .manifesto-figura{grid-column:2/-1} }
@media(min-width:900px){
  .manifesto-frase{grid-column:1/span 11}
  .manifesto-figura{grid-column:7/span 5}
  .manifesto-testo{grid-column:2/span 4;grid-row:1;margin:0;padding-bottom:4px}
}


/* ── 03 LE PIÙ RICHIESTE ──────────────────────────────────────────────────
   Ferrari Roma e Porsche 718 Spyder in due schede: affiancate da 900px, una
   sotto l'altra prima. La collezione viene subito dopo. Fino al 13 settembre
   2026 era un capitolo a tutto schermo per vettura, con la foto ferma e la
   scheda che le saliva sopra: quattro schermate per due auto, e le altre
   vetture della collezione sembravano di un'altra categoria. */
.flotta{padding:clamp(56px,8vw,140px) 0 clamp(40px,5vw,80px)}
.flotta-intro{margin-bottom:clamp(28px,3.5vw,56px)}
.flotta-intro .micro{grid-column:1/-1;margin-bottom:20px}
.flotta-intro h2{grid-column:1/-1}
.preferite{row-gap:48px}
.preferita{grid-column:1/-1;display:flex;flex-direction:column}
.preferita-foto{position:relative;aspect-ratio:3/2;overflow:hidden;background:var(--grafite)}
.preferita-foto img{transition:transform 1.4s var(--e-uscita)}
@media(hover:hover){ .preferita:hover .preferita-foto img{transform:scale(1.04)} }
.preferita-corpo{flex:1;display:flex;flex-direction:column;padding-top:20px}
.preferita-nome{margin-top:8px;font-size:clamp(1.8rem,2.6vw,2.6rem);font-weight:250;line-height:1;letter-spacing:-.045em}
.preferita .dati{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:20px 0 24px}
.preferita .dato{padding-top:10px}
.preferita .dato dt{margin-bottom:8px}
.preferita .dato dd{font-size:clamp(1.6rem,2.2vw,2.2rem)}
/* il piede si appoggia in fondo: prezzi e pulsanti allineati fra le due schede */
.preferita-piede{
  margin-top:auto;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 28px;
  padding-top:18px;border-top:1px solid var(--linea);
}
.flotta-nota{margin-top:clamp(20px,2.4vw,36px);color:var(--grigio);font-size:.84rem}
@media(min-width:900px){
  .preferita{grid-column:span 6}
}

/* ── 04 COME FUNZIONA (sezione chiara) ────────────────────────────────── */
.esperienza{padding:var(--sezione) 0}
.esperienza.chiaro{background:var(--osso)}
.esperienza-guida{grid-column:1/-1}
.esperienza-guida h2{margin-top:26px;max-width:11ch}
.esperienza-guida .corpo{margin-top:22px}
.esperienza-conta,.esperienza-barra{display:none}
.passi{grid-column:1/-1;margin-top:36px}
.passo{display:grid;grid-template-columns:3em 1fr;gap:8px 14px;padding:28px 0;border-top:1px solid var(--linea)}
.passo:last-child{border-bottom:1px solid var(--linea)}
.passo .micro{grid-row:1/3;padding-top:.85em}
.passo h3{font-size:clamp(1.6rem,2.8vw,2.6rem);font-weight:300;letter-spacing:-.035em;line-height:1.08}
.passo p{color:var(--testo-2);max-width:40ch}
@media(min-width:900px){
  .esperienza-guida{grid-column:1/span 5;position:sticky;top:calc(var(--testata-h) + 48px);align-self:start}
  .esperienza-conta{
    display:flex;align-items:baseline;overflow:hidden;margin-top:clamp(40px,9vh,110px);
    font-size:clamp(7rem,13vw,15rem);font-weight:200;letter-spacing:-.075em;line-height:.82;
  }
  .esperienza-conta [data-passo-attivo]{display:inline-block}
  .esperienza-conta [data-passo-attivo].gira{animation:gira .9s var(--e-uscita)}
  .esperienza-conta .tenue{font-size:.16em;letter-spacing:.12em;margin-left:.5em;font-weight:400}
  .esperienza-barra{display:block;height:1px;max-width:340px;margin-top:36px;background:var(--linea)}
  .esperienza-barra span{display:block;height:100%;background:var(--nero);transform-origin:0 50%;transform:scaleX(var(--progresso,0))}
  .passi{grid-column:7/-1;margin-top:0}
  .passo{min-height:36vh;align-content:center;grid-template-columns:4em 1fr}
  .passo:first-child{border-top:0}
  .passo:last-child{border-bottom:0}
}
@keyframes gira{from{transform:translateY(42%)}}
@media(min-width:900px) and (prefers-reduced-motion:no-preference){
  .js .passo{opacity:.22;transition:opacity .8s var(--e-morbida)}
  .js .passo.attivo{opacity:1}
}

/* ── 05 CONSEGNA ──────────────────────────────────────────────────────── */
.consegna{padding:var(--sezione) 0}
.consegna-titolo{margin-top:26px;max-width:15ch}
.consegna-corpo{margin-top:clamp(36px,8vw,130px);align-items:start}
.consegna-foto{
  grid-column:1/-1;position:relative;aspect-ratio:16/11;overflow:hidden;background:var(--grafite);
  margin-inline:calc(var(--margine) * -1);
}
.consegna-testo{grid-column:1/-1;margin-top:46px}
.consegna-testo .lead{max-width:34ch}
.itinerario{position:relative;margin-top:44px;padding-left:28px}
.itinerario::before{
  content:"";position:absolute;left:3px;top:.9em;bottom:1.2em;width:1px;background:var(--linea-forte);
  transform-origin:50% 0;transform:scaleY(var(--traccia,1));
}
/* le mete, senza la riga «Parma · Base» sopra (tolta il 13 settembre 2026) */
.itinerario-mete{display:grid;grid-template-columns:1fr 1fr;column-gap:22px}
.itinerario-mete li{padding:6px 0;color:var(--osso);font-size:clamp(1.3rem,1.9vw,1.7rem);font-weight:300;letter-spacing:-.025em;line-height:1.2}
/* fra 900 e 1200px la colonna del testo è stretta (~120px per meta):
   su due colonne «Lago di Garda» e «Reggio Emilia» andavano a capo */
@media(min-width:900px) and (max-width:1199px){ .itinerario-mete{grid-template-columns:1fr} }
.itinerario-coda{margin-top:14px}
/* i luoghi: quattro voci in due colonne, un filetto corto sopra ciascuna */
.luoghi{display:grid;grid-template-columns:1fr 1fr;gap:22px 22px;margin-top:40px}
.luoghi li{position:relative;padding-top:14px;font-size:1.12rem;font-weight:300;letter-spacing:-.015em;line-height:1.3}
.luoghi li::before{content:"";position:absolute;left:0;top:0;width:28px;height:1px;background:var(--linea-forte)}
.luoghi .micro{display:none}
@media(min-width:600px){ .consegna-foto{margin-inline:0} }
@media(min-width:900px){
  .consegna-foto{grid-column:1/span 7;aspect-ratio:4/3.1}
  .consegna-testo{grid-column:9/-1;margin-top:0}
}

/* ── 06 OCCASIONI ─────────────────────────────────────────────────────── */
.occasioni{padding:var(--sezione) 0}
.occasioni-testa{margin-bottom:clamp(28px,7vw,110px)}
.occasioni-testa h2{margin-top:26px;max-width:12ch}
.occasione{display:grid;grid-template-columns:2.8em 1fr;gap:10px 12px;padding:24px 0 28px;border-top:1px solid var(--linea)}
.occasione:last-child{border-bottom:1px solid var(--linea)}
.occasione .micro{padding-top:1.1em}
.occasione h3{font-size:clamp(2.3rem,8vw,7.4rem);font-weight:250;letter-spacing:-.058em;line-height:.95;transition:transform .9s var(--e-uscita),color .6s}
.occasione p{grid-column:2;color:var(--testo-2);max-width:40ch}
@media(min-width:900px){
  .occasione{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(20px,2vw,36px);align-items:end;padding:26px 0 30px}
  .occasione .micro{grid-column:1;align-self:start;padding-top:1.6em}
  .occasione h3{grid-column:2/span 7}
  .occasione p{grid-column:9/-1;padding-bottom:.7em}
}
@media(hover:hover) and (min-width:900px){
  .occasioni-lista:hover .occasione:not(:hover) h3{color:var(--ferro)}
  .occasione:hover h3{transform:translateX(22px)}
}

/* ── 07 COLLEZIONE ────────────────────────────────────────────────────────
   Le altre vetture in fila: si scorre col dito, con la rotella, con la
   tastiera o con le due frecce ai lati. La pagina non si ferma più sulla
   sezione: la fila scorre per conto suo, non è più un fermo immagine. */
.collezione{--scheda:min(78vw,420px);padding:var(--sezione) 0 calc(var(--sezione) * .7)}
main>.collezione{background:var(--antracite)}
.collezione-testa{align-items:end;margin-bottom:clamp(36px,4vw,56px)}
.collezione-testa .micro{grid-column:1/-1;margin-bottom:26px}
.collezione-testa h2{grid-column:1/-1;max-width:14ch}
.collezione-testa .coda{grid-column:1/-1;margin-top:22px}
.collezione-testa .coda p{color:var(--testo-2);max-width:36ch;margin-bottom:10px}
.collezione-fila{position:relative}
.collezione-binario{
  display:flex;gap:14px;overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;scroll-padding-inline:var(--margine);padding-inline:var(--margine);
  scrollbar-width:none;
}
.collezione-binario::-webkit-scrollbar{display:none}
.pezzo,.pezzo-fine{flex:0 0 var(--scheda);scroll-snap-align:start}
.pezzo{display:block}
/* l'ultima scheda aggancia a destra: così la fine della fila è una
   posizione di arrivo, col dito e con le frecce */
.collezione-binario>:last-child{scroll-snap-align:end}
.pezzo-foto{position:relative;aspect-ratio:1/1;overflow:hidden;background:var(--grafite)}
.pezzo-foto img{transition:transform 1.4s var(--e-uscita)}
.pezzo-dida{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;padding-top:16px}
.pezzo h3{font-size:clamp(1.3rem,1.7vw,1.75rem);font-weight:300;letter-spacing:-.028em;line-height:1.15;margin-top:6px}
.pezzo-dida .freccia{margin-bottom:.5em;color:var(--grigio)}
@media(hover:hover){
  .pezzo:hover .pezzo-foto img{transform:scale(1.05)}
  .pezzo:hover .freccia{transform:translateX(5px);color:var(--osso)}
}
.pezzo-fine{
  display:flex;flex-direction:column;justify-content:space-between;gap:24px;
  aspect-ratio:1/1;padding:clamp(22px,2.4vw,36px);border:1px solid var(--linea-forte);
}
.pezzo-fine p{font-size:clamp(1.4rem,2.1vw,2.1rem);font-weight:300;letter-spacing:-.03em;line-height:1.12}
/* Le frecce ← → stanno ai due lati della fila, sopra le fotografie: da lì
   si scorre senza allontanare gli occhi dalle vetture. Si centrano a metà
   della fotografia, non della scheda: la foto è quadrata, quindi metà
   larghezza della scheda è anche la sua mezza altezza; metà scheda cadrebbe
   più in basso, sulla didascalia. Fondo scuro e sfocato come il pulsante
   WhatsApp, perché restino leggibili su qualunque fotografia. Al capo della
   fila la freccia sparisce invece di restare spenta: sopra una fotografia un
   comando morto si nota. */
.freccia-lato{
  position:absolute;top:calc(var(--scheda) / 2);z-index:3;transform:translateY(-50%);
  width:52px;height:52px;display:flex;align-items:center;justify-content:center;
  background:rgba(9,9,9,.72);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border:1px solid var(--linea-forte);color:var(--osso);
  transition:opacity .45s,border-color .4s,background-color .4s;
  -webkit-tap-highlight-color:transparent;
}
.freccia-lato.sinistra{left:clamp(10px,1.4vw,20px)}
.freccia-lato.destra{right:clamp(10px,1.4vw,20px)}
.freccia-lato.sinistra .freccia{transform:scaleX(-1)}
.freccia-lato:disabled{opacity:0;pointer-events:none}
@media(hover:hover){
  .freccia-lato:not(:disabled):hover{border-color:var(--osso);background:rgba(9,9,9,.92)}
  .freccia-lato.destra:not(:disabled):hover .freccia{transform:translateX(4px)}
  .freccia-lato.sinistra:not(:disabled):hover .freccia{transform:scaleX(-1) translateX(4px)}
}
@media(max-width:599px){ .freccia-lato{width:44px;height:44px} .freccia-lato .freccia{width:22px} }

/* sotto la fila: la barra di avanzamento */
.collezione-piede{display:flex;align-items:center;margin:26px var(--margine) 0}
.collezione-avanzamento{flex:1;height:1px;background:var(--linea)}
.collezione-avanzamento span{display:block;height:100%;background:var(--osso);transform-origin:0 50%;transform:scaleX(var(--progresso,.1))}
@media(min-width:900px){
  .collezione-testa h2{grid-column:1/span 7}
  .collezione-testa .coda{grid-column:9/-1;margin:0}
  .collezione{--scheda:clamp(300px,min(29vw,54vh),520px)}
}

/* ── 08 REQUISITI E DOMANDE ───────────────────────────────────────────── */
main>.requisiti{background:var(--notte)}
.requisiti{padding:var(--sezione) 0}
.requisiti-regole{grid-column:1/-1}
.requisiti-regole h2{margin-top:26px;max-width:10ch}
.regole{margin-top:42px}
.requisiti-regole .nota{margin-top:20px;color:var(--grigio);font-size:.86rem;max-width:44ch}
.requisiti-regole .link{margin-top:14px}
.faq{grid-column:1/-1;margin-top:clamp(48px,8vw,120px)}
.faq>.micro{margin-bottom:22px}
.faq details{border-top:1px solid var(--linea)}
.faq details:last-child{border-bottom:1px solid var(--linea)}
.faq summary{
  display:flex;justify-content:space-between;align-items:flex-start;gap:24px;
  padding:22px 0;cursor:pointer;list-style:none;
  font-size:1.08rem;line-height:1.4;letter-spacing:-.01em;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary i{position:relative;flex:0 0 14px;height:14px;margin-top:.3em}
.faq summary i::before,.faq summary i::after{content:"";position:absolute;left:0;top:50%;width:100%;height:1px;background:currentColor;transition:transform .6s var(--e-uscita)}
.faq summary i::after{transform:rotate(90deg)}
.faq details[open] summary i::after{transform:rotate(0)}
.faq .risp{padding:0 34px 26px 0;color:var(--grigio);max-width:62ch}
.faq .risp a{color:var(--osso);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.faq .risp b{color:var(--argento);font-weight:500}
@media(hover:hover){ .faq summary:hover{color:var(--argento)} }
/* apertura animata dove il browser sa interpolare height:auto */
@supports (interpolate-size:allow-keywords){
  .faq{interpolate-size:allow-keywords}
  .faq details::details-content{height:0;overflow:clip;transition:height .6s var(--e-uscita),content-visibility .6s allow-discrete}
  .faq details[open]::details-content{height:auto}
}
@media(min-width:900px){
  .requisiti-regole{grid-column:1/span 5}
  .faq{grid-column:7/-1;margin-top:0}
}

/* ── 09 FINALE E RICHIESTA ────────────────────────────────────────────── */
main>.finale{background:var(--nero)}
.finale-scena{position:relative;height:86vh;height:86svh;min-height:560px;overflow:hidden;background:var(--grafite)}
.finale-velo{position:absolute;inset:0;z-index:2;background:linear-gradient(180deg,rgba(0,0,0,.25) 0%,rgba(0,0,0,0) 40%,rgba(0,0,0,.88) 100%)}
.finale-testo{position:absolute;left:0;right:0;bottom:clamp(40px,9vh,110px);z-index:3}
.finale-testo h2{margin-top:22px;max-width:12ch}
.richiesta{padding-bottom:var(--sezione)}
.richiesta-intro{grid-column:1/-1;padding-top:52px}
.richiesta-intro .lead{max-width:30ch}
.richiesta-contatti{margin-top:30px;display:grid;gap:4px}
.richiesta-contatti a{color:var(--argento)}
.richiesta-pannello{grid-column:1/-1;margin-top:52px}
@media(min-width:900px){
  /* il titolo resta sopra la fascia che il pannello del modulo copre */
  .finale-testo{bottom:calc(22vh + clamp(36px,5vh,64px))}
  .richiesta-intro{grid-column:1/span 4;padding-top:clamp(64px,7vw,110px)}
  .richiesta-pannello{
    grid-column:6/-1;position:relative;z-index:4;margin-top:-22vh;
    padding:clamp(40px,4.4vw,72px);background:var(--notte);border:1px solid var(--linea);
  }
}

.modulo{display:grid;gap:30px}
.modulo fieldset{border:0;display:grid;gap:30px;min-width:0}
.due{display:grid;gap:30px}
@media(min-width:600px){ .due{grid-template-columns:1fr 1fr} }
.fasi-indice{display:flex;gap:28px;padding-bottom:22px;border-bottom:1px solid var(--linea)}
.fasi-indice li{display:flex;gap:10px;color:var(--piombo);transition:color .5s}
.fasi-indice li.corrente{color:var(--osso)}
.modulo-azioni{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 24px;margin-top:6px}
.modulo-azioni .btn{min-width:min(100%,260px)}
.modulo-azioni [data-indietro]{order:-1}
.modulo .spunte{display:grid;gap:16px}
@media(prefers-reduced-motion:no-preference){
  .modulo [data-fase].entra{animation:fase .9s var(--e-uscita)}
}
@keyframes fase{from{transform:translate3d(0,18px,0)}}
@media(max-width:599px){ .modulo-azioni .btn{width:100%} }