/* Exclusive Journeys — pagine-b.css · «salto di livello» del 25/10/2026
   Il CSS in più delle pagine Il veicolo, Vino e cucina, Eventi, Contatti, della 404 e delle pagine legali.
   Si appoggia al sistema dei componenti di style.css (§ 8, DESIGN-SYSTEM.md) e ne usa solo le variabili:
   nessun colore nuovo, nessun carattere nuovo. Le foto del cliente restano sempre intere (mai object-fit: cover).

   Indice
     1 · il piede comune (lo stesso blocco di pagine-a.css)
     2 · testata di pagina: la colonna della foto più larga per le foto 4:3
     3 · il veicolo: il confronto delle misure, la paratia in risalto, la riga degli interni
     4 · vino e cucina: la dichiarazione, il riquadro delle radici
     5 · eventi: la fascia del referente, le schede delle occasioni, la riga che da telefono si impila
     6 · contatti: i canali, il QR, il percorso dopo la richiesta, l'isola, il modulo
     7 · 404
     8 · tablet e telefono
     9 · riduci animazioni */

/* un elemento con l'attributo hidden resta nascosto anche se il suo componente ha un display (griglie, fieldset) */
[hidden] { display: none !important; }

/* ════════════════════════════════════════════════════════════════════════════════
   1 · IL PIEDE COMUNE (uguale, riga per riga, a pagine-a.css: lo stesso piede in ogni pagina del sito)
   ════════════════════════════════════════════════════════════════════════════════ */
.piede-riga {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.95fr) minmax(0, 1.1fr);
  align-items: start;
  gap: 40px 56px;
  padding: 56px 0 44px;
}
.piede-marchio .piede-logo img { width: 230px; }
.piede-motto {
  margin: 22px 0 6px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--oro-testo);
  line-height: 1.6;
}
.piede-linea {
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  font-size: 14px;
  color: var(--testo-tenue);
}
.piede-linea span + span::before {
  content: "·";
  margin: 0 0.55em;
  color: var(--oro-spento);
}
.piede-menu ul {
  display: grid;
  grid-auto-flow: column;
  grid-template-rows: repeat(4, auto);
  grid-template-columns: repeat(2, max-content);
  gap: 4px 48px;
}
.piede-menu a { display: inline-block; padding: 7px 0; }
.piede-diritti {
  margin: 0;
  padding: 0 0 0 28px;
  max-width: none;
  border-left: 1px solid rgba(137, 118, 96, 0.4);
  font-size: 15px;
  line-height: 1.55;
  color: var(--testo);
}
.piede-diritti p { margin: 0 0 10px; }
.piede-diritti p:last-child { margin-bottom: 0; }
.piede-diritti a {
  color: var(--bianco);
  white-space: nowrap;
  transition: color 200ms ease;
}
.piede-diritti a:active { color: var(--oro-testo); }
@media (hover: hover) and (pointer: fine) {
  .piede-diritti a:hover { color: var(--oro-testo); }
}
.piede-diritti .piede-servizio { color: var(--testo-tenue); margin-bottom: 14px; }
.piede-legale .piede-copyright { color: var(--testo-tenue); }
@media (max-width: 1100px) {
  .piede-riga { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .piede-diritti { grid-column: 1 / -1; padding: 24px 0 0; border-left: 0; border-top: 1px solid rgba(137, 118, 96, 0.3); }
}
@media (max-width: 760px) {
  .piede-riga { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; gap: 22px; padding: 36px 0 26px; }
  .piede-marchio .piede-logo { display: inline-block; }
  .piede-marchio .piede-logo img { width: 200px; }
  .piede-linea { justify-content: center; }
  .piede-menu ul { grid-template-columns: repeat(2, max-content); justify-content: center; gap: 0 36px; }
  .piede-menu a { padding: 7px 0; }
  .piede-diritti { padding-top: 24px; width: 100%; }
  .piede-legale .piede-link { justify-content: center; }
}

/* ════════════════════════════════════════════════════════════════════════════════
   2 · TESTATA DI PAGINA
   ════════════════════════════════════════════════════════════════════════════════ */
/* la foto 4:3 del veicolo: la colonna della foto più larga, perché lo Sprinter si legga intero */
.testa-griglia-larga { grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); }
.testa-griglia-larga .testa-foto { --alto: 560px; width: min(100%, calc(var(--alto) * var(--r))); }

/* ════════════════════════════════════════════════════════════════════════════════
   3 · IL VEICOLO
   ════════════════════════════════════════════════════════════════════════════════ */
/* il confronto delle misure: due quote d'oro, come in un disegno tecnico */
.confronto {
  display: grid;
  gap: 44px;
  padding: 44px 40px 40px;
  border: 1px solid var(--filo-oro);
  border-radius: 2px;
  background:
    radial-gradient(ellipse 70% 80% at 30% 20%, rgba(68, 59, 52, 0.22), transparent 70%),
    var(--fondo-2);
  box-shadow: var(--ombra-foto);
}
.confronto-riga { display: grid; gap: 14px; }
.confronto-cifra {
  margin: 0;
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(3rem, 2.2rem + 2.2vw, 4.4rem);
  line-height: 0.95;
  letter-spacing: -0.02em;
  color: var(--bianco);
  font-variant-numeric: lining-nums tabular-nums;
}
.confronto-unita { font-size: 0.4em; margin-left: 0.2em; color: var(--oro-testo); letter-spacing: 0.02em; font-weight: 400; }
.confronto-altro .confronto-cifra { color: var(--testo-tenue); }
.confronto-quota {
  position: relative;
  display: block;
  height: 14px;
  width: calc(var(--l, 1) * 100%);
  transform-origin: left center;
}
.confronto-quota::before {            /* la linea */
  content: "";
  position: absolute; left: 0; right: 0; top: 50%;
  height: 1px;
  background: var(--oro);
}
.confronto-quota::after {             /* le due stanghette agli estremi */
  content: "";
  position: absolute; inset: 0;
  border-left: 1px solid var(--oro);
  border-right: 1px solid var(--oro);
}
.confronto-altro .confronto-quota::before { background: var(--oro-spento); }
.confronto-altro .confronto-quota::after { border-color: var(--oro-spento); }
.confronto-nome {
  margin: 0;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--oro-testo);
}
.confronto-altro .confronto-nome { color: var(--testo-tenue); }
html.js .confronto .confronto-quota { transform: scaleX(0); transition: transform 1100ms var(--ease-in-out) 350ms; }
html.js .confronto.in .confronto-quota { transform: scaleX(1); }
html.js .confronto.in .confronto-altro .confronto-quota { transition-delay: 600ms; }

/* le sezioni con la cartografia: sfumano nel nero sopra e sotto, senza bordi netti */
.sezione-carta {
  background:
    linear-gradient(180deg, var(--fondo) 0%, rgba(10, 16, 15, 0) 16%, rgba(10, 16, 15, 0) 84%, var(--fondo) 100%),
    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);
}

/* la paratia, in risalto (C10: «una cosa importante che voglio mettere in risalto») */
.risalto { padding-block: calc(var(--spazio-sezione) * 1.25); }
.risalto::before,
.risalto::after {
  content: "";
  position: absolute; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--filo-oro-forte) 20%, var(--filo-oro-forte) 80%, transparent);
}
.risalto::before { top: 0; }
.risalto::after { bottom: 0; }
.risalto .occhiello { color: var(--oro); }
.risalto-punti {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px 36px;
  margin: 30px 0 28px;
}
.risalto-punti p {
  position: relative;
  margin: 0;
  padding-top: 22px;
  color: var(--bianco);
}
.risalto-punti p::before {
  content: "";
  position: absolute; left: 0; right: 0; top: 0;
  height: 1px;
  background: linear-gradient(90deg, var(--filo-oro-forte), var(--filo-oro-tenue));
}
.risalto-punti p::after {
  content: "";
  position: absolute; left: 0; top: -3px;
  width: 7px; height: 7px;
  background: var(--oro);
  transform: rotate(45deg);
}
.risalto-foto,
.riga-staccata { margin-top: clamp(48px, 5vw, 72px); }

/* gli interni: le dotazioni con le icone del kit */
.dotazioni-icone { display: flex; gap: 10px; margin-bottom: 14px; }
.dotazioni-icone span {
  display: inline-grid;
  place-items: center;
  width: 44px; height: 44px;
  border: 1px solid var(--filo-oro);
  border-radius: 50%;
  color: var(--oro-testo);
}
.dotazioni-icone .ico { width: 19px; height: 19px; }
.riga-interni { margin-top: clamp(44px, 5vw, 64px); }

/* ════════════════════════════════════════════════════════════════════════════════
   4 · VINO E CUCINA
   ════════════════════════════════════════════════════════════════════════════════ */
/* la dichiarazione: la prima frase di una sezione, in grande, come una pagina della brochure */
.dichiarazione {
  max-width: 900px;
  margin: 0 auto;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(1.55rem, 1.1rem + 1.45vw, 2.4rem) !important;
  line-height: 1.3 !important;
  color: var(--bianco) !important;
  text-align: center;
  text-wrap: balance;
}
.dichiarazione-sotto { max-width: 640px; margin: 26px auto 0; text-align: center; }
.sezione-testa .filetto-corto { margin: 26px auto 0; }
.sezione-testa .filetto-rombo { width: 140px; margin: 0 auto 34px; }
.sezione-testa .sezione-link { margin-top: 28px; }

/* il riquadro: una sezione breve di solo testo, su un fondo più chiaro, chiusa da un filo d'oro */
.riquadro {
  position: relative;
  max-width: 980px;
  margin: 0 auto;
  padding: clamp(40px, 5vw, 64px) clamp(28px, 5vw, 72px);
  background:
    radial-gradient(ellipse 60% 80% at 85% 10%, rgba(68, 59, 52, 0.32), transparent 70%),
    var(--fondo-3);
  border: 1px solid var(--filo-oro);
  border-radius: 2px;
  box-shadow: var(--ombra-foto);
}
.riquadro::before {
  content: "";
  position: absolute;
  inset: 12px;
  border: 1px solid var(--filo-oro-tenue);
  pointer-events: none;
}
.riquadro .editoriale { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 64px); align-items: center; }
.riquadro h2 { font-size: clamp(1.9rem, 1.3rem + 1.6vw, 2.75rem); line-height: 1.08; }

/* ════════════════════════════════════════════════════════════════════════════════
   5 · EVENTI
   ════════════════════════════════════════════════════════════════════════════════ */
/* la fascia del referente: fondo profondo, fili d'oro sopra e sotto */
.fascia-scura {
  position: relative;
  padding: clamp(84px, 8vw, 124px) 0;
  text-align: center;
  background:
    radial-gradient(ellipse 50% 70% at 50% 50%, rgba(68, 59, 52, 0.3), transparent 72%),
    var(--fondo-profondo);
}
.fascia-scura::before,
.fascia-scura::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);
}
.fascia-scura::before { top: 0; }
.fascia-scura::after { bottom: 0; }
.fascia-scura h2 { max-width: 860px; margin: 0 auto 26px; font-size: var(--t-h2); line-height: 1.06; }
.fascia-scura p { max-width: 660px; margin-inline: auto; font-size: var(--t-lead) !important; }
.fascia-scura .filetto-rombo { width: 140px; margin: 0 auto 36px; }

/* le schede delle occasioni: le schede dei servizi, senza simbolo e senza link */
.occasioni .servizio { padding-top: 56px; }
.occasioni .servizio-titolo { margin-bottom: 14px; }
.occasioni .servizio-testo { margin-bottom: 0; }
.occasioni .servizio-numero { top: 26px; left: 36px; right: auto; font-size: 18px; color: var(--oro); }
.occasioni .servizio::before { transform: scaleX(1); opacity: .5; }

/* ════════════════════════════════════════════════════════════════════════════════
   6 · CONTATTI
   ════════════════════════════════════════════════════════════════════════════════ */
/* 2 Step (voce 11): niente più codice QR accanto ai recapiti, che restano in una colonna sola */
.recapiti {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(40px, 6vw, 96px);
  align-items: center;
}
.recapiti h2 { margin-bottom: 30px; }
.recapiti-testo { width: 100%; max-width: 780px; margin-inline: auto; }
.recapito-lista {
  display: grid;
  margin: 0 0 28px;
  border-top: 1px solid var(--linea-forte);
}
.recapito-lista li { border-bottom: 1px solid var(--linea-forte); }
.recapito-lista a {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
  padding: 20px 4px;
  transition: color 200ms ease, transform 140ms var(--ease-out);
  -webkit-touch-callout: none;
}
.recapito-icona {
  display: inline-grid;
  place-items: center;
  width: 52px; height: 52px;
  border: 1px solid var(--filo-oro);
  border-radius: 50%;
  color: var(--oro);
}
.recapito-icona .ico { width: 22px; height: 22px; }
.recapito-nome {
  display: block;
  margin-bottom: 2px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--oro-testo);
}
.recapito-valore {
  display: block;
  font-family: var(--serif);
  font-size: clamp(1.3rem, 1.1rem + 0.6vw, 1.7rem);
  line-height: 1.25;
  color: var(--bianco);
  overflow-wrap: anywhere;
}
.recapito-lista .ico-freccia { width: 14px; height: 14px; color: var(--oro-testo); transition: transform 200ms var(--ease-out); }
.recapito-lista a:active { transform: scale(0.985); }
@media (hover: hover) and (pointer: fine) {
  .recapito-lista a:hover .recapito-valore { color: var(--oro-testo); }
  .recapito-lista a:hover .ico-freccia { transform: translate(2px, -2px); }
}
.qr-scheda {
  justify-self: end;
  width: 100%;
  max-width: 300px;
  margin: 0;
  text-align: center;
}
.qr-cornice {
  position: relative;
  padding: 22px;
  background: var(--bianco);
  border-radius: 2px;
  box-shadow: 0 0 0 1px var(--filo-oro), 0 0 0 12px var(--fondo), 0 0 0 13px var(--filo-oro-tenue), var(--ombra-foto);
}
.qr-cornice img { width: 100%; height: auto; image-rendering: pixelated; }
.qr-scheda figcaption { margin-top: 30px; font-size: 15px; line-height: 1.55; color: var(--testo); }

/* dopo la richiesta: tre momenti legati da una linea d'oro verticale, senza numeri */
.percorso { position: relative; display: grid; gap: 34px; margin: 6px 0 0; padding-left: 36px; }
.percorso::before {
  content: "";
  position: absolute;
  left: 4px; top: 10px; bottom: 10px;
  width: 1px;
  background: linear-gradient(180deg, var(--filo-oro-forte), var(--filo-oro-tenue));
  transform-origin: top;
}
.percorso li { position: relative; }
.percorso li::before {
  content: "";
  position: absolute;
  left: -36px; top: 9px;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--oro);
  box-shadow: 0 0 0 5px var(--fondo), 0 0 14px rgba(253, 207, 117, 0.45);
}
.percorso p { margin: 0; font-size: var(--t-lead) !important; line-height: 1.55 !important; color: var(--bianco) !important; }
html.js .percorso.reveal::before { transform: scaleY(0); transition: transform 1300ms var(--ease-in-out) 250ms; }
html.js .percorso.reveal.in::before { transform: scaleY(1); }

/* dove operiamo: l'isola d'oro del kit, senza segnaposti */
.isola { --r: 1090/746; width: min(100%, 460px); margin: 0 auto; }
.isola img { width: 100%; height: auto; filter: drop-shadow(0 30px 60px rgba(7, 11, 11, 0.8)); }

/* il modulo nella pagina dei contatti */
.richiesta-contatti {
  padding-top: calc(var(--spazio-sezione) * 1.1);
  background:
    linear-gradient(180deg, var(--fondo) 0%, rgba(10, 16, 15, 0) 22%, rgba(10, 16, 15, 0) 80%, var(--fondo) 100%),
    radial-gradient(ellipse 55% 50% at 50% 55%, rgba(68, 59, 52, 0.28), transparent 72%),
    url("/assets/img/sfondo-cartografia.webp") center / cover no-repeat,
    var(--fondo);
}
.richiesta-contatti .modulo {
  position: relative;
  padding: clamp(28px, 3.4vw, 48px);
  background: rgba(13, 17, 15, 0.92);
  border: 1px solid var(--filo-oro);
  border-radius: 2px;
  box-shadow: var(--ombra-foto);
}
.richiesta-contatti .richiesta-sotto { margin-bottom: 8px; }
.richiesta-contatti .richiesta-nota { font-size: 16px; color: var(--testo-tenue); margin: 0 auto 40px; max-width: 640px; }
.preferenze-seggiolini-blocco { display: grid; gap: 12px; }
.preferenze-seggiolini-eta input { min-height: 48px; }
.preferenze-seggiolini-blocco:not(:has(input[type="checkbox"]:checked)) .preferenze-seggiolini-eta { display: none; }
.preferenze-seggiolini-eta { padding-left: 32px; }
.preferenze-nave .campo-aiuto { margin-top: 0; }

/* ════════════════════════════════════════════════════════════════════════════════
   7 · 404
   ════════════════════════════════════════════════════════════════════════════════ */
.non-trovata { margin-inline: auto; padding-top: clamp(24px, 6vh, 72px); }
.non-trovata .filetto-rombo { width: 140px; margin: 0 auto 40px; }

/* ════════════════════════════════════════════════════════════════════════════════
   8 · TABLET E TELEFONO
   ════════════════════════════════════════════════════════════════════════════════ */
@media (max-width: 960px) {
  .testa-griglia-larga { grid-template-columns: minmax(0, 1fr); }
  .testa-griglia-larga .testa-foto { justify-self: start; }
  .recapiti { grid-template-columns: minmax(0, 1fr); }
  .qr-scheda { display: none; }      /* il QR solo a schermo largo: dal telefono basta il pulsante WhatsApp */
  .riquadro .editoriale { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  /* il filo del viaggio sotto la testata: ingrandito come nella home, ma tagliato dentro la sua fascia
     (con il margine negativo della home uscirebbe dallo schermo) */
  .filo.filo-pagina { margin: -4px 0 0; overflow: hidden; }
  .filo.filo-pagina img { width: 180%; max-width: none; margin-left: -40%; }

  .testa-griglia-larga .testa-foto { --alto: 100000px; width: calc(100% - 10px); }

  .confronto { padding: 32px 22px 28px; gap: 34px; }
  .risalto-punti { grid-template-columns: minmax(0, 1fr); gap: 26px; margin: 24px 0; }
  /* la paratia: da telefono la riga scorre, come le altre righe di foto, alta al massimo 500 px: le foto restano intere,
     mai giganti una sotto l'altra, e la colonna della verticale è larga abbastanza perché la didascalia stia in 3 righe
     (27/10, collaudo dello step 7: affiancate, a 128 px, «Vista dell'abitacolo» andava su 5 righe) */
  .riga-foto.risalto-foto { --alto-tel: 500px; }

  /* gli interni: la panoramica in alto, sotto le due verticali affiancate */
  .riga-foto.riga-interni {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 24px 12px;
    overflow: visible;
    margin-right: 0;
    padding-right: 0;
    scroll-snap-type: none;
  }
  .riga-foto.riga-interni > .foto { width: auto; }
  .riga-foto.riga-interni > .foto:first-child { grid-column: 1 / -1; }
  /* con due foto sole (2 Step): la seconda sotto la prima, al centro, mai a mezza riga con un buco accanto */
  .riga-foto.riga-interni > .foto:nth-child(2):last-child { grid-column: 1 / -1; justify-self: center; width: min(100%, calc(440px * var(--r, 0.75))); }

  /* la riga del G7: da telefono una sotto l'altra, ognuna mai più larga della sua risoluzione */
  .riga-foto.riga-impila {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    gap: 32px;
    overflow: visible;
    margin-right: 0;
    padding-right: 0;
    scroll-snap-type: none;
  }
  .riga-foto.riga-impila > .foto { width: min(100%, var(--largo, 100%)); }

  .dichiarazione { text-align: left; }
  .dichiarazione-sotto { text-align: left; margin-left: 0; }
  .sezione-testa.testa-vino { text-align: left; }
  .sezione-testa.testa-vino .filetto-corto { margin-left: 0; }

  .riquadro { padding: 34px 22px; }
  .riquadro::before { inset: 8px; }

  .occasioni .servizio { display: flex; flex-direction: column; align-items: flex-start; text-align: left; padding: 46px 4px 28px; }
  .occasioni .servizio-numero { display: block; left: 4px; top: 20px; }
  .occasioni .servizio-titolo { font-size: 23px; }
  .occasioni .servizio-testo { font-size: 16px; }

  .fascia-scura { text-align: left; }
  .fascia-scura .filetto-rombo { margin-left: 0; }
  .fascia-scura .filetto-rombo::after { left: 4px; }

  .recapito-lista a { grid-template-columns: 44px minmax(0, 1fr) auto; gap: 14px; padding: 16px 2px; }
  .recapito-icona { width: 44px; height: 44px; }
  .recapito-icona .ico { width: 19px; height: 19px; }
  .recapito-valore { font-size: 1.2rem; }
  .percorso { padding-left: 30px; gap: 26px; }
  .percorso li::before { left: -30px; }
  .percorso p { font-size: 17.5px !important; }
  .isola { width: min(100%, 340px); }
  .richiesta-contatti .richiesta-nota { margin-bottom: 28px; }
  .richiesta-contatti .modulo { padding: 20px 14px; margin-inline: -4px; }
}

/* ════════════════════════════════════════════════════════════════════════════════
   9 · RIDUCI ANIMAZIONI: meno movimento, non zero
   ════════════════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  html.js .confronto .confronto-quota { transform: none; transition: none; }
  html.js .percorso.reveal::before { transform: none; transition: none; }
}

/* ── 26/10 · contatti, «dove operiamo»: solo testo, centrato (la Sicilia d'oro resta solo nella hero della home) ─── */
.dove-centro { text-align: center; }
.dove-centro .editoriale-testo { max-width: 680px; margin-inline: auto; }

/* 26/10 · la nota sulle foto migliorate (AI Act, art. 50), sotto le foto della pagina, come nelle pagine-a */
.nota-foto-riga { padding-bottom: 8px; }
.nota-foto-riga .thk-nota-foto { margin-top: 0; }