/* Insieme Ad Ale · home fedele al design della versione 7 (step 5)
   Colori misurati dal design (confronta-design.py --colori e campioni sulle zone): solo #hex in :root. */

@font-face {
  font-family: "Figtree";
  src: url("/assets/fonts/figtree-latin.woff2") format("woff2");
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --azzurro: #0594DF;          /* pulsanti, linguetta attiva, prezzi, icone */
  --azzurro-testo: #0677C6;    /* l'azzurro dei testi piccoli e dei link (contrasto AA) */
  --blu-notte: #072140;        /* titoli e testi forti */
  --testo: #4A5A72;            /* paragrafi */
  --testo-tenue: #5F6E89;      /* note e didascalie */
  --fondo: #F7FBFE;            /* base chiara della pagina */
  --fondo-azzurro: #F0F8FD;    /* riquadro del viaggio in evidenza */
  --fondo-biglietto: #E7F6FD;  /* fascia dei contatti */
  --bordo: #E3ECF3;
  --bianco: #FFFFFF;
  --azzurro-hover: #0381C9;
  --errore: #B42318;

  --font: "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --larghezza: 1340px;
  --gutter: clamp(16px, 4vw, 40px);
  --spazio: clamp(40px, 3vw, 44px);
  --raggio: 18px;
  --ombra-scheda: 0 1px 2px rgba(7, 33, 64, .05), 0 14px 34px -22px rgba(7, 33, 64, .32);
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);      /* entrate e uscite */
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);  /* cose che si spostano sullo schermo */
  --testata: 80px;
}

/* ── base ─────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html {
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--testata) + 12px);
}
html.menu-aperto { overflow: hidden; }
body {
  font-family: var(--font);
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--testo);
  background: var(--fondo);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
[hidden] { display: none !important; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; touch-action: manipulation; }
button, input, select, textarea { font: inherit; color: inherit; }
button { touch-action: manipulation; }
ul, ol { padding: 0; }
h1, h2, h3 {
  color: var(--blu-notte);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -.018em;
  text-wrap: balance;
}
h2 { font-size: clamp(1.85rem, 1.05rem + 2.15vw, 2.9rem); }
p { text-wrap: pretty; }
:focus-visible { outline: 3px solid var(--azzurro); outline-offset: 3px; border-radius: 6px; }

.icona { width: 1.2em; height: 1.2em; flex: none; fill: currentColor; }
.icona--freccia { width: .8em; height: .8em; }

.contenitore {
  width: 100%;
  max-width: calc(var(--larghezza) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.sezione { padding-block: var(--spazio); }

.salta {
  position: absolute; left: 16px; top: -60px; z-index: 100;
  background: var(--blu-notte); color: var(--bianco);
  padding: 10px 16px; border-radius: 10px; text-decoration: none; font-weight: 700;
}
.salta:focus { top: 12px; }
.visivamente-nascosto {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.occhiello {
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: .045em;
  text-transform: uppercase;
  color: var(--azzurro-testo);
  margin-bottom: .55rem;
}
.occhiello--bianco { color: var(--bianco); }
.hero .occhiello { font-size: 1.12rem; letter-spacing: .035em; }

/* ── pulsanti e link ──────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55em;
  min-height: 50px;
  padding: .62em 1.3em;
  border-radius: 12px;
  border: 1.5px solid transparent;
  font-size: 1.1875rem;          /* bianco su azzurro: testo grande e in grassetto */
  font-weight: 700;
  line-height: 1.15;
  text-decoration: none;
  cursor: pointer;
  user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
  transition: background-color .2s ease, border-color .2s ease, box-shadow .25s ease, transform .16s var(--ease-out);
}
.btn .icona { width: 1.15em; height: 1.15em; }
.btn:active { transform: scale(.97); }
.btn--azzurro {
  background: var(--azzurro);
  color: var(--bianco);
  box-shadow: 0 10px 22px -12px rgba(5, 148, 223, .85);
}
.btn--vetro {
  background: rgba(7, 33, 64, .34);
  color: var(--bianco);
  border-color: rgba(255, 255, 255, .88);
}
.btn--bianco {
  background: var(--bianco);
  color: var(--blu-notte);
  border-color: var(--bordo);
  min-height: 46px;
  font-size: .98rem;
  font-weight: 600;
  padding: .5em .9em;
}
.btn--bianco .icona { color: var(--blu-notte); width: 1.05em; height: 1.05em; }
.btn--grande { min-height: 58px; padding: .7em 1.55em; font-size: 1.25rem; }
.btn--largo { width: 100%; }

.link-freccia {
  display: inline-flex; align-items: center; gap: .4em;
  color: var(--azzurro-testo);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
  user-select: none; -webkit-user-select: none;
  transform-origin: left center;
  transition: color .2s ease, transform .14s var(--ease-out);
}
.link-freccia:active { transform: scale(.97); }
.link-freccia .icona { transition: transform .25s var(--ease-out); }
.link-freccia--piccolo { font-size: 1rem; text-decoration: none; }

@media (hover: hover) and (pointer: fine) {
  .btn--azzurro:hover { background: var(--azzurro-hover); box-shadow: 0 14px 26px -12px rgba(5, 148, 223, .9); }
  .btn--vetro:hover { background: rgba(7, 33, 64, .5); }
  .btn--bianco:hover { border-color: var(--azzurro); }
  .link-freccia:hover .icona { transform: translate(2px, -2px); }
}

/* ── intestazione ─────────────────────────────────────────────────────── */
.testata {
  position: sticky; top: 0; z-index: 50;
  background: var(--fondo);
  border-bottom: 1px solid transparent;
  transition: box-shadow .3s ease, border-color .3s ease;
}
.testata.scorsa { border-bottom-color: var(--bordo); box-shadow: 0 10px 30px -24px rgba(7, 33, 64, .55); }
.testata__riga { display: flex; align-items: center; gap: 24px; height: var(--testata); }
.testata__logo { display: block; flex: none; }
.testata__logo img { width: 250px; transform-origin: left center; transition: transform .35s var(--ease-out); }
.testata.scorsa .testata__logo img { transform: scale(.9); }
.testata__menu { margin-left: auto; }
.testata__menu ul { display: flex; gap: clamp(18px, 2.7vw, 46px); list-style: none; }
.testata__menu a {
  display: block; padding: 8px 2px; white-space: nowrap;
  color: var(--blu-notte); font-weight: 600; font-size: 1.15rem;
  text-decoration: none; position: relative;
  user-select: none; -webkit-user-select: none;
}
.testata__menu a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 2px;
  background: var(--azzurro); border-radius: 2px;
  clip-path: inset(0 100% 0 0); transition: clip-path .28s var(--ease-out);   /* si disegna da sinistra, mai da scale(0) */
}
@media (hover: hover) and (pointer: fine) { .testata__menu a:hover::after { clip-path: inset(0 0 0 0); } }
.testata__menu a:active { color: var(--azzurro-testo); }
.testata__cta { flex: none; margin-left: clamp(8px, 1.6vw, 28px); min-height: 46px; padding-inline: 1.15em; }
.testata__apri {
  display: none; margin-left: auto;
  width: 46px; height: 46px; border-radius: 12px;
  border: 1.5px solid var(--bordo); background: var(--bianco);
  align-items: center; justify-content: center; flex-direction: column; gap: 5px;
  cursor: pointer; user-select: none; -webkit-user-select: none;
}
.testata__apri span {
  display: block; width: 20px; height: 2px; border-radius: 2px; background: var(--blu-notte);
  transition: transform .3s var(--ease-out), opacity .2s ease;
}
.testata__apri[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.testata__apri[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.testata__apri[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.testata__apri:active { transform: scale(.95); }

.menu-telefono {
  position: fixed; left: 0; right: 0; top: var(--testata);
  height: calc(100dvh - var(--testata));
  background: var(--fondo);
  padding: 20px var(--gutter) calc(28px + env(safe-area-inset-bottom, 0px));
  overflow-y: auto; overscroll-behavior: contain;
  display: flex; flex-direction: column; gap: 24px;
  border-top: 1px solid var(--bordo);
}
.menu-telefono[hidden] { display: none; }
.menu-telefono ul { list-style: none; }
.menu-telefono li + li { border-top: 1px solid var(--bordo); }
.menu-telefono nav a {
  display: block; padding: 16px 2px;
  font-size: 1.55rem; font-weight: 800; color: var(--blu-notte); text-decoration: none;
  user-select: none; -webkit-user-select: none;
}
.menu-telefono nav a:active { color: var(--azzurro-testo); }
.menu-telefono .btn { margin-top: auto; width: 100%; }

/* ── hero ─────────────────────────────────────────────────────────────── */
.hero {
  position: relative;
  isolation: isolate;
  min-height: 590px;
  padding: 56px 0 132px;
  color: var(--bianco);
}
.hero__scena { position: absolute; inset: 0; overflow: hidden; z-index: -1; }
.hero__fondo { position: absolute; inset: 0; display: block; }
.hero__fondo img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 40% 46%;
}
.hero__velo {
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(3, 62, 128, .78) 0%, rgba(4, 76, 150, .56) 32%, rgba(4, 76, 150, .16) 56%, rgba(4, 76, 150, 0) 68%),
    linear-gradient(180deg, rgba(3, 42, 96, .30) 0%, rgba(3, 42, 96, 0) 42%);
}
.hero__ritratto {
  position: absolute;
  top: 26px;
  right: max(-8px, calc((100% - 1460px) / 2));
  width: clamp(280px, 24vw, 350px);
  max-width: none;
  filter: drop-shadow(-10px 14px 30px rgba(3, 30, 70, .28));
}
.hero__contenuto { position: relative; z-index: 1; }
.hero h1 {
  color: var(--bianco);
  font-size: clamp(2.45rem, 1.25rem + 3.4vw, 4.1rem);
  line-height: 1.02;
  letter-spacing: -.022em;
  max-width: 12.5em;
  text-shadow: 0 2px 22px rgba(3, 30, 70, .35);
}
.hero__testo {
  margin-top: 18px;
  font-size: clamp(1.1rem, .9rem + .8vw, 1.62rem);
  line-height: 1.42;
  font-weight: 500;
  color: rgba(255, 255, 255, .96);
  text-shadow: 0 1px 14px rgba(3, 30, 70, .35);
}
.hero__testo { max-width: 30em; }   /* il copy dello step 6 resta nella metà sinistra, come il testo del design */
.hero__pulsanti { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 32px; }
.hero__luogo {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 30px;
  font-weight: 600; font-size: 1rem;
  text-shadow: 0 1px 10px rgba(3, 30, 70, .45);
}
.hero__luogo .icona { width: 20px; height: 20px; }
.hero__onda {
  position: absolute; left: 0; right: 0; bottom: -1px; z-index: 1;
  width: 100%; height: 120px; fill: var(--fondo);
}
.hero__valigia {
  position: absolute; z-index: 2;
  width: clamp(300px, 28vw, 410px);
  left: 55.5%;
  bottom: -82px;
  filter: drop-shadow(0 20px 26px rgba(7, 33, 64, .3));
}

/* ── testa delle sezioni ──────────────────────────────────────────────── */
.testa-sezione {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 24px;
  margin-bottom: 24px;
}
.testa-sezione .link-freccia { flex: none; margin-bottom: 8px; }
.testa-sezione__sotto { margin-top: 8px; font-size: 1.15rem; color: var(--testo); }

/* ── i viaggi in programma ────────────────────────────────────────────── */
.viaggi { padding-top: clamp(80px, 6.3vw, 90px); }
.linguette { display: flex; flex-wrap: wrap; gap: 16px; margin-bottom: 24px; }
.linguetta {
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 54px; padding: 0 22px;
  border-radius: 12px;
  border: 1.5px solid var(--bordo);
  background: var(--bianco);
  color: var(--blu-notte);
  font-size: 1.1875rem; font-weight: 700;
  cursor: pointer;
  user-select: none; -webkit-user-select: none;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease, transform .16s var(--ease-out);
}
.linguetta .icona { width: 22px; height: 22px; color: var(--azzurro); }
.linguetta[aria-selected="true"] {
  background: var(--azzurro); border-color: var(--azzurro); color: var(--bianco);
  box-shadow: 0 10px 22px -12px rgba(5, 148, 223, .85);
}
.linguetta[aria-selected="true"] .icona { color: var(--bianco); }
.linguetta__nota { margin-left: 14px; font-size: .9rem; font-weight: 700; color: var(--azzurro-testo); }
.linguetta__testo { text-align: left; }
.linguetta[aria-selected="true"] .linguetta__nota { color: var(--bianco); }
.linguetta:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) { .linguetta[aria-selected="false"]:hover { border-color: var(--azzurro); } }

.schede { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.scheda {
  display: flex; flex-direction: column;
  background: var(--bianco);
  border: 1px solid var(--bordo);
  border-radius: var(--raggio);
  overflow: hidden;
  box-shadow: var(--ombra-scheda);
  transition: transform .35s var(--ease-out), box-shadow .35s var(--ease-out);
}
.scheda__foto { display: block; overflow: hidden; }
.scheda__foto img {
  width: 100%; aspect-ratio: 2.5 / 1; object-fit: cover;
  transition: transform .6s var(--ease-out);
}
.scheda__corpo { flex: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 16px 20px 12px; }
.scheda__titolo { font-size: 1.58rem; letter-spacing: -.014em; }
.scheda__titolo a { text-decoration: none; }
.scheda__dati { list-style: none; display: grid; gap: 3px; color: var(--blu-notte); font-weight: 500; font-size: 1.04rem; }
.scheda__dati li { display: flex; align-items: center; gap: 10px; }
.scheda__dati .icona { width: 19px; height: 19px; color: var(--blu-notte); }
.scheda__prezzo { color: var(--blu-notte); font-weight: 600; line-height: 1.25; }
.scheda__prezzo strong { color: var(--azzurro); font-size: 1.95rem; font-weight: 800; letter-spacing: -.01em; margin-inline: .1em; vertical-align: -.06em; }
.scheda__prezzo span { font-weight: 500; }
.scheda__corpo .link-freccia { margin-top: auto; padding-top: 2px; }
.scheda__azioni {
  display: flex; justify-content: space-between; gap: 6px;
  padding: 4px 12px 5px;
  border-top: 1px solid var(--bordo);
}
.scheda__azioni a, .scheda__azioni button {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 36px; padding: 4px 6px;
  background: none; border: 0; border-radius: 8px;
  color: var(--blu-notte); font-size: .86rem; font-weight: 600;
  text-decoration: none; cursor: pointer;
  user-select: none; -webkit-user-select: none;
  transition: color .2s ease, background-color .2s ease, transform .14s var(--ease-out);
}
.scheda__azioni .icona { width: 17px; height: 17px; color: var(--blu-notte); }
.scheda__azioni a:active, .scheda__azioni button:active { background: var(--fondo-azzurro); transform: scale(.94); }
/* premere la foto o il titolo spinge giù tutta la scheda (lo zoom col mouse resta sulla foto dentro) */
.scheda:has(.scheda__foto:active, .scheda__titolo a:active) { transform: scale(.98); transition-duration: .16s; }
@media (hover: hover) and (pointer: fine) {
  .scheda:hover { transform: translateY(-4px); box-shadow: 0 2px 4px rgba(7, 33, 64, .05), 0 22px 44px -24px rgba(7, 33, 64, .42); }
  .scheda:hover .scheda__foto img { transform: scale(1.04); }
  .scheda__azioni a:hover, .scheda__azioni button:hover { color: var(--azzurro-testo); }
  .scheda__azioni a:hover .icona, .scheda__azioni button:hover .icona { color: var(--azzurro-testo); }
}

.in-arrivo {
  display: flex; align-items: center; gap: 22px; flex-wrap: wrap;
  background: var(--bianco); border: 1px solid var(--bordo); border-radius: var(--raggio);
  padding: 28px 30px; box-shadow: var(--ombra-scheda);
}
.in-arrivo__icona { width: 54px; height: 54px; color: var(--azzurro); }
.in-arrivo h3 { font-size: 1.4rem; }
.in-arrivo p { margin-top: 4px; }
.in-arrivo > div { flex: 1 1 320px; }

/* ── viaggio in evidenza ──────────────────────────────────────────────── */
.evidenza .contenitore { --larghezza: 1360px; }
.evidenza__riquadro {
  position: relative;
  background: var(--fondo-azzurro);
  border: 1px solid var(--bordo);
  border-radius: 28px;
  overflow: hidden;
  padding-bottom: 34px;
}
.evidenza__banner {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: 240px;
  padding: 32px 56px 72px;
  display: flex; align-items: flex-start; justify-content: space-between; gap: 24px;
  color: var(--bianco);
}
.evidenza__foto {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%;   /* l'aurora in alto, come nel design */
}
.evidenza__banner::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(90deg, rgba(4, 26, 58, .82) 0%, rgba(4, 26, 58, .55) 34%, rgba(4, 26, 58, .08) 64%, rgba(4, 26, 58, 0) 78%),
    linear-gradient(180deg, rgba(240, 248, 253, 0) 46%, rgba(240, 248, 253, .62) 80%, rgba(240, 248, 253, 1) 100%);
}
.evidenza__testo h2 {
  color: var(--bianco);
  font-size: clamp(2.1rem, 1.15rem + 3.4vw, 4.1rem);   /* grande come il titolo della hero, come nel design */
  line-height: 1.02;
  text-shadow: 0 2px 18px rgba(3, 20, 50, .4);
}
.evidenza__sotto { margin-top: 10px; font-size: 1.2rem; font-weight: 600; text-shadow: 0 1px 10px rgba(3, 20, 50, .5); }
.evidenza__video {
  display: flex; flex: none; align-items: center; gap: 14px;
  margin-top: 34px;
  padding: 10px 22px 10px 10px;
  background: rgba(4, 26, 58, .6);
  border: 1px solid rgba(255, 255, 255, .4);
  border-radius: 18px;
  color: var(--bianco); text-align: left; cursor: pointer;
  user-select: none; -webkit-user-select: none;
  transition: background-color .2s ease, transform .16s var(--ease-out);
}
.evidenza__video strong { display: block; font-size: 1.05rem; }
.evidenza__video small { display: block; font-size: .9rem; opacity: .9; }
.evidenza__play {
  display: grid; place-items: center; flex: none;
  width: 52px; height: 52px; border-radius: 50%;
  background: var(--azzurro); box-shadow: 0 8px 18px -8px rgba(5, 148, 223, .9);
}
.evidenza__play .icona { width: 30px; height: 30px; color: var(--bianco); }
.evidenza__video:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) { .evidenza__video:hover { background: rgba(4, 26, 58, .78); } }

.evidenza__corpo {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: minmax(0, 580px) minmax(0, 1fr); gap: 48px; align-items: center;
  margin-top: -70px;
  padding-inline: 44px 56px;
}
.itinerario__carta { position: relative; container-type: inline-size; }
.itinerario__mappa { width: 100%; filter: drop-shadow(0 18px 22px rgba(7, 33, 64, .16)); }
.itinerario__tappe { list-style: none; position: absolute; inset: 0; }
/* le tappe su due righe sotto i segnaposto, come nel design, dentro la carta: misure in cqw, crescono con la carta */
.itinerario__tappe li {
  position: absolute; left: var(--x); top: var(--y);
  transform: translateX(-50%);
  width: var(--l, 6.6em);   /* una tappa col nome più lungo ha un po' più di spazio: resta su due righe */
  text-align: center;
  font-size: clamp(.8rem, 2.3cqw, 1.2rem); font-weight: 700; line-height: 1.08;
  color: var(--blu-notte);
  text-wrap: balance;
  text-shadow: 0 0 3px rgba(255, 255, 255, .95), 0 0 7px rgba(255, 255, 255, .85);
}
.itinerario__tappe strong { display: block; margin-bottom: 1px; color: var(--azzurro); font-size: 1.3em; font-weight: 800; line-height: 1; }
/* la bussola sull'angolo in basso a destra della carta, sotto la tappa 05 e mai sopra */
.itinerario__bussola {
  position: absolute; right: -40px; bottom: -18px;
  width: 88px;
  transform: rotate(-14deg);
  filter: drop-shadow(0 10px 14px rgba(7, 33, 64, .3));
}
.evidenza__quota { display: grid; gap: 16px; }
.riquadro-incluso {
  display: flex; align-items: flex-start; gap: 16px;
  background: var(--bianco); border: 1px solid var(--bordo); border-radius: 16px;
  padding: 18px 22px;
  box-shadow: var(--ombra-scheda);
}
.riquadro-incluso > .icona { width: 32px; height: 32px; color: var(--azzurro); margin-top: 2px; }
.riquadro-incluso h3 { font-size: 1.22rem; }
.riquadro-incluso p { margin-top: 4px; font-size: 1rem; line-height: 1.45; }

.evidenza__prezzi {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 24px;
  padding: 22px 56px 0;
}
.evidenza__prezzo { color: var(--blu-notte); font-weight: 600; font-size: 1.02rem; }
.evidenza__prezzo strong { color: var(--azzurro); font-size: 2.3rem; font-weight: 800; letter-spacing: -.015em; vertical-align: -.08em; margin-right: .2em; }
.evidenza__azioni { display: flex; flex-wrap: wrap; gap: 10px; }

/* ── moduli ───────────────────────────────────────────────────────────── */
.modulo--riga {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) auto; gap: 14px 20px; align-items: start;
  padding: 16px 56px 0;
}
.modulo--riga .modulo__invio { padding-top: 26px; }
.modulo--riga .thk-avviso-modulo { grid-column: 1 / -1; margin-top: -2px; }
.campo label { display: block; margin-bottom: 5px; font-size: .92rem; font-weight: 700; color: var(--blu-notte); }
.campo input, .campo select, .campo textarea {
  display: block; width: 100%;
  min-height: 46px; padding: 10px 16px;
  font-size: 1rem;
  color: var(--blu-notte);
  background: var(--bianco);
  border: 1.5px solid var(--bordo);
  border-radius: 12px;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.campo select {
  appearance: none; -webkit-appearance: none;
  padding-right: 46px;
  background: var(--bianco) url("/assets/img/icone/freccia-giu.svg") no-repeat right 16px center / 15px auto;
  cursor: pointer;
}
.campo textarea { resize: vertical; min-height: 96px; line-height: 1.45; }
.campo input:focus, .campo select:focus, .campo textarea:focus { outline: none; border-color: var(--azzurro); box-shadow: 0 0 0 4px rgba(5, 148, 223, .18); }
.campo [aria-invalid="true"] { border-color: var(--errore); }
.campo__errore { margin-top: 6px; font-size: .88rem; font-weight: 600; color: var(--errore); }
.thk-avviso-modulo { font-size: .86rem; line-height: 1.45; color: var(--testo-tenue); }
.thk-avviso-modulo a { color: var(--azzurro-testo); font-weight: 600; }
.modulo__nota { font-size: .88rem; color: var(--testo-tenue); text-align: center; }

/* ── conosci ale ──────────────────────────────────────────────────────── */
.conosci__griglia { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 40px; align-items: center; }
.conosci h2 { max-width: 15em; }
.conosci__testo > p:not(.occhiello):not(.conosci__storia):not(.conosci__mete) { margin-top: 16px; max-width: 32em; font-size: 1.2rem; line-height: 1.55; }
.conosci__storia { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; margin-top: 20px; }
.conosci__storia .link-freccia { font-size: 1.12rem; }
.conosci__storia small { font-size: .88rem; color: var(--testo-tenue); }
.conosci__mete {
  display: flex; flex-wrap: wrap; align-items: center; row-gap: 6px;
  margin-top: 24px;
  color: var(--blu-notte); font-weight: 600;
  position: relative; padding-left: 32px;
}
/* l'icona fuori dal flusso: se l'elenco va a capo, la seconda riga parte sotto «Malta» */
.conosci__mete .icona { position: absolute; left: 0; top: 2px; width: 22px; height: 22px; color: var(--azzurro); }
/* il punto chiude la meta prima, così se la riga va a capo non ne comincia una nuova */
.conosci__mete span:not(:last-child)::after { content: "·"; margin-inline: .6em; color: var(--testo-tenue); }
.conosci__figura { position: relative; display: flex; justify-content: flex-end; padding-right: 3%; }
/* l'alone resta dentro la colonna: con right negativo la pagina usciva dallo schermo di 7 px a 1440 */
.conosci__figura::before {
  content: ""; position: absolute; z-index: -1;
  left: 4%; right: 0; bottom: -6%; height: 52%;
  background: radial-gradient(66% 58% at 64% 64%, rgba(5, 148, 223, .14), rgba(5, 148, 223, 0) 72%);
}
.conosci__mappamondo { width: min(262px, 64%); }

.rotta { position: absolute; pointer-events: none; }
.rotta__linea { width: 100%; height: 100%; overflow: visible; }
.rotta__linea path { fill: none; stroke: var(--azzurro); stroke-width: 2.4; stroke-dasharray: 7 9; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.rotta__aereo { position: absolute; width: 38px; height: 38px; color: var(--azzurro); transform: rotate(var(--rot, 0deg)); }
.rotta--conosci { left: -6%; top: 30%; width: 44%; height: 90px; }
.rotta--conosci .rotta__aereo { right: -18px; top: -14px; --rot: 8deg; }

/* ── dall'idea alla partenza ──────────────────────────────────────────── */
.passi__elenco {
  list-style: none;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 64px;
  margin-top: 24px;
}
.passo {
  position: relative;
  display: flex; align-items: center; gap: 18px;
  background: var(--bianco); border: 1px solid var(--bordo); border-radius: 16px;
  padding: 16px 22px;
  box-shadow: var(--ombra-scheda);
}
.passo + .passo::before {
  content: ""; position: absolute; top: 50%; left: -58px; width: 52px;
  border-top: 2.5px dashed var(--azzurro);
}
.passo__icona { width: 48px; height: 48px; color: var(--azzurro); }
.passo p { color: var(--blu-notte); font-weight: 700; font-size: 1.12rem; line-height: 1.25; }
.passo strong { display: block; color: var(--azzurro); font-size: 1.55rem; font-weight: 800; line-height: 1.1; }
.nota-centrata { margin-top: 20px; text-align: center; color: var(--testo-tenue); font-size: 1rem; }

/* ── ricordi ──────────────────────────────────────────────────────────── */
.cartoline {
  list-style: none;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 44px;
  padding: 8px 6px 4px;
}
.cartolina { --r: 0deg; }
.cartolina:nth-child(1) { --r: -2.4deg; }
.cartolina:nth-child(2) { --r: -1deg; margin-top: 10px; }
.cartolina:nth-child(3) { --r: 2.4deg; }
.cartolina > a {
  display: block;
  background: var(--bianco);
  padding: 12px 12px 16px;
  border-radius: 10px;
  color: var(--blu-notte); text-decoration: none;
  box-shadow: 0 2px 4px rgba(7, 33, 64, .06), 0 22px 40px -22px rgba(7, 33, 64, .42);
  transform: rotate(var(--r));
  transition: transform .45s var(--ease-out), box-shadow .45s var(--ease-out);
}
.cartolina__foto { position: relative; display: block; border-radius: 6px; overflow: hidden; }
.cartolina__foto img { width: 100%; aspect-ratio: 2.35 / 1; object-fit: cover; transition: transform .7s var(--ease-out); }
.cartolina__media { position: absolute; left: 10px; bottom: 10px; display: flex; gap: 6px; }
.cartolina__media .icona {
  width: 34px; height: 30px; padding: 6px;
  background: rgba(255, 255, 255, .94); border-radius: 8px; color: var(--blu-notte);
}
.cartolina__titolo { display: block; margin-top: 10px; padding-inline: 4px; font-size: 1.25rem; font-weight: 800; line-height: 1.2; }
.cartolina__apri { display: inline-flex; align-items: center; gap: 7px; padding-inline: 4px; margin-top: 2px; font-weight: 600; font-size: .98rem; }
.cartolina__apri .icona { width: 13px; height: 13px; color: var(--blu-notte); }
.cartolina > a:active { transform: rotate(var(--r)) scale(.98); }
@media (hover: hover) and (pointer: fine) {
  .cartolina > a:hover { transform: rotate(0deg) translateY(-6px); box-shadow: 0 2px 4px rgba(7, 33, 64, .06), 0 30px 50px -24px rgba(7, 33, 64, .45); }
  .cartolina > a:hover .cartolina__foto img { transform: scale(1.05); }
  .diario__foto:hover img { transform: scale(1.04); }
}

/* ── recensioni ───────────────────────────────────────────────────────── */
.recensioni { padding-block: clamp(26px, 2.6vw, 36px); }
.recensioni__riga { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; align-items: center; }
.recensioni__titolo { display: flex; align-items: center; gap: 28px; }
.recensioni__virgolette { width: 66px; height: 52px; color: var(--azzurro); }
.recensioni__attesa {
  display: flex; align-items: center; gap: 18px;
  background: var(--bianco); border: 1px solid var(--bordo); border-radius: 16px;
  padding: 18px 24px; box-shadow: var(--ombra-scheda);
}
.recensioni__attesa > .icona { width: 38px; height: 38px; color: var(--azzurro); }
.recensioni__attesa p { line-height: 1.45; }
.recensioni__attesa strong { display: block; color: var(--blu-notte); font-weight: 700; }

/* ── diario ───────────────────────────────────────────────────────────── */
.diario__galleria {
  list-style: none;
  display: grid; grid-template-columns: minmax(0, 1.62fr) minmax(0, 1fr) minmax(0, .92fr); gap: 24px; align-items: center;
}
.diario__foto { position: relative; border-radius: var(--raggio); overflow: hidden; box-shadow: var(--ombra-scheda); }
.diario__foto img { width: 100%; aspect-ratio: 2 / 1; object-fit: cover; transition: transform .7s var(--ease-out); }
.diario__foto--larga img { aspect-ratio: 3.2 / 1; }
.etichetta {
  position: absolute; left: 16px; bottom: 16px;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px; border-radius: 10px;
  background: var(--bianco); color: var(--blu-notte);
  font-size: .95rem; font-weight: 700;
  box-shadow: 0 8px 20px -12px rgba(7, 33, 64, .45);
}
.etichetta .icona { width: 22px; height: 22px; color: var(--azzurro); }
.diario__libro img { width: 104%; max-width: none; margin: -34px 0 -34px -2%; transform: rotate(-3deg); }

/* ── prima di partire ─────────────────────────────────────────────────── */
.domande { padding-block: 28px 32px; }
.fisarmonica { display: grid; gap: 8px; margin-top: 14px; }
.domanda { background: var(--bianco); border: 1px solid var(--bordo); border-radius: 14px; }
.domanda summary {
  display: flex; align-items: center; gap: 16px;
  padding: 12px 20px;
  list-style: none; cursor: pointer;
  color: var(--blu-notte); font-weight: 700; font-size: 1.12rem;
  user-select: none; -webkit-user-select: none;
}
.domanda summary::-webkit-details-marker { display: none; }
.domanda summary:active { background: var(--fondo-azzurro); border-radius: 14px; }
.domanda__segno { width: 18px; height: 18px; color: var(--azzurro); transition: clip-path .3s var(--ease-out); clip-path: inset(0 0 0 0); }
.domanda[open] .domanda__segno { clip-path: inset(40% 0 42% 0); }
.domanda__freccia { margin-left: auto; width: 15px; height: 15px; color: var(--blu-notte); transition: transform .3s var(--ease-out); }
.domanda[open] .domanda__freccia { transform: rotate(180deg); }
.domanda__risposta { padding: 0 20px 13px 54px; }

/* ── contatti ─────────────────────────────────────────────────────────── */
.contatti { background: var(--fondo-biglietto); padding-block: 32px; }
.contatti__griglia { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); gap: 48px; align-items: center; }
.contatti__titolo { position: relative; padding-bottom: 90px; }
.contatti__titolo h2 { font-size: clamp(2rem, 1.15rem + 2.3vw, 3.2rem); line-height: 1.06; }
.contatti__titolo p { margin-top: 14px; max-width: 26em; }
.modulo__esito { font-weight: 600; color: var(--blu-notte); }
.rotta--contatti { left: 0; bottom: 0; width: 78%; height: 70px; }
.rotta--contatti .rotta__aereo { right: -26px; top: -6px; --rot: 14deg; }

.biglietto {
  display: grid; grid-template-columns: minmax(0, .86fr) minmax(0, 1.6fr);   /* la matrice tiene il pulsante del copy su due righe */
  background: var(--bianco);
  border: 1px solid var(--bordo);
  border-radius: 22px;
  box-shadow: 0 26px 54px -30px rgba(7, 33, 64, .45);
}
.biglietto__matrice {
  position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  padding: 30px 24px;
  text-align: center;
  border-right: 2px dashed var(--bordo);
}
.biglietto__matrice::before, .biglietto__matrice::after {
  content: ""; position: absolute; right: -15px;
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--fondo-biglietto);
}
.biglietto__matrice::before { top: -15px; box-shadow: inset 0 -1px 0 var(--bordo); }
.biglietto__matrice::after { bottom: -15px; box-shadow: inset 0 1px 0 var(--bordo); }
.biglietto__aereo { width: 48px; height: 48px; color: var(--azzurro); }
.biglietto__matrice p { color: var(--blu-notte); font-size: 1.3rem; font-weight: 800; line-height: 1.2; }
.biglietto__matrice .btn { font-size: 1.05rem; padding-inline: 1.1em; }
.biglietto__modulo { display: grid; gap: 12px; padding: 22px 28px 20px; }
.modulo__coppia { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: end; }

/* ── piede ────────────────────────────────────────────────────────────── */
.piede { padding: 32px 0 26px; border-top: 1px solid var(--bordo); background: var(--fondo); }
.piede__riga { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 30px; }
.piede__logo img { width: 170px; }
.piede__motto { color: var(--blu-notte); font-weight: 500; max-width: 22em; line-height: 1.45; }
.piede__menu { display: flex; flex-wrap: wrap; margin-left: auto; }
.piede__menu a {
  padding: 4px 14px; color: var(--blu-notte); font-weight: 500; text-decoration: none; white-space: nowrap;
  user-select: none; -webkit-user-select: none;
}
.piede__menu a + a { border-left: 1px solid var(--bordo); }
.piede__menu a:active { color: var(--azzurro-testo); }
@media (hover: hover) and (pointer: fine) { .piede__menu a:hover { color: var(--azzurro-testo); } }
.piede__legale {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 10px 28px;
  margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--bordo);
  font-size: .9rem; color: var(--testo-tenue);
}
.thk-riga-legale { line-height: 1.5; }
.thk-link-legali { display: flex; flex-wrap: wrap; gap: 6px 20px; }
.thk-link-legali a { color: var(--blu-notte); font-weight: 600; text-underline-offset: 3px; }
.thk-link-legali a:active, .credit a:active { color: var(--azzurro-hover); }
.credit { font-size: .9rem; color: var(--testo-tenue); }
.credit a { color: var(--azzurro-testo); font-weight: 700; }

/* ── pulsante WhatsApp fisso (telefono) e avviso ──────────────────────── */
.wa-fisso {
  position: fixed; z-index: 40;
  right: calc(16px + env(safe-area-inset-right, 0px));
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  display: none; align-items: center; gap: 8px;
  min-height: 52px; padding: 0 20px 0 16px;
  border-radius: 999px;
  background: var(--azzurro); color: var(--bianco);
  font-size: 1.1875rem; font-weight: 700; text-decoration: none;
  box-shadow: 0 14px 30px -12px rgba(5, 70, 130, .65);
  user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
  transition: opacity .25s ease, transform .3s var(--ease-out);
}
.wa-fisso .icona { width: 24px; height: 24px; }
.wa-fisso:active { transform: scale(.96); }
.avviso {
  position: fixed; z-index: 70; left: 50%;
  bottom: calc(84px + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  width: max-content; max-width: calc(100% - 32px);
  padding: 13px 20px; border-radius: 14px;
  background: var(--blu-notte); color: var(--bianco);
  font-weight: 600; font-size: 1rem; line-height: 1.4; text-align: center;
  box-shadow: 0 18px 40px -18px rgba(7, 33, 64, .7);
}
.avviso[hidden] { display: none; }

/* ── pagine semplici (legali, 404) ────────────────────────────────────── */
.pagina { padding-block: clamp(48px, 6vw, 88px); }
.legale { max-width: 780px; }
.legale h1 { font-size: clamp(2rem, 1.3rem + 2vw, 2.9rem); margin-bottom: 14px; }
.legale h2 { font-size: clamp(1.3rem, 1.1rem + .6vw, 1.6rem); margin-top: 2em; margin-bottom: .5em; }
.legale h3 { font-size: 1.15rem; margin-top: 1.4em; margin-bottom: .4em; }
.legale p, .legale li { margin-top: .6em; }
.legale ul, .legale ol { padding-left: 1.3em; }
.legale a { color: var(--azzurro-testo); font-weight: 600; text-underline-offset: 3px; overflow-wrap: anywhere; }
.legale table { width: 100%; border-collapse: collapse; margin-top: 1em; font-size: .95rem; display: block; overflow-x: auto; }
.legale th, .legale td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--bordo); vertical-align: top; }
.legale th { color: var(--blu-notte); }
.errore-404 { text-align: center; max-width: 640px; margin-inline: auto; }
.errore-404 img { width: min(360px, 80%); margin: 0 auto 24px; }
.errore-404 h1 { font-size: clamp(2rem, 1.3rem + 2.2vw, 3rem); }
.errore-404 p { margin-top: 12px; font-size: 1.15rem; }
.errore-404 .hero__pulsanti { justify-content: center; align-items: center; }

/* ── movimento (step 5-bis) ─────────────────────────────────────────────
   Il come lo dicono le regole di Emil Kowalski (09 § 0-bis-2): entrate e uscite --ease-out, cose che si spostano
   sullo schermo --ease-in-out, hover e colori ease. Si muovono solo transform e opacity (più clip-path per le linee
   che si disegnano): niente sposta l'impaginazione del design. */
@keyframes entra-su { from { opacity: 0; transform: translateY(28px); } }
@keyframes entra-lieve { from { opacity: 0; transform: translateY(14px); } }
@keyframes scende-lieve { from { opacity: 0; transform: translateY(-8px); } }
@keyframes dissolvenza { from { opacity: 0; } }
@keyframes dissolvenza-esce { to { opacity: 0; } }

/* la hero entra al caricamento, senza aspettare il JavaScript: titolo, testi e pulsanti in cascata.
   La foto grande e il ritratto di Ale non partono mai da opacity 0: la foto si posa (da scale 1.06) */
.hero__contenuto > * { animation: entra-su 900ms var(--ease-out) backwards; }
.hero__contenuto > :nth-child(1) { animation-delay: 80ms; }
.hero__contenuto > :nth-child(2) { animation-delay: 150ms; }
.hero__contenuto > :nth-child(3) { animation-delay: 230ms; }
.hero__contenuto > :nth-child(4) { animation-delay: 300ms; }
.hero__contenuto > :nth-child(5) { animation-delay: 380ms; }
@keyframes fondo-arriva { from { transform: scale(1.06); } }
.hero__fondo img { animation: fondo-arriva 1800ms var(--ease-out) backwards; }
/* la valigia arriva sull'onda e poi galleggia piano: nella hero c'è sempre qualcosa che si muove (16 § 4-bis) */
@keyframes valigia-arriva { from { transform: translateY(40px) rotate(-3deg); } }
@keyframes valigia-galleggia { to { transform: translateY(-9px); } }
.hero__valigia {
  animation: valigia-arriva 1200ms var(--ease-out) 200ms backwards,
             valigia-galleggia 3400ms var(--ease-in-out) 1400ms infinite alternate;
}

/* le sezioni arrivano scorrendo: .reveal → .in (main.js, IntersectionObserver, una volta sola). Nascoste solo col
   JavaScript acceso (classe js scritta nel <head>); senza JavaScript, o se main.js non parte in 4 s, si vedono */
.js .reveal:not(.in) { opacity: 0; }
.reveal.in { animation: entra-su 760ms var(--ease-out) var(--ritardo, 0ms) backwards; }
.senza-movimento .reveal { opacity: 1 !important; animation: none !important; }
/* la foto del viaggio in evidenza si posa come quella della hero */
@keyframes foto-arriva { from { opacity: 0; transform: scale(1.06); } }
.evidenza__foto.reveal.in { animation-name: foto-arriva; animation-duration: 1300ms; }
/* le tappe arrivano una dopo l'altra, nell'ordine del viaggio; la bussola arriva girando e si ferma inclinata */
@keyframes tappa-arriva { from { opacity: 0; transform: translateX(-50%) translateY(14px); } }
@keyframes bussola-arriva { from { opacity: 0; transform: rotate(-80deg) scale(.9); } }
.itinerario__bussola.reveal.in { animation-name: bussola-arriva; animation-duration: 1100ms; }
/* le rotte si disegnano da sinistra e l'aereo vola fino in fondo alla linea */
@keyframes rotta-disegna { from { clip-path: inset(0 100% 0 0); } }
@keyframes aereo-vola { from { opacity: 0; transform: translate(-48px, 24px) rotate(var(--rot, 0deg)); } }
.rotta.reveal.in { animation: dissolvenza 200ms var(--ease-out) backwards; }
.rotta.reveal.in .rotta__linea { animation: rotta-disegna 1300ms var(--ease-in-out) 150ms backwards; }
.rotta.reveal.in .rotta__aereo { animation: aereo-vola 1000ms var(--ease-out) 750ms backwards; }
/* le linee fra i passi si disegnano dopo il passo che le segue */
@keyframes linea-disegna { from { clip-path: inset(0 100% 0 0); } }
@keyframes linea-scende { from { clip-path: inset(0 0 100% 0); } }
.passo.reveal.in::before { animation: linea-disegna 600ms var(--ease-in-out) calc(var(--ritardo, 0ms) + 250ms) backwards; }

/* il menu del telefono si apre dall'alto, le voci in cascata; si chiude più in fretta di come si apre */
@keyframes menu-entra { from { opacity: 0; transform: translateY(-12px); } }
@keyframes menu-esce { to { opacity: 0; transform: translateY(-8px); } }
.menu-telefono:not([hidden]) { animation: menu-entra 320ms var(--ease-out) backwards; }
.menu-telefono:not([hidden]) li, .menu-telefono:not([hidden]) > .btn { animation: entra-lieve 460ms var(--ease-out) backwards; }
.menu-telefono li:nth-child(1) { animation-delay: 60ms; }
.menu-telefono li:nth-child(2) { animation-delay: 100ms; }
.menu-telefono li:nth-child(3) { animation-delay: 140ms; }
.menu-telefono li:nth-child(4) { animation-delay: 180ms; }
.menu-telefono li:nth-child(5) { animation-delay: 220ms; }
.menu-telefono > .btn { animation-delay: 260ms; }
.menu-telefono.chiude { animation: menu-esce 200ms var(--ease-out) forwards; }

/* cambi di stato senza strappi: la linguetta mostra le sue schede, la risposta scende dalla domanda, l'avviso sale */
.pannello.cambiato { animation: entra-lieve 420ms var(--ease-out) backwards; }
.domanda[open] .domanda__risposta { animation: scende-lieve 260ms var(--ease-out) backwards; }
@keyframes avviso-entra { from { opacity: 0; transform: translate(-50%, 16px); } }
@keyframes avviso-esce { to { opacity: 0; transform: translate(-50%, 8px); } }
.avviso:not([hidden]) { animation: avviso-entra 320ms var(--ease-out) backwards; }
.avviso.esce { animation: avviso-esce 180ms var(--ease-out) forwards; }
/* a entrata finita l'animazione si toglie (main.js mette .entrato): non resta niente appeso, nemmeno nelle foto a
   pagina intera, dove un'animazione finita poteva tornare al primo fotogramma */
.reveal.entrato, .passo.reveal.entrato::before, .rotta.reveal.entrato .rotta__linea, .rotta.reveal.entrato .rotta__aereo { animation: none !important; }

/* ── da tablet in su (dal giro 1 del confronto col design) ────────────── */
@media (min-width: 721px) {
  .itinerario__tappe li.reveal.in { animation-name: tappa-arriva; animation-duration: 640ms; }
  .evidenza__sotto { font-size: 1.45rem; }
  .domanda summary { padding-block: 9px; }
  .domanda__risposta { padding-bottom: 10px; margin-top: -4px; }
  .biglietto__modulo { gap: 10px; padding-block: 18px 16px; }
}
/* «Conosci Ale» come nel design: il titolo su una riga, la rotta con l'aereo fra il testo e il mappamondo */
@media (min-width: 901px) {
  .conosci__griglia { grid-template-columns: minmax(0, 1fr) 340px; }
  .conosci h2 { max-width: none; }
  /* a 1440 la rotta è lunga 354 px (left -92%, width 104%); quando lo spazio fra il testo e il mappamondo cala
     si accorcia da sinistra, così non passa mai sopra il paragrafo o il link (fra 901 e 1100 px) */
  .rotta--conosci {
    --rotta: clamp(120px, calc(min(100vw - 2 * var(--gutter), var(--larghezza)) - 986px), 354px);
    left: calc(41px - var(--rotta)); top: 40%; width: var(--rotta); height: 84px;
  }
}

/* ── tablet ───────────────────────────────────────────────────────────── */
@media (max-width: 1240px) {
  .testata__menu { display: none; }
  .testata__apri { display: inline-flex; margin-left: 0; }
  .testata__cta { margin-left: auto; }
}
@media (max-width: 1100px) {
  :root { --testata: 72px; }
  .schede { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .evidenza__corpo { grid-template-columns: 1fr; margin-top: -70px; padding-inline: 32px; }
  .itinerario__bussola { width: 11cqw; right: -3cqw; bottom: -2cqw; }
  .evidenza__quota { grid-template-columns: 1fr 1fr; }
  .evidenza__banner, .evidenza__prezzi { padding-inline: 32px; }
  .modulo--riga { padding-inline: 32px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .modulo--riga .modulo__invio { padding-top: 0; }
  .modulo--riga .modulo__invio .btn { width: 100%; }
  .passi__elenco { gap: 40px; }
  .passo + .passo::before { left: -38px; width: 36px; }
  .contatti__griglia { grid-template-columns: 1fr; gap: 28px; }
  .contatti__titolo { padding-bottom: 76px; }
  .rotta--contatti { width: min(78%, 420px); }
  .recensioni__riga { grid-template-columns: 1fr; gap: 20px; }
  .diario__galleria { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr); }
}

@media (max-width: 900px) {
  .passi__elenco { grid-template-columns: 1fr; gap: 28px; max-width: 520px; }
  .passo + .passo::before { left: 47px; top: -30px; width: 0; height: 30px; border-top: 0; border-left: 2.5px dashed var(--azzurro); }
  .passo.reveal.in::before { animation-name: linea-scende; }
  .evidenza__quota { grid-template-columns: 1fr; }
  .conosci__griglia { grid-template-columns: 1fr; gap: 12px; }
  .conosci__figura { justify-content: center; padding-right: 0; }
  .rotta--conosci { left: 0; top: 18%; width: 32%; }
  .conosci__figura::before { right: 0; left: 0; }
}

/* ── telefono ─────────────────────────────────────────────────────────── */
@media (max-width: 720px) {
  :root { --testata: 64px; }
  body { font-size: 1rem; }
  .testata__logo img { width: 158px; }
  .testata__cta { display: none; }
  .testata__apri { margin-left: auto; }
  .solo-computer { display: none; }

  .hero { min-height: 0; padding: 30px 0 318px; }
  .hero__fondo img { object-position: 36% 50%; }
  .hero__velo {
    background:
      linear-gradient(180deg, rgba(3, 58, 122, .82) 0%, rgba(4, 72, 142, .62) 40%, rgba(4, 72, 142, .2) 62%, rgba(4, 72, 142, 0) 76%);
  }
  .hero .occhiello { font-size: .88rem; letter-spacing: .03em; }
  .hero h1 { font-size: clamp(2.15rem, 1.2rem + 4.6vw, 2.75rem); }
  .hero__testo { margin-top: 12px; font-size: 1.08rem; }
  .hero__pulsanti { margin-top: 22px; gap: 10px; }
  .hero__pulsanti .btn { min-height: 52px; padding: .6em 1.1em; font-size: 1.1875rem; }
  .hero__luogo { margin-top: 18px; font-size: .92rem; }
  .hero__ritratto { top: auto; bottom: -150px; right: -14px; width: 236px; }
  .hero__onda { height: 64px; }
  .hero__valigia { width: 196px; left: 10px; bottom: -40px; }

  .testa-sezione { flex-direction: column; align-items: flex-start; gap: 12px; margin-bottom: 22px; }
  .testa-sezione .link-freccia { margin-bottom: 0; }
  .viaggi { padding-top: 76px; }
  .linguette { gap: 10px; margin-bottom: 22px; }
  .linguetta { width: 100%; min-height: 56px; padding: 8px 18px; }
  .linguetta__nota { display: block; margin-left: 0; margin-top: 1px; font-size: .85rem; }

  .schede, .cartoline, .diario__galleria {
    display: flex; gap: 14px;
    overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gutter);
    margin-inline: calc(-1 * var(--gutter));
    padding-inline: var(--gutter);
    scrollbar-width: none;
  }
  .schede::-webkit-scrollbar, .cartoline::-webkit-scrollbar, .diario__galleria::-webkit-scrollbar { display: none; }
  .schede > li { flex: 0 0 84%; scroll-snap-align: start; }
  .schede { padding-bottom: 18px; }
  .scheda__corpo { padding: 16px 18px 14px; }
  .scheda__titolo { font-size: 1.38rem; }
  .scheda__prezzo strong { font-size: 1.75rem; }
  .scheda__azioni { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); padding: 6px 6px 8px; gap: 2px; }
  .scheda__azioni a, .scheda__azioni button { flex-direction: column; justify-content: center; gap: 3px; min-height: 52px; padding: 6px 2px; font-size: .76rem; line-height: 1.15; text-align: center; }
  .scheda__azioni .icona { width: 19px; height: 19px; }

  .evidenza .contenitore { padding-inline: 12px; }
  .evidenza__riquadro { border-radius: 22px; padding-bottom: 24px; }
  .evidenza__banner { flex-direction: column; min-height: 0; padding: 28px 20px 96px; gap: 18px; }
  .evidenza__banner::before {
    /* più leggero in alto che sul computer: si vede l'aurora, il titolo bianco resta leggibile */
    background: linear-gradient(180deg, rgba(4, 26, 58, .6) 0%, rgba(4, 26, 58, .52) 46%, rgba(4, 26, 58, .2) 70%, rgba(240, 248, 253, .7) 90%, rgba(240, 248, 253, 1) 100%);
  }
  .evidenza__video { margin-top: 2px; padding: 8px 16px 8px 8px; }
  .evidenza__play { width: 44px; height: 44px; }
  .evidenza__play .icona { width: 26px; height: 26px; }
  .evidenza__corpo { margin-top: -78px; padding-inline: 16px; gap: 22px; }
  .itinerario__tappe { position: static; margin-top: 18px; display: grid; gap: 8px; counter-reset: none; }
  .itinerario__tappe li {
    position: static; transform: none; width: auto; text-align: left;
    display: flex; align-items: baseline; gap: 12px;
    font-size: 1rem; font-weight: 600;
  }
  .itinerario__tappe li { line-height: 1.25; text-shadow: none; text-wrap: wrap; }
  .itinerario__tappe strong { display: inline; margin: 0; font-size: 1.1rem; line-height: inherit; min-width: 1.6em; }
  /* sotto l'anello della tappa 05 (al 68,5% della carta), appesa all'angolo: non copre nessuna tappa */
  .itinerario__bussola { width: 70px; right: -4px; bottom: auto; top: calc(54cqw - 42px); }
  .evidenza__quota { grid-template-columns: 1fr; gap: 12px; }
  /* sul telefono l'icona sta accanto al titolo e il testo prende tutta la larghezza: max 3 righe anche a 360 */
  .riquadro-incluso { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 12px; padding: 16px 18px; }
  .riquadro-incluso > div { display: contents; }
  .riquadro-incluso > .icona { width: 28px; height: 28px; margin-top: 0; }
  .riquadro-incluso p, .riquadro-incluso ul { grid-column: 1 / -1; margin-top: 6px; }   /* anche gli elenchi delle pagine dei viaggi */
  .evidenza__prezzi { padding: 26px 20px 0; flex-direction: column; align-items: flex-start; }
  .evidenza__prezzo strong { font-size: 2.15rem; display: block; margin-bottom: 2px; }
  .evidenza__azioni { width: 100%; }
  .evidenza__azioni .btn { flex: 1 1 100%; justify-content: flex-start; }
  .modulo--riga { grid-template-columns: 1fr; padding: 22px 20px 0; }
  .modulo--riga .thk-avviso-modulo { margin-top: 0; }

  .conosci__testo > p:not(.occhiello):not(.conosci__storia):not(.conosci__mete) { font-size: 1.08rem; }
  .conosci__mappamondo { width: min(210px, 56%); }
  .conosci__mete { gap: 8px; padding-left: 0; }
  .conosci__mete .icona { display: none; }
  .conosci__mete span { padding: 5px 13px; border-radius: 999px; background: var(--bianco); border: 1px solid var(--bordo); font-size: .95rem; }
  .conosci__mete span:not(:last-child)::after { content: none; }
  .rotta--conosci { top: 26%; width: 26%; height: 60px; }
  .rotta--conosci .rotta__aereo { width: 30px; height: 30px; right: -14px; top: -12px; }

  .passo { padding: 16px 18px; }
  .passo__icona { width: 42px; height: 42px; }
  .passo + .passo::before { left: 39px; }

  .cartoline { padding-top: 14px; padding-bottom: 22px; gap: 18px; }
  .cartoline > li { flex: 0 0 78%; scroll-snap-align: start; }
  .cartolina:nth-child(2) { margin-top: 0; }

  .recensioni__titolo { gap: 18px; }
  .recensioni__virgolette { width: 48px; height: 38px; }
  .recensioni__attesa { padding: 16px 18px; }

  .diario__galleria { align-items: stretch; padding-bottom: 12px; }
  .diario__galleria > li { flex: 0 0 80%; scroll-snap-align: start; }
  .diario__foto img, .diario__foto--larga img { aspect-ratio: 1.55 / 1; height: 100%; }
  .diario__libro { display: flex; align-items: center; }
  .diario__libro img { width: 100%; margin: 0; }

  .domanda summary { padding: 16px 18px; font-size: 1.05rem; gap: 14px; }
  .domanda__risposta { padding: 0 18px 18px; }   /* tutta la larghezza: le risposte del copy restano entro 3 righe */
  .domanda__risposta p { font-size: .95rem; }    /* lo stesso corpo per tutte le risposte: entro 3 righe a 390 px (collaudo, 04/11) */

  .contatti__titolo { padding-bottom: 64px; }
  .rotta--contatti { width: 72%; height: 56px; }
  .biglietto { grid-template-columns: 1fr; }
  .biglietto__matrice { border-right: 0; border-bottom: 2px dashed var(--bordo); padding: 26px 20px 24px; }
  .biglietto__matrice::before, .biglietto__matrice::after { right: auto; top: auto; bottom: -15px; }
  .biglietto__matrice::before { left: -15px; box-shadow: inset -1px 0 0 var(--bordo); }
  .biglietto__matrice::after { right: -15px; box-shadow: inset 1px 0 0 var(--bordo); }
  .biglietto__modulo { padding: 24px 20px 22px; }
  .modulo__coppia { grid-template-columns: 1fr; gap: 14px; }

  .piede { padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)); }
  .piede__menu { margin-left: 0; width: 100%; }
  .piede__menu a:first-child { padding-left: 0; }
  .piede__legale { flex-direction: column; }

  .wa-fisso { display: inline-flex; font-size: 1rem; white-space: nowrap; }
  html.js .wa-fisso:not(.visibile) { opacity: 0; transform: translateY(16px); pointer-events: none; }
  html.menu-aperto .wa-fisso { opacity: 0; pointer-events: none; }
}

@media (max-width: 380px) {
  .hero h1 { font-size: 2.05rem; }
  .conosci__testo > p:not(.occhiello):not(.conosci__storia):not(.conosci__mete), .passo p { font-size: 1rem; }
  /* sui telefoni più stretti: i riquadri del viaggio in evidenza un po' più larghi dentro, il pulsante fisso su una riga */
  .evidenza__corpo { padding-inline: 10px; }
  .riquadro-incluso { padding: 14px; }
  .riquadro-incluso p { font-size: .95rem; }
  .wa-fisso { font-size: .9rem; gap: 6px; padding: 0 16px 0 12px; }
  .domanda__risposta { padding: 0 14px 16px; }
  .domanda__risposta p { font-size: .92rem; }
  .hero__pulsanti .btn { padding-inline: .9em; }
  .scheda__azioni a, .scheda__azioni button { font-size: .76rem; padding-inline: 4px; }
}

@media (prefers-reduced-motion: reduce) {
  /* meno movimento, non zero: restano le dissolvenze e i cambi di colore, spariscono gli spostamenti
     (niente reset globale: ogni entrata diventa una dissolvenza) */
  html { scroll-behavior: auto; }
  .hero__contenuto > *, .reveal.in, .rotta.reveal.in .rotta__linea, .rotta.reveal.in .rotta__aereo,
  .menu-telefono:not([hidden]), .menu-telefono:not([hidden]) li, .menu-telefono:not([hidden]) > .btn,
  .pannello.cambiato, .domanda[open] .domanda__risposta, .avviso:not([hidden]) { animation-name: dissolvenza; }
  .evidenza__foto.reveal.in, .itinerario__bussola.reveal.in, .itinerario__tappe li.reveal.in, .passo.reveal.in::before { animation-name: dissolvenza; }
  .menu-telefono.chiude, .avviso.esce { animation-name: dissolvenza-esce; }
  .hero__fondo img, .hero__valigia { animation: none; }
  .testata.scorsa .testata__logo img { transform: none; }
  .scheda:hover, .cartolina > a:hover { transform: none; }
  .cartolina > a:hover { transform: rotate(var(--r)); }
  .scheda:hover .scheda__foto img, .cartolina > a:hover .cartolina__foto img, .diario__foto:hover img { transform: none; }
  .link-freccia:hover .icona { transform: none; }
}

/* ── video e foto dei nostri viaggi (tornata del 05/11/2026, D2·001) ───────────────────────────────────────────
   Il pezzo nuovo della home, nello stile del kit: una riga che scorre di video e foto veri, grandi uguali, con gli angoli
   e l'ombra delle schede e il pulsante dell'audio della hero; si vede che scorre (l'ultima tessera resta tagliata).
   Lo stesso pezzo fa le anteprime di /viaggi-passati e la griglia dei video delle pagine delle mete. */
.esperienze__riga {
  list-style: none; display: flex; gap: 20px;
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none;
  padding: 6px 2px 16px;
}
.esperienze__riga::-webkit-scrollbar { display: none; }
.esperienze__voce { flex: 0 0 clamp(220px, 20vw, 280px); scroll-snap-align: start; }
.esperienze__media {
  position: relative; display: block; aspect-ratio: 3 / 4; overflow: hidden;
  border-radius: var(--raggio); background: var(--blu-notte); box-shadow: var(--ombra-scheda);
}
.esperienze__media img, .esperienze__media video { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease-out); }
.esperienze__media .btn {
  position: absolute; left: 10px; right: 10px; bottom: 10px;
  min-height: 40px; padding: .45em .6em; font-size: .86rem; line-height: 1.2; border-radius: 10px;
}
.esperienze__testo { margin-top: 10px; padding-inline: 2px; color: var(--blu-notte); font-weight: 600; line-height: 1.35; }
@media (hover: hover) and (pointer: fine) { .esperienze__voce:hover .esperienze__media img { transform: scale(1.04); } }

/* i viaggi passati della home: le cartoline illustrate e i video veri della stessa meta, alternati, in una riga che scorre */
#ricordi .cartoline {
  display: flex; gap: 28px; align-items: center;
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none;
}
#ricordi .cartoline::-webkit-scrollbar { display: none; }
#ricordi .cartoline > li { scroll-snap-align: start; }
#ricordi .cartoline > .cartolina { flex: 0 0 clamp(300px, 27vw, 380px); }
#ricordi .cartoline > .esperienze__voce { flex: 0 0 clamp(300px, 27vw, 380px); }   /* larghi come le cartoline */

@media (max-width: 720px) {
  .esperienze__riga { margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); scroll-padding-inline: var(--gutter); gap: 14px; }
  .esperienze__voce { flex-basis: 62%; }
  .esperienze__media .btn { font-size: .8rem; min-height: 36px; }
  #ricordi .cartoline > .cartolina { flex-basis: 78%; }
  #ricordi .cartoline > .esperienze__voce { flex-basis: 78%; }
}
@media (prefers-reduced-motion: reduce) { .esperienze__voce:hover .esperienze__media img { transform: none; } }

/* ── pagine interne (step 6-bis): le composizioni, SOLO coi pezzi della home ─────────────────────────────────
   Collaudo dello step 7 (04/11/2026): nessuna classe che la home non usa. Le aperture sono il pezzo «conosci» (testo
   e figura) o il banner del viaggio in evidenza (#apertura); le righe a due colonne sono quelle delle recensioni; i
   riquadri sono riquadro-incluso e in-arrivo; le griglie di riquadri evidenza__quota; gli elenchi i passi in <ul>; le
   foto le cartoline e il diario. Qui sotto solo le varianti: partono dal contesto (#apertura, il genitore, il tag) e
   non toccano la home. (Le icone dei riquadri della home hanno «>»: la freccia di un link dentro resta piccola.) */

/* l'apertura col pezzo «conosci»: l'H1 e il testo a sinistra, la figura del kit a destra */
#apertura.conosci { padding-block: clamp(36px, 4vw, 60px) clamp(24px, 3vw, 40px); overflow-x: clip; }
#apertura .conosci__griglia { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 40px; }
#apertura.conosci h1 { font-size: clamp(2.2rem, 1.2rem + 3vw, 3.7rem); line-height: 1.04; letter-spacing: -.022em; max-width: 15em; }
#apertura .conosci__testo > p:not(.occhiello) { font-size: clamp(1.08rem, .95rem + .45vw, 1.3rem); line-height: 1.5; max-width: 34em; }
#apertura .conosci__testo .hero__pulsanti { margin-top: 26px; }
#apertura .conosci__figura { justify-content: center; padding-right: 0; }
#apertura .conosci__figura > img { width: min(420px, 86%); filter: drop-shadow(0 20px 26px rgba(7, 33, 64, .22)); }
/* la valigia della hero, col suo movimento (arriva e galleggia), qui dentro la figura e non sull'onda */
#apertura .conosci__figura > .hero__valigia { position: static; }
/* la bussola della carta del viaggio in evidenza: grande, dritta, che galleggia */
#apertura .conosci__figura > .itinerario__bussola {
  position: static; width: min(220px, 50%); transform: none;
  animation: valigia-galleggia 3400ms var(--ease-in-out) 900ms infinite alternate;
}
#apertura .conosci__figura > .conosci__mappamondo { width: min(300px, 64%); }
#apertura .rotta--conosci { left: 4%; top: 30%; width: 34%; height: 84px; }   /* la rotta resta accanto al mappamondo, lontana dal testo */

/* l'apertura col banner del viaggio in evidenza: la foto, l'H1, i dati delle schede dei viaggi */
#apertura.evidenza { padding-top: clamp(16px, 2vw, 28px); }
#apertura .evidenza__banner {
  min-height: clamp(360px, 36vw, 480px); border-radius: 28px;
  padding: clamp(28px, 4vw, 56px); align-items: flex-end;
}
#apertura .evidenza__banner::before {
  background:
    linear-gradient(90deg, rgba(4, 26, 58, .84) 0%, rgba(4, 26, 58, .6) 38%, rgba(4, 26, 58, .14) 72%, rgba(4, 26, 58, 0) 86%),
    linear-gradient(0deg, rgba(4, 26, 58, .5) 0%, rgba(4, 26, 58, 0) 55%);
}
#apertura .evidenza__foto { object-position: 50% 40%; }
#apertura .evidenza__testo { max-width: 46rem; }
#apertura .evidenza__testo h1 { color: var(--bianco); font-size: clamp(2.1rem, 1.15rem + 2.9vw, 3.6rem); line-height: 1.04; max-width: 15em; text-shadow: 0 2px 18px rgba(3, 20, 50, .4); }
#apertura .scheda__dati { gap: 6px; margin-top: 16px; color: var(--bianco); font-weight: 600; font-size: 1.08rem; text-shadow: 0 1px 10px rgba(3, 20, 50, .5); }
#apertura .scheda__dati .icona { width: 22px; height: 22px; color: currentColor; }
#apertura .evidenza__testo .hero__pulsanti { margin-top: 24px; }

/* i riquadri della home con un titolo h2, più paragrafi o un elenco */
.riquadro-incluso h2, .in-arrivo h2 { font-size: clamp(1.4rem, 1.1rem + .9vw, 1.9rem); }
.riquadro-incluso h2 + p, .in-arrivo h2 + p { margin-top: 8px; }
.riquadro-incluso p + p, .in-arrivo p + p { margin-top: 8px; }
.riquadro-incluso > div > p:first-child { margin-top: 0; }
.riquadro-incluso ul { margin-top: 8px; padding-left: 1.1em; display: grid; gap: 5px; }
.riquadro-incluso li { line-height: 1.45; }

/* le griglie di riquadri: la quota del viaggio in evidenza, a tutta larghezza, in due o tre colonne (in una riga a
   due colonne, come nei contatti, resta quella della home: i riquadri uno sotto l'altro) */
.contenitore:not(.recensioni__riga) > .evidenza__quota { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.contenitore:not(.recensioni__riga) > .evidenza__quota:has(> :nth-child(3)) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.contenitore:not(.recensioni__riga) > * + .evidenza__quota { margin-top: 22px; }
.evidenza__quota > .in-arrivo { align-items: flex-start; }
.evidenza__quota > p { grid-column: 1 / -1; }

/* i prezzi nel riquadro: la quota è la riga del prezzo della home (blu notte, il prezzo grande nella frase); le note
   dopo la quota restano staccate e in tono minore, come nella versione fedele: peso normale, grigio, 10 px sopra */
.evidenza__quota > .in-arrivo p { margin-top: 8px; }
#titolo-prezzi ~ p { margin-top: 10px; }
#titolo-prezzi ~ .evidenza__prezzo + .evidenza__prezzo { margin-top: 2px; }   /* la quota che continua sotto il prezzo */
.in-arrivo .evidenza__prezzo strong { margin-inline: .1em; }
.in-arrivo .evidenza__azioni { margin-top: 16px; }

/* il testo e il rimando sotto una griglia: la testa delle sezioni della home, in fondo */
.contenitore > * + .testa-sezione { margin: 22px 0 0; }
.contenitore > * + .testa-sezione .testa-sezione__sotto { margin-top: 0; max-width: 46em; font-size: inherit; }

/* gli elenchi di voci: i passi della home in un <ul> (non sono passi in fila: niente linee fra loro) */
ul.passi__elenco { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
ul.passi__elenco:has(> :nth-child(5)) { grid-template-columns: repeat(5, minmax(0, 1fr)); }
ul.passi__elenco .passo { align-items: flex-start; }
ul.passi__elenco .passo + .passo::before { content: none; }
ul.passi__elenco .passo p { font-size: 1.02rem; font-weight: 600; }

/* la cartolina da sola, accanto al testo (la foto del viaggio, la storia) */
.recensioni__riga > figure.cartolina {
  --r: 2deg; margin: 0; background: var(--bianco); padding: 12px; border-radius: 10px; transform: rotate(var(--r));
  box-shadow: 0 2px 4px rgba(7, 33, 64, .06), 0 22px 40px -22px rgba(7, 33, 64, .42);
}
figure.cartolina .cartolina__foto img { aspect-ratio: 16 / 10; }
/* le cartoline dei viaggi passati col racconto: la carta è un <div> (dentro c'è un rimando), fatta come il link della home */
.cartolina > div {
  display: block; height: 100%; background: var(--bianco); padding: 12px 12px 20px; border-radius: 10px; color: var(--blu-notte);
  box-shadow: 0 2px 4px rgba(7, 33, 64, .06), 0 22px 40px -22px rgba(7, 33, 64, .42);
  transform: rotate(var(--r)); transition: transform .45s var(--ease-out), box-shadow .45s var(--ease-out);
}
.cartolina > div > p { margin-top: 8px; padding-inline: 4px; color: var(--testo); line-height: 1.5; }
.cartolina > div .cartolina__titolo { font-size: 1.45rem; }   /* h2 nella serie delle mete, h3 in quella delle altre mete */
@media (hover: hover) and (pointer: fine) {
  .cartolina > div:hover { transform: rotate(0deg) translateY(-6px); }
  .cartolina > div:hover .cartolina__foto img { transform: scale(1.05); }
}

/* gli articoli del blog: la foto del diario della home accanto al testo; il secondo con la foto a destra */
figure.diario__foto { margin: 0; }
figure.diario__foto img { aspect-ratio: 16 / 10; }
article.conosci__testo > * + * { margin-top: 14px; }
article.conosci__testo h2 { font-size: clamp(1.7rem, 1.1rem + 1.6vw, 2.5rem); }
article.conosci__testo div > p { font-size: 1.08rem; line-height: 1.6; }
article.conosci__testo div > p + p { margin-top: 10px; }
article.conosci__testo .scheda__dati { gap: 8px; }
article.conosci__testo .scheda__dati li { align-items: flex-start; gap: 12px; line-height: 1.45; }
article.conosci__testo .scheda__dati .icona { width: 22px; height: 22px; color: var(--azzurro); margin-top: 1px; }

/* le chiusure senza modulo: i contatti della home, col titolo più largo e il pulsante */
.contenitore:not(.contatti__griglia) > .contatti__titolo { max-width: 46rem; }
.contatti__titolo .hero__pulsanti { margin-top: 20px; align-items: center; }

/* le due sezioni strette delle pagine dei viaggi: chi accompagna il gruppo e l'organizzazione tecnica */
#accompagna, #nota-tecnica { padding-block: 20px; }
#accompagna .riquadro-incluso { max-width: 860px; }

@media (min-width: 1101px) {
  #articolo-2 .diario__foto { order: 2; }
}
@media (max-width: 1100px) {
  ul.passi__elenco { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  ul.passi__elenco:has(> :nth-child(5)) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  #apertura .conosci__griglia { grid-template-columns: 1fr; gap: 24px; }
  .contenitore:not(.recensioni__riga) > .evidenza__quota,
  .contenitore:not(.recensioni__riga) > .evidenza__quota:has(> :nth-child(3)) { grid-template-columns: 1fr; }
  ul.passi__elenco, ul.passi__elenco:has(> :nth-child(5)) { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: none; gap: 20px; }
}
@media (max-width: 720px) {
  #apertura .conosci__figura > img { width: min(300px, 78%); }
  #apertura .conosci__figura > .conosci__mappamondo { width: min(220px, 60%); }
  #apertura .evidenza__banner { min-height: 0; padding: 120px 20px 26px; flex-direction: column; justify-content: flex-end; align-items: flex-start; border-radius: 22px; }
  #apertura .evidenza__banner::before { background: linear-gradient(180deg, rgba(4, 26, 58, .05) 0%, rgba(4, 26, 58, .55) 38%, rgba(4, 26, 58, .86) 100%); }
  #apertura .evidenza__testo h1 { font-size: clamp(1.6rem, .9rem + 3.4vw, 1.9rem); }
  #apertura .evidenza__sotto { font-size: 1.05rem; }   /* i sottotitoli delle aperture entro 3 righe anche a 360 px */
  ul.passi__elenco, ul.passi__elenco:has(> :nth-child(5)) { grid-template-columns: 1fr; }
  /* i riquadri in-arrivo delle pagine: meno margine dentro, così il testo resta entro 3 righe */
  .recensioni__riga > .in-arrivo, .evidenza__quota > .in-arrivo { padding: 22px 20px; }
  /* il prezzo resta nella frase anche sul telefono: un prezzo a metà frase su una riga sua faceva 4 righe (collaudo, 04/11) */
  .in-arrivo .evidenza__prezzo strong { display: inline; margin-bottom: 0; }
  /* i tre passi della pagina dei contatti hanno frasi più lunghe: l'icona sopra, il testo su tutta la larghezza */
  #tre-passi .passo { flex-direction: column; align-items: flex-start; gap: 10px; }
  #tre-passi .passo p { font-size: 1rem; }
  #tre-passi .passo strong { display: inline; margin-right: .35em; font-size: 1.2rem; }
  .cartoline > li:has(> div) { flex: 0 0 84%; }
}
@media (prefers-reduced-motion: reduce) {
  #apertura .conosci__figura > .itinerario__bussola { animation: none; }
  .cartolina > div:hover { transform: rotate(var(--r)); }
  .cartolina > div:hover .cartolina__foto img { transform: none; }
}

/* ── le pagine dei viaggi passati (tornata del 04/11/2026): sempre e solo i pezzi della home ──────────────────── */
/* «Cosa abbiamo visto»: l'elenco coi dati delle schede, accanto al titolo, una tappa per riga col segnaposto */
.recensioni__riga > .scheda__dati { gap: 10px; font-size: 1.08rem; }
.recensioni__riga > .scheda__dati li { align-items: flex-start; gap: 12px; line-height: 1.45; }
.recensioni__riga > .scheda__dati .icona { width: 22px; height: 22px; color: var(--azzurro); margin-top: 1px; }

/* le foto: la galleria del diario, in griglia (3 per riga da computer, 2 dal telefono), alte 4:5 (voce 6, 05/11). Se
   l'ultima riga resterebbe con una foto sola, la penultima va a capo: le ultime due righe ne hanno 2 */
#foto .diario__galleria { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; align-items: stretch; }
#foto .diario__foto img { aspect-ratio: 4 / 5; height: auto; object-position: 50% 35%; }
#foto .diario__galleria:has(> li:last-child:nth-child(3n+1)) > li:nth-last-child(2) { grid-column-start: 1; }

/* i video delle pagine delle mete: tutti, in griglia (4 per riga da computer, 2 dal telefono), verticali come le storie,
   con la didascalia sotto; se l'ultima riga resterebbe con un video solo, la riga prima ne tiene 3 */
#video .esperienze__riga { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px 18px; overflow: visible;
  scroll-snap-type: none; padding: 0; }
#video .esperienze__voce { flex: none; }
#video .esperienze__media { aspect-ratio: 9 / 16; }
#video .esperienze__riga:has(> li:last-child:nth-child(4n+1)) > li:nth-last-child(2) { grid-column-start: 1; }

/* /viaggi-passati: ogni meta una riga, la cartolina illustrata da una parte e quattro video e foto veri dall'altra; le
   righe si alternano a destra e a sinistra (da telefono la cartolina e sotto la riga che scorre) */
.ricordi .contatti__griglia { gap: 40px; }
.ricordi .contatti__griglia + .contatti__griglia { margin-top: clamp(48px, 5vw, 80px); }
.ricordi .contatti__griglia .esperienze__riga { gap: 14px; padding-bottom: 8px; }
.ricordi .contatti__griglia .esperienze__voce { flex: 0 0 clamp(240px, 21vw, 300px); }   /* alti quanto la cartolina: si scorre */

@media (min-width: 1101px) {
  .ricordi .contatti__griglia:nth-of-type(even) { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); }
  .ricordi .contatti__griglia:nth-of-type(even) > .cartolina { order: 2; }
}
@media (max-width: 720px) {
  #foto .diario__galleria { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; overflow: visible;
    margin-inline: 0; padding: 0; scroll-snap-type: none; }
  #foto .diario__galleria > li,
  #foto .diario__galleria:has(> li:last-child:nth-child(3n+1)) > li:nth-last-child(2) { grid-column: span 3; flex: none; }
  #foto .diario__galleria:has(> li:last-child:nth-child(2n+1)) > li:nth-last-child(-n+3) { grid-column: span 2; }
  #video .esperienze__riga { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px 10px; margin-inline: 0; padding-inline: 0; }
  #video .esperienze__voce { grid-column: span 3; }
  #video .esperienze__riga:has(> li:last-child:nth-child(4n+1)) > li:nth-last-child(2) { grid-column-start: auto; }
  #video .esperienze__riga:has(> li:last-child:nth-child(2n+1)) > li:nth-last-child(-n+3) { grid-column: span 2; }
  #video .esperienze__testo { font-size: .9rem; }
  .ricordi .contatti__griglia .esperienze__voce { flex-basis: 80%; }
}

/* ── 🚀 SALTO DI LIVELLO (6-quater) ────────────────────────────────────────────────────────────────────
   Stessa struttura, stesso copy, stesso kit, stessi colori e caratteri: più aria, titoli che comandano, fondi che
   danno ritmo, una hero quasi a tutto schermo, foto più generose, un piede scuro. La critica: Design/SALTO-DI-LIVELLO.md */
:root {
  --spazio: clamp(60px, 7vw, 104px);
  --ombra-scheda: 0 1px 2px rgba(7, 33, 64, .04), 0 18px 40px -28px rgba(7, 33, 64, .38);
}

/* gli occhielli col trattino della rotta del logo */
.occhiello { display: inline-flex; align-items: center; gap: 12px; font-size: .84rem; letter-spacing: .16em; margin-bottom: 16px; }
.occhiello::before { content: ""; flex: none; width: 30px; border-top: 2px dashed currentColor; opacity: .9; }
.hero .occhiello { letter-spacing: .14em; }

/* titoli: più grandi da computer, interlinea stretta; lo spazio sotto la testa delle sezioni */
h2 { font-size: clamp(1.85rem, 1rem + 2.6vw, 3.4rem); line-height: 1.04; letter-spacing: -.026em; }
.testa-sezione { margin-bottom: clamp(26px, 3vw, 44px); }
.testa-sezione__sotto { margin-top: 12px; }

/* le sezioni: più aria, e i fondi del marchio che danno il ritmo */
.viaggi { padding-top: clamp(104px, 9vw, 150px); }
.passi { background: var(--fondo-azzurro); }
.sezione.domande { padding-block: var(--spazio); }
.sezione.domande:not(#domande) { background: var(--fondo-azzurro); }
.recensioni { background: var(--blu-notte); padding-block: clamp(52px, 5.5vw, 84px); }
.recensioni h2 { color: var(--bianco); }
.recensioni__attesa { border-color: transparent; }
.contatti { padding-block: clamp(56px, 6vw, 92px); }
.nota-centrata { margin-top: 28px; }

/* pulsanti e schede: un filo più morbidi, con profondità quando li si sfiora */
.btn { border-radius: 14px; }
.scheda { border-color: rgba(227, 236, 243, .7); }
.scheda__foto img { aspect-ratio: 16 / 10; }
@media (hover: hover) and (pointer: fine) {
  .btn--azzurro:hover { transform: translateY(-2px); box-shadow: 0 18px 32px -16px rgba(5, 148, 223, .9); }
  .btn--azzurro:hover:active { transform: scale(.97); }
  .scheda:hover { box-shadow: 0 2px 4px rgba(7, 33, 64, .05), 0 30px 56px -30px rgba(7, 33, 64, .5); }
}

/* il piede blu notte, col logo bianco del kit */
.piede { background: var(--blu-notte); border-top: 0; color: rgba(255, 255, 255, .78); padding-top: clamp(48px, 5vw, 72px); }
.piede__motto { color: rgba(255, 255, 255, .86); }
.piede__menu a { color: var(--bianco); }
.piede__menu a + a { border-left-color: rgba(255, 255, 255, .18); }
.piede__menu a:active { color: var(--azzurro); }
.piede__legale { border-top-color: rgba(255, 255, 255, .14); color: rgba(255, 255, 255, .66); }
.thk-link-legali a, .credit a { color: var(--bianco); }
.credit { color: rgba(255, 255, 255, .66); }
@media (hover: hover) and (pointer: fine) { .piede__menu a:hover, .thk-link-legali a:hover, .credit a:hover { color: var(--azzurro); } }

/* da computer e tablet: la hero quasi a tutto schermo, le aperture delle pagine più grandi */
@media (min-width: 721px) {
  .hero {
    display: flex; flex-direction: column; justify-content: center;
    min-height: min(calc(100svh - var(--testata)), 880px);
    padding: clamp(56px, 6vw, 88px) 0 clamp(150px, 13vw, 190px);
  }
  .hero h1 { font-size: clamp(2.6rem, 1.1rem + 4.2vw, 5.1rem); line-height: .98; letter-spacing: -.03em; max-width: 11.5em; }
  .hero__testo { margin-top: 22px; }
  .hero__pulsanti { margin-top: 36px; }
  .hero__ritratto { top: auto; bottom: 0; height: min(94%, 800px); width: auto; right: max(-10px, calc((100% - 1500px) / 2)); }
  .hero__velo {
    background:
      linear-gradient(90deg, rgba(3, 62, 128, .8) 0%, rgba(4, 76, 150, .58) 32%, rgba(4, 76, 150, .16) 56%, rgba(4, 76, 150, 0) 68%),
      linear-gradient(0deg, rgba(3, 42, 96, .34) 0%, rgba(3, 42, 96, 0) 34%),
      linear-gradient(180deg, rgba(3, 42, 96, .30) 0%, rgba(3, 42, 96, 0) 42%);
  }
  .hero__valigia { width: clamp(300px, 30vw, 440px); }

  #apertura.conosci { background: var(--fondo-azzurro); padding-block: clamp(56px, 7vw, 112px); }
  #apertura.conosci h1 { font-size: clamp(2.4rem, 1.1rem + 3.8vw, 4.6rem); line-height: 1; letter-spacing: -.028em; }
  #apertura .conosci__figura > img { width: min(480px, 90%); }
  #apertura .conosci__figura > .itinerario__bussola { width: min(260px, 56%); }
  #apertura .conosci__figura > .conosci__mappamondo { width: min(340px, 70%); }

  #apertura .evidenza__banner { min-height: clamp(440px, 46vw, 620px); }
  #apertura .evidenza__testo h1 { font-size: clamp(2.4rem, 1.1rem + 3.7vw, 4.5rem); line-height: 1; letter-spacing: -.028em; }
  #apertura .evidenza__banner::before {
    background:
      linear-gradient(90deg, rgba(4, 26, 58, .82) 0%, rgba(4, 26, 58, .52) 40%, rgba(4, 26, 58, .1) 72%, rgba(4, 26, 58, 0) 86%),
      linear-gradient(0deg, rgba(4, 26, 58, .62) 0%, rgba(4, 26, 58, 0) 60%);
  }
}
/* la carta del viaggio in evidenza più grande, con la bussola che cresce con lei */
@media (min-width: 1101px) {
  .evidenza__corpo { grid-template-columns: minmax(0, 700px) minmax(0, 1fr); }
  .itinerario__bussola { width: 104px; right: -46px; bottom: -22px; }
}

/* le pagine legali e la 404: più aria, titolo grande, capitoli separati da un filo, la valigia che galleggia */
.pagina { padding-block: clamp(56px, 7vw, 112px); }
.legale h1 { font-size: clamp(2.2rem, 1.2rem + 2.6vw, 3.4rem); letter-spacing: -.026em; }
.legale h2 { margin-top: 2.4em; padding-top: 1.1em; border-top: 1px solid var(--bordo); }
.errore-404 h1 { font-size: clamp(2.2rem, 1.2rem + 3vw, 3.8rem); letter-spacing: -.026em; }
.errore-404 img { animation: valigia-galleggia 3400ms var(--ease-in-out) 600ms infinite alternate; }
.errore-404 .hero__pulsanti { margin-top: 32px; }
@media (prefers-reduced-motion: reduce) { .errore-404 img { animation: none; } }

/* telefoni più stretti (360 px), dopo le regole delle pagine interne perché valgano su quelle */
@media (max-width: 380px) {
  .recensioni__riga > .in-arrivo, .evidenza__quota > .in-arrivo { padding: 16px 12px; }
  .recensioni__riga > .in-arrivo p { font-size: .92rem; }
}

/* secondo giro del 05/11/2026 (voce 6): le foto delle pagine delle mete ognuna nella sua forma, senza tagli, in colonne
   (3 da computer, 2 dal telefono): la cornice 4:5 tagliava le persone ai lati delle foto quadrate e orizzontali */
#foto .diario__galleria { display: block; columns: 3; column-gap: 18px; }
#foto .diario__galleria > li { display: block; break-inside: avoid; margin: 0 0 18px; }
#foto .diario__foto img { aspect-ratio: auto; height: auto; object-position: 50% 50%; }
@media (max-width: 720px) {
  #foto .diario__galleria { display: block; columns: 2; column-gap: 10px; }
  #foto .diario__galleria > li,
  #foto .diario__galleria:has(> li:last-child:nth-child(3n+1)) > li:nth-last-child(2),
  #foto .diario__galleria:has(> li:last-child:nth-child(2n+1)) > li:nth-last-child(-n+3) { margin: 0 0 10px; }
  #foto .diario__foto img,
  #foto .diario__galleria:has(> li:last-child:nth-child(3n+1)) > li:nth-last-child(-n+4) img,
  #foto .diario__galleria:has(> li:last-child:nth-child(3n+2)) > li:nth-last-child(-n+2) img { aspect-ratio: auto; }
}

/* il video di un viaggio (C7), quando il cliente lo carica dal pannello: il testo da una parte, il video verticale
   dall'altra (da telefono il video sotto, largo quanto basta) */
.video-viaggio { margin-bottom: clamp(24px, 3vw, 40px); }
.video-viaggio .esperienze__media { flex: 0 0 clamp(200px, 24vw, 280px); aspect-ratio: 9 / 16; }
@media (max-width: 720px) {
  .video-viaggio .esperienze__media { flex: 1 1 100%; max-width: 320px; margin: 0 auto; }
}