/* =========================================================================
   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;

  /* Barlow non ha le larghezze variabili di Archivo: font-stretch non farebbe
     niente e va spento per non lasciare regole che mentono. */
  --stretch-titolo:      normal;
  --stretch-sottotitolo: normal;
  --stretch-etichetta:   normal;

  /* i quattro stati (site.css spiega i tre valori): "completa" prende l'oro
     del template, perche' il turchese e' passato a fare il marchio;
     "confermata" eredita --mare e non si riscrive */
  /* ...ma va SCRITTO: questo blocco sostituisce per intero il :root dello
     standard, e senza queste tre righe --stato-confermata non esisteva nel
     tema (trovato il 15/09: pastiglia, blocco data e bordo della scheda
     confermata restavano senza colore). */
  --stato-confermata:       var(--mare);
  --stato-confermata-velo:  var(--mare-velo);
  --stato-confermata-testo: var(--mare-scuro);
  --stato-prevista-velo:   rgba(51, 85, 164, .13);
  --stato-prevista-testo:  #2a4a94;
  --stato-completa:        var(--oro);
  --stato-completa-velo:   rgba(228, 168, 83, .30);
  --stato-completa-testo:  #7a5310;
  --stato-annullata-velo:  rgba(179, 55, 44, .13);
  --stato-annullata-testo: #932c22;

  --ombra-filtri:  var(--ombra);
  --link-su-scuro: #cdd6ef;

  /* 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; }

/* Niente scroll-behavior: smooth. Toglieva la presa sulle ancore (il salto
   lento anziche' immediato) e il committente lo voleva via. NB: non c'entra
   con lo scorrimento a dito, che lo governa il browser e non passa di qui. */
html { -webkit-text-size-adjust: 100%; 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: var(--stretch-titolo); }
h2 { font-size: clamp(1.5rem, 1.1rem + 1.7vw, 2.35rem); font-stretch: var(--stretch-sottotitolo); }
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: var(--stretch-etichetta);
  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 color-mix(in srgb, var(--notte) 35%, transparent);
}

.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--foschia { background: var(--foschia-fine); }

/* 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;
}
.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--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); }
/* Nell'hero della home i due bottoni stanno sopra la foto: il "sole" si fa
   molto trasparente (30%) e prende lo stesso bordo bianco del "chiaro", cosi'
   i due sembrano una coppia. :where() tiene la specificita' bassa: il :hover
   normale del bottone continua a vincere. */
:where(.hero--viaggi .azioni) .bottone--sole { background: color-mix(in srgb, var(--sole) 30%, transparent); border-color: rgba(255,255,255,.6); }
.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 {
  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 {
  /* solo l'altezza: la larghezza la da' il rapporto del file (295x86), mai
     fissarle tutte e due o il logo si schiaccia. E align-self: .marchio e' un
     flex in colonna, e senza questa riga l'immagine si allargava fino al
     sottotitolo (piu' lungo del logo): 38px di altezza per 196 di larghezza,
     il logo stirato del 50% (misurato il 15/09, c'era anche col logo vecchio) */
  /* 58px dal 15/09 (era 38, poi 44), su richiesta: largo 199px, quanto il
     sottotitolo che sta sotto. Sul desktop la testata resta alta uguale (la
     decide il menu, 88px); sul telefono cresce fino a quella misura. */
  height: 58px; width: auto; max-width: none; align-self: flex-start;
  /* il file e' inchiostro nero su trasparente (dal 15/09): sul fondo chiaro va
     bene cosi' */
}
/* 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-radius: var(--raggio);
  border-top: 1px solid var(--foschia);
  border-bottom: 3px solid var(--indaco);
  box-shadow: var(--ombra-su);
  padding-block: 2rem;
}
.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: var(--stretch-etichetta); 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; }
}

/* Il velo sta sotto il cappello (z-index 100) e quindi sotto il pannello del
   menu: altrimenti coprirebbe il menu aperto e i tocchi finirebbero su di lui. */
.velo { position: fixed; inset: 0; background: color-mix(in srgb, var(--notte) 50%, transparent); z-index: 95; border: 0; }

/* ================================================================= 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, color-mix(in srgb, var(--notte) 55%, transparent) 0%, color-mix(in srgb, var(--notte) 20%, transparent) 35%, color-mix(in srgb, var(--notte) 82%, transparent) 100%),
    linear-gradient(90deg, color-mix(in srgb, var(--notte) 55%, transparent) 0%, color-mix(in srgb, var(--notte) 0%, transparent) 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; }
/* occhiello cliccabile (pagina paese -> area): stesso colore, sottolineato al passaggio */
.hero .occhiello a { color: inherit; text-decoration: none; }
.hero .occhiello a:hover { color: inherit; text-decoration: underline; text-underline-offset: .22em; }
.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 della home: i viaggi --- */
/* Le diapositive sono viaggi (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); }
.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). */
.hero-diapositiva {
  grid-area: 1 / 1; min-width: 0; opacity: 0; visibility: hidden;
  transition: opacity .25s ease, visibility 0s .25s;
}
.hero-diapositiva[data-attiva="1"] { opacity: 1; visibility: visible; transition: opacity .7s ease .3s, visibility 0s .3s; }
.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: var(--stretch-titolo);
  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; }

/* I comandi sono 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. */
/* Il dito: la pagina scorre in verticale, ma il gesto orizzontale sull'hero
   serve a cambiare diapositiva. Senza questo il browser se lo prende per
   scorrere e annulla il pointer, e la giostra non rispondeva al dito. */
.hero[data-giostra] { touch-action: pan-y; }

.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; }
  /* le barrette non devono finire sopra i bottoni: sul telefono l'hero si
     lascia un po' piu' di respiro sotto */
  .hero--viaggi .hero-corpo { padding-bottom: clamp(4.5rem, 3rem + 8vw, 6rem); }
}

/* 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 dello stato */
.data-blocco--confermata { background: var(--stato-confermata); border-color: var(--stato-confermata); 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(--stato-confermata); border-color: var(--stato-confermata); }
.legenda-nastro i.completa { background: var(--stato-completa); border-color: var(--stato-completa); }

/* ============================================================== 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); 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, color-mix(in srgb, var(--notte) 0%, transparent) 35%, color-mix(in srgb, var(--notte) 85%, transparent) 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; border-radius: var(--raggio); }
.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: var(--stato-prevista-velo); color: var(--stato-prevista-testo); }
/* Eccezione (15/09, richiesta del committente): "Confermata" deve saltare
   all'occhio, quindi tinta piena, testo bianco e la spunta davanti. E' l'unica
   notizia che il cliente cerca in un elenco di date. Bianco su --mare: 5.9:1. */
.pastiglia.pastiglia--confermata { background: var(--stato-confermata); color: var(--bianco); font-weight: 700; }
.pastiglia--confermata::before { content: "\2713"; font-size: 1.1em; line-height: 1; }
.pastiglia--completa   { background: var(--stato-completa-velo); color: var(--stato-completa-testo); }
.pastiglia--annullata  { background: var(--stato-annullata-velo); color: var(--stato-annullata-testo); }
/* su fondo scuro il velo tenue diventa illeggibile: serve piu' tinta e un
   testo chiaro */
.hero .pastiglia--prevista, .spalla .pastiglia--prevista { background: rgba(120, 145, 210, .26); color: #c3cdec; }
/* la confermata resta piena anche sul fondo scuro, con un filo chiaro che la
   stacca dal box */
.hero .pastiglia--confermata, .spalla .pastiglia--confermata { background: var(--stato-confermata); color: var(--bianco); box-shadow: 0 0 0 1px rgba(168, 219, 229, .75); }
.hero .pastiglia--completa, .spalla .pastiglia--completa { background: rgba(228, 145, 79, .26); color: #f0c396; }
.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: var(--stretch-etichetta); 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; max-width: none; margin-bottom: .45rem; filter: brightness(0) invert(1); opacity: .9; }
/* sede e dati legali (partial _sede e _dati_legali): <address> non in corsivo */
.sede { font-style: normal; margin: 0 0 .5rem; }
.sede-recapiti { margin: 0; }
.dati-legali { list-style: none; margin: 0; padding: 0; font-size: .9rem; }
.dati-legali li + li { margin-top: .2rem; }
.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);
}

.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);
  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 — date, viaggi,
   news, quello di sempre — 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; }

@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; }
  /* dal 15/09 la newsletter apre la spalla e le date le stanno sotto */
  .impaginato-home > .spalla--newsletter { grid-column: 2; grid-row: 1; }
  .spalla--date   { grid-column: 2; grid-row: 2 / 4; align-self: start; }
  /* 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).
   Dal 15/09 le news in home sono nascoste e "Le prossime date" ha preso i
   loro colori (l'indaco spento qui sotto); la regola delle news resta per
   quando si riaccendono. 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,
.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: var(--link-su-scuro); }

/* --- 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; border-radius: var(--raggio); }
.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: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); }

.fascia-sintesi { background: var(--bianco); border-bottom: 1px solid var(--foschia); border-radius: var(--raggio); }
.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);
  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 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); 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, color-mix(in srgb, var(--notte) 0%, transparent), color-mix(in srgb, var(--notte) 85%, transparent));
  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); }

/* ======================================================== 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);
  box-shadow: var(--ombra-filtri);
  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, .filtri .scelta-mesi > summary {
  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; }

/* --- il riquadro Mesi del calendario (15/09) ---
   Sembra una tendina (summary con la freccina), si apre in un pannello con i
   mesi divisi per anno e il numero di partenze, e si applica col bottone. */
.riga-filtro .etichetta-filtro {
  font-family: var(--display); font-size: .68rem; font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: var(--grafite);
}
.riga-filtro--mesi { position: relative; }
.scelta-mesi > summary {
  list-style: none; cursor: pointer; position: relative; display: block; min-width: 12rem;
  /* bordo, carattere e spaziatura sono quelli delle tendine (la regola
     .filtri select qui sopra e la stessa nel tema): cosi' il riquadro e' alto
     come loro; l'interlinea e' quella della tendina (21px su 16) */
  line-height: 1.3125; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.filtri .riga-filtro--mesi .scelta-mesi > summary { padding-right: 2rem; }
.scelta-mesi > summary::-webkit-details-marker { display: none; }
.scelta-mesi > summary::after {
  content: ""; position: absolute; right: .75rem; top: 50%; width: .42rem; height: .42rem;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: translateY(-70%) rotate(45deg);
}
.scelta-mesi[open] > summary { border-color: var(--indaco); }
.scelta-mesi__pannello {
  position: absolute; z-index: 30; top: calc(100% + .35rem); left: 0;
  width: max-content; min-width: 100%; max-width: min(92vw, 34rem);
  background: var(--bianco); border: 1px solid var(--foschia); border-radius: var(--raggio);
  box-shadow: 0 18px 40px -18px color-mix(in srgb, var(--notte) 45%, transparent);
  padding: .85rem 1rem;
}
.scelta-mesi__anno + .scelta-mesi__anno { margin-top: .75rem; padding-top: .75rem; border-top: 1px solid var(--foschia); }
.scelta-mesi__titolo-anno { margin: 0 0 .4rem; font-family: var(--display); font-weight: 700; letter-spacing: .06em; }
.scelta-mesi__mesi { display: grid; grid-template-columns: repeat(3, minmax(8.5rem, 1fr)); gap: .1rem 1rem; }
.riga-filtro .scelta-mesi__mese {
  display: flex; align-items: center; gap: .45rem; padding: .22rem 0; cursor: pointer;
  font-family: var(--testo); font-size: .95rem; font-weight: 400; letter-spacing: 0;
  text-transform: capitalize; color: var(--notte);
}
.scelta-mesi__mese input { width: 1rem; height: 1rem; margin: 0; accent-color: var(--indaco); }
.scelta-mesi__mese .quante { margin-left: auto; font-size: .78rem; color: var(--grafite); }
.scelta-mesi__azioni { margin: .8rem 0 0; display: flex; justify-content: flex-end; }
.scelta-mesi__azioni .bottone { margin-right: 0; }

/* --- 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: si spengono anche l'ombra e l'angolo
       che un tema puo' dare al riquadro (--ombra-filtri, --raggio) — 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,
  .filtri[data-filtri-vivi] .scelta-mesi > summary { width: 100%; padding: .45rem .5rem; font-size: .95rem; }
  .filtri[data-filtri-vivi] .riga-filtro .bottone { margin-right: 0; }
}

/* il riquadro Mesi da telefono: riga intera, pannello largo quanto il modulo,
   e i mesi restano leggibili (la regola sopra nasconde le label dei filtri) */
@media (max-width: 46rem) {
  .filtri[data-filtri-vivi] .etichetta-filtro {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
  }
  .filtri[data-filtri-vivi] .riga-filtro--mesi { flex: 1 1 100%; }
  .filtri[data-filtri-vivi] .scelta-mesi__mese {
    position: static; width: auto; height: auto; margin: 0; overflow: visible; clip: auto; white-space: normal;
  }
  .scelta-mesi > summary { min-width: 0; }
  .filtri[data-filtri-vivi] .riga-filtro--mesi .scelta-mesi > summary { padding-right: 2rem; }
  .scelta-mesi__pannello { right: 0; width: auto; max-width: none; }
  .scelta-mesi__mesi { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.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; }
/* il box newsletter della home (partial _newsletter): modulo stretto, bottone a tutta larghezza */
.newsletter .campo { margin-bottom: .7rem; }
.newsletter p { margin: 0; }
.newsletter .bottone { width: 100%; justify-content: center; }

.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); }


/* =============================================== 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 il
   cappello fisso. 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-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);
  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;
}
/* dal 15/09 i dati della riga sono una .sintesi compatta (Durata, Area, Paese, Quota) */
.riga-viaggio__dati { display: flex; flex-wrap: wrap; gap: .45rem 1.5rem; margin: 0; }
.sintesi--riga dd { font-size: .95rem; }
/* sopra il link esteso del titolo (::after su tutta la riga, mobile) */
.riga-viaggio__dati a { position: relative; z-index: 1; }

.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" (il nastro dopo la prima) si vedono solo sul desktop:
   su mobile la riga mostra la prima data e basta (vedi sotto). */
.riga-viaggio__altre { width: 100%; }
@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 color-mix(in srgb, var(--notte) 55%, transparent);
  }
  /* 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 color-mix(in srgb, var(--notte) 50%, transparent);
    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;
}

/* 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: brightness(0) invert(1); }
.cappello .marchio__sottotitolo { color: rgba(255,255,255,.88); text-shadow: 0 1px 3px color-mix(in srgb, var(--notte) 55%, transparent); }
.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 color-mix(in srgb, var(--notte) 50%, transparent);
}
/* L'entrata sta su una classe SUA e non su "--fisso": il JS toglie e rimette
   la classe di stato per misurare l'altezza, e con l'animazione li' sopra la
   testata ripartiva dall'alto ogni volta (sul telefono a ogni ritiro della
   barra degli indirizzi). Si anima "top" e non "transform": un transform sul
   cappello renderebbe relativo a lui il pannello off-canvas del menu, che
   deve restare fisso alla finestra. */
.cappello--entra { 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: none; }
.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); }
}

/* ------------------------------- 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(--stato-prevista); }
/* sul blocco pieno color mare il pallino si vede solo se e' chiaro */
.data-blocco--confermata .segno-stato { background: var(--bianco); border-color: var(--stato-confermata); }

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

.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;
}

.coda-azioni { display: inline-flex; flex-wrap: wrap; gap: .5rem; }

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

.riga-partenza { border-left: 3px solid var(--stato-prevista); }
.riga-partenza--confermata { border-left-color: var(--stato-confermata); }
.riga-partenza--completa   { border-left-color: var(--stato-completa); }
.riga-partenza--annullata  { border-left-color: var(--stato-annullata); }

/* 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); }

/* 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);
}
.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: var(--stretch-sottotitolo);
  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);
  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);
  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: var(--stretch-titolo); border-radius: var(--raggio); }
.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 --- */
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); }
/* Hero della home: i due bottoni sulla foto tengono il loro colore ma sono
   quasi tutti vetro (sole 30%, notte 15%: terza passata, il committente li
   voleva ancora piu' leggeri), e il "sole" ha lo stesso bordo bianco del
   "chiaro". Specificita' bassa: l':hover sopra vince. */
:where(.hero--viaggi .azioni) .bottone--sole { background: color-mix(in srgb, var(--sole) 30%, transparent); border-color: rgba(255, 255, 255, .55); }
:where(.hero--viaggi .azioni) .bottone--chiaro { background: color-mix(in srgb, var(--notte) 15%, transparent); }
.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); }


/* campi e tendine: bordo tenue, angolo tondo piccolo, fuoco turchese */
.campo input, .campo textarea, .filtri select, .filtri input, .calcolatore select, .filtri .scelta-mesi > summary {
  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, .filtri .scelta-mesi > summary:focus-visible {
  border-color: var(--sole);
  box-shadow: 0 0 0 3px rgba(23, 112, 138, .14);
  outline: none;
}

/* -------------------------------------------------------- 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--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;
}
/* Sotto i 62rem il menu e' un pannello off-canvas "position: fixed" dentro
   il cappello: un backdrop-filter sull'antenato lo rende il riferimento del
   pannello, che dopo lo scorrimento restava alto quanto la barra (90px) e si
   vedeva solo un pezzo. Su mobile quindi niente sfocatura: il fondo al 96%
   e' gia' quasi pieno e non si nota. */
@media (max-width: 62rem) {
  .cappello--fisso { backdrop-filter: none; }
}
.voce, .menu > li > a {
  font-family: var(--display);
  font-weight: 500;
  font-size: 1rem;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.megamenu { 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 .occhiello { color: #8ed8e9; }
/* 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 ----
   La fotografia si dissolve nella successiva e intanto continua ad avanzare
   piano; il testo compare dal basso, una riga dopo l'altra. Niente librerie:
   sono transizioni sugli attributi che mette site.js.
   06/09: tolta l'entrata di lato (translateX 7% dal verso in cui si andava)
   che il committente non voleva piu'. Resta il solo assestamento di scala,
   percio' "data-verso" non lo legge piu' nessuno: site.js continua a
   scriverlo, e se un domani si rivuole l'entrata laterale basta rimettere qui
   la riga che lo usava. */
.hero--viaggi .hero-lastra figure {
  opacity: 0; transform: scale(1.06);
  transition: opacity 1.1s ease, transform 1.1s cubic-bezier(.2, .7, .2, 1);
}
.hero--viaggi .hero-lastra figure[data-attiva="1"] { opacity: 1; transform: none; }
/* Il punto d'arrivo dell'avanzata sta in una variabile perche' serve in due
   posti: la fine dell'animazione e la posa di chi non e' in scena. Quando i
   due valori divergevano, la fotografia che esce tornava di scatto a scala 1
   mentre era ancora visibile nella dissolvenza: si vedeva un rimpicciolimento
   secco appena prima del cambio. Tenendoli uguali l'uscita resta ferma dov'e'
   arrivata. Chi entra parte da 1.02, ma in quell'istante e' ancora
   trasparente, quindi lo stacco non si vede. */
.hero--viaggi { --avanzata-fine: 1.12; }
.hero--viaggi .hero-lastra figure img {
  animation: none; transform: scale(var(--avanzata-fine));
}
.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(var(--avanzata-fine)); }
}
.hero--viaggi .hero-diapositiva > * {
  opacity: 0; transform: translateY(1.4rem);
  /* in uscita le righe spariscono subito: quelle nuove arrivano dopo .2s e
     non devono trovarci ancora le vecchie sotto */
  transition: opacity .2s ease, transform .2s ease;
}
.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: .2s; }
.hero--viaggi .hero-diapositiva[data-attiva="1"] > :nth-child(2) { transition-delay: .35s; }
.hero--viaggi .hero-diapositiva[data-attiva="1"] > :nth-child(3) { transition-delay: .5s; }
.hero--viaggi .hero-diapositiva[data-attiva="1"] > :nth-child(4) { transition-delay: .65s; }
.hero--viaggi .hero-diapositiva[data-attiva="1"] > :nth-child(5) { transition-delay: .8s; }
.hero-titolo { letter-spacing: -.03em; font-weight: 600; }
.hero-titolo a:hover { color: #8ed8e9; }
/* 08/09: i titoli delle testate non sono bianco pieno ma velati, cosi' la
   fotografia che sta dietro traspare appena dalle lettere e il titolo si posa
   sull'immagine invece di stargli sopra. Vale per la giostra della home
   (.hero-titolo) e per gli hero interni (.hero h1).
   E' un velo di colore, NON una fusione (mix-blend-mode). La fusione e' stata
   provata l'08/09 su richiesta del committente, che voleva un effetto piu'
   marcato, e si puo' fare: basta togliere lo z-index a .hero-corpo (che con
   quello e' un contesto d'impilamento e tiene fuori la lastra della
   fotografia) e mettere isolation: isolate su .hero. Ma a video il committente
   l'ha scartata: con soft-light il titolo delle testate interne spariva su due
   fotografie su tre (quelle di mezza tinta), con difference reggeva sempre ma
   cambiava tinta alle lettere. Il racconto e le misure stanno in
   docs/PROGETTO.md, sezione FATTO dell'08/09: non e' una strada da riaprire.
   Il valore e' il piu' basso che regge il contrasto sopra la sfumatura scura
   di .hero-lastra::after: piu' giu' di cosi', sulle foto chiare non si legge.
   Il passaggio del mouse resta pieno (.hero-titolo a:hover, qui sopra). */
.hero h1,
.hero-titolo a { color: rgba(255, 255, 255, .82); }
.hero-punti button i::after { background: var(--sole-vivo); }

/* --------------------------------------- schede, foto, sollevamento ----- */
/* L'impronta del template: raggio ampio (--raggio, in root.css: site.css lo
   mette gia' su foto, riquadri e righe), ombra bassissima, la foto che si
   ingrandisce dentro una cornice che resta ferma. */
.provino img,
.riga-viaggio__foto img,
.notizia img {
  transition: transform .6s ease;
}
.riga-viaggio:hover .riga-viaggio__foto img,
.notizia:hover img,
.provino:hover 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__foto { border-radius: var(--raggio) 0 0 var(--raggio); }
.riga-viaggio__date { border-radius: 0 var(--raggio) var(--raggio) 0; }
@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; }
}

/* ------------------------------------------------- stati della partenza --- */
/* Regola che nessun tema puo' violare: quattro stati, quattro famiglie di
   colore, dal freddo al caldo, nessun grigio. I colori stanno in root.css
   (--stato-*); qui solo il carattere della pastiglia. */
.pastiglia {
  font-family: var(--display);
  font-weight: 600;
  font-size: .78rem;
  letter-spacing: .12em;
  padding: .2rem .7rem;
}

/* 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 { 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 --- */
/* Le durate di animazioni e transizioni le azzera gia' site.css, per ogni
   tema. Qui resta solo da far vedere subito i blocchi che aspettano la
   comparsa allo scorrimento (tema.js in questo caso non la accende). */
@media (prefers-reduced-motion: reduce) {
  [data-comparsa] { opacity: 1 !important; transform: none !important; }
}