:root{
  --ink:#12304A; --paper:#F6F8F7; --route:#E3992B; --sky:#DCE7EE;
  --slate:#566D80; --line:#D5DFE6; --surface:#FFFFFF; --text:#12304A;
  --display:"Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
  --body:"Public Sans", "Helvetica Neue", Arial, sans-serif;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --ink:#E6EEF3; --paper:#0F2233; --route:#F0AE48; --sky:#16324A;
    --slate:#9DB2C2; --line:#24415A; --surface:#132B40; --text:#E6EEF3;
  }
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --ink:#E6EEF3; --paper:#0F2233; --route:#F0AE48; --sky:#16324A;
  --slate:#9DB2C2; --line:#24415A; --surface:#132B40; --text:#E6EEF3;
}
*,*::before,*::after{box-sizing:inherit}
html{scroll-behavior:smooth;scroll-padding-top:calc(env(safe-area-inset-top,0px) + 80px)}
body{margin:0;background:var(--paper);color:var(--text);font-family:var(--body);font-size:1.0625rem;line-height:1.6;-webkit-font-smoothing:antialiased}
img,svg{max-width:100%}
a{color:inherit}
:focus-visible{outline:3px solid var(--route);outline-offset:3px;border-radius:4px}
.wrap{width:min(1120px,100% - 2.5rem);margin-inline:auto}

/* Header */
header{position:sticky;top:env(safe-area-inset-top,0px);z-index:10;background:color-mix(in srgb,var(--paper) 92%,transparent);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.bar{display:flex;align-items:center;justify-content:space-between;gap:1rem;height:68px}
.brand{font-family:var(--display);font-weight:800;font-size:1.35rem;letter-spacing:-.02em;text-decoration:none;display:flex;align-items:center;gap:.55rem}
.brand svg{width:26px;height:26px;flex:none}
nav ul{list-style:none;display:flex;gap:1.75rem;margin:0;padding:0}
nav a{text-decoration:none;color:var(--slate);font-weight:500;font-size:.95rem}
nav a:hover{color:var(--text)}

/* Le tre linee nel menu: ognuna col colore della sua targa.
   Due tonalita' per colore, perche' l'oro leggibile su fondo chiaro
   sparisce su fondo scuro e viceversa. */
:root{
  --c-tour:#2F6493; --c-live:#C4102A; --c-pass:#8A6114;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --c-tour:#8FB6D6; --c-live:#FF6B6B; --c-pass:#D8A93C;
  }
}
:root[data-theme="dark"]{
  --c-tour:#8FB6D6; --c-live:#FF6B6B; --c-pass:#D8A93C;
}
nav a.nav-linea{
  position:relative;
  font-weight:600;
  padding-left:.85rem;
}
nav a.nav-linea::before{
  content:"";
  position:absolute;
  left:0; top:50%;
  width:6px; height:6px;
  margin-top:-3px;
  border-radius:50%;
  background:currentColor;
}
nav a.nav-tour{color:var(--c-tour)}
nav a.nav-live{color:var(--c-live)}
nav a.nav-pass{color:var(--c-pass)}
nav a.nav-linea:hover{
  color:currentColor;
  text-decoration:underline;
  text-decoration-thickness:2px;
  text-underline-offset:5px;
}
.btn{display:inline-flex;align-items:center;justify-content:center;font:600 1rem/1 var(--body);padding:.95rem 1.4rem;border-radius:999px;text-decoration:none;border:2px solid var(--ink);cursor:pointer;transition:background .15s,color .15s}
.btn-solid{background:var(--ink);color:var(--paper)}
.btn-solid:hover{background:transparent;color:var(--ink)}
.btn-ghost{background:transparent;color:var(--ink)}
.btn-ghost:hover{background:var(--ink);color:var(--paper)}
.bar .btn{padding:.7rem 1.1rem;font-size:.92rem}
@media (max-width:1100px){nav{display:none}}

/* Hero */
.hero{padding:clamp(3rem,8vw,6rem) 0 2rem}
.hero h1{font-family:var(--display);font-weight:800;font-size:clamp(2.5rem,6.4vw,5.1rem);line-height:1.02;letter-spacing:-.035em;margin:0;max-width:15ch}
.hero p{font-size:clamp(1.1rem,1.6vw,1.3rem);color:var(--slate);max-width:52ch;margin:1.5rem 0 2rem}
.actions{display:flex;flex-wrap:wrap;gap:.75rem}

/* Route */
.route{margin-top:clamp(2.5rem,6vw,4.5rem)}
.route svg{display:block;width:100%;height:auto;overflow:visible}
.route .track{fill:none;stroke:var(--line);stroke-width:3;stroke-dasharray:2 12;stroke-linecap:round}
.route .path{fill:none;stroke:var(--route);stroke-width:5;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;animation:draw 2.4s cubic-bezier(.65,0,.35,1) .3s forwards}
.route .pin{fill:var(--paper);stroke:var(--ink);stroke-width:4;opacity:0;animation:pop .35s ease-out forwards}
.route .pin.end{fill:var(--route);stroke:var(--route)}
.route .p1{animation-delay:.3s}.route .p2{animation-delay:1.45s}.route .p3{animation-delay:2.6s}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes pop{from{opacity:0;transform:scale(.4)}to{opacity:1;transform:scale(1)}}
.route .pin{transform-box:fill-box;transform-origin:center}
.stops{display:grid;grid-template-columns:repeat(3,1fr);margin-top:.9rem;font-size:.95rem;color:var(--slate)}
.stops span:nth-child(2){text-align:center}.stops span:nth-child(3){text-align:right}
.stops b{display:block;color:var(--text);font-family:var(--display);font-weight:700;font-size:1.05rem}
@media (prefers-reduced-motion:reduce){
  .route .path{animation:none;stroke-dashoffset:0}
  .route .pin{animation:none;opacity:1}
  html{scroll-behavior:auto}
}

/* Sections */
section{padding:clamp(4rem,9vw,7rem) 0}
h2{font-family:var(--display);font-weight:800;font-size:clamp(2rem,4vw,3rem);line-height:1.08;letter-spacing:-.03em;margin:0 0 1rem;max-width:20ch}
.lead{color:var(--slate);max-width:56ch;margin:0}

.audience{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:3rem;border-top:2px solid var(--ink)}
.audience article{padding:2rem 2rem 0 0}
.audience article + article{padding:2rem 2rem 0 2rem;border-left:1px solid var(--line)}
.audience article:last-child{padding-right:0}
.audience h3{font-family:var(--display);font-weight:700;font-size:1.6rem;letter-spacing:-.02em;margin:0 0 .75rem}
.audience p{margin:0 0 1rem;max-width:46ch}
.audience ul{margin:0;padding-left:1.1rem;color:var(--slate)}
.audience li{margin:.3rem 0}
@media (max-width:900px){
  .audience{grid-template-columns:1fr}
  .audience article,.audience article + article{padding:2rem 0 0;border-left:0}
  .audience article + article{border-top:1px solid var(--line);margin-top:2rem}
}

.how{background:var(--ink);color:var(--paper)}
.how h2{color:var(--paper)}
.how .lead{color:color-mix(in srgb,var(--paper) 75%,transparent)}
.steps{list-style:none;margin:3.5rem 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:2.5rem;counter-reset:s}
.steps li{counter-increment:s;padding-top:1.5rem;border-top:3px solid var(--route)}
.steps li::before{content:counter(s);font-family:var(--display);font-weight:800;font-size:3.2rem;line-height:1;color:var(--route);display:block;margin-bottom:.9rem}
.steps h3{font-family:var(--display);font-size:1.35rem;margin:0 0 .5rem;letter-spacing:-.01em}
.steps p{margin:0;color:color-mix(in srgb,var(--paper) 78%,transparent)}
@media (max-width:760px){.steps{grid-template-columns:1fr}}

/* Form */
.quote-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(2rem,5vw,4.5rem);align-items:start}
@media (max-width:860px){.quote-grid{grid-template-columns:1fr}}
.quote-side p{color:var(--slate);max-width:40ch}
.quote-side .mail{margin-top:1.5rem;font-weight:600}
.quote-side .mail a{color:var(--text);text-decoration-color:var(--route);text-underline-offset:4px;text-decoration-thickness:2px}
form{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:clamp(1.25rem,3vw,2.25rem)}
.row{display:grid;grid-template-columns:1fr 1fr;gap:1rem 1.25rem}
@media (max-width:560px){.row{grid-template-columns:1fr}}
.field{display:flex;flex-direction:column;gap:.4rem;margin-bottom:1.1rem}
label,legend{font-weight:600;font-size:.93rem}
.opt{font-weight:400;color:var(--slate)}
input,select,textarea{font:inherit;font-size:1rem;color:var(--text);background:var(--paper);border:1.5px solid var(--line);border-radius:10px;padding:.75rem .85rem;width:100%}
textarea{min-height:120px;resize:vertical}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--ink);box-shadow:0 0 0 3px color-mix(in srgb,var(--route) 45%,transparent)}
fieldset{border:0;padding:0;margin:0 0 1.3rem}
.seg{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:.6rem;margin-top:.5rem}
.seg input{position:absolute;opacity:0;width:1px;height:1px}
.seg label{display:block;text-align:center;padding:.8rem;border:1.5px solid var(--line);border-radius:10px;cursor:pointer;font-weight:600;background:var(--paper)}
.seg input:checked + label{border-color:var(--ink);background:var(--ink);color:var(--paper)}
.seg input:focus-visible + label{outline:3px solid var(--route);outline-offset:2px}
.err{color:#C0392B;font-size:.87rem;min-height:0}
:root[data-theme="dark"] .err{color:#FF8A7A}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .err{color:#FF8A7A}}
[aria-invalid="true"]{border-color:#C0392B}
.submit{width:100%;margin-top:.5rem;padding:1.1rem}
.fine{font-size:.85rem;color:var(--slate);margin:.9rem 0 0}
.done{display:none;margin-top:1rem;padding:1rem 1.1rem;border-radius:10px;background:var(--sky);font-size:.95rem}
.done.show{display:block}

.partners{background:var(--sky);padding:clamp(3rem,6vw,4.5rem) 0}
.partners h2{font-size:clamp(1.6rem,3vw,2.2rem)}
.partners-inner{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1.5rem 3rem}
.partners .btn{white-space:normal;text-align:center}
footer{border-top:1px solid var(--line);padding:2.5rem 0 3rem;color:var(--slate);font-size:.92rem}
footer .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:1rem}

.right{display:flex;align-items:center;gap:.9rem}
.lang{display:flex;border:1.5px solid var(--line);border-radius:999px;padding:3px}
.lang button{font:600 .82rem/1 var(--body);color:var(--slate);background:none;border:0;border-radius:999px;padding:.45rem .6rem;cursor:pointer}
.lang button[aria-pressed="true"]{background:var(--ink);color:var(--paper)}
@media (max-width:640px){.bar .btn{display:none}}
@media (max-width:380px){.lang button{padding:.45rem .45rem}}
.field[hidden],.row[hidden]{display:none}

.exp-section{border-top:1px solid var(--line)}
.exp-tabs{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:2.5rem}
.exp-tabs button{font:600 .95rem/1 var(--body);padding:.7rem 1.15rem;border-radius:999px;border:1.5px solid var(--line);background:transparent;color:var(--text);cursor:pointer}
.exp-tabs button:hover{border-color:var(--ink)}
.exp-tabs button[aria-selected="true"]{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.exp{padding:1.15rem 0 1.2rem;border-bottom:1px solid var(--line)}
.exp h4{font-family:var(--display);font-weight:700;font-size:1.13rem;line-height:1.3;margin:0 0 .35rem}
.exp p{margin:0 0 .7rem;color:var(--slate);font-size:.97rem}
.tag{display:inline-block;font:600 .78rem/1.4 var(--body);background:var(--sky);color:var(--text);padding:.12rem .55rem;border-radius:6px;margin-left:.45rem;vertical-align:.12em;white-space:nowrap}
.exp .ask{background:none;border:0;padding:0;font:600 .93rem var(--body);color:var(--text);text-decoration:underline;text-decoration-color:var(--route);text-decoration-thickness:2px;text-underline-offset:4px;cursor:pointer}
.exp .ask:hover{text-decoration-color:var(--text)}
.exp .desc{margin:0 0 .55rem}
.exp .incl{margin:0 0 .2rem;font-size:.88rem;color:var(--text)}
.exp .incl b{font-weight:600}
.exp .excl{margin:0 0 .2rem;font-size:.88rem;color:var(--slate)}
.exp .ask{margin-top:.55rem}

/* City cards */
.cities{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:1.25rem;margin-top:2rem}
.city-card{position:relative;display:block;width:100%;aspect-ratio:4/5;border:0;padding:0;border-radius:16px;overflow:hidden;cursor:pointer;text-align:left;background:#16324A;color:#fff;font:inherit}
.city-card .media,.cv-media{position:absolute;inset:0}
.media img,.cv-media img,.ph img{width:100%;height:100%;object-fit:cover;display:block}
.city-card .media img{transition:transform .5s ease}
.city-card:hover .media img{transform:scale(1.04)}
.shade{position:absolute;inset:0;background:linear-gradient(to top,rgba(8,22,36,.82) 0%,rgba(8,22,36,.25) 45%,rgba(8,22,36,0) 70%)}
.city-card .label{position:absolute;left:1.4rem;right:1.4rem;bottom:1.25rem}
.city-card .name{display:block;font-family:var(--display);font-weight:800;font-size:clamp(1.8rem,2.8vw,2.3rem);line-height:1.05;letter-spacing:-.03em}
.city-card .count{display:block;margin-top:.35rem;font-size:.92rem;opacity:.85}
.city-card:focus-visible{outline:3px solid var(--route);outline-offset:3px}
.placeholder{position:absolute;inset:0;background:#16324A}
.placeholder svg{position:absolute;inset:0;width:100%;height:100%}
.placeholder path{fill:none;stroke:#E3992B;stroke-width:3;stroke-linecap:round;opacity:.55}
.placeholder circle{fill:#E3992B;opacity:.7}

/* City view */
#cityView{padding:0;border:0;margin:0;width:100%;max-width:100%;height:100%;max-height:100%;background:var(--paper);color:var(--text);overflow-y:auto;overscroll-behavior:contain}
#cityView::backdrop{background:rgba(8,22,36,.5)}
#cityView[open]{animation:cvIn .28s ease-out}
@keyframes cvIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.cv-hero{position:relative;height:clamp(280px,48vh,480px);color:#fff;overflow:hidden}
.cv-back{position:absolute;z-index:2;top:calc(env(safe-area-inset-top,0px) + 1rem);left:1rem;display:inline-flex;align-items:center;gap:.35rem;font:600 .95rem/1 var(--body);color:#12304A;background:rgba(255,255,255,.94);border:0;border-radius:999px;padding:.7rem 1rem .7rem .7rem;cursor:pointer}
.cv-back svg{width:18px;height:18px}
.cv-head{position:absolute;left:0;right:0;bottom:clamp(1.5rem,4vw,2.5rem)}
.cv-country{margin:0 0 .3rem;font-weight:600;opacity:.9}
.cv-head h2{color:#fff;font-size:clamp(2.6rem,7vw,4.8rem);line-height:1;margin:0;max-width:none}
.cv-list{padding:clamp(1.5rem,4vw,3rem) 0 calc(env(safe-area-inset-bottom,0px) + 4rem)}
.cv-exp{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(1.25rem,3vw,2.5rem);align-items:start;padding:clamp(1.5rem,3vw,2.25rem) 0;border-bottom:1px solid var(--line)}
.cv-exp .ph{position:relative;aspect-ratio:4/3;border-radius:12px;overflow:hidden;background:var(--sky)}
.cv-exp .ph .placeholder{background:var(--sky)}
.cv-exp .exp{padding:0;border:0}
.cv-exp .exp h4{font-size:clamp(1.25rem,2vw,1.5rem);margin-bottom:.5rem}
@media (max-width:700px){.cv-exp{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){#cityView[open]{animation:none}.city-card .media img{transition:none}}
.tab-soon{margin-left:.45rem;font-size:.75rem;font-weight:600;color:#3A6E9B}
.exp-tabs button[aria-selected="true"] .tab-soon{color:inherit;opacity:.85}
.soon-lead{margin:1.75rem 0 0;max-width:60ch;color:var(--slate)}
.soon-lead + .cities{margin-top:1.25rem}
.soon-pill{position:absolute;top:1rem;left:1rem;background:#8FB6D6;color:#0A1B33;font:600 .8rem/1 var(--body);padding:.45rem .75rem;border-radius:999px}
.credits{margin-top:1rem;font-size:.8rem}.credits summary{cursor:pointer}.credits ul{padding-left:1.1rem;max-height:40vh;overflow:auto}.credits li{margin:.2rem 0}

.tag-soon{background:#8FB6D6;color:#0A1B33}
.soon-note{font-weight:600}
.live{background:#0A1B33;color:#E7EEF6}
.live h2{color:#fff}.live .lead{color:#B9C9DC}
.live-pill{display:inline-block;background:#FF4545;color:#0A1B33;font:600 .8rem/1 var(--body);padding:.45rem .75rem;border-radius:999px;margin-bottom:1rem}
.live-grid{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));margin-top:1.8rem}
.live-card{border:1px solid rgba(255,255,255,.18);border-radius:14px;padding:1.2rem;background:rgba(255,255,255,.04)}
.live-card i{display:block;width:34px;height:3px;border-radius:2px;margin-bottom:.9rem}
.live-card b{display:block;color:#fff;font-size:1.05rem;margin-bottom:.25rem}
.live-card span{font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:#FF4545;font-weight:700}
.live-btn{background:#D7192D;color:#fff;border-color:#D7192D}.live-btn:hover{background:#B8001F;border-color:#B8001F;color:#fff}
.manca{display:none}
html.cantiere .manca{display:block}
.nota-manca{border:2px dashed #D9822B;background:#FFF6EA;color:#7A3E06;border-radius:10px;padding:10px 14px;font:500 .84rem/1.45 var(--body);margin:14px 0}
.live .nota-manca,.how .nota-manca{background:rgba(217,130,43,.14);color:#FFD9AE;border-color:#E9963A}
#cantiere-btn{position:fixed;right:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:90;font:700 .85rem var(--body);background:#D9822B;color:#fff;border:0;border-radius:999px;padding:11px 18px;box-shadow:0 6px 20px rgba(0,0,0,.2);cursor:pointer}
#cantiere-pannello{position:fixed;right:16px;bottom:calc(66px + env(safe-area-inset-bottom,0px));z-index:90;width:min(370px,calc(100vw - 32px));max-height:72vh;overflow:auto;background:#fff;color:#12304A;border:2px solid #D9822B;border-radius:14px;padding:16px 18px;box-shadow:0 10px 30px rgba(0,0,0,.2);font:.86rem/1.45 var(--body)}
#cantiere-pannello h4{margin:0 0 8px;font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:#9A5410}
#cantiere-pannello ol{margin:0 0 10px;padding-left:20px}#cantiere-pannello li{margin-bottom:6px}
#cantiere-pannello a{color:#3A6E9B}#cantiere-pannello .ok{color:#2E7D4F;font-weight:600;margin:0}
#cantiere-pannello input{width:auto;margin:0}
#cantiere-pannello label{display:flex;gap:8px;align-items:center;margin-top:8px;font-weight:600;cursor:pointer}

.exp .price{margin:.2rem 0 .7rem;display:flex;flex-direction:column;gap:.1rem}
.exp .price b{font:700 1.08rem/1.3 var(--body);color:var(--text)}
.exp .price b.ask-price{font-size:.98rem;color:var(--slate)}
.exp .price span{font-size:.8rem;color:var(--slate)}

.legal-id{display:block!important;font-size:.82rem;color:var(--slate);margin-top:.6rem}
.legal-dlg{max-width:760px;width:calc(100% - 2rem);max-height:86vh;border:0;border-radius:14px;padding:0;background:var(--surface);color:var(--text)}
.legal-dlg::backdrop{background:rgba(10,27,51,.55)}
.legal-body{padding:2rem 2rem 2.5rem;font:400 .95rem/1.6 var(--body)}
.legal-body h1,.legal-body h2{max-width:none}
.legal-body h1{font-size:1.6rem;margin:0 0 1rem}.legal-body h2{font-size:1.1rem;margin:1.6rem 0 .5rem}
.legal-body table{border-collapse:collapse;width:100%;margin:.8rem 0}.legal-body td,.legal-body th{border:1px solid var(--line);padding:.45rem .6rem;text-align:left;font-size:.9rem}
.legal-close{position:sticky;top:.6rem;float:right;margin:.6rem .6rem 0 0;border:0;background:var(--sky);color:var(--text);width:2.2rem;height:2.2rem;border-radius:999px;font-size:1.3rem;cursor:pointer}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.brand svg{width:auto!important;height:42px!important;display:block}
.brand .lg-d,.line-logo .lg-d,.pass-logo .lg-d{display:none!important}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .lg-l{display:none!important}:root:not([data-theme="light"]) .lg-d{display:block!important}}
:root[data-theme="dark"] .lg-l{display:none!important}:root[data-theme="dark"] .lg-d{display:block!important}
.line-logo{margin:0 0 1.2rem -28px}.line-logo svg{height:68px;width:auto;display:block}
.live-logo{margin:0 0 .6rem -28px}.live-logo svg{height:72px;width:auto;display:block}
.pass-sec{background:#FBF6E6}
.pass-logo{margin:0 0 .6rem -28px}.pass-logo svg{height:68px;width:auto;display:block}
.pass-pill{display:inline-block;background:#8A6114;color:#fff;font:600 .8rem/1 var(--body);padding:.45rem .75rem;border-radius:999px;margin-bottom:1rem}
:root[data-theme="dark"] .pass-sec{background:#1C1A12}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .pass-sec{background:#1C1A12}}
@media (max-width:700px){.brand svg{height:34px!important}.line-logo svg{height:46px}.live-logo svg{height:58px}.pass-logo svg{height:52px}}

/* ===== Selezione Touravo =====
   Sta sopra il catalogo normale e deve sembrare un'altra cosa: piu' aria,
   testo piu' largo, nessuna griglia di schede. Il fondo appena piu' scuro
   della pagina la stacca senza urlare. */
.sel-sec{background:var(--sky);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.sel-sec[hidden]{display:none}
.sel-kicker{font:600 .78rem/1 var(--body);letter-spacing:.18em;text-transform:uppercase;
  color:var(--slate);margin:0 0 1rem}
.sel-sec h2{max-width:18ch}
.sel-sec .lead{margin-top:1rem}
.sel-lista{margin-top:clamp(2.5rem,6vw,4rem);display:flex;flex-direction:column;gap:clamp(2rem,5vw,3.5rem)}
.sel-voce{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);
  gap:clamp(1.5rem,4vw,3rem);align-items:start;
  padding-top:clamp(2rem,5vw,3rem);border-top:2px solid var(--ink)}
.sel-voce:first-child{padding-top:0;border-top:0}
.sel-arte{position:relative;aspect-ratio:4/3;border-radius:14px;overflow:hidden;background:#16324A}
.sel-luogo{margin:0 0 .6rem;font:600 .9rem/1.3 var(--body);color:var(--slate)}
.sel-testo h3{font-family:var(--display);font-weight:800;letter-spacing:-.02em;line-height:1.1;
  font-size:clamp(1.5rem,2.6vw,2.1rem);margin:0 0 .9rem;max-width:22ch}
.sel-cosa{margin:0 0 1rem;font-size:1.02rem;max-width:58ch}
.sel-perche{margin:0 0 1.2rem;padding-left:1rem;border-left:3px solid var(--route);
  color:var(--slate);font-size:.95rem;max-width:56ch}
.sel-testo .ask{background:none;border:0;padding:0;cursor:pointer;
  font:600 1rem var(--body);color:var(--text);text-decoration:underline;
  text-decoration-color:var(--route);text-decoration-thickness:2px;text-underline-offset:5px}
.sel-testo .ask:hover{text-decoration-color:var(--text)}
@media (max-width:760px){
  .sel-voce{grid-template-columns:1fr}
  .sel-arte{aspect-ratio:16/9}
}

/* ===== Correzione per il tema scuro imposto =====
   La sezione "Come funziona" era disegnata come blocco scuro su pagina chiara:
   usava la variabile --ink, che nel tema scuro diventa chiara. Risultato: su un
   sito tutto scuro compariva un rettangolo bianco alto mille pixel, che sembra
   un errore invece di una scelta. Qui le si da' un fondo suo, piu' chiaro della
   pagina ma sempre blu, e si rimettono a posto i testi. */
:root[data-theme="dark"] .how{background:#16324A}
:root[data-theme="dark"] .how h2{color:var(--ink)}
:root[data-theme="dark"] .how .lead{color:color-mix(in srgb,var(--ink) 72%,transparent)}
:root[data-theme="dark"] .how .steps h3{color:var(--ink)}
:root[data-theme="dark"] .how .steps p{color:color-mix(in srgb,var(--ink) 76%,transparent)}

/* ===== Menu del telefono =====
   Sotto i 1100px la navigazione a barra non ci sta: spariva del tutto e
   restavano solo le lingue. Qui torna, dietro un pulsante, con dentro anche
   le lingue e il bottone del preventivo: cosi' la testata resta pulita e
   tutto quello che serve e' a un tocco. */
.menu-btn{
  display:none;
  width:46px;height:46px;flex:none;
  align-items:center;justify-content:center;
  background:none;border:1.5px solid var(--line);border-radius:12px;cursor:pointer;
}
.menu-btn:hover{border-color:var(--ink)}
.menu-barre{display:block;width:20px}
.menu-barre i{display:block;height:2px;background:var(--text);border-radius:2px;transition:transform .2s,opacity .2s}
.menu-barre i + i{margin-top:5px}
.menu-btn[aria-expanded="true"] .menu-barre i:nth-child(1){transform:translateY(7px) rotate(45deg)}
.menu-btn[aria-expanded="true"] .menu-barre i:nth-child(2){opacity:0}
.menu-btn[aria-expanded="true"] .menu-barre i:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

.menu-mobile{
  display:none;
  position:absolute;left:0;right:0;top:100%;
  background:var(--paper);border-bottom:1px solid var(--line);
  padding:1rem 0 1.6rem;
  box-shadow:0 18px 30px rgba(0,0,0,.18);
  /* su telefoni piccoli il pannello sarebbe piu' alto dello schermo */
  max-height:calc(100dvh - 68px);overflow-y:auto;overscroll-behavior:contain;
}
.menu-mobile .menu-voci{display:flex;flex-direction:column;width:min(1120px,100% - 2.5rem);margin-inline:auto}
.menu-voci a{
  display:flex;align-items:center;
  min-height:56px;padding:.2rem 0;
  font:600 1.15rem/1.3 var(--body);color:var(--text);text-decoration:none;
  border-bottom:1px solid var(--line);
}
.menu-voci a:last-child{border-bottom:0}
.menu-voci a.m-linea::before{
  content:"";width:9px;height:9px;border-radius:50%;
  background:currentColor;margin-right:.7rem;flex:none;
}
.menu-voci a.m-tour{color:var(--c-tour)}
.menu-voci a.m-live{color:var(--c-live)}
.menu-voci a.m-pass{color:var(--c-pass)}

.menu-lingue{
  display:flex;gap:.4rem;flex-wrap:wrap;
  width:min(1120px,100% - 2.5rem);margin:1.2rem auto 0;
}
.menu-lingue button{
  min-width:56px;min-height:46px;
  font:600 .95rem/1 var(--body);color:var(--slate);
  background:none;border:1.5px solid var(--line);border-radius:10px;cursor:pointer;
}
.menu-lingue button[aria-pressed="true"]{background:var(--ink);color:var(--paper);border-color:var(--ink)}

.menu-cta{
  display:flex;width:min(1120px,100% - 2.5rem);margin:1.2rem auto 0;
  padding:1.05rem;font-size:1.05rem;
}

@media (max-width:1100px){
  .menu-btn{display:inline-flex}
  .menu-mobile{display:block}
  .menu-mobile[hidden]{display:none}
  .right .lang{display:none}
}
/* il pannello deve poter uscire dalla testata */
header{position:sticky}

/* Introduzione sul telefono: sotto i 640px si mostra la versione corta,
   cosi' titolo, testo e i due pulsanti entrano senza scorrere. Le parole
   del desktop restano quelle, solo nascoste. */
.solo-telefono{display:none}
@media (max-width:640px){
  .solo-largo{display:none}
  .solo-telefono{display:block}
  .hero{padding:2.2rem 0 1.4rem}
  .hero h1{font-size:clamp(2.1rem,8.6vw,2.9rem)}
  .hero p{margin:1rem 0 1.4rem}
  .actions .btn{flex:1 1 auto;justify-content:center}
}
@media (max-width:640px){
  /* con sette voci il segnaposto a 16/9 allungava troppo la sezione:
     una fascia piu' bassa tiene la stessa grafica in meno spazio */
  .sel-arte{aspect-ratio:21/9}
}