/* ==================================================================
   LA VETRINA — foglio di stile.

   TRE REGOLE, e il resto viene da sole:

   1. UN COLORE SOLO DECIDE. I tre colori dell'agenzia arrivano
      dall'anagrafica a pagina aperta e diventano variabili: cambiarli
      in agenzia cambia il sito, e nessuno deve ricordarsi di aggiornare
      un file. I valori scritti qui sono solo quelli di riserva, per il
      mezzo secondo prima che la chiamata torni — e per il giorno in cui
      non torna.

   2. IL TELEFONO VIENE PRIMA. Le misure partono da una colonna sola e
      si allargano; i pulsanti stanno dove arriva il pollice; la barra
      in fondo esiste solo li'. Piu' di meta' di chi cerca un viaggio lo
      cerca in piedi, sull'autobus.

   3. NIENTE SI MUOVE DA SOLO. Nessuna giostra che scorre mentre leggi,
      nessun numero che scende. Il movimento che c'e' e' quello che
      chiede chi guarda, e con `prefers-reduced-motion` sparisce anche
      quello.
   ================================================================== */

:root{
  --brand:#0071a3;
  --brand-scuro:#00577d;
  --accento:#f9b000;
  --inchiostro:#003569;

  --carta:#ffffff;
  --fondo:#f6f8fa;
  --fondo-caldo:#fbf7f0;
  --testo:#16242e;
  --testo-tenue:#5d707c;
  --linea:#e4e9ee;

  --raggio:16px;
  --raggio-p:10px;
  --ombra:0 1px 2px rgba(16,32,45,.06), 0 8px 24px rgba(16,32,45,.06);
  --ombra-alta:0 2px 4px rgba(16,32,45,.08), 0 18px 44px rgba(16,32,45,.12);

  --testo-font:"Inter", -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --titolo-font:"Fraunces", Georgia, "Times New Roman", serif;
}

*{box-sizing:border-box}
/* `hidden` DEVE VINCERE. Qualunque regola che dia un `display` a un
   elemento — e qui ce ne sono, `.campo{display:block}` per prima —
   batte l'attributo, e il campo nascosto resta a schermo: e' successo
   con l'eta' dei bambini, che compariva anche con zero bambini. */
[hidden]{display:none!important}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
}
body{
  margin:0;background:var(--fondo);color:var(--testo);
  font-family:var(--testo-font);font-size:17px;line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
h1,h2,h3{font-family:var(--titolo-font);line-height:1.12;margin:0 0 .5rem;letter-spacing:-.01em}
h1{font-size:clamp(2.1rem,5.2vw,3.5rem);font-weight:700}
h2{font-size:clamp(1.6rem,3.4vw,2.3rem);font-weight:600}
h3{font-size:1.15rem;font-weight:600}
p{margin:0 0 .8rem}
a{color:var(--brand);text-underline-offset:.15em}

/* CHI NAVIGA CON LA TASTIERA DEVE VEDERE DOVE STA: un contorno che si
   vede, non quello che i reset cancellano per fare pulizia. */
:focus-visible{outline:3px solid var(--accento);outline-offset:2px;border-radius:4px}
.salta{
  position:absolute;left:-9999px;top:0;background:var(--brand);color:#fff;
  padding:.7rem 1rem;z-index:100;border-radius:0 0 var(--raggio-p) 0;
}
.salta:focus{left:0}

/* ─── testa ─────────────────────────────────────────────────────── */
.testa{
  position:sticky;top:0;z-index:40;
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:.7rem clamp(1rem,4vw,2.5rem);
  background:rgba(255,255,255,.88);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--linea);
}
.marchio{display:flex;align-items:center;gap:.6rem;text-decoration:none;color:var(--inchiostro);font-weight:700}
/* GLI ANGOLI ARROTONDATI, come nella barra del gestionale. Il marchio
   in archivio e' un JPEG, cioe' un rettangolo bianco pieno: sulla testa
   traslucida, quando sotto scorre la foto scura dell'eroe, quel
   rettangolo si vede, e si vede con gli spigoli vivi. Otto pixel sono
   la stessa misura che il logo ha gia' nella barra delle pagine
   dell'agenzia: un marchio non deve avere due forme. */
.marchio img{height:34px;width:auto;border-radius:8px}
#marchioNome{font-family:var(--titolo-font);font-size:1.1rem}
.marchio img:not([hidden]) + #marchioNome{display:none}
.testa-azioni{display:flex;align-items:center;gap:.6rem}
.tel{font-weight:600;text-decoration:none;font-size:.95rem;color:var(--inchiostro);white-space:nowrap}
@media (max-width:600px){ .tel{display:none} }

/* ─── pulsanti ──────────────────────────────────────────────────── */
.bottone{
  display:inline-flex;align-items:center;justify-content:center;gap:.45rem;
  padding:.72rem 1.15rem;border-radius:999px;border:1px solid transparent;
  background:var(--brand);color:#fff;font:inherit;font-weight:600;font-size:.98rem;
  text-decoration:none;cursor:pointer;transition:transform .12s ease, box-shadow .12s ease, background .12s ease;
  /* 44px di lato: e' la misura sotto la quale un pollice sbaglia */
  min-height:44px;
}
.bottone:hover{background:var(--brand-scuro);transform:translateY(-1px);box-shadow:var(--ombra)}
.bottone:active{transform:translateY(0)}
.bottone svg{width:18px;height:18px;fill:currentColor}
.bottone.grande{padding:.95rem 1.5rem;font-size:1.05rem;width:100%}
.bottone.fantasma{background:transparent;color:var(--brand);border-color:var(--linea)}
.bottone.fantasma:hover{background:#fff;border-color:var(--brand)}
.bottone[disabled]{opacity:.55;cursor:progress;transform:none}
.freccia{transition:transform .15s ease}
.bottone:hover .freccia{transform:translateX(3px)}

/* ─── l'eroe ────────────────────────────────────────────────────── */
.eroe{position:relative;overflow:hidden;padding:clamp(2rem,6vw,4.5rem) clamp(1rem,4vw,2.5rem) clamp(3rem,7vw,5rem)}
/* IL FONDO E' UNA FOTO VERA DELLA VETRINA, quando c'e': il primo
   viaggio in partenza. Se non c'e' resta la sfumatura, e nessuno si
   accorge che mancava qualcosa. */
.eroe-sfondo{
  position:absolute;inset:0;z-index:0;
  background:linear-gradient(135deg, var(--brand) 0%, var(--inchiostro) 55%, #00263f 100%);
  background-size:cover;background-position:center;
}
.eroe-sfondo::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(105deg, rgba(0,32,56,.94) 0%, rgba(0,32,56,.80) 45%, rgba(0,32,56,.45) 100%);
}
@media (max-width:900px){
  .eroe-sfondo::after{background:linear-gradient(180deg, rgba(0,32,56,.90) 0%, rgba(0,32,56,.94) 60%)}
}
.eroe-dentro{
  position:relative;z-index:1;max-width:1180px;margin:0 auto;
  display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(1.5rem,4vw,3.5rem);align-items:center;
}
@media (max-width:900px){ .eroe-dentro{grid-template-columns:1fr} }
.eroe-parole{color:#fff;max-width:36rem}
.eroe-parole h1{color:#fff}
.occhiello{
  text-transform:uppercase;letter-spacing:.14em;font-size:.72rem;font-weight:700;
  color:var(--accento);margin-bottom:.9rem;
}
.sommario{font-size:1.08rem;color:rgba(255,255,255,.88);max-width:32rem}
.promesse{list-style:none;padding:0;margin:1.4rem 0 1.1rem;display:grid;gap:.5rem}
.promesse li{
  position:relative;padding-left:1.7rem;color:rgba(255,255,255,.92);font-size:.98rem;
}
.promesse li::before{
  content:"";position:absolute;left:0;top:.42em;width:.8rem;height:.45rem;
  border-left:2.5px solid var(--accento);border-bottom:2.5px solid var(--accento);
  transform:rotate(-45deg);
}
.fiducia{font-size:.83rem;color:rgba(255,255,255,.65);margin:0}

/* ─── la scheda del modulo ──────────────────────────────────────── */
.scheda{
  background:var(--carta);border-radius:var(--raggio);padding:clamp(1.2rem,3vw,1.9rem);
  box-shadow:var(--ombra-alta);
}
.modulo{scroll-margin-top:5rem}
.barra-passi{display:flex;gap:.35rem;margin-bottom:1.1rem}
.passo-punto{height:4px;flex:1;border-radius:999px;background:var(--linea);transition:background .2s ease}
.passo-punto.attivo{background:var(--brand)}
.passo{border:0;padding:0;margin:0;min-width:0}
.passo-titolo{
  font-family:var(--titolo-font);font-size:1.4rem;font-weight:600;color:var(--inchiostro);
  padding:0;margin:0 0 1rem;
}
.campo{display:block;margin-bottom:.85rem}
.campo > span{
  display:block;font-size:.82rem;font-weight:600;color:var(--testo-tenue);margin-bottom:.3rem;
}
.campo > span i{font-weight:400;font-style:normal;opacity:.75}
.campo input, .campo select, .campo textarea{
  width:100%;font:inherit;font-size:1rem;color:var(--testo);
  padding:.75rem .9rem;border:1.5px solid var(--linea);border-radius:var(--raggio-p);
  background:#fff;transition:border-color .12s ease, box-shadow .12s ease;
}
.campo input:focus, .campo select:focus, .campo textarea:focus{
  outline:none;border-color:var(--brand);box-shadow:0 0 0 3px rgba(0,113,163,.14);
}
.campo textarea{resize:vertical;min-height:3.2rem}
.campo input[aria-invalid="true"]{border-color:#c0392b}
.due{display:grid;grid-template-columns:1fr 1fr;gap:.7rem}
.due .bottone{width:100%}
.spunta{display:flex;gap:.6rem;align-items:flex-start;font-size:.88rem;color:var(--testo-tenue);margin:.6rem 0 1rem}
.spunta input{width:1.15rem;height:1.15rem;flex:none;margin-top:.15rem;accent-color:var(--brand)}
.minuto{font-size:.8rem;color:var(--testo-tenue);text-align:center;margin:.7rem 0 0}
.errore{
  margin:.9rem 0 0;padding:.7rem .9rem;border-radius:var(--raggio-p);
  background:#fdecea;color:#a3271b;font-size:.9rem;border:1px solid #f5c6c0;
}
/* la trappola per i robot: fuori dallo schermo e fuori dal giro dei tab */
.trappola{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.pastiglie{display:flex;flex-wrap:wrap;gap:.4rem;margin:0 0 1rem}
.pastiglia{
  padding:.45rem .8rem;border-radius:999px;border:1.5px solid var(--linea);
  background:#fff;font:inherit;font-size:.86rem;color:var(--testo-tenue);cursor:pointer;
  transition:all .12s ease;
}
.pastiglia:hover{border-color:var(--brand);color:var(--brand)}
.pastiglia.accesa{background:var(--brand);border-color:var(--brand);color:#fff;font-weight:600}
.segmenti{display:flex;gap:.3rem;padding:.25rem;background:var(--fondo);border-radius:999px;margin-bottom:1rem}
.segmento{
  flex:1;padding:.55rem .6rem;border:0;border-radius:999px;background:transparent;
  font:inherit;font-size:.86rem;color:var(--testo-tenue);cursor:pointer;font-weight:600;
}
.segmento.attivo{background:#fff;color:var(--brand);box-shadow:var(--ombra)}

.fatto{text-align:center;padding:1rem 0}
.spunta-grande{
  width:56px;height:56px;margin:0 auto 1rem;border-radius:50%;
  background:var(--brand);color:#fff;font-size:1.8rem;line-height:56px;
}
.fatto h2{color:var(--inchiostro)}

/* ─── sezioni ───────────────────────────────────────────────────── */
.sezione{padding:clamp(2.5rem,6vw,4.5rem) clamp(1rem,4vw,2.5rem);max-width:1180px;margin:0 auto}
.sezione.scura{
  max-width:none;background:var(--inchiostro);color:#fff;
}
.sezione.scura h2{color:#fff}
.sezione.scura .sezione-testa p{color:rgba(255,255,255,.75)}
.sezione-testa{max-width:40rem;margin:0 auto clamp(1.5rem,3vw,2.5rem);text-align:center}
.sezione-testa h2{color:var(--inchiostro)}
.sezione-testa p{color:var(--testo-tenue);margin:0}
.nota-piccola{
  max-width:44rem;margin:1.4rem auto 0;text-align:center;
  font-size:.78rem;color:var(--testo-tenue);
}

/* ─── le diapositive ────────────────────────────────────────────
   GRANDI, perche' quello che devono far vedere e' un posto: una foto
   piccola di Barcellona e' un francobollo, una grande e' un motivo per
   partire. Una per schermata, che scorre.

   16:8 sul computer, 4:5 sul telefono: la stessa foto, tagliata come si
   guarda. In verticale una panoramica diventa una striscia dentro cui
   non ci sta ne' la foto ne' il testo. */
.sezione.larga{max-width:1320px}
.diapositive{position:relative;border-radius:var(--raggio);overflow:hidden;box-shadow:var(--ombra-alta)}
.dia-pista{
  display:grid;grid-auto-flow:column;grid-auto-columns:100%;
  overflow-x:auto;scroll-snap-type:x mandatory;
  scrollbar-width:none;
}
.dia-pista::-webkit-scrollbar{display:none}
.dia{
  scroll-snap-align:start;position:relative;
  aspect-ratio:16/8;min-height:320px;
  background:linear-gradient(135deg,var(--brand),var(--inchiostro));
  display:flex;align-items:flex-end;
}
@media (max-width:760px){ .dia{aspect-ratio:4/5;min-height:0} }
.dia img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* IL VELO STA SOTTO IL TESTO, non su tutta la foto: si legge il prezzo
   e si vede lo stesso il posto. */
.dia::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(0deg, rgba(0,22,40,.92) 0%, rgba(0,22,40,.55) 34%, rgba(0,22,40,.08) 62%, rgba(0,22,40,.28) 100%);
}
.dia-testo{
  position:relative;z-index:2;color:#fff;padding:clamp(1.2rem,3.5vw,2.6rem);
  width:100%;max-width:44rem;
}
/* LA FRECCIA NON DEVE STARE SOPRA L'ETICHETTA. Sul computer la freccia
   sinistra cade proprio dove comincia il testo, e «LAST MINUTE» finiva
   mezzo coperto: il testo si scosta quanto basta a lasciarla passare. */
@media (min-width:761px){ .dia-testo{padding-left:4.6rem} }
.dia-etichetta{
  display:inline-block;font-size:.7rem;font-weight:700;text-transform:uppercase;
  letter-spacing:.12em;padding:.32rem .7rem;border-radius:999px;margin-bottom:.7rem;
  background:rgba(255,255,255,.18);backdrop-filter:blur(6px);
}
.dia.last .dia-etichetta{background:var(--accento);color:#26200a}
/* DA QUANTO E' STATO FATTO, accanto all'etichetta. E' la riga che dice
   «qui dentro c'e' qualcuno che lavora», ed e' l'unica prova di
   attivita' che una vetrina possa dare senza inventare niente. Quando e'
   davvero di poche ore si accende: il colore dice quello che dice il
   testo, non qualcosa in piu'. */
.dia-fresco{
  display:inline-block;margin:0 0 .7rem .4rem;
  font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;
  padding:.32rem .7rem;border-radius:999px;
  border:1px solid rgba(255,255,255,.35);color:rgba(255,255,255,.9);
}
.dia-fresco.ora{background:var(--accento);border-color:var(--accento);color:#26200a}
/* «IL VIAGGIO DI MARCO». Solo il nome, mai il cognome: un nome e' una
   persona, un nome e cognome e' un indirizzo. E' la prova che le
   recensioni non danno — quel viaggio l'ha comprato qualcuno. */
.dia-chi{
  font-size:.86rem;color:rgba(255,255,255,.72);margin:0 0 .25rem;
  font-style:italic;
}
.dia h3{font-size:clamp(1.6rem,4vw,2.7rem);color:#fff;margin:0 0 .35rem;line-height:1.05}
.dia-quando{font-size:1rem;color:rgba(255,255,255,.88);margin:0 0 .3rem}
.dia-nota{font-size:.92rem;color:rgba(255,255,255,.75);margin:0 0 .9rem;max-width:34rem}
.dia-riga{display:flex;flex-wrap:wrap;align-items:center;gap:1rem}
.dia-prezzo{display:flex;align-items:baseline;gap:.4rem}
.dia-prezzo b{font-family:var(--titolo-font);font-size:clamp(1.8rem,4vw,2.6rem);color:#fff;line-height:1}
.dia-prezzo del{color:rgba(255,255,255,.55);font-size:1rem}
.dia-prezzo span{font-size:.82rem;color:rgba(255,255,255,.75)}
.dia .bottone{background:#fff;color:var(--inchiostro)}
.dia .bottone:hover{background:var(--accento);color:#26200a}
.dia-scadenza{
  font-size:.76rem;font-weight:700;text-transform:uppercase;letter-spacing:.07em;
  color:var(--accento);margin:0 0 .5rem;
}
.dia-credito{position:absolute;right:.7rem;bottom:.5rem;z-index:2;font-size:.62rem;color:rgba(255,255,255,.5)}
.dia-freccia{
  position:absolute;top:50%;transform:translateY(-50%);z-index:3;
  width:44px;height:44px;border-radius:50%;border:0;
  background:rgba(255,255,255,.9);color:var(--inchiostro);
  font-size:1.6rem;line-height:1;cursor:pointer;box-shadow:var(--ombra);
}
.dia-freccia:hover{background:#fff}
.dia-freccia.sinistra{left:.8rem}
.dia-freccia.destra{right:.8rem}
@media (max-width:760px){ .dia-freccia{display:none} }
.dia-punti{
  position:absolute;left:0;right:0;bottom:.7rem;z-index:3;
  display:flex;justify-content:center;gap:.4rem;
}
.dia-punto{
  width:9px;height:9px;padding:0;border:0;border-radius:50%;cursor:pointer;
  background:rgba(255,255,255,.45);transition:background .15s ease, width .15s ease;
}
.dia-punto.attivo{background:#fff;width:22px;border-radius:999px}

/* ─── come funziona ─────────────────────────────────────────────── */
.passi-come{
  list-style:none;padding:0;margin:0;display:grid;gap:1rem;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,270px),1fr));
}
.passi-come li{
  background:var(--carta);border-radius:var(--raggio);padding:1.4rem;
  border:1px solid var(--linea);position:relative;
}
.passi-come .numero{
  display:inline-flex;align-items:center;justify-content:center;
  width:34px;height:34px;border-radius:50%;background:var(--fondo-caldo);
  color:var(--brand);font-weight:700;font-family:var(--titolo-font);margin-bottom:.7rem;
}
.passi-come h3{color:var(--inchiostro)}
.passi-come p{color:var(--testo-tenue);font-size:.93rem;margin:0 0 .6rem}
.passi-come small{
  font-size:.74rem;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--brand);
}
.richiamo{
  margin-top:clamp(1.5rem,4vw,2.5rem);text-align:center;background:var(--fondo-caldo);
  border-radius:var(--raggio);padding:clamp(1.4rem,4vw,2.2rem);
}
.richiamo p{font-family:var(--titolo-font);font-size:1.3rem;color:var(--inchiostro);margin:0 0 .9rem}
.richiamo .bottone{width:auto;max-width:22rem;margin:0 auto}

/* ─── piede ─────────────────────────────────────────────────────── */
.pie{background:#fff;border-top:1px solid var(--linea);padding:2.2rem clamp(1rem,4vw,2.5rem) 5.5rem}
.pie-dentro{
  max-width:1180px;margin:0 auto;display:flex;flex-wrap:wrap;gap:1.5rem;
  justify-content:space-between;font-size:.84rem;color:var(--testo-tenue);
}
/* LE RIGHE DEL PIEDE stanno strette; i CREDITI no — quelli hanno i
   margini automatici che li incolonnano con il resto. `.pie p` pesa piu'
   di `.pie-crediti` (classe + elemento contro classe sola) e glieli
   cancellava: la riga dei crediti finiva contro il bordo sinistro della
   pagina mentre tutto il resto del piede era incolonnato 220px piu' in
   la'. Si esclude, invece di rincorrere la specificita' altrove. */
.pie p:not(.pie-crediti){margin:0 0 .2rem}
.pie-nome{font-weight:700;color:var(--inchiostro)}
.pie-contatti{display:flex;flex-direction:column;gap:.25rem}
.pie-crediti{
  max-width:1180px;margin:1.6rem auto 0;padding-top:1rem;border-top:1px solid var(--linea);
  font-size:.74rem;color:var(--testo-tenue);
}
/* una riga vuota non lascia un filetto orfano in fondo alla pagina */
.pie-crediti:empty{display:none}

/* ─── la barra fissa del telefono ───────────────────────────────── */
.barra-fissa{
  position:fixed;left:0;right:0;bottom:0;z-index:50;display:none;gap:.6rem;
  padding:.6rem .8rem calc(.6rem + env(safe-area-inset-bottom));
  background:rgba(255,255,255,.95);backdrop-filter:blur(10px);
  border-top:1px solid var(--linea);
}
.barra-fissa .bottone{flex:1;padding:.8rem 1rem}
@media (max-width:820px){ .barra-fissa{display:flex} }
/* quando il modulo e' a schermo la barra non serve, e coprirebbe il
   pulsante vero: si toglie di mezzo */
.barra-fissa.via{transform:translateY(120%);transition:transform .2s ease}