/* stile.css — l'impaginazione. I colori e il movimento stanno in tema.css. */

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--fondo);
  color: var(--testo);
  /* Archivo Black è pesante: 16px con interlinea 1.75 invece di 17/1.7, perché
     più il carattere è grasso più le righe hanno bisogno d'aria per non
     impastarsi una sull'altra. */
  font: 400 16px/1.75 var(--font-testo);
  -webkit-font-smoothing: antialiased;
  /* Archivo Black ha un peso solo: qualunque `font-weight` sopra 400 il browser
     lo fabbricherebbe da sé, ingrossando le aste a forza. Meglio niente. */
  font-synthesis: none;
  overflow-x: hidden;
}

/* Lo sfondo vivo sta in fondo a questo file, sotto «LO SFONDO CHE RESPIRA».
   Qui resta solo una base scura, perché una pagina che carica lentamente non
   deve mai mostrare il bianco predefinito del browser. */

h1, h2, h3 {
  font-family: var(--font-titoli);
  line-height: 1.15; margin: 0 0 .5em; font-weight: 800; letter-spacing: -.01em;
}
/* Nel corpo del testo il grassetto non può esistere — c'è un peso solo — quindi
   l'enfasi la porta il colore, che è già quello che faceva prima `b`. */
b, strong { font-weight: 400; color: var(--testo); }
h1 { font-size: clamp(2.4rem, 7vw, 4.4rem); }
h2 { font-size: clamp(1.7rem, 4vw, 2.6rem); }
h3 { font-size: 1.18rem; }
p  { margin: 0 0 1rem; }
a  { color: var(--giallo); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; height: auto; display: block; }

.contenitore { width: 100%; max-width: var(--largo); margin: 0 auto; padding: 0 22px; }
.sez { padding: 84px 0; }
.sez > h2 { text-align: center; }
.occhiello {
  max-width: 640px; margin: 0 auto 44px; text-align: center;
  color: var(--testo-tenue); font-size: 1.05rem;
}
.nota { color: var(--testo-tenue); font-size: .92rem; }

/* ---------- intestazione ---------- */
.testa {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--fondo) 88%, transparent);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--bordo);
}
.testa .contenitore { display: flex; align-items: center; gap: 20px; height: 78px; }

/* Il marchio è in DUE pezzi, e non è un vezzo: il logotipo unico contiene sia
   la mascotte sia il lettering disegnato a mano, e a 40px di altezza — quella
   che ci sta in un'intestazione — il lettering diventa una macchia gialla
   illeggibile. Separati, ognuno prende la misura che gli serve per leggersi. */
.marchio { display: flex; align-items: center; gap: 11px; flex: 0 0 auto; }
.marchio .m-distintivo { height: 50px; width: auto; }
.marchio .m-nome { height: 38px; width: auto; }
@media (max-width: 560px) { .marchio .m-nome { display: none; } }
.menu { display: flex; gap: 24px; margin-left: auto; }
.menu a { color: var(--testo); font-weight: 700; font-size: .95rem; }
.menu a:hover { color: var(--giallo); text-decoration: none; }
@media (max-width: 800px) { .menu { display: none; } }

/* ---------- bottoni ---------- */
.bottone {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 13px 26px; border-radius: 999px; border: 0;
  background: var(--arancio); color: #fff;
  font: 600 1.02rem/1 var(--font-titoli); cursor: pointer;
  box-shadow: 0 6px 0 #c9341f;
  transition: transform .12s var(--molla), box-shadow .12s var(--dolce);
}
.bottone:hover { transform: translateY(-2px); box-shadow: 0 8px 0 #c9341f; text-decoration: none; }
.bottone:active { transform: translateY(4px); box-shadow: 0 2px 0 #c9341f; }
.bottone.giallo { background: var(--giallo); color: #2a1f4d; box-shadow: 0 6px 0 #c9990a; }
.bottone.giallo:hover, .bottone.giallo:active { box-shadow: 0 8px 0 #c9990a; }
.bottone.giallo:active { box-shadow: 0 2px 0 #c9990a; }
.bottone.vuoto {
  background: transparent; color: var(--testo);
  border: 2px solid var(--bordo-forte); box-shadow: none;
}
.bottone.vuoto:hover { border-color: var(--giallo); color: var(--giallo); transform: translateY(-2px); }
.bottone.grande { padding: 16px 34px; font-size: 1.08rem; }

/* ---------- vetrina ---------- */
.vetrina { padding: 60px 0 40px; position: relative; }
.vetrina .contenitore { display: grid; grid-template-columns: 1.05fr .95fr; gap: 40px; align-items: center; }
@media (max-width: 900px) {
  .vetrina .contenitore { grid-template-columns: 1fr; text-align: center; }
  .vetrina-azioni { justify-content: center; }
}
.soprattitolo {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: .82rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase;
  color: var(--giallo); margin-bottom: 18px;
}
/* Solo le parole marcate `.acceso`, non tutti gli span: da quando il titolo
   entra parola per parola OGNI parola è uno span, e questa regola scritta senza
   la classe coloriva di giallo l'intero titolo. */
.vetrina h1 .acceso { color: var(--giallo); }
.vetrina .sottotitolo { font-size: 1.15rem; color: var(--testo-tenue); max-width: 34ch; }
@media (max-width: 900px) { .vetrina .sottotitolo { max-width: none; margin-inline: auto; } }
.vetrina-azioni { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 30px; }

.dottore-cornice { position: relative; display: grid; place-items: center; }
.dottore { width: min(100%, 440px); filter: drop-shadow(0 22px 40px rgba(0,0,0,.42)); }
.js .dottore { animation: galleggia 8s ease-in-out infinite; }

/* le scintille attorno al dottore, dal vocabolario del marchio */
.scintilla { position: absolute; font-size: 26px; line-height: 1; pointer-events: none; user-select: none; }
.js .scintilla { animation: brilla 6s ease-in-out infinite; }
.scintilla.s1 { top: 8%;  left: 4%;  color: var(--giallo);  animation-delay: 0s; }
.scintilla.s2 { top: 26%; right: 2%; color: var(--arancio); animation-delay: 1.8s; font-size: 20px; }
.scintilla.s3 { bottom: 20%; left: 0; color: var(--arancio); animation-delay: 3.4s; font-size: 17px; }
.scintilla.s4 { top: 62%; right: 8%; color: var(--giallo);  animation-delay: 4.7s; font-size: 22px; }

.garanzie { display: flex; flex-wrap: wrap; gap: 10px 26px; margin-top: 26px; }
.garanzie li { list-style: none; color: var(--testo-tenue); font-size: .94rem; }
.garanzie b { color: var(--testo); }
.garanzie { padding: 0; }

/* ---------- schede generiche ---------- */
.blocco {
  background: var(--scheda); border: 1px solid var(--bordo);
  border-radius: var(--raggio-grande); padding: 26px 28px;
}
.due-colonne { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
@media (max-width: 800px) { .due-colonne { grid-template-columns: 1fr; } }

/* ---------- come funziona ---------- */
.passi { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
@media (max-width: 900px) { .passi { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .passi { grid-template-columns: 1fr; } }
.passo {
  background: var(--scheda); border: 1px solid var(--bordo);
  border-radius: var(--raggio); padding: 24px 22px; position: relative;
  transition: transform .2s var(--molla), border-color .2s var(--dolce);
}
.passo:hover { transform: translateY(-4px); border-color: var(--bordo-forte); }
.passo .numero {
  display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px;
  background: var(--giallo); color: #2a1f4d; font-weight: 900; font-size: 1.05rem; margin-bottom: 14px;
}
.passo p { color: var(--testo-tenue); font-size: .96rem; margin: 0; }

/* ---------- listino ---------- */
.carte-prezzo { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; align-items: start; }
@media (max-width: 900px) { .carte-prezzo { grid-template-columns: 1fr; } }

.carta-prezzo {
  background: var(--scheda); border: 1px solid var(--bordo);
  border-radius: var(--raggio-grande); padding: 28px 26px; position: relative;
  /* l'inclinazione: come una figurina che prendi in mano */
  transition: transform .25s var(--molla), border-color .25s var(--dolce), box-shadow .25s var(--dolce);
}
.carta-prezzo:hover {
  transform: translateY(-6px) rotate(-.6deg);
  border-color: var(--bordo-forte);
  box-shadow: 0 18px 40px rgba(0,0,0,.3);
}
.carta-prezzo.evidenza { border-color: var(--giallo); background: rgba(255,202,2,.07); }
.carta-prezzo.evidenza:hover { transform: translateY(-6px) rotate(.6deg); }
/* La fascia «più scelto». Sta DENTRO la scheda e non a cavallo del bordo
   superiore: la scheda ha `overflow: hidden` per contenere il lampo di luce, e
   un nastro che sporge verrebbe tagliato a metà. Piena invece che a pillola
   funziona anche meglio: è la fascetta di un adesivo, che è il registro giusto. */
.nastro {
  position: absolute; top: 0; left: 0; right: 0;
  background: var(--giallo); color: #2a1f4d; font-weight: 800; font-size: .76rem;
  padding: 6px 14px; text-align: center; letter-spacing: .04em; text-transform: uppercase;
}
.carta-prezzo.evidenza { padding-top: 46px; }
.carta-prezzo h3 { display: flex; align-items: center; gap: 9px; }
.carta-prezzo .ico { font-size: 1.3rem; }
.carta-prezzo .desc { color: var(--testo-tenue); font-size: .95rem; min-height: 3.2em; }
.carta-prezzo .da { color: var(--giallo); font-weight: 700; margin: 14px 0 6px; }

.griglia-prezzi { margin-top: 12px; border-top: 1px solid var(--bordo); }
.riga-prezzo {
  display: flex; justify-content: space-between; align-items: baseline; gap: 14px;
  padding: 10px 0; border-bottom: 1px solid var(--bordo);
}
/* :last-of-type e non :last-child: nella scheda CGC l'ultima riga è seguita
   dalla nota sui tempi, quindi non è più l'ultimo figlio — e il bordo restava
   appeso in fondo all'elenco. Il tipo (div) invece resta l'ultimo. */
.riga-prezzo:last-of-type { border-bottom: 0; }
.riga-prezzo.evidenza { color: var(--giallo); }
.riga-prezzo .fascia { color: var(--testo-tenue); font-size: .93rem; }
.riga-prezzo .fascia b { color: var(--testo); display: block; font-size: 1rem; }
.riga-prezzo .sotto { display: block; font-size: .85rem; color: var(--testo-tenue); }
.riga-prezzo .cifra { font-weight: 800; white-space: nowrap; }
.riga-prezzo .cifra.su-richiesta { font-weight: 600; font-size: .9rem; color: var(--testo-tenue); }

/* ---------- gradazione: una scheda per casa ----------
   Sono impilate e non affiancate: si leggono una dopo l'altra, e la seconda
   deve poter dire «qui la regola è un'altra» prima che si guardino i numeri. */
.case-gradazione { display: grid; gap: 18px; max-width: 760px; margin: 0 auto; }
.case-gradazione .blocco h3 { margin-bottom: 2px; }
.occhiello-piccolo { color: var(--testo-tenue); font-size: .9rem; margin: 0 0 14px; }
.case-gradazione .nota { margin: 14px 0 0; }
/* una casa che esiste ma ora non si usa. Il pallino è spento apposta: è uno
   stato, non un allarme, e in giallo griderebbe quanto un prezzo. */
.in-pausa {
  display: flex; align-items: center; gap: 11px; margin: 0;
  padding: 13px 16px; border-radius: var(--raggio);
  border: 1px dashed var(--bordo); background: rgba(255,255,255,.02);
  color: var(--testo-tenue); font-size: .92rem;
}
.in-pausa .pallino {
  width: 9px; height: 9px; border-radius: 50%; flex: none;
  background: var(--viola-chiaro);
}

/* ---------- schede affiancate che si adattano al numero ----------
   auto-fit e non un numero fisso di colonne: gli extra si aggiungono e si
   tolgono dal gestionale, e una griglia a tre colonne fisse lascerebbe un buco
   il giorno che diventano due. */
.colonne-auto {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  gap: 18px; align-items: stretch;
}
.sotto-carte { margin-top: 18px; }
.scheda-icona { display: flex; flex-direction: column; }
.verso-listino { text-align: center; margin: 26px 0 0; }

/* ---------- i difetti ----------
   Riquadri piccoli e fitti: sono un elenco da scorrere, non sei schede da
   leggere una per una. */
.difetti {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px;
  max-width: 900px; margin: 0 auto;
}
@media (max-width: 820px) { .difetti { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .difetti { grid-template-columns: 1fr; } }
.difetto {
  background: var(--scheda); border: 1px solid var(--bordo);
  border-radius: var(--raggio); padding: 18px 18px 20px;
  transition: transform .2s var(--molla), border-color .2s var(--dolce);
}
.difetto:hover { transform: translateY(-4px); border-color: var(--bordo-forte); }
.difetto .ico { font-size: 1.35rem; display: block; margin-bottom: 8px; }
.difetto b { display: block; margin-bottom: 4px; }
.difetto span { color: var(--testo-tenue); font-size: .9rem; line-height: 1.5; }
/* ---------- pagina legale ----------
   Testo lungo da leggere, non da scorrere: colonna stretta, righe alte, e i
   titoli allineati a sinistra come in un documento — non centrati come nelle
   sezioni di vendita. */
.legale { max-width: 800px; margin: 0 auto; padding-top: 0; }
/* `.sez.legale` e non `.legale`: più avanti nel foglio `.sez > h2` centra il
   blocco con `width: fit-content` + `margin-inline: auto` e ci appende la
   sottolineatura gialla. A parità di peso vincerebbe lui perché viene dopo, e
   nove sottolineature gialle lungo un documento legale lo fanno sembrare una
   pagina di vendita. */
.sez.legale > h2 {
  text-align: left; width: auto; margin: 40px 0 14px; font-size: 1.35rem;
}
.sez.legale > h2:first-child { margin-top: 0; }
.sez.legale > h2::after { display: none; }
.legale > p { color: var(--testo-tenue); line-height: 1.8; margin: 0 0 14px; }
.legale > p b { color: var(--testo); }
.legale .blocco { margin: 4px 0 18px; }
.legale .nota { margin: 4px 0 18px; }
.elenco-legale { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.elenco-legale li { color: var(--testo-tenue); line-height: 1.65; padding-left: 20px; position: relative; }
.elenco-legale li::before { content: '✦'; color: var(--giallo); position: absolute; left: 0; }
.elenco-legale b { color: var(--testo); }
.legale .aggiornato { margin-top: 40px; }

/* Il buco da riempire si vede: se qualcuno pubblica la pagina così com'è, se ne
   accorge al primo sguardo invece che al primo reclamo. */
.da-completare {
  display: inline-block; padding: 1px 8px; border-radius: 7px;
  background: rgba(251,73,52,.16); border: 1px dashed var(--arancio);
  color: #ffb9ae; font-size: .88em; font-weight: 700;
}
.avviso-bozza {
  max-width: 800px; margin: 0 auto; padding: 18px 22px;
  border-radius: var(--raggio); border: 1px solid var(--arancio);
  background: rgba(251,73,52,.1); color: var(--testo-tenue);
  font-size: .95rem; line-height: 1.7;
}
.avviso-bozza b { color: var(--testo); }
.avviso-bozza code {
  background: rgba(0,0,0,.28); padding: 1px 6px; border-radius: 5px; font-size: .92em;
}

.nota-difetti {
  max-width: 760px; margin: 26px auto 0; text-align: center;
  color: var(--testo-tenue); font-size: .95rem; line-height: 1.7;
}
.scheda-icona h3 { display: flex; align-items: center; gap: 9px; font-size: 1.05rem; }
.scheda-icona .desc { color: var(--testo-tenue); font-size: .93rem; margin: 0; flex: 1 0 auto; }
.scheda-icona .da { color: var(--giallo); font-weight: 700; margin: 14px 0 0; }

.extra-lista { display: grid; gap: 12px; max-width: 760px; margin: 0 auto; }
.extra {
  display: flex; align-items: center; gap: 16px;
  background: var(--scheda); border: 1px solid var(--bordo);
  border-radius: var(--raggio); padding: 16px 20px;
  transition: transform .2s var(--molla), border-color .2s var(--dolce);
}
.extra:hover { transform: translateX(4px); border-color: var(--bordo-forte); }
.extra .ico { font-size: 1.5rem; flex: 0 0 auto; }
.extra > div { flex: 1; }
.extra .desc { display: block; color: var(--testo-tenue); font-size: .9rem; }
.extra .cifra { font-weight: 800; white-space: nowrap; color: var(--giallo); }

.vantaggi { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; max-width: 760px; margin: 0 auto; }
@media (max-width: 700px) { .vantaggi { grid-template-columns: 1fr; } }
.vantaggio {
  display: flex; align-items: center; gap: 18px;
  background: var(--scheda); border: 1px solid var(--bordo);
  border-radius: var(--raggio); padding: 22px 24px;
}
.vantaggio .pct { font-size: 2rem; font-weight: 900; color: var(--giallo); line-height: 1; }

.listino-vuoto { text-align: center; max-width: 520px; margin: 0 auto; padding: 40px 0; }

.aggiornato {
  max-width: 760px; margin: 40px auto 0; text-align: center;
  color: var(--testo-tenue); font-size: .86rem;
}

/* ---------- domande ---------- */
.domande { max-width: 780px; margin: 0 auto; display: grid; gap: 12px; }
details {
  background: var(--scheda); border: 1px solid var(--bordo);
  border-radius: var(--raggio); padding: 4px 22px;
}
details[open] { border-color: var(--bordo-forte); }
summary {
  cursor: pointer; font-weight: 700; padding: 16px 0; list-style: none;
  display: flex; justify-content: space-between; align-items: center; gap: 14px;
}
summary::-webkit-details-marker { display: none; }
summary::after { content: '+'; color: var(--giallo); font-size: 1.5rem; font-weight: 400; line-height: 1; }
details[open] summary::after { content: '−'; }
details p { color: var(--testo-tenue); margin: 0 0 18px; }

/* ---------- chiusura ---------- */
.chiusura { text-align: center; padding: 90px 0; }
.chiusura .blocco { max-width: 660px; margin: 0 auto; padding: 44px 34px; }

/* ---------- piede ---------- */
.piede { border-top: 1px solid var(--bordo); padding: 34px 0; color: var(--testo-tenue); font-size: .9rem; }
.piede .contenitore { display: flex; flex-wrap: wrap; gap: 16px 28px; align-items: center; }
.piede img { height: 34px; }
.piede nav { display: flex; gap: 20px; margin-left: auto; flex-wrap: wrap; }

/* ============================================================================
   PIÙ VITA
   Aggiunte dopo la prima stesura: il sito risultava piatto. Restano CSS puro e
   un `IntersectionObserver` — niente librerie, niente scorrimento addomesticato.
   Il registro è quello dell'adesivo, non quello del film.
   ============================================================================ */

/* ---------- barra di avanzamento della lettura ----------
   Larghezza pilotata da una variabile che aggiorna il JavaScript: si anima la
   `transform`, che il browser fa sulla scheda grafica, invece della `width`,
   che lo costringe a ricalcolare l'impaginazione a ogni pixel di scorrimento. */
.avanzamento {
  position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 60;
  transform-origin: 0 50%; transform: scaleX(var(--letto, 0));
  background: linear-gradient(90deg, var(--giallo), var(--arancio));
  pointer-events: none;
}

/* ---------- l'intestazione si stringe scorrendo ---------- */
.testa .contenitore { transition: height .28s var(--dolce); }
.marchio img { transition: height .28s var(--dolce); }
.testa.ridotta .contenitore { height: 60px; }
.testa.ridotta .marchio .m-distintivo { height: 38px; }
.testa.ridotta .marchio .m-nome { height: 28px; }
.testa.ridotta { box-shadow: 0 10px 30px rgba(0,0,0,.28); }

/* ---------- il titolo, parola per parola ---------- */
.titolo-vivo span { display: inline-block; }
.titolo-vivo .acceso { color: var(--giallo); }
.js .titolo-vivo span { opacity: 0; }
.js .titolo-vivo.dentro span {
  animation: parolaSu .55s var(--molla) both;
  animation-delay: calc(var(--i, 0) * 70ms);
}

.soprattitolo .stella { display: inline-block; animation: brilla 5s ease-in-out infinite; }

/* ---------- la vetrina ---------- */
.dottore-cornice { isolation: isolate; }

/* L'alone: sta DIETRO al dottore e respira. Serve a staccarlo dal fondo senza
   mettergli un contorno, che su un disegno che ne ha già uno suo farebbe a pugni. */
.alone {
  position: absolute; z-index: -1;
  width: 78%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,202,2,.30), rgba(251,73,52,.13) 45%, transparent 70%);
  filter: blur(26px);
}
.js .alone { animation: respira 8s ease-in-out infinite; }

/* Le carte del fondo: rettangoli col bordo tondo, disegnati dal CSS. */
.carta-fondo {
  position: absolute; z-index: -2;
  width: 88px; height: 122px; border-radius: 9px;
  background: linear-gradient(150deg, rgba(150,129,188,.28), rgba(73,63,145,.34));
  border: 2px solid rgba(255,255,255,.13);
  box-shadow: 0 10px 26px rgba(0,0,0,.22);
}
.carta-fondo.c1 { top: 4%;   left: -2%;  }
.carta-fondo.c2 { bottom: 8%; right: -4%; width: 74px; height: 103px; }
.carta-fondo.c3 { top: 42%;  right: 12%; width: 60px; height: 84px; opacity: .7; }
.js .carta-fondo.c1 { animation: deriva1 17s ease-in-out infinite; }
.js .carta-fondo.c2 { animation: deriva2 23s ease-in-out infinite; }
.js .carta-fondo.c3 { animation: deriva3 19s ease-in-out infinite; }

/* Il dottore reagisce al mouse. `--px`/`--py` li scrive il JavaScript e valgono
   fra −1 e 1; l'inclinazione è volutamente piccola — deve sembrare che la
   figura sia lì, non che stia facendo un numero. */
.dottore {
  transform: translate3d(calc(var(--px, 0) * 12px), calc(var(--py, 0) * 10px), 0)
             rotate(calc(var(--px, 0) * 1.4deg));
  transition: transform .5s var(--dolce);
  will-change: transform;
}
.js .dottore-cornice:hover .dottore { transition: transform .18s var(--dolce); }
/* il galleggiamento si sposta sulla cornice, così non litiga con l'inclinazione */
.js .dottore-cornice > img { animation: none; }
.js .dottore-cornice { animation: galleggia 9s ease-in-out infinite; }

.scintilla.s5 { top: 46%; left: 6%;  color: var(--giallo);  animation-delay: 2.6s; font-size: 15px; }
.scintilla.s6 { bottom: 4%; right: 26%; color: var(--arancio); animation-delay: 5.6s; font-size: 24px; }

/* ---------- la striscia scorrevole ---------- */
.striscia {
  overflow: hidden; border-block: 1px solid var(--bordo);
  background: rgba(255,255,255,.035); padding: 14px 0;
  /* sfuma ai bordi: il testo non si tronca di netto */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
/* Nome diverso da `.nastro` della scheda prezzo: due classi con lo stesso nome
   in due componenti diversi si sovrascrivono a vicenda, e il guasto è muto —
   qui la fascia «più scelto» si era ristretta a 116px senza dire niente. */
.striscia-nastro { display: flex; width: max-content; }
.striscia-nastro span {
  padding-right: 2.4rem; white-space: nowrap;
  font-weight: 800; letter-spacing: .05em; color: var(--viola-chiaro);
  text-transform: uppercase; font-size: .92rem;
}
.js .striscia-nastro { animation: scorre 34s linear infinite; }
.striscia:hover .striscia-nastro { animation-play-state: paused; }

/* ---------- i passi ---------- */
.js .passo.dentro .numero { animation: timbro .55s var(--molla) both; animation-delay: .1s; }
.passo::after {
  /* la linea tratteggiata che unisce un passo al successivo */
  content: ''; position: absolute; top: 42px; right: -18px; width: 18px;
  border-top: 2px dashed var(--bordo-forte);
}
.passo:last-child::after { display: none; }
@media (max-width: 900px) { .passo::after { display: none; } }

/* ---------- il lampo sulle schede ----------
   Una striscia di luce che attraversa la scheda al passaggio del mouse. È
   l'effetto «figurina lucida» e costa una pseudo-elemento. */
.carta-prezzo, .passo, .blocco { overflow: hidden; }
.carta-prezzo::after, .passo::before {
  content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 45%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.09), transparent);
  transform: translateX(-120%) skewX(-18deg); pointer-events: none;
}
.js .carta-prezzo:hover::after, .js .passo:hover::before { animation: lampo .85s var(--dolce); }

.js .carta-prezzo.evidenza .nastro { animation: pulsa 3.2s ease-in-out infinite; }

/* ---------- il lampo sui bottoni ---------- */
.bottone { position: relative; overflow: hidden; }
.bottone::after {
  content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 40%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent);
  transform: translateX(-120%) skewX(-18deg); pointer-events: none;
}
.js .bottone:hover::after { animation: lampo .7s var(--dolce); }

/* ---------- i titoli di sezione ----------
   Una sottolineatura che si apre da sinistra quando la sezione entra. */
/* Centrato con `margin-inline: auto` e non con una `transform`: l'entrata di
   `[data-anima]` usa già la transform, e le due si sovrascriverebbero — il
   titolo entrerebbe storto o non entrerebbe affatto. */
.sez > h2 { position: relative; width: fit-content; margin-inline: auto; }
.sez > h2::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -10px; height: 4px;
  border-radius: 3px; background: linear-gradient(90deg, var(--giallo), var(--arancio));
  transform: scaleX(0); transform-origin: 0 50%;
  transition: transform .6s var(--dolce) .15s;
}
.js .sez > h2.dentro::after { transform: scaleX(1); }

/* ---------- le domande ---------- */
details { transition: transform .18s var(--molla), border-color .2s var(--dolce); }
details:hover { transform: translateX(3px); }
summary::after { transition: transform .25s var(--molla); }
details[open] summary::after { transform: rotate(180deg); }

/* ---------- la scia di scintille del cursore ----------
   Le crea il JavaScript e si cancellano da sole. È il gesto più «adesivo» del
   sito: costa niente e si nota subito. */
.scia {
  position: fixed; z-index: 999; pointer-events: none;
  font-size: 14px; line-height: 1; will-change: transform, opacity;
  animation: sciaVia .85s var(--dolce) forwards;
}

/* ---------- bottoni magnetici ----------
   Si spostano di pochi pixel verso il cursore quando ci passi vicino. */
.magnetico {
  transform: translate3d(var(--mx, 0), var(--my, 0), 0);
  transition: transform .28s var(--molla), box-shadow .12s var(--dolce);
}
.js .magnetico.attratto { transition: transform .08s linear; }

/* ---------- il richiamo al preventivo in home ---------- */
.richiamo { text-align: center; position: relative; }
.richiamo-faccia { width: 92px; margin: 0 auto 14px; }
.js .richiamo:hover .richiamo-faccia { animation: posa .6s var(--molla); }

/* ---------- la pagina preventivo ---------- */
.vetrina-stretta { padding-bottom: 10px; }
.vetrina-stretta .contenitore { grid-template-columns: 1.15fr .85fr; }
@media (max-width: 900px) { .vetrina-stretta .contenitore { grid-template-columns: 1fr; } }
.passi-mini { display: grid; gap: 12px; }
.passo-mini {
  display: flex; align-items: center; gap: 14px;
  background: var(--scheda); border: 1px solid var(--bordo);
  border-radius: var(--raggio); padding: 15px 18px; font-weight: 700;
  transition: transform .2s var(--molla), border-color .2s var(--dolce);
}
.passo-mini:hover { transform: translateX(5px); border-color: var(--giallo); }
.passo-mini .numero {
  display: grid; place-items: center; flex: 0 0 auto; width: 30px; height: 30px;
  border-radius: 9px; background: var(--giallo); color: #2a1f4d; font-weight: 900;
}

/* ============================================================================
   LO SFONDO CHE RESPIRA

   Tre strati sovrapposti, tutti dietro al contenuto e tutti inerti al mouse:

   1. **le bolle** — quattro macchie di colore molto grandi e molto sfocate che
      vagano su percorsi lunghi e diversi. Sono ciò che dà profondità: un fondo
      a tinta unita, per quanto bello sia il colore, resta una parete.
   2. **le carte che volano** — otto rettangoli col bordo tondo che salgono
      lentamente ruotando. Sono il motivo del marchio, non una decorazione a
      caso.
   3. **la grana** — un velo di rumore al 4%. È il trucco che toglie più
      «piattezza» di tutti: fa sembrare il colore stampato invece che riempito.

   ── Perché si animano solo le `transform` ─────────────────────────────────
   Le bolle sono sfocate di 90px: animare il loro `filter` o la loro posizione
   costringerebbe il browser a rifare la sfocatura a ogni fotogramma, e su un
   portatile si sente partire la ventola. Spostandole con `transform` la
   sfocatura si calcola UNA volta e poi si sposta il risultato già pronto.
   ============================================================================ */
.fondo {
  position: fixed; inset: 0; z-index: -1;
  overflow: hidden; pointer-events: none;
  background:
    radial-gradient(80rem 50rem at 50% -20%, #3a2a72, transparent 70%),
    var(--fondo);
}

/* ---- 1. le bolle ---- */
.bolla {
  position: absolute; border-radius: 50%;
  filter: blur(90px); will-change: transform;
}
.bolla.b1 { width: 46vw; height: 46vw; top: -12%; left: -10%;
            background: rgba(73,63,145,.85); }
.bolla.b2 { width: 38vw; height: 38vw; top: 12%; right: -12%;
            background: rgba(255,202,2,.16); }
.bolla.b3 { width: 42vw; height: 42vw; bottom: -18%; left: 18%;
            background: rgba(251,73,52,.14); }
.bolla.b4 { width: 30vw; height: 30vw; bottom: 6%; right: 8%;
            background: rgba(150,129,188,.30); }
.js .bolla.b1 { animation: vagaA 34s ease-in-out infinite; }
.js .bolla.b2 { animation: vagaB 41s ease-in-out infinite; }
.js .bolla.b3 { animation: vagaC 47s ease-in-out infinite; }
.js .bolla.b4 { animation: vagaB 29s ease-in-out infinite reverse; }

/* ---- 2. le carte che salgono ---- */
.volo { position: absolute; inset: 0; }
.cv {
  position: absolute; bottom: -140px;
  width: 46px; height: 64px; border-radius: 6px;
  background: linear-gradient(150deg, rgba(150,129,188,.20), rgba(73,63,145,.26));
  border: 1.5px solid rgba(255,255,255,.10);
  will-change: transform;
}
/* posizioni, misure e tempi tutti diversi: se due carte condividono un valore
   l'occhio le lega, e il movimento smette di sembrare casuale */
.cv.v1 { left:  6%; animation: sali 27s linear infinite;      animation-delay:  -2s; }
.cv.v2 { left: 19%; animation: saliStorta 34s linear infinite; animation-delay: -11s; transform: scale(.72); }
.cv.v3 { left: 33%; animation: sali 41s linear infinite;      animation-delay: -25s; transform: scale(1.25); }
.cv.v4 { left: 47%; animation: saliStorta 31s linear infinite; animation-delay:  -7s; }
.cv.v5 { left: 61%; animation: sali 37s linear infinite;      animation-delay: -19s; transform: scale(.85); }
.cv.v6 { left: 74%; animation: saliStorta 44s linear infinite; animation-delay: -33s; transform: scale(1.1); }
.cv.v7 { left: 86%; animation: sali 29s linear infinite;      animation-delay: -14s; transform: scale(.65); }
.cv.v8 { left: 95%; animation: saliStorta 39s linear infinite; animation-delay: -4s;  transform: scale(.9); }
/* senza `.js` restano ferme in basso, fuori dallo schermo: invisibili, non
   ammucchiate in un angolo */
html:not(.js) .cv { display: none; }

/* ---- 3. la grana ----
   Rumore generato da un SVG incorporato: due righe, nessun file da scaricare,
   e non si ripete a occhio come farebbe una texture piccola affiancata. */
.grana {
  position: absolute; inset: -50%;
  opacity: .05; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.js .grana { animation: grattugia 8s steps(8) infinite; }

/* ============================================================================
   DINAMICA
   ============================================================================ */

/* ---------- parallasse legata allo scorrimento ----------
   `--scorri` vale 0 in cima alla pagina e 1 in fondo, e lo scrive il
   JavaScript. Ogni strato lo moltiplica per un numero diverso: è questo che
   crea la profondità, perché ciò che è lontano si muove meno di ciò che è
   vicino. */
.js .bolla.b1 { translate: 0 calc(var(--scorri, 0) * -90px); }
.js .bolla.b2 { translate: 0 calc(var(--scorri, 0) * 150px); }
.js .bolla.b3 { translate: 0 calc(var(--scorri, 0) * -210px); }
.js .bolla.b4 { translate: 0 calc(var(--scorri, 0) * 110px); }
.js .volo     { translate: 0 calc(var(--scorri, 0) * -260px); }

/* La vetrina si allontana mentre scorri: si alza appena, rimpicciolisce e
   sbiadisce. `--uscita` va da 0 a 1 nel primo schermo di scorrimento. */
/* Queste regole DEVONO nominare `.dentro`. L'entrata a scorrimento imposta
   `opacity: 1` con selettore `.js [data-anima].dentro` — specificità 0,3,0 —
   e senza `.dentro` qui la vetrina non sbiadiva mai: si vedeva solo la scala
   cambiare, e sembrava un effetto fatto a metà. */
/* Il dottore NON ha `data-anima`: sta sopra la piega, quindi non ha senso
   farlo entrare a scorrimento — e soprattutto le due cose litigavano.
   `[data-anima]` parte da `opacity: 0` e la toglie solo quando l'osservatore
   scatta: se per un istante quello non era ancora scattato, la vetrina restava
   con il protagonista invisibile. Sopra la piega si entra e basta. */
.js .dottore-cornice {
  translate: 0 calc(var(--uscita, 0) * -60px);
  scale: calc(1 - var(--uscita, 0) * .08);
  opacity: calc(1 - var(--uscita, 0) * .55);
}
.js .vetrina .contenitore > div:first-child {
  translate: 0 calc(var(--uscita, 0) * 40px);
}
.js .vetrina .contenitore > div:first-child > [data-anima].dentro {
  opacity: calc(1 - var(--uscita, 0) * .8);
}

/* ---------- sezioni che entrano da lati alterni ----------
   Alternare la direzione dà ritmo: se tutto entra dal basso, dopo tre sezioni
   l'occhio smette di accorgersene. */
.js .lato-sx[data-anima], .js .lato-sx [data-anima] { transform: translateX(-34px); }
.js .lato-dx[data-anima], .js .lato-dx [data-anima] { transform: translateX(34px); }
.js .lato-sx [data-anima].dentro, .js .lato-dx [data-anima].dentro { transform: none; }

/* ---------- la fascia dei numeri ---------- */
.numeri { padding: 46px 0; border-bottom: 1px solid var(--bordo); }
.numeri .contenitore { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; text-align: center; }
@media (max-width: 700px) { .numeri .contenitore { grid-template-columns: repeat(2, 1fr); } }
.conta b {
  display: block; font-size: clamp(2rem, 5vw, 3.1rem); font-weight: 900; line-height: 1;
  background: linear-gradient(140deg, var(--giallo), var(--arancio));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  /* `tabular-nums` blocca la larghezza delle cifre: senza, il numero che sale
     fa ballare l'etichetta sotto di sé a ogni scatto. */
  font-variant-numeric: tabular-nums;
}
.conta span { display: block; margin-top: 6px; color: var(--testo-tenue); font-size: .92rem; }

/* ---------- schede che si inclinano in 3D ----------
   `--ix`/`--iy` li scrive il JavaScript rispetto al centro della scheda. Il
   `translateZ` sul contenuto lo stacca dal piano: è quello che fa sembrare la
   scheda spessa invece che disegnata. */
.inclina { transform-style: preserve-3d; }
/* `.sez` in più per battere `.js .lato-sx [data-anima].dentro`, che vale
   0,4,0 e azzerava la `transform`: le schede dentro le sezioni a entrata
   laterale non si inclinavano, quelle fuori sì. Un guasto che si vede solo
   provando le due metà della pagina. */
.js .sez .inclina.tocca, .js .inclina.tocca {
  transform: perspective(760px)
             rotateX(calc(var(--iy, 0) * -7deg))
             rotateY(calc(var(--ix, 0) * 9deg))
             translateY(-5px);
  transition: transform .1s linear;
}
/* Qui c'era un `translateZ` sui figli per staccarli dal piano e dare spessore.
   Non funzionava, e vale la pena scrivere perché: `.passo` e `.carta-prezzo`
   hanno `overflow: hidden` — serve a contenere il lampo di luce — e per
   specifica quello forza `transform-style: flat`, che appiattisce i figli.
   L'inclinazione della scheda resta; lo stacco in profondità non era possibile
   senza rinunciare al lampo, e fra i due il lampo si vede di più. */

/* ---------- la navigazione segue la sezione ---------- */
.menu a { position: relative; }
.menu a::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px;
  border-radius: 2px; background: var(--giallo);
  transform: scaleX(0); transform-origin: 0 50%;
  transition: transform .3s var(--molla);
}
.menu a.qui::after, .menu a:hover::after { transform: scaleX(1); }
.menu a.qui { color: var(--giallo); }