/* FlyDown — fondamenta del marchio: colori, tipografia, forme, componenti
   condivisi da pagina di accesso e dashboard.

   Palette ufficiale (dal manuale del marchio):
     var(--c-ink) inchiostro   #6C7CFF iris      #A8E6CF menta
     #FFD7B5 pesca        #EDE9FF lilla     var(--c-cream) crema
   Tutto il resto e' derivato da questi sei. Tipografia Nunito: tondeggiante,
   amichevole, molto leggibile anche piccola. */

/* Nunito servito da FlyDown: nessuna richiesta ai server di Google, quindi
   nessun indirizzo IP dei visitatori passato a terzi. Font variabile (un file
   per tutti i pesi), licenza SIL OFL 1.1 in fonts/OFL.txt. */
@font-face{
  font-family:Nunito; font-style:normal; font-display:swap; font-weight:200 1000;
  src:url(/static/fonts/nunito-latin-wght-normal.woff2) format("woff2-variations"), url(/static/fonts/nunito-latin-wght-normal.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:Nunito; font-style:normal; font-display:swap; font-weight:200 1000;
  src:url(/static/fonts/nunito-latin-ext-wght-normal.woff2) format("woff2-variations"), url(/static/fonts/nunito-latin-ext-wght-normal.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

:root{
  /* --- la palette ufficiale: questi sei, e nient'altro ---------------- */
  --c-ink:#0F172A;
  --c-iris:#6C7CFF;
  --c-mint:#A8E6CF;
  --c-peach:#FFD7B5;
  --c-lilac:#EDE9FF;
  --c-cream:#FFF8F0;
  --iris:var(--c-iris); --mint:var(--c-mint); --peach:var(--c-peach);
  --lilac:var(--c-lilac); --cream:var(--c-cream);

  /* --- superfici e testo, tema chiaro */
  --ground:var(--c-cream);
  --surface:#FFFFFF;
  --surface-2:color-mix(in srgb, var(--c-lilac) 60%, #FFFFFF);
  --surface-3:var(--c-lilac);
  --ink:var(--c-ink);
  --ink-2:color-mix(in srgb, var(--c-ink) 84%, #FFFFFF);
  --muted:color-mix(in srgb, var(--c-ink) 66%, #FFFFFF);
  --rule:color-mix(in srgb, var(--c-iris) 12%, var(--c-lilac));
  --rule-2:color-mix(in srgb, var(--c-iris) 30%, var(--c-lilac));

  /* --- ruoli: fondi pastello, inchiostro sopra */
  --accent:var(--c-iris);
  --accent-ink:var(--c-ink);
  --accent-soft:var(--c-lilac);
  --accent-deep:var(--c-ink);
  /* bottone primario: iris col testo inchiostro (5:1). Il bianco sull'iris
     si fermava a 3,5:1, sotto la soglia di leggibilita'. */
  --accent-btn:var(--c-iris); --accent-btn-ink:var(--c-ink);
  --pop:var(--c-iris);                       /* prezzi, solo in grande */
  --pop-soft:var(--c-peach); --pop-ink:var(--c-ink); --su-pop:var(--c-ink);
  --ok:var(--c-ink);    --ok-soft:var(--c-mint);
  --gold:var(--c-ink);  --gold-soft:var(--c-peach);
  --grape:var(--c-ink); --grape-soft:var(--c-lilac);
  --sky:var(--c-ink);   --sky-soft:var(--c-lilac);
  --bad:var(--c-ink);   --bad-soft:var(--c-peach);
  --toast-bg:var(--c-ink); --toast-ink:var(--c-cream);
  /* errori: il blocco piu' forte, a colori invertiti. Avvisi in pesca, ok in menta. */
  --danger-bg:var(--c-ink); --danger-ink:var(--c-cream);

  /* --- forme */
  --r-xl:28px; --r:20px; --r-s:14px; --r-xs:10px; --r-pill:999px;
  --shadow-s:0 1px 2px color-mix(in srgb, var(--c-ink) 6%, transparent);
  --shadow-m:0 2px 6px color-mix(in srgb, var(--c-ink) 5%, transparent), 0 14px 30px -18px color-mix(in srgb, var(--c-ink) 30%, transparent);
  --shadow-l:0 30px 70px -34px color-mix(in srgb, var(--c-ink) 45%, transparent);
  --ring:0 0 0 4px color-mix(in srgb, var(--c-iris) 30%, transparent);

  --sans:Nunito,-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  --mono:"Nunito Sans",ui-monospace,SFMono-Regular,Menlo,monospace;
}

/* Tema scuro: il fondo e' l'inchiostro della palette, il testo e' la crema. */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --ground:var(--c-ink);
    --surface:color-mix(in srgb, var(--c-iris) 9%, var(--c-ink));
    --surface-2:color-mix(in srgb, var(--c-iris) 15%, var(--c-ink));
    --surface-3:color-mix(in srgb, var(--c-iris) 21%, var(--c-ink));
    --ink:var(--c-cream);
    --ink-2:color-mix(in srgb, var(--c-cream) 84%, var(--c-ink));
    --muted:color-mix(in srgb, var(--c-cream) 64%, var(--c-ink));
    --rule:color-mix(in srgb, var(--c-iris) 20%, var(--c-ink));
    --rule-2:color-mix(in srgb, var(--c-iris) 34%, var(--c-ink));
    /* col fondo scuro i pastello diventano il testo, e i loro fondi delle
       velature scure dello stesso colore */
    --accent-soft:color-mix(in srgb, var(--c-iris) 24%, var(--c-ink));
    --accent-deep:var(--c-lilac);
    --pop-soft:color-mix(in srgb, var(--c-peach) 18%, var(--c-ink)); --pop-ink:var(--c-peach);
    --ok:var(--c-mint);     --ok-soft:color-mix(in srgb, var(--c-mint) 16%, var(--c-ink));
    --gold:var(--c-peach);  --gold-soft:color-mix(in srgb, var(--c-peach) 16%, var(--c-ink));
    --grape:var(--c-lilac); --grape-soft:color-mix(in srgb, var(--c-iris) 22%, var(--c-ink));
    --sky:var(--c-lilac);   --sky-soft:color-mix(in srgb, var(--c-iris) 22%, var(--c-ink));
    --bad:var(--c-peach);   --bad-soft:color-mix(in srgb, var(--c-peach) 16%, var(--c-ink));
    --toast-bg:var(--c-cream); --toast-ink:var(--c-ink);
    --danger-bg:var(--c-peach); --danger-ink:var(--c-ink);
    --shadow-s:0 1px 2px rgba(0,0,0,.45);
    --shadow-m:0 2px 6px rgba(0,0,0,.4), 0 14px 30px -18px rgba(0,0,0,.85);
    --shadow-l:0 30px 70px -34px rgba(0,0,0,.9);
    --ring:0 0 0 4px color-mix(in srgb, var(--c-iris) 40%, transparent);
  }
}
:root[data-theme="dark"]{
  --ground:var(--c-ink);
  --surface:color-mix(in srgb, var(--c-iris) 9%, var(--c-ink));
  --surface-2:color-mix(in srgb, var(--c-iris) 15%, var(--c-ink));
  --surface-3:color-mix(in srgb, var(--c-iris) 21%, var(--c-ink));
  --ink:var(--c-cream);
  --ink-2:color-mix(in srgb, var(--c-cream) 84%, var(--c-ink));
  --muted:color-mix(in srgb, var(--c-cream) 64%, var(--c-ink));
  --rule:color-mix(in srgb, var(--c-iris) 20%, var(--c-ink));
  --rule-2:color-mix(in srgb, var(--c-iris) 34%, var(--c-ink));
  /* col fondo scuro i pastello diventano il testo, e i loro fondi delle
     velature scure dello stesso colore */
  --accent-soft:color-mix(in srgb, var(--c-iris) 24%, var(--c-ink));
  --accent-deep:var(--c-lilac);
  --pop-soft:color-mix(in srgb, var(--c-peach) 18%, var(--c-ink)); --pop-ink:var(--c-peach);
  --ok:var(--c-mint);     --ok-soft:color-mix(in srgb, var(--c-mint) 16%, var(--c-ink));
  --gold:var(--c-peach);  --gold-soft:color-mix(in srgb, var(--c-peach) 16%, var(--c-ink));
  --grape:var(--c-lilac); --grape-soft:color-mix(in srgb, var(--c-iris) 22%, var(--c-ink));
  --sky:var(--c-lilac);   --sky-soft:color-mix(in srgb, var(--c-iris) 22%, var(--c-ink));
  --bad:var(--c-peach);   --bad-soft:color-mix(in srgb, var(--c-peach) 16%, var(--c-ink));
  --toast-bg:var(--c-cream); --toast-ink:var(--c-ink);
  --danger-bg:var(--c-peach); --danger-ink:var(--c-ink);
  --shadow-s:0 1px 2px rgba(0,0,0,.45);
  --shadow-m:0 2px 6px rgba(0,0,0,.4), 0 14px 30px -18px rgba(0,0,0,.85);
  --shadow-l:0 30px 70px -34px rgba(0,0,0,.9);
  --ring:0 0 0 4px color-mix(in srgb, var(--c-iris) 40%, transparent);
}

*{box-sizing:border-box}
/* Un elemento nascosto resta nascosto: senza questo, regole come
   .field{display:flex} vincono sull'attributo hidden. */
[hidden]{display:none !important}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--ground); color:var(--ink);
  font-family:var(--sans); font-size:15px; font-weight:500; line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{margin:0; font-weight:800; letter-spacing:-.02em; line-height:1.15}
button,input,select,textarea{font:inherit; color:inherit}
a{color:var(--accent-deep); text-decoration:none}
a:hover{text-decoration:underline}

/* ---------------------------------------------------------------- marchio */
.logo{display:inline-flex; align-items:center; gap:10px; font-weight:800;
      letter-spacing:-.045em; color:var(--ink); line-height:1}
.logo .word{font-size:1em}
.logo .word b{font-weight:800; color:var(--ink)}
.logo .word i{font-style:normal; color:var(--accent)}
.logo-tag{display:block; font-size:11px; font-weight:700; letter-spacing:.16em;
          text-transform:uppercase; color:var(--muted); margin-top:3px}

/* ------------------------------------------------------------- componenti */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  border:1.5px solid transparent; border-radius:var(--r-pill); padding:11px 20px; min-height:44px; line-height:1.2;
  font-weight:800; font-size:14px; cursor:pointer; background:var(--surface-2);
  color:var(--ink); transition:transform .12s ease, box-shadow .16s ease, filter .16s ease;
}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn-primary{background:var(--accent-btn); color:var(--accent-btn-ink); box-shadow:0 8px 20px -10px var(--accent)}
.btn-primary:hover{filter:brightness(1.06)}
.btn-ghost{background:transparent; border-color:var(--rule-2); color:var(--ink-2)}
.btn-ghost:hover{border-color:var(--accent); color:var(--accent-deep)}
a.btn{text-decoration:none}
.btn-block{width:100%}
.btn:disabled{opacity:.55; cursor:not-allowed; transform:none}
.btn:focus-visible,.input:focus,.select:focus{outline:none; box-shadow:var(--ring)}

.input,.select{
  width:100%; background:var(--surface); border:1.5px solid var(--rule-2);
  border-radius:var(--r-s); padding:11px 14px; font-weight:600;
  transition:border-color .16s ease, box-shadow .16s ease;
}
.input::placeholder{color:var(--muted); font-weight:500}
.input:focus,.select:focus{border-color:var(--accent)}
.field{display:flex; flex-direction:column; gap:6px}
.label{font-size:12px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--muted)}
.hint{font-size:12.5px; color:var(--muted); font-weight:600}

.card{
  background:var(--surface); border:1.5px solid var(--rule); border-radius:var(--r);
  box-shadow:var(--shadow-s);
}

.pill{
  display:inline-flex; align-items:center; gap:7px; border:1.5px solid var(--rule-2);
  border-radius:var(--r-pill); padding:6px 13px; font-size:12.5px; font-weight:800;
  background:var(--surface); color:var(--ink-2); cursor:pointer;
}
.pill .dot{width:7px; height:7px; border-radius:50%; background:var(--muted); flex:none}

/* ------------------------------------------------------------------ piani */
/* Tre card come nel manuale: crema, lilla, menta. Il piano attivo si riconosce
   dal bordo pieno, non da un colore diverso: la gerarchia resta la stessa. */
.plans{display:grid; grid-template-columns:repeat(auto-fit,minmax(168px,1fr)); gap:12px}
.plan{
  position:relative; border-radius:var(--r-xl); padding:18px 16px 16px;
  border:2px solid transparent; display:flex; flex-direction:column; gap:6px;
  background:var(--surface-2); color:var(--ink);
}
.plan-basic{background:linear-gradient(170deg, color-mix(in srgb, var(--c-peach) 38%, #FFFFFF), var(--c-cream))}
.plan-pro{background:linear-gradient(170deg, color-mix(in srgb, var(--c-iris) 14%, var(--c-lilac)), var(--c-lilac))}
.plan-unlimited{background:linear-gradient(170deg, color-mix(in srgb, var(--c-mint) 70%, #FFFFFF), color-mix(in srgb, var(--c-mint) 35%, #FFFFFF))}
.plan .eyebrow{font-size:10.5px; font-weight:800; letter-spacing:.18em;
               text-transform:uppercase; color:var(--muted)}
.plan h3{font-size:25px}
.plan .what{font-size:13.5px; font-weight:700; color:var(--ink-2)}
.plan .price{margin-top:10px; font-size:23px; font-weight:800; letter-spacing:-.03em}
.plan .price small{font-size:13px; font-weight:700; color:var(--muted)}
.plan .btn{margin-top:14px}
.plan.on{border-color:var(--ink)}
.plan.on::after{
  content:var(--testo-piano-attivo, "Piano attivo"); position:absolute; top:14px; right:14px;
  background:var(--c-ink); color:var(--c-cream); font-size:10.5px; font-weight:800;
  letter-spacing:.08em; text-transform:uppercase; padding:4px 10px; border-radius:var(--r-pill);
}
/* Le card dei piani restano pastello anche col tema scuro: sono il marchio.
   Percio' il testo dentro resta inchiostro, non il colore di testo del tema. */
:root[data-theme="dark"] .plan{color:var(--c-ink)}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .plan{color:var(--c-ink)}
  :root:not([data-theme="light"]) .plan .what{color:color-mix(in srgb, var(--c-ink) 84%, #FFFFFF)}
  :root:not([data-theme="light"]) .plan .eyebrow,
  :root:not([data-theme="light"]) .plan .price small{color:color-mix(in srgb, var(--c-ink) 66%, #FFFFFF)}
}
:root[data-theme="dark"] .plan .what{color:color-mix(in srgb, var(--c-ink) 84%, #FFFFFF)}
:root[data-theme="dark"] .plan .eyebrow,
:root[data-theme="dark"] .plan .price small{color:color-mix(in srgb, var(--c-ink) 66%, #FFFFFF)}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important}
}

/* Il marchio e' il logo intero: pinguino e scritta accanto. Due file, uno per
   tema: quello scuro ha la scritta in crema, perche' l'inchiostro sul fondo
   notturno sparirebbe. Nessun vassoio sotto, nessun filtro sopra. */
.logo-ufficiale{display:inline-block; line-height:0}
/* Il display sta sulle classi e non su ".logo-ufficiale img": un selettore
   con classe + tipo pesa di piu' e vinceva su .solo-scuro{display:none},
   lasciando in pagina tutti e due i loghi uno sopra l'altro. */
.logo-ufficiale img{width:100%; height:auto}
.solo-chiaro{display:block}
.solo-scuro{display:none}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .solo-chiaro{display:none}
  :root:not([data-theme="light"]) .solo-scuro{display:block}
}
:root[data-theme="dark"] .solo-chiaro{display:none}
:root[data-theme="dark"] .solo-scuro{display:block}

/* ------------------------------------------------ piani (accesso e profilo) */
/* Mensile / annuale, sopra le card */
.periodi{display:flex; width:max-content; max-width:100%; gap:4px; padding:4px; margin:0 0 10px;
         background:var(--surface-2); border-radius:var(--r-pill)}
.periodi button{border:none; background:transparent; border-radius:var(--r-pill); padding:7px 14px; cursor:pointer;
                font:inherit; font-size:13px; font-weight:800; color:var(--muted); display:inline-flex; align-items:center; gap:6px}
.periodi button[aria-checked="true"]{background:var(--surface); color:var(--ink); box-shadow:var(--shadow-s)}
.periodi button:focus-visible{outline:none; box-shadow:var(--ring)}
.periodi-sconto{font-size:11px; font-weight:900; padding:2px 7px; border-radius:var(--r-pill);
                background:color-mix(in srgb, var(--c-mint) 70%, var(--surface)); color:var(--c-ink)}
.piani{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px}
.piano{
  appearance:none; font:inherit; text-align:left; cursor:pointer; padding:0; overflow:hidden;
  display:flex; flex-direction:column; border-radius:var(--r-xl); border:1.5px solid var(--rule);
  background:var(--surface); color:var(--c-ink); transition:transform .16s ease, box-shadow .16s ease;
}
.piano:hover{transform:translateY(-3px); box-shadow:var(--shadow-m)}
.piano:focus-visible{outline:none; box-shadow:var(--ring)}
.piano.attivo{border:2px solid var(--c-iris)}
.piano picture{display:grid; place-items:center; aspect-ratio:2/1; padding:8px 10px 0; background:var(--fondo-disegno)}
.piano picture img{display:block; width:auto; height:auto; max-width:100%; max-height:100%}
.piano-corpo{padding:12px 14px 14px; display:flex; flex-direction:column; gap:2px; flex:1}
.p-basic .piano-corpo{background:color-mix(in srgb, var(--c-peach) 42%, #FFFFFF)}
.p-pro .piano-corpo{background:var(--c-lilac)}
.p-unlimited .piano-corpo{background:color-mix(in srgb, var(--c-mint) 55%, #FFFFFF)}
.piano .eyebrow{font-size:10px; font-weight:800; letter-spacing:.18em; text-transform:uppercase;
                color:color-mix(in srgb, var(--c-ink) 66%, #FFFFFF)}
.piano .nome{font-size:22px; font-weight:800; letter-spacing:-.03em; line-height:1.15}
.piano .cosa{font-size:12.5px; font-weight:700; color:color-mix(in srgb, var(--c-ink) 84%, #FFFFFF)}
.piano .prezzo{margin-top:8px; font-size:20px; font-weight:900; letter-spacing:-.03em}
.piano .prezzo small{font-size:12px; font-weight:700; color:color-mix(in srgb, var(--c-ink) 66%, #FFFFFF)}
.piano .dettagli{margin-top:auto; padding-top:8px; font-size:12px; font-weight:800}
.piano.attivo .dettagli{color:var(--c-ink)}

/* Modale del piano: bassa, niente barra di scorrimento. L'immagine non si
   ingrandisce mai oltre la sua risoluzione, altrimenti si sgrana. */
.modale-piano{
  width:min(460px, calc(100vw - 24px)); max-height:calc(100vh - 24px); padding:0; border:none;
  border-radius:var(--r-xl); background:var(--surface); color:var(--ink); box-shadow:var(--shadow-l);
  overflow:hidden;
}
.modale-piano::backdrop{background:color-mix(in srgb, var(--c-ink) 55%, transparent); backdrop-filter:blur(4px)}
.modale-piano[open]{animation:mp-sale .2s ease}
@keyframes mp-sale{from{transform:translateY(14px); opacity:0} to{transform:none; opacity:1}}
.mp-immagine{display:block; background:var(--fondo-disegno)}
.mp-immagine picture{display:contents}
/* le illustrazioni sono 1000x500: a tutta larghezza restano nitide */
.mp-immagine img{display:block; width:100%; height:auto; aspect-ratio:2/1}
.mp-chiudi{position:absolute; top:12px; right:12px; background:var(--surface); color:var(--ink)}
.mp-corpo{padding:16px 22px 20px; display:flex; flex-direction:column; gap:12px}
.mp-corpo .eyebrow{font-size:10.5px; font-weight:800; letter-spacing:.18em; text-transform:uppercase; color:var(--muted)}
.mp-testa{display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-top:-8px}
.mp-testa h2{font-size:28px; letter-spacing:-.035em}
.mp-prezzo{margin:0; white-space:nowrap}
.mp-prezzo b{font-size:24px; font-weight:900; letter-spacing:-.03em; color:var(--pop)}
.mp-prezzo span{font-size:13px; font-weight:700; color:var(--muted)}
.mp-voci{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:7px}
.mp-voci li{display:flex; gap:10px; align-items:flex-start; font-size:14px; font-weight:600; line-height:1.4; color:var(--ink-2)}
.mp-voci li::before{content:""; flex:none; width:20px; height:20px; border-radius:50%;
  background:var(--c-mint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.5l3 3 6-7' fill='none' stroke='%230F172A' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/14px no-repeat}
.mp-azione{width:100%; padding:13px 20px; font-size:15px; margin-top:4px}
.mp-nota{margin:-4px 0 0; font-size:12.5px; font-weight:600; color:var(--muted); text-align:center}
@media (max-width:560px){
  .modale-piano{width:100vw; max-width:100vw; margin:auto 0 0; border-radius:var(--r-xl) var(--r-xl) 0 0}
}


/* in fondo: deve venire dopo le regole generali di .piano, altrimenti perde */
/* Su telefono i piani diventano righe basse: disegno piccolo a sinistra,
   nome e prezzo a destra. Tre card alte non ci stanno in una schermata. */
@media (max-width:560px){
  .piani{grid-template-columns:1fr; gap:8px}
  .piano{flex-direction:row; align-items:stretch; border-radius:var(--r)}
  .piano:hover{transform:none}
  .piano picture{aspect-ratio:auto; width:104px; flex:none; padding:4px 6px}
  .piano-corpo{padding:9px 12px; display:grid; grid-template-columns:1fr auto; column-gap:10px; align-content:center}
  .piano .eyebrow,.piano .dettagli{display:none}
  .piano .nome{font-size:17px}
  .piano .cosa{grid-column:1; font-size:12px}
  .piano .prezzo{grid-column:2; grid-row:1 / span 2; align-self:center; margin:0; font-size:16px; text-align:right}
  .piano .prezzo small{display:block; font-size:11px}
}

/* ------------------------------------------------------ installa l'app */
.btn-installa{gap:10px}
.btn-installa svg{width:18px; height:18px; flex:none}
.installa-ios .mp-corpo{padding-top:26px}
.ii-testa{display:flex; align-items:center; gap:14px}
.ii-testa img{width:64px; height:64px; border-radius:15px; box-shadow:var(--shadow-m)}
.ii-testa h2{font-size:22px}
.ii-testa p{margin:2px 0 0; font-size:13.5px; font-weight:600; color:var(--muted)}
.ii-passi{list-style:none; margin:4px 0 0; padding:0; display:flex; flex-direction:column; gap:10px}
.ii-passi li{display:flex; align-items:center; gap:12px; padding:12px 14px; border-radius:var(--r);
             background:var(--surface-2); font-size:14.5px; font-weight:600; color:var(--ink-2)}
.ii-passi b{color:var(--ink)}
.ii-passi svg{width:20px; height:20px; vertical-align:-4px; color:var(--c-iris); margin:0 2px}
.ii-num{width:28px; height:28px; border-radius:50%; flex:none; display:grid; place-items:center;
        background:var(--c-iris); color:var(--c-ink); font-weight:900; font-size:14px}

/* firma anche nella pagina di accesso */
.firma{display:flex; align-items:center; justify-content:center; gap:5px; margin:0;
       font-size:12.5px; font-weight:700; color:var(--muted)}
.firma b{color:var(--ink-2)}
.cuore{width:14px; height:14px; color:var(--c-iris); display:inline-block}

/* ------------------------------------------------------------ documenti legali */
.foot-legale{display:flex; justify-content:center; flex-wrap:wrap; gap:4px 8px; margin:0 0 6px;
  font-size:12.5px; font-weight:700; color:var(--muted)}
.foot-legale a{color:var(--ink-2); text-decoration:none}
.foot-legale a:hover{text-decoration:underline; text-underline-offset:3px}

.consenso{display:grid; grid-template-columns:auto 1fr; gap:10px; align-items:start; margin:2px 0 4px;
  font-size:13px; font-weight:600; line-height:1.45; color:var(--ink-2); cursor:pointer}
.consenso input{width:18px; height:18px; margin:1px 0 0; accent-color:var(--c-iris)}
.consenso a{color:var(--ink); font-weight:800; text-underline-offset:3px}

.dati-azioni{display:flex; flex-wrap:wrap; gap:8px}
.dati-azioni .btn{text-decoration:none}
.i-tuoi-dati .hint a{color:var(--ink-2); font-weight:800}
.btn-pericolo{color:#B4412F}
.btn-pericolo:hover{background:color-mix(in srgb, #B4412F 10%, var(--surface))}
.btn-pericolo-pieno{background:#B4412F; color:#FFFFFF; border:none}
.btn-pericolo-pieno:hover{background:#9A3526}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .btn-pericolo{color:#FF9C8A}
}
:root[data-theme="dark"] .btn-pericolo{color:#FF9C8A}
.modale-elimina .mp-corpo{padding:22px}
.modale-elimina h2{font-size:22px; letter-spacing:-.02em; margin:0}
.modale-elimina p{margin:0; font-size:14px; font-weight:600; color:var(--ink-2)}
.errore-elimina{color:#B4412F !important; font-weight:800 !important}

.torna-legale{font-size:13px; font-weight:800; color:var(--muted); text-decoration:none}
.torna-legale:hover{color:var(--ink)}
.legale{max-width:760px; margin:0 auto; padding:24px clamp(16px,4vw,32px) 56px}
.legale-schede{display:flex; gap:4px; padding:4px; width:max-content; max-width:100%; margin:0 0 26px;
  background:var(--surface-2); border-radius:var(--r-pill)}
.legale-schede a{padding:8px 15px; border-radius:var(--r-pill); font-size:13.5px; font-weight:800; color:var(--muted); text-decoration:none}
.legale-schede a[aria-current="page"]{background:var(--surface); color:var(--ink); box-shadow:var(--shadow-s)}
.legale-eyebrow{font-size:11px; font-weight:900; letter-spacing:.16em; text-transform:uppercase; color:var(--c-iris)}
.legale-testo h1{margin:6px 0 8px; font-size:clamp(30px,5vw,42px); font-weight:900; letter-spacing:-.035em; line-height:1.05}
.legale-intro{margin:0 0 6px; font-size:16px; font-weight:600; color:var(--ink-2)}
.legale-data{margin:0 0 26px; font-size:12.5px; font-weight:700; color:var(--muted)}
.legale-testo section{padding:18px 0; border-top:1.5px solid var(--rule)}
.legale-testo section:first-of-type{background:var(--surface-2); border:none; border-radius:var(--r); padding:16px 20px; margin-bottom:8px}
.legale-testo h2{margin:0 0 10px; font-size:20px; font-weight:900; letter-spacing:-.02em}
.legale-testo h3{margin:14px 0 4px; font-size:14.5px; font-weight:900}
.legale-testo p{margin:0 0 10px; font-size:15px; font-weight:500; line-height:1.65; color:var(--ink-2)}
.legale-testo a{color:var(--ink); font-weight:700; text-underline-offset:3px}
.legale-punti{margin:0 0 10px; padding-left:20px; display:flex; flex-direction:column; gap:7px}
.legale-punti li{font-size:15px; line-height:1.6; color:var(--ink-2)}
.legale-punti li::marker{color:var(--c-iris)}
.legale-tabella{width:100%; border-collapse:separate; border-spacing:0; margin:4px 0 12px; font-size:14px;
  border:1.5px solid var(--rule); border-radius:var(--r-s); overflow:hidden}
.legale-tabella th{text-align:left; font-size:11px; font-weight:900; letter-spacing:.06em; text-transform:uppercase;
  color:var(--muted); background:var(--surface-2); padding:9px 12px}
.legale-tabella td{padding:10px 12px; vertical-align:top; line-height:1.5; color:var(--ink-2); border-top:1px solid var(--rule)}
.legale-testo code{font-size:13px; padding:1px 6px; border-radius:6px; background:var(--surface-3)}
@media (max-width:640px){
  .legale-tabella, .legale-tabella tbody, .legale-tabella tr, .legale-tabella td{display:block; width:100%; box-sizing:border-box}
  .legale-tabella thead{display:none}
  .legale-tabella tr{border-top:1px solid var(--rule)}
  .legale-tabella tr:first-child{border-top:none}
  .legale-tabella td{border:none; padding:6px 12px}
  .legale-tabella td:first-child{padding-top:12px; font-weight:800; color:var(--ink)}
  .legale-tabella td:last-child{padding-bottom:12px}
  .legale-tabella td[data-label]:not(:first-child)::before{content:attr(data-label); display:block; font-size:10.5px; font-weight:900;
    letter-spacing:.06em; text-transform:uppercase; color:var(--muted)}
}

.piano{position:relative}
.in-arrivo{position:absolute; top:10px; left:10px; z-index:1; padding:3px 8px; border-radius:var(--r-pill); line-height:1.3;
  font-size:10px; font-weight:900; letter-spacing:.06em; text-transform:uppercase; background:var(--c-ink); color:var(--c-cream)}
.trappola{position:absolute; left:-10000px; width:1px; height:1px; overflow:hidden}

/* ------------------------------------------------------------ guide */
/* Tutti i pulsanti hanno la stessa misura: niente varianti per pagina. */
.guida-accedi{white-space:nowrap}
.guida-torna{display:table; margin:0 0 14px; font-size:13px; font-weight:800; color:var(--muted); text-decoration:none}
.guida-torna:hover{color:var(--ink)}
.guida-testo ol.legale-punti{padding-left:22px}
.guida-cta{margin:22px 0; padding:20px 22px; border-radius:var(--r); background:color-mix(in srgb, var(--c-iris) 16%, var(--surface));
  border:1.5px solid color-mix(in srgb, var(--c-iris) 30%, var(--rule)); display:flex; flex-direction:column; gap:8px; align-items:flex-start}
.guida-cta b{font-size:18px; font-weight:900; color:var(--ink)}
.guida-cta p{margin:0 !important}
.guida-cta .btn{margin-top:6px}
.guide-elenco{display:grid; gap:12px; margin-top:22px}
.guida-scheda{display:grid; grid-template-columns:220px 1fr; gap:18px; align-items:center; padding:14px; border-radius:var(--r); text-decoration:none;
  background:var(--surface); border:1.5px solid var(--rule); color:var(--ink)}
.guida-scheda:hover{border-color:var(--rule-2); box-shadow:var(--shadow-s)}
.guida-scheda b{font-size:18px; font-weight:900; line-height:1.3}
.guida-scheda span:last-child{font-size:14px; font-weight:600; color:var(--ink-2)}
.guida-eyebrow{font-size:11px; font-weight:900; letter-spacing:.1em; text-transform:uppercase; color:var(--c-iris)}
.guida-scheda-testo{display:flex; flex-direction:column; gap:4px; min-width:0}
.guida-miniatura{width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:calc(var(--r) - 4px); display:block}
@media (max-width:640px){ .guida-scheda{grid-template-columns:1fr} .guida-miniatura{aspect-ratio:16/9} }
.guida-foto{margin:14px 0 16px}
.guida-foto img{display:block; width:100%; height:auto; aspect-ratio:16/9; object-fit:cover; border-radius:var(--r); box-shadow:var(--shadow-s); background:var(--surface-2)}
.guida-foto figcaption{margin-top:6px; font-size:11.5px; font-weight:700; color:var(--muted)}
.guida-foto figcaption a{color:var(--muted); font-weight:700}
.guida-copertina{margin:4px 0 26px}
.guida-copertina img{aspect-ratio:16/8; object-fit:cover; border-radius:var(--r-xl); box-shadow:var(--shadow-m)}
.guida-testo h3 + .guida-foto{margin-top:8px}
.chiedi-invito{justify-self:start; margin:-6px 0 4px; font-size:13px}
.modale-invito .mp-corpo{padding:24px}
.modale-invito h2{margin:0 0 4px}
.modale-invito form{display:flex; flex-direction:column; gap:12px}
.modale-invito p{margin:0; font-size:14px; font-weight:600; color:var(--ink-2)}
.guida-nav{display:flex; align-items:center; gap:4px 16px; flex-wrap:wrap; justify-content:flex-end}
.guida-nav > a:not(.btn){font-size:14px; font-weight:800; color:var(--ink-2); text-decoration:none}
.guida-nav > a:not(.btn):hover{color:var(--ink)}
@media (max-width:520px){ .guida-nav > a:not(.btn){display:none} }
.guide-altre{margin:22px 0 0; font-weight:800}
/* Mappe dei viaggi: SVG disegnato dal server, colori dal tema. */
.mappa-figura{margin:6px 0 16px}
.mappa-coppia{display:grid; grid-template-columns:minmax(0,380fr) minmax(0,620fr); gap:10px}
@media (max-width:640px){ .mappa-coppia{grid-template-columns:1fr} .mappa-tutto{order:1} }
.mappa-tutto,.mappa-giro{position:relative}
.mappa-didascalia{position:absolute; left:10px; top:10px; padding:3px 9px; border-radius:var(--r-pill); font-size:11px; font-weight:900;
  background:var(--surface); color:var(--ink-2); box-shadow:var(--shadow-s)}
.mappa-tutto .mappa-svg{aspect-ratio:auto}
.mappa-svg{display:block; width:100%; height:auto; border-radius:var(--r); box-shadow:var(--shadow-s); background:var(--map-sea)}
.mappa-etichetta{font:900 20px/1 var(--sans); fill:var(--ink); paint-order:stroke; stroke:var(--map-casing); stroke-width:5px; stroke-linejoin:round}
.mappa-notti{font-size:15px; font-weight:800}
.mappa-numero{font:900 15px/1 var(--sans); fill:var(--map-bus-ink)}
.mappa-figura figcaption{display:flex; align-items:center; flex-wrap:wrap; gap:6px; margin-top:7px; font-size:11.5px; font-weight:700; color:var(--muted)}
.mappa-figura .l-volo,.mappa-figura .l-bus{display:inline-block; width:18px; height:4px; border-radius:2px; background:var(--c-iris)}
.mappa-figura .l-bus{background:var(--map-bus); margin-left:8px}
.guida-testo p.guida-arrivo{margin:-2px 0 18px; padding:10px 14px; border-radius:var(--r-s); background:var(--surface-2); font-size:14px}
.guida-testo p.guida-arrivo b:first-child{color:var(--c-iris)}

/* ------------------------------------------------------------ home pubblica */
.pagina-home main{max-width:1120px; margin:0 auto; padding:0 clamp(16px,4vw,36px)}
.home-topbar .logo-ufficiale{width:180px}
.home-hero{display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); gap:28px; align-items:center; padding:clamp(28px,6vw,72px) 0 clamp(20px,4vw,40px)}
@media (max-width:860px){ .home-hero{grid-template-columns:1fr} .home-logo{order:-1; max-width:420px} }
.home-hero h1{margin:10px 0 14px; font-size:clamp(36px,5.6vw,64px); font-weight:900; line-height:1.02; letter-spacing:-.045em; color:var(--ink)}
.home-hero h1 em{font-style:normal; color:var(--c-iris)}
.home-hero-testo > p.home-sotto{margin-bottom:12px; font-size:clamp(19px,2vw,24px); font-weight:800; color:var(--ink)}
.home-hero-testo > p{margin:0; font-size:clamp(16px,1.6vw,19px); font-weight:600; line-height:1.55; color:var(--ink-2); max-width:52ch}
.home-azioni{display:flex; flex-wrap:wrap; gap:10px; margin:22px 0 12px}

.home-hero-testo p.home-nota{font-size:13px; font-weight:700; color:var(--muted)}
.home-logo img{width:100%; height:auto}
.home-sezione{padding:clamp(30px,5vw,56px) 0; border-top:1.5px solid var(--rule)}
.home-sezione h2,.home-finale h2{margin:6px 0 10px; font-size:clamp(26px,3.4vw,38px); font-weight:900; letter-spacing:-.035em; line-height:1.1}
.home-sezione > p.home-riga-intera{max-width:none}
.home-sezione > p,.home-piu-citta > div > p{margin:0 0 18px; font-size:16px; font-weight:600; line-height:1.6; color:var(--ink-2); max-width:70ch}
.home-passi{list-style:none; counter-reset:passo; margin:22px 0 0; padding:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px}
@media (max-width:760px){ .home-passi{grid-template-columns:1fr} }
.home-passi li{counter-increment:passo; padding:20px; border-radius:var(--r); background:var(--surface); border:1.5px solid var(--rule); display:flex; flex-direction:column; gap:6px}
.home-passi li::before{content:counter(passo); width:34px; height:34px; border-radius:50%; display:grid; place-items:center; margin-bottom:6px;
  background:var(--c-lilac); color:var(--c-ink); font-weight:900}
.home-passi li:nth-child(2)::before{background:var(--c-mint)}
.home-passi li:nth-child(3)::before{background:var(--c-peach)}
.home-passi b{font-size:17px; font-weight:900}
.home-passi span{font-size:14.5px; font-weight:600; line-height:1.5; color:var(--ink-2)}
.home-schede{display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:12px; margin-top:18px}
.home-scheda{display:flex; flex-direction:column; gap:6px; padding:10px 10px 14px; border-radius:var(--r); background:var(--surface); border:1.5px solid var(--rule);
  text-decoration:none; color:var(--ink)}
.home-scheda:hover{border-color:var(--rule-2); box-shadow:var(--shadow-s)}
.home-scheda img{width:100%; aspect-ratio:16/10; object-fit:cover; border-radius:calc(var(--r) - 6px); margin-bottom:4px}
.home-scheda .guida-eyebrow,.home-scheda b{padding:0 4px}
.home-scheda b{font-size:16px; font-weight:900; line-height:1.3}
.loghi{display:flex; flex-wrap:wrap; gap:8px; list-style:none; margin:0; padding:0}
.loghi li{display:inline-flex; align-items:center; gap:7px; padding:4px 13px 4px 4px; border-radius:var(--r-pill); background:var(--surface); border:1.5px solid var(--rule); font-size:14px; font-weight:800}
.loghi img{width:26px; height:26px; border-radius:7px; display:block}
.home-loghi{margin-top:16px}
.home-piani{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px}
@media (max-width:760px){ .home-piani{grid-template-columns:1fr} }
.home-piano{position:relative; padding:12px 12px 18px; border-radius:var(--r); background:var(--surface); border:1.5px solid var(--rule)}
.home-piano img{display:block; width:100%; height:auto; border-radius:calc(var(--r) - 6px); background:#FCEFE3}
.home-piano h3{margin:12px 6px 2px; font-size:20px; font-weight:900}
.home-piano-prezzo{margin:0 6px 8px; display:flex; align-items:baseline; gap:6px; flex-wrap:wrap}
.home-piano-prezzo b{font-size:22px; font-weight:900}
.home-piano-prezzo span,.home-piano-cosa{font-size:13.5px; font-weight:600; color:var(--ink-2)}
.home-piano-cosa{margin:0 6px}
.home-piano .in-arrivo{top:20px; left:20px}
.home-faq{display:grid; gap:8px; margin-top:16px; max-width:820px}
.home-faq details{border-radius:var(--r-s); background:var(--surface); border:1.5px solid var(--rule); padding:0 18px}
.home-faq summary{cursor:pointer; padding:15px 0; font-size:16px; font-weight:800; list-style:none; display:flex; justify-content:space-between; gap:12px}
.home-faq summary::-webkit-details-marker{display:none}
.home-faq summary::after{content:"+"; font-size:20px; line-height:1; color:var(--c-iris); font-weight:900}
.home-faq details[open] summary::after{content:"–"}
.home-faq details p{margin:0 0 16px; font-size:15px; font-weight:500; line-height:1.6; color:var(--ink-2)}
.home-finale{display:flex; flex-direction:column; align-items:center; text-align:center; padding:clamp(34px,6vw,64px) 20px; margin:12px 0 30px;
  border-radius:var(--r-xl); background:color-mix(in srgb, var(--c-iris) 14%, var(--surface)); border:1.5px solid color-mix(in srgb, var(--c-iris) 26%, var(--rule))}
.home-finale img{width:170px; height:auto; margin-bottom:4px}
.home-finale h2{max-width:22ch}
.home-finale .home-azioni{justify-content:center; margin-bottom:0}

/* Lingue */
html.i18n-attesa body{visibility:hidden}
.foot-lingue{display:flex; justify-content:center; flex-wrap:wrap; gap:4px 8px; margin:2px 0 8px; font-size:12.5px; font-weight:700}
.foot-lingue a{color:var(--muted); text-decoration:none}
.foot-lingue a[aria-current="page"]{color:var(--ink); text-decoration:underline; text-underline-offset:3px}
.lingua-select{font:inherit; font-size:13px; font-weight:700; color:var(--ink-2); background:var(--surface); border:1.5px solid var(--rule);
  border-radius:var(--r-pill); padding:5px 12px; cursor:pointer}
.legale-nota-lingua{margin:-14px 0 22px; padding:10px 14px; border-radius:var(--r-s); background:var(--surface-2); font-size:13px; font-weight:600; color:var(--ink-2)}

/* Pagine «Voli low cost da …» */
.aero-numeri{list-style:none; display:flex; flex-wrap:wrap; gap:8px; padding:0; margin:14px 0 18px}
.aero-numeri li{padding:8px 14px; border-radius:var(--r-pill); background:var(--surface); border:1.5px solid var(--rule); font-size:13.5px; font-weight:700; color:var(--ink-2)}
.aero-numeri b{font-size:17px; font-weight:900; color:var(--ink)}
.aero-compagnie{margin-top:6px}
.aero-compagnie small{font-weight:700; color:var(--muted); margin-left:2px}
.aero-paese{padding:12px 0 4px}
.legale-testo section.aero-sez{background:none; border-radius:0; padding:18px 0; margin:0; border-top:1.5px solid var(--rule)}
.aero-paese h3{margin:4px 0 8px; font-size:16px}
.aero-paese h3 small{font-size:12px; font-weight:800; color:var(--muted); margin-left:4px}
.aero-mete{list-style:none; padding:0; margin:0; display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:6px}
.aero-mete li{display:flex; align-items:center; gap:7px; padding:8px 11px; border-radius:var(--r-s); background:var(--surface); border:1.5px solid var(--rule); font-size:14px}
.aero-mete b{font-weight:800; color:var(--ink); min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.aero-codice{font-size:11px; font-weight:800; color:var(--muted)}
.aero-loghi{margin-left:auto; display:flex; gap:3px; flex:none}
.aero-loghi img{width:18px; height:18px; border-radius:5px; display:block}
.aero-vicini{display:flex; flex-wrap:wrap; gap:8px}
.aero-vicini .chip{text-decoration:none; font-size:13px; padding:6px 12px}
.aero-elenco{display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:10px; margin-top:20px}
.aero-scheda{display:flex; flex-direction:column; gap:3px; padding:14px 16px; border-radius:var(--r); background:var(--surface); border:1.5px solid var(--rule); text-decoration:none; color:var(--ink)}
.aero-scheda:hover{border-color:var(--rule-2); box-shadow:var(--shadow-s)}
.aero-scheda b{font-size:17px; font-weight:900}
.aero-scheda span{font-size:12px; font-weight:800; color:var(--muted)}
.aero-conta{font-size:13px; font-weight:800; color:var(--muted); margin-left:4px}
.chip-tutte{background:var(--c-lilac) !important; color:var(--c-ink) !important}

/* Tasto del tema nel piede: gira fra automatico, chiaro e scuro (static/traccia.js). */
.foot-tema{margin:2px 0 8px}
.tema-btn{display:inline-flex; align-items:center; gap:6px; min-height:32px; padding:4px 12px; border-radius:var(--r-pill, 999px);
  border:1.5px solid var(--rule); background:var(--surface); color:var(--ink-2); font:inherit; font-size:12.5px; font-weight:800; cursor:pointer}
.tema-btn:hover{border-color:var(--rule-2); color:var(--ink)}
.tema-btn:focus-visible{outline:none; box-shadow:var(--ring)}
.tema-btn svg{width:15px; height:15px}
.tema-btn span{display:none}
.tema-btn[data-tema="auto"] .t-auto, .tema-btn[data-tema="light"] .t-light, .tema-btn[data-tema="dark"] .t-dark{display:inline}

/* Menu delle lingue con le bandierine, nell'intestazione (i18n.menu e i18n.js menuLingua). */
.lingua-menu{position:relative; display:inline-block}
.lingua-menu summary{list-style:none; display:inline-flex; align-items:center; gap:6px; min-height:36px; padding:4px 10px;
  border-radius:var(--r-pill, 999px); border:1.5px solid var(--rule); background:var(--surface); color:var(--ink-2);
  font-size:13px; font-weight:800; cursor:pointer; user-select:none}
.lingua-menu summary::-webkit-details-marker{display:none}
.lingua-menu summary::after{content:""; width:6px; height:6px; border-right:2px solid currentColor; border-bottom:2px solid currentColor;
  transform:rotate(45deg) translateY(-2px); margin-left:2px; opacity:.6}
.lingua-menu summary:hover{border-color:var(--rule-2); color:var(--ink)}
.lingua-menu summary:focus-visible{outline:none; box-shadow:var(--ring)}
.lingua-menu img{width:20px; height:14px; border-radius:3px; object-fit:cover; box-shadow:0 0 0 1px rgba(15,23,42,.12); flex:none}
.lingua-menu ul{position:absolute; right:0; top:calc(100% + 6px); z-index:60; margin:0; padding:6px; list-style:none; min-width:170px;
  background:var(--surface); border:1.5px solid var(--rule); border-radius:14px; box-shadow:0 12px 30px rgba(15,23,42,.16)}
.lingua-menu li a, .lingua-menu li button{display:flex; align-items:center; gap:10px; width:100%; padding:8px 10px; border:none; background:none;
  border-radius:9px; font:inherit; font-size:14px; font-weight:750; color:var(--ink); text-decoration:none; cursor:pointer; text-align:left}
.lingua-menu li a:hover, .lingua-menu li button:hover{background:var(--surface-2)}
.lingua-menu [aria-current="page"]{background:var(--accent-soft)}
.login-lingua{position:absolute; top:14px; right:16px; z-index:30}
@media (max-width:640px){ .lingua-menu summary span{display:none} .lingua-menu summary{padding:4px 8px} }

/* Lingua e tema vicini nell'intestazione. */
.preferenze{display:inline-flex; align-items:center; gap:6px; flex:none}
.tema-icona{display:inline-grid; place-items:center; width:36px; height:36px; padding:0; border-radius:50%;
  border:1.5px solid var(--rule); background:var(--surface); color:var(--ink-2); cursor:pointer; flex:none}
.tema-icona:hover{border-color:var(--rule-2); color:var(--ink)}
.tema-icona:focus-visible{outline:none; box-shadow:var(--ring)}
.tema-icona svg{width:18px; height:18px; display:none}
.tema-icona[data-tema="auto"] .i-auto, .tema-icona[data-tema="light"] .i-light, .tema-icona[data-tema="dark"] .i-dark{display:block}

/* Intestazione delle pagine pubbliche su telefono: una riga sola, logo a sinistra,
   lingua, tema e tasto principale a destra, senza sovrapposizioni. */
@media (max-width:640px){
  .topbar:has(.guida-nav){flex-wrap:nowrap; gap:8px; padding:10px 14px}
  .topbar:has(.guida-nav) .brand{flex:0 1 auto; min-width:0}
  .topbar:has(.guida-nav) .logo-ufficiale, .home-topbar .logo-ufficiale{width:min(118px, 30vw); height:auto}
  .guida-nav{flex-wrap:nowrap; gap:6px; min-width:0}
  .guida-nav .btn{min-height:36px; padding:6px 12px; font-size:13px; white-space:nowrap}
  .guida-nav .torna-legale{font-size:13px; white-space:nowrap}
  .preferenze{gap:4px}
  .tema-icona{width:34px; height:34px}
  .lingua-menu summary{min-height:34px}
}
@media (max-width:380px){
  .guida-nav .btn{padding:6px 9px; font-size:12px}
  .lingua-menu summary::after{display:none}
}
@media (max-width:640px){
  .topbar:has(.guida-nav) .brand{flex:1 1 auto; overflow:hidden}
  /* In dashboard lingua e tema stanno anche nel profilo: su telefono l'intestazione resta alle azioni. */
  #menu-lingua .preferenze{display:none}
}
@media (max-width:440px){
  .lingua-menu summary::after{display:none}
  .lingua-menu summary{padding:4px 7px}
  .topbar:has(.guida-nav) .logo-ufficiale, .home-topbar .logo-ufficiale{width:96px}
  .guida-nav .btn{padding:6px 10px; font-size:12px}
}
@media (max-width:370px){
  .topbar:has(.guida-nav) .logo-ufficiale, .home-topbar .logo-ufficiale{width:80px}
  .guida-nav .btn{padding:5px 8px; font-size:11.5px}
}
.foot .titolare{font-size:12px; font-weight:600; color:var(--muted); margin:2px 0 6px}