@charset "utf-8";
/* =============================================================================
   MANUREVA — Polinesia Francese
   Foglio di stile del redesign del 15/09/2026.

   Il cliente ha chiesto «un grosso biglietto da visita»: semplice, elegante,
   che si legga come una rivista di viaggi e non come un sito aziendale.
   Perciò: molta aria, un solo carattere con grazie per i titoli, fotografie
   grandi ma mai una sopra l'altra, e un unico colore d'accento.

   Ordine: 1 fondamenta · 2 tipografia · 3 le due lingue · 4 impaginato
   5 bottoni · 6 testata · 7 la rotta (la firma) · 8 hero · 9 cosa facciamo
   10 chi siamo · 11 come lo facciamo · 12 geografia · 13 tipologie
   14 perché noi · 15 contatti · 16 piede · 17 movimento · 18 eccezioni
   ========================================================================== */

/* ── 1 · FONDAMENTA ───────────────────────────────────────────────────────── */
:root {
  /* Il mare, non una tavolozza di moda. */
  --blu-900: #0A1E33;
  --blu-800: #0E2A47;   /* il testo e le sezioni scure */
  --blu-600: #1B4266;
  --blu-400: #5B8FB9;   /* l'azzurro degli accenti */
  --blu-200: #A9C6DD;
  --sabbia:  #F2EAD9;
  --sabbia-scura: #E3D5B8;
  --corallo: #E36F5A;   /* solo accenti piccolissimi */
  --oro: #B8935A;       /* i filetti sottili fra i blocchi */
  --oro-ink: #86673A;   /* l'oro quando fa testo: 4,9:1 su crema */
  --crema:   #FAFAF7;
  --bianco:  #FFFFFF;

  /* Il marchio FENUA: il blu profondo dell'oceano e il turchese della laguna.
     Sono i due colori dell'anello, e sono gli unici accenti del sito.
     Contrasti misurati, non a occhio:
       --laguna      su fondo scuro #0E2A47 .... 7,04:1   (il magenta dava 3,42:1)
       --laguna-ink  su crema #FAFAF7 .......... 5,85:1
       bianco su --blu-btn ..................... 14,78:1                       */
  --blu-marchio: #12235C;
  --laguna:      #3FC5D4;   /* accento SU FONDO SCURO: testata, piede, apertura */
  --laguna-ink:  #116C77;   /* accento come TESTO SU FONDO CHIARO               */
  --blu-btn:       #12235C; /* fondo dei pulsanti pieni                         */
  --blu-btn-scuro: #0B1740; /* il pulsante premuto                              */

  --inchiostro: var(--blu-800);
  --inchiostro-soft: #4A6076;
  --inchiostro-tenue: #55687C;   /* 5,49:1 su crema · 4,80:1 su sabbia */
  --riga: rgba(14, 42, 71, .12);
  --riga-chiara: rgba(255, 255, 255, .16);

  --font-t: "Spectral", "Iowan Old Style", Georgia, serif;
  --font-c: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Scala tipografica, fluida */
  --t-xs:  .78rem;
  --t-sm:  .92rem;
  --t-md:  clamp(1rem, .96rem + .18vw, 1.08rem);
  --t-lg:  clamp(1.1rem, 1rem + .4vw, 1.28rem);
  --t-h3:  clamp(1.5rem, 1.25rem + 1.05vw, 2.1rem);
  --t-h2:  clamp(2rem, 1.5rem + 2.1vw, 3.4rem);
  --t-h1:  clamp(2.15rem, 1.5rem + 2.5vw, 3.9rem);

  --gutter: clamp(1.15rem, 4vw, 2.5rem);
  /* piu' respiro fra una sezione e l'altra: 72px sul telefono, 132 sul grande */
  --sez-y: clamp(4.5rem, 8vw, 8.25rem);
  --gap: clamp(1.8rem, 3.4vw, 3rem);
  --barra-h: 30px;
  --testa-h: 62px;
  --testata-h: calc(var(--barra-h) + var(--testa-h));

  --curva: cubic-bezier(.22, .61, .36, 1);
  --curva-morbida: cubic-bezier(.33, 1, .68, 1);
  /* ombre piu' morbide: si vedono, ma non pesano */
  --ombra: 0 8px 32px rgba(14, 42, 71, .08);
  --ombra-su: 0 18px 48px rgba(14, 42, 71, .14);
  --raggio: 18px;
  --ombra-alta: 0 34px 90px -32px rgba(10, 30, 51, .55);
}

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: calc(var(--testata-h) + 14px);
}

body {
  margin: 0;
  background: var(--crema);
  color: var(--inchiostro);
  font-family: var(--font-c);
  font-size: var(--t-md);
  font-weight: 400;
  line-height: 1.7;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body.bloccato { overflow: hidden; }

img, video, svg, picture { display: block; max-width: 100%; }
img, video { height: auto; }

a { color: inherit; text-decoration: none; }
ul, ol { margin: 0; padding: 0; list-style: none; }
figure, blockquote, p, h1, h2, h3, h4 { margin: 0; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

::selection { background: var(--blu-400); color: #fff; }

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

.salta {
  position: absolute;
  left: 0;
  top: 0;
  transform: translateY(-140%);
  z-index: 400;
  background: var(--blu-800);
  color: #fff;
  padding: .85rem 1.3rem;
  border-radius: 0 0 6px 0;
  transition: transform .2s var(--curva);
}
.salta:focus { transform: none; }

.ico { width: 22px; height: 22px; flex: none; }
.ico--sm { width: 16px; height: 16px; }

/* ── 2 · TIPOGRAFIA ───────────────────────────────────────────────────────── */
.titolo, .hero__t, .passo__t, .tappa__t, .arc__t,
.viaggio__t, .ragione__t, .capitale__t, .flusso__t {
  font-family: var(--font-t);
  font-weight: 400;
  line-height: 1.14;
  letter-spacing: -.005em;
}

.titolo { font-size: var(--t-h2); max-width: 20ch; }
.intro--centro .titolo { max-width: 24ch; margin-inline: auto; }

.kicker {
  font-family: var(--font-c);
  font-size: var(--t-xs);
  font-weight: 500;
  font-size: clamp(.76rem, .72rem + .12vw, .8rem);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--oro-ink);
  display: flex;
  align-items: center;
  gap: .8rem;
  margin-bottom: 1.15rem;
}
.kicker::before {
  content: "";
  width: clamp(26px, 3.6vw, 44px);
  height: 1px;
  background: var(--oro);
  flex: none;
  transform-origin: left;
}
.intro--centro .kicker { justify-content: center; }
.kicker--chiaro { color: rgba(255, 255, 255, .8); }
.sez--scura .kicker::before, .hero .kicker::before { background: var(--oro); opacity: .85; }

/* il filetto che si tira sotto al titolo quando la sezione entra */
.titolo { position: relative; padding-bottom: .55rem; }
.titolo::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: clamp(48px, 7vw, 90px);
  height: 1px;
  background: var(--oro);
  opacity: .45;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .8s var(--curva-morbida) .18s;
}
.dentro .titolo::after, .intro.dentro .titolo::after { transform: scaleX(1); }
.intro--centro .titolo::after { left: 50%; margin-left: calc(clamp(48px, 7vw, 90px) / -2); }

.lead {
  font-size: var(--t-lg);
  color: var(--inchiostro-soft);
  max-width: 54ch;
  margin-top: 1.1rem;
  line-height: 1.68;
}
.intro--centro .lead { margin-inline: auto; }

/* ── 3 · LE DUE LINGUE, UNA ALLA VOLTA ───────────────────────────────────── */
/* In pagina c'è solo la lingua attiva. Il testo dell'altra sta nel dizionario
   in testi.js e prende il posto di questo quando si preme IT o FR: niente
   ricaricamento, niente due righe una sotto l'altra. */
.lingue {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  flex: none;
}
.lingue__b {
  position: relative;
  display: grid;
  place-items: center;
  min-width: 40px;
  min-height: 40px;
  padding: 0 .45rem;
  font-family: var(--font-c);
  font-size: .78rem;
  font-weight: 500;
  letter-spacing: .1em;
  color: rgba(255, 255, 255, .62);
  border-radius: 6px;
  transition: color .3s var(--curva), background-color .3s var(--curva);
}
.lingue__b::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 6px;
  width: 14px;
  height: 1.5px;
  margin-left: -7px;
  background: var(--laguna);
  border-radius: 2px;
  transform: scaleX(0);
  transition: transform .35s var(--curva);
}
.lingue__b:hover { color: var(--laguna); }
.lingue__b[aria-pressed="true"] { color: #fff; }
.lingue__b[aria-pressed="true"]::after { transform: scaleX(1); }
.lingue__filo {
  width: 1px;
  height: 14px;
  background: rgba(255, 255, 255, .24);
  flex: none;
}

/* nel menu del telefono l'interruttore è più grande: si tocca col pollice */
.lingue--menu { display: none; }
.lingue--menu .lingue__b { min-width: 56px; min-height: 46px; font-size: .92rem; }

/* ── 4 · IMPAGINATO ──────────────────────────────────────────────────────── */
.cont {
  width: 100%;
  max-width: 1240px;
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.cont--largo { max-width: 1400px; }
.cont--stretto { max-width: 820px; }

.sez {
  position: relative;
  padding-block: var(--sez-y);
  isolation: isolate;
}
.sez--sabbia { background: var(--sabbia); }
.sez--scura { background: var(--blu-800); color: #fff; }
.sez--scura .lead { color: rgba(255, 255, 255, .78); }
.sez--scura .kicker { color: rgba(255, 255, 255, .6); }

.sez__sfondo {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
}
.foto--sfondo { width: 100%; height: 100%; }
.foto--sfondo img { width: 100%; height: 100%; object-fit: cover; }
.sez--cosa .sez__sfondo { opacity: .07; }
.sez--come .sez__sfondo { opacity: .2; }
.sez--contatti .sez__sfondo { opacity: .26; }
.sez--come .sez__sfondo::after,
.sez--contatti .sez__sfondo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, var(--blu-900) 0%, rgba(10, 30, 51, .72) 50%, var(--blu-900) 100%);
}

.intro { max-width: 62ch; margin-bottom: clamp(2.4rem, 5vw, 4rem); }
.intro--centro { text-align: center; margin-inline: auto; }

/* le fotografie: un fondo tinta unita finché non arrivano, così non lampeggia */
.foto { position: relative; overflow: hidden; background: var(--tinta, var(--blu-200)); }
.foto img { width: 100%; height: 100%; object-fit: cover; }

/* ── 5 · BOTTONI ─────────────────────────────────────────────────────────── */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  padding: .92rem 1.6rem;
  min-height: 52px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-family: var(--font-c);
  font-size: var(--t-sm);
  font-weight: 500;
  letter-spacing: .04em;
  text-align: center;
  cursor: pointer;
  transition: transform .35s var(--curva), background-color .35s var(--curva),
              border-color .35s var(--curva), color .35s var(--curva),
              box-shadow .35s var(--curva);
}
.btn__t { display: block; line-height: 1.25; }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn--wa.btn--pieno {
  background: var(--blu-btn);
  color: #fff;
  box-shadow: 0 14px 34px -16px rgba(163, 22, 154, .75);
}
.btn--wa.btn--pieno:hover,
.btn--wa.btn--pieno:focus-visible {
  background: var(--blu-btn-scuro);
  box-shadow: 0 20px 44px -18px rgba(163, 22, 154, .85);
}
.btn--grande { padding: 1.08rem 2rem; min-height: 60px; font-size: var(--t-md); }
.btn--blocco { width: 100%; }

/* il WhatsApp «di servizio», dentro le sezioni chiare */
.btn--wa:not(.btn--pieno) {
  border-color: var(--riga);
  color: var(--inchiostro);
  background: rgba(255, 255, 255, .5);
}
.btn--wa:not(.btn--pieno):hover,
.btn--wa:not(.btn--pieno):focus-visible {
  border-color: var(--blu-btn);
  color: var(--blu-btn);
  background: #fff;
}

.btn--linea {
  border-color: rgba(255, 255, 255, .42);
  color: #fff;
}
.btn--linea:hover, .btn--linea:focus-visible {
  border-color: #fff;
  background: rgba(255, 255, 255, .1);
}

.btn--sm { padding: .55rem .95rem; min-height: 44px; gap: .45rem; }
.btn--sm .btn__t { display: none; }

/* ── 6 · TESTATA ─────────────────────────────────────────────────────────── */
/* Il blocco fisso in alto: la barra dei contatti e, sotto, la navigazione.
   Resta tutto visibile anche scorrendo — collassare la barra avrebbe voluto
   dire mettere una trasformazione sulla testata, e una trasformazione rende
   l'elemento blocco contenitore per il menu a tutta pagina, che e' fisso. */
.testata {
  position: fixed;
  inset: 0 0 auto;
  z-index: 200;
}
.barra {
  height: var(--barra-h);
  background: #0A1E33;
  border-bottom: 1px solid rgba(255, 255, 255, .06);
  color: var(--sabbia);
  font-size: .72rem;
  letter-spacing: .06em;
}
.barra__in {
  height: 100%;
  max-width: 1400px;
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.barra__claim {
  color: rgba(242, 234, 217, .72);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.barra__rec { display: flex; align-items: center; gap: .55rem; white-space: nowrap; }
.barra__rec a { color: rgba(242, 234, 217, .92); transition: color .3s var(--curva); }
.barra__rec a:hover { color: var(--laguna); }
.barra__sep { opacity: .4; }

.testa {
  position: relative;
  height: var(--testa-h);
  /* Piena, sempre. Sopra il video della hero una testata trasparente si legge
     male, e il cliente vende eleganza, non effetti. */
  background: linear-gradient(180deg, #0E2A47 0%, #0C2338 100%);
  border-bottom: 1px solid rgba(255, 255, 255, .08);
  transition: background-color .4s var(--curva), box-shadow .4s var(--curva);
}
.testata.attaccata .testa {
  background: #0A1E33;
  box-shadow: 0 2px 16px rgba(0, 0, 0, .25);
}

.testa__in {
  position: relative;
  height: 100%;
  max-width: 1400px;
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: flex;
  align-items: center;
  gap: clamp(.8rem, 2vw, 2rem);
}
.marchio { flex: 0 0 auto; display: flex; align-items: center; }
/* ── IL MARCHIO FENUA ──────────────────────────────────────────────────────
   Un anello di cinque archi: i cinque arcipelaghi, e l'atollo visto dall'alto.
   Le lunghezze degli archi sono proporzionate all'estensione reale di ogni
   arcipelago; gli stacchi sono i passi, dove l'oceano entra nella laguna.
   Tutto scala da una misura sola: il `font-size` del contenitore.          */
.mk {
  display: inline-flex;
  align-items: center;
  gap: .60em;
  line-height: 1;
  color: inherit;
  transition: opacity .35s var(--curva);
}
.mk__svg { width: 1.95em; height: 1.95em; flex: 0 0 auto; overflow: visible; }
.mk__t   { display: flex; flex-direction: column; line-height: 1; }
.mk__n {
  font-family: var(--font-c);
  font-weight: 600;
  font-size: 1em;
  letter-spacing: .30em;
  text-transform: uppercase;
  margin-right: -.30em;   /* compensa la spaziatura dell'ultima lettera */
}
.mk__s {
  font-family: var(--font-c);
  font-weight: 400;
  font-size: .30em;
  letter-spacing: .24em;
  text-transform: uppercase;
  opacity: .62;
  margin-top: .66em;
  margin-right: -.24em;
  white-space: nowrap;
}
.marchio:hover .mk { opacity: .82; }

/* Tutti e tre stanno su fondo scuro: il nome va in bianco, non ereditato. */
.mk--testa    { font-size: clamp(15px, 1.7vw, 19px); color: #fff; }
.mk--piede    { font-size: 17px; margin-bottom: 1rem; color: #fff; }
.mk--apertura { font-size: clamp(20px, 5vw, 30px); color: #fff; }

.nav { margin-left: auto; display: flex; align-items: center; gap: clamp(1rem, 2.4vw, 2.4rem); }
.nav__l { display: flex; align-items: center; gap: clamp(.9rem, 2vw, 2rem); }
.nav__a {
  position: relative;
  display: block;
  padding: .4rem 0;
  font-size: var(--t-sm);
  font-weight: 400;
  color: rgba(255, 255, 255, .92);
  transition: color .3s var(--curva);
}
.nav__a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 1px;
  background: var(--laguna);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .4s var(--curva);
}
.nav__a:hover, .nav__a:focus-visible, .nav__a.qui { color: var(--laguna); }
.nav__a:hover::after, .nav__a:focus-visible::after,
.nav__a.qui::after { transform: scaleX(1); transform-origin: left; }
.nav__wa { display: none; }
.nav__fondo { display: contents; }

.testa__az { flex: 0 0 auto; display: flex; align-items: center; gap: .5rem; margin-left: .4rem; }

.hamburger {
  display: none;
  width: 46px;
  height: 46px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: background-color .3s var(--curva);
}
.hamburger:hover { background: rgba(255, 255, 255, .12); }
.hamburger__b { position: relative; display: block; width: 22px; height: 12px; }
.hamburger__b i {
  position: absolute;
  left: 0;
  width: 100%;
  height: 1.5px;
  background: #fff;
  border-radius: 2px;
  transition: transform .4s var(--curva), opacity .25s var(--curva);
}
.hamburger__b i:first-child { top: 0; }
.hamburger__b i:last-child { bottom: 0; }
.hamburger[aria-expanded="true"] .hamburger__b i:first-child { transform: translateY(5.25px) rotate(45deg); }
.hamburger[aria-expanded="true"] .hamburger__b i:last-child { transform: translateY(-5.25px) rotate(-45deg); }

/* ── 7 · LA ROTTA — la firma del sito ────────────────────────────────────── */
/* Una riga sola, sul bordo sinistro, che si traccia mentre si scende e accende
   un punto a ogni tappa. È il viaggio che il cliente vende, ridotto a un segno. */
.rotta {
  position: fixed;
  left: clamp(14px, 1.9vw, 30px);
  top: 22vh;
  bottom: 18vh;
  width: 11px;
  z-index: 90;
  display: none;
  pointer-events: none;
}
.rotta__linea {
  position: absolute;
  left: 5px;
  top: 0;
  bottom: 0;
  width: 1px;
  background: rgba(14, 42, 71, .17);
  overflow: hidden;
}
.rotta__fatta {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, var(--laguna), var(--blu-400));
  transform: scaleY(0);
  transform-origin: top;
  will-change: transform;
}
.rotta__punti {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.rotta__p {
  width: 5px;
  height: 5px;
  margin-left: 3px;
  border-radius: 50%;
  background: rgba(14, 42, 71, .3);
  transform: scale(1);
  transition: transform .45s var(--curva), background-color .45s var(--curva);
}
.rotta__p.accesa { background: var(--laguna); transform: scale(1.9); }
.sfondo-scuro .rotta__linea { background: rgba(255, 255, 255, .2); }
.sfondo-scuro .rotta__p { background: rgba(255, 255, 255, .35); }

/* ── 8 · HERO ────────────────────────────────────────────────────────────── */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding-top: calc(var(--testata-h) + env(safe-area-inset-top, 0px) + clamp(1.4rem, 4vw, 3rem));
  padding-bottom: clamp(4.5rem, 8vw, 6.5rem);
  background: var(--blu-900);
  color: #fff;
  overflow: hidden;
  isolation: isolate;
}
.hero__sfondo { position: absolute; inset: -6% 0 -6%; z-index: -2; }
.hero__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  will-change: transform;
}
.hero__velo {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(10, 30, 51, .72) 0%, rgba(10, 30, 51, .3) 34%, rgba(10, 30, 51, .88) 100%),
    linear-gradient(90deg, rgba(10, 30, 51, .66) 0%, transparent 62%);
}
.hero__in {
  position: relative;
  z-index: 1;
  max-width: 1320px;
  display: grid;
  gap: clamp(2rem, 4vw, 3.5rem);
}
.hero__testo { min-width: 0; }

/* ── il mosaico: quattro tessere, la prima grande ────────────────────────── */
.mosaico {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: clamp(.5rem, 1vw, .85rem);
  align-content: center;
}
.tessera {
  position: relative;
  margin: 0;
  border-radius: 14px;
  overflow: hidden;
  background: rgba(255, 255, 255, .06);
  box-shadow: 0 14px 40px rgba(6, 18, 30, .34);
  opacity: 0;
  transform: translateY(26px);
  animation: entraTessera .9s var(--curva-morbida) var(--ritardo, 0ms) forwards;
  will-change: transform;
  transition: box-shadow .45s var(--curva);
}
/* la prima larga quanto tutto il mosaico, le altre tre in fila sotto */
.tessera--1 { grid-column: span 6; }
.tessera--2, .tessera--3, .tessera--4 { grid-column: span 2; }
.foto--tessera { aspect-ratio: 1 / 1; }
.foto--tessera-g { aspect-ratio: 16 / 9; }
.tessera .foto img { transition: transform 1.1s var(--curva-morbida); }
.tessera:hover { box-shadow: 0 26px 60px rgba(6, 18, 30, .46); }
.tessera:hover .foto img { transform: scale(1.05); }
.tessera__d {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 1.6rem .8rem .6rem;
  font-size: .7rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #fff;
  background: linear-gradient(180deg, transparent, rgba(6, 18, 30, .78));
  pointer-events: none;
}
.tessera .apri-foto { border-radius: 14px; }

@keyframes entraTessera {
  to { opacity: 1; transform: none; }
}
.hero__t {
  font-size: var(--t-h1);
  max-width: 16ch;
  margin-bottom: 1.15rem;
  text-wrap: balance;
}
.hero__lead { font-size: var(--t-md); max-width: 44ch; color: rgba(255, 255, 255, .86); }
.hero__cta { display: flex; flex-wrap: wrap; gap: .9rem; margin-top: clamp(1.8rem, 4vw, 2.8rem); }

.hero__giu {
  position: absolute;
  left: 50%;
  bottom: calc(1.4rem + env(safe-area-inset-bottom, 0px));
  z-index: 1;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-left: -22px;
  color: rgba(255, 255, 255, .8);
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 50%;
  transition: background-color .35s var(--curva), color .35s var(--curva), border-color .35s var(--curva);
}
.hero__giu:hover { background: rgba(255, 255, 255, .14); color: #fff; border-color: rgba(255, 255, 255, .5); }
.hero__giu .ico { animation: respiro 2.6s var(--curva) infinite; }

/* ── 9 · COSA FACCIAMO ───────────────────────────────────────────────────── */
.passi {
  display: grid;
  gap: var(--gap);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
}
.passo {
  position: relative;
  padding: clamp(1.6rem, 2.6vw, 2.2rem);
  padding-top: clamp(2.4rem, 3.4vw, 3rem);
  background: #fff;
  border: 1px solid var(--riga);
  border-radius: 3px;
  transition: transform .5s var(--curva), box-shadow .5s var(--curva), border-color .5s var(--curva);
}
.passo:hover {
  transform: translateY(-5px);
  box-shadow: var(--ombra);
  border-color: transparent;
}
.passo__n {
  position: absolute;
  top: clamp(1.1rem, 2vw, 1.5rem);
  right: clamp(1.2rem, 2.2vw, 1.8rem);
  font-family: var(--font-t);
  font-size: clamp(2.4rem, 4vw, 3.4rem);
  line-height: 1;
  color: var(--blu-200);
  opacity: .5;
  transition: color .5s var(--curva), opacity .5s var(--curva);
}
.passo:hover .passo__n { color: var(--laguna-ink); opacity: .32; }
.passo__i { width: 30px; height: 30px; color: var(--blu-400); margin-bottom: 1.1rem; }
.passo__t { font-size: var(--t-h3); margin-bottom: .6rem; }
.passo__d { color: var(--inchiostro-soft); font-size: var(--t-sm); }

/* ── 10 · CHI SIAMO — la linea del tempo ─────────────────────────────────── */
.linea { display: grid; gap: clamp(2.6rem, 5vw, 4.5rem); }
.tappa {
  display: grid;
  gap: clamp(1.2rem, 3vw, 2.6rem);
  align-items: center;
}
.tappa__foto { position: relative; }
.foto--tappa { aspect-ratio: 4 / 3; border-radius: 3px; }
.foto--tappa img { transition: transform 1.2s var(--curva-morbida); }
.tappa:hover .foto--tappa img { transform: scale(1.04); }
.tappa__n {
  display: inline-block;
  font-family: var(--font-t);
  font-size: 1.05rem;
  letter-spacing: .12em;
  color: var(--laguna-ink);
  margin-bottom: .5rem;
}
.tappa__luogo {
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--inchiostro-tenue);
  margin-bottom: .55rem;
}
.tappa__t { font-size: var(--t-h3); margin-bottom: .6rem; }
.tappa__d { color: var(--inchiostro-soft); }

.citazione {
  margin-top: clamp(3rem, 6vw, 5rem);
  padding: clamp(1.8rem, 4vw, 3rem) clamp(1.4rem, 3vw, 2.4rem);
  border-top: 1px solid var(--riga);
  border-bottom: 1px solid var(--riga);
  text-align: center;
}
.citazione__t {
  font-family: var(--font-t);
  font-size: clamp(1.4rem, 1.1rem + 1.4vw, 2.3rem);
  line-height: 1.32;
  max-width: 28ch;
  margin-inline: auto;
}

/* ── 11 · COME LO FACCIAMO ───────────────────────────────────────────────── */
.flusso {
  display: grid;
  gap: var(--gap);
  counter-reset: passo;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
}
.flusso__p {
  position: relative;
  display: flex;
  gap: 1.1rem;
  align-items: flex-start;
  padding-top: 1.6rem;
  border-top: 1px solid var(--riga-chiara);
  transition: border-color .5s var(--curva);
}
.flusso__p:hover { border-color: rgba(255, 255, 255, .42); }
.flusso__n {
  font-family: var(--font-t);
  font-size: 1.5rem;
  line-height: 1;
  color: var(--laguna);
  flex: none;
  transition: transform .5s var(--curva);
}
.flusso__p:hover .flusso__n { transform: translateY(-3px); }
.flusso__c { min-width: 0; }
.flusso__t { font-size: clamp(1.25rem, 1.05rem + .7vw, 1.6rem); margin-bottom: .45rem; }
.flusso__d { color: rgba(255, 255, 255, .76); font-size: var(--t-sm); }

/* ── 12 · GEOGRAFIA ──────────────────────────────────────────────────────── */
/* «Basta, finito. E questa è la capitale. La lezione di geografia è finita.» */
.cifre {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(1.6rem, 5vw, 4rem);
  padding-bottom: clamp(2rem, 4vw, 3rem);
  margin-bottom: clamp(2rem, 4vw, 3rem);
  border-bottom: 1px solid var(--riga);
}
.cifra { display: flex; flex-direction: column; gap: .15rem; }
.cifra__n {
  font-family: var(--font-t);
  font-size: clamp(2.4rem, 1.8rem + 2.4vw, 4rem);
  line-height: 1;
  color: var(--blu-800);
  font-variant-numeric: tabular-nums;
}
.cifra__e {
  font-size: var(--t-xs);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--inchiostro-tenue);
}

.arcipelaghi {
  display: grid;
  gap: var(--gap);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
}
.arc {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--riga);
  border-radius: 3px;
  overflow: hidden;
  transition: transform .5s var(--curva), box-shadow .5s var(--curva), border-color .5s var(--curva);
}
.arc:hover { transform: translateY(-5px); box-shadow: var(--ombra); border-color: transparent; }
.arc__foto { position: relative; }
.foto--arc { aspect-ratio: 16 / 9; }
.foto--arc img { transition: transform 1.1s var(--curva-morbida); }
.arc:hover .foto--arc img { transform: scale(1.05); }
.arc__n {
  position: absolute;
  left: 0;
  bottom: 0;
  padding: .35rem .75rem;
  font-family: var(--font-t);
  font-size: 1.15rem;
  line-height: 1;
  color: #fff;
  background: rgba(14, 42, 71, .82);
  letter-spacing: .06em;
}
.arc__testo { padding: clamp(1.1rem, 2vw, 1.6rem); }
.arc__t { font-size: clamp(1.3rem, 1.1rem + .6vw, 1.7rem); margin-bottom: .35rem; }
.arc__isole {
  font-size: var(--t-xs);
  letter-spacing: .06em;
  color: var(--blu-400);
  margin-bottom: .6rem;
}
.arc__d { font-size: var(--t-sm); color: var(--inchiostro-soft); }

.capitale {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  margin-top: clamp(2rem, 4vw, 3rem);
  padding: clamp(1.3rem, 2.6vw, 2rem);
  background: var(--sabbia);
  border-radius: 3px;
}
.capitale__i { color: var(--laguna-ink); margin-top: .2rem; }
.capitale__t { font-size: var(--t-h3); margin-bottom: .3rem; }
.capitale__d { font-size: var(--t-sm); color: var(--inchiostro-soft); }

/* ── 13 · LE SETTE TIPOLOGIE ─────────────────────────────────────────────── */
.viaggi { display: grid; gap: clamp(3rem, 7vw, 6.5rem); }
.viaggio { display: grid; gap: clamp(1.3rem, 3vw, 3rem); align-items: center; }
.viaggio__foto { position: relative; }
.foto--viaggio {
  aspect-ratio: 3 / 2;
  border-radius: 3px;
  box-shadow: var(--ombra);
}
.foto--viaggio img { transition: transform 1.3s var(--curva-morbida); }
.viaggio:hover .foto--viaggio img { transform: scale(1.045); }
.viaggio__m {
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--laguna-ink);
  margin-bottom: .7rem;
}
.viaggio__t { font-size: clamp(1.8rem, 1.4rem + 1.6vw, 2.8rem); margin-bottom: .8rem; }
.viaggio__d { color: var(--inchiostro-soft); margin-bottom: 1.4rem; max-width: 46ch; }

/* ── 14 · PERCHÉ NOI ─────────────────────────────────────────────────────── */
.ragioni {
  display: grid;
  gap: 1px;
  background: var(--riga);
  border: 1px solid var(--riga);
  border-radius: 3px;
  overflow: hidden;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr));
}
.ragione {
  background: var(--sabbia);
  padding: clamp(1.5rem, 2.6vw, 2.1rem);
  transition: background-color .5s var(--curva);
}
.ragione:hover { background: #fff; }
.ragione__i {
  width: 26px;
  height: 26px;
  color: var(--blu-400);
  margin-bottom: .9rem;
  transition: transform .5s var(--curva), color .5s var(--curva);
}
.ragione:hover .ragione__i { transform: translateY(-3px); color: var(--laguna-ink); }
.ragione__t { font-size: clamp(1.2rem, 1.05rem + .5vw, 1.45rem); margin-bottom: .45rem; }
.ragione__d { font-size: var(--t-sm); color: var(--inchiostro-soft); }

/* ── 15 · CONTATTI ───────────────────────────────────────────────────────── */
.contatti__cta { display: flex; justify-content: center; margin-bottom: clamp(2rem, 4vw, 3rem); }
.recapiti {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(1rem, 3vw, 2.6rem);
}
.recapito {
  display: flex;
  align-items: center;
  gap: .6rem;
  font-size: var(--t-sm);
  color: rgba(255, 255, 255, .88);
}
.recapito__i { color: var(--blu-400); }
.recapito a { transition: color .3s var(--curva); }
.recapito a:hover { color: var(--laguna-ink); }
.contatti__sede {
  margin-top: clamp(1.6rem, 3vw, 2.4rem);
  text-align: center;
  font-size: var(--t-xs);
  color: rgba(255, 255, 255, .6);
}

/* ── 16 · PIEDE ──────────────────────────────────────────────────────────── */
.piede { background: var(--blu-900); color: rgba(255, 255, 255, .78); padding-top: clamp(2.6rem, 5vw, 4rem); }
.piede__in {
  display: grid;
  gap: clamp(1.6rem, 3.4vw, 3rem);
  padding-bottom: clamp(2rem, 4vw, 3rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
}
.piede__d { font-size: var(--t-sm); color: rgba(255, 255, 255, .62); max-width: 32ch; }
.piede__r { font-size: var(--t-sm); margin-bottom: .45rem; }
.piede__r a { transition: color .3s var(--curva); }
.piede__r a:hover { color: var(--laguna); }
.piede__c--social { display: flex; align-items: flex-start; }
.social { display: flex; gap: .6rem; }
.social a {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid var(--riga-chiara);
  border-radius: 50%;
  transition: background-color .35s var(--curva), border-color .35s var(--curva), transform .35s var(--curva);
}
.social a:hover { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .4); transform: translateY(-2px); }
.social svg { width: 18px; height: 18px; }

.piede__fondo {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem 1.4rem;
  justify-content: space-between;
  padding-block: 1.3rem;
  border-top: 1px solid var(--riga-chiara);
}
.piede__firma { font-size: var(--t-xs); color: rgba(255, 255, 255, .55); }
.piede__firma a { color: rgba(255, 255, 255, .8); transition: color .3s var(--curva); }
.piede__firma a:hover { color: var(--laguna); }

/* ── 17 · IL MOVIMENTO ───────────────────────────────────────────────────── */
/* Si animano solo transform e opacity: sono le due cose che la scheda video
   sa fare da sola, senza far ricalcolare l'impaginato. */
[data-comparsa] {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .85s var(--curva-morbida), transform .85s var(--curva-morbida);
}
[data-comparsa].dentro { opacity: 1; transform: none; }
.passo[data-comparsa], .arc[data-comparsa], .ragione[data-comparsa] { transition-delay: var(--ritardo, 0ms); }

@keyframes respiro {
  0%, 100% { transform: translateY(0); opacity: .75; }
  50%      { transform: translateY(4px); opacity: 1; }
}
@keyframes alone {
  0%      { box-shadow: 0 14px 34px -16px rgba(163, 22, 154, .75), 0 0 0 0 rgba(163, 22, 154, .42); }
  55%     { box-shadow: 0 14px 34px -16px rgba(163, 22, 154, .75), 0 0 0 16px rgba(163, 22, 154, 0); }
  100%    { box-shadow: 0 14px 34px -16px rgba(163, 22, 154, .75), 0 0 0 0 rgba(163, 22, 154, 0); }
}
@keyframes entra {
  from { opacity: 0; transform: translateY(26px); }
  to   { opacity: 1; transform: none; }
}
@keyframes trattino {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}
@keyframes deriva {
  0%, 100% { transform: scale(1.06) translate3d(0, 0, 0); }
  50%      { transform: scale(1.09) translate3d(-1.2%, -.8%, 0); }
}
@keyframes accendi {
  from { transform: scale(1); }
  to   { transform: scale(1.9); }
}

/* la hero entra scaglionata, senza aspettare lo scorrimento */
.hero .kicker  { animation: entra .9s var(--curva-morbida) .1s both; }
.hero__t       { animation: entra .9s var(--curva-morbida) .22s both; }
.hero__lead    { animation: entra .9s var(--curva-morbida) .34s both; }
.hero__cta     { animation: entra .9s var(--curva-morbida) .46s both; }
.hero__giu     { animation: entra .9s var(--curva-morbida) .7s both; }

/* il trattino del sovratitolo si tira quando la sezione compare */
.dentro .kicker::before { animation: trattino .7s var(--curva) both; }

/* il pulsante WhatsApp respira ogni tanto: un richiamo, non un lampeggio */
.btn--wa.btn--pieno.btn--grande { animation: alone 5.5s var(--curva) 3s infinite; }

/* lo sfondo della sezione scura deriva piano, come acqua */
.sez--come .foto--sfondo img,
.sez--contatti .foto--sfondo img { animation: deriva 34s ease-in-out infinite; }

/* ── 18 · LE ECCEZIONI ───────────────────────────────────────────────────── */

/* ---- da 700px in su: le tappe e i viaggi si affiancano ---- */
@media (min-width: 700px) {
  .cifre { gap: clamp(2.4rem, 6vw, 5rem); }
}

@media (min-width: 900px) {
  :root { --testa-h: 76px; }

  .tappa { grid-template-columns: 1fr 1fr; }
  .tappa:nth-child(even) .tappa__foto { order: 2; }

  .viaggio { grid-template-columns: 1.15fr 1fr; }
  .viaggio--dx .viaggio__foto { order: 2; }
  .viaggio--dx .viaggio__testo { padding-right: clamp(0rem, 2vw, 2rem); }
  .viaggio--sx .viaggio__testo { padding-left: clamp(0rem, 2vw, 2rem); }

  .flusso { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 1100px) {
  .rotta { display: block; }
  .arcipelaghi { grid-template-columns: repeat(3, 1fr); }
  /* gli ultimi due si centrano invece di lasciare un buco */
  .arc:nth-child(4) { grid-column: 1 / 2; }
  .arc:nth-child(5) { grid-column: 2 / 3; }
}

/* ---- sotto i 1060px: il menu diventa a tutta pagina ---- */
@media (max-width: 1059px) {
  .hamburger { display: flex; }

  .nav {
    position: fixed;
    inset: var(--testata-h) 0 auto;
    height: calc(100dvh - var(--testata-h));
    max-height: calc(100dvh - var(--testata-h));
    z-index: 190;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
    margin-left: 0;
    padding: clamp(1.4rem, 5vw, 3rem) var(--gutter)
             calc(2.5rem + env(safe-area-inset-bottom, 0px));
    background: var(--blu-800);
    overflow-y: auto;
    overscroll-behavior: contain;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: opacity .4s var(--curva), transform .4s var(--curva), visibility .4s;
  }
  .nav.aperto { opacity: 1; visibility: visible; transform: none; }
  .nav__l { flex-direction: column; align-items: stretch; gap: 0; }
  .nav__v { border-bottom: 1px solid var(--riga-chiara); }
  .nav__a { padding: 1.05rem 0; font-family: var(--font-t); font-size: clamp(1.5rem, 1.2rem + 1.6vw, 2.1rem); }
  .nav__a::after { display: none; }
  .nav__wa { display: block; margin-top: 2rem; }
}

/* ---- il telefono ---- */
@media (max-width: 768px) {
  /* nell'intestazione restano solo logo e menu: il WhatsApp sta dentro il menu,
     nella hero e in fondo a ogni sezione, quindi non si perde niente */
  .testa__az .btn--wa { display: none; }
  .testa__in { flex-wrap: nowrap; }
  .marchio { flex: 1 1 auto; min-width: 0; }
  .testa__az { margin-left: auto; gap: 0; }
  .hamburger { flex: 0 0 46px; }

  .hero { padding-top: calc(var(--testa-h) + env(safe-area-inset-top, 0px) + 1.2rem); }
  .hero__cta { flex-direction: column; align-items: stretch; }
  .hero__cta .btn { width: 100%; }

  /* Regola di casa: mai una fotografia gigante sotto l'altra. Le foto dei
     viaggi restano dei riquadri da rivista, non delle lastre a tutta pagina. */
  .foto--viaggio { aspect-ratio: 3 / 2; max-height: 58vh; }
  .foto--tappa { aspect-ratio: 3 / 2; max-height: 46vh; }

  .contatti__cta .btn { width: 100%; }
  .piede__fondo { flex-direction: column; }
}

@media (max-width: 420px) {
  .cifre { gap: 1.4rem 2rem; }
  .cifra__n { font-size: 2.2rem; }
  .btn { font-size: .86rem; padding-inline: 1.2rem; }
}

/* ---- chi ha chiesto meno movimento ---- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  [data-comparsa] { opacity: 1 !important; transform: none !important; }
  .hero__video { display: none; }
  .rotta { display: none; }
}

/* ---- stampa ---- */
@media print {
  .testa, .rotta, .hero__giu, .hero__sfondo, .btn, .social { display: none !important; }
  body { color: #000; background: #fff; }
  .sez { padding-block: 1.2rem; break-inside: avoid; }
}

/* ---- schermi bassi (portatili 1366x768, telefoni in orizzontale) ----------
   Il pulsante WhatsApp deve restare sopra la piega: è l'unica cosa che il
   cliente chiede al visitatore di fare. */
@media (max-height: 820px) and (min-width: 700px) {
  .hero__t { font-size: clamp(2rem, 1.2rem + 2.2vw, 3.1rem); margin-bottom: .9rem; }
  .hero__lead { font-size: var(--t-sm); }
  .hero__cta { margin-top: 1.5rem; }
  .hero { padding-bottom: clamp(3.5rem, 6vw, 5rem); }
}
@media (max-height: 680px) {
  .hero__lead { display: none; }
  .hero__giu { display: none; }
}

/* =============================================================================
   19 · LA SCHERMATA D'APERTURA
   Un secondo e mezzo, non di più: è un biglietto da visita, non un film.
   ========================================================================== */
.apertura {
  position: fixed;
  inset: 0;
  z-index: 500;
  display: grid;
  place-items: center;
  background: linear-gradient(160deg, #0E2A47 0%, #0A1E33 60%, #071726 100%);
  opacity: 1;
  transition: opacity .45s var(--curva-morbida), visibility .45s;
}
.apertura.via { opacity: 0; visibility: hidden; pointer-events: none; }
.apertura__c { display: grid; justify-items: center; gap: 1.6rem; padding: var(--gutter); }
.mk--apertura {
  opacity: 0;
  transform: scale(.94);
  animation: apreLogo 1s var(--curva-morbida) .05s forwards;
}
.apertura__filo {
  display: block;
  width: clamp(120px, 30vw, 200px);
  height: 1.5px;
  background: rgba(255, 255, 255, .16);
  border-radius: 2px;
  overflow: hidden;
}
.apertura__filo i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--laguna), var(--blu-400));
  transform: scaleX(0);
  transform-origin: left;
  animation: tiraFilo 1.25s var(--curva) .12s forwards;
}
@keyframes apreLogo {
  to { opacity: 1; transform: scale(1); }
}
@keyframes tiraFilo {
  to { transform: scaleX(1); }
}

/* =============================================================================
   20 · LA FOTOGRAFIA SI APRE
   ========================================================================== */
.apri-foto {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
  border-radius: 3px;
  overflow: hidden;
}
.apri-foto__lente {
  position: absolute;
  right: .7rem;
  bottom: .7rem;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  color: #fff;
  background: rgba(10, 30, 51, .55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .35s var(--curva), transform .35s var(--curva), background-color .35s var(--curva);
}
.apri-foto:hover .apri-foto__lente,
.apri-foto:focus-visible .apri-foto__lente { opacity: 1; transform: none; }
.apri-foto:hover .apri-foto__lente { background: var(--blu-btn); }
.apri-foto .ico { width: 18px; height: 18px; }
/* da telefono non c'è il passaggio del mouse: la lente si vede sempre */
@media (hover: none) {
  .apri-foto__lente { opacity: .92; transform: none; }
}

/* =============================================================================
   21 · LA FINESTRA DELLA FOTOGRAFIA
   ========================================================================== */
.finestra {
  position: fixed;
  inset: 0;
  z-index: 600;
  display: grid;
  place-items: center;
  padding: clamp(.6rem, 3vw, 2rem);
}
.finestra[hidden] { display: none; }
.finestra__fondo {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .85);
  opacity: 0;
  transition: opacity .32s var(--curva);
}
.finestra.aperta .finestra__fondo { opacity: 1; }

.finestra__scheda {
  position: relative;
  z-index: 1;
  width: min(1060px, 95vw);
  max-height: min(92dvh, 860px);
  overflow-y: auto;
  overscroll-behavior: contain;
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 40px 100px -30px rgba(0, 0, 0, .7);
  opacity: 0;
  transform: scale(.96);
  transition: opacity .32s var(--curva-morbida), transform .32s var(--curva-morbida);
}
.finestra.aperta .finestra__scheda { opacity: 1; transform: none; }

.finestra__x {
  position: absolute;
  top: .8rem;
  right: .8rem;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  min-width: 46px;
  border-radius: 50%;
  color: #fff;
  background: rgba(255, 255, 255, .22);
  border: 1px solid rgba(255, 255, 255, .34);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: background-color .3s var(--curva), transform .3s var(--curva);
}
.finestra__x:hover, .finestra__x:focus-visible {
  background: var(--blu-btn);
  transform: rotate(90deg);
}
.finestra__x .ico { width: 20px; height: 20px; }

.finestra__fig { margin: 0; background: var(--blu-900); }
/* sul telefono la fotografia sta sopra, larga quanto la scheda */
.finestra__img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: 20px 20px 0 0;
}
.finestra__k {
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--oro-ink);
  margin-bottom: .7rem;
}
.finestra__testo { padding: clamp(1.3rem, 3.4vw, 2.2rem); }
.finestra__t {
  font-family: var(--font-t);
  font-weight: 400;
  font-size: clamp(1.75rem, 1.4rem + 1.1vw, 2.15rem);
  line-height: 1.16;
  margin-bottom: .7rem;
}
.finestra__d {
  color: rgba(14, 42, 71, .8);
  font-size: 1rem;
  line-height: 1.7;
  margin-bottom: 1.3rem;
  max-width: 58ch;
}
.finestra__wa { width: 100%; }

@media (min-width: 820px) {
  .finestra__scheda {
    display: grid;
    /* la fotografia si prende il 57%: prima era piccola e il riquadro
       sembrava vuoto */
    grid-template-columns: 57fr 43fr;
    align-items: stretch;
    min-height: min(62dvh, 540px);
    max-height: min(86dvh, 820px);
  }
  .finestra__fig { border-radius: 20px 0 0 20px; overflow: hidden; height: 100%; }
  /* cover e non contain: niente bande vuote ai lati di una foto verticale */
  .finestra__img {
    width: 100%;
    height: 100%;
    max-height: none;
    object-fit: cover;
    object-position: center;
    border-radius: 0;
  }
  .finestra__testo {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(2rem, 2.6vw, 2.5rem);
    overflow-y: auto;
  }
  .finestra__wa { width: 100%; }
}

/* niente scale per chi ha chiesto meno movimento: solo la dissolvenza */
@media (prefers-reduced-motion: reduce) {
  .finestra__scheda { transform: none !important; }
  .mk--apertura { animation: none; opacity: 1; transform: none; }
  .apertura__filo i { animation: none; transform: scaleX(1); }
}

/* =============================================================================
   22 · DOVE STA L'INTERRUTTORE DI LINGUA, A SECONDA DELLA LARGHEZZA
   ========================================================================== */
/* Nel menu a tutta pagina: in fondo, sopra il pulsante WhatsApp, con i tasti
   grandi abbastanza da prendersi col pollice. */
@media (max-width: 1059px) {
  .nav__fondo {
    display: grid;
    gap: 1.2rem;
    margin-top: 2rem;
    padding-top: 1.6rem;
    border-top: 1px solid var(--riga-chiara);
    justify-items: start;
  }
  .lingue--menu { display: inline-flex; gap: 4px; }
  .lingue--menu .lingue__filo { height: 20px; }
}

/* Sul telefono l'interruttore sta solo dentro al menu: nella barra in alto
   restano logo e menu, se no a 320px non ci si sta e si sovrappongono. */
@media (max-width: 768px) {
  .testa__az .lingue { display: none; }
}

/* Da 769px in su l'interruttore torna nella barra, prima di WhatsApp. */
@media (min-width: 769px) {
  .testa__az .lingue { display: inline-flex; }
  .testa__az { gap: .7rem; }
}

/* Il WhatsApp della testata: pieno, con la scritta, da 1060px in su */
@media (min-width: 1060px) {
  .btn--sm .btn__t { display: block; }
  .btn--sm { padding: .55rem 1.1rem; gap: .5rem; }
}

/* ---- schermi bassi: la fotografia si stringe perché il pulsante WhatsApp
   resti visibile senza dover scorrere dentro alla finestra ---------------- */
@media (max-height: 720px) {
  .finestra__img { max-height: 38dvh; }
  .finestra__testo { padding-block: 1.1rem; }
  .finestra__d { margin-bottom: .9rem; font-size: .86rem; line-height: 1.6; }
  .finestra__t { font-size: clamp(1.25rem, 1.05rem + .8vw, 1.6rem); margin-bottom: .5rem; }
}
@media (max-height: 560px) {
  .finestra__img { max-height: 30dvh; }
}

/* =============================================================================
   23 · LA HERO A DUE COLONNE
   Prima la metà destra era mare vuoto. Adesso ci sta il mosaico.
   ========================================================================== */
@media (min-width: 960px) {
  .hero__in {
    grid-template-columns: 1.02fr .98fr;
    align-items: center;
    gap: clamp(2.5rem, 4.5vw, 4.5rem);
  }
  .hero__t { max-width: 13ch; }
  .hero__lead { max-width: 36ch; }
  .mosaico { gap: clamp(.7rem, 1vw, 1.1rem); }
}
/* sul telefono: prima il titolo, poi il mosaico, e resta compatto */
@media (max-width: 959px) {
  /* sul telefono tre quadratini in fila diventano illeggibili:
     due sotto la grande, e la quarta larga in fondo */
  /* centrato: allineato a sinistra lasciava una fascia vuota a destra */
  .mosaico { max-width: 34rem; margin-inline: auto; }
  .tessera--2, .tessera--3 { grid-column: span 3; }
  .tessera--4 { grid-column: span 6; }
  .tessera--4 .foto { aspect-ratio: 21 / 9; }
  .tessera__d { font-size: .62rem; padding: 1.2rem .6rem .45rem; letter-spacing: .1em; }
}

/* =============================================================================
   24 · LA GRANA
   Un velo appena percettibile su tutta la pagina: toglie l'aria di stampa
   digitale troppo pulita. Non intercetta i clic.
   ========================================================================== */
.grana {
  position: fixed;
  inset: 0;
  z-index: 450;
  pointer-events: none;
  opacity: .035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 160px 160px;
}

/* =============================================================================
   25 · LE LETTERE FANTASMA
   Il nome del marchio, enorme e quasi invisibile, dietro due sezioni.
   Dà profondità senza aggiungere rumore.
   ========================================================================== */
.sez--chi, .sez--perche { position: relative; overflow: hidden; }
.sez--chi::before, .sez--perche::before {
  content: "MANUREVA";
  position: absolute;
  top: clamp(1rem, 4vw, 3rem);
  right: -.08em;
  z-index: -1;
  font-family: var(--font-t);
  font-size: clamp(6rem, 18vw, 17rem);
  line-height: .8;
  letter-spacing: -.02em;
  color: var(--inchiostro);
  opacity: .03;
  pointer-events: none;
  user-select: none;
  white-space: nowrap;
}
.sez--perche::before { right: auto; left: -.08em; }

/* =============================================================================
   26 · LA STRISCIA DELLE ISOLE
   Scorre sempre, anche col mouse sopra: è una regola di casa.
   ========================================================================== */
.striscia {
  overflow: hidden;
  padding-block: clamp(1.4rem, 2.6vw, 2.2rem);
  background: var(--blu-800);
  border-block: 1px solid rgba(255, 255, 255, .07);
}
.striscia__n { display: flex; width: max-content; animation: scorre 52s linear infinite; }
.striscia__r { display: flex; align-items: center; flex: none; }
.striscia__v {
  font-family: var(--font-t);
  font-size: clamp(1.1rem, .9rem + .7vw, 1.6rem);
  letter-spacing: .04em;
  color: var(--sabbia);
  opacity: .62;
  padding-inline: clamp(.8rem, 1.6vw, 1.5rem);
  white-space: nowrap;
}
.striscia__p { color: var(--oro); opacity: .5; font-size: .7rem; }
@keyframes scorre {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

/* =============================================================================
   27 · IL TITOLO PAROLA PER PAROLA
   Ogni parola sale da sotto una maschera. Lo fa main.js, che spezza il titolo
   in parole: qui ci sono solo la maschera e il movimento.
   ========================================================================== */
.parola {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  padding: .06em .04em .16em;
  margin: -.06em -.04em -.16em;
}
.parola > i {
  display: inline-block;
  font-style: inherit;
  transform: translateY(105%);
  animation: saleParola .95s var(--curva-morbida) var(--ritardo, 0ms) forwards;
}
@keyframes saleParola { to { transform: none; } }

/* =============================================================================
   28 · LE FOTOGRAFIE ENTRANO DA DIETRO UNA MASCHERA
   Non una dissolvenza: la cornice resta ferma e l'immagine scorre dentro.
   ========================================================================== */
[data-comparsa] .foto--tappa img,
[data-comparsa] .foto--viaggio img,
[data-comparsa] .foto--arc img {
  transform: scale(1.08) translate3d(0, 3%, 0);
  transition: transform 1.25s var(--curva-morbida);
}
[data-comparsa].dentro .foto--tappa img,
[data-comparsa].dentro .foto--viaggio img,
[data-comparsa].dentro .foto--arc img { transform: none; }

/* =============================================================================
   29 · I BOTTONI: FILETTO AL PASSAGGIO, ONDA AL CLIC
   ========================================================================== */
.btn { overflow: hidden; }
.btn .btn__t { position: relative; }
.btn .btn__t::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -3px;
  height: 1px;
  background: currentColor;
  opacity: .5;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .4s var(--curva);
}
.btn:hover .btn__t::after, .btn:focus-visible .btn__t::after {
  transform: scaleX(1);
  transform-origin: left;
}
.onda {
  position: absolute;
  border-radius: 50%;
  background: currentColor;
  opacity: .26;
  transform: scale(0);
  animation: onda .55s var(--curva-morbida) forwards;
  pointer-events: none;
}
@keyframes onda { to { transform: scale(2.6); opacity: 0; } }

/* =============================================================================
   30 · RIFINITURE: RAGGI E OMBRE UGUALI DAPPERTUTTO
   ========================================================================== */
.passo, .arc, .ragioni, .capitale { border-radius: var(--raggio); }
.passo, .arc { box-shadow: 0 2px 10px rgba(14, 42, 71, .04); }
.passo:hover, .arc:hover { box-shadow: var(--ombra-su); }
.foto--viaggio, .foto--tappa { border-radius: var(--raggio); box-shadow: var(--ombra); }
.arc { overflow: hidden; }

/* un filetto d'oro fra il sovratitolo e il titolo dei blocchi piccoli */
.tappa__luogo, .viaggio__m { position: relative; padding-bottom: .55rem; }
.tappa__luogo::after, .viaggio__m::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 28px;
  height: 1px;
  background: var(--oro);
  opacity: .3;
}

/* =============================================================================
   31 · LA BARRA DEI CONTATTI SUL TELEFONO
   Resta solo l'indirizzo di posta: il resto non ci sta e affollerebbe.
   ========================================================================== */
@media (max-width: 720px) {
  .barra__claim { display: none; }
  .barra__in { justify-content: center; }
  .barra__rec a[href^="tel"], .barra__sep { display: none; }
}
@media (min-width: 900px) {
  :root { --barra-h: 34px; }
  .barra { font-size: .74rem; }
}

/* =============================================================================
   32 · MENO MOVIMENTO, SE CHIESTO
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .striscia__n { animation: none; }
  .tessera { opacity: 1 !important; transform: none !important; animation: none !important; }
  .parola > i { transform: none !important; animation: none !important; }
  .titolo::after { transform: scaleX(1) !important; }
  [data-comparsa] .foto--tappa img,
  [data-comparsa] .foto--viaggio img,
  [data-comparsa] .foto--arc img { transform: none !important; }
  .grana { display: none; }
}

/* ---- sul tablet le tre tessere piccole tornano in fila: in colonna
   il mosaico diventava alto 823px e allungava troppo la hero ------------- */
@media (min-width: 640px) and (max-width: 959px) {
  .mosaico { max-width: 40rem; }
  .tessera--2, .tessera--3, .tessera--4 { grid-column: span 2; }
  .tessera--4 .foto { aspect-ratio: 1 / 1; }
}