/* ============================================================================
   Incredible Tours and Vacation — sistema di base
   ----------------------------------------------------------------------------
   Prima di questo file il sito dichiarava 185 colori distinti e 43 dimensioni
   di testo su 13 fogli di stile: nessuna coerenza era possibile, ogni pagina
   era composta a occhio. Qui ci sono sei colori e sei dimensioni.

   Caricato per ultimo, quindi vince sul CSS del template acquistato, che verra
   rimosso a fine riprogettazione.
   ========================================================================== */

:root{
  /* Colore — preso dalle loro fotografie: il marmo di Gaitore, l'indaco della
     stampa a blocchi rajasthana, l'ottone. Volutamente non il saffron su crema
     che usano tutti gli operatori indiani. */
  --c-ground:#F6F4EF;
  --c-surface:#FFFFFF;
  --c-sand:#EDE9E0;
  --c-ink:#191C24;
  --c-muted:#5C6070;
  --c-faint:#8E93A3;
  --c-rule:#DFDACF;
  --c-indigo:#2A3A66;
  --c-indigo-dark:#1E2B4E;
  --c-indigo-soft:#E5E9F3;
  --c-brass:#A9803C;
  --c-brass-soft:#F3EADA;
  --c-rose:#9E4A52;
  --c-on-dark:#F6F4EF;

  /* Tipografia — due caratteri, due ruoli. */
  --f-display:"Newsreader",Georgia,"Times New Roman",serif;
  --f-body:"Karla",system-ui,-apple-system,"Segoe UI",sans-serif;

  /* Il template applica i caratteri tramite queste due variabili, definite in
     global.css. Ridefinirle qui li cambia ovunque in un colpo solo, invece di
     rincorrere la specificita regola per regola. */
  --primary-font:var(--f-display);
  --secondary-font:var(--f-body);

  /* Scala: sei valori, non quarantatre. */
  --t-xs:0.8125rem;
  --t-sm:0.9375rem;
  --t-base:1.0625rem;
  --t-lg:1.3125rem;
  --t-xl:1.75rem;
  --t-2xl:2.375rem;
  --t-3xl:clamp(2.25rem,4.6vw,3.5rem);

  /* Spaziatura su base 4. */
  --s-1:.25rem; --s-2:.5rem;  --s-3:.75rem; --s-4:1rem;
  --s-6:1.5rem; --s-8:2rem;   --s-12:3rem;  --s-16:4rem; --s-24:6rem;

  --r-sm:3px; --r-md:6px; --r-lg:12px; --r-full:999px;
  --shadow:0 1px 2px rgba(25,28,36,.05),0 8px 24px -12px rgba(25,28,36,.14);
  --maxw:1180px;
  --readable:68ch;
}

/* ---------- base ---------------------------------------------------------- */
body.boxed_wrapper{
  background:var(--c-ground);
  color:var(--c-ink);
  font-family:var(--f-body);
  font-size:var(--t-base);
  line-height:1.68;
  -webkit-font-smoothing:antialiased;
}
.boxed_wrapper h1,.boxed_wrapper h2,.boxed_wrapper h3,.boxed_wrapper h4{
  font-family:var(--f-display);
  color:var(--c-ink);
  letter-spacing:-.012em;
  text-wrap:balance;
}
.boxed_wrapper h1{font-size:var(--t-3xl);font-weight:300;line-height:1.04}
.boxed_wrapper h2{font-size:var(--t-2xl);font-weight:400;line-height:1.14}
.boxed_wrapper h3{font-size:var(--t-xl);font-weight:500;line-height:1.24}
.boxed_wrapper h4{font-size:var(--t-lg);font-weight:500;line-height:1.3}
.boxed_wrapper p{line-height:1.68}
.boxed_wrapper a{color:var(--c-indigo);text-underline-offset:3px;transition:color .15s}
.boxed_wrapper a:hover{color:var(--c-indigo-dark)}
.boxed_wrapper a:focus-visible,
.boxed_wrapper button:focus-visible{outline:2px solid var(--c-indigo);outline-offset:3px;border-radius:var(--r-sm)}
.boxed_wrapper img{max-width:100%;height:auto}

/* Il titolo lungo di una sezione non deve superare la larghezza leggibile. */
.prose{max-width:var(--readable)}

/* ---------- header -------------------------------------------------------- */
.sh{position:sticky;top:0;z-index:60;background:var(--c-surface);
  border-bottom:1px solid var(--c-rule)}
.sh-top{background:var(--c-ink);color:rgba(246,244,239,.82);font-size:var(--t-xs)}
.sh-top .sh-in{display:flex;justify-content:space-between;gap:var(--s-4);
  padding:var(--s-2) var(--s-6);flex-wrap:wrap}
.sh-top a{color:rgba(246,244,239,.92);text-decoration:none}
.sh-top a:hover{color:#E3C48C}
.sh-top .sh-contacts{display:flex;gap:var(--s-6);flex-wrap:wrap}
.sh-in{max-width:var(--maxw);margin:0 auto;padding:0 var(--s-6)}
.sh-main{display:flex;align-items:center;justify-content:space-between;
  gap:var(--s-6);padding:var(--s-3) var(--s-6);max-width:var(--maxw);margin:0 auto}
.sh-logo{display:flex;align-items:center;gap:var(--s-3);text-decoration:none;flex-shrink:0}
.sh-logo img{height:46px;width:auto;display:block}
.sh-logo .sh-wordmark{display:flex;flex-direction:column;line-height:1.15}
.sh-logo .sh-name{font-family:var(--f-display);font-size:1.0625rem;font-weight:500;color:var(--c-ink)}
.sh-logo .sh-tag{font-size:.6875rem;letter-spacing:.13em;text-transform:uppercase;color:var(--c-brass)}
.sh-nav{display:flex;align-items:center;gap:var(--s-6);margin-left:auto}
.sh-nav a{font-size:var(--t-sm);font-weight:500;color:var(--c-ink);text-decoration:none;
  padding:var(--s-2) 0;border-bottom:2px solid transparent}
.sh-nav a:hover{color:var(--c-indigo);border-bottom-color:var(--c-brass)}
.sh-nav a[aria-current="page"]{border-bottom-color:var(--c-indigo);color:var(--c-indigo)}
.sh-cta{flex-shrink:0}
.sh-burger{display:none;background:none;border:1px solid var(--c-rule);border-radius:var(--r-sm);
  padding:9px 11px;cursor:pointer;line-height:0}
.sh-burger span{display:block;width:19px;height:2px;background:var(--c-ink);margin:3.5px 0;border-radius:2px}

.sh-drawer{position:fixed;inset:0;z-index:70;display:none}
.sh-drawer[open]{display:block}
.sh-drawer .sh-scrim{position:absolute;inset:0;background:rgba(25,28,36,.5)}
.sh-drawer .sh-panel{position:absolute;top:0;right:0;bottom:0;width:min(320px,86vw);
  background:var(--c-surface);padding:var(--s-6);display:flex;flex-direction:column;gap:var(--s-2);
  overflow-y:auto}
/* :not(.btn) perche questo selettore, a specificita 0-3-1, batteva
   .boxed_wrapper .btn--primary: nel menu mobile "Plan your trip" usciva con il
   testo color inchiostro su fondo indaco, praticamente illeggibile. */
.sh-drawer .sh-panel a:not(.btn){display:block;padding:var(--s-3) 0;font-size:var(--t-lg);
  font-family:var(--f-display);color:var(--c-ink);text-decoration:none;
  border-bottom:1px solid var(--c-rule)}
.sh-drawer .sh-panel .btn{display:block;font-family:var(--f-body);
  font-size:var(--t-sm);padding:14px 20px}
.sh-drawer .sh-panel .btn--primary{color:#fff}
.sh-drawer .sh-panel .btn--ghost{color:var(--c-ink)}
.sh-close{align-self:flex-end;background:none;border:0;font-size:26px;line-height:1;
  cursor:pointer;color:var(--c-muted);padding:0 0 var(--s-2)}

/* ---------- pulsanti ------------------------------------------------------ */
.boxed_wrapper .btn{display:inline-block;padding:12px 22px;border-radius:var(--r-sm);font-size:var(--t-sm);
  font-weight:700;text-decoration:none;border:1px solid transparent;cursor:pointer;
  transition:background .15s,color .15s,border-color .15s;font-family:var(--f-body)}
.boxed_wrapper .btn--primary{background:var(--c-indigo);color:#fff}
.boxed_wrapper .btn--primary:hover{background:var(--c-indigo-dark);color:#fff}
.boxed_wrapper .btn--brass{background:var(--c-brass);color:#1A1508}
.boxed_wrapper .btn--brass:hover{background:#936D2F;color:#1A1508}
.boxed_wrapper .btn--ghost{border-color:var(--c-rule);color:var(--c-ink);background:transparent}
.boxed_wrapper .btn--ghost:hover{border-color:var(--c-indigo);color:var(--c-indigo)}
.boxed_wrapper .btn--on-dark{border-color:rgba(246,244,239,.5);color:var(--c-on-dark)}
.boxed_wrapper .btn--on-dark:hover{background:rgba(246,244,239,.12);color:var(--c-on-dark)}

/* ---------- footer -------------------------------------------------------- */
.sf{background:var(--c-ink);color:rgba(246,244,239,.74);margin-top:var(--s-24);
  font-size:var(--t-sm)}
.sf-in{max-width:var(--maxw);margin:0 auto;padding:var(--s-16) var(--s-6) var(--s-8)}
.sf-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:var(--s-12)}
/* I titoli di colonna del footer erano h4 dopo un h2 di pagina: un salto di
   livello su ogni pagina del sito. Sono h2, con l'aspetto di prima. */
.sf h2{color:var(--c-on-dark);font-size:var(--t-sm);font-family:var(--f-body);font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;margin:0 0 var(--s-4)}
.sf a{color:rgba(246,244,239,.82);text-decoration:none}
.sf a:hover{color:#E3C48C}
.sf ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--s-2)}
.sf-about p{max-width:42ch;margin:var(--s-4) 0 var(--s-6)}
.sf-logo img{height:52px;width:auto;background:#fff;padding:6px 10px;border-radius:var(--r-sm)}
.sf-social{display:flex;gap:var(--s-3)}
.sf-social a{width:38px;height:38px;border:1px solid rgba(246,244,239,.28);border-radius:50%;
  display:grid;place-items:center}
.sf-social a:hover{border-color:#E3C48C;background:rgba(227,196,140,.12)}
.sf-badge{display:inline-flex;align-items:center;gap:var(--s-2);background:rgba(246,244,239,.08);
  border:1px solid rgba(246,244,239,.16);border-radius:var(--r-full);padding:6px 14px;
  font-size:var(--t-xs);color:var(--c-on-dark);margin-bottom:var(--s-4)}
.sf-badge b{color:#E3C48C}
.sf-bottom{border-top:1px solid rgba(246,244,239,.14);margin-top:var(--s-12);padding-top:var(--s-6);
  display:flex;justify-content:space-between;gap:var(--s-4);flex-wrap:wrap;
  font-size:var(--t-xs);color:rgba(246,244,239,.55)}

/* ---------- azioni flottanti --------------------------------------------- */
.fab{position:fixed;right:18px;z-index:50;width:52px;height:52px;border-radius:50%;
  display:grid;place-items:center;box-shadow:var(--shadow);border:0;overflow:hidden}
.fab--wa{bottom:18px;background:#29A71A}
.fab--ta{bottom:82px;background:var(--c-surface);border:1px solid var(--c-rule)}
.fab img,.fab svg{width:30px;height:30px;display:block}
.fab--ta img{width:100%;height:100%;object-fit:cover;border-radius:50%}

/* ---------- responsive ---------------------------------------------------- */
@media (max-width:1000px){
  .sh-nav{display:none}
  .sh-burger{display:block}
  .sh-cta{display:none}
  .sf-grid{grid-template-columns:1fr;gap:var(--s-8)}
  .sh-top .sh-contacts{gap:var(--s-4)}
}
@media (max-width:680px){
  /* La barra contatti mandava a capo telefono ed email, occupando 110px
     prima ancora del logo: su un telefono e spazio rubato all'apertura.
     Resta il solo telefono, che e anche l'unica delle due su cui si tocca. */
  .sh-top .sh-in{justify-content:center}
  .sh-top .sh-hours{display:none}
  .sh-top .sh-contacts a[href^="mailto"]{display:none}
  .sh-logo img{height:38px}
  .hero-in{padding:var(--s-12) var(--s-4) var(--s-8)}
  .hero .eyebrow{font-size:11px;letter-spacing:.1em}
  .hero p{font-size:var(--t-base)}
  .hero-cta .btn{flex:1;text-align:center}
}
@media (max-width:400px){
  .sh-logo .sh-wordmark{display:none}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}

/* ============================================================================
   Componenti di pagina — fase 3
   ========================================================================== */

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--s-6)}
.wrap--narrow{max-width:820px}
.section{padding:var(--s-24) 0}
.section--tight{padding:var(--s-16) 0}
.section--sand{background:var(--c-sand)}
.section--ink{background:var(--c-ink);color:rgba(246,244,239,.8)}
.section--ink h2,.section--ink h3{color:var(--c-on-dark)}

.eyebrow{font-size:var(--t-xs);letter-spacing:.15em;text-transform:uppercase;
  color:var(--c-brass);font-weight:700;margin:0 0 var(--s-3)}
.lede{font-size:var(--t-lg);color:var(--c-muted);max-width:var(--readable);line-height:1.6}
.section-head{margin-bottom:var(--s-12)}
.section-head h2{margin:0 0 var(--s-3)}

/* ---------- hero ---------------------------------------------------------- */
.hero{position:relative;min-height:min(78vh,620px);display:flex;align-items:flex-end;
  background-size:cover;background-position:center 42%}
/* Le aperture con persone hanno bisogno di piu altezza: una foto di gruppo
   dentro una fascia bassa viene tagliata sulle teste. Le aperture di sola
   scenografia restano basse. */
.hero--people{min-height:min(82vh,660px);background-position:center 46%}
.hero::after{content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(14,16,22,.92) 0%,rgba(14,16,22,.5) 45%,rgba(14,16,22,.15) 100%)}
.hero-in{position:relative;z-index:1;width:100%;max-width:var(--maxw);margin:0 auto;
  padding:var(--s-16) var(--s-6) var(--s-12);color:var(--c-on-dark)}
.hero .eyebrow{color:#E3C48C}
.hero h1{color:var(--c-on-dark);max-width:16ch;margin:0 0 var(--s-4)}
.hero h1 em{font-style:italic;color:#E3C48C}
.hero p{font-size:var(--t-lg);color:rgba(246,244,239,.88);max-width:48ch;margin:0 0 var(--s-8)}
.hero-cta{display:flex;gap:var(--s-3);flex-wrap:wrap}

/* striscia di prova sociale, subito sotto l'apertura */
.proof{background:var(--c-ink);color:rgba(246,244,239,.82);border-top:1px solid rgba(246,244,239,.12)}
.proof-in{max-width:var(--maxw);margin:0 auto;padding:var(--s-4) var(--s-6);
  display:flex;gap:var(--s-8);flex-wrap:wrap;font-size:var(--t-sm);align-items:center}
.proof b{color:#E3C48C;font-weight:700}
.proof a{color:rgba(246,244,239,.82);margin-left:auto}

/* ---------- schede ------------------------------------------------------- */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:var(--s-6)}
.card{background:var(--c-surface);border:1px solid var(--c-rule);border-radius:var(--r-lg);
  overflow:hidden;display:flex;flex-direction:column;transition:box-shadow .2s,transform .2s}
.card:hover{box-shadow:var(--shadow);transform:translateY(-2px)}
.card>a.card-img{display:block;line-height:0}
.card img{width:100%;aspect-ratio:3/2;object-fit:cover;display:block}
.card-body{padding:var(--s-6);display:flex;flex-direction:column;gap:var(--s-3);flex:1}
.card .eyebrow{margin:0}
.card h3{margin:0;font-size:var(--t-lg)}
.card h3 a{color:inherit;text-decoration:none}
.card h3 a:hover{color:var(--c-indigo)}
.card p{margin:0;color:var(--c-muted);font-size:var(--t-sm);flex:1}
.card-foot{display:flex;justify-content:space-between;align-items:center;gap:var(--s-3);
  padding-top:var(--s-3);border-top:1px solid var(--c-rule);font-size:var(--t-sm)}
.card-foot .price{font-family:var(--f-display);font-size:var(--t-lg);color:var(--c-ink)}

/* ---------- elenco puntato con segno di spunta --------------------------- */
.ticks{list-style:none;padding:0;margin:0;display:grid;gap:var(--s-3)}
.ticks li{padding-left:var(--s-8);position:relative}
.ticks li::before{content:"";position:absolute;left:0;top:.55em;width:14px;height:8px;
  border-left:2px solid var(--c-brass);border-bottom:2px solid var(--c-brass);
  transform:rotate(-45deg)}

/* ---------- itinerario giorno per giorno --------------------------------- */
.itin{list-style:none;padding:0;margin:0;counter-reset:d}
.itin>li{counter-increment:d;display:grid;grid-template-columns:76px 1fr;gap:var(--s-6);
  padding:var(--s-6) 0;border-bottom:1px solid var(--c-rule)}
.itin>li:last-child{border-bottom:0}
.itin .day{font-size:var(--t-xs);letter-spacing:.12em;text-transform:uppercase;
  color:var(--c-brass);font-weight:700;padding-top:.35em}
.itin .day span{display:block;font-family:var(--f-display);font-size:var(--t-2xl);
  font-weight:300;color:var(--c-ink);letter-spacing:-.02em;line-height:1}
.itin h3{margin:0 0 var(--s-2);font-size:var(--t-lg)}
.itin p{margin:0;color:var(--c-muted)}


/* ---------- responsive ---------------------------------------------------- */
@media (max-width:760px){
  .section{padding:var(--s-16) 0}
  /* 66vh senza tetto: su un viewport alto e stretto l'eroe superava i 900px
     e il titolo finiva schiacciato in fondo, sotto mezzo schermo di cielo. */
  .hero{min-height:min(66vh,540px)}
  .itin>li{grid-template-columns:1fr;gap:var(--s-2)}
  .itin .day{display:flex;align-items:baseline;gap:var(--s-3)}
  .proof-in{gap:var(--s-4)}
  .proof a{margin-left:0;flex-basis:100%}
}

/* ---------- galleria ------------------------------------------------------ */
.gal{columns:3 300px;column-gap:var(--s-4)}
.gal figure{break-inside:avoid;margin:0 0 var(--s-4);background:var(--c-surface);
  border:1px solid var(--c-rule);border-radius:var(--r-md);overflow:hidden}
.gal img{width:100%;height:auto;display:block}
.gal figcaption{padding:var(--s-3) var(--s-4);font-size:var(--t-sm);color:var(--c-muted);
  line-height:1.5}
.gal figcaption b{display:block;color:var(--c-ink);font-family:var(--f-display);
  font-weight:500;font-size:var(--t-base);margin-bottom:2px}
@media (max-width:640px){.gal{columns:1}}

/* ---------- passi numerati ----------------------------------------------- */
.steps{list-style:none;counter-reset:st;padding:0;margin:0;display:grid;gap:var(--s-6)}
.steps li{counter-increment:st;display:grid;grid-template-columns:44px 1fr;gap:var(--s-4)}
.steps li::before{content:counter(st);display:grid;place-items:center;width:38px;height:38px;
  border-radius:50%;background:var(--c-indigo-soft);color:var(--c-indigo);
  font-family:var(--f-display);font-size:var(--t-lg);font-weight:500}
.steps h3{margin:.15em 0 var(--s-2);font-size:var(--t-lg)}
.steps p{margin:0;color:var(--c-muted)}

/* ---------- contatti ------------------------------------------------------ */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-12);align-items:start}
.contact-list{list-style:none;padding:0;margin:0;display:grid;gap:var(--s-6)}
.contact-list li{display:grid;gap:var(--s-1)}
.contact-list .lbl{font-size:var(--t-xs);letter-spacing:.13em;text-transform:uppercase;
  color:var(--c-brass);font-weight:700}
.contact-list .val{font-family:var(--f-display);font-size:var(--t-lg)}
.contact-list .val a{color:var(--c-ink);text-decoration:none}
.contact-list .val a:hover{color:var(--c-indigo)}
.contact-list .note{font-size:var(--t-sm);color:var(--c-muted)}
.map-frame{border:1px solid var(--c-rule);border-radius:var(--r-lg);overflow:hidden;line-height:0}
.map-frame iframe{width:100%;height:380px;border:0;display:block}
@media (max-width:820px){.contact-grid{grid-template-columns:1fr;gap:var(--s-8)}}

/* ---------- pagine legali ------------------------------------------------- */
/* Il corpo e ancora in griglia Bootstrap a tutta larghezza. Il testo legale
   e lungo: su 1180px diventa illeggibile. Si incolonna senza toccare il
   markup, che verra rifatto in fase 5 insieme al resto del template. */
.terms-condition-section .container,
.privacy-policy-section .container,
.terms-section .container{max-width:820px}
.terms-condition-section h2,
.privacy-policy-section h2,.terms-section h2{font-size:var(--t-xl);margin:var(--s-12) 0 var(--s-3)}
.terms-condition-section h3,
.privacy-policy-section h3,.terms-section h3{font-size:var(--t-lg);margin:var(--s-8) 0 var(--s-2)}
.terms-condition-section ul,
.privacy-policy-section ul,.terms-section ul{color:var(--c-muted);line-height:1.9}

/* ============================================================================
   Griglia minima — fase 5
   ----------------------------------------------------------------------------
   Sostituisce Bootstrap, che pesava 274 KB e di cui il sito usava solo
   .container, .row e dodici varianti di colonna. Qui sono ~50 righe.
   Punti di rottura identici a Bootstrap, cosi il markup esistente non cambia.
   ========================================================================== */
.container{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 var(--s-6)}
/* Niente margini negativi: il padding del contenitore non li compensava e due
   colonne al 50% misuravano piu della meta della riga, andando a capo. Le
   colonne portano il proprio spazio interno e la somma torna esatta. */
.row{display:flex;flex-wrap:wrap}
[class*="col-"]{width:100%;padding:0 var(--s-3);box-sizing:border-box}

.m-auto{margin:auto}
.my-5{margin-top:var(--s-12);margin-bottom:var(--s-12)}
.d-flex{display:flex}
.flex-column{flex-direction:column}
.text-center,.centred{text-align:center}

/* sm ≥576 */
@media (min-width:576px){
  .col-sm-12{width:100%}
}
/* md ≥768 */
@media (min-width:768px){
  .col-md-5{width:41.6667%} .col-md-6{width:50%}
  .col-md-7{width:58.3333%} .col-md-12{width:100%}
  .flex-md-row{flex-direction:row}
}
/* lg ≥992 */
@media (min-width:992px){
  .col-lg-6{width:50%}  .col-lg-8{width:66.6667%}
  .col-lg-10{width:83.3333%} .col-lg-12{width:100%}
}
/* xl ≥1200 */
@media (min-width:1200px){
  .col-xl-4{width:33.3333%} .col-xl-6{width:50%} .col-xl-12{width:100%}
}

/* Resti del template ancora referenziati dal markup non ancora rifatto. */
.pt_120{padding-top:var(--s-24)}
.pb_90{padding-bottom:var(--s-16)}
.mb_60{margin-bottom:var(--s-12)}
.section-title .sub-title{display:block;font-size:var(--t-xs);letter-spacing:.15em;
  text-transform:uppercase;color:var(--c-brass);font-weight:700;margin-bottom:var(--s-3)}
.section-title .title{margin:0 0 var(--s-3)}
.why-chooseus-text{color:var(--c-muted);max-width:var(--readable)}
.why-chooseus-section,.contact-section,.contact-details-section,
.google-map-section,.featured-car-section,.services-section,.itinerary-section{padding:var(--s-16) 0}
.contact-info-item{text-align:center;padding:var(--s-6);background:var(--c-surface);
  border:1px solid var(--c-rule);border-radius:var(--r-lg);height:100%}
.contact-info-title{font-size:var(--t-lg);margin:var(--s-3) 0 var(--s-2)}
.tour-card{background:var(--c-surface);border:1px solid var(--c-rule);border-radius:var(--r-lg);
  overflow:hidden;box-shadow:none}
.tour-card img{width:100%;display:block;object-fit:cover}
.tour-content{padding:var(--s-6)}
.tour-title{font-family:var(--f-display);font-size:var(--t-lg);font-weight:500;margin:0 0 var(--s-3)}
.tour-desc{color:var(--c-muted);font-size:var(--t-sm)}
.explore-btn{display:inline-block;color:var(--c-indigo);font-weight:700;font-size:var(--t-sm);
  text-decoration:none;padding:10px 18px;border:1px solid var(--c-rule);border-radius:var(--r-sm)}
.explore-btn:hover{border-color:var(--c-indigo);background:var(--c-indigo-soft)}

/* ---------- utilita ricorrenti ------------------------------------------- */
/* Sostituiscono gli stili inline ripetuti nelle pagine destinazione, che
   arrivavano dal markup del template estratto. */
.u-divider{border-top:1px solid var(--c-rule);padding-top:var(--s-8);margin-top:var(--s-8)}
.u-mt{margin-top:var(--s-6)}
.u-mt-lg{margin-top:var(--s-8)}
.u-note{margin-top:var(--s-8);font-size:var(--t-sm);color:var(--c-muted)}
.u-inherit{color:inherit}
.dest-cta h2{font-size:var(--t-xl);margin-bottom:var(--s-3)}

/* ---------- pagine servizio e schede informative --------------------------
   Erano dentro un blocco <style> in layout/service-page.php, ma le usano
   sette pagine e cinque non lo includono: su quelle le classi non avevano
   stile. Spostate nel sistema, dove appartengono. */
.svc-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1px;
  background:var(--c-rule);border:1px solid var(--c-rule);border-radius:10px;overflow:hidden;margin:34px 0 12px;}
.svc-fact{background:#fff;padding:18px 20px;display:flex;flex-direction:column;gap:5px;}
.svc-fact-l{font-size:12px;letter-spacing:.09em;text-transform:uppercase;color:var(--c-faint);}
.svc-fact-v{font-size:19px;font-weight:600;color:var(--c-ink);}
.svc-h2{font-size:26px;margin:44px 0 14px;}
/* align-items:start: le due colonne hanno liste di lunghezza diversa e la
   griglia le pareggiava, lasciando meta riquadro vuoto in quella corta. */
.svc-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:20px;margin:34px 0;align-items:start}
.svc-col{padding:24px;border-radius:10px;}
.svc-in{background:#F1F7F3;border:1px solid #D8E8DF;}
.svc-out{background:var(--c-sand);border:1px solid var(--c-rule);}
.svc-col h3{font-size:17px;margin:0 0 12px;}
.svc-col ul{margin:0;padding-left:20px;line-height:1.9;}
.svc-note{font-size:14px;color:var(--c-brass);margin:14px 0 0;}
.svc-faq details{border-bottom:1px solid var(--c-rule);padding:15px 0;}
.svc-faq summary{cursor:pointer;font-weight:600;font-size:16.5px;list-style:none;}
.svc-faq summary::-webkit-details-marker{display:none;}
.svc-faq summary::before{content:"+";display:inline-block;width:20px;color:var(--c-brass);font-weight:700;}
.svc-faq details[open] summary::before{content:"\2212";}
.svc-faq details div{padding:12px 0 4px 20px;line-height:1.7;color:var(--c-muted);}
.svc-cta{margin:46px 0 10px;padding:30px;background:var(--c-sand);border-radius:12px;}
.svc-related{margin-top:30px;font-size:15px;color:var(--c-muted);}

/* ---------- blocco recensioni ---------------------------------------------
   Era un <style> dentro il componente: incluso due volte in una pagina,
   il CSS veniva emesso due volte. */
.reviews-summary{display:flex;flex-wrap:wrap;align-items:center;gap:18px 32px;
  padding:24px 26px;background:var(--c-sand);border-radius:12px;}
.rv-score{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;}
.rv-score strong{font-size:44px;line-height:1;font-weight:700;}
.rv-stars{color:var(--c-brass);font-size:20px;letter-spacing:2px;}
.rv-count{color:var(--c-muted);font-size:15px;}
.rv-badges{display:flex;flex-wrap:wrap;gap:8px;}
.rv-badge{font-size:13px;padding:6px 12px;border:1px solid var(--c-rule);border-radius:20px;color:var(--c-muted);background:var(--c-surface);}
.rv-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:20px;margin-top:28px;}
.rv-card{margin:0;padding:24px;background:var(--c-surface);border:1px solid var(--c-rule);border-radius:12px;
  display:flex;flex-direction:column;gap:14px;}
.rv-card-stars{color:var(--c-brass);font-size:15px;letter-spacing:2px;}
.rv-card blockquote{margin:0;font-size:16px;line-height:1.6;color:var(--c-ink);flex:1;}
.rv-card figcaption{display:flex;flex-direction:column;gap:3px;border-top:1px solid var(--c-rule);padding-top:14px;}
.rv-name{font-weight:600;font-size:15px;}
.rv-meta{font-size:13px;color:var(--c-faint);}
.rv-trip{font-size:13px;color:var(--c-brass);}
.rv-compact-title{font-size:24px;margin:34px 0 4px;}
.rv-source{margin-top:26px;font-size:15px;}

/* ---------- pagina Mukesh ------------------------------------------------- */
.mk-h2{font-size:27px;margin:46px 0 14px;}
.mk-fig{margin:38px 0;}
.mk-fig img{width:100%;max-width:520px;border-radius:12px;display:block;}
.mk-fig figcaption{font-size:14px;color:var(--c-faint);margin-top:10px;max-width:520px;}
.mk-phrases{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:8px;margin:18px 0 24px;}
.mk-phrases li{background:var(--c-sand);border:1px solid var(--c-rule);border-radius:20px;
  padding:7px 15px;font-size:14.5px;color:var(--c-brass);}
.mk-related{margin-top:34px;font-size:15px;color:var(--c-muted);}
.mk-portrait img{max-width:340px;border-radius:var(--r-lg)}

/* ---------- flotta -------------------------------------------------------- */
/* I veicoli erano tre righe di tabella: nome, posti, una nota. Chi sceglie un
   mezzo vuole sapere quanti bagagli entrano e per quanti giorni regge, non
   leggere una tabella. Tre schede, il numero di posti come dato principale. */
.fleet{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:var(--s-4);margin:var(--s-6) 0}
.fleet-card{background:var(--c-surface);border:1px solid var(--c-rule);
  border-radius:var(--r-lg);padding:var(--s-6)}
.fleet-head{display:flex;align-items:center;gap:var(--s-4);
  padding-bottom:var(--s-4);border-bottom:1px solid var(--c-rule)}
.fleet-seats{flex:0 0 auto;width:58px;height:58px;border-radius:50%;
  background:var(--c-sand);color:var(--c-ink);display:flex;flex-direction:column;
  align-items:center;justify-content:center;line-height:1;
  font-family:var(--f-display);font-size:19px;font-weight:600}
.fleet-seats small{font-family:var(--f-body);font-size:9px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:var(--c-faint);margin-top:3px}
.fleet-name{display:flex;flex-direction:column;gap:2px;min-width:0}
.fleet-name b{font-family:var(--f-display);font-size:var(--t-lg);font-weight:500}
.fleet-name em{font-style:normal;font-size:var(--t-sm);color:var(--c-muted)}
.fleet-spec{list-style:none;margin:var(--s-4) 0 0;padding:0;
  display:flex;flex-direction:column;gap:var(--s-2)}
.fleet-spec li{position:relative;padding-left:18px;font-size:var(--t-sm);
  color:var(--c-muted);line-height:1.5}
.fleet-spec li::before{content:"";position:absolute;left:0;top:9px;
  width:6px;height:6px;border-radius:50%;background:var(--c-brass)}

/* Le tre proposte non devono sembrare l'unica offerta: chi arriva sulla pagina
   dei tour deve capire subito che si costruisce anche da zero. */
.custom-band{display:grid;grid-template-columns:1.7fr 1fr;gap:var(--s-12);
  align-items:center}
.custom-band h2{margin:0 0 var(--s-4)}
.custom-band p{margin:0;color:rgba(246,244,239,.82);max-width:60ch}
.custom-band .eyebrow{color:#E3C48C}
.custom-cta{display:flex;flex-direction:column;gap:var(--s-3);align-items:stretch}
.custom-cta .btn{text-align:center}
@media (max-width:820px){
  .custom-band{grid-template-columns:1fr;gap:var(--s-8)}
}

/* Ritratto del titolare: la pagina che porta il suo nome non lo mostrava. */
.mk-intro{display:grid;grid-template-columns:190px 1fr;gap:var(--s-8);
  align-items:start;margin-bottom:var(--s-8)}
.mk-portrait{margin:0}
.mk-portrait img{width:100%;height:auto;aspect-ratio:1;object-fit:cover;
  border-radius:var(--r-lg);display:block}
.mk-portrait figcaption{margin-top:var(--s-3);font-size:var(--t-xs);
  color:var(--c-faint);line-height:1.4}
@media (max-width:640px){
  .mk-intro{grid-template-columns:1fr;gap:var(--s-6)}
  .mk-portrait{max-width:180px}
}

/* Firma in homepage: la differenza e una persona, e va vista. */
.signature{display:flex;align-items:center;gap:var(--s-4);margin-top:var(--s-8)}
.signature img{width:64px;height:64px;border-radius:50%;object-fit:cover;
  flex:0 0 auto;display:block}
.signature p{margin:0;font-size:var(--t-sm);color:var(--c-muted);max-width:52ch}
.signature b{color:var(--c-ink)}

/* ---------- blocchi del template rimasti nelle pagine destinazione ---------
   Erano 63 occorrenze senza una sola regola: dopo la rimozione del CSS del
   template quelle sezioni si erano sfaldate. Vanno restituite a una forma
   coerente col resto del sistema. */
.why-chooseus-sectio{padding:var(--s-16) 0}   /* refuso del template, senza la n */
.single-popular-car-block{margin-bottom:var(--s-8)}
.single-popular-car-image{border-radius:var(--r-lg);overflow:hidden;line-height:0;
  margin-bottom:var(--s-4)}
.single-popular-car-image img{width:100%;height:auto;display:block;
  aspect-ratio:3/2;object-fit:cover}
.single-popular-car-title{font-family:var(--f-display);font-size:var(--t-lg);
  font-weight:500;margin:0 0 var(--s-2)}
.single-popular-car-text{color:var(--c-muted);margin:0}
.single-popular-car-content{padding:0}
.mb_40{margin-bottom:var(--s-8)}
.policy-block,.terms-block{margin-bottom:var(--s-8)}
.policy-text{color:var(--c-muted)}

/* Il corpo delle pagine destinazione e ancora markup del template: il testo
   restava limitato a 68 caratteri ma allineato a sinistra dentro 1204px,
   lasciando meta pagina vuota. Si incolonna il contenitore. */
.why-chooseus-sectio .container,
.why-chooseus-section .container{max-width:900px}

/* ---------- modulo di richiesta ------------------------------------------
   Il form aveva solo placeholder e nessuna etichetta, e i campi erano in
   content-box: 352px di campo dentro colonne da 324, quindi sbordavano di 28px
   e le due colonne si toccavano. Il select, unico in border-box, era invece
   piu stretto degli altri. Ora tutti i controlli sono in border-box. */
/* Il form vive sia a piena larghezza (homepage, pagine tour) sia in una
   colonna stretta accanto ai contatti: la soglia deve guardare il contenitore,
   non la finestra. */
.req-form{margin:0;container-type:inline-size}
.req-card{background:var(--c-surface);border:1px solid var(--c-rule);
  border-radius:var(--r-lg);padding:var(--s-8);box-shadow:0 1px 2px rgba(25,28,36,.04)}

/* Due gruppi con la loro intestazione: nove campi di fila si leggono come un
   modulo burocratico, due blocchi da quattro e cinque no. */
.req-legend{margin:0 0 var(--s-4);font-size:var(--t-xs);font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--c-brass)}
.req-grid + .req-legend{margin-top:var(--s-8);padding-top:var(--s-6);
  border-top:1px solid var(--c-rule)}

.req-grid{display:grid;grid-template-columns:repeat(12,1fr);
  gap:var(--s-6)}
.req-field{margin:0;display:flex;flex-direction:column;gap:7px;min-width:0}
.req-12{grid-column:span 12}
.req-6{grid-column:span 6}
.req-3{grid-column:span 3}
.req-field label{font-size:var(--t-sm);font-weight:600;color:var(--c-ink);
  letter-spacing:.01em}
.req-opt{font-weight:400;color:var(--c-faint);font-size:var(--t-xs)}

.boxed_wrapper .req-form :is(input,select,textarea){
  box-sizing:border-box;width:100%;height:48px;
  border:1px solid var(--c-rule);border-radius:var(--r-sm);
  background:var(--c-ground);padding:0 14px;font-family:var(--f-body);
  font-size:var(--t-base);color:var(--c-ink);
  transition:border-color .15s,box-shadow .15s,background-color .15s}
.boxed_wrapper .req-form :is(input,select,textarea):hover{border-color:#C8C2B5}
.boxed_wrapper .req-form :is(input,select,textarea):focus{
  outline:none;background:var(--c-surface);border-color:var(--c-indigo);
  box-shadow:0 0 0 3px var(--c-indigo-soft)}
.boxed_wrapper .req-form textarea{height:auto;resize:vertical;min-height:132px;
  padding:12px 14px;line-height:1.6}
.boxed_wrapper .req-form :is(input,textarea)::placeholder{color:var(--c-faint)}
/* Il campo data non mostra il testo centrato in verticale senza questo */
.boxed_wrapper .req-form input[type="date"]{padding-top:0;padding-bottom:0}

/* La freccia nativa del select cambia da un browser all'altro ed e l'unico
   pezzo di interfaccia non disegnato in tutta la pagina. */
.req-select{position:relative;display:block}
.req-select::after{content:"";position:absolute;right:16px;top:50%;
  width:9px;height:9px;margin-top:-6px;pointer-events:none;
  border-right:2px solid var(--c-muted);border-bottom:2px solid var(--c-muted);
  transform:rotate(45deg)}
.boxed_wrapper .req-form select{appearance:none;-webkit-appearance:none;
  padding-right:38px;cursor:pointer}

.req-foot{display:flex;align-items:center;gap:var(--s-6);flex-wrap:wrap;
  margin-top:var(--s-8);padding-top:var(--s-6);border-top:1px solid var(--c-rule)}
.req-note{font-size:var(--t-sm);color:var(--c-muted);flex:1;min-width:220px;
  line-height:1.5}
.btn--lg{padding:15px 28px;font-size:var(--t-base)}
.req-form button[disabled]{opacity:.6;cursor:progress}

#formMessage:not(:empty){margin-top:var(--s-6)}
#formMessage p{margin:0;padding:12px 15px;border-radius:var(--r-sm);font-size:var(--t-sm)}
#formMessage .text-success{background:#E8F3EC;color:#1D5C38}
#formMessage .text-danger{background:var(--c-brass-soft);color:#7A5A1E}

@container (max-width:620px){
  .req-6{grid-column:span 12}
  .req-3{grid-column:span 6}
}
@media (max-width:760px){
  .req-card{padding:var(--s-6)}
  .req-6{grid-column:span 12}
  .req-3{grid-column:span 6}
  .req-foot .btn{width:100%;text-align:center}
}

/* Il blocco recensioni usava contenitore e spaziature del template piu uno
   stile inline: su fondo bianco, senza stacco, sembrava appoggiato a caso.
   Ora e una sezione del sistema, su fondo sabbia, con lo stesso ritmo. */
.reviews-summary{background:var(--c-surface);border:1px solid var(--c-rule)}
/* Il riquadro col voto compariva prima del titolo della sezione: si leggeva
   come un elemento capitato li. Ora segue il titolo, e la griglia lo segue. */
.rv-compact-title{font-family:var(--f-display);font-weight:500;
  font-size:var(--t-xl);margin:0 0 var(--s-6)}

/* Due sezioni sabbia adiacenti sommavano i due padding: un vuoto di 200px
   in mezzo a un fondo unico. La seconda parte attaccata alla prima. */
.section--sand + .section--sand,
.section--tight.section--sand + .section--tight.section--sand{padding-top:0}

/* ---------- bersagli tattili sul telefono --------------------------------
   Misurati a 375px: il numero in testata era alto 22px, le voci del footer 18
   e i riepiloghi delle domande 28. Sotto i 40px si sbaglia il tocco. */
@media (max-width:760px){
  .sh-top .sh-contacts a{display:inline-flex;align-items:center;min-height:40px}
  .sh-top .sh-in{min-height:40px}
  .sf ul{gap:0}
  .sf ul li a{display:inline-flex;align-items:center;min-height:42px}
  .sf-bottom a{display:inline-flex;align-items:center;min-height:40px}
  .svc-faq summary{min-height:44px;display:flex;align-items:center}
}

/* A 375px il piede della scheda metteva "Ask for a price" e "See the itinerary"
   su due colonne da 122 e 127px: entrambi andavano a capo due volte. In colonna
   restano su una riga ciascuno. Stesso motivo per la firma in homepage, il cui
   testo si riduceva a 231px accanto al ritratto. */
@media (max-width:520px){
  .card-foot{flex-direction:column;align-items:flex-start;gap:var(--s-2)}
  .card-foot .price{font-size:var(--t-base)}
  .signature{flex-direction:column;align-items:flex-start;gap:var(--s-3)}
}

/* ---------- pagina link in bio (/go/) -------------------------------------
   Aperta quasi sempre dal browser interno di Instagram, su telefono, da chi ha
   appena visto un post: deve caricare subito e dare una decisione sola per riga. */
.go-body{background:var(--c-ground)}
.go{max-width:520px;margin:0 auto;padding:var(--s-12) var(--s-6) var(--s-16);text-align:center}
.go-logo{height:56px;width:auto;margin-bottom:var(--s-6)}
.go h1{font-size:var(--t-xl);margin:0 0 var(--s-3)}
.go-sub{color:var(--c-muted);font-size:var(--t-sm);margin:0 auto var(--s-6);max-width:38ch}
.go-proof{font-size:var(--t-sm);color:var(--c-muted);margin:0 0 var(--s-8)}
.go-proof b{font-size:var(--t-lg);color:var(--c-ink);font-family:var(--f-display)}
.go-stars{color:var(--c-brass);letter-spacing:2px}
.go-list{display:flex;flex-direction:column;gap:var(--s-3);text-align:left}
.go-item{display:block;padding:16px 20px;border:1px solid var(--c-rule);
  border-radius:var(--r-lg);background:var(--c-surface);text-decoration:none;
  transition:border-color .15s,transform .12s}
.go-item:hover{border-color:var(--c-indigo);transform:translateY(-1px)}
.go-item--primary{background:var(--c-indigo);border-color:var(--c-indigo)}
.go-t{display:block;font-weight:700;font-size:var(--t-base);color:var(--c-ink)}
.go-s{display:block;font-size:var(--t-sm);color:var(--c-muted);margin-top:2px}
.go-item--primary .go-t{color:#fff}
.go-item--primary .go-s{color:rgba(255,255,255,.78)}
.go-foot{margin-top:var(--s-8);font-size:var(--t-sm);color:var(--c-muted)}