/* Exclusive Journeys — pagine-a.css · salto di livello del 25/10/2026
   Solo per: home, tour della Sicilia, escursioni dalla crociera, tour accessibili.
   Si appoggia al sistema dei componenti di style.css (DESIGN-SYSTEM.md) e ne usa le variabili: niente colori nuovi.
   Le foto del cliente non si tagliano mai: qui nessuna regola tocca le .foto (proporzioni, object-fit). */

/* un elemento con l'attributo hidden resta nascosto anche se il suo componente ha un display
   (la scelta della carrozzina nel modulo è una griglia: senza questa riga si vedrebbe sempre) */
[hidden] { display: none !important; }

/* ════════════════════════════════════════════════════════════════════════════════
   IL PIEDE COMUNE (uguale, riga per riga, a pagine-b.css § 1: 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; }
}

/* ════════════════════════════════════════════════════════════════════════════════
   HOME
   ════════════════════════════════════════════════════════════════════════════════ */

/* la riga dei porti, con la sua etichetta */
.porti-etichetta {
  margin: 0 0 10px;
  text-align: center;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--oro-spento);
}

/* i servizi: il link scritto per intero */
.servizio-link { letter-spacing: 0.02em; }

/* la didascalia della foto delle rampe */
.accesso-foto .didascalia { margin-top: 16px; }

/* il secondo paragrafo dei posti, nella sezione dell'accessibilità */
.accesso-posti p:last-child { margin-bottom: 0; }

/* le esperienze: i due rimandi, ognuno sotto la sua frase */
.esperienze-testo .esperienze-prova + .sezione-link { margin-bottom: 18px; }

/* le domande frequenti della home: titolo a sinistra, risposte a destra */
.domande-home .editoriale { align-items: start; }
.domande-home .editoriale-testa { position: sticky; top: 120px; }
.domande-home .domande { max-width: none; margin: 0; }
.domanda-risposta p { margin: 0 0 10px; font-size: 17px; line-height: 1.7; color: var(--testo); }
.domanda-risposta p:last-child { margin-bottom: 0; }
.domanda-risposta .link-oro { font-size: 16px; }

/* il motto: la terna è il titolo della fascia */
.motto h2.motto-frase { margin: 0; }

/* i tre passaggi sopra il modulo: una riga sottile, numerata */
.passi-riga {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  max-width: 1080px;
  margin: 0 auto 40px;
  text-align: left;
  counter-reset: passo;
  border-top: 1px solid var(--filo-oro);
  border-bottom: 1px solid var(--linea);
}
.passi-riga li {
  position: relative;
  display: flex;
  gap: 16px;
  align-items: baseline;
  padding: 22px 26px 22px 0;
  font-size: 16px;
  line-height: 1.55;
  color: var(--testo);
  counter-increment: passo;
}
.passi-riga li + li { padding-left: 26px; border-left: 1px solid var(--linea); }
.passi-riga li::before {
  content: "0" counter(passo);
  flex: none;
  font-family: var(--serif);
  font-style: italic;
  font-size: 26px;
  line-height: 1;
  color: var(--oro);
}

/* i recapiti sotto il modulo: anche la città e il rimando ai contatti */
.contatti .contatti-luogo { color: var(--testo); }
.contatti .link-oro { font-size: 18px; gap: 10px; }
.contatti .link-oro .ico { width: 14px; height: 14px; color: var(--oro-testo); }

/* il campo dei seggiolini: si apre con la spunta (senza JavaScript) */
.preferenze-seggiolini { display: grid; gap: 10px; }
.seggiolini-dettaglio { display: none; }
.preferenze-seggiolini:has(input[type="checkbox"]:checked) .seggiolini-dettaglio { display: block; }
.seggiolini-dettaglio input { width: 100%; min-height: 48px; padding: 12px 16px; font-family: var(--sans); font-size: 16px; color: var(--bianco); background: var(--fondo); border: 1px solid var(--linea-forte); border-radius: 3px; color-scheme: dark; }
.seggiolini-dettaglio input::placeholder { color: var(--testo-tenue); opacity: 1; }
.seggiolini-dettaglio input:focus { outline: none; border-color: var(--oro-testo); }
.preferenze-seggiolini:has(input[type="checkbox"]:checked) .seggiolini-dettaglio { animation: pannello-apre 240ms var(--ease-out); }

/* ════════════════════════════════════════════════════════════════════════════════
   PAGINE INTERNE · pezzi in più, coi componenti di style.css
   ════════════════════════════════════════════════════════════════════════════════ */

/* il simbolo d'oro della pagina, piccolo, sopra l'occhiello della testata (una volta sola) */
.testa-emblema {
  display: block;
  width: 58px;
  height: auto;
  margin: 0 0 26px;
  filter: drop-shadow(0 12px 26px rgba(253, 207, 117, 0.2));
}
.testa-sopra .testa-emblema { margin-bottom: 22px; }

/* la testata divisa: i pulsanti un po' più staccati dal testo; il numero della pagina resta accanto all'occhiello */
.testa-pagina .azioni { margin-top: 34px; }
.testa-pagina .occhiello-numerato { flex-wrap: nowrap; }
.testa-pagina .occhiello-numero { flex: none; }

/* il programma e i trasferimenti (escursioni): due sezioni impilate accanto a una foto */
.pila > section + section { margin-top: clamp(40px, 4vw, 56px); padding-top: clamp(36px, 3.6vw, 48px); border-top: 1px solid var(--linea); }
.pila h2 { font-size: clamp(1.85rem, 1.2rem + 1.5vw, 2.6rem); line-height: 1.1; margin-bottom: 20px; }
.pila p:last-child { margin-bottom: 0; }

/* la testata «sopra» (foto panoramica): titolo a sinistra, sottotitolo e pulsanti a destra, la foto sotto */
.testa-sopra .testa-sopra-griglia {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(32px, 5vw, 80px);
  align-items: end;
  max-width: none;
}
.testa-sopra-griglia h1 { margin-bottom: 0; }
.testa-sopra-griglia .testa-sotto { max-width: 480px; }
.testa-sopra-griglia .azioni { margin-top: 28px; }

/* la coppia: due sezioni di solo testo affiancate, divise da un filo */
.coppia {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
}
.coppia > section { position: relative; padding: 8px clamp(32px, 4.5vw, 72px) 8px 0; }
.coppia > section + section {
  padding: 8px 0 8px clamp(32px, 4.5vw, 72px);
  border-left: 1px solid var(--linea);
}
.coppia > section + section::before {
  content: "";
  position: absolute;
  left: -4px; top: 0;
  width: 7px; height: 7px;
  background: var(--oro);
  transform: rotate(45deg);
  box-shadow: 0 0 0 6px var(--fondo-3);
}
.coppia h2 {
  font-size: clamp(1.85rem, 1.2rem + 1.5vw, 2.6rem);
  line-height: 1.1;
  margin-bottom: 22px;
}
.coppia p { max-width: 54ch; }
.coppia .sezione-link { margin-top: 6px; }
.coppia-simbolo {
  display: block;
  width: 72px;
  height: auto;
  margin: 0 auto 40px;
  filter: drop-shadow(0 14px 30px rgba(253, 207, 117, 0.18));
}

/* le durate (tour della Sicilia): tre segni d'oro */
.durate {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0 0 28px;
  border-top: 1px solid var(--filo-oro);
  border-bottom: 1px solid var(--linea);
}
.durate li {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 18px 12px 16px 0;
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.15rem, 1rem + 0.4vw, 1.4rem);
  line-height: 1.15;
  color: var(--bianco);
}
.durate li + li { padding-left: 16px; border-left: 1px solid var(--linea); }
.durate .ico { width: 18px; height: 18px; color: var(--oro-testo); }

/* i luoghi (aeroporti): due righe in oro con l'icona della posizione */
.luoghi {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0 0 28px;
  border-top: 1px solid var(--filo-oro);
  border-bottom: 1px solid var(--linea);
}
.luoghi li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 12px 16px 0;
  font-family: var(--serif);
  font-size: clamp(1.3rem, 1.1rem + 0.5vw, 1.6rem);
  line-height: 1.1;
  color: var(--bianco);
}
.luoghi li + li { padding-left: 16px; border-left: 1px solid var(--linea); }
.luoghi .ico { width: 20px; height: 20px; color: var(--oro); }

/* la riga dei temi della brochure («Natura · Vita siciliana · Viaggio esclusivo»), in oro */
.temi {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 0;
  margin: 26px 0 0;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--oro-testo);
}
.temi li { display: inline-flex; align-items: center; }
.temi li + li::before {
  content: "";
  width: 5px; height: 5px;
  margin: 0 18px;
  background: var(--oro-spento);
  transform: rotate(45deg);
}
.sezione-testa .temi { justify-content: center; }

/* le mete: l'introduzione della sezione (testo + foto, o solo testo) e le schede sotto */
.mete-intro { margin-bottom: clamp(48px, 5vw, 72px); }
.mete-intro.editoriale-foto { align-items: center; }
.mete-testa {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(32px, 6vw, 96px);
  align-items: end;
  margin-bottom: clamp(44px, 4.5vw, 64px);
}
.mete-testa h2 { margin: 0; }
.mete-testa .temi { margin-top: 22px; }
.mete-testa p:last-of-type { margin-bottom: 0; }

/* il segnaposto elegante delle mete, finché ChatGPT non manda i paesaggi: la carta, il filo e la cifra */
.meta-attesa { aspect-ratio: 4 / 3; }
.meta-cifra {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(2.6rem, 2rem + 1.4vw, 3.4rem);
  line-height: 1;
  color: var(--oro);
}
.meta-cifra::after {
  content: "";
  width: 7px; height: 7px;
  background: var(--oro-spento);
  transform: rotate(45deg);
}
.meta .meta-foto + h3 { margin-top: 22px; }
@media (hover: hover) and (pointer: fine) {
  .meta-attesa { transition: border-color 260ms ease; }
  .meta:hover .meta-attesa { border-color: var(--filo-oro-forte); }
}

/* i porti di scalo (escursioni): quattro righe col nome in evidenza */
.porti-scalo {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 8px 0 28px;
  border-top: 1px solid var(--filo-oro);
}
.porti-scalo li {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  column-gap: 14px;
  align-content: start;
  padding: 20px 16px 20px 0;
  border-bottom: 1px solid var(--linea);
}
.porti-scalo li:nth-child(even) { padding-left: 20px; border-left: 1px solid var(--linea); }
.porti-scalo .ico { grid-row: 1 / span 2; width: 20px; height: 20px; margin-top: 4px; color: var(--oro); }
.porto-nome {
  display: block;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.3rem, 1.1rem + 0.5vw, 1.55rem);
  line-height: 1.2;
  color: var(--bianco);
}
.porto-meta { display: block; margin-top: 4px; font-size: 15.5px; line-height: 1.5; color: var(--testo-tenue); }

/* l'editoriale con una foto stretta (verticale 9:20): la foto a sinistra, il testo largo */
.editoriale-stretta {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
  gap: clamp(36px, 6vw, 104px);
  align-items: center;
}
.editoriale-stretta .foto { --alto: 640px; justify-self: center; }
.editoriale-stretta .editoriale-testo h2 { margin-bottom: 22px; }

/* i due modi di viaggiare (tour accessibili): due riquadri con la cifra grande */
.posti {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin: 8px 0 0;
}
.posti li {
  position: relative;
  padding: 26px 24px 24px;
  border: 1px solid var(--filo-oro);
  border-radius: 2px;
  background: linear-gradient(180deg, rgba(16, 22, 22, 0.9), rgba(10, 16, 15, 0.6));
}
.posti li::before {
  content: "";
  position: absolute; left: 24px; right: 24px; top: -1px;
  height: 1px;
  background: linear-gradient(90deg, var(--oro), transparent);
}
.posti-cifra {
  display: block;
  margin-bottom: 14px;
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(3.4rem, 2.6rem + 2vw, 4.4rem);
  line-height: 0.9;
  color: var(--oro);
  font-variant-numeric: lining-nums;
}
.posti p { margin: 0; font-size: 16px; line-height: 1.6; color: var(--testo); }
.posti strong { display: block; margin-bottom: 4px; font-weight: 600; color: var(--bianco); }

/* l'omologazione: una sezione breve e solenne, centrata */
.solenne { text-align: center; }
.solenne h2 { max-width: 860px; margin: 0 auto; }
.solenne .filetto-corto { margin: 30px auto; }
.solenne p { max-width: 640px; margin-inline: auto; }
.solenne .testo-lead { margin-bottom: 14px; }

/* la nota delle foto migliorate, sotto le foto della pagina */
.nota-foto-riga { padding-bottom: 8px; }
.nota-foto-riga .thk-nota-foto { margin-top: 0; }

/* la fascia finale: i passaggi numerati e il link ai contatti */
.fascia-finale .passi-numerati { max-width: 980px; margin: 48px auto 8px; text-align: left; }
.fascia-finale .passi-numerati li p:not(.occhiello) { max-width: none; margin: 0; font-size: 16.5px; line-height: 1.65; }
.fascia-finale p.fascia-link { margin: 28px auto 0; }
.fascia-finale .fascia-link .link-oro { font-size: 17px; }
.fascia-finale p.fascia-sotto + p.fascia-sotto { margin-top: 10px; }

/* il paragrafo con l'icona (bagagli, trasferimenti) */
.riga-icona { display: flex; gap: 14px; align-items: flex-start; }
.riga-icona .ico { width: 20px; height: 20px; margin-top: 5px; color: var(--oro-testo); }

/* ════════════════════════════════════════════════════════════════════════════════
   TABLET E TELEFONO
   ════════════════════════════════════════════════════════════════════════════════ */
@media (max-width: 960px) {
  .domande-home .editoriale-testa { position: static; }
  .testa-sopra .testa-sopra-griglia { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .coppia { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .coppia > section { padding: 0 0 40px; }
  .coppia > section + section { padding: 44px 0 0; border-left: 0; border-top: 1px solid var(--linea); }
  .coppia > section + section::before { left: 0; top: -4px; }
  .mete-testa { grid-template-columns: minmax(0, 1fr); gap: 18px; align-items: start; }
  .editoriale-stretta { grid-template-columns: minmax(0, 1fr); }
  .editoriale-stretta .foto { order: 2; }
  .passi-riga { grid-template-columns: minmax(0, 1fr); }
  .passi-riga li { padding: 16px 0; }
  .passi-riga li + li { padding-left: 0; border-left: 0; border-top: 1px solid var(--linea); }
}

@media (max-width: 760px) {
  .hero-sotto { max-width: 350px; }
  .porti-etichetta { font-size: 10.5px; letter-spacing: 0.28em; }
  .domanda-risposta p { font-size: 16.5px; }
  .testa-emblema { width: 48px; margin-bottom: 20px; }
  .coppia h2 { font-size: clamp(1.8rem, 1.4rem + 2.4vw, 2.2rem); }
  .coppia-simbolo { width: 60px; margin-bottom: 30px; }
  .durate li { font-size: 1.1rem; padding-right: 8px; }
  .durate li + li { padding-left: 10px; }
  .luoghi li { font-size: 1.3rem; }
  .temi { gap: 10px 20px; font-size: 11px; letter-spacing: 0.24em; }
  .temi li::before,
  .temi li + li::before {
    content: "";
    width: 5px; height: 5px;
    margin: 0 10px 0 0;
    background: var(--oro-spento);
    transform: rotate(45deg);
  }
  .meta-attesa { aspect-ratio: 5 / 4; }
  .porti-scalo { grid-template-columns: minmax(0, 1fr); }
  .porti-scalo li:nth-child(even) { padding-left: 0; border-left: 0; }
  .porti-scalo li { padding: 16px 0; }
  .editoriale-stretta .foto { --alto: 540px; }
  .posti { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .posti li { padding: 18px 18px 18px; }
  .posti li::before { left: 18px; right: 18px; }
  .posti-cifra { margin: 0 0 8px; font-size: 2.9rem; }
  .posti strong { display: inline; margin: 0; }
  .atlante-nota p { max-width: 206px; }
  .pila > section + section { margin-top: 36px; padding-top: 32px; }
  .solenne .filetto-corto { margin: 24px auto; }
  .contatti .link-oro { font-size: 17px; }
}

/* ── 26/10 · le mete senza riquadri vuoti: finché ChatGPT non manda i paesaggi, la scheda è solo testo, con la cifra
   e il filo d'oro; quando arriva l'immagine, si toglie la classe meta-attesa e torna il riquadro 4:5 ─────────────── */
.meta:has(.meta-attesa) { padding-top: 22px; border-top: 1px solid var(--filo-oro); }
.meta-foto.meta-attesa {
  aspect-ratio: auto;
  overflow: visible;
  display: block;
  place-items: start;
  justify-items: start;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: none;
}
.meta-foto.meta-attesa::after { display: none; }
.meta-attesa .meta-cifra { flex-direction: row; align-items: center; gap: 16px; font-size: 30px; }
.meta-attesa .meta-cifra::after { width: 44px; height: 1px; background: var(--filo-oro); transform: none; }
.meta .meta-foto.meta-attesa + h3 { margin-top: 14px; }
@media (max-width: 760px) {
  .mete:has(.meta-attesa) {
    grid-auto-flow: row;
    grid-auto-columns: auto;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px 18px;
    overflow: visible;
    margin-right: 0;
    padding-right: 0;
  }
  .meta-attesa .meta-cifra { font-size: 24px; }
}

/* ── 26/10 · tour accessibili: la foto della porta laterale dentro l'omologazione, intera e centrata ──────────── */
.solenne .foto-centro { margin: clamp(36px, 4vw, 56px) auto 0; text-align: left; }
/* 26/10 · sotto i 480 px le mete in attesa vanno su una colonna: su due, le descrizioni passavano le 3 righe */
@media (max-width: 480px) {
  .mete:has(.meta-attesa) { grid-template-columns: minmax(0, 1fr); gap: 24px; }
}

/* ── 26/10 · il prezzo di una meta, solo se nel pannello «Il prezzo si vede?» è «Sì» (alla consegna non si vede mai) ── */
.meta .meta-prezzo {
  margin-top: 12px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--oro-testo);
}