/* ===========================================================================
   Linki — foglio di stile della landing page (linki.travel)
   ---------------------------------------------------------------------------
   UNA sola copia per tutte e quattro le lingue: le pagine in /it /en /fr /es
   hanno la stessa struttura e cambiano solo il testo, quindi tenere il CSS
   dentro ogni pagina significherebbe quattro copie che prima o poi divergono.

   I colori sono quelli dell'app (`lib/core/theme/app_theme.dart`), scritti in
   OKLCH col valore esadecimale a fianco: chi scarica l'app deve ritrovare lo
   stesso marchio. I caratteri sono i quattro dell'app.
   =========================================================================== */

/* --- 1. Segnaposti ------------------------------------------------------- */

:root {
  /* Marchio — ottanio chiaro, oro, crema. Vedi `design-system.md`. */
  --forest:        oklch(0.5336 0.0867 196.9);  /* #137C7E */
  --forest-deep:   oklch(0.3040 0.0481 199.2);  /* #063638 */
  --forest-light:  oklch(0.7776 0.0704 197.0);  /* #7FC5C6 */
  /* ⚠️ L'ottanio del marchio (#137C7E) fa 4,29:1 su `--cream-2` e 3,99:1 su
     `--cream-3`: va bene per un titolo (soglia 3:1) ma NON per il testo
     piccolo, come l'occhiello. Per quello c'e' questa versione piu' scura,
     che regge su tutti e quattro i crema (minimo 4,97:1). */
  --forest-testo:  oklch(0.4643 0.0759 197.3);  /* #0C6668 */
  --gold:          oklch(0.7226 0.1398 89.5);   /* #C8A020 */
  --gold-deep:     oklch(0.6030 0.1163 85.9);   /* #A07B18 */
  --gold-soft:     oklch(0.9615 0.0464 96.5);   /* #FBF3D0 */
  --brand-soft:    oklch(0.9199 0.0202 196.8);  /* #D6E9E9 */

  --ink:           oklch(0.2685 0.0366 222.6);  /* #0F2A33 */
  --ink-2:         oklch(0.4144 0.0290 227.3);  /* #3B4F58 */
  --navy:          oklch(0.1968 0.0250 219.1);  /* #07181D */

  --cream:         oklch(0.9748 0.0119 79.8);   /* #FBF6EE */
  --cream-2:       oklch(0.9486 0.0205 81.8);   /* #F5EDDF */
  --cream-3:       oklch(0.9247 0.0275 83.5);   /* #EFE5D2 */
  --cream-4:       oklch(0.8986 0.0350 82.9);   /* #E9DCC4 */

  /* ⚠️ `--muted` (#7B8A92) NON si usa per il testo: su crema fa 3,31:1,
     cioe' sotto il minimo di 4,5:1. Serve solo per filetti e ornamenti.
     Per il testo secondario su crema si usa `--ink-2` (7,98:1). */
  --muted:         oklch(0.6240 0.0212 230.9);  /* #7B8A92 */
  --line:          oklch(0.8946 0.0068 233.7);  /* #D8DDE0 */

  /* Filetti: una trasparenza del colore del testo, non un grigio a parte —
     cosi' resta coerente sia sul crema sia sul verde. */
  --hair-scuro:    color-mix(in oklab, var(--ink) 14%, transparent);
  --hair-chiaro:   color-mix(in oklab, var(--cream) 22%, transparent);

  /* Spaziature */
  --s1: 0.25rem;  --s2: 0.5rem;   --s3: 0.75rem;  --s4: 1rem;
  --s5: 1.5rem;   --s6: 2rem;     --s7: 3rem;     --s8: 4rem;
  --s9: 6rem;     --s10: 8rem;    --s11: 10rem;

  /* Raggi — gli stessi valori del tema Flutter */
  --r-s: 12px; --r-m: 16px; --r-l: 24px; --r-xl: 48px; --r-full: 9999px;

  /* Tipografia */
  --f-display: 'Plus Jakarta Sans', system-ui, sans-serif;
  --f-titolo:  'Instrument Serif', Georgia, 'Times New Roman', serif;
  --f-accento: 'Cormorant Garamond', Georgia, serif;
  --f-testo:   'Be Vietnam Pro', system-ui, sans-serif;

  /* Scala modulare, rapporto ~1,28 */
  --t--1: 0.875rem;
  --t-0:  1.0625rem;
  --t-1:  1.375rem;
  --t-2:  1.75rem;
  --t-3:  clamp(1.875rem, 1.4rem + 1.6vw, 2.375rem);
  --t-4:  clamp(2.25rem, 1.5rem + 3.2vw, 3.5rem);
  /* Tetto del titolone: 5.25rem = 84 px, sotto il limite dei 96. */
  --t-5:  clamp(2.75rem, 1.6rem + 5.4vw, 5.25rem);

  /* Larghezze */
  --w-shell: 1200px;
  --w-prosa: 62ch;   /* entro i 65-75ch di riga leggibile */

  /* Impilamento — scala semantica, mai numeri a caso */
  --z-sfondo: 0;
  --z-contenuto: 10;
  --z-fissa: 200;
  --z-velo: 300;
  --z-foglio: 400;

  /* Curve */
  --e-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --e-expo:  cubic-bezier(0.16, 1, 0.3, 1);

  --ombra-1: 0 1px 2px color-mix(in oklab, var(--ink) 8%, transparent);
  --ombra-2: 0 18px 40px -16px color-mix(in oklab, var(--ink) 28%, transparent);
  --ombra-3: 0 40px 80px -28px color-mix(in oklab, var(--ink) 42%, transparent);
}

/* --- 2. Base ------------------------------------------------------------- */

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--f-testo);
  font-size: var(--t-0);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }

:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Il salto al contenuto: invisibile finche' non riceve il fuoco. */
.salta {
  position: absolute;
  left: var(--s4);
  top: -100%;
  z-index: var(--z-foglio);
  padding: var(--s3) var(--s5);
  background: var(--forest);
  color: var(--cream);
  border-radius: var(--r-full);
  font-weight: 600;
  transition: top .2s var(--e-quart);
}
.salta:focus { top: var(--s4); }

/* --- 3. Impianto --------------------------------------------------------- */

.shell {
  width: 100%;
  max-width: var(--w-shell);
  margin-inline: auto;
  /* 16 px di margine laterale minimo: nessuno scorrimento orizzontale. */
  padding-inline: clamp(1rem, 4vw, 3rem);
}

.banda {
  position: relative;
  padding-block: clamp(var(--s8), 9vw, var(--s10));
}
.banda--crema  { background: var(--cream); }
.banda--crema2 { background: var(--cream-2); }
.banda--verde  { background: var(--forest); color: var(--cream); }
.banda--verde-cupo { background: var(--forest-deep); color: var(--cream); }
.banda--notte  { background: var(--navy); color: var(--cream); }

/* Sul verde e sul notte il testo secondario e' una trasparenza del crema,
   non un grigio: un grigio su un fondo colorato si slava. */
.banda--verde .sotto,
.banda--verde-cupo .sotto,
.banda--notte .sotto {
  color: color-mix(in oklab, var(--cream) 82%, transparent);
}

.prosa { max-width: var(--w-prosa); }

/* --- 4. Tipografia ------------------------------------------------------- */

.titolone {
  font-family: var(--f-display);
  font-weight: 800;
  font-size: var(--t-5);
  line-height: 1.0;
  letter-spacing: -0.035em;
  margin: 0;
  text-wrap: balance;
}

h2, .h2 {
  font-family: var(--f-titolo);
  font-weight: 400;
  font-size: var(--t-4);
  line-height: 1.04;
  letter-spacing: -0.015em;
  margin: 0 0 var(--s4);
  text-wrap: balance;
}

h3, .h3 {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: var(--t-1);
  line-height: 1.25;
  letter-spacing: -0.02em;
  margin: 0 0 var(--s2);
  text-wrap: balance;
}

h4, .h4 {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: var(--t-0);
  line-height: 1.35;
  letter-spacing: -0.01em;
  margin: 0 0 var(--s1);
}

p { margin: 0 0 var(--s4); text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

/* La parola in corsivo: e' il gesto tipografico dell'app (`step`, `2 notti`,
   `Linki AI`). Sul crema NON puo' essere oro — fa 2,29:1 — quindi li' e'
   ottanio chiaro; l'oro vive sui fondi scuri.

   ⚠️ Il carattere del corsivo cambia con quello del titolo che lo contiene,
   e non e' un vezzo: nell'apertura il titolo e' un sans geometrico e il
   corsivo calligrafico gli fa da contrasto; dentro un `h2`, che e' GIA' un
   serif, un secondo serif diverso si legge come lo stesso carattere storto —
   li' serve il corsivo VERO della stessa famiglia. */
.corsivo {
  font-family: var(--f-accento);
  font-style: italic;
  font-weight: 600;
  color: var(--forest);
}

h2 .corsivo, .h2 .corsivo, blockquote .corsivo {
  font-family: var(--f-titolo);
  font-weight: 400;
  /* Instrument Serif in corsivo parte molto a sinistra: senza questo respiro
     si attacca alla parola precedente. */
  padding-left: 0.06em;
}
/* ⚠️ `.fascia` deve stare in questo elenco: e' una fotografia scurita, quindi
   un contesto scuro a tutti gli effetti. Dimenticandola, il corsivo restava
   ottanio SOPRA una fotografia verde-blu e non si leggeva affatto —
   «Da qui si parte.» era invisibile. */
.banda--verde-cupo .corsivo,
.banda--notte .corsivo,
.fascia .corsivo,
.eroe .corsivo { color: var(--gold); }

/* ⚠️ Sulla banda ottanio l'oro PIENO fa 2,02:1 e non si legge: li' il corsivo
   usa la tinta chiara dell'oro (4,47:1). Col verde foresta di prima l'oro
   pieno bastava (3,75:1, sopra il 3:1 del testo grande); con l'ottanio, che
   e' piu' chiaro, non basta piu'. */
.banda--verde .corsivo { color: var(--gold-soft); }

.sotto {
  font-size: var(--t-1);
  line-height: 1.5;
  color: var(--ink-2);
  max-width: 54ch;
}

.occhiello {
  font-family: var(--f-testo);
  font-size: var(--t--1);
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--forest-testo);
  margin: 0 0 var(--s3);
}
.banda--verde-cupo .occhiello,
.banda--notte .occhiello { color: var(--gold); }
.banda--verde .occhiello { color: var(--gold-soft); }

/* --- 5. Bottoni ---------------------------------------------------------- */

.bottoni {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s3);
  margin: 0;
  padding: 0;
  list-style: none;
}
/* I due pulsanti degli store stanno insieme: quando lo spazio finisce
   scendono in coppia, invece di lasciarne uno orfano su una riga sua. */
.bottoni__store {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s3);
}

.btn {
  --btn-bg: var(--forest);
  --btn-fg: var(--cream);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s3);
  /* Almeno 44 px di bersaglio, sempre. */
  min-height: 56px;
  padding: var(--s3) var(--s5);
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: 1.5px solid transparent;
  border-radius: var(--r-full);
  font-family: var(--f-display);
  font-size: var(--t-0);
  font-weight: 700;
  letter-spacing: -0.01em;
  cursor: pointer;
  transition:
    transform .35s var(--e-quart),
    box-shadow .35s var(--e-quart),
    background-color .25s var(--e-quart);
}
.btn:hover { transform: translateY(-2px); box-shadow: var(--ombra-2); }
.btn:active { transform: translateY(0); }

/* L'oro con il testo ottanio scuro: e' il bottone primario dell'app. */
.btn--oro { --btn-bg: var(--gold); --btn-fg: var(--forest-deep); }
.btn--oro:hover { background: var(--gold-deep); color: var(--cream); }

.btn--fantasma {
  --btn-bg: transparent;
  --btn-fg: var(--ink);
  border-color: var(--hair-scuro);
}
.banda--verde .btn--fantasma,
.banda--verde-cupo .btn--fantasma,
.banda--notte .btn--fantasma,
.eroe .btn--fantasma {
  --btn-fg: var(--cream);
  border-color: color-mix(in oklab, var(--cream) 40%, transparent);
}
.btn--fantasma:hover {
  background: color-mix(in oklab, currentColor 10%, transparent);
  box-shadow: none;
}

/* Gli store non sono ancora aperti: il bottone c'e', lo stato e' dichiarato,
   e non si puo' premere. Meglio dirlo che fingere un collegamento. */
.btn--presto {
  --btn-bg: transparent;
  --btn-fg: var(--ink-2);
  border-color: var(--hair-scuro);
  border-style: dashed;
  cursor: default;
}
/* Sui fondi scuri e soprattutto SOPRA UNA FOTOGRAFIA il solo bordo non si
   legge: serve un velo dietro, altrimenti il pulsante sparisce nel
   paesaggio. */
.eroe .btn--presto,
.fascia .btn--presto,
.banda--verde .btn--presto,
.banda--verde-cupo .btn--presto,
.banda--notte .btn--presto {
  --btn-bg: color-mix(in oklab, var(--navy) 46%, transparent);
  --btn-fg: var(--cream);
  border-color: color-mix(in oklab, var(--cream) 34%, transparent);
  backdrop-filter: blur(6px);
}
.btn--presto:hover { transform: none; box-shadow: none; }

.btn .glifo { width: 20px; height: 20px; flex: none; }

.btn .presto {
  font-family: var(--f-testo);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: var(--r-full);
  background: color-mix(in oklab, currentColor 16%, transparent);
}

.nota-store {
  font-size: var(--t--1);
  color: var(--ink-2);
  margin-top: var(--s4);
  max-width: 46ch;
}
/* Ovunque il fondo sia scuro la nota schiarisce. `.fascia` DEVE stare in
   questo elenco: e' una fotografia scurita, e senza la sua riga la nota
   restava color inchiostro sopra una foto notturna - illeggibile, e senza
   che nessuno se ne accorgesse. Stessa trappola gia' vista sul corsivo. */
.eroe .nota-store,
.fascia .nota-store,
.banda--verde .nota-store,
.banda--verde-cupo .nota-store,
.banda--notte .nota-store {
  color: color-mix(in oklab, var(--cream) 80%, transparent);
}

/* --- 6. Testata ---------------------------------------------------------- */

.testata {
  position: sticky;
  top: 0;
  z-index: var(--z-fissa);
  transition: background-color .4s var(--e-quart), box-shadow .4s var(--e-quart);
}

/* Sopra la fotografia dell'apertura la testata non ha fondo, e sul cielo
   chiaro del tramonto le sigle delle lingue quasi non si leggevano. Un velo
   scuro sfumato — non una barra — regge il contrasto senza chiudere la
   fotografia. Sparisce appena la testata diventa solida. */
.testata::before {
  content: "";
  position: absolute;
  inset: -1px 0 auto 0;
  height: 132px;
  pointer-events: none;
  background: linear-gradient(to bottom,
    color-mix(in oklab, var(--navy) 52%, transparent),
    transparent);
  transition: opacity .4s var(--e-quart);
}
.testata.solida::before { opacity: 0; }
.testata__riga {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--s5);
  min-height: 74px;
}
.testata__marchio { flex: none; display: flex; align-items: center; }
.testata__marchio img { width: 76px; }

/* Sopra la fotografia dell'apertura la testata e' trasparente e il marchio
   passa alla versione crema; da 40 px di scorrimento diventa solida. */
.testata .marchio--crema { display: block; }
.testata .marchio--verde { display: none; }
.testata.solida {
  background: color-mix(in oklab, var(--cream) 94%, transparent);
  backdrop-filter: saturate(1.4) blur(10px);
  box-shadow: 0 1px 0 var(--hair-scuro);
}
.testata.solida .marchio--crema { display: none; }
.testata.solida .marchio--verde { display: block; }

.nav {
  display: flex;
  gap: var(--s5);
  margin-left: auto;
  align-items: center;
}
.nav a {
  font-size: var(--t--1);
  font-weight: 600;
  color: var(--cream);
  padding: var(--s2) 0;
  position: relative;
}
.testata.solida .nav a { color: var(--ink); }
.nav a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .3s var(--e-quart);
}
.nav a:hover::after { transform: scaleX(1); }

.lingue { display: flex; gap: 2px; align-items: center; }
.lingue a {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 8px 9px;
  border-radius: var(--r-s);
  color: color-mix(in oklab, var(--cream) 90%, transparent);
  min-width: 34px;
  text-align: center;
}
.testata.solida .lingue a { color: var(--ink-2); }
.lingue a:hover { background: color-mix(in oklab, currentColor 12%, transparent); }
.lingue a[aria-current="true"] {
  color: var(--gold);
  background: color-mix(in oklab, var(--gold) 16%, transparent);
}

.testata__cta { display: none; }

@media (max-width: 900px) {
  .nav { display: none; }
  .lingue { margin-left: auto; }
}

/* --- 7. Apertura --------------------------------------------------------- */

.eroe {
  position: relative;
  min-height: min(92svh, 860px);
  display: flex;
  align-items: flex-end;
  color: var(--cream);
  /* La testata e' sovrapposta: si recupera lo spazio con il padding. */
  padding-block: clamp(var(--s9), 16vh, var(--s11)) clamp(var(--s7), 8vh, var(--s9));
  margin-top: -74px;
  overflow: hidden;
  isolation: isolate;
}

.eroe__foto {
  position: absolute;
  inset: 0;
  z-index: var(--z-sfondo);
}
.eroe__foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 55% 45%;
}

/* Due veli, non uno: il primo scurisce in basso a sinistra, dove sta il
   testo; il secondo tinge tutta la fotografia di ottanio, cosi' la fotografia
   entra nella tavolozza invece di restarci accanto.

   ⚠️ Il navy e' stato ALLEGGERITO il 2026-09-17 (era 92% / 72%). Col verde
   foresta quel peso non si notava: il verde era scurissimo quanto la foto, e
   una fotografia quasi nera accanto sembrava coerente. L'ottanio e' circa il
   doppio piu' chiaro, e la stessa fotografia e' diventata un buco nero in
   mezzo alla pagina. Misurato: la fotografia arrivava a schermo a una
   luminanza di 0,012-0,028, dove un grigio medio sta a 0,216.
   Il margine c'era tutto: anche sul punto piu' chiaro della fotografia il
   testo crema resta sopra 9:1, contro il 4,5:1 richiesto. In cambio si e'
   alzata la TINTA ottanio (14 → 20%), che e' il velo con cui la fotografia
   entra nella tavolozza: piu' luce, e piu' marchio. */
.eroe__foto::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top,
      color-mix(in oklab, var(--navy) 58%, transparent) 0%,
      color-mix(in oklab, var(--navy) 44%, transparent) 38%,
      transparent 78%),
    linear-gradient(105deg,
      color-mix(in oklab, var(--forest-deep) 60%, transparent) 0%,
      transparent 62%),
    color-mix(in oklab, var(--forest-deep) 20%, transparent);
}

.eroe__testo { position: relative; z-index: var(--z-contenuto); max-width: 49rem; }
.eroe .titolone { color: var(--cream); }
.eroe .sotto {
  color: color-mix(in oklab, var(--cream) 88%, transparent);
  margin-top: var(--s5);
  max-width: 44ch;
}
.eroe .bottoni { margin-top: clamp(var(--s6), 4vh, var(--s7)); }

/* Una fotografia in una cornice morbida, come le card dell'app. */
.foto-bordo {
  border-radius: var(--r-l);
  box-shadow: var(--ombra-2);
}

/* --- 8. La spina punteggiata --------------------------------------------- */
/* E' il segno dell'app: la linea verticale tratteggiata che unisce le tappe
   sulla timeline. Qui unisce le sezioni. Si disegna scorrendo. */

.spina {
  position: relative;
  padding-left: clamp(0px, 3vw, 46px);
}
.spina::before {
  content: "";
  position: absolute;
  left: 8px;
  top: 0;
  bottom: 0;
  width: 2px;
  background-image: linear-gradient(
    to bottom,
    currentColor 0 6px,
    transparent 6px 14px
  );
  background-size: 2px 14px;
  opacity: 0.22;
}
.spina__nodo {
  position: absolute;
  left: 0;
  width: 18px;
  height: 18px;
  border-radius: var(--r-full);
  background: var(--gold);
  box-shadow: 0 0 0 5px color-mix(in oklab, var(--gold) 22%, transparent);
}
@media (max-width: 760px) {
  .spina { padding-left: 0; }
  .spina::before, .spina__nodo { display: none; }
}

/* --- 9. Come funziona: i tre passi -------------------------------------- */
/* I numeri ci stanno perche' questa sezione E' una sequenza: primo, secondo,
   terzo. Non sono un ornamento da mettere sopra ogni titolo. */

.passi {
  display: grid;
  gap: clamp(var(--s6), 5vw, var(--s8));
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  margin-top: var(--s8);
  counter-reset: passo;
}
.passo { position: relative; padding-top: var(--s6); }
.passo::before {
  counter-increment: passo;
  content: counter(passo, decimal-leading-zero);
  position: absolute;
  top: 0;
  left: 0;
  font-family: var(--f-titolo);
  font-size: var(--t-3);
  line-height: 1;
  color: var(--gold-deep);
}
.passo p { color: var(--ink-2); margin-top: var(--s3); }

/* Sfalsamento verticale: la griglia respira invece di sembrare tre celle.
   ⚠️ Si usa `margin-top` e NON `transform`: sugli stessi elementi c'e' la
   classe `.rivela`, che al suo ingresso azzera il `transform` — e azzerava
   anche lo sfalsamento, che quindi non si vedeva affatto. */
@media (min-width: 900px) {
  .passo:nth-child(2) { margin-top: var(--s6); }
  .passo:nth-child(3) { margin-top: calc(var(--s6) * 2); }
}

/* --- 10. Le funzioni: testo accanto alla schermata ---------------------- */

.duo {
  display: grid;
  gap: clamp(var(--s6), 5vw, var(--s9));
  align-items: center;
  grid-template-columns: 1fr;
}
@media (min-width: 900px) {
  .duo { grid-template-columns: 1fr 1fr; }
  .duo--rovesciato .duo__figura { order: -1; }
  .duo--largo { grid-template-columns: 1.05fr 0.95fr; }
}

.duo__testo h2 { margin-bottom: var(--s5); }
.duo__testo p { color: var(--ink-2); }
.banda--verde .duo__testo p,
.banda--verde-cupo .duo__testo p,
.banda--notte .duo__testo p {
  color: color-mix(in oklab, var(--cream) 82%, transparent);
}

/* L'elenco dei dettagli: un filetto per riga, niente pallini, niente card. */
.dettagli { list-style: none; margin: var(--s5) 0 0; padding: 0; }
.dettagli li {
  padding: var(--s4) 0;
  border-top: 1px solid var(--hair-scuro);
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: var(--s3);
  align-items: start;
}
.dettagli li:last-child { border-bottom: 1px solid var(--hair-scuro); }
.banda--verde .dettagli li,
.banda--verde-cupo .dettagli li,
.banda--notte .dettagli li { border-color: var(--hair-chiaro); }
.dettagli b {
  font-family: var(--f-display);
  font-weight: 700;
  letter-spacing: -0.01em;
}
.dettagli span { display: block; color: var(--ink-2); font-size: var(--t--1); }
.banda--verde .dettagli span,
.banda--verde-cupo .dettagli span,
.banda--notte .dettagli span {
  color: color-mix(in oklab, var(--cream) 78%, transparent);
}
/* Variante senza glifo: solo i filetti a separare le righe. */
.dettagli--nudi { max-width: 72ch; margin-top: var(--s7); }
.dettagli--nudi li { grid-template-columns: 1fr; }
.dettagli--nudi b { font-size: var(--t-1); font-weight: 600; letter-spacing: -0.015em; }

.dettagli .glifo {
  width: 20px; height: 20px;
  margin-top: 3px;
  color: var(--forest);
}
.banda--verde-cupo .dettagli .glifo,
.banda--notte .dettagli .glifo { color: var(--gold); }
.banda--verde .dettagli .glifo { color: var(--gold-soft); }

/* --- 11. La cornice del telefono ---------------------------------------- */

.telefono {
  --tel-w: clamp(240px, 30vw, 344px);
  position: relative;
  width: var(--tel-w);
  margin-inline: auto;
  border-radius: 40px;
  padding: 9px;
  background: linear-gradient(160deg, #2c3a40, var(--navy) 45%, #16272d);
  box-shadow:
    var(--ombra-3),
    0 0 0 1px color-mix(in oklab, var(--cream) 14%, transparent) inset;
}
.telefono img {
  width: 100%;
  border-radius: 32px;
  display: block;
  background: var(--cream);
}
/* Il lucido: una sola striscia obliqua, appena percepibile. */
.telefono::after {
  content: "";
  position: absolute;
  inset: 9px;
  border-radius: 32px;
  pointer-events: none;
  background: linear-gradient(118deg,
    color-mix(in oklab, white 16%, transparent) 0%,
    transparent 32%);
}

/* Due telefoni affiancati che si sovrappongono appena.
   ⚠️ La sovrapposizione si fa con un margine NEGATIVO, non con `gap`: `gap`
   non accetta valori negativi, li scarta in silenzio e i due telefoni
   restavano distanti. */
.coppia-telefoni {
  display: flex;
  justify-content: center;
  align-items: flex-start;
}
.coppia-telefoni .telefono:first-child { transform: rotate(-3.5deg); }
.coppia-telefoni .telefono:last-child {
  transform: rotate(3deg) translateY(var(--s6));
  margin-left: clamp(-56px, -3vw, -16px);
}
@media (max-width: 620px) {
  .coppia-telefoni { flex-wrap: wrap; gap: var(--s5); }
  .coppia-telefoni .telefono:last-child { transform: rotate(3deg); margin-left: 0; }
}

/* --- 11b. Le cornici della versione dal browser ------------------------- */
/* Due cornici per due catture VERE della webapp, prese dal tablet in Chrome
   senza la barra del browser: la barra la disegniamo noi, cosi' sul sito non
   finisce nessuna scheda aperta del telefono di chi le ha catturate. */

/* L'indirizzo, uguale nelle due cornici. */
.indirizzo {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  padding: 3px 12px;
  border-radius: var(--r-full);
  background: color-mix(in oklab, var(--cream) 9%, transparent);
  color: color-mix(in oklab, var(--cream) 74%, transparent);
  font-family: var(--f-testo);
  font-size: 0.6875rem;
  letter-spacing: 0.02em;
  line-height: 1.5;
  white-space: nowrap;
}
.indirizzo .glifo { width: 11px; height: 11px; flex: none; }

/* La finestra del computer. */
.finestra {
  border-radius: var(--r-m);
  overflow: hidden;
  background: var(--navy);
  box-shadow: var(--ombra-3);
}
.finestra__barra {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 10px var(--s4);
  background: #1d2b31;
}
.finestra__barra i {
  width: 11px; height: 11px;
  flex: none;
  border-radius: var(--r-full);
  background: color-mix(in oklab, var(--cream) 26%, transparent);
}
.finestra__barra .indirizzo { flex: 0 1 360px; margin-left: var(--s4); }
.finestra img { width: 100%; }

/* Il tablet in orizzontale. La cornice e' la stessa del telefono — stesso
   metallo scuro, stesso lucido obliquo — e le misure sono FRAZIONI della
   larghezza, cosi' il bordo resta in proporzione a ogni dimensione. */
.tavoletta {
  --bordo: clamp(7px, 1.05vw, 13px);
  position: relative;
  padding: var(--bordo);
  border-radius: calc(var(--bordo) * 2.4);
  background: linear-gradient(160deg, #2c3a40, var(--navy) 45%, #16272d);
  box-shadow:
    var(--ombra-3),
    0 0 0 1px color-mix(in oklab, var(--cream) 14%, transparent) inset;
}
/* La fotocamera, sul lato lungo come sui tablet veri. */
.tavoletta::before {
  content: "";
  position: absolute;
  top: calc(var(--bordo) / 2 - 2px);
  left: 50%;
  width: 4px; height: 4px;
  border-radius: var(--r-full);
  background: color-mix(in oklab, var(--cream) 24%, transparent);
  transform: translateX(-50%);
}
.tavoletta::after {
  content: "";
  position: absolute;
  inset: var(--bordo);
  border-radius: calc(var(--bordo) * 1.2);
  pointer-events: none;
  background: linear-gradient(118deg,
    color-mix(in oklab, white 12%, transparent) 0%,
    transparent 30%);
}
.tavoletta__schermo {
  border-radius: calc(var(--bordo) * 1.2);
  overflow: hidden;
  background: var(--cream);
}
.tavoletta__barra {
  display: flex;
  justify-content: center;
  padding: 6px var(--s3);
  background: #1d2b31;
}
.tavoletta__barra .indirizzo { font-size: 0.625rem; padding-block: 2px; }
.tavoletta img { width: 100%; }

/* La scena: il computer in alto a destra, il tablet che gli passa davanti in
   basso a sinistra. Tutte le misure sono percentuali della larghezza, e le
   altezze delle due catture seguono la larghezza: la sovrapposizione resta la
   stessa a ogni schermo.
   ⚠️ Il tablet copre solo la fascia BASSA della finestra (le card delle
   esperienze): testata, quattro passi e barra delle ore — cio' che la
   didascalia promette — restano scoperti. Alzandolo, la didascalia mente. */
.vetrina { margin-top: var(--s8); }
.vetrina figure { margin: 0; }
.vetrina figcaption {
  font-size: var(--t--1);
  line-height: 1.45;
  color: var(--ink-2);
  margin-top: var(--s4);
  max-width: 44ch;
}
.vetrina__tablet { position: relative; z-index: var(--z-contenuto); }

@media (min-width: 761px) {
  .vetrina .vetrina__computer { position: relative; width: 80%; margin-left: auto; }
  /* La didascalia del computer esce dal flusso: cosi' l'altezza della figura
     e' quella della finestra e basta, e il margine negativo del tablet si
     misura su quella. Sta a destra, dove il tablet non arriva. */
  .vetrina__computer figcaption {
    position: absolute;
    top: 100%;
    right: 0;
    width: 36%;
    text-align: right;
  }
  .vetrina .vetrina__tablet { width: 54%; margin-top: -7.5%; }
}
@media (max-width: 760px) {
  .vetrina .vetrina__tablet { width: 92%; margin: var(--s6) 0 0 auto; }
}

/* --- 11c. I fogli del PDF del programma --------------------------------- */
/* Tre pagine vere del PDF, appoggiate sul fondo notte come fogli su un
   tavolo. Sono carta, non schermi: niente cornice, un angolo appena
   smussato e un'ombra. La rotazione sta sul FOGLIO e non sulla figura: la
   figura porta `.rivela`, che al suo ingresso azzera il `transform` — e'
   la stessa trappola dei tre passi. La didascalia resta dritta. */
.fogli {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(var(--s4), 4vw, var(--s8));
  align-items: start;
  max-width: 1080px;
  margin: var(--s8) auto 0;
}
.fogli figure { margin: 0; }
.foglio-pdf {
  border-radius: 3px;
  overflow: hidden;
  background: var(--cream);
  /* Sul notte un'ombra scura da sola non si vede: il filo chiaro attorno
     stacca il bordo della copertina, che e' scura quanto il fondo. */
  box-shadow:
    0 0 0 1px color-mix(in oklab, var(--cream) 16%, transparent),
    0 30px 60px -24px #000;
}
.foglio-pdf img { width: 100%; }
.fogli figure:nth-child(1) .foglio-pdf { transform: rotate(-2.2deg); }
.fogli figure:nth-child(3) .foglio-pdf { transform: rotate(1.8deg); }
.fogli figcaption {
  font-size: var(--t--1);
  line-height: 1.45;
  margin-top: var(--s5);
  max-width: 32ch;
  color: color-mix(in oklab, var(--cream) 80%, transparent);
}
/* Il testo corrente di una `.prosa` su un fondo scuro. */
.banda--notte .prosa p.chiaro,
.banda--verde-cupo .prosa p.chiaro {
  color: color-mix(in oklab, var(--cream) 82%, transparent);
}

@media (min-width: 621px) {
  /* Il foglio di mezzo scende: tre fogli alla stessa altezza sono una
     griglia, uno sfalsato e' un tavolo. */
  .fogli figure:nth-child(2) { margin-top: var(--s7); }
}
@media (max-width: 620px) {
  /* Tre fogli in riga su un telefono sarebbero larghi cento pixel: i primi
     due affiancati, il terzo sotto, piu' grande — e' quello con piu' da
     leggere. */
  .fogli { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s6) var(--s4); }
  .fogli figure:nth-child(3) { grid-column: 1 / -1; width: 68%; margin-inline: auto; }
}

/* --- 12. Fasce fotografiche a tutta larghezza --------------------------- */

.fascia {
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  text-align: center;
  color: var(--cream);
  padding-block: clamp(var(--s9), 14vw, var(--s11));
  overflow: hidden;
}
.fascia__foto { position: absolute; inset: 0; z-index: var(--z-sfondo); }
.fascia__foto img { width: 100%; height: 100%; object-fit: cover; }
.fascia__foto::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom,
      color-mix(in oklab, var(--navy) 6%, transparent),
      color-mix(in oklab, var(--navy) 12%, transparent)),
    color-mix(in oklab, var(--forest-deep) 16%, transparent);
}
/* ⚠️ Il velo globale e' leggerissimo, e non e' lui a rendere leggibile il
   testo: quello lo fa lo SCRIM qui sotto, che scurisce solo il pezzo di
   fotografia su cui il testo appoggia.
   Storia in due passi, 2026-09-17: prima il navy stava a 58-78% e le
   fotografie erano buchi neri; poi si e' sceso a 40-52%, e non bastava ancora
   — la citta' e la veduta dal drone restavano coperte. Il punto e' che un velo
   uniforme paga su TUTTA l'immagine un problema che esiste solo dietro alle
   parole. Adesso il velo fa solo il suo mestiere di tavolozza (16% di ottanio
   + un soffio di navy) e la leggibilita' se la prende lo scrim.
   Misurato: la veduta dal drone passa da una luminanza di 0,080 a 0,265, la
   citta' da 0,027 a 0,055. */
.fascia .shell { position: relative; z-index: var(--z-contenuto); }

/* Lo SCRIM: una macchia scura morbida dietro al solo testo, che sfuma prima
   di arrivare ai bordi della fascia. E' quello che permette al velo globale di
   restare quasi trasparente.

   ⚠️ Sta nello `::before` della `.shell` e non sulla fotografia perche' deve
   seguire il TESTO: la `.shell` e' il contenitore del testo, quindi lo scrim
   si sposta e si ridimensiona con lui da solo, a ogni larghezza di schermo.
   ⚠️ `z-index: -1` lo mette dietro al testo restando davanti alla fotografia:
   la `.shell` ha gia' un `z-index`, quindi fa da contesto di impilamento e il
   -1 non puo' scappare sotto la fotografia.
   ⚠️ L'ellisse e' piu' grande della `.shell` (`inset` negativo) perche' la
   sfumatura deve finire FUORI dal testo: se finisse dentro, si vedrebbe il
   bordo dello scrim passare sopra le parole.
   ⚠️ Ma e' STRETTA in orizzontale (54%), e il numero e' misurato: la `.shell`
   e' larga fino a 1200 px mentre il testo sta in 26 caratteri, quindi
   un'ellisse larga quanto la shell copre mezza fotografia per niente. A 82%
   i bordi dell'immagine restavano a una luminanza di 0,134; a 54% salgono a
   0,217 — il triplo di stamattina — e l'oro sotto al testo tiene 3,4:1.
   Stringendola ancora (48%) l'oro scende a 3,10 e poi sotto il minimo: e' li'
   che il margine finisce.
   Misurato sotto al testo: crema 8,1:1 sulla veduta dal drone e 11,8:1 sulla
   citta'; l'oro del corsivo, che e' il vincolo vero, 3,5:1 e 5,1:1 contro il
   3:1 richiesto dal testo grande. */
.fascia .shell::before {
  content: "";
  position: absolute;
  inset: -14% -8%;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(ellipse 54% 82% at 50% 50%,
    color-mix(in oklab, var(--navy) 72%, transparent) 0%,
    color-mix(in oklab, var(--navy) 72%, transparent) 44%,
    color-mix(in oklab, var(--navy) 30%, transparent) 78%,
    transparent 100%);
}

/* ⚠️ Sugli schermi stretti l'ellisse deve tornare LARGA. Il 54% e' tagliato
   per lo schermo grande, dove la `.shell` arriva a 1200 px e il testo ne
   occupa meno della meta'; su un telefono il testo riempie la shell fino ai
   bordi, e un'ellisse stretta lascerebbe le estremita' delle righe fuori dalla
   parte piena dello scrim — cioe' proprio dove il testo finisce. */
@media (max-width: 900px) {
  .fascia .shell::before {
    background: radial-gradient(ellipse 92% 78% at 50% 50%,
      color-mix(in oklab, var(--navy) 72%, transparent) 0%,
      color-mix(in oklab, var(--navy) 72%, transparent) 52%,
      color-mix(in oklab, var(--navy) 30%, transparent) 82%,
      transparent 100%);
  }
}
.fascia h2 { color: var(--cream); max-width: 26ch; margin-inline: auto; }
.fascia .sotto {
  color: color-mix(in oklab, var(--cream) 86%, transparent);
  margin-inline: auto;
  max-width: 48ch;
}
.fascia .bottoni { justify-content: center; margin-top: var(--s7); }
.fascia .nota-store { margin-inline: auto; }

/* La citazione sulla fascia dall'alto: sola, grande, senza ornamenti. */
.fascia--citazione blockquote {
  margin: 0;
  font-family: var(--f-titolo);
  font-size: var(--t-4);
  line-height: 1.12;
  letter-spacing: -0.015em;
  max-width: 24ch;
  margin-inline: auto;
  text-wrap: balance;
}
.fascia--citazione cite {
  display: block;
  margin-top: var(--s5);
  font-family: var(--f-testo);
  font-style: normal;
  font-size: var(--t--1);
  color: color-mix(in oklab, var(--cream) 74%, transparent);
}

/* --- 13. Il prezzo ------------------------------------------------------- */

.prezzi {
  display: grid;
  gap: var(--s5);
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  margin-top: var(--s7);
}
.prezzo {
  padding: var(--s6);
  border-radius: var(--r-l);
  background: color-mix(in oklab, var(--cream) 8%, transparent);
  border: 1px solid var(--hair-chiaro);
  display: flex;
  flex-direction: column;
  gap: var(--s2);
}
.prezzo--gratis {
  background: color-mix(in oklab, var(--gold) 14%, transparent);
  border-color: color-mix(in oklab, var(--gold) 46%, transparent);
}
.prezzo__cifra {
  font-family: var(--f-display);
  font-weight: 800;
  font-size: var(--t-3);
  letter-spacing: -0.03em;
  color: var(--gold);
}
.prezzo--gratis .prezzo__cifra { color: var(--gold); }
.prezzo__nome {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: var(--t-0);
}
.prezzo__misura {
  font-size: var(--t--1);
  color: color-mix(in oklab, var(--cream) 78%, transparent);
}

.compreso {
  display: grid;
  gap: var(--s5);
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  margin-top: var(--s8);
  padding-top: var(--s7);
  border-top: 1px solid var(--hair-chiaro);
}
.compreso .h4 { color: var(--gold); }
.compreso ul { margin: var(--s3) 0 0; padding-left: 1.1em; }
.compreso li {
  margin-bottom: var(--s2);
  color: color-mix(in oklab, var(--cream) 84%, transparent);
  font-size: var(--t--1);
}
.compreso li::marker { color: var(--gold); }

/* --- 14. Le lingue e gli schermi ---------------------------------------- */

.schermi {
  display: grid;
  gap: var(--s6);
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  margin-top: var(--s7);
}
.schermo b {
  font-family: var(--f-display);
  font-weight: 700;
  display: block;
  margin-bottom: var(--s1);
}
.schermo p { color: var(--ink-2); font-size: var(--t--1); margin: 0; }

/* Il richiamo in fondo alla sezione del browser: e' la porta aperta oggi.
   Ottanio e non oro: sul crema l'oro non stacca, l'ottanio si' (4,99:1 col
   testo crema sopra). */
.browser-invito {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s3) var(--s6);
  margin-top: var(--s7);
  padding-top: var(--s6);
  border-top: 1px solid var(--hair-scuro);
}
.browser-invito .nota-store { margin: 0; }

/* --- 15. Il piede -------------------------------------------------------- */

.piede {
  background: var(--navy);
  color: color-mix(in oklab, var(--cream) 82%, transparent);
  padding-block: var(--s9) var(--s6);
  position: relative;
  overflow: hidden;
}
/* L'emblema dell'app, grande e appena visibile: una filigrana. */
.piede__emblema {
  position: absolute;
  right: -60px;
  bottom: -80px;
  width: 420px;
  opacity: 0.06;
  pointer-events: none;
}
.piede__cima {
  display: grid;
  gap: var(--s7);
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  position: relative;
}
.piede img.marchio { width: 82px; margin-bottom: var(--s4); }
.piede .h4 {
  color: var(--gold);
  font-size: var(--t--1);
  letter-spacing: 0.02em;
  margin-bottom: var(--s3);
}
.piede ul { list-style: none; margin: 0; padding: 0; }
/* I collegamenti del piede sono alti almeno 24 px. Da riga di testo erano
   18: un bersaglio piu' piccolo di cosi' si sbaglia col dito, e sono nove
   voci una sotto l'altra. Il margine scende per compensare l'imbottitura. */
.piede li { margin-bottom: var(--s1); }
.piede a { font-size: var(--t--1); display: inline-block; padding-block: 4px; }
.piede a:hover { color: var(--gold); text-decoration: underline; text-underline-offset: 3px; }
.piede__fondo {
  margin-top: var(--s8);
  padding-top: var(--s5);
  border-top: 1px solid var(--hair-chiaro);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s4);
  justify-content: space-between;
  font-size: 0.8125rem;
  color: color-mix(in oklab, var(--cream) 62%, transparent);
  position: relative;
}
.piede__lingue { display: flex; gap: var(--s4); }

/* --- 15b. La banda ottanio: niente testo sbiadito ------------------------ */
/*
   ⚠️ Sul fondo ottanio chiaro (#137C7E) il crema fa 4,63:1 A PIENA OPACITA'.
   Sopra il verde foresta di prima ne faceva 8,61, e c'era spazio per
   sbiadire il testo secondario al 78-82% senza scendere sotto il minimo.
   Qui non c'e': all'82% si arriva a 3,65:1, cioe' sotto il 4,5:1 richiesto.
   Percio' su QUESTA banda il testo secondario resta crema pieno e la
   gerarchia la fanno la dimensione e il peso, non l'opacita'. Sulle bande
   scure (`--verde-cupo`, `--notte`) la trasparenza resta com'era.
*/
.banda--verde .sotto,
.banda--verde .duo__testo p,
.banda--verde .dettagli span,
.banda--verde .nota-store { color: var(--cream); }

/* Stessa ragione per il bordo del bottone fantasma: al 40% sull'ottanio fa
   1,96:1 e sparisce. Al 70% arriva a 3,08:1, il minimo per un contorno. */
.banda--verde .btn--fantasma {
  border-color: color-mix(in oklab, var(--cream) 70%, transparent);
}

/* --- 16. Movimento ------------------------------------------------------- */
/* Regola: il contenuto e' VISIBILE per difetto. L'animazione si accende solo
   quando c'e' JavaScript (classe `.js` sul documento) e solo se chi guarda
   non ha chiesto meno movimento. Cosi' la pagina si legge anche senza JS,
   nei lettori senza schermo e nelle catture automatiche. */

.js .rivela {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity .8s var(--e-expo),
    transform .8s var(--e-expo);
}
.js .rivela.dentro { opacity: 1; transform: none; }
.js .rivela[data-ritardo="1"] { transition-delay: .09s; }
.js .rivela[data-ritardo="2"] { transition-delay: .18s; }
.js .rivela[data-ritardo="3"] { transition-delay: .27s; }

/* L'apertura: una sola coreografia, non un effetto per ogni pezzo. */
.js .eroe__foto img { transform: scale(1.06); transition: transform 1.6s var(--e-expo); }
.js .pronta .eroe__foto img { transform: scale(1); }

.js .eroe__testo > * { opacity: 0; transform: translateY(14px); }
.js .pronta .eroe__testo > * {
  opacity: 1;
  transform: none;
  transition: opacity .9s var(--e-expo), transform .9s var(--e-expo);
}
.js .pronta .eroe__testo > *:nth-child(1) { transition-delay: .10s; }
.js .pronta .eroe__testo > *:nth-child(2) { transition-delay: .20s; }
.js .pronta .eroe__testo > *:nth-child(3) { transition-delay: .30s; }
.js .pronta .eroe__testo > *:nth-child(4) { transition-delay: .40s; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  /* Niente spostamenti: solo comparsa, e comunque immediata. */
  .js .rivela,
  .js .eroe__testo > *,
  .js .pronta .eroe__testo > * {
    opacity: 1 !important;
    transform: none !important;
    transition: opacity .01s linear !important;
  }
  .js .eroe__foto img,
  .js .pronta .eroe__foto img { transform: none !important; transition: none !important; }
  .btn:hover { transform: none; }
  .passo:nth-child(2), .passo:nth-child(3) { transform: none; }
  .coppia-telefoni .telefono { transform: none !important; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}

/* --- 17. Ritocchi per schermi piccoli ----------------------------------- */

@media (max-width: 620px) {
  .btn { width: 100%; }
  .bottoni { flex-direction: column; align-items: stretch; }
  .eroe { min-height: auto; padding-block: var(--s10) var(--s8); }
  .fascia--citazione blockquote { max-width: none; }
}

/* ===========================================================================
   11d. I VIAGGI PRONTI — la fascia che scorre (pezzo 3, spec 2026-10-07)
   ---------------------------------------------------------------------------
   Il nastro: due copie dello stesso elenco, spostate a sinistra all'infinito
   (le costruisce linki.js dall'elenco di /{lingua}/viaggi/elenco.json).
   ⚠️ La seconda copia e' `aria-hidden` coi link fuori dal Tab, ma NON
   `inert`: le due copie si alternano sotto il mouse, e una copia inerte non
   si clicca — «Guarda» funzionava una volta su due (bozzetto, 2026-10-07).
   ⚠️ Con JavaScript la sezione resta nascosta finche' non arriva almeno un
   viaggio (`.pronti--piena`); senza, si vedono titolo, frase e il tasto
   all'elenco. ⚠️ Non `.pronta`: quel nome e' gia' dell'apertura
   (`.js .pronta .eroe__testo`).
   Ogni copertina porta il suo carattere e il suo colore d'accento
   (`--f-viaggio`, `--accento`…): un assaggio della pagina del viaggio.
   =========================================================================== */
.js .pronti:not(.pronti--piena) { display: none; }
.pronti__testa { display: grid; gap: 1.25rem; align-items: end; margin-bottom: clamp(2rem, 4vw, 3rem); }
@media (min-width: 900px) { .pronti__testa { grid-template-columns: 1fr auto; } }
.pronti__sotto { max-width: 52ch; margin: 0; }
.pronti__ferma {
  display: inline-flex; align-items: center; gap: 0.5rem; min-height: 44px; padding: 0.55rem 1rem;
  border-radius: var(--r-full); border: 1.5px solid color-mix(in oklab, var(--cream) 40%, transparent);
  background: transparent; color: var(--cream); font: 600 0.875rem/1 var(--f-display); cursor: pointer;
  justify-self: start;
}
.pronti__ferma:hover { background: color-mix(in oklab, var(--cream) 12%, transparent); }
.pronti__ferma svg { width: 16px; height: 16px; fill: currentColor; }
.pronti__ferma[hidden] { display: none; }

.vetrina-pronti {
  overflow: hidden; padding-block: 0.5rem 1rem;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.vetrina-pronti .nastro { display: flex; width: max-content; animation: pronti-scorri var(--durata-nastro, 95s) linear infinite; }
.vetrina-pronti:hover .nastro,
.vetrina-pronti:focus-within .nastro,
.vetrina-pronti.ferma-tutto .nastro { animation-play-state: paused; }
@keyframes pronti-scorri { to { transform: translateX(-50%); } }
.vetrina-pronti .giro { display: flex; gap: 1.5rem; padding: 0 1.5rem 0 0; margin: 0; list-style: none; }

.pronto { width: 290px; flex: none; }
.pronto__copertina {
  position: relative; aspect-ratio: 4 / 5; border-radius: var(--r-l); overflow: hidden; isolation: isolate;
  background: color-mix(in oklab, var(--forest-deep) 70%, var(--navy));
  box-shadow: 0 30px 60px -30px oklch(0.12 0.03 220 / .9);
}
.pronto__copertina img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform 1.4s var(--e-expo); }
.pronto:hover .pronto__copertina img { transform: scale(1.05); }
.pronto__copertina::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(0deg, oklch(0.16 0.03 230 / .92) 0%, oklch(0.16 0.03 230 / .45) 38%, transparent 62%),
              linear-gradient(180deg, oklch(0.16 0.03 230 / .55) 0%, transparent 24%);
}
.pronto__segno {
  position: absolute; top: 1rem; left: 1rem; width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center; background: var(--accento); color: oklch(0.2 0.03 230);
}
.pronto__segno svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.pronto__titolo {
  position: absolute; left: 1.25rem; right: 1.25rem; bottom: 1.1rem; margin: 0; color: var(--cream);
  font-family: var(--f-viaggio); font-weight: var(--p-viaggio, 400); font-style: var(--s-viaggio, normal);
  font-size: var(--d-viaggio, 1.75rem); line-height: 1.02; letter-spacing: var(--l-viaggio, 0);
  text-transform: var(--u-viaggio, none); text-wrap: balance;
}
.pronto__titolo::after { content: ""; display: block; width: 44px; height: 4px; border-radius: 4px; background: var(--accento); margin-top: 0.7rem; }
/* ⚠️ Il credito sta su una PILLOLA scura, non sul solo velo: il velo in cima
   lassu' vale ~0,34-0,44, e su un cielo bianco il crema all'82% faceva
   1,8-2,4:1 (l'ombra del testo non conta). Con la pillola navy al 70% il
   caso peggiore — bianco puro senza nessun velo — fa 4,87:1; col velo vero
   6,75:1; su un cielo azzurro chiaro (#CFE6F5) 5,46:1 e 7,27:1. Al 65% il
   bianco puro scendeva a 4,16:1: non abbassarlo.
   La pillola abbraccia il testo: solo `right` e un `max-width`, senza `left`,
   cosi' la larghezza e' quella delle parole e non della copertina. */
.pronto__credito {
  position: absolute; top: 0.95rem; right: 1rem; max-width: calc(100% - 5.5rem); text-align: right;
  padding: 0.2rem 0.5rem; border-radius: 0.5rem; background: color-mix(in oklab, var(--navy) 70%, transparent);
  font: 500 0.625rem/1.3 var(--f-testo); color: color-mix(in oklab, var(--cream) 82%, transparent);
}
.pronto__piede { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.9rem 0.25rem 0; }
.pronto__meta { font: 600 0.8125rem/1.35 var(--f-display); color: color-mix(in oklab, var(--cream) 86%, transparent); }
.pronto__guarda {
  display: inline-flex; align-items: center; gap: 0.4rem; flex: none; min-height: 44px; padding: 0.6rem 1.1rem;
  border-radius: var(--r-full); background: var(--gold); color: var(--forest-deep); font: 700 0.9375rem/1 var(--f-display);
  text-decoration: none; transition: transform .3s var(--e-expo), background-color .2s;
}
.pronto__guarda:hover { transform: translateY(-2px); background: var(--gold-soft); }
.pronto__guarda svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.pronti__fondo { display: flex; flex-wrap: wrap; gap: 1rem 2rem; align-items: center; justify-content: space-between; margin-top: clamp(2rem, 4vw, 3rem); }

/* Il nastro FERMO, da scorrere a mano. Un posto solo per due casi, e la
   classe `.a-mano` la mette linki.js sulla sezione:
   • «riduci le animazioni» (subito, e anche se lo si accende a pagina aperta);
   • il primo fuoco da TASTIERA dentro la fascia. Il nastro in moto e'
     un'animazione con `transform`: la copertina col fuoco scivola via dallo
     schermo mentre la si guarda, anche se il browser all'inizio la porta in
     vista. Per questo il nastro va fermato e reso scorrevole: cosi' il Tab
     porta ogni «Guarda» davanti agli occhi, e ci resta.
   ⚠️ Niente `@media (prefers-reduced-motion)` qui: il nastro esiste solo con
   JavaScript, e la stessa classe copre tutti e due i casi senza copiare le
   regole. Le copie di riempimento si nascondono; «Ferma» non serve piu'. */
.pronti.a-mano .nastro { animation: none; }
.pronti.a-mano .vetrina-pronti { overflow-x: auto; scroll-snap-type: x mandatory; -webkit-mask-image: none; mask-image: none; }
.pronti.a-mano .pronto { scroll-snap-align: start; }
.pronti.a-mano .giro[aria-hidden="true"], .pronti.a-mano .pronto[aria-hidden="true"] { display: none; }
.pronti.a-mano .pronti__ferma { display: none; }