/* =====================================================================
   sections.css — regole delle singole sezioni, nello stesso ordine
   dell'HTML: sentiero, hero, intro, recap, 01–07, form, lightbox.
   Griglia a 12 colonne di style.css (.griglia) da 1024 px in su; sotto,
   i blocchi vanno in colonna. Gli stati che servono solo alle animazioni
   stanno in fondo (blocco "SOLO CON JS E MOVIMENTO").
   ===================================================================== */

/* =====================================================================
   SENTIERO — la linea arancione a nodi che collega le tappe (desktop).
   Larghezza e punti li calcola main.js (disegnaSentiero).
   ===================================================================== */
.sentiero {
  display: none;
}

@media (min-width: 1024px) {
  .js .sentiero {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    display: block;
    width: var(--sentiero-larghezza, 120px);
    height: 100%;
    overflow: visible;
    pointer-events: none;
  }
}

/* il tratto ancora da percorrere: puntinato e tenue */
.sentiero__traccia {
  fill: none;
  stroke: rgba(255, 255, 255, .16);
  stroke-width: 1;
  stroke-dasharray: 2 7;
}

/* il tratto percorso: arancione pieno */
.sentiero__linea {
  fill: none;
  stroke: var(--arancio);
  stroke-width: 1.5;
  stroke-linejoin: round;
}

.sentiero__nodi circle {
  fill: var(--navy-profondo);
  stroke: rgba(255, 255, 255, .4);
  stroke-width: 1;
  transition: fill .5s var(--ease), stroke .5s var(--ease);
}

.sentiero__nodi circle.is-raggiunto {
  fill: var(--arancio);
  stroke: var(--arancio);
}

.sentiero__punto {
  fill: var(--arancio);
  stroke: rgba(238, 121, 15, .28); /* alone senza filter: niente ridisegni costosi */
  stroke-width: 8;
  paint-order: stroke;
}

@media (prefers-reduced-motion: reduce) {
  .sentiero__punto {
    display: none;
  }
}

/* =====================================================================
   HERO — video della montagna (loop avanti-indietro) + testi a sinistra
   ===================================================================== */
.hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: max(100svh, 640px);
  padding-block: calc(var(--altezza-testata) + 3rem) 7rem;
  overflow: hidden;
  isolation: isolate;
  background: var(--navy-profondo);
}

.hero__media {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
}

/* tre livelli: scroll (GSAP su .hero__media), mouse, inquadratura fissa */
.hero__mouse {
  position: absolute;
  inset: -64px; /* margine per lo spostamento col mouse (CONFIG.hero.mouse) */
}

.hero__inquadratura {
  position: absolute;
  inset: 0;
}

.hero__fermo img,
.hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero__video {
  opacity: 0;
  transition: opacity .9s var(--ease);
}

.hero__video.is-in-onda {
  opacity: 1;
}

.hero__velo {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(16, 18, 35, .9) 0%, rgba(16, 18, 35, .66) 32%, rgba(16, 18, 35, .12) 60%, rgba(16, 18, 35, 0) 100%);
}

/* Passaggio all'intro: sfumatura lunga e morbida, ferma sulla sezione
   (il video si muove con lo scroll, la sfumatura no: niente stacco) */
.hero::after {
  content: '';
  position: absolute;
  inset: auto 0 0;
  z-index: -1;
  height: 60%;
  pointer-events: none;
  background: linear-gradient(180deg,
    rgba(16, 18, 35, 0) 0%,
    rgba(16, 18, 35, .18) 25%,
    rgba(16, 18, 35, .48) 50%,
    rgba(16, 18, 35, .8) 75%,
    rgba(16, 18, 35, .96) 92%,
    var(--navy-profondo) 100%);
}

.hero__contenuto {
  position: relative;
}

.hero__titolo {
  margin-bottom: 2.25rem;
}

.hero__logo {
  width: clamp(220px, 8rem + 22vw, 460px);
  height: auto;
  overflow: visible;
}

.hero__claim {
  margin-bottom: .75rem;
  font-size: var(--t-h3);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -.01em;
  color: var(--bianco);
}

.hero__sottotitolo {
  max-width: 38ch;
  margin-bottom: 1.75rem;
  font-size: var(--t-lead);
  font-weight: 300;
  line-height: 1.55;
  color: var(--bianco);
}

/* data e luogo scritti come nel PDF (niente maiuscolo forzato) */
.hero__data {
  margin-bottom: 2.5rem;
  font-size: var(--t-piccolo);
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--bianco);
}

.hero__separatore {
  margin-inline: .6rem;
  color: var(--arancio);
}

/* inizio del sentiero: una linea sottile nella colonna del sentiero */
.hero__scroll {
  position: absolute;
  left: 50%;
  bottom: 2rem;
  width: 1px;
  height: 64px;
  overflow: hidden;
  background: rgba(255, 255, 255, .2);
}

.hero__scroll-linea {
  position: absolute;
  inset: 0;
  background: var(--arancio);
  transform: translateY(-100%);
  animation: hero-scorri 2.6s var(--ease) infinite;
}

@keyframes hero-scorri {
  0% { transform: translateY(-100%); }
  60%, 100% { transform: translateY(100%); }
}

@media (prefers-reduced-motion: reduce) {
  .hero__scroll {
    display: none;
  }
}

@media (min-width: 1024px) {
  /* vetta spostata a destra: non finisce sotto il testo */
  .hero__inquadratura {
    transform: translateX(10%) scale(1.2);
    transform-origin: 50% 0;
  }

  .hero__contenuto > * {
    max-width: 600px;
  }

  .js .hero__scroll {
    left: var(--sentiero-x, 50%);
    bottom: 0;
    height: 120px;
  }
}

/* tablet e mobile: testo in basso, la vetta resta libera in alto */
@media (max-width: 1023px) {
  .hero {
    align-items: flex-end;
    padding-bottom: 4rem;
  }

  .hero__velo {
    background: linear-gradient(0deg, var(--navy-profondo) 0%, rgba(16, 18, 35, .88) 36%, rgba(16, 18, 35, .15) 66%, rgba(16, 18, 35, .3) 100%);
  }

  .hero__contenuto > * {
    max-width: 620px;
  }

  .hero__scroll {
    display: none;
  }
}

@media (max-width: 767px) {
  .hero {
    padding-bottom: 3rem;
  }

  .hero__titolo {
    margin-bottom: 1.5rem;
  }

  .hero__data {
    margin-bottom: 2rem;
  }

  .hero__cta {
    width: 100%;
  }
}

/* =====================================================================
   INTRO — a "Z": titolo | testo, domanda (si mette a fuoco), chiusura
   ===================================================================== */
.intro {
  padding-top: calc(var(--spazio-sezione) * .7);
}

.intro__griglia {
  row-gap: 2rem;
}

.intro__domanda {
  margin-top: calc(var(--spazio-blocco) - 2rem);
}

@media (min-width: 1024px) {
  .intro__griglia {
    row-gap: var(--spazio-blocco);
  }

  .intro__statement {
    grid-column: 1 / span 6;
  }

  .intro__racconto {
    grid-column: 8 / -1;
    align-self: end;
  }

  .intro__domanda {
    grid-column: 1 / span 11;
    margin-top: 0;
  }

  .intro__chiusura {
    grid-column: 8 / -1;
  }
}

/* =====================================================================
   SCHERMI A TUTTA PAGINA — video recap e video Gemini Up MAX (03).
   Partono alla larghezza del contenuto e si allargano a tutto schermo
   con lo scroll (animaSchermi); angoli del mirino dentro l'inquadratura.
   Stanno sopra il sentiero (z-index 3), che passa "dietro" ai video.
   ===================================================================== */
.schermo {
  position: relative;
  z-index: 3;
  overflow-x: clip;
}

.recap {
  background: var(--navy-profondo); /* nessuno spazio sotto: si attacca alla 01 */
}

.schermo__cornice {
  width: calc(100% - var(--margine) * 2);
  max-width: var(--contenitore);
  margin-inline: auto;
  aspect-ratio: 16 / 9;
  background: #000;
}

.innovazione__schermo .schermo__cornice {
  aspect-ratio: 5 / 4;
}

.schermo__video,
.recap__video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.recap__comandi {
  position: absolute;
  right: clamp(.75rem, 2vw, 1.5rem);
  bottom: clamp(.75rem, 2vw, 1.5rem);
  z-index: 3;
  display: none;
  gap: .5rem;
}

.js .recap__comandi {
  display: flex;
}

.comando {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, .35);
  border-radius: 50%;
  background: rgba(16, 18, 35, .55);
  color: var(--bianco);
  transition: background-color .25s var(--ease), border-color .25s var(--ease);
}

.comando:hover {
  border-color: var(--arancio);
  background: rgba(16, 18, 35, .85);
}

.comando__icona {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.comando__icona--play {
  fill: currentColor;
  stroke: none;
}

[data-comando="audio"][aria-pressed="false"] .comando__icona--audio,
[data-comando="audio"][aria-pressed="true"] .comando__icona--muto,
[data-comando="pausa"][aria-pressed="false"] .comando__icona--play,
[data-comando="pausa"][aria-pressed="true"] .comando__icona--pausa {
  display: none;
}

/* =====================================================================
   01 · IL CAMBIAMENTO — domanda ferma a sinistra, testo a destra.
   "Subire" viene barrato, "guidarlo" si accende (animaCambiamento).
   ===================================================================== */
.cambiamento__domanda {
  max-width: 13ch;
}

.cambiamento__subire {
  position: relative;
  color: rgba(255, 255, 255, .45);
}

.cambiamento__subire::after {
  content: '';
  position: absolute;
  left: -.04em;
  right: -.04em;
  top: 54%;
  height: .06em;
  background: var(--arancio);
  transform: scaleX(var(--barra, 1));
  transform-origin: left;
}

.cambiamento__guidarlo {
  font-weight: 700;
  color: var(--arancio);
}

.cambiamento__corpo {
  margin-top: 2.5rem;
}

.cambiamento__citazione {
  margin-block: 2.5rem;
}

@media (min-width: 1024px) {
  .cambiamento__testa {
    grid-column: 1 / span 6;
    align-self: start;
    position: sticky;
    top: calc(var(--altezza-testata) + 3rem);
  }

  .cambiamento__corpo {
    grid-column: 8 / -1;
    margin-top: 0;
    padding-top: 3.6rem;
  }
}

/* =====================================================================
   02 · LA VISIONE ENNE EFFE — intestazione, metodo su fascia propria,
   foto in composizione libera (parole e foto non sono collegate)
   ===================================================================== */
.visione__intro {
  row-gap: 2rem;
}

/* "Partner del cambiamento." su una riga sola sotto il primo periodo */
.visione__testa .titolo {
  max-width: 26ch;
}

.visione__corpo {
  margin-top: .5rem;
}

/* il metodo: tre nodi su un filetto che si riempie con lo scroll */
.visione__metodo {
  --metodo-gap: var(--colonne-gap);
  margin-top: var(--spazio-sezione);
  padding-block: calc(var(--spazio-sezione) * .9);
  overflow: hidden;
}

.visione__metodo .contenitore {
  position: relative;
}

.metodo {
  position: relative;
  display: grid;
  gap: 1.75rem;
  font-size: clamp(1.75rem, 1rem + 2.4vw, 3.25rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -.02em;
  color: var(--bianco);
}

/* mobile: filetto verticale a sinistra */
.metodo::before {
  content: '';
  position: absolute;
  left: 6px;
  top: .5em;
  bottom: .5em;
  width: 1px;
  background: var(--filetto);
}

.metodo__passo {
  position: relative;
  display: block;
  padding-left: 2.25rem;
  transition: opacity .6s var(--ease);
}

.metodo__nodo {
  position: absolute;
  left: 0;
  top: .38em;
  width: 13px;
  height: 13px;
  border: 1px solid rgba(255, 255, 255, .5);
  border-radius: 50%;
  background: var(--navy-profondo);
  transition: background-color .5s var(--ease), border-color .5s var(--ease), box-shadow .5s var(--ease);
}

.metodo__passo.is-attivo .metodo__nodo {
  border-color: var(--arancio);
  background: var(--arancio);
  box-shadow: 0 0 0 7px rgba(238, 121, 15, .16), 0 0 22px 4px rgba(238, 121, 15, .45);
}

.metodo__filetto {
  display: none;
}

/* palco: un'unica immagine grande al centro (su mobile le 3 foto in colonna) */
.visione__palco {
  margin-top: var(--spazio-blocco);
}

.visione__cornice {
  display: grid;
  gap: 1.5rem;
  max-width: 1080px;
  margin-inline: auto;
}

.visione__scatto {
  aspect-ratio: 3 / 2;
}

.visione__scatto picture {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--navy);
}

.visione__scatto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 35%;
}

/* inquadratura per foto quando il palco è più largo del 3:2: restano
   dentro lo schermo con il logo (1ª) e i volti (2ª e 3ª) */
.visione__scatto:nth-child(1) img { object-position: 50% 6%; }
.visione__scatto:nth-child(2) img { object-position: 50% 22%; }
.visione__scatto:nth-child(3) img { object-position: 50% 10%; }

.visione__indicatore {
  display: none;
}

@media (min-width: 1024px) {
  .visione__testa {
    grid-column: 1 / span 9; /* spazio per "Partner del cambiamento." su una riga */
  }

  .visione__lead {
    grid-column: 1 / span 5;
  }

  .visione__corpo {
    grid-column: 7 / -1;
    margin-top: .35rem;
  }

  /* desktop: tre colonne, nodi sopra le parole, filetto orizzontale */
  .metodo {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--metodo-gap);
    padding-top: 3.5rem;
  }

  .metodo::before {
    display: none;
  }

  .metodo__passo {
    padding-left: 0;
  }

  .metodo__nodo {
    top: -3.5rem;
    margin-top: -6px;
  }

  .metodo__filetto {
    position: absolute;
    top: -.5px;
    left: calc(var(--margine-sinistro) + 6px);
    display: block;
    width: calc((100% - var(--margine-sinistro) - var(--margine) + var(--metodo-gap)) * 2 / 3);
    height: 1px;
    background: var(--filetto);
  }

  .metodo__riempimento {
    position: absolute;
    inset: 0;
    background: var(--arancio);
    transform: scaleX(var(--avanzamento, 1));
    transform-origin: left;
  }

}

/* =====================================================================
   03 · L'INNOVAZIONE — intestazione | testo, video a tutto schermo,
   poi fascia con la montagna
   ===================================================================== */
.innovazione {
  padding-bottom: 0;
}

.innovazione__griglia {
  padding-bottom: var(--spazio-blocco);
  row-gap: 2rem;
  align-items: start;
}

.innovazione__domanda {
  margin-top: 2rem;
  font-weight: 500;
  color: var(--arancio);
}

/* le 5 esigenze: peso 600 + sottolineatura arancione (accesa da main.js) */
.innovazione__chiave {
  font-weight: 600;
  color: var(--bianco);
  background-image: linear-gradient(var(--arancio), var(--arancio));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 100% 2px;
  transition: background-size .7s var(--ease);
}

@media (min-width: 1024px) {
  .innovazione__testa {
    grid-column: 1 / span 6;
  }

  .innovazione__corpo {
    grid-column: 8 / -1;
    padding-top: 3.6rem;
  }
}

/* ---------------------------------------------------------------------
   FASCIA CON LA MONTAGNA (chiusura della 03)
   --------------------------------------------------------------------- */
.banda {
  position: relative;
  display: flex;
  align-items: center;
  min-height: max(100vh, 600px);
  overflow: hidden;
  isolation: isolate;
  background: var(--navy-profondo);
}

.banda__media {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
}

.banda__mouse {
  position: absolute;
  inset: -24px;
}

.banda__img,
.banda__img img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.banda__img img {
  object-fit: cover;
  object-position: 50% 20%;
}

.banda__velo {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(16, 18, 35, .9) 0%, rgba(16, 18, 35, .62) 36%, rgba(16, 18, 35, .1) 64%, rgba(16, 18, 35, 0) 100%);
}

.banda__contenuto {
  position: relative;
  padding-block: var(--spazio-sezione);
}

.banda__frase {
  max-width: 15ch;
}

.banda__riga {
  display: block;
}

.banda__riga--accento {
  font-weight: 700;
  color: var(--arancio);
}

@media (min-width: 1024px) {
  .banda__img {
    transform: translateX(12%) scale(1.12);
    transform-origin: 50% 0;
  }
}

@media (max-width: 1023px) {
  .banda {
    align-items: flex-end;
    min-height: max(92vh, 560px);
  }

  .banda__img img {
    object-position: 50% 0;
  }

  .banda__velo {
    background: linear-gradient(0deg, rgba(16, 18, 35, .95) 0%, rgba(16, 18, 35, .8) 45%, rgba(16, 18, 35, .1) 75%, rgba(16, 18, 35, .2) 100%);
  }

  .banda__contenuto {
    padding-bottom: calc(var(--spazio-sezione) * .6);
  }
}

/* =====================================================================
   04 · LE SCELTE IMPRENDITORIALI — titolo, poi foto | domande e testo
   ===================================================================== */
.scelte__griglia {
  row-gap: 2.5rem;
  align-items: start;
}

.scelte__foto {
  aspect-ratio: 3 / 2;
}

.scelte__foto picture {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--navy);
}

.scelte__foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.scelte__domande {
  display: flex;
  flex-direction: column;
  margin-bottom: 2.25rem;
  border-top: 1px solid var(--filetto);
}

.scelte__domanda {
  display: block;
  padding-block: 1.1rem;
  border-bottom: 1px solid var(--filetto);
  font-size: clamp(1.125rem, 1rem + .45vw, 1.375rem);
  font-weight: 500;
  line-height: 1.35;
  color: var(--bianco);
}

.scelte__chiusura {
  font-weight: 500;
  color: var(--bianco);
}

@media (min-width: 1024px) {
  .scelte__griglia {
    row-gap: var(--spazio-blocco);
  }

  .scelte__testa {
    grid-column: 1 / span 8;
  }

  .scelte__foto {
    grid-column: 1 / span 6;
    position: sticky;
    top: calc(var(--altezza-testata) + 3rem);
  }

  .scelte__testi {
    grid-column: 8 / -1;
  }
}

/* =====================================================================
   05 · LA TESTIMONIANZA — testo | foto sticky, citazione a tutta riga
   ===================================================================== */
.testimonianza__griglia {
  row-gap: 3rem;
  align-items: start;
}

.testimonianza__testi .lead {
  margin-block: 2rem 1.5rem;
}

.testimonianza__foto {
  aspect-ratio: 3 / 2;
}

.testimonianza__foto picture {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--navy-profondo);
}

.testimonianza__foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.citazione--grande {
  max-width: 28ch;
  padding-left: clamp(1.5rem, 3vw, 3rem);
  font-size: var(--t-h2);
  font-weight: 300;
  line-height: 1.2;
  letter-spacing: -.02em;
}

@media (min-width: 1024px) {
  .testimonianza__griglia {
    row-gap: var(--spazio-blocco);
  }

  .testimonianza__testi {
    grid-column: 1 / span 5;
  }

  .testimonianza__media {
    grid-column: 7 / -1;
    align-self: stretch;
  }

  .testimonianza__foto {
    position: sticky;
    top: calc(var(--altezza-testata) + 3rem);
  }

  .testimonianza__citazione {
    grid-column: 1 / span 11;
  }
}

/* =====================================================================
   06 · RIVIVI VISION EXPLORER — intestazione + pellicola orizzontale
   ===================================================================== */
.rivivi__intro {
  row-gap: 2rem;
}

/* particelle solo dietro l'intestazione: la sezione con il pin è altissima */
.rivivi > .particelle {
  bottom: auto;
  height: 100vh;
}

.rivivi__invito {
  margin-top: 1.5rem;
}

.rivivi__binario {
  position: relative;
  z-index: 3; /* le foto passano sopra il sentiero */
  margin-top: var(--spazio-blocco);
}

.rivivi__pellicola {
  display: flex;
  align-items: center;
  gap: clamp(12px, 1.6vw, 24px);
  padding-inline: var(--margine);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--margine);
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.rivivi__pellicola::-webkit-scrollbar {
  display: none;
}

/* altezza uguale per tutte le foto: cambia solo la larghezza (formato) */
.rivivi__scatto {
  flex: none;
  height: 56vw;
  scroll-snap-align: start;
}

.rivivi__scatto--verticale { aspect-ratio: 4 / 5; }
.rivivi__scatto--orizzontale { aspect-ratio: 3 / 2; }
.rivivi__scatto--ampia { aspect-ratio: 16 / 9; }

.rivivi__apri {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  overflow: hidden;
  border: 0;
  background: var(--navy);
  cursor: zoom-in;
}

.rivivi__apri picture,
.rivivi__apri img {
  width: 100%;
  height: 100%;
}

.rivivi__apri img {
  object-fit: cover;
  transition: transform .8s var(--ease);
}

/* hover: la foto si avvicina e compare l'angolo arancione del mirino */
.rivivi__apri::after {
  content: '';
  position: absolute;
  top: 12px;
  left: 12px;
  width: 18px;
  height: 18px;
  border-top: 2px solid var(--arancio);
  border-left: 2px solid var(--arancio);
  opacity: 0;
  transform: translate(6px, 6px);
  transition: opacity .3s var(--ease), transform .3s var(--ease);
}

.rivivi__apri:hover img {
  transform: scale(1.04);
}

.rivivi__apri:hover::after,
.rivivi__apri:focus-visible::after {
  opacity: 1;
  transform: none;
}

.rivivi__barra {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  margin-top: 2rem;
}

.rivivi__traccia {
  position: relative;
  flex: 1;
  height: 1px;
  background: var(--filetto);
}

.rivivi__riempimento {
  position: absolute;
  inset: 0;
  background: var(--arancio);
  transform: scaleX(.1);
  transform-origin: left;
}

.rivivi__contatore {
  font-size: var(--t-etichetta);
  font-weight: 400;
  letter-spacing: .3em;
  color: var(--testo-2);
  font-variant-numeric: tabular-nums;
}

.rivivi__corrente {
  font-weight: 700;
  color: var(--bianco);
}

@media (min-width: 768px) {
  .rivivi__scatto {
    height: clamp(320px, 52vh, 600px);
  }
}

@media (min-width: 1024px) {
  .rivivi__testa {
    grid-column: 1 / span 6;
  }

  .rivivi__testi {
    grid-column: 8 / -1;
    align-self: end;
  }
}

/* =====================================================================
   07 · IL FUTURO — racconto + lente sulla vetta, poi invito + form
   ===================================================================== */
.futuro {
  overflow-x: clip;
  background: var(--navy-profondo);
}

.futuro__alba {
  padding-block: var(--spazio-sezione) calc(var(--spazio-sezione) * .6);
  row-gap: 3.5rem;
  align-items: center;
}

.futuro__testi {
  margin-top: 2rem;
}

.futuro__chiusura {
  max-width: 40ch;
  margin-top: 2.5rem;
}

/* LENTE: la O del logo che inquadra la vetta, con attorno gli strumenti
   dell'osservatore (alone, scala graduata, orbita, ghiera). Tutto in
   SVG con viewBox 100×100: le misure sono percentuali della lente. */
.lente {
  position: relative;
  width: min(100%, 600px);
  aspect-ratio: 1;
  margin-inline: auto;
  overflow: clip; /* scala e orbita ruotano: il loro riquadro non allarga la pagina */
}

.lente__alone {
  position: absolute;
  inset: 4%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(91, 194, 229, .26) 0%, rgba(0, 113, 186, .14) 38%, rgba(16, 18, 35, 0) 70%);
}

.lente__scala,
.lente__orbita,
.lente__anello {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* scala graduata: 72 tacche fini + 12 tacche lunghe */
.lente__tacche {
  fill: none;
  stroke: rgba(255, 255, 255, .32);
  stroke-width: 2.2;
  stroke-dasharray: .4 4.6;
}

.lente__tacche--grandi {
  stroke: rgba(255, 255, 255, .75);
  stroke-width: 3.6;
  stroke-dasharray: .7 29.3;
}

/* orbita puntinata con tre nodi (uno arancione) */
.lente__traiettoria {
  fill: none;
  stroke: rgba(255, 255, 255, .28);
  stroke-width: .3;
  stroke-dasharray: .6 1.6;
}

.lente__satellite {
  fill: var(--bianco);
}

.lente__satellite--arancio {
  fill: var(--arancio);
}

.lente__vista {
  position: absolute;
  inset: 14%;
  overflow: hidden;
  border-radius: 50%;
  clip-path: circle(50% at 50% 50%);
  background: var(--navy);
}

.lente__vista picture,
.lente__vista img {
  width: 100%;
  height: 100%;
}

.lente__vista img {
  object-fit: cover;
}

/* ghiera a due archi, come la O del logo */
.lente__anello path {
  fill: none;
  stroke: rgba(255, 255, 255, .8);
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
}

@media (min-width: 1024px) {
  .futuro__racconto {
    grid-column: 1 / span 6;
  }

  .lente {
    grid-column: 8 / -1;
  }
}

/* ---------------------------------------------------------------------
   APPRODO: invito + form sul fotogramma "ORA TOCCA A TE" velato
   --------------------------------------------------------------------- */
.futuro__approdo {
  position: relative;
  padding-block: var(--spazio-sezione);
  overflow: hidden;
  isolation: isolate;
  background: var(--navy);
}

.futuro__sfondo {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
}

.futuro__sfondo picture,
.futuro__sfondo img {
  width: 100%;
  height: 100%;
}

.futuro__sfondo img {
  object-fit: cover;
}

.futuro__sfondo::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, var(--navy-profondo) 0%, rgba(16, 18, 35, 0) 30%),
    linear-gradient(90deg, rgba(16, 18, 35, .95) 0%, rgba(16, 18, 35, .88) 50%, rgba(16, 18, 35, .8) 100%);
}

.futuro__griglia {
  row-gap: 3.5rem;
  align-items: start;
}

/* titolo lungo (frase intera): un gradino sotto l'h2 perché stia in 4-5 righe */
.futuro__domanda {
  margin-bottom: 1.5rem;
  font-size: clamp(2rem, 1.5rem + 1.6vw, 2.75rem);
}

@media (min-width: 1024px) {
  .futuro__invito {
    grid-column: 1 / span 5;
    position: sticky;
    top: calc(var(--altezza-testata) + 3rem);
  }

  .visita {
    grid-column: 7 / -1;
  }
}

/* ---------------------------------------------------------------------
   FORM · Zoho Forms in un iframe: campi, colori e testi si cambiano in
   Zoho. Qui solo l'iframe, che è inline e lascerebbe uno spazio sotto.
   --------------------------------------------------------------------- */
.visita iframe {
  display: block;
  max-width: 100%;
}

/* =====================================================================
   LIGHTBOX della galleria
   ===================================================================== */
.lightbox {
  width: 100vw;
  max-width: none;
  height: 100vh;
  max-height: none;
  margin: 0;
  padding: 4.5rem 5.5rem;
  border: 0;
  background: rgba(10, 11, 22, .97);
  color: var(--bianco);
}

.lightbox[open] {
  display: flex;
  align-items: center;
  justify-content: center;
}

.lightbox::backdrop {
  background: rgba(10, 11, 22, .9);
}

.lightbox__figura {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.lightbox__img {
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 100%;
  object-fit: contain;
}

.lightbox__contatore {
  position: absolute;
  top: 1.6rem;
  left: 1.6rem;
  font-size: var(--t-etichetta);
  font-weight: 600;
  letter-spacing: .3em;
  color: var(--testo);
}

.lightbox__pulsante {
  position: absolute;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, .3);
  border-radius: 50%;
  background: rgba(255, 255, 255, .04);
  color: var(--bianco);
  transition: border-color .2s var(--ease);
}

.lightbox__pulsante:hover {
  border-color: var(--arancio);
}

.lightbox__pulsante svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.lightbox__pulsante--chiudi { top: 1rem; right: 1rem; }
.lightbox__pulsante--prec { top: 50%; left: 1.25rem; transform: translateY(-50%); }
.lightbox__pulsante--succ { top: 50%; right: 1.25rem; transform: translateY(-50%); }

@media (max-width: 767px) {
  .lightbox {
    padding: 4.5rem 1rem 6rem;
  }

  .lightbox__pulsante--prec,
  .lightbox__pulsante--succ {
    top: auto;
    bottom: 1.25rem;
    transform: none;
  }

  .lightbox__pulsante--prec { left: calc(50% - 60px); }
  .lightbox__pulsante--succ { right: calc(50% - 60px); }
}

/* =====================================================================
   SOLO CON JS E MOVIMENTO — stati di partenza.
   Senza JS o con prefers-reduced-motion niente di questo si applica.
   ===================================================================== */
@media (prefers-reduced-motion: no-preference) {
  .js [data-anim="curtain"] picture {
    clip-path: inset(100% 0 0 0);
  }

  .js .innovazione__chiave {
    background-size: 0% 2px;
  }

  .js .innovazione__chiave.is-accesa {
    background-size: 100% 2px;
  }

  .js .cambiamento__subire {
    --barra: 0;
  }

  .js .metodo__passo {
    opacity: .45; /* 4,4:1 sul navy: sopra la soglia AA per il testo grande */
  }

  .js .metodo__passo.is-attivo {
    opacity: 1;
  }

  .js .metodo__riempimento {
    --avanzamento: 0;
  }
}

@media (min-width: 1024px) and (prefers-reduced-motion: no-preference) {
  /* schermi: a tutta pagina (GSAP li fa partire più piccoli) */
  .js .schermo__cornice {
    width: 100%;
    max-width: none;
  }

  /* 02 · palco fermo: le tre foto sovrapposte nella stessa cornice */
  /* palco fermo: il contenitore delle foto sta a 80 px dalla fine
     dell'header sticky e a 80 px dal fondo dello schermo, a qualunque
     altezza di finestra; le foto lo riempiono (object-fit: cover) */
  .js .visione__palco {
    --palco-margine: 80px;
    position: relative;
    height: 100vh;
    margin-top: 0;
  }

  .js .visione__palco .contenitore {
    position: absolute;
    top: calc(var(--altezza-testata) + var(--palco-margine));
    bottom: var(--palco-margine);
    left: 0;
    right: 0;
  }

  .js .visione__cornice {
    display: block;
    width: 100%;
    max-width: none;
    height: 100%;
    aspect-ratio: auto;
  }

  .js .visione__scatto {
    position: absolute;
    inset: 0;
    aspect-ratio: auto; /* altrimenti il 3:2 vince sulle misure del contenitore */
  }

  .js .visione__scatto + .visione__scatto picture {
    clip-path: inset(100% 0 0 0);
  }

  .js .visione__indicatore {
    position: absolute;
    left: var(--margine-sinistro);
    right: var(--margine);
    bottom: calc(var(--palco-margine) / -2); /* a metà del margine inferiore */
    display: flex;
    justify-content: center;
    gap: .5rem;
    margin: 0;
  }

  .js .visione__indicatore span {
    position: relative;
    width: 44px;
    height: 2px;
    overflow: hidden;
    background: var(--filetto);
  }

  .js .visione__indicatore span::after {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--arancio);
    transform: scaleX(var(--riempi, 0));
    transform-origin: left;
  }

  /* il video Gemini Up MAX riempie lo schermo */
  .js .innovazione__schermo .schermo__cornice {
    height: 100vh;
    aspect-ratio: auto;
  }

  /* 06 · pellicola ferma a tutta altezza, scorre in orizzontale (GSAP) */
  .js .rivivi__binario {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100vh;
    overflow: hidden;
    margin-top: calc(var(--spazio-blocco) - 4rem);
    padding-top: var(--altezza-testata);
  }

  .js .rivivi__pellicola {
    width: max-content;
    overflow: visible;
    scroll-snap-type: none;
  }
}