/* =========================================================================
   cirocoins — foglio di stile
   Impianto da wondermakers.games: titoli giganti, blocchi a due colonne con
   media grande, pill, strisce diagonali, pannello chiaro, chiusura a tinta
   piena. Le immagini sono le creatività approvate, ritagliate dal board.
   Palette: quella verde scelta da Ciro.
   ========================================================================= */

:root{
  --nero:#020706;
  --struttura:#0D1712;
  --verde:#20FF6B;
  --verde-chiaro:#7DFFB8;
  --carta:#F2FFF7;

  --struttura-2:#132018;
  --fog:#8DA396;
  --fog-dim:#5C6E64;
  --filo:rgba(242,255,247,.10);
  --filo-forte:rgba(242,255,247,.22);

  --display:'Archivo',system-ui,sans-serif;
  --insegna:'Orbitron','Archivo',system-ui,sans-serif;
  --testo:'Hanken Grotesk',system-ui,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,monospace;

  --contenitore:1280px;
  --gutter:clamp(20px,5vw,48px);
  --sezione-y:clamp(80px,11vw,150px);
  --raggio:24px;
  --raggio-s:16px;

  --ease:cubic-bezier(.16,1,.3,1);
}

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }

html{ background:var(--nero); }
html.lenis,html.lenis body{ height:auto; }
.lenis.lenis-smooth{ scroll-behavior:auto !important; }

body{
  font-family:var(--testo); background:var(--nero); color:var(--carta);
  max-width:100vw;
  font-size:17px; line-height:1.65;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
body.bloccato{ overflow:hidden; height:100vh; }

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
::selection{ background:var(--verde); color:var(--nero); }

/* =========================================================================
   1 · Cancello arcade
   ========================================================================= */

.cancello{
  position:fixed; inset:0; z-index:9999;
  display:grid; place-items:center; overflow:hidden;
  background:var(--nero);
  transition:opacity .7s var(--ease), visibility .7s;
}
.cancello[hidden]{ display:none; }
.cancello.via{ opacity:0; visibility:hidden; pointer-events:none; }

/* Il fondo della grafica, rifatto in CSS invece che con una foto: i raggi
   diagonali e l'alone verde. Così scala su qualsiasi schermo e non si porta
   dietro le scritte del board da cui era ritagliato. */
.raggi-fondo{
  position:absolute; inset:-20%;
  background-image:
    linear-gradient(115deg, transparent 39.2%, rgba(32,255,107,.50) 39.8%, rgba(125,255,184,.85) 40.1%, rgba(32,255,107,.45) 40.4%, transparent 41%),
    linear-gradient(115deg, transparent 47%, rgba(32,255,107,.22) 47.6%, transparent 48.4%),
    linear-gradient(115deg, transparent 55%, rgba(32,255,107,.60) 55.5%, rgba(32,255,107,.15) 56.2%, transparent 57%),
    linear-gradient(115deg, transparent 66%, rgba(32,255,107,.14) 66.8%, transparent 67.6%),
    linear-gradient(115deg, transparent 73%, rgba(125,255,184,.34) 73.5%, transparent 74.3%),
    linear-gradient(115deg, transparent 84%, rgba(32,255,107,.18) 84.7%, transparent 85.5%);
  filter:blur(.5px);
}
.cancello__fondo{ position:absolute; inset:0; overflow:hidden; opacity:.85; }
.cancello__velo{
  position:absolute; inset:0;
  background:
    radial-gradient(52% 46% at 50% 44%, rgba(32,255,107,.22) 0%, rgba(2,7,6,0) 72%),
    linear-gradient(180deg, rgba(2,7,6,.55) 0%, rgba(2,7,6,.3) 45%, rgba(2,7,6,.8) 100%);
}
.cancello__dentro{ position:relative; text-align:center; padding:0 var(--gutter); width:100%; }

/* PNG trasparente completo: le scie restano intere e i raggi del fondo
   continuano dietro al marchio senza riquadri o bordi tagliati. */
.cancello__marchio{
  width:clamp(170px,22vw,270px); margin:0 auto 28px;
  filter:drop-shadow(0 0 44px rgba(32,255,107,.45));
}

/* Il wordmark è TESTO, non un'immagine: Orbitron 900 inclinato di 12°, che è
   la geometria squadrata del lockup della grafica. Così resta nitido a
   qualsiasi misura e su qualsiasi schermo, cosa che un ritaglio non fa. */
/* Identico al marchio nell'header: tinta piatta e nessun alone. Il bagliore
   in text-shadow sfocava i bordi e faceva sembrare la scritta di qualità
   più bassa di quella, che invece è la stessa identica cosa. */
.wordmark{
  font-family:var(--display); font-weight:800;
  text-transform:lowercase; letter-spacing:-.045em;
  display:inline-block;
  color:var(--carta);
  padding-right:.06em;   /* la «s» finale sbordava e veniva tagliata */
}
.wordmark em{
  font-style:normal; color:var(--verde);
}

.insegna{ position:relative; width:min(680px,92vw); margin:0 auto 54px; }
.insegna__testo{
  display:block; font-size:clamp(46px,10.5vw,110px); line-height:1.02;
  clip-path:inset(0 100% 0 0);
  transition:clip-path .1s linear;
}
.insegna__trattini{ display:flex; gap:clamp(6px,1.4vw,14px); margin-top:14px; }
.insegna__t{
  flex:1; height:2px; background:var(--filo-forte);
  transition:background-color .2s, box-shadow .2s;
}
.insegna__t.on{ background:var(--verde); box-shadow:0 0 12px rgba(32,255,107,.7); }

.cancello__start{
  font-family:var(--mono); font-weight:700; font-size:12px;
  letter-spacing:.2em; text-transform:uppercase;
  background:linear-gradient(135deg, var(--verde-chiaro), var(--verde));
  color:var(--nero); padding:15px 44px; border-radius:999px;
  box-shadow:0 0 40px rgba(32,255,107,.4);
  opacity:0; transform:translateY(10px);
  transition:opacity .45s var(--ease), transform .45s var(--ease), filter .2s;
}
.cancello__start.on{ opacity:1; transform:none; }
.cancello__start:hover{ filter:brightness(1.1); }

.cancello__salta{
  position:absolute; right:var(--gutter); bottom:28px;
  font-family:var(--mono); font-size:10px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--fog-dim); z-index:2;
}
.cancello__salta:hover{ color:var(--verde); }

/* =========================================================================
   2 · Cursore e navigazione
   ========================================================================= */

.cursore{
  position:fixed; top:0; left:0; z-index:9000;
  width:28px; height:28px; border-radius:50%;
  border:1.5px solid var(--verde); pointer-events:none; opacity:0;
  transition:opacity .3s, width .28s var(--ease), height .28s var(--ease), background-color .28s;
  will-change:transform;
}
.cursore.viva{ opacity:1; }
.cursore.presa{ width:58px; height:58px; background:rgba(32,255,107,.14); }
@media (hover:none){ .cursore{ display:none; } }

/* La reference chiama questa barra «controller»: è un HUD da gioco, con gli
   indicatori audio / online / fps a sinistra e la navigazione a destra.
   Sta staccata dai bordi e ha gli angoli tondi, non è una barra piena. */
.nav{
  position:fixed; top:14px; left:14px; right:14px; z-index:800;
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  padding:12px 16px 12px 14px; border-radius:18px;
  background:linear-gradient(90deg, rgba(19,32,24,.86), rgba(2,7,6,.86));
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  border:1px solid var(--filo);
  transition:box-shadow .4s var(--ease), border-color .4s;
}
.nav.attaccata{ border-color:rgba(32,255,107,.24); box-shadow:0 12px 44px rgba(0,0,0,.6); }

.hud{ display:flex; align-items:center; gap:22px; margin-left:8px; }
.hud__voce{ display:flex; flex-direction:column; align-items:center; gap:5px; min-width:42px; }
.hud__spia{
  width:8px; height:8px; border-radius:50%;
  background:rgba(242,255,247,.18); border:1px solid rgba(242,255,247,.2);
  transition:background-color .3s, box-shadow .3s;
}
.hud__spia.accesa{ background:var(--verde); box-shadow:0 0 10px rgba(32,255,107,.9); }
.hud__spia.pulsa{ animation:battito 1.6s ease-in-out infinite; }
@keyframes battito{ 0%,100%{ opacity:.35 } 50%{ opacity:1 } }
.hud__num{
  font-family:var(--mono); font-size:11px; font-weight:700; color:var(--verde);
  line-height:1; min-width:22px; text-align:center;
}
.hud__eti{
  font-family:var(--mono); font-size:8px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--fog-dim); line-height:1;
}
@media (max-width:900px){ .hud{ display:none; } }
.nav__marchio{ display:flex; align-items:center; gap:11px; }
.nav__marchio img{ width:36px; }
.nav__nome{
  font-family:var(--display); font-weight:800; font-size:20px;
  letter-spacing:-.03em; text-transform:lowercase;
}
.nav__nome em{ font-style:normal; color:var(--verde); }
.nav__voci{ display:flex; align-items:center; gap:26px; }
.nav__menu{ display:none; }
.nav__voce{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--fog); transition:color .2s;
}
.nav__voce:hover{ color:var(--verde); }
.nav__btn{
  display:inline-flex; align-items:center; justify-content:center;
  font-family:var(--mono); font-weight:700; font-size:10.5px;
  letter-spacing:.16em; text-transform:uppercase;
  background:var(--verde); color:var(--nero);
  padding:11px 20px; border-radius:999px;
  transition:filter .2s;
}
.nav__btn:hover{ filter:brightness(1.12); }
@media (max-width:860px){ .nav__voci .solo-grande{ display:none; } }

/* =========================================================================
   3 · Impianto
   ========================================================================= */

/* clip perché gli .alone sporgono di proposito oltre il bordo: senza questo
   la pagina scrolla di lato. clip invece di hidden per non creare un
   contenitore di scorrimento. */
.sezione{ padding:var(--sezione-y) 0; position:relative; overflow:clip; contain:paint; }
.contenitore{ width:100%; max-width:var(--contenitore); margin:0 auto; padding:0 var(--gutter); position:relative; z-index:2; }
.stretto{ max-width:860px; }

/* Aloni verdi di sfondo: sono i gradienti che danno profondità alle sezioni */
.alone{
  position:absolute; border-radius:50%; pointer-events:none; z-index:0;
  background:radial-gradient(circle, rgba(32,255,107,.13) 0%, rgba(2,7,6,0) 68%);
}
.alone--sx{ width:min(820px,92vw); aspect-ratio:1; left:-18%; top:6%; }
.alone--dx{ width:min(760px,88vw); aspect-ratio:1; right:-16%; bottom:2%; }

.occhiello{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.26em;
  text-transform:uppercase; color:var(--verde); margin-bottom:22px;
}

.titolone{
  font-family:var(--display); font-weight:800;
  font-size:clamp(44px,10.5vw,126px); line-height:.92;
  letter-spacing:-.045em; text-align:center;
}
.titolone em{
  font-style:normal;
  background:linear-gradient(135deg, var(--verde-chiaro) 0%, var(--verde) 55%, #0FCB4F 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.titolone.a-sinistra{ text-align:left; }

.sottotitolo{
  text-align:center; color:var(--fog); max-width:56ch;
  margin:26px auto 0; font-size:clamp(16px,1.6vw,19px);
}

.pill{
  display:inline-flex; align-items:center;
  font-family:var(--mono); font-size:10.5px; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase;
  background:var(--verde); color:var(--nero);
  padding:7px 14px; border-radius:999px; white-space:nowrap;
}
.pill--fantasma{ background:rgba(32,255,107,.08); color:var(--verde); border:1px solid rgba(32,255,107,.36); }
.pill-fila{ display:flex; flex-wrap:wrap; gap:8px; }

.btn{
  display:inline-flex; align-items:center; gap:12px;
  font-family:var(--mono); font-weight:700; font-size:12px;
  letter-spacing:.14em; text-transform:uppercase;
  padding:18px 36px; border-radius:999px;
  transition:filter .2s, background-color .25s, color .25s, border-color .25s, box-shadow .3s;
  will-change:transform;
}
.btn--pieno{
  background:linear-gradient(135deg, var(--verde-chiaro), var(--verde));
  color:var(--nero); box-shadow:0 0 0 rgba(32,255,107,0);
}
.btn--pieno:hover{ filter:brightness(1.1); box-shadow:0 10px 46px rgba(32,255,107,.34); }
.btn--filo{ border:1.5px solid var(--filo-forte); color:var(--carta); }
.btn--filo:hover{ border-color:var(--verde); color:var(--verde); }
.btn--nero{ background:var(--nero); color:var(--carta); }
.btn--nero:hover{ filter:brightness(1.7); }

.strisce{
  height:56px; width:100%; position:relative; z-index:2;
  background:repeating-linear-gradient(-55deg, var(--verde) 0 26px, transparent 26px 52px);
}
.strisce--fioche{ background:repeating-linear-gradient(-55deg, var(--struttura-2) 0 26px, transparent 26px 52px); }
.strisce--nere{
  background-color:var(--verde);
  background-image:repeating-linear-gradient(-55deg, var(--nero) 0 26px, transparent 26px 52px);
}

/* =========================================================================
   4 · Nastro scorrevole
   ========================================================================= */

.nastro{
  overflow:hidden; white-space:nowrap; position:relative; z-index:2;
  border-top:1px solid var(--filo); border-bottom:1px solid var(--filo);
  background:linear-gradient(90deg, rgba(32,255,107,.05), rgba(32,255,107,.13), rgba(32,255,107,.05));
  padding:22px 0;
}
.nastro__pista{ display:inline-flex; animation:scorri 32s linear infinite; }
.nastro:hover .nastro__pista{ animation-play-state:paused; }
.nastro__pezzo{
  display:inline-flex; align-items:center; gap:34px; padding-right:34px;
  font-family:var(--display); font-weight:800; font-style:italic;
  font-size:clamp(18px,2.4vw,30px); letter-spacing:-.02em;
  text-transform:uppercase; color:var(--carta);
}
.nastro__pezzo i{ font-style:normal; color:var(--verde); }
@keyframes scorri{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }

/* =========================================================================
   5 · Comparse e movimento
   ========================================================================= */

[data-svela]{
  opacity:0; transform:translateY(28px);
  transition:opacity .8s var(--ease), transform .8s var(--ease);
  transition-delay:var(--ritardo,0ms);
}
[data-svela].visto{ opacity:1; transform:none; }

/* Le immagini entrano scoprendosi dal basso invece che sfumando */
[data-scopri]{
  clip-path:inset(0 0 100% 0); opacity:0;
  transition:clip-path 1.05s var(--ease), opacity .5s linear;
  transition-delay:var(--ritardo,0ms);
}
[data-scopri].visto{ clip-path:inset(0 0 0 0); opacity:1; }

[data-parallasse]{ will-change:transform; }

/* Inclinazione al passaggio del mouse */
.tilt{ transform-style:preserve-3d; transition:transform .45s var(--ease); }
.tilt__in{ transform:translateZ(38px); }

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
  [data-svela],[data-scopri]{ opacity:1; transform:none; clip-path:none; }
  .nastro__pista{ animation:none; }
}

/* =========================================================================
   6 · Apertura
   ========================================================================= */

.apertura{
  min-height:100svh; display:grid; place-items:center;
  text-align:center; position:relative; overflow:hidden;
  padding:140px 0 100px;
}
.apertura__fondo{ position:absolute; inset:0; overflow:hidden; opacity:.6; }
.apertura__velo{
  position:absolute; inset:0;
  background:
    radial-gradient(70% 60% at 50% 34%, rgba(32,255,107,.2) 0%, rgba(2,7,6,0) 68%),
    linear-gradient(180deg, rgba(2,7,6,.7) 0%, rgba(2,7,6,.35) 38%, var(--nero) 96%);
}
.apertura__marchio{
  width:clamp(230px,30vw,390px); margin:0 auto 12px;
  filter:drop-shadow(0 0 70px rgba(32,255,107,.5));
}
/* In apertura il nome è il wordmark dell'artwork, non testo ricomposto */
.apertura__nome{ margin:0 auto; font-size:clamp(62px,13.5vw,168px); line-height:.94; padding:0 .08em; }
/* Niente background-clip:text qui: il riquadro del gradiente finisce dove
   finisce la cassetta del testo, e la «s» in coda restava mozzata. */
.apertura__nome em{ font-style:normal; color:var(--verde); }
.apertura__claim{
  font-family:var(--display); font-weight:800; font-style:italic;
  font-size:clamp(21px,3.5vw,40px); line-height:1.1;
  letter-spacing:-.02em; text-transform:uppercase; margin-top:24px;
}
.apertura__testo{ color:var(--fog); max-width:50ch; margin:20px auto 0; }
.apertura__bottoni{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-top:40px; }
.apertura__giu{
  position:absolute; left:50%; bottom:32px; transform:translateX(-50%);
  font-family:var(--mono); font-size:10px; letter-spacing:.24em;
  text-transform:uppercase; color:var(--fog-dim);
  display:grid; gap:10px; justify-items:center; z-index:2;
}
.apertura__giu span{
  display:block; width:1px; height:36px;
  background:linear-gradient(180deg, transparent, var(--verde));
}

/* =========================================================================
   7 · Blocchi a due colonne con la creatività dentro
   ========================================================================= */

.blocchi{ display:grid; gap:20px; margin-top:64px; }

/* La scheda è SOLO il testo. L'immagine non sta dentro a nessun riquadro:
   vive libera sulla pagina, sborda oltre la colonna e si spegne nei gradienti.
   Metterla in un box la fa sembrare una figurina incollata. */
.blocco{
  display:grid; grid-template-columns:1fr 1fr;
  align-items:center; gap:clamp(20px,4vw,72px);
  position:relative; min-height:clamp(360px,44vw,540px);
}
.blocco--rovescio .blocco__pannello{ order:2; }
.blocco--rovescio .blocco__figura{ order:1; }

.blocco__pannello{
  padding:clamp(28px,3.4vw,52px); border-radius:var(--raggio);
  display:flex; flex-direction:column; justify-content:center; gap:20px;
  position:relative; overflow:hidden; border:1px solid var(--filo);
}
.blocco__pannello::after{
  content:''; position:absolute; width:420px; aspect-ratio:1;
  right:-160px; top:-120px; border-radius:50%;
  background:radial-gradient(circle, rgba(32,255,107,.18), transparent 68%);
  pointer-events:none;
}
.blocco__n{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.24em;
  color:var(--verde); text-transform:uppercase;
}
.blocco__titolo{
  font-family:var(--display); font-weight:800; font-style:italic;
  font-size:clamp(30px,4vw,52px); line-height:.98;
  letter-spacing:-.04em; text-transform:uppercase;
}
.blocco__titolo em{ font-style:italic; color:var(--verde); }
.blocco__testo{ color:var(--fog); font-size:16px; max-width:44ch; }

/* --- la figura: nessun fondo, nessun bordo, nessun taglio --- */
.blocco__figura{
  position:relative; display:grid; place-items:center;
  min-height:inherit;
}
.blocco__figura::before{           /* l'alone dietro, non un riquadro */
  content:''; position:absolute; width:104%; aspect-ratio:1; border-radius:50%;
  background:radial-gradient(circle, rgba(32,255,107,.2) 0%, rgba(2,7,6,0) 66%);
  pointer-events:none;
}
.blocco__figura img{
  position:relative; width:116%; max-width:none; height:auto;
  filter:drop-shadow(0 30px 60px rgba(0,0,0,.72));
}
/* Le foto si muovono in parallasse e portano già una maschera: aggiungerci
   un filtro significa farlo ricalcolare a ogni fotogramma per niente. */
.blocco__figura--foto img{ filter:none; }
/* Le foto, che uno sfondo ce l'hanno, si spengono nei bordi con un gradiente */
.blocco__figura--foto img{
  -webkit-mask-image:radial-gradient(66% 66% at 50% 50%, #000 30%, rgba(0,0,0,.52) 60%, transparent 85%);
  mask-image:radial-gradient(66% 66% at 50% 50%, #000 30%, rgba(0,0,0,.52) 60%, transparent 85%);
}

/* Il ritratto di Consegna rapida si fonde nel fondo su tutti i lati: niente
   bordo da fotografia e nessun taglio netto vicino al pannello. */
.blocco__figura--ritratto img{
  width:108%; height:clamp(390px,45vw,570px); object-fit:cover;
  object-position:center top; filter:saturate(.88) contrast(1.06);
  -webkit-mask-image:
    linear-gradient(to bottom, #000 0%, #000 68%, rgba(0,0,0,.78) 80%, transparent 100%),
    linear-gradient(to right, transparent 0%, #000 16%, #000 84%, transparent 100%);
  -webkit-mask-composite:source-in;
  mask-image:
    linear-gradient(to bottom, #000 0%, #000 68%, rgba(0,0,0,.78) 80%, transparent 100%),
    linear-gradient(to right, transparent 0%, #000 16%, #000 84%, transparent 100%);
  mask-composite:intersect;
}

/* La figura scontornata con le mani aperte appartiene ad Acquisto sicuro. */
.blocco__figura--intero img{
  width:104%; max-height:570px; object-fit:contain;
  filter:drop-shadow(0 30px 50px rgba(0,0,0,.72));
}

@media (max-width:900px){
  .blocco__figura--ritratto img{ width:100%; height:min(118vw,520px); }
  .blocco__figura--intero img{ width:min(102%,560px); }
}

.blocco--a .blocco__pannello{ background:linear-gradient(145deg,#0F2A19 0%,#071309 100%); }
.blocco--b .blocco__pannello{ background:linear-gradient(145deg,#0B2417 0%,#04110A 100%); }
.blocco--c .blocco__pannello{ background:linear-gradient(145deg,#123520 0%,#08180E 100%); }

@media (max-width:900px){
  .blocco{ grid-template-columns:1fr; min-height:0; gap:8px; }
  .blocco--rovescio .blocco__pannello{ order:1; }
  .blocco--rovescio .blocco__figura{ order:2; }
  .blocco__figura{ min-height:0; padding:10px 0 22px; }
  .blocco__figura img{ width:104%; }
}

/* Segnaposto per quello che arriva dopo */
.segnaposto{
  border:1.5px dashed rgba(32,255,107,.28);
  border-radius:var(--raggio); padding:clamp(26px,4vw,44px);
  background:rgba(32,255,107,.03);
}
.segnaposto__tag{
  font-family:var(--mono); font-size:10px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--verde); margin-bottom:12px;
}
.segnaposto h3{
  font-family:var(--display); font-weight:800; font-size:clamp(20px,2.4vw,28px);
  letter-spacing:-.02em; margin-bottom:10px;
}
.segnaposto p{ color:var(--fog); font-size:15px; max-width:62ch; }

/* =========================================================================
   8 · Listino e ordine
   ========================================================================= */

.listino{ overflow:hidden; }
.listino__testata{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(360px,.82fr);
  gap:clamp(34px,6vw,90px); align-items:center;
}
.listino__intro{ position:relative; z-index:2; }
.listino__intro .occhiello{ text-align:left; }
.listino__testo{ color:var(--fog); max-width:52ch; margin:24px 0 30px; font-size:18px; }
.listino__visual{
  position:relative; min-height:460px; border:1px solid var(--filo);
  border-radius:var(--raggio); overflow:hidden;
  box-shadow:0 32px 90px rgba(0,0,0,.55), 0 0 55px rgba(32,255,107,.09);
}
.listino__visual::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg,transparent 40%,rgba(2,7,6,.78)),
             linear-gradient(135deg,rgba(32,255,107,.2),transparent 48%);
}
.listino__visual img{ width:100%; height:100%; position:absolute; inset:0; object-fit:cover; }
.listino__visual span{
  position:absolute; z-index:2; right:28px; bottom:20px;
  font-family:var(--display); font-size:clamp(48px,7vw,92px); font-weight:800;
  font-style:italic; line-height:.8; color:var(--verde); opacity:.92;
}
.listino__sconti{
  margin-top:36px; padding:24px; border:1px solid var(--filo);
  border-radius:var(--raggio-s); background:rgba(19,32,24,.65);
}
.listino__sconti h3{ margin:0 0 12px; color:var(--verde); font-size:22px; }
.listino__sconti p{ color:var(--fog); margin:12px 0 0; }
.listino__sconti ul{ padding-left:20px; margin:16px 0; }
.listino__sconti li{ margin:8px 0; }
.listino__sconti strong{ color:var(--carta); }
.listino__griglia{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px; margin-top:clamp(46px,7vw,88px);
}
.prezzo{
  position:relative; min-height:178px; padding:28px;
  display:flex; flex-direction:column; justify-content:flex-end;
  border:1px solid var(--filo); border-radius:var(--raggio-s);
  background:linear-gradient(145deg,rgba(19,32,24,.95),rgba(3,10,7,.98));
  transition:transform .25s var(--ease), border-color .25s, box-shadow .25s;
}
.prezzo:hover{ transform:translateY(-5px); border-color:var(--verde); box-shadow:0 18px 50px rgba(0,0,0,.42); }
.prezzo span{ font-family:var(--mono); color:var(--fog); letter-spacing:.15em; }
.prezzo strong{
  margin-top:7px; font-family:var(--display); font-size:clamp(42px,5vw,68px);
  line-height:.9; font-style:italic; color:var(--carta);
}
.prezzo small{
  position:absolute; top:18px; left:20px; font-family:var(--mono);
  font-size:9px; letter-spacing:.18em; color:var(--verde);
}
.prezzo--evidenza,.prezzo--max{ border-color:rgba(32,255,107,.5); }
.prezzo--evidenza strong,.prezzo--max strong{ color:var(--verde); }

@media (max-width:900px){
  .listino__testata{ grid-template-columns:1fr; }
  .listino__visual{ min-height:380px; }
  .listino__griglia{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}

.ordine{
  position:relative; border-radius:var(--raggio); margin-top:52px;
  padding:clamp(26px,4vw,52px);
  background:linear-gradient(160deg, rgba(19,32,24,.96) 0%, rgba(4,11,8,.96) 100%);
  border:1px solid var(--filo);
  overflow:hidden;
}
.ordine::before{
  content:''; position:absolute; inset:-1px; border-radius:inherit; padding:1px;
  background:linear-gradient(135deg, rgba(32,255,107,.55), transparent 42%, transparent 62%, rgba(125,255,184,.35));
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  pointer-events:none;
}
.ordine__gruppo + .ordine__gruppo{ margin-top:32px; }
.ordine__etichetta{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--fog-dim); margin-bottom:14px;
}
.ordine__scelte{ display:flex; flex-wrap:wrap; gap:10px; }

.scelta{
  font-family:var(--mono); font-weight:700; font-size:13px; letter-spacing:.06em;
  padding:15px 26px; border-radius:999px;
  border:1.5px solid var(--filo); color:var(--fog);
  transition:border-color .22s, color .22s, background .25s, box-shadow .3s;
}
.scelta:hover{ border-color:var(--filo-forte); color:var(--carta); }
.scelta[aria-pressed="true"]{
  background:linear-gradient(135deg, var(--verde-chiaro), var(--verde));
  border-color:transparent; color:var(--nero);
  box-shadow:0 6px 30px rgba(32,255,107,.3);
}

.riepilogo{
  margin-top:38px; padding-top:32px; border-top:1px solid var(--filo);
  display:flex; align-items:flex-end; justify-content:space-between; gap:26px; flex-wrap:wrap;
}
.riepilogo__riga{
  font-family:var(--display); font-weight:800; font-style:italic;
  font-size:clamp(23px,3.4vw,40px); line-height:1.04; letter-spacing:-.035em;
  text-transform:uppercase;
}
.riepilogo__riga em{ font-style:italic; color:var(--verde); }
.riepilogo__prezzo{
  margin-top:13px; font-family:var(--display); font-size:clamp(34px,5vw,58px);
  font-weight:800; font-style:italic; line-height:1; color:var(--verde);
}
.riepilogo__nota{ font-size:14.5px; color:var(--fog); margin-top:10px; max-width:46ch; }

/* =========================================================================
   9 · Numeri
   ========================================================================= */

.numeri{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-top:58px; }
.numero{
  border:1px solid var(--filo); border-radius:var(--raggio-s);
  padding:32px 24px; text-align:center;
  background:linear-gradient(160deg, rgba(19,32,24,.9), rgba(4,11,8,.9));
}
.numero b{
  display:block; font-family:var(--display); font-weight:800;
  font-size:clamp(32px,4.6vw,56px); line-height:1; letter-spacing:-.04em;
  background:linear-gradient(135deg, var(--verde-chiaro), var(--verde));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.numero b *{ font:inherit; letter-spacing:inherit; }
.numero b small{ font-size:.44em; letter-spacing:0; }
.numero > span{
  display:block; margin-top:12px;
  font-family:var(--mono); font-size:10px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--fog);
}
@media (max-width:760px){ .numeri{ grid-template-columns:repeat(2,1fr); } }

/* =========================================================================
   10 · Muro dei feedback
   ========================================================================= */

/* Una sola fila orizzontale: ogni chat è abbastanza larga da poter essere
   letta e conserva la propria proporzione, senza crop o deformazioni. */
.muro__invito{
  margin:42px 0 14px; text-align:right; color:var(--fog-dim);
  font-family:var(--mono); font-size:10px; letter-spacing:.16em;
  text-transform:uppercase;
}
.muro__invito span{ color:var(--verde); font-size:16px; margin-left:8px; }
.muro{
  display:flex; align-items:flex-start; gap:16px; overflow-x:auto; overflow-y:hidden;
  margin:0 calc(var(--gutter) * -1); padding:6px var(--gutter) 24px;
  scroll-snap-type:x mandatory; scroll-padding-inline:var(--gutter);
  overscroll-behavior-inline:contain; -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.muro::-webkit-scrollbar{ display:none; }

.muro__progresso{
  position:relative; height:3px; margin:4px 0 0;
  overflow:hidden; border-radius:999px;
  background:rgba(242,255,247,.09);
}
.muro__progresso i{
  position:absolute; inset:0 auto 0 0; width:120px; border-radius:999px;
  background:linear-gradient(90deg, var(--verde), var(--verde-chiaro));
  box-shadow:0 0 16px rgba(32,255,107,.55);
  transform:translate3d(0,0,0); will-change:transform;
}

.feedback{
  flex:0 0 clamp(300px,31vw,410px); scroll-snap-align:start;
  border-radius:var(--raggio-s); overflow:hidden;
  border:1px solid var(--filo);
  background:linear-gradient(160deg, rgba(19,32,24,.8), rgba(4,11,8,.8));
  position:relative; cursor:pointer;
  transition:border-color .28s, transform .4s var(--ease), box-shadow .4s;
}
.feedback:hover{ border-color:var(--verde); transform:translateY(-4px); box-shadow:0 16px 46px rgba(0,0,0,.6); }
.feedback img{ display:block; width:100%; height:auto; }
@media (max-width:640px){
  .muro{ gap:11px; }
  .feedback{ flex-basis:min(82vw,360px); }
  .muro__progresso{ margin-top:1px; }
}
.vuoto{
  display:grid; place-items:center; text-align:center; padding:24px;
  color:var(--fog-dim); font-family:var(--mono); font-size:10px;
  letter-spacing:.16em; text-transform:uppercase; line-height:2;
}
.feedback .vuoto{ aspect-ratio:9/16; }

.lente{
  position:fixed; inset:0; z-index:9500; background:rgba(2,7,6,.95);
  display:grid; place-items:center; padding:5vh var(--gutter);
  opacity:0; visibility:hidden; transition:opacity .3s, visibility .3s;
}
.lente.aperta{ opacity:1; visibility:visible; }
.lente img{ max-height:90vh; width:auto; border-radius:var(--raggio-s); }
.lente__chiudi{
  position:absolute; top:24px; right:var(--gutter);
  font-family:var(--mono); font-size:11px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--fog);
}

.piattaforme{ display:flex; flex-wrap:wrap; justify-content:center; gap:12px; margin-top:52px; }
.piattaforma{
  font-family:var(--mono); font-size:12px; font-weight:700;
  letter-spacing:.12em; text-transform:uppercase; color:var(--fog);
  border:1px solid var(--filo); border-radius:999px; padding:14px 26px;
  transition:border-color .25s, color .25s, background .25s;
}
.piattaforma:hover{ border-color:var(--verde); color:var(--verde); background:rgba(32,255,107,.06); }

/* =========================================================================
   11 · Pannello chiaro
   ========================================================================= */

.chiaro{
  background:linear-gradient(170deg, var(--carta) 0%, #E2EFE6 100%);
  color:var(--nero); border-radius:calc(var(--raggio) * 2);
  padding:clamp(48px,7vw,110px) var(--gutter);
  margin:0 auto; max-width:calc(var(--contenitore) + 2 * var(--gutter));
  position:relative; z-index:2;
}
.chiaro .titolone{ color:var(--nero); }
.chiaro .titolone em{
  background:linear-gradient(135deg,#12C155,#068A36);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.chiaro .sottotitolo{ color:#4A5A50; }
.chiaro .occhiello{ color:#0B9E3C; }

.passi{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:58px; }
.passo{
  background:#fff; border-radius:var(--raggio); padding:34px 30px;
  display:flex; flex-direction:column; gap:14px;
  box-shadow:0 2px 20px rgba(2,7,6,.06);
}
.passo__n{ font-family:var(--mono); font-size:11px; font-weight:700; letter-spacing:.2em; color:#0B9E3C; }
.passo h3{ font-family:var(--display); font-weight:800; font-size:clamp(20px,2.3vw,27px); letter-spacing:-.025em; line-height:1.08; }
.passo p{ color:#4A5A50; font-size:15px; }
@media (max-width:860px){ .passi{ grid-template-columns:1fr; } }

/* =========================================================================
   12 · Chi c'è dietro
   ========================================================================= */

.ritratto{
  display:grid; grid-template-columns:minmax(260px,36%) 1fr;
  gap:clamp(28px,4vw,64px); align-items:center; margin-top:58px;
}
.ritratto__foto{
  position:relative;
  border-radius:var(--raggio); overflow:hidden; aspect-ratio:4/5;
  border:1px solid var(--filo);
  background:linear-gradient(160deg, rgba(19,32,24,.9), rgba(4,11,8,.9));
}
.ritratto__foto .vuoto{ height:100%; }
.ritratto__foto img{
  width:100%; height:100%; object-fit:cover;
  object-position:center 26%;   /* la faccia sta nel terzo alto */
}
/* La foto è calda e il sito è verde: un velo leggero la tiene dentro alla
   palette senza ammazzare i colori, e il fondo sfuma nella sezione. */
.ritratto__foto::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(200deg, rgba(32,255,107,.16) 0%, rgba(32,255,107,0) 52%),
    linear-gradient(0deg, rgba(2,7,6,.72) 0%, rgba(2,7,6,0) 34%);
}
.ritratto__testo p + p{ margin-top:18px; }
.ritratto__testo p{ color:var(--fog); font-size:16.5px; }
.ritratto__testo p:first-child{ color:var(--carta); font-size:19.5px; }
.ritratto__firma{ margin-top:28px; font-family:var(--display); font-weight:800; font-size:23px; letter-spacing:-.02em; }
.ritratto__firma span{
  display:block; font-family:var(--mono); font-weight:400; font-size:10px;
  letter-spacing:.2em; text-transform:uppercase; color:var(--fog-dim); margin-top:6px;
}
@media (max-width:860px){ .ritratto{ grid-template-columns:1fr; } }

/* =========================================================================
   13 · Domande
   ========================================================================= */

.domande{ margin-top:52px; border-top:1px solid var(--filo); }
.domanda{ border-bottom:1px solid var(--filo); }
.domanda__testa{
  width:100%; display:flex; align-items:center; justify-content:space-between;
  gap:20px; padding:28px 0; text-align:left;
  font-family:var(--display); font-weight:800;
  font-size:clamp(17px,2vw,24px); letter-spacing:-.02em; transition:color .22s;
}
.domanda__testa:hover{ color:var(--verde); }
.domanda__piu{ flex:0 0 auto; width:26px; height:26px; position:relative; }
.domanda__piu::before,.domanda__piu::after{
  content:''; position:absolute; inset:50% 0 auto 0; height:1.5px;
  background:var(--verde); transition:transform .3s var(--ease);
}
.domanda__piu::after{ transform:rotate(90deg); }
.domanda[open] .domanda__piu::after{ transform:rotate(0deg); }
.domanda__corpo{ overflow:hidden; max-height:0; transition:max-height .45s var(--ease); }
.domanda__corpo p{ padding:0 0 30px; color:var(--fog); max-width:72ch; }

/* =========================================================================
   14 · Chiusura e piede
   ========================================================================= */

.chiusura{
  background:
    linear-gradient(150deg, rgba(125,255,184,.72) 0%, rgba(32,255,107,.62) 52%, rgba(15,203,79,.78) 100%),
    url('../img/fondo-chiaro.jpg') center/cover no-repeat;
  background-color:var(--verde);
  color:var(--nero); padding:clamp(80px,11vw,150px) 0;
  text-align:center; position:relative; z-index:2; overflow:hidden;
}
.chiusura .titolone{ color:var(--nero); }
.chiusura .titolone em{ -webkit-text-fill-color:var(--carta); color:var(--carta); background:none; }
.chiusura__testo{ color:rgba(2,7,6,.72); max-width:48ch; margin:24px auto 0; }
.chiusura__bottoni{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-top:44px; }
.chiusura__bottoni--guida{ flex-direction:column; align-items:center; gap:18px; }
.btn--conferma-guida{
  min-width:min(100%,590px); justify-content:center; padding:22px 42px;
  border:2px solid rgba(255,255,255,.8);
  box-shadow:0 14px 42px rgba(2,7,6,.28), 0 0 0 7px rgba(2,7,6,.08);
  font-size:14px; line-height:1.45; letter-spacing:.1em;
}
.btn--conferma-guida strong{ color:var(--verde); font-size:15px; }
.btn--conferma-guida__icona{
  display:grid; place-items:center; flex:0 0 38px; width:38px; height:38px;
  border-radius:50%; background:var(--verde); color:var(--nero); font-size:21px;
}
.btn--ritorno-guida{
  color:rgba(2,7,6,.7); border-bottom:1px solid rgba(2,7,6,.32);
  border-radius:0; padding:7px 2px; font-size:10px;
}

.piede{ background:var(--nero); padding:70px 0 40px; position:relative; z-index:2; }
.piede__su{
  display:flex; justify-content:space-between; align-items:flex-start;
  gap:40px; flex-wrap:wrap; padding-bottom:44px; border-bottom:1px solid var(--filo);
}
.piede__mail{
  font-family:var(--display); font-weight:800;
  font-size:clamp(19px,2.1vw,26px); letter-spacing:-.02em;
  border-bottom:2px solid var(--verde); padding-bottom:5px;
}
.piede__col{ display:grid; gap:9px; }
.piede__col b{
  font-family:var(--mono); font-size:10px; font-weight:400;
  letter-spacing:.2em; text-transform:uppercase; color:var(--fog-dim); margin-bottom:5px;
}
.piede__col a,.piede__col span{ font-size:15px; color:var(--fog); transition:color .2s; }
.piede__col a:hover{ color:var(--verde); }
.piede__giu{
  display:flex; justify-content:space-between; align-items:center;
  gap:20px; flex-wrap:wrap; padding-top:26px;
  font-family:var(--mono); font-size:10px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--fog-dim);
}

/* =========================================================================
   15 · Pagina privata
   ========================================================================= */

.privata__targa{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--mono); font-size:10.5px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--verde);
  border:1px solid rgba(32,255,107,.35); background:rgba(32,255,107,.07);
  border-radius:999px; padding:9px 18px; margin-bottom:28px;
}
.privata__video{
  aspect-ratio:16/9; border-radius:var(--raggio); margin-top:44px;
  background:linear-gradient(160deg, rgba(19,32,24,.9), rgba(4,11,8,.9));
  border:1px solid var(--filo);
}
.privata__video .vuoto{ height:100%; }

.tabella{ width:100%; border-collapse:collapse; margin-top:34px; }
.tabella th,.tabella td{ text-align:left; padding:18px 16px; border-bottom:1px solid var(--filo); vertical-align:top; }
.tabella th{ font-family:var(--mono); font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--fog-dim); font-weight:400; }
.tabella td:first-child{ font-weight:600; color:var(--carta); width:36%; }
.tabella td{ color:var(--fog); font-size:15.5px; }

.avviso{
  border-left:3px solid var(--verde);
  background:linear-gradient(90deg, rgba(32,255,107,.09), rgba(32,255,107,.02));
  border-radius:0 var(--raggio-s) var(--raggio-s) 0; padding:26px 30px; margin-top:34px;
}
.avviso b{ color:var(--verde); display:block; margin-bottom:8px; font-family:var(--display); font-size:19px; letter-spacing:-.02em; }
.avviso p{ color:var(--fog); font-size:15.5px; }
.avviso--rosso{ border-left-color:#FF5C5C; background:linear-gradient(90deg, rgba(255,92,92,.09), rgba(255,92,92,.02)); }
.avviso--rosso b{ color:#FF8A8A; }

.blocco-testo h3{ font-family:var(--display); font-weight:800; font-size:clamp(22px,2.8vw,32px); letter-spacing:-.03em; margin:52px 0 16px; }
.blocco-testo p{ color:var(--fog); }
.blocco-testo p + p{ margin-top:14px; }
.blocco-testo strong{ color:var(--carta); font-weight:600; }

/* =========================================================================
   16 · Elementi di gioco
   Immagini vere ad alta risoluzione, non ritagli. Finché i file non stanno
   in assets/img/ questi blocchi restano vuoti senza rompere l'impaginato.
   ========================================================================= */

/* --- Il pad che fluttua e gira ---------------------------------------- */
.pad{
  position:absolute; pointer-events:none; z-index:2;
  width:clamp(160px,22vw,340px);
  filter:drop-shadow(0 30px 70px rgba(0,0,0,.7)) drop-shadow(0 0 60px rgba(32,255,107,.35));
  transform-style:preserve-3d;
  animation:pad-gira 11s ease-in-out infinite;
}
.pad img{ width:100%; }
.pad--dx{ right:2%; top:24%; }
.pad--sx{ left:1%; bottom:14%; width:clamp(120px,15vw,220px); animation-duration:14s; animation-direction:reverse; }

@keyframes pad-gira{
  0%   { transform:perspective(900px) rotateY(-20deg) rotateX(9deg) rotateZ(-7deg) translateY(0); }
  50%  { transform:perspective(900px) rotateY(20deg)  rotateX(-7deg) rotateZ(7deg) translateY(-22px); }
  100% { transform:perspective(900px) rotateY(-20deg) rotateX(9deg) rotateZ(-7deg) translateY(0); }
}
@media (max-width:900px){ .pad--dx{ width:150px; right:-4%; top:auto; bottom:6%; opacity:.5 } .pad--sx{ display:none } }
@media (prefers-reduced-motion:reduce){ .pad{ animation:none } }

/* --- Sfondo fotografico di sezione ------------------------------------ */
.sfondo{
  position:absolute; inset:0; overflow:hidden; z-index:0;
  background-position:center; background-size:cover; background-repeat:no-repeat;
}
.sfondo--stadio{ background-image:url('../img/stadio.jpg'); }
.sfondo--monete{ background-image:url('../img/monete.jpg'); }

/* I fondi di FC: le lastre di luce vere, non quelle ricostruite in CSS.
   Vanno tenuti bassi di opacità, sennò si mangiano il testo che ci sta sopra. */
.sfondo--scuro{ background-image:url('../img/fondo-scuro.jpg'); }
.sfondo--scuro::after{
  background:linear-gradient(180deg, var(--nero) 0%, rgba(2,7,6,.72) 26%, rgba(2,7,6,.72) 74%, var(--nero) 100%);
}
.sfondo--specchiato{ transform:scaleX(-1); }
.sfondo::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(2,7,6,.62) 0%, rgba(2,7,6,.42) 40%, var(--nero) 97%);
}
.sfondo--fioco{ opacity:.35; }




/* --- I due sul divano: appoggiati al bordo, così il taglio non si vede - */
.duo{
  position:absolute; left:50%; bottom:0; transform:translateX(-50%);
  width:min(780px,98vw); z-index:0; pointer-events:none;
  /* Sconfinano oltre i lati e si spengono sotto: così non si vede nessun
     bordo, né il taglio dei piedi né la larghezza del divano. */
  -webkit-mask-image:
    linear-gradient(to top, transparent 0%, #000 14%),
    linear-gradient(to right, transparent 0%, #000 12%, #000 88%, transparent 100%);
  -webkit-mask-composite:source-in; mask-composite:intersect;
  mask-image:
    linear-gradient(to top, transparent 0%, #000 14%),
    linear-gradient(to right, transparent 0%, #000 12%, #000 88%, transparent 100%);
  filter:drop-shadow(0 -6px 40px rgba(0,0,0,.35));
}
/* Il testo sta in alto e il divano ha tutta la parte bassa: senza questo
   i bottoni finiscono sulla faccia di chi sta seduto. */
.chiusura--duo{ padding-top:clamp(56px,6vw,92px); padding-bottom:clamp(400px,58vw,780px); overflow:clip; }
@media (max-width:760px){ .chiusura--duo{ padding-bottom:clamp(280px,86vw,460px); } }

/* --- Il wordmark in alta risoluzione ---------------------------------- */

/* =========================================================================
   17 · La sezione bloccata col pad
   Come la reference: la sezione è alta tre schermate, dentro c'è un pannello
   che resta fermo (sticky), le parole giganti scorrono a velocità diverse e
   il pad ci fluttua sopra. Tutto guidato dallo scroll, non da un ciclo: è
   quello che rende il movimento «tuo» invece che decorativo.
   ========================================================================= */

/* clip, non hidden: hidden crea un contenitore di scorrimento e annulla il
   position:sticky del pannello dentro, lasciando due schermate vuote. */
.gioco{ position:relative; height:300vh; overflow:clip; }
.gioco__pin{
  position:sticky; top:0; height:100svh;
  display:grid; place-items:center; overflow:hidden;
}
.gioco__fondo{
  position:absolute; inset:0; z-index:0;
  background:url('../img/fondo-scuro.jpg') center/cover no-repeat;
  opacity:.9;
}
.gioco__fondo::after{
  content:''; position:absolute; inset:0;
  background:
    radial-gradient(60% 55% at 50% 50%, rgba(2,7,6,.30) 0%, rgba(2,7,6,.74) 72%, var(--nero) 100%);
}
.gioco__alone{
  position:absolute; width:min(900px,120vw); aspect-ratio:1;
  background:radial-gradient(circle, rgba(32,255,107,.16) 0%, rgba(2,7,6,0) 66%);
  pointer-events:none;
}
.gioco__parole{
  position:absolute; inset:0; display:flex; flex-direction:column;
  justify-content:center; gap:clamp(4px,1vw,14px); pointer-events:none;
}
.gioco__riga{
  display:flex; justify-content:center; overflow:visible;
  font-family:var(--display); font-weight:800; font-style:italic;
  font-size:clamp(42px,9.5vw,118px); line-height:.94;
  letter-spacing:-.045em; text-transform:uppercase;
  color:var(--carta);
}
/* La linea si stringe sul testo: è lei che si misura e che si muove, perché
   scrollWidth sulla riga non conta mai quello che sborda a sinistra. */
.gioco__linea{
  display:inline-flex; gap:.34em; white-space:nowrap;
  will-change:transform; flex:0 0 auto;
}
.gioco__riga em{ font-style:italic; color:var(--verde); }
.gioco__riga--vuota{ color:transparent; -webkit-text-stroke:1.5px rgba(242,255,247,.22); }

.gioco__pad{
  position:absolute; z-index:3; pointer-events:none;
  width:clamp(150px,20vw,320px); transform-origin:50% 50%;
  /* Niente filter: un drop-shadow su un PNG che si ingrandisce a ogni
     fotogramma è la cosa più cara che si possa chiedere al browser, ed è
     da lì che venivano gli scatti. La luce la mette l'alone dietro. */
  will-change:transform;
  backface-visibility:hidden;
}
.gioco__eti{
  position:absolute; bottom:5vh; left:50%; transform:translateX(-50%);
  font-family:var(--mono); font-size:10px; letter-spacing:.24em;
  text-transform:uppercase; color:var(--fog-dim); z-index:4;
}

@media (max-width:760px){
  .gioco{ height:220vh; }
  .gioco__pad{ width:clamp(150px,44vw,240px); }
}
@media (prefers-reduced-motion:reduce){
  .gioco{ height:auto; }
  .gioco__pin{ position:static; height:auto; padding:var(--sezione-y) 0; }
}

/* =========================================================================
   18 · Schegge di luce
   Il riempimento che usa FC quando il fondo resta vuoto: lastre angolari di
   luce che si incrociano. Fatte in CSS con clip-path e gradienti, così
   scalano su qualsiasi schermo, non pesano niente e seguono la palette.
   ========================================================================= */

.schegge{ position:absolute; inset:0; overflow:clip; pointer-events:none; z-index:0; }
.schegge i{ position:absolute; display:block; }

/* la lastra grande che entra da un angolo */
.schegge i:nth-child(1){
  inset:-18% 34% 22% -26%;
  clip-path:polygon(0 22%, 58% 0, 100% 44%, 38% 100%);
  background:linear-gradient(118deg, rgba(32,255,107,.26) 0%, rgba(32,255,107,.05) 62%, transparent 100%);
}
/* la seconda, più stretta, che la taglia */
.schegge i:nth-child(2){
  inset:8% -20% -24% 46%;
  clip-path:polygon(22% 0, 100% 14%, 74% 100%, 0 72%);
  background:linear-gradient(210deg, rgba(125,255,184,.22) 0%, rgba(32,255,107,.06) 58%, transparent 100%);
}
/* un fascio sottile, quello che dà la direzione */
.schegge i:nth-child(3){
  top:-30%; left:8%; width:38%; height:170%;
  transform:rotate(24deg); transform-origin:50% 50%;
  background:linear-gradient(90deg, transparent, rgba(125,255,184,.20) 46%, rgba(125,255,184,.04) 58%, transparent);
}
/* una scheggia piccola e più accesa, per non lasciare il campo piatto */
.schegge i:nth-child(4){
  inset:auto -6% 12% auto; width:32%; aspect-ratio:1.6;
  clip-path:polygon(0 38%, 68% 0, 100% 56%, 30% 100%);
  background:linear-gradient(150deg, rgba(32,255,107,.28), transparent 70%);
}
/* il velo che tiene tutto sul nero, così le schegge non urlano */
.schegge i:nth-child(5){
  inset:0;
  background:radial-gradient(70% 60% at 50% 50%, rgba(2,7,6,0) 0%, rgba(2,7,6,.48) 78%, var(--nero) 100%);
}

.schegge--specchiate{ transform:scaleX(-1); }
.schegge--fioche i:nth-child(-n+4){ opacity:.6; }

@media (max-width:760px){
  .schegge i:nth-child(3),.schegge i:nth-child(4){ display:none; }
}

/* =========================================================================
   19 · Mobile-first refinement
   Su telefono non comprimiamo il desktop: cambiano gerarchie, spazi, target
   touch e proporzioni delle immagini. Il breakpoint copre i telefoni grandi
   senza alterare il tablet.
   ========================================================================= */
@media (max-width:600px){
  :root{
    --gutter:18px;
    --sezione-y:72px;
    --raggio:20px;
    --raggio-s:14px;
  }

  body{ font-size:16px; line-height:1.55; }
  .contenitore{ padding-inline:var(--gutter); }
  .sezione{ padding-block:var(--sezione-y); }

  /* Navigazione compatta e sempre interamente visibile. */
  .nav{
    top:8px; left:8px; right:8px; min-height:58px;
    padding:9px 10px; gap:8px; border-radius:16px;
  }
  .nav__marchio{ gap:8px; min-width:0; }
  .nav__marchio img{ width:32px; flex:0 0 32px; }
  .nav__nome{ display:block; font-size:16px; }
  .nav__menu{
    display:grid; place-content:center; gap:6px; order:2;
    width:42px; height:42px; margin-left:auto; border-radius:50%;
    border:1px solid var(--filo-forte); background:rgba(242,255,247,.04);
  }
  .nav__menu span{
    display:block; width:17px; height:1.5px; border-radius:2px;
    background:var(--verde); transition:transform .3s var(--ease), opacity .2s;
  }
  .nav.menu-aperto .nav__menu span:first-child{ transform:translateY(3.75px) rotate(45deg); }
  .nav.menu-aperto .nav__menu span:last-child{ transform:translateY(-3.75px) rotate(-45deg); }
  .nav__voci{
    position:absolute; top:calc(100% + 8px); left:0; right:0;
    display:grid; gap:0; padding:10px; border-radius:16px;
    background:rgba(5,15,10,.97); border:1px solid var(--filo-forte);
    box-shadow:0 20px 50px rgba(0,0,0,.55);
    opacity:0; visibility:hidden; transform:translateY(-8px);
    transition:opacity .25s, visibility .25s, transform .3s var(--ease);
  }
  .nav.menu-aperto .nav__voci{ opacity:1; visibility:visible; transform:none; }
  .nav__voci .solo-grande{
    display:block; min-height:48px; padding:15px 12px;
    border-bottom:1px solid var(--filo); color:var(--carta);
  }
  .nav__voci .solo-grande:last-child{ border-bottom:0; }
  .nav__btn{ order:3; min-height:42px; padding:11px 14px; font-size:9px; }

  /* Cancello iniziale. */
  .cancello__dentro{ padding-inline:22px; }
  .cancello__marchio{ width:156px; margin-bottom:24px; }
  .insegna{ width:100%; margin-bottom:38px; }
  .insegna__testo{ font-size:clamp(43px,15vw,58px); }
  .cancello__start{ min-height:48px; padding-inline:38px; }
  .cancello__salta{ right:18px; bottom:18px; }

  /* Hero: niente parole mozzate e CTA facili da toccare. */
  .apertura{
    min-height:100svh; padding:106px 0 76px;
    align-items:center;
  }
  .apertura__marchio{ width:min(56vw,220px); margin-bottom:12px; }
  .apertura__nome{
    width:100%; padding:0; font-size:clamp(47px,15.7vw,61px);
    letter-spacing:-.055em; white-space:nowrap;
  }
  .apertura__claim{
    margin-top:20px; font-size:clamp(18px,5.2vw,21px); line-height:1.12;
    padding-inline:2px;
  }
  .apertura__testo{
    margin-top:16px; font-size:15.5px; line-height:1.55;
    max-width:34ch;
  }
  .apertura__bottoni{ display:grid; gap:10px; margin-top:30px; }
  .apertura__bottoni .btn{ width:min(100%,290px); justify-content:center; }
  .apertura__giu{ bottom:16px; gap:5px; }
  .apertura__giu span{ height:24px; }

  .btn{
    min-height:50px; justify-content:center;
    padding:15px 23px; font-size:10.5px;
  }
  .nastro{ padding:16px 0; }
  .nastro__pezzo{ gap:22px; padding-right:22px; font-size:17px; }

  /* La sequenza lunga resta scenica ma non costa oltre due schermate. */
  .gioco{ height:180svh; }
  .gioco__riga{ font-size:clamp(38px,12vw,52px); }
  .gioco__pad{ width:42vw; }
  .gioco__eti{ bottom:22px; }

  .occhiello{ margin-bottom:16px; font-size:9px; line-height:1.4; }
  .titolone{
    font-size:clamp(37px,10.3vw,40px); line-height:.98;
    letter-spacing:-.05em;
  }
  .titolone.a-sinistra{ font-size:clamp(37px,10.3vw,40px); }
  .sottotitolo{ margin-top:18px; font-size:15.5px; line-height:1.5; }

  /* Servizi: tre card complete. L'immagine vive dentro la stessa superficie
     del testo, invece della sequenza ripetitiva testo–immagine. */
  .blocchi{ gap:42px; margin-top:42px; }
  .blocco{
    display:block; min-height:610px; border:1px solid var(--filo);
    border-radius:var(--raggio); overflow:hidden; isolation:isolate;
  }
  .blocco--a{ background:linear-gradient(155deg,#0F2A19 0%,#071309 100%); }
  .blocco--b{ background:linear-gradient(155deg,#0B2417 0%,#04110A 100%); }
  .blocco--c{ background:linear-gradient(155deg,#123520 0%,#08180E 100%); }
  .blocco__pannello{
    position:relative; z-index:2; min-height:inherit;
    padding:25px 22px 285px; gap:16px; justify-content:flex-start;
    overflow:visible; border:0; background:transparent !important;
  }
  .blocco__pannello::before{
    content:''; position:absolute; z-index:-1; inset:0 0 210px;
    background:linear-gradient(to bottom, rgba(4,13,8,.18) 0%, rgba(4,13,8,.9) 76%, transparent 100%);
    pointer-events:none;
  }
  .blocco__pannello::after{ opacity:.65; }
  .blocco__n{ font-size:9px; }
  .blocco__titolo{ font-size:clamp(31px,10vw,40px); }
  .blocco__testo{ font-size:15.5px; line-height:1.55; }
  .pill-fila{ gap:7px; }
  .pill{ padding:6px 10px; font-size:8.5px; }
  .blocco__figura{
    position:absolute; z-index:1; inset:auto 0 0; height:300px;
    min-height:0; padding:0; overflow:hidden; pointer-events:none;
  }
  .blocco__figura::before{
    z-index:2; inset:-1px; width:auto; aspect-ratio:auto; border-radius:0;
    background:linear-gradient(to bottom, var(--nero) 0%, transparent 30%);
    opacity:.34;
  }
  .blocco__figura img{ width:100%; height:100%; object-fit:contain; object-position:center bottom; }
  .blocco__figura--foto img{
    width:100%; max-width:none; object-fit:cover; object-position:center 64%;
    -webkit-mask-image:linear-gradient(to bottom, transparent 0%, #000 22%, #000 100%);
    mask-image:linear-gradient(to bottom, transparent 0%, #000 22%, #000 100%);
  }
  .blocco__figura--ritratto img{
    width:100%; height:100%; max-width:none; object-fit:cover; object-position:center top;
    -webkit-mask-image:linear-gradient(to bottom, rgba(0,0,0,.92) 0%, #000 12%, #000 100%);
    mask-image:linear-gradient(to bottom, rgba(0,0,0,.92) 0%, #000 12%, #000 100%);
  }
  .blocco__figura--ritratto::before{ opacity:.12; }
  .blocco__figura--intero{ height:350px; }
  .blocco__figura--intero::before{ opacity:.1; }
  .blocco--c .blocco__pannello::before{
    inset:0 0 300px;
    background:linear-gradient(to bottom, rgba(4,13,8,.16) 0%, rgba(4,13,8,.58) 58%, transparent 100%);
  }
  .blocco__figura--intero img{
    width:100%; height:100%; max-height:none;
    object-fit:cover; object-position:center top;
    transform:scale(1.18); transform-origin:50% 8%;
  }

  .numeri{ gap:9px; margin-top:42px; }
  .numero{ padding:23px 10px; }
  .numero b{ font-size:36px; }
  .numero > span{ margin-top:9px; font-size:8px; line-height:1.5; }

  /* Listino: immagine ampia e prezzi leggibili in due colonne. */
  .listino__testata{ gap:32px; }
  .listino__intro .occhiello{ text-align:center; }
  .listino__intro .titolone{ text-align:center; }
  .listino__testo{ margin:18px auto 25px; text-align:center; font-size:15.5px; }
  .listino__intro .btn{ width:100%; }
  .listino__visual{ min-height:280px; border-radius:18px; }
  .listino__visual img{ object-position:center 62%; }
  .listino__visual span{ right:18px; bottom:15px; font-size:54px; }
  .listino__griglia{ gap:9px; margin-top:36px; }
  .prezzo{ min-height:130px; padding:20px 16px; }
  .prezzo span{ font-size:10px; }
  .prezzo strong{ font-size:38px; }
  .prezzo small{ top:13px; left:15px; font-size:7px; }

  /* Configuratore: due colonne regolari e CTA a tutta larghezza. */
  .ordine{ margin-top:34px; padding:24px 18px; overflow:visible; }
  .ordine__gruppo + .ordine__gruppo{ margin-top:26px; }
  .ordine__etichetta{ margin-bottom:11px; font-size:9px; }
  .ordine__scelte{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
  .scelta{ min-height:48px; padding:12px 8px; font-size:11px; }
  .riepilogo{ display:grid; margin-top:28px; padding-top:24px; gap:20px; }
  .riepilogo__riga{ font-size:27px; }
  .riepilogo__prezzo{ font-size:44px; }
  .riepilogo__nota{ font-size:13.5px; }
  .riepilogo .btn{ width:100%; }

  /* Feedback: una card quasi a pieno schermo e invito allineato a sinistra. */
  .muro__invito{ margin:30px 0 11px; text-align:left; font-size:8.5px; }
  .muro{
    gap:11px; margin-inline:calc(var(--gutter) * -1);
    padding:4px var(--gutter) 16px;
    touch-action:pan-x pan-y;
  }
  .feedback{ flex-basis:calc(100vw - 54px); border-radius:15px; }
  .muro__progresso{ height:3px; margin-top:3px; }
  .piattaforme{ justify-content:flex-start; gap:8px; margin-top:34px; }
  .piattaforma{ padding:11px 14px; font-size:9px; }
  .lente{ padding:58px 10px 18px; }
  .lente img{ max-width:100%; max-height:calc(100svh - 80px); border-radius:12px; }
  .lente__chiudi{ top:18px; right:16px; }

  /* Pannello chiaro e storia personale. */
  #come{ padding-inline:10px !important; }
  .chiaro{ padding:50px 16px; border-radius:28px; }
  .passi{ gap:11px; margin-top:36px; }
  .passo{ padding:25px 21px; gap:11px; }
  .passo h3{ font-size:23px; }
  .passo p{ font-size:14.5px; }
  .ritratto{ gap:26px; margin-top:38px; }
  .ritratto__foto{ width:100%; max-height:520px; }
  .ritratto__testo p{ font-size:15.5px; }
  .ritratto__testo p:first-child{ font-size:18px; }

  /* FAQ: righe più compatte ma target touch abbondante. */
  .domande{ margin-top:34px; }
  .domanda__testa{ min-height:72px; padding:20px 0; font-size:18px; line-height:1.2; }
  .domanda__corpo p{ padding-bottom:23px; font-size:15px; }

  /* Finale e footer impilati. */
  .chiusura--duo{ padding:68px 0 0; }
  .chiusura__testo{ margin-top:18px; font-size:15.5px; }
  .chiusura__bottoni{
    display:flex; flex-wrap:nowrap; align-items:center;
    gap:7px; margin-top:28px;
  }
  .chiusura__bottoni .btn{
    flex:1 1 0; min-width:0; min-height:46px;
    width:auto; margin:0; padding:12px 5px;
    font-size:8px; letter-spacing:.09em;
  }
  .chiusura__bottoni--guida{
    flex-direction:column; gap:18px; width:100%; margin-top:32px;
  }
  .chiusura__bottoni--guida .btn--conferma-guida{
    flex:none; width:100%; min-height:82px; padding:16px 18px;
    font-size:11px; line-height:1.5; letter-spacing:.08em;
  }
  .chiusura__bottoni--guida .btn--conferma-guida strong{ font-size:13px; }
  .chiusura__bottoni--guida .btn--ritorno-guida{
    flex:none; width:auto; min-height:0; padding:7px 2px; font-size:9px;
  }
  .duo{
    position:relative; left:auto; bottom:auto; transform:none;
    width:112vw; max-width:none; margin:34px 0 0 -6vw;
    -webkit-mask-image:linear-gradient(to bottom, transparent 0%, #000 10%, #000 100%);
    mask-image:linear-gradient(to bottom, transparent 0%, #000 10%, #000 100%);
  }
  .piede{ padding:52px 0 28px; }
  .piede__su{ display:grid; grid-template-columns:1fr 1fr; gap:32px 22px; }
  .piede__mail{ grid-column:1/-1; font-size:24px; justify-self:start; }
  .piede__giu{ display:grid; gap:9px; line-height:1.5; }
}

@media (max-width:360px){
  :root{ --gutter:15px; }
  .nav__nome{ font-size:14px; }
  .nav__btn{ padding-inline:11px; line-height:1; }
  .apertura__nome{ font-size:15.5vw; }
  .apertura__claim{ font-size:19px; }
  .titolone{ font-size:38px; }
  .ordine{ padding-inline:14px; }
  .feedback{ flex-basis:calc(100vw - 42px); }
}