/* ═══════════════════════════════════════════════════════════
   INGROSSO FIOCCHI NASCITA — Mirca Martini
   Concept «IL CAMPIONARIO» · direzione grafica dallo Spunto
   Bianco e rosa tenue · corsivo a mano per gli accenti ·
   maiuscolo sottile e spaziato per i titoli ·
   le fotografie montate come polaroid, mai a piena pagina.
   Font in locale. Zero CDN, zero cookie.
   ═══════════════════════════════════════════════════════════ */

/* 🔴 Josefin Sans e Parisienne sono stati tolti, e per un motivo preciso:
   in Josefin la A maiuscola non ha la barra (è un triangolo), e in
   Parisienne il punto della i è una virgola grossa e inclinata che
   sembra un apostrofo di troppo. Outfit e Allura tengono lo stesso
   carattere del disegno ma hanno lettere costruite bene. */
@font-face{font-family:"Parisienne";src:url("../font/parisienne-400.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Outfit";src:url("../font/outfit-200.woff2") format("woff2");font-weight:200;font-display:swap}
@font-face{font-family:"Outfit";src:url("../font/outfit-300.woff2") format("woff2");font-weight:300;font-display:swap}
@font-face{font-family:"Outfit";src:url("../font/outfit-400.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Outfit";src:url("../font/outfit-500.woff2") format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Schibsted";src:url("../font/schibsted-400.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Schibsted";src:url("../font/schibsted-600.woff2") format("woff2");font-weight:600;font-display:swap}

:root{
  --bianco:#FFFFFF;
  --carta:#FFFFFF;
  --carta-2:#F4F6F8;          /* grigio freddo, non più rosato */
  --rosa-velo:#FDF1F5;
  --azzurro-velo:#EEF4F9;
  --rosa-morbido:#F0C3D2;
  --rosa-medio:#E28FAE;
  --rosa:#CB5A80;             /* rosa leggibile sul bianco */
  --azzurro-morbido:#BBD3E6;
  --azzurro-medio:#7BA6C9;
  --azzurro:#3F72A0;          /* azzurro leggibile sul bianco */
  --inchiostro:#33404E;       /* ardesia fredda: è qui che il sito smette di essere solo rosa */
  --fumo:#6E7C8A;
  --bordo:#E3E8ED;
  --ombra:24 32 42;

  --mano:"Parisienne",cursive;
  --titolo:"Outfit",-apple-system,"Segoe UI",sans-serif;
  --testo:"Schibsted",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;

  --sp:clamp(1.2rem,4.5vw,4rem);
  --largo:1180px;
  --ritmo:clamp(2.8rem,6.5vh,5rem);
}

*,*::before,*::after{box-sizing:border-box}
/* 🔴 un display esplicito batte l'attributo hidden: senza questa riga
   la lente resta stesa sulla pagina e intercetta tutti i clic. */
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;scroll-padding-top:6.5rem}
body{
  margin:0;background:var(--bianco);color:var(--inchiostro);
  font-family:var(--testo);font-size:clamp(1rem,.4vw + .94rem,1.08rem);
  line-height:1.72;overflow-x:hidden;-webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
p{margin:0 0 1.05rem;max-width:54ch}
figure{margin:0}
button{font:inherit;color:inherit}

.visuale-nascosta{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.salta{position:absolute;left:-999px;top:0;z-index:100;background:var(--rosa);color:#fff;padding:.7rem 1.1rem}
.salta:focus{left:0}
:focus-visible{outline:2px solid var(--rosa);outline-offset:3px}

/* ── TIPOGRAFIA ─────────────────────────────────────────
   Tre voci: il corsivo a mano che saluta, il maiuscolo
   sottile che annuncia, il testo che spiega.              */
.display{
  font-family:var(--titolo);font-weight:200;
  text-transform:uppercase;letter-spacing:.14em;
  line-height:1.3;margin:0;color:var(--inchiostro);
}
.display--madre{font-size:clamp(1.55rem,3.4vw,2.9rem);letter-spacing:.16em}
.display--grande{font-size:clamp(1.25rem,2.2vw,1.9rem)}

/* il corsivo a mano: sostituisce l'occhiello e firma ogni sezione */
.occhio{
  font-family:var(--mano);font-weight:400;text-transform:none;
  font-size:clamp(1.9rem,3.4vw,2.9rem);line-height:1;letter-spacing:0;
  color:var(--rosa-medio);margin:0 0 .35rem;
}
.occhio--chiaro{color:var(--azzurro)}
.due--specchio .occhio{color:var(--azzurro)}
.due--specchio .filetto{background:var(--azzurro-morbido)}

.guida{font-size:clamp(1.02rem,.4vw + .96rem,1.14rem);line-height:1.7;color:var(--inchiostro);max-width:46ch}
p{color:var(--fumo)}
.guida{color:var(--inchiostro)}

/* filetto rosa: il segno che tiene insieme tutto il sito */
.filetto{display:block;width:74px;height:1px;background:var(--rosa-morbido);margin:1rem 0 1.4rem}
.centrato .filetto{margin-inline:auto}

/* ── BOTTONI ────────────────────────────────────────────  */
.bottone{
  display:inline-block;background:var(--rosa-medio);color:#fff;text-decoration:none;
  font-family:var(--titolo);font-weight:500;font-size:.76rem;
  text-transform:uppercase;letter-spacing:.18em;
  padding:.92rem 1.9rem;border:0;border-radius:2px;cursor:pointer;
  position:relative;overflow:hidden;isolation:isolate;
  transition:transform .35s cubic-bezier(.2,.8,.24,1),box-shadow .35s ease;
  box-shadow:0 8px 22px -12px rgb(var(--ombra) / .5);
}
.bottone::before{
  content:"";position:absolute;inset:0;z-index:-1;background:var(--rosa);
  transform:scaleX(0);transform-origin:0 50%;
  transition:transform .55s cubic-bezier(.2,.8,.24,1);
}
.bottone:hover::before,.bottone:focus-visible::before{transform:scaleX(1)}
.bottone:hover{transform:translateY(-3px);box-shadow:0 16px 30px -14px rgb(var(--ombra) / .55)}
.bottone--chiaro{background:#fff;color:var(--rosa)}
.bottone--chiaro::before{background:var(--rosa-velo)}
.bottone--chiaro:hover{color:var(--azzurro)}

.collegamento{
  font-family:var(--titolo);font-size:.76rem;font-weight:500;
  text-transform:uppercase;letter-spacing:.16em;text-decoration:none;
  position:relative;padding-bottom:4px;
}
.collegamento::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:var(--rosa-medio);transform:scaleX(1);transform-origin:0 50%;
  transition:transform .45s cubic-bezier(.2,.8,.24,1);
}
.collegamento:hover{color:var(--rosa)}
.collegamento:hover::after{transform:scaleX(0)}

/* ── TESTATA ────────────────────────────────────────────  */
.avanzamento{position:fixed;inset:0 0 auto 0;height:2px;z-index:70;pointer-events:none}
.avanzamento span{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--rosa-morbido),var(--rosa-medio) 60%,#A9C9E0)}

.testata{
  position:sticky;top:0;z-index:50;
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:1rem var(--sp);
  background:rgba(255,255,255,.94);border-bottom:1px solid var(--bordo);
}
.marchio{
  font-family:var(--titolo);font-weight:300;
  font-size:clamp(.82rem,2.2vw,.98rem);text-transform:uppercase;letter-spacing:.2em;
  text-decoration:none;
}

/* ══════════ LA PISTA E IL PALCO ══════════
   La pista è alta più del doppio dello schermo. Dentro, il
   palco resta appiccicato in alto: finché la pista scorre la
   schermata sembra ferma e il fiocco gira. Finito il giro la
   pagina riparte da sola. Nessuno scroll rubato: è sticky,
   quindi rotellina, trackpad e tastiera restano quelli veri. */
.pista{
  position:relative;height:196svh;
  /* la copertina ha un fondo suo: dal blush al cielo, che è poi la
     storia del prodotto. Diverso dal resto, ma degli stessi colori. */
  background:linear-gradient(168deg,#FCEBF1 0%,#F8EEF4 32%,#F1F1F7 58%,#E9F0F8 100%);
}
/* 🔴 QUI C'ERA UNA TENDINA, ed è stata tolta.
   Era un velo bianco ancorato al fondo della pista che serviva a non far
   vedere lo stacco fra la hero e il bianco della pagina. Ma il velo è un
   figlio della pista dipinto DOPO il palco: scorrendo saliva e da telefono
   arrivava a coprire il fondo del fiocco.
   Il bianco adesso è dentro il fondo della pista stessa: stesso risultato,
   niente strato sopra al fiocco. */
.palco{
  position:sticky;top:0;height:100svh;min-height:500px;overflow:hidden;
  display:grid;align-content:center;
  padding:clamp(3.6rem,7vh,4.4rem) var(--sp) clamp(1.2rem,3vh,2rem);
  --p:0;   /* avanzamento lungo la pista */
  --g:0;   /* gradi del fiocco: 0 rosa · 180 azzurro */
}
.palco__griglia{
  max-width:1040px;margin:0 auto;width:100%;
  display:grid;gap:clamp(.6rem,2vw,1.6rem);
  grid-template-columns:minmax(0,1fr);align-items:center;
}
@media(min-width:900px){
  .palco__griglia{grid-template-columns:minmax(0,1fr) minmax(0,.8fr)}
  .copertina__testo{grid-column:1;grid-row:1}
  .perno{grid-column:2;grid-row:1}
}

.fiocco-fondo{
  position:absolute;z-index:0;pointer-events:none;
  left:50%;top:48%;width:min(118vw,1080px);height:auto;
  color:var(--rosa-morbido);opacity:.4;
  transform:translate3d(-50%,-50%,0) scale(calc(.9 + var(--p) * .34)) rotate(calc(var(--p) * -4deg));
  will-change:transform;
}
.copertina__testo{position:relative;z-index:2}
.copertina__testo .occhio{font-size:clamp(2.4rem,5vw,4rem);margin-bottom:.1rem}
.copertina__testo .guida{margin:1.3rem 0 0}
.copertina__azione{margin-top:clamp(1.2rem,3vh,2rem)}

/* ══════════ IL FIOCCO CHE GIRA — sequenza su tela ══════════
   Novantasei fotogrammi renderizzati in 3D, disegnati su canvas
   e legati allo scorrimento. Non è un <video>: il seek dei video
   scatta, i fotogrammi no.                                      */
.giro{
  position:relative;z-index:2;justify-self:center;align-self:center;
  width:min(62vw,340px);aspect-ratio:440/497;
}
.giro__tela{
  width:100%;height:100%;display:block;
  filter:drop-shadow(0 26px 30px rgb(var(--ombra) / .18));
}
.giro__carico{
  position:absolute;left:50%;bottom:-1.6rem;transform:translateX(-50%);
  width:64px;height:2px;background:var(--bordo);overflow:hidden;border-radius:2px;
  opacity:var(--carico-op,1);transition:opacity .5s ease;
}
.giro__carico::after{
  content:"";display:block;height:100%;width:calc(var(--carico,0) * 100%);
  background:var(--rosa-medio);transition:width .25s ease;
}
@media(max-width:900px){.giro{width:min(56vw,260px);margin:0 auto}}

.spia{
  position:absolute;left:50%;bottom:clamp(1rem,3vh,2rem);
  transform:translateX(-50%);margin:0;
  font-family:var(--titolo);font-size:.66rem;letter-spacing:.28em;text-transform:uppercase;
  color:var(--fumo);opacity:calc(1 - var(--p) * 2.4);
}
.spia span{display:block;animation:respira 2.4s ease-in-out infinite}
@keyframes respira{0%,100%{transform:translateY(0);opacity:.5}50%{transform:translateY(5px);opacity:1}}

@media(max-width:900px){
  .pista{height:205svh}
  .perno{width:min(58vw,268px);margin:0 auto}
  .palco__griglia{gap:clamp(1rem,3vh,1.8rem)}
}
@media(prefers-reduced-motion:reduce){
  .pista{height:auto}
  .palco{position:static;height:auto}
  .perno__scena{transform:none}
  .spia{display:none}
}


/* ── FASCE ──────────────────────────────────────────────
   Si alternano bianco e rosa chiarissimo; le fasce «scure»
   dello scheletro diventano bande rosa, non più nere.      */
.fascia{padding:var(--ritmo) var(--sp);position:relative}
.fascia--riga{background:var(--carta-2)}
.fascia--scura{
  background:
    radial-gradient(90% 120% at 18% 12%,rgba(255,255,255,.9) 0%,rgba(255,255,255,0) 55%),
    linear-gradient(122deg,var(--azzurro-morbido) 0%,var(--rosa-velo) 58%,#fff 100%);
  color:var(--inchiostro);
}
.fascia--scura .display{color:var(--inchiostro)}
.fascia--scura .guida{color:var(--inchiostro)}
.fascia--scura p{color:var(--fumo)}
.dentro{max-width:var(--largo);margin:0 auto}

.due{display:grid;gap:clamp(1rem,2.6vw,3.2rem);grid-template-columns:minmax(0,1fr)}
.due__lato,.due__corpo{min-width:0}
@media(min-width:820px){
  .due{grid-template-columns:minmax(0,.6fr) minmax(0,1fr);align-items:start}
  /* una sezione a sinistra, la successiva a destra */
  .due--specchio{grid-template-columns:minmax(0,1fr) minmax(0,.6fr)}
  .due--specchio>.due__lato{order:2}
  .due--specchio>.due__corpo,.due--specchio>.passi,.due--specchio>.faq{order:1}
  .due--specchio .due__lato{text-align:right}
  .due--specchio .filetto{margin-left:auto}
}
.due__corpo>*:last-child{margin-bottom:0}

.fascia--scura .coda{
  margin-top:clamp(1.1rem,3vh,1.8rem);padding-top:1.1rem;
  border-top:1px solid rgba(206,92,130,.28);
  font-size:1.04rem;color:var(--azzurro);max-width:40ch;
}

/* ── MOTIVI DISEGNATI DI FONDO ──────────────────────────  */
.con-sfondo{position:relative;overflow:hidden}
.sfondo{position:absolute;pointer-events:none;z-index:0;color:var(--rosa-morbido)}
.sfondo svg{width:100%;height:100%}
.con-sfondo>*:not(.sfondo){position:relative;z-index:1}

/* ── IL FILTRO ──────────────────────────────────────────  */
.filtro{
  position:relative;display:flex;flex-wrap:wrap;gap:.45rem;
  margin:clamp(1.6rem,4vh,2.4rem) 0 0;
}
.filtro__cursore{
  position:absolute;left:0;top:0;width:0;height:0;z-index:0;
  background:var(--rosa-medio);border-radius:2px;
  transition:transform .45s cubic-bezier(.22,.8,.28,1),width .45s cubic-bezier(.22,.8,.28,1),height .3s ease;
  will-change:transform,width;
}
.filtro__voce{
  position:relative;z-index:1;background:transparent;cursor:pointer;
  border:1px solid var(--bordo);border-radius:2px;
  font-family:var(--titolo);font-size:.74rem;font-weight:500;
  text-transform:uppercase;letter-spacing:.16em;
  padding:.62rem 1.1rem;color:var(--fumo);
  transition:color .3s ease,border-color .3s ease;
}
.filtro__voce:hover{color:var(--rosa);border-color:var(--rosa-morbido)}
.filtro__voce[aria-pressed="true"]{color:#fff;border-color:var(--rosa-medio)}
.filtro__n{margin-left:.5rem;font-size:.68rem;opacity:.6;font-variant-numeric:tabular-nums}

/* ── LA GRIGLIA — polaroid con la fascetta sotto ────────  */
.griglia{
  list-style:none;margin:clamp(1.5rem,4vh,2.4rem) 0 0;padding:0;
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(.8rem,2vw,1.6rem);
}
@media(min-width:820px){.griglia{grid-template-columns:repeat(3,minmax(0,1fr))}}
.griglia>li{margin:0;transition:opacity .34s ease,transform .34s cubic-bezier(.2,.7,.3,1)}
.griglia>li.uscendo{opacity:0;transform:scale(.94)}
.griglia>li.entrando{opacity:0;transform:translate3d(0,14px,0)}

.lente{
  display:block;width:100%;padding:9px 9px 0;border:0;cursor:pointer;
  background:#fff;border-radius:2px;text-align:center;
  box-shadow:0 12px 30px -16px rgb(var(--ombra) / .38);
  transition:transform .5s cubic-bezier(.2,.8,.24,1),box-shadow .5s ease;
}
.lente:hover{transform:translateY(-6px);box-shadow:0 24px 44px -20px rgb(var(--ombra) / .46)}
.lente>img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:50% 30%;border-radius:1px}
.lente__voce{
  display:block;padding:.85rem .4rem .95rem;
  font-family:var(--titolo);font-size:.68rem;font-weight:400;
  text-transform:uppercase;letter-spacing:.15em;color:var(--fumo);
  transition:color .35s ease;
}
.lente:hover .lente__voce{color:var(--rosa)}

/* il tasto «vedi tutte» */
.altre{margin:clamp(1.6rem,4vh,2.4rem) 0 0;text-align:center}
.altre__voce{
  background:none;border:0;cursor:pointer;
  font-family:var(--titolo);font-size:.78rem;font-weight:400;
  text-transform:uppercase;letter-spacing:.2em;color:var(--rosa);
  padding:.7rem 0;position:relative;
}
.altre__voce::after{
  content:"";position:absolute;left:0;right:0;bottom:.35rem;height:1px;
  background:var(--rosa-morbido);transform:scaleX(1);transform-origin:50% 50%;
  transition:transform .45s cubic-bezier(.2,.8,.24,1);
}
.altre__voce:hover::after{transform:scaleX(.4)}
.altre__freccia{display:inline-block;margin-left:.5rem;transition:transform .4s ease}
.altre__voce[aria-expanded="true"] .altre__freccia{transform:rotate(180deg)}

/* ── BANDA DEI COLORI ───────────────────────────────────  */
.banda{
  overflow:hidden;margin:clamp(1.4rem,3.5vh,2.2rem) 0 0;
  padding:.9rem 0;border-block:1px solid var(--bordo);
}
.banda__pista{display:flex;width:max-content;animation:scorri 48s linear infinite}
.banda__gruppo{
  display:flex;align-items:center;gap:.5rem;white-space:nowrap;
  font-family:var(--mano);font-size:1.5rem;color:var(--rosa-medio);
}
.banda__gruppo i{
  display:inline-block;width:11px;height:11px;border-radius:99px;
  background:var(--c);border:1px solid rgba(0,0,0,.08);margin-left:1.8rem;
  transition:transform .5s ease;
}
.banda:hover .banda__gruppo i{transform:scale(1.35)}
@keyframes scorri{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}

/* ── LA VETRINA ─────────────────────────────────────────  */
.fascia--vetrina{padding-bottom:clamp(1.8rem,4.5vh,3rem)}
.vetrina{overflow:hidden;margin:clamp(1.8rem,4.5vh,2.8rem) 0 1rem;perspective:1400px}
.vetrina__pista{display:flex;gap:1.1rem;width:max-content;animation:sfila 42s linear infinite;transform-style:preserve-3d}
.lente--vetrina{
  flex:0 0 auto;width:clamp(160px,20vw,240px);padding:8px;
  transform:rotateY(-7deg);
}
.lente--vetrina>img{aspect-ratio:1}
.lente--vetrina:hover{transform:rotateY(0deg) translateZ(26px) translateY(-6px);z-index:2}
@keyframes sfila{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
.vetrina__nota{
  max-width:var(--largo);margin:0 auto;padding:0 var(--sp);
  font-size:.88rem;color:var(--fumo);
}

/* ── I PASSI ────────────────────────────────────────────  */
.passi{list-style:none;counter-reset:p;margin:0;padding:0}
.passi li{
  counter-increment:p;display:grid;gap:.15rem 1.4rem;
  grid-template-columns:auto 1fr;align-items:baseline;
  padding:1.3rem .6rem;border-bottom:1px solid var(--bordo);
  transition:background-color .4s ease,padding-left .4s cubic-bezier(.2,.8,.24,1);
}
.passi li:first-child{border-top:1px solid var(--bordo)}
.passi li:hover{background:var(--rosa-velo);padding-left:1.2rem}
.passi li::before{
  content:"0" counter(p);font-family:var(--mano);
  font-size:1.9rem;color:var(--rosa-medio);line-height:1;
}
.passi b{
  font-family:var(--titolo);font-weight:300;font-size:.95rem;
  text-transform:uppercase;letter-spacing:.14em;display:block;color:var(--inchiostro);
}
.passi span{grid-column:2;color:var(--fumo);font-size:.95rem}

/* ── FAQ ────────────────────────────────────────────────  */
.faq details{border-bottom:1px solid var(--bordo)}
.faq details:first-of-type{border-top:1px solid var(--bordo)}
.faq summary{
  cursor:pointer;list-style:none;padding:1.15rem 2.4rem 1.15rem 0;position:relative;
  font-family:var(--titolo);font-size:.92rem;font-weight:500;
  text-transform:uppercase;letter-spacing:.1em;color:var(--inchiostro);
  transition:color .3s ease,padding-left .35s cubic-bezier(.2,.8,.24,1);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--rosa);padding-left:.5rem}
.faq details[open] summary{color:var(--rosa)}
.faq summary::after{content:"";position:absolute;right:.4rem;top:1.55rem;width:11px;height:1px;background:var(--rosa-medio)}
.faq summary::before{content:"";position:absolute;right:5.15px;top:1.05rem;width:1px;height:11px;background:var(--rosa-medio);transition:transform .3s ease}
.faq details[open] summary::before{transform:scaleY(0)}
.faq p{padding:0 0 1.2rem;color:var(--fumo);max-width:60ch}

/* ── CHIUSURA ───────────────────────────────────────────  */
.chiusura{
  padding:calc(var(--ritmo) * 1.15) var(--sp);text-align:center;
  background:
    radial-gradient(80% 110% at 50% 0%,rgba(255,255,255,.9) 0%,rgba(255,255,255,0) 60%),
    linear-gradient(160deg,var(--rosa-morbido) 0%,var(--rosa-velo) 70%,#fff 100%);
}
.chiusura .occhio{font-size:clamp(2.2rem,4.4vw,3.4rem)}
.chiusura .display{color:var(--inchiostro);margin-bottom:1.2rem}
.chiusura__nome{
  font-family:var(--titolo);font-size:.82rem;text-transform:uppercase;letter-spacing:.18em;
  color:var(--azzurro);margin:0 auto 1.9rem;
}
.chiusura p{margin-inline:auto}

/* ── PIEDE ──────────────────────────────────────────────  */
.piede{background:#fff;border-top:1px solid var(--bordo);padding:2.2rem var(--sp) 2.4rem;font-size:.82rem;color:var(--fumo)}
.piede__riga{display:flex;flex-wrap:wrap;gap:.4rem 2rem;justify-content:center;text-align:center}
.piede p{max-width:none;margin:0}
.piede a{color:var(--rosa)}
.piede__firma{text-align:center;margin:1.2rem 0 0;padding-top:1.2rem;border-top:1px solid var(--bordo)}

/* ── 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:.78rem;background:#fff;border-top:1px solid var(--bordo);
}
.cookie p{margin:0;max-width:none}
.cookie a{text-decoration:underline;text-underline-offset:2px;color:var(--rosa)}
.cookie button{background:none;border:0;font-size:1.2rem;line-height:1;cursor:pointer;opacity:.55}
@media(max-width:480px){.cookie{font-size:.72rem;padding:.5rem .75rem}}

/* ── LA LENTE (visore) ──────────────────────────────────  */
.visore{
  position:fixed;inset:0;z-index:90;
  display:flex;align-items:center;justify-content:center;gap:1rem;
  padding:clamp(1rem,4vw,3rem);
  background:rgba(74,59,65,.86);opacity:0;transition:opacity .3s ease;
}
.visore.aperto{opacity:1}
.visore__scena{max-width:min(92vw,880px);text-align:center}
.visore__scena img{
  max-height:76svh;width:auto;margin:0 auto;
  border:10px solid #fff;border-radius:2px;
  box-shadow:0 30px 70px -30px rgba(0,0,0,.6);
  transform:scale(.965);opacity:0;
  transition:transform .5s cubic-bezier(.2,.8,.3,1),opacity .4s ease;
}
.visore.aperto .visore__scena img{transform:none;opacity:1}
.visore__scena figcaption{
  display:flex;align-items:baseline;gap:1rem;justify-content:center;flex-wrap:wrap;
  margin-top:1rem;color:#fff;
  font-family:var(--titolo);font-size:.78rem;text-transform:uppercase;letter-spacing:.14em;
}
.visore__conto{font-variant-numeric:tabular-nums;font-weight:400;color:rgba(255,255,255,.5);font-size:.72rem}
.visore__chiudi,.visore__passo{
  background:rgba(255,255,255,.14);border:0;color:#fff;cursor:pointer;
  width:46px;height:46px;border-radius:99px;font-size:1.5rem;line-height:1;
  display:grid;place-items:center;transition:background-color .3s ease,transform .3s ease;
}
.visore__chiudi:hover,.visore__passo:hover{background:rgba(255,255,255,.28);transform:scale(1.08)}
.visore__chiudi{position:absolute;top:clamp(.8rem,3vw,1.6rem);right:clamp(.8rem,3vw,1.6rem)}

/* ── RIVELI ─────────────────────────────────────────────  */
[data-su]{opacity:0;transform:translate3d(0,14px,0);transition:opacity .34s ease,transform .34s cubic-bezier(.2,.7,.3,1)}
[data-su].vista{opacity:1;transform:none}
[data-righe] span{display:block;overflow:hidden}
[data-righe] span>i{display:block;font-style:normal;transform:translate3d(0,105%,0)}

.tendina{clip-path:inset(0 0 102% 0);transform:translate3d(0,.3em,0);
  transition:clip-path .46s cubic-bezier(.2,.8,.24,1),transform .46s cubic-bezier(.2,.8,.24,1)}
.tendina.scoperta{clip-path:inset(0 0 -18% 0);transform:none}

.lente>img{clip-path:inset(0 0 100% 0)}
.svelata .lente>img,.vetrina .lente>img{clip-path:inset(0 0 0 0)}
.svelata .lente>img{transition:clip-path .7s cubic-bezier(.2,.8,.24,1)}
/* 🔴 I ritardi seguono le COLONNE, e le colonne cambiano: tre sopra gli
   820px, due sotto. Con i soli 3n il telefono riceveva 0s .18s .09s a
   righe alterne e le foto si accendevano a casaccio invece che a
   cascata. Ogni griglia ha i suoi. */
@media(min-width:820px){
  .griglia>li:nth-child(3n+2) .lente>img{transition-delay:.09s}
  .griglia>li:nth-child(3n+3) .lente>img{transition-delay:.18s}
}
@media(max-width:819px){
  .griglia>li:nth-child(2n) .lente>img{transition-delay:.09s}
}

/* i tracciati si disegnano da soli */
.fiocco-fondo path,.fiocco-fondo ellipse{stroke-dasharray:var(--lung,2000);stroke-dashoffset:var(--lung,2000)}
.pronto .fiocco-fondo path,.pronto .fiocco-fondo ellipse{
  transition:stroke-dashoffset 2.6s cubic-bezier(.22,.72,.2,1) var(--rit,0s);stroke-dashoffset:0}
.sfondo path,.sfondo ellipse,.sfondo circle{stroke-dasharray:var(--lung,1200);stroke-dashoffset:var(--lung,1200)}
.sfondo.tracciato path,.sfondo.tracciato ellipse,.sfondo.tracciato circle{
  transition:stroke-dashoffset 2.2s cubic-bezier(.25,.7,.25,1) var(--rit,0s);stroke-dashoffset:0}

.tessera{opacity:0}
.pronto .tessera{animation:posa .95s cubic-bezier(.18,.85,.25,1) both;animation-delay:calc(.35s + var(--i,0) * .07s)}
@keyframes posa{
  from{opacity:0;transform:translate3d(-50%,calc(-50% + 46px),0) rotate(calc(var(--r) * 2.4)) scale(.86)}
  to{opacity:var(--o0,1)}
}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .fiocco-fondo path,.fiocco-fondo ellipse,.sfondo path,.sfondo ellipse,.sfondo circle{stroke-dashoffset:0!important}
  .tessera{opacity:var(--o0,1);animation:none}
  .tendina{clip-path:none;transform:none}
  .lente>img{clip-path:none}
  .lente--vetrina{transform:none}
  [data-su]{opacity:1;transform:none}
  [data-righe] span>i{transform:none}
  .banda__pista,.vetrina__pista{animation:none}
}

/* ═══════════════════════════════════════════════════════════
   LA SCIA — fiocchetti che accompagnano lo scorrimento
   Stanno DIETRO al contenuto e si muovono a velocità diverse.
   Devono farsi notare appena: se li vedi subito, sono sbagliati.
   ═══════════════════════════════════════════════════════════ */
main{position:relative}
.scia{
  position:absolute;inset:0;z-index:0;
  pointer-events:none;overflow:hidden;
  --s:0;   /* scorrimento in px, lo scrive il JS */
}
.fiocchetto{
  position:absolute;left:var(--x);top:var(--y);
  width:calc(var(--s,1) * 138px);height:auto;
  /* 🔴 il fattore è piccolo di proposito: --scorri sono migliaia di
     pixel, e a moltiplicatore pieno le sagome finivano tutte fuori
     schermo. Qui la deriva massima è di poche centinaia di pixel. */
  transform:
    translate3d(-50%,calc(var(--d) * var(--scorri,0) * -0.11px),0)
    rotate(calc(var(--r) + var(--d) * var(--scorri,0) * 0.009deg));
  will-change:transform;
}
.fiocchetto--rosa{color:var(--rosa-morbido);opacity:.72}
.fiocchetto--azzurro{color:var(--azzurro-morbido);opacity:.72}

/* il contenuto sta sempre sopra */
main > section,main > div{position:relative;z-index:1}
/* le fasce tinte lasciano trasparire un filo di scia */
.fascia--riga{background:rgba(244,246,248,.6)}

@media(max-width:820px){
  /* su telefono meno fiocchetti e più piccoli: lo schermo è stretto */
  .fiocchetto:nth-child(3n+2){display:none}
  .fiocchetto{width:calc(var(--s,1) * 88px);opacity:.6}
}
@media(prefers-reduced-motion:reduce){
  .fiocchetto{transform:translate3d(-50%,0,0) rotate(var(--r))}
}

/* l'indirizzo email, in chiaro: chi lo vuole copiare deve poterlo leggere */
.chiusura__mail{margin:-1.2rem auto 1.9rem;font-size:1.02rem}
.chiusura__mail a{
  color:var(--rosa);text-decoration:none;
  border-bottom:1px solid var(--rosa-morbido);padding-bottom:2px;
  transition:border-color .3s ease;
}
.chiusura__mail a:hover{border-color:var(--rosa)}
.piede a[href^="mailto"]{color:var(--rosa)}

/* ══════════ TESTATA DA TELEFONO ══════════
   🔴 Questo blocco sta in fondo al foglio APPOSTA. Le regole base di
   .marchio e .collegamento sono scritte piu' su: una media query messa
   prima di loro perde a parita' di specificita', e si vede solo a meta'
   (passa il white-space, non passa il corpo). In fondo vince sempre.
   Senza, «Scrivici un'email» va a capo e la testata trabocca. */
@media(max-width:560px){
  .testata{padding:.75rem 1rem;gap:.55rem}
  .marchio{font-size:min(.86rem,3.0vw);letter-spacing:.085em;white-space:nowrap}
  .collegamento{font-size:min(.74rem,2.65vw);letter-spacing:.05em;white-space:nowrap}
}

/* ══════════ LA LETTERA — il pannello per scrivere a Mirca ══════════
   Vestito come una sezione della pagina, non come un popup incollato
   sopra: stesso occhiello in corsivo, stesso filetto, stesso titolo.
   Si animano solo opacity e transform.

   🔴 La carta è una colonna flessibile: SOLO il corpo scorre, il piede
   con il pulsante sta fermo. Con una barra sticky dentro un unico
   contenitore che scorre, il testo dell'anteprima le passava sotto e
   ricompariva sotto il pulsante: sembrava rotto.                      */


/* z-index 0 e il corpo a 1: la filigrana deve stare DIETRO al titolo,
   altrimenti da telefono le passa sopra a «Chiedi misure e prezzi». */


/* 🔴 La scatola serve solo a dare un appiglio al filo del fuoco: senza,
   il ::after si attaccava in fondo a tutto il campo e la riga rosa
   finiva sotto il testo d'aiuto invece che sotto la casella. */
/* La firma di casa: il filo che si tira sotto la casella, come sui bottoni. */



@media(max-width:560px){
  /* Da telefono è un foglio che sale dal basso, non una scheda al centro. */
}



/* ══════════════════════════════════════════════════════════════════
   LA HERO — «IL NASTRO CHE LEGA»
   Sta in fondo al foglio apposta: riscrive regole scritte più su, e a
   parità di specificità vince chi viene dopo. (Già imparato con la
   testata: una media query messa prima della regola base passa solo a
   metà, e non lo dice nessuno.)
   ══════════════════════════════════════════════════════════════════ */

/* Il grado di azzurro, da 0 a 1. Lo scrive il JS a ogni fotogramma
   leggendolo dalla stessa tabella che muove il fiocco: così il colore
   della hero e il colore del fiocco sono LA STESSA COSA, non due
   animazioni che sembrano andare insieme.
   Dichiarato con @property perché serve un <number> vero: senza, resta
   una stringa e calc() non ci lavora. */
@property --blu { syntax: "<number>"; inherits: true; initial-value: 0; }

.pista{
  --blu:0;
  /* Le tinte della hero. Da rosa a azzurro, mescolate in oklab perché
     in sRGB il passaggio rosa→azzurro passa per un grigio smorto. */
  --tinta:        color-mix(in oklab, var(--azzurro)          calc(var(--blu) * 100%), var(--rosa));
  --tinta-media:  color-mix(in oklab, #5588B4                 calc(var(--blu) * 100%), var(--rosa-medio));
  --tinta-morbida:color-mix(in oklab, var(--azzurro-morbido)  calc(var(--blu) * 100%), var(--rosa-morbido));
  background:linear-gradient(168deg,
    color-mix(in oklab,#E4EFF9 calc(var(--blu) * 100%), #FCEBF1) 0%,
    color-mix(in oklab,#E8F1F9 calc(var(--blu) * 100%), #F8EEF4) 32%,
    color-mix(in oklab,#EAF1F8 calc(var(--blu) * 100%), #F1F1F7) 58%,
    color-mix(in oklab,#E3EDF7 calc(var(--blu) * 100%), #E9F0F8) 88%,
    #fff 100%);
}

/* ── 1 · meno spazio sopra e sotto ── */
/* 🔴 Il palco resta alto quanto lo schermo, e il vuoto si toglie
   RIEMPIENDOLO, non accorciando il palco: abbassarlo a 760px sposta
   soltanto i 140px avanzati sotto la scena, dove si vedono uguale.
   Il fiocco arriva quindi fino al bordo della sua colonna, e la griglia
   è larga come le sezioni sotto — così il titolo della hero e quelli
   delle sezioni partono dalla stessa riga verticale. */
.palco{
  height:100svh;min-height:430px;
  padding:clamp(1.9rem,3.6vh,2.4rem) var(--sp) clamp(.4rem,1.2vh,.8rem);
}
/* Il vuoto si toglie anche riempiendolo: il fiocco più grande e il titolo
   più largo fanno respirare meno i bordi, senza stringere la scena. */
.copertina__testo .occhio{font-size:clamp(2.2rem,4.4vw,3.5rem)}
.display--madre{font-size:clamp(1.58rem,3.05vw,2.72rem)}

/* ── 2 · il fiocco e le scritte diventano UNA cosa sola ──
   Tre mosse, in ordine di forza:
   a) le due colonne si toccano (gap 0) e il fiocco entra dentro quella
      del testo con un margine negativo: si incastrano invece di stare
      appaiati;
   b) un alone unico dietro tutti e due, così stanno nella stessa pozza
      di luce e l'occhio li legge come un oggetto solo;
   c) un nastro che li circonda entrambi e si disegna scorrendo.        */
@media(min-width:900px){
  .palco__griglia{
    grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
    gap:0;align-items:center;max-width:var(--largo);
  }
  .copertina__colonna{grid-column:1;grid-row:1;padding-right:clamp(0rem,2.4vw,2.4rem)}
  /* 🔴 La regola di prima assegnava la colonna 2 a «.perno», che in
     questa pagina non esiste più: la tela finiva a destra solo perché
     il posizionamento automatico ci capitava. Ora è detto. */
  .giro{grid-column:2;grid-row:1;align-self:center;margin-left:clamp(-4.5rem,-5vw,-1.5rem)}
}
/* 🔴 In percentuale della SUA colonna, non in vw: misurato in vw, a 900px
   il fiocco chiedeva 492px dentro una colonna da 375 e usciva dallo
   schermo. Il contenitore sa già quanto è largo — glielo si chiede. */
.giro{width:min(100%,600px)}
@media(max-width:899.98px){
  .giro{width:min(68vw,340px);margin:0 auto}
  /* Impilati, «Scorri» finiva addosso al pulsante: qui sotto gli si
     lascia il posto. In orizzontale il vuoto in fondo basta già. */
  .palco{padding-bottom:clamp(2.6rem,5.5vh,3.2rem)}
}

.palco__alone{
  position:absolute;z-index:0;pointer-events:none;
  left:50%;top:50%;width:min(126vw,1180px);aspect-ratio:16/10;
  transform:translate3d(-50%,-50%,0) scale(calc(1 + var(--p) * .12));
  background:radial-gradient(ellipse at 50% 50%,
    color-mix(in oklab,#FFFFFF 62%, var(--tinta-morbida)) 0%,
    rgb(255 255 255 / .34) 42%, rgb(255 255 255 / 0) 68%);
  opacity:.9;will-change:transform;
}

/* Il nastro che gira intorno a testo e fiocco. Si disegna mentre si
   scorre e vira insieme al fiocco: è il pezzo che lega le due metà. */
.legaccio{
  position:absolute;z-index:1;pointer-events:none;
  left:50%;top:50%;width:min(118vw,1080px);height:auto;
  transform:translate3d(-50%,-50%,0) rotate(calc(-3deg + var(--p) * 5deg));
  color:var(--tinta-morbida);opacity:.72;will-change:transform;
}
.legaccio path{
  fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;
  stroke-dasharray:var(--lung,2400);
  stroke-dashoffset:calc(var(--lung,2400) * (1 - var(--p)));
}

/* ── 3 · più decorazioni, e che si muovano ── */
.sciame{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.sciame svg{
  position:absolute;height:auto;color:var(--tinta-morbida);
  transform:translate3d(0, calc(var(--p) * var(--v,-60px)), 0) rotate(var(--r,0deg));
  will-change:transform;
}
.sciame svg use{opacity:var(--o,.3)}
.sciame svg{stroke-width:0}

/* ── 4 · i colori della hero virano col fiocco ── */
.palco .occhio{color:var(--tinta-media)}
.palco .bottone{background:var(--tinta-media);border-color:transparent}
.palco .bottone:hover{background:var(--tinta)}

/* L'eco del fiocco: dentro .giro, quindi incollato al fiocco vero
   qualunque sia la larghezza dello schermo. */
.giro__eco{
  position:absolute;z-index:0;pointer-events:none;
  left:50%;top:50%;width:132%;height:auto;
  color:var(--tinta-morbida);opacity:.34;
  transform:translate3d(-50%,-50%,0) rotate(calc(-5deg + var(--p) * 9deg));
  will-change:transform;
}
.giro__tela{position:relative;z-index:1}
.giro__carico::after{background:var(--tinta-media)}

/* Chi non ha color-mix (browser vecchi) vede i colori di partenza:
   niente si rompe, solo il viraggio non avviene. */
@supports not (color: color-mix(in oklab, red, blue)){
  .palco .occhio{color:var(--rosa-medio)}
  .palco .bottone{background:var(--rosa-medio)}
  .fiocco-fondo,.legaccio,.sciame svg{color:var(--rosa-morbido)}
}
@media(prefers-reduced-motion:reduce){
  .legaccio path{stroke-dashoffset:0}
  .palco__alone,.legaccio,.sciame svg{transform:translate3d(-50%,-50%,0)}
  .sciame svg{transform:none}
}

/* Nelle finestre strette-ma-larghe (900-1200) la colonna del fiocco
   restava compressa e il vuoto sopra e sotto tornava quello di prima:
   qui le due colonne vanno pari, e il fiocco si riprende lo spazio. */
@media(min-width:900px) and (max-width:1199.98px){
  .palco__griglia{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .copertina__testo{padding-right:clamp(0rem,1.6vw,1.4rem)}
}

/* Da telefono la colonna si scioglie: testo e pulsante tornano caselle
   della griglia e il fiocco si infila fra i due — prima si guarda, poi
   si agisce. 🔴 Serve `order` e non l'ordine del DOM, perché nel DOM il
   pulsante viene dopo il fiocco solo per la versione da computer. */
@media(max-width:899.98px){
  .copertina__colonna{display:contents}
  .copertina__testo{order:1}
  .giro{order:2}
  .copertina__azione{order:3;justify-self:stretch}
  .copertina__azione .bottone{width:100%}
}