/* ═══════════════════════════════════════════════════════════════════════
   yurieale.it — veste del sito pubblico.

   I due riferimenti scelti da Yuri hanno un carattere in comune, Playfair
   Display sui titoli: e' quello a fare da filo fra le due anime del sito.
   Il diario resta editoriale e quasi monocromatico, i viaggi accendono
   l'arancione dove c'e' qualcosa da prenotare. Stesso sito, due ritmi.
   ═══════════════════════════════════════════════════════════════════════ */

:root {
    /* Il verde c'e' per una cosa sola: la partenza confermata. */
    --confermato: #2e7d4f;

    --titoli: "Playfair Display", Georgia, "Times New Roman", serif;
    --testo: Lato, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

    --inchiostro: #3a3a3a;
    --inchiostro-tenue: #767676;
    --carta: #f5f5f5;
    --carta-alta: #ffffff;
    --filo: #e3e3e3;

    /* L'accento non e' decorazione: segna solo cio' che si puo' prenotare. */
    --accento: #fb5607;
    --accento-scuro: #d84800;

    --respiro: clamp(2.5rem, 6vw, 5rem);
}

body {
    font-family: var(--testo);
    color: var(--inchiostro);
    background: var(--carta);
    font-size: 17px;
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, .titolo {
    font-family: var(--titoli);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.01em;
}

a { color: inherit; text-decoration: none; }
a:hover { color: var(--accento-scuro); }

img { max-width: 100%; height: auto; }

/* ── Testata ───────────────────────────────────────────────────────── */
.testata {
    background: var(--carta);
    border-bottom: 1px solid var(--filo);
    padding: 18px 0;
    position: sticky;
    top: 0;
    z-index: 30;
}

.marchio {
    font-family: var(--titoli);
    font-size: 26px;
    font-weight: 700;
    letter-spacing: -0.02em;
}
.marchio .e { font-style: italic; font-weight: 400; color: var(--inchiostro-tenue); }

.navigazione a {
    font-size: 14px;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--inchiostro-tenue);
    padding: 6px 0;
    border-bottom: 2px solid transparent;
}
.navigazione a:hover, .navigazione a.attivo {
    color: var(--inchiostro);
    border-bottom-color: var(--accento);
}

.cambia-lingua {
    font-size: 12px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--inchiostro-tenue);
    border: 1px solid var(--filo);
    border-radius: 2px;
    padding: 3px 9px;
}
.cambia-lingua:hover { border-color: var(--inchiostro-tenue); color: var(--inchiostro); }

/* ── Testata sopra l'apertura ──────────────────────────────────────────
   Solo dove c'e' il carosello. Diventa assoluta e trasparente, cosi'
   l'immagine parte dal bordo alto dello schermo; scorrendo se ne va
   insieme all'apertura, come nel modello di riferimento.

   ⚠️ La sfumatura non e' un vezzo: sopra una foto chiara i link bianchi
   sparirebbero, e non si puo' sapere in anticipo com'e' la foto.       */
.testata-sopra .testata {
    position: absolute;
    top: 0; left: 0; right: 0;
    background: linear-gradient(to bottom, rgba(0,0,0,.38), rgba(0,0,0,0));
    border-bottom: 0;
    z-index: 30;
}
.testata-sopra .testata .marchio,
.testata-sopra .testata .navigazione a { color: #fff; }
.testata-sopra .testata .marchio .e { color: rgba(255,255,255,.72); }
.testata-sopra .testata .navigazione a { color: rgba(255,255,255,.86); }
.testata-sopra .testata .navigazione a:hover,
.testata-sopra .testata .navigazione a.attivo { color: #fff; }
.testata-sopra .testata .cambia-lingua {
    border-color: rgba(255,255,255,.5);
    color: rgba(255,255,255,.86);
}
.testata-sopra .testata .cambia-lingua:hover { border-color: #fff; color: #fff; }

/* ── Apertura ──────────────────────────────────────────────────────── */
.apertura {
    padding: var(--respiro) 0;
    text-align: center;
}
.apertura h1 {
    font-size: clamp(2.6rem, 7vw, 4.7rem);
    margin-bottom: .4em;
}
.apertura .occhiello {
    font-size: 13px;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--inchiostro-tenue);
    margin-bottom: 1.4em;
}
.apertura p.guida {
    max-width: 620px;
    margin: 0 auto;
    color: var(--inchiostro-tenue);
    font-size: 1.05rem;
}

/* ── Carosello dell'apertura ───────────────────────────────────────── */
/* A tutta pagina, come nel modello dell'agenzia: l'immagine riempie lo
   schermo e la testata ci galleggia sopra (vedi .testata-sopra).       */
.carosello {
    position: relative;
    height: 100vh;
    /* ⚠️ svh, non vh, dove c'e': su telefono la barra dell'indirizzo del
       browser entra nel conto di vh, e l'apertura risulta piu' alta
       dello schermo con l'ultima riga tagliata.                        */
    height: 100svh;
    min-height: 460px;
    overflow: hidden;
    background: #2a2a2a;
    margin-bottom: var(--respiro);
}

/* Il testo non deve finire sotto la testata che ci galleggia sopra. */
.testata-sopra .lastra { padding-top: 70px; }

.carosello .lastre { position: absolute; inset: 0; }

.lastra {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    /* Le slide sono impilate: tutte presenti, una sola visibile. Cosi'
       la transizione e' una dissolvenza e non un salto.               */
    opacity: 0;
    visibility: hidden;
    transition: opacity .9s ease, visibility .9s;
}
.lastra.viva { opacity: 1; visibility: visible; }

.lastra .sfondo {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
}

/* Il velo non e' decorazione: senza, il testo bianco su una foto chiara
   diventa illeggibile, e non si puo' sapere in anticipo com'e' la foto. */
.lastra .velo {
    position: absolute; inset: 0;
    background: linear-gradient(to bottom, rgba(0,0,0,.15), rgba(0,0,0,.55));
}

.lastra .testo { position: relative; color: #fff; text-align: center; }

/* La slide di sola immagine (29/09/2026): niente velo, niente scritte.
   Resta solo una sfumatura in alto, perche' sopra il carosello la testata
   del sito e' trasparente, e su una foto chiara il menu bianco sparirebbe.
   Se la slide porta da qualche parte, il link copre tutta la foto; frecce e
   pallini stanno sopra (sono fuori dalle lastre). */
.lastra.solo-immagine::before {
    content: "";
    position: absolute; left: 0; right: 0; top: 0;
    height: 140px;
    background: linear-gradient(to bottom, rgba(0,0,0,.4), rgba(0,0,0,0));
    pointer-events: none;
}
.lastra .tutta-la-foto { position: absolute; inset: 0; }

/* ── Dove sta il blocco di testo ───────────────────────────────────────
   Ogni slide lo decide da se': con un soggetto al centro della foto, il
   testo centrato ci finisce sopra. Fuori dal centro il blocco si stringe
   a meta' larghezza, altrimenti allinearlo non si vedrebbe.            */
/* ⚠️ Non si sposta il CONTENITORE: .testo e' un .container di Bootstrap,
   che ha gia' "margin: auto" su tutti e due i lati — impostarne uno solo
   lascia il blocco esattamente al centro, e sembra che la scelta non
   faccia niente. Si allineano invece i FIGLI dentro al contenitore, che
   cosi' conserva anche i suoi margini laterali.                        */
.lastra.verso-sinistra .testo { text-align: left; }
.lastra.verso-destra   .testo { text-align: right; }

.lastra.verso-sinistra .testo > *,
.lastra.verso-destra   .testo > * { max-width: 640px; }

.lastra.verso-sinistra .testo > * { margin-left: 0; margin-right: auto; }
.lastra.verso-destra   .testo > * { margin-right: 0; margin-left: auto; }

/* Il velo segue il testo: scurisce il lato dove si legge, e lascia
   respirare la foto dall'altro. Al centro resta uniforme.              */
.lastra.verso-sinistra .velo {
    background: linear-gradient(to right, rgba(0,0,0,.62), rgba(0,0,0,.15));
}
.lastra.verso-destra .velo {
    background: linear-gradient(to left, rgba(0,0,0,.62), rgba(0,0,0,.15));
}

/* Su telefono la larghezza non basta per stare di lato: tutto centrato. */
@media (max-width: 767px) {
    .lastra.verso-sinistra .testo,
    .lastra.verso-destra .testo { text-align: center; }
    .lastra.verso-sinistra .testo > *,
    .lastra.verso-destra .testo > * { max-width: none; margin-left: auto; margin-right: auto; }
    .lastra.verso-sinistra .velo,
    .lastra.verso-destra .velo {
        background: linear-gradient(to bottom, rgba(0,0,0,.15), rgba(0,0,0,.55));
    }
}
.lastra .occhiello {
    font-size: 13px; letter-spacing: .22em; text-transform: uppercase;
    color: rgba(255,255,255,.85); margin-bottom: 1.1em;
}
.lastra h1 {
    font-size: clamp(2.2rem, 6vw, 4.2rem);
    color: #fff;
    margin-bottom: .35em;
    text-shadow: 0 2px 24px rgba(0,0,0,.35);
}
.lastra .guida {
    max-width: 640px; margin: 0 auto;
    color: rgba(255,255,255,.92); font-size: 1.08rem;
}
.lastra .bottone { margin-top: 26px; }

.carosello .freccia {
    position: absolute; top: 50%; transform: translateY(-50%);
    width: 46px; height: 46px;
    border: 0; border-radius: 50%;
    background: rgba(0,0,0,.3); color: #fff;
    font-size: 28px; line-height: 1;
    cursor: pointer; z-index: 3;
    transition: background .2s;
}
.carosello .freccia:hover { background: var(--accento); }
.carosello .freccia.indietro { left: 18px; }
.carosello .freccia.avanti { right: 18px; }

.carosello .pallini {
    position: absolute; bottom: 22px; left: 0; right: 0;
    display: flex; justify-content: center; gap: 9px; z-index: 3;
}
.carosello .pallini button {
    width: 9px; height: 9px; padding: 0;
    border: 0; border-radius: 50%;
    background: rgba(255,255,255,.45);
    cursor: pointer; transition: background .2s, width .2s;
}
.carosello .pallini button.viva { background: var(--accento); width: 26px; border-radius: 5px; }

@media (max-width: 767px) {
    /* A tutta pagina anche qui: e' il punto dell'apertura. L'altezza la
       da' .carosello (100svh), quindi qui non si tocca — c'era una
       regola che la riportava a 62vh e vinceva sulla schermata piena. */
    .carosello .freccia { display: none; }   /* sul telefono si scorre col dito */
}

/* Chi ha chiesto di non animare non si vede la dissolvenza. */
@media (prefers-reduced-motion: reduce) {
    .lastra { transition: none; }
}

/* ── Titoli di sezione ─────────────────────────────────────────────── */
.titolo-sezione {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 20px;
    border-top: 1px solid var(--filo);
    padding-top: 20px;
    margin-bottom: 34px;
}
.titolo-sezione h2 { font-size: clamp(1.6rem, 3vw, 2.1rem); margin: 0; }
.titolo-sezione .oltre {
    font-size: 13px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--inchiostro-tenue);
    white-space: nowrap;
}
.titolo-sezione .oltre:hover { color: var(--accento-scuro); }

/* ── «Chi siamo» in home ───────────────────────────────────────────────
   Foto e testo affiancati da tablet in su, uno sopra l'altro da telefono.
   Il filo in alto e' quello dei titoli di sezione: la home resta una
   sequenza di sezioni uguali, non un volantino. */
.chi-siamo {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
    align-items: center;
    border-top: 1px solid var(--filo);
    padding-top: 28px;
}
@media (min-width: 768px) {
    .chi-siamo { grid-template-columns: 5fr 7fr; gap: 40px; }
}
.chi-siamo .foto {
    width: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    border-radius: 6px;
}
.chi-siamo h2 { font-size: clamp(1.6rem, 3vw, 2.1rem); margin: 0 0 .5em; }
.chi-siamo p { margin-bottom: 1em; }
.chi-siamo .oltre {
    font-size: 13px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--inchiostro-tenue);
}
.chi-siamo .oltre:hover { color: var(--accento-scuro); }

/* La foto in apertura della pagina «Chi siamo». */
.corpo img.foto-chi-siamo,
.corpo img.copertina-pagina { width: 100%; border-radius: 6px; margin: 0 auto 2.2em; }

/* ── Scheda di un racconto ─────────────────────────────────────────── */
.racconto { display: block; margin-bottom: 44px; }
.racconto .figura {
    display: block;
    aspect-ratio: 3 / 2;
    overflow: hidden;
    background: #e9e9e9;
    margin-bottom: 16px;
}
.racconto .figura img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform .6s ease;
}
.racconto:hover .figura img { transform: scale(1.04); }
.racconto .sopratitolo {
    font-size: 11.5px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--inchiostro-tenue);
    margin-bottom: 8px;
}
.racconto h3 { font-size: 1.45rem; margin-bottom: .35em; }
.racconto:hover h3 { color: var(--accento-scuro); }
.racconto p { color: var(--inchiostro-tenue); font-size: .96rem; margin: 0; }

.senza-foto {
    display: flex; align-items: center; justify-content: center;
    width: 100%; height: 100%;
    color: #c4c4c4;
    font-family: var(--titoli); font-size: 2rem; font-style: italic;
}

/* ── Viaggi: qui entra l'arancione ─────────────────────────────────── */
.viaggio { background: var(--carta-alta); height: 100%; display: flex; flex-direction: column; }
.viaggio .figura { aspect-ratio: 4 / 3; overflow: hidden; background: #e9e9e9; position: relative; }
.viaggio .figura img { width: 100%; height: 100%; object-fit: cover; }
.viaggio .dentro { padding: 20px 22px 24px; flex: 1; display: flex; flex-direction: column; }
.viaggio .meta {
    font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase;
    color: var(--accento); margin-bottom: 9px;
}
.viaggio h3 { font-size: 1.3rem; margin-bottom: .4em; }
.viaggio p { color: var(--inchiostro-tenue); font-size: .93rem; flex: 1; }
.viaggio .prezzo {
    font-family: var(--titoli); font-size: 1.35rem;
    margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--filo);
}
.viaggio .prezzo small {
    font-family: var(--testo); font-size: 11.5px;
    letter-spacing: .12em; text-transform: uppercase;
    color: var(--inchiostro-tenue); display: block;
}

/* ── Il bollino sulla foto: lo stato della prossima partenza ───────── */
/* Sta SULLA foto e non sotto, accanto alla data: e' la prima cosa che
   l'occhio prende di una scheda, ed e' l'informazione che decide se
   vale la pena aprirla.
   ⚠️ Fondo pieno, mai trasparente: sopra una foto qualsiasi un bollino
   velato si legge su un cielo e sparisce su una spiaggia bianca.
   ⚠️ «Confermata» e' l'unico in colore pieno: e' la notizia buona che
   fa decidere, e se lo fossero tutti non si distinguerebbe piu' nessuno. */
.bollini {
    position: absolute; top: 14px; left: 14px; right: 14px;
    display: flex; flex-wrap: wrap; gap: 6px; align-items: flex-start;
    pointer-events: none;
}
.bollino {
    font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
    line-height: 1; padding: 7px 10px; border-radius: 2px;
    background: var(--carta-alta); color: var(--inchiostro);
    box-shadow: 0 1px 3px rgba(0, 0, 0, .18);
}
.bollino.confermata {
    background: var(--confermato); color: #fff;
    font-size: 12px; padding: 8px 12px;
}
/* La spunta e' decorazione: il testo dice gia' «confermata». La seconda
   riga la toglie ai lettori di schermo; chi non la capisce tiene la prima. */
.bollino.confermata::before { content: "\2713\00a0\00a0"; content: "\2713\00a0\00a0" / ""; }
.bollino.caldo     { color: var(--accento-scuro); }
.bollino.pieno     { background: var(--inchiostro); color: #fff; }
.bollino.annullata { color: var(--inchiostro-tenue); text-decoration: line-through; }
.bollino.posti     { font-weight: 400; color: var(--accento-scuro); }

.bottone {
    display: inline-block;
    background: var(--accento);
    color: #fff !important;
    padding: 13px 30px;
    font-size: 13px; letter-spacing: .14em; text-transform: uppercase;
    border-radius: 2px;
}
.bottone:hover { background: var(--accento-scuro); color: #fff !important; }

/* ── Pagina del racconto ───────────────────────────────────────────── */
.racconto-testata { text-align: center; padding: var(--respiro) 0 34px; }
.racconto-testata h1 { font-size: clamp(2.1rem, 5.2vw, 3.5rem); margin-bottom: .45em; }
.racconto-testata .firma {
    font-size: 12px; letter-spacing: .16em; text-transform: uppercase;
    color: var(--inchiostro-tenue);
}
.racconto-testata .sommario {
    max-width: 660px; margin: 22px auto 0;
    font-size: 1.12rem; color: var(--inchiostro-tenue); font-style: italic;
}

.copertina-piena { margin-bottom: var(--respiro); background: #e9e9e9; }
.copertina-piena img { width: 100%; max-height: 74vh; object-fit: cover; display: block; }

/* Il corpo del racconto e' stretto di proposito: si legge meglio.
   Le immagini invece possono sfondare oltre la colonna del testo.      */
.corpo { max-width: 720px; margin: 0 auto; font-size: 1.09rem; }
.corpo p { margin-bottom: 1.5em; }
.corpo h2 { font-size: 1.9rem; margin: 1.8em 0 .6em; }
.corpo h3 { font-size: 1.45rem; margin: 1.6em 0 .5em; }
.corpo a { color: var(--accento-scuro); border-bottom: 1px solid rgba(251,86,7,.35); }
.corpo img { display: block; margin: 2.2em auto; }
.corpo blockquote {
    border-left: 3px solid var(--accento);
    padding-left: 22px; margin: 2em 0;
    font-family: var(--titoli); font-size: 1.28rem; font-style: italic;
}
.corpo iframe { max-width: 100%; }

/* Il testo arriva dal vecchio sito e porta tabelle e larghezze fisse:
   senza questo, su telefono la pagina scorre di lato.

   ⚠️ L'!important non e' pigrizia. Alcune tabelle travasate portano uno
   stile IN LINEA con "overflow: hidden", messo a suo tempo per arrotondare
   gli angoli: vince sul foglio di stile, e su un telefono taglia via la
   parte destra della tabella senza modo di raggiungerla — 433px di
   contenuto dentro 271px visibili. Qui serve avere l'ultima parola.     */
.corpo table {
    max-width: 100%;
    display: block;
    overflow-x: auto !important;
}

/* ── Pagina del viaggio ────────────────────────────────────────────── */
.partenze { max-width: 860px; margin: 0 auto var(--respiro); }

.riga-partenza {
    display: flex; flex-wrap: wrap; align-items: center; gap: 16px;
    background: var(--carta-alta);
    border: 1px solid var(--filo);
    border-left: 3px solid var(--accento);
    padding: 18px 22px;
    margin-bottom: 12px;
}
.riga-partenza .quando { flex: 1 1 220px; }
.riga-partenza .quando b { display: block; font-size: 1.08rem; }
.riga-partenza .quando span { font-size: .85rem; color: var(--inchiostro-tenue); }
.riga-partenza .segnali { display: flex; flex-wrap: wrap; gap: 7px; }
.riga-partenza .quanto { text-align: right; margin-left: auto; }
.riga-partenza .quanto b { font-family: var(--titoli); font-size: 1.35rem; display: block; }
.riga-partenza .quanto span { font-size: .78rem; color: var(--inchiostro-tenue); }

/* Nella riga della partenza i bollini sono gli STESSI delle schede
   dell'elenco (colori, parole, regola). Cambia solo l'appoggio: qui
   stanno sul bianco e non su una foto, quindi niente ombra, e quelli
   chiari prendono un filo per non sparire nella pagina. */
.segnali .bollino { box-shadow: none; }
.segnali .bollino.aperta,
.segnali .bollino.caldo,
.segnali .bollino.annullata,
.segnali .bollino.posti { border: 1px solid var(--filo); }
.segnali .bollino.caldo { border-color: var(--accento-scuro); }


.itinerario { max-width: 860px; margin: var(--respiro) auto; }

/* ── I giorni: fisarmonica nativa ──────────────────────────────────────
   Ogni giorno e' un <details>. Chiusi si legge l'itinerario a colpo
   d'occhio — numero e titolo, uno sotto l'altro — e si apre quello che
   interessa. Niente JavaScript: lo fa il browser.                      */

.giorno { border-top: 1px solid var(--filo); }

/* ⚠️ Il triangolino di sistema va tolto in DUE modi: list-style per i
   browser moderni e ::-webkit-details-marker per i Safari piu' vecchi.
   Togliendone uno solo, su un browser resta li' accanto al nostro. */
.giorno > summary {
    list-style: none;
    cursor: pointer;
    display: grid;
    grid-template-columns: 92px 1fr 24px;
    gap: 24px;
    align-items: center;
    padding: 20px 0;
    transition: background .15s;
}
.giorno > summary::-webkit-details-marker { display: none; }

/* Il fuoco da tastiera si deve vedere: questa riga e' un comando. */
.giorno > summary:focus-visible {
    outline: 2px solid var(--inchiostro);
    outline-offset: 2px;
}
.giorno > summary:hover .titolo-giorno { color: #000; }

.giorno .numero { text-align: center; }
.giorno .numero .etichetta {
    display: block; font-size: 10.5px; letter-spacing: .16em;
    text-transform: uppercase; color: var(--inchiostro-tenue);
}
.giorno .numero .cifra {
    font-family: var(--titoli); font-size: 2.1rem; line-height: 1.1;
}

.giorno .titolo-giorno {
    font-family: var(--titoli);
    font-size: 1.25rem;
    line-height: 1.35;
    transition: color .15s;
}
.giorno .titolo-giorno .senza-titolo {
    font-family: var(--testo);
    font-size: .95rem;
    color: var(--inchiostro-tenue);
}

/* La freccia disegnata col bordo: un carattere tipografico cambierebbe
   forma da un sistema all'altro, e qui i caratteri sono ospitati in casa. */
.giorno .freccia,
.piega .freccia {
    width: 9px; height: 9px;
    border-right: 2px solid var(--inchiostro-tenue);
    border-bottom: 2px solid var(--inchiostro-tenue);
    transform: rotate(-45deg);
    transform-origin: center;
    transition: transform .2s ease;
    justify-self: end;
    margin-top: -4px;
}
.giorno[open] .freccia,
.piega[open] .freccia { transform: rotate(45deg); margin-top: 2px; }

/* ⚠️ La terza colonna e' "auto", non 200px: coi giorni senza foto una
   colonna fissa restava vuota e strozzava il testo a 520px invece di
   lasciargli tutta la riga. La larghezza la decide la foto, se c'e'.  */
.giorno .dentro {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 24px;
    align-items: start;
    padding: 0 0 26px 116px;   /* 92 della colonna numero + i 24 del gap */
}
.giorno .foto-giorno { width: 200px; }
.giorno .foto-giorno img { width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.giorno .racconto-giorno p { margin-bottom: .9em; }
.giorno .racconto-giorno > *:last-child { margin-bottom: 0; }

/* Una comparsa appena accennata. ⚠️ Nessun fill-mode: se l'animazione
   non parte il contenuto si vede lo stesso al suo posto — e' l'errore
   che avevo gia' fatto sulla pagina di manutenzione. */
@media (prefers-reduced-motion: no-preference) {
    .giorno[open] .dentro,
    .piega[open] .dentro { animation: giorno-entra .22s ease; }
    @keyframes giorno-entra {
        from { opacity: 0; transform: translateY(-4px); }
    }
}

@media print {
    .giorno > summary,
    .piega > summary { cursor: auto; }
    .giorno .freccia,
    .piega .freccia { display: none; }
}

/* Stampando, le pieghe chiuse le apre site/js/stampa.js (e poi le
   richiude): dal CSS non si poteva, un <details> chiuso nasconde il
   contenuto su uno slot interno del browser che un display non scavalca. */

.pratiche h2 { font-size: 1.5rem; margin-top: 1.8em; }

/* ── Le altre pieghe: documenti, salute, da sapere, piano voli ────────
   Stesso comportamento dei giorni (freccia, fuoco, comparsa, stampa),
   ma senza la colonna del numero: il titolo prende tutta la riga.     */
.piega { border-top: 1px solid var(--filo); }
.pratiche .piega:last-child { border-bottom: 1px solid var(--filo); }

/* ⚠️ Anche qui il triangolino di sistema va tolto in DUE modi. */
.piega > summary {
    list-style: none;
    cursor: pointer;
    display: grid;
    grid-template-columns: 1fr 24px;
    gap: 24px;
    align-items: center;
    padding: 18px 0;
}
.piega > summary::-webkit-details-marker { display: none; }
.piega > summary:focus-visible { outline: 2px solid var(--inchiostro); outline-offset: 2px; }

.piega .titolo-piega {
    font-family: var(--titoli);
    font-size: 1.4rem;
    line-height: 1.3;
    transition: color .15s;
}
.piega > summary:hover .titolo-piega { color: #000; }
.piega .dentro { padding: 0 0 24px; }
.piega .dentro > *:last-child { margin-bottom: 0; }

/* Con piu' partenze, ogni piano voli porta sopra le sue date. */
.piega .data-voli {
    font-size: 11.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
    color: var(--accento-scuro); margin: 0 0 .4em;
}
.piega .voli + .data-voli { margin-top: 1.4em; }

/* ── Richiesta d'iscrizione ────────────────────────────────────────── */
/* Il modulo e' l'unico posto del sito dove si scrive: qui la carta e'
   bianca e il bordo arancione, come le righe delle partenze, perche' e'
   la stessa cosa vista dall'altra parte.                              */
.richiesta {
    max-width: 860px;
    margin: var(--respiro) auto 0;
    scroll-margin-top: 90px;      /* la testata fissa non copre il titolo */
}

.richiesta .guida-modulo {
    color: var(--inchiostro-tenue);
    margin-bottom: 26px;
}

.modulo {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px 22px;
    background: var(--carta-alta);
    border: 1px solid var(--filo);
    border-top: 3px solid var(--accento);
    padding: 28px 30px 30px;
}
.modulo .campo-largo { grid-column: 1 / -1; }

.modulo label {
    display: block;
    font-size: 12px; letter-spacing: .1em; text-transform: uppercase;
    color: var(--inchiostro-tenue);
    margin-bottom: 6px;
}

.modulo input[type=text],
.modulo input[type=email],
.modulo input[type=tel],
.modulo input[type=number],
.modulo select,
.modulo textarea {
    width: 100%;
    font-family: var(--testo);
    font-size: 1rem;
    color: var(--inchiostro);
    background: var(--carta);
    border: 1px solid var(--filo);
    border-radius: 0;
    padding: 10px 12px;
}
.modulo textarea { resize: vertical; line-height: 1.6; }

.modulo input:focus, .modulo select:focus, .modulo textarea:focus {
    outline: 0;
    border-color: var(--accento);
    background: var(--carta-alta);
}

/* Il campo sbagliato si vede da solo, senza dover rileggere l'elenco. */
.modulo .sbagliato input,
.modulo .sbagliato select,
.modulo .sbagliato textarea { border-color: var(--accento); background: #fff6f2; }
.modulo .sbagliato > label { color: var(--accento-scuro); }

/* ⚠⚠️ NON chiamarla «consenso»: .consenso e' il BANNER dei cookie (piu' sotto),
   fisso in fondo allo schermo e spostato fuori vista. Con quel nome la
   casella della privacy finiva agganciata al fondo della finestra,
   invisibile, e il modulo rispondeva «casella non spuntata» a chi non
   poteva nemmeno vederla (trovato il 27/09/2026). */
.modulo .casella-privacy label {
    display: flex; align-items: flex-start; gap: 10px;
    text-transform: none; letter-spacing: 0; font-size: .93rem;
    color: var(--inchiostro); margin: 0;
}
.modulo .casella-privacy input { margin-top: 4px; flex: 0 0 auto; }
.modulo .casella-privacy.sbagliato label { color: var(--accento-scuro); }

.modulo .azioni-modulo {
    display: flex; flex-wrap: wrap; align-items: center; gap: 16px;
    border-top: 1px solid var(--filo);
    padding-top: 20px;
}
.modulo .azioni-modulo .nota {
    font-size: .84rem; color: var(--inchiostro-tenue); flex: 1 1 260px;
}

/* ⚠️ Fuori dallo schermo, non display:none: i robot piu' accorti
   saltano i campi nascosti, e l'esca non prenderebbe piu' niente.
   Con tabindex="-1" e aria-hidden la tastiera e i lettori la ignorano. */
.esca {
    position: absolute;
    left: -9999px;
    width: 1px; height: 1px; overflow: hidden;
}

.avviso-errori {
    background: #fff6f2;
    border-left: 3px solid var(--accento);
    padding: 14px 18px;
    margin-bottom: 22px;
    font-size: .94rem;
}
.avviso-errori ul { margin: 6px 0 0; padding-left: 20px; }

.grazie {
    background: var(--carta-alta);
    border: 1px solid var(--filo);
    border-top: 3px solid var(--accento);
    padding: 34px 30px;
    text-align: center;
}
.grazie h2 { font-size: 1.7rem; margin-bottom: .4em; }
.grazie p { color: var(--inchiostro-tenue); margin: 0; }

.bottone.piccolo {
    padding: 8px 18px;
    font-size: 11px;
}

@media (max-width: 767px) {
    /* Sul telefono la colonna del numero si stringe e la foto va sotto,
       a tutta larghezza. Il rientro del contenuto si riduce di conseguenza:
       con 116px di rientro su uno schermo da 375 il testo restava in un
       corridoio. */
    .giorno > summary { grid-template-columns: 54px 1fr 18px; gap: 14px; }
    /* ⚠️ Sul telefono NIENTE rientro, anche se allineare il testo sotto
       il titolo sarebbe più ordinato: il rientro costava 68px su 375, e
       il racconto restava in una colonna da ~40 caratteri per riga. Su
       uno schermo stretto la leggibilità viene prima della simmetria. */
    .giorno .dentro { grid-template-columns: 1fr; padding-left: 0; }
    .giorno .foto-giorno { width: 100%; }
    .giorno .numero .cifra { font-size: 1.6rem; }
    .riga-partenza .quanto { text-align: left; margin-left: 0; }
    .riga-partenza .bottone.piccolo { width: 100%; text-align: center; }

    .modulo { grid-template-columns: 1fr; padding: 22px 20px 24px; }
}

/* ── Chiusura ──────────────────────────────────────────────────────── */
.chiusura {
    border-top: 1px solid var(--filo);
    margin-top: var(--respiro);
    padding: 40px 0;
    color: var(--inchiostro-tenue);
    font-size: .88rem;
}

.vuoto {
    text-align: center;
    padding: 70px 0;
    color: var(--inchiostro-tenue);
    font-family: var(--titoli);
    font-style: italic;
    font-size: 1.3rem;
}

/* ── Paginazione ───────────────────────────────────────────────────── */
.pagine {
    display: flex; align-items: center; justify-content: center; gap: 22px;
    border-top: 1px solid var(--filo);
    padding-top: 30px; margin-top: 20px;
    font-size: 13px; letter-spacing: .1em; text-transform: uppercase;
    color: var(--inchiostro-tenue);
}
.pagine a:hover { color: var(--accento-scuro); }
.pagine .spenta { opacity: .32; pointer-events: none; }

@media (max-width: 767px) {
    body { font-size: 16px; }
    .testata { position: static; padding: 12px 0; }
    .racconto { margin-bottom: 34px; }

    /* ⚠️ Su 375px il marchio da 26px piu' "Viaggi di gruppo" non ci
       stanno: il marchio andava a capo e il menu si spezzava su due
       righe. Si stringe tutto e si vieta l'andata a capo.             */
    .marchio { font-size: 19px; white-space: nowrap; }
    .navigazione { gap: 12px !important; }
    .navigazione a { font-size: 11px; letter-spacing: .06em; white-space: nowrap; }
    .cambia-lingua { padding: 2px 6px; font-size: 10px; }

    /* Con la testata sopra l'apertura resta assoluta anche qui. */
    .testata-sopra .testata { position: absolute; }
}

/* ── Consenso ai cookie ────────────────────────────────────────────── */
/* Una striscia in basso, non un velo che copre tutto: il sito si legge
   anche prima di decidere, ed e' voluto — non c'e' niente dietro al
   consenso che valga tenere in ostaggio una pagina.                   */
.consenso {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 2000;
    background: var(--carta-alta);
    border-top: 3px solid var(--accento);
    box-shadow: 0 -8px 30px rgba(0,0,0,.14);
    transform: translateY(100%);
    transition: transform .24s ease;
}
.consenso.aperto { transform: translateY(0); }

.consenso-dentro {
    max-width: 1100px; margin: 0 auto;
    padding: 22px 24px;
    display: flex; flex-wrap: wrap; align-items: center; gap: 18px 28px;
}
.consenso.con-scelte .consenso-dentro { display: block; }

.consenso-testo { flex: 1 1 420px; }
.consenso-testo h2 { font-size: 1.25rem; margin: 0 0 .3em; }
.consenso-testo p { margin: 0; font-size: .93rem; color: var(--inchiostro-tenue); line-height: 1.6; }
.consenso-testo a { color: var(--accento-scuro); border-bottom: 1px solid rgba(251,86,7,.35); }

/* ⚠️ Questa riga non e' ridondante. L'attributo "hidden" dell'HTML mette
   display:none dal foglio di stile del browser, che PERDE contro un
   "display: grid" scritto qui: senza, le caselle delle categorie restano
   sempre in vista e la striscia occupa mezzo schermo dal primo istante.
   Misurato: 768px di altezza invece di ~150.                           */
.consenso-scelte[hidden] { display: none; }

.consenso-scelte {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 10px 24px;
    margin: 18px 0;
    padding: 18px 0;
    border-top: 1px solid var(--filo); border-bottom: 1px solid var(--filo);
}
.consenso-voce { display: flex; align-items: flex-start; gap: 10px; margin: 0; cursor: pointer; }
.consenso-voce input { margin-top: 4px; flex: 0 0 auto; }
.consenso-voce b { display: block; font-size: .92rem; font-weight: 700; }
.consenso-voce small { display: block; font-size: .8rem; color: var(--inchiostro-tenue); line-height: 1.45; }
.consenso-voce.sempre { opacity: .62; cursor: default; }

.consenso-pulsanti { display: flex; flex-wrap: wrap; gap: 10px; }
.consenso.con-scelte .consenso-pulsanti { justify-content: flex-end; }

.consenso-pulsanti button {
    font-family: var(--testo);
    font-size: 12px; letter-spacing: .1em; text-transform: uppercase;
    padding: 11px 22px;
    border: 1px solid var(--filo);
    background: var(--carta);
    color: var(--inchiostro);
    cursor: pointer;
    transition: background .16s, color .16s, border-color .16s;
}
.consenso-pulsanti button:hover { border-color: var(--inchiostro-tenue); }

/* ⚠️ "Accetta" e "Rifiuta" hanno lo STESSO peso visivo. Un rifiuto
   travestito da collegamentino, con l'accetta grande e colorata, e' il
   trucco piu' diffuso e piu' contestato: la scelta dev'essere libera
   anche a guardarla.                                                  */
.consenso-pulsanti .accetta { background: var(--accento); border-color: var(--accento); color: #fff; }
.consenso-pulsanti .accetta:hover { background: var(--accento-scuro); border-color: var(--accento-scuro); }
.consenso-pulsanti .rifiuta { background: var(--carta-alta); }
.consenso-pulsanti .scegli { background: transparent; border-color: transparent; text-decoration: underline; }

@media (max-width: 767px) {
    .consenso-dentro { padding: 18px 18px 20px; }
    .consenso-pulsanti { width: 100%; }
    .consenso-pulsanti button { flex: 1 1 auto; padding: 12px 10px; }
    .consenso-scelte { grid-template-columns: 1fr; }
}

/* ── Informativa cookie ────────────────────────────────────────────── */
.tabella-cookie { overflow-x: auto; margin: 1.6em 0; }
.tabella-cookie table { width: 100%; border-collapse: collapse; font-size: .93rem; }
.tabella-cookie th, .tabella-cookie td {
    text-align: left; padding: 11px 14px;
    border-bottom: 1px solid var(--filo); vertical-align: top;
}
.tabella-cookie th {
    font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
    color: var(--inchiostro-tenue); border-bottom-width: 2px;
}
.tabella-cookie code { font-size: .88rem; color: var(--accento-scuro); white-space: nowrap; }
.nota-cookie { font-style: italic; color: var(--inchiostro-tenue); }
.versione-informativa {
    margin-top: 2.5em; padding-top: 1.2em;
    border-top: 1px solid var(--filo);
    font-size: .84rem; color: var(--inchiostro-tenue);
}

/* Un buco che si vede è meglio di un buco che non si vede: se
   l'informativa va online senza il nome del titolare, deve essere
   impossibile non accorgersene. */
.da-completare {
    background: #fff6f2;
    border-left: 3px solid var(--accento);
    padding: 16px 20px;
    margin-bottom: 2em;
    font-size: .95rem;
}
.da-completare code { font-size: .85rem; color: var(--accento-scuro); }
.da-riempire {
    background: #fff6f2;
    border: 1px dashed var(--accento);
    padding: 12px 16px;
    color: var(--accento-scuro);
}
.corpo h3 { font-size: 1.2rem; margin: 1.7em 0 .4em; }
.versione-informativa a { color: var(--accento-scuro); }

/* Chi mette il cookie si legge accanto a cosa fa: senza, in una tabella
   con i cookie nostri e quelli di tre servizi non si capisce di chi sia
   la responsabilita' di ciascuno. */
.tabella-cookie .posato-da {
    display: block; margin-top: 3px;
    font-size: .8rem; color: var(--inchiostro-tenue); font-style: italic;
}

/* ── Galleria dentro un articolo ─────────────────────────────────────── */
/* Stesso motore del carosello dell'apertura — carosello.js li muove tutti
   e due — ma vestito diverso: l'apertura riempie lo schermo, questa sta
   nella colonna del testo, dove si sta leggendo.                        */

.galleria-carosello {
    margin: calc(var(--respiro) * 0.6) 0;
}

/* ⚠️ La vetrina tiene insieme foto, frecce e pallini. Le frecce sono in
   posizione assoluta: senza questo contenitore si misurerebbero
   sull'intera figure e finirebbero in mezzo alla didascalia.            */
.galleria-carosello .vetrina {
    position: relative;
    /* Il rapporto e' fisso apposta: le foto di un viaggio hanno formati
       diversi, e senza un'altezza decisa il testo sotto ballerebbe a
       ogni cambio di immagine. */
    aspect-ratio: 3 / 2;
    overflow: hidden;
    background: #2a2a2a;
}

.galleria-carosello .lastre { position: absolute; inset: 0; }

.galleria-carosello .lastra img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Frecce e pallini: gli stessi del carosello grande, un po' piu' piccoli
   perche' qui lo spazio e' quello della colonna del testo.
   ⚠️ E in bianco e nero, non arancioni: l'accento di questo sito "segna
   solo cio' che si puo' prenotare" (vedi :root), e una galleria dentro
   un racconto non e' in vendita. Il diario e' monocromatico. */
.galleria-carosello .freccia {
    position: absolute; top: 50%; transform: translateY(-50%);
    width: 38px; height: 38px;
    border: 0; border-radius: 50%;
    background: rgba(0,0,0,.35); color: #fff;
    font-size: 23px; line-height: 1;
    cursor: pointer; z-index: 3;
    transition: background .2s;
}
.galleria-carosello .freccia:hover { background: rgba(0,0,0,.6); }
.galleria-carosello .freccia.indietro { left: 12px; }
.galleria-carosello .freccia.avanti { right: 12px; }

.galleria-carosello .pallini {
    position: absolute; bottom: 14px; left: 0; right: 0;
    display: flex; justify-content: center; gap: 7px; z-index: 3;
}
.galleria-carosello .pallini button {
    width: 8px; height: 8px; padding: 0;
    border: 0; border-radius: 50%;
    background: rgba(255,255,255,.5);
    cursor: pointer; transition: background .2s, width .2s;
}
.galleria-carosello .pallini button.viva { background: #fff; width: 22px; border-radius: 4px; }

/* ⚠️ Le didascalie stanno SOTTO la foto, non sopra: su un'immagine chiara
   il testo bianco sparisce, e non si puo' sapere in anticipo com'e' la
   foto. Sono impilate una sull'altra e ne resta visibile una sola, cosi'
   l'altezza non cambia passando da una didascalia corta a una lunga e il
   testo dell'articolo non fa un salto.                                  */
.galleria-carosello .didascalie {
    position: relative;
    margin-top: 10px;
    min-height: 1.5em;
    font-size: .88rem;
    color: var(--inchiostro-tenue);
    text-align: center;
}
.galleria-carosello .didascalie span {
    position: absolute; inset: 0;
    opacity: 0; visibility: hidden;
    transition: opacity .4s ease, visibility .4s;
}
.galleria-carosello .didascalie span.viva { opacity: 1; visibility: visible; }

@media (max-width: 767px) {
    /* Come sul carosello grande: sul telefono si scorre col dito. */
    .galleria-carosello .freccia { display: none; }
    .galleria-carosello .vetrina { aspect-ratio: 4 / 3; }
}

@media (prefers-reduced-motion: reduce) {
    .galleria-carosello .didascalie span { transition: none; }
}

/* ── Lightbox ───────────────────────────────────────────────────────── */
/* Clic su una foto della galleria e la si vede grande. Scritto a mano
   come il carosello: le librerie che fanno questo pesano piu' delle foto
   che devono mostrare.                                                  */

.galleria-carosello .lastra img { cursor: zoom-in; }

/* ⚠️ Il fuoco da tastiera si deve vedere: le foto sono diventate
   raggiungibili col tabulatore, e un contorno invisibile vorrebbe dire
   non sapere mai dove si e' arrivati. */
.galleria-carosello .lastra img:focus-visible {
    outline: 3px solid #fff;
    outline-offset: -3px;
}

/* Mentre il pannello e' aperto la pagina sotto non scorre: la rotella
   muoverebbe il racconto dietro, e alla chiusura ci si ritroverebbe
   altrove. */
body.con-lightbox { overflow: hidden; }

/* Sopra il banner del consenso, che sta a 2000. Con lo stesso valore
   funzionava lo stesso, ma solo perche' il pannello nasce a fine body e
   a parita' di z-index vince l'ultimo: un giorno che il banner si
   spostasse piu' in basso nel documento, la foto ci finirebbe sotto.
   Meglio dirlo che lasciarlo all'ordine del markup.
   Il banner non sparisce: torna appena si chiude il lightbox. */
.lightbox {
    position: fixed; inset: 0; z-index: 2100;
    display: flex; align-items: center; justify-content: center;
    background: rgba(12, 12, 12, .94);
    padding: 20px;
}
.lightbox[hidden] { display: none; }

.lightbox .lb-corpo {
    margin: 0;
    max-width: 100%; max-height: 100%;
    display: flex; flex-direction: column; align-items: center; gap: 14px;
}

.lightbox .lb-corpo img {
    /* Il conto tiene dentro la didascalia e il respiro sopra e sotto,
       cosi' una foto verticale non finisce mai sotto il bordo. */
    max-width: 100%;
    max-height: calc(100vh - 130px);
    max-height: calc(100svh - 130px);
    object-fit: contain;
    cursor: zoom-out;
    box-shadow: 0 18px 50px rgba(0,0,0,.5);
}

.lightbox figcaption {
    color: #ddd; font-size: .9rem; text-align: center;
    display: flex; align-items: baseline; justify-content: center; gap: 14px;
    max-width: 760px;
}
.lightbox .lb-conto { color: #8b8b8b; font-size: .8rem; white-space: nowrap; }

.lightbox .lb-chiudi {
    position: absolute; top: 14px; right: 18px;
    width: 42px; height: 42px;
    border: 0; border-radius: 50%;
    background: rgba(255,255,255,.12); color: #fff;
    font-size: 26px; line-height: 1; cursor: pointer;
    transition: background .2s;
}
.lightbox .lb-chiudi:hover { background: rgba(255,255,255,.26); }

.lightbox .lb-freccia {
    position: absolute; top: 50%; transform: translateY(-50%);
    width: 52px; height: 52px;
    border: 0; border-radius: 50%;
    background: rgba(255,255,255,.12); color: #fff;
    font-size: 32px; line-height: 1; cursor: pointer;
    transition: background .2s;
}
.lightbox .lb-freccia:hover { background: rgba(255,255,255,.26); }
.lightbox .lb-freccia[hidden] { display: none; }
.lightbox .lb-indietro { left: 18px; }
.lightbox .lb-avanti { right: 18px; }

.lightbox button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

@media (max-width: 767px) {
    /* Sul telefono si scorre col dito, e le frecce coprirebbero la foto. */
    .lightbox .lb-freccia { display: none; }
    .lightbox { padding: 10px; }
    .lightbox .lb-corpo img { max-height: calc(100svh - 110px); }
}

/* ── Riquadri di terze parti ────────────────────────────────────────── */
/* Pubblicita' e configuratori: Columbus in home sotto il diario, Booking
   e DiscoverCars in fondo agli articoli.                                */

.riquadro-terzi {
    display: block;
    margin: var(--respiro) 0;
    padding: 22px;
    background: var(--carta-alta);
    border: 1px solid var(--filo);
}

/* ⚠️ Il cartello di attesa e il motivo per cui questi riquadri esistono
   come involucro invece di essere codice incollato nella pagina.

   Booking, DiscoverCars e Columbus sono legati al consenso di marketing:
   finche' non lo si da', il loro <script> non viene eseguito. Su un pixel
   non se ne accorge nessuno; su un configuratore resterebbe uno spazio
   bianco in mezzo al racconto, e chi legge penserebbe che il sito e'
   rotto. Il cartello dice cosa manca e come rimediare.                  */
.riquadro-terzi .riquadro-attesa {
    text-align: center;
    color: var(--inchiostro-tenue);
    font-size: .95rem;
}
.riquadro-terzi .riquadro-attesa .che-cos-e {
    font-family: var(--titoli, inherit);
    font-size: 1.05rem;
    color: var(--inchiostro);
    margin-bottom: 6px;
}
.riquadro-terzi .riquadro-attesa p { margin: 0 0 12px; }
.riquadro-terzi .riquadro-attesa .bottone { cursor: pointer; border: 0; }

/* Finche' il consenso non c'e', il contenuto vero non si vede nemmeno se
   lo script dovesse partire da solo: e' una seconda serratura sulla
   stessa porta, e costa una riga. */
.riquadro-terzi.riquadro-bloccato .riquadro-vero { display: none; }

/* consenso.js scrive queste classi su <html> appena sa cosa e' stato
   concesso — prima che la pagina sia disegnata, cosi' chi ha gia'
   accettato non vede il cartello comparire e sparire. */
html.si-marketing  .riquadro-terzi[data-riquadro="marketing"]  .riquadro-attesa,
html.si-analitici  .riquadro-terzi[data-riquadro="analitici"]  .riquadro-attesa,
html.si-funzionali .riquadro-terzi[data-riquadro="funzionali"] .riquadro-attesa { display: none; }

html.si-marketing  .riquadro-terzi[data-riquadro="marketing"]  .riquadro-vero,
html.si-analitici  .riquadro-terzi[data-riquadro="analitici"]  .riquadro-vero,
html.si-funzionali .riquadro-terzi[data-riquadro="funzionali"] .riquadro-vero { display: block; }

/* In sviluppo, al posto di un riquadro marcato "solo produzione". */
.riquadro-terzi.riquadro-spento {
    border-style: dashed;
    color: var(--inchiostro-tenue);
    font-size: .9rem;
    text-align: center;
}
.riquadro-terzi.riquadro-spento p { margin: 0 0 6px; }

/* ── Cosa è incluso / cosa non è incluso ───────────────────────────────
   Due colonne di righe con l'icona. Le voci arrivano da un array JSON
   nelle colonne CosaIncluso/CosaEscluso di Viaggi_Tr.                   */

.quote {
    max-width: 860px;
    margin: var(--respiro) auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 26px;
    align-items: start;
}

.quota { background: var(--carta-alta); border: 1px solid var(--filo); }

/* La testata scura, col segno verde o rosso. ⚠️ Il colore qui NON e'
   l'accento del sito: verde e rosso dicono "compreso" e "non compreso",
   sono informazione. L'arancione resta riservato a cio' che si prenota. */
.quota h2 {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0;
    padding: 16px 20px;
    background: #24303f;
    color: #fff;
    font-size: 1.05rem;
    letter-spacing: .04em;
    text-transform: uppercase;
}
.quota h2 .segno {
    display: inline-flex; align-items: center; justify-content: center;
    width: 24px; height: 24px; border-radius: 50%;
    font-size: 12px; line-height: 1;
    flex: 0 0 auto;
}
.quota-si h2 .segno { background: #2e9e5b; }
.quota-no h2 .segno { background: #d0342c; }

.quota ul { list-style: none; margin: 0; padding: 12px; }

.quota li {
    display: grid;
    grid-template-columns: 26px 1fr;
    gap: 12px;
    align-items: start;
    padding: 11px 12px;
    border: 1px solid var(--filo);
    font-size: .97rem;
    line-height: 1.5;
}
.quota li + li { margin-top: 8px; }

/* L'icona non deve spostare il testo quando cambia larghezza: colonna
   fissa e centrata dentro. */
.quota li > .fa {
    justify-self: center;
    margin-top: .18em;
    color: var(--inchiostro-tenue);
    font-size: 15px;
}
.quota-si li > .fa-check { color: #2e9e5b; }
.quota-no li > .fa-times { color: #d0342c; }

@media (max-width: 767px) {
    /* Una sotto l'altra: due colonne da 170px non le legge nessuno. */
    .quote { grid-template-columns: 1fr; gap: 18px; }
    .quota h2 { font-size: .95rem; padding: 14px 16px; }
    .quota ul { padding: 10px; }
}

/* ── Anteprima delle bozze ─────────────────────────────────────────── */
/* Solo nella gestione, sopra la testata. Scura e in un colore che il sito
   non usa: deve saltare all'occhio che questa NON e' la pagina pubblica,
   anche dopo un'ora che la scheda e' aperta. */
.fascia-anteprima {
    background: #1f2d3d;
    color: #fff;
    font-size: .9rem;
    padding: 10px 0;
}
.fascia-anteprima .container {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px 14px;
}
.fascia-anteprima strong {
    text-transform: uppercase;
    letter-spacing: .12em;
    font-size: .78rem;
}
.fascia-anteprima a {
    margin-left: auto;
    color: #fff;
    text-decoration: underline;
}