/* Birba · negozio per animali. Giocoso con foto ruotate e forme colorate, Fredoka + DM Sans. */
@font-face{font-family:'Fredoka';src:url('../_font/fredoka/fredoka-var.woff2') format('woff2');font-weight:300 700;font-style:normal;font-display:swap}
@font-face{font-family:'DM Sans';src:url('../_font/dm-sans/dm-sans-var.woff2') format('woff2');font-weight:100 1000;font-style:normal;font-display:swap}

:root{
  --p:#3348e0;  /* blu cobalto */
  --s:#eef3ff;  /* cielo chiaro */
  --t:#151c3a;  /* blu notte */
  --a:#8fe3c0;  /* menta */
  --f-titoli:'Fredoka', 'Nunito', system-ui, sans-serif;
  --f-testo:'DM Sans', system-ui, sans-serif;

  --carta:color-mix(in oklab, var(--s) 94%, var(--t));
  --gut:clamp(18px, 4vw, 56px);
  --max:1340px;
  --molla:cubic-bezier(.34,1.56,.64,1);
  --liscio:cubic-bezier(.22,1,.36,1);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--s);color:var(--t);font-family:var(--f-testo);font-size:17px;line-height:1.55;overflow-x:clip}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
button{font:inherit;color:inherit;cursor:pointer}
[hidden]{display:none !important}
h1,h2,h3,p,figure,blockquote,ul,dl,dd{margin:0}
ul[role=list]{list-style:none;padding:0}
:focus-visible{outline:3px solid var(--p);outline-offset:3px}

.titolo{font-family:var(--f-titoli);font-weight:700;font-size:clamp(2.3rem, 4.8vw, 4.4rem);line-height:1;letter-spacing:-.02em}

.btn{display:inline-flex;align-items:center;justify-content:center;min-height:56px;padding:0 30px;border-radius:999px;font-family:var(--f-titoli);font-weight:600;font-size:18px;text-decoration:none;white-space:nowrap;border:0;box-shadow:0 5px 0 color-mix(in oklab, var(--t) 85%, transparent);transition:transform .45s var(--molla), box-shadow .3s}
.btn:hover{transform:translateY(-3px)}
.btn:active{transform:translateY(3px);box-shadow:0 2px 0 color-mix(in oklab, var(--t) 85%, transparent)}
.btn--blu{background:var(--p);color:var(--s)}
.btn--bianco{background:var(--carta);color:var(--t);box-shadow:inset 0 0 0 2.5px var(--t), 0 5px 0 var(--t)}
.btn--bianco:active{box-shadow:inset 0 0 0 2.5px var(--t), 0 2px 0 var(--t)}
.btn--giallo{background:var(--a);color:var(--t)}
.btn--largo{width:100%}

/* testata */
.testa{position:sticky;top:0;z-index:40;display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:74px;padding:0 var(--gut);background:var(--s);border-bottom:3px solid var(--t)}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;font-family:var(--f-titoli);font-weight:700;font-size:1.45rem;line-height:1.05;min-width:0}
.logo__zampa{flex:none;transition:transform .6s var(--molla)}
.logo:hover .logo__zampa{transform:rotate(-14deg) scale(1.08)}
.testa__nav{display:flex;gap:6px}
.testa__nav a{text-decoration:none;font-family:var(--f-titoli);font-weight:600;font-size:17px;padding:10px 16px;border-radius:999px;transition:background-color .3s, transform .4s var(--molla)}
.testa__nav a:hover{background:var(--a);transform:rotate(-3deg)}
.testa__azioni{display:flex;align-items:center;gap:10px}
.lingua{display:flex;border:2.5px solid var(--t);border-radius:999px;overflow:hidden}
.lingua button{border:0;background:none;min-width:42px;min-height:40px;font-weight:700;font-size:13px}
.lingua button.is-on{background:var(--t);color:var(--s)}
.testa__tel{font-family:var(--f-titoli);font-weight:600;text-decoration:none;padding:8px 12px}
.ciotola{position:relative;display:grid;place-items:center;width:52px;height:52px;border-radius:16px;border:0;background:var(--p);color:var(--s);box-shadow:0 4px 0 var(--t);transition:transform .45s var(--molla)}
.ciotola:hover{transform:rotate(-6deg)}
.ciotola__n{position:absolute;top:-8px;right:-8px;min-width:24px;height:24px;padding:0 6px;border-radius:999px;background:var(--a);color:var(--t);font-size:13px;font-weight:700;line-height:24px;text-align:center;border:2px solid var(--t)}
.menu-btn{display:none;width:52px;height:52px;border-radius:16px;border:0;background:var(--t);position:relative}
.menu-btn span{position:absolute;left:14px;right:14px;height:3px;border-radius:3px;background:var(--s);transition:transform .5s var(--molla), top .4s var(--liscio)}
.menu-btn span:first-child{top:20px}
.menu-btn span:last-child{top:29px}
.menu-btn[aria-expanded=true] span:first-child{top:24.5px;transform:rotate(45deg)}
.menu-btn[aria-expanded=true] span:last-child{top:24.5px;transform:rotate(-45deg)}
.menu-pannello{position:fixed;inset:0;z-index:35;display:flex;flex-direction:column;justify-content:center;gap:32px;padding:110px var(--gut) 40px;background:var(--s)}
.menu-pannello nav{display:grid;gap:10px}
.menu-pannello nav a{display:block;text-decoration:none;font-family:var(--f-titoli);font-weight:700;font-size:clamp(2.2rem, 10vw, 3.4rem);line-height:1.1;padding:14px 22px;border-radius:24px;color:var(--s);background:var(--p)}
.menu-pannello nav a:nth-child(2){background:var(--a);color:var(--t)}
.menu-pannello nav a:nth-child(3){background:var(--t)}
.menu-pannello nav a:nth-child(4){background:color-mix(in oklab, var(--p) 25%, var(--s));color:var(--t)}
.menu-pannello .btn{align-self:flex-start}

/* hero H10 */
.hero{position:relative;min-height:min(calc(100svh - 74px), 900px);display:grid;place-items:center;padding:clamp(40px, 6vw, 80px) var(--gut);overflow:hidden}
.hero__testo{position:relative;z-index:3;text-align:center;max-width:min(54vw, 800px)}
.hero__titolo{font-family:var(--f-titoli);font-weight:700;font-size:clamp(3.2rem, 6.6vw, 7rem);line-height:.95;letter-spacing:-.025em}
.hero__sotto{max-width:30em;margin:26px auto 0;font-size:clamp(1.05rem, 1.3vw, 1.2rem)}
.hero__cta{display:flex;justify-content:center;flex-wrap:wrap;gap:14px;margin-top:34px}
.foto{position:absolute;z-index:2;background:#fff;padding:10px;border-radius:28px;box-shadow:0 22px 50px color-mix(in oklab, var(--t) 22%, transparent)}
.foto img{border-radius:20px;width:100%;height:auto}
.foto{rotate:calc(var(--r, 0) * 1deg)}
.foto--1{top:7%;left:3.5%;width:clamp(150px, 16vw, 250px);--r:-8}
.foto--2{top:6%;right:4%;width:clamp(140px, 14.5vw, 230px);--r:7}
.foto--3{bottom:6%;left:9%;width:clamp(130px, 13.5vw, 210px);--r:6}
.foto--4{bottom:9%;right:9%;width:clamp(150px, 15.5vw, 240px);--r:-6}
.hero__scena{position:absolute;inset:0;z-index:1;pointer-events:none}
.forma{position:absolute}
.forma--nuvola{width:clamp(180px, 22vw, 330px);top:-4%;left:-3%}
.forma--stella{width:clamp(48px, 5vw, 76px);top:30%;right:22%}
.forma--zampa{width:clamp(44px, 4.4vw, 66px);bottom:34%;left:20%;rotate:-18deg}
.forma--onda{width:clamp(110px, 11vw, 170px);bottom:9%;left:43%}
.forma--palla{width:clamp(70px, 7vw, 110px);bottom:32%;right:4%}

/* nastro */
.nastro-cornice{overflow:hidden;padding:18px 0 10px}
.nastro{background:var(--t);color:var(--s);overflow:hidden;rotate:-1.2deg;margin:0 -16px;padding:16px 0}
.nastro__pista{display:flex;align-items:center;gap:26px;width:max-content;font-family:var(--f-titoli);font-weight:600;font-size:clamp(1.25rem, 2vw, 1.8rem);white-space:nowrap}
.nastro i{width:16px;height:16px;border-radius:50%;background:var(--a);flex:none}

/* reparti: schede che si impilano */
.reparti{max-width:var(--max);margin:0 auto;padding:clamp(100px, 11vw, 160px) var(--gut) 40px}
.reparti > .titolo{text-align:center;margin-bottom:56px}
.pila{display:grid;gap:40px}
.scheda{position:sticky;top:calc(96px + var(--i, 0) * 18px);display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(24px, 4vw, 60px);align-items:center;min-height:min(72vh, 600px);padding:clamp(28px, 4vw, 56px);border-radius:40px;border:3px solid var(--t);transform-origin:50% 0}
.scheda:nth-child(1){--i:0}
.scheda:nth-child(2){--i:1}
.scheda:nth-child(3){--i:2}
.scheda:nth-child(4){--i:3}
.scheda--cani{background:var(--p);color:var(--s)}
.scheda--gatti{background:var(--a);color:var(--t)}
.scheda--piccoli{background:var(--carta);color:var(--t)}
.scheda--acquari{background:var(--t);color:var(--s);border-color:var(--t)}
.scheda h3{font-family:var(--f-titoli);font-weight:700;font-size:clamp(3rem, 7vw, 6.4rem);line-height:.9;letter-spacing:-.03em}
.scheda p{margin-top:18px;max-width:30em;font-size:1.1rem}
.scheda ul{display:flex;flex-wrap:wrap;gap:8px;margin-top:24px}
.scheda li{padding:8px 16px;border-radius:999px;border:2px solid currentColor;font-weight:600;font-size:15px}
.scheda__foto{border-radius:28px;overflow:hidden;aspect-ratio:4/5;max-height:min(58vh, 480px);justify-self:end;rotate:3deg;border:3px solid currentColor}
.scheda:nth-child(even) .scheda__foto{rotate:-3deg}
.scheda__foto img{width:100%;height:100%;object-fit:cover}

/* prodotti */
.prodotti{max-width:var(--max);margin:0 auto;padding:clamp(80px, 9vw, 130px) var(--gut)}
.scaffale{display:grid;grid-template-columns:repeat(4, minmax(0, 1fr));gap:clamp(16px, 2vw, 28px);margin-top:48px}
.prodotto{display:flex;flex-direction:column;background:var(--carta);border:3px solid var(--t);border-radius:30px;padding:12px 12px 18px;transition:transform .5s var(--molla), box-shadow .3s;box-shadow:0 6px 0 var(--t)}
.prodotto:nth-child(odd):hover{transform:rotate(-2deg) translateY(-6px)}
.prodotto:nth-child(even):hover{transform:rotate(2deg) translateY(-6px)}
.prodotto__foto{border-radius:20px;overflow:hidden;aspect-ratio:1}
.prodotto__foto img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--liscio)}
.prodotto:hover .prodotto__foto img{transform:scale(1.07)}
.prodotto__per{align-self:flex-start;margin:14px 6px 0;padding:4px 12px;border-radius:999px;background:var(--a);font-size:14px;font-weight:700}
.prodotto h3{margin:10px 6px 0;font-family:var(--f-titoli);font-weight:600;font-size:1.3rem;line-height:1.15;flex:1}
.prodotto__prezzo{margin:10px 6px 0;font-family:var(--f-titoli);font-weight:700;font-size:1.7rem;color:var(--p)}
.prodotto__add{margin:12px 6px 0;min-height:50px;border:0;border-radius:999px;background:var(--p);color:var(--s);font-family:var(--f-titoli);font-weight:600;font-size:17px;box-shadow:0 4px 0 var(--t);transition:transform .4s var(--molla)}
.prodotto__add:hover{transform:scale(1.04)}
.prodotto__add:active{transform:translateY(3px)}
.prodotto__add.fatto{background:var(--t)}
.prodotto__chiedi{margin:12px 6px 0;min-height:50px;display:flex;align-items:center;justify-content:center;border-radius:999px;border:2.5px solid var(--t);font-family:var(--f-titoli);font-weight:600;text-decoration:none;text-align:center;padding:0 10px}
.prodotto__chiedi:hover{background:var(--a)}
.comodi{display:grid;grid-template-columns:repeat(4, minmax(0, 1fr));gap:12px;margin-top:36px}
.comodi:not(:has(> li:not([hidden]))){display:none}
.comodi li{padding:16px 18px;border-radius:20px;background:color-mix(in oklab, var(--p) 10%, var(--s));font-size:15px}
.comodi strong{display:block;font-family:var(--f-titoli);font-weight:600;font-size:1.1rem}
.ricorda{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-top:36px;padding:24px 28px;border-radius:28px;border:3px dashed var(--p)}
.ricorda p{max-width:40em;font-size:1.05rem}
.ricorda strong{font-family:var(--f-titoli);font-weight:600}

/* toelettatura */
.toelettatura{margin:0 var(--gut);padding:clamp(56px, 7vw, 100px) clamp(24px, 5vw, 80px);border-radius:48px;background:var(--a);color:var(--t);display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px, 5vw, 80px);align-items:center;max-width:var(--max);margin-left:auto;margin-right:auto}
.toelettatura__testa p{margin:20px 0 28px;max-width:28em;font-size:1.1rem}
.listino{display:grid;gap:10px}
.listino div{display:flex;align-items:baseline;gap:10px;padding:14px 20px;border-radius:18px;background:color-mix(in oklab, var(--s) 70%, transparent)}
.listino dt{font-weight:600}
.listino div::after{content:"";order:1;flex:1;border-bottom:2px dotted color-mix(in oklab, var(--t) 40%, transparent);transform:translateY(-4px)}
.listino dd{order:2;font-family:var(--f-titoli);font-weight:700;font-size:1.25rem;white-space:nowrap}

/* recensioni */
.amici{max-width:var(--max);margin:0 auto;padding:clamp(100px, 11vw, 160px) var(--gut)}
.amici__voto{margin-top:14px;font-weight:600}
.amici__voto span{color:var(--p);letter-spacing:.08em}
.amici__righe{display:grid;grid-template-columns:repeat(3, minmax(0, 1fr));gap:clamp(16px, 2.4vw, 32px);margin-top:44px}
.amici blockquote{background:var(--carta);border:3px solid var(--t);border-radius:30px;padding:28px}
.amici blockquote:nth-child(2){rotate:1.5deg;background:color-mix(in oklab, var(--p) 12%, var(--s))}
.amici blockquote:nth-child(3){rotate:-1deg}
.amici blockquote p{font-family:var(--f-titoli);font-weight:500;font-size:1.35rem;line-height:1.3}
.amici footer{margin-top:18px;font-weight:700}
.amici footer span{display:block;font-weight:400;font-size:15px;opacity:.8}

/* club */
.club{max-width:var(--max);margin:0 auto;display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(28px, 5vw, 70px);align-items:center;padding:clamp(56px, 7vw, 90px) clamp(24px, 5vw, 70px);border-radius:48px;background:var(--p);color:var(--s)}
.club__testo p{margin-top:18px;max-width:30em;font-size:1.1rem}
.club__form{display:grid;gap:14px}
.campo label{display:block;font-weight:600;margin-bottom:6px}
.campo input{width:100%;min-height:54px;border:3px solid var(--t);border-radius:18px;padding:0 18px;background:var(--carta);color:var(--t);font:inherit}
.campo input::placeholder{color:color-mix(in oklab, var(--t) 58%, var(--carta))}
.club .btn{justify-self:start}

/* dove */
.dove{max-width:var(--max);margin:0 auto;padding:clamp(100px, 11vw, 160px) var(--gut);display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px, 5vw, 80px);align-items:center}
.dove__mappa{border-radius:40px;overflow:hidden;border:3px solid var(--t);aspect-ratio:13/10;rotate:-1.5deg}
.dove__mappa svg{width:100%;height:100%;display:block}
.dove__testo > p{margin-top:16px;max-width:30em}
.orari{display:grid;gap:8px;margin-top:24px;max-width:440px}
.orari div{display:flex;justify-content:space-between;gap:16px;padding:12px 18px;border-radius:16px;background:var(--carta);border:2px solid var(--t)}
.orari dt{font-weight:600}
.dove__google{font-size:15px;opacity:.8}
.dove__cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:26px}

/* piede */
.piede{background:var(--t);color:var(--s);padding:clamp(70px, 8vw, 110px) var(--gut) 30px;margin-top:40px}
.piede__nome{font-family:var(--f-titoli);font-weight:700;font-size:clamp(3rem, 12vw, 11rem);line-height:.9;white-space:nowrap;overflow:hidden;text-align:center;padding-bottom:.06em}
.piede__righe{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px 30px;max-width:var(--max);margin:40px auto 0;padding-top:22px;border-top:2px solid color-mix(in oklab, var(--s) 22%, var(--t));font-size:15px}

/* carrello */
.cassetto{position:fixed;inset:0;z-index:60}
.cassetto__velo{position:absolute;inset:0;background:color-mix(in oklab, var(--t) 45%, transparent)}
.cassetto__pannello{position:absolute;top:14px;right:14px;bottom:14px;width:min(420px, calc(100% - 28px));background:var(--s);border:3px solid var(--t);border-radius:32px;display:flex;flex-direction:column;padding:24px}
.cassetto__testa{display:flex;justify-content:space-between;align-items:center}
.cassetto__titolo{font-family:var(--f-titoli);font-weight:700;font-size:2rem}
.cassetto__x{width:48px;height:48px;border-radius:14px;border:2.5px solid var(--t);background:var(--carta);display:grid;place-items:center}
.cassetto__lista{padding:16px 0;display:grid;gap:8px}
.cassetto__lista li{display:flex;justify-content:space-between;gap:12px;padding:12px 16px;border-radius:16px;background:var(--carta);border:2px solid var(--t)}
.cassetto__vuoto{padding:14px 0}
.cassetto__piede{margin-top:auto;display:grid;gap:14px}
.cassetto__totale{display:flex;justify-content:space-between;font-family:var(--f-titoli);font-weight:700;font-size:1.4rem}

.brindisi{position:fixed;left:50%;bottom:26px;z-index:55;transform:translate(-50%, calc(100% + 60px));visibility:hidden;background:var(--t);color:var(--s);padding:14px 24px;border-radius:999px;font-family:var(--f-titoli);font-weight:600;transition:transform .6s var(--molla), visibility .6s;max-width:calc(100% - 40px);text-align:center}
.brindisi.su{transform:translate(-50%, 0);visibility:visible}

.wa{position:fixed;right:22px;bottom:22px;z-index:50;width:62px;height:62px;border-radius:20px;background:var(--a);color:var(--t);border:3px solid var(--t);display:grid;place-items:center;box-shadow:0 5px 0 var(--t);transition:transform .45s var(--molla)}
.wa:hover{transform:rotate(-8deg) scale(1.06)}

.js:not(.pronto) .hero__titolo, .js:not(.pronto) .hero__sotto, .js:not(.pronto) .hero__cta, .js:not(.pronto) .foto, .js:not(.pronto) .forma{visibility:hidden}

/* responsive */
@media (min-width:1700px){ body{font-size:18px} }
@media (max-width:1180px){
  .testa__nav, .testa__tel{display:none}
  .menu-btn{display:block}
  .scaffale{grid-template-columns:repeat(2, minmax(0, 1fr))}
  .comodi{grid-template-columns:repeat(2, minmax(0, 1fr))}
}
@media (max-width:899px){
  .testa{min-height:66px;border-bottom-width:2.5px}
  .logo{font-size:1.2rem}
  .logo__zampa{width:32px;height:32px}
  .lingua{display:none}
  .ciotola, .menu-btn{width:48px;height:48px}
  .menu-btn span{left:13px;right:13px}
  .menu-btn span:first-child{top:18px}
  .menu-btn span:last-child{top:27px}
  .menu-btn[aria-expanded=true] span:first-child, .menu-btn[aria-expanded=true] span:last-child{top:22.5px}
  .hero{display:grid;grid-template-columns:repeat(3, minmax(0, 1fr));align-items:start;min-height:0;padding-top:34px;padding-bottom:56px;gap:34px 0}
  .hero__testo{grid-column:1 / -1;grid-row:1;max-width:none}
  .hero__scena{inset:auto 0 0 0;height:62%}
  .forma--nuvola{width:230px;top:auto;bottom:-30px;left:-60px}
  .forma--stella{width:40px;top:auto;bottom:4%;right:8%}
  .forma--zampa{width:34px;bottom:2%;left:44%}
  .forma--onda, .forma--palla{display:none}
  .foto{position:relative;inset:auto;width:auto;padding:6px;border-radius:20px;grid-row:2}
  .foto img{border-radius:15px;aspect-ratio:4/5;object-fit:cover}
  .foto--1{grid-column:1;margin-right:-14px;margin-top:22px;--r:-9}
  .foto--2{grid-column:2;z-index:3;margin-top:-4px;--r:4}
  .foto--3{grid-column:3;margin-left:-14px;margin-top:30px;--r:-5}
  .foto--4{display:none}
  .scheda{grid-template-columns:1fr;top:calc(80px + var(--i, 0) * 12px);min-height:0;border-radius:30px;gap:20px}
  .scheda__foto{justify-self:stretch;aspect-ratio:16/10;max-height:none;rotate:0deg}
  .scheda:nth-child(even) .scheda__foto{rotate:0deg}
  .toelettatura{grid-template-columns:1fr;border-radius:32px;margin-left:var(--gut);margin-right:var(--gut)}
  .amici__righe{grid-template-columns:1fr}
  .club{grid-template-columns:1fr;border-radius:32px;margin-left:var(--gut);margin-right:var(--gut)}
  .dove{grid-template-columns:1fr}
}
@media (max-width:560px){
  body{font-size:16px}
  .hero__titolo{font-size:clamp(2.8rem, 13.5vw, 3.8rem)}
  .hero__cta .btn{flex:1 1 100%}
  .scaffale{gap:14px}
  .prodotto{border-radius:24px;padding:8px 8px 14px}
  .prodotto h3{font-size:1.05rem}
  .prodotto__per{font-size:12px}
  .prodotto__prezzo{font-size:1.35rem}
  .prodotto__add, .prodotto__chiedi{font-size:15px;min-height:46px}
  .comodi{grid-template-columns:1fr}
  .scheda p{font-size:1rem}
  .listino div{padding:12px 14px}
  .dove__cta .btn{flex:1}
  .piede__righe{flex-direction:column}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.01ms !important;animation:none !important}
}

/* tasto WhatsApp: compare dopo il primo scorrimento (non copre niente nella prima schermata) */
.js .wa{opacity:0;visibility:hidden;translate:0 18px;transition:opacity .4s ease, visibility .4s, translate .5s ease}
.js .wa.vista{opacity:1;visibility:visible;translate:0 0}

/* apertura: un cane attraversa lo schermo, poi le strisce colorate cadono */
.apertura{background:transparent}
.apertura__strisce{position:absolute;inset:0;display:grid;grid-template-columns:repeat(4, 1fr)}
.apertura__strisce i{display:block;background:var(--p)}
.apertura__strisce i:nth-child(2){background:var(--t)}
.apertura__strisce i:nth-child(3){background:var(--p)}
.apertura__strisce i:nth-child(4){background:var(--t)}
.apertura__passi{position:absolute;inset:0}
.passo{position:absolute;width:clamp(34px, 5vw, 64px);height:auto;fill:var(--a)}
.passo svg{display:block;width:100%;height:auto;fill:var(--a)}
.passo--1{left:6%;bottom:12%;rotate:32deg}
.passo--2{left:20%;bottom:26%;rotate:52deg}
.passo--3{left:32%;bottom:18%;rotate:38deg}
.passo--4{left:58%;top:22%;rotate:48deg}
.passo--5{left:72%;top:32%;rotate:36deg}
.passo--6{left:84%;top:14%;rotate:50deg}
.apertura__nome{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:0 24px;text-align:center;font-family:var(--f-titoli);font-weight:700;font-size:clamp(2.4rem, 8vw, 6.4rem);line-height:1;color:var(--s)}
@media (max-width:560px){
  .passo--1{left:8%;bottom:10%}.passo--2{left:36%;bottom:20%}.passo--3{left:62%;bottom:12%}
  .passo--4{left:10%;top:12%}.passo--5{left:40%;top:22%}.passo--6{left:70%;top:10%}
}