/* ===========================================================================
   TAXI NAVETTA LU SALENTU — Design system
   ---------------------------------------------------------------------------
   Il design generato con Stitch ("Salento Elite Mobility") è espresso in token
   Tailwind. Qui gli stessi token vivono come custom properties CSS che
   sovrascrivono le variabili di Bootstrap 5.3: stesso linguaggio visivo, senza
   introdurre Node/npm nella build — che su IIS sarebbe un costo permanente.

   Palette:
     Midnight Navy  #131b2e   autorità, affidabilità  → superfici scure, bottoni
     Gallipoli Gold #fed65b   accento premium         → sfondi e bordi, MAI testo
     Stone          #f7f9fb   fondale delle sezioni
     WhatsApp       #25d366   l'azione a più alta conversione

   Accessibilità: due token Stitch non passavano il contrasto WCAG AA e sono
   stati corretti. Vedi le note su --brand-navy-text e --brand-gold-text.
   =========================================================================== */

/* ---- Font self-hostati: nessuna chiamata a Google, quindi nessun IP dei
   visitatori inviato a server terzi (GDPR) e una connessione in meno da aprire.
   font-display:swap → il testo è leggibile subito, il font arriva dopo. ---- */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/inter-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/inter-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/inter-700.woff2') format('woff2');
}
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/playfair-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/playfair-700.woff2') format('woff2');
}

:root {
  /* ---- palette ---- */
  --brand-navy: #131b2e;
  --brand-navy-deep: #0c1220;

  /* Stitch proponeva #7c839b per il testo su fondo navy: 4.3:1, sotto la soglia
     AA di 4.5:1. Sostituito con #bec6e0 → 8.9:1. Un testo che non si legge non
     è una scelta estetica, è un difetto. */
  --brand-navy-text: #bec6e0;

  --brand-gold: #fed65b;
  --brand-gold-soft: #ffe088;

  /* Il gold su bianco è 1.6:1: illeggibile. Per il TESTO si usa la versione
     scura (#735c00 → 6.4:1 su bianco). Il gold acceso resta per sfondi e bordi. */
  --brand-gold-text: #735c00;

  --brand-whatsapp: #25d366;
  --brand-whatsapp-dark: #128c7e;

  --surface: #f7f9fb;
  --surface-alt: #eceef0;
  --on-surface: #191c1e;
  --on-surface-variant: #45464d;
  --outline: #76777d;
  --outline-variant: #c6c6cd;
  --danger: #ba1a1a;

  /* ---- ombre "sun-drenched": diffuse e tinte di navy, mai grigio fango ---- */
  --shadow-sm: 0 2px 8px -2px rgba(15, 23, 42, .06);
  --shadow-md: 0 12px 28px -12px rgba(15, 23, 42, .12);
  --shadow-lg: 0 20px 40px -15px rgba(15, 23, 42, .16);

  --radius: .5rem;
  --radius-lg: .75rem;
  --radius-xl: 1.25rem;

  /* ---- override Bootstrap ---- */
  --bs-primary: #131b2e;
  --bs-primary-rgb: 19, 27, 46;
  --bs-body-color: #191c1e;
  --bs-body-bg: #ffffff;
  --bs-body-font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --bs-body-line-height: 1.6;
  --bs-border-color: #c6c6cd;
  --bs-border-radius: .5rem;
  --bs-link-color: #131b2e;
  --bs-link-hover-color: #735c00;
  --bs-emphasis-color: #131b2e;
}

/* ===========================================================================
   BASE
   =========================================================================== */

body {
  font-family: var(--bs-body-font-family);
  color: var(--on-surface);
  background: #fff;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, .font-display {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--brand-navy);
}

h1 { font-size: clamp(2rem, 1.4rem + 2.6vw, 3rem); line-height: 1.15; font-weight: 700; }
h2 { font-size: clamp(1.6rem, 1.3rem + 1.4vw, 2rem); line-height: 1.25; }
h3 { font-size: 1.25rem; line-height: 1.35; }

.lead { font-size: 1.125rem; color: var(--on-surface-variant); }

/* Etichetta in maiuscoletto spaziato: la segnaletica delle boutique italiane. */
.eyebrow {
  display: block;
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--brand-gold-text);
  margin-bottom: .5rem;
}

.section { padding: 3.5rem 0; }
.section-lg { padding: 5rem 0; }
.bg-stone { background: var(--surface); }
.bg-navy { background: var(--brand-navy); color: #fff; }
.bg-navy h1, .bg-navy h2, .bg-navy h3 { color: #fff; }
.bg-navy p, .bg-navy li { color: var(--brand-navy-text); }
.bg-navy .eyebrow { color: var(--brand-gold); }

/* ---- Accessibilità: il focus si deve VEDERE. Chi naviga da tastiera non deve
   indovinare dove si trova. Niente outline:none, mai. ---- */
:focus-visible {
  outline: 3px solid var(--brand-gold-text);
  outline-offset: 2px;
  border-radius: 2px;
}
.bg-navy :focus-visible,
.site-footer :focus-visible,
.hero :focus-visible {
  outline-color: var(--brand-gold);
}

/* Salta al contenuto: primo elemento focusabile, invisibile finché non riceve
   il focus. Evita a chi usa la tastiera di riattraversare il menu a ogni pagina. */
.skip-link {
  position: absolute;
  left: -9999px;
  z-index: 2000;
  padding: .75rem 1.25rem;
  background: var(--brand-navy);
  color: #fff;
  border-radius: 0 0 var(--radius) 0;
}
.skip-link:focus { left: 0; top: 0; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ===========================================================================
   HEADER — glass nav
   =========================================================================== */

.site-header {
  position: sticky;
  top: 0;
  z-index: 1030;
  background: rgba(255, 255, 255, .92);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--outline-variant);
  transition: box-shadow .3s ease;
}
.site-header.is-scrolled { box-shadow: var(--shadow-sm); }

.brand {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 700;
  font-size: 1.3rem;
  color: var(--brand-navy);
  text-decoration: none;
  line-height: 1.15;
}
.brand small {
  display: block;
  font-family: 'Inter', sans-serif;
  font-size: .625rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--brand-gold-text);
}

.site-header .nav-link {
  font-weight: 500;
  color: var(--on-surface-variant);
  padding: .5rem .85rem;
}
.site-header .nav-link:hover,
.site-header .nav-link:focus { color: var(--brand-navy); }
.site-header .nav-link.active {
  color: var(--brand-navy);
  font-weight: 600;
  box-shadow: inset 0 -2px 0 var(--brand-gold);
}

/* ===========================================================================
   BOTTONI
   =========================================================================== */

.btn {
  font-weight: 600;
  border-radius: var(--radius);
  padding: .7rem 1.4rem;
  transition: transform .15s ease, box-shadow .2s ease, background-color .2s ease;
}
.btn:active { transform: scale(.98); }

.btn-navy {
  background: var(--brand-navy);
  color: #fff;
  border: 1px solid var(--brand-navy);
}
.btn-navy:hover,
.btn-navy:focus {
  background: var(--brand-navy-deep);
  color: #fff;
  box-shadow: var(--shadow-md);
}

.btn-gold {
  background: var(--brand-gold);
  color: var(--brand-navy);   /* navy su gold: 10.4:1 */
  border: 1px solid var(--brand-gold);
}
.btn-gold:hover,
.btn-gold:focus {
  background: var(--brand-gold-soft);
  color: var(--brand-navy);
  box-shadow: var(--shadow-md);
}

.btn-outline-navy {
  background: transparent;
  color: var(--brand-navy);
  border: 1px solid var(--brand-navy);
}
.btn-outline-navy:hover,
.btn-outline-navy:focus {
  background: var(--brand-navy);
  color: #fff;
}

.btn-outline-light-navy {
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .35);
  color: #fff;
  backdrop-filter: blur(10px);
}
.btn-outline-light-navy:hover,
.btn-outline-light-navy:focus {
  background: rgba(255, 255, 255, .2);
  color: #fff;
}

.btn-whatsapp {
  background: linear-gradient(135deg, var(--brand-whatsapp) 0%, var(--brand-whatsapp-dark) 100%);
  color: #fff;
  border: none;
}
.btn-whatsapp:hover,
.btn-whatsapp:focus {
  color: #fff;
  box-shadow: var(--shadow-md);
  filter: brightness(1.05);
}

/* ===========================================================================
   HERO
   =========================================================================== */

.hero {
  position: relative;
  display: flex;
  align-items: center;
  background: var(--brand-navy);
  color: #fff;
  overflow: hidden;
  padding: 4rem 0;
}
.hero--tall { min-height: 34rem; }
.hero__media {
  position: absolute;
  inset: 0;
}

/* Un vero <img> e non un background-image: l'immagine può venire dal JSON dei tour,
   e un background dinamico richiederebbe uno style inline — vietato dalla nostra CSP
   (style-src 'self'). In più un <img> ha un alt, quindi lo screen reader la descrive,
   e il browser può caricarla in modo pigro. */
.hero__photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.hero__media::after {
  content: '';
  position: absolute;
  inset: 0;
  /* Il gradiente non è decorazione: garantisce il contrasto del testo bianco
     su una foto di cui non controlliamo la luminosità. */
  background: linear-gradient(100deg, rgba(12, 18, 32, .94) 0%, rgba(12, 18, 32, .78) 45%, rgba(12, 18, 32, .45) 100%);
}
.hero__content { position: relative; z-index: 2; }
.hero h1 { color: #fff; }
.hero p { color: rgba(255, 255, 255, .9); }

.hero__badge {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .35rem 1rem;
  border: 1px solid rgba(255, 255, 255, .3);
  background: rgba(255, 255, 255, .1);
  backdrop-filter: blur(10px);
  border-radius: 999px;
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #fff;
}

/* ===========================================================================
   CARD
   =========================================================================== */

.card-soft {
  background: #fff;
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition: transform .2s ease, box-shadow .25s ease;
  /* height: 100%; */
  overflow: hidden;
}
.card-soft:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}

/* La card di una tratta è il componente più ripetuto del sito: deve dire in un
   colpo d'occhio dove si va, quanto dura e da quanto si parte. */
.route-card {
  display: flex;
  flex-direction: column;
  gap: .7rem;
  padding: 1.35rem;
  text-decoration: none;
  color: inherit;
  height: 100%;
}
.route-card__path {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--brand-navy);
  line-height: 1.35;
}
.route-card__arrow {
  color: var(--brand-gold-text);
  font-weight: 700;
  padding: 0 .3rem;
}
.route-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: .3rem .9rem;
  font-size: .875rem;
  color: var(--on-surface-variant);
}
.route-card__price {
  margin-top: auto;
  padding-top: .75rem;
  border-top: 1px solid var(--outline-variant);
  display: flex;
  align-items: baseline;
  gap: .4rem;
  flex-wrap: wrap;
}
.route-card__price strong {
  font-size: 1.4rem;
  color: var(--brand-navy);
  font-weight: 700;
  font-family: 'Playfair Display', Georgia, serif;
}
.route-card__price span {
  font-size: .8125rem;
  color: var(--on-surface-variant);
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .3rem .7rem;
  border-radius: 999px;
  background: var(--surface-alt);
  font-size: .8125rem;
  font-weight: 600;
  color: var(--on-surface-variant);
}
.chip-gold {
  background: var(--brand-gold-soft);
  color: var(--brand-gold-text);
}

.media-card {
  position: relative;
  display: block;
  min-height: 20rem;
  border-radius: var(--radius-lg);
  overflow: hidden;
  color: #fff;
  text-decoration: none;
  background: var(--brand-navy);
  box-shadow: var(--shadow-md);
}
.media-card__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .6s ease;
}
.media-card:hover .media-card__img { transform: scale(1.05); }

/* Immagine di copertina delle card tour: altezza fissa, ritaglio centrato. */
.tour-card__img {
  width: 100%;
  height: 12rem;
  object-fit: cover;
  display: block;
}

.gallery-img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.media-card__body {
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 1.75rem;
  background: linear-gradient(to top, rgba(12, 18, 32, .92) 10%, rgba(12, 18, 32, .35) 55%, rgba(12, 18, 32, .05) 100%);
  min-height: 20rem;
}
.media-card__body h3 { color: #fff; margin-bottom: .5rem; }
.media-card__body p { color: rgba(255, 255, 255, .88); margin: 0; font-size: .9375rem; }

/* ===========================================================================
   PREZZI — il cuore commerciale del sito.
   Il prezzo è A PERSONA. Se l'utente lo scambia per il totale, alla prima
   telefonata si sente ingannato: unitario e totale stanno SEMPRE insieme.
   =========================================================================== */

.price-hero {
  background: var(--brand-navy);
  color: #fff;
  border-radius: var(--radius-xl);
  padding: 1.75rem;
  box-shadow: var(--shadow-lg);
}
.price-hero__amount {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 3rem;
  font-weight: 700;
  line-height: 1;
  color: var(--brand-gold);
}
.price-hero__unit {
  font-size: .9375rem;
  color: var(--brand-navy-text);
}
.price-hero__total {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(255, 255, 255, .15);
  font-size: 1.0625rem;
  color: #fff;
}
.price-hero__total strong {
  color: var(--brand-gold);
  font-size: 1.35rem;
  font-family: 'Playfair Display', Georgia, serif;
}

.price-table th {
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--on-surface-variant);
  font-weight: 600;
}
.price-table td { vertical-align: middle; }
.price-table tbody tr.is-active { background: var(--brand-gold-soft); }
.price-table tbody tr.is-active td { font-weight: 700; color: var(--brand-navy); }

/* ===========================================================================
   FORM
   =========================================================================== */

.form-label {
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--on-surface-variant);
  margin-bottom: .35rem;
}
.form-control,
.form-select {
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius);
  padding: .7rem .9rem;
  font-size: 1rem;
}
.form-control:focus,
.form-select:focus {
  border-color: var(--brand-gold-text);
  box-shadow: 0 0 0 3px rgba(254, 214, 91, .4);
}
.form-control::placeholder { color: var(--outline); }

.quote-card {
  background: #fff;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  padding: 1.75rem;
  border: 1px solid var(--outline-variant);
}

/* Honeypot: invisibile all'utente e ai lettori di schermo (aria-hidden nel
   markup), ma presente nel DOM. I bot che compilano ogni campo si tradiscono.
   Niente display:none: i bot più accorti ignorano i campi così nascosti. */
.hp-field {
  position: absolute !important;
  left: -9999px !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.field-error,
.text-danger.field-validation-error,
span.field-validation-error {
  display: block;
  font-size: .875rem;
  color: var(--danger);
  margin-top: .3rem;
  font-weight: 500;
}
.input-validation-error { border-color: var(--danger) !important; }

.validation-summary-errors {
  background: #ffdad6;
  border: 1px solid var(--danger);
  border-radius: var(--radius);
  padding: 1rem 1.25rem;
  margin-bottom: 1.25rem;
  color: #93000a;
}
.validation-summary-errors ul { margin: 0; padding-left: 1.2rem; }
.validation-summary-valid { display: none; }

/* ===========================================================================
   FAQ — <details> nativo: zero JS, accessibile per costruzione
   =========================================================================== */

.faq-item {
  border-bottom: 1px solid var(--outline-variant);
  padding: 1.15rem 0;
}
.faq-item summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--brand-navy);
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  font-size: 1.05rem;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: '+';
  font-size: 1.5rem;
  line-height: 1;
  color: var(--brand-gold-text);
  transition: transform .2s ease;
  flex-shrink: 0;
}
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item p {
  margin: .85rem 0 0;
  color: var(--on-surface-variant);
}

/* ===========================================================================
   PAGINAZIONE
   =========================================================================== */

.pagination { gap: .35rem; }

.page-link {
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius);
  color: var(--brand-navy);
  font-weight: 600;
  /* 44px di lato: la dimensione minima di un bersaglio toccabile su mobile.
     Numeri più piccoli si sbagliano a premere, e chi sbaglia se ne va. */
  min-width: 2.75rem;
  min-height: 2.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: .5rem .85rem;
}
.page-link:hover {
  background: var(--surface-alt);
  color: var(--brand-navy);
  border-color: var(--outline);
}
.page-item.active .page-link {
  background: var(--brand-navy);
  border-color: var(--brand-navy);
  color: #fff;
}
.page-item.disabled .page-link {
  color: var(--outline);
  background: transparent;
  border-color: var(--outline-variant);
}

/* ===========================================================================
   BREADCRUMB
   =========================================================================== */

.breadcrumb {
  font-size: .875rem;
  margin: 0;
  padding: 1rem 0;
}
.breadcrumb a { color: var(--on-surface-variant); text-decoration: none; }
.breadcrumb a:hover { color: var(--brand-navy); text-decoration: underline; }
.breadcrumb-item + .breadcrumb-item::before { color: var(--outline); }

/* ===========================================================================
   AZIONI FLOTTANTI — su mobile chiamare deve costare un tap, non tre
   =========================================================================== */

.floating-actions {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 1040;
  display: flex;
  flex-direction: column;
  gap: .75rem;
}
.fab {
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-lg);
  color: #fff;
  border: none;
  transition: transform .15s ease;
}
.fab:hover { transform: scale(1.06); color: #fff; }
.fab:active { transform: scale(.94); }
.fab-whatsapp { background: linear-gradient(135deg, var(--brand-whatsapp) 0%, var(--brand-whatsapp-dark) 100%); }
.fab-phone { background: var(--brand-navy); }
.fab svg { width: 1.6rem; height: 1.6rem; fill: currentColor; }

/* Da desktop il telefono si chiama molto di rado: il FAB telefono resta
   solo su mobile, dove serve davvero. */
@media (min-width: 992px) {
  .fab-phone { display: none; }
}

/* ===========================================================================
   FOOTER
   =========================================================================== */

.site-footer {
  background: var(--brand-navy);
  color: var(--brand-navy-text);
  padding: 3.5rem 0 1.5rem;
}
.site-footer h2,
.site-footer h3 {
  color: #fff;
  font-size: 1rem;
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  margin-bottom: 1rem;
}
.site-footer a { color: var(--brand-navy-text); text-decoration: none; }
.site-footer a:hover { color: var(--brand-gold); text-decoration: underline; }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li { padding: .25rem 0; }
.site-footer__brand {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.4rem;
  font-weight: 700;
  color: #fff;
  text-transform: none;
  letter-spacing: 0;
}
.site-footer__legal {
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, .12);
  font-size: .8125rem;
  color: rgba(190, 198, 224, .75);
}

/* ===========================================================================
   COOKIE BANNER
   =========================================================================== */

.cookie-banner {
  position: fixed;
  left: 1rem;
  right: 1rem;
  bottom: 1rem;
  z-index: 1050;
  max-width: 32rem;
  background: #fff;
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 1.25rem;
}
.cookie-banner[hidden] { display: none; }

/* ===========================================================================
   UTILITY
   =========================================================================== */

.text-navy { color: var(--brand-navy) !important; }
.text-gold { color: var(--brand-gold-text) !important; }

/* Testo secondario sui fondi scuri: contrasto 8.9:1, ben oltre la soglia AA. */
.text-on-navy-muted { color: var(--brand-navy-text) !important; }

.shadow-soft { box-shadow: var(--shadow-md) !important; }
.rounded-xl { border-radius: var(--radius-xl) !important; }

/* Larghezza di lettura: oltre i ~75 caratteri per riga l'occhio fatica a
   ritrovare l'inizio della riga successiva. Sostituiscono i "style=max-width",
   che la Content Security Policy vieta (style-src 'self'). */
.measure-sm { max-width: 40rem; margin-inline: auto; }
.measure { max-width: 44rem; margin-inline: auto; }
.measure-lg { max-width: 46rem; margin-inline: auto; }

.icon {
  width: 1.25rem;
  height: 1.25rem;
  fill: currentColor;
  flex-shrink: 0;
}

.feature-icon {
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--brand-gold-soft);
  color: var(--brand-gold-text);
  flex-shrink: 0;
}
.feature-icon--lg {
  width: 5rem;
  height: 5rem;
}
.feature-icon--lg .icon {
  width: 2.5rem;
  height: 2.5rem;
}

/* Chip dell'orario nell'itinerario dei tour: larghezza fissa così le tappe
   restano incolonnate anche con orari di lunghezza diversa. */
.chip--time {
  min-width: 4.5rem;
  justify-content: center;
}

.check-list { list-style: none; padding: 0; margin: 0; }
.check-list li {
  display: flex;
  gap: .75rem;
  align-items: flex-start;
  padding: .45rem 0;
}
.check-list li::before {
  content: '✓';
  color: var(--brand-gold-text);
  font-weight: 700;
  flex-shrink: 0;
}
.bg-navy .check-list li::before { color: var(--brand-gold); }

.prose p { margin-bottom: 1.1rem; color: var(--on-surface-variant); }
.prose h2 { margin: 2.5rem 0 1rem; }
.prose h3 { margin: 2rem 0 .75rem; }
.prose ul { color: var(--on-surface-variant); margin-bottom: 1.1rem; }
.prose li { margin-bottom: .4rem; }