/* Beyond Us · le pagine interne
   Il foglio è lo stesso della home (style.css): bianco, con il navy e l'oro come inchiostro e come oggetti.
   Da lì vengono colori, caratteri, pulsanti, la doppia linea, il mappamondo, le carte dei viaggi, i bigliettini, i recapiti.
   Qui c'è solo quello che la home non ha: la testata delle pagine, il percorso, le pagine dei paesi, degli stili e dei viaggi,
   l'elenco delle destinazioni, i moduli, le pagine brevi.
   Movimento: solo transform, opacity e clip-path. Gli stati iniziali delle animazioni valgono solo sotto html.mo. */

/* la voce di menu della pagina in cui ci si trova */
.nav a[aria-current]::after{transform:scaleX(1)}
.menu__l a[aria-current]{color:var(--oro-luce)}
.menu__l a[aria-current] .ico{opacity:1;transform:none}
.menu__s a[aria-current]{color:#fff;text-decoration:underline;text-decoration-color:var(--oro);text-decoration-thickness:2.5px;text-underline-offset:6px}

/* =====================================================================================================
   TESTATA: il percorso, il titolo grande, la doppia linea d'oro, la frase, le azioni; accanto, l'oggetto della pagina
   ===================================================================================================== */
.testata{position:relative;z-index:1;padding:calc(var(--hd) + var(--sat) + clamp(22px,3.4vw,52px)) 0 calc(var(--arco) + clamp(46px,6vw,92px));background:var(--bianco);color:var(--navy)}
.testata__in{display:grid;grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr);align-items:center;gap:clamp(26px,4.4vw,80px)}
.testata--sola .testata__in{grid-template-columns:minmax(0,1fr)}
.testata__txt{position:relative;z-index:2;min-width:0}
.testata__h{font-size:clamp(2.3rem,5vw,4.6rem)}
.testata__h--xl{font-size:clamp(3rem,7.6vw,7.2rem);line-height:.98}
.testata__h--s{font-size:clamp(1.9rem,3.4vw,3.1rem);line-height:1.08;letter-spacing:.035em}
/* un titolo di una sola parola lunga (Contattaci, Pagamenti) accanto all'oggetto della pagina: deve stare nella sua colonna */
@media (min-width:1024px){.testata__h--col{font-size:clamp(3rem,6vw,5.6rem)}}
/* la doppia linea d'oro del logo: si disegna sotto il titolo, da sinistra */
.linea2{display:grid;gap:clamp(4px,.42vw,6px);width:100%;margin-top:clamp(14px,1.7vw,24px);transform-origin:0 50%}
.linea2 i{display:block;height:clamp(5px,.5vw,7.5px);background:var(--oro)}
.testata .voce{max-width:25em;margin-top:clamp(14px,1.8vw,26px);text-wrap:balance}
.testata__az{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:clamp(22px,2.5vw,34px)}
.testata__az .btn small{padding:4px 8px;border-radius:999px;background:var(--lamina-ferma);font:600 .875rem/1 var(--titoli);letter-spacing:.04em;color:var(--navy-fondo)}
/* un paragrafo di servizio sotto la frase, e una nota piccola sotto i pulsanti */
.testata__p{max-width:30em;margin-top:clamp(10px,1.2vw,16px);font-size:1.125rem;line-height:1.6;color:var(--testo)}
.linea2+.testata__p{margin-top:clamp(16px,1.9vw,26px)}
.testata__nota{max-width:30em;margin-top:14px;font-size:1rem;line-height:1.5;color:var(--testo-2)}
.testata__vista{position:relative;z-index:1;min-width:0}

/* il percorso: Home, Destinazioni, ... L'aereo d'oro del logo fa da separatore */
.briciole{margin-bottom:clamp(10px,1vw,14px)}
.briciole ol{display:flex;flex-wrap:wrap;align-items:center;gap:0 2px}
.briciole li{display:inline-flex;align-items:center;gap:8px;min-height:44px;font:500 .9375rem/1.2 var(--titoli);color:var(--testo-2)}
.briciole li+li::before{content:"";flex:none;width:15px;height:15px;margin:0 4px 0 6px;background:var(--oro);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='M61 32c0-1.7-3.4-3.1-8.4-3.3L40.4 28.3 27.2 8.5h-5.4L28 28l-11.6-.4-4.4-6.4H7.8L10.5 32 7.8 42.8H12l4.4-6.4L28 36l-6.2 19.5h5.4l13.2-19.8 12.2-.4c5-.2 8.4-1.6 8.4-3.3z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='M61 32c0-1.7-3.4-3.1-8.4-3.3L40.4 28.3 27.2 8.5h-5.4L28 28l-11.6-.4-4.4-6.4H7.8L10.5 32 7.8 42.8H12l4.4-6.4L28 36l-6.2 19.5h5.4l13.2-19.8 12.2-.4c5-.2 8.4-1.6 8.4-3.3z'/%3E%3C/svg%3E") center/contain no-repeat}
.briciole a{display:inline-flex;align-items:center;min-width:44px;min-height:44px;color:var(--navy);text-decoration:none;background:linear-gradient(var(--oro),var(--oro)) 0 calc(50% + .75em)/0 2px no-repeat;transition:background-size .3s var(--ease)}
.briciole [aria-current]{overflow-wrap:anywhere}
@media (hover:hover){.briciole a:hover{background-size:100% 2px}}

/* le etichette sopra un titolo o accanto a un viaggio: pillole d'oro, come nelle carte delle offerte */
.pillole{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:clamp(10px,1.2vw,16px)}
.pillola{display:inline-flex;align-items:center;min-height:44px;padding:0 17px;border-radius:999px;background:var(--lamina-ferma);font-weight:600;font-size:.9375rem;line-height:1.2;text-decoration:none;color:var(--navy-fondo);transition:transform .3s var(--scatto)}
@media (hover:hover){a.pillola:hover{transform:translateY(-3px)}}

/* un mappamondo dentro una pagina: stesso oggetto dell'apertura della home */
.vista-globo{position:relative;width:min(100%,620px);margin-left:auto}
.vista-globo .globo__tela{pointer-events:none}
html:not(.js) .vista-globo .globo{background:url(../assets/logo/lente.svg) center/contain no-repeat}
html:not(.js) .vista-globo .globo__alone,html:not(.js) .vista-globo .globo__anello{display:none}
.vista-globo.is-ferma .globo__anello{animation-play-state:paused}
/* stati iniziali dell'ingresso del mappamondo (solo con Motion) */
.mo .vista-globo:not(.is-partita) .globo__mare,.mo .vista-globo:not(.is-partita) .globo__oro,.mo .vista-globo:not(.is-partita) .globo__alone,.mo .vista-globo:not(.is-partita) .globo__anello{opacity:0}

/* =====================================================================================================
   PAESE: il mappamondo con la rotta da Roma, il timbro del passaporto, la foto in una lente, i chilometri
   ===================================================================================================== */
/* "Roma, aereo, Nairobi" e i chilometri in linea d'aria: una riga da carta d'imbarco */
.tratta-km{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 22px;margin-top:clamp(16px,1.9vw,26px)}
.tratta-km__r{display:inline-flex;align-items:center;gap:10px;font:500 clamp(1.15rem,1.6vw,1.45rem)/1.15 var(--titoli);letter-spacing:.05em;text-transform:uppercase;color:var(--navy)}
.tratta-km__r .ico{width:1em;height:1em;color:var(--oro)}
.tratta-km__km{font:500 italic clamp(1.4rem,2.1vw,1.9rem)/1.2 var(--voce);color:var(--navy)}
.tratta-km__km b{font:600 1.02em/1 var(--titoli);font-style:normal;font-variant-numeric:tabular-nums;letter-spacing:.02em}
/* il timbro: lo stesso delle carte delle destinazioni della home, più grande. Prima del colpo c'è solo il suo posto, tratteggiato */
.vista-globo .bollo{right:-1%;top:-3%;width:clamp(104px,23%,150px);z-index:4}
.mo .vista-globo:not(.is-timbrata) .bollo__in{opacity:0}
.vista-globo.is-ferma .bollo__giro{animation-play-state:paused}
/* la foto del paese, quando c'è: una lente con l'anello d'oro appoggiata sul bordo del mappamondo */
.vista-globo__foto{position:absolute;z-index:3;left:-5%;bottom:-3%;width:43%;margin:0;aspect-ratio:1;border-radius:50%;overflow:hidden;background:var(--velo);box-shadow:0 0 0 6px var(--bianco),0 0 0 12px var(--oro),0 40px 54px -26px rgba(34,46,82,.62)}
.vista-globo__foto img{width:100%;height:100%;object-fit:cover}
.mo .vista-globo:not(.is-partita) .vista-globo__foto{clip-path:circle(0% at 50% 50%)}

.nome-breve,.nome-pieno--lungo{display:none}
.nome-pieno--lungo+.nome-breve{display:inline}
.senza-js{margin-top:16px;font-size:1.0625rem;line-height:1.5}
.senza-js a{color:var(--navy);font-weight:500}
/* nessun itinerario pubblicato: un biglietto bianco che lo dice e porta al compositore */
.vuoto{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:clamp(18px,3vw,44px);padding:clamp(22px,3vw,40px) clamp(20px,3.4vw,46px);border-radius:28px;background:var(--bianco);box-shadow:var(--ombra)}
.vuoto__t{font:500 clamp(1.3rem,1.9vw,1.7rem)/1.2 var(--titoli);color:var(--navy)}
.vuoto__t+p{max-width:34em;margin-top:8px;font-size:1.0625rem;line-height:1.6;color:var(--testo)}
.vuoto__az{display:flex;flex-wrap:wrap;gap:12px}

/* una fila di carte di viaggio dentro una pagina: la stessa griglia delle offerte della home (su telefono, una fila da sfogliare) */
.carte-viaggi{padding-top:8px}
/* una carta sola o due: non si allargano a tutta la riga */
.offerte__g--poche{grid-template-columns:repeat(auto-fit,minmax(0,420px));justify-content:start}
.offerte__g--poche .offerta:nth-child(n){top:0}
/* una carta senza fotografia: al posto della foto, la tratta in grande su un fondo perla, con l'orbita a puntini e il disco d'oro.
   Il fondo è un elemento a parte, così il cartellino del prezzo può sporgere dal bordo come nelle altre carte */
.offerta__foto--volo{background:none}
.volo{position:absolute;inset:0;display:grid;place-items:center;border-radius:16px;overflow:hidden;background:radial-gradient(circle at 50% 46%,#FFFFFF 0%,#FBF6EC 44%,#F1E8D6 100%)}
.volo::before{content:"";position:absolute;right:-9%;top:-24%;width:34%;aspect-ratio:1;border-radius:50%;background:var(--lamina-ferma)}
.volo::after{content:"";position:absolute;left:50%;top:50%;width:112%;aspect-ratio:1;border-radius:50%;border:2.5px dotted var(--oro);transform:translate(-50%,-50%);opacity:.8}
.volo__in{position:relative;z-index:1;display:grid;justify-items:center;gap:6px;width:100%;padding:48px 8% 24px;text-align:center}
.volo__in b{max-width:100%;font:500 clamp(1.0625rem,1.4vw,1.3rem)/1.12 var(--titoli);letter-spacing:.04em;text-transform:uppercase;color:var(--navy);text-wrap:balance;overflow-wrap:break-word}
.volo__in .ico{width:22px;height:22px;color:var(--oro);transform:rotate(90deg)}
.volo__lente{width:74px;height:74px;fill:var(--oro)}
/* senza tappe: al posto della rotta, la frase del viaggio */
.offerta__nota{margin:14px 10px 0;font-size:1rem;line-height:1.5;color:var(--testo);display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:8;overflow:hidden}

/* altre destinazioni, altri stili: righe di collegamenti */
.sez--corta{padding-top:calc(var(--sez) * .72 + var(--arco) * .35);padding-bottom:calc(var(--sez) * .72 + var(--arco))}
.testa--stretta{margin-bottom:clamp(22px,2.6vw,34px)}
.nuvola--pagina .paese a{padding-right:20px;border-radius:999px}
.tutte__az--sola{margin-top:clamp(22px,2.6vw,32px)}

/* =====================================================================================================
   STILE DI VIAGGIO: la fotografia in un quadro con la cornice d'oro che si disegna, il mazzo dei viaggi
   ===================================================================================================== */
.quadro{position:relative;width:min(100%,560px);margin-left:auto;aspect-ratio:5/6}
.quadro__disco{position:absolute;right:-7%;bottom:-6%;width:44%;aspect-ratio:1;border-radius:50%;background:var(--lamina-ferma)}
.quadro__foto{position:absolute;inset:0;margin:0;border-radius:28px;overflow:hidden;background:var(--velo);box-shadow:0 44px 60px -32px rgba(34,46,82,.6)}
.quadro__foto img{width:100%;height:100%;object-fit:cover}
.quadro__cornice{position:absolute;inset:0;width:100%;height:100%;fill:none;stroke:var(--oro-luce);stroke-width:2.5;pointer-events:none}
.quadro__cornice rect{stroke-dasharray:1 1.04;stroke-dashoffset:0}
.quadro__lente{position:absolute;left:clamp(16px,2vw,26px);top:clamp(16px,2vw,26px);display:grid;place-items:center;width:62px;height:62px;border-radius:50%;background:var(--lamina-ferma);box-shadow:0 10px 16px -8px rgba(24,32,66,.7)}
.quadro__lente svg{width:38px;height:38px;fill:var(--navy-fondo);animation:gira 26s linear infinite}
.mo [data-seq].is-armed:not(.is-in) .quadro__cornice rect{stroke-dashoffset:1.02}
.mo [data-seq].is-armed:not(.is-in) [data-a="quadro"]{clip-path:inset(0 100% 0 0 round 28px)}
.mo [data-seq].is-armed:not(.is-in) [data-a="banco"]>*{opacity:0}
/* gli altri stili: due quadri piccoli, con il nome e la frase sulla foto */
.stili-altri{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(14px,1.6vw,22px)}
.stili-tre{grid-template-columns:repeat(3,minmax(0,1fr))}
.stile-c{position:relative;display:block;height:clamp(280px,30vw,400px);border-radius:26px;overflow:hidden;background:var(--navy);color:#fff;text-decoration:none;isolation:isolate}
.stile-c img{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--ease)}
.stile-c::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(24,32,66,.06) 0%,rgba(24,32,66,.22) 22%,rgba(24,32,66,.84) 46%,rgba(24,32,66,.96) 100%)}
.stile-c__txt{position:absolute;left:0;right:0;bottom:0;padding:clamp(18px,2.2vw,28px)}
.stile-c__n{display:block;font:500 clamp(1.4rem,2.1vw,2rem)/1.08 var(--titoli);letter-spacing:.05em;text-transform:uppercase}
.stile-c__f{display:block;margin-top:8px;font:500 italic clamp(1.375rem,1.7vw,1.5rem)/1.25 var(--voce)}
.stile-c__vai{display:inline-flex;align-items:center;gap:8px;min-height:44px;margin-top:8px;font-weight:500}
.stile-c__vai span{background:linear-gradient(var(--oro-chiaro),var(--oro-chiaro)) 0 100%/100% 2.5px no-repeat;padding-bottom:3px}
.stile-c__vai .ico{width:1.05em;height:1.05em;transition:transform .3s var(--ease)}
.stile-c__lente{position:absolute;right:clamp(16px,2vw,24px);top:clamp(16px,2vw,24px);display:grid;place-items:center;width:54px;height:54px;border-radius:50%;background:var(--lamina-ferma)}
.stile-c__lente svg{width:34px;height:34px;fill:var(--navy-fondo)}
@media (hover:hover){.stile-c:hover img{transform:scale(1.07)}.stile-c:hover .ico{transform:translateX(4px)}}

/* =====================================================================================================
   VIAGGIO: la fotografia con il cartellino del prezzo (oppure il biglietto del viaggio), l'itinerario come una rotta di timbri
   ===================================================================================================== */
/* il prezzo nella testata: il cartellino d'oro delle carte, in grande e dritto */
.cartellino{position:relative;display:inline-grid;gap:2px;margin-top:clamp(18px,2.2vw,30px);padding:12px 24px 12px 44px;border-radius:0 14px 14px 0;overflow:hidden;background:var(--lamina-ferma);line-height:1.1;color:var(--navy-fondo);clip-path:polygon(22px 0,100% 0,100% 100%,22px 100%,0 50%);-webkit-mask:radial-gradient(circle 5px at 25px 50%,#0000 96%,#000);mask:radial-gradient(circle 5px at 25px 50%,#0000 96%,#000)}
.cartellino span{font-weight:500;font-size:1rem}
.cartellino b{font:600 clamp(1.5rem,2.3vw,2rem)/1.1 var(--titoli);font-variant-numeric:tabular-nums;white-space:nowrap}
.cartellino small{font-weight:500;font-size:.9375rem;line-height:1.25}
.cartellino--chiedi b{font-size:clamp(1.2rem,1.7vw,1.45rem)}
/* la fotografia del viaggio: non più larga del file, con il disco d'oro che sporge da dietro */
.scatto{position:relative;width:min(100%,var(--lw,500px));margin-left:auto}
.scatto__disco{position:absolute;right:-8%;top:-9%;width:46%;aspect-ratio:1;border-radius:50%;background:var(--lamina-ferma)}
.scatto__foto{position:relative;margin:0;padding:10px;border-radius:26px;background:var(--bianco);box-shadow:var(--ombra-su)}
.scatto__foto img{width:100%;border-radius:17px}
.scatto--alta{width:min(100%,400px)}
.scatto--alta .scatto__foto img{aspect-ratio:4/5;object-fit:cover}
/* senza fotografia: il biglietto del viaggio, navy e oro come quello del compositore (usa le stesse parti: bigl__*) */
.bigl--viaggio{width:min(100%,560px);margin-left:auto;--matrice:124px}
.bigl--viaggio .bigl__alone{inset:-34% -14% -30%}
.bigl--viaggio .bigl__rotta{min-height:0;align-items:start}
.bigl--viaggio .bigl__capo b{font-size:clamp(1.2rem,1.7vw,1.6rem);max-width:9.2em;text-wrap:balance;overflow-wrap:break-word}
.bigl--viaggio .bigl__capo b[data-l]{font-size:1.0625rem;letter-spacing:.03em;line-height:1.14}
.bigl--viaggio .bigl__via{margin-top:1.55em;margin-bottom:0}
.bigl--viaggio .bigl__fatto{transform:scaleX(1)}
.bigl--viaggio .bigl__aereo{left:calc(100% - 22px)}
.bigl--viaggio .bigl__campi{grid-template-columns:auto minmax(0,1fr)}
.bigl--viaggio .bigl__campi dd{white-space:normal}
.bigl--viaggio .bigl__titolo{margin-top:16px;font:500 1.125rem/1.25 var(--titoli);color:#fff;text-wrap:balance}
.bigl--viaggio .bigl__stato{font-size:.875rem}
html:not(.js) .bigl--viaggio{display:block}
.mo .bigl--viaggio.is-ferma .bigl__bordo{animation:none}
.mo .bigl--viaggio:not(.is-ferma) .bigl__bordo{animation:scorri-lamina 6s linear infinite}
.mo .bigl--viaggio:not(.is-ferma) .bigl__onda{animation:ondeggia 6.5s ease-in-out infinite}

/* la frase del viaggio, quando il sito ne ha una */
.testa .racconto{margin-top:clamp(12px,1.4vw,20px)}
.racconto{max-width:42em;font:500 italic clamp(1.4rem,2.1vw,1.9rem)/1.36 var(--voce);color:var(--navy)}
/* l'itinerario: ogni tappa è un timbro d'oro col suo numero; una linea d'oro le unisce e l'aereo la percorre.
   Su computer la rotta va a serpentina (cinque tappe per riga, le righe pari tornano indietro); su telefono scende in verticale */
.itin-box{position:relative}
.itin{--col:5;position:relative;display:grid;grid-auto-flow:row dense;grid-template-columns:repeat(var(--col),minmax(0,1fr));gap:clamp(34px,4vw,54px) 0;margin-top:clamp(8px,1vw,14px)}
.fermata{position:relative;display:grid;justify-items:center;align-content:start;gap:12px;padding:0 8px;text-align:center}
/* il tratto di linea che arriva a questa tappa dalla precedente */
.fermata__l{position:absolute;display:block;top:27px;left:-50%;width:100%;height:0;border-top:3px solid var(--oro);transform-origin:0 50%}
.fermata:first-child .fermata__l{display:none}
.fermata__b{position:relative;z-index:1;display:grid;place-items:center;width:58px;height:58px;border-radius:50%;background:var(--lamina-ferma);box-shadow:0 0 0 5px var(--bianco),0 10px 16px -8px rgba(34,46,82,.5);font:600 1.25rem/1 var(--titoli);font-variant-numeric:tabular-nums;color:var(--navy-fondo)}
.fermata__b::after{content:"";position:absolute;inset:5px;border-radius:50%;border:1.5px dotted rgba(24,32,66,.55)}
.fermata__n{max-width:9.2em;font:500 1.0625rem/1.2 var(--titoli);color:var(--navy);text-wrap:balance;overflow-wrap:break-word}
.fermata--prima .fermata__b,.fermata--ultima .fermata__b{background:var(--navy);color:var(--oro-luce)}
.fermata--prima .fermata__b::after,.fermata--ultima .fermata__b::after{border-color:rgba(240,227,198,.6)}
/* l'elenco continua: un ultimo timbro tratteggiato */
.fermata--poi .fermata__b{background:var(--bianco);box-shadow:inset 0 0 0 2px var(--oro),0 0 0 5px var(--bianco);color:var(--oro-scuro)}
.fermata--poi .fermata__b::after{display:none}
.fermata--poi .fermata__n{color:var(--testo-2)}
.fermata--poi .fermata__l{border-top-style:dotted}
/* la serpentina: nelle righe pari le tappe si dispongono da destra a sinistra, e la linea che le raggiunge scende dalla riga sopra */
@media (min-width:1024px){
  .itin .fermata:nth-child(10n+6){grid-column:5}.itin .fermata:nth-child(10n+7){grid-column:4}.itin .fermata:nth-child(10n+8){grid-column:3}.itin .fermata:nth-child(10n+9){grid-column:2}.itin .fermata:nth-child(10n+10){grid-column:1}
  .itin .fermata:nth-child(10n+7) .fermata__l,.itin .fermata:nth-child(10n+8) .fermata__l,.itin .fermata:nth-child(10n+9) .fermata__l,.itin .fermata:nth-child(10n+10) .fermata__l{left:50%;transform-origin:100% 50%}
  /* a fine riga la linea gira: esce di lato dall'ultimo timbro, scende e rientra nel primo della riga sotto (pagine.js ne misura l'altezza: --giro) */
  .itin .fermata:nth-child(5n+6) .fermata__l{top:auto;bottom:calc(100% - 30px);width:50px;height:var(--giro,calc(100% + clamp(34px,4vw,54px)));border:3px solid var(--oro);transform-origin:50% 0}
  .itin .fermata:nth-child(10n+6) .fermata__l{left:calc(50% + 27px);border-left:0;border-radius:0 27px 27px 0}
  .itin .fermata:nth-child(10n+11) .fermata__l{left:auto;right:calc(50% + 27px);border-right:0;border-radius:27px 0 0 27px}
  .itin .fermata--poi:nth-child(5n+6) .fermata__l{border-style:dotted}
}
@media (min-width:701px) and (max-width:1023px){
  .itin{--col:4}
  .itin .fermata:nth-child(8n+5){grid-column:4}.itin .fermata:nth-child(8n+6){grid-column:3}.itin .fermata:nth-child(8n+7){grid-column:2}.itin .fermata:nth-child(8n+8){grid-column:1}
  .itin .fermata:nth-child(8n+6) .fermata__l,.itin .fermata:nth-child(8n+7) .fermata__l,.itin .fermata:nth-child(8n+8) .fermata__l{left:50%;transform-origin:100% 50%}
  .itin .fermata:nth-child(4n+5) .fermata__l{top:auto;bottom:calc(100% - 30px);width:46px;height:var(--giro,calc(100% + clamp(34px,4vw,54px)));border:3px solid var(--oro);transform-origin:50% 0}
  .itin .fermata:nth-child(8n+5) .fermata__l{left:calc(50% + 27px);border-left:0;border-radius:0 26px 26px 0}
  .itin .fermata:nth-child(8n+9) .fermata__l{left:auto;right:calc(50% + 27px);border-right:0;border-radius:26px 0 0 26px}
  .itin .fermata--poi:nth-child(4n+5) .fermata__l{border-style:dotted}
}
/* l'aereo che percorre la rotta: lo sposta pagine.js */
.itin__aereo{position:absolute;left:0;top:0;z-index:2;width:30px;height:30px;margin:-15px 0 0 -15px;fill:var(--navy);opacity:0;pointer-events:none}
.mo .itin.is-armed .fermata:not(.is-in) .fermata__b,.mo .itin.is-armed .fermata:not(.is-in) .fermata__n{opacity:0}
.mo .itin.is-armed .fermata:not(.is-in) .fermata__l{transform:scale(0)}
.itin__nota{max-width:40em;margin-top:clamp(22px,2.6vw,34px);font-size:1.0625rem;line-height:1.6;color:var(--testo)}
.dopo-itin{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:clamp(28px,3.4vw,46px)}

/* un viaggio in una riga: un bigliettino bianco con la lente, il titolo, la tratta e, sulla matrice d'oro, il prezzo */
.righe{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.6vw,22px)}
.vg{display:block}
.vg[hidden]{display:none}
.vg{transition:opacity .18s,transform .22s var(--ease)}
.vg.is-via{opacity:0;transform:scale(.8);pointer-events:none}
.vg__in{display:block;height:100%;text-decoration:none;color:var(--navy);filter:drop-shadow(0 14px 14px rgba(34,46,82,.15));transition:transform .35s var(--scatto)}
.vg__carta{--m:112px;display:grid;grid-template-columns:auto minmax(0,1fr) var(--m);height:100%;min-height:132px;border-radius:20px;overflow:hidden;background:var(--bianco);
  -webkit-mask:radial-gradient(circle 11px at calc(100% - var(--m)) 0,#0000 96%,#000) top/100% 51% no-repeat,radial-gradient(circle 11px at calc(100% - var(--m)) 100%,#0000 96%,#000) bottom/100% 51% no-repeat;
  mask:radial-gradient(circle 11px at calc(100% - var(--m)) 0,#0000 96%,#000) top/100% 51% no-repeat,radial-gradient(circle 11px at calc(100% - var(--m)) 100%,#0000 96%,#000) bottom/100% 51% no-repeat}
.vg__lente{position:relative;align-self:center;width:66px;height:66px;margin-left:16px;border-radius:50%;overflow:hidden;background:var(--velo);box-shadow:inset 0 0 0 2.5px var(--oro)}
.vg__lente img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:50%}
.vg__lente img.vg__logo{padding:9px;object-fit:contain}
.vg__lente img+img{border:2.5px solid var(--oro)}
.vg__c{display:grid;align-content:center;gap:6px;min-width:0;padding:16px 14px 16px 16px}
.vg__t{font:500 1.0625rem/1.2 var(--titoli);text-wrap:balance}
.vg__r{display:flex;flex-wrap:wrap;align-items:center;gap:2px 7px;font-size:1rem;line-height:1.25;color:var(--testo)}
.vg__r .ico{width:14px;height:14px;color:var(--oro)}
.vg__m{position:relative;display:grid;align-content:center;justify-items:center;gap:6px;padding:12px 8px;background:var(--lamina-ferma);color:var(--navy-fondo);text-align:center}
.vg__m::before{content:"";position:absolute;left:-1px;top:18px;bottom:18px;border-left:2px dashed rgba(24,32,66,.6)}
.vg__p{display:grid;gap:1px;line-height:1.12}
.vg__p small{font-weight:500;font-size:.875rem}
.vg__p b{font:600 1.0625rem/1.12 var(--titoli);font-variant-numeric:tabular-nums}
.vg__p small+b{white-space:nowrap}
.vg__m .ico{width:22px;height:22px;stroke-width:2.2;transition:transform .3s var(--ease)}
@media (hover:hover){.vg__in:hover{transform:translateY(-5px) rotate(-.8deg)}.vg__in:hover .vg__m .ico{transform:translateX(5px)}}

/* =====================================================================================================
   DESTINAZIONI: i tre stili, tutti i paesi (cerca e aree), tutti gli itinerari
   ===================================================================================================== */
.salti{display:flex;flex-wrap:wrap;gap:10px;margin-top:clamp(22px,2.5vw,34px)}
/* i filtri: pillole con il bordo navy; quella scelta è piena */
.filtri{display:flex;flex-wrap:wrap;gap:8px}
.filtro{display:inline-flex;align-items:center;gap:8px;min-height:46px;padding:0 18px;border:1.5px solid var(--navy);border-radius:999px;background:var(--bianco);font:500 1rem/1 var(--titoli);white-space:nowrap;color:var(--navy);transition:background-color .2s,color .2s}
.filtro small{font-weight:500;font-size:.875rem;font-variant-numeric:tabular-nums;color:var(--testo-2);transition:color .2s}
.filtro[aria-pressed="true"]{background:var(--navy);color:#fff}
.filtro[aria-pressed="true"] small{color:var(--oro-luce)}
@media (hover:hover){.filtro:hover{background:var(--navy);color:#fff}.filtro:hover small{color:var(--oro-luce)}}
html:not(.js) .filtri{display:none}
/* a sinistra la ricerca, le aree e i paesi; a destra (solo computer) il mappamondo, che resta in vista mentre l'elenco scorre */
.paesi__g{display:grid;grid-template-columns:minmax(0,1fr) clamp(300px,31vw,440px);align-items:start;gap:clamp(30px,4.6vw,80px)}
.paesi__dx{position:sticky;top:calc(var(--hd) + 34px)}
.paesi__dx .vista-globo{width:100%}
.paesi__dida{position:relative;z-index:2;display:grid;gap:4px;margin-top:38px;text-align:center}
.paesi__dida b{font:500 clamp(1.2rem,1.6vw,1.45rem)/1.15 var(--titoli);letter-spacing:.05em;text-transform:uppercase;color:var(--navy)}
.paesi__dida span{font:500 italic 1.4rem/1.25 var(--voce);color:var(--navy)}
html:not(.js) .paesi__dida span{display:none}
.paesi__barra{display:grid;grid-template-columns:minmax(0,1fr);gap:14px;margin-bottom:clamp(26px,3vw,40px)}
.paesi__barra .cerca{max-width:430px}
.paesi__barra .cerca{flex:none;min-width:0}
/* ogni area: il nome in grande, il numero su un disco d'oro, le pillole dei paesi */
.aree{display:grid;gap:clamp(30px,3.6vw,48px)}
.area[hidden]{display:none}
.area__t{display:flex;align-items:center;gap:14px;margin-bottom:16px;font:500 clamp(1.3rem,1.9vw,1.7rem)/1.15 var(--titoli);letter-spacing:.05em;text-transform:uppercase;color:var(--navy)}
.area__t small{display:grid;place-items:center;min-width:38px;height:38px;padding:0 9px;border-radius:999px;background:var(--lamina-ferma);font:600 1rem/1 var(--titoli);letter-spacing:0;font-variant-numeric:tabular-nums;color:var(--navy-fondo)}
/* un paese che ha itinerari: un puntino d'oro prima del nome */
.paese--viaggi a::before{content:"";flex:none;width:9px;height:9px;margin-right:9px;border-radius:50%;background:var(--oro)}
.legenda{display:flex;align-items:center;gap:9px;margin-top:clamp(22px,2.6vw,32px);font-size:1rem;color:var(--testo-2)}
.legenda::before{content:"";flex:none;width:9px;height:9px;border-radius:50%;background:var(--oro)}
.viaggi__barra{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px 26px;margin-bottom:clamp(24px,2.8vw,36px)}
.viaggi__vuoto{padding:22px 26px;border-radius:22px;background:var(--oro-luce);font-weight:500;font-size:1.125rem;color:var(--navy-fondo)}

/* =====================================================================================================
   CHI SIAMO
   ===================================================================================================== */
.testata .collage{margin-top:0;width:min(100%,560px);margin-left:auto}
.prosa{max-width:36em}
.prosa p{font-size:1.125rem;line-height:1.7}
.prosa p+p{margin-top:1.15em}
.prosa a{color:var(--navy);font-weight:500;text-decoration:none;background:linear-gradient(var(--oro),var(--oro)) 0 100%/100% 2.5px no-repeat;padding-bottom:1px;transition:background-size .3s var(--ease),color .2s}
.prosa a.is-su{background-size:100% 100%;color:var(--navy-fondo)}
@media (hover:hover){.prosa a:hover{background-size:100% 100%;color:var(--navy-fondo)}}
.mete{display:grid;grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr);align-items:center;gap:clamp(30px,5vw,90px)}
.mete .vista-globo{width:min(100%,560px)}
.mete .tit{margin-bottom:clamp(16px,2vw,26px)}
.mete__vista{min-width:0}
/* sotto il mappamondo, la meta verso cui sta volando: "Roma, aereo, Giappone" */
.mete__dida{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:4px 10px;position:relative;z-index:2;min-height:1.4em;margin-top:clamp(30px,3.6vw,48px);font:500 clamp(1.1rem,1.5vw,1.3rem)/1.15 var(--titoli);letter-spacing:.05em;text-transform:uppercase;color:var(--navy);transition:opacity .3s}
.mete__dida .ico{width:1em;height:1em;color:var(--oro)}
.mete__dida.is-via,html:not(.js) .mete__dida,.rm .mete__dida{opacity:0}
.pg--chi-siamo .cifre{margin-top:0}

/* =====================================================================================================
   CONTATTACI: il mappamondo su Roma con il cartellino dell'agenzia, i recapiti, il modulo
   ===================================================================================================== */
/* il cartellino dell'agenzia, legato a Roma da un filo d'oro: stessa carta bianca della destinazione nell'apertura della home */
.sede{position:absolute;z-index:3;right:-2%;bottom:3%;width:clamp(230px,46%,300px);padding:16px 18px 16px;border-radius:20px;background:var(--bianco);box-shadow:var(--ombra-su);transform:rotate(3deg);transform-origin:26px 6px;color:var(--navy)}
.sede::before{content:"";position:absolute;right:-26px;top:-28px;z-index:-1;width:104px;height:104px;border-radius:50%;background:var(--lamina-ferma)}
.sede::after{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background:var(--bianco)}
.sede__perno{position:absolute;left:19px;top:-7px;width:14px;height:14px;border-radius:50%;background:var(--oro);box-shadow:0 0 0 3px var(--bianco),0 3px 6px rgba(34,46,82,.35)}
.sede__n{font:500 1.05rem/1.15 var(--titoli);letter-spacing:.05em;text-transform:uppercase}
.sede__i{margin-top:6px;font-size:1rem;line-height:1.4;color:var(--testo)}
.sede .legame{margin-top:4px}
html:not(.js) .sede{position:relative;right:auto;bottom:auto;margin:18px auto 0;transform:none}
.mo .vista-globo:not(.is-partita) .sede{opacity:0}
.recapiti--4{grid-template-columns:repeat(4,minmax(0,1fr));margin-top:0}
.recapiti--3{grid-template-columns:repeat(3,minmax(0,1fr));margin-top:0}
/* il modulo: una carta bianca con i campi; a sinistra il titolo e la copia del biglietto */
.modulo-g{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);align-items:start;gap:clamp(26px,4vw,70px)}
.modulo-g__sx .voce{margin-top:clamp(10px,1.2vw,18px)}
.modulo-g__sx .riepilogo{margin-top:clamp(22px,2.6vw,34px)}
.riepilogo__nota{flex:1 1 100%;font-size:1rem;line-height:1.5;color:var(--testo-2)}
.carta-modulo{position:relative;padding:clamp(22px,2.6vw,34px);border-radius:28px;background:var(--bianco);box-shadow:var(--ombra)}
.campi{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 14px}
.campo--largo{grid-column:1 / -1}
.campo textarea.alto{height:132px;min-height:132px}
.campo.is-err textarea{border-color:#9B2C2C;box-shadow:0 0 0 2px #9B2C2C}
.campo label b{font-weight:500;color:var(--oro-scuro)}
.carta-modulo .invio__az{margin-top:20px}
.carta-modulo .invio__nota a{text-underline-offset:3px}
html:not(.js) .carta-modulo [data-via="whatsapp"],html:not(.js) .carta-modulo .invio__nota--js{display:none}

/* =====================================================================================================
   PARLIAMONE: la chiusura di ogni pagina. La copia del biglietto, il pulsante che porta al compositore, i recapiti
   ===================================================================================================== */
.invito__g{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);align-items:center;gap:clamp(26px,5vw,90px)}
.invito .testa{margin-bottom:clamp(22px,2.6vw,34px)}
.invito .recapiti{grid-template-columns:1fr;margin-top:0}
.invito .recapito{min-height:92px}

/* =====================================================================================================
   LISTA NOZZE, PAGINE BREVI (esperienze, pagamenti, voucher), NEWS, PAGINA NON TROVATA
   ===================================================================================================== */
.testata .nozze__vista{margin-left:auto}
.accesso{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:clamp(18px,3vw,44px);padding:clamp(22px,3vw,40px) clamp(20px,3.4vw,46px);border-radius:28px;background:var(--bianco);box-shadow:var(--ombra)}
.accesso__t{font:500 clamp(1.3rem,1.9vw,1.7rem)/1.2 var(--titoli);color:var(--navy)}
.accesso__t+p{max-width:34em;margin-top:8px;font-size:1.0625rem;line-height:1.6;color:var(--testo)}
/* il biglietto grande delle pagine brevi: bianco, con le tacche, la perforazione e la matrice d'oro con la lente del logo */
.tagliando{position:relative;width:min(100%,540px);margin-left:auto}
.tagliando__alone{position:absolute;inset:-30% -14% -26%;border-radius:50%;background:radial-gradient(closest-side,rgba(238,222,186,1) 0%,rgba(238,222,186,1) 58%,rgba(240,227,198,.6) 80%,rgba(240,227,198,0) 100%);pointer-events:none}
.tagliando__ombra{position:relative;filter:drop-shadow(0 26px 26px rgba(34,46,82,.22))}
.tagliando__in{--m:128px;position:relative;display:grid;grid-template-columns:minmax(0,1fr) var(--m);min-height:250px;border-radius:26px;overflow:hidden;background:var(--bianco);
  -webkit-mask:radial-gradient(circle 14px at calc(100% - var(--m)) 0,#0000 96%,#000) top/100% 51% no-repeat,radial-gradient(circle 14px at calc(100% - var(--m)) 100%,#0000 96%,#000) bottom/100% 51% no-repeat;
  mask:radial-gradient(circle 14px at calc(100% - var(--m)) 0,#0000 96%,#000) top/100% 51% no-repeat,radial-gradient(circle 14px at calc(100% - var(--m)) 100%,#0000 96%,#000) bottom/100% 51% no-repeat}
.tagliando__c{display:grid;align-content:center;gap:16px;padding:30px 26px 30px 32px}
.tagliando__logo{width:118px}
/* la frase della pagina è il testo del biglietto, in grande; sotto la doppia linea, il nome della pagina */
.tagliando__f{min-height:2.3em;font:500 italic clamp(1.75rem,2.7vw,2.4rem)/1.15 var(--voce);color:var(--navy);text-wrap:balance}
.tagliando__t{font:500 1rem/1.2 var(--titoli);letter-spacing:.08em;text-transform:uppercase;color:var(--oro-scuro)}
.tagliando__m{position:relative;display:grid;place-items:center;background:var(--lamina-ferma)}
.tagliando__m::before{content:"";position:absolute;left:-1px;top:22px;bottom:22px;border-left:2px dashed rgba(24,32,66,.6)}
.tagliando__m svg{width:68px;height:68px;fill:var(--navy-fondo);animation:gira 30s linear infinite}
.tagliando__lampo{position:absolute;z-index:3;top:-20%;bottom:-20%;left:0;width:42%;background:linear-gradient(90deg,rgba(255,255,255,0),rgba(240,227,198,.7),rgba(255,255,255,0));transform:translateX(-140%) skewX(-16deg);opacity:0;pointer-events:none}
.tagliando.is-ferma .tagliando__m svg{animation-play-state:paused}
.fratelli{grid-template-columns:repeat(2,minmax(0,1fr));margin-top:0}
.fratelli--3{grid-template-columns:repeat(3,minmax(0,1fr))}
/* news: l'elenco, la notizia, e quando non ce ne sono */
.attesa{display:grid;justify-items:center;gap:6px;max-width:44rem;margin-inline:auto;text-align:center}
.attesa__rotta{position:relative;width:min(100%,560px);height:64px;margin-bottom:clamp(12px,1.6vw,22px)}
.attesa__rotta .doppia{position:absolute;left:0;right:66px;top:27px;width:auto;transform-origin:0 50%}
.attesa__rotta .doppia i{height:5px;border-radius:0}
.attesa__lente{position:absolute;right:0;top:0;width:64px;height:64px;fill:var(--oro);animation:gira 40s linear infinite}
.attesa__aereo{position:absolute;right:66px;top:14px;width:36px;height:36px;margin-right:-10px;fill:var(--navy)}
.attesa__t{font:500 clamp(1.4rem,2.1vw,1.9rem)/1.2 var(--titoli);color:var(--navy)}
.attesa p{font-size:1.125rem;line-height:1.6;color:var(--testo)}
.attesa__az{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:clamp(18px,2.2vw,28px)}
.mo [data-seq].is-armed:not(.is-in) .attesa__aereo{opacity:0}
.notizie{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,2.2vw,30px)}
.notizia{display:flex;flex-direction:column;height:100%;padding:10px 10px 20px;border:1px solid #E9E2D5;border-radius:24px;background:var(--bianco);box-shadow:var(--ombra)}
.notizia__foto{aspect-ratio:16/10;border-radius:16px;overflow:hidden;background:radial-gradient(circle at 50% 46%,#FFFFFF 0%,#FBF6EC 44%,#F1E8D6 100%)}
.notizia__foto img{width:100%;height:100%;object-fit:cover}
.notizia__txt{display:grid;gap:8px;padding:18px 10px 0}
.notizia time{font-size:1rem;color:var(--testo-2)}
.notizia h2,.notizia h3{font:500 clamp(1.2rem,1.5vw,1.4rem)/1.2 var(--titoli);color:var(--navy);text-wrap:balance}
.notizia h2 a,.notizia h3 a{color:inherit;text-decoration:none}
.notizia p{font-size:1rem;line-height:1.5;color:var(--testo)}
.articolo{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);align-items:start;gap:clamp(26px,5vw,80px)}
.articolo--solo{grid-template-columns:minmax(0,1fr)}
.articolo__foto{margin:0;padding:10px;border-radius:26px;background:var(--bianco);box-shadow:var(--ombra-su)}
.articolo__foto img{width:100%;border-radius:17px}
.racconto+.prosa{margin-top:1.2em}
.articolo .dopo-itin{margin-top:clamp(24px,3vw,38px)}
.articolo .prosa h2,.articolo .prosa h3{margin:1.4em 0 .5em;font:500 1.4rem/1.2 var(--titoli);color:var(--navy)}
.articolo .prosa ul{margin:1em 0;padding-left:1.2em;list-style:disc}
.articolo .prosa li{font-size:1.125rem;line-height:1.7}
/* pagina non trovata: il numero in lamina d'oro, a rullo come quelli della home */
.perso{display:grid;justify-items:center;text-align:center}
.perso .cifra__n{font-size:clamp(7rem,26vw,19rem)}
.perso .voce{margin-inline:auto}
.perso .testata__az{justify-content:center}

@media (max-width:1099px){
  .righe{grid-template-columns:repeat(2,minmax(0,1fr))}
  .recapiti--4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .notizie{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:1023px){
  /* telefono e tablet: la testata si impila. Prima il testo, sotto l'oggetto della pagina, al centro */
  .testata__in{grid-template-columns:minmax(0,1fr)}
  .vista-globo{width:min(100%,520px);margin-inline:auto}
  .paesi__g{grid-template-columns:minmax(0,1fr)}
  .paesi__dx{display:none}
  .quadro,.scatto,.bigl--viaggio,.tagliando,.testata .collage,.testata .nozze__vista{margin-inline:auto}
  .quadro{aspect-ratio:5/5.4}
  .mete,.modulo-g,.invito__g,.articolo{grid-template-columns:minmax(0,1fr)}
  .recapiti--3{grid-template-columns:1fr}
  .fratelli--3{grid-template-columns:1fr;max-width:560px}
  .invito .recapiti{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:860px){
  .stili-tre{grid-template-columns:1fr}
  .stili-tre .stile-c{height:clamp(250px,58vw,340px)}
  .invito .recapiti{grid-template-columns:1fr}
}
@media (max-width:700px){
  .testata{padding-top:calc(var(--hd) + var(--sat) + 6px);padding-bottom:calc(var(--arco) + 50px)}
  .testata__in{gap:30px}
  .testata__h{font-size:clamp(2.1rem,10vw,2.75rem)}
  .testata__h--xl{font-size:clamp(2.6rem,13.6vw,4.2rem)}
  .testata__h--s{font-size:clamp(1.75rem,7.6vw,2.1rem)}
  /* un titolo di una parola sola e lunga (Destinazioni): deve stare nello schermo */
  .testata__h--lungo{font-size:clamp(2.1rem,10.4vw,2.9rem)}
  /* le etichette sopra il titolo: una fila sola, che si sfoglia col dito dal margine della pagina */
  .pillole{flex-wrap:nowrap;margin-inline:calc(-1 * var(--px));padding-inline:var(--px);overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .pillole::-webkit-scrollbar{display:none}
  .pillole::after{content:"";flex:none;width:1px}
  .pillole li{flex:none}
  .pillola{white-space:nowrap}
  .linea2{margin-top:12px}
  .testata .voce{margin-top:14px}
  .testata__az{display:grid;gap:10px;margin-top:20px}
  .testata__az .btn{width:100%;min-height:54px}
  /* il percorso: la pagina in cui si è la dice già il titolo qui sotto */
  .briciole--corta li:last-child{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .tratta-km{gap:4px 16px;margin-top:14px}
  .nome-pieno{display:none}
  .nome-breve{display:inline}
  /* il mappamondo: tutto dentro i margini, con il timbro e la lente che gli stanno sopra senza uscire dallo schermo */
  .vista-globo{width:min(100% - 24px,400px)}
  .vista-globo .bollo{right:-12px;top:-14px;width:92px}
  .vista-globo .bollo__in,.vista-globo .bollo__onda{transform-origin:86% 30%}
  .vista-globo__foto{left:-12px;bottom:-10px;width:40%;box-shadow:0 0 0 4px var(--bianco),0 0 0 8.5px var(--oro),0 26px 34px -18px rgba(34,46,82,.6)}
  .vuoto,.accesso{grid-template-columns:1fr;border-radius:24px}
  .vuoto__az{display:grid}
  .accesso .btn{width:100%}
  .sez--corta{padding-top:calc(var(--sez) * .8 + var(--arco) * .35);padding-bottom:calc(var(--sez) * .8 + var(--arco))}
  .offerte__g--poche{grid-template-columns:none}
  .offerte__g--una{display:block;width:auto;padding-bottom:26px}
  .offerte__g--una .offerta{width:auto}
  .quadro{width:calc(100% - 20px);aspect-ratio:1}
  .quadro__lente{width:54px;height:54px}
  .quadro__lente svg{width:34px;height:34px}
  .stili-altri{grid-template-columns:1fr}
  /* su telefono il nome di uno stile va su due righe: il riquadro è più alto, così il testo resta nella metà scura */
  .stile-c,.stili-tre .stile-c{height:clamp(310px,88vw,390px)}
  .stile-c::after{background:linear-gradient(180deg,rgba(24,32,66,.06) 0%,rgba(24,32,66,.3) 18%,rgba(24,32,66,.86) 38%,rgba(24,32,66,.96) 100%)}
  .stile-c__lente{width:48px;height:48px}
  .stile-c__lente svg{width:30px;height:30px}
  .cartellino{margin-top:16px}
  .scatto{width:calc(100% - 22px)}
  /* il biglietto del viaggio in verticale, come quello del compositore */
  .bigl--viaggio{--matrice:84px;width:100%}
  .bigl--viaggio .bigl__alone{inset:-18% -5% -14%}
  .bigl--viaggio .bigl__capo b{font-size:1.25rem}
  .bigl--viaggio .bigl__campi div:last-child{grid-column:auto;display:block}
  .bigl--viaggio .bigl__campi div:last-child dd{margin-top:8px}
  /* l'itinerario scende in verticale: i timbri a sinistra, uniti dalla linea d'oro; i nomi accanto */
  .itin{grid-template-columns:minmax(0,1fr);gap:0}
  .fermata{grid-template-columns:auto minmax(0,1fr);justify-items:start;align-items:center;gap:16px;min-height:76px;padding:9px 0;text-align:left}
  .fermata .fermata__l{left:25px;top:auto;bottom:calc(50% + 6px);width:0;height:100%;border-top:0;border-left:3px solid var(--oro);transform-origin:50% 0}
  .fermata--poi .fermata__l{border-left-style:dotted}
  .fermata__b{width:52px;height:52px;font-size:1.125rem}
  .fermata__n{max-width:none;font-size:1.125rem}
  .itin__aereo{display:none}
  .dopo-itin{display:grid}
  .dopo-itin .btn{width:100%}
  .righe{grid-template-columns:1fr}
  /* l'intestazione con un collegamento a destra: su telefono il collegamento va sotto il titolo, su una riga sola */
  .testa--fila{flex-wrap:wrap;gap:6px 20px}
  .testa--fila .legame{white-space:nowrap}
  .vg__carta{--m:104px;min-height:124px}
  .vg__m{padding-inline:4px}
  .vg__lente{width:56px;height:56px;margin-left:13px}
  .vg__c{padding:14px 10px 14px 13px}
  .vg__p b{font-size:.9375rem}
  .vg__p small+b{font-size:1rem}
  .salti{display:grid}
  .salti .btn{justify-content:space-between;width:100%}
  /* i filtri: una fila che si sfoglia col dito, dal margine della pagina */
  .filtri{flex-wrap:nowrap;margin-inline:calc(-1 * var(--px));padding:4px var(--px);overflow-x:auto;overscroll-behavior-x:contain;scroll-padding-inline:var(--px);scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .filtri::-webkit-scrollbar{display:none}
  .filtri::after{content:"";flex:none;width:1px}
  .paesi__barra{gap:12px}
  .paesi__barra .cerca{max-width:none}
  .viaggi__barra{display:grid;grid-template-columns:minmax(0,1fr)}
  .area__t{margin-bottom:14px}
  .testata .collage{width:calc(100% - 24px);margin-bottom:0}
  .mete .vista-globo{width:min(100% - 24px,400px)}
  .sede{position:relative;right:auto;bottom:auto;width:auto;margin:-38px 4px 0;transform:none}
  .sede__perno{left:calc(50% - 7px)}
  .sede::before{right:-10px;top:-20px;width:76px;height:76px}
  .recapiti--4,.recapiti--3{grid-template-columns:1fr}
  .carta-modulo{padding:20px 18px;border-radius:24px}
  .campi{grid-template-columns:1fr}
  .testata .nozze__vista{width:min(84%,400px);margin-bottom:6px}
  .tagliando{width:100%}
  .tagliando__alone{inset:-16% -5% -12%}
  .tagliando__in{--m:92px;min-height:210px}
  .tagliando__c{padding:24px 18px 24px 22px}
  .tagliando__m svg{width:52px;height:52px}
  .fratelli{grid-template-columns:1fr}
  .attesa__az{display:grid;justify-content:stretch;width:100%}
  .notizie{grid-template-columns:1fr}
  .perso .cifra__n{font-size:clamp(6.4rem,38vw,10rem)}
}