/* Tinky Winky · homepage "in volo"
   La pagina è l'interno del disco del logo: siamo in cielo, scorrere è il volo.
   Due forme fanno tutto: il CERCHIO (l'oblò) e il FINESTRINO d'aereo. L'aereo del logo accompagna la visita.
   Colori: solo gli azzurri del marchio. Movimento: solo transform, opacity e clip-path.
   Senza JavaScript o con "movimento ridotto" è una pagina statica e completa: ogni stato iniziale delle
   animazioni vale solo sotto html.js:not(.rm). */

:root{
  --cielo:#25A3DE; --rotta:#1178BF; --mare:#0A5A94; --notte:#072A49; --nuvola:#F3F9FD; --brina:#D9EDFA; --bianco:#FFFFFF;
  --testo:#23455F; --testo-2:#4B6B85; --su-notte:#CFE4F4;
  --display:"Quicksand","Avenir Next","Segoe UI",system-ui,sans-serif;
  --text:"Nunito Sans","Segoe UI",system-ui,-apple-system,sans-serif;
  --ease:cubic-bezier(.2,.8,.2,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:1280px;                                /* larghezza massima del contenuto */
  --sez:clamp(84px,11vw,164px);                /* respiro sopra e sotto ogni sezione */
  --arco:clamp(34px,7vw,104px);                /* freccia dei bordi curvi tra le sezioni */
  --orlo-h:clamp(52px,8vw,118px);              /* altezza del profilo di nuvole */
  /* profili di nuvole ripetibili in orizzontale, usati come maschera */
  --orlo-1:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1100 140' preserveAspectRatio='none'%3E%3Cpath d='M0 140L0 55.2L5 50.7L10 47.1L15 44L20 41.5L25 39.5L30 38L35 36.8L40 36L45 35.6L50 35.6L55 35.9L60 36.6L65 37.7L70 39.2L75 41.1L80 43.5L85 46.4L90 49.9L95 54.1L100 52.9L105 48.4L110 44.7L115 41.6L120 39.1L125 37L130 35.4L135 34.2L140 33.4L145 32.9L150 32.8L155 33.1L160 33.7L165 34.7L170 36.1L175 37.9L180 40.2L185 43L190 46.4L195 44.4L200 41L205 38.3L210 36.3L215 34.7L220 33.7L225 33.1L230 33L235 33.4L240 34.2L245 35.5L250 37.3L255 39.7L260 38.1L265 33.2L270 29L275 25.4L280 22.3L285 19.6L290 17.4L295 15.5L300 14L305 12.8L310 11.9L315 11.3L320 11L325 11L330 11.3L335 11.9L340 12.8L345 14L350 15.5L355 17.4L360 19.6L365 22.2L370 25.3L375 28.9L380 33.1L385 38L390 43.8L395 48.8L400 48.9L405 49.5L410 50.6L415 52.2L420 54.5L425 57.5L430 61.4L435 66.4L440 63.7L445 61.3L450 59.6L455 58.5L460 58L465 57.9L470 58.4L475 59.4L480 61L485 63.2L490 66.2L495 67.1L500 61.6L505 57L510 53.1L515 49.8L520 47L525 44.7L530 42.8L535 41.3L540 40.1L545 39.2L550 38.7L555 38.5L560 38.6L565 39.1L570 39.8L575 40.9L580 42.4L585 44.2L590 43.4L595 40.1L600 37.6L605 35.8L610 34.6L615 34L620 33.9L625 34.4L630 35.4L635 33.3L640 29.3L645 26L650 23.5L655 21.6L660 20.2L665 19.3L670 18.8L675 18.8L680 19.3L685 20.2L690 21.6L695 23.6L700 26.1L705 29.3L710 33.4L715 33.3L720 31.7L725 30.6L730 29.8L735 29.3L740 29.3L745 29.6L750 30.2L755 31.3L760 32.7L765 34.6L770 36.9L775 39.7L780 43.2L785 47.3L790 52.4L795 54.6L800 51.1L805 48.2L810 45.8L815 43.8L820 42.3L825 41.1L830 40.3L835 39.9L840 39.8L845 40.1L850 40.7L855 41.7L860 43L865 44.8L870 47L875 49.7L880 51.1L885 46.9L890 43.3L895 40.2L900 37.6L905 35.5L910 33.8L915 32.4L920 31.3L925 30.6L930 30.2L935 30.2L940 30.4L945 31L950 31.9L955 33.1L960 34.7L965 36.6L970 39L975 41.8L980 45.2L985 49.1L990 53.8L995 59.3L1000 65.4L1005 63.5L1010 62L1015 60.8L1020 59.8L1025 59.1L1030 58.7L1035 58.6L1040 58.7L1045 59L1050 59.7L1055 60.6L1060 61.8L1065 63.2L1070 65L1075 67.1L1080 69.5L1085 72.3L1090 67.6L1095 60.6L1100 55.2L1100 140Z'/%3E%3C/svg%3E");
  --orlo-2:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 960 140' preserveAspectRatio='none'%3E%3Cpath d='M0 140L0 55.8L5 55.7L10 55.5L15 52.6L20 50.2L25 48.3L30 46.9L35 45.9L40 45.4L45 45.2L50 45.4L55 46L60 47L65 48.4L70 50.3L75 52.7L80 55.6L85 59.2L90 63.7L95 62.5L100 58.7L105 55.6L110 52.9L115 50.7L120 48.9L125 47.4L130 46.3L135 45.6L140 45.2L145 45.1L150 45.3L155 45.9L160 46.7L165 48L170 49.6L175 51.5L180 53.9L185 56.8L190 60.2L195 53.1L200 45.1L205 40L210 36.4L215 33.8L220 32L225 31L230 30.6L235 30.8L240 31.8L245 33.4L250 35.8L255 39.2L260 44L265 51.2L270 64.7L275 61.6L280 59.2L285 57.2L290 55.7L295 54.6L300 53.9L305 53.6L310 53.7L315 54.1L320 48.1L325 40.7L330 35.2L335 30.9L340 27.5L345 24.8L350 22.6L355 21L360 19.9L365 19.2L370 19L375 19.2L380 19.9L385 21L390 22.6L395 24.7L400 27.4L405 22.7L410 18.6L415 15.3L420 12.7L425 10.6L430 8.9L435 7.8L440 7L445 6.7L450 6.8L455 7.3L460 8.2L465 9.5L470 11.3L475 13.6L480 16.5L485 20L490 24.4L495 29.9L500 37.1L505 47.8L510 54.5L515 55.1L520 56.2L525 57.9L530 60.2L535 63.2L540 61.6L545 57.2L550 53.9L555 51.4L560 49.7L565 48.6L570 48.1L575 48.2L580 41.3L585 34.7L590 29.6L595 25.4L600 22L605 19.3L610 17.1L615 15.4L620 14.1L625 13.2L630 12.8L635 12.7L640 13L645 13.8L650 14.9L655 16.5L660 18.5L665 21.1L670 24.3L675 23.2L680 21.3L685 19.7L690 18.5L695 17.7L700 17.2L705 17.1L710 17.2L715 17.8L720 18.6L725 19.9L730 21.5L735 23.5L740 25.9L745 28.9L750 32.4L755 36.5L760 41.6L765 47.7L770 54.8L775 53.6L780 52.8L785 52.3L790 52.1L795 52.2L800 52.6L805 53.4L810 54.5L815 55.9L820 57.7L825 57.7L830 53.1L835 49.2L840 45.9L845 43.1L850 40.7L855 38.8L860 37.3L865 36.1L870 35.2L875 34.7L880 34.5L885 34.6L890 35L895 35.8L900 36.9L905 38.3L910 40.1L915 42.4L920 45L925 48.2L930 51.9L935 56.3L940 61.6L945 59.5L950 57.7L955 56.5L960 55.8L960 140Z'/%3E%3C/svg%3E");
}

*,*::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:24px}
html.rm{scroll-behavior:auto}
html.ha-menu{overflow:hidden}
body{margin:0;background:var(--nuvola);color:var(--testo);font:400 1.0625rem/1.6 var(--text);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
h1,h2,h3,p,ul,ol,dl,dd,figure{margin:0}
ul,ol{padding:0;list-style:none}
img,svg{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}
:focus-visible{outline:3px solid var(--rotta);outline-offset:3px;border-radius:10px}
.hero :focus-visible,.sez--notte :focus-visible,.sez--banda :focus-visible,.piede :focus-visible,.menu :focus-visible{outline-color:#fff}
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}
.ico{width:1.25em;height:1.25em;flex:none;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.ico--s{width:.95em;height:.95em;stroke-width:2.4}
.salta{position:fixed;left:16px;top:12px;z-index:100;padding:12px 18px;border-radius:999px;background:#fff;color:var(--mare);font-weight:700;transform:translateY(-200%)}
.salta:focus{transform:none}

@keyframes deriva{from{transform:translate3d(-2.5vw,0,0)}to{transform:translate3d(3.5vw,0,0)}}
@keyframes scorri{to{transform:translate3d(-50%,0,0)}}

/* ---------- titoli: minuscoli come il marchio. Una riga piena, la successiva leggera (come "tinky" e "winky") ---------- */
.tit{font:700 clamp(2rem,4.4vw,3.8rem)/1.06 var(--display);letter-spacing:-.02em;text-transform:lowercase;color:var(--notte);text-wrap:balance}
.tit--3{font-size:clamp(1.6rem,2.8vw,2.4rem)}
.ln{display:block;overflow:hidden;padding-bottom:.16em;margin-bottom:-.16em}
.ln__i{display:block}
.ln--l{font-weight:300}
.testa{max-width:46rem;margin-bottom:clamp(36px,5vw,68px)}
.testa__p{margin-top:clamp(14px,1.6vw,22px);max-width:33em;font-size:clamp(1.06rem,1.25vw,1.2rem)}
.testa--riga{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;max-width:none}

/* ---------- pulsanti e link ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:54px;padding:14px 26px;border-radius:999px;border:1.5px solid transparent;background:var(--rotta);color:#fff;font:700 1rem/1.15 var(--text);text-decoration:none;white-space:nowrap;cursor:pointer;transition:background-color .2s,color .2s,border-color .2s,transform .2s var(--ease)}
.btn .ico{transition:transform .25s var(--ease)}
.btn:active{transform:scale(.97)}
.btn--bianco{background:#fff;color:var(--mare)}
.btn--vetro{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.8);color:#fff}
.btn--sm{min-height:46px;padding:10px 20px;font-size:.95rem}
.tondo{display:grid;place-items:center;flex:none;width:48px;height:48px;padding:0;border-radius:50%;border:1.5px solid transparent;background:none;color:inherit;text-decoration:none;transition:background-color .2s,color .2s,border-color .2s,transform .25s var(--ease)}
.tondo .ico{width:20px;height:20px}
.tondo--bianco{background:#fff;color:var(--mare)}
.tondo--vetro{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.45);color:#fff}
.tondo--linea{border-color:#A9D3EE;color:var(--mare);background:#fff}
.tondo--linea:disabled{opacity:.35;cursor:default}
.lnk{display:inline-block;padding:9px 0;color:var(--mare);font-weight:700;line-height:1.55;text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:5px;text-decoration-color:#A9D3EE}
.nb{white-space:nowrap}
.lnk .ico{display:inline-block;margin-left:8px;vertical-align:-.26em;transition:transform .25s var(--ease)}
.lnk--g{font-size:1.12rem}
@media (hover:hover){
  .btn:hover{background:var(--mare)}
  .btn--bianco:hover{background:var(--notte);color:#fff}
  .btn--vetro:hover{background:#fff;color:var(--mare);border-color:#fff}
  .btn:hover .ico,.lnk:hover .ico,a:hover>.pass__vai .ico{transform:translateX(4px)}
  .lnk:hover{text-decoration-color:currentColor}
  .tondo--vetro:hover{background:#fff;color:var(--mare);border-color:#fff}
  .tondo--linea:not(:disabled):hover{background:var(--rotta);border-color:var(--rotta);color:#fff}
}

/* =====================================================================================================
   INTESTAZIONE
   Sopra l'hero è trasparente con il logo bianco. Dopo l'hero diventa una barra bianca.
   Scorrendo in giù si nasconde, scorrendo in su ritorna (solo transform).
   ===================================================================================================== */
.top{position:fixed;top:0;left:0;right:0;z-index:50;padding-top:var(--sat);color:#fff;border-bottom:1px solid transparent;transition:transform .38s var(--ease),background-color .25s,color .25s,border-color .25s}
.top__in{display:flex;align-items:center;gap:clamp(12px,2vw,36px);height:var(--hd);padding-inline:clamp(20px,3.2vw,48px)}
.top.is-solida,.top.ha-pannello{background:#fff;color:var(--notte);border-bottom-color:var(--brina)}
.top.is-nascosta{transform:translate3d(0,-100%,0)}
html.rm .top,html.rm .azioni{transition:none}
.marchio{position:relative;display:block;flex:none;height:38px;aspect-ratio:1330/262}
.marchio::after,.piede__logo::after{content:"";position:absolute;top:-8px;right:-6px;bottom:-8px;left:-6px}
.marchio img{position:absolute;top:0;left:0;width:100%;height:100%;transition:opacity .25s}
.marchio__c{opacity:0}
.top.is-solida .marchio__c,.top.ha-pannello .marchio__c{opacity:1}
.top.is-solida .marchio__b,.top.ha-pannello .marchio__b{opacity:0}
.nav{display:none;margin-inline:auto}
.nav__l{display:flex}
.nav__a{position:relative;display:flex;align-items:center;gap:5px;height:var(--hd);padding:0 clamp(8px,1vw,15px);font-weight:700;font-size:.97rem;text-decoration:none;white-space:nowrap}
.nav__a::after{content:"";position:absolute;left:clamp(8px,1vw,15px);right:clamp(8px,1vw,15px);bottom:24px;height:2px;border-radius:2px;background:currentColor;transform:scaleX(0);transform-origin:0 50%;transition:transform .3s var(--ease)}
.top__dx{display:flex;align-items:center;gap:clamp(8px,1.2vw,18px);margin-left:auto}
.top__tel{display:grid;place-items:center;width:48px;height:48px;border-radius:50%;border:1.5px solid rgba(255,255,255,.55);font:700 1rem var(--display);text-decoration:none;white-space:nowrap}
.top__tel span{display:none}
.top__tel .ico{width:20px;height:20px}
.top__cta{display:none;background:#fff;color:var(--mare)}
.top.is-solida .top__tel,.top.is-solida .top__menu,.top.ha-pannello .top__tel{border-color:#A9D3EE;color:var(--mare)}
.top.is-solida .top__cta,.top.ha-pannello .top__cta{background:var(--rotta);color:#fff}
.top__menu{border-color:rgba(255,255,255,.55)}
html:not(.js) .top__menu{display:none}
/* senza JavaScript l'intestazione non può cambiare colore: resta in cima alla pagina, sopra l'hero */
html:not(.js) .top{position:absolute}

/* la rotta in piccolo (telefono e tablet): una linea sotto l'intestazione, l'aereo in punta */
.avanza{position:absolute;left:0;right:0;top:100%;height:3px;color:#fff;pointer-events:none}
.top.is-solida .avanza{color:var(--rotta)}
.avanza__l{position:absolute;top:0;left:0;width:100%;height:100%;background:currentColor;transform:scaleX(0);transform-origin:0 50%}
.avanza__a{position:absolute;left:-13px;top:-6px;display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:#fff;color:var(--rotta);box-shadow:0 0 0 1.5px #BBDDF3,0 0 10px rgba(7,42,73,.22);opacity:0;transform:rotate(49deg);transition:opacity .3s}
.avanza__a svg{width:16px;height:16px;fill:currentColor}
.avanza.is-volo .avanza__a{opacity:1}
/* con l'intestazione nascosta resta solo la linea sul bordo alto: il dischetto coprirebbe il testo che scorre */
.top.is-nascosta .avanza.is-volo .avanza__a{opacity:0}
html:not(.js) .avanza,html.rm .avanza{display:none}

/* pannello delle destinazioni (schermi larghi) */
.pannello{position:absolute;left:0;right:0;top:100%;background:#fff;color:var(--notte);border-top:1px solid var(--brina);border-radius:0 0 36px 36px;box-shadow:0 36px 60px -36px rgba(7,42,73,.45);opacity:0;visibility:hidden;transform:translate3d(0,-10px,0);transition:opacity .2s,transform .28s var(--ease),visibility 0s .28s}
.nav__dd:hover .pannello,.nav__dd:focus-within .pannello{opacity:1;visibility:visible;transform:none;transition-delay:0s}
.nav.is-chiusa .pannello{opacity:0!important;visibility:hidden!important}
.pannello__in{display:grid;grid-template-columns:minmax(250px,.85fr) 2.2fr;gap:clamp(32px,4.5vw,72px);width:min(100% - 2 * var(--px),var(--max));margin-inline:auto;padding:34px 0 40px}
.pannello__t{margin-bottom:14px;font:700 1.05rem var(--display);color:var(--testo-2)}
.pannello__stili li+li{margin-top:4px}
.pannello__stili a{display:flex;align-items:center;gap:16px;padding:8px 10px 8px 8px;border-radius:999px;text-decoration:none;transition:background-color .2s}
.pannello__stili img{width:60px;height:60px;border-radius:50%;object-fit:cover;flex:none}
.pannello__stili b{display:block;font:700 1.05rem/1.2 var(--display)}
.pannello__stili small{font-size:.875rem;color:var(--testo-2)}
.pannello__g{display:grid;grid-template-columns:repeat(9,minmax(0,1fr));gap:6px;margin-bottom:10px}
.pannello__g a{display:grid;justify-items:center;gap:8px;padding:8px 2px;border-radius:18px;text-align:center;text-decoration:none;font-weight:700;font-size:.875rem;line-height:1.2}
.pannello__g img{width:min(100%,64px);aspect-ratio:1;border-radius:50%;object-fit:cover;transition:transform .35s var(--ease)}
@media (hover:hover){
  .nav__a:hover::after,.nav__dd:hover>.nav__a::after{transform:scaleX(1)}
  .pannello__stili a:hover{background:var(--nuvola)}
  .pannello__g a:hover img{transform:scale(1.1)}
  .pannello__g a:hover{color:var(--mare)}
}
.nav__a:focus-visible::after{transform:scaleX(1)}

/* menu a tutto schermo: si apre con un cerchio che parte dal pulsante */
.menu{position:fixed;top:0;right:0;bottom:0;left:0;z-index:60;display:flex;flex-direction:column;gap:20px;padding:var(--sat) 24px calc(22px + var(--sab));overflow-y:auto;overscroll-behavior:contain;color:#fff;background:linear-gradient(135deg,#1C8FD0 0%,var(--rotta) 38%,var(--mare) 100%)}
.menu__top{display:flex;align-items:center;justify-content:space-between;height:var(--hd);flex:none;margin-inline:-4px}
.menu__top img{height:32px;width:auto}
.menu__l{display:grid}
.menu__l a{display:flex;align-items:center;min-height:58px;font:700 clamp(1.7rem,7.4vw,2.3rem)/1.1 var(--display);text-transform:lowercase;letter-spacing:-.01em;text-decoration:none}
.menu__giu{margin-top:auto;padding-top:20px;border-top:1px solid rgba(255,255,255,.28)}
.menu__ris{display:inline-flex;align-items:center;gap:10px;min-height:48px;font-weight:700;text-decoration:none}
.menu__c{display:grid;gap:8px;margin-top:8px}
.menu__c a{display:flex;align-items:center;gap:14px;min-height:52px;font:700 1.1rem var(--display);text-decoration:none}

/* =====================================================================================================
   1. HERO
   Il gradiente del disco del logo (dal celeste al blu), nuvole a tre profondità, l'oblò con l'orbita.
   ===================================================================================================== */
.hero{--fondo:clamp(88px,10vw,140px);--D:max(260px,min(37vw,calc((100vh - var(--hd) - var(--fondo) - 84px) / 1.19),620px));--pl:clamp(46px,4.7vw,72px);
  position:relative;z-index:3;isolation:isolate;overflow:hidden;display:flex;align-items:center;
  min-height:max(620px,100vh);padding:calc(var(--hd) + var(--sat) + 8px) 0 var(--fondo);color:#fff;
  background:linear-gradient(135deg,var(--cielo) 0%,#1A8BCD 13%,var(--rotta) 30%,#0E6CB1 100%)}
@supports (height:1svh){ .hero{--D:max(260px,min(37vw,calc((100svh - var(--hd) - var(--fondo) - 84px) / 1.19),620px));min-height:max(620px,100svh)} }
.hero__in{position:relative;z-index:3;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:1vw;width:min(100% - 2 * var(--px),1500px);margin-inline:auto}
.hero__h{font:700 clamp(2.7rem,5.3vw,5.75rem)/1.04 var(--display);letter-spacing:-.02em;text-transform:lowercase}
.hero__lede{max-width:29em;margin-top:clamp(16px,2vw,28px);font-size:clamp(1.06rem,1.3vw,1.25rem);font-weight:500;line-height:1.55}
.hero__cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:clamp(24px,3vw,40px)}

/* l'oblò e l'orbita. Le misure dipendono tutte da --D, il diametro */
.hero__vista{position:relative;margin-right:calc(var(--px) * -.62)}
.orbita{position:relative;width:calc(var(--D) * 1.34);height:calc(var(--D) * 1.19)}
.orbita__svg{position:absolute;top:0;left:0;z-index:1;width:100%;height:100%;overflow:visible;fill:none}
.orbita__linea{stroke:rgba(255,255,255,.6);stroke-width:1.6px;stroke-dasharray:2 9;stroke-linecap:round;vector-effect:non-scaling-stroke}
.orbita__scia{stroke:#fff;stroke-width:1.1;stroke-linecap:round}
.orbita__scia--l{opacity:.34;stroke-dasharray:240 760;stroke-dashoffset:-599}
.orbita__scia--c{opacity:.88;stroke-dasharray:110 890;stroke-dashoffset:-729}
.orbita__decollo{stroke:#fff;stroke-width:2.6;stroke-linecap:round;stroke-dasharray:1 1;stroke-dashoffset:1;opacity:0}
.oblo{position:relative;border-radius:50%;overflow:hidden;background:var(--mare);transform:translateZ(0)}
.oblo__img{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;visibility:hidden}
.oblo__img.is-on,.oblo__img.is-su{visibility:visible}
.oblo__img.is-su{z-index:2}
.oblo--hero{position:absolute;left:50%;top:50%;z-index:2;width:var(--D);height:var(--D);margin:calc(var(--D) * -.5) 0 0 calc(var(--D) * -.5);box-shadow:0 0 0 clamp(5px,.55vw,9px) #fff,0 50px 80px -40px rgba(7,42,73,.65)}
/* l'aereo: senza JavaScript resta fermo in alto sull'orbita */
.volo{position:absolute;left:50%;top:50%;z-index:3;width:var(--pl);height:var(--pl);margin:calc(var(--pl) * -.5) 0 0 calc(var(--pl) * -.5);pointer-events:none;transform:translate(calc(var(--D) * .12),calc(var(--D) * -.5435)) rotate(53deg)}
.volo svg{width:100%;height:100%;fill:#fff}
/* didascalia: accanto all'oblò, in basso a destra */
.dida{position:absolute;z-index:4;right:calc(var(--D) * .02);top:calc(100% + var(--D) * .03);display:grid;grid-template-columns:auto 48px;align-items:center;column-gap:16px;text-align:right;text-decoration:none}
.dida__r{display:block;grid-column:1;overflow:hidden;padding-bottom:.1em;margin-bottom:-.1em}
.dida__nome{display:block;font:700 clamp(1.3rem,1.9vw,1.75rem)/1.2 var(--display)}
.dida__n{display:block;font-weight:600;font-size:.98rem}
.dida__go{grid-column:2;grid-row:1 / 3}
.scelta{display:flex;gap:10px;padding:calc(var(--D) * .03 + 3px) 0 0 calc(var(--D) * .03)}
.scelta__b{position:relative;width:clamp(38px,calc(var(--D) * .09),46px);height:clamp(38px,calc(var(--D) * .09),46px);padding:0;border:0;border-radius:50%;background:rgba(255,255,255,.22);transition:transform .3s var(--ease)}
.scelta__b img{width:100%;height:100%;border-radius:50%;object-fit:cover}
.scelta__b::after{content:"";position:absolute;top:-4px;right:-4px;bottom:-4px;left:-4px;border-radius:50%;border:2px solid #fff;opacity:0;transform:scale(.8);transition:opacity .25s,transform .3s var(--ease)}
.scelta__b.is-on::after{opacity:1;transform:none}
html:not(.js) .scelta{display:none}
@media (hover:hover){ .scelta__b:hover{transform:scale(1.1)} .dida:hover .dida__go{background:var(--notte);color:#fff} }
@media (pointer:coarse){ .scelta__b{width:44px;height:44px} }

/* nuvole a tre profondità */
.cielo{position:absolute;top:0;right:0;bottom:0;left:0;z-index:1;pointer-events:none}
.cielo__s,.cielo__d{position:absolute;top:0;right:0;bottom:0;left:0}
.nuv{position:absolute;fill:#fff;overflow:visible}
.nuv--1{width:34vw;aspect-ratio:300/110;left:54%;top:8%;opacity:.09}
.nuv--2{width:22vw;aspect-ratio:240/100;left:-5%;top:15%;opacity:.08}
.nuv--3{width:15vw;aspect-ratio:200/80;left:31%;top:5%;opacity:.07}
.nuv--4{width:30vw;aspect-ratio:240/100;left:-10%;top:68%;opacity:.17}
.nuv--5{width:38vw;aspect-ratio:300/110;left:62%;top:70%;opacity:.14}
.nuv--6{width:18vw;aspect-ratio:200/80;left:37%;top:80%;opacity:.13}
.nuv--7{width:26vw;aspect-ratio:200/80;left:16%;top:84%;opacity:.42}
.nuv--8{width:34vw;aspect-ratio:240/100;left:76%;top:80%;opacity:.36}
/* will-change solo mentre l'hero è sullo schermo */
html.js:not(.rm) .hero.is-viva .banco__s,html.js:not(.rm) .hero.is-viva .hero__vista,html.js:not(.rm) .hero.is-viva .volo{will-change:transform}
html.js:not(.rm) .hero.is-viva .cielo__d{animation:deriva 44s ease-in-out infinite alternate}
html.js:not(.rm) .hero.is-viva .cielo__s--2 .cielo__d{animation-duration:58s;animation-direction:alternate-reverse}
html.js:not(.rm) .hero.is-viva .cielo__s--3 .cielo__d{animation-duration:36s}

/* il banco di nuvole in fondo: tre strati con il profilo in cima. Il più vicino ha il colore della pagina */
.banco{position:absolute;top:0;right:0;bottom:0;left:0;z-index:4;pointer-events:none}
.banco__s{position:absolute;left:0;right:0;bottom:0;height:64%;background:#fff;
  -webkit-mask:var(--orlo-1) repeat-x var(--mx,0) 0 / auto var(--orlo-h),linear-gradient(#000,#000) no-repeat 0 calc(var(--orlo-h) - 1px) / 100% calc(100% - var(--orlo-h) + 1px);
  mask:var(--orlo-1) repeat-x var(--mx,0) 0 / auto var(--orlo-h),linear-gradient(#000,#000) no-repeat 0 calc(var(--orlo-h) - 1px) / 100% calc(100% - var(--orlo-h) + 1px);
  transform:translate3d(0,calc(100% - var(--su)),0)}
.banco__s--1{--su:calc(var(--fondo) * .9);--mx:-31vw;opacity:.4}
.banco__s--2{--su:calc(var(--fondo) * .72);--mx:-12vw;opacity:.72;-webkit-mask-image:var(--orlo-2),linear-gradient(#000,#000);mask-image:var(--orlo-2),linear-gradient(#000,#000)}
.banco__s--3{--su:calc(var(--fondo) * .52);--mx:-47vw;background:var(--nuvola)}

/* le nuvole che si aprono all'ingresso (solo con le animazioni) */
.sipario{display:none}
html.js:not(.rm) .hero:not(.is-aperta) .sipario{display:block;position:absolute;top:0;right:0;bottom:0;left:0;z-index:6;pointer-events:none}
.sipario__l{position:absolute;top:-6%;bottom:-6%;width:66%}
.sipario__l--sx{left:-8%}
.sipario__l--dx{right:-8%}
.sipario__l::before{content:"";position:absolute;top:0;bottom:0;background:#fff}
.sipario__l--sx::before{left:-20%;right:20vh}
.sipario__l--dx::before{right:-20%;left:20vh}
.sipario__l i{position:absolute;border-radius:50%;background:#fff}
.sipario__l i:nth-child(1){width:46vh;height:46vh;top:-8%}
.sipario__l i:nth-child(2){width:38vh;height:38vh;top:22%}
.sipario__l i:nth-child(3){width:50vh;height:50vh;top:46%}
.sipario__l i:nth-child(4){width:42vh;height:42vh;top:76%}
.sipario__l--sx i:nth-child(1){right:2vh} .sipario__l--sx i:nth-child(2){right:-6vh} .sipario__l--sx i:nth-child(3){right:4vh} .sipario__l--sx i:nth-child(4){right:-3vh}
.sipario__l--dx i:nth-child(1){left:-4vh} .sipario__l--dx i:nth-child(2){left:5vh} .sipario__l--dx i:nth-child(3){left:-5vh} .sipario__l--dx i:nth-child(4){left:3vh}

/* stati iniziali dell'ingresso: valgono finché la sequenza non parte */
html.js:not(.rm) .hero:not(.is-partita) .hero__h .ln__i{transform:translateY(110%)}
html.js:not(.rm) .hero:not(.is-partita) .hero__lede,
html.js:not(.rm) .hero:not(.is-partita) .hero__cta .btn,
html.js:not(.rm) .hero:not(.is-partita) .volo,
html.js:not(.rm) .hero:not(.is-partita) .orbita__linea,
html.js:not(.rm) .hero:not(.is-partita) .orbita__scia,
html.js:not(.rm) .hero:not(.is-partita) .dida,
html.js:not(.rm) .hero:not(.is-partita) .scelta__b{opacity:0}
html.js:not(.rm) .hero:not(.is-partita) .oblo--hero{transform:scale(0)}
html.js:not(.rm) body:not(.is-partita) .top__in{opacity:0}

/* =====================================================================================================
   SEZIONI: struttura comune, bordi curvi, la rotta
   ===================================================================================================== */
.sez{position:relative;padding:var(--sez) 0}
.sez>.wrap,.team{position:relative;z-index:2}
.sez--notte{background:var(--notte);color:#fff}
.sez--notte .tit{color:#fff}
.sez--notte .testa__p{color:var(--su-notte)}
.sez--lente{border-radius:50% / var(--arco);padding-block:calc(var(--sez) + var(--arco) * .35)}
.sez--arco{border-radius:50% 50% 0 0 / var(--arco) var(--arco) 0 0;padding-top:calc(var(--sez) + var(--arco) * .35)}
.sez__fine{margin-top:8px}

/* la rotta: linea tratteggiata lungo la pagina, il tratto pieno arriva fin dove si è scesi. Solo schermi larghi */
.rotta,.rotta__aereo{display:none}
@media (min-width:1100px){
  html.js:not(.rm) .rotta.is-pronta{display:block;position:absolute;left:0;top:0;z-index:1;overflow:visible;pointer-events:none}
  html.js:not(.rm) .rotta.is-pronta+.rotta__aereo{display:block;position:absolute;left:0;top:0;z-index:1;width:40px;height:40px;margin:-20px 0 0 -20px;color:var(--rotta);pointer-events:none;opacity:0;transition:opacity .25s,color .3s}
}
.rotta path{fill:none;stroke-linecap:round}
.rotta__base{stroke:var(--cielo);stroke-opacity:.55;stroke-width:2;stroke-dasharray:1 11}
.rotta__fatta{stroke:var(--cielo);stroke-width:2.5}
.rotta__base--b{stroke:#fff;stroke-opacity:.7}
.rotta__fatta--b{stroke:#fff}
.rotta__aereo svg{width:100%;height:100%;fill:currentColor}
html.js:not(.rm) .rotta.is-pronta+.rotta__aereo.is-chiaro{color:#fff}
html.js:not(.rm) .rotta.is-pronta+.rotta__aereo.is-volo{opacity:1}

/* comparse: lo stato nascosto si applica solo quando il gruppo sta per entrare (classe is-armed, messa da main.js) */
html.js:not(.rm) .is-armed:not(.is-in) [data-a="ln"] .ln__i{transform:translateY(110%)}
html.js:not(.rm) .is-armed:not(.is-in) [data-a="up"],
html.js:not(.rm) .is-armed:not(.is-in) [data-a="pop"],
html.js:not(.rm) .is-armed:not(.is-in) [data-a="figli"]>*{opacity:0}
html.js:not(.rm) .is-armed:not(.is-in) [data-a="cerchio"]{clip-path:circle(0% at 50% 50%)}

/* barra di avanzamento delle righe che scorrono in orizzontale */
.barra{display:none;position:relative;height:4px;margin-top:6px;border-radius:4px;background:var(--brina);overflow:hidden}
.barra.is-on{display:block}
.barra i{position:absolute;top:0;left:0;height:100%;width:30%;border-radius:4px;background:var(--rotta);transform-origin:0 50%}
[data-rail]{scrollbar-width:none;-ms-overflow-style:none}
[data-rail]::-webkit-scrollbar{display:none}

/* =====================================================================================================
   2. STILI DI VIAGGIO: tre finestrini d'aereo, la tendina si alza
   ===================================================================================================== */
.finestrini{display:flex;gap:clamp(14px,2.2vw,32px)}
.fin{flex:1 1 0;min-width:0;transition:flex-grow .6s var(--ease)}
.fin__a{display:block;height:clamp(420px,39vw,570px);padding:clamp(10px,1.1vw,16px);border-radius:clamp(110px,13vw,190px);background:linear-gradient(160deg,#fff 0%,#E2EFF8 100%);box-shadow:0 36px 60px -36px rgba(7,42,73,.45),inset 0 0 0 1px rgba(7,42,73,.08);color:#fff;text-decoration:none}
.fin__vetro{position:relative;display:block;height:100%;border-radius:clamp(100px,12vw,176px);overflow:hidden;background:var(--mare);transform:translateZ(0)}
.fin__vetro img{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;object-position:50% 40%;transform:scale(1.03);transition:transform 1s var(--ease)}
.fin__vetro::before{content:"";position:absolute;left:0;right:0;bottom:0;z-index:1;height:62%;background:linear-gradient(to top,rgba(7,42,73,.9) 0%,rgba(7,42,73,.62) 38%,rgba(7,42,73,0) 100%)}
.fin__vetro::after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;z-index:4;border-radius:inherit;box-shadow:inset 0 14px 30px rgba(7,42,73,.5),inset 0 0 0 5px rgba(7,42,73,.14);pointer-events:none}
.fin__txt{position:absolute;left:0;right:0;bottom:clamp(96px,10vw,124px);z-index:2;display:grid;gap:4px;padding:0 clamp(22px,2.6vw,40px);text-align:center}
.fin__nome{font:700 clamp(1.35rem,2vw,1.8rem)/1.15 var(--display);text-wrap:balance}
.fin__n{font-weight:600;font-size:.98rem}
.fin__n b{font:700 1.1rem var(--display)}
.fin__go{position:absolute;left:50%;bottom:clamp(32px,3.4vw,48px);z-index:2;margin-left:-24px}
/* la tendina: aperta resta un bordo in alto con la maniglia, come su un aereo vero */
.fin__tenda{position:absolute;top:0;left:0;z-index:3;width:100%;height:100%;background:repeating-linear-gradient(to bottom,rgba(7,42,73,0) 0 25px,rgba(7,42,73,.06) 25px 26px),linear-gradient(to bottom,#F5F9FC,#DCE9F2);box-shadow:0 10px 24px rgba(7,42,73,.35);transform:translate3d(0,-88%,0)}
.fin__tenda::after{content:"";position:absolute;left:50%;bottom:14px;width:54px;height:9px;margin-left:-27px;border-radius:9px;background:rgba(7,42,73,.2)}
html.js:not(.rm) .finestrini.is-armed .fin:not(.is-aperta) .fin__tenda{transform:none}
html.js:not(.rm) .finestrini.is-armed .fin:not(.is-aperta) .fin__txt,
html.js:not(.rm) .finestrini.is-armed .fin:not(.is-aperta) .fin__go{opacity:0}
@media (hover:hover) and (min-width:701px){
  .finestrini:hover .fin,.finestrini:focus-within .fin{flex-grow:.8}
  .finestrini .fin:hover,.finestrini .fin:focus-within{flex-grow:1.5}
  .fin:hover img,.fin:focus-within img{transform:scale(1.12)}
  .fin:hover .fin__go,.fin:focus-within .fin__go{transform:scale(1.14)}
}

/* =====================================================================================================
   3. DESTINAZIONI: il tabellone delle partenze
   ===================================================================================================== */
.partenze{display:grid;grid-template-columns:minmax(0,1fr) clamp(280px,26vw,350px);align-items:center;gap:clamp(28px,4.4vw,72px)}
.vista{order:2;display:grid;justify-items:center;gap:6px}
.tabellone{order:1;--cella:clamp(18px,1.86vw,27px);padding:8px clamp(10px,1.4vw,20px) 12px;border-radius:30px;background:#0A3458;border:1px solid rgba(217,237,250,.16)}
.tabellone__testa{display:flex;justify-content:space-between;padding:14px 12px;border-bottom:1px solid rgba(217,237,250,.16);font:700 1rem var(--display);color:#9CC6E4}
.tabellone__l{padding-top:6px}
.riga{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto 38px;align-items:center;gap:clamp(10px,1.3vw,20px);min-height:58px;padding:7px 12px;border-radius:16px;color:#fff;text-decoration:none;transition:background-color .25s}
.riga.is-on{background:rgba(37,163,222,.2)}
.riga__mini{display:none}
.riga__nome{font:700 1.15rem/1.2 var(--display)}
.riga__n{display:flex;align-items:baseline;gap:8px;white-space:nowrap}
.riga__n b{min-width:1.6em;font:700 1.4rem/1 var(--display);text-align:right}
.riga__n span{font-size:.875rem;color:#B9D7EC}
.riga__go{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;border:1.5px solid rgba(217,237,250,.4);transition:background-color .2s,color .2s,border-color .2s}
.riga__go .ico{width:17px;height:17px}
.riga.is-on .riga__go{background:#fff;border-color:#fff;color:var(--mare)}
/* le caselle a palette: una per carattere, con la fessura a metà */
.celle{display:none;gap:3px}
.cella{position:relative;display:grid;place-items:center;flex:none;width:var(--cella);height:calc(var(--cella) * 1.42);border-radius:5px;background:#05213A;font:700 calc(var(--cella) * .72)/1 var(--display);color:#fff;text-transform:uppercase;-webkit-backface-visibility:hidden;backface-visibility:hidden}
.cella::after{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:rgba(0,0,0,.5)}
.cella--v{background:rgba(5,33,58,.55)}
/* la tratta Roma → destinazione e l'oblò con la foto */
.tratta{position:relative;width:100%;max-width:380px;padding-bottom:34px;font:700 1rem var(--display);container-type:inline-size}
.tratta__svg{width:100%;height:auto;overflow:visible}
.tratta__arco{fill:none;stroke:#9CC6E4;stroke-width:2;stroke-dasharray:1 9;stroke-linecap:round}
.tratta__svg circle{fill:var(--cielo)}
.tratta__aereo{position:absolute;left:0;top:0;width:36px;height:36px;margin:-18px 0 0 -18px;transform:translate(180px,6px) rotate(49deg);transform:translate(50cqw,5.6cqw) rotate(49deg)}
.tratta__aereo svg{width:100%;height:100%;fill:#fff}
.tratta__da{position:absolute;left:0;bottom:0;color:#9CC6E4}
.tratta__a{position:absolute;right:0;bottom:0;overflow:hidden;text-align:right;color:#fff}
.tratta__a span{display:block}
.oblo--vista{width:min(100%,264px);aspect-ratio:1;margin:30px 0;box-shadow:0 0 0 6px rgba(217,237,250,.92),0 0 0 30px rgba(37,163,222,.13),0 0 0 31px rgba(217,237,250,.22)}
.partenze__piede{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px 32px;margin-top:clamp(32px,4vw,56px)}
.conta{font-size:1.1rem;color:var(--su-notte)}
.conta b{margin-right:.2em;font:700 clamp(2rem,3.4vw,3rem)/1 var(--display);color:#fff}
@media (hover:hover){ .riga:hover{background:rgba(37,163,222,.2)} }
@media (min-width:701px){
  html.js .tabellone.is-celle .celle{display:flex}
  html.js .tabellone.is-celle .riga__nome{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
}

/* =====================================================================================================
   4. OFFERTE: carte d'imbarco in una fila che scorre
   ===================================================================================================== */
.rail-nav{display:flex;gap:10px}
.rail{display:flex;gap:clamp(14px,2vw,28px);padding:10px max(var(--px),calc((100% - var(--max)) / 2)) 46px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding-inline:max(var(--px),calc((100% - var(--max)) / 2));-webkit-overflow-scrolling:touch}
.rail.is-presa{scroll-snap-type:none;cursor:grabbing;-webkit-user-select:none;user-select:none}
.rail.is-presa a{pointer-events:none}
.pass{position:relative;z-index:2;display:flex;flex:0 0 clamp(272px,25vw,336px);flex-direction:column;border-radius:26px;background:#fff;box-shadow:0 26px 44px -30px rgba(7,42,73,.45),0 0 0 1px rgba(7,42,73,.06);scroll-snap-align:start}
.pass__foto{position:relative;aspect-ratio:16/10;border-radius:26px 26px 0 0;overflow:hidden;background:var(--brina)}
.pass__foto img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.pass__tag{position:absolute;left:14px;top:14px;padding:6px 13px;border-radius:999px;background:#fff;color:var(--mare);font-weight:700;font-size:.875rem;line-height:1.3}
/* la linea di strappo, con i due intagli ai lati */
.pass__strappo{position:relative;margin:0 22px;border-top:2px dashed #BBDDF3}
.pass__strappo::before,.pass__strappo::after{content:"";position:absolute;top:-12px;width:22px;height:22px;border-radius:50%;background:var(--nuvola);box-shadow:inset 0 0 0 1px rgba(7,42,73,.06)}
.pass__strappo::before{left:-33px}
.pass__strappo::after{right:-33px}
.pass__corpo{display:flex;flex:1;flex-direction:column;gap:14px;padding:22px 22px 22px}
.pass__tit{font:700 1.2rem/1.22 var(--display);color:var(--notte)}
.pass__tit a{text-decoration:none}
.pass__tit a::after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border-radius:26px}
.pass__nota{font-size:.95rem;line-height:1.45}
.tappe{display:flex;flex-wrap:wrap;gap:5px 0;font-size:.9rem;line-height:1.3;color:var(--testo-2)}
.tappe li{display:inline-flex;align-items:center}
.tappe li::before{content:"";flex:none;width:8px;height:8px;margin-right:6px;border-radius:50%;border:2px solid var(--cielo)}
.tappe li:not(:last-child)::after{content:"";flex:none;width:14px;margin:0 6px;border-top:2px dotted #9CCBEA}
.tappe .tappe__piu{font-weight:700;color:var(--mare)}
.tappe .tappe__piu::before{display:none}
.pass__dati{display:grid;gap:12px;margin-top:auto;padding-top:14px;border-top:1px solid var(--brina)}
.pass__dati div{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.pass__dati dt{font-size:.875rem;color:var(--testo-2)}
.pass__dati dd{font:700 1rem/1.3 var(--display);color:var(--notte)}
/* l'ultima riga è il prezzo: a destra resta il posto per "Scopri" */
.pass__dati div:last-child{display:block;min-height:46px;padding-right:92px}
.pass__dati div:last-child dt{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.prezzo small{display:block;font:400 .875rem/1.3 var(--text);color:var(--testo-2)}
.prezzo b{display:block;font:700 1.5rem/1.1 var(--display)}
.pass__dati .prezzo--rich{padding-top:14px;font-size:1.02rem}
.pass__vai{position:absolute;right:22px;bottom:22px;display:inline-flex;align-items:center;gap:8px;font-weight:700;color:var(--mare)}
.pass__vai .ico{transition:transform .25s var(--ease)}
@media (hover:hover){ .pass:hover .pass__foto img{transform:scale(1.06)} .pass:hover .pass__vai .ico{transform:translateX(4px)} .rail{cursor:grab} }
html.js:not(.rm) .rail.is-armed:not(.is-in) .pass{opacity:0}

/* =====================================================================================================
   5. CHI SIAMO: il testo, il caleidoscopio di foto tonde, il team
   ===================================================================================================== */
.chi{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);align-items:start;gap:clamp(32px,6vw,96px)}
.chi__txt{order:1}
.chi__p1{margin-top:clamp(18px,2vw,26px);max-width:31em;font-size:clamp(1.08rem,1.3vw,1.22rem)}
.chi__mete{margin-top:clamp(30px,4vw,54px);font-size:clamp(1.22rem,1.7vw,1.56rem);line-height:1.5;color:var(--testo-2)}
.chi__p3{margin-top:clamp(22px,2.6vw,34px);max-width:33em}
/* i nomi dei luoghi: accesi sono blu e più pieni. Lo spessore è un contorno sottile, così il testo non si sposta */
.luogo{color:var(--rotta);-webkit-text-stroke:.6px var(--rotta);transition:color .4s,-webkit-text-stroke-color .4s}
html.js:not(.rm) .chi__mete.is-scrub .luogo:not(.is-on){color:inherit;-webkit-text-stroke-color:transparent}
.cale{order:2;position:relative;height:clamp(520px,50vw,740px)}
.cale__c{position:absolute;aspect-ratio:1;border-radius:50%;overflow:hidden;box-shadow:0 0 0 6px #fff,0 30px 50px -28px rgba(7,42,73,.5)}
.cale__c img{width:100%;height:100%;object-fit:cover}
.cale__c--1{width:54%;left:42%;top:0}
.cale__c--2{width:34%;left:3%;top:21%}
.cale__c--3{width:27%;left:68%;top:46%}
.cale__c--4{width:42%;left:20%;top:53%}
.cale__c--5{width:20%;left:74%;top:77%}
.cale__c--6{width:16%;left:14%;top:3%}
.team{margin-top:clamp(72px,9vw,136px)}
.team__testa{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:4px 20px;margin-bottom:clamp(24px,3vw,40px)}
.team__testa .lnk{white-space:nowrap}
.nastro{overflow-x:auto;-webkit-overflow-scrolling:touch}
.nastro__l{display:flex;gap:clamp(22px,3vw,48px);width:max-content;padding:10px 6px}
.nastro__l li{flex:none;width:150px;text-align:center}
.nastro__l img{width:132px;height:132px;margin:0 auto 14px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 5px #fff,0 0 0 6px var(--brina)}
.nastro__l b{display:block;font:700 1.05rem/1.25 var(--display);color:var(--notte)}
.nastro__l span{display:block;margin-top:2px;font-size:.9rem;line-height:1.35;color:var(--testo-2)}
/* schermi larghi con il mouse: il nastro scorre da solo, piano; si ferma al passaggio del mouse o con il focus */
html.js:not(.rm) .nastro.is-nastro{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%)}
html.js:not(.rm) .nastro.is-nastro .nastro__l{animation:scorri 70s linear infinite}
html.js:not(.rm) .nastro.is-nastro:hover .nastro__l,
html.js:not(.rm) .nastro.is-nastro:focus-within .nastro__l,
html.js:not(.rm) .nastro.is-nastro:focus .nastro__l,
html.js:not(.rm) .nastro.is-fermo .nastro__l{animation-play-state:paused}

/* =====================================================================================================
   6. SERVIZI: quattro oblò di misure diverse su una linea ondulata
   ===================================================================================================== */
.sez--servizi{background:#E3F1FA;padding-bottom:calc(var(--sez) + var(--arco))}
.sez--servizi::before{content:"";position:absolute;left:0;right:0;bottom:calc(100% - 1px);height:var(--orlo-h);background:#E3F1FA;-webkit-mask:var(--orlo-2) repeat-x 18vw 100% / auto 100%;mask:var(--orlo-2) repeat-x 18vw 100% / auto 100%;pointer-events:none}
.servizi{display:grid;grid-template-columns:1.22fr .92fr 1.22fr .92fr;align-items:start;gap:clamp(22px,3.6vw,60px)}
.serv--p{margin-top:clamp(48px,7vw,104px)}
.serv__foto{display:block;aspect-ratio:1;border-radius:50%;overflow:hidden;border:6px solid #fff;background:var(--brina)}
.serv__foto img{width:100%;height:100%;object-fit:cover}
.serv__txt{margin-top:clamp(16px,1.8vw,26px)}
.serv__nome{font:700 clamp(1.25rem,1.7vw,1.5rem)/1.2 var(--display);color:var(--notte)}
.serv__txt p{margin:8px 0 6px;font-size:.98rem;line-height:1.5}

/* =====================================================================================================
   7. RECENSIONI: fascia azzurra con i bordi curvi
   ===================================================================================================== */
.sez--banda{margin-top:calc(var(--arco) * -1);padding-block:calc(var(--sez) * .82 + var(--arco) * .4);border-radius:50% / var(--arco);background:linear-gradient(135deg,var(--cielo) 0%,var(--rotta) 44%,var(--mare) 100%);color:#fff;text-align:center}
.sez--banda .tit{color:#fff}
.banda__p{max-width:30em;margin:clamp(14px,1.6vw,22px) auto 0;font-size:clamp(1.06rem,1.25vw,1.2rem);font-weight:500}
.pillole{display:flex;flex-wrap:wrap;justify-content:center;gap:12px 14px;margin-top:clamp(28px,3.4vw,44px)}
.pillola{display:inline-flex;align-items:center;gap:10px;min-height:58px;padding:14px 28px;border-radius:999px;background:#fff;color:var(--mare);font:700 1.12rem var(--display);text-decoration:none;transition:background-color .2s,color .2s,transform .25s var(--ease)}
.pillola .ico{width:18px;height:18px}
@media (hover:hover){ .pillola:hover{background:var(--notte);color:#fff;transform:translateY(-3px)} }

/* =====================================================================================================
   8. NEWS: una notizia grande, tre in elenco
   ===================================================================================================== */
.notizie{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,1fr);align-items:start;gap:clamp(32px,5.5vw,88px)}
.notizia{position:relative}
.notizia time{font:700 .9rem var(--display);color:var(--testo-2)}
.notizia h3{font:700 1.18rem/1.25 var(--display);color:var(--notte)}
.notizia h3 a{text-decoration:none}
.notizia h3 a::after{content:"";position:absolute;top:0;right:0;bottom:0;left:0}
.notizia p{margin-top:6px;font-size:.98rem;line-height:1.5}
.notizia__foto{overflow:hidden;background:var(--brina)}
.notizia__foto img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.notizia--g .notizia__foto{max-width:700px;aspect-ratio:3/2;border-radius:clamp(56px,9vw,132px)}
.notizia--g .notizia__txt{margin-top:clamp(20px,2.4vw,32px);padding-left:clamp(6px,1.6vw,26px)}
.notizia--g h3{margin-top:6px;font-size:clamp(1.5rem,2.5vw,2.15rem);line-height:1.15}
.notizia--g p{font-size:1.06rem}
.notizia--g .lnk{margin-top:6px}
.notizie__l .notizia{display:grid;grid-template-columns:clamp(96px,10vw,132px) minmax(0,1fr);align-items:center;gap:clamp(16px,2vw,28px);padding:clamp(18px,2vw,26px) 0;border-top:1px solid var(--brina)}
.notizie__l .notizia:first-child{border-top:0;padding-top:0}
.notizie__l .notizia__foto{aspect-ratio:1;border-radius:50%}
.notizie__l h3{margin-top:2px}
@media (hover:hover){ .notizia:hover .notizia__foto img{transform:scale(1.06)} .notizia:hover h3 a{color:var(--mare)} .notizia:hover .lnk .ico{transform:translateX(4px)} }

/* =====================================================================================================
   9. CONTATTI: l'atterraggio
   ===================================================================================================== */
.contatti{display:grid;grid-template-columns:minmax(0,1.14fr) minmax(0,.86fr);align-items:start;gap:clamp(36px,6vw,104px)}
.pista{position:relative;width:fit-content;max-width:100%;padding:0 clamp(60px,6.4vw,100px) 14px 0}
.atterra{position:absolute;right:0;bottom:calc(14px + .1em);width:clamp(46px,5vw,76px);aspect-ratio:1;transform:rotate(49deg);pointer-events:none}
.atterra svg{width:100%;height:100%;fill:#fff}
.pista__l{position:absolute;left:0;right:0;bottom:0;height:2px;background:repeating-linear-gradient(90deg,rgba(217,237,250,.55) 0 14px,rgba(217,237,250,0) 14px 26px);transform-origin:0 50%}
html.js:not(.rm) .pista.is-armed:not(.is-giu) .atterra{opacity:0}
html.js:not(.rm) .pista.is-armed:not(.is-giu) .pista__l{transform:scaleX(0)}
.diretti{display:grid;gap:4px;margin-top:clamp(28px,3.6vw,52px)}
.diretti a{display:flex;align-items:center;gap:18px;min-height:68px;padding:8px 0;text-decoration:none}
.diretti small{display:block;font-size:.875rem;color:#B9D7EC}
.diretti b{display:block;font:700 clamp(1.15rem,1.8vw,1.5rem)/1.25 var(--display)}
.modulo{display:grid;grid-template-columns:1fr 1fr;gap:18px 16px;padding:clamp(22px,3vw,40px);border-radius:34px;background:rgba(255,255,255,.06);border:1px solid rgba(217,237,250,.18)}
.campo{display:grid;grid-column:1 / -1;gap:8px;align-content:start}
.campo--m{grid-column:auto}
.campo label{font-weight:700;font-size:.94rem;color:var(--su-notte)}
.campo input,.campo select,.campo textarea{width:100%;min-height:54px;margin:0;padding:14px 16px;border-radius:16px;border:1.5px solid rgba(217,237,250,.34);background:rgba(3,25,45,.55);color:#fff;font:400 1rem/1.4 var(--text);-webkit-appearance:none;appearance:none}
.campo textarea{min-height:120px;resize:vertical}
.campo ::placeholder{color:#8FB6D4;opacity:1}
.campo input:focus,.campo select:focus,.campo textarea:focus{outline:none;border-color:var(--cielo);box-shadow:0 0 0 3px rgba(37,163,222,.4)}
.campo__sel{position:relative}
.campo__sel select{padding-right:46px}
.campo__sel option{background:#fff;color:var(--notte)}
.campo__sel .ico{position:absolute;right:16px;top:50%;margin-top:-.62em;pointer-events:none}
.campo.is-err input{border-color:#fff;border-width:2px}
.campo__err{padding-left:12px;border-left:3px solid #fff;font-weight:700;font-size:.92rem;line-height:1.35;color:#fff}
.modulo__invio{display:flex;flex-wrap:wrap;grid-column:1 / -1;gap:12px;margin-top:6px}
.modulo__invio .btn{flex:1 1 200px}
.modulo__nota{grid-column:1 / -1;font-size:.9rem;color:#B9D7EC}
.modulo__stato{grid-column:1 / -1;padding:14px 16px;border-radius:16px;background:rgba(37,163,222,.24);font-weight:600}

/* =====================================================================================================
   PIEDE
   ===================================================================================================== */
.piede{background:var(--notte);color:var(--su-notte);padding:0 0 calc(28px + var(--sab))}
.piede__in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:clamp(36px,6vw,104px);padding:clamp(44px,5.5vw,72px) 0;border-top:1px solid rgba(217,237,250,.18)}
.piede__logo{position:relative;display:block;width:204px}
.piede__chi p{max-width:30em;margin-top:22px;font-size:.98rem}
.social{display:flex;gap:10px;margin-top:24px}
.piede__t{margin-bottom:10px;font:700 1.15rem var(--display);color:#fff}
.piede__utili ul{columns:2;column-gap:32px}
.piede__utili li{break-inside:avoid}
.piede__utili a{display:flex;align-items:center;min-height:44px;padding:6px 0;font-size:.96rem;line-height:1.35;text-decoration:none}
.piede__giu{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 24px;padding-top:20px;border-top:1px solid rgba(217,237,250,.18);font-size:.92rem}
.piede__ris{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-weight:700;color:#fff;text-decoration:none}
@media (hover:hover){ .piede__utili a:hover,.piede__ris:hover{color:#fff;text-decoration:underline;text-underline-offset:4px} }

/* barra delle azioni rapide (solo telefono) */
.azioni{display:none}

/* =====================================================================================================
   SCHERMI LARGHI
   ===================================================================================================== */
@media (min-width:1024px){
  .nav{display:block}
  .top__menu{display:none}
  .top__cta{display:inline-flex}
  html{scroll-padding-top:12px}
}
@media (min-width:1024px) and (max-width:1279px){
  .top__in{gap:12px;padding-inline:24px}
  .marchio{height:34px}
  .nav__a{padding:0 9px;font-size:.93rem}
  .nav__a::after{left:9px;right:9px}
  .top__cta{padding:10px 16px;font-size:.9rem}
  .hero__cta{gap:10px}
  .hero__cta .btn{padding-inline:20px}
}
@media (min-width:1024px){ .hero__h .ln__i{white-space:nowrap} }
/* sette voci di menu: tra 1024 e 1099 px il margine si stringe un po' perché ci stia tutto */
@media (min-width:1024px) and (max-width:1099px){
  .top__in{gap:6px;padding-inline:16px}
  .marchio{height:30px}
  .nav__a{padding:0 4px;font-size:.84rem}
  .nav__a::after{left:4px;right:4px}
  .top__tel{width:44px;height:44px}
  .top__cta{padding:10px 12px;font-size:.84rem}
}
/* otto voci (con "Liste regalo"): anche tra 1100 e 1279 px serve un po' di margine in meno */
@media (min-width:1100px) and (max-width:1439px){
  .top__in{gap:8px;padding-inline:20px}
  .nav__a{padding:0 6px;font-size:.88rem}
  .nav__a::after{left:6px;right:6px}
  .top__cta{padding:10px 14px;font-size:.88rem}
}
@media (min-width:1280px) and (max-width:1439px){
  .nav__a{padding:0 7px;font-size:.9rem}
  .nav__a::after{left:7px;right:7px}
  .top__tel{gap:7px;font-size:.9rem}
}
@media (min-width:1280px){
  .top__tel{display:inline-flex;align-items:center;gap:9px;width:auto;height:auto;min-height:44px;border:0;border-radius:0}
  .top__tel span{display:inline}
}
/* telefono, e schermi più larghi ma bassi (anche il telefono in orizzontale): la didascalia entra nell'oblò (su una velatura scura), le miniature si centrano sotto */
@media (max-width:700px),(min-width:701px) and (max-height:700px){
  .oblo--hero::after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;z-index:3;background:linear-gradient(to top,rgba(7,42,73,.86) 0%,rgba(7,42,73,.5) 26%,rgba(7,42,73,0) 50%);pointer-events:none}
  .dida{display:block;top:auto;right:auto;left:50%;bottom:calc(50% - var(--D) * .5 + var(--D) * .09);width:calc(var(--D) * .8);margin-left:calc(var(--D) * -.4);text-align:center}
  .dida__go{display:none}
  .dida__nome{font-size:1.2rem}
  .dida__n{font-size:.92rem}
  .scelta{justify-content:center;padding:8px 0 0}
}
/* sopra 1100 px c'è la rotta lungo la pagina: la linea sotto l'intestazione non serve */
@media (min-width:1100px){ .avanza{display:none} }

/* =====================================================================================================
   TABLET (701-1023): una via di mezzo
   ===================================================================================================== */
@media (max-width:1023px){
  :root{--hd:72px}
  .hero{--D:max(220px,min(52vw,46vh,440px))}
  @supports (height:1svh){ .hero{--D:max(220px,min(52vw,46svh,440px))} }
  .hero__in{grid-template-columns:minmax(0,1fr);row-gap:8px}
  .hero__vista{order:-1;justify-self:center;margin:0}
  .hero__h{font-size:clamp(2.6rem,8vw,4.4rem)}
  .partenze{grid-template-columns:1fr}
  .vista{order:0}
  .tabellone{--cella:clamp(18px,3.1vw,27px)}
  .chi{grid-template-columns:1fr}
  .cale{order:0;height:auto;aspect-ratio:16/8;max-width:640px}
  .cale__c--1{width:38%;left:30%;top:4%}
  .cale__c--2{width:27%;left:0;top:26%}
  .cale__c--3{width:24%;left:72%;top:8%}
  .cale__c--4{width:20%;left:64%;top:56%}
  .cale__c--5,.cale__c--6{display:none}
  .servizi{grid-template-columns:1fr 1fr;gap:48px 40px}
  .serv--g .serv__foto{width:86%}
  .serv--p .serv__foto{width:66%}
  .notizie{grid-template-columns:1fr}
  .contatti{grid-template-columns:1fr}
  .piede__in{grid-template-columns:1fr}
}

/* =====================================================================================================
   TELEFONO (fino a 700 px): ogni sezione è ricomposta, non solo impilata
   ===================================================================================================== */
@media (max-width:700px){
  :root{--hd:64px;--sez:clamp(72px,19vw,96px)}
  body{font-size:1.03rem}
  .top__in{padding-inline:16px;gap:10px}
  .marchio{height:32px}
  .tondo,.top__tel{width:46px;height:46px}

  /* hero: l'oblò in cima con la didascalia dentro, poi titolo, testo e pulsanti */
  .hero{--D:min(68vw,40vh);--fondo:92px;--pl:42px;align-items:flex-start;padding-top:calc(var(--hd) + var(--sat) + 2px)}
  @supports (height:1svh){ .hero{--D:min(68vw,40svh)} }
  .hero__in{row-gap:12px;width:calc(100% - 48px)}
  .hero__h{font-size:clamp(2.05rem,11.2vw,3rem)}
  .hero__lede{margin-top:12px;font-size:1.03rem;line-height:1.5}
  .hero__cta{gap:10px;margin-top:20px}
  .hero__cta .btn{width:100%;min-height:52px}
  .hero__cta .btn--vetro{background:rgba(10,90,148,.42)}      /* qui il pulsante finisce sopra le nuvole chiare: così la scritta bianca resta leggibile */
  .scelta{gap:12px}
  .scelta__b{width:44px;height:44px}
  .nuv--1{width:62vw;left:44%;top:3%}
  .nuv--2{width:44vw;left:-14%;top:9%}
  .nuv--3,.nuv--6{display:none}
  .nuv--4{width:58vw;left:-18%;top:72%}
  .nuv--5{width:70vw;left:52%;top:76%}
  .nuv--7{width:52vw;left:-8%;top:88%}
  .nuv--8{width:60vw;left:58%;top:86%}
  .banco__s{height:56%}

  .testa--riga{align-items:flex-end}
  .rail-nav{display:none}

  /* finestrini: una fila che si sfoglia, il successivo si affaccia */
  .finestrini{gap:14px;margin-inline:-24px;padding:6px 24px 30px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:24px;-webkit-overflow-scrolling:touch}
  .fin{flex:0 0 74vw;scroll-snap-align:start}
  .fin__a{height:110vw;max-height:520px;padding:10px;border-radius:37vw}
  .fin__vetro{border-radius:34vw}
  .fin__txt{bottom:104px}
  .fin__go{bottom:40px}

  /* destinazioni: l'oblò in cima, poi le nove righe con la miniatura */
  .vista{gap:4px}
  .tratta{max-width:300px;padding-bottom:30px}
  .oblo--vista{width:60vw;max-width:260px;margin:24px 0 30px;box-shadow:0 0 0 5px rgba(217,237,250,.92),0 0 0 22px rgba(37,163,222,.13),0 0 0 23px rgba(217,237,250,.22)}
  .tabellone{padding:4px 6px 8px;border-radius:26px}
  .tabellone__testa{padding:12px 10px}
  .riga{grid-template-columns:44px minmax(0,1fr) auto 24px;gap:12px;min-height:64px;padding:8px 8px}
  .riga__mini{display:block;width:44px;height:44px;border-radius:50%;object-fit:cover}
  .riga__nome{font-size:1.08rem}
  .riga__n{display:grid;justify-items:end;gap:0}
  .riga__n b{font-size:1.25rem}
  .riga__n span{font-size:.875rem;line-height:1.2}
  .riga__go{width:24px;height:24px;border:0}
  .riga.is-on .riga__go{background:none;color:#fff}
  .partenze__piede .btn{width:100%}

  .pass{flex-basis:78vw}
  .rail{padding-bottom:34px}

  /* chi siamo: tre cerchi sovrapposti sopra il testo */
  .cale{aspect-ratio:auto;height:54vw;max-height:260px;margin-bottom:6px}
  .cale__c{box-shadow:0 0 0 5px #fff,0 20px 34px -20px rgba(7,42,73,.5)}
  .cale__c--1{width:50%;left:22%;top:0}
  .cale__c--2{width:34%;left:0;top:34%}
  .cale__c--3{width:30%;left:66%;top:42%}
  .cale__c--4{display:none}
  .team__testa{align-items:center}
  .nastro{margin-inline:-24px;padding-inline:18px;scroll-snap-type:x proximity;scroll-padding-inline:14px}      /* il primo ritratto si allinea al margine della pagina, non al bordo dello schermo */
  .nastro__l{gap:18px}
  .nastro__l li{width:132px;scroll-snap-align:start}
  .nastro__l img{width:112px;height:112px}

  /* servizi: foto e testo affiancati, a zig-zag */
  .servizi{grid-template-columns:1fr;gap:34px}
  .serv{display:grid;grid-template-columns:34vw minmax(0,1fr);align-items:center;gap:18px}
  .serv--p{grid-template-columns:minmax(0,1fr) 27vw;margin-top:0}
  .serv--p .serv__foto{order:2}
  .serv--g .serv__foto,.serv--p .serv__foto{width:100%;border-width:5px}
  .serv__txt{margin-top:0}

  .pillole{gap:10px}
  .pillola{min-height:54px;padding:12px 18px;font-size:1.04rem}
  /* fascia azzurra: su uno schermo stretto il celeste chiaro resta nell'angolo, sotto il testo c'è il blu pieno */
  .sez--banda{background:linear-gradient(135deg,var(--cielo) 0%,var(--rotta) 26%,var(--mare) 100%)}
  .notizia--g .notizia__foto{border-radius:20vw}
  .notizie__l .notizia{grid-template-columns:88px minmax(0,1fr);align-items:start}

  .pista{padding-right:58px}
  .modulo{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);padding:20px 16px 22px;border-radius:28px}      /* "Periodo" più largo: l'esempio scritto dentro si legge per intero */
  .modulo__invio .btn{flex-basis:100%}
  .piede{padding-bottom:calc(96px + var(--sab))}
  .piede__utili ul{columns:1}

  /* tre azioni rapide fisse in basso: compaiono dopo l'hero, spariscono sui contatti */
  .azioni{position:fixed;left:0;right:0;bottom:0;z-index:40;display:grid;grid-template-columns:.84fr 1.12fr 1.1fr;gap:8px;padding:9px 12px calc(9px + var(--sab));background:#fff;border-top:1px solid var(--brina);transform:translate3d(0,110%,0);transition:transform .36s var(--ease)}
  .azioni.is-su,html:not(.js) .azioni{transform:none}
  .azioni a{display:flex;align-items:center;justify-content:center;gap:8px;min-height:50px;border-radius:999px;background:var(--nuvola);border:1.5px solid #BBDDF3;color:var(--mare);font-weight:700;font-size:.97rem;text-decoration:none}
  .azioni .azioni__p{background:var(--rotta);border-color:var(--rotta);color:#fff}
}
@media (max-width:374px){
  .azioni a{font-size:.9rem;gap:6px}
  .azioni .ico{width:1.1em;height:1.1em}
  .modulo{grid-template-columns:1fr}
  .campo--m{grid-column:1 / -1}
}

/* i browser che non conoscono overflow:clip (Safari prima della 16): su telefono e tablet niente scorrimento laterale */
@media (max-width:1023px){
  @supports not (overflow:clip){ main{overflow-x:hidden} }
}

/* senza JavaScript, su schermi stretti, il menu è una riga di link che scorre sotto il logo */
@media (max-width:1023px){
  html:not(.js) .nav{display:block;position:absolute;left:0;right:0;top:100%;overflow-x:auto}
  html:not(.js) .nav__a{height:48px}
  html:not(.js) .hero{padding-top:calc(var(--hd) + 52px)}
  html:not(.js) .pannello{display:none}
}

/* ---------------------------------------------------------------------------------------------------------
   MODULI · il blocco "per e-mail": indirizzo a cui rispondere, conferma dell'informativa, invio.
   Resta chiuso finché non si sceglie "Invia per e-mail" (lo apre js/posta.js); senza script è sempre visibile
   --------------------------------------------------------------------------------------------------------- */
.posta{display:grid;grid-column:1 / -1;grid-template-columns:1fr 1fr;gap:16px;margin-top:4px;padding-top:22px;border-top:1px dashed rgba(217,237,250,.4)}
.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{grid-column:1 / -1;font:600 1.15rem/1.3 var(--display);color:#fff}
.campo label small{font-weight:400;color:#B9D7EC}
.posta__trappola{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.spunta{display:flex;align-items:center;gap:12px;min-height:44px;font-weight:600;font-size:1rem;line-height:1.4;color:#fff;cursor:pointer}
.campo .spunta input{flex:none;width:28px;height:28px;min-height:0;padding:0;border-radius:9px;cursor:pointer;background-position:center;background-repeat:no-repeat;background-size:18px 18px}
.campo .spunta input:checked{background-color:#fff;border-color:#fff;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230A5A94' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 12.5l5 5 10-11'/%3E%3C/svg%3E")}
.spunta a{color:#fff;text-decoration:underline;text-underline-offset:3px}
.posta__vai{grid-column:1 / -1;justify-self:start;min-width:min(100%,300px)}
.modulo.is-invio button[type="submit"]{opacity:.6;pointer-events:none}
@media (max-width:700px){
  .posta{grid-template-columns:1fr;gap:14px;padding-top:20px}
  .posta__vai{justify-self:stretch}
}
@media (prefers-reduced-motion:reduce){ .posta.is-aperta{animation:none} }

/* =====================================================================================================
   TOUR OPERATOR E AGENZIE: l'etichetta nel titolo dell'hero, i due ingressi (viaggiatori / agenzie) e la
   sezione "per le agenzie di viaggio" (una carta d'imbarco). Stesso linguaggio del resto: cerchi, strappi,
   azzurri del marchio. Le pagine delle agenzie (pagine.css) riusano .btn, .tit, .testa.
   ===================================================================================================== */
.hero__tipo{display:flex;align-items:center;gap:10px;width:fit-content;max-width:100%;margin-bottom:clamp(12px,1.4vw,20px);padding:7px 18px 7px 12px;border-radius:999px;background:rgba(7,42,73,.32);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.62);font:700 clamp(.9rem,1vw,1.05rem)/1.25 var(--display);letter-spacing:.03em;text-transform:lowercase}
.hero__tipo svg{width:1.5em;height:1.5em;flex:none;fill:currentColor}
html.js:not(.rm) .hero:not(.is-partita) .hero__tipo{opacity:0}

.sez--ingressi{padding-block:clamp(6px,1.4vw,20px) 0}
.sez--ingressi+.sez--stili{padding-top:clamp(64px,8vw,120px)}
@media (min-width:1100px){ .sez--ingressi{padding-top:92px} }      /* la linea della rotta ha bisogno di spazio per scendere dal cielo ai due ingressi */
.ingressi{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(14px,2.2vw,32px)}
.ingressi>li{display:flex}
.ingresso{position:relative;display:grid;grid-template-columns:auto auto minmax(0,1fr) auto;align-items:center;gap:clamp(14px,1.8vw,26px);width:100%;padding:clamp(18px,2vw,26px) clamp(20px,2.4vw,34px);border-radius:34px;background:#fff;color:var(--notte);text-decoration:none;box-shadow:0 34px 60px -36px rgba(7,42,73,.5),0 0 0 1px rgba(7,42,73,.06);transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.ingresso__disco{display:grid;place-items:center;width:clamp(56px,5.6vw,76px);aspect-ratio:1;border-radius:50%;background:linear-gradient(135deg,var(--cielo),var(--rotta));box-shadow:0 0 0 5px var(--brina);color:#fff}
.ingresso__disco .ico{width:48%;height:48%;stroke-width:1.7}
.ingresso__strappo{position:relative;align-self:stretch;margin-block:calc(clamp(18px,2vw,26px) * -1);border-left:2px dashed #BBDDF3}
.ingresso__strappo::before,.ingresso__strappo::after{content:"";position:absolute;left:-12px;width:22px;height:22px;border-radius:50%;background:var(--nuvola);box-shadow:inset 0 0 0 1px rgba(7,42,73,.06)}
.ingresso__strappo::before{top:-11px}
.ingresso__strappo::after{bottom:-11px}
.ingresso__txt small{display:block;font-size:.875rem;color:var(--testo-2)}
.ingresso__txt b{display:block;font:700 clamp(1.25rem,1.9vw,1.7rem)/1.15 var(--display);color:var(--notte)}
.ingresso__txt>span{display:block;margin-top:4px;font-size:.98rem;line-height:1.45}
.ingresso__go{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;background:var(--rotta);color:#fff;transition:transform .3s var(--ease),background-color .3s}
@media (hover:hover){
  .ingresso:hover{transform:translateY(-4px);box-shadow:0 40px 64px -34px rgba(7,42,73,.55),0 0 0 1px rgba(7,42,73,.08)}
  .ingresso:hover .ingresso__go{transform:scale(1.1);background:var(--mare)}
}
@media (max-width:860px){
  .ingressi{grid-template-columns:1fr}
}
@media (max-width:700px){
  .ingresso{grid-template-columns:auto minmax(0,1fr) auto;gap:14px;padding:18px 18px 18px 16px;border-radius:30px}
  .ingresso__disco{width:52px}
  .ingresso__strappo{display:none}
  .ingresso__go{width:44px;height:44px}
}

.sez--agenzie{padding-bottom:calc(var(--sez) * .7)}
.agpass{display:grid;grid-template-columns:minmax(0,1.2fr) auto minmax(0,1fr);align-items:stretch;border-radius:40px;background:#fff;box-shadow:0 40px 70px -40px rgba(7,42,73,.5),0 0 0 1px rgba(7,42,73,.06)}
.agpass__rotta{display:flex;flex-direction:column;margin:12px;padding:clamp(24px,3vw,44px);border-radius:30px;background:linear-gradient(135deg,var(--rotta) 0%,var(--mare) 100%);color:#fff}
.agpass__eti{font:700 .9rem/1.3 var(--display);letter-spacing:.06em;text-transform:uppercase}
.agpass__tratta{display:grid;grid-template-columns:auto minmax(60px,1fr) fit-content(10em);align-items:end;gap:clamp(10px,1.4vw,20px);margin-top:clamp(18px,2.4vw,32px)}
.agpass__citta small{display:block;font-size:.875rem}
.agpass__citta b{display:block;font:700 clamp(1.3rem,2vw,1.8rem)/1.15 var(--display)}
.agpass__citta--a{text-align:right}
.agpass__volo{position:relative;align-self:center;height:clamp(40px,4vw,56px);container-type:inline-size}
.agpass__volo>svg{position:absolute;top:0;left:0;width:100%;height:100%;overflow:visible;fill:none}
.agpass__volo path{stroke:rgba(255,255,255,.8);stroke-width:2;stroke-dasharray:1 8;stroke-linecap:round;vector-effect:non-scaling-stroke}
.agpass__aereo{position:absolute;left:0;top:0;width:30px;height:30px;margin:-15px 0 0 -15px;color:#fff;transform:translate(50cqw,6px) rotate(49deg)}
.agpass__aereo svg{width:100%;height:100%;fill:currentColor}
.agpass__p{max-width:30em;margin-top:clamp(18px,2.4vw,30px);font-size:clamp(1.02rem,1.2vw,1.15rem);line-height:1.55;font-weight:500}
.agpass__az{display:flex;flex-wrap:wrap;gap:12px;margin-top:auto;padding-top:clamp(22px,2.8vw,36px)}
.agpass__az .btn--vetro{background:rgba(7,42,73,.22)}
.agpass__strappo{position:relative;margin-block:26px;border-left:2px dashed #BBDDF3}
.agpass__strappo::before,.agpass__strappo::after{content:"";position:absolute;left:-12px;width:22px;height:22px;border-radius:50%;background:var(--nuvola);box-shadow:inset 0 0 0 1px rgba(7,42,73,.06)}
.agpass__strappo::before{top:-37px}
.agpass__strappo::after{bottom:-37px}
.agpass__voci{display:grid;align-content:center;padding:clamp(14px,1.6vw,22px) clamp(14px,2vw,28px)}
.agvoce{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:14px;min-height:64px;padding:10px 12px;border-radius:22px;color:var(--notte);text-decoration:none;transition:background-color .25s}
.agvoce__ico{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--brina);color:var(--mare)}
.agvoce__ico .ico{width:22px;height:22px;stroke-width:1.7}
.agvoce__txt b{display:block;font:700 1.06rem/1.25 var(--display)}
.agvoce__txt small{display:block;margin-top:1px;font-size:.9rem;line-height:1.35;color:var(--testo-2)}
.agvoce__fr{width:20px;height:20px;color:var(--rotta);transition:transform .25s var(--ease)}
.agpass__voci li+li{border-top:1px solid var(--brina)}
@media (hover:hover){
  .agvoce:hover{background:var(--nuvola)}
  .agvoce:hover .agvoce__fr{transform:translateX(4px)}
}
@media (max-width:1023px){
  .agpass{grid-template-columns:1fr;border-radius:34px}
  .agpass__strappo{margin:0 26px;border-left:0;border-top:2px dashed #BBDDF3}
  .agpass__strappo::before,.agpass__strappo::after{top:-12px;bottom:auto}
  .agpass__strappo::before{left:-37px}
  .agpass__strappo::after{left:auto;right:-37px}
  .agpass__rotta{border-radius:24px;margin:10px}
}
@media (max-width:700px){
  .agpass__tratta{grid-template-columns:auto minmax(40px,1fr) fit-content(8em)}
  .agpass__az .btn{width:100%}
  .agvoce{min-height:60px;padding:8px 6px}
}

@media print{ .top,.azioni,.menu,.sipario,.rotta,.rotta__aereo{display:none!important} }

/* ---- avviso sui cookie (js/cookie.js): una scheda bianca in basso con il filetto azzurro ---- */
.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;border-radius:22px;border-top:4px solid var(--cielo);background:var(--bianco);color:var(--testo);box-shadow:0 26px 44px -22px rgba(7,42,73,.5),0 0 0 1px rgba(7,42,73,.06);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:700 1.3rem/1.2 var(--display);color:var(--notte)}
.ck__p{margin-top:8px;font-size:1rem;line-height:1.5}
.ck__p a{color:var(--mare);font-weight:700;text-decoration:underline;text-decoration-color:#A9D3EE;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(--rotta);border-radius:999px;background:var(--bianco);font:700 1rem/1.2 var(--display);color:var(--mare);cursor:pointer;transition:background .2s,color .2s}
.ck__bt--p{background:var(--rotta);color:#fff}
@media (hover:hover){
  .ck__bt:hover{background:var(--nuvola)}
  .ck__bt--p:hover{background:var(--mare)}
}
.ck :focus-visible{outline:3px solid var(--cielo);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} }
.piede__ck{display:inline-flex;align-items:center;min-height:44px;padding:0;border:0;background:none;font:inherit;color:inherit;text-decoration:underline;text-underline-offset:4px;text-decoration-color:rgba(217,237,250,.5);cursor:pointer}
@media (hover:hover){ .piede__ck:hover{color:#fff;text-decoration-color:#fff} }
html:not(.js) .piede__ck{display:none}