/* Beyond Us · homepage "il biglietto d'oro" (versione 2)
   La pagina è BIANCA, come il foglio su cui sta il logo. Navy e oro non sono sfondi: sono l'inchiostro e gli oggetti.
   Il marchio si vede da quattro cose: titoli grandi in maiuscolo navy, forme d'oro piene (dischi, pillole, la doppia linea),
   oggetti navy e oro con un peso (il MAPPAMONDO, il BIGLIETTO, il TIMBRO) e fotografie grandi e sature.
   Forme: cerchi (lente, mappamondo, timbri), biglietti (rettangoli stondati con tacche e perforazione), pillole (pulsanti).
   Movimento: solo transform, opacity e clip-path. Senza JavaScript o con "movimento ridotto" è una pagina statica e completa:
   gli stati iniziali delle animazioni valgono solo sotto html.mo, i comandi che richiedono lo script solo sotto html.js. */

:root{
  --bianco:#FFFFFF; --velo:#F7F4EF;
  --navy:#222E52; --navy-fondo:#182042; --navy-su:#2F3E70;
  --oro:#A38A69; --oro-chiaro:#CDB790; --oro-luce:#F0E3C6; --oro-scuro:#7B6443;
  --testo:#2F3961; --testo-2:#5A6385; --su-navy:#DCE1F0;
  /* la lamina d'oro: quella che scorre (bordo del biglietto) e quella ferma (dischi, timbri, pillole) */
  --lamina:linear-gradient(105deg,#8E744F 0%,#C9B28A 22%,#F0E3C6 38%,#B89B6E 52%,#8E744F 70%,#D6C19A 100%);
  --lamina-ferma:linear-gradient(150deg,#CDB790 0%,#B39A76 34%,#A38A69 62%,#8F7653 100%);
  --navy-oggetto:radial-gradient(130% 150% at 10% 0%,var(--navy-su) 0%,var(--navy) 48%,var(--navy-fondo) 100%);
  --titoli:"Jost","Futura","Century Gothic","Avenir Next",system-ui,sans-serif;
  --voce:"Cormorant Garamond","Iowan Old Style","Palatino Linotype",Georgia,serif;
  --ease:cubic-bezier(.2,.8,.2,1); --scatto:cubic-bezier(.2,1.4,.4,1);
  --sat:env(safe-area-inset-top,0px); --sab:env(safe-area-inset-bottom,0px);
  --hd:84px;                                   /* altezza dell'intestazione */
  --px:max(24px,6vw);                          /* margine laterale */
  --max:1320px;                                /* larghezza massima del contenuto */
  --sez:clamp(84px,10vw,150px);                /* respiro sopra e sotto ogni sezione */
  --arco:clamp(34px,7vw,104px);                /* freccia dei bordi curvi tra le sezioni */
  --ombra:0 24px 60px -24px rgba(34,46,82,.35),0 6px 16px -10px rgba(34,46,82,.16);
  --ombra-su:0 34px 70px -26px rgba(34,46,82,.5),0 10px 22px -12px rgba(34,46,82,.24);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;-webkit-tap-highlight-color:transparent;scroll-behavior:smooth;scroll-padding-top:20px}
html.rm{scroll-behavior:auto}
html.ha-menu{overflow:hidden}
body{margin:0;background:var(--bianco);color:var(--testo);font:400 1.0625rem/1.6 var(--titoli);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
h1,h2,h3,p,ul,ol,dl,dd,figure,fieldset{margin:0}
ul,ol{padding:0;list-style:none}
fieldset{padding:0;border:0;min-width:0}
img,svg,canvas{display:block;max-width:100%}
img{height:auto}
a{color:inherit;touch-action:manipulation}
button,input,select,textarea{font:inherit;color:inherit}
button{-webkit-appearance:none;appearance:none;touch-action:manipulation;cursor:pointer}
[hidden]{display:none!important}
[tabindex="-1"]:focus{outline:none}
:focus-visible{outline:3px solid var(--navy);outline-offset:3px;border-radius:10px}
.menu :focus-visible,.piede :focus-visible,.mini:focus-visible{outline-color:var(--oro-luce)}
main{position:relative;display:block;overflow-x:clip}
.wrap{width:min(100% - 2 * var(--px),var(--max));margin-inline:auto}
.simboli{position:absolute;width:0;height:0;overflow:hidden}
.sr{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.ico{width:1.25em;height:1.25em;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ico--p{fill:currentColor;stroke:none}
.salta{position:fixed;left:16px;top:12px;z-index:100;padding:12px 20px;border-radius:999px;background:var(--navy);color:#fff;font-weight:500;transform:translateY(-220%)}
.salta:focus{transform:none}

@keyframes gira{to{transform:rotate(360deg)}}
@keyframes lampo{0%,58%{transform:translateX(-130%) skewX(-16deg)}84%,100%{transform:translateX(330%) skewX(-16deg)}}
@keyframes riflesso{from{background-position:100% 0}to{background-position:0% 0}}
@keyframes ondeggia{0%,100%{transform:translateY(0) rotate(-.55deg)}50%{transform:translateY(-8px) rotate(.5deg)}}
@keyframes scorri-lamina{to{transform:translateX(33.3333%)}}
@keyframes galleggia{0%,100%{transform:translateY(0) rotate(0deg)}50%{transform:translateY(-5px) rotate(.5deg)}}

/* ---------- titoli: maiuscoli come il marchio, navy pieno, con presenza. La voce dell'agenzia è in corsivo ---------- */
.tit{font:500 clamp(2rem,4.6vw,4.2rem)/1.04 var(--titoli);letter-spacing:.05em;text-transform:uppercase;color:var(--navy);text-wrap:balance}
.voce{font:500 italic clamp(1.4rem,2.1vw,1.9rem)/1.3 var(--voce);color:var(--navy)}
.voce--grande{font-size:clamp(2rem,4.4vw,3.8rem);line-height:1.1}
.ln{display:block;overflow:hidden;padding-bottom:.12em;margin-bottom:-.12em}
.ln__i{display:block}
.testa{max-width:52rem;margin-bottom:clamp(34px,4.6vw,64px)}
.testa .voce{margin-top:clamp(10px,1.2vw,18px)}

/* ---------- pulsanti a pillola ---------- */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:56px;padding:0 28px;border-radius:999px;border:1.5px solid transparent;background:none;font:500 1.0625rem/1.1 var(--titoli);letter-spacing:.01em;text-decoration:none;white-space:nowrap;cursor:pointer;overflow:hidden;isolation:isolate;transition:background-color .2s,color .2s,border-color .2s}
.btn:active{transform:scale(.97)}
.btn .ico{transition:transform .3s var(--ease)}
.btn--sm{min-height:46px;padding:0 20px;font-size:1rem}
/* il pulsante principale: navy pieno. Un riflesso d'oro lo attraversa al passaggio del mouse, e ogni tanto da solo (btn--lampo) */
.btn--navy{background:var(--navy);color:#fff;box-shadow:0 16px 28px -16px rgba(34,46,82,.7)}
.btn--navy::after,.btn--oro::after{content:"";position:absolute;z-index:-1;top:-10%;bottom:-10%;left:0;width:36%;background:linear-gradient(90deg,rgba(240,227,198,0),rgba(240,227,198,.78),rgba(240,227,198,0));transform:translateX(-130%) skewX(-16deg)}
.btn--oro::after{background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.62),rgba(255,255,255,0))}
.btn--lampo::after{animation:lampo 5.2s var(--ease) 1.6s infinite}
.btn--bordo{border-color:var(--navy);background:var(--bianco);color:var(--navy)}
.btn--oro{background:var(--lamina-ferma);color:var(--navy-fondo);font-weight:600}
.legame{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-weight:500;text-decoration:none;color:var(--navy)}
.legame span{background:linear-gradient(var(--oro),var(--oro)) 0 100%/100% 2.5px no-repeat;padding-bottom:3px}
.legame .ico{width:1.05em;height:1.05em;transition:transform .3s var(--ease)}
@media (hover:hover){
  .btn--navy:hover::after,.btn--oro:hover::after{animation:none;transform:translateX(330%) skewX(-16deg);transition:transform .7s var(--ease)}
  .btn--navy:hover{background:var(--navy-fondo)}
  .btn--bordo:hover{background:var(--navy);color:#fff}
  .legame:hover .ico,a:hover>.legame .ico{transform:translateX(4px)}
  .btn:hover .ico--giu{transform:translateY(3px)}
}

/* ---------- la doppia linea del logo ---------- */
.doppia{display:grid;gap:3px;width:56px}
.doppia i{display:block;height:3px;border-radius:2px;background:currentColor}
/* ---------- puntini d'avanzamento del biglietto ---------- */
.punti{display:flex;gap:6px}
.punti i{display:block;width:10px;height:10px;border-radius:50%;border:1.5px solid currentColor;transition:background-color .25s,transform .35s var(--scatto)}
.punti i.is-on{background:currentColor;transform:scale(1.15)}

/* =====================================================================================================
   INTESTAZIONE: sempre bianca. Sull'hero è un velo, poi una barra piena con un'ombra morbida
   ===================================================================================================== */
.top{position:fixed;left:0;right:0;top:0;z-index:60;padding-top:var(--sat);color:var(--navy);transition:transform .45s var(--ease)}
.top::before,.top::after{content:"";position:absolute;inset:0;pointer-events:none}
.top::before{bottom:-18px;background:linear-gradient(180deg,rgba(255,255,255,.96) 0%,rgba(255,255,255,.86) 58%,rgba(255,255,255,0) 100%)}
.top::after{background:var(--bianco);box-shadow:0 14px 34px -22px rgba(34,46,82,.5);opacity:0;transition:opacity .3s}
.top.is-solida::after{opacity:1}
.top.is-nascosta{transform:translateY(-104%)}
.top__in{position:relative;z-index:1;display:flex;align-items:center;gap:clamp(14px,2vw,34px);height:var(--hd);width:min(100% - 2 * max(20px,3.4vw,env(safe-area-inset-left,0px),env(safe-area-inset-right,0px)),1500px);margin-inline:auto}
.marchio{position:relative;flex:none;display:block;width:clamp(132px,11.6vw,170px)}
.marchio::after{content:"";position:absolute;inset:-7px -4px}          /* il logo è basso: l'area che si tocca è più alta */
.marchio img{width:100%}
.nav{margin-left:auto}
.nav ul{display:flex;gap:clamp(14px,1.8vw,30px)}
.nav a{position:relative;display:inline-flex;align-items:center;min-height:44px;font:500 .98rem/1 var(--titoli);letter-spacing:.02em;text-decoration:none;white-space:nowrap;color:var(--navy)}
/* sotto la voce, la doppia linea d'oro */
.nav a::after{content:"";position:absolute;left:0;right:0;bottom:5px;height:7px;border-block:2.5px solid var(--oro);transform:scaleX(0);transform-origin:0 50%;transition:transform .35s var(--ease)}
.top__dx{display:flex;align-items:center;gap:clamp(8px,1vw,16px);margin-left:clamp(0px,1vw,16px)}
.top__tel{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-weight:500;font-size:.98rem;font-variant-numeric:tabular-nums;text-decoration:none;white-space:nowrap;color:var(--navy)}
.top__tel .ico{color:var(--oro-scuro)}
.top__cta{padding:0 7px 0 20px;box-shadow:0 12px 22px -14px rgba(34,46,82,.7)}
.top__cta-i{display:none}
/* il contatore del biglietto: 0/3 … 3/3, poi la spunta */
.conta{display:inline-grid;place-items:center;min-width:42px;height:32px;padding:0 9px;border-radius:999px;background:var(--lamina-ferma);color:var(--navy-fondo);font:600 .9rem/1 var(--titoli);font-variant-numeric:tabular-nums;letter-spacing:.02em}
.conta .ico{display:none;width:17px;height:17px;stroke-width:3.4;stroke-linecap:butt;stroke-linejoin:miter}
.conta.is-pronto .conta__n{display:none}
.conta.is-pronto .ico{display:block}
.top__menu{display:inline-flex;align-items:center;gap:10px;min-height:46px;padding:0 16px 0 18px;border-radius:999px;border:1.5px solid var(--navy);background:var(--bianco);color:var(--navy);font:500 .98rem/1 var(--titoli);transition:background-color .2s,color .2s}
@media (hover:hover){
  .nav a:hover::after{transform:scaleX(1)}
  .top__tel:hover{color:var(--oro-scuro)}
  .top__menu:hover{background:var(--navy);color:#fff}
}
@media (max-width:1279px){.nav{display:none}.top__dx{margin-left:auto}}
@media (max-width:1020px){.top__tel span{display:none}.top__tel{justify-content:center;width:46px;height:46px;border-radius:50%;border:1.5px solid var(--navy)}.top__tel .ico{color:var(--navy)}}

/* l'avanzamento della pagina: la doppia linea d'oro del logo, con l'aereo in punta */
.avanza{position:fixed;left:0;right:0;top:calc(var(--hd) + var(--sat));z-index:59;height:8px;pointer-events:none;transition:transform .45s var(--ease)}
.top.is-nascosta+.avanza{transform:translateY(calc(-1 * var(--hd)))}
.avanza__l{position:absolute;left:0;right:0;top:0;display:grid;gap:2.5px;transform:scaleX(0);transform-origin:0 50%}
.avanza__l i{display:block;height:3px;background:var(--oro)}
.avanza__a{position:absolute;left:-28px;top:-8px;width:24px;height:24px;fill:var(--navy);opacity:0;transition:opacity .3s}
.avanza.is-volo .avanza__a{opacity:1}
html:not(.js) .avanza,html:not(.js) .conta{display:none}
html:not(.js) .top__cta{padding-right:20px}

/* =====================================================================================================
   MENU a tutto schermo: l'unico momento navy della pagina. Si apre con un cerchio dal pulsante.
   Accanto alle voci, il contorno della lente del logo, enorme, che gira piano: sta dove non c'è testo
   ===================================================================================================== */
.menu{position:fixed;inset:0;z-index:80;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;background:radial-gradient(120% 90% at 78% 20%,var(--navy-su) 0%,var(--navy) 44%,var(--navy-fondo) 100%);color:#fff}
.menu__lente{--l:min(42vw,74vh);position:fixed;right:-5vw;top:calc(50% - var(--l) / 2 + 24px);width:var(--l);height:var(--l);max-width:none;fill:none;stroke:var(--oro-chiaro);stroke-width:.8;stroke-linejoin:round;opacity:.7;animation:gira 120s linear infinite;pointer-events:none}
.menu__in{position:relative;min-height:100%;display:grid;grid-template-rows:auto 1fr;width:min(100% - 2 * max(20px,3.4vw,env(safe-area-inset-left,0px),env(safe-area-inset-right,0px)),1500px);margin-inline:auto;padding:var(--sat) 0 calc(28px + var(--sab))}
.menu__top{display:flex;align-items:center;justify-content:space-between;height:var(--hd)}
.menu__top img{width:clamp(132px,11.6vw,170px)}
.menu .top__menu{border-color:rgba(220,225,240,.55);background:none;color:#fff}
.menu__corpo{display:grid;gap:clamp(16px,3.2vh,36px);align-content:center;max-width:min(60vw,860px);padding:clamp(8px,2vh,30px) max(0px,3vw) 0}
.menu__l{display:grid;gap:clamp(2px,.8vh,10px)}
.menu__l a{display:inline-flex;align-items:center;gap:.4em;min-height:48px;font:500 clamp(1.9rem,min(4.9vw,7.2vh),4.2rem)/1.08 var(--titoli);letter-spacing:.05em;text-transform:uppercase;text-decoration:none;transition:color .2s,transform .3s var(--ease)}
.menu__l .ico{width:.5em;height:.5em;color:var(--oro-chiaro);opacity:0;transform:translateX(-.4em);transition:opacity .25s,transform .3s var(--ease)}
.menu__lato{display:grid;gap:clamp(8px,1.6vh,16px);justify-items:start}
.menu__sec{position:relative;justify-self:stretch}
.menu__s,.menu__c{display:flex;flex-wrap:wrap;gap:0 clamp(18px,2.4vw,36px)}
.menu__s a,.menu__c a{display:inline-flex;align-items:center;gap:12px;min-height:44px;font-size:1.12rem;text-decoration:none;color:var(--su-navy)}
.menu__c{padding-top:clamp(8px,1.4vh,14px);border-top:2.5px solid var(--oro)}
.menu__c .ico{color:var(--oro-chiaro)}
@media (hover:hover){
  .menu .top__menu:hover{background:#fff;color:var(--navy)}
  .menu__l a:hover{color:var(--oro-luce);transform:translateX(.18em)}
  .menu__l a:hover .ico{opacity:1;transform:none}
  .menu__s a:hover,.menu__c a:hover{color:#fff}
}
@media (max-width:860px){
  .menu__corpo{align-content:start;max-width:none;gap:26px}
  .menu__l a{font-size:clamp(1.7rem,7.7vw,2.9rem)}
  .menu__lato{gap:14px}
  .menu__s,.menu__c{display:grid;gap:0}
  .menu__s a,.menu__c a{min-width:48px}
  .menu__c{justify-self:stretch}
  /* telefono: la lente sta a destra dei link secondari, che sono corti */
  .menu__lente{--l:clamp(104px,33vw,170px);position:absolute;right:-6px;top:calc(50% - var(--l) / 2)}
}
/* telefono: le voci partono dallo stesso margine del logo, il pulsante è largo quanto la pagina */
@media (max-width:700px){
  .menu__corpo{padding-inline:0}
  .menu__ris{width:100%}
  /* il menu è sempre un filo più alto dello schermo: così lo scorrimento resta suo e non passa alla pagina che sta sotto */
  .menu__in{min-height:calc(100% + 1px)}
}

/* =====================================================================================================
   1. HERO: il titolo navy con la lente d'oro al posto della O, il mappamondo, le rotte da Roma
   ===================================================================================================== */
.hero{position:relative;z-index:1;display:flex;align-items:center;min-height:max(100vh,700px);min-height:max(100svh,700px);padding:calc(var(--hd) + var(--sat) + 22px) 0 calc(var(--arco) + 30px);overflow:hidden;isolation:isolate;background:var(--bianco);color:var(--navy)}
.hero__in{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"txt vista" "rotte vista";column-gap:clamp(20px,3.4vw,64px);width:min(100% - 2 * var(--px),1480px);margin-inline:auto}
.hero__txt{grid-area:txt;align-self:end;position:relative;z-index:2;min-width:0}
.hero__h{font:500 clamp(2.8rem,min(8.6vw,15vh),8.4rem)/.94 var(--titoli);letter-spacing:.05em;text-transform:uppercase;color:var(--navy)}
.riga{display:block;width:max-content;padding-bottom:.04em;white-space:nowrap;transform-origin:0 62%}
/* la O di OLTRE: la lente del logo, grande quanto la lettera */
.lo{display:inline-block;width:.79em;height:.79em;margin:0 .07em 0 .01em;vertical-align:-.045em;fill:var(--oro)}
/* il riflesso che attraversa il titolo una volta sola, all'ingresso: le lettere restano navy */
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .mo .hero.is-partita:not(.is-aperta) .riga{background:linear-gradient(105deg,var(--navy) 0%,var(--navy) 41%,#6F7DB0 46%,var(--oro-luce) 50%,#6F7DB0 54%,var(--navy) 59%,var(--navy) 100%) 100% 0/320% 100% no-repeat;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:riflesso 1.05s cubic-bezier(.3,0,.2,1) .42s 1 both}
  .mo .hero.is-partita:not(.is-aperta) .riga+.riga{animation-delay:.56s}
}
/* la doppia linea d'oro del logo: si disegna sotto il titolo e arriva fino al mappamondo */
.hero__linea{display:grid;gap:clamp(4px,.42vw,6px);width:100%;margin-top:clamp(14px,1.7vw,26px);transform-origin:0 50%}
.hero__linea i{display:block;height:clamp(5px,.5vw,7.5px);background:var(--oro)}
.hero__lede{max-width:25em;margin-top:clamp(16px,1.9vw,28px);text-wrap:balance}
.hero__cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(22px,2.5vw,34px)}
/* le nove rotte: miniature tonde per saltare a una destinazione */
.rotte{grid-area:rotte;align-self:start;position:relative;z-index:2;margin-top:clamp(24px,3vw,42px)}
.rotte__t{margin-bottom:10px;font-weight:500;font-size:1rem;color:var(--testo-2)}
.rotte__l{display:flex;flex-wrap:wrap;gap:11px}
.rotta{position:relative;display:block;flex:none;width:50px;height:50px;padding:0;border:0;border-radius:50%;background:var(--velo);box-shadow:0 0 0 2px var(--bianco),0 8px 16px -6px rgba(34,46,82,.5);transition:transform .35s var(--scatto)}
.rotta img{width:100%;height:100%;border-radius:50%;object-fit:cover}
.rotta.is-on{transform:scale(1.18);box-shadow:0 0 0 2.5px var(--bianco),0 0 0 6px var(--oro),0 12px 20px -6px rgba(34,46,82,.55)}
@media (hover:hover){.rotta:hover{transform:scale(1.12)}.rotta.is-on:hover{transform:scale(1.18)}}

/* il mappamondo: l'alone chiaro, il disco d'oro che sporge, il mare color perla (CSS), i punti e le rotte (canvas), la lente del logo da cui nasce */
.hero__vista{grid-area:vista;align-self:center;position:relative;z-index:1;width:min(48vw,78vh,760px);width:min(48vw,78svh,760px);margin-right:max(-3vw,-44px)}
.globo{position:relative;width:100%;aspect-ratio:1}
.globo__alone{position:absolute;inset:-15%;border-radius:50%;background:radial-gradient(closest-side,rgba(240,227,198,.95) 0%,rgba(240,227,198,.74) 64%,rgba(240,227,198,.3) 82%,rgba(240,227,198,0) 100%);pointer-events:none}
.globo__scintille{position:absolute;left:-38%;top:-38%;width:176%;height:176%;max-width:none;pointer-events:none}
.globo__anello{position:absolute;left:-7%;top:-7%;width:114%;height:114%;max-width:none;fill:none;stroke:var(--oro);stroke-width:.5;stroke-dasharray:.01 2.6;stroke-linecap:round;animation:gira 150s linear infinite;pointer-events:none}
.globo__oro{position:absolute;inset:0;border-radius:50%;background:var(--lamina-ferma);box-shadow:0 50px 80px -36px rgba(34,46,82,.55);transform:translate(3.3%,4%)}
.globo__mare{position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle at 30% 24%,#FFFFFF 0%,#FCF9F4 30%,#F2ECE1 64%,#E4DAC8 100%);box-shadow:0 0 0 2px var(--oro),inset -34px -46px 110px rgba(34,46,82,.15)}
.globo__lente{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.globo__tela{position:absolute;left:-16%;top:-16%;width:132%;height:132%;max-width:none;pointer-events:none}
.globo__presa{position:absolute;inset:0;border-radius:50%;cursor:grab;touch-action:pan-y}
.globo__presa.is-presa{cursor:grabbing}
html.js .globo__lente{opacity:0}
html:not(.js) .globo__tela,html:not(.js) .globo__presa,html:not(.js) .globo__mare,html:not(.js) .globo__oro,html:not(.js) .rotte,html:not(.js) .globo__scintille{display:none}
.hero.is-ferma .globo__anello,.hero.is-ferma .btn--lampo::after{animation-play-state:paused}

/* la carta della destinazione: bianca, inclinata, con un disco d'oro che sporge da dietro un angolo. Arriva quando la rotta atterra, legata al segnaposto da un filo d'oro */
.meta{position:absolute;z-index:3;right:-1%;bottom:1%;width:clamp(214px,43%,318px);transform:rotate(3deg);transform-origin:26px 6px;color:var(--navy);container-type:inline-size}
.meta__disco{position:absolute;right:-32px;top:-34px;width:128px;height:128px;border-radius:50%;background:var(--lamina-ferma)}
.meta__carta{position:relative;padding:8px 8px 10px;border-radius:20px;background:var(--bianco);box-shadow:var(--ombra-su)}
/* finché resta in vista, la carta galleggia appena */
.mo .hero:not(.is-ferma) .meta__carta,.mo .hero:not(.is-ferma) .meta__disco{animation:galleggia 5.5s ease-in-out infinite}
.mo .hero:not(.is-ferma) .meta__disco{animation-duration:7s;animation-direction:reverse}
.meta:hover .meta__carta,.meta:focus-within .meta__carta{animation-play-state:paused!important}
.meta__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)}
/* quando la destinazione cade in basso a destra, la carta passa a sinistra */
.meta.is-sx{right:auto;left:-1%;transform:rotate(-3deg);transform-origin:calc(100% - 26px) 6px}
.meta.is-sx .meta__perno{left:auto;right:19px}
.meta.is-sx .meta__disco{right:auto;left:-32px}
.meta__foto{aspect-ratio:4/3;border-radius:14px;overflow:hidden;background:var(--velo)}
.meta__foto img{width:100%;height:100%;object-fit:cover}
.meta__txt{padding:13px 10px 2px}
/* il nome si adatta alla larghezza della carta (unità cqw), così anche "Polinesia francese" sta su una riga */
.meta__nome{font:500 1.3rem/1.1 var(--titoli);font-size:clamp(.9rem,6.4cqw,1.3rem);letter-spacing:.04em;text-transform:uppercase;color:var(--navy)}
.meta__tratta{display:flex;align-items:center;flex-wrap:wrap;gap:4px 8px;margin-top:7px;font-size:1rem;font-size:clamp(.9rem,5.2cqw,1rem);line-height:1.25;color:var(--testo)}
.meta__tratta .ico{width:15px;height:15px;color:var(--oro)}
.meta__km{font-size:1rem;line-height:1.35;color:var(--testo-2)}
.meta__km b{font-weight:600;font-variant-numeric:tabular-nums;color:var(--navy)}
.meta__azioni{display:grid;justify-items:center;gap:2px;padding:12px 2px 0}
.meta__azioni .btn{width:100%;min-height:46px;padding:0 16px 0 12px;font-size:1rem;gap:7px}
.meta__vai{display:inline-flex;text-decoration:none}
html:not(.js) .meta{display:none}

/* ---- stati iniziali dell'ingresso (solo con Motion, e solo finché la sequenza non è partita) ---- */
.mo .hero:not(.is-partita) .riga,.mo .hero:not(.is-partita) .hero__linea,.mo .hero:not(.is-partita) .hero__lede,.mo .hero:not(.is-partita) .hero__cta .btn,.mo .hero:not(.is-partita) .rotte__t,.mo .hero:not(.is-partita) .rotta,
.mo .hero:not(.is-partita) .globo__mare,.mo .hero:not(.is-partita) .globo__oro,.mo .hero:not(.is-partita) .globo__alone,.mo .hero:not(.is-partita) .globo__anello,.mo body:not(.is-partita) .top__in{opacity:0}

/* computer con lo schermo basso (portatili): l'hero si stringe per stare intero nella prima schermata */
@media (min-width:1024px) and (max-height:780px){
  .hero{padding-top:calc(var(--hd) + var(--sat) + 6px);padding-bottom:calc(var(--arco) + 8px)}
  .hero__h{font-size:clamp(2.8rem,min(8.6vw,13.5vh),8.4rem)}
  .hero__linea{margin-top:12px}
  .hero__lede{margin-top:14px;font-size:1.4rem}
  .hero__cta{margin-top:18px}
  .rotte{margin-top:18px}
  .rotta{width:44px;height:44px}
  .meta__foto{aspect-ratio:16/9}
  .meta__txt{padding-top:10px}
  .meta__azioni{padding-top:8px}
}
/* computer stretti: le nove miniature restano su una riga */
@media (min-width:1024px) and (max-width:1279px){
  .rotte__l{flex-wrap:nowrap;gap:7px}
  .rotta{width:42px;height:42px}
  .rotta::after{content:"";position:absolute;inset:-3px;border-radius:50%}
}
@media (max-width:1023px){
  /* telefono e tablet: il testo sopra; sotto, al centro, il mappamondo intero, grande quanto lo schermo lascia sotto il testo.
     La carta della destinazione si appoggia sul terzo in basso del mappamondo; le miniature delle rotte stanno sotto */
  .hero{display:block;min-height:0;padding:calc(var(--hd) + var(--sat) + 8px) 0 calc(var(--arco) + 32px)}
  .hero__in{display:flex;flex-direction:column;width:auto}
  .hero__txt{align-self:stretch;padding-inline:var(--px)}
  .hero__h{font-size:clamp(3.4rem,13.4vw,7rem)}
  .riga{display:inline-block}                  /* il titolo sta su una riga sola */
  .hero__lede{max-width:27em;line-height:1.26}
  .hero__vista{--alto:100vh;--d:clamp(240px,min(100vw - 76px,81vw,var(--alto) - 378px),560px);order:2;align-self:center;width:var(--d);margin:28px 0 0;padding-bottom:20px}
  @supports (height:100svh){.hero__vista{--alto:100svh}}
  /* alone, anello, scintille e la tela delle rotte restano dentro lo schermo */
  .globo__tela{left:calc(50% - min(66%,50vw));width:min(132%,100vw)}
  .globo__alone{inset:-11%}
  .globo__anello{left:-5.5%;top:-5.5%;width:111%;height:111%}
  .globo__scintille{left:calc(50% - 50vw);top:-12%;width:100vw;height:124%}
  .globo__oro{box-shadow:0 34px 50px -30px rgba(34,46,82,.5)}
  /* le miniature: una fila che scorre col dito, con la sua didascalia */
  .rotte{order:3;align-self:stretch;margin:24px 0 0;z-index:4}
  .rotte__t{margin:0 var(--px)}
  .rotte__l{flex-wrap:nowrap;gap:14px;padding:13px var(--px) 15px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .rotte__l::-webkit-scrollbar{display:none}
  .rotte__l::after{content:"";flex:none;width:1px}
  .rotta{width:46px;height:46px;scroll-snap-align:center}
  /* senza JavaScript: la lente del logo al posto del mappamondo */
  html:not(.js) .hero__vista{--d:min(64vw,400px);padding-bottom:0;margin-bottom:6px}
  /* la carta: a sinistra la foto, che è anche il link "Scopri"; a destra nome, tratta, chilometri e il pulsante */
  .meta{--lc:min(100vw - 2 * var(--px),440px);--foto:104px;right:auto;left:calc(50% - var(--lc) / 2);bottom:0;width:var(--lc);transform:none;transform-origin:50% 0;container-type:normal}
  .meta__disco{right:-10px;top:-20px;width:76px;height:76px}
  .meta__carta{display:grid;grid-template-columns:var(--foto) minmax(0,1fr);grid-template-areas:"foto txt" "foto azioni";gap:0 12px;padding:8px}
  .meta__perno{left:calc(50% - 7px)}
  .meta__foto{grid-area:foto;aspect-ratio:auto;height:100%;min-height:var(--foto)}
  .meta__txt{grid-area:txt;padding:4px 4px 0 0}
  .meta__nome{font-size:clamp(1rem,4.6vw,1.2rem)}
  .meta.is-lungo .meta__nome{font-size:clamp(.9375rem,4vw,1.2rem);letter-spacing:.01em}
  .meta__tratta{margin-top:3px;gap:2px 6px;font-size:.9375rem}
  .meta__km{font-size:.9375rem;white-space:nowrap}
  .meta__azioni{display:contents}
  .meta__azioni .btn{grid-area:azioni;align-self:end;width:auto;min-height:44px;margin:8px 4px 2px 0;padding:0 8px;font-size:clamp(.9375rem,4vw,1rem)}
  .meta__azioni .btn .ico{display:none}
  .meta__vai{grid-area:foto;align-self:stretch;justify-self:stretch;z-index:1;display:flex;align-items:flex-end;padding:7px}
  .meta__vai .legame{min-height:34px;padding:0 11px 0 13px;border-radius:999px;background:var(--bianco);box-shadow:0 6px 14px -6px rgba(24,32,66,.7);font-size:.9375rem}
  .meta__vai .legame span{background:none;padding:0}
}
@media (max-width:700px){
  /* su telefono le scritte sugli oggetti d'oro sono piccole: la lamina ferma finisce un tono più chiara, così il navy ci si legge sempre bene */
  :root{--hd:64px;--px:max(20px,env(safe-area-inset-left,0px),env(safe-area-inset-right,0px));--sez:68px;
    --lamina-ferma:linear-gradient(150deg,#CDB790 0%,#B9A07B 38%,#AC9370 68%,#A08764 100%)}
  /* intestazione del telefono: logo, biglietto con il contatore, menu. Stesso margine del contenuto */
  .top__in{gap:8px;width:calc(100% - 2 * var(--px))}
  .top__tel{display:none}
  .top__cta{padding:0 6px 0 13px;gap:7px}
  .top__cta-t{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  .top__cta-i{display:block;width:21px;height:21px}
  .top__menu{width:46px;padding:0;justify-content:center}
  .top__menu span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  html:not(.js) .top::after{opacity:1}      /* senza script l'intestazione non si ritira: almeno è una barra piena, il testo non le scorre dietro in trasparenza */
  /* la prima schermata: titolo su una riga larga quanto la pagina, la doppia linea, la frase, il pulsante principale e il mappamondo.
     Testo e pulsanti diventano voci dirette della colonna, così "Esplora le destinazioni" può scendere sotto le miniature */
  .hero{padding-top:calc(var(--hd) + var(--sat) + 6px);padding-bottom:calc(var(--arco) + 50px)}
  .hero__txt,.hero__cta{display:contents}
  .hero__h,.hero__linea,.hero__lede,.hero__cta .btn{margin-inline:var(--px)}
  .hero__h{font-size:calc((100vw - 2 * var(--px)) / 5.53);white-space:nowrap}
  .hero__linea{width:auto;margin-top:12px}
  .hero__lede{margin-top:14px}
  .hero__cta .btn{min-height:54px;margin-top:18px}
  .hero__cta .btn--bordo{order:4;margin-top:18px}
  .hero__vista{margin-top:26px}
  /* la carta, compatta: il nome, i chilometri e il pulsante (la riga "Roma → …" la dice già il mappamondo) */
  .meta{--foto:96px}
  .meta__foto{min-height:84px}
  .meta__tratta{display:none}
  .meta__km{margin-top:3px}
  .meta__azioni .btn{margin-top:7px}
}

/* =====================================================================================================
   2. I NOMI: le destinazioni scorrono su due righe in versi opposti. Una riga piena, una in solo contorno;
   tra un nome e l'altro la lente d'oro del logo, che gira piano
   ===================================================================================================== */
.nastro{position:relative;z-index:2;margin-top:calc(-1 * var(--arco));padding:calc(var(--arco) * .5 + clamp(14px,2vw,30px)) 0 calc(var(--arco) + clamp(30px,4vw,60px));border-radius:50% 50% 0 0/var(--arco) var(--arco) 0 0;overflow:hidden;background:var(--bianco);box-shadow:0 -22px 40px -30px rgba(34,46,82,.34)}
.nastro__r{display:flex;overflow:hidden}
.nastro__f{display:flex;flex:none;align-items:center}
.nastro__f li{display:flex;flex:none;align-items:center;font:500 clamp(2.7rem,7.2vw,6.6rem)/1.12 var(--titoli);letter-spacing:.04em;text-transform:uppercase}
.nastro__f a{position:relative;padding:.04em .3em;font:inherit;letter-spacing:inherit;text-decoration:none;white-space:nowrap;color:var(--navy);transition:color .2s,-webkit-text-stroke-color .2s}
.nastro__s{flex:none;width:.7em;height:.7em;fill:var(--oro);animation:gira 18s linear infinite}
.nastro__r--filo .nastro__s{animation-direction:reverse}
/* la riga in solo contorno: il tratto è doppio e il riempimento bianco ne copre la metà interna, così il contorno resta pulito */
.nastro__r--filo a{color:var(--bianco);-webkit-text-stroke:3px var(--navy);paint-order:stroke fill}
@supports not ((-webkit-text-stroke:1px #000) and (paint-order:stroke fill)){.nastro__r--filo a{color:var(--navy);-webkit-text-stroke:0;font-weight:300}}
.lite .nastro__f a::after{content:"";position:absolute;inset:-7px 0}      /* col dito, un bersaglio più alto della riga */
@media (hover:hover){.nastro__f a:hover{color:var(--oro)}.nastro__r--filo a:hover{color:var(--oro);-webkit-text-stroke-color:var(--oro)}}
.nastro.is-ferma .nastro__s,.lite .nastro__s{animation:none}
/* senza script o con movimento ridotto: una riga che va a capo */
html:not(.js) .nastro__f,.rm .nastro__f{flex:1;flex-wrap:wrap;justify-content:center;padding-inline:var(--px)}
html:not(.js) .nastro__f li,.rm .nastro__f li{font-size:clamp(1.7rem,4vw,3.2rem)}
html:not(.js) .nastro__r--filo a,.rm .nastro__r--filo a{-webkit-text-stroke-width:2.2px}

/* =====================================================================================================
   SEZIONI: sempre bianche (o con il velo caldo), con il bordo superiore ad arco che sale sulla sezione precedente
   ===================================================================================================== */
.sez{position:relative;z-index:2;margin-top:calc(-1 * var(--arco));padding:calc(var(--sez) + var(--arco) * .35) 0 calc(var(--sez) + var(--arco));border-radius:50% 50% 0 0/var(--arco) var(--arco) 0 0;background:var(--bianco)}
.sez--velo{background:var(--velo)}
/* due sezioni bianche di seguito: nessun arco tra loro */
.sez--piatta{margin-top:calc(-1 * var(--arco));padding-top:0;border-radius:0;background:none}
/* ---------- il velo fotografico: una foto del sito, virata nei colori del marchio e chiarissima, dietro una sezione ----------
   Dà un'atmosfera al bianco senza toccare testi e oggetti. Sta sotto il contenuto (z-index -1 dentro la sezione, che ha già il
   suo z-index), non riceve clic e sfuma nel fondo con una maschera ellittica: nessun bordo dritto. È un'immagine ferma; su
   computer, con il movimento pieno, comune.js la fa scorrere appena più piano della pagina (solo transform).
   --vo: quanto si vede la foto · --vc, --vr: centro e raggi dell'ellisse in cui si vede piena · --vp: il punto della foto da tenere */
.velo-f{position:absolute;inset:0;z-index:-1;overflow:hidden;border-radius:inherit;pointer-events:none;
  --vm:radial-gradient(var(--vr,70% 74%) at var(--vc,64% 46%),#000 0%,rgba(0,0,0,.84) 40%,rgba(0,0,0,.3) 74%,transparent 100%);
  -webkit-mask-image:var(--vm);mask-image:var(--vm)}
.velo-f img{position:absolute;left:0;top:-5%;width:100%;height:110%;max-width:none;object-fit:cover;object-position:var(--vp,50% 50%);opacity:var(--vo,.5)}
/* il punto di ogni foto che deve restare dentro lo schermo stretto del telefono */
.velo-f[data-velo="savana"]{--vp:66% 50%}.velo-f[data-velo="spiaggia"]{--vp:32% 40%}.velo-f[data-velo="laguna"]{--vp:58% 45%}
.velo-f[data-velo="skyline"]{--vp:44% 50%}.velo-f[data-velo="deserto"]{--vp:50% 72%}.velo-f[data-velo="montagne"]{--vp:38% 40%}
.velo-f[data-velo="palme"]{--vp:66% 45%}.velo-f[data-velo="scogliera"]{--vp:72% 62%}.velo-f[data-velo="capo"]{--vp:56% 34%}
.velo-f[data-velo="atollo"]{--vp:48% 52%}
/* la chiusura "Parliamone": il mare, largo e basso */
.velo-f--invito{--vr:86% 66%;--vc:42% 66%;--vo:.38}
/* pagina non trovata: il deserto resta in basso, sotto le tre strade; le cifre d'oro stanno sul bianco */
.pg--perso .velo-f--testata{--vr:90% 58%;--vc:50% 100%;--vp:50% 40%}
/* home: dietro il titolo dell'apertura (il mappamondo, a destra, resta sul bianco) e dietro i 60 nomi, larga quanto lo schermo */
.velo-f--hero{--vr:58% 70%;--vc:26% 40%;--vo:.42}
.tutte{position:relative;isolation:isolate}
/* qui i bordi alto e basso cadono dentro la sezione: l'ellisse arriva a zero prima di toccarli */
.velo-f--tutte{inset:-22% auto -20% calc(50% - 50vw);width:100vw;--vr:62% 49%;--vc:50% 50%}
@media (max-width:1023px){
  .velo-f--hero{bottom:auto;height:min(100%,calc(60vw + 300px));--vr:120% 53%;--vc:56% 46%;--vo:.44}
  .velo-f--tutte{--vr:120% 49%;--vc:50% 50%}
  .velo-f img{top:0;height:100%}
  /* telefono e tablet: la foto è una fascia in cima alla sezione (in fondo, nella chiusura) e sfuma verso il contenuto;
     il bordo della fascia che cade dentro la sezione è fuori dall'ellisse, quindi del tutto trasparente */
  .velo-f--testata{bottom:auto;height:min(100%,calc(60vw + 300px));--vr:120% 53%;--vc:58% 46%;--vo:.44}
  /* sullo schermo stretto le palme e gli sposi resterebbero proprio dietro le righe piccole: si guarda la spiaggia e l'orizzonte */
  .velo-f[data-velo="spiaggia"]{--vp:62% 40%}.velo-f[data-velo="scogliera"]{--vp:16% 62%}
  .velo-f--invito{top:auto;height:min(100%,calc(56vw + 260px));--vr:130% 61%;--vc:50% 62%}
  .pg--perso .velo-f--testata{top:auto;bottom:0;--vr:130% 60%;--vc:50% 100%}
}
/* comparse all'ingresso: nascoste solo quando il gruppo è armato (vicino allo schermo) e finché non ha suonato */
.mo [data-seq].is-armed:not(.is-in) .ln__i{transform:translateY(110%)}
.mo [data-seq].is-armed:not(.is-in) [data-a="up"],.mo [data-seq].is-armed:not(.is-in) [data-a="carte"]>*,.mo [data-seq].is-armed:not(.is-in) [data-a="cala"],.mo [data-seq].is-armed:not(.is-in) [data-a="figli"]>*,
.mo [data-seq].is-armed:not(.is-in) [data-a="pop"],.mo [data-seq].is-armed:not(.is-in) [data-a="spunta"],.mo [data-seq].is-armed:not(.is-in) [data-a="mazzo"] .luogo__in,.mo [data-seq].is-armed:not(.is-in) [data-a="offerte"]>*{opacity:0}
.mo [data-seq].is-armed:not(.is-in) [data-a="cerchio"]{clip-path:circle(0% at 50% 50%)}
.mo [data-seq].is-armed:not(.is-in) [data-a="linea"]{transform:scaleX(0)}
.mo [data-seq].is-armed:not(.is-in) [data-a="spunta"] path,.mo [data-seq].is-armed:not(.is-in) .anello circle{stroke-dashoffset:1}
.mo [data-seq].is-armed:not(.is-in) .rullo__c{transform:none}

/* =====================================================================================================
   3. COMPONI IL TUO VIAGGIO: tre passi a sinistra, il biglietto che si stampa a destra
   ===================================================================================================== */
/* a sinistra il titolo e i tre passi, a destra il biglietto (accanto al titolo) e l'invio */
.componi__g{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:clamp(26px,3.2vw,54px);align-items:start}
.componi__sx{min-width:0}
.componi .testa{margin-bottom:clamp(28px,3.4vw,48px)}
.passi{display:grid;grid-template-columns:minmax(0,1fr);gap:16px}
.passo{border-radius:28px;background:var(--bianco);box-shadow:var(--ombra)}
.passo__t{font:inherit}
.passo__b{position:relative;display:flex;align-items:center;gap:16px;width:100%;min-height:78px;padding:14px 22px 14px 16px;border:0;border-radius:28px;background:none;text-align:left;color:var(--navy)}
/* il numero del passo: un disco d'oro. A risposta data diventa navy, con la spunta del logo che si disegna */
.passo__n{position:relative;display:grid;place-items:center;flex:none;width:50px;height:50px;border-radius:50%;background:var(--lamina-ferma);color:var(--navy-fondo);font:600 1.3rem/1 var(--titoli);font-variant-numeric:tabular-nums;isolation:isolate}
.passo__n::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:50%;background:var(--navy);transform:scale(0);transition:transform .4s var(--scatto)}
.passo.is-fatto .passo__n::before{transform:scale(1)}
.passo__n .ico{position:absolute;width:24px;height:24px;color:var(--oro-luce);stroke-width:5.5;stroke-linecap:butt;stroke-linejoin:miter;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset .35s var(--ease) .12s}
.passo__n b{font-weight:600;transition:opacity .2s,transform .3s var(--ease)}
.passo.is-fatto .passo__n b{opacity:0;transform:scale(.4)}
.passo.is-fatto .passo__n .ico{stroke-dashoffset:0}
.passo__q{flex:1;min-width:0;font:500 clamp(1.3rem,1.7vw,1.6rem)/1.15 var(--titoli);letter-spacing:.01em}
/* la risposta, riassunta nell'intestazione del passo: un'etichetta d'oro */
.passo__v{flex:none;max-width:44%;padding:7px 15px;border-radius:999px;background:var(--lamina-ferma);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600;font-size:1rem;line-height:1.3;color:var(--navy-fondo)}
.passo__v:empty{display:none}
.passo__f{flex:none;width:22px;height:22px;color:var(--navy);transition:transform .35s var(--ease)}
.passo.is-aperto .passo__f{transform:rotate(180deg)}
.passo__corpo{padding:4px 22px 24px}
html.js .passo:not(.is-aperto) .passo__corpo{display:none}
html:not(.js) .passo__b{pointer-events:none}
html:not(.js) .passo__f{display:none}

/* una scelta: tessera bianca con il bordo navy e la foto tonda, oppure pillola.
   Scelta = si riempie di navy dal punto toccato, il testo diventa bianco e compare la spunta d'oro */
.scelte{display:grid;gap:12px}
.scelte--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.scelte--5{grid-template-columns:repeat(5,minmax(0,1fr))}
.scelte--mesi{grid-template-columns:repeat(6,minmax(0,1fr));gap:10px}
.scelta{position:relative;display:flex;flex-direction:column;align-items:center;gap:12px;padding:16px 8px 14px;border-radius:22px;background:var(--bianco);box-shadow:inset 0 0 0 1.5px var(--navy);text-align:center;cursor:pointer;isolation:isolate;-webkit-user-select:none;user-select:none;transition:transform .3s var(--scatto)}
.scelta input{position:absolute;inset:0;z-index:2;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.scelta__pieno{position:absolute;inset:0;z-index:-1;border-radius:inherit;background:linear-gradient(160deg,var(--navy-su) 0%,var(--navy) 50%,var(--navy-fondo) 100%);opacity:0;transition:opacity .25s}
.scelta input:checked~.scelta__pieno{opacity:1;transition:none}
.scelta__foto{display:block;width:min(100%,112px);aspect-ratio:1;border-radius:50%;overflow:hidden;background:var(--velo);box-shadow:0 0 0 3px var(--bianco),0 0 0 5.5px var(--oro);pointer-events:none}
.scelta__foto img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)}
.scelte--5 .scelta__foto{width:min(100%,84px)}
.scelta__n{font-weight:500;font-size:1rem;line-height:1.2;color:var(--navy);text-wrap:balance;pointer-events:none;transition:color .15s}
.scelte--4 .scelta{padding-inline:4px}
.scelte--4 .scelta__n{font-size:clamp(.9rem,1.05vw,1rem)}
.scelta input:checked~.scelta__n{color:#fff}
.scelta__ok{position:absolute;right:-5px;top:-6px;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--lamina-ferma);box-shadow:0 0 0 3px var(--bianco);transform:scale(0);transition:transform .32s var(--scatto);pointer-events:none}
.scelta__ok svg{width:15px;height:15px;fill:none;stroke:var(--navy-fondo);stroke-width:7.5;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset .3s var(--ease) .12s}
.scelta input:checked~.scelta__ok{transform:scale(1)}
.scelta input:checked~.scelta__ok svg{stroke-dashoffset:0}
.scelta:has(input:focus-visible){outline:3px solid var(--oro-scuro);outline-offset:3px}
.scelta--pillola{flex-direction:row;justify-content:center;min-height:50px;padding:0 14px;border-radius:999px}
.scelta--pillola .scelta__ok{right:-5px;top:-8px;width:24px;height:24px;box-shadow:0 0 0 2.5px var(--bianco)}
.scelta--pillola .scelta__ok svg{width:12px;height:12px}
.scelta--larga{grid-column:span 2}
.scelta--extra{margin-top:12px;justify-content:flex-start;padding:0 20px}
@media (hover:hover){
  .scelta:hover{transform:translateY(-3px);box-shadow:inset 0 0 0 2.5px var(--navy),0 14px 22px -14px rgba(34,46,82,.55)}
  .scelta:hover .scelta__foto img{transform:scale(1.1)}
}
.altra{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:12px;margin-top:16px;align-items:end}
.altra__e{display:block;margin-bottom:6px;font-weight:500;color:var(--navy)}
.altra select{width:100%;min-height:50px;padding:0 44px 0 18px;border:1.5px solid var(--navy);border-radius:999px;background:var(--bianco) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23222E52' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9.5l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center/20px;font-size:1rem;color:var(--navy);-webkit-appearance:none;appearance:none;cursor:pointer;transition:background-color .25s,color .25s}
.altra select.is-scelta{background-color:var(--navy);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F0E3C6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9.5l6 6 6-6'/%3E%3C/svg%3E");color:#fff;font-weight:500}
.altra select.is-scelta option{background:var(--bianco);color:var(--navy)}
/* quanti viaggiatori: meno, numero, più */
.quanti{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:18px;padding-top:18px;border-top:2.5px solid var(--oro-luce)}
.quanti label{font-weight:500;color:var(--navy)}
.quanti__c{display:flex;align-items:center;gap:8px}
.quanti__b{display:grid;place-items:center;width:48px;height:48px;padding:0;border:1.5px solid var(--navy);border-radius:50%;background:var(--bianco);color:var(--navy);transition:background-color .2s,color .2s,transform .2s var(--ease)}
.quanti__b:active{transform:scale(.9)}
.quanti__b:disabled{opacity:.3;cursor:default}
.quanti__b .ico{width:20px;height:20px;stroke-width:2.2}
.quanti input{width:58px;height:48px;padding:0;border:0;background:none;text-align:center;font:500 1.7rem/1 var(--titoli);font-variant-numeric:tabular-nums;color:var(--navy);-moz-appearance:textfield;appearance:textfield}
.quanti input::-webkit-outer-spin-button,.quanti input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
html:not(.js) .quanti__b{display:none}
html:not(.js) .quanti input{width:84px;border:1.5px solid var(--navy);border-radius:14px;-moz-appearance:auto;appearance:auto}
@media (hover:hover){.quanti__b:not(:disabled):hover{background:var(--navy);color:#fff}}

/* ---- il biglietto: L'oggetto navy e oro della pagina. Carta navy, bordo a lamina che scorre, due tacche, perforazione, matrice d'oro.
   Le tacche sono vere (maschere): dietro si vede l'alone chiaro su cui il biglietto è appoggiato ---- */
.cassa{position:sticky;top:calc(var(--hd) + 18px);padding-top:10px}
.bigl{position:relative;--matrice:124px;--tacca:13px;--filo:2.5px}
.bigl__alone{position:absolute;inset:-42% -15% -36%;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}
.bigl__piano{position:relative}
.mo .componi:not(.is-ferma) .bigl__onda{animation:ondeggia 6.5s ease-in-out infinite}
.bigl__urto{position:relative;isolation:isolate}
/* l'ombra del biglietto: un'ellisse morbida sotto (la maschera delle tacche taglierebbe un box-shadow) */
.bigl__urto::before{content:"";position:absolute;z-index:-1;left:3%;right:3%;top:46%;bottom:-13%;border-radius:50%;background:radial-gradient(closest-side,rgba(24,32,66,.58) 0%,rgba(24,32,66,.3) 50%,rgba(24,32,66,0) 100%)}
.bigl__in{position:relative;padding:var(--filo);border-radius:26px;overflow:hidden;background:#B89B6E;
  -webkit-mask:radial-gradient(circle var(--tacca) at calc(100% - var(--matrice) - var(--filo)) 0,#0000 96%,#000) top/100% 51% no-repeat,radial-gradient(circle var(--tacca) at calc(100% - var(--matrice) - var(--filo)) 100%,#0000 96%,#000) bottom/100% 51% no-repeat;
  mask:radial-gradient(circle var(--tacca) at calc(100% - var(--matrice) - var(--filo)) 0,#0000 96%,#000) top/100% 51% no-repeat,radial-gradient(circle var(--tacca) at calc(100% - var(--matrice) - var(--filo)) 100%,#0000 96%,#000) bottom/100% 51% no-repeat}
/* il bordo: una lamina tre volte più larga del biglietto, che scorre di un periodo esatto */
.bigl__bordo{position:absolute;top:0;bottom:0;left:-200%;width:300%;background:repeating-linear-gradient(90deg,#8E744F 0%,#C9B28A 7%,#F0E3C6 12%,#B89B6E 18%,#8E744F 24%,#D6C19A 29%,#8E744F 33.3333%)}
.mo .componi:not(.is-ferma) .bigl__bordo{animation:scorri-lamina 6s linear infinite}
.bigl__carta{position:relative;display:grid;grid-template-columns:minmax(0,1fr) var(--matrice);border-radius:23.5px;overflow:hidden;background:var(--navy-oggetto);color:#fff;
  -webkit-mask:radial-gradient(circle calc(var(--tacca) + var(--filo)) at calc(100% - var(--matrice)) calc(-1 * var(--filo)),#0000 96%,#000) top/100% 51% no-repeat,radial-gradient(circle calc(var(--tacca) + var(--filo)) at calc(100% - var(--matrice)) calc(100% + var(--filo)),#0000 96%,#000) bottom/100% 51% no-repeat;
  mask:radial-gradient(circle calc(var(--tacca) + var(--filo)) at calc(100% - var(--matrice)) calc(-1 * var(--filo)),#0000 96%,#000) top/100% 51% no-repeat,radial-gradient(circle calc(var(--tacca) + var(--filo)) at calc(100% - var(--matrice)) calc(100% + var(--filo)),#0000 96%,#000) bottom/100% 51% no-repeat}
.bigl__corpo{min-width:0;padding:24px 24px 24px 28px}
.bigl__logo{width:118px}
.bigl__rotta{display:grid;grid-template-columns:auto minmax(40px,1fr) auto;align-items:end;gap:12px;margin-top:20px;min-height:4.5rem}
.bigl__capo{display:grid;gap:5px;min-width:0}
.bigl__capo--a{justify-items:end;text-align:right}
.bigl__et{font:500 .875rem/1 var(--titoli);letter-spacing:.12em;text-transform:uppercase;color:var(--oro-chiaro)}
.bigl__capo b{display:block;font:500 clamp(1.6rem,2.3vw,2.2rem)/1.02 var(--titoli);letter-spacing:.05em;text-transform:uppercase}
.bigl__capo--a b{max-width:9.6em;text-wrap:balance}
.bigl__capo--a b[data-misura="m"]{font-size:clamp(1.15rem,1.5vw,1.4rem)}
.bigl__capo--a b[data-misura="p"]{font-size:1rem;line-height:1.14;letter-spacing:.03em}
.bigl__via{position:relative;height:22px;margin-bottom:.32em}
.bigl__via::before{content:"";position:absolute;left:0;right:0;top:calc(50% - 1px);border-top:2px dashed rgba(205,183,144,.6)}
.bigl__fatto{position:absolute;left:0;right:11px;top:calc(50% - 1.5px);height:3px;background:var(--oro-chiaro);transform:scaleX(0);transform-origin:0 50%}
.bigl__aereo{position:absolute;left:0;top:0;width:22px;height:22px;fill:var(--oro-luce)}
.bigl.ha-dove .bigl__aereo{left:calc(100% - 22px)}
.bigl.ha-dove .bigl__fatto{transform:scaleX(1)}
.bigl__campi{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) auto;gap:14px;margin-top:20px;padding-top:17px;border-top:2px solid rgba(205,183,144,.34)}
.bigl__campi dt{font:500 .875rem/1 var(--titoli);letter-spacing:.12em;text-transform:uppercase;color:var(--oro-chiaro)}
.bigl__campi dd{min-height:1.35em;margin-top:8px;font-weight:500;font-size:1.125rem;line-height:1.25;font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* i campi ancora vuoti: una riga chiara al posto del valore */
.bigl__v:empty::before{content:"";display:block;width:min(100%,4.4em);height:.6em;margin-top:.36em;border-radius:99px;background:rgba(220,225,240,.24)}
.bigl__capo--a .bigl__v:empty::before{width:4.4em;height:.66em;margin:.17em 0}
.bigl__matrice{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:16px 8px;background:var(--lamina-ferma);color:var(--navy-fondo);text-align:center}
.bigl__matrice::before{content:"";position:absolute;left:-1px;top:calc(var(--tacca) + 7px);bottom:calc(var(--tacca) + 7px);border-left:2px dashed rgba(24,32,66,.6)}
.bigl__lente{position:relative;width:84px;aspect-ratio:1;border-radius:50%;overflow:hidden;background:var(--navy-fondo);box-shadow:0 0 0 3px var(--navy-fondo)}
.bigl__lente img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.bigl__lente-l{padding:3px}
.bigl__stato{min-height:2.3em;display:grid;place-items:center;font:600 .875rem/1.15 var(--titoli);letter-spacing:.08em;text-transform:uppercase}
.bigl__lampo{position:absolute;z-index:3;top:-20%;bottom:-20%;left:0;width:46%;background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,244,214,.55),rgba(255,255,255,0));transform:translateX(-140%) skewX(-16deg);opacity:0;pointer-events:none}
/* il timbro: un disco d'oro con la spunta del logo, a cavallo della perforazione */
.timbro{position:absolute;z-index:4;top:-14px;right:calc(var(--matrice) - 34px);width:84px;height:84px;transform:rotate(-9deg);opacity:0;pointer-events:none}
.bigl.is-pronto .timbro{opacity:1}
.timbro__in,.timbro__onda{position:absolute;inset:0;display:block}
.timbro__onda{border-radius:50%;border:3px solid var(--oro);opacity:0}
.timbro svg{width:100%;height:100%;overflow:visible}
.timbro__d{fill:url(#g-lamina);stroke:var(--navy-fondo);stroke-width:3.5}
.timbro__c{fill:none;stroke:var(--navy-fondo);stroke-width:1.3;stroke-dasharray:1.4 4.2;stroke-linecap:round;opacity:.75}
.timbro__v{fill:none;stroke:var(--navy-fondo);stroke-width:8;stroke-linejoin:miter;stroke-dasharray:1;stroke-dashoffset:0}
html:not(.js) .bigl{display:none}

/* ---- l'invio: nome, note e i due pulsanti, su una carta bianca. Si accende quando il biglietto è completo ---- */
.invio{position:relative;margin-top:20px;padding:22px 24px 20px;border-radius:26px;background:var(--bianco);box-shadow:var(--ombra)}
/* a biglietto pronto: un bordo a lamina d'oro */
.invio::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:3px;background:var(--lamina);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);opacity:0;transition:opacity .5s;pointer-events:none}
.invio.is-pronto::before{opacity:1}
.invio__t{font:500 1.4rem/1.2 var(--titoli);color:var(--navy)}
.invio__p{margin-top:4px;font-size:1rem;line-height:1.4;color:var(--testo-2)}
.invio.is-pronto .invio__p{font-weight:500;color:var(--oro-scuro)}
.invio__campi{display:grid;grid-template-columns:1fr 1fr;gap:12px;align-items:start;margin-top:14px}
.campo label{display:block;margin-bottom:6px;font-weight:500;font-size:1rem;color:var(--navy)}
.campo label small{font-weight:400;font-size:.93rem;color:var(--testo-2)}
.campo input,.campo textarea{display:block;width:100%;min-height:52px;padding:13px 16px;border:1.5px solid var(--navy);border-radius:16px;background:var(--bianco);color:var(--navy);font-size:1.0625rem;line-height:1.4}
.campo textarea{height:52px;min-height:52px;resize:vertical}
.campo input:focus,.campo textarea:focus{outline:none;box-shadow:0 0 0 3px var(--oro)}
.campo.is-err input{border-color:#9B2C2C;box-shadow:0 0 0 2px #9B2C2C}
.campo__err{display:flex;align-items:center;gap:8px;margin-top:7px;font-weight:500;font-size:.97rem;color:#9B2C2C}
.campo__err .ico{width:18px;height:18px}
.invio__az{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:16px}
.invio__az .btn{padding:0 14px}
.invio__nota{margin-top:10px;font-size:.93rem;line-height:1.4;color:var(--testo-2)}
.invio__nota a{color:var(--navy);font-weight:500}
.invio__stato{margin-top:12px;padding:12px 14px;border-radius:14px;background:var(--oro-luce);font-weight:500;font-size:1rem;line-height:1.4;color:var(--navy-fondo)}
.invio.is-pronto .btn--navy::after{animation:lampo 3.6s var(--ease) .4s infinite}
.componi.is-ferma .invio .btn--navy::after{animation:none}
html:not(.js) .invio [data-via="whatsapp"],html:not(.js) .invio__nota--js{display:none}
html:not(.js) .invio__az{grid-template-columns:1fr}
/* schermi bassi: il biglietto e l'invio si stringono un po', per restare interi nella colonna fissa */
@media (min-width:1024px) and (max-height:740px){
  .bigl__corpo{padding-block:18px}
  .bigl__rotta,.bigl__campi{margin-top:14px}
  .invio{margin-top:16px;padding-block:18px 16px}
  .invio__az .btn{min-height:50px}
}

@media (max-width:1023px){
  .componi__g{grid-template-columns:1fr}
  .cassa{position:static;max-width:560px;margin-inline:auto;width:100%;padding-top:14px}
  .scelte--5{grid-template-columns:repeat(3,minmax(0,1fr))}
  .bigl__alone{inset:-24% -9% -20%}
}
@media (max-width:700px){
  .nastro{padding:calc(var(--arco) * .5 + 22px) 0 calc(var(--arco) + 38px)}
  .voce{text-wrap:balance}
  .passo{border-radius:24px}
  /* l'intestazione di un passo: a sinistra il numero, al centro la domanda e, sotto, la risposta (un'etichetta d'oro che va a capo se è lunga) */
  .passo__b{display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"n q f" "n v f";align-content:center;gap:0 12px;min-height:72px;padding:11px 14px 11px 11px}
  .passo__n{grid-area:n}
  .passo__q{grid-area:q}
  .passo:not(.is-fatto) .passo__q{grid-row:1 / span 2}
  .passo__v{grid-area:v;justify-self:start;max-width:100%;margin-top:5px;padding:5px 13px;border-radius:15px;white-space:normal;text-wrap:balance}
  .passo__f{grid-area:f}
  .passo.is-fatto .passo__q{font-size:1rem;color:var(--testo-2)}
  .passo__corpo{padding:8px 14px 18px}
  .scelte--4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .scelte--mesi{grid-template-columns:repeat(4,minmax(0,1fr));gap:10px 8px}
  .scelta,.scelte--4 .scelta{padding:14px 6px 12px;gap:10px}
  .scelte--4 .scelta__n{font-size:1rem}
  .scelta--pillola{padding:0 6px}
  .scelte--4 .scelta__foto{width:min(100%,104px)}
  .scelte--5 .scelta__foto{width:min(100%,76px)}
  .altra{grid-template-columns:1fr}
  /* il biglietto in verticale: la matrice è la fascia in basso, la perforazione è orizzontale, le tacche stanno ai lati */
  .bigl{--matrice:88px}
  .bigl__in{-webkit-mask:radial-gradient(circle var(--tacca) at 0 calc(100% - var(--matrice) - var(--filo)),#0000 96%,#000) left/51% 100% no-repeat,radial-gradient(circle var(--tacca) at 100% calc(100% - var(--matrice) - var(--filo)),#0000 96%,#000) right/51% 100% no-repeat;
    mask:radial-gradient(circle var(--tacca) at 0 calc(100% - var(--matrice) - var(--filo)),#0000 96%,#000) left/51% 100% no-repeat,radial-gradient(circle var(--tacca) at 100% calc(100% - var(--matrice) - var(--filo)),#0000 96%,#000) right/51% 100% no-repeat}
  .bigl__carta{grid-template-columns:1fr;grid-template-rows:auto var(--matrice);
    -webkit-mask:radial-gradient(circle calc(var(--tacca) + var(--filo)) at calc(-1 * var(--filo)) calc(100% - var(--matrice)),#0000 96%,#000) left/51% 100% no-repeat,radial-gradient(circle calc(var(--tacca) + var(--filo)) at calc(100% + var(--filo)) calc(100% - var(--matrice)),#0000 96%,#000) right/51% 100% no-repeat;
    mask:radial-gradient(circle calc(var(--tacca) + var(--filo)) at calc(-1 * var(--filo)) calc(100% - var(--matrice)),#0000 96%,#000) left/51% 100% no-repeat,radial-gradient(circle calc(var(--tacca) + var(--filo)) at calc(100% + var(--filo)) calc(100% - var(--matrice)),#0000 96%,#000) right/51% 100% no-repeat}
  .bigl__corpo{padding:18px 18px 18px 20px}
  .bigl__capo b{font-size:1.6rem}
  /* i campi su due colonne larghe, così "Giro del mondo" e "Settembre" si leggono per intero; i viaggiatori vanno sotto */
  .bigl__campi{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:13px 16px}
  .bigl__campi div:last-child{grid-column:1 / -1;display:flex;align-items:baseline;gap:12px}
  .bigl__campi div:last-child dd{margin-top:0}
  .bigl__capo--a b[data-misura="m"]{font-size:1.2rem}
  /* a destinazione ancora vuota il segnaposto è alto quanto una riga di testo, così "Da" e "A" stanno alla stessa altezza */
  .bigl__capo--a .bigl__v:empty::before{box-sizing:border-box;height:1.02em;margin:0;padding:.18em 0;background-clip:content-box}
  .bigl__matrice{flex-direction:row;justify-content:flex-start;gap:14px;padding:0 22px}
  .bigl__matrice::before{left:calc(var(--tacca) + 7px);right:calc(var(--tacca) + 7px);top:-1px;bottom:auto;border-left:0;border-top:2px dashed rgba(24,32,66,.6)}
  .bigl__lente{width:58px}
  .bigl__stato{margin-left:auto;min-height:0;text-align:right}
  .timbro{top:-12px;right:14px;width:76px;height:76px}
  .bigl__alone{inset:-22% -5% -18%}
  .invio{padding:20px 18px 20px;border-radius:24px}
  .invio__nota{font-size:1rem}
  .invio__campi,.invio__az{grid-template-columns:1fr}
  .campo textarea{height:76px}
}

/* =====================================================================================================
   4. DESTINAZIONI: il mazzo delle nove (una fila che scorre, con le carte inclinate in 3D) e la nuvola dei 60 paesi
   ===================================================================================================== */
.testa--fila{display:flex;align-items:flex-end;justify-content:space-between;gap:20px 30px;max-width:none}
.tit--2{font-size:clamp(1.5rem,2.7vw,2.4rem)}
.dest .testa{margin-bottom:0}
.frecce{display:flex;flex:none;gap:10px}
.freccia{display:grid;place-items:center;width:56px;height:56px;padding:0;border:1.5px solid var(--navy);border-radius:50%;background:var(--bianco);color:var(--navy);transition:background-color .2s,color .2s,opacity .2s,transform .2s var(--ease)}
.freccia .ico{width:22px;height:22px}
.freccia:first-child .ico{transform:scaleX(-1)}
.freccia:active{transform:scale(.92)}
.freccia:disabled{opacity:.28;cursor:default}
html:not(.js) .frecce{display:none}
@media (hover:hover){.freccia:not(:disabled):hover{background:var(--navy);color:#fff}}

.mazzo{position:relative;--lc:clamp(250px,24vw,380px);overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.mazzo::-webkit-scrollbar{display:none}
.mazzo.is-presa{scroll-snap-type:none;cursor:grabbing;-webkit-user-select:none;user-select:none}
.mazzo__f{display:flex;gap:clamp(12px,1.6vw,26px);width:max-content;padding:clamp(40px,4.4vw,64px) calc(50% - var(--lc) / 2) clamp(54px,5vw,76px)}
html:not(.js) .mazzo__f{padding-inline:var(--px)}
.luogo{position:relative;flex:none;width:var(--lc);scroll-snap-align:center}
/* main.js inclina questo piano, non la voce della fila: così i punti in cui la fila si ferma non si spostano */
.luogo__p{position:relative}
/* la carta al centro appoggia su un alone d'oro chiaro */
.luogo__p::before{content:"";position:absolute;inset:-7% -16% -9%;border-radius:50%;background:radial-gradient(closest-side,rgba(238,222,186,1) 0%,rgba(238,222,186,.8) 55%,rgba(240,227,198,0) 100%);opacity:0;transition:opacity .5s;pointer-events:none}
.luogo.is-centro .luogo__p::before{opacity:1}
.luogo__in{position:relative;padding:10px 10px 18px;border-radius:24px;background:var(--bianco);box-shadow:var(--ombra)}
.luogo__foto{position:relative;aspect-ratio:3/4;min-height:0;border-radius:16px;overflow:hidden;background:var(--velo)}
.luogo__foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--ease)}
.luogo.is-centro .luogo__foto img{transform:scale(1.07)}
/* le foto che esistono solo in piccolo stanno dentro una lente, alla loro misura: l'anello d'oro, un disco pieno dietro, un'orbita a puntini */
.luogo--lente .luogo__foto{display:grid;place-items:center;background:radial-gradient(circle at 50% 48%,#F1E4C4 0%,#F5ECD9 46%,var(--velo) 78%)}
.luogo--lente .luogo__foto::before{content:"";position:absolute;right:-10%;bottom:5%;width:54%;aspect-ratio:1;border-radius:50%;background:var(--lamina-ferma)}
.luogo--lente .luogo__foto::after{content:"";position:absolute;width:97%;aspect-ratio:1;border-radius:50%;border:2.5px dotted var(--oro)}
.luogo--lente .luogo__foto img{position:relative;inset:auto;z-index:1;width:min(84%,272px);height:auto;aspect-ratio:1;border-radius:50%;box-shadow:0 0 0 5px var(--bianco),0 0 0 11px var(--oro),0 26px 36px -16px rgba(34,46,82,.6)}
.luogo--lente.is-centro .luogo__foto img{transform:scale(1.04)}
.luogo__txt{padding:16px 8px 0}
.luogo__n{font:500 clamp(1.25rem,1.8vw,1.6rem)/1.1 var(--titoli);letter-spacing:.05em;text-transform:uppercase;color:var(--navy)}
.luogo__az{display:flex;flex-wrap:wrap;align-items:center;gap:4px 16px;margin-top:12px}
.luogo__az .btn{padding:0 18px 0 13px;gap:7px}
/* il timbro: un disco di lamina d'oro col nome che gira sul bordo e la lente del logo al centro. Prima del timbro c'è solo il suo posto, tratteggiato */
.bollo{position:absolute;z-index:2;right:-16px;top:-20px;width:clamp(86px,7.6vw,112px);aspect-ratio:1;transform:rotate(9deg);pointer-events:none}
.bollo::before{content:"";position:absolute;inset:4%;border-radius:50%;border:2px dashed var(--oro);background:var(--bianco)}
.bollo__in{position:absolute;inset:0;border-radius:50%;box-shadow:0 12px 18px -8px rgba(34,46,82,.55)}
.bollo__in svg{width:100%;height:100%;overflow:visible}
.bollo__d{fill:url(#g-lamina)}
.bollo__c{fill:none;stroke:var(--navy-fondo);stroke-width:1;stroke-dasharray:1.2 3.4;stroke-linecap:round;opacity:.7}
.bollo__giro{transform-origin:60px 60px;animation:gira 32s linear infinite}
.bollo__giro text{font:600 10.6px var(--titoli);fill:var(--navy-fondo)}
.bollo__giro circle,.bollo use{fill:var(--navy-fondo)}
.bollo__onda{position:absolute;inset:0;border-radius:50%;border:3px solid var(--oro);opacity:0}
.mo .mazzo.is-armed .luogo:not(.is-timbrata) .bollo__in{opacity:0}

/* l'avanzamento di una fila: la doppia linea d'oro con l'aereo */
.rotaia{position:relative;height:28px}
.rotaia::before{content:"";position:absolute;left:0;right:0;top:10px;height:8px;border-block:2.5px solid var(--oro-luce)}
.rotaia__l{position:absolute;left:0;right:0;top:10px;display:grid;gap:3px;transform:scaleX(0);transform-origin:0 50%}
.rotaia__l i{display:block;height:2.5px;background:var(--oro)}
.rotaia__a{position:absolute;left:-14px;top:0;width:28px;height:28px;fill:var(--navy)}
.rotaia--tel,html:not(.js) .rotaia{display:none}

/* tutti i 60 paesi: un campo di ricerca e una nuvola di pillole. Il nome porta alla pagina, il più mette il paese sul biglietto */
.tutte{margin-top:clamp(56px,7vw,110px)}
.tutte__testa{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:18px 30px;margin-bottom:clamp(22px,2.6vw,34px)}
.cerca{position:relative;flex:0 1 430px;min-width:min(100%,280px)}
.cerca>.ico{position:absolute;left:21px;top:calc(50% - 11px);width:22px;height:22px;color:var(--navy);pointer-events:none}
.cerca input{width:100%;height:58px;padding:0 56px;border:1.5px solid var(--navy);border-radius:999px;background:var(--bianco);font-size:1.0625rem;color:var(--navy);-webkit-appearance:none;appearance:none}
.cerca input::placeholder{color:var(--testo-2);opacity:1}
.cerca input::-webkit-search-cancel-button{-webkit-appearance:none;display:none}
.cerca input:focus{outline:none;box-shadow:0 0 0 3px var(--oro)}
.cerca__x{position:absolute;right:7px;top:7px;display:grid;place-items:center;width:44px;height:44px;padding:0;border:0;border-radius:50%;background:var(--navy);color:#fff}
.cerca__x .ico{width:18px;height:18px;stroke-width:2.4}
html:not(.js) .cerca{display:none}
.nuvola{display:flex;flex-wrap:wrap;gap:10px}
.paese{display:flex;height:48px;border-radius:999px;background:var(--bianco);box-shadow:inset 0 0 0 1.5px var(--navy);transition:opacity .18s,transform .22s var(--ease),background-color .2s}
.paese a{display:flex;align-items:center;padding:0 4px 0 20px;border-radius:999px 0 0 999px;font-weight:500;text-decoration:none;white-space:nowrap;color:var(--navy)}
.paese button{display:grid;place-items:center;width:46px;padding:0 5px 0 0;border:0;border-radius:0 999px 999px 0;background:none}
.paese button .ico{width:32px;height:32px;padding:7px;border-radius:50%;background:var(--lamina-ferma);color:var(--navy-fondo);stroke-width:2.6;transition:background-color .2s,color .2s,transform .3s var(--scatto)}
.paese button:active .ico{transform:scale(.86)}
.paese.is-via{opacity:0;transform:scale(.6);pointer-events:none}
html:not(.js) .paese button{display:none}
html:not(.js) .paese a{padding-right:20px;border-radius:999px}
@media (hover:hover){
  .paese:hover{background:var(--oro)}
  .paese:hover button .ico,.paese button:hover .ico{background:var(--navy);color:var(--oro-luce)}
  .paese button:hover .ico{transform:scale(1.12) rotate(90deg)}
}
.nuvola__vuoto{padding:22px 26px;border-radius:22px;background:var(--oro-luce);font-weight:500;font-size:1.125rem;color:var(--navy-fondo)}
.nuvola__vuoto a{color:inherit;text-underline-offset:4px}
.tutte__az{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(24px,2.8vw,36px)}
/* telefono: la nuvola parte accorciata, con una sfumatura in fondo; si apre col pulsante o scrivendo nella ricerca */
.nuvola.is-corta{max-height:280px;overflow:hidden;-webkit-mask:linear-gradient(#000 62%,#0000);mask:linear-gradient(#000 62%,#0000)}

/* =====================================================================================================
   5. CHI SIAMO: la voce dell'agenzia, tre lenti con le foto, due numeri in lamina, le quattro specialità con la spunta
   ===================================================================================================== */
.chi__g{display:grid;grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr);gap:clamp(30px,5vw,90px);align-items:start}
.doppia--oro{color:var(--oro)}
.doppia--oro i{height:5px;border-radius:0}
.chi__txt .doppia{width:clamp(110px,12vw,180px);margin:clamp(22px,2.4vw,34px) 0 clamp(4px,.6vw,10px);transform-origin:0 50%}
.chi__txt p{max-width:36em;margin-top:1.15em;font-size:1.125rem;line-height:1.7}
/* le lenti sporgono sopra il bordo della sezione */
.collage{position:relative;aspect-ratio:1/1.06;margin-top:calc(-1 * clamp(30px,6vw,96px))}
.collage__disco{position:absolute;left:5%;top:10%;width:37%;aspect-ratio:1;border-radius:50%;background:var(--lamina-ferma)}
.collage__orbita{position:absolute;right:-8%;top:-6%;width:80%;height:auto;aspect-ratio:1;overflow:visible;fill:none;stroke:var(--oro);stroke-width:.6;stroke-dasharray:.01 2.4;stroke-linecap:round;animation:gira 120s linear infinite}
.lente{position:absolute;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 44px 60px -30px rgba(34,46,82,.6)}
/* la foto è più alta della lente: scorre dentro, per la profondità */
.lente img{position:absolute;left:0;top:-9%;width:100%;height:118%;max-width:none;object-fit:cover}
.lente--a{right:0;top:0;width:64%}
.lente--b{left:0;top:40%;width:46%}
.lente--c{right:9%;bottom:0;width:33%}
.cifre{display:flex;flex-wrap:wrap;align-items:flex-end;gap:clamp(20px,9vw,170px);margin-top:clamp(50px,7vw,110px)}
.cifra{display:flex;flex-direction:column-reverse;min-width:0}
.cifra dt{font:500 italic clamp(1.4rem,2.1vw,1.9rem)/1.2 var(--voce);color:var(--navy)}
.cifra__n{font:500 clamp(5.6rem,17.5vw,16rem)/1 var(--titoli);letter-spacing:.02em;font-variant-numeric:tabular-nums lining-nums;white-space:nowrap;color:var(--oro)}
/* la lamina: un gradiente d'oro dentro le cifre. Scorre solo nelle sei cifre che restano in vista (l'ultima di ogni colonna):
   è l'unico movimento continuo della pagina che ridisegna invece di spostare, perciò resta piccolo e solo su computer */
@keyframes foglia{from{background-position:0 0}to{background-position:100% 0}}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .cifra__n,.rullo__c span{background:var(--lamina) 0 0/260% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
  .cifra__n,.rullo__c span:last-child{animation:foglia 7s ease-in-out infinite alternate}
  .cifra__n.is-rullo{background:none;animation:none}
}
/* il contachilometri: ogni cifra è una colonna che scorre fino al suo numero */
.rullo{display:inline-flex;align-items:flex-start;height:1em;overflow:hidden;vertical-align:top}
.rullo__c{display:flex;flex-direction:column;transform:translateY(var(--fine))}
.rullo__c span{flex:none;display:block;height:1em}
.spunte{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(12px,1.4vw,20px);margin-top:clamp(36px,4.4vw,64px)}
.spunte li{display:flex;align-items:center;gap:14px;min-height:76px;padding:12px 22px 12px 12px;border-radius:999px;background:var(--bianco);box-shadow:var(--ombra);font:500 clamp(1.05rem,1.45vw,1.3rem)/1.15 var(--titoli);color:var(--navy)}
.spunta{flex:none;display:grid;place-items:center;width:52px;height:52px;border-radius:50%;background:var(--lamina-ferma)}
.spunta svg{width:26px;height:26px;fill:none;stroke:var(--navy-fondo);stroke-width:6;stroke-dasharray:1;stroke-dashoffset:0}

/* =====================================================================================================
   6. STILI DI VIAGGIO: tre pannelli fotografici. Di base sono tre colonne uguali (così restano senza script);
   con lo script (is-viva) quello attivo si allarga: posizioni e ritagli cambiano solo con transform e clip-path
   ===================================================================================================== */
.pannelli{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.pannello{position:relative;height:clamp(430px,64vh,620px);border-radius:26px;overflow:hidden;background:var(--navy);color:#fff;isolation:isolate}
.pannello__foto{position:absolute;inset:0;z-index:-2}
.pannello__foto img{width:100%;height:100%;object-fit:cover}
/* il testo sta su una sfumatura navy, solo nella parte bassa della foto */
.pannello::after{content:"";position:absolute;left:0;right:0;bottom:0;z-index:-1;height:58%;background:linear-gradient(180deg,rgba(24,32,66,0) 0%,rgba(24,32,66,.56) 48%,rgba(24,32,66,.93) 100%);pointer-events:none}
.pannello__cornice{display:none}
/* in alto, la lente del logo su un disco di lamina: come un timbro */
.pannello__lente{position:absolute;left:clamp(18px,2.2vw,30px);top:clamp(18px,2.2vw,30px);display:grid;place-items:center;width:58px;height:58px;border-radius:50%;background:var(--lamina-ferma);box-shadow:0 10px 16px -8px rgba(24,32,66,.7)}
.pannello__lente svg{width:36px;height:36px;fill:var(--navy-fondo);animation:gira 26s linear infinite}
.pannello__txt{position:absolute;left:0;bottom:0;width:100%;max-width:34rem;padding:clamp(18px,2.2vw,30px)}
.pannello__n{width:max-content;max-width:8.6em;font:500 clamp(1.5rem,2.5vw,2.3rem)/1.06 var(--titoli);letter-spacing:.05em;text-transform:uppercase}
.pannello__piu p{margin-top:10px;font:500 italic clamp(1.375rem,1.9vw,1.6rem)/1.25 var(--voce)}
.pannello__az{display:flex;flex-wrap:wrap;align-items:center;gap:4px 18px;margin-top:16px}
.btn--bianco{background:var(--bianco);color:var(--navy);padding:0 18px 0 13px;gap:7px}
.legame--chiaro{color:#fff}
.legame--chiaro span{background-image:linear-gradient(var(--oro-chiaro),var(--oro-chiaro))}
@media (hover:hover){.btn--bianco:hover{background:var(--oro-luce)}}
/* fermi (senza script o con il movimento ridotto) su schermi stretti: uno sotto l'altro, tutti aperti */
@media (max-width:860px){
  .pannelli:not(.is-viva){grid-template-columns:1fr}
  .pannelli:not(.is-viva) .pannello{height:clamp(300px,78vw,440px)}
}
.pannelli.is-viva{display:block;height:var(--H)}
.is-viva .pannello{position:absolute;left:0;top:0;width:var(--wo);height:var(--ho);border-radius:0;transition:transform .65s var(--ease),clip-path .65s var(--ease)}
.is-viva .pannello:not(.is-on){cursor:pointer}
.is-viva .pannello__foto{transition:transform .65s var(--ease)}
.is-viva .pannello__foto img{transition:transform 1.8s var(--ease)}
.is-viva .pannello.is-on .pannello__foto img{transform:scale(1.07)}
.is-viva .pannello__n{transform-origin:0 100%;transition:transform .65s var(--ease)}
.is-viva .pannello:not(.is-on) .pannello__n{transform:translateY(var(--ny,0px)) scale(var(--ns,.7))}
.is-viva .pannello__piu{transition:opacity .35s .22s}
.is-viva .pannello:not(.is-on) .pannello__piu{opacity:0;visibility:hidden;transition:opacity .15s,visibility 0s .15s}
/* la cornice d'oro si disegna intorno al pannello attivo */
.is-viva .pannello__cornice{display:block;position:absolute;inset:0;z-index:-1;width:100%;height:100%;fill:none;stroke:var(--oro-chiaro);stroke-width:2.5;pointer-events:none}
.is-viva .pannello__cornice rect{stroke-dasharray:1 1.04;stroke-dashoffset:1.02;transition:stroke-dashoffset .3s}      /* un filo oltre l'intero giro: chiusa, non resta nemmeno un puntino */
.is-viva .pannello.is-on .pannello__cornice rect{stroke-dashoffset:0;transition:stroke-dashoffset 1s var(--ease) .25s}
/* in verticale (telefono) i pannelli chiusi sono strisce: il nome sta al centro della striscia, su un velo navy */
.is-vert .pannello__n{max-width:11em;transform-origin:0 50%}
.is-vert .pannello__lente{left:auto;right:17px;top:17px}
.is-vert .pannello::before{content:"";position:absolute;inset:0;z-index:-1;background:rgba(24,32,66,.5);opacity:0;transition:opacity .4s;pointer-events:none}
.is-vert .pannello:not(.is-on)::before{opacity:1}

/* =====================================================================================================
   7. OFFERTE: nove carte. Su ognuna la categoria (pillola d'oro), il prezzo (un cartellino da valigia), la rotta con le tappe
   ===================================================================================================== */
.offerte__g{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,2.2vw,30px);width:min(100% - 2 * var(--px),var(--max));margin-inline:auto;padding-bottom:44px}
/* la colonna di mezzo scende un po': la griglia prende ritmo */
.offerta:nth-child(3n+2){position:relative;top:44px}
.offerta__in{position:relative;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)}
.offerta__foto{position:relative;aspect-ratio:16/10;min-height:0;border-radius:16px;background:var(--velo)}
.offerta__foto img{position:absolute;inset:0;width:100%;height:100%;border-radius:16px;object-fit:cover;transition:transform .5s var(--ease)}
.etichetta{position:absolute;left:12px;top:12px;padding:7px 15px;border-radius:999px;background:var(--lamina-ferma);font-weight:600;font-size:.94rem;line-height:1.2;color:var(--navy-fondo)}
/* il prezzo: un cartellino d'oro appeso all'angolo della foto, con la punta e il foro */
.prezzo{position:absolute;right:-6px;bottom:-22px;z-index:1;display:grid;gap:1px;padding:9px 16px 9px 36px;border-radius:0 12px 12px 0;overflow:hidden;background:var(--lamina-ferma);line-height:1.1;color:var(--navy-fondo);transform:rotate(-4deg);transform-origin:100% 50%;clip-path:polygon(18px 0,100% 0,100% 100%,18px 100%,0 50%);-webkit-mask:radial-gradient(circle 4.5px at 20px 50%,#0000 96%,#000);mask:radial-gradient(circle 4.5px at 20px 50%,#0000 96%,#000)}
.prezzo::after{content:"";position:absolute;top:-10%;bottom:-10%;left:0;width:40%;background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.6),rgba(255,255,255,0));transform:translateX(-130%) skewX(-16deg);animation:lampo 6.5s var(--ease) infinite}
.offerta:nth-child(3n+2) .prezzo::after{animation-delay:1.1s}
.offerta:nth-child(3n) .prezzo::after{animation-delay:2.2s}
.prezzo span{font-weight:500;font-size:.875rem}
.prezzo b{font:600 1.3rem/1.1 var(--titoli);font-variant-numeric:tabular-nums;white-space:nowrap}
.prezzo--chiedi{padding-block:13px}
.prezzo--chiedi b{font-size:1.05rem}
.offerta__t{min-height:2.4em;margin:34px 10px 0;font:500 clamp(1.2rem,1.5vw,1.4rem)/1.2 var(--titoli);color:var(--navy);text-wrap:balance}
/* la rotta: una linea d'oro, le tappe a punti, i nomi una volta sopra e una sotto */
.tratta{margin:14px 10px 0}
.tratta__v{position:relative;height:112px;container-type:inline-size}
.tratta__l{position:absolute;left:0;right:0;top:calc(50% - 1.5px);border-top:3px dotted var(--oro-chiaro)}
.tratta__f{position:absolute;left:0;top:calc(50% - 1.5px);width:var(--fine);height:3px;background:var(--oro);transform-origin:0 50%}
.tappa{position:absolute;left:var(--x);top:50%}
.tappa i{position:absolute;left:-8px;top:-8px;width:16px;height:16px;border-radius:50%;background:var(--bianco);box-shadow:inset 0 0 0 4px var(--navy)}
.tappa b{position:absolute;left:0;width:max-content;max-width:8.2em;font:500 .9rem/1.15 var(--titoli);text-align:center;color:var(--navy);transform:translateX(-50%)}
.tappa--su b{bottom:15px}
.tappa--giu b{top:15px}
/* la prima etichetta parte dal bordo: larga al massimo quanto lascia libero quella dopo sullo stesso lato */
.tappa--prima b{left:-8px;max-width:min(8.2em,calc(var(--passo,23) * 1.25cqw));text-align:left;transform:none}
.tappa--ultima b{left:8px;text-align:right;transform:translateX(-100%)}
/* le tappe in più: un segnaposto d'oro in fondo alla linea */
.tappa--piu i{left:-16px;top:-16px;display:grid;place-items:center;width:32px;height:32px;background:var(--lamina-ferma);box-shadow:0 0 0 3px var(--bianco);font:600 .875rem/1 var(--titoli);color:var(--navy-fondo)}
.tappa--piu b{left:16px;top:21px}
.tratta__a{position:absolute;left:var(--fine);top:calc(50% - 12px);width:24px;height:24px;margin-left:-12px;fill:var(--navy);opacity:0}
.offerta__az{display:flex;flex-wrap:wrap;align-items:center;gap:4px 16px;margin:auto 10px 0;padding-top:10px}
.offerte__tutte{margin-top:clamp(30px,3.6vw,50px)}
.mo .tratta.is-armed:not(.is-in) .tratta__f{transform:scaleX(0)}
.mo .tratta.is-armed:not(.is-in) .tappa{opacity:0}
@media (hover:hover){
  .offerta__in:hover .offerta__foto img{transform:translateY(-5px) scale(1.04)}
}

/* =====================================================================================================
   8. LISTA NOZZE: la grande lente con l'anello d'oro, il disco pieno dietro, due anelli intrecciati che girano piano
   ===================================================================================================== */
.nozze__g{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);align-items:center;gap:clamp(30px,5vw,90px)}
.nozze__txt .voce{max-width:15em;margin-top:clamp(10px,1.2vw,18px);font-size:clamp(1.6rem,2.6vw,2.4rem);line-height:1.2}
.nozze__az{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(24px,2.8vw,38px)}
.nozze__componi{margin-top:12px}
.nozze__vista{position:relative;justify-self:center;width:min(100%,560px);aspect-ratio:1}
.nozze__disco{position:absolute;right:-5%;bottom:-3%;width:46%;aspect-ratio:1;border-radius:50%;background:var(--lamina-ferma)}
.lente--nozze img{object-position:14% 50%}
.lente--nozze{inset:8%;box-shadow:0 0 0 clamp(9px,1.1vw,15px) var(--oro),0 50px 70px -36px rgba(34,46,82,.6)}
.anelli{position:absolute;left:-7%;top:-7%;width:114%;height:114%;pointer-events:none}
.anello{position:absolute;inset:0;width:100%;height:100%;overflow:visible;fill:none;stroke:var(--oro);stroke-width:1.5;animation:gira 70s linear infinite}
.anello--b{animation-duration:90s;animation-direction:reverse}
.anello circle{stroke-dasharray:1;stroke-dashoffset:0}
/* i tre servizi: bigliettini bianchi con le tacche, la perforazione e la matrice d'oro */
.servizi{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.6vw,22px);margin-top:clamp(56px,7vw,104px)}
.bigliettino{display:block;height:100%;text-decoration:none;color:var(--navy);filter:drop-shadow(0 16px 16px rgba(34,46,82,.16));transition:transform .35s var(--scatto)}
.bigliettino__in{--m:84px;display:grid;grid-template-columns:minmax(0,1fr) var(--m);height:100%;min-height:124px;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}
.bigliettino__c{display:grid;align-content:center;gap:7px;padding:20px 20px 20px 24px}
.bigliettino b{font:500 1.15rem/1.15 var(--titoli);letter-spacing:.05em;text-transform:uppercase}
.bigliettino i{font:500 italic 1.4rem/1.2 var(--voce)}
.bigliettino__m{position:relative;display:grid;place-items:center;background:var(--lamina-ferma);color:var(--navy-fondo)}
.bigliettino__m::before{content:"";position:absolute;left:-1px;top:18px;bottom:18px;border-left:2px dashed rgba(24,32,66,.6)}
.bigliettino__m .ico{width:26px;height:26px;stroke-width:2.2;transition:transform .3s var(--ease)}
@media (hover:hover){
  .bigliettino:hover{transform:translateY(-6px) rotate(-1.2deg)}
  .bigliettino:hover .ico{transform:translateX(5px)}
}

/* =====================================================================================================
   9. CONTATTI: la copia del biglietto, i quattro recapiti, il mappamondo tagliato dal bordo
   ===================================================================================================== */
.contatti__sx{position:relative;z-index:1;max-width:min(660px,50vw)}
.contatti .testa{margin-bottom:clamp(24px,2.8vw,38px)}
.riepilogo{display:flex;flex-wrap:wrap;align-items:center;gap:14px 16px}
/* la copia del biglietto: un bigliettino navy col bordo a lamina */
.copia{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:14px;min-width:min(100%,330px);padding:13px 22px 13px 13px;border-radius:20px;background:var(--navy-oggetto);color:#fff;box-shadow:0 22px 34px -20px rgba(24,32,66,.7)}
.copia::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:2.5px;background:var(--lamina);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);pointer-events:none}
.copia__lente{position:relative;width:58px;height:58px;border-radius:50%;overflow:hidden;background:var(--navy-fondo);box-shadow:inset 0 0 0 2.5px var(--oro)}
.copia__lente img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.copia__lente img:first-child{padding:7px}
.copia__lente img+img{border-radius:50%;border:2.5px solid var(--oro)}
.copia__r{display:flex;flex-wrap:wrap;align-items:center;gap:2px 9px;font:500 clamp(1.1rem,1.5vw,1.3rem)/1.15 var(--titoli);letter-spacing:.05em;text-transform:uppercase}
.copia__r .ico{width:17px;height:17px;color:var(--oro-chiaro)}
.copia__r span:empty::before{content:"";display:block;width:3.6em;height:.56em;border-radius:99px;background:rgba(220,225,240,.26)}
.copia__s{display:block;margin-top:4px;font-size:1rem;line-height:1.3;color:var(--oro-chiaro)}
.copia .punti{color:var(--oro-chiaro)}
.recapiti{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:clamp(26px,3vw,42px)}
.recapito{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:3px 16px;height:100%;min-height:104px;padding:18px 20px 18px 18px;border-radius:24px;background:var(--bianco);box-shadow:var(--ombra);text-decoration:none;color:var(--navy);transition:transform .3s var(--scatto)}
.recapito__i{grid-row:span 2;display:grid;place-items:center;width:58px;height:58px;border-radius:50%;background:var(--navy);color:var(--oro-luce);transition:background-color .25s,color .25s,transform .35s var(--scatto)}
.recapito__i .ico{width:26px;height:26px}
.recapito__e{align-self:end;font-size:1rem;line-height:1.2;color:var(--testo-2)}
.recapito b{align-self:start;font:500 clamp(1.1rem,1.45vw,1.3rem)/1.2 var(--titoli);overflow-wrap:anywhere}
.recapito:active{transform:scale(.97)}
@media (hover:hover){
  .recapito:hover{transform:translateY(-5px)}
  .recapito:hover .recapito__i{background:var(--oro);color:var(--navy-fondo);transform:scale(1.08) rotate(-8deg)}
}
.contatti__globo{position:absolute;right:calc(-1 * min(12vw,180px));top:50%;width:min(50vw,760px);transform:translateY(-50%)}

/* piè di pagina: l'unica fascia navy, con il bordo superiore curvo */
.piede{position:relative;z-index:2;margin-top:calc(-1 * var(--arco));padding:calc(var(--arco) + clamp(44px,5vw,76px)) 0 calc(34px + var(--sab));border-radius:50% 50% 0 0/var(--arco) var(--arco) 0 0;background:linear-gradient(180deg,var(--navy) 0%,var(--navy-fondo) 100%);color:var(--su-navy)}
.piede__g{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);align-items:start;gap:clamp(30px,6vw,110px)}
.piede__m img{width:clamp(170px,16vw,230px)}
.piede__m p{max-width:30em;margin-top:22px;font-size:1.0625rem;line-height:1.6}
.piede__s{display:flex;gap:12px;margin-top:22px}
.piede__s a{display:grid;place-items:center;width:54px;height:54px;border-radius:50%;background:var(--lamina-ferma);color:var(--navy-fondo);transition:transform .35s var(--scatto)}
.piede__s .ico{width:25px;height:25px}
.piede__l h2{font:500 1.5rem/1.2 var(--titoli);color:#fff}
.piede__l ul{margin-top:10px}
.piede__l a{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:54px;padding:6px 0;border-bottom:1.5px solid rgba(205,183,144,.34);font-size:1.0625rem;line-height:1.3;text-decoration:none;color:#fff;transition:color .2s}
.piede__l button{display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%;min-height:54px;padding:6px 0;border:0;border-bottom:1.5px solid rgba(205,183,144,.34);background:none;font:inherit;font-size:1.0625rem;line-height:1.3;text-align:left;color:#fff;cursor:pointer;transition:color .2s}
html:not(.js) .piede__ck{display:none}
.piede__l small{flex:none;padding:4px 10px;border-radius:999px;background:var(--lamina-ferma);font-weight:600;font-size:.875rem;line-height:1.1;color:var(--navy-fondo)}
/* in fondo, il motivo del logo: la doppia linea che arriva alla lente */
.piede__c{display:flex;align-items:center;gap:16px;margin-top:clamp(36px,5vw,64px)}
.piede__c .doppia{flex:1;width:auto}
.piede__lente{flex:none;width:46px;height:46px;fill:var(--oro);animation:gira 40s linear infinite}
.piede__c p{font-size:1rem}
@media (hover:hover){
  .piede__s a:hover{transform:translateY(-4px) rotate(-8deg)}
  .piede__l a:hover,.piede__l button:hover{color:var(--oro-luce)}
}

/* telefoni: niente movimento continuo dove costerebbe ridisegnare a ogni fotogramma (la scritta dei timbri, la lamina dei numeri, il riflesso dei cartellini) */
.lite .bollo__giro,.lite .cifra__n,.lite .rullo__c span:last-child,.lite .prezzo::after{animation:none}
/* senza JavaScript: i comandi che mettono qualcosa sul biglietto non servono; al posto del mappamondo dei contatti resta la lente del logo */
html:not(.js) [data-aggiungi]{display:none}
html:not(.js) .contatti__globo .globo{background:url(../assets/logo/lente.svg) center/contain no-repeat}
/* tutto ciò che gira in continuazione si ferma quando la sua sezione è fuori dallo schermo */
[data-vivo].is-ferma *,[data-vivo].is-ferma *::after{animation-play-state:paused!important}

/* computer stretti: le offerte su due colonne (le rotte hanno bisogno di larghezza), i bigliettini dei servizi più compatti */
@media (max-width:1099px){
  .offerte__g{grid-template-columns:repeat(2,minmax(0,1fr))}
  .offerta:nth-child(3n+2){top:0}
  .offerta:nth-child(2n){position:relative;top:44px}
  .bigliettino__in{--m:62px}
  .bigliettino__c{padding:18px 14px 18px 20px}
}
@media (max-width:1023px){
  /* telefono e tablet. Il mazzo: le carte non in primo piano sono appena più piccole e più chiare. È una transizione che parte
     quando cambia la carta in primo piano, non un calcolo a ogni fotogramma dello scorrimento */
  .mo .luogo__p{transition:transform .35s var(--ease),opacity .35s}
  .mo .luogo:not(.is-centro) .luogo__p{transform:scale(.95);opacity:.7}
  /* mentre i numeri scorrono, le cifre entrano ed escono sfumando dal bordo della finestra */
  .mo [data-seq]:not(.is-in) .rullo{-webkit-mask:linear-gradient(#0000,#000 16%,#000 84%,#0000);mask:linear-gradient(#0000,#000 16%,#000 84%,#0000)}
  /* il bordo a lamina del biglietto sta fermo: farlo scorrere sotto le maschere delle tacche ridisegnerebbe il biglietto a ogni fotogramma.
     Il riflesso che lo attraversa a ogni scelta resta */
  .mo .componi .bigl__bordo{animation:none}
  .chi__g{grid-template-columns:1fr}
  .collage{order:-1;width:min(100%,520px);margin:0 auto 10px;aspect-ratio:1/.9}
  .lente--a{width:60%}
  .lente--b{top:36%;width:44%}
  .lente--c{right:14%;width:31%}
  .spunte{grid-template-columns:repeat(2,minmax(0,1fr))}
  .nozze__g{grid-template-columns:1fr}
  .nozze__vista{order:-1;width:min(100%,460px)}
  .servizi{grid-template-columns:1fr;max-width:560px}
  /* il mappamondo passa in fondo: una cupola che spunta da dietro il piè di pagina */
  .contatti{padding-bottom:0;overflow:hidden}
  .contatti__sx{max-width:none}
  .contatti__globo{position:relative;right:auto;top:auto;left:50%;--d:min(150vw,860px);width:var(--d);height:calc(var(--d) * .36 + var(--arco));margin:clamp(50px,9vw,90px) 0 0 calc(var(--d) / -2);transform:none}
  .contatti__globo .globo__tela{height:88%}
  .contatti__globo .globo__oro{transform:translate(0,-1.1%) scale(1.012)}
  .piede__g{grid-template-columns:1fr}
}
@media (max-width:700px){
  .frecce{display:none}
  /* il mazzo: la prima carta parte dal margine della pagina e la successiva si affaccia di una cinquantina di pixel, così si capisce che si sfoglia */
  .mazzo{--lc:min(100vw - var(--px) - 66px,340px);scroll-padding-inline:var(--px)}
  .mazzo__f{gap:12px;padding:34px calc(100vw - var(--px) - var(--lc)) 44px var(--px)}      /* in fondo resta lo spazio perché anche l'ultima carta arrivi al margine */
  .luogo{scroll-snap-align:start}
  .luogo__foto{aspect-ratio:4/5}
  .luogo__az{row-gap:8px}
  .luogo__az .btn{flex:1 1 100%}
  .luogo__az .legame{margin:0 auto}
  /* il timbro: solo sulla carta in primo piano, senza il segnaposto tratteggiato. Così non c'è mai un timbro tagliato dal bordo dello schermo */
  .bollo{right:-8px;top:-14px;width:82px;transition:opacity .25s,transform .35s var(--scatto)}
  .bollo::before{display:none}
  html.js .luogo:not(.is-centro) .bollo{opacity:0;transform:rotate(9deg) scale(.6)}
  .tutte__testa{display:grid;grid-template-columns:minmax(0,1fr)}
  .cerca{flex:none}
  .paese a{padding-left:17px}
  .tutte__az{display:grid}
  /* chi siamo: le lenti stanno dentro i margini (anello compreso), il titolo respira */
  .collage{width:calc(100% - 24px);margin-bottom:32px}
  .cifre{gap:8px 26px}
  .cifra__n{font-size:clamp(4.4rem,24vw,7rem)}
  .cifra:first-child .cifra__n{font-size:clamp(5rem,29vw,8.4rem)}
  .spunte{grid-template-columns:1fr}
  .spunte li{min-height:68px}
  .spunta{width:46px;height:46px}
  /* stili: nel pannello degli sposi la coppia sta tra il nome e la lente d'oro, intera, sia a pannello aperto sia nella striscia chiusa */
  .is-vert .pannello:nth-child(3) .pannello__foto img{object-position:91% 50%}
  /* il testo occupa più altezza che su computer: la sfumatura navy sale di conseguenza */
  .is-vert .pannello::after{height:70%}
  .pannello__az{row-gap:8px}
  /* i pannelli chiusi sono strisce con il nome in piccolo: il velo navy è più fitto, perché si legga anche sulle foto chiare */
  .is-vert .pannello::before{background:rgba(24,32,66,.64)}
  /* le offerte: una fila da sfogliare col dito; la prima carta al margine, la successiva che si affaccia */
  .offerte__s{overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--px);scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .offerte__s::-webkit-scrollbar{display:none}
  .offerte__g{display:flex;gap:14px;width:max-content;margin:0;padding:8px var(--px) 30px}
  .offerta{flex:none;width:min(100vw - var(--px) - 62px,350px);scroll-snap-align:start}
  .offerta:nth-child(n){top:0}
  /* la rotta: nomi un po' più grandi e più staccati dalla linea; ognuno largo al massimo quanto lascia libero la tappa dopo sullo stesso lato */
  .tratta__v{height:140px}
  .tappa b{max-width:min(6.4em,calc(var(--passo,23) * 1.5cqw));font-size:.9375rem}
  .tappa--su b{bottom:21px}
  .tappa--giu b{top:21px}
  .tappa--prima b{max-width:min(6.4em,calc(var(--passo,23) * 1.25cqw))}
  .tappa--larga b{max-width:7.6em}
  .tappa--piu b{top:24px;font-size:.9375rem}
  .offerta__az{row-gap:8px}
  .offerta__az .btn{flex:1 1 100%}
  .offerta__az .legame{margin:0 auto}
  .offerte__tutte .btn{width:100%}
  .rotaia--tel{display:block}
  html:not(.js) .rotaia--tel{display:none}
  /* lista nozze: la lente, gli anelli e il disco restano dentro lo schermo; sotto, il titolo ha il suo spazio */
  .nozze__vista{width:min(84%,420px);margin-bottom:22px}
  .anelli{left:-4%;top:-4%;width:108%;height:108%}
  .nozze__az{display:grid}
  .nozze__componi{width:100%}
  .recapiti{grid-template-columns:1fr}
  .recapito{min-height:88px}
  .riepilogo .btn{flex:1 1 100%}
  .copia{flex:1 1 100%}
  .piede__c{flex-wrap:wrap}
  .piede__c p{flex:1 1 100%}
}

/* =====================================================================================================
   SEMPRE A PORTATA: la barra del telefono, il bigliettino del computer, l'avviso
   ===================================================================================================== */
.dock{position:fixed;left:0;right:0;bottom:0;z-index:50;display:none;padding:8px 12px calc(8px + var(--sab));background:var(--bianco);box-shadow:0 -16px 34px -18px rgba(34,46,82,.45);color:var(--navy);visibility:hidden;transform:translateY(120%);transition:transform .45s var(--ease),visibility 0s .45s}
.dock.is-su{visibility:visible;transform:none;transition-delay:0s}
/* la barra ha due facce, una sopra l'altra nella stessa cella: le azioni rapide e, dentro "Componi", il biglietto in piccolo.
   Quella che non serve è trasparente e non si può toccare; il passaggio è una dissolvenza con un piccolo scatto */
.dock__f,.dock__b{grid-area:1/1;min-width:0;transition:opacity .25s,transform .35s var(--ease)}
.dock.is-componi .dock__f,.dock:not(.is-componi) .dock__b{opacity:0;visibility:hidden;transform:translateY(12px);pointer-events:none;transition:opacity .18s,transform .3s var(--ease),visibility 0s .3s}
.dock__f{display:grid;grid-template-columns:1fr 1.1fr 1.44fr;gap:8px}
.dock__a{display:flex;align-items:center;justify-content:center;gap:7px;min-width:0;min-height:50px;padding:0 8px;border-radius:999px;border:1.5px solid var(--navy);font-weight:500;font-size:.98rem;text-decoration:none;white-space:nowrap;color:var(--navy)}
.dock__a .ico{width:19px;height:19px}
.dock__navy{position:relative;border-color:var(--navy);background:var(--navy);color:#fff;padding:0 6px 0 14px;justify-content:space-between}
.dock__navy .conta{min-width:38px;height:30px;font-size:.88rem}
.dock__invia{display:none}
.dock.is-pronto .dock__bigl-t{display:none}
.dock.is-pronto .dock__invia{display:inline}
/* dentro "Componi": un biglietto navy col bordo a lamina, come quello vero. A ogni scelta stampa il valore e si muove;
   la matrice d'oro a destra porta il contatore (poi "Invia") */
.dock__b{position:relative;display:grid;grid-template-columns:40px minmax(0,1fr) auto;align-items:center;gap:10px;min-height:50px;padding:5px 5px 5px 7px;border-radius:17px;background:var(--navy-oggetto);text-decoration:none;color:#fff}
.dock__b::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:2px;background:var(--lamina);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);pointer-events:none}
.dock__lente{position:relative;width:40px;height:40px;border-radius:50%;overflow:hidden;background:var(--navy-fondo);box-shadow:inset 0 0 0 2px var(--oro)}
.dock__lente img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.dock__lente img:first-child{padding:5px}
.dock__lente img+img{border-radius:50%;border:2px solid var(--oro)}
.dock__c{min-width:0}
.dock__r{display:flex;align-items:center;gap:7px;min-width:0;font:500 .9375rem/1.15 var(--titoli);letter-spacing:.05em;text-transform:uppercase;white-space:nowrap}
.dock__r .ico{width:15px;height:15px;color:var(--oro-chiaro)}
.dock__r span:last-child{min-width:0;overflow:hidden;text-overflow:ellipsis}
.dock__r span:empty::before{content:"";display:block;width:3.4em;height:.56em;border-radius:99px;background:rgba(220,225,240,.26)}
/* un nome lungo prende tutta la riga: "Roma" e l'aereo si tolgono */
.dock.is-lungo .dock__da,.dock.is-lungo .dock__r .ico{display:none}
.dock.is-lungo .dock__r{font-size:.875rem;letter-spacing:.03em}
.dock__s{display:block;margin-top:3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.875rem;line-height:1.2;color:var(--oro-chiaro)}
.dock__vai{display:flex;align-items:center;gap:6px;min-height:40px;padding:0 12px;border-radius:12px;background:var(--lamina-ferma);color:var(--navy-fondo);font-weight:600;font-size:1rem}
.dock__vai .conta{min-width:0;height:auto;padding:0;background:none;font-size:1rem}
@media (max-width:700px){
  .dock{display:grid}
}
/* telefoni stretti: la barra e le etichette del biglietto si stringono appena */
@media (max-width:380px){
  .dock{padding-inline:10px}
  .dock__f{grid-template-columns:auto auto minmax(0,1fr)}
  .dock__a{padding:0 9px;gap:5px;font-size:.9rem}
  .dock__a .ico{width:17px;height:17px}
  .dock__navy{padding:0 5px 0 12px}
  .dock__navy .conta{min-width:36px;padding:0 7px}
  .dock__vai .dock__bigl-t{display:none}
  .tappa b,.tappa--piu b{font-size:.875rem}
  .is-vert .pannello__n{font-size:1.375rem}
  .bigl__campi dt,.bigl__et{letter-spacing:.08em}
}
/* computer: il bigliettino navy e oro in basso a destra, con le tacche ai lati */
.mini{position:fixed;right:max(18px,2.2vw);bottom:22px;z-index:50;display:none;padding:0;border:0;background:none;text-decoration:none;filter:drop-shadow(0 16px 18px rgba(24,32,66,.4));opacity:0;visibility:hidden;transform:translateY(26px);pointer-events:none;transition:opacity .3s,transform .45s var(--ease),visibility 0s .45s}
.mini.is-su{opacity:1;visibility:visible;transform:none;pointer-events:auto;transition-delay:0s}      /* nascosto, non prende nemmeno il fuoco della tastiera */
.mini__in{display:flex;align-items:center;min-height:64px;padding:2.5px;border-radius:17px;background:var(--lamina);-webkit-mask:radial-gradient(circle 9px at 0 50%,#0000 96%,#000) left/51% 100% no-repeat,radial-gradient(circle 9px at 100% 50%,#0000 96%,#000) right/51% 100% no-repeat;mask:radial-gradient(circle 9px at 0 50%,#0000 96%,#000) left/51% 100% no-repeat,radial-gradient(circle 9px at 100% 50%,#0000 96%,#000) right/51% 100% no-repeat}
.mini__c{display:flex;align-items:center;gap:14px;min-height:59px;padding:0 24px 0 26px;border-radius:14.5px;background:linear-gradient(120deg,var(--navy-su),var(--navy) 60%,var(--navy-fondo));color:#fff;font-weight:500;white-space:nowrap}
.mini .ico{width:22px;height:22px;color:var(--oro-chiaro)}
.mini .punti{color:var(--oro-chiaro)}
.mini__ok{display:none;color:var(--oro-luce)}
.mini.is-pronto .punti,.mini.is-pronto .mini__t{display:none}
.mini.is-pronto .mini__ok{display:inline}
@media (min-width:701px){html.js .mini{display:block}}
@media (hover:hover){.mini.is-su:hover{transform:translateY(-4px)}}
.avviso{position:fixed;left:0;right:0;bottom:calc(28px + var(--sab));z-index:70;display:flex;align-items:center;gap:10px;width:max-content;max-width:calc(100% - 32px);margin-inline:auto;min-height:52px;padding:0 24px 0 8px;border-radius:999px;background:var(--navy);box-shadow:0 20px 36px -14px rgba(24,32,66,.7);color:#fff;font-weight:500;pointer-events:none}
.avviso i{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--lamina-ferma);color:var(--navy-fondo)}
.avviso .ico{width:17px;height:17px;stroke-width:3.6;stroke-linecap:butt;stroke-linejoin:miter}
@media (max-width:700px){.avviso{bottom:calc(84px + var(--sab))}}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition-duration:.01ms!important}
}

/* ---------------------------------------------------------------------------------------------------------
   MODULI · il blocco "per e-mail": indirizzo a cui rispondere, conferma della privacy policy, invio.
   Resta chiuso finché non si sceglie "Invia per e-mail" (lo apre js/posta.js); senza script è sempre visibile
   --------------------------------------------------------------------------------------------------------- */
.posta{margin-top:18px;padding-top:18px;border-top:1.5px dashed var(--oro-chiaro)}
.posta[hidden]{display:none}
.posta.is-aperta{animation:posta-su .34s var(--ease) both}
@keyframes posta-su{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}
.posta__t{font:500 1.2rem/1.3 var(--titoli);color:var(--navy)}
.posta__campi{display:grid;grid-template-columns:1fr 1fr;gap:12px;align-items:start;margin-top:12px}
.posta__trappola{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.campo--consenso{margin-top:12px}
.campo .consenso{display:flex;width:auto;align-items:center;gap:12px;min-height:44px;margin:0;font-weight:500;font-size:1rem;line-height:1.4;color:var(--navy);cursor:pointer}
.campo .consenso input{flex:none;display:block;width:28px;height:28px;min-height:0;padding:0;border-radius:9px;-webkit-appearance:none;appearance:none;cursor:pointer;background-position:center;background-repeat:no-repeat;background-size:18px 18px}
.campo .consenso input:checked{background-color:var(--navy);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F0E3C6' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 12.5l5 5 10-11'/%3E%3C/svg%3E")}
.consenso a{color:var(--navy);font-weight:500;text-decoration:underline;text-underline-offset:3px}
.posta__vai{width:100%;margin-top:14px}
.is-invio button[type="submit"]{opacity:.6;pointer-events:none}
@media (max-width:700px){ .posta__campi{grid-template-columns:1fr} }
@media (prefers-reduced-motion:reduce){ .posta.is-aperta{animation:none} }

/* ---- avviso sui cookie (js/cookie.js): una scheda in basso, bianca con il filetto d'oro ---- */
.ck{position:fixed;z-index:90;left:max(16px,env(safe-area-inset-left,0px));bottom:calc(16px + var(--sab));width:min(560px,calc(100vw - 32px));padding:22px 24px 22px;border-radius:18px;border-top:4px solid var(--oro);background:var(--bianco);color:var(--testo);box-shadow:var(--ombra-su);opacity:0;transform:translateY(24px);transition:opacity .26s var(--ease),transform .26s var(--ease)}
.ck[hidden]{display:none}
.ck--su{opacity:1;transform:none}
.ck__t{font:500 1.375rem/1.2 var(--titoli);color:var(--navy)}
.ck__p{margin-top:8px;font-size:1rem;line-height:1.5}
.ck__p a{color:var(--navy);text-decoration:underline;text-decoration-color:var(--oro);text-underline-offset:3px}
.ck__b{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.ck__bt{flex:1 1 150px;min-height:48px;padding:10px 22px;border:2px solid var(--navy);border-radius:999px;background:var(--bianco);font:500 1rem/1.2 var(--titoli);color:var(--navy);cursor:pointer;transition:background .2s,color .2s}
.ck__bt--p{background:var(--navy);color:#fff}
@media (hover:hover){
  .ck__bt:hover{background:var(--velo)}
  .ck__bt--p:hover{background:var(--navy-su)}
}
.ck :focus-visible{outline:3px solid var(--oro);outline-offset:3px}
@media (max-width:600px){
  .ck{left:12px;right:12px;bottom:calc(12px + var(--sab));width:auto;padding:18px 18px 16px}
  .ck__b{flex-direction:column}
  .ck__bt{flex:none;width:100%}
}
@media (prefers-reduced-motion:reduce){ .ck{transition:none;transform:none} }