/* ==========================================================================
   SMAGENCY · home-page.css
   Lo stile che serve solo alla home page (index.html).
   Quello uguale in tutte le pagine sta in css/comune.css.

   1. Apertura: il nome e il telefono in 3D (scena a scorrimento)
   2. 01 Come lavoriamo: i cinque passi (scena a scorrimento; 2c: gli oggetti 3D)
   3. Il sito di esempio "Il vostro negozio" (nel telefono e nel computer)
   3b. 02 Esempi (tre siti di esempio, con le anteprime)
   4. 03 Per saperne di più (riquadri)
   5. 04 Contatti
   6. Tablet e telefono (6b: la versione del telefono)
   7. Senza JavaScript o con meno animazioni

   Le misure del "contenitore" a sinistra: --sinistra è dove inizia il testo
   (come in .contenitore), così le parti messe con position: absolute stanno
   allineate al resto della pagina.
   ========================================================================== */

.apertura, .passi {
  --sinistra: max(var(--margine), calc((100vw - var(--larghezza)) / 2 + var(--margine)));
}
/* Dove finisce il titolo dei passi: da lì in giù stanno i riquadri */
.passi { --sotto-titolo: calc(clamp(92px, 12svh, 124px) + 118px); }


/* ---------- 1. Apertura ----------
   La scena è alta 3 schermi: mentre si scorre, js/home-page.js (blocco 1)
   scrive tre numeri tra 0 e 1:
   --a  il telefono si rimpicciolisce e va a destra (e il sito dentro scorre)
   --b  a sinistra compare la frase
   --c  il nome in alto sale e sparisce                                      */
.apertura { --a: 0; --b: 0; --c: 0; }
.js .apertura { height: 300vh; height: 300svh; }
.apertura__scena { position: relative; height: 100vh; height: 100svh; min-height: 560px; overflow: hidden; }

/* Il nome, in alto al centro */
.apertura__nome {
  position: absolute;
  top: clamp(96px, 14svh, 150px);
  left: 0;
  right: 0;
  z-index: 2;
  padding-inline: var(--margine);
  text-align: center;
  opacity: calc(1 - var(--c));
  translate: 0 calc(var(--c) * -70px);
  will-change: transform, opacity;    /* si muove mentre si scorre: il browser lo prepara a parte */
}
.apertura__titolo {
  font-size: clamp(3.6rem, 13vw, 11rem);
  font-weight: 800;
  line-height: .9;
  letter-spacing: -.065em;
}
.apertura__sotto {
  margin: 1.6em 0 0;                  /* spazio sotto le "code" di g e y del nome: con meno sembra attaccata */
  text-wrap: balance;                 /* da telefono va a capo a metà, non lascia «provincia» da sola */
  color: var(--bianco-2);
  font-size: clamp(1rem, 1.6vw, 1.3rem);
  font-weight: 500;
  letter-spacing: 0;
}

/* La frase a sinistra (compare con --b) */
.apertura__testo {
  position: absolute;
  top: calc(50% + 34px);              /* al centro dello spazio SOTTO il menu */
  left: var(--sinistra);
  z-index: 3;
  width: min(46vw, 560px);
  opacity: var(--b);
  translate: calc((1 - var(--b)) * -50px) -50%;
  will-change: transform, opacity;
  pointer-events: none;               /* finché è trasparente non si clicca (js aggiunge "attivo") */
}
.apertura__testo.attivo { pointer-events: auto; }
.apertura__frase {
  margin-bottom: .4em;
  font-size: clamp(2.3rem, 4.8vw, 4.4rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.05em;
}
.apertura__frase em { display: block; }
.apertura__testo p { max-width: 26em; color: var(--bianco-2); font-size: 1.15rem; }
.apertura__testo strong { color: var(--bianco); }
.apertura__bottoni { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 10px; }

/* "Scorrete" in basso a sinistra (fuori dal telefono), sparisce con il nome */
.apertura__scendi {
  position: absolute;
  bottom: 22px;
  left: var(--sinistra);
  z-index: 4;
  margin: 0;
  color: var(--bianco-3);
  font-size: .85rem;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  opacity: calc(1 - var(--c));
}
.apertura__scendi span { display: inline-block; margin-left: .4em; animation: scendi 1.6s ease-in-out infinite; }
@keyframes scendi { 50% { transform: translateY(5px); } }

/* Il telefono.
   --w = larghezza all'inizio; --cima = dove sta la sua cima all'inizio
   (il resto esce dallo schermo: si vede solo la parte in alto).
   Alla fine (--a = 1) è grande --s-fine, spostato a destra di --x-fine e
   centrato in altezza su --y-centro (il centro dello spazio sotto il menu).
   --s-fine qui è il massimo: js/home-page.js (blocco 1) lo rimpicciolisce
   se la finestra è bassa, così il telefono non finisce sotto il menu. Il 1.0778 è metà dell'altezza del
   telefono (alto 19,4/9 della larghezza) diviso la larghezza. */
.telefono {
  --w: min(52vw, 540px);
  --cima: 47svh;
  --s-fine: .56;
  --x-fine: 23vw;
  --y-centro: calc(50svh + 34px);
  --s: calc(1 - var(--a) * (1 - var(--s-fine)));
  position: absolute;
  top: var(--cima);
  left: 50%;
  z-index: 1;
  width: var(--w);
  aspect-ratio: 9 / 19.4;
  margin-left: calc(var(--w) / -2);
  transform-origin: 50% 0;
  transform:
    translate3d(calc(var(--a) * var(--x-fine)), calc(var(--a) * (var(--y-centro) - var(--cima) - var(--w) * 1.0778 * var(--s-fine))), 0)
    scale(var(--s));
  perspective: 2200px;
  /* will-change: il browser disegna il telefono UNA volta (grande) e poi lo
     rimpicciolisce e lo sposta con la scheda grafica, senza ridisegnarlo */
  will-change: transform;
}
/* Alone di luce dietro il telefono */
.telefono::before {
  content: "";
  position: absolute;
  inset: -8% -40% 30%;
  z-index: -1;
  background: radial-gradient(closest-side, rgba(255, 255, 255, .12), transparent);   /* niente filter: blur, pesa troppo */
}

/* Il corpo in titanio, inclinato in 3D: all'inizio guarda verso l'alto,
   alla fine si gira verso la frase */
.telefono__corpo {
  position: absolute;
  inset: 0;
  border-radius: calc(var(--w) * .155);
  background: linear-gradient(150deg, #6a6a70 0%, #2b2b2e 20%, #19191b 50%, #3a3a3e 80%, #75757b 100%);
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .22), inset 0 0 calc(var(--w) * .01) rgba(255, 255, 255, .25);
  transform-style: preserve-3d;
  transform: rotateX(calc((1 - var(--a)) * 16deg)) rotateY(calc(var(--a) * -20deg)) rotateZ(calc(var(--a) * 1.5deg));
}
/* Lo spessore: due copie del bordo, più indietro nello spazio */
.telefono__corpo::before,
.telefono__corpo::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(150deg, #48484d, #18181a 50%, #36363a);
  transform: translateZ(-6px);
}
.telefono__corpo::after { background: #0c0c0d; transform: translateZ(-12px); box-shadow: 0 50px 90px -30px rgba(0, 0, 0, .95); }

/* I tasti sul fianco */
.telefono__tasto { position: absolute; width: calc(var(--w) * .012); border-radius: 2px; background: linear-gradient(90deg, #2a2a2d, #6a6a70); }
.telefono__tasto--azione { left: calc(var(--w) * -.01); top: 17%; height: 4%; }
.telefono__tasto--su { left: calc(var(--w) * -.01); top: 24%; height: 7.5%; }
.telefono__tasto--giu { left: calc(var(--w) * -.01); top: 33%; height: 7.5%; }
.telefono__tasto--accendi { right: calc(var(--w) * -.01); top: 27%; height: 11%; background: linear-gradient(90deg, #6a6a70, #2a2a2d); }

/* Lo schermo: il bordo nero (cornice) e dentro il sito */
.telefono__schermo {
  position: absolute;
  inset: calc(var(--w) * .026);
  overflow: hidden;
  border: calc(var(--w) * .02) solid #000;
  border-radius: calc(var(--w) * .13);
  background: #000;
  transform: translateZ(.5px);
}
/* Riflesso della luce sul vetro dello schermo */
.telefono__schermo::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 5;
  background: linear-gradient(118deg, rgba(255, 255, 255, .16) 0%, rgba(255, 255, 255, 0) 26%, rgba(255, 255, 255, 0) 72%, rgba(255, 255, 255, .06) 100%);
  pointer-events: none;
}
.telefono__isola {
  position: absolute;
  top: calc(var(--w) * .026);
  left: 50%;
  z-index: 4;
  width: 31%;
  height: calc(var(--w) * .075);
  border-radius: 999px;
  background: #000;
  translate: -50% 0;
}
.telefono__stato {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 3;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: calc(var(--w) * .125);
  padding: 0 9%;
  background: #f5efe6;
  color: #1e1a16;
  font: 700 calc(var(--w) * .036)/1 var(--font);
}
.telefono__icone { display: flex; gap: 3px; align-items: flex-end; }
.telefono__icone i { display: block; width: calc(var(--w) * .01); background: currentColor; border-radius: 1px; }
.telefono__icone i:nth-child(1) { height: calc(var(--w) * .014); }
.telefono__icone i:nth-child(2) { height: calc(var(--w) * .021); }
.telefono__icone i:nth-child(3) { height: calc(var(--w) * .028); }

/* Il sito dentro il telefono: scorre verso l'alto con --a */
.telefono__sito {
  position: absolute;
  top: calc(var(--w) * .125);
  left: 0;
  right: 0;
  font-size: calc(var(--w) * .034);
  transform: translateY(calc(var(--a) * -27%));
  will-change: transform;
}
/* La barra di Safari in basso, in vetro */
.telefono__safari {
  position: absolute;
  left: 7%;
  right: 7%;
  bottom: calc(var(--w) * .05);
  z-index: 4;
  padding: calc(var(--w) * .022) 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, .9);   /* niente sfocatura: dentro un oggetto 3D che si muove pesa troppo */
  box-shadow: 0 6px 20px rgba(0, 0, 0, .18), inset 0 0 0 1px rgba(255, 255, 255, .8);
  color: #1e1a16;
  font: 600 calc(var(--w) * .033)/1 var(--font);
  text-align: center;
}


/* ---------- 2. 01 Come lavoriamo (i cinque passi) ----------
   Scena alta 7 schermi: una tappa per schermo (5 passi + "Il sito è online"),
   più l'entrata. js/home-page.js (blocco 2) dà a ogni riquadro data-stato:
   "dopo" (deve ancora arrivare: sotto e sfocato), "ora" (al centro),
   "fatto" (si rimpicciolisce verso il suo piccolo riquadro a sinistra:
   --dx e --dy sono la strada da fare, misurata dallo stesso script).
   Ogni passo ha il testo a sinistra e un disegno animato a destra (blocco 2c). */
.js .passi { height: 700vh; height: 700svh; }
.passi__scena { position: relative; }

.js .passi__testa { position: absolute; top: clamp(92px, 12svh, 124px); left: var(--sinistra); right: var(--sinistra); z-index: 2; }
.passi__testa .numero { margin-bottom: 12px; }
.passi__titolo { font-size: clamp(2rem, 4vw, 3.4rem); letter-spacing: -.045em; }

/* I cinque posti a sinistra: si vedono da subito, vuoti. Si clicca per
   tornare a quel passo (js/home-page.js, blocco 2) */
.passi__binario {
  display: none;                      /* senza JavaScript non servono */
  margin: 0;
  padding: 0;
  list-style: none;
}
.js .passi__binario {
  position: absolute;
  top: var(--sotto-titolo);
  bottom: 58px;
  left: var(--sinistra);
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 12px;
  width: 230px;
}
.mini-passo {
  position: relative;                 /* serve a misurare dove sta il numero (misuraStrade) */
  display: flex;
  align-items: center;
  gap: 12px;
  border-radius: 14px;
  color: var(--bianco-3);
  text-decoration: none;
  transition: color .3s;
}
.mini-passo:hover, .mini-passo.ora { color: var(--bianco); }
.mini-passo.acceso { color: var(--bianco-2); }
.mini-passo:focus-visible { outline: 2px solid var(--lime); outline-offset: 4px; }
.mini-passo__numero {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16);
  font-size: 1.1rem;
  font-weight: 800;
  transition: background-color .3s, color .3s, box-shadow .3s;
}
/* "ora" = il passo che si sta guardando: bordo bianco.
   "acceso" = passo finito: diventa lime quando il passo grande ci arriva
   volando (per questo il colore cambia con un po' di ritardo) */
.mini-passo.ora .mini-passo__numero { box-shadow: inset 0 0 0 1.5px var(--bianco); }
.mini-passo.acceso .mini-passo__numero { background: var(--lime); color: var(--nero); box-shadow: 0 0 0 5px rgba(200, 255, 46, .12); transition-delay: .45s; }
.mini-passo__nome { font-size: .92rem; font-weight: 600; line-height: 1.2; }

/* Il palco: dove sta il passo grande (senza riquadro: testo direttamente
   sul nero, scelta di Samuele del 26/10/2026) */
.js .passi__palco {
  position: absolute;
  top: var(--sotto-titolo);           /* sotto il titolo "Cinque passi, zero sorprese." */
  bottom: 58px;                       /* sopra la linea che si riempie */
  left: calc(var(--sinistra) + 260px);
  right: var(--sinistra);
}
/* Il passo: testo a sinistra, disegno a destra */
.passo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(28px, 4.5vw, 72px);
  width: min(1000px, 100%);
}
.passo__testo { min-width: 0; }
.online { width: min(1000px, 100%); }
.js .passo,
.js .online {
  position: absolute;
  inset: 0;
  height: fit-content;
  margin: auto;                       /* al centro del palco */
  transition: opacity .6s var(--curva), transform .8s var(--curva), visibility 0s;
  will-change: transform, opacity;
}
.js [data-stato="dopo"] {
  opacity: 0;
  visibility: hidden;
  transform: translateY(80px) scale(.94);
  transition-delay: 0s, 0s, .8s;      /* visibility: si nasconde a fine movimento */
}
.js [data-stato="fatto"] {
  opacity: 0;
  visibility: hidden;
  transform: translate(var(--dx, -40vw), var(--dy, 0)) scale(.1);
  transition-delay: 0s, 0s, .8s;
}

/* Il numero grande: bianco che sfuma verso il basso (non solo contorno) */
.passo__numero {
  display: block;
  margin-bottom: 18px;
  font-size: clamp(4.5rem, 8vw, 7.5rem);
  font-weight: 800;
  line-height: .8;
  letter-spacing: -.07em;
  background: linear-gradient(180deg, #fff 30%, rgba(255, 255, 255, .3));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.passo__etichetta, .online__etichetta {
  display: inline-flex;
  align-items: center;
  gap: .5em;
  margin: 0 0 18px;
  padding: .4em .9em;
  border-radius: 999px;
  background: rgba(255, 255, 255, .09);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2);
  color: var(--bianco-2);
  font-size: .86rem;
  font-weight: 600;
}
/* L'etichetta e, nei primi tre passi, il costo: 0 € */
.passo__etichette { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 18px; }
.passo__etichette .passo__etichetta { margin: 0; }
.passo__costo {
  display: inline-flex;
  align-items: center;
  padding: .4em .9em;
  border-radius: 999px;
  box-shadow: inset 0 0 0 1px rgba(200, 255, 46, .4);
  color: var(--lime);
  font-size: .86rem;
  font-weight: 700;
  white-space: nowrap;
}
.passo h3 { margin-bottom: .3em; font-size: clamp(2rem, 3.4vw, 3rem); letter-spacing: -.045em; }
.passo__descrizione { max-width: 28em; margin: 0; color: var(--bianco-2); font-size: clamp(1.02rem, 1.25vw, 1.2rem); }
/* "Da parte vostra": cosa serve dal cliente in quel passo */
.passo__voi { max-width: 28em; margin: 20px 0 0; padding-top: 16px; border-top: 1px solid var(--linea); color: var(--bianco-2); font-size: .98rem; }
.passo__voi b { display: block; margin-bottom: 4px; color: var(--bianco-3); font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }

/* "Il sito è online": testo a sinistra, il computer a destra */
.online { display: grid; grid-template-columns: .8fr 1.25fr; align-items: center; gap: clamp(24px, 4vw, 52px); }
.online__etichetta { color: var(--lime); }
.online__pallino {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--lime);
  position: relative;
}
/* L'alone che pulsa: un cerchio lime dietro il pallino che si ingrandisce e
   sparisce. Solo transform e opacity: il browser non deve ridisegnarlo */
.online__pallino::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--lime);
  animation: battito 1.8s ease-out infinite;
}
@keyframes battito {
  from { transform: scale(1); opacity: .6; }
  to { transform: scale(3.2); opacity: 0; }
}
.online__titolo { margin-bottom: .3em; font-size: clamp(2.6rem, 5.5vw, 5rem); letter-spacing: -.055em; }
.online__testo p:not(.online__etichetta) { color: var(--bianco-2); font-size: 1.1rem; }
.online__immagine { margin: 0; }

/* Il computer: una finestra del browser in vetro */
.browser { padding: 0; border-radius: 18px; }
.browser__barra { display: flex; align-items: center; gap: 14px; padding: 12px 14px; }
.browser__pallini { display: flex; gap: 6px; }
.browser__pallini i { width: 10px; height: 10px; border-radius: 50%; background: #ff5f57; }
.browser__pallini i:nth-child(2) { background: #febc2e; }
.browser__pallini i:nth-child(3) { background: #28c840; }
.browser__url {
  flex: 1;
  padding: 6px 12px;
  border-radius: 8px;
  background: rgba(255, 255, 255, .08);
  color: var(--bianco-2);
  font-size: .78rem;
  text-align: center;
}
.browser__pagina {
  height: clamp(220px, 27vw, 390px);
  margin: 0 8px 8px;
  overflow: hidden;
  border-radius: 10px;
  font-size: clamp(7px, .82vw, 11.5px);
}

/* La linea in basso che si riempie mentre si scorre i passi */
.passi__avanzamento { display: none; }
.js .passi__avanzamento {
  position: absolute;
  bottom: 26px;
  left: var(--sinistra);
  right: var(--sinistra);
  display: block;
  height: 2px;
  overflow: hidden;
  border-radius: 2px;
  background: var(--linea);
}
.passi__avanzamento span { display: block; height: 100%; background: var(--lime); transform: scaleX(var(--p, 0)); transform-origin: left; }


/* ---------- 2c. Gli oggetti 3D dei passi ----------
   Ogni passo ha a destra (sul telefono sotto) un oggetto 3D fatto col CSS,
   sempre con lo stesso negozio di esempio:
   1 la telefonata su un telefono    2 la bozza su un portatile
   3 il calendario da scrivania      4 il preventivo su una cartellina
   5 la ricerca su un telefono
   Come è fatto un oggetto (HTML):
     .oggetto (figure)        → --inclina-x / --inclina-y: il mouse (js/home-page.js, blocco 2c)
       .oggetto__palco        → la prospettiva: quanto "da vicino" lo guardiamo
         .oggetto__dondola    → dondola piano da solo (solo quando si vede: classe "anima")
           .tel3d / .pc3d ... → il modello, con transform-style: preserve-3d
                                (i suoi pezzi possono stare più avanti o più indietro: translateZ)
   Lo spessore si fa con copie della sagoma un po' più indietro (translateZ
   negativo), come nel telefono dell'apertura.
   Tutto è in em: per ingrandire un oggetto basta cambiare il font-size di .passo__visivo.
   Le animazioni partono con la classe "in-scena" (js/home-page.js); le
   posizioni di partenza sono dentro "prefers-reduced-motion: no-preference". */
.passo__visivo {
  position: relative;
  width: 100%;
  max-width: 30em;
  margin: 0;
  justify-self: center;
  overflow: hidden;                   /* niente esce dal riquadro: sul telefono allargherebbe la pagina */
  font-size: clamp(10px, .95vw, 14px);
  line-height: 1.3;
  transition: opacity .6s var(--curva) .15s, transform .8s var(--curva) .15s;
}
.passo__visivo :where(p) { margin: 0; }
.passo__visivo .icona { flex-shrink: 0; width: 1.15em; height: 1.15em; }

.oggetto__palco { position: relative; display: grid; place-items: center; height: 27em; perspective: 70em; }
.oggetto__dondola {
  display: grid;
  place-items: center;
  transform-style: preserve-3d;
  /* il mouse: fino a 10° in su/giù e 14° a destra/sinistra */
  transform: rotateX(calc(var(--inclina-y, 0) * -10deg)) rotateY(calc(var(--inclina-x, 0) * 14deg));
  transition: transform .5s var(--curva);
}
/* il dondolio usa rotate e translate (proprietà separate da transform): così si somma al mouse */
@keyframes dondola {
  from { rotate: 0 1 0 -7deg; translate: 0 .3em 0; }
  to { rotate: 0 1 0 7deg; translate: 0 -.4em 0; }
}
/* l'ombra sul "pavimento": una macchia sfumata (niente filter: blur, pesa) */
.oggetto__ombra { position: absolute; left: 18%; right: 18%; bottom: .4em; height: 2.6em; border-radius: 50%; background: radial-gradient(closest-side, rgba(0, 0, 0, .6), transparent); pointer-events: none; }


/* --- Il telefono 3D (anche negli Esempi, blocco 3b) --- */
.tel3d {
  --w: 11.2em;                        /* la larghezza del telefono */
  position: relative;
  width: var(--w);
  aspect-ratio: 9 / 19.4;
  transform-style: preserve-3d;
  transform: rotateY(-22deg) rotateX(8deg) rotateZ(-2deg);
}
.tel3d__corpo, .tel3d__spessore { position: absolute; inset: 0; border-radius: calc(var(--w) * .16); }
.tel3d__corpo {
  background: linear-gradient(150deg, #6a6a70 0%, #2b2b2e 20%, #19191b 50%, #3a3a3e 80%, #75757b 100%);
  box-shadow: inset 0 0 0 .12em rgba(255, 255, 255, .22), inset 0 0 .3em rgba(255, 255, 255, .2);
}
.tel3d__spessore { background: linear-gradient(150deg, #48484d, #18181a 50%, #36363a); transform: translateZ(-.4em); }
.tel3d__spessore--2 { background: #0c0c0d; transform: translateZ(-.8em); }
.tel3d__schermo { position: absolute; inset: calc(var(--w) * .035); overflow: hidden; border-radius: calc(var(--w) * .13); background: #0b0b0d; }
.tel3d__schermo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(120deg, rgba(255, 255, 255, .14), transparent 40%); pointer-events: none; }   /* il riflesso del vetro */
.tel3d__isola { position: absolute; top: calc(var(--w) * .065); left: 50%; width: 30%; height: calc(var(--w) * .08); translate: -50% 0; border-radius: 99em; background: #000; }


/* --- 1. La telefonata: le battute escono dallo schermo --- */
.chiamata {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
  padding: 2.6em .8em 1.6em;
  background: linear-gradient(180deg, #23302a, #0d1210);
  color: #fff;
  font-size: .8em;
  text-align: center;
}
.chiamata__stato { margin-top: .8em !important; color: rgba(255, 255, 255, .6); font-size: .82em; }
.chiamata__foto { display: grid; place-items: center; width: 4.4em; height: 4.4em; margin: 1.1em 0 .7em; border-radius: 50%; background: var(--lime); color: var(--nero); font-size: 1.05em; font-weight: 800; letter-spacing: -.04em; }
.chiamata__nome { font-size: 1.4em; font-weight: 700; letter-spacing: -.02em; }
.chiamata__tempo { color: rgba(255, 255, 255, .6); font-size: .85em; }
.chiamata .v-onda { display: flex; align-items: center; justify-content: center; gap: .26em; width: 100%; height: 3.2em; margin: auto 0; }
.v-onda i { flex: 1; max-width: .3em; height: 100%; border-radius: 1em; background: rgba(255, 255, 255, .55); transform: scaleY(var(--h, .5)); }
.v-onda i:nth-child(3n) { --h: .85; animation-delay: -.7s; }
.v-onda i:nth-child(3n + 1) { --h: .35; }
.v-onda i:nth-child(4n) { --h: 1; }
.v-onda i:nth-child(5n) { --h: .6; }
.v-onda i:nth-child(2n) { animation-delay: -.35s; }
@keyframes onda {
  from { transform: scaleY(.2); }
  to { transform: scaleY(var(--h, .5)); }
}
.chiamata__tasti { display: flex; gap: 1.1em; }
.chiamata__tasti span { display: grid; place-items: center; width: 3em; height: 3em; border-radius: 50%; background: rgba(255, 255, 255, .16); }
.chiamata__tasti .icona { width: 1.3em; height: 1.3em; }
.chiamata__tasti .chiamata__chiudi { background: #ff3b30; }
.chiamata__chiudi .icona { rotate: 135deg; }
/* le due battute: fuori dal telefono, più vicine a chi guarda (translateZ) */
.oggetto--chiamata .v-fumetto {
  position: absolute;
  width: 11em;
  padding: .7em 1em;
  border-radius: 1.1em 1.1em 1.1em .3em;
  background: rgba(36, 36, 42, .96);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 1.2em 2em -1em rgba(0, 0, 0, .8);
  color: #fff;
  font-size: .9em;
  line-height: 1.35;
  transition: opacity .5s var(--curva) .7s, scale .6s var(--curva) .7s, translate .6s var(--curva) .7s;
}
.oggetto--chiamata .v-fumetto:first-of-type { top: 16%; left: -7.6em; transform: translateZ(3.4em); }
.oggetto--chiamata .v-fumetto--voi {
  top: 60%;
  right: -7.4em;
  border-radius: 1.1em 1.1em .3em 1.1em;
  background: #f5efe6;                /* i colori del negozio di esempio */
  color: #1e1a16;
  transform: translateZ(5em);
  transition-delay: 1.6s;
}


/* --- 2. La bozza: un portatile aperto (coperchio dritto, tastiera distesa) --- */
.pc3d {
  position: relative;
  width: 22.6em;
  height: 14.6em;
  transform-style: preserve-3d;
  transform: translateY(-2.6em) rotateX(-16deg) rotateY(26deg);
}
.pc3d__coperchio {
  position: absolute;
  inset: 0;
  padding: .55em;
  border-radius: .9em .9em .35em .35em;
  background: linear-gradient(160deg, #3a3d44, #17191c);
  transform-style: preserve-3d;
}
.pc3d__retro { position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(160deg, #d9dde2, #9aa1a8); transform: translateZ(-.35em); }
.pc3d__schermo { position: relative; display: flex; flex-direction: column; height: 100%; overflow: hidden; border-radius: .4em; background: #101114; }
/* la tastiera: incernierata sul bordo basso del coperchio e ruotata in avanti */
.pc3d__base {
  position: absolute;
  top: 100%;
  left: -.9em;
  right: -.9em;
  height: 14em;
  border-radius: .35em .35em 1.1em 1.1em;
  background: linear-gradient(180deg, #d8dce1, #a9b0b8);
  box-shadow: inset 0 .25em 0 rgba(0, 0, 0, .12);
  transform-origin: top center;
  transform: rotateX(84deg);
}
/* i tasti: un rettangolino scuro ripetuto, con lo spazio fra uno e l'altro (background-repeat: space) */
.pc3d__tasti { position: absolute; top: 9%; left: 7%; right: 7%; height: 46%; background: linear-gradient(#34373d, #34373d) 0 0 / 1.2em 1em space; border-radius: .3em; }
.pc3d__trackpad { position: absolute; bottom: 9%; left: 34%; right: 34%; height: 28%; border-radius: .5em; background: rgba(0, 0, 0, .1); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12); }
.v-bozza__barra { display: flex; align-items: center; gap: .9em; padding: .35em .6em; color: rgba(255, 255, 255, .55); font-size: .72em; }
.v-bozza__barra .browser__pallini i { width: .75em; height: .75em; }
.v-bozza__tela { position: relative; flex: 1; overflow: hidden; background: rgba(255, 255, 255, .04); }
.v-bozza__pagina {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: 1.3em minmax(0, 1fr) 28%;
  gap: .5em;
  padding: .7em;
}
.v-b { border-radius: .45em; }
.v-b--nav, .v-b--hero { grid-column: 1 / -1; }
.v-bozza__pagina--schizzo .v-b { border: 1.5px dashed rgba(255, 255, 255, .3); }
/* la "X" che negli schizzi segna il posto di una foto */
.v-bozza__pagina--schizzo .v-b--hero {
  background:
    linear-gradient(to top right, transparent calc(50% - 1px), rgba(255, 255, 255, .2) 50%, transparent calc(50% + 1px)),
    linear-gradient(to bottom right, transparent calc(50% - 1px), rgba(255, 255, 255, .2) 50%, transparent calc(50% + 1px));
}
.v-bozza__pagina--colore { background: #f5efe6; color: #1e1a16; }
.v-bozza__pagina--colore .v-b--nav { display: flex; align-items: center; font-size: .8em; font-weight: 800; letter-spacing: -.04em; }
.v-bozza__pagina--colore .v-b--hero { display: flex; align-items: flex-end; padding: .7em; background: linear-gradient(160deg, #f0bf98, #d4683f 52%, #7e321c); color: #fff; }
.v-b--hero b { max-width: 8em; font-size: 1.05em; line-height: 1; letter-spacing: -.045em; }
/* la parte a colori si scopre da sinistra a destra, con il pennello sul bordo:
   il contenitore va da -100% a 0 e la pagina dentro da +100% a 0 (sembra ferma) */
.v-bozza__colore, .v-bozza__bordo { position: absolute; inset: 0; }
.v-bozza__colore { overflow: hidden; }
.v-bozza__colore,
.v-bozza__bordo,
.v-bozza__colore > .v-bozza__pagina { transition: transform 1.6s cubic-bezier(.65, 0, .35, 1) .5s; }
.v-bozza__pennello {
  position: absolute;
  top: 50%;
  right: -1em;
  display: grid;
  place-items: center;
  width: 2em;
  height: 2em;
  margin-top: -1em;
  border-radius: 50%;
  background: var(--bianco);
  color: var(--nero);
  box-shadow: 0 .4em 1em rgba(0, 0, 0, .4);
  opacity: 0;                         /* finito di colorare, sparisce */
  transition: opacity .3s 2.1s;
}


/* --- 3. La presentazione: un calendario da scrivania, a cavalletto --- */
.cal3d {
  position: relative;
  width: 19.4em;
  height: 16.8em;
  transform-style: preserve-3d;
  transform: translateY(-1.6em) rotateX(14deg) rotateY(-24deg);
}
.cal3d__fronte, .cal3d__retro { position: absolute; inset: 0; border-radius: .7em; transform-origin: top center; }
.cal3d__retro { background: linear-gradient(180deg, #4a5059, #2a2f36); transform: rotateX(-34deg); }
.cal3d__fronte {
  padding: 2em 1.2em 1.1em;
  background: #fbf8f3;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .06), inset 0 -.4em 0 rgba(0, 0, 0, .06);
  color: #23324d;
  transform: rotateX(16deg);
  transform-style: preserve-3d;
}
/* gli anelli della spirale in alto */
.cal3d__anelli { position: absolute; top: -.55em; left: 1.2em; right: 1.2em; height: 1.1em; background: radial-gradient(circle, transparent .2em, #8b949e .23em .38em, transparent .41em) 0 0 / 1.3em 1.1em repeat-x; }
.v-incontro__testa { display: flex; align-items: center; gap: .7em; margin-bottom: .9em; }
.v-incontro__icona { display: grid; place-items: center; flex-shrink: 0; width: 2.3em; height: 2.3em; border-radius: .7em; background: #23324d; color: var(--lime); }
.v-incontro__testa b { display: block; font-size: 1em; letter-spacing: -.02em; }
.v-incontro__testa small { color: #6b7385; font-size: .8em; }
.v-calendario { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: .3em; text-align: center; transform-style: preserve-3d; }
.v-calendario i { color: #8a93a3; font-size: .7em; font-style: normal; font-weight: 700; }
.v-calendario span { position: relative; display: grid; place-items: center; aspect-ratio: 1.1; border-radius: .45em; background: #efe8dc; color: #23324d; font-size: .82em; font-weight: 600; }
/* il giorno scelto: diventa lime e si alza dal foglio verso di voi */
.v-calendario .v-calendario__giorno {
  background: var(--lime);
  color: var(--nero);
  font-weight: 800;
  box-shadow: 0 .5em .9em -.2em rgba(0, 0, 0, .45);
  translate: 0 0 1.4em;
  transition: translate .6s cubic-bezier(.3, 1.5, .5, 1) .6s, background-color .3s .6s, box-shadow .3s .6s;
}
/* le due possibilità: due etichette che galleggiano davanti al calendario */
.oggetto--incontro .v-scelta {
  position: absolute;
  left: -1.6em;
  right: -1.6em;
  bottom: -3.6em;
  display: flex;
  justify-content: center;
  gap: .5em;
  transform: translateZ(5em);
  transition: opacity .5s var(--curva) 1.1s, translate .6s var(--curva) 1.1s;
}
.v-scelta span { display: flex; align-items: center; gap: .45em; padding: .55em .8em; border-radius: 99em; background: rgba(36, 36, 42, .95); box-shadow: 0 1em 1.6em -.8em rgba(0, 0, 0, .8); color: #fff; font-size: .78em; white-space: nowrap; }
.v-scelta .v-scelta__si { box-shadow: inset 0 0 0 1.5px var(--lime), 0 1em 1.6em -.8em rgba(0, 0, 0, .8); }
.v-scelta .icona { color: var(--lime); }


/* --- 4. Il preventivo: un foglio sulla cartellina, il timbro cade dall'alto --- */
.clip3d {
  position: relative;
  width: 17.6em;
  height: 23em;
  transform-style: preserve-3d;
  transform: translateY(-.6em) rotateX(40deg) rotateY(8deg) rotateZ(-9deg);
}
.clip3d__spessore, .clip3d__tavola { position: absolute; inset: 0; border-radius: .9em; }
.clip3d__spessore { background: #5a3c22; transform: translateZ(-.5em); }
.clip3d__tavola { background: linear-gradient(160deg, #b0814f, #7d5532); box-shadow: inset 0 0 0 .12em rgba(255, 255, 255, .12); transform-style: preserve-3d; }
.clip3d__foglio {
  position: absolute;
  inset: 2.3em 1em 1em;
  padding: 2.1em 1.2em 1em;
  border-radius: .2em;
  background: linear-gradient(180deg, #fffdf9, #f1ede5);
  box-shadow: 0 .2em .5em rgba(0, 0, 0, .25);
  color: #2b2a28;
  transform: translateZ(.15em);
}
.clip3d__molla { position: absolute; top: .8em; left: 50%; width: 7em; height: 2.7em; margin-left: -3.5em; border-radius: .6em .6em 1.4em 1.4em; background: linear-gradient(180deg, #eef1f4, #9aa1a8); box-shadow: 0 .3em .6em rgba(0, 0, 0, .35); transform: translateZ(.6em); }
.v-preventivo__testa { display: flex; justify-content: space-between; align-items: baseline; gap: 1em; margin-bottom: .4em; padding-bottom: .7em; border-bottom: 1px solid rgba(0, 0, 0, .12); }
.v-preventivo__testa b { font-size: 1.2em; letter-spacing: -.03em; }
.v-preventivo__testa small { color: #8a857c; font-size: .75em; }
.v-preventivo__righe { margin: 0; padding: 0; list-style: none; }
.v-preventivo__righe li,
.v-preventivo__totale { display: flex; align-items: center; justify-content: space-between; gap: 1em; padding: .55em 0; color: #57534c; font-size: .85em; }
/* al posto delle cifre: barre (il prezzo dipende dai contenuti, non lo scriviamo a priori) */
.v-preventivo__righe i,
.v-preventivo__totale i { width: 4.6em; height: .5em; border-radius: 1em; background: rgba(0, 0, 0, .14); transform-origin: right; transition: transform .6s var(--curva) calc(.4s + var(--n, 0) * .12s); }
.v-preventivo__righe li:nth-child(2) i { --n: 1; width: 3.4em; }
.v-preventivo__righe li:nth-child(3) i { --n: 2; width: 4em; }
.v-preventivo__righe li:nth-child(4) i { --n: 3; width: 2.8em; }
.v-preventivo__totale { margin-top: .3em; padding-top: .8em; border-top: 1px solid rgba(0, 0, 0, .12); color: #2b2a28; font-weight: 700; }
.v-preventivo__totale i { --n: 4; width: 6em; height: .65em; background: rgba(0, 0, 0, .3); }
.oggetto--preventivo .v-timbro {
  position: absolute;
  top: 11.5em;
  left: 2.2em;
  display: inline-flex;
  align-items: center;
  gap: .4em;
  padding: .45em .8em;
  border: 2px solid #2f8f4e;
  border-radius: .5em;
  background: rgba(255, 253, 249, .92);
  color: #2f8f4e;
  font-size: .95em;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  transform: translateZ(.6em) rotate(-12deg);
  transition: opacity .2s 1.2s, translate .5s cubic-bezier(.5, 0, .75, 0) 1.2s, scale .5s cubic-bezier(.3, 1.6, .5, 1) 1.2s;
}


/* --- 5. La ricerca: un altro telefono, il risultato esce dallo schermo --- */
.oggetto--ricerca .tel3d { transform: rotateY(24deg) rotateX(8deg) rotateZ(2deg); }
.ricerca-tel { display: flex; flex-direction: column; gap: .9em; height: 100%; padding: 2.8em .8em 1em; background: #f6f7f9; color: #1e1e1e; font-size: .72em; }
.ricerca-tel .v-ricerca__barra { display: flex; align-items: center; gap: .5em; padding: .65em .8em; border-radius: 99em; background: #fff; box-shadow: 0 .2em .6em rgba(0, 0, 0, .1); color: #4b4f56; font-size: .95em; }
.ricerca-tel__altro { display: grid; gap: .45em; }
.ricerca-tel__altro i { height: .55em; border-radius: 1em; background: rgba(0, 0, 0, .1); }
.ricerca-tel__altro i:first-child { width: 55%; background: rgba(26, 13, 171, .25); }
.ricerca-tel__altro i:last-child { width: 80%; }
.ricerca-tel__posto { height: 6em; border: 1px dashed rgba(0, 0, 0, .18); border-radius: .8em; }
.oggetto--ricerca .v-ricerca__risultato {
  position: absolute;
  top: 37%;
  left: -2.6em;
  right: -2.6em;
  display: flex;
  gap: .8em;
  padding: .9em;
  border-radius: .9em;
  background: #fff;
  box-shadow: inset 0 0 0 1.5px var(--lime), 0 1.4em 2.4em -1em rgba(0, 0, 0, .7);
  color: #1e1a16;
  transform: translateZ(4em);
  transition: opacity .5s var(--curva) .4s, translate .7s var(--curva) .4s;
}
.v-ricerca__favicon { flex-shrink: 0; width: 2em; height: 2em; border-radius: 50%; background: linear-gradient(160deg, #f0bf98, #d4683f 52%, #7e321c); }
.v-ricerca__testo { flex: 1; min-width: 0; }
.v-ricerca__testo small { display: block; color: #6b5e52; font-size: .75em; }
.v-ricerca__testo b { display: block; margin: .1em 0 .35em; color: #1a0dab; font-size: .92em; letter-spacing: -.02em; }
.v-ricerca__righe i { display: block; height: .4em; margin-top: .35em; border-radius: 1em; background: rgba(30, 26, 22, .14); }
.v-ricerca__righe i:last-child { width: 70%; }
/* i collegamenti: quattro etichette che galleggiano intorno al telefono, a profondità diverse */
.oggetto--ricerca .v-ricerca__collegati { position: absolute; inset: 0; margin: 0; padding: 0; list-style: none; transform-style: preserve-3d; }
.v-ricerca__collegati li {
  position: absolute;
  display: flex;
  align-items: center;
  gap: .45em;
  padding: .5em .8em;
  border-radius: 99em;
  background: rgba(36, 36, 42, .95);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 1em 1.6em -.8em rgba(0, 0, 0, .8);
  color: #fff;
  font-size: .8em;
  font-weight: 600;
  white-space: nowrap;
  transition: opacity .4s calc(.9s + var(--n, 0) * .15s), scale .5s cubic-bezier(.3, 1.5, .5, 1) calc(.9s + var(--n, 0) * .15s);
}
.v-ricerca__collegati .icona { color: var(--lime); }
.v-ricerca__collegati li:nth-child(1) { top: 5%; left: -6.6em; transform: translateZ(2.4em); }
.v-ricerca__collegati li:nth-child(2) { --n: 1; top: 14%; right: -8.2em; transform: translateZ(3.6em); }
.v-ricerca__collegati li:nth-child(3) { --n: 2; bottom: 19%; left: -7em; transform: translateZ(5em); }
.v-ricerca__collegati li:nth-child(4) { --n: 3; bottom: 7%; right: -6.6em; transform: translateZ(2em); }


/* Le posizioni di partenza (solo con JavaScript e senza "meno animazioni") */
@media (prefers-reduced-motion: no-preference) {
  .oggetto.anima .oggetto__dondola { animation: dondola 6.5s ease-in-out infinite alternate; }
  .js .passo:not(.in-scena) .passo__visivo { opacity: 0; transform: translateY(1.6em) scale(.97); }
  .js .in-scena .v-onda i { animation: onda .9s ease-in-out infinite alternate; }
  .js .passo:not(.in-scena) .v-fumetto { opacity: 0; scale: .8; translate: 0 1em 0; }
  .js .passo:not(.in-scena) .v-bozza__colore,
  .js .passo:not(.in-scena) .v-bozza__bordo { transform: translateX(-100%); }
  .js .passo:not(.in-scena) .v-bozza__colore > .v-bozza__pagina { transform: translateX(100%); }
  .js .passo:not(.in-scena) .v-bozza__pennello { opacity: 1; transition-delay: 0s; }
  .js .passo:not(.in-scena) .v-calendario__giorno { translate: 0 0 0; background-color: #efe8dc; color: #23324d; box-shadow: none; }
  .js .passo:not(.in-scena) .v-scelta { opacity: 0; translate: 0 1.4em 0; }
  .js .passo:not(.in-scena) .v-preventivo__righe i,
  .js .passo:not(.in-scena) .v-preventivo__totale i { transform: scaleX(0); }
  .js .passo:not(.in-scena) .v-timbro { opacity: 0; translate: 0 0 12em; scale: 1.5; }
  .js .passo:not(.in-scena) .v-ricerca__risultato { opacity: 0; translate: 0 2em 0; }
  .js .passo:not(.in-scena) .v-ricerca__collegati li { opacity: 0; scale: .6; }
}


/* ---------- 3. Il sito di esempio "Il vostro negozio" ----------
   Tutto è misurato in em: nel telefono e nel computer cambia solo la
   grandezza del testo (font-size) e il sito si ingrandisce o rimpicciolisce
   tutto insieme. Colori caldi, apposta diversi da SMagency: è il sito di un
   cliente. ⚠️ È un esempio, non un cliente vero. */
.es {
  --es-fondo: #f5efe6;
  --es-testo: #1e1a16;
  --es-accento: #d4683f;
  padding: 0 1.1em 7em;
  background: var(--es-fondo);
  color: var(--es-testo);
  font-family: var(--font);
  line-height: 1.3;
  letter-spacing: -.01em;
}
.es :where(p) { margin: 0; }   /* :where = nessuna precedenza: le classi sotto vincono */
.es__nav { display: flex; justify-content: space-between; align-items: center; padding: .9em 0; font-size: 1.05em; }
.es__nav b { font-weight: 800; letter-spacing: -.045em; }
.es__burger { width: 1.3em; height: .8em; border-top: .15em solid currentColor; border-bottom: .15em solid currentColor; }
.es__voci { display: flex; gap: 1.3em; font-size: .8em; }
.es__voci i { font-style: normal; opacity: .65; }

.es__hero {
  position: relative;
  overflow: hidden;
  padding: 10em 1.2em 1.3em;
  border-radius: 1.2em;
  background: linear-gradient(160deg, #f0bf98, #d4683f 52%, #7e321c);
  color: #fff;
}
/* Forme che fanno da "foto" della vetrina */
.es__forma { position: absolute; }
.es__forma--1 { top: -2.5em; right: -2em; width: 10em; height: 10em; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #ffe2c6, #f09a6c 58%, rgba(240, 154, 108, 0) 60%); }
.es__forma--2 { top: 2.2em; left: 1.4em; width: 4.6em; height: 5.6em; border-radius: .6em .6em 1em 1em; background: linear-gradient(#5b3420, #3d2214); box-shadow: inset 0 .5em 0 rgba(255, 255, 255, .12); }
.es__forma--2::before { content: ""; position: absolute; top: -1.4em; left: 1em; width: 2.6em; height: 1.8em; border: .35em solid #3d2214; border-bottom: 0; border-radius: 1.4em 1.4em 0 0; }
.es__forma--3 { top: 4.4em; left: 7em; width: 3.4em; height: 3.4em; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #fff4dc, #f2c76e 70%); box-shadow: 0 .5em 1em rgba(0, 0, 0, .2); }
.es__eti { position: relative; margin-bottom: .4em; font-size: .68em; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; opacity: .85; }
.es__titolo { position: relative; margin-bottom: .7em; font-size: 1.75em; font-weight: 800; line-height: 1; letter-spacing: -.045em; }
.es__btn {
  position: relative;
  display: inline-block;
  padding: .6em 1.05em;
  border-radius: 99em;
  background: var(--es-testo);
  color: #fff;
  font-size: .8em;
  font-weight: 700;
}
.es__btn--pieno { display: block; margin-top: 1.2em; background: var(--es-accento); text-align: center; }

.es__sezione { margin: 1.4em 0 .7em; font-size: 1em; font-weight: 800; letter-spacing: -.03em; }
.es__griglia { display: grid; grid-template-columns: 1fr 1fr; gap: .7em; }
.es__prodotto { padding: .5em .5em .8em; border-radius: .9em; background: #fff; font-size: .8em; }
.es__prodotto b { display: block; font-size: 1em; letter-spacing: -.02em; }
.es__prodotto small { color: #8a7d70; font-size: .85em; }
.es__foto { display: block; aspect-ratio: 1; margin-bottom: .55em; border-radius: .7em; }
.es__foto--1 { background: radial-gradient(ellipse 34% 30% at 50% 60%, #8a5432 98%, transparent), radial-gradient(ellipse 18% 16% at 50% 34%, transparent 70%, #6b3d22 72% 90%, transparent 92%), linear-gradient(#f1e4d3, #e3cdb1); }
.es__foto--2 { background: repeating-linear-gradient(90deg, #b9433a 0 .8em, #c9564c .8em 1.6em), linear-gradient(#ead9c6, #ead9c6); background-size: 70% 46%, 100% 100%; background-position: center 58%, 0 0; background-repeat: no-repeat; }
.es__foto--3 { background: radial-gradient(ellipse 12% 8% at 50% 26%, #ffcf6b, transparent), linear-gradient(90deg, transparent 33%, #f4e9d6 33% 67%, transparent 67%) center 75% / 100% 52% no-repeat, linear-gradient(#e2ece0, #cddbca); }
.es__foto--4 { background: radial-gradient(circle at 46% 58%, #3f6b8f 0 26%, transparent 27%), radial-gradient(circle at 70% 56%, transparent 9%, #3f6b8f 10% 15%, transparent 16%), linear-gradient(#e9e3f1, #d8d0e6); }

.es__orari { display: grid; gap: .2em; margin-top: 1.2em; padding: 1em; border-radius: .9em; background: #fff; font-size: .85em; }
.es__aperto { color: #2f7d4a; font-weight: 700; }
.es__mappa {
  position: relative;
  height: 9em;
  margin-top: .8em;
  overflow: hidden;
  border-radius: .9em;
  background:
    linear-gradient(28deg, transparent 46%, #fff 46% 50%, transparent 50%),
    linear-gradient(-62deg, transparent 58%, #fff 58% 61%, transparent 61%),
    linear-gradient(90deg, transparent 30%, #f2e7d9 30% 34%, transparent 34%),
    #e6dccd;
}
.es__pin { position: absolute; top: 34%; left: 47%; width: 1.5em; height: 1.5em; border-radius: 50% 50% 50% 0; background: var(--es-accento); transform: rotate(-45deg); box-shadow: 0 .3em .6em rgba(0, 0, 0, .25); }
.es__recensioni { display: flex; align-items: center; gap: .5em; margin-top: .9em; font-size: .8em; }
.es__stelle { color: #e9a13b; letter-spacing: .1em; }

/* La versione larga, nel computer */
.es--largo { min-height: 100%; padding: 0 2em 2em; }
.es--largo .es__nav { padding: 1.1em 0; }
.es--largo .es__hero { padding: 9em 2.2em 2em; }
.es--largo .es__forma--1 { top: -4em; right: 4em; width: 16em; height: 16em; }
.es--largo .es__forma--2 { top: 2em; left: auto; right: 22em; }
.es--largo .es__forma--3 { top: 5em; left: auto; right: 12em; }
.es--largo .es__titolo { max-width: 9em; font-size: 2.4em; }
.es--largo .es__griglia { grid-template-columns: repeat(4, 1fr); margin-top: 1.2em; }


/* ---------- 3b. 02 Esempi (tre siti di esempio) ----------
   Ogni riquadro apre un sito della cartella "esempi". In alto c'è
   un telefono 3D (lo stesso del blocco 2c) con dentro la foto vera della
   home (img/esempi): la foto scorre piano su e giù, il telefono dondola e
   segue il mouse. Al clic il telefono vola verso di voi (js/home-page.js,
   blocco 2d, e .volo qui sotto).
   La grandezza dipende dalla larghezza del riquadro (cqi = 1% della
   larghezza del "contenitore", cioè del riquadro). */
.esempi__sotto { max-width: 34em; margin-top: -18px; color: var(--bianco-2); font-size: 1.15rem; }
.esempi-siti { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 36px; }
.esempio-sito {
  container-type: inline-size;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px 12px 24px;
  border-radius: 30px;
  text-decoration: none;
  transition: transform .3s var(--curva);
}
.esempio-sito:hover { transform: translateY(-6px); }
.esempio-sito > :not(.esempio-tel) { margin-inline: 12px; }
.esempio-sito__tipo { margin-top: 16px; color: var(--lime); font-size: .88rem; font-weight: 600; }
.esempio-sito strong { font-size: clamp(1.7rem, 2.4vw, 2.1rem); font-weight: 700; line-height: 1; letter-spacing: -.045em; }
.esempio-sito__testo { color: var(--bianco-2); }
.esempio-sito__pagine { color: var(--bianco-3); font-size: .88rem; }
.esempio-sito__vai { margin-top: 12px; font-weight: 600; }
.esempio-sito__vai span { display: inline-block; transition: translate .3s var(--curva), color .3s; }
.esempio-sito:hover .esempio-sito__vai span { translate: 3px -3px; color: var(--lime); }
.esempi__nota { margin: 22px 0 0; color: var(--bianco-3); font-size: .9rem; }

/* Il palco del telefono, con un alone del colore del sito dietro */
.esempio-tel {
  display: grid;
  place-items: center;
  height: 25em;
  overflow: hidden;
  border-radius: 20px;
  font-size: clamp(9px, 3.6cqi, 15px);
  perspective: 60em;
}
.esempio-tel--gastronomia { background: radial-gradient(closest-side, rgba(40, 120, 85, .45), transparent), rgba(255, 255, 255, .02); }
.esempio-tel--fioraio { background: radial-gradient(closest-side, rgba(201, 61, 104, .4), transparent), rgba(255, 255, 255, .02); }
.esempio-tel--falegname { background: radial-gradient(closest-side, rgba(214, 150, 80, .36), transparent), rgba(255, 255, 255, .02); }
.esempio-tel .tel3d { --w: 10em; transform: rotateY(-18deg) rotateX(6deg); transition: transform .6s var(--curva); }
.esempio-sito:hover .esempio-tel .tel3d { transform: rotateY(-4deg) rotateX(2deg) translateZ(1.2em); }   /* si gira verso di voi */
/* la foto della home: larga quanto lo schermo, scorre piano su e giù */
.tel3d__pagina { display: block; width: 100%; height: auto; }
@keyframes pagina-scorre {
  0%, 10% { transform: translateY(0); }
  90%, 100% { transform: translateY(-62%); }
}

/* Il volo: una copia del telefono sopra a tutto (position: fixed) che si
   avvicina e si gira finché lo schermo copre la finestra; poi si apre il sito */
.volo { position: fixed; inset: 0; z-index: 200; perspective: 1400px; pointer-events: none; }
.volo .tel3d { position: absolute; margin: 0; transform-origin: 50% 50%; }

@media (prefers-reduced-motion: no-preference) and (max-width: 760px) {
  .ventaglio__tel--2 img { animation: pagina-scorre 16s ease-in-out infinite alternate; }
}
@media (prefers-reduced-motion: no-preference) {
  .esempio-tel.anima .tel3d__pagina { animation: pagina-scorre 16s ease-in-out infinite alternate; }
}

@media (max-width: 900px) {
  .esempi-siti { grid-template-columns: minmax(0, 1fr); }
  .esempio-tel { height: 22em; font-size: clamp(9px, 3cqi, 13px); }
}


/* ---------- 3c. 03 Prezzi (tre riquadri, quello del sito in evidenza) ---------- */
.prezzi { display: grid; grid-template-columns: 1fr 1.12fr 1fr; gap: 18px; align-items: stretch; margin-top: 36px; }
.prezzo { display: flex; flex-direction: column; padding: clamp(24px, 3vw, 34px); border-radius: var(--raggio); }
.prezzo p { margin: 0; }
.prezzo--forte { box-shadow: inset 0 0 0 1.5px var(--lime), 0 30px 70px rgba(200, 255, 46, .08); }
.prezzo__bollino { align-self: flex-start; margin-bottom: 16px !important; padding: .35em .85em; border-radius: 999px; background: var(--lime); color: var(--nero); font-size: .78rem; font-weight: 700; }
.prezzo__tipo { color: var(--bianco-3); font-size: .8rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.prezzo__cifra { margin: .2em 0 .08em !important; font: 800 clamp(3rem, 5.5vw, 4.4rem)/1 var(--font); letter-spacing: -.05em; }
.prezzo__cifra small { margin-left: .1em; color: var(--bianco-3); font-size: .32em; font-weight: 600; letter-spacing: 0; }
.prezzo--forte .prezzo__cifra { color: var(--lime); }
.prezzo__quando { color: var(--bianco-2); font-weight: 500; }
.prezzo__lista { display: grid; gap: 11px; margin: 22px 0 0; padding: 20px 0 0; border-top: 1px solid var(--linea); list-style: none; }
.prezzo__lista li { display: flex; gap: 10px; align-items: flex-start; color: var(--bianco-2); font-size: .98rem; line-height: 1.4; }
.prezzo__lista .icona { flex-shrink: 0; width: 1.1em; height: 1.1em; margin-top: .18em; color: var(--lime); }
.prezzi__nota { margin: 22px 0 0; color: var(--bianco-3); font-size: .9rem; }
@media (max-width: 900px) {
  .prezzi { grid-template-columns: minmax(0, 1fr); }
  .prezzo--forte { order: -1; }          /* sul telefono il sito (480 €) viene per primo */
}

/* Il ventaglio dell'apertura: esiste solo sul telefono (blocco 6b) */
.ventaglio { display: none; }


/* ---------- 4. 04 Per saperne di più (tre riquadri in vetro) ---------- */
/* Sezioni vicine (Esempi → Per saperne di più → Contatti): lo spazio fra
   loro è la metà del solito. --sopra = meno spazio sotto la sezione,
   --attaccata = meno spazio sopra */
.sezione--sopra { padding-bottom: clamp(44px, 5vw, 70px); }
.sezione--attaccata { padding-top: clamp(44px, 5vw, 70px); }

/* Stessa struttura dei riquadri di Esempi e dei recapiti: etichetta lime
   con icona, titolo, testo e l'invito in fondo */
.riquadri { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.riquadro {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 26px 24px 24px;
  border-radius: 30px;
  text-decoration: none;
  transition: transform .3s var(--curva);
}
.riquadro:hover { transform: translateY(-6px); }
.riquadro__tipo { display: flex; align-items: center; gap: .5em; color: var(--lime); font-size: .88rem; font-weight: 600; }
.riquadro__tipo .icona { width: 1.15em; height: 1.15em; }
.riquadro strong { margin-top: 10px; font-size: clamp(1.7rem, 2.4vw, 2.1rem); font-weight: 700; line-height: 1; letter-spacing: -.045em; }
.riquadro__testo { color: var(--bianco-2); }
.riquadro__vai { margin-top: auto; padding-top: 14px; font-weight: 600; }
.riquadro__vai span { display: inline-block; transition: translate .3s var(--curva), color .3s; }
.riquadro:hover .riquadro__vai span { translate: 3px -3px; color: var(--lime); }
.riquadro[href^="#"]:hover .riquadro__vai span { translate: 0 3px; }


/* ---------- 5. 04 Contatti ----------
   In alto i recapiti diretti (quattro riquadri), sotto il modulo diviso in
   quattro gruppi numerati: voi, il sito, i social, la bozza. */
.contatti__titolo {
  max-width: 11em;
  margin-bottom: .35em;
  font-size: clamp(2.6rem, 7vw, 6rem);
  font-weight: 700;
  line-height: .98;
  letter-spacing: -.055em;
}
.contatti__sotto { max-width: 32em; color: var(--bianco-2); font-size: 1.2rem; }

/* Il modulo a sinistra e, accanto, i recapiti (Samuele, Michele, email).
   I recapiti restano fermi (sticky) mentre si scorre il modulo, che è più lungo */
.contatti__griglia {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(250px, 300px);
  gap: 18px;
  align-items: start;
  margin-top: clamp(36px, 5vw, 56px);
}
.recapiti { position: sticky; top: 100px; display: grid; gap: 14px; }
.recapito {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding: 22px;
  border-radius: 24px;
}
.recapito__chi { display: flex; align-items: center; gap: .5em; margin: 0; color: var(--bianco-2); font-size: .92rem; font-weight: 600; }
.recapito__chi .icona { color: var(--lime); }
.recapito__valore {
  color: var(--bianco);
  font-size: clamp(1.1rem, 1.5vw, 1.3rem);
  font-weight: 700;
  letter-spacing: -.02em;
  text-decoration: none;
  overflow-wrap: anywhere;            /* un'email lunga va a capo invece di uscire dal riquadro */
  transition: color .2s;
}
.recapito__valore:hover { color: var(--lime); }
.recapito__azione {
  display: inline-flex;
  align-items: center;
  gap: .45em;
  margin-top: auto;                   /* in fondo al riquadro */
  padding: .45em .9em;
  border-radius: 999px;
  background: rgba(255, 255, 255, .08);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18);
  color: var(--bianco);
  font-size: .9rem;
  font-weight: 500;
  text-decoration: none;
  transition: background-color .2s, color .2s;
}
.recapito__azione:hover { background: var(--lime); color: var(--nero); }

/* Il modulo: si compila e apre WhatsApp col messaggio pronto (js/home-page.js, blocco 3) */
.modulo { padding: clamp(22px, 3vw, 40px); border-radius: 30px; }
.modulo__testa { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 24px; margin-bottom: 10px; }
.modulo h3 { margin: 0; font-size: 2rem; letter-spacing: -.04em; }
.modulo__testa p { margin: 0; color: var(--bianco-3); }

/* I gruppi: a sinistra numero e nome, a destra le domande.
   Il numero diventa lime mentre si compila quel gruppo
   (:focus-within = uno dei suoi campi è selezionato) */
.gruppo {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  gap: 14px 28px;
  padding: 24px 0;
  border-top: 1px solid var(--linea);
}
.gruppo__titolo { display: flex; align-items: center; gap: 12px; align-self: start; margin: 0; font-size: 1.15rem; font-weight: 700; letter-spacing: -.02em; }
.gruppo__titolo span {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 11px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16);
  color: var(--bianco-2);
  font-size: .95rem;
  font-weight: 800;
  transition: background-color .3s, color .3s, box-shadow .3s;
}
.gruppo:focus-within .gruppo__titolo span { background: var(--lime); box-shadow: none; color: var(--nero); }
.gruppo__campi { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 16px 20px; align-items: start; }
.gruppo__campi--tre { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* I campi che compaiono solo se servono: l'indirizzo del sito se ne avete
   già uno, che attività avete se avete scelto "Altro". Se il gruppo "ha"
   (:has) una scelta con data-mostra spuntata o selezionata, il campo si vede.
   @supports: i browser che non conoscono :has li mostrano sempre */
@supports selector(:has(*)) {
  .campo--se { display: none; }
  .gruppo:has([data-mostra]:checked) .campo--se { display: block; animation: campo-entra .35s var(--curva); }
}
@keyframes campo-entra { from { opacity: 0; translate: 0 -6px; } }

.campo { min-width: 0; margin: 0; padding: 0; border: 0; }
.campo > label, .campo legend { display: block; margin-bottom: 6px; padding: 0; color: var(--bianco-2); font-size: .9rem; font-weight: 500; }
.campo label span { color: var(--bianco-3); }

/* caselle di testo, tendina e note (non le scelte tonde o quadrate) */
.campo input:not([type="radio"], [type="checkbox"]),
.campo select,
.campo textarea {
  width: 100%;
  padding: .85em 1em;
  border: 0;
  border-radius: 14px;
  background: rgba(255, 255, 255, .07);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14);
  color: var(--bianco);
  font: inherit;
  font-size: 1rem;
  transition: box-shadow .2s, background-color .2s;
}
.campo select option { background: #17171a; color: var(--bianco); }
.campo input:not([type="radio"], [type="checkbox"]):focus, .campo select:focus, .campo textarea:focus {
  outline: none;
  background: rgba(255, 255, 255, .1);
  box-shadow: inset 0 0 0 1px var(--lime), 0 0 0 4px rgba(200, 255, 46, .18);
}
.campo textarea { resize: vertical; }
.campo input::placeholder, .campo textarea::placeholder { color: var(--bianco-3); }

/* Le domande a scelta prendono tutta la riga del gruppo (il campo che
   compare solo se serve va sotto): così le risposte stanno in fila */
.gruppo__campi > fieldset.campo { grid-column: 1 / -1; }

/* Le scelte (una sola o più di una): pillole della stessa larghezza, tutte
   sulla stessa riga (grid-auto-flow: column = una colonna per risposta),
   che diventano lime quando sono scelte */
.scelte { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 8px; max-width: 600px; }
.scelte label {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: .6em .7em;
  border-radius: 999px;
  background: rgba(255, 255, 255, .06);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16);
  color: var(--bianco);
  line-height: 1.2;
  text-align: center;
  cursor: pointer;
  transition: background-color .2s, color .2s;
}
/* il pallino/quadratino del browser non si vede (la pillola lime basta a
   dire cosa è scelto), ma c'è ancora: funziona con la tastiera e i lettori di schermo */
.scelte input { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; }
.scelte label:has(input:checked) { background: var(--lime); box-shadow: none; color: var(--nero); font-weight: 600; }
.scelte label:has(input:focus-visible) { outline: 2px solid var(--lime); outline-offset: 2px; }

/* Il bottone, in fondo */
.modulo__invia { padding-top: 24px; border-top: 1px solid var(--linea); }

/* Tablet: i recapiti vanno sotto il modulo, tre in fila; il nome del gruppo sopra le domande */
@media (max-width: 1000px) {
  .contatti__griglia { grid-template-columns: minmax(0, 1fr); }
  .recapiti { position: static; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .gruppo { grid-template-columns: minmax(0, 1fr); }
}
/* Telefono: un recapito per riga (nome sopra, numero e WhatsApp affiancati)
   e una domanda sotto l'altra */
@media (max-width: 640px) {
  .recapiti { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .recapito { flex-direction: row; flex-wrap: wrap; align-items: center; padding: 16px 18px; }
  .recapito__chi { flex-basis: 100%; }
  .recapito__azione { margin: 0 0 0 auto; }
  .gruppo__campi, .gruppo__campi--tre { grid-template-columns: minmax(0, 1fr); }
  .scelte { gap: 6px; }
  .scelte label { padding: .6em .35em; font-size: .9rem; }   /* più strette: quattro social stanno in fila */
  .modulo .btn { width: 100%; justify-content: center; }
}


/* ---------- 6. Tablet e telefono ---------- */
@media (max-width: 1000px) {
  /* Passi: i riquadri piccoli diventano solo numeri, il palco si allarga */
  .js .passi__binario { width: 64px; }
  .mini-passo__nome { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .js .passi__palco { left: calc(var(--sinistra) + 90px); }
  .passo, .online { gap: 22px; }
  .online__titolo { font-size: clamp(2.2rem, 5vw, 3.6rem); }
}

/* Finestre basse (computer piccoli, finestra non a tutto schermo):
   i riquadri dei passi e il computer di "Il sito è online" si rimpiccioliscono
   per stare tra il titolo e la linea in basso */
@media (max-height: 820px) and (min-width: 761px) {
  .passi { --sotto-titolo: calc(clamp(96px, 13svh, 112px) + 96px); }
  .js .passi__testa { top: clamp(96px, 13svh, 112px); }   /* almeno 20px sotto il menu */
  .passi__titolo { font-size: clamp(1.7rem, 4.6svh, 2.6rem); }
  .passo__numero { margin-bottom: 8px; font-size: clamp(4rem, 14svh, 8rem); }
  .passo__etichette, .online__etichetta { margin-bottom: 10px; }
  .passo h3 { font-size: clamp(1.7rem, 5.4svh, 2.6rem); }
  .passo__descrizione { font-size: 1rem; }
  .passo__voi { margin-top: 12px; padding-top: 10px; font-size: .9rem; }
  .passo__visivo { font-size: clamp(9px, 2svh, 13px); }
  .online__titolo { font-size: clamp(2rem, 7svh, 3.4rem); }
  .online__testo p:not(.online__etichetta) { font-size: 1rem; }
  .browser__pagina { height: max(140px, calc(100svh - 330px)); }
  .js .passi__binario { gap: 8px; }
}

/* Tablet in verticale (stretto ma alto): il disegno va sotto il testo */
@media (max-width: 1000px) and (min-height: 821px) {
  .passo { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .passo__visivo { justify-self: start; max-width: 34em; font-size: 12px; }
}

@media (max-width: 900px) {
  .riquadri { grid-template-columns: 1fr; }
}

/* ---------- 6b. Il telefono: una versione tutta sua ----------
   Sotto i 760px il sito non è il computer rimpicciolito (scelta di Samuele,
   26/10/2026):
   - apertura corta: nome, telefono fermo al centro (il sito dentro scorre
     piano da solo), frase e bottoni subito sotto. Niente scena da scorrere.
   - cinque passi in lista: uno sotto l'altro, con una linea lime che si
     riempie scendendo e i numeri che si accendono (js/home-page.js, blocco 2b) */
@media (max-width: 760px) {
  /* --- Apertura corta --- */
  .js .apertura { height: auto; }
  .apertura__scena,
  .js .apertura__scena {
    position: relative;
    height: auto;
    min-height: 0;
    overflow: visible;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 108px var(--margine) 30px;
    text-align: center;
  }
  .apertura__nome { position: static; padding: 0; opacity: 1; translate: none; }
  .apertura__titolo { font-size: 18vw; }
  .apertura__sotto { margin-top: 1.1em; font-size: 1rem; }
  .apertura__scendi { display: none; }
  .telefono {
    --w: 52vw;
    position: relative;
    top: auto;
    left: auto;
    margin: 34px 0 0;
    transform: none;
  }
  .telefono__corpo { transform: rotateY(-14deg) rotateX(6deg) rotateZ(1.5deg); }
  /* nell'HTML la frase viene prima del telefono: qui l'ordine è nome → telefono → frase */
  .telefono { order: 1; }
  .apertura__testo { order: 2; }
  .telefono__sito { transform: none; animation: sito-scorre 16s ease-in-out infinite alternate; }
  .apertura__testo {
    position: static;
    width: auto;
    margin-top: 42px;
    opacity: 1;
    translate: none;
    pointer-events: auto;
  }
  .apertura__frase { font-size: clamp(2rem, 9vw, 2.7rem); }
  .apertura__testo p { max-width: 22em; margin-inline: auto; font-size: 1.02rem; }
  .apertura__bottoni { justify-content: center; }
  .apertura__bottoni .btn { padding: .8em 1.2em; font-size: .95rem; }
  /* La C (scelta di Michele, 26 ott 2026): niente nome gigante e niente
     telefono disegnato; frase e bottoni subito, poi il ventaglio con le home
     vere dei tre esempi. Il nome resta per Google e per chi usa un lettore
     di schermo, ma non si vede (nel menu c'è già). */
  .apertura__nome { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .telefono { display: none; }
  .apertura__testo { order: 1; margin-top: 0; }
  .ventaglio { order: 2; position: relative; display: block; width: calc(100% + 2 * var(--margine)); height: 350px; margin: 30px calc(var(--margine) * -1) 0; overflow: hidden; text-decoration: none; }
  .ventaglio__tel { position: absolute; top: 0; left: 50%; width: 40vw; aspect-ratio: 9 / 19; padding: 2.4%; border-radius: 15% / 7.2%; background: linear-gradient(145deg, #3a3a3e, #121214 60%); box-shadow: 0 30px 60px rgba(0, 0, 0, .6), inset 0 0 0 1px rgba(255, 255, 255, .14); }
  .ventaglio__tel--1 { translate: -112% 34px; rotate: -11deg; }
  .ventaglio__tel--2 { z-index: 2; width: 44vw; translate: -50% 0; }
  .ventaglio__tel--3 { translate: 12% 34px; rotate: 11deg; }
  .ventaglio__schermo { position: relative; display: block; height: 100%; overflow: hidden; border-radius: 12.5% / 6%; background: #fff; }
  .ventaglio__schermo img { display: block; width: 100%; height: auto; }
  .ventaglio__isola { position: absolute; top: 3.2%; left: 50%; z-index: 2; width: 30%; height: 3.4%; border-radius: 99px; background: #000; translate: -50% 0; }
  .ventaglio__nota { position: absolute; right: 0; bottom: 0; left: 0; z-index: 3; padding: 40px 0 6px; background: linear-gradient(transparent, var(--nero) 70%); color: var(--bianco-3); font-size: .8rem; }

  /* qui nome, frase e telefono stanno fermi: niente livelli preparati a parte
     (sul telefono la memoria per la grafica è poca) */
  .apertura__nome, .apertura__testo, .telefono { will-change: auto; }

  /* --- Cinque passi in lista, con la linea --- */
  .js .passi { height: auto; padding: 80px 0 30px; }
  .passi__scena,
  .js .passi__scena { position: relative; height: auto; overflow: visible; }
  .js .passi__testa { position: static; padding-inline: var(--margine); }
  .passi__titolo { font-size: clamp(1.9rem, 8vw, 2.4rem); }
  .js .passi__binario, .js .passi__avanzamento { display: none; }
  .js .passi__palco {
    position: relative;
    inset: auto;
    margin: 36px var(--margine) 0;
    padding-left: 58px;
  }
  /* la linea: grigia sotto, lime sopra che si riempie fino a --riempi.
     Finisce al centro della spunta ✓: --fine-linea lo calcola js/home-page.js (blocco 2b) */
  .js .passi__palco::before,
  .js .passi__palco::after {
    content: "";
    position: absolute;
    top: 10px;
    bottom: var(--fine-linea, 10px);
    left: 19px;
    width: 2px;
    border-radius: 2px;
    background: var(--linea);
  }
  .js .passi__palco::after { background: var(--lime); transform: scaleY(var(--riempi, 0)); transform-origin: top; will-change: transform; }
  .js .passo,
  .js .online {
    will-change: auto;                  /* nella lista stanno fermi */
    position: relative;
    inset: auto;
    width: auto;
    height: auto;
    margin: 0 0 46px;
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: none;
  }
  /* il numero diventa un quadratino sulla linea: grigio, lime quando lo superi */
  .passo__numero {
    position: absolute;
    top: -4px;
    left: -58px;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    margin: 0;
    border-radius: 12px;
    background: #141417;
    -webkit-background-clip: border-box;
    background-clip: border-box;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16);
    color: var(--bianco-3);
    font-size: 1.05rem;
    line-height: 1;
    letter-spacing: 0;
    transition: background-color .3s, color .3s, box-shadow .3s;
  }
  .passo.acceso .passo__numero { background: var(--lime); color: var(--nero); box-shadow: 0 0 0 6px rgba(200, 255, 46, .14); }
  .passo { display: block; }          /* nella lista il disegno va sotto il testo */
  .passo__etichette { margin-bottom: 12px; }
  .passo h3 { margin-bottom: .3em; font-size: 1.7rem; }
  .passo__descrizione { font-size: 1rem; }
  .passo__voi { margin-top: 16px; padding-top: 12px; font-size: .95rem; }
  .passo__visivo { max-width: none; margin-top: 22px; font-size: clamp(9.5px, 2.8vw, 12px); }
  .passo__visivo .pc3d { scale: .86; }   /* il portatile è il più largo: così la tastiera non tocca il bordo */
  /* "Il sito è online" in fondo alla linea, con la spunta: come i numeri sta
     SOPRA la linea (z-index) ed è grigia finché la linea non la raggiunge */
  .js .online { display: grid; grid-template-columns: 1fr; gap: 18px; margin-bottom: 0; }
  .online::before {
    content: "✓";
    position: absolute;
    top: -2px;
    left: -58px;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #141417;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16);
    color: var(--bianco-3);
    font-weight: 800;
    transition: background-color .3s, color .3s, box-shadow .3s;
  }
  .online.acceso::before { background: var(--lime); color: var(--nero); box-shadow: 0 0 0 6px rgba(200, 255, 46, .14); }
  .online__titolo { font-size: clamp(2.2rem, 9vw, 3rem); }
  .online__testo p:not(.online__etichetta) { font-size: 1rem; }
  .online .btn { padding: .8em 1.2em; }
  .browser__pagina { height: 190px; font-size: 6.4px; }
}

/* Il sito dentro il telefono dell'apertura (solo sul telefono): scorre piano su e giù */
@keyframes sito-scorre {
  0%, 12% { transform: translateY(0); }
  88%, 100% { transform: translateY(-27%); }
}


/* ---------- 7. Senza JavaScript o con meno animazioni ----------
   Le scene diventano sezioni normali: l'apertura si vede già nella posizione
   finale (frase a sinistra, telefono a destra) e i passi uno sotto l'altro. */
html:not(.js) .apertura { --a: 1; --b: 1; --c: 1; }
html:not(.js) .apertura__testo { pointer-events: auto; }
html:not(.js) .passi__scena, html:not(.js) .passi__palco { padding-inline: var(--sinistra); }
html:not(.js) .passi { padding: 110px 0 60px; }
html:not(.js) .passo, html:not(.js) .online { margin: 18px auto 0; }

@media (prefers-reduced-motion: reduce) {
  .apertura { --a: 1 !important; --b: 1 !important; --c: 1 !important; }
  .apertura__testo { pointer-events: auto; }
  .apertura__scena { height: 100svh; }

  .js .passi { padding: 110px 0 60px; }
  .js .passi__testa, .js .passi__palco { position: static; padding-inline: var(--sinistra); }
  .js .passi__binario, .js .passi__avanzamento { display: none; }
  .js .passo, .js .online { position: static; margin: 18px auto 0; opacity: 1; visibility: visible; filter: none; transform: none; }
}