/* =========================================================================
   Tema "nuovo1" del sito Harmattan — lo stile del template Tourvex.
   NON si scrive a mano: lo mette insieme data/temi/nuovo1/genera.py, che
   copia il tema standard (public/css/site.css) e gli cambia le variabili e i
   componenti. Per modificare il tema si toccano root.css e coda.css li'
   accanto, e si rilancia lo script. Specifica: docs/CONTRATTO-STILE.md.
   ========================================================================= */

/* ==========================================================================
   Harmattan — UI pubblica
   Direzione: "foschia e indaco". L'harmattan e' il vento che porta la polvere
   del Sahara: cielo velato, sole basso, indaco dei tessuti tuareg.
   Display: Archivo (asse wdth, lettering da spedizione). Testo: Source Serif 4.
   ========================================================================== */

@import url("/themes/nuovo1/fonts.css");

:root {
  /* palette — dal template Tourvex: turchese #2095AE, blu notte #0f2454,
     testo #5e6282, fondo chiaro #f4f5f8, bordi #dee2f0, oro #e4a853.
     I NOMI delle variabili restano quelli del sito: --sole e' sempre "il
     marchio e l'azione", --mare e' sempre "partenza confermata". Cambia il
     colore, non il mestiere: e' la regola dei due accenti. */
  --notte:        #0f2454;
  --indaco:       #3355a4;   /* stato "prevista": blu vivo, il piu' freddo */
  --indaco-vivo:  #4f77cc;
  --foschia:      #dee2f0;   /* bordi */
  --foschia-fine: #f4f5f8;   /* fondo tenue delle fasce */
  --velo-indaco:  #e8ecf7;   /* fondo dei riquadri di data (vedi site.css) */
  --velo-bordo:   rgba(51, 85, 164, .16);
  --carta:        #ffffff;
  --bianco:       #ffffff;

  /* Il marchio e l'azione: il turchese del template. Attenzione: il #2095AE
     di Tourvex su bianco da' 3.5:1, sotto il minimo di legge per un testo.
     Quindi --sole e' la sua versione appena piu' cupa (5.6:1), che si usa per
     testo, link e fondi pieni; --sole-vivo resta il turchese acceso e va solo
     dove non c'e' testo sopra: linee, bordi, pallini. */
  --sole:         #17708a;
  --sole-vivo:    #2095ae;
  --sole-caldo:   #125b70;

  /* lo stato "partenza confermata": verde bosco, tenuto ben distinto dal
     turchese del marchio (scelta del committente, 03/09) */
  --mare:         #1f7a5c;
  --mare-scuro:   #175f47;
  --mare-velo:    rgba(31, 122, 92, .15);

  /* lo stato "completa": l'oro del template. Prima era --sole, ma il sole
     adesso e' il marchio e i due si confonderebbero. */
  --oro:          #e4a853;

  --verderame:    #1f7a5c;
  --rosso:        #b3372c;
  --grafite:      #5e6282;
  /* la porpora della luce che gira intorno al riquadro chiuso delle date:
     appena piu' fredda di quella dello standard, per stare col turchese */
  --porpora:      #8b6ad6;

  /* tipografia: Barlow Condensed per titoli ed etichette, Barlow Semi
     Condensed per il testo. File locali, nessuna chiamata a Google. */
  --display: "Barlow Condensed", "Archivo", "Helvetica Neue", Arial, sans-serif;
  --testo:   "Barlow Semi Condensed", "Archivo", "Helvetica Neue", Arial, sans-serif;

  --misura: 68ch;
  --gutter: clamp(1rem, 4vw, 2.5rem);
  --max:    1320px;
  --max-stretto: 980px;

  /* forme: il raggio ampio e' l'impronta piu' riconoscibile del template;
     quello piccolo vale per campi, pastiglie e riquadri di servizio, dove 24px
     farebbero solo confusione */
  --raggio:         24px;
  --raggio-piccolo: 10px;
  --ombra:    0 10px 30px rgba(15, 36, 84, .04), 0 20px 60px rgba(15, 36, 84, .06);
  --ombra-su: 0 18px 40px rgba(15, 36, 84, .10), 0 30px 80px rgba(15, 36, 84, .07);
}

/* --------------------------------------------------------------- reset --- */

*, *::before, *::after { box-sizing: border-box; }

/* Un elemento con [hidden] deve sparire qualunque aspetto abbia: e' cosi' che
   il JavaScript nasconde le cose (per esempio il bottone "Filtra", inutile
   quando i filtri si aggiornano da soli). Senza questa riga, un
   display: inline-flex scritto in una classe vince sul [hidden] del browser e
   l'elemento resta li'. */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: clip; }

body {
  margin: 0;
  overflow-x: clip;
  /* la stessa texture di tessuto del sito storico: si vede solo nelle fasce
     laterali, fuori dal foglio dei contenuti, e sta sotto a tutto */
  background: #6b3a1f url("/img/prova_bg.jpg") repeat;
  color: var(--notte);
  font-family: var(--testo);
  font-size: clamp(1rem, .96rem + .2vw, 1.075rem);
  line-height: 1.6;
  font-optical-sizing: auto;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; height: auto; display: block; }
a   { color: var(--indaco); text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:hover { color: var(--indaco-vivo); }

:where(a, button, input, select, textarea, summary):focus-visible {
  outline: 3px solid var(--sole);
  outline-offset: 2px;
  border-radius: var(--raggio-piccolo);
}

h1, h2, h3, h4, h5 {
  font-family: var(--display);
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: -.015em;
  margin: 0 0 .5em;
  text-wrap: balance;
}

h1 { font-size: clamp(2.1rem, 1.4rem + 3.2vw, 3.9rem); font-stretch: 112%; }
h2 { font-size: clamp(1.5rem, 1.1rem + 1.7vw, 2.35rem); font-stretch: 108%; }
h3 { font-size: clamp(1.15rem, 1rem + .7vw, 1.5rem); }
h4 { font-size: 1.05rem; }

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

hr { border: 0; border-top: 1px solid var(--foschia); margin: 2.5rem 0; }

/* la testata resta in alto: le ancore devono fermarsi sotto, non sotto di essa */
[id] { scroll-margin-top: 5.5rem; }

/* -------------------------------------------------------- utilita' tipo --- */

/* etichetta di servizio: aree, stati, rubriche. Maiuscoletto largo. */
.etichetta {
  font-family: var(--display);
  font-size: .70rem;
  font-weight: 600;
  font-stretch: 118%;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--grafite);
  margin: 0;
}
.etichetta--chiara { color: rgba(255,255,255,.72); }
.etichetta--indaco { color: var(--indaco); }

.cifra { font-family: var(--display); font-variant-numeric: tabular-nums; font-weight: 700; }

/* La misura di lettura (68 caratteri) vale dove il testo sta su tutta la
   pagina. Dentro la colonna della scheda viaggio no: li' la colonna e' gia'
   una misura, e il limite lasciava 260px vuoti su 870. Dove il limite resta,
   il blocco si centra, cosi' il vuoto non e' tutto da un lato. */
.prosa { max-width: var(--misura); margin-inline: auto; }
.colonna-principale .prosa { max-width: none; }
.prosa :is(h2, h3) { margin-top: 1.8em; }
.prosa :is(h2, h3):first-child { margin-top: 0; }
.prosa ul, .prosa ol { padding-left: 1.2em; }
.prosa img { margin: 1.5rem 0; }
.prosa table { width: 100%; border-collapse: collapse; }
.prosa td, .prosa th { border-bottom: 1px solid var(--foschia); padding: .4rem .5rem; text-align: left; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.salta-al-contenuto {
  position: absolute; left: 1rem; top: -4rem; z-index: 200;
  background: var(--sole); color: var(--notte); padding: .6rem 1rem;
  font-family: var(--display); font-weight: 700;
  transition: top .15s;
}
.salta-al-contenuto:focus { top: 1rem; }

/* ------------------------------------------------------------- griglia --- */

/* Il foglio: tutto il sito sta qui dentro, su fondo pieno. Fuori resta solo
   la texture. E' anche il riferimento della testata sovrapposta, che percio'
   si allinea al foglio e non alla finestra. */
.foglio {
  position: relative;
  max-width: var(--max);
  margin-inline: auto;
  background: var(--carta);
  box-shadow: 0 0 3rem rgba(23, 26, 43, .35);
}

.contenitore { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }
.contenitore--stretto { max-width: var(--max-stretto); }

.sezione { padding-block: clamp(2.5rem, 1.5rem + 4vw, 5rem); }
/* La prima sezione dopo un hero sta piu' vicina: l'hero e' gia' un blocco
   alto e pieno, e l'aria buona per separare due fasce di testo, dopo una
   fotografia a tutta pagina, diventa un buco. Vale in ogni pagina con hero.
   (0,2,0) batte la ridefinizione di .sezione del tema nuovo1, che e' (0,1,0). */
.hero + .sezione { padding-top: clamp(1.25rem, .75rem + 1.5vw, 2rem); }
.sezione--fitta { padding-block: clamp(1.75rem, 1rem + 2.5vw, 3rem); }
.sezione--foschia { background: var(--foschia-fine); }
.sezione--notte { background: var(--notte); color: var(--bianco); }
.sezione--notte a { color: #cdd6ef; }

/* testata di sezione: titolo a sinistra, link "tutti" a destra */
.testata-sezione {
  display: flex; flex-wrap: wrap; align-items: baseline;
  justify-content: space-between; gap: .75rem 1.5rem;
  border-bottom: 2px solid var(--notte);
  padding-bottom: .6rem;
  margin-bottom: 1.75rem;
}
.sezione--notte .testata-sezione { border-bottom-color: rgba(255,255,255,.35); }
.testata-sezione h2 { margin: 0; }
/* il titolo di sezione puo' portare al suo elenco: resta un titolo, non
   diventa un link colorato */
.testata-sezione h2 a { color: inherit; text-decoration: none; }
.testata-sezione h2 a:hover { text-decoration: underline; }
/* Il collegamento "oltre": porta all'elenco completo di quello che si sta
   guardando. E' un componente, non un vezzo delle testate: dovunque compaia
   — testata di sezione, riga viaggio, coda di un riquadro della spalla — ha
   la stessa forma, maiuscoletto con la freccina. */
.oltre {
  font-family: var(--display); font-weight: 600; font-size: .82rem;
  letter-spacing: .08em; text-transform: uppercase; text-decoration: none;
  white-space: nowrap;
}
.oltre::after { content: " \2192"; }
.oltre:hover { text-decoration: underline; }

.griglia { display: grid; gap: clamp(1.25rem, 1rem + 1vw, 2rem); }
.griglia--2 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr)); }
.griglia--3 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 17.5rem), 1fr)); }
.griglia--4 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr)); }
/* Le aree della pagina "Destinazioni": stanno in due colonne anche a 390px,
   perche' quella pagina serve a far vedere quante e quali sono. Con una
   colonna sola si vedeva la prima e le altre non si sospettavano. */
.griglia--aree { grid-template-columns: repeat(auto-fill, minmax(min(50% - .75rem, 15rem), 1fr)); }

/* indice dei paesi: nomi in colonne, poche righe anche quando sono cinquanta */
.indice-paesi {
  list-style: none; margin: 0; padding: 0;
  columns: 4 8rem; column-gap: 2rem;   /* due colonne stanno anche a 390px */
}
.indice-paesi li {
  break-inside: avoid;
  display: flex; align-items: baseline; justify-content: space-between; gap: .5rem;
  padding: .3rem 0; border-bottom: 1px solid var(--foschia);
}
.indice-paesi a { text-decoration: none; }
.indice-paesi a:hover { text-decoration: underline; }
.indice-paesi .quanti {
  font-family: var(--display); font-size: .78rem; color: var(--grafite);
  font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------ bottoni --- */

.bottone {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--display); font-weight: 700; font-size: .9rem;
  letter-spacing: .06em; text-transform: uppercase; text-decoration: none;
  padding: .7rem 1.35rem; border: 2px solid var(--indaco); border-radius: var(--raggio-piccolo);
  background: var(--indaco); color: var(--bianco); cursor: pointer;
  transition: background .15s, border-color .15s, color .15s, transform .15s;
}
.bottone:hover { background: var(--indaco-vivo); border-color: var(--indaco-vivo); color: var(--bianco); }
.bottone:active { transform: translateY(1px); }
.bottone--fantasma { background: transparent; color: var(--indaco); }
.bottone--fantasma:hover { background: var(--indaco); color: var(--bianco); }
.bottone--sole { background: var(--sole); border-color: var(--sole); color: var(--notte); }
.bottone--sole:hover { background: var(--sole-caldo); border-color: var(--sole-caldo); color: var(--notte); }
.bottone--chiaro { background: transparent; border-color: rgba(255,255,255,.6); color: var(--bianco); }
.bottone--chiaro:hover { background: var(--bianco); color: var(--notte); border-color: var(--bianco); }
.bottone--piccolo { padding: .45rem .9rem; font-size: .78rem; }
/* il bottone che chiude un elenco: si vede da lontano, e sul telefono prende
   tutta la riga perche' li' un bersaglio piccolo in fondo alla pagina non lo
   trova nessuno */
.bottone--largo { padding: .8rem 2rem; font-size: .95rem; }
.verso-tutti { margin: 1.5rem 0 0; text-align: center; }
/* due strade invece di una (in fondo alla scheda viaggio): stessa fila, stesso
   peso, l'una accanto all'altra finche' ci stanno */
.verso-tutti--doppio { display: flex; flex-wrap: wrap; gap: .75rem; justify-content: center; }
@media (max-width: 46rem) {
  .verso-tutti .bottone--largo { display: flex; width: 100%; justify-content: center; }
}

/* ============================================================== TESTATA === */

.testata {
  position: sticky; top: 0; z-index: 100;
  background: var(--bianco);
  border-bottom: 1px solid var(--foschia);
}
.testata > .contenitore {
  display: flex; align-items: center; gap: 1.5rem; min-height: 4.5rem;
}
.marchio { flex: 0 0 auto; display: flex; flex-direction: column; gap: .15rem; padding: .45rem 0; }
.marchio img {
  height: 38px; width: auto;
  /* il file e' una silhouette bianca: su fondo chiaro va riportata a inchiostro */
  filter: brightness(0);
}
/* Il sottotitolo dice il mestiere: il logo e' solo il nome. Sta sotto il
   marchio in testata e nel piede, e in testata segue i tre stati della barra
   (trasparente sulla fotografia, piena dopo lo scorrimento). Il logo e'
   sceso da 46 a 38px per far stare tutto nei 4.5rem della testata. */
.marchio__sottotitolo {
  font-family: var(--display); font-weight: 600; font-size: .62rem;
  letter-spacing: .16em; text-transform: uppercase; line-height: 1.2;
}

.menu { display: flex; align-items: center; gap: .25rem; margin-left: auto; list-style: none; }
.menu > li { list-style: none; }
.menu ul { list-style: none; margin: 0; padding: 0; }

.voce {
  display: inline-flex; align-items: center; gap: .35rem;
  font-family: var(--display); font-weight: 600; font-size: .84rem;
  letter-spacing: .1em; text-transform: uppercase; text-decoration: none;
  color: var(--notte); padding: .7rem .8rem; border: 0; background: none;
  cursor: pointer; border-radius: var(--raggio-piccolo);
}
.voce:hover, .voce[aria-expanded="true"] { color: var(--indaco); background: var(--foschia-fine); }
.voce[aria-current="page"] { box-shadow: inset 0 -3px 0 var(--sole); }
.voce .freccia { transition: transform .2s; font-size: .6em; }
.voce[aria-expanded="true"] .freccia { transform: rotate(180deg); }

/* megamenu destinazioni */
.megamenu {
  position: absolute; left: 0; right: 0; top: 100%;
  background: var(--bianco);
  border-top: 1px solid var(--foschia);
  border-bottom: 3px solid var(--indaco);
  box-shadow: var(--ombra-su);
  padding-block: 2rem;
}
.megamenu[hidden] { display: none; }
.megamenu .aree {
  display: grid; gap: 1.5rem 2rem;
  grid-template-columns: repeat(auto-fill, minmax(11.5rem, 1fr));
  align-items: start;
}
.megamenu .area > h3 {
  font-size: .74rem; font-weight: 700; font-stretch: 118%; letter-spacing: .14em;
  text-transform: uppercase; color: var(--indaco);
  padding-bottom: .4rem; margin-bottom: .5rem;
  border-bottom: 1px solid var(--foschia);
}
.megamenu .area li + li { margin-top: .15rem; }
.megamenu .area a {
  display: block; text-decoration: none; color: var(--notte);
  font-size: .95rem; padding: .12rem 0;
}
.megamenu .area a:hover { color: var(--indaco-vivo); text-decoration: underline; }
.megamenu .coda {
  margin-top: 1.75rem; padding-top: 1.25rem; border-top: 1px solid var(--foschia);
  display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; justify-content: space-between;
}

.apri-menu { display: none; }

/* menu mobile */
@media (max-width: 62rem) {
  .apri-menu { display: inline-flex; margin-left: auto; }
  .menu {
    position: fixed; inset: 0 0 0 auto; width: min(22rem, 88vw);
    background: var(--bianco); box-shadow: var(--ombra-su);
    flex-direction: column; align-items: stretch; gap: 0;
    /* un <ul> nasce con un margine verticale suo: qui staccava il pannello dal
       bordo alto e da quello basso di un dito, e sembrava storto */
    margin: 0;
    /* in cima solo lo spazio della X, non una fascia vuota: le voci cominciano
       subito sotto */
    padding: 3.6rem 1.25rem 2rem; overflow-y: auto;
    transform: translateX(100%); z-index: 110;
    /* chiuso: fuori schermo E non raggiungibile da tastiera o lettori */
    visibility: hidden;
    transition: transform .25s ease, visibility 0s linear .25s;
  }
  .menu[data-aperto="1"] { transform: none; visibility: visible; transition-delay: 0s; }
  .menu > li { border-bottom: 1px solid var(--foschia); }
  .menu .voce { width: 100%; justify-content: space-between; padding: .9rem .25rem; }
  .megamenu {
    position: static; border: 0; box-shadow: none; padding: .25rem 0 1rem;
    background: var(--foschia-fine);
  }
  .megamenu .contenitore { padding-inline: .75rem; }
  .megamenu .aree { grid-template-columns: 1fr; gap: 1rem; }
  /* La X sta in alto a destra ed e' un quadratino. Va scritta con la stessa
     forza di ".menu .voce" — che a tutte le voci da' larghezza piena e testo
     spinto ai due lati: con un solo ".chiudi-menu" perdeva il confronto, si
     allargava su tutto il pannello e la crocetta finiva a sinistra. */
  .menu .chiudi-menu {
    position: absolute; top: .55rem; right: .55rem;
    width: 2.6rem; height: 2.6rem; padding: 0;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 1.1rem; line-height: 1;
  }
  .menu > li:last-child { border-bottom: 0; }
}
@media (min-width: 62.001rem) {
  .chiudi-menu { display: none; }
  /* la tendina non deve mai sfondare sotto il bordo della finestra:
     e' fuori dal flusso, quindi la pagina non la potrebbe raggiungere */
  .megamenu {
    max-height: calc(100vh - 6rem);
    max-height: calc(100dvh - 6rem);
    overflow-y: auto; overscroll-behavior: contain;
  }
  .menu > li.ha-menu { position: static; }
  .testata > .contenitore { position: relative; }
}

/* la testata e' sticky con z-index 100, quindi apre un contesto di
   impilamento suo: il pannello del menu, per quanto a 110, resta "dentro" la
   testata. Il velo deve percio' stare SOTTO 100, altrimenti coprirebbe il menu
   aperto e i tocchi finirebbero su di lui. */
.velo { position: fixed; inset: 0; background: rgba(23,26,43,.5); z-index: 95; border: 0; }
.velo[hidden] { display: none; }

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

.hero { position: relative; background: var(--notte); color: var(--bianco); overflow: hidden; }
.hero-lastra { position: absolute; inset: 0; }
.hero-lastra figure { position: absolute; inset: 0; margin: 0; opacity: 0; transition: opacity 1.2s ease; }
.hero-lastra figure[data-attiva="1"] { opacity: 1; }
.hero-lastra img { width: 100%; height: 100%; object-fit: cover; }
.hero-lastra::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(23,26,43,.55) 0%, rgba(23,26,43,.20) 35%, rgba(23,26,43,.82) 100%),
    linear-gradient(90deg, rgba(23,26,43,.55) 0%, rgba(23,26,43,0) 60%);
}
.hero-corpo {
  position: relative; z-index: 2;
  min-height: clamp(28rem, 26rem + 14vh, 42rem);
  display: flex; flex-direction: column; justify-content: flex-end;
  padding-block: clamp(3rem, 2rem + 6vw, 6rem);
}
.hero h1 { color: var(--bianco); max-width: 16ch; margin-bottom: .35em; }
.hero .occhiello { color: var(--sole); margin-bottom: 1rem; }
.hero .sommario { max-width: 46ch; font-size: 1.1rem; color: rgba(255,255,255,.86); }
.hero .azioni { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.75rem; }
.hero .didascalia {
  position: absolute; right: var(--gutter); bottom: 1rem; z-index: 3;
  font-family: var(--display); font-size: .68rem; letter-spacing: .1em;
  text-transform: uppercase; color: rgba(255,255,255,.55); text-align: right;
}

/* ------------------------------------------- hero della home: i viaggi --- */
/* Le diapositive sono viaggi (in evidenza, poi a caso fra quelli con una
   partenza futura): la fotografia e' del paese, il testo e' del viaggio. Qui
   c'e' la struttura, uguale per ogni tema, e il passaggio dello standard: una
   dissolvenza. Il funzionamento (frecce, punti, tastiera, dito, pausa) sta in
   site.js e mette gli attributi data-attiva, data-verso e data-auto. */
.hero--viaggi .hero-corpo { min-height: clamp(32rem, 28rem + 22vh, 46rem); }
/* Il testo deve stare dove stava quando sotto c'erano i due bottoni (tolti il
   05/09, vedi il template): al posto loro resta il loro ingombro come padding,
   1.75rem di margine + un bottone (3.4rem) sul largo. Sul telefono i bottoni
   andavano su due righe: vedi la regola sotto i 46rem. Richiesta del
   committente del 05/09: "il testo deve essere piu' in alto, dove era prima". */
.hero--viaggi .hero-corpo { padding-bottom: calc(clamp(3rem, 2rem + 6vw, 6rem) + 1.75rem + 3.4rem); }
.hero-diapositive { position: relative; display: grid; }
/* Uscita rapida, entrata dopo: se le due si dissolvessero insieme, per un
   attimo i due testi si sovrapporrebbero (si vedeva bene su mobile, dove le
   righe sono tante). Il 05/09 il committente, da telefono, vedeva ancora il
   testo vecchio sparire solo in parte e quello nuovo arrivargli sopra: da
   allora L'USCITA NON HA DISSOLVENZA, il testo che se ne va sparisce
   all'istante (transition: none, visibility hidden subito) e quello nuovo
   entra da .5s in poi. Cosi' la sovrapposizione e' impossibile per
   costruzione, su qualunque browser e a qualunque frequenza di fotogrammi.
   Il tema nuovo1 (coda.css) fa lo stesso per le singole righe. */
.hero-diapositiva {
  grid-area: 1 / 1; min-width: 0; opacity: 0; visibility: hidden;
  transition: none;
}
.hero-diapositiva[data-attiva="1"] { opacity: 1; visibility: visible; transition: opacity .7s ease .5s, visibility 0s .5s; }
.hero-dove { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin-bottom: .6rem; }
/* il nome del paese e' un collegamento alla sua pagina, ma resta un'etichetta:
   niente colore da link sopra la fotografia, la sottolineatura solo al passaggio */
.hero-dove a { color: inherit; text-decoration: none; }
.hero-dove a:hover { color: inherit; text-decoration: underline; text-underline-offset: .22em; }
.hero-titolo {
  font-size: clamp(2.2rem, 1.3rem + 4.4vw, 5rem); font-stretch: 112%;
  max-width: 18ch; margin-bottom: .35em; letter-spacing: -.02em;
}
.hero-titolo a { color: var(--bianco); text-decoration: none; }
.hero-titolo a:hover { color: var(--sole); }
.hero-dati {
  display: flex; flex-wrap: wrap; gap: .4rem 1.5rem; margin-top: 1rem;
  font-family: var(--display); font-size: .95rem; color: rgba(255,255,255,.8);
}
.hero-dati .dato { display: inline-flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
.hero-dati b { color: var(--bianco); font-weight: 700; }

/* Barrette e comandi: in home sono COMMENTATI nel template dal 05/09 (con i
   due bottoni), lo stile resta per chi li riaccende e per gli altri hero.
   I comandi erano rimasti solo le barrette, una per diapositiva: quella attiva
   si riempie nel tempo dell'intervallo, e dice fra quanto scatta la
   prossima. Stanno in fondo all'hero (che e' position: relative), non nel
   flusso sotto i bottoni: e' li' che il committente le voleva. Frecce e
   contatore sono stati tolti il 03/09; si cambia diapositiva da tastiera, col
   dito e cliccando le barrette. */
.hero-comandi {
  position: absolute; left: var(--gutter); right: var(--gutter); bottom: 1.25rem;
  z-index: 3; display: flex; align-items: center; justify-content: center;
}
.hero-punti { list-style: none; display: flex; gap: .4rem; margin: 0; padding: 0; }
.hero-punti button { display: block; position: relative; width: 2.6rem; height: 1.6rem; padding: 0; border: 0; background: transparent; cursor: pointer; }
.hero-punti button i {
  position: absolute; left: 0; right: 0; top: 50%; height: 3px; margin-top: -1.5px;
  background: rgba(255,255,255,.35); border-radius: var(--raggio-piccolo); overflow: hidden;
}
.hero-punti button i::after {
  content: ""; position: absolute; inset: 0; background: var(--sole);
  transform: scaleX(0); transform-origin: left;
}
.hero-punti li[data-attiva="1"] button i::after { transform: scaleX(1); }
.hero[data-auto] .hero-punti li[data-attiva="1"] button i::after { animation: hero-avanza var(--hero-intervallo, 7s) linear forwards; }
@keyframes hero-avanza { from { transform: scaleX(0); } to { transform: scaleX(1); } }

@media (max-width: 46rem) {
  .hero--viaggi .azioni .bottone { flex: 1 1 auto; justify-content: center; }
  .hero-punti button { width: 1.8rem; }
  /* Il respiro sotto l'hero e' quello che c'era con le barrette (che non
     dovevano finire sopra i bottoni) PIU' l'ingombro dei bottoni su due righe
     (margine 1.75rem, due bottoni da 3.4rem, .75rem di gap): barrette e
     bottoni sono commentati dal 05/09, ma il testo deve restare dove era. */
  .hero--viaggi .hero-corpo { padding-bottom: calc(clamp(4.5rem, 3rem + 8vw, 6rem) + 1.75rem + 3.4rem * 2 + .75rem); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-diapositiva, .hero-lastra figure { transition: none; }
  .hero-punti li[data-attiva="1"] button i::after { animation: none; }
}

/* testata interna, piu' bassa */
.hero--interno .hero-corpo { min-height: clamp(16rem, 14rem + 14vw, 24rem); }

.briciole { font-family: var(--display); font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 1rem; }
.briciole ol { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem; margin: 0; padding: 0; }
.briciole li + li::before { content: "\2044"; margin-right: .4rem; opacity: .5; }
.briciole a { color: inherit; text-decoration: none; opacity: .8; }
.briciole a:hover { opacity: 1; text-decoration: underline; }
.hero .briciole, .hero .briciole a { color: rgba(255,255,255,.8); }

/* =============================================== NASTRO DELLE PARTENZE === */
/* L'elemento firma: cio' che Harmattan vende sono date fisse di partenza,
   quindi le date sono trattate come materiale grafico, non come tabella. */

.nastro { display: flex; flex-wrap: wrap; gap: .35rem; list-style: none; margin: 0; padding: 0; }
.nastro li { display: block; }

.data-blocco {
  display: grid; grid-template-rows: auto auto; justify-items: center;
  min-width: 3.1rem; padding: .3rem .4rem .35rem;
  border: 1px solid var(--foschia);
  background: var(--bianco); color: var(--notte);
  text-decoration: none; border-radius: var(--raggio-piccolo);
  transition: border-color .15s, background .15s, transform .15s;
}
.data-blocco .giorno {
  font-family: var(--display); font-weight: 700; font-size: 1.05rem;
  font-variant-numeric: tabular-nums; line-height: 1;
}
.data-blocco .mese {
  font-family: var(--display); font-weight: 600; font-size: .58rem;
  letter-spacing: .12em; text-transform: uppercase; color: var(--grafite);
  margin-top: .15rem;
}
a.data-blocco:hover { border-color: var(--indaco); transform: translateY(-2px); }

/* partenza confermata: il blocco si riempie del colore mare */
.data-blocco--confermata { background: var(--mare); border-color: var(--mare); color: var(--bianco); }
.data-blocco--confermata .mese { color: rgba(255,255,255,.75); }
.data-blocco--completa { opacity: .55; }
.data-blocco--completa .giorno { text-decoration: line-through; }
.data-blocco--altre {
  display: inline-flex; align-items: center;
  font-family: var(--display); font-size: .72rem; font-weight: 600;
  letter-spacing: .08em; color: var(--grafite); padding-inline: .5rem;
  border: 1px dashed var(--foschia); border-radius: var(--raggio-piccolo);
}

.legenda-nastro {
  display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 1rem;
  font-family: var(--display); font-size: .72rem; letter-spacing: .06em;
  text-transform: uppercase; color: var(--grafite);
}
.legenda-nastro span { display: inline-flex; align-items: center; gap: .4rem; }
.legenda-nastro i { width: .9rem; height: .9rem; border: 1px solid var(--foschia); display: inline-block; }
.legenda-nastro i.confermata { background: var(--mare); border-color: var(--mare); }
.legenda-nastro i.completa { background: var(--sole); border-color: var(--sole); }

/* ============================================================== SCHEDE === */

/* scheda paese (elenco area) */
.scheda-paese {
  position: relative; display: block; text-decoration: none; color: var(--bianco);
  aspect-ratio: 3 / 4; overflow: hidden; border-radius: var(--raggio-piccolo); background: var(--indaco);
}
.scheda-paese img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.scheda-paese::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(23,26,43,0) 35%, rgba(23,26,43,.85) 100%);
}
.scheda-paese:hover img { transform: scale(1.06); }
.scheda-paese .didletta { position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; padding: 1rem; }
.scheda-paese .nome-luogo {
  display: block; font-family: var(--display); font-weight: 700;
  color: var(--bianco); font-size: 1.25rem; line-height: 1.1; letter-spacing: -.015em;
}
.scheda-paese .quanti { font-family: var(--display); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.75); }

/* notizia / partenza in evidenza */
.notizia { display: grid; grid-template-columns: 6.5rem 1fr; gap: 1rem; align-items: start; }
.notizia .miniatura { aspect-ratio: 1; overflow: hidden; background: var(--foschia); border-radius: var(--raggio-piccolo); }
.notizia .miniatura img { width: 100%; height: 100%; object-fit: cover; }
.notizia h3 { font-size: 1.05rem; margin-bottom: .2rem; }
.notizia h3 a { color: inherit; text-decoration: none; }
.notizia h3 a:hover { text-decoration: underline; }
.notizia .quando { display: flex; align-items: center; gap: .5rem; margin-bottom: .3rem; flex-wrap: wrap; }
.notizia p { font-size: .9rem; color: var(--grafite); margin: 0; }

.pastiglia {
  display: inline-flex; align-items: center; gap: .3rem;
  font-family: var(--display); font-size: .66rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  padding: .18rem .5rem; border-radius: 999px;
  background: var(--foschia); color: var(--notte);
}
/* Fondo tenue e testo colorato: si leggono, ma non sovrastano il titolo.
   Una famiglia di colore per stato, dal freddo al caldo:
   indaco = aperta, mare = parte di sicuro, sole = esaurita, rosso = annullata.
   Il grigio non lo usa nessuno: diceva "niente da fare" anche a chi poteva
   ancora prenotare. */
.pastiglia--prevista   { background: rgba(43, 58, 103, .13); color: var(--indaco); }
.pastiglia--confermata { background: var(--mare-velo); color: var(--mare-scuro); }
.pastiglia--completa   { background: rgba(228, 145, 79, .26); color: #8a5220; }
.pastiglia--annullata  { background: rgba(163, 58, 47, .13); color: #8a3025; }
/* su fondo scuro il velo tenue diventa illeggibile: serve piu' tinta e un
   testo chiaro */
.sezione--notte .pastiglia--prevista, .hero .pastiglia--prevista, .spalla .pastiglia--prevista { background: rgba(120, 145, 210, .26); color: #c3cdec; }
.sezione--notte .pastiglia--confermata, .hero .pastiglia--confermata, .spalla .pastiglia--confermata { background: rgba(74, 160, 178, .28); color: #a8dbe5; }
.sezione--notte .pastiglia--completa, .hero .pastiglia--completa, .spalla .pastiglia--completa { background: rgba(228, 145, 79, .26); color: #f0c396; }
.sezione--notte .pastiglia--annullata, .hero .pastiglia--annullata, .spalla .pastiglia--annullata { background: rgba(199, 92, 79, .28); color: #efb4ab; }

/* ================================================================ PIEDE === */

.piede-sito { background: var(--notte); color: rgba(255,255,255,.72); padding-block: 3rem 1.5rem; margin-top: 4rem; }
.piede-sito a { color: rgba(255,255,255,.82); text-decoration: none; }
.piede-sito a:hover { color: var(--sole); text-decoration: underline; }
.piede-sito h3 { color: var(--bianco); font-size: .76rem; font-stretch: 118%; letter-spacing: .16em; text-transform: uppercase; margin-bottom: .9rem; }
.piede-colonne { display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }
.piede-sito ul { list-style: none; margin: 0; padding: 0; font-size: .93rem; }
.piede-sito li + li { margin-top: .3rem; }
.piede-marchio img { height: 52px; width: auto; margin-bottom: .45rem; filter: brightness(0) invert(1); opacity: .9; }
.piede-marchio .marchio__sottotitolo { display: block; margin-bottom: 1rem; color: rgba(255,255,255,.6); }
.piede-nota { font-size: .9rem; max-width: 34ch; }
.piede-coda {
  margin-top: 2.5rem; padding-top: 1.25rem; border-top: 1px solid rgba(255,255,255,.15);
  display: flex; flex-wrap: wrap; gap: .75rem 1.5rem; justify-content: space-between;
  font-family: var(--display); font-size: .74rem; letter-spacing: .06em;
}

/* ============================================================== VARIE ===== */

.vuoto {
  border: 1px dashed var(--foschia); padding: 2rem; text-align: center;
  color: var(--grafite); border-radius: var(--raggio-piccolo); background: var(--bianco);
}

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

/* ---------------------------------------------- fasce "prossime partenze" --- */

.fila-partenze {
  display: grid; gap: .6rem; list-style: none; margin: 0; padding: 0;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr));
}
.riga-partenza {
  display: grid; grid-template-columns: auto 1fr; gap: .85rem;
  align-items: stretch;
  background: var(--bianco); border: 1px solid var(--foschia); border-radius: var(--raggio-piccolo);
  padding: .6rem; text-decoration: none; color: inherit;
  transition: border-color .15s, box-shadow .15s;
}
.riga-partenza__corpo {
  display: flex; flex-direction: column; justify-content: flex-start; gap: .2rem; min-width: 0;
}
.riga-partenza:hover { border-color: var(--indaco); box-shadow: var(--ombra); color: inherit; }
/* la riga in alto: data, paese e stato — come "data + Confermata" nelle news.
   Sul fondo chiaro del calendario le due etichette prendono i colori del
   testo (la classe --chiara e' per i fondi scuri della spalla) */
.riga-partenza .quando { color: var(--notte); font-weight: 700; }
.riga-partenza .dove { color: var(--grafite); }
.riga-partenza--annullata .quando { text-decoration: line-through; }
.riga-partenza .titolo {
  display: block; font-family: var(--display); font-weight: 700; font-size: 1.05rem;
  line-height: 1.2; letter-spacing: -.01em; margin: 0;
}
.riga-partenza .pastiglia { margin-top: .2rem; }
.riga-partenza { position: relative; }

/* La fotografia del paese: dal 03/09 e' la forma normale della scheda in
   tutti gli elenchi, non una variante. La data sta in chiaro sotto il
   titolo, con durata e quota, cosi' la scheda dice tutto quello che serve
   per scegliere. Il quadratino con giorno e mese non c'e' piu' nemmeno come
   ripiego (deciso dal committente): senza foto l'ingombro resta, pieno di
   indaco col nome del paese, come nella riga viaggio. */
.riga-partenza__foto {
  position: relative; display: block; width: 5.25rem; height: 5.25rem; overflow: hidden;
  background: var(--indaco); border-radius: var(--raggio-piccolo); align-self: start;
}
.riga-partenza__foto img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.riga-partenza:hover .riga-partenza__foto img { transform: scale(1.06); }
.riga-partenza__senza-foto {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  padding: .3rem; text-align: center; color: var(--bianco);
  font-family: var(--display); font-weight: 700; font-size: .58rem;
  letter-spacing: .08em; text-transform: uppercase; line-height: 1.15;
}
.riga-partenza__dati {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .15rem .7rem; margin-top: .15rem;
  font-family: var(--display); font-size: .82rem; color: var(--grafite);
}

.etichetta--nastro { margin-bottom: .45rem; }
.scheda-paese--larga { aspect-ratio: 4 / 3; }
.prosa .bottone { margin-right: .5rem; margin-top: .5rem; }

/* ================================================== IMPAGINATO A COLONNE === */

.impaginato { display: grid; gap: clamp(1.5rem, 1rem + 2vw, 3rem); align-items: start; }
@media (min-width: 60rem) {
  .impaginato { grid-template-columns: minmax(0, 1fr) 20rem; }
}
.due-colonne { display: grid; gap: clamp(1.5rem, 1rem + 2vw, 2.5rem); }
@media (min-width: 52rem) { .due-colonne { grid-template-columns: minmax(0, 1fr) minmax(0, 18rem); } }

.riquadro {
  background: var(--bianco); border: 1px solid var(--foschia); border-radius: var(--raggio-piccolo);
  padding: 1.1rem 1.15rem; margin-bottom: 1.25rem;
}
.riquadro > .etichetta { margin-bottom: .7rem; }
.riquadro--indaco { background: var(--indaco); border-color: var(--indaco); color: var(--bianco); }
.riquadro--indaco a { color: var(--bianco); }

/* ============================================== LA HOME A DUE COLONNE === */

/* Sopra i 75rem la home mette i viaggi a sinistra e una spalla a destra con
   le prossime date e le news. La soglia e' alta apposta: la riga viaggio ha
   12.5rem di fotografia e 15rem di date, larghezze fisse, e in una colonna
   piu' stretta al titolo resterebbero due parole per riga.
   Le tre parti stanno nel documento nell'ordine del telefono — viaggi, news,
   date (dal 05/09; prima date, viaggi, news) — e qui vengono piazzate a mano
   nella griglia: cambiare la disposizione e' questione di tre righe. */
.impaginato-home { display: grid; gap: clamp(1.5rem, 1rem + 2vw, 2.5rem); align-items: start; }
.impaginato-home > * { min-width: 0; }
/* Su mobile (finche' la home e' a una colonna) le news NON si vedono: richiesta
   del committente del 05/09 — da telefono la home e' l'elenco dei viaggi e,
   sotto, l'accordion delle date, al posto dove stavano le news. Il markup
   resta nel template: per rivederle basta togliere questa regola. */
@media (max-width: 74.999rem) {
  .spalla--news { display: none; }
}

@media (min-width: 75rem) {
  .impaginato-home {
    grid-template-columns: minmax(0, 1fr) 21rem;
    /* la terza riga, flessibile, si prende l'altezza che avanza: senza,
       l'altezza della colonna dei viaggi si spartirebbe fra le due righe
       della spalla e fra i due riquadri si aprirebbe mezza pagina di vuoto */
    grid-template-rows: auto auto 1fr;
  }
  .colonna-viaggi { grid-column: 1; grid-row: 1 / 4; }
  .spalla--date   { grid-column: 2; grid-row: 1; }
  /* le news si prendono anche la riga vuota della griglia. Erano
     appiccicate allo scorrimento (position: sticky) per non lasciare vuota
     la colonna: tolto il 03/09 su richiesta del committente, che non voleva
     un riquadro che si ferma mentre la pagina scorre. */
  .spalla--news   { grid-column: 2; grid-row: 2 / 4; align-self: start; }
}

/* la spalla e' fatta di riquadri, come la colonna laterale delle altre pagine */
.spalla {
  background: var(--bianco); border: 1px solid var(--foschia); border-radius: var(--raggio-piccolo);
  padding: 1.1rem 1.15rem;
}
/* I due riquadri della spalla sono a colore pieno (DECISO dal committente):
   notte per le news, indaco per le date. Due colori diversi perche' sono due
   cose diverse, e nessuno dei due e' un accento con un mestiere: --sole e'
   il marchio, --mare e' lo stato "confermata" (CONTRATTO-STILE sez. 1).
   In entrambi i box le pastiglie usano le varianti scure (.spalla .pastiglia--*). */
.spalla--date { background: var(--notte); border-color: var(--notte); color: var(--bianco); }
.spalla--news {
  /* un indaco spento, ricavato dai due colori del tema cosi' segue nuovo1 da
     solo (i due fondi sono stati invertiti il 03/09 sera su richiesta: notte
     alle date, indaco spento alle news). Con questo fondo le pastiglie scure
     stanno sopra 4.5:1 in entrambi i temi (misurato: 4.7 il caso peggiore). */
  background: var(--indaco);
  background: color-mix(in srgb, var(--indaco) 45%, var(--notte));
  border-color: transparent; color: var(--bianco);
}
/* la pastiglia nei due box: stesse misure delle schede data e sempre a destra */
.spalla .pastiglia {
  margin-left: auto; font-size: .56rem; letter-spacing: .08em; padding: 0 .4rem; line-height: 1.5;
}
.spalla--news .testata-sezione,
.spalla--date .testata-sezione { border-bottom-color: rgba(255,255,255,.35); }
.spalla--news .oltre,
.spalla--date .oltre { color: #cdd6ef; }

/* --- la testata del riquadro come comando dell'accordion (04/09) ---
   Sotto i 56rem il box delle date arriva chiuso: la home si apre allora sui
   viaggi, che e' quello che si va a cercare da telefono. La riga del titolo
   e' il comando; sopra la soglia il JS tiene il box aperto e la riga torna
   una normale testata di sezione. */
.spalla > summary { list-style: none; }
.spalla > summary::-webkit-details-marker { display: none; }
@media (max-width: 55.999rem) {
  .spalla > summary { cursor: pointer; position: relative; padding-right: 2.4rem; }

  /* --- il comando: cerchio e freccina, centrati per costruzione ---
     I due pseudo-elementi hanno LO STESSO IDENTICO RIQUADRO — stessa ancora,
     stessa misura, stesso spostamento, scritti una volta sola qui sotto —
     quindi la freccina non puo' NON stare al centro del cerchio: non c'e' un
     numero da azzeccare, e il giorno che cambia la misura cambia per tutti e
     due insieme.
     La freccina non e' piu' un quadratino ruotato di 45 gradi: di quello si sa
     dov'e' il centro geometrico, non dove sta l'inchiostro (la V pende verso
     la punta, ed e' li' che si sbagliava). E' un ritaglio dentro il riquadro,
     disegnato simmetrico: l'inchiostro va dal 32% al 68% in larghezza e dal
     36,5% al 63,5% in altezza, cioe' e' centrato sul riquadro per costruzione.
     Misure basse di proposito (04/09, richiesta del committente): la freccina
     e' piccola, il cerchio le sta largo intorno. */
  .spalla > summary::before,
  .spalla > summary::after {
    content: ""; position: absolute; right: 0; top: .6rem;
    width: 1.7rem; height: 1.7rem;
    transform: translateY(-50%);
  }
  .spalla > summary::after {
    background: rgba(255, 255, 255, .8);
    clip-path: polygon(32% 36.5%, 50% 54.5%, 68% 36.5%, 68% 45.5%, 50% 63.5%, 32% 45.5%);
    transition: transform .2s;
  }
  .spalla[open] > summary::after { transform: translateY(-50%) rotate(180deg); }
  .spalla[open] > summary::before { content: none; }
  /* chiuso: niente filo sotto e niente aria sprecata, e' una riga sola */
  .spalla:not([open]) > summary { border-bottom: 0; padding-bottom: 0; margin-bottom: 0; }

  /* --- l'invito ad aprire (04/09) ---
     Chiuso, il riquadro rischia di leggersi come un titolo e basta. Due cose
     lo smentiscono. La prima e' ferma e c'e' sempre: la freccina sta dentro un
     cerchio, e una freccia in un tondo si legge come un bottone senza bisogno
     di parole. La seconda e' il movimento, e lo fa SOLO IL CERCHIO (la freccina
     sta ferma: il 04/09 il committente ha bocciato il respiro con la freccina
     che scendeva). Ogni 7,2 s un'onda arriva DA FUORI: nasce larga e
     trasparente, si stringe SENZA FRETTA sul cerchio schiarendosi fino al
     bianco pieno (tre quarti di secondo: il committente non voleva uno
     scoppio) e li' si spegne piano. Va al contrario di come era nata (prima si allargava
     e usciva) perche' l'occhio segue il movimento e deve finire sulla
     freccia, non scappare via dal bottone. Dura mezzo secondo e sta in fondo al giro: per quasi sette
     secondi la riga e' ferma, e il giro e' diverso da quello della luce sul
     bordo (7,2 s contro 5,6), cosi' i due non vanno mai a tempo.
     Tutto sul :not([open]): appena si apre, sparisce. */
  .spalla:not([open]) > summary::before {
    border-radius: 50%; border: 1px solid var(--bianco); opacity: .35;
    animation: invito-alone 7.2s cubic-bezier(.35, .25, .2, 1) infinite;
  }

  /* Lo sbaluccichio: una luce corre lungo il BORDO del riquadro e fa un giro,
     poi sparisce e per qualche secondo non succede niente. E' il modo del
     "Sparkle Button" di jh3y (codepen LYJMPBL) che piace al committente: li'
     e' un gradiente conico che gira dentro una cornice; qui il gradiente sta
     fermo nell'elemento e a girare e' l'angolo da cui parte (--giro), cosi'
     non serve un elemento in piu' — di pseudo-elementi liberi ne avevamo uno.
     Il filo di luce e' spesso 3px: e' il "padding" con la maschera che toglie
     il pieno e lascia solo la cornice. La luce non e' bianca e basta: ha la
     testa bianca e la coda di porpora, con un alone dello stesso colore
     (drop-shadow, che segue la forma ritagliata). Serve a far pesare il
     riquadro come un bottone vero — richiesta del committente.
     Il giro parte tre decimi dopo che la pagina e' li' (chi arriva vede
     qualcosa muoversi con la coda dell'occhio) ed e' un BRILLANTIO: due giri
     di fila da quattordici centesimi, il secondo appena piu' tenue come
     un'eco. Tutto si consuma in tre decimi e mezzo, dentro un ciclo di 5,6 s (voluto dal committente: un
     guizzo, non una passeggiata): il resto e' attesa
     ferma, cosi' invita senza diventare un lampeggio. Passa DAVANTI a tutto ma
     non intercetta il dito. Solo sul <details> chiuso: il riquadro delle news
     e' un <aside> senza attributo open, e un ".spalla:not([open])" se lo
     prenderebbe. */
  /* i due riquadri della spalla, chiusi, sono due righe sole: niente filo
     sotto e niente aria sprecata (regola sopra), e un'ombra corta che li
     stacca da quello che scorre */
  details.spalla:not([open]) {
    position: relative; overflow: hidden;
    box-shadow: 0 10px 24px -14px rgba(12, 14, 24, .75);
  }
  /* Le news partono col tempo spostato rispetto alle date: due riquadri che
     ammiccano insieme sembrano una macchina, sfalsati sembrano vivi. */
  .spalla--news:not([open]) > summary::before { animation-delay: 3.6s; }
  .spalla--news:not([open])::after { animation-delay: 2.9s; }

  details.spalla:not([open])::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    border-radius: inherit; padding: 3px;
    background: conic-gradient(from var(--giro),
      transparent 0 42%,
      color-mix(in srgb, var(--porpora) 45%, transparent) 56%,
      var(--porpora) 67%,
      #fff 74%,
      color-mix(in srgb, var(--porpora) 75%, transparent) 82%,
      transparent 93%);
    filter: drop-shadow(0 0 5px color-mix(in srgb, var(--porpora) 70%, transparent));
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
            mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    opacity: 0;
    animation: invito-luccichio 5.6s linear .35s infinite;
  }
}
/* le animazioni ripetono lo spostamento di base (translateY(-50%)): un
   transform sostituisce l'altro, non lo somma */
@property --giro {
  syntax: "<angle>"; inherits: false; initial-value: 0deg;
}
/* Il brillantio: NON un giro solo ma due di fila, sui quattordici centesimi
   l'uno, un lampo di buio in mezzo e il secondo un po' piu' tenue, come l'eco
   del primo. Deve funzionare con la CODA DELL'OCCHIO: chi sta leggendo l'hero
   deve accorgersi che qualcosa si e' mosso senza capire bene cosa — la
   curiosita' si accende cosi', non guardando il movimento ma cercandolo.
   Percio' e' cosi' corto: se dura abbastanza da poterlo seguire, diventa una
   decorazione e smette di chiamare. L'angolo percio' non arriva a 360 ma a 720: due giri
   interi. Fuori da quel secondo scarso la luce sta spenta (opacita' zero) e
   la riga e' ferma. --giro e' dichiarato con @property qui sopra, se no un
   angolo non si puo' animare. */
@keyframes invito-luccichio {
  0%        { --giro: 0deg;   opacity: 0; }
  0.4%      { opacity: 1; }
  2.5%      { --giro: 360deg; opacity: 1; }
  2.8%      { --giro: 360deg; opacity: 0; }
  3.4%      { --giro: 360deg; opacity: 0; }
  3.7%      { opacity: .6; }
  5.9%      { --giro: 720deg; opacity: .6; }
  6.2%      { --giro: 720deg; opacity: 0; }
  100%      { --giro: 720deg; opacity: 0; }
}
/* L'onda del cerchio, AL CONTRARIO (04/09, seconda richiesta del committente):
   prima l'onda si allargava e usciva, e l'occhio andava dietro a lei, via dal
   bottone. Ora arriva da fuori: nasce larga e trasparente, si STRINGE sul
   cerchio schiarendosi fino al bianco pieno, e li' si spegne piano tornando
   com'era. Lo sguardo cade dove finisce il movimento, cioe' sulla freccia.
   Il salto verso l'esterno (88,5%) avviene a opacita' zero: non si vede. */
@keyframes invito-alone {
  0%, 83% { transform: translateY(-50%) scale(1);   opacity: .35; }
  83.5%   { transform: translateY(-50%) scale(1.7); opacity: 0; }
  94%     { transform: translateY(-50%) scale(1);   opacity: 1; }
  100%    { transform: translateY(-50%) scale(1);   opacity: .35; }
}
/* chi ha chiesto meno movimento al sistema operativo lo trova fermo */
@media (prefers-reduced-motion: reduce) {
  .spalla:not([open]) > summary::before { animation: none; }
  details.spalla:not([open])::after { display: none; }
}

/* il link in fondo al riquadro: lo stesso per i due box */
.spalla-coda { margin: .9rem 0 0; padding-top: .7rem; border-top: 1px solid rgba(255,255,255,.18); text-align: right; }

/* nella spalla le date stanno in colonna, una scheda per riga */
.spalla .fila-partenze { grid-template-columns: minmax(0, 1fr); }

/* --- ECCEZIONE voluta dal committente (03/09 sera): dentro il box scuro
   della home le schede delle date sono UGUALI alle notizie minute del box
   accanto: miniatura di 3.5rem, riga con data e pastiglia, titolo; la riga
   con durata e quota non si vede (sta nel calendario e nella scheda). Il
   template e' lo stesso di sempre (_riga_partenza): qui cambia solo il
   contesto. Le misure sono quelle di .notizia-minuta, riga per riga. --- */
.spalla--date .fila-partenze { gap: 0; }
.spalla--date .fila-partenze li + li { border-top: 1px solid rgba(255,255,255,.14); }
.spalla--date .riga-partenza {
  grid-template-columns: 3.5rem minmax(0, 1fr); gap: .75rem; align-items: center;
  background: transparent; border: 0; border-radius: var(--raggio-piccolo); padding: .6rem .35rem;
  color: inherit; box-shadow: none; transition: background-color .15s;
}
.spalla--date .riga-partenza:hover { background: rgba(255,255,255,.07); box-shadow: none; color: var(--bianco); }
.spalla--date .riga-partenza:hover .titolo { text-decoration: underline; }
.spalla--date .riga-partenza__foto {
  width: 3.5rem; height: 3.5rem; align-self: center;
  /* il segnaposto indaco sparirebbe sul fondo indaco: velo bianco */
  background: rgba(255,255,255,.14);
}
.spalla--date .riga-partenza__corpo { gap: 0; }
.spalla--date .riga-partenza__occhiello { gap: .3rem .5rem; margin-bottom: .15rem; }
.spalla--date .riga-partenza .quando,
.spalla--date .riga-partenza .dove { color: rgba(255,255,255,.72); font-weight: 600; }
.spalla--date .riga-partenza .dove { display: none; }
.spalla--date .riga-partenza .titolo { font-size: .98rem; line-height: 1.25; letter-spacing: -.01em; }
.spalla--date .riga-partenza__dati { display: none; }

/* testata di sezione in tono minore: dentro un riquadro di 21rem un titolo da
   pagina griderebbe piu' di quello della colonna accanto */
.testata-sezione--minuta {
  padding-bottom: .45rem; margin-bottom: .9rem; border-bottom-width: 1px;
}
.testata-sezione--minuta h2 { font-size: 1.15rem; }
.testata-sezione--minuta .oltre { font-size: .72rem; }

/* --- la notizia ridotta all'osso: miniatura, data, titolo. L'estratto sta
   nella pagina News: in 21rem 130 battute diventano un muro grigio --- */
.elenco-minuto { list-style: none; margin: 0; padding: 0; }
.elenco-minuto li + li { border-top: 1px solid rgba(255,255,255,.14); }
.notizia-minuta {
  display: grid; grid-template-columns: 3.5rem minmax(0, 1fr); gap: .75rem;
  align-items: center; padding: .6rem .35rem;
  text-decoration: none; color: inherit; border-radius: var(--raggio-piccolo);
  transition: background-color .15s;
}
.notizia-minuta:hover { background: rgba(255,255,255,.07); color: var(--bianco); }
.notizia-minuta:hover h3 { text-decoration: underline; }
.notizia-minuta .miniatura {
  aspect-ratio: 1; overflow: hidden; border-radius: var(--raggio-piccolo); background: var(--indaco);
}
.notizia-minuta .miniatura img { width: 100%; height: 100%; object-fit: cover; }
.notizia-minuta .quando {
  display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .5rem; margin-bottom: .15rem;
}
.notizia-minuta h3 {
  font-size: .98rem; line-height: 1.25; letter-spacing: -.01em; margin: 0;
}

.riquadro p:last-child { margin-bottom: 0; }
.riquadro .bottone { margin-top: .75rem; }

.prosa--fitta { font-size: .95rem; }
.prosa--fitta :is(h2, h3) { margin-top: 1.2em; }

.elenco-requisiti, .elenco-semplice { list-style: none; margin: 0 0 .75rem; padding: 0; font-size: .95rem; }
.elenco-requisiti li { padding-left: 1.4rem; position: relative; margin-bottom: .3rem; }
.elenco-requisiti li::before {
  content: ""; position: absolute; left: 0; top: .52em;
  width: .6rem; height: .6rem; background: var(--sole);
}
.elenco-semplice li { padding-bottom: .35rem; margin-bottom: .35rem; border-bottom: 1px solid var(--foschia); }
.elenco-semplice li:last-child { border-bottom: 0; }

.scheda-dati { margin: 0; font-size: .93rem; }
.scheda-dati dt {
  font-family: var(--display); font-size: .66rem; font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: var(--grafite); margin-top: .7rem;
}
.scheda-dati dd { margin: 0; }
.scheda-dati dt:first-child { margin-top: 0; }

.avvertenza {
  margin-top: 1.5rem; padding: .9rem 1rem; font-size: .93rem;
  background: var(--foschia-fine); border-left: 3px solid var(--sole);
}

/* ============================================================== SCHEDE ==== */

.linguette {
  display: flex; flex-wrap: wrap; gap: .25rem;
  border-bottom: 2px solid var(--notte); margin-bottom: 1.75rem;
}
.linguetta {
  font-family: var(--display); font-weight: 700; font-size: .84rem;
  letter-spacing: .1em; text-transform: uppercase;
  padding: .7rem 1.1rem; border: 0; background: none; cursor: pointer;
  color: var(--grafite); border-bottom: 3px solid transparent; margin-bottom: -2px;
}
.linguetta:hover { color: var(--notte); }
.linguetta[aria-selected="true"] { color: var(--notte); border-bottom-color: var(--sole); }
.linguetta .conteggio {
  display: inline-block; margin-left: .35rem; padding: .05rem .4rem;
  background: var(--foschia); color: var(--notte); border-radius: 999px;
  font-size: .72rem; letter-spacing: 0;
}
.pannello[hidden] { display: none; }
.pannello:focus { outline: none; }

/* ------------------------------------------------------- fascia sintesi --- */
/* Le due viste della scheda viaggio (programma / date e prezzi) in cima alla
   pagina: una coppia bassa e discreta, non un bottone che grida. Quella aperta
   e' piena, l'altra e' solo scritta. */
.scelta-vista {
  display: inline-flex; margin: 0; padding: .15rem; gap: .1rem;
  background: var(--bianco); border: 1px solid var(--foschia); border-radius: 999px;
}
.scelta-vista .vista {
  font-family: var(--display); font-size: .76rem; font-weight: 600;
  letter-spacing: .09em; text-transform: uppercase; text-decoration: none;
  color: var(--grafite); white-space: nowrap;
  padding: .35rem .9rem; border-radius: 999px;
  transition: background .15s, color .15s;
}
.scelta-vista .vista:hover { background: var(--foschia-fine); color: var(--notte); }
.scelta-vista .vista[aria-current="true"] { background: var(--indaco); color: var(--bianco); }
/* senza JS non c'e' una vista "aperta" (i pannelli si vedono tutti e due):
   la coppia resta due collegamenti, e vanno entrambi al posto giusto */


.fascia-sintesi { background: var(--bianco); border-bottom: 1px solid var(--foschia); }
.fascia-sintesi .contenitore {
  display: flex; flex-wrap: wrap; gap: 1rem 2rem; align-items: center;
  justify-content: space-between; padding-block: 1rem;
}
.sintesi { display: flex; flex-wrap: wrap; gap: .75rem 2.25rem; margin: 0; }
.sintesi dt {
  font-family: var(--display); font-size: .64rem; font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: var(--grafite);
}
.sintesi dd { margin: 0; font-family: var(--display); font-weight: 700; font-size: 1.05rem; }

/* ------------------------------------------------------- tabella date --- */

.tabella-scorrevole { overflow-x: auto; margin-bottom: 1rem; }
.tabella-date { width: 100%; border-collapse: collapse; font-size: .95rem; min-width: 34rem; }
.tabella-date th {
  font-family: var(--display); font-size: .66rem; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--grafite); text-align: left;
  padding: .5rem .6rem; border-bottom: 2px solid var(--notte);
}
.tabella-date td { padding: .65rem .6rem; border-bottom: 1px solid var(--foschia); vertical-align: top; }
.tabella-date tbody tr:hover { background: var(--foschia-fine); }
.tabella-date .a-destra, .tabella-date th.a-destra { text-align: right; }
.tabella-date .anno { color: var(--grafite); font-size: .85em; margin-left: .3rem; }
.tabella-date .nota-partenza { display: block; font-size: .85em; color: var(--grafite); }

.elenco-voci { list-style: none; margin: 0 0 1.5rem; padding: 0; }
.elenco-voci li {
  display: flex; justify-content: space-between; gap: 1rem;
  padding: .5rem 0; border-bottom: 1px solid var(--foschia);
}
.su-richiesta { font-family: var(--display); font-size: .74rem; letter-spacing: .08em; text-transform: uppercase; color: var(--grafite); }
.nota-calcolo { font-size: .9rem; color: var(--grafite); }
.nota-quote { margin-top: 1.5rem; font-size: .95rem; }
.occhiello-programma { font-size: 1.12rem; color: var(--grafite); }

/* --------------------------------------------------------- calcolatore --- */

.calcolatore {
  background: var(--foschia-fine); border: 1px solid var(--foschia); border-radius: var(--raggio-piccolo);
  padding: 1.25rem; margin-bottom: 2rem;
}
.riga-calcolo { display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: center; }
.riga-calcolo label, .riga-filtro label {
  font-family: var(--display); font-size: .68rem; font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: var(--grafite);
}
.voci-calcolo { list-style: none; margin: 1rem 0 0; padding: 0; }
.voci-calcolo li {
  display: flex; justify-content: space-between; gap: 1rem; align-items: baseline;
  padding: .45rem 0; border-bottom: 1px solid var(--foschia);
}
.voci-calcolo li[hidden] { display: none; }
.voci-calcolo label { display: inline-flex; gap: .5rem; align-items: baseline; }
.voci-calcolo b { font-family: var(--display); font-variant-numeric: tabular-nums; white-space: nowrap; }
.totale-calcolo {
  display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
  margin: .9rem 0 .5rem; padding-top: .6rem; border-top: 2px solid var(--notte);
  font-family: var(--display); font-weight: 700;
}
.totale-calcolo span { font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--grafite); }
.totale-calcolo b { font-size: 1.7rem; font-variant-numeric: tabular-nums; }

/* =========================================================== GALLERY ====== */

.gallery-griglia { display: grid; gap: .6rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr)); }
.provino { position: relative; display: block; overflow: hidden; border-radius: var(--raggio-piccolo); background: var(--foschia); }
.provino img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform .4s ease; }
.provino:hover img { transform: scale(1.05); }
.didascalia-foto {
  position: absolute; left: 0; right: 0; bottom: 0; padding: .5rem .6rem;
  background: linear-gradient(180deg, rgba(23,26,43,0), rgba(23,26,43,.85));
  color: var(--bianco); font-family: var(--display); font-size: .72rem; letter-spacing: .04em;
}
.gallery-mini { display: grid; grid-template-columns: repeat(3, 1fr); gap: .35rem; }
.gallery-mini img { aspect-ratio: 1; object-fit: cover; width: 100%; border-radius: var(--raggio-piccolo); }

/* ======================================================== CALENDARIO ====== */

.filtri {
  display: flex; flex-wrap: wrap; gap: 1rem 1.5rem; align-items: end;
  background: var(--bianco); border: 1px solid var(--foschia); border-radius: var(--raggio-piccolo);
  padding: 1rem 1.15rem; margin-bottom: 2.5rem;
}
.riga-filtro { display: flex; flex-direction: column; gap: .3rem; margin: 0; }
.riga-filtro--larga { flex: 1 1 22rem; }
.filtri select, .filtri input, .calcolatore select {
  font-family: var(--testo); font-size: 1rem; padding: .5rem .6rem;
  border: 1px solid var(--foschia); border-radius: var(--raggio-piccolo); background: var(--bianco); color: var(--notte);
  max-width: 100%;
}
.riga-filtro .bottone { margin-right: .5rem; }

/* --- i due filtri su una riga sola, da telefono (04/09) ---
   In cima a /partenze e /viaggi il modulo occupava due righe dentro un
   riquadro bianco: un ingombro da pagina di ricerca, per due tendine. Sotto i
   46rem il riquadro sparisce (restano i bordi delle tendine, che bastano) e le
   due tendine stanno affiancate a meta' larghezza l'una. Le etichette vanno
   via dagli occhi ma non dal documento: la prima voce di ogni tendina dice
   gia' "Tutte le aree" e "Tutti i paesi", e chi legge con la voce sente
   l'etichetta vera. Solo il modulo che si aggiorna da solo (data-filtri-vivi):
   quello della ricerca ha un campo di testo e vuole la sua riga. */
@media (max-width: 46rem) {
  .filtri[data-filtri-vivi] {
    gap: .5rem; padding: 0; border: 0; background: transparent;
    align-items: center; margin-bottom: 1.5rem;
    /* niente riquadro dietro le tendine: anche l'ombra e l'angolo tondo, che
       nel tema nuovo1 arrivano da coda.css, vanno spenti — senza, resta in
       giro una lastra chiara che raccoglie tendine e "Azzera" */
    box-shadow: none; border-radius: 0;
  }
  .filtri[data-filtri-vivi] label {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }
  .filtri[data-filtri-vivi] .riga-filtro { flex: 1 1 calc(50% - .25rem); min-width: 0; }
  /* la riga dei bottoni: con JavaScript "Filtra" e' nascosto, e se non c'e'
     "Azzera" quel paragrafo e' un vuoto che ruba spazio */
  .filtri[data-filtri-vivi] .riga-filtro:has(> [hidden]:only-child) { display: none; }
  /* "Azzera" compare solo a filtro acceso: sta a destra e prende lo spazio
     che gli serve, non tutta la riga */
  .filtri[data-filtri-vivi] .riga-filtro:last-child { flex: 0 0 auto; margin-left: auto; }
  .filtri[data-filtri-vivi] .riga-filtro:last-child .bottone { padding: .35rem .8rem; font-size: .72rem; }
  .filtri[data-filtri-vivi] select { width: 100%; padding: .45rem .5rem; font-size: .95rem; }
  .filtri[data-filtri-vivi] .riga-filtro .bottone { margin-right: 0; }
}

.mese-partenze { margin-bottom: 2.5rem; }
.titolo-mese {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem 1rem;
  font-size: clamp(1.3rem, 1.1rem + 1vw, 1.9rem); text-transform: capitalize;
  border-bottom: 2px solid var(--notte); padding-bottom: .5rem; margin-bottom: 1rem;
}
.titolo-mese .anno { color: var(--grafite); font-weight: 400; }
.titolo-mese .quante {
  margin-left: auto; font-size: .7rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--grafite); font-weight: 600;
}

.paginazione { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; justify-content: center; margin-top: 2.5rem; }
.notizia--elenco { align-items: start; }

/* ============================================================= MODULI ===== */

.modulo { max-width: 40rem; }
.campo { display: flex; flex-direction: column; gap: .35rem; margin-bottom: 1.1rem; }
.campo label {
  font-family: var(--display); font-size: .7rem; font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: var(--grafite);
}
.campo .facoltativo { font-weight: 400; letter-spacing: .08em; opacity: .7; }
.campo input, .campo textarea {
  font-family: var(--testo); font-size: 1rem; padding: .65rem .75rem;
  border: 1px solid var(--foschia); border-radius: var(--raggio-piccolo); background: var(--bianco); color: var(--notte);
  width: 100%;
}
.campo input:focus, .campo textarea:focus { border-color: var(--indaco); }
.campo--errore input, .campo--errore textarea { border-color: var(--rosso); }
.campo .errore { color: var(--rosso); font-size: .88rem; }
.campo--nota { font-size: .9rem; color: var(--grafite); }
.campi-affiancati { display: grid; gap: 0 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); }
.trappola { position: absolute; left: -9999px; }

.messaggio { padding: .9rem 1rem; border-radius: var(--raggio-piccolo); margin-bottom: 1.5rem; }
.messaggio--fatto { background: rgba(63, 122, 106, .12); border-left: 3px solid var(--verderame); }
.messaggio--errore { background: rgba(163, 58, 47, .1); border-left: 3px solid var(--rosso); }

.invito-pagina { margin-top: 2.5rem; }


/* =============================================== TENUTA ORIZZONTALE ======= */
/* --- niente sfondamenti orizzontali: i figli di griglie e flex hanno
   min-width auto, cioe' possono allargare il contenitore oltre lo schermo.
   Qui si riporta il minimo a zero e si spezzano i contenuti indivisibili. --- */

/* L'overflow-x: clip su html/body e' solo una rete di sicurezza: "clip" e non
   "hidden" perche' non crea un contenitore di scorrimento e quindi non rompe la
   testata sticky. Gli sfondamenti veri si risolvono alla radice, con i
   min-width qui sotto. */

.impaginato > *,
.due-colonne > *,
.griglia > *,
.colonna-principale,
.colonna-laterale,
.schede,
.pannello { min-width: 0; }

.prosa { overflow-wrap: break-word; }
.prosa table { display: block; overflow-x: auto; max-width: 100%; }
.prosa :is(img, iframe, video) { max-width: 100%; height: auto; }

/* la tabella delle date si impila su schermo stretto: niente scorrimento
   laterale, ogni partenza diventa una scheda con le sue etichette */
@media (max-width: 46rem) {
  .tabella-scorrevole { overflow-x: visible; }
  .tabella-date { min-width: 0; display: block; }
  .tabella-date thead {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap;
  }
  .tabella-date tbody, .tabella-date tr, .tabella-date td { display: block; width: 100%; }
  .tabella-date tr {
    background: var(--bianco); border: 1px solid var(--foschia); border-radius: var(--raggio-piccolo);
    padding: .7rem .85rem; margin-bottom: .6rem;
  }
  .tabella-date tbody tr:hover { background: var(--bianco); }
  .tabella-date td {
    display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
    padding: .2rem 0; border-bottom: 0;
  }
  .tabella-date td::before {
    content: attr(data-etichetta);
    font-family: var(--display); font-size: .64rem; font-weight: 600;
    letter-spacing: .14em; text-transform: uppercase; color: var(--grafite);
    flex: 0 0 auto;
  }
  /* la data di partenza e' l'informazione principale: sta su due righe,
     etichetta sopra e data sotto, non appaiata come le altre voci */
  .tabella-date td[data-etichetta="Partenza"] {
    display: block; border-bottom: 1px solid var(--foschia);
    padding-bottom: .45rem; margin-bottom: .35rem;
  }
  .tabella-date td[data-etichetta="Partenza"]::before { display: block; margin-bottom: .1rem; }
  .tabella-date td[data-etichetta="Partenza"] b { font-size: 1.1rem; }
  .tabella-date td[data-etichetta="Partenza"] .nota-partenza { text-align: left; }
  .tabella-date td.a-destra, .tabella-date th.a-destra { text-align: right; }
  /* nella scheda impilata una voce senza importo e' solo rumore */
  .tabella-date td.cella-vuota { display: none; }
  .tabella-date .nota-partenza { text-align: right; }
}

/* ============================================================== LASTRA ==== */
/* La fotografia a piena pagina aperta dalla gallery. */

body.con-lastra { overflow: hidden; }

.lastra-foto {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(12, 14, 24, .94);
  display: flex; align-items: center; justify-content: center;
  padding: clamp(1rem, 4vw, 3rem);
}
.lastra-foto[hidden] { display: none; }

.lastra-corpo {
  margin: 0; max-width: 100%; max-height: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .9rem;
}
.lastra-corpo img {
  max-width: 100%; max-height: calc(100dvh - 9rem);
  object-fit: contain; border-radius: var(--raggio-piccolo);
  animation: lastra-entra .25s ease;
}
@keyframes lastra-entra { from { opacity: 0; transform: scale(.98); } to { opacity: 1; transform: none; } }

.lastra-corpo figcaption {
  color: rgba(255,255,255,.8); text-align: center;
  font-family: var(--display); font-size: .78rem; letter-spacing: .06em;
  display: flex; gap: .75rem; align-items: baseline; justify-content: center; flex-wrap: wrap;
}
.lastra-conta { color: rgba(255,255,255,.5); font-variant-numeric: tabular-nums; }

.lastra-bottone {
  position: absolute; z-index: 2;
  background: rgba(255,255,255,.1); color: var(--bianco);
  border: 1px solid rgba(255,255,255,.25); border-radius: 999px;
  width: 3rem; height: 3rem; font-size: 1.5rem; line-height: 1;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: background .15s, border-color .15s;
}
.lastra-bottone:hover { background: rgba(255,255,255,.22); border-color: rgba(255,255,255,.5); }
.lastra-chiudi { top: 1rem; right: 1rem; font-size: 1.1rem; }
.lastra-prec { left: 1rem; top: 50%; transform: translateY(-50%); }
.lastra-succ { right: 1rem; top: 50%; transform: translateY(-50%); }
.lastra-foto--sola .lastra-prec, .lastra-foto--sola .lastra-succ { display: none; }

@media (max-width: 40rem) {
  .lastra-bottone { width: 2.5rem; height: 2.5rem; font-size: 1.25rem; }
  .lastra-prec { left: .4rem; }
  .lastra-succ { right: .4rem; }
  .lastra-corpo img { max-height: calc(100dvh - 8rem); }
}

/* la miniatura si annuncia cliccabile */
[data-galleria] a { cursor: zoom-in; }

/* ================================================== VIAGGI IN PARTENZA ==== */
/* Fascia di apertura della home: una riga per viaggio, foto a sinistra con
   ritaglio fisso (filtro riga_480) cosi' tutte le righe pesano uguale. */

.righe-viaggi { display: flex; flex-direction: column; gap: .7rem; }

.riga-viaggio {
  display: grid; gap: 0;
  background: var(--bianco); border: 1px solid var(--foschia); border-radius: var(--raggio-piccolo);
  transition: border-color .2s, box-shadow .2s;
}
/* al passaggio del mouse cambia solo il bordo: NIENTE OMBRA sulle righe di
   viaggio (scelta del committente, 04/09). L'ombra corta esiste solo sul
   telefono, dove non c'e' il mouse e serve a dire che la scheda si tocca. */
.riga-viaggio:hover { border-color: var(--indaco); }

.riga-viaggio__foto { position: relative; display: block; background: var(--indaco); overflow: hidden; }
.riga-viaggio__senza-foto {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  padding: 1rem; text-align: center; color: var(--bianco);
  font-family: var(--display); font-weight: 700; font-size: 1.15rem;
  letter-spacing: -.01em; line-height: 1.1;
}
.riga-viaggio__foto img { width: 100%; height: 100%; object-fit: cover; }
.riga-viaggio__foto .paese {
  position: absolute; left: 0; bottom: 0;
  background: var(--indaco); color: var(--bianco);
  font-family: var(--display); font-size: .66rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; padding: .3rem .6rem;
}

.riga-viaggio__corpo { padding: .85rem 1rem; min-width: 0; }
.riga-viaggio__corpo h3 { font-size: 1.15rem; margin-bottom: .25rem; }
.riga-viaggio__corpo h3 a { color: inherit; text-decoration: none; }
.riga-viaggio__corpo h3 a:hover { text-decoration: underline; }
.riga-viaggio__corpo .estratto {
  font-size: .88rem; color: var(--grafite); margin-bottom: .5rem;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.riga-viaggio__dati { display: flex; flex-wrap: wrap; gap: .3rem 1.5rem; margin: 0; }

.riga-viaggio__date {
  padding: .85rem 1rem; min-width: 0;
  background: var(--velo-indaco); border-left: 1px solid var(--velo-bordo);
  display: flex; flex-direction: column; gap: .4rem; align-items: flex-start;
}
.riga-viaggio__prima { margin: 0; display: flex; flex-direction: column; gap: .15rem; width: 100%; }
.riga-viaggio__prima b { font-family: var(--display); font-size: 1rem; letter-spacing: -.01em; }
.riga-viaggio__prima .rientro {
  font-family: var(--display); font-size: .72rem; letter-spacing: .06em;
  text-transform: uppercase; color: var(--grafite);
}
/* La pastiglia sta sulla riga della data, non su quella dell'etichetta: li'
   qualifica direttamente il giorno di partenza. Spinta a destra e piccola come
   quella del calendario, dice lo stato senza rubare la scena alla data. */
.riga-viaggio__quando {
  display: flex; align-items: center; flex-wrap: wrap; gap: .2rem .5rem;
  justify-content: space-between;
}
.riga-viaggio__quando .pastiglia {
  font-size: .56rem; letter-spacing: .08em; padding: .12rem .4rem;
}
.riga-viaggio__date .oltre { margin-top: auto; }
/* Il nastro dentro la riga e' un riepilogo, non il protagonista: blocchi piu'
   piccoli, cosi' la riga resta bassa e in una schermata ne stanno di piu'.
   Nella pagina del viaggio e nel calendario il nastro resta grande. */
.riga-viaggio__date .data-blocco { min-width: 2.7rem; padding: .2rem .35rem .25rem; }
.riga-viaggio__date .data-blocco .giorno { font-size: .95rem; }

@media (min-width: 56rem) {
  /* altezza uguale per tutte le righe: la foto riempie la colonna invece di
     lasciare un vuoto quando la colonna delle date e' piu' alta */
  .riga-viaggio { grid-template-columns: 12.5rem minmax(0, 1fr) 15rem; min-height: 10.5rem; }
  .riga-viaggio__foto { height: 100%; }
}
/* Le "altre date" sono un <details>: sul desktop e' sempre aperto e il suo
   riassunto non si vede (l'etichetta "Altre date" li' non serviva gia'
   prima); su mobile e' chiuso e il riassunto e' una riga con la freccina. */
.riga-viaggio__altre { width: 100%; }
.riga-viaggio__altre summary { list-style: none; }
.riga-viaggio__altre summary::-webkit-details-marker { display: none; }
.riga-viaggio__altre summary .conteggio {
  display: inline-block; min-width: 1.4em; padding: 0 .35em; margin-left: .3em;
  border-radius: 999px; background: var(--foschia); color: var(--notte);
  font-size: .62rem; text-align: center; letter-spacing: 0;
}
.riga-viaggio__date .oltre { margin-top: auto; }

@media (min-width: 56rem) {
  .riga-viaggio__altre summary { display: none; }
}
@media (max-width: 55.999rem) {
  /* impilato: foto sopra, dettagli sotto, niente scorrimento laterale.
     Le date NON sono un riquadro a parte: stanno nello stesso box bianco del
     viaggio, subito sotto durata e quota, in una riga sola. */
  .riga-viaggio__foto { aspect-ratio: 21 / 9; }
  .riga-viaggio__date {
    background: transparent; border: 0; padding: 0 1rem .8rem; gap: .35rem;
  }
  .riga-viaggio__corpo { padding-bottom: .5rem; }
  .riga-viaggio__prima { flex-direction: row; align-items: center; flex-wrap: wrap; gap: .25rem .6rem; }
  .riga-viaggio__prima .etichetta { flex: none; }
  .riga-viaggio__quando { flex: 1; justify-content: flex-start; gap: .5rem; }
  /* Da telefono il riquadro e' TUTTO un collegamento al viaggio (04/09): il
     titolo si allunga sull'intero riquadro, cosi' si tocca dove capita —
     foto compresa. Vanno via le due cose che lo dicevano a parole e lo
     facevano crescere: il link "Programma e prezzi" e le altre date (restano
     la prossima qui e il calendario completo nella scheda). Sul desktop non
     cambia niente. */
  .riga-viaggio {
    position: relative;
    /* Un'ombra CORTA (niente alone largo: quello fa baraccone). Sul telefono
       le schede sono la pagina e non c'e' il passaggio del mouse a dire che
       si toccano: l'ombra le stacca dal fondo e le fa leggere come oggetti.
       Sul desktop resta come prima, l'ombra solo al passaggio del mouse. */
    box-shadow: 0 6px 16px -10px rgba(23, 26, 43, .55);
  }
  /* al tocco la scheda si abbassa: e' l'unico ritorno che si puo' dare a un
     dito, visto che il passaggio del mouse non esiste */
  .riga-viaggio:has(a:active) {
    box-shadow: 0 2px 6px -5px rgba(23, 26, 43, .5);
    transform: translateY(1px);
  }
  .riga-viaggio__corpo h3 a::after { content: ""; position: absolute; inset: 0; }
  .riga-viaggio__altre,
  .riga-viaggio__date .oltre { display: none; }
}

/* ========================================== TESTATA SOVRAPPOSTA ALL'HERO === */
/* Ogni pagina si apre con un hero: la sua immagine parte dal bordo alto e la
   barra ci sta sopra, trasparente. Passato l'hero la barra si fissa e prende lo
   sfondo pieno.
   NB: nessun transform sul cappello — renderebbe relativo a lui il pannello
   off-canvas del menu, che deve restare fisso rispetto alla finestra. */

.cappello {
  position: absolute; top: 0; left: 0; right: 0; z-index: 100;
  transition: background-color .25s ease, box-shadow .25s ease;
}
.cappello .testata {
  background: transparent;
  border-bottom-color: transparent;
}
.cappello .testata { position: static; }

/* spazio riservato in cima all'hero, cosi' il contenuto non finisce sotto la
   barra: il valore lo misura il JS (senza, si usa una stima prudente) */
.hero-corpo { padding-top: calc(var(--altezza-cappello, 5rem) + 1.5rem); }

/* sopra le fotografie: testo chiaro e marchio nella sua versione bianca */
.cappello .voce { color: var(--bianco); }
.cappello .marchio img { filter: none; }
.cappello .marchio__sottotitolo { color: rgba(255,255,255,.88); text-shadow: 0 1px 3px rgba(23, 26, 43, .55); }
.cappello .voce:hover,
.cappello .voce[aria-expanded="true"] {
  color: var(--bianco); background: rgba(255,255,255,.16);
}
/* un filo di ombra sul testo: le testate chiare non devono mangiarsi le voci */
.cappello .voce { text-shadow: 0 1px 12px rgba(12,14,24,.55); }

/* stato fissato: identico alle altre pagine, con la sola barra di navigazione */
.cappello--fisso {
  position: fixed;
  /* niente transform: si centra con i margini automatici */
  left: 0; right: 0; width: min(100%, var(--max)); margin-inline: auto;
  background: var(--bianco);
  box-shadow: 0 1px 0 var(--foschia), 0 8px 24px -18px rgba(23,26,43,.5);
  /* si anima "top" e non "transform": un transform sul cappello renderebbe
     relativo a lui il pannello off-canvas, che deve restare fisso alla finestra */
  animation: cappello-entra .28s ease both;
}

@keyframes cappello-entra {
  from { top: calc(-1 * var(--altezza-cappello, 5rem)); opacity: 0; }
  to   { top: 0; opacity: 1; }
}
.cappello--fisso .testata { background: var(--bianco); }
.cappello--fisso .voce { color: var(--notte); text-shadow: none; }
.cappello--fisso .voce:hover,
.cappello--fisso .voce[aria-expanded="true"] { color: var(--indaco); background: var(--foschia-fine); }
.cappello--fisso .marchio img { filter: brightness(0); }
.cappello--fisso .marchio__sottotitolo { color: var(--grafite); text-shadow: none; }

/* la tendina resta leggibile in entrambi gli stati */
.cappello .megamenu { background: var(--bianco); }
.cappello .megamenu .area a { color: var(--notte); text-shadow: none; }

@media (max-width: 62rem) {
  /* nel pannello off-canvas si torna sempre a fondo chiaro e testo scuro */
  .cappello .menu { background: var(--bianco); }
  .cappello .menu .voce { color: var(--notte); text-shadow: none; }
  .cappello .menu .voce:hover { background: var(--foschia-fine); }
}

/* ============================================== ELENCO DI TUTTI I VIAGGI === */




/* ------------------------------- stato della partenza sul blocco data --- */
/* Il riempimento dice gia' molto, ma non basta a chi non conosce il codice:
   ogni data porta un segno colorato e, al passaggio o col fuoco, un fumetto
   che scrive lo stato per esteso. */

.data-blocco { position: relative; }

.segno-stato {
  position: absolute; top: -3px; right: -3px;
  width: .5rem; height: .5rem; border-radius: 50%;
  border: 1px solid var(--bianco); background: var(--grafite);
}
.data-blocco--prevista  .segno-stato { background: var(--indaco-vivo); }
/* sul blocco pieno color mare il pallino si vede solo se e' chiaro */
.data-blocco--confermata .segno-stato { background: var(--bianco); border-color: var(--mare); }

.data-blocco--completa  .segno-stato { background: var(--sole); }
.data-blocco--annullata .segno-stato { background: var(--rosso); }

.data-blocco--annullata { opacity: .5; }
.data-blocco--annullata .giorno { text-decoration: line-through; }

.fumetto {
  position: absolute; bottom: calc(100% + .45rem); left: 50%;
  transform: translateX(-50%) translateY(.2rem);
  z-index: 20; width: max-content; max-width: 12rem;
  background: var(--notte); color: var(--bianco);
  padding: .4rem .6rem; border-radius: var(--raggio-piccolo);
  font-family: var(--display); font-size: .7rem; letter-spacing: .04em;
  line-height: 1.3; text-align: center;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .15s ease, transform .15s ease, visibility 0s linear .15s;
}
.fumetto b { display: block; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.fumetto::after {
  content: ""; position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  border: .3rem solid transparent; border-top-color: var(--notte);
}
.data-blocco:hover .fumetto,
.data-blocco:focus-visible .fumetto {
  opacity: 1; visibility: visible; transform: translateX(-50%); transition-delay: 0s;
}

.oltre-doppio { display: inline-flex; flex-wrap: wrap; gap: .4rem 1.25rem; align-items: baseline; }
.coda-azioni { display: inline-flex; flex-wrap: wrap; gap: .5rem; }

/* --------------------------------- stato leggibile nel calendario partenze --- */

.riga-partenza { border-left: 3px solid var(--indaco-vivo); }
.riga-partenza--confermata { border-left-color: var(--mare); }
.riga-partenza--completa   { border-left-color: var(--sole); }
.riga-partenza--annullata  { border-left-color: var(--rosso); }

/* paese a sinistra, stato in alto a destra del box: resta nel flusso, quindi
   non puo' finire sopra al titolo */
.riga-partenza__occhiello {
  display: flex; align-items: center; flex-wrap: wrap; gap: .2rem .5rem;
}
/* la pastiglia piu' bassa possibile, e sempre a destra: e' un'informazione
   di contorno */
.riga-partenza .pastiglia {
  font-size: .56rem; letter-spacing: .08em; padding: 0 .4rem; line-height: 1.5;
  margin-top: 0; margin-left: auto;
}

/* la partenza completa o annullata non e' piu' un'occasione: si smorza */
.riga-partenza--annullata .titolo { color: var(--grafite); }
.riga-partenza--annullata .giorno { text-decoration: line-through; }

/* legenda del calendario: spiega gli stati a parole, una volta sola */
.legenda-stati {
  /* sta in fondo alla pagina delle partenze: e' una didascalia, si legge
     quando serve */
  display: grid; gap: .5rem 1.5rem; margin: 2.5rem 0 0;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  padding: 1rem 1.15rem; background: var(--bianco);
  border: 1px solid var(--foschia); border-radius: var(--raggio-piccolo);
}
.legenda-stati div { display: flex; align-items: baseline; gap: .5rem; }
.legenda-stati .pastiglia { flex: 0 0 auto; }
.legenda-stati p { margin: 0; font-size: .9rem; color: var(--grafite); }

/* ------------------------------- titoli dei testi che vengono dal legacy --- */
/* Nel programma di un viaggio e nelle schede del paese i sottotitoli — "1°
   giorno", "Clima", "Acquisti" — sono <h2> perche' cosi' li ha scritti il
   vecchio editor. Alla misura di un titolo di sezione, e con 1.8em di margine
   sopra, fra un giorno e l'altro si apriva una voragine di 68px. Dentro un
   pannello un titolo e' un sottotitolo: piccolo, e attaccato al suo testo. */
.pannello .prosa :is(h1, h2, h3, h4) {
  font-size: clamp(1.05rem, .95rem + .5vw, 1.3rem);
  line-height: 1.2;
  margin-top: 1.5rem;
  margin-bottom: .15rem;
}
.pannello .prosa :is(h1, h2, h3, h4):first-child { margin-top: 0; }
/* il titolo "Date di partenza" del pannello delle date resta un titolo vero */
.pannello > h2 { font-size: clamp(1.5rem, 1.1rem + 1.7vw, 2.35rem); margin-top: 0; }

/* ============================================== PAGINE INFORMATIVE ======== */

/* Il testo arriva dall'editor dell'admin (Trix): i blocchi sono <div> e i
   titoli <h1>. Qui si riportano alla gerarchia della pagina, dove l'h1 vero e'
   quello dell'hero. La misura di lettura resta quella del sito anche dentro la
   colonna: sono testi lunghi, non schede. */
.prosa--pagina { max-width: var(--misura); margin-inline: 0; }
.prosa--pagina > div { margin-bottom: 1em; }
.prosa--pagina > div:empty { display: none; }
.prosa--pagina h1 {
  font-size: clamp(1.4rem, 1.05rem + 1.4vw, 2rem); font-stretch: 108%;
  margin-top: 1.8em; margin-bottom: .5em;
}
.prosa--pagina h1:first-child { margin-top: 0; }
.prosa--pagina blockquote {
  margin: 1.25rem 0; padding-left: 1rem;
  border-left: 3px solid var(--sole); color: var(--grafite);
}

/* indice delle pagine nella colonna laterale */
.nav-info ul { list-style: none; margin: 0 0 1.1rem; padding: 0; }
.nav-info ul:last-child { margin-bottom: 0; }
.nav-info > .etichetta { margin-bottom: .4rem; }
.nav-info li + li { margin-top: .1rem; }
.nav-info a {
  display: block; text-decoration: none; font-size: .95rem;
  padding: .3rem .6rem; margin-left: -.6rem;
  border-left: 3px solid transparent; border-radius: 0 2px 2px 0;
}
.nav-info a:hover { background: var(--foschia-fine); }
.nav-info a[aria-current="page"] {
  border-left-color: var(--sole); background: var(--foschia-fine);
  color: var(--notte); font-weight: 600;
}

/* documento allegato (PDF) */
.allegato {
  margin-top: 2rem; max-width: var(--misura);
  padding: 1.25rem 1.4rem; border-radius: var(--raggio-piccolo);
  background: var(--bianco); border: 1px solid var(--foschia); border-left: 4px solid var(--sole);
}
.allegato__nome { font-family: var(--display); font-weight: 700; font-size: 1.15rem; margin: .35rem 0 .1rem; }
.allegato__dati { color: var(--grafite); font-size: .9rem; margin-bottom: 1rem; }
.allegato .bottone { margin-right: .5rem; margin-bottom: .5rem; }

/* lo staff: una riga per persona, fotografia a sinistra */
.staff-griglia { list-style: none; margin: 2.5rem 0 0; padding: 0; }
.persona {
  display: grid; gap: 1.25rem; align-items: start;
  padding-top: clamp(1.5rem, 1rem + 2vw, 2.5rem); margin-bottom: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  border-top: 1px solid var(--foschia);
}
@media (min-width: 40rem) { .persona { grid-template-columns: 12.5rem minmax(0, 1fr); gap: 1.75rem; } }
.persona__foto {
  aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--raggio-piccolo);
  background: var(--indaco); display: grid; place-items: center;
}
.persona__foto img { width: 100%; height: 100%; object-fit: cover; }
.persona__iniziali { color: var(--bianco); font-family: var(--display); font-weight: 700; font-size: 2rem; font-stretch: 112%; }
.persona__nome { font-size: clamp(1.25rem, 1.05rem + .8vw, 1.6rem); margin-bottom: .2rem; }
.persona .etichetta { margin-bottom: .7rem; }

/* tendina "Chi siamo": tre colonne strette, non la griglia a tutta larghezza
   delle destinazioni */
@media (min-width: 62.001rem) {
  .megamenu--pagine .aree { grid-template-columns: repeat(3, minmax(11.5rem, 15rem)); }
}

/* pie' di pagina: i link legali stanno sulla riga del copyright */
.piede-legali { display: inline-flex; flex-wrap: wrap; gap: .25rem 1.25rem; }
/* nel pannello mobile la prima intestazione della tendina toccava il bordo
   del bottone appena sopra */
@media (max-width: 62rem) {
  .megamenu--pagine { padding-top: .85rem; }
}

/* =========================================================================
   nuovo1 — lo stile del template Tourvex sopra il markup di sempre.
   Da qui in giu' ci sono solo ridefinizioni: sopra c'e' la copia integrale di
   site.css, cosi' nessun componente resta senza vestito. Le variabili di
   :root fanno gia' quasi tutto; qui si cambiano forme, caratteri e movimento.
   ========================================================================= */

/* ------------------------------------------------------- fondo e fasce --- */
/* Tourvex e' un sito a tutta pagina, senza il "foglio" su texture del sito
   storico: le fasce laterali si spengono in un grigio azzurro appena percepibile. */
body { background: #e9ecf3; }
.foglio { background: var(--bianco); }

/* ---------------------------------------------------------- tipografia --- */
/* Barlow non ha le larghezze variabili di Archivo: font-stretch non farebbe
   niente e va tolto per non lasciare regole che mentono. */
h1, h2, h3, h4, h5, .etichetta, .cifra {
  font-stretch: normal;
}
h1, h2, h3, h4, h5 {
  font-weight: 500;
  letter-spacing: -.02em;
  line-height: 1.05;
}
h1 { font-size: clamp(2.4rem, 1.5rem + 4vw, 4.4rem); }
h2 { font-size: clamp(1.75rem, 1.2rem + 2.2vw, 2.9rem); }
h3 { font-size: clamp(1.25rem, 1.05rem + .9vw, 1.7rem); }
h4 { font-size: 1.15rem; font-weight: 600; }

/* Barlow Semi Condensed e' piu' stretto del serif di prima: stessa quantita'
   di testo, ma serve un filo di corpo e l'interlinea larga del template. */
body {
  font-size: clamp(1.05rem, 1rem + .25vw, 1.16rem);
  line-height: 1.75;
}

/* ------------------------------------------- occhielli (section-subtitle) --- */
.etichetta {
  font-size: .84rem;
  font-weight: 500;
  letter-spacing: .18em;
  color: var(--sole);
}
.etichetta--chiara { color: rgba(255, 255, 255, .85); }
.etichetta--indaco { color: var(--indaco); }

/* ------------------------------------------------------------ bottoni --- */
/* Pillola e freccia che avanza. Il "testo che rotola" del template si scrive
   lettera per lettera nel markup: su un bottone lungo fa piu' rumore che
   effetto, e il markup non si tocca. */
.bottone {
  border-radius: 999px;
  border-width: 1px;
  padding: .8rem 1.6rem;
  font-weight: 500;
  font-size: .95rem;
  letter-spacing: .1em;
  background: var(--notte);
  border-color: var(--notte);
  transition: background .3s ease, border-color .3s ease, color .3s ease, transform .3s ease;
}
.bottone::after {
  content: "→";
  font-size: 1.05em;
  line-height: 1;
  transition: transform .3s ease;
}
.bottone:hover { background: var(--sole); border-color: var(--sole); color: var(--bianco); }
.bottone:hover::after { transform: translateX(.25rem); }
.bottone:active { transform: translateY(1px); }
.bottone--sole { background: var(--sole); border-color: var(--sole); color: var(--bianco); }
.bottone--sole:hover { background: var(--notte); border-color: var(--notte); color: var(--bianco); }
.bottone--fantasma { background: transparent; color: var(--notte); border-color: var(--foschia); }
.bottone--fantasma:hover { background: var(--notte); border-color: var(--notte); color: var(--bianco); }
.bottone--chiaro { border-color: rgba(255, 255, 255, .55); }
.bottone--chiaro:hover { background: var(--bianco); border-color: var(--bianco); color: var(--notte); }
.bottone--piccolo { padding: .5rem 1.1rem; font-size: .85rem; }

/* Il collegamento "Vai al contenuto" (si vede solo a chi naviga da tastiera):
   sul turchese il testo blu notte dava 2.7:1. Si inverte. */
.salta-al-contenuto { background: var(--notte); color: var(--bianco); }

/* ------------------------------------------------- link e cose cliccabili --- */
/* Nel template i collegamenti sono turchesi come il marchio: un link e' una
   azione. Il blu resta allo stato "prevista" delle partenze, cosi' i due non
   si confondono. */
a { color: var(--sole); }
a:hover { color: var(--sole-caldo); }
.sezione--notte a { color: #9fd7e6; }


/* campi e tendine: bordo tenue, angolo tondo piccolo, fuoco turchese */
.campo input, .campo textarea, .filtri select, .filtri input, .calcolatore select {
  border-radius: var(--raggio-piccolo);
  padding: .6rem .8rem;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.campo input:focus, .campo textarea:focus,
.filtri select:focus, .filtri input:focus, .calcolatore select:focus {
  border-color: var(--sole);
  box-shadow: 0 0 0 3px rgba(23, 112, 138, .14);
  outline: none;
}
.filtri { border-radius: var(--raggio); box-shadow: var(--ombra); }

/* -------------------------------------------------------- fasce e aria --- */
/* Il template respira molto: 120px sopra e sotto ogni fascia sul desktop. */
.sezione { padding-block: clamp(2.75rem, 1.5rem + 4.5vw, 5.5rem); }
.sezione--fitta { padding-block: clamp(1.9rem, 1rem + 2.6vw, 3.25rem); }
.sezione--foschia { background: var(--foschia-fine); }

/* --------------------------------------------------------- testata ------ */
.cappello--fisso {
  background: rgba(255, 255, 255, .96);
  backdrop-filter: blur(10px);
  box-shadow: var(--ombra);
  border-bottom: 0;
}
.voce, .menu > li > a {
  font-family: var(--display);
  font-weight: 500;
  font-size: 1rem;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.megamenu { border-radius: var(--raggio); box-shadow: var(--ombra); border-color: var(--foschia); }
/* La barretta che segna la pagina in cui si e' (un'ombra interna in basso)
   segue l'angolo del riquadro: con qualunque raggio le estremita' si
   arricciano e sembra una parentesi. Qui l'angolo resta vivo. */
.voce { border-radius: 0; }

/* ------------------------------------------------------------- hero ----- */
.hero h1 { letter-spacing: -.03em; }
/* L'occhiello dell'hero sta sopra una fotografia scura: il turchese cupo che
   si usa sul bianco li' non si legge (2.7:1 misurati). Sopra la foto va la
   versione chiara della stessa tinta. */
.hero .etichetta { color: #8ed8e9; }
.hero .etichetta--chiara { color: rgba(255, 255, 255, .85); }
/* la fotografia respira piano dentro la sua cornice: e' la parallasse del
   template, fatta con una sola regola e senza librerie */
.hero-lastra figure img { animation: nuovo1-respiro 18s ease-in-out infinite alternate; }
@keyframes nuovo1-respiro {
  from { transform: scale(1); }
  to   { transform: scale(1.07); }
}

/* ---- hero della home: la giostra dei viaggi ----
   Quello che il contratto (3.5) chiedeva al posto della dissolvenza: la
   fotografia entra di lato (dal verso in cui si e' andati) con un leggero
   zoom e poi continua ad avanzare piano; il testo compare dal basso, una riga
   dopo l'altra. Niente librerie: sono transizioni sugli attributi che mette
   site.js. */
.hero--viaggi .hero-lastra figure {
  opacity: 0; transform: translateX(7%) scale(1.06);
  transition: opacity 1.1s ease, transform 1.1s cubic-bezier(.2, .7, .2, 1);
}
.hero--viaggi[data-verso="indietro"] .hero-lastra figure { transform: translateX(-7%) scale(1.06); }
.hero--viaggi .hero-lastra figure[data-attiva="1"] { opacity: 1; transform: none; }
.hero--viaggi .hero-lastra figure img { animation: none; }
.hero--viaggi .hero-lastra figure[data-attiva="1"] img { animation: nuovo1-avanzata 10s ease-out forwards; }
@keyframes nuovo1-avanzata {
  from { transform: scale(1.02); }
  to   { transform: scale(1.12); }
}
.hero--viaggi .hero-diapositiva > * {
  opacity: 0; transform: translateY(1.4rem);
  /* in uscita le righe spariscono ALL'ISTANTE (nessuna transizione, dal
     05/09: da telefono il committente vedeva il testo vecchio sparire solo
     in parte e il nuovo arrivargli sopra); quelle nuove arrivano da mezzo
     secondo in poi, stesso ritardo con cui site.css mostra la diapositiva. */
  transition: none;
}
.hero--viaggi .hero-diapositiva[data-attiva="1"] > * { transition: opacity .7s ease, transform .7s cubic-bezier(.2, .7, .2, 1); }
.hero--viaggi .hero-diapositiva[data-attiva="1"] > * { opacity: 1; transform: none; }
.hero--viaggi .hero-diapositiva[data-attiva="1"] > :nth-child(1) { transition-delay: .5s; }
.hero--viaggi .hero-diapositiva[data-attiva="1"] > :nth-child(2) { transition-delay: .65s; }
.hero--viaggi .hero-diapositiva[data-attiva="1"] > :nth-child(3) { transition-delay: .8s; }
.hero--viaggi .hero-diapositiva[data-attiva="1"] > :nth-child(4) { transition-delay: .95s; }
.hero--viaggi .hero-diapositiva[data-attiva="1"] > :nth-child(5) { transition-delay: 1.1s; }
.hero-titolo { letter-spacing: -.03em; font-weight: 600; }
.hero-titolo a:hover { color: #8ed8e9; }
.hero-punti button i::after { background: var(--sole-vivo); }

/* --------------------------------------- schede, foto, sollevamento ----- */
/* L'impronta del template: raggio ampio, ombra bassissima, la foto che si
   ingrandisce dentro una cornice che resta ferma. */
.provino,
.riga-viaggio__foto,
.scheda-paese,
.scheda-dati,
.riquadro,
.invito-pagina,
.fascia-sintesi,
.calcolatore,
.legenda-stati,
.notizia,
.gallery-griglia a,
.gallery-mini a,
.persona__foto,
.persona__iniziali,
.allegato {
  border-radius: var(--raggio);
}
.provino,
.riga-viaggio__foto,
.gallery-griglia a,
.gallery-mini a,
.notizia--elenco .provino {
  overflow: hidden;
}
.provino img,
.riga-viaggio__foto img,
.gallery-griglia img,
.notizia img {
  transition: transform .6s ease;
}
.riga-viaggio:hover .riga-viaggio__foto img,
.notizia:hover img,
.gallery-griglia a:hover img,
.scheda-paese:hover .provino img {
  transform: scale(1.06);
}
.notizia, .scheda-paese {
  transition: transform .4s ease, box-shadow .4s ease;
}
.notizia:hover, .scheda-paese:hover {
  transform: translateY(-6px);
  box-shadow: var(--ombra-su);
}
/* La riga del viaggio col mouse sopra NON si muove e non fa ombra (scelta del
   committente, 04/09): restano il bordo indaco e lo zoom lento della foto.
   Un elenco lungo in cui ogni riga sobbalza al passaggio e' inquieto da
   leggere; notizie e schede paese, che sono tessere staccate, si alzano
   ancora. */

/* La riga del viaggio e le sue due colonne laterali devono avere lo stesso
   angolo, altrimenti negli spigoli resta una fetta di bianco. Niente
   overflow:hidden sulla riga: taglierebbe i fumetti che escono dai blocchi
   data del nastro. */
.riga-viaggio { border-radius: var(--raggio); }
.riga-viaggio__foto { border-radius: var(--raggio) 0 0 var(--raggio); }
.riga-viaggio__date { border-radius: 0 var(--raggio) var(--raggio) 0; }
.riga-partenza__foto { border-radius: var(--raggio-piccolo); }
@media (max-width: 55.999rem) {
  .riga-viaggio__foto { border-radius: var(--raggio) var(--raggio) 0 0; }
  /* su mobile le date stanno nel box bianco del viaggio: nessun fondo proprio */
  .riga-viaggio__date { border-radius: 0; background: transparent; }
}

/* ------------------------------------------------- stati della partenza --- */
/* Regola che nessun tema puo' violare: quattro stati, quattro famiglie di
   colore, dal freddo al caldo, nessun grigio. Qui "completa" prende l'oro del
   template, perche' il turchese e' passato a fare il marchio. */
.pastiglia {
  font-family: var(--display);
  font-weight: 600;
  font-size: .78rem;
  letter-spacing: .12em;
  padding: .2rem .7rem;
}
.pastiglia--prevista   { background: rgba(51, 85, 164, .13);  color: #2a4a94; }
.pastiglia--confermata { background: rgba(31, 122, 92, .15);  color: #175f47; }
.pastiglia--completa   { background: rgba(228, 168, 83, .30); color: #7a5310; }
.pastiglia--annullata  { background: rgba(179, 55, 44, .13);  color: #932c22; }
.sezione--notte .pastiglia--prevista   { background: rgba(107, 141, 224, .28); color: #c6d4f5; }
.sezione--notte .pastiglia--confermata { background: rgba(52, 168, 128, .28);  color: #a5e6cd; }
.sezione--notte .pastiglia--completa   { background: rgba(228, 168, 83, .28);  color: #f4d3a0; }
.sezione--notte .pastiglia--annullata  { background: rgba(199, 92, 79, .30);   color: #f2b6ae; }

.legenda-nastro i.completa { background: var(--oro); border-color: var(--oro); }
.data-blocco--completa .segno-stato { background: var(--oro); }
.riga-partenza--completa { border-left-color: var(--oro); }

/* le due viste della scheda viaggio: quella aperta prende l'accento del tema */
.scelta-vista { box-shadow: var(--ombra); }
.scelta-vista .vista[aria-current="true"] { background: var(--sole); }

/* ------------------------------------------------- linguette e tabelle --- */
.linguetta {
  font-family: var(--display);
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  font-size: .95rem;
}
.tabella-date th {
  font-family: var(--display);
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
}

/* ------------------------------------------------------- calcolatore ---- */
.calcolatore {
  background: var(--bianco);
  box-shadow: var(--ombra);
  border-color: var(--foschia);
}
.totale-calcolo { font-family: var(--display); }

/* ------------------------------------------------------------ piede ----- */
.piede-sito { margin-top: 0; }
.piede-sito h3 { font-stretch: normal; letter-spacing: .18em; }
.piede-sito a:hover { color: var(--sole); }

/* --------------------------------------------- comparsa allo scorrimento --- */
/* L'attributo lo mette tema.js: senza JS nessun blocco lo ha, quindi si vede
   tutto lo stesso. Il template usa WOW e animate.css (e quindi jQuery): qui
   bastano una classe e una transizione. */
[data-comparsa] {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .8s cubic-bezier(.16, 1, .3, 1), transform .8s cubic-bezier(.16, 1, .3, 1);
}
[data-comparsa].in-vista {
  opacity: 1;
  transform: none;
}

/* ------------------------------------------------------ meno movimento --- */
/* Chi ha chiesto meno animazioni al sistema non ne vede nessuna: vale anche
   per il respiro dell'hero e per lo scorrimento morbido (che tema.js non
   accende affatto in questo caso). */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  [data-comparsa] { opacity: 1 !important; transform: none !important; }
  .hero-lastra figure img { animation: none !important; }
  .hero--viaggi .hero-lastra figure,
  .hero--viaggi .hero-diapositiva > * { transition: none !important; transform: none !important; }
}