/* Selettore lingua a globo per la landing — desktop e mobile. Usa <details>/<summary> nativi:
   si aprono al clic (desktop) e al tap (mobile) senza una riga di JS. I colori vengono dalle
   variabili :root della pagina. Caricato dopo lo <style> in linea, così le regole mobile qui
   sotto vincono per ordine (niente !important). Predisposto per una terza lingua: basta una
   voce in più nel .langmenu quando arriva /de/. */

.lang { position: relative; }
.lang > summary {
  list-style: none; cursor: pointer; user-select: none;
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--sumi2); font-size: 13px; padding: 6px 9px;
  border: 1px solid transparent; border-radius: 9px;
}
.lang > summary::-webkit-details-marker { display: none; }
.lang > summary:hover { color: var(--hanko-x); border-color: var(--linea); }
.lang[open] > summary { color: var(--hanko-x); border-color: var(--linea); }
.lang > summary svg { width: 17px; height: 17px; stroke: currentColor; fill: none; stroke-width: 1.5; stroke-linecap: round; }
.lang > summary .lc { font-weight: 700; letter-spacing: .4px; }
.lang > summary::after { content: "▾"; font-size: 10px; color: var(--muted); }

.lang .langmenu {
  position: absolute; right: 0; top: calc(100% + 6px); min-width: 158px; z-index: 60;
  background: #fff; border: 1px solid var(--linea); border-radius: 11px; box-shadow: var(--sh);
  padding: 5px; display: flex; flex-direction: column; gap: 2px;
}
.lang .langmenu a { display: block; padding: 9px 12px; border-radius: 8px; color: var(--sumi); font-size: 14px; }
.lang .langmenu a:hover { background: var(--soft); color: var(--hanko-x); }
.lang .langmenu a.on { color: var(--hanko-x); font-weight: 700; }

/* Mobile: il globo resta in testata anche a menu chiuso, così si cambia lingua senza aprire
   l'hamburger; la CTA «Inizia» compare solo col menu aperto (dove c'è spazio). */
@media (max-width: 880px) {
  .nav .right { display: flex; margin-left: auto; align-items: center; gap: 10px; }
  .nav .right .btn { display: none; }
  header.open .nav .right { width: 100%; order: 6; margin-left: 0; justify-content: space-between; padding-top: 12px; }
  header.open .nav .right .btn { display: inline-flex; }
  .lang .langmenu { right: 0; }
}

/* Nota «accesso in arrivo» (produzione, quando il login non è ancora pubblicato). */
.sito-toast { position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%) translateY(8px);
  background: #23201C; color: #F5F2EA; font-size: 13.5px; padding: 10px 16px; border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0,0,0,.3); z-index: 1200; opacity: 0; pointer-events: none;
  transition: opacity .18s, transform .18s; }
.sito-toast.on { opacity: 1; transform: translateX(-50%) translateY(0); }

/* Badge «Beta» verde: sul pilot (flag BUDOPASS_ACCESSO=true) sito.js accende Budopass Web e
   «Inizia» con questo tono, invece del «Presto» rosso della vetrina. --verde viene dal :root
   della pagina (definito nell'inline <style>). */
.store .soon.beta { background: var(--verde); }
.btn   .soon.beta { background: var(--verde); }

/* La card della demo nell'hero (deciso 5 set, mockup landing_demo_hook.html, variante A): staccata
   dalla fila degli store e di «Budopass Web» — quelli sono per chi ha già un account — con un gancio
   che dice cosa c'è dentro. La aggiunge sito.js dove il server dice che la demo c'è. Bordo hanko,
   sigillo 武 a sinistra, bottone pieno a destra; su telefono il bottone scende a tutta larghezza. */
.demo-card { margin-top: 24px; background: var(--carta); border: 1.5px solid var(--hanko); border-radius: 16px;
  padding: 18px 20px 18px 18px; display: grid; grid-template-columns: auto 1fr auto; gap: 16px; align-items: center;
  max-width: 620px; box-shadow: 0 10px 26px rgba(181,56,44,.10); text-decoration: none; color: var(--sumi); }
.demo-card:hover { box-shadow: 0 12px 30px rgba(181,56,44,.18); }
.demo-card .seal { width: 56px; height: 56px; border-radius: 14px; background: var(--hanko); color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 30px; font-family: 'Noto Sans JP', Inter, sans-serif; font-weight: 700; }
.demo-card .kick { font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: var(--hanko); font-weight: 700; margin-bottom: 4px; }
.demo-card b { display: block; font-size: 17px; line-height: 1.25; margin-bottom: 4px; }
.demo-card span.t { display: block; font-size: 12.5px; color: var(--muted); line-height: 1.45; }
.demo-card .go { background: var(--hanko); color: #fff; border-radius: 11px; padding: 12px 18px; font-size: 14px; font-weight: 600; white-space: nowrap; text-align: center; }
.demo-card .go small { display: block; font-size: 10.5px; font-weight: 500; opacity: .85; margin-top: 2px; }
/* Il bollino «Demo» sull'angolo del bottone (5 set): viola, un colore che la home non usa — non è
   l'hanko, non il verde di «Beta», non l'ambra né il blu — così la demo si riconosce e non si
   confonde con uno stato. Lo stesso viola sta sull'accesso web e nell'app. */
.demo-card .go { position: relative; }
.demo-card .go .bollino-demo { position: absolute; top: -9px; right: -8px; background: #6A4C93; color: #fff;
  font-size: 9px; font-weight: 800; letter-spacing: .8px; text-transform: uppercase; line-height: 1.3;
  padding: 3px 8px; border-radius: 20px; box-shadow: 0 2px 5px rgba(0,0,0,.22); }
@media (max-width: 720px) {
  .demo-card { grid-template-columns: auto 1fr; max-width: none; }
  .demo-card .go { grid-column: 1 / -1; }
}

/* Bollino «In arrivo» (14 set): il pilastro eventi è costruito ma spento fuori dalla demo, e il sito
   lo dice dove lo racconta — voce di menù, sezione in home, pagina degli eventi, attestato. Stessi
   toni del badge «Test aperto» (hanko-bg/hanko-x dal :root della pagina), così non è uno stato
   nuovo ma una nota. La .inarrivo-nota è la riga sotto il paragrafo che manda alla demo. */
.inarrivo { display: inline-block; vertical-align: middle; margin-left: 4px; padding: 2px 8px; border-radius: 999px;
  background: var(--hanko-bg); color: var(--hanko-x); font-size: 10px; font-weight: 700; letter-spacing: .6px;
  text-transform: uppercase; line-height: 1.5; white-space: nowrap; }
.eyebrow + .inarrivo { vertical-align: 2px; }
.inarrivo-nota { margin: 12px 0 0; padding-left: 12px; border-left: 3px solid var(--hanko); font-size: 14px; line-height: 1.5; color: var(--muted); }
.inarrivo-nota a { color: var(--hanko-x); font-weight: 600; }

/* Guscio dei mock «web» (14 set): dal 3 set il web ha la forma dell'app — barra in alto con ☰,
   profilo, campanella e preferenze, e quattro schede — e i mock delle pagine vetrina lo seguono.
   I contenitori .dash / .wa / .pvw-app erano una riga (barra laterale + contenuto): ora una colonna. */
.wshell{font-size:0;background:#fff;border-bottom:1px solid #EAE4D7;}
.wbar{display:flex;align-items:center;gap:7px;padding:7px 10px;}
.wmenu{width:12px;height:8px;border-top:1.6px solid #6E6A62;border-bottom:1.6px solid #6E6A62;position:relative;flex:none;}
.wmenu::after{content:"";position:absolute;left:0;right:0;top:3.2px;border-top:1.6px solid #6E6A62;}
.wav{width:20px;height:20px;border-radius:50%;background:var(--hanko);color:#fff;font-size:8px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;flex:none;}
.wctx b{display:block;font-size:10px;font-weight:700;line-height:1.15;color:var(--sumi);}
.wctx small{display:block;font-size:7.5px;color:#8a8272;line-height:1.2;}
.wchev{width:16px;height:16px;border-radius:5px;background:#F1EDE3;display:inline-flex;align-items:center;justify-content:center;font-size:10px;color:#6E6A62;flex:none;}
.wsp{flex:1;}
.wbell{width:11px;height:11px;border:1.5px solid #6E6A62;border-radius:6px 6px 2px 2px;position:relative;flex:none;margin-right:4px;}
.wbell i{position:absolute;top:-6px;right:-7px;background:var(--hanko);color:#fff;font-size:6.5px;font-style:normal;font-weight:700;border-radius:8px;padding:0 3px;line-height:9px;}
.wpref{width:12px;height:8px;border-top:1.5px solid #6E6A62;border-bottom:1.5px solid #6E6A62;flex:none;}
.wtabs{display:flex;gap:2px;padding:0 8px;}
.wtabs span{font-size:9px;color:#6E6A62;padding:5px 7px 6px;border-bottom:2px solid transparent;white-space:nowrap;}
.wtabs span.on{color:var(--hanko-x);font-weight:700;border-bottom-color:var(--hanko);}
.dash,.wa{flex-direction:column;}
.pvw-app{flex-direction:column;} .pvw-side{display:none;} .pvw-app .wtabs{padding:0 12px 2px;} .pvw-app .wtabs span{font-size:11px;}