/* Exclusive Journeys — il sito, fedele al design del kit (home-approvata.png), al «salto di livello» del 25/10/2026
   Colori misurati sul design con confronta-design.py --colori e sui pixel delle sezioni 01 e 06.
   Caratteri serviti dal sito: Newsreader (titoli) e Source Sans 3 (testo), da Fontsource (OFL).

   Indice
     1 · basi e variabili          5 · le sezioni della home         9 · il movimento (Emil Kowalski)
     2 · pezzi comuni              6 · il modulo e il calendario    10 · VECCHIO: le pagine interne di prima
     3 · testata e menu            7 · il piede                     11 · tablet e telefono
     4 · hero (l'atlante)          8 · IL SISTEMA DEI COMPONENTI (per tutte le pagine: DESIGN-SYSTEM.md)

   🖼️ Le foto del cliente non si tagliano MAI (Domenico, 25/10/2026): niente object-fit: cover su una foto del
   cliente, ogni cornice ha le proporzioni della sua foto (width/height nell'<img> e height:auto). Si ritagliano
   solo i paesaggi del kit e quelli di ChatGPT (la costa della hero, le mete). */

@font-face {
  font-family: "Newsreader";
  src: url("/assets/fonts/newsreader-latin-opsz-normal.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Newsreader";
  src: url("/assets/fonts/newsreader-latin-opsz-italic.woff2") format("woff2");
  font-weight: 200 800;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Source Sans 3";
  src: url("/assets/fonts/source-sans-3-latin-wght-normal.woff2") format("woff2");
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
}

/* ════════════════════════════════════════════════════════════════════════════════
   1 · BASI E VARIABILI
   ════════════════════════════════════════════════════════════════════════════════ */
[hidden] { display: none !important; }
:root {
  /* fondi (misurati) */
  --fondo: #0A100F;
  --fondo-2: #0D110F;
  --fondo-3: #101616;
  --fondo-profondo: #070B0B;
  --fondo-campo: #0A0F0E;
  /* oro (misurato sui pulsanti, sui titoli e sui link) */
  --oro: #FDCF75;
  --oro-scuro: #DCA44F;
  --oro-testo: #F5D171;
  --oro-spento: #897660;
  --oro-linea: #493B1F;
  --bronzo: #443B34;
  /* testi (misurati) */
  --bianco: #FFFFFF;
  --testo: #D2D6D6;
  --testo-tenue: #B9BDBC;
  --inchiostro: #26221D;

  /* fili e ombre: trasparenze dei colori qui sopra */
  --filo-oro: rgba(245, 209, 113, 0.28);
  --filo-oro-forte: rgba(245, 209, 113, 0.55);
  --filo-oro-tenue: rgba(245, 209, 113, 0.14);
  --linea: rgba(210, 214, 214, 0.12);
  --linea-forte: rgba(210, 214, 214, 0.2);
  --ombra-foto: 0 2px 0 rgba(7, 11, 11, 0.35), 0 44px 80px -40px rgba(7, 11, 11, 0.95), 0 20px 40px -28px rgba(7, 11, 11, 0.7);

  /* caratteri e scala */
  --serif: "Newsreader", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --sans: "Source Sans 3", "Segoe UI", system-ui, -apple-system, sans-serif;
  --t-h1: clamp(2.55rem, 1.35rem + 3.3vw, 4.5rem);
  --t-h2: clamp(2.1rem, 1.25rem + 2.35vw, 3.55rem);
  --t-h3: clamp(1.35rem, 1.15rem + 0.5vw, 1.7rem);
  --t-lead: clamp(1.1rem, 1rem + 0.35vw, 1.3rem);
  --t-corpo: 1.0625rem;

  /* misure e ritmo */
  --larghezza: 1200px;
  --margine: 40px;
  --testata-h: 124px;
  --spazio-sezione: clamp(64px, 6.2vw, 108px);
  --alto-foto: 680px;          /* l'altezza massima di una foto da sola: le verticali non diventano giganti */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
}

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  scroll-behavior: smooth;
  scroll-padding-top: 96px;
  background: var(--fondo);
}
html.menu-aperto { overflow: hidden; }

body {
  margin: 0;
  background: var(--fondo);
  color: var(--testo);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
a, button, summary, select, label { touch-action: manipulation; }
button { font: inherit; color: inherit; }
figure { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
p { margin: 0 0 1em; }
h1, h2, h3 {
  overflow-wrap: break-word;   /* 7-bis (P22): una parola lunghissima va a capo, mai fuori dallo schermo */
  text-wrap: balance;
  font-family: var(--serif);
  font-weight: 400;
  color: var(--bianco);
  margin: 0;
  letter-spacing: -0.015em;
  font-optical-sizing: auto;
}
h1 em, h2 em, h3 em { font-style: italic; color: var(--oro); }
::selection { background: rgba(253, 207, 117, 0.3); color: var(--bianco); }

.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;
}
.salta {
  position: absolute; left: 16px; top: -60px; z-index: 100;
  background: var(--oro); color: var(--inchiostro);
  padding: 10px 16px; border-radius: 4px; font-weight: 600;
}
.salta:focus { top: 12px; }

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

.contenitore {
  width: 100%;
  max-width: calc(var(--larghezza) + 2 * var(--margine));
  margin-inline: auto;
  padding-left: max(var(--margine), env(safe-area-inset-left, 0px));
  padding-right: max(var(--margine), env(safe-area-inset-right, 0px));
}
.contenitore-largo { --larghezza: 1320px; }
.contenitore-stretto { --larghezza: 820px; }

/* ════════════════════════════════════════════════════════════════════════════════
   2 · PEZZI COMUNI
   ════════════════════════════════════════════════════════════════════════════════ */
.occhiello {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.38em;
  text-transform: uppercase;
  color: var(--oro-testo);
  margin: 0 0 20px;
  line-height: 1.5;
}

.ico {
  display: inline-block;
  width: 1em;
  height: 1em;
  flex: none;
  background-color: currentColor;
  -webkit-mask: var(--m) center / contain no-repeat;
  mask: var(--m) center / contain no-repeat;
}
.ico-freccia { --m: url("/assets/img/icone/freccia-diagonale.png"); width: .86em; height: .86em; }
.ico-calendario { --m: url("/assets/img/icone/calendario.png"); }
.ico-piu { --m: url("/assets/img/icone/piu.png"); }
.ico-whatsapp { --m: url("/assets/img/icone/whatsapp.png"); }
.ico-telefono { --m: url("/assets/img/icone/telefono.png"); }
.ico-email { --m: url("/assets/img/icone/email.png"); }
.ico-posizione { --m: url("/assets/img/icone/posizione.png"); }
.ico-chevron { --m: url("/assets/img/icone/chevron-basso.png"); }
.ico-check { --m: url("/assets/img/icone/check.png"); }
.ico-bagaglio { --m: url("/assets/img/icone/bagaglio.png"); }
.ico-bevande { --m: url("/assets/img/icone/bevande.png"); }
.ico-ospiti { --m: url("/assets/img/icone/ospiti.png"); }
.ico-wifi { --m: url("/assets/img/icone/wifi.png"); }
.ico-usb { --m: url("/assets/img/icone/usb.png"); }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 52px;
  padding: 14px 30px;
  border-radius: 3px;
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.015em;
  line-height: 1.1;
  cursor: pointer;
  border: 1px solid transparent;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  transition: transform 160ms var(--ease-out), background-color 200ms ease, color 200ms ease, border-color 200ms ease, box-shadow 200ms ease;
}
.btn:active { transform: scale(0.97); }
.btn-oro {
  background: linear-gradient(100deg, var(--oro) 0%, #F2BF62 55%, var(--oro-scuro) 100%);
  color: var(--inchiostro);
  box-shadow: 0 10px 28px -14px rgba(253, 207, 117, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.35);
}
.btn-contorno {
  background: transparent;
  color: var(--oro-testo);
  border-color: rgba(245, 209, 113, 0.7);
}
@media (hover: hover) and (pointer: fine) {
  .btn-oro:hover { box-shadow: 0 14px 34px -12px rgba(253, 207, 117, 0.75), inset 0 1px 0 rgba(255, 255, 255, 0.35); }
  .btn-contorno:hover { background: rgba(245, 209, 113, 0.08); border-color: var(--oro-testo); }
  .btn:hover .ico-freccia { transform: translate(2px, -2px); }
}
.btn .ico-freccia { transition: transform 200ms var(--ease-out); }
.btn-whatsapp { color: var(--bianco); }
.btn-whatsapp .ico-whatsapp { width: 22px; height: 22px; color: var(--bianco); }

.azioni { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 32px; }

.link-oro {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--oro-testo);
  font-size: 18px;
  line-height: 1.3;
  padding: 4px 0;
  transition: color 200ms ease, transform 140ms var(--ease-out);
}
.link-oro .ico-freccia { transition: transform 200ms var(--ease-out); }
.link-oro:active { color: var(--oro); transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) {
  .link-oro:hover { color: var(--oro); }
  .link-oro:hover .ico-freccia { transform: translate(2px, -2px); }
}
.link-sotto {
  text-decoration: underline;
  text-decoration-color: rgba(245, 209, 113, 0.6);
  text-decoration-thickness: 1px;
  text-underline-offset: 7px;
}
.link-testo {
  color: var(--oro-testo);
  text-decoration: underline;
  text-decoration-color: rgba(245, 209, 113, 0.6);
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  transition: color 200ms ease;
}
.link-testo:active { color: var(--oro); }
@media (hover: hover) and (pointer: fine) {
  .link-testo:hover { color: var(--oro); text-decoration-color: var(--oro); }
}
.sezione-link { margin: 0 0 1em; }

/* le righe di dati a puntini del design («Passo corto · Tetto alto · 5,90 m») */
.dati {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 0;
  font-size: 16px;
  color: var(--testo);
  padding: 14px 0;
  border-top: 1px solid var(--linea);
}
.dati li { display: inline-flex; align-items: center; }
.dati li:not(:last-child)::after {
  content: "";
  width: 3px; height: 3px;
  border-radius: 50%;
  background: var(--oro-spento);
  margin: 0 13px;
}

/* ════════════════════════════════════════════════════════════════════════════════
   3 · TESTATA E MENU
   ════════════════════════════════════════════════════════════════════════════════ */
.testata {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  padding-top: env(safe-area-inset-top, 0px);
  transition: background-color 260ms ease, box-shadow 260ms ease;
}
.testata.is-scorsa {
  background: rgba(10, 16, 15, 0.86);
  -webkit-backdrop-filter: saturate(1.2) blur(14px);
  backdrop-filter: saturate(1.2) blur(14px);
  box-shadow: 0 1px 0 rgba(137, 118, 96, 0.28);
}
.testata-riga {
  display: flex;
  align-items: center;
  gap: 24px;
  height: var(--testata-h);
  max-width: calc(var(--larghezza) + 2 * var(--margine));
  margin-inline: auto;
  padding-left: max(var(--margine), env(safe-area-inset-left, 0px));
  padding-right: max(var(--margine), env(safe-area-inset-right, 0px));
}
.logo { display: block; flex: none; }
.testata .logo img { width: 245px; height: auto; transform-origin: left center; }
@media (min-width: 761px) {
  .testata { transition: transform 420ms var(--ease-out), background-color 260ms ease, box-shadow 260ms ease; }
  .testata.is-scorsa { transform: translateY(-36px); }
  .testata-riga > * { transition: transform 420ms var(--ease-out); }
  .testata.is-scorsa .testata-riga > * { transform: translateY(18px); }
  .testata .logo img { transition: transform 420ms var(--ease-out); }
  .testata.is-scorsa .logo img { transform: scale(0.7); }
}

.menu { margin-left: auto; }
.menu ul { display: flex; align-items: center; gap: 26px; }
.menu a {
  font-size: 15px;
  letter-spacing: 0.01em;
  white-space: nowrap;
  color: var(--bianco);
  padding: 10px 0;
  position: relative;
  -webkit-user-select: none;
  user-select: none;
  transition: color 200ms ease;
}
.menu a::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 4px;
  height: 1px;
  background: var(--oro-testo);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 260ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .menu a:hover::after { transform: scaleX(1); }
}
.menu a[aria-current="page"],
.piede-menu a[aria-current="page"],
.menu-telefono a[aria-current="page"] { color: var(--oro-testo); }
.menu a[aria-current="page"]::after { transform: scaleX(1); }

.testata-azioni { display: flex; align-items: center; gap: 22px; margin-left: 28px; }
.lingue-posto { display: flex; align-items: center; min-height: 44px; }
.lingue-posto:empty { display: none; }
.testata-cta { min-height: 44px; padding: 10px 20px; font-weight: 500; white-space: nowrap; }

.menu-apri {
  display: none;
  width: 44px; height: 44px;
  margin-right: -8px;
  border: 0; background: transparent;
  position: relative;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
  transition: transform 140ms var(--ease-out);
}
.menu-apri:active { transform: scale(0.94); }
.menu-apri span {
  position: absolute; left: 11px; right: 11px;
  height: 1.5px; background: var(--oro-testo);
  transition: transform 300ms var(--ease-in-out);
}
.menu-apri span:first-child { top: 17px; }
.menu-apri span:last-child { top: 26px; }
.menu-apri[aria-expanded="true"] span:first-child { transform: translateY(4.5px) rotate(45deg); }
.menu-apri[aria-expanded="true"] span:last-child { transform: translateY(-4.5px) rotate(-45deg); }

.menu-telefono {
  position: fixed;
  inset: 0;
  z-index: 45;
  height: 100dvh;
  overflow-y: auto;
  overscroll-behavior: contain;
  background:
    url("/assets/img/sfondo-cartografia.webp") center bottom / cover no-repeat,
    var(--fondo);
  padding: calc(96px + env(safe-area-inset-top, 0px)) max(24px, env(safe-area-inset-right, 0px)) calc(32px + env(safe-area-inset-bottom, 0px)) max(24px, env(safe-area-inset-left, 0px));
  opacity: 0;
  transition: opacity 160ms ease;
}
.menu-telefono.aperto { opacity: 1; transition: opacity 300ms var(--ease-out); }
.menu-telefono li,
.menu-telefono .btn,
.menu-telefono-contatto {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 120ms ease, transform 120ms ease;
}
.menu-telefono.aperto li,
.menu-telefono.aperto .btn,
.menu-telefono.aperto .menu-telefono-contatto {
  opacity: 1;
  transform: none;
  transition: opacity 460ms var(--ease-out), transform 460ms var(--ease-out);
  transition-delay: calc(60ms + var(--i, 5) * 50ms);
}
.menu-telefono.aperto .btn:active { transform: scale(0.97); transition: transform 140ms var(--ease-out); transition-delay: 0s; }
.menu-telefono ul { display: grid; gap: 2px; margin-bottom: 32px; }
.menu-telefono ul a {
  display: block;
  font-family: var(--serif);
  font-size: 32px;
  font-weight: 350;
  color: var(--bianco);
  padding: 10px 0;
  border-bottom: 1px solid rgba(137, 118, 96, 0.25);
}
.menu-telefono ul a:active { color: var(--oro-testo); }
.menu-telefono .btn { width: 100%; }
.menu-telefono-contatto { display: block; margin-top: 22px; text-align: center; color: var(--oro-testo); font-size: 18px; }

/* ════════════════════════════════════════════════════════════════════════════════
   4 · HERO: L'ATLANTE DELLA SICILIA (come il design)
   ════════════════════════════════════════════════════════════════════════════════ */
.hero {
  position: relative;
  overflow: hidden;
  padding-top: calc(var(--testata-h) + 14px + env(safe-area-inset-top, 0px));
  background:
    radial-gradient(ellipse 60% 45% at 50% 42%, rgba(68, 59, 52, 0.28), transparent 70%),
    url("/assets/img/sfondo-cartografia.webp") center top / cover no-repeat,
    var(--fondo);
  isolation: isolate;
}
.hero-sfondo { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.hero-sfondo::before {
  content: "";
  position: absolute;
  left: 50%; top: 56%;
  width: min(1320px, 130vw); aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 1px solid rgba(137, 118, 96, 0.22);
  box-shadow: inset 0 0 0 46px rgba(10, 16, 15, 0), inset 0 0 0 47px rgba(137, 118, 96, 0.1);
}
.hero-coord,
.hero-mare {
  position: absolute;
  font-family: var(--serif);
  font-size: 13px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(185, 189, 188, 0.42);
  line-height: 1.5;
}
.hero-margini { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.hero-coord { letter-spacing: 0.12em; top: 30%; }
.hero-coord::after {
  content: "";
  position: absolute; top: 50%;
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--oro-spento);
}
.hero-coord-n { left: max(calc(50% - 50vw + 28px), calc(50% - 680px)); }
.hero-coord-n::after { left: 0; top: -22px; }
.hero-coord-e { right: max(calc(50% - 50vw + 28px), calc(50% - 680px)); }
.hero-coord-e::after { right: 0; top: -22px; }
.hero-mare-tirreno { right: max(40px, calc(50% - 650px)); top: 136px; text-align: center; }
.hero-mare-med { left: max(calc(50% - 50vw + 28px), calc(50% - 680px)); top: 62%; text-align: center; }

.hero-testo { text-align: center; position: relative; z-index: 3; }
.hero-testo .occhiello { margin-bottom: 22px; }
.hero h1 {
  font-size: clamp(2.9rem, 1.2rem + 5.4vw, 6.6rem);
  line-height: 0.98;
  letter-spacing: -0.022em;
  font-weight: 400;
  color: var(--bianco);
  text-shadow: 0 2px 30px rgba(7, 11, 11, 0.6);
}
.hero h1 em {
  font-style: italic;
  color: var(--oro);
  font-weight: 400;
  padding-right: 0.04em;
}
.hero h1 .crema { color: #FFFBE2; } /* «around»: crema misurato sui pixel del titolo (#FFFFE4-#FFFEDF), troppo pochi per la palette */
.hero-sotto {
  font-size: clamp(1.08rem, 0.9rem + 0.7vw, 1.5rem);
  color: var(--bianco);
  max-width: 760px;
  margin: 24px auto 30px;
  text-wrap: balance;
}

.hero-atlante {
  position: relative;
  z-index: 2;
  width: min(940px, 100% - 2 * var(--margine));
  margin: 46px auto 0;
}
.atlante {
  position: relative;
  aspect-ratio: 1178 / 810;
}
.strato { position: absolute; height: auto; max-width: none; pointer-events: none; }
.strato-base { filter: drop-shadow(0 0 22px rgba(253, 207, 117, 0.16)); }
.strato-alone {
  display: block;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(7, 11, 11, 0.86) 0%, rgba(7, 11, 11, 0.62) 48%, rgba(7, 11, 11, 0) 100%);
}
.strato-etna {
  filter: brightness(1.35) saturate(1.15) drop-shadow(0 0 1px rgba(7, 11, 11, 1)) drop-shadow(0 0 4px rgba(253, 207, 117, 0.55));
}

.atlante-nota {
  position: absolute;
  left: 97%;
  top: 44.4%;
  display: flex;
  align-items: center;
  transform: translateY(-50%);
}
.atlante-nota-linea {
  position: absolute;
  left: 76.8%;
  width: 20.4%;
  top: 44.4%;
  height: 1px;
  background: linear-gradient(90deg, rgba(245, 209, 113, 0.35), rgba(245, 209, 113, 0.85));
}
.atlante-nota-linea::before {
  content: "";
  position: absolute;
  left: -2px; top: -2px;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--oro-testo);
}
.atlante-nota p {
  margin: 0;
  width: 168px;
  padding: 10px 14px 12px;
  border: 1px solid rgba(245, 209, 113, 0.55);
  border-radius: 4px;
  background: rgba(10, 16, 15, 0.82);
  font-size: 14px;
  line-height: 1.35;
  color: var(--bianco);
}
.atlante-nota-titolo {
  display: block;
  font-size: 11px;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--oro-testo);
  margin-bottom: 4px;
}

/* la costa al tramonto è un paesaggio del kit: si può ritagliare (PIANO-IMMAGINI, regola 1) */
.hero-costa {
  position: relative;
  z-index: 1;
  margin-top: -22%;
  pointer-events: none;
}
/* la hero finisce sempre sfumando nel fondo: la costa scorre in giù (profondità) e senza questo velo il bordo della
   hero la tagliava netta (26/10/2026) */
.hero::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: clamp(140px, 16vw, 260px);
  z-index: 3;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(10, 16, 15, 0) 0%, rgba(10, 16, 15, 0.82) 62%, var(--fondo) 100%);
}
.hero-costa img {
  width: 100%;
  height: clamp(320px, 52vw, 820px);
  object-fit: cover;
  object-position: center 62%;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 42%, #000 82%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 42%, #000 82%, transparent 100%);
}

/* ════════════════════════════════════════════════════════════════════════════════
   5 · LE SEZIONI DELLA HOME
   ════════════════════════════════════════════════════════════════════════════════ */

/* ── introduzione: i 4 rimandi e i porti ─────────────────────────────────────── */
.intro {
  position: relative;
  overflow-x: clip;
  text-align: center;
  padding: clamp(64px, 7vw, 112px) 0 64px;
  z-index: 2;
}
/* 26/10/2026 · «un effetto nuova pagina staccato»: l'introduzione parte sotto la hero, mai sopra il bordo della foto,
   e si apre col filetto d'oro, come un capitolo nuovo */
.intro .intro-filetto { width: 160px; margin: 0 auto clamp(36px, 4vw, 52px); }
.intro h2 {
  font-size: clamp(2rem, 1.1rem + 2.7vw, 3.55rem);
  line-height: 1.08;
}
.intro-testo {
  font-size: var(--t-lead);
  color: var(--testo);
  margin: 20px auto 4px;
  max-width: 820px;
  text-wrap: balance;
}
.intro-testo-2 { margin: 0 auto 32px; }
.rimandi {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  row-gap: 8px;
}
.rimandi li { display: flex; align-items: center; }
.rimandi li + li::before {
  content: "";
  width: 1px; height: 22px;
  background: linear-gradient(180deg, transparent, var(--oro-testo), transparent);
  margin: 0 34px;
  opacity: .85;
}
.rimandi .link-oro { position: relative; }
.rimandi .link-oro::after {
  content: "";
  position: absolute;
  left: 0; right: 26px; bottom: 0;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 280ms var(--ease-out);
}
.rimandi .link-oro:focus-visible::after { transform: scaleX(1); }
@media (hover: hover) and (pointer: fine) {
  .rimandi .link-oro:hover::after { transform: scaleX(1); }
}
.filo {
  margin: 10px 0 -10px;
  pointer-events: none;
  opacity: .9;
}
.filo img { width: 100%; height: auto; }
.porti {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  font-size: 16px;
  color: var(--testo-tenue);
  gap: 4px 0;
}
.porti li { display: inline-flex; align-items: center; }
.porti li + li::before {
  content: "";
  width: 3px; height: 3px; border-radius: 50%;
  background: var(--testo-tenue);
  margin: 0 14px;
}

/* ── i servizi: una scheda per pagina, coi simboli d'oro del kit ───────────────── */
.servizi-home { position: relative; padding: calc(var(--spazio-sezione) * 0.45) 0 calc(var(--spazio-sezione) * 0.85); }

/* ── il veicolo: testo a sinistra, la foto INTERA a destra ─────────────────────── */
.veicolo { position: relative; padding: var(--spazio-sezione) 0; overflow-x: clip; }
.veicolo-griglia {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(40px, 5.5vw, 88px);
  align-items: center;
}
.veicolo-testo { max-width: 480px; }
.veicolo h2,
.accesso h2,
.esperienze h2 {
  font-size: var(--t-h2);
  line-height: 1.03;
  margin-bottom: 24px;
}
.veicolo-intro { font-size: var(--t-lead); color: var(--testo); margin-bottom: 24px; }
.veicolo .dati-comfort { margin-bottom: 20px; border-bottom: 1px solid var(--linea); }
.veicolo-paratia { font-size: 17px; margin-bottom: 26px; }
.veicolo-foto { --alto: 600px; justify-self: end; margin: 0; }

/* ── l'accessibilità: la foto delle rampe INTERA, verticale, a sinistra ─────────── */
.accesso { position: relative; padding: calc(var(--spazio-sezione) * 0.6) 0 calc(var(--spazio-sezione) * 0.8); overflow-x: clip; isolation: isolate; }
.accesso::before,
.accesso::after {
  content: "";
  position: absolute;
  z-index: -1;
  width: min(62vw, 980px);
  aspect-ratio: 2200 / 146;
  background: url("/assets/img/filo-del-viaggio.webp") center / 100% auto no-repeat;
  pointer-events: none;
}
.accesso::before { left: -22vw; top: 6px; transform: rotate(-3deg); }
.accesso::after { right: -24vw; top: 22px; transform: scaleX(-1) rotate(-4deg); }
.accesso-griglia {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(40px, 6vw, 96px);
  align-items: center;
}
.accesso-foto { --alto: 540px; justify-self: start; margin: 0; }
.accesso-testo {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}
.accesso-simbolo { width: 64px; height: 64px; margin-top: -6px; }
.accesso-testo p:not(.occhiello) { font-size: 17.5px; }
.accesso-posti { margin-bottom: 26px; padding: 18px 0 2px; border-top: 1px solid var(--linea); }
.accesso-testo .accesso-posti p { font-size: 16.5px; margin: 0 0 8px; color: var(--testo); }

/* ── le esperienze: il testo e la foto della cantina, mai più larga di 420 px ──── */
.esperienze { position: relative; padding: var(--spazio-sezione) 0 calc(var(--spazio-sezione) * 0.8); }
.esperienze-griglia {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(40px, 6vw, 96px);
  align-items: center;
}
.esperienze-testo { max-width: 560px; }
.esperienze-titolo { display: flex; align-items: flex-start; gap: 18px; }
.esperienze-simbolo { width: 76px; height: auto; margin-top: -4px; }
.esperienze-testo > p:not(.occhiello) { font-size: 17.5px; }
.esperienze-testo .sezione-link { margin-bottom: 24px; }
.esperienze-prova { font-size: 16px !important; color: var(--testo); margin-bottom: 6px; padding-top: 20px; border-top: 1px solid var(--linea); }
.esperienze-foto { justify-self: end; margin: 0; }   /* 7-bis (M1): --largo dalla foto, nella pagina */
.dati-occasioni { border-top: 0; padding-top: 4px; }
.thk-nota-foto {
  margin: 40px 0 0;
  font-size: 12.5px;
  line-height: 1.45;
  color: rgba(185, 189, 188, 0.75);
  max-width: 520px;
}

/* ════════════════════════════════════════════════════════════════════════════════
   6 · IL MODULO E IL CALENDARIO
   ════════════════════════════════════════════════════════════════════════════════ */
.richiesta { position: relative; padding: var(--spazio-sezione) 0 calc(var(--spazio-sezione) * 0.75); text-align: center; }
.richiesta h2 {
  font-size: clamp(1.95rem, 1.1rem + 2.4vw, 3.35rem);
  line-height: 1.08;
}
.richiesta-sotto { font-size: var(--t-lead); color: var(--testo); margin: 14px auto 40px; max-width: 760px; text-wrap: balance; }

.modulo { max-width: 1080px; margin: 0 auto; text-align: left; }
.modulo-griglia {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px 24px;
}
.campo { position: relative; min-width: 0; }
.campo-largo { grid-column: 1 / -1; }
.campo input,
.campo select,
.preferenze summary {
  width: 100%;
  min-height: 56px;
  padding: 14px 18px;
  font-family: var(--sans);
  font-size: 16px;
  color: var(--bianco);
  background: var(--fondo-campo);
  border: 1px solid var(--linea-forte);
  border-radius: 3px;
  transition: border-color 200ms ease, background-color 200ms ease;
  color-scheme: dark;
}
.campo input::placeholder { color: var(--testo); opacity: 1; }
.campo input:focus,
.campo select:focus,
.preferenze summary:focus-visible {
  outline: none;
  border-color: var(--oro-testo);
  background: var(--fondo-3);
}
@media (hover: hover) and (pointer: fine) {
  .campo input:hover, .campo select:hover, .preferenze summary:hover, .campo-date-apri:hover { border-color: rgba(245, 209, 113, 0.4); }
}
.campo-etichetta {
  position: absolute;
  left: 19px;
  top: 28px;
  transform: translateY(-50%);
  font-size: 16px;
  line-height: 1;
  color: var(--testo);
  pointer-events: none;
}
.campo input:not(:placeholder-shown) + .campo-etichetta { visibility: hidden; }
.campo-obbligo { color: #E05A4E; margin-left: 2px; }
.campo-errore {
  margin: 6px 2px 0;
  font-size: 14px;
  color: #F2A097;
}
.campo-aiuto { margin: 6px 2px 0; font-size: 14px; color: var(--testo-tenue); }
.preferenze-riga { display: grid; gap: 6px; font-size: 16px; color: var(--testo); }
.preferenze-riga input { min-height: 48px; }
.preferenze-canale { display: flex; flex-wrap: wrap; gap: 10px 28px; margin: 0; padding: 0; border: 0; }
.preferenze-canale legend { width: 100%; padding: 0; margin-bottom: 8px; font-size: 16px; color: var(--testo); }
.campo input[aria-invalid="true"] { border-color: #E05A4E; }

.campo-scelta select {
  -webkit-appearance: none;
  appearance: none;
  padding-right: 44px;
  cursor: pointer;
}
.campo-scelta::after {
  content: "";
  position: absolute;
  right: 18px; top: 20px;
  width: 16px; height: 16px;
  background: var(--testo);
  -webkit-mask: url("/assets/img/icone/chevron-basso.png") center / contain no-repeat;
  mask: url("/assets/img/icone/chevron-basso.png") center / contain no-repeat;
  pointer-events: none;
}
.campo-scelta select:invalid,
.campo-scelta select.vuoto { color: var(--testo); }
.campo select option { background: var(--fondo); color: var(--bianco); }

.campo-date-apri {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  min-height: 56px;
  padding: 14px 18px;
  font-family: var(--sans);
  font-size: 16px;
  text-align: left;
  color: var(--testo);
  background: var(--fondo-campo);
  border: 1px solid var(--linea-forte);
  border-radius: 3px;
  cursor: pointer;
  transition: border-color 200ms ease, background-color 200ms ease;
  -webkit-user-select: none;
  user-select: none;
}
.campo-date-apri:focus-visible,
.campo-date-apri[aria-expanded="true"] { outline: none; border-color: var(--oro-testo); background: var(--fondo-3); }
.campo-date-apri.scelte { color: var(--bianco); }
.campo-date .ico-calendario { color: var(--testo); width: 18px; height: 18px; }
.calendario {
  position: absolute;
  z-index: 20;
  top: calc(100% + 6px);
  right: 0;
  width: 336px;
  max-width: 100%;
  padding: 14px 14px 12px;
  background: var(--fondo-3);
  border: 1px solid rgba(245, 209, 113, 0.45);
  border-radius: 4px;
  box-shadow: 0 24px 50px -20px rgba(0, 0, 0, 0.8);
  transform-origin: top right;
  animation: calendario-entra 180ms var(--ease-out);
}
@keyframes calendario-entra { from { opacity: 0; transform: translateY(-4px) scale(0.98); } }
.calendario-testa { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.calendario-mese { margin: 0; font-family: var(--serif); font-size: 19px; color: var(--bianco); text-transform: capitalize; }
.calendario-freccia {
  width: 40px; height: 40px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid rgba(210, 214, 214, 0.18);
  border-radius: 3px;
  background: transparent;
  color: var(--oro-testo);
  cursor: pointer;
}
.calendario-freccia .ico { width: 14px; height: 14px; }
.calendario-prima .ico { transform: rotate(90deg); }
.calendario-dopo .ico { transform: rotate(-90deg); }
.calendario-freccia:disabled { opacity: .3; cursor: default; }
.calendario-freccia:not(:disabled):active { transform: scale(0.95); }
.calendario-settimana,
.calendario-giorni { display: grid; grid-template-columns: repeat(7, 1fr); }
.calendario-settimana span { text-align: center; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--testo-tenue); padding: 4px 0 6px; }
.calendario-giorni button {
  aspect-ratio: 1;
  min-height: 40px;
  border: 0;
  border-radius: 3px;
  background: transparent;
  color: var(--bianco);
  font-family: var(--sans);
  font-size: 15px;
  cursor: pointer;
  transition: background-color 150ms ease, color 150ms ease;
}
.calendario-giorni button:disabled { color: rgba(185, 189, 188, 0.3); cursor: default; }
.calendario-giorni button.oggi { box-shadow: inset 0 0 0 1px rgba(245, 209, 113, 0.45); }
.calendario-giorni button.in-mezzo { background: rgba(245, 209, 113, 0.14); border-radius: 0; }
.calendario-giorni button.inizio,
.calendario-giorni button.fine { background: var(--oro); color: var(--inchiostro); font-weight: 600; }
.calendario-giorni button:not(:disabled):active { transform: scale(0.94); }
@media (hover: hover) and (pointer: fine) {
  .calendario-giorni button:not(:disabled):not(.inizio):not(.fine):hover { background: rgba(245, 209, 113, 0.22); }
  .calendario-freccia:not(:disabled):hover { border-color: var(--oro-testo); }
}

.preferenze summary {
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  list-style: none;
  color: var(--testo);
  -webkit-user-select: none;
  user-select: none;
}
.preferenze summary::-webkit-details-marker { display: none; }
.preferenze summary .ico-piu { width: 13px; height: 13px; color: var(--oro-testo); transition: transform 260ms var(--ease-out); }
.preferenze[open] summary .ico-piu { transform: rotate(45deg); }
.preferenze[open] summary { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.preferenze-corpo {
  display: grid;
  gap: 14px;
  padding: 18px 18px 20px;
  border: 1px solid var(--linea-forte);
  border-top: 0;
  border-radius: 0 0 3px 3px;
  background: var(--fondo-campo);
}
.spunta { display: flex; align-items: flex-start; gap: 12px; cursor: pointer; font-size: 16px; color: var(--testo); line-height: 1.4; }
.spunta input {
  width: 20px; height: 20px; min-height: 0;
  margin: 1px 0 0; padding: 0; flex: none;
  accent-color: var(--oro);
}
.preferenze-seggiolini { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font-size: 16px; color: var(--testo); }
.preferenze-seggiolini input { min-height: 44px; }
.preferenze-seggiolini input[type="number"] { width: 84px; }
.preferenze-seggiolini input[type="text"] { flex: 1 1 200px; width: auto; }
.preferenze-carrozzina { display: grid; gap: 10px; margin: 0; padding: 4px 0 0 32px; border: 0; }

.modulo-azioni {
  display: flex;
  justify-content: center;
  gap: 18px;
  margin-top: 32px;
}
.modulo-azioni .btn { min-width: 230px; min-height: 54px; }
.modulo-esito { text-align: center; margin: 16px 0 0; min-height: 1px; font-size: 16px; color: var(--oro-testo); }
.modulo-esito:empty { margin: 0; }
.modulo-privacy {
  text-align: center;
  font-size: 13.5px;
  color: var(--testo-tenue);
  margin: 16px auto 0;
}
.modulo-privacy a { color: var(--oro-testo); text-decoration: underline; text-underline-offset: 3px; }

.contatti {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 14px 64px;
  margin-top: 44px;
  padding-top: 32px;
  border-top: 1px solid var(--linea);
  font-size: 18px;
  color: var(--bianco);
}
.contatti a,
.contatti-luogo { display: inline-flex; align-items: center; gap: 14px; padding: 6px 0; transition: color 200ms ease, transform 140ms var(--ease-out); }
.contatti .ico { width: 24px; height: 24px; color: var(--oro); transition: transform 260ms var(--ease-out); }
.contatti a:active { color: var(--oro-testo); transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) {
  .contatti a:hover { color: var(--oro-testo); }
  .contatti a:hover .ico { transform: translateY(-2px); }
}

/* ════════════════════════════════════════════════════════════════════════════════
   7 · IL PIEDE
   ════════════════════════════════════════════════════════════════════════════════ */
.piede {
  background: var(--fondo);
  padding: 0 0 28px;
}
.piede-riga {
  display: flex;
  align-items: center;
  gap: 40px;
  padding: 36px 0 30px;
  border-top: 1px solid var(--oro-linea);
}
.piede-logo img { width: 245px; }
.piede-menu ul { display: flex; flex-wrap: wrap; gap: 8px 26px; }
.piede-menu a { font-size: 15px; color: var(--bianco); padding: 6px 0; white-space: nowrap; transition: color 200ms ease; }
.piede-menu a:active { color: var(--oro-testo); }
@media (hover: hover) and (pointer: fine) {
  .piede-menu a:hover { color: var(--oro-testo); }
}
.piede-diritti {
  margin: 0 0 0 auto;
  padding-left: 24px;
  border-left: 1px solid rgba(137, 118, 96, 0.4);
  max-width: 270px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--testo-tenue);
}
.piede-legale {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 26px;
  padding-top: 16px;
  border-top: 1px solid rgba(137, 118, 96, 0.18);
  font-size: 13.5px;
  color: var(--testo-tenue);
}
.piede-legale p { margin: 0; }
.piede-link { display: flex; gap: 20px; }
.piede-link a { padding: 4px 0; text-decoration: underline; text-decoration-color: rgba(185, 189, 188, 0.4); text-underline-offset: 3px; }
.credit { margin-left: auto !important; }
.credit a { color: var(--oro-testo); }

.barra-telefono { display: none; }

/* pagine legali e 404 */
.pagina-semplice {
  padding: calc(var(--testata-h) + 48px + env(safe-area-inset-top, 0px)) 0 80px;
  background:
    url("/assets/img/sfondo-cartografia.webp") center top / cover no-repeat,
    var(--fondo);
  min-height: 70vh;
}
.legale { max-width: 780px; }
.legale h1 { font-size: clamp(2.2rem, 1.4rem + 2.4vw, 3.4rem); line-height: 1.08; margin-bottom: 12px; }
.legale h2 { font-size: 1.6rem; margin: 2.1em 0 .6em; }
.legale p, .legale li { font-size: 17px; color: var(--testo); }
.legale ul { list-style: disc; padding-left: 1.3em; margin: 0 0 1em; }
.legale li { margin-bottom: .45em; }
.legale a { color: var(--oro-testo); text-decoration: underline; text-underline-offset: 3px; }
.legale table { width: 100%; border-collapse: collapse; margin: 0 0 1.4em; font-size: 15px; }
.legale th, .legale td { text-align: left; vertical-align: top; padding: 10px 12px; border-bottom: 1px solid rgba(137, 118, 96, 0.3); color: var(--testo); }
.legale th { color: var(--bianco); font-weight: 600; }
.tabella-scorre { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.non-trovata { text-align: center; max-width: 680px; }
.non-trovata h1 { font-size: clamp(2.4rem, 1.4rem + 3vw, 4rem); margin-bottom: 16px; }
.non-trovata p { font-size: 18px; }
.non-trovata-azioni { display: flex; justify-content: center; flex-wrap: wrap; gap: 14px; margin-top: 28px; }
.non-trovata-bussola { width: 110px; margin: 0 auto 26px; }

/* ════════════════════════════════════════════════════════════════════════════════
   8 · IL SISTEMA DEI COMPONENTI — per tutte le pagine (Modifiche/2026-10-25 …/DESIGN-SYSTEM.md)
   Ogni componente ha un pezzo di HTML d'esempio nel DESIGN-SYSTEM. Le foto: sempre .foto > .foto-cornice > img,
   con width e height veri nell'<img> e, nelle righe, style="--r: LARGHEZZA/ALTEZZA" sulla .foto.
   ════════════════════════════════════════════════════════════════════════════════ */

/* ── occhiello numerato come la brochure («01 / Il veicolo») ───────────────────── */
.occhiello-numerato { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0; }
.occhiello-numero { font-family: var(--serif); font-style: italic; font-size: 15px; letter-spacing: 0.04em; text-transform: none; color: var(--oro); }
.occhiello-numero::after { content: "/"; display: inline-block; margin: 0 0.75em 0 0.6em; font-style: normal; color: var(--oro-spento); }
.centrato .occhiello-numerato,
.occhiello-numerato.centrato { justify-content: center; }

/* ── filetti d'oro ─────────────────────────────────────────────────────────────── */
.filetto {
  display: block;
  border: 0;
  height: 1px;
  margin: 0;
  background: linear-gradient(90deg, transparent, var(--filo-oro-forte) 18%, var(--filo-oro-forte) 82%, transparent);
}
.filetto-rombo { position: relative; overflow: visible; }
.filetto-rombo::after {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 7px; height: 7px;
  background: var(--oro);
  transform: translate(-50%, -50%) rotate(45deg);
  box-shadow: 0 0 0 6px var(--fondo);
}
.filetto-corto { width: 72px; margin-inline: auto; background: var(--oro-testo); opacity: .7; }

/* ── sezioni e testate di sezione ──────────────────────────────────────────────── */
.sezione { position: relative; padding-block: var(--spazio-sezione); }
.sezione-stretta { padding-block: calc(var(--spazio-sezione) * 0.6); }
.sezione-tono {
  background: linear-gradient(180deg, var(--fondo) 0%, var(--fondo-3) 14%, var(--fondo-3) 86%, var(--fondo) 100%);
}
.sezione-carta {
  background:
    radial-gradient(ellipse 55% 60% at 50% 50%, rgba(68, 59, 52, 0.26), transparent 70%),
    url("/assets/img/sfondo-cartografia.webp") center / cover no-repeat,
    var(--fondo);
}
/* :where() = specificità zero: le classi dei componenti (occhiello, didascalia, schede…) vincono sempre */
:where(.sezione, .sezione-testa) h2 { font-size: var(--t-h2); line-height: 1.05; }
:where(.sezione) h3 { font-size: var(--t-h3); line-height: 1.2; margin-bottom: 10px; }
:where(.sezione) p { font-size: var(--t-corpo); line-height: 1.72; color: var(--testo); }
.sezione-testa { max-width: 780px; margin: 0 auto clamp(40px, 4.5vw, 64px); text-align: center; }
.sezione-testa h2 { margin-bottom: 0; }
.sezione-testa p:not(.occhiello) { font-size: var(--t-lead); color: var(--testo); margin: 18px auto 0; max-width: 680px; text-wrap: balance; }
.sezione-testa-sinistra { margin-left: 0; text-align: left; }
.sezione-testa-sinistra p:not(.occhiello) { margin-left: 0; }
.testo-lead { font-size: var(--t-lead); line-height: 1.6; color: var(--bianco); }
.misura { max-width: 64ch; }
.centrato { text-align: center; }
.intero { white-space: nowrap; }   /* «Mercedes-Benz», «+39 329 615 9238»: non vanno a capo nel trattino o negli spazi */
.centrato .azioni { justify-content: center; }

/* ── testata di pagina: divisa (testo + foto in cornice), sopra (foto larga sotto), solo testo col simbolo ── */
.testa-pagina {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: calc(var(--testata-h) + 40px + env(safe-area-inset-top, 0px)) 0 calc(var(--spazio-sezione) * 0.85);
  background:
    radial-gradient(ellipse 50% 60% at 78% 45%, rgba(68, 59, 52, 0.3), transparent 70%),
    url("/assets/img/sfondo-cartografia.webp") center top / cover no-repeat,
    var(--fondo);
}
.testa-pagina::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0; height: 120px; z-index: -1;
  background: linear-gradient(180deg, rgba(10, 16, 15, 0), var(--fondo));
  pointer-events: none;
}
.testa-pagina h1 {
  font-size: var(--t-h1);
  line-height: 1.02;
  letter-spacing: -0.02em;
  margin-bottom: 24px;
}
.testa-sotto { font-size: var(--t-lead); color: var(--testo); max-width: 560px; margin-bottom: 0; line-height: 1.6; }
.testa-griglia {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(40px, 6vw, 96px);
  align-items: center;
}
.testa-testo { max-width: 600px; }
.testa-foto { --alto: min(70vh, 620px); justify-self: end; margin: 0; }
.testa-sopra .testa-testo { max-width: 880px; margin-bottom: clamp(40px, 5vw, 64px); }
.testa-sopra .testa-sotto { max-width: 680px; }
.testa-simbolo { text-align: center; padding-bottom: calc(var(--spazio-sezione) * 0.7); }
.testa-simbolo .testa-testo { max-width: 820px; margin: 0 auto; }
.testa-simbolo .testa-sotto { margin-inline: auto; max-width: 640px; }
.testa-simbolo .occhiello-numerato { justify-content: center; }
.testa-simbolo .azioni { justify-content: center; }
.testa-simbolo-img {
  width: clamp(112px, 10vw, 150px);
  height: auto;
  margin: 0 auto 30px;
  filter: drop-shadow(0 18px 40px rgba(253, 207, 117, 0.18));
}

/* ── la foto: cornice con le proporzioni della foto, filo d'oro sottile, ombra morbida; mai tagliata ──────
   --r = larghezza/altezza della foto (serve nelle righe e per l'altezza massima)
   --alto = altezza massima (le verticali non diventano giganti) · --largo = larghezza massima (foto piccole) */
.foto {
  position: relative;
  width: min(100%, calc(var(--alto, var(--alto-foto)) * var(--r, 1)));
  max-width: var(--largo, 100%);
}
:where(.foto) { margin: 0 auto; }   /* centrata da sola; nelle griglie la mette al suo posto justify-self */
.foto-cornice {
  position: relative;
  border: 1px solid var(--filo-oro);
  border-radius: 2px;
  background: var(--fondo-3);
  box-shadow: var(--ombra-foto);
  transition: border-color 260ms ease;
}
.foto-cornice img,
.foto-cornice picture { display: block; width: 100%; height: auto; }
.foto-cornice img { border-radius: 1px; }
/* il secondo filo, spostato in basso a destra: il dettaglio d'oro delle foto principali */
.cornice-eco { isolation: isolate; }
.cornice-eco::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 16px -16px -16px 16px;
  border: 1px solid rgba(245, 209, 113, 0.22);
  border-radius: 2px;
  pointer-events: none;
  transition: transform 420ms var(--ease-out), border-color 260ms ease;
}
/* col mouse: il filo si accende e il secondo filo si avvicina alla foto (la foto resta intera, mai ingrandita) */
@media (hover: hover) and (pointer: fine) {
  .foto:hover .foto-cornice { border-color: var(--filo-oro-forte); }
  .foto:hover .cornice-eco::before { transform: translate(-6px, -6px); border-color: rgba(245, 209, 113, 0.4); }
}

/* la didascalia nello stile della brochure: etichetta piccola maiuscola dorata, poi una riga */
.didascalia {
  margin-top: 16px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--testo);
  max-width: 52ch;
}
.cornice-eco + .didascalia { margin-top: 30px; }
.didascalia-titolo {
  display: block;
  margin-bottom: 4px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--oro-testo);
}
.didascalia-sola .didascalia-titolo { margin-bottom: 0; }

/* righe di 2 o 3 foto affiancate con le proporzioni vere: stessa altezza, al massimo ~640 px */
.riga-foto {
  --gap-foto: 24px;
  --alto-riga: 640px;
  display: flex;
  align-items: flex-start;
  gap: var(--gap-foto);
  max-width: calc(var(--alto-riga) * var(--somma, 100) + (var(--n, 3) - 1) * var(--gap-foto));
  margin: 0 auto;
}
.riga-foto > .foto {
  flex: 1 1 0%;
  flex-grow: calc(var(--r, 1));
  width: auto;
  max-width: var(--largo, none);   /* 7-bis (M1): mai più larga della sua larghezza / 1,5 */
  min-width: 0;
  margin: 0;
}
.riga-foto + .riga-foto { margin-top: 44px; }

/* la figura panoramica larga (le foto 2000 × 900) */
.foto-panoramica { width: 100%; max-width: none; }

/* ── la sezione editoriale a due colonne ───────────────────────────────────────── */
.editoriale {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(36px, 6vw, 104px);
  align-items: start;
}
.editoriale-testa h2 { margin-bottom: 0; }
.editoriale-corpo > :last-child { margin-bottom: 0; }
.editoriale-corpo p + p { margin-top: -0.2em; }
.editoriale-foto { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; }
.editoriale-foto .foto { --alto: 620px; justify-self: center; }
.editoriale-inverso > :first-child { order: 2; }
.editoriale-testo h2 { margin-bottom: 22px; }
.editoriale-testo > :last-child { margin-bottom: 0; }

/* ── la fascia dei dati tecnici ────────────────────────────────────────────────── */
.dati-tecnici {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  border-top: 1px solid var(--filo-oro);
  border-bottom: 1px solid var(--filo-oro);
}
.dati-tecnici li { padding: 34px 26px 30px; border-left: 1px solid var(--linea); }
.dati-tecnici li:first-child { border-left: 0; }
.dato-valore {
  display: block;
  font-family: var(--serif);
  font-size: clamp(2.5rem, 1.9rem + 1.6vw, 3.5rem);
  font-weight: 300;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--bianco);
  font-variant-numeric: lining-nums tabular-nums;
}
.dato-unita { font-size: 0.42em; margin-left: 0.18em; color: var(--oro-testo); letter-spacing: 0.02em; font-weight: 400; }
.dato-nome {
  display: block;
  margin-top: 14px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--testo-tenue);
  line-height: 1.5;
}

/* ── la fascia del motto («Discrezione · Puntualità · Attenzione personale») ───── */
.motto {
  position: relative;
  padding: clamp(80px, 8vw, 128px) 0;
  text-align: center;
  background:
    radial-gradient(ellipse 50% 70% at 50% 50%, rgba(68, 59, 52, 0.3), transparent 72%),
    url("/assets/img/sfondo-cartografia.webp") center / cover no-repeat,
    var(--fondo-profondo);
  overflow: hidden;
}
.motto::before,
.motto::after {
  content: "";
  position: absolute; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--filo-oro-forte) 22%, var(--filo-oro-forte) 78%, transparent);
}
.motto::before { top: 0; }
.motto::after { bottom: 0; }
.motto .occhiello { margin-bottom: 26px; }
.motto-frase {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  margin: 0;
  font-family: var(--serif);
  font-weight: 300;
  font-style: italic;
  font-size: clamp(1.75rem, 1.1rem + 2.1vw, 3.1rem);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--bianco);
}
.motto-frase > span { display: inline-flex; align-items: center; }
.motto-frase > span + span::before {
  content: "";
  width: 7px; height: 7px;
  margin: 0 0.85em;
  background: var(--oro);
  transform: rotate(45deg);
  flex: none;
}
.motto-sotto { margin: 26px auto 0; max-width: 620px; font-size: var(--t-lead); color: var(--testo); }

/* ── le schede dei servizi, col simbolo d'oro ──────────────────────────────────── */
.servizi {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: var(--linea);
  border-top: 1px solid var(--filo-oro);
  border-bottom: 1px solid var(--filo-oro);
}
.servizi > li { background: var(--fondo); display: flex; }
.servizio {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 40px 36px 34px;
  transition: background-color 240ms ease, transform 160ms var(--ease-out);
  -webkit-touch-callout: none;
}
.servizio::before {
  content: "";
  position: absolute; left: 0; right: 0; top: -1px;
  height: 1px;
  background: var(--oro-testo);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 420ms var(--ease-out);
}
.servizio:active { transform: scale(0.985); }
.servizio:focus-visible { outline-offset: -2px; }
.servizio-numero {
  position: absolute;
  top: 30px; right: 32px;
  font-family: var(--serif);
  font-style: italic;
  font-size: 15px;
  color: var(--oro-spento);
}
.servizio-simbolo {
  width: 58px; height: 58px;
  object-fit: contain;
  margin-bottom: 24px;
  filter: drop-shadow(0 8px 18px rgba(253, 207, 117, 0.12));
  transition: transform 300ms var(--ease-out);
}
.servizio-titolo { font-size: clamp(1.4rem, 1.2rem + 0.5vw, 1.7rem); line-height: 1.15; margin-bottom: 12px; }
.servizio-testo { flex: 1; font-size: 16px; line-height: 1.6; color: var(--testo-tenue); margin-bottom: 22px; }
.servizio-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--oro-testo);
}
.servizio-link .ico-freccia { transition: transform 200ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .servizio:hover { background: var(--fondo-3); }
  .servizio:hover::before { transform: scaleX(1); }
  .servizio:hover .servizio-simbolo { transform: translateY(-4px); }
  .servizio:hover .servizio-link .ico-freccia { transform: translate(2px, -2px); }
}

/* ── i passaggi numerati («come funziona») ─────────────────────────────────────── */
.passi-numerati {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 44px 40px;
}
.passi-numerati li { position: relative; padding-top: 30px; }
.passi-numerati li::before {
  content: "";
  position: absolute; left: 0; right: 0; top: 0;
  height: 1px;
  background: linear-gradient(90deg, var(--filo-oro-forte), var(--filo-oro-tenue));
  transform-origin: left;
}
.passi-numerati li::after {
  content: "";
  position: absolute; left: 0; top: -3px;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--oro);
  box-shadow: 0 0 0 4px var(--fondo), 0 0 12px rgba(253, 207, 117, 0.5);
}
.passo-cifra {
  display: block;
  margin-bottom: 16px;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: 46px;
  line-height: 1;
  color: var(--oro);
}
.passi-numerati h3 { font-size: 22px; line-height: 1.2; margin-bottom: 10px; }
.passi-numerati p { font-size: 16.5px; line-height: 1.65; color: var(--testo); margin: 0; }

/* ── le domande frequenti, a fisarmonica ───────────────────────────────────────── */
.domande { display: grid; max-width: 880px; margin: 0 auto; border-top: 1px solid var(--linea-forte); }
.domanda { border-bottom: 1px solid var(--linea-forte); }
.domanda summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 68px;
  padding: 20px 4px;
  font-family: var(--serif);
  font-size: clamp(1.15rem, 1.05rem + 0.35vw, 1.35rem);
  line-height: 1.35;
  color: var(--bianco);
  cursor: pointer;
  list-style: none;
  -webkit-user-select: none;
  user-select: none;
  transition: color 200ms ease;
}
.domanda summary::-webkit-details-marker { display: none; }
.domanda summary .ico-piu { width: 14px; height: 14px; flex: none; color: var(--oro-testo); transition: transform 260ms var(--ease-out); }
.domanda[open] summary { color: var(--oro-testo); }
.domanda[open] summary .ico-piu { transform: rotate(45deg); }
.domanda > p,
.domanda-risposta { margin: 0; padding: 0 4px 24px; max-width: 68ch; font-size: 17px; line-height: 1.7; color: var(--testo); }
.domanda summary:focus-visible { outline: 2px solid var(--oro); outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) {
  .domanda summary:hover { color: var(--oro-testo); }
}

/* ── la fascia finale col pulsante ─────────────────────────────────────────────── */
.fascia-finale {
  position: relative;
  text-align: center;
  padding: clamp(88px, 9vw, 144px) 0;
  background:
    radial-gradient(ellipse 50% 65% at 50% 50%, rgba(68, 59, 52, 0.34), transparent 72%),
    url("/assets/img/sfondo-cartografia.webp") center / cover no-repeat,
    var(--fondo);
  border-top: 1px solid var(--oro-linea);
}
.fascia-finale .filetto-rombo { width: 140px; margin: 0 auto 36px; }
.fascia-finale .filetto-rombo::after { box-shadow: 0 0 0 6px rgba(10, 16, 15, 0.9); }
.fascia-finale-simbolo { width: 84px; height: auto; margin: 0 auto 28px; filter: drop-shadow(0 14px 30px rgba(253, 207, 117, 0.18)); }
.fascia-finale h2 { font-size: var(--t-h2); line-height: 1.06; max-width: 860px; margin: 0 auto; }
.fascia-finale p:not(.occhiello) { font-size: var(--t-lead); color: var(--testo); max-width: 640px; margin: 20px auto 0; }
.fascia-finale .azioni { justify-content: center; margin-top: 36px; }

/* ── le schede delle mete, in 4:5 (paesaggi di ChatGPT: si possono ritagliare) ─── */
.mete {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 36px 24px;
}
.meta { display: flex; flex-direction: column; }
.meta-foto {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border: 1px solid var(--filo-oro);
  border-radius: 2px;
  box-shadow: var(--ombra-foto);
  background:
    radial-gradient(ellipse 70% 60% at 50% 45%, rgba(68, 59, 52, 0.45), transparent 75%),
    url("/assets/img/sfondo-cartografia.webp") center / cover no-repeat,
    var(--fondo-3);
}
/* solo i paesaggi del kit o di ChatGPT: mai una foto del cliente (PIANO-IMMAGINI, regola 1) */
.meta-foto img.paesaggio { width: 100%; height: 100%; object-fit: cover; transition: transform 600ms var(--ease-out); }
.meta-attesa { display: grid; place-items: center; }
.meta-attesa img { width: 34%; height: auto; opacity: .92; filter: drop-shadow(0 14px 30px rgba(253, 207, 117, 0.2)); }
.meta-attesa::after {
  content: "";
  position: absolute; inset: 12px;
  border: 1px solid var(--filo-oro-tenue);
  pointer-events: none;
}
.meta-zona { display: block; margin: 20px 0 6px; font-size: 11px; font-weight: 600; letter-spacing: 0.3em; text-transform: uppercase; color: var(--oro-testo); }
.meta h3 { font-size: 24px; line-height: 1.15; margin-bottom: 8px; }
.meta p { font-size: 16px; line-height: 1.6; color: var(--testo-tenue); margin: 0; }
@media (hover: hover) and (pointer: fine) {
  .meta:hover .meta-foto img.paesaggio { transform: scale(1.03); }
}

/* ── la citazione ──────────────────────────────────────────────────────────────── */
.citazione { max-width: 900px; margin: 0 auto; text-align: center; }
.citazione::before {
  content: "\201C";
  display: block;
  font-family: var(--serif);
  font-size: 110px;
  line-height: 0.6;
  height: 46px;
  color: var(--oro);
}
.citazione blockquote { margin: 0; }
.citazione blockquote p {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(1.55rem, 1.1rem + 1.5vw, 2.45rem);
  line-height: 1.32;
  color: var(--bianco);
  margin: 0;
  text-wrap: balance;
}
.citazione figcaption {
  margin-top: 26px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--oro-testo);
}

/* elenco con le icone del kit (dotazioni, punti) */
.elenco-icone { display: grid; gap: 0; margin: 6px 0 20px; }
.elenco-icone li {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 14px 0;
  border-top: 1px solid var(--linea);
  font-size: 17px;
  line-height: 1.5;
  color: var(--testo);
}
.elenco-icone li:last-child { border-bottom: 1px solid var(--linea); }
.elenco-icone .ico { width: 20px; height: 20px; margin-top: 2px; color: var(--oro-testo); }

/* ════════════════════════════════════════════════════════════════════════════════
   9 · IL MOVIMENTO (regole di Emil Kowalski, 09 § 0-bis-2 🎞️)
   Solo transform e opacity (clip-path per le rotte, il filo e le foto che «si svelano»).
   Entrate e uscite --ease-out · cose che si spostano --ease-in-out · hover ease · mai ease-in.
   ════════════════════════════════════════════════════════════════════════════════ */

/* ── la prima schermata entra al caricamento, con CSS (non aspetta il JavaScript) ─ */
@keyframes sale {
  from { opacity: 0; transform: translateY(32px); }
}
@keyframes svanisci {
  from { opacity: 0; }
}
.hero .entra,
.testa-pagina .entra,
.pagina-testa .entra {
  animation: sale 900ms var(--ease-out) backwards;
  animation-delay: calc(120ms + var(--i, 0) * 80ms);
}
.hero h1 .riga { display: inline-block; }
/* la foto della testata: si svela dal basso, intera alla fine (mai da opacity 0 tutta insieme) */
@keyframes svela-su { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes cornice-sale { from { transform: translateY(24px); } }
.testa-pagina .foto-entra { animation: cornice-sale 1200ms var(--ease-out) 200ms backwards; }
.testa-pagina .foto-entra .foto-cornice > picture,
.testa-pagina .foto-entra .foto-cornice > img { animation: svela-su 1300ms var(--ease-in-out) 260ms backwards; }
.testa-simbolo-img { animation: sale 1000ms var(--ease-out) 60ms backwards; }

/* l'isola: è l'immagine grande, quindi non parte mai da opacity 0; si posa */
@keyframes isola-si-posa {
  from { transform: translateY(28px) scale(0.975); }
}
.strato-base { animation: isola-si-posa 1400ms var(--ease-out) backwards; }

/* le rotte si disegnano, una dopo l'altra, da città a città */
@keyframes traccia-destra { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes traccia-giu { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
[data-strato="rotta-palermo-etna"]     { animation: traccia-destra 1000ms var(--ease-in-out) 700ms backwards; }
[data-strato="rotta-etna-taormina"]    { animation: traccia-destra 650ms var(--ease-in-out) 1620ms backwards; }
[data-strato="rotta-etna-catania"]     { animation: traccia-destra 550ms var(--ease-in-out) 1620ms backwards; }
[data-strato="rotta-catania-siracusa"] { animation: traccia-giu 650ms var(--ease-in-out) 2080ms backwards; }

/* i punti si posano sulla mappa, i nomi arrivano subito dopo */
@keyframes punto-si-posa { from { opacity: 0; transform: translateY(-12px); } }
@keyframes nome-arriva { from { opacity: 0; transform: translateY(8px); } }
.strato-punto { animation: punto-si-posa 560ms var(--ease-out) backwards; }
.strato-nome { animation: nome-arriva 700ms var(--ease-out) backwards; }
[data-strato="punto-palermo"]  { animation-delay: 560ms; }
[data-strato="nome-palermo"]   { animation-delay: 660ms; }
[data-strato="punto-etna"]     { animation-delay: 1500ms; }
[data-strato="nome-etna"]      { animation-delay: 1600ms; }
[data-strato="punto-taormina"] { animation-delay: 2120ms; }
[data-strato="nome-taormina"]  { animation-delay: 2220ms; }
[data-strato="punto-catania"]  { animation-delay: 2020ms; }
[data-strato="nome-catania"]   { animation-delay: 2120ms; }
[data-strato="punto-siracusa"] { animation-delay: 2600ms; }
[data-strato="nome-siracusa"]  { animation-delay: 2700ms; }

/* l'Etna si accende quando la rotta ci arriva, poi respira piano */
@keyframes etna-arriva { from { opacity: 0; transform: translateY(14px) scale(0.95); } }
@keyframes etna-respira { to { transform: translateY(-4px); } }
@keyframes alone-arriva { from { opacity: 0; } }
@keyframes alone-respira { to { opacity: 0.72; } }
.strato-etna {
  transform-origin: 50% 100%;
  animation: etna-arriva 1000ms var(--ease-out) 1480ms backwards, etna-respira 3600ms var(--ease-in-out) 2600ms infinite alternate;
}
.strato-alone { animation: alone-arriva 1000ms var(--ease-out) 1400ms backwards, alone-respira 3600ms var(--ease-in-out) 2600ms infinite alternate; }

/* la bussola arriva girata e si assesta sul nord */
@keyframes bussola-si-assesta {
  0%   { opacity: 0; transform: rotate(-40deg) scale(0.95); }
  65%  { opacity: 1; transform: rotate(5deg); }
  100% { transform: rotate(0deg); }
}
.strato-bussola { transform-origin: 50% 50%; animation: bussola-si-assesta 1700ms var(--ease-out) 900ms backwards; }

/* il riquadro dell'Etna arriva per ultimo: prima la linea dal nome, poi il riquadro */
@keyframes riquadro-arriva { from { opacity: 0; transform: translate(-14px, -50%); } to { opacity: 1; transform: translate(0, -50%); } }
.atlante-nota-linea { animation: traccia-destra 650ms var(--ease-in-out) 2750ms backwards; }
.atlante-nota { animation: riquadro-arriva 800ms var(--ease-out) 3200ms backwards; }

.hero-margini,
.hero-mare-tirreno { animation: svanisci 1400ms ease 1900ms backwards; }

/* la costa al tramonto si avvicina appena (lo scroll muove l'immagine dentro) */
@keyframes costa-si-avvicina { from { transform: scale(1.06); } }
.hero-costa { animation: costa-si-avvicina 2600ms var(--ease-out) backwards; transform-origin: 50% 100%; }
.hero-costa img,
.hero-atlante { will-change: transform; }

/* ── le sezioni entrano scorrendo (.reveal → .in, una volta sola) ────────────── */
html.js .reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 850ms var(--ease-out), transform 850ms var(--ease-out);
  transition-delay: calc(var(--i, 0) * 70ms);
}
html.js .reveal.in { opacity: 1; transform: none; }

/* le foto: la cornice sale, la foto si svela dal basso come un sipario, e alla fine è intera */
html.js .reveal-foto { transform: translateY(40px); transition: opacity 1000ms var(--ease-out), transform 1200ms var(--ease-out); }
html.js .reveal-foto .foto-cornice > picture,
html.js .reveal-foto .foto-cornice > img {
  clip-path: inset(0 0 100% 0);
  transition: clip-path 1300ms var(--ease-in-out) 160ms;
}
html.js .reveal-foto.in .foto-cornice > picture,
html.js .reveal-foto.in .foto-cornice > img { clip-path: inset(0 0 0 0); }
html.js .reveal-foto.in { opacity: 1; transform: none; }

/* le immagini entrano in dissolvenza quando sono scaricate e decodificate, mai a scatti (26/10/2026): main.js mette
   .dissolvi-immagini su <html> e .caricata sull'immagine pronta (senza script, si vedono come sempre). Fuori l'atlante
   della hero, il filo e i simboli che entrano già col loro .reveal; le transizioni di prima restano nella lista */
html.dissolvi-immagini main img:not(.strato):not(.reveal):not(.reveal-filo img) {
  opacity: 0;
  transition: opacity 900ms var(--ease-out), clip-path 1300ms var(--ease-in-out) 160ms, transform 300ms var(--ease-out);
}
html.dissolvi-immagini main img:not(.strato):not(.reveal):not(.reveal-filo img).caricata { opacity: 1; }
html.dissolvi-immagini .meta-foto img.paesaggio { transition: opacity 900ms var(--ease-out), transform 600ms var(--ease-out); }

/* simboli d'oro: si posano ruotando appena */
html.js .reveal-simbolo { transform: translateY(16px) rotate(-10deg); transition-duration: 950ms; }
html.js .reveal-simbolo.in { transform: none; }

/* il filo del viaggio si disegna da sinistra a destra; la linea dei passaggi pure */
html.js .reveal-filo img { clip-path: inset(0 100% 0 0); transition: clip-path 1600ms var(--ease-in-out) 200ms; }
html.js .reveal-filo.in img { clip-path: inset(0 0 0 0); }
html.js .passi-numerati .reveal::before { transform: scaleX(0); transition: transform 1100ms var(--ease-in-out) calc(200ms + var(--i, 0) * 90ms); }
html.js .passi-numerati .reveal.in::before { transform: scaleX(1); }

@media (hover: hover) and (pointer: fine) {
  .btn-oro:hover { transform: translateY(-1px); }
  .btn-oro:hover:active { transform: scale(0.97); }
}

/* le aperture: il pannello delle preferenze e le risposte scendono appena */
@keyframes pannello-apre { from { opacity: 0; transform: translateY(-6px); } }
.preferenze[open] .preferenze-corpo { animation: pannello-apre 240ms var(--ease-out); }
#campo-nave:not([hidden]),
#scelta-carrozzina:not([hidden]) { animation: pannello-apre 240ms var(--ease-out); }
.domanda[open] > p,
.domanda[open] .domanda-risposta { animation: pannello-apre 260ms var(--ease-out); }

/* ── riduci animazioni: meno movimento, non zero (restano le dissolvenze) ────── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero .entra,
  .testa-pagina .entra,
  .pagina-testa .entra,
  .testa-simbolo-img,
  .strato-punto,
  .strato-nome,
  .strato-rotta,
  .strato-bussola,
  .strato-alone,
  .atlante-nota-linea,
  .hero-costa { animation: svanisci 600ms ease backwards; }
  .testa-pagina .foto-entra,
  .testa-pagina .foto-entra .foto-cornice > picture,
  .testa-pagina .foto-entra .foto-cornice > img { animation: svanisci 700ms ease backwards; }
  .strato-etna { animation: svanisci 600ms ease 300ms backwards; }
  .strato-base { animation: none; }
  .atlante-nota { animation: svanisci 600ms ease 400ms backwards; }
  html.js .reveal,
  html.js .reveal-foto,
  html.js .reveal-simbolo { transform: none; transition: opacity 600ms ease; transition-delay: 0s; }
  html.js .reveal-foto .foto-cornice > picture,
  html.js .reveal-foto .foto-cornice > img { clip-path: none; transition: none; }
  html.js .reveal-filo img { clip-path: none; opacity: 0; transition: opacity 600ms ease; }
  html.js .reveal-filo.in img { opacity: 1; }
  html.js .passi-numerati .reveal::before { transform: none; transition: none; }
  .cornice-eco::before { transition: border-color 260ms ease; }
  .menu-telefono li, .menu-telefono .btn, .menu-telefono-contatto { transform: none !important; }
  .testata, .testata-riga > *, .testata .logo img { transition-property: background-color, box-shadow; }
  .hero-costa img, .hero-atlante { will-change: auto; }
}

/* tablet e telefono: il riquadro dell'Etna sta sotto l'isola, senza linea: arriva salendo */
@keyframes riquadro-sale { from { opacity: 0; transform: translateY(12px); } }
@media (max-width: 960px) {
  .atlante-nota { animation: riquadro-sale 800ms var(--ease-out) 2900ms backwards; }
}
@media (max-width: 960px) and (prefers-reduced-motion: reduce) {
  .atlante-nota { animation: svanisci 600ms ease 400ms backwards; }
}

/* ════════════════════════════════════════════════════════════════════════════════
   10 · VECCHIO: le pagine interne di prima (6-bis del 25/10), finché non le rifà chi costruisce col sistema
   qui sopra. Le foto non si tagliano più nemmeno qui. Quando tutte le pagine usano il sistema nuovo, si toglie.
   ════════════════════════════════════════════════════════════════════════════════ */
.pagina-testa {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 640px;
  padding: calc(var(--testata-h) + 30px + env(safe-area-inset-top, 0px)) 0 56px;
  overflow: hidden;
  isolation: isolate;
  background: var(--fondo);
}
.pagina-testa-foto { position: absolute; inset: 0; z-index: -1; margin: 0; }
.pagina-testa-foto picture,
.pagina-testa-foto img { width: 100%; height: 100%; }
.pagina-testa-foto img { object-fit: contain; object-position: right center; }
.pagina-testa-foto::after {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg, var(--fondo) 0%, var(--fondo) 30%, rgba(10, 16, 15, 0.78) 43%, rgba(10, 16, 15, 0) 62%),
    linear-gradient(180deg, rgba(10, 16, 15, 0.85) 0%, rgba(10, 16, 15, 0) 22%, rgba(10, 16, 15, 0) 80%, var(--fondo) 100%);
}
.pagina-testa-foto-ritaglio { left: auto; width: 58%; overflow: hidden; }
.pagina-testa-foto-ritaglio::after {
  background:
    linear-gradient(90deg, var(--fondo) 0%, rgba(10, 16, 15, 0.8) 18%, rgba(10, 16, 15, 0) 48%),
    linear-gradient(180deg, var(--fondo) 0%, rgba(10, 16, 15, 0.55) 12%, rgba(10, 16, 15, 0) 30%, rgba(10, 16, 15, 0) 80%, var(--fondo) 100%);
}
.pagina-testa-testo { max-width: 540px; }
.pagina-testa-simbolo { width: 64px; height: 64px; margin-bottom: 18px; }
.pagina-testa h1 {
  font-size: clamp(2.3rem, 1.3rem + 2.5vw, 3.6rem);
  line-height: 1.04;
  margin-bottom: 20px;
}
.pagina-testa-sotto { font-size: 19px; color: var(--testo); margin-bottom: 12px; }
.pagina-azioni { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 26px; }
.pagina-azioni .btn { min-height: 52px; }
.pagina-testa-centrata {
  text-align: center;
  min-height: 520px;
  background:
    radial-gradient(ellipse 60% 55% at 50% 55%, rgba(68, 59, 52, 0.28), transparent 70%),
    url("/assets/img/sfondo-cartografia.webp") center top / cover no-repeat,
    var(--fondo);
}
.pagina-testa-centrata .pagina-testa-testo { max-width: 760px; margin: 0 auto; }
.pagina-testa-centrata .pagina-azioni { justify-content: center; }
.pagina-testa-centrata .pagina-testa-simbolo { margin-inline: auto; width: 78px; height: 78px; }
.filo-pagina { margin: -8px 0 0; opacity: .9; overflow: hidden; }

.blocco { position: relative; padding: 60px 0; }
.blocco h2 { font-size: clamp(1.9rem, 1.2rem + 1.7vw, 2.85rem); line-height: 1.08; margin-bottom: 20px; }
.blocco p:not(.occhiello) { font-size: 17.5px; color: var(--testo); }
.blocco-griglia {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  gap: 60px;
  align-items: center;
}
.blocco-inverso .blocco-foto { order: 2; }
.blocco-griglia-testo { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); align-items: start; }
.blocco-testo > :last-child { margin-bottom: 0; }
.blocco-foto {
  border: 1px solid var(--filo-oro);
  border-radius: 2px;
  margin: 0;
  overflow: hidden;
  box-shadow: var(--ombra-foto);
}
.blocco-foto img { width: 100%; height: auto; max-height: 680px; object-fit: contain; background: var(--fondo-3); }
.blocco-stretto { max-width: 820px; margin-inline: auto; }
.blocco-centrato { text-align: center; }
.blocco-centrato .elenco,
.blocco-centrato .passi { display: inline-grid; text-align: left; }
.blocco-centrato .pagina-azioni,
.richiesta-pagina .pagina-azioni { justify-content: center; }
.blocco-intesta { max-width: 760px; }
.blocco-foto-doppia { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 30px; align-items: start; }
.blocco-risalto { padding: 76px 0; }

.elenco, .canali { display: grid; gap: 0; margin: 4px 0 18px; }
.elenco li, .canali li {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 11px 0;
  border-top: 1px solid var(--linea);
  font-size: 17px;
  color: var(--testo);
  line-height: 1.45;
}
.elenco li:last-child, .canali li:last-child { border-bottom: 1px solid var(--linea); }
.elenco .ico, .canali .ico { width: 18px; height: 18px; margin-top: 3px; color: var(--oro-testo); }
.canali .ico { width: 22px; height: 22px; margin-top: 1px; }
.canali p { margin: 0; font-size: 17px; }
.canali a { color: var(--oro-testo); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(245, 209, 113, 0.5); }

.schede { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 8px 0 0; }
.scheda {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 18px 18px 18px 16px;
  border: 1px solid rgba(245, 209, 113, 0.45);
  border-radius: 4px;
  background: rgba(10, 16, 15, 0.6);
}
.scheda .ico { width: 22px; height: 22px; color: var(--oro-testo); margin-top: 2px; }
.scheda p { margin: 0; font-size: 16.5px; color: var(--bianco); }
.scheda-titolo {
  display: block;
  font-size: 11.5px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--oro-testo);
  margin-bottom: 6px;
}
.scheda-testo { display: block; }
.scheda-testo::first-letter { text-transform: uppercase; }

.passi { display: grid; gap: 12px; margin: 6px 0 18px; padding: 0; list-style: none; }
.passi li { display: flex; gap: 16px; align-items: baseline; font-size: 17px; color: var(--testo); }
.passo-numero { font-family: var(--serif); font-size: 30px; line-height: 1; color: var(--oro); min-width: 26px; }

.blocco-atlante { max-width: 560px; width: 100%; }
.atlante-piccolo .strato-base, .atlante-piccolo .strato:first-child { filter: drop-shadow(0 0 18px rgba(253, 207, 117, 0.14)); }

.galleria { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px 22px; margin-top: 12px; align-items: start; }
.galleria-voce { margin: 0; }
.galleria-foto { border: 1px solid var(--filo-oro); border-radius: 2px; overflow: hidden; }
.galleria-foto img { width: 100%; height: auto; max-height: 560px; object-fit: contain; background: var(--fondo-3); }
.galleria-voce figcaption { margin-top: 10px; font-size: 15px; color: var(--testo-tenue); line-height: 1.4; }
.domande .domanda + .domanda { margin-top: 0; }

.richiesta-pagina { padding: 70px 0 64px; }
.richiesta-pagina .blocco-stretto { margin-bottom: 30px; }
.pagina-cta { padding: 70px 0 90px; }

/* ════════════════════════════════════════════════════════════════════════════════
   11 · TABLET E TELEFONO
   ════════════════════════════════════════════════════════════════════════════════ */
@media (max-width: 1220px) {
  .menu { display: none; }
  .menu-apri { display: block; }
  .testata-azioni { margin-left: auto; gap: 14px; }
}
@media (max-width: 1100px) {
  :root { --margine: 28px; }
  .rimandi li + li::before { margin: 0 20px; }
  .servizio { padding: 40px 30px 32px; }
  .mete { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 960px) {
  .atlante-nota { left: auto; right: 0; top: auto; bottom: -7%; transform: none; }
  .atlante-nota-linea { display: none; }
  .servizi { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .veicolo-griglia,
  .accesso-griglia,
  .esperienze-griglia,
  .testa-griglia,
  .editoriale,
  .editoriale-foto { grid-template-columns: minmax(0, 1fr); }
  .veicolo-foto { order: -1; justify-self: center; }
  .accesso-foto { justify-self: center; }
  .esperienze-foto { justify-self: start; }
  .testa-foto { justify-self: start; }
  .editoriale-inverso > :first-child { order: 0; }
  .veicolo-testo, .esperienze-testo { max-width: 640px; }
  .blocco-griglia, .blocco-griglia-testo { gap: 36px; }
}

@media (max-width: 760px) {
  :root { --margine: 16px; --testata-h: 84px; --spazio-sezione: 64px; }
  body { font-size: 16.5px; }
  html { scroll-padding-top: 76px; }
  .testata-riga { gap: 12px; }
  .testata .logo img { width: min(176px, calc(100vw - 170px)); }
  .testata-cta { display: none; }

  /* hero */
  .hero { padding-top: calc(var(--testata-h) + 14px + env(safe-area-inset-top, 0px)); }
  .hero-coord, .hero-mare { display: none; }
  .hero-sfondo::before { top: 52%; }
  .hero-testo .occhiello { font-size: 10.5px; letter-spacing: 0.3em; margin-bottom: 16px; }
  .hero h1 { font-size: clamp(2.4rem, 1.5rem + 5vw, 3rem); line-height: 1.04; }
  .hero h1 br { display: none; }
  .hero h1 .riga { display: inline; }
  .hero-sotto { margin: 18px auto 24px; max-width: 300px; }
  .hero-testo .btn { width: 100%; max-width: 340px; }
  .hero-atlante { width: calc(100% - 16px); margin-top: 34px; }
  .atlante-nota { bottom: -12%; }
  .atlante-nota p { width: auto; max-width: 168px; padding: 7px 10px 8px; font-size: 12.5px; }
  .atlante-nota-titolo { font-size: 10px; margin-bottom: 2px; }
  .hero-costa { margin-top: -26px; }
  .hero-costa img { height: 58vw; min-height: 220px; object-position: center 70%; }
  .hero::after { height: 64px; }

  /* introduzione */
  .intro { padding: 52px 0 44px; }
  .intro .intro-filetto { width: 120px; margin-bottom: 30px; }
  .intro-testo br { display: none; }
  .rimandi {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2px 14px;
    max-width: 380px;
    margin: 0 auto;
  }
  .rimandi li + li::before { display: none; }
  .rimandi li { justify-content: center; }
  .rimandi .link-oro { font-size: 16.5px; min-height: 44px; }
  .filo { margin: 4px -40% -4px; }
  .porti { font-size: 15px; }
  .porti li + li::before { margin: 0 9px; }

  /* servizi: righe compatte, simbolo a sinistra */
  .servizi-home { padding-top: 40px; }
  .servizi { grid-template-columns: minmax(0, 1fr); }
  .servizio {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr) auto;
    grid-template-areas: "simbolo titolo freccia" "simbolo testo freccia";
    column-gap: 16px;
    align-items: center;
    padding: 20px 4px 20px 0;
  }
  .servizio-numero { display: none; }
  .servizio-simbolo { grid-area: simbolo; width: 48px; height: 48px; margin: 0; align-self: start; }
  .servizio-titolo { grid-area: titolo; font-size: 21px; margin-bottom: 4px; }
  .servizio-testo { grid-area: testo; font-size: 15px; line-height: 1.5; margin: 0; }
  .servizio-link { grid-area: freccia; font-size: 0; gap: 0; width: 32px; height: 32px; justify-content: center; }
  .servizio-link .ico-freccia { width: 14px; height: 14px; }
  .servizio:active { background: var(--fondo-3); }

  /* veicolo, accessibilità, esperienze */
  .veicolo-griglia, .accesso-griglia, .esperienze-griglia { gap: 36px; }
  .veicolo h2, .accesso h2, .esperienze h2 { font-size: clamp(2.05rem, 1.4rem + 4vw, 2.6rem); margin-bottom: 18px; }
  .veicolo-intro { font-size: 17px; }
  .dati { font-size: 15.5px; }
  .dati li:not(:last-child)::after { margin: 0 9px; }
  .veicolo-foto { --alto: 100000px; width: calc(100% - 10px); margin-right: 10px; }
  .accesso { padding-top: 36px; }
  .accesso-foto { --alto: 460px; }
  .accesso-testo { grid-template-columns: 1fr; gap: 16px; }
  .accesso-simbolo { width: 52px; height: 52px; margin: 0; }
  .accesso::before { width: 120vw; left: -60vw; top: 0; }
  .accesso::after { display: none; }
  .esperienze-simbolo { width: 58px; }
  .esperienze-foto { justify-self: center; width: 100%; }
  .thk-nota-foto { margin-top: 26px; }

  /* modulo */
  .richiesta-sotto { margin-bottom: 28px; }
  .modulo-griglia { grid-template-columns: 1fr; gap: 12px; }
  .calendario { left: 0; right: 0; width: auto; }
  .modulo-azioni { flex-direction: column; gap: 12px; }
  .modulo-azioni .btn { width: 100%; min-width: 0; }
  .contatti { flex-direction: column; align-items: center; gap: 4px; font-size: 17px; margin-top: 32px; padding-top: 24px; }

  /* piede */
  .piede { padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)); }
  .piede-riga { flex-direction: column; align-items: center; gap: 18px; text-align: center; }
  .piede-logo img { width: 210px; }
  .piede-menu ul { justify-content: center; gap: 4px 22px; }
  .piede-diritti { margin: 0; padding: 0; border: 0; }
  .piede-legale { flex-direction: column; text-align: center; gap: 8px; }
  .credit { margin-left: 0 !important; }

  /* la barra in fondo, da telefono */
  .barra-telefono {
    display: flex;
    gap: 10px;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 40;
    padding: 10px max(16px, env(safe-area-inset-right, 0px)) calc(10px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px));
    background: rgba(10, 16, 15, 0.94);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border-top: 1px solid rgba(137, 118, 96, 0.3);
    transform: translateY(110%);
    transition: transform 320ms var(--ease-out);
  }
  .barra-telefono.visibile { transform: translateY(0); }
  .barra-telefono .btn { flex: 1; min-height: 48px; }
  .barra-telefono-wa {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px; height: 48px;
    border: 1px solid rgba(245, 209, 113, 0.6);
    border-radius: 3px;
    color: var(--bianco);
    -webkit-user-select: none;
    user-select: none;
    transition: transform 140ms var(--ease-out);
  }
  .barra-telefono-wa .ico { width: 24px; height: 24px; }
  .barra-telefono-wa:active { transform: scale(0.96); }

  .pagina-semplice { padding-top: calc(var(--testata-h) + 24px); }

  /* ── il sistema dei componenti, da telefono ── */
  .testa-pagina { padding: calc(var(--testata-h) + 28px + env(safe-area-inset-top, 0px)) 0 48px; }
  .testa-pagina h1 { font-size: clamp(2.2rem, 1.5rem + 3.6vw, 2.75rem); margin-bottom: 18px; }
  .testa-sotto { font-size: 17px; }
  .testa-griglia { gap: 36px; }
  .testa-foto { --alto: 520px; justify-self: center; }
  .testa-simbolo-img { width: 104px; margin-bottom: 22px; }
  .azioni { flex-direction: column; margin-top: 26px; }
  .azioni .btn { width: 100%; }
  :root { --alto-foto: 540px; }
  .cornice-eco::before { inset: 10px -10px -10px 10px; }
  .cornice-eco { margin-right: 10px; }
  :where(.sezione, .sezione-testa) h2, .fascia-finale h2 { font-size: clamp(1.95rem, 1.4rem + 3vw, 2.4rem); }
  :where(.sezione) p { font-size: 16.5px; }
  .sezione-testa { margin-bottom: 36px; }

  /* le righe di foto: una riga che scorre col dito (le verticali), o due affiancate */
  .riga-foto {
    --gap-foto: 12px;
    max-width: none;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin-right: calc(-1 * max(var(--margine), env(safe-area-inset-right, 0px)));
    padding-right: max(var(--margine), env(safe-area-inset-right, 0px));
    padding-bottom: 6px;
  }
  .riga-foto::-webkit-scrollbar { display: none; }
  .riga-foto > .foto {
    flex: 0 0 auto;
    width: min(82vw, calc(var(--alto-tel, 440px) * var(--r, 0.75)));
    scroll-snap-align: start;
  }
  .riga-foto.riga-affiancata { overflow: visible; margin-right: 0; padding-right: 0; scroll-snap-type: none; }
  .riga-foto.riga-affiancata > .foto { flex: 1 1 0%; flex-grow: calc(var(--r, 1)); width: auto; }
  .riga-foto .didascalia { font-size: 14px; }
  .riga-foto + .riga-foto { margin-top: 32px; }

  .dati-tecnici { grid-template-columns: 1fr 1fr; }
  .dati-tecnici li { padding: 24px 16px 22px; border-left: 0; border-top: 1px solid var(--linea); }
  .dati-tecnici li:nth-child(-n+2) { border-top: 0; }
  .dati-tecnici li:nth-child(even) { border-left: 1px solid var(--linea); }

  .motto { padding: 64px 0; }
  .motto-frase { flex-direction: column; gap: 0; font-size: clamp(1.75rem, 1.3rem + 2.6vw, 2.2rem); }
  .motto-frase > span { flex-direction: column; }
  .motto-frase > span + span::before { margin: 14px 0; }

  .passi-numerati { grid-template-columns: 1fr; gap: 32px; }
  .passo-cifra { font-size: 38px; }

  .mete {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 72%;
    gap: 16px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    margin-right: calc(-1 * max(var(--margine), env(safe-area-inset-right, 0px)));
    padding-right: max(var(--margine), env(safe-area-inset-right, 0px));
    padding-bottom: 6px;
  }
  .mete::-webkit-scrollbar { display: none; }
  .meta { scroll-snap-align: start; }
  .meta h3 { font-size: 21px; }

  .domanda summary { min-height: 60px; padding: 16px 2px; }

  /* VECCHIO, da telefono */
  .pagina-testa { display: block; min-height: 0; padding: calc(var(--testata-h) + env(safe-area-inset-top, 0px)) 0 36px; }
  .pagina-testa-foto { position: relative; inset: auto; aspect-ratio: 6 / 5; z-index: 0; }
  .pagina-testa-foto::after { background: linear-gradient(180deg, rgba(10, 16, 15, 0.7) 0%, rgba(10, 16, 15, 0) 26%, rgba(10, 16, 15, 0) 62%, var(--fondo) 100%); }
  .pagina-testa-foto-ritaglio { width: 100%; aspect-ratio: 4 / 3; }
  .pagina-testa-testo { position: relative; margin-top: -34px; }
  .pagina-testa h1 { font-size: clamp(2.1rem, 1.4rem + 3.6vw, 2.6rem); }
  .pagina-testa-sotto { font-size: 17px; }
  .pagina-testa-simbolo { width: 50px; height: 50px; margin-bottom: 12px; }
  .pagina-testa-centrata { padding: calc(var(--testata-h) + 30px + env(safe-area-inset-top, 0px)) 0 40px; }
  .pagina-testa-centrata .pagina-testa-testo { margin-top: 0; }
  .pagina-azioni { flex-direction: column; }
  .pagina-azioni .btn { width: 100%; }
  .blocco { padding: 40px 0; }
  .blocco-griglia, .blocco-griglia-testo { grid-template-columns: 1fr; gap: 22px; }
  .blocco-inverso .blocco-foto { order: 0; }
  .blocco h2 { font-size: clamp(1.75rem, 1.3rem + 2.4vw, 2.2rem); margin-bottom: 14px; }
  .blocco p:not(.occhiello) { font-size: 16.5px; }
  .schede { grid-template-columns: 1fr; }
  .blocco-foto-doppia { gap: 12px; margin-top: 22px; }
  .galleria {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 80%;
    gap: 14px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 10px;
    margin-right: calc(-1 * max(16px, env(safe-area-inset-right, 0px)));
    padding-right: 16px;
    scrollbar-width: none;
  }
  .galleria::-webkit-scrollbar { display: none; }
  .galleria-voce { scroll-snap-align: start; }
  .richiesta-pagina { padding: 44px 0 40px; }
  .pagina-cta { padding: 44px 0 56px; }
  .blocco-centrato .elenco, .blocco-centrato .passi { display: grid; }
}

@media (max-width: 360px) {
  .hero h1 { font-size: 2.2rem; }
  .rimandi .link-oro { font-size: 15.5px; }
}

/* ── 26/10 · pannello (6-ter): le fasce che il pannello mette IN CIMA alla pagina, nel flusso — l'avviso in cima al sito
   e, col sito in pausa, la fascia della vista del cliente (kit 1.7) — la testata fissa le copriva. Quando ci sono, la
   testata scorre sotto la fascia e poi resta in cima, senza spostare la pagina (il margine negativo è la sua altezza) ── */
body:has(> .avviso-sito) .testata,
body:has(> .thk-pausa-vista) .testata {
  position: sticky;
  top: 0;
  margin-bottom: calc(-1 * (var(--testata-h) + env(safe-area-inset-top, 0px)));
}

/* ── 27/10 · 7-bis (P18): l'avviso in cima al sito, quando il cliente lo accende dal pannello, nei colori del sito ── */
.avviso-sito {
  position: relative;
  z-index: 60;
  margin: 0;
  padding: 11px 16px;
  background: var(--fondo-3);
  border-bottom: 1px solid var(--filo-oro);
  color: var(--oro-testo);
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.45;
  letter-spacing: 0.02em;
  text-align: center;
}
.avviso-sito a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }

/* ════════════════════════════════════════════════════════════════════════════════
   12 · 2 STEP (27/10/2026): il logo grande della home, la galleria, le foto del modulo
   ════════════════════════════════════════════════════════════════════════════════ */

/* ── il logo grande in cima alla home: il blocco del piede ripreso in alto, al centro (voce 1) ─────────────────
   il file del logo, mai ricreato; sotto, le due righe del piede (comuni.fondo), con lo stesso carattere */
.hero-marchio { display: flex; flex-direction: column; align-items: center; margin: 4px auto clamp(30px, 3.4vw, 44px); }
.hero-logo { display: block; width: clamp(240px, 22vw, 320px); height: auto; }
.hero-motto {
  margin: 18px 0 6px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--oro-testo);
  line-height: 1.6;
}
.hero-linea { display: flex; flex-wrap: wrap; justify-content: center; margin: 0; font-size: 14px; color: var(--testo-tenue); }
.hero-linea span + span::before { content: "·"; margin: 0 0.55em; color: var(--oro-spento); }

/* ── la galleria: le foto del cliente SEMPRE intere, mai giganti (voce 19) ─────────────────────────────────────
   Ogni foto ha --r (larghezza/altezza della foto vera) e --largo (mai più larga della sua risoluzione / 1,5); il motore
   (filtro riga_galleria) le dà anche la sua riga: --rr (somma delle proporzioni), --nr (quante foto) e --alto-riga
   (al massimo 420 px, e mai più di quanto regge la foto più piccola della riga).
   Da computer: righe fino a 3 foto, divise in modo pari (4 → 2+2: .galleria-capo va a capo), alla stessa altezza: ogni foto è larga
   --r × l'altezza della riga, cioè la più piccola fra --alto-riga e quella che fa stare la riga nella larghezza; una
   riga corta resta al centro. Da telefono: una riga sola che scorre col dito, come .riga-foto. */
.galleria {
  --gap-foto: 24px;
  --alto-galleria: 420px;
  --sotto-foto: 40px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  column-gap: var(--gap-foto);
  margin: clamp(44px, 5vw, 64px) 0 calc(-1 * var(--sotto-foto));
}
.sezione-testa + .galleria { margin-top: 0; }
.galleria > .foto {
  flex: 0 0 auto;
  width: calc(var(--r, 1) * min(var(--alto-riga, var(--alto-galleria)), (100% - (var(--nr, 1) - 1) * var(--gap-foto) - 1px) / var(--rr, 1)));
  min-width: 0;
  max-width: var(--largo, none);
  margin: 0 0 var(--sotto-foto);
}
.galleria-capo { flex: 0 0 100%; height: 0; }
.galleria .didascalia { max-width: 46ch; }

/* ── le foto delle rampe e dei binari nel modulo: piccole e intere, solo col tour accessibile (voce 8) ───────── */
.carrozzina-foto { display: flex; flex-wrap: wrap; gap: 14px 16px; padding: 2px 0 4px 32px; }
.carrozzina-foto .foto { width: min(168px, calc(50% - 8px)); max-width: var(--largo, none); margin: 0; }
.carrozzina-foto .didascalia { margin-top: 10px; font-size: 13.5px; line-height: 1.45; }
#carrozzina-foto:not([hidden]) { animation: pannello-apre 240ms var(--ease-out); }

/* ── una sezione col testo e la foto che resta senza foto (Tour › Una giornata di tour): il testo da solo ────── */
.editoriale-solo { display: block; }
.editoriale-solo .editoriale-testo { max-width: 760px; }

@media (max-width: 760px) {
  .hero-marchio { margin: 0 auto 26px; }
  .hero-logo { width: min(232px, 62vw); }
  .hero-motto { margin-top: 14px; font-size: 11px; letter-spacing: 0.26em; }
  .hero-linea { font-size: 13px; }

  .galleria {
    --gap-foto: 12px;
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin: 36px calc(-1 * max(var(--margine), env(safe-area-inset-right, 0px))) 0 0;
    padding: 0 max(var(--margine), env(safe-area-inset-right, 0px)) 6px 0;
  }
  .sezione-testa + .galleria { margin-top: 0; }
  .galleria::-webkit-scrollbar { display: none; }
  .galleria > .foto {
    flex: 0 0 auto;
    width: min(80vw, calc(var(--alto-tel-galleria, 320px) * var(--r, 0.75)));
    margin: 0;
    scroll-snap-align: start;
  }
  .galleria-capo { display: none; }
  .galleria .didascalia { font-size: 14px; }

  .carrozzina-foto { padding-left: 0; }
  .carrozzina-foto .foto { width: calc(50% - 8px); }
}