/* SicilyTravel — stile condiviso del funnel standalone (landing · email · minisito).
   Tema sk1 (blu mare/cielo) + accento oro, come la home del sito. */
:root{
  --teal:#38b6c4; --blue:#1f8fb0; --sea:#16688f; --deep:#123f6e; --night:#0b2a47;
  --gold:#ffd98a; --amber:#f2a743; --coral:#ef8f3a;
  --ink:#eaf4fb;
  --glass:rgba(9,34,58,.66); --glass-brd:rgba(255,255,255,.16);

  /* ══ IL TEMA, DETTO UNA VOLTA SOLA ═════════════════════════════════════════
     Sono lo stesso identico gradiente e lo stesso colore del tema `sk1` di
     st26 — le quattro fermate qui sopra SONO le sue fermate. Li' vivevano nel
     database e arrivavano in pagina come `--menu-grad`; qui sono due righe di
     CSS, perche' finche' il tema e' uno solo una tabella per cambiarlo e' una
     tabella che nessuno cambia.

     Perche' con questi nomi: mezzo sito scrive gia' `var(--tema-theme, …)`, ma
     nessuno lo definiva — cadevano TUTTI sul colore di ripiego, ognuno col
     suo, e il risultato era un sito con quattro azzurri diversi che nessuno
     aveva scelto. Adesso il colore del tema e' uno, e si cambia qui. */
  --tema-theme:  #1f8fb0;
  --tema-accent: #f2a743;
  --tema-grad:   linear-gradient(160deg, #38b6c4 0%, #1f8fb0 34%, #16688f 66%, #123f6e 100%);
}
*{box-sizing:border-box; margin:0; padding:0}
/* nessun link cade nel blu di default del browser: l'accento è l'oro del tema */
a{ color:var(--gold); }
/* touch-action su html come nel sito principale (app.css): su iOS il doppio-tap si blocca a livello di documento */
/* L'header è fisso (54px + notch): senza questo, ogni salto ad ancora finisce
   sotto la barra e il titolo della sezione resta coperto. */
html{ scroll-behavior:smooth; touch-action:manipulation;
  scroll-padding-top:calc(54px + env(safe-area-inset-top) + 14px); }
body{ font-family:-apple-system,BlinkMacSystemFont,'SF Pro Text','Hanken Grotesk',system-ui,'Segoe UI',sans-serif; color:var(--ink);
  background:#082138; overflow-x:hidden; -webkit-font-smoothing:antialiased; line-height:1.5;
  touch-action:manipulation; } /* niente doppio-tap per lo zoom (pinch e scroll restano) */

/* scena mare/cielo */
.scene{ position:fixed; inset:0; z-index:-3; overflow:hidden; }
.sky{ position:absolute; inset:0; background:var(--sky-grad); transition:background 1.3s ease; }
.sun{ position:absolute; left:50%; top:var(--sun-top,76%); width:min(120vw,1100px); height:min(120vw,1100px);
  transform:translate(-50%,-50%); border-radius:50%; opacity:var(--orb-op,.85);
  background:radial-gradient(circle, var(--orb-a) 0%, var(--orb-b) 16%, var(--orb-c) 32%, rgba(255,170,110,0) 64%);
  filter:blur(2px); animation:sunpulse 7s ease-in-out infinite; transition:opacity 1.3s ease, background 1.3s ease; }
@keyframes sunpulse{ 0%,100%{transform:translate(-50%,-50%) scale(1)} 50%{transform:translate(-50%,-50%) scale(1.035)} }
#stars{ position:absolute; inset:0 0 46% 0; pointer-events:none; opacity:var(--star-op,0); transition:opacity 1.6s ease; }
#stars i{ position:absolute; width:2px; height:2px; border-radius:50%; background:#eaf4ff; opacity:.8; animation:twk 4s ease-in-out infinite; }
@keyframes twk{ 0%,100%{opacity:.12} 50%{opacity:.85} }
/* stelle luminose reali: posizionate per RA/Dec, sorgono e tramontano (solo puntini) */
/* La polvere di stelle: piccole, spente, senza alone. L'alone è quello che
   rende "grossa" una stella — toglierlo è il modo più economico per far
   sembrare lontane quelle che riempiono il cielo. */
.rstar.polvere{ box-shadow:none; background:#dfeaff; }

.rstar{ position:absolute; border-radius:50%; background:#f2f7ff; box-shadow:0 0 3px 1px rgba(220,235,255,.5);
  z-index:0; pointer-events:none; opacity:0; transition:opacity 1.5s ease; }
/* satellite (passaggio lento e dritto) + aereo (beacon rosso che lampeggia) */
.sat{ position:absolute; width:2px; height:2px; border-radius:50%; background:#eaf4ff; box-shadow:0 0 4px 1px rgba(220,235,255,.7); opacity:0; z-index:2; pointer-events:none; }
.plane{ position:absolute; width:2px; height:2px; border-radius:50%; background:#fff; box-shadow:0 0 3px 1px rgba(255,255,255,.55); z-index:2; pointer-events:none; }
.plane::after{ content:''; position:absolute; left:-2px; top:-.5px; width:3.5px; height:3.5px; border-radius:50%; background:#ff2f1c; box-shadow:0 0 8px 3px rgba(255,55,35,1); animation:pblink 1.6s linear infinite; }
@keyframes pblink{ 0%,90%{opacity:0} 93%{opacity:1} 96%,100%{opacity:0} }
@media (prefers-reduced-motion:reduce){ .plane::after{ animation:none } }
/* La luna è un CORPO, non un velo: opaca, o c'è o non c'è (0/1). Per tenerla
   discreta non si abbassa l'opacità — si vedrebbero le stelle attraverso — ma si
   smorza la maschera dentro l'SVG, che resta comunque coprente. */
.moon{ position:absolute; top:15%; right:16%; width:78px; height:78px; z-index:1; pointer-events:none;
  opacity:var(--moon-on,0); filter:drop-shadow(0 0 18px rgba(210,226,255,calc(var(--moon-glow,.45) * .8)));
  transition:opacity 1.6s ease; }
.moon svg{ width:100%; height:100%; display:block; }
/* pianeti a occhio nudo: dietro la luna (che può coprirli), davanti al cielo/stelle */
.planet{ position:absolute; border-radius:50%; z-index:0; pointer-events:none; opacity:0; transition:opacity 1.6s ease, left 2.4s ease, top 2.4s ease; }
.coast{ position:absolute; left:0; right:0; bottom:15%; height:26vh; min-height:150px; background:no-repeat center bottom/cover; }
.sea{ position:absolute; left:0; right:0; bottom:0; height:var(--sea-h,16%); background:var(--sea-grad); transition:height 2.4s ease, background 1.3s ease; }

/* ═══ IL LUCCICHIO ══════════════════════════════════════════════════════════
   `--shimmer` era dichiarato in tutte e sette le fasi e non lo usava nessuno:
   la regola che lo disegnava se n'era andata insieme alla costa. Qui torna, e
   il colore non si sceglie — ce l'ha già ogni ora del giorno: bianco caldo a
   mezzogiorno, ambra al tramonto, azzurro di luna la notte.

   ═══ PERCHÉ TRE STRATI E NON UNO ══════════════════════════════════════════
   Un solo strato ripetuto disegna una griglia, e una griglia sull'acqua si
   riconosce subito: non è mare, è carta da parati. Tre strati con passi che non
   vanno l'uno nell'altro (37, 61, 89 pixel — numeri primi fra loro) si
   ripetono insieme solo dopo qualche metro di schermo, cioè mai.

   ═══ PIÙ FITTO LONTANO ════════════════════════════════════════════════════
   Il mare vero luccica di più verso l'orizzonte: là i riflessi sono tanti,
   piccoli e attaccati; vicino a te sono pochi e larghi. La maschera li tiene
   pieni in alto e li spegne scendendo — è prospettiva, non decorazione.
   Comincia poco sotto la riga dell'orizzonte: un puntino proprio sul bordo la
   sfarinerebbe, e quella riga l'abbiamo appena rimessa.

   ═══ DUE VELI CHE NON VANNO A TEMPO ═══════════════════════════════════════
   L'intensità si può animare solo su tutto un elemento insieme: un velo solo
   vuol dire che TUTTI i puntini si accendono e si spengono nello stesso
   istante, e non è luccichio — è un battito, e si vede che è finto.
   Quindi due veli, con due durate che non si dividono fra loro (2,4 e 3,7
   secondi): si sovrappongono sempre sfasati, e a occhio i riflessi si accendono
   uno per conto suo. Il ciclo intero torna al punto di partenza dopo quasi un
   minuto e mezzo — cioè non lo vedi mai tornare.

   Sotto ai due secondi comincia a sembrare pioggia: un riflesso sull'acqua non
   sta fermo, ma nemmeno corre.                                                */
/* Un riflesso: un pallino. Posizione, misura, spazio percorso, durata e
   ritardo glieli scrive sky.js uno per uno — qui c'è solo come si comporta. */
/* ═══ SECCO, NON SFUMATO ═══════════════════════════════════════════════════
   Niente `border-radius`: un tondo da 1 px non è un tondo, è un pixel che il
   browser sbava sui vicini per far finta che sia rotondo — e quello che resta
   è un alone. A questa misura la forma non si vede: si vede solo se il punto è
   acceso o spento, e allora che sia acceso e basta.
   Niente ombre e niente sfumature per la stessa ragione: un riflesso sull'acqua
   è una scintilla, non una lampadina con l'alone. */
.sea b{
  position:absolute; pointer-events:none;
  background:var(--shimmer);
  opacity:0;
  animation:brillio var(--dur,9s) ease-in-out var(--rit,0s) infinite;
}
/* ═══ IL COLORE VIENE DA CHI ILLUMINA ══════════════════════════════════════
   Un riflesso non ha un colore suo: ha quello della cosa che rimbalza. Senza
   classe è acqua illuminata e prende `--shimmer`; dentro la colonna di una luce
   prende quella luce.
     .luce   il disco — sole a mezzogiorno, luna la notte: `--orb-a` cambia da sé
     .faro   il bianco caldo del faro, lo stesso di `.faro` qui sotto
     .citta  la riga di luci sull'orizzonte: si accende con `--city-op`, che di
             giorno è zero — quindi di giorno questa classe non si vede nemmeno */
.sea b.luce { background:#ffffff; }
.sea b.faro { background:#fff8e6; }
.sea b.citta{ background:#ffd9a0; animation-name:brillioCitta; }
@keyframes brillioCitta{
  0%, 2%     { opacity:0; transform:translateX(0); }
  6%         { opacity:calc(var(--city-op,0) * var(--brill-max,1)); }
  10%, 100%  { opacity:0; transform:translateX(var(--sp,3px)); }
}

/* ═══ ACCESO PER UN ATTIMO, SPENTO PER TUTTO IL RESTO ══════════════════════
   Il ciclo dura fra i sette e i tredici secondi, ma la luce sta su per il 6%:
   mezzo secondo scarso. È la differenza fra un riflesso e una lucina.
   Nel frattempo scivola dei pochi pixel che gli tocca — due all'orizzonte,
   cinque a riva — e si spegne lì, senza tornare indietro: quando si riaccende
   è un'altra cresta, non la stessa che rimbalza.                              */
/* ═══ APPARE IN DISSOLVENZA, SCOMPARE IN DISSOLVENZA ═══════════════════════
   Il riflesso non salta più: sale fino al pieno e da lì ricala, e il tempo in
   cui si vede è diviso a metà — metà per apparire, metà per scomparire. Il
   colmo sta esattamente in mezzo alla finestra, che è quello che rende la
   salita e la discesa lunghe uguali.                                        */
/* ═══ PIÙ SEI LONTANO, MENO DURI ═══════════════════════════════════════════
   Un riflesso è una cresta che si gira, prende la luce e la perde. Da vicino
   quella cresta è larga e ci mette un attimo a girarsi: la luce resta accesa.
   All'orizzonte la stessa cresta la vedi da chilometri, schiacciata in un
   pixel — passa davanti alla luce e se n'è già andata.

   Non si può scrivere la durata dell'accensione con una variabile: le
   percentuali di un fotogramma sono fisse. Quindi tre ricette, una per fascia
   di distanza, e sky.js dà a ogni puntino la sua. Il ciclo resta lo stesso —
   cambia solo quanto sta acceso dentro quel ciclo.

     lontano   0,6% del ciclo   ← un terzo
     medio     1,2%
     vicino    1,9%             ← quello pieno                                */
/* Il colmo non è per forza il pieno: `--brill-max` lo abbassa dove serve —
   di notte a metà, perché sull'acqua scura una scintilla piena grida troppo. */
@keyframes brillio{          /* vicino: finestra 8% del ciclo, 4 su e 4 giù */
  0%, 2%    { opacity:0; transform:translateX(0); }
  6%        { opacity:var(--brill-max,1); }
  10%, 100% { opacity:0; transform:translateX(var(--sp,3px)); }
}
@keyframes brillioMedio{     /* medio: finestra 6%, 3 su e 3 giù */
  0%, 2%    { opacity:0; transform:translateX(0); }
  5%        { opacity:var(--brill-max,1); }
  8%, 100%  { opacity:0; transform:translateX(var(--sp,3px)); }
}
@keyframes brillioLontano{   /* lontano: finestra 4%, 2 su e 2 giù */
  0%, 2%    { opacity:0; transform:translateX(0); }
  4%        { opacity:var(--brill-max,1); }
  6%, 100%  { opacity:0; transform:translateX(var(--sp,3px)); }
}
body[data-phase="notte"]{  --brill-max:.5; }   /* notte:  metà forza */
body[data-phase="silver"]{ --brill-max:.3; }   /* silver: trasparenti al 70% */
/* ═══ IL MARE MOSSO, QUANDO CI SARÀ ════════════════════════════════════════
   Questo luccichio è di acqua CALMA: riflessi singoli, che si accendono per
   mezzo secondo e si spostano di pochi pixel.

   Il mare agitato è un altro mestiere, e cambia due cose insieme:
     · le creste corrono, quindi lo spostamento diventa lungo e continuo
       invece che breve e isolato (i vecchi numeri erano 9 s a piastrella con
       un lampeggio da 2,4 — dieci pixel di scia per riflesso);
     · i riflessi si accendono A GRUPPI, perché una stessa onda gira insieme
       tutta la sua maschera verso la luce. Qui i gruppi sono un difetto, là sono
       il fenomeno.

   Vale anche per il riflesso di una COSA — una barca, una luce sulla riva: lì i
   puntini appartengono a un oggetto solo e devono muoversi insieme.           */


.topveil{ position:fixed; top:0; left:0; right:0; height:120px; z-index:-2; background:linear-gradient(to bottom, rgba(4,16,30,.4), transparent); pointer-events:none; }
@media (prefers-reduced-motion:reduce){ .sun,.sea b,#stars i,.legs{ animation:none!important } }

/* HEADER della landing (HTML, _header.php): sfondo dinamico + hamburger a sinistra + brand centrato.
   Nella home appare scorrendo (l'hero sparisce); nelle altre pagine è .ln-static, sempre visibile. */
/* ═══ LA BARRA C'È SEMPRE — QUELLO CHE ARRIVA È IL SUO FONDO ════════════════
   Sulla presentazione la barra intera scivolava giù quando l'hero se ne andava,
   e finché non arrivava non c'erano nemmeno il menu e le maschere: chi apriva il
   sito per la prima volta si trovava una pagina senza uscite, e per aprire il
   menu doveva prima scorrere. Le due porte del sito non possono dipendere da
   dove sei arrivato con lo scorrimento.

   Allora la barra sta ferma dove deve stare, sempre, e le sue due icone sono lì
   dal primo istante — bianche sul cielo, che si leggono. Quello che compare
   scorrendo è il FONDO e il nome: prima la barra è un vetro, poi diventa una
   barra. È la stessa cosa che si vedeva prima, tolto il difetto. */
/* ═══ SALVATO SULLA SCHERMATA HOME, IL NOTCH È NOSTRO ═══════════════════════
   Nel browser la barra di Safari sta sopra la nostra e il telefono ci consegna
   una pagina che comincia sotto il notch: `env(safe-area-inset-top)` vale zero
   e cinquantaquattro pixel bastano.

   Aperto dalla schermata Home no: la pagina comincia SOTTO IL VETRO, sotto
   l'ora e la batteria, e quello spazio dobbiamo tenercelo noi. Il margine
   c'era (`padding-top`), ma l'altezza era rimasta 54: il margine se la mangiava
   quasi tutta, alla riga delle icone restavano una ventina di pixel, e il filo
   di sotto passava in mezzo alle icone invece che sotto.

   Cinquantaquattro sono l'altezza della RIGA; il notch si somma. È lo stesso
   conto che facevano già il segnaposto (`.ln-spacer`) e tutte le pagine: era
   solo la barra a non farlo, cioè l'unica che quel conto lo deve fare davvero. */
.landing-nav{ position:fixed; top:0; left:0; right:0; z-index:55;
  min-height:calc(54px + env(safe-area-inset-top)); display:flex; align-items:center; justify-content:center;
  padding-top:env(safe-area-inset-top);
  background:var(--sky-grad); background-size:100% 820px; background-position:top center; background-repeat:no-repeat;
  border-bottom:1px solid rgba(255,255,255,.14);
  transition:background-color .45s ease, opacity .45s ease; pointer-events:none; }

/* Il vetro: finché l'insegna grande è in vista la barra non ha fondo né nome,
   ma le due icone ci sono e si toccano. Poi arriva `show` e diventa una barra. */
.landing-nav.ln-vetro:not(.show){ background-image:none; background-color:transparent;
  border-bottom-color:transparent; }
.landing-nav.ln-vetro:not(.show) .ln-brand{ opacity:0; pointer-events:none; }

.ln-brand{ transition:opacity .35s ease; }

/* Le due porte si toccano sempre, anche quando la barra è un vetro. */
.landing-nav.show, .landing-nav.ln-static{ pointer-events:auto; }
.ln-burger, .ln-profile{ pointer-events:auto; }
/* ══ NELLE PAGINE DI DENTRO LA BARRA E' DEL TEMA ═══════════════════════════════
   Sulla presentazione la barra sta SOPRA il cielo disegnato, e prende il suo
   colore (`--sky-grad`): li' e' giusto, perche' e' un pezzo di quella scena.
   Nelle pagine di dentro il cielo non c'e', e quel gradiente si ritrovava
   appoggiato su niente. Qui la barra e' del tema — lo stesso identico verde-blu
   dell'intestazione di st26.

   NB: le pagine dell'account caricano anche `conto.css`, che si prende la
   stessa barra e viene DOPO. Anche li' il colore e' `--tema-grad`: se si cambia
   il tema, cambiano tutte e due insieme perche' leggono la stessa variabile. */
.landing-nav.ln-static{ background:var(--tema-grad); }
.ln-brand{ font-family:'Lobster',cursive; color:#fff; font-size:1.55rem; line-height:1; text-decoration:none;
  text-shadow:0 1px 0 rgba(0,0,0,.14), 0 0 18px rgba(150,220,235,.45); }
/* hamburger */
.ln-burger{ position:absolute; left:.35rem; top:env(safe-area-inset-top); bottom:0; width:46px;
  display:inline-flex; flex-direction:column; align-items:center; justify-content:center; gap:5px;
  background:none; border:0; cursor:pointer; padding:0; }
.ln-burger span{ display:block; border-radius:2px; background:#fff; box-shadow:0 1px 2px rgba(0,10,25,.35); }
/* icona maschere a destra → il tuo profilo */
.ln-profile{ position:absolute; right:.5rem; top:env(safe-area-inset-top); bottom:0; width:46px;
  display:inline-flex; align-items:center; justify-content:center; color:#fff; text-decoration:none;
  text-shadow:0 1px 2px rgba(0,10,25,.35); }

/* ═══ LE ICONE DELL'INTESTAZIONE HANNO UNA MISURA SOLA ══════════════════════
   Quella delle pagine dell'account: maschere a 1,57rem e i tre trattini in
   proporzione. Stava scritta in `sito.css`, che però lo caricano solo le pagine
   di dentro: sulla presentazione le stesse due icone erano più piccole, e
   passando da una pagina all'altra si vedevano cambiare misura. Sta qui, che è
   il foglio che c'è dappertutto. */
/* ═══ LE DUE ICONE DELLA BARRA — LE MISURE STANNO QUI, E SOLO QUI ═══════════
   Erano scritte in tre fogli diversi — `land.css`, `sito.css`, `nostre.css` —
   e ogni pagina ne caricava due su tre: le stesse due icone cambiavano misura
   passando dalla presentazione all'account, e ogni ritocco ne sistemava una e
   ne rompeva un'altra. Adesso stanno in questo foglio, che c'è su OGNI pagina
   del sito, e negli altri non ci sono più.

   1,8rem porta le maschere a ~29 di larghezza, i tre trattini stanno a 26,4:
   i due lati della barra pesano uguale. Non sono due numeri tondi, sono due
   numeri che si pareggiano — toccandone uno va rifatto l'altro. */
.landing-nav a i,
.landing-nav button i{ font-size:1.57rem; }

.landing-nav .ln-profile i{ font-size:1.8rem; }

.ln-burger{ gap:6px; }
.ln-burger span{ width:26.4px; height:2.4px; }
.ln-profile:active{ transform:scale(.92); }
/* spaziatore: spinge giù il contenuto sotto l'header fisso (pagine senza hero) */
.ln-spacer{ height:calc(54px + env(safe-area-inset-top)); }
/* backdrop */
.ln-backdrop{ position:fixed; inset:0; z-index:70; background:rgba(3,10,22,.55); backdrop-filter:blur(2px);
  opacity:0; visibility:hidden; transition:opacity .3s ease, visibility .3s; }
.ln-backdrop.show{ opacity:1; visibility:visible; }
/* offcanvas sinistro */
/* ═══ IL MENU SCORRE ════════════════════════════════════════════════════════
   Undici piastrelle, le tue maschere e l'uscita non ci stanno in una schermata di
   telefono — e quello che non ci sta, se il menu non scorre, non esiste: c'è nel
   codice e non lo vede nessuno. `contain` perché lo scorrimento resti suo: senza,
   arrivato in fondo si mette a scorrere la pagina sotto, che non è quello che
   uno sta chiedendo. Il fondo della pagina lo rispetta la sua imbottitura. */
/* Sette per cento più largo: 290 → 310, e la quota di schermo con lui. Le tre
   piastrelle per riga ci stanno più comode e i nomi lunghi si spezzano meno. */
.ln-drawer{ position:fixed; top:0; left:0; bottom:0; z-index:80; width:min(86vw,310px);
  padding:calc(env(safe-area-inset-top) + .6rem) 0 calc(1rem + env(safe-area-inset-bottom));
  display:flex; flex-direction:column;
  overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch;
  /* La barra di scorrimento non si vede: qui dentro non serve a orientarsi — le
     voci sono dieci e si scorrono col dito — e una riga grigia in mezzo alle
     piastrelle è l'unica cosa del menu che non abbiamo disegnato noi. */
  scrollbar-width:none; -ms-overflow-style:none;
  background:linear-gradient(160deg,#0b2440,#061426); border-right:1px solid rgba(255,255,255,.12);
  box-shadow:12px 0 40px -12px rgba(0,0,0,.6);
  transform:translateX(-104%); transition:transform .38s cubic-bezier(.2,.7,.2,1); }
.ln-drawer::-webkit-scrollbar{ display:none; }
.ln-drawer.open{ transform:none; }
.ln-drawer-head{ display:flex; align-items:center; justify-content:space-between; padding:.2rem 1rem 1rem; border-bottom:1px solid rgba(255,255,255,.1); }
.ln-drawer-brand{ font-family:'Lobster',cursive; color:#fff; font-size:1.4rem; line-height:1; text-shadow:0 0 16px rgba(150,220,235,.4); }
.ln-close{ background:none; border:0; color:rgba(255,255,255,.85); font-size:1.3rem; cursor:pointer; padding:.2rem .3rem; line-height:1; }
/* ═══ IL MENU È UNA GRIGLIA, NON UN ELENCO ══════════════════════════════════
   Dodici righe una sotto l'altra si LEGGONO: l'occhio parte dalla prima e
   scende finché non trova la parola giusta. Una griglia si GUARDA — le icone
   stanno tutte insieme in una schermata, e la mano va dove sa già che sta la
   cosa, come sulla schermata di un telefono.

   Tre per riga, quadrate: è la misura in cui un'icona resta un'icona e la
   parola sotto si legge senza spezzarsi. Con quattro le parole si accavallano,
   con due si torna a un elenco travestito.

   È la stessa forma degli strumenti in account — icona in un tondo, nome
   piccolo in maiuscoletto sotto — perché è lo stesso gesto: scegliere fra cose
   che si riconoscono dalla maschera. */
.ln-drawer-nav{ display:grid; grid-template-columns:repeat(3,1fr);
  padding:.6rem; gap:.4rem; }

/* Il form dell'uscita non deve fare da scatola: si toglie di mezzo e lascia che
   il bottone stia nella griglia insieme agli altri. */
.ln-drawer-nav form{ display:contents; }

/* Quello che nel menu non è una voce — un titolo di sezione, la fila dei modi di
   vedere — non è una piastrella: prende tutta la riga e resta com'era. */
.ln-drawer-nav > .menu-section,
.ln-drawer-nav > .menu-schermo{ grid-column:1 / -1; }

.ln-drawer-nav a,
.ln-drawer-nav form button{ position:relative;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:.4rem; aspect-ratio:1; padding:.45rem .25rem;
  border:0; border-radius:14px; background:rgba(255,255,255,.05);
  color:rgba(234,244,251,.9); text-decoration:none; cursor:pointer;
  font-family:inherit; font-size:.55rem; font-weight:800; line-height:1.2;
  letter-spacing:.02em; text-transform:uppercase; text-align:center;
  /* Le parole lunghe si spezzano dove si spezzano in italiano — «IMPOSTA-
     ZIONI» — non a caso in mezzo a una sillaba. `anywhere` da solo tagliava
     «PRESENTAZIO / NE», che è il modo di far sembrare rotto un menu. */
  hyphens:auto; overflow-wrap:break-word;
  transition:background .15s, color .15s; }

.ln-drawer-nav a i,
.ln-drawer-nav form button i{ flex:none;
  width:36px; height:36px; border-radius:50%;
  display:grid; place-items:center; font-size:1.05rem;
  background:rgba(255,255,255,.07); color:var(--gold);
  transition:background .15s, color .15s; }

.ln-drawer-nav a > span,
.ln-drawer-nav form button > span{ display:block; max-width:100%; }

/* Il lucchetto non sta più in fondo a una riga: qui le righe non ci sono, e
   allora si appoggia all'angolo della piastrella, come un bollino. */
.ln-drawer-nav a .ln-lk{ position:absolute; top:6px; right:8px;
  font-size:.7rem; color:rgba(234,244,251,.35); }
.ln-drawer-nav a .ln-lk.open{ color:#7ef7a6; }

.ln-drawer-nav a:hover,
.ln-drawer-nav form button:hover{ background:rgba(255,255,255,.1); }

/* Dove sei adesso: la piastrella si accende e l'icona si rovescia — oro pieno
   col segno scuro dentro. Si trova con la coda dell'occhio, senza leggere. */
.ln-drawer-nav a[aria-current="page"]{ background:rgba(255,217,138,.16); color:#fff; }
.ln-drawer-nav a[aria-current="page"] i{ background:var(--gold); color:#0b2440; }

/* ═══ DUE SEGNI NOSTRI ══════════════════════════════════════════════════════
   La trinacria per l'intro — è la maschera del sito — e la Sicilia per la home,
   che è il posto. Non sono glifi di un font americano buono per qualunque sito
   del mondo: sono due sagome nostre, ritagliate col colore che ha il tondo
   intorno, così si accendono insieme a lui quando sei lì. */
.ln-tondo{ font-style:normal; }

.ln-fig{ display:block; background:currentColor;
  -webkit-mask-position:center; mask-position:center;
  -webkit-mask-size:contain;    mask-size:contain;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat; }

.ln-fig-tri{ width:18px; height:19px;
  -webkit-mask-image:url('trinacria_sagoma.svg'); mask-image:url('trinacria_sagoma.svg'); }

.ln-fig-sic{ width:22px; height:15px;
  -webkit-mask-image:url('sicilia-sola.svg'); mask-image:url('sicilia-sola.svg'); }

/* ═══ LE TUE MASCHERE ══════════════════════════════════════════════════════════
   In fondo al menu, dove si guarda quando si vuole andare da un'altra parte.
   Tonde e non quadrate: una maschera è tonda dappertutto nel sito, e la forma dice
   «questa è una persona» prima di qualunque parola. */
.ln-facce{ margin-top:.9rem; padding:.9rem .6rem 0;
  border-top:1px solid rgba(255,255,255,.1); }
.ln-facce[hidden]{ display:none; }

.ln-facce-tit{ margin:0 .3rem .5rem; font-size:.6rem; font-weight:800;
  letter-spacing:.12em; text-transform:uppercase; color:rgba(126,203,255,.85); }

.ln-facce-riga{ display:grid; grid-template-columns:repeat(3,1fr); gap:.4rem; }

/* ═══ IL NOME COM'È SCRITTO ═════════════════════════════════════════════════
   Niente `text-transform:uppercase`: il nome di una maschera è una cosa che una
   persona ha scelto lettera per lettera — «pasQualindolo» ha quella Q in mezzo
   apposta — e le maiuscole di forza la cancellano. Qui sotto il pallino si
   legge la stessa parola che si legge grande sul suo profilo.

   Un filo più grande di prima, perché in minuscolo ci sta la stessa parola in
   meno spazio. */
.ln-faccia{ display:flex; flex-direction:column; align-items:center; gap:.35rem;
  padding:.4rem .2rem; border-radius:14px; text-decoration:none;
  color:rgba(234,244,251,.9); font-size:.62rem; font-weight:800;
  letter-spacing:.01em; text-align:center;
  line-height:1.2; overflow-wrap:break-word; hyphens:auto;
  transition:background .15s; }
.ln-faccia:hover{ background:rgba(255,255,255,.08); }

/* Il filo chiaro attorno alla maschera: è lo stesso della card grande
   (`.ac-hero-av`), e serve per la stessa ragione — una fotografia scura su un
   menu scuro non ha un bordo, sfuma nel fondo e la maschera sembra un buco.
   Il filo le ridà il contorno, e le tre maschere tornano tre cose separate. */
.ln-faccia-tonda{ flex:none; width:56px; height:56px; border-radius:50%;
  background:rgba(255,255,255,.08) center/cover no-repeat;
  /* Un filo, non una cornice: a un pixel dà il contorno e sparisce; a due
     diventa un anello e la maschera sembra incorniciata. */
  border:1px solid rgba(255,255,255,.75);
  box-shadow:0 2px 10px -4px rgba(0,12,28,.8);
  display:grid; place-items:center; color:var(--gold); font-size:1.3rem; }
.ln-faccia-tonda[hidden]{ display:none; }

/* Il più in coda alle maschere: stessa misura, stesso posto, ma vuoto e
   tratteggiato — è un invito, non una maschera.

   È un BOTTONE, non un link: apre il foglio invece di portare via. E un bottone
   senza vestito se lo mette il browser — fondo grigio, angoli quadrati, bordo:
   in mezzo a tre maschere tonde compariva una piastrella di sistema. Si spoglia. */
button.ln-faccia{ background:none; border:0; padding:.4rem .2rem;
  cursor:pointer; font-family:inherit; -webkit-appearance:none; appearance:none; }

.ln-faccia-piu .ln-faccia-tonda{ border-style:dashed; background:rgba(255,255,255,.05); }
/* momento della giornata dentro l'offcanvas */
.ln-phase-label{ margin:1.1rem 1rem .5rem; padding-top:.9rem; border-top:1px solid rgba(255,255,255,.1);
  font-size:.6rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:rgba(126,203,255,.85); }
.ln-phase{ display:flex; flex-wrap:wrap; gap:.35rem; padding:0 .8rem; }
.ln-phase button{ flex:0 0 auto; padding:.4rem .6rem; border-radius:999px; cursor:pointer; font-family:inherit;
  font-size:.72rem; font-weight:700; color:rgba(234,244,251,.8);
  background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.2); }
.ln-phase button.on{ color:var(--night); background:var(--gold); border-color:var(--gold); }
/* link all'admin della grafica del cielo */
.ln-grafica{ display:flex; align-items:center; gap:.6rem; margin:1rem .8rem 0; padding:.7rem .8rem; border-radius:12px;
  color:var(--gold); text-decoration:none; font-weight:700; font-size:.86rem;
  background:rgba(255,217,138,.1); border:1px solid rgba(255,217,138,.35); }
.ln-grafica i{ font-size:.9rem; }
@media (prefers-reduced-motion:reduce){ .ln-drawer,.ln-backdrop,.landing-nav{ transition:none; } }

/* hero */
.hero{ min-height:100svh; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:3.4rem 1.3rem 3rem; position:relative; }
/* LA TRINACRIA — bianca, come nel sito: gli SVG non si disegnano, si usano come
   MASCHERA e il colore lo mette il background. Così è una sagoma piena, netta a
   qualsiasi misura, e resta coerente con .tri di account e profili_figura del sito.
   Le gambe restano un livello a parte: sono loro che girano. */
/* 97px: era 118, ridotta del 18%. Il margine negativo la tira in su oltre il
   bordo della sezione: -68px, cioè i -48 di prima più i 20 chiesti dopo. */
/* La trinacria e il nome sono due link: si toccano e si va a casa. Da fuori non
   si vede nessuna differenza — nessuna sottolineatura, nessun colore da link:
   sono un disegno e un'insegna, e restano tali. */
.medallion{ display:block; position:relative; width:97px; height:97px; margin:-68px auto 1.2rem;
  filter:drop-shadow(0 0 22px rgba(255,214,140,.45)) drop-shadow(0 10px 22px rgba(0,20,40,.5)); }
.medallion .legs,.medallion .head{ position:absolute; inset:0; background-color:#fff;
  -webkit-mask-size:contain; mask-size:contain;
  -webkit-mask-position:center; mask-position:center;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat; }
.medallion .legs{ -webkit-mask-image:url('trinacria_legs.svg?v=5'); mask-image:url('trinacria_legs.svg?v=5');
  animation:spin 26s linear infinite; will-change:transform; }
.medallion .head{ -webkit-mask-image:url('trinacria_head.svg?v=5'); mask-image:url('trinacria_head.svg?v=5'); }
@keyframes spin{ to{ transform:rotate(360deg) } }
.brand a{ color:inherit; text-decoration:none; }
.brand{ margin-top:0; font-family:'Lobster',cursive; font-size:clamp(3rem,12vw,5.4rem); line-height:.9; color:#fff; text-shadow:0 0 34px rgba(150,220,235,.55); letter-spacing:.5px; }
/* claim "da OS/terminale": monospace = digitale, cursore che lampeggia, "vita siciliana" in oro = vita */
.claim{ font-family:'JetBrains Mono',ui-monospace,'SFMono-Regular',Menlo,monospace; font-weight:500;
  font-size:clamp(.86rem,3.5vw,1.2rem); letter-spacing:-.02em; color:rgba(234,244,251,.9); margin-top:calc(.55rem + 14px); }
.claim .c-life{ color:var(--gold); }
.claim .caret{ display:inline-block; width:.5em; height:1.05em; margin-left:.18em; border-radius:1px; background:var(--gold);
  vertical-align:-.16em; box-shadow:0 0 10px rgba(255,217,138,.8); animation:blink 1.05s steps(1) infinite; }
@keyframes blink{ 50%{opacity:0} }
/* la riga sotto "Ti aspettavo": stesso carattere del claim in cima, staccata
   dal titolo quel tanto che basta perché si legga come una voce, non come un
   sottotitolo */
.entra-sotto{ margin:.5rem 0 1.4rem; }

.subclaim{ font-size:clamp(.92rem,3.8vw,1.05rem); color:rgba(234,244,251,.86); max-width:30ch; margin:.9rem auto 0; }

/* badge beta */
.beta{ display:inline-flex; align-items:center; gap:.55rem; margin:4.6rem auto 0; padding:.55rem 1.15rem; border-radius:999px;
  font-size:.74rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--night);
  background:linear-gradient(135deg,var(--gold),var(--amber)); box-shadow:0 12px 26px -12px rgba(242,167,67,.7); }
.beta i{ font-size:.8rem }
.beta-note{ font-size:.97rem; color:rgba(234,244,251,.8); max-width:34ch; margin:.7rem auto 0; }

/* contatore "sei il visitatore N" */
.counter{ margin:1rem auto 0; max-width:32ch; }
.counter .ct-you{ display:block; font-size:.98rem; color:#fff; }
.counter .ct-you b{ color:var(--gold); font-size:1.2rem; letter-spacing:.01em; }
.counter .ct-res{ display:block; margin-top:.25rem; font-size:.77rem; line-height:1.45; color:rgba(234,244,251,.72); }
.counter .ct-res b{ color:var(--gold); }
/* badge del numero di prenotazione (dopo l'iscrizione) */
.res-badge{ display:inline-block; margin:0 auto .7rem; padding:.42rem .95rem; border-radius:999px; font-weight:800; font-size:.9rem;
  color:var(--night); background:linear-gradient(135deg,var(--gold),var(--amber)); box-shadow:0 12px 26px -12px rgba(242,167,67,.7); }
.res-badge b{ font-size:1.1rem; }

/* cue */
/* la freccia da sola: senza scritta serve più corpo, e un'area toccabile vera */
.cue{ position:absolute; bottom:1.2rem; left:50%; transform:translateX(-50%); display:grid; place-items:center;
  width:52px; height:52px; color:rgba(234,244,251,.8); font-size:1.5rem; text-decoration:none; }
.cue i{ display:block; animation:bob 1.9s ease-in-out infinite; }
@keyframes bob{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(7px)} }

/* il marchio dentro un titolo: Lobster, come nell'hero */
.lob{ font-family:'Lobster',cursive; font-style:normal; font-weight:400; letter-spacing:.5px; }
/* il marchio su una riga sua, il resto del titolo sotto */
.lob.blocco{ display:block; margin-bottom:.1em; }
/* card di presentazione col titolo Lobster: testo centrato (caposaldo UI) */
.panel.center{ text-align:center; }
.panel.center .lead{ margin-left:auto; margin-right:auto; }
.panel.center .mk-row, .panel.center .ev-row{ text-align:left; }

/* sezioni + pannelli */
/* STILE ACCOUNT (riferimento: _archivio/account.php.BUONA) esteso a tutto il landing:
   card blu + bordo bianco, niente vetro sfocato, padding laterale ridotto per dare aria ai contenuti. */
section{ padding:2.6rem .65rem; position:relative; }
.wrap{ max-width:900px; margin:0 auto; position:relative; }
.panel{ background:rgba(20,74,116,.5); border-radius:20px; padding:1.5rem 1.15rem;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.38), inset 0 -1px 0 rgba(0,8,20,.42), 0 18px 38px -22px rgba(0,12,28,.65); }
.eyebrow{ text-transform:uppercase; letter-spacing:.24em; font-size:.68rem; font-weight:700; color:var(--gold); }
h2.sec{ font-family:'Fraunces','Georgia',serif; font-optical-sizing:auto; font-weight:600; font-size:clamp(1.8rem,7vw,2.7rem); line-height:1.08; letter-spacing:-.01em; margin:.4rem 0 1.2rem; color:#fff; }
h2.sec em{ font-style:italic; font-weight:500; color:var(--gold); }
.lead{ font-size:1.02rem; color:rgba(234,244,251,.9); max-width:52ch; }
/* apertura di sezione: più grande, ma dello stesso colore del testo normale */
.lead.forte{ font-size:1.12rem; line-height:1.5; }
/* la chiusura della card: stesso font, corpo e colore del testo sopra.
   Grassetto sugli strumenti, corsivo sui Tools tip, oro solo su "per tutti". */
.lead.chiusa{ margin-top:1.3rem; }
.lead.chiusa b{ font-weight:800; color:inherit; }
.lead.chiusa i{ font-style:italic; }
.lead .oro{ color:var(--gold); }
/* la riga in oro corsivo sotto il testo: stessa voce dei titoli */
.oro-it{ display:inline-block; margin-top:.25rem; font-style:italic; color:var(--gold); }
/* il Lobster in mezzo al testo rende più piccolo: lo pareggio a occhio */
.lead .lob{ font-size:1.14em; vertical-align:-.02em; }
.lead + .lead{ margin-top:.85rem; }

.quote-t{ font-family:'Fraunces','Georgia',serif; font-optical-sizing:auto; font-style:italic; font-weight:500; font-size:clamp(1.55rem,6vw,2.2rem); line-height:1.24; letter-spacing:-.005em; color:#fff; }
.quote-c{ margin-top:.8rem; font-size:.85rem; letter-spacing:.05em; color:var(--gold); }

/* form */
.field{ text-align:left; margin-bottom:1rem; }
.field label{ display:block; font-size:.78rem; font-weight:600; color:var(--gold); margin-bottom:.35rem; }
.field input,.field select,.field textarea{ width:100%; padding:.85rem 1rem; border-radius:13px; background:rgba(255,255,255,.96);
  border:1.5px solid transparent; color:var(--night); font-size:16px; font-family:inherit; transition:box-shadow .15s, border-color .15s; }
.field input::placeholder{ color:#8aa0b2; }
.field input:focus,.field select:focus,.field textarea:focus{ outline:none; border-color:var(--blue); box-shadow:0 0 0 4px rgba(31,143,176,.28); }
.btn-go{ width:100%; margin-top:.4rem; padding:.98rem 1.2rem; border:0; border-radius:14px; cursor:pointer; text-decoration:none;
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem; font-family:inherit; font-weight:800; font-size:1.08rem; color:var(--night);
  background:linear-gradient(135deg,var(--gold) 0%,var(--amber) 55%,var(--coral) 100%);
  box-shadow:0 16px 30px -12px rgba(242,167,67,.7), inset 0 1px 0 rgba(255,255,255,.45); transition:transform .12s, box-shadow .2s; }
.btn-go:hover{ transform:translateY(-2px); box-shadow:0 20px 36px -12px rgba(242,167,67,.85); }
.btn-go:active{ transform:scale(.99); }
.btn-go:disabled{ opacity:.7; cursor:default; }
.btn-ghost{ display:inline-flex; align-items:center; gap:.5rem; margin-top:1rem; padding:.7rem 1.1rem; border-radius:12px; text-decoration:none;
  color:var(--gold); font-weight:700; font-size:.95rem; border:1px solid rgba(255,217,138,.4); background:rgba(255,217,138,.08); }
/* IL CAMPO-TRAPPOLA (honeypot): invisibile, ma NON spedito a -9999px.
   Era là fuori, e resta un input vero: basta che qualcosa lo metta a fuoco — la
   compilazione automatica, un tab, il ripristino del fuoco al ricaricamento — e
   il browser ci scorre sopra, portandosi via tutta la pagina. Da fuori sembra
   che si apra da sola in un punto vuoto.
   Ora resta dov'è, ritagliato a zero e senza poter essere toccato o messo a
   fuoco: per un bot è identico, per la pagina non esiste. */
.hp{ position:absolute!important; width:1px; height:1px; margin:-1px; padding:0; border:0;
  overflow:hidden; clip-path:inset(50%); opacity:0; pointer-events:none; }
.msg{ margin-top:1rem; font-weight:600; font-size:.92rem; min-height:1.2em; }
.msg.err{ color:#ffd0c2; } .msg.ok{ color:#c9f7d8; }
.privacy{ font-size:.74rem; color:rgba(234,244,251,.6); margin-top:1rem; }

/* ══ TIENIMI UN POSTO — il form è una pillola, non una card ══
   Campo e bottone tondo dentro lo stesso guscio: si capisce che è una cosa sola. */
.pillola{ display:flex; align-items:center; gap:.4rem; margin:1.2rem auto 0; max-width:420px;
  padding:.34rem .34rem .34rem 1.1rem; border-radius:999px;
  background:rgba(255,255,255,.96);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6), 0 16px 32px -18px rgba(0,12,28,.8);
  transition:box-shadow .18s; }
.pillola:focus-within{ box-shadow:0 0 0 4px rgba(31,143,176,.32), 0 16px 32px -18px rgba(0,12,28,.8); }
.pillola input{ flex:1 1 auto; min-width:0; border:0; background:none; outline:none;
  font-family:inherit; font-size:16px; color:var(--night); padding:.55rem 0; }
.pillola input::placeholder{ color:#8aa0b2; }
/* il pallino che invia */
.pillola button{ flex:none; width:44px; height:44px; border-radius:50%; border:0; cursor:pointer;
  display:grid; place-items:center; font-size:1.05rem; color:var(--night);
  background:linear-gradient(135deg,var(--gold) 0%,var(--amber) 60%,var(--coral) 100%);
  box-shadow:0 10px 20px -10px rgba(242,167,67,.9), inset 0 1px 0 rgba(255,255,255,.5);
  transition:transform .12s, box-shadow .2s; }
.pillola button:hover{ transform:scale(1.06); }
.pillola button:active{ transform:scale(.96); }
.pillola button:disabled{ opacity:.65; cursor:default; transform:none; }
/* sotto il form: quanto manca e cosa succede alla tua mail */
.sotto-form{ margin-top:1.1rem; }
/* stesso carattere del claim dell'hero: monospace, da terminale. Un conto alla
   rovescia è un numero che scorre — le cifre a larghezza fissa non ballano. */
.conto-lancio{ font-family:'JetBrains Mono',ui-monospace,'SFMono-Regular',Menlo,monospace; font-weight:500;
  font-size:clamp(.86rem,3.5vw,1.05rem); letter-spacing:-.02em; color:rgba(234,244,251,.9); }
.conto-lancio i{ color:var(--gold); margin-right:.35rem; }
.conto-lancio b{ font-weight:600; color:#fff; }
.sotto-form .privacy{ margin-top:.5rem; }

/* stato "fatto" */
.done{ padding:1rem 0; text-align:center; }
.done .check{ width:70px; height:70px; margin:0 auto 1rem; border-radius:50%; display:grid; place-items:center; font-size:2rem; color:var(--night);
  background:linear-gradient(150deg,var(--gold),var(--amber)); box-shadow:0 0 30px rgba(255,210,130,.6); animation:pop .4s ease; }
@keyframes pop{ 0%{transform:scale(.5); opacity:0} 100%{transform:scale(1); opacity:1} }

/* MASCHERE (minisito) */
.mask-grid{ display:grid; gap:1rem; margin-top:1.3rem; }
@media(min-width:620px){ .mask-grid{ grid-template-columns:1fr 1fr; } }
.mask{ position:relative; text-align:left; border-radius:20px; padding:1.2rem 1.2rem 1.1rem; cursor:pointer; display:block;
  background:rgba(20,74,116,.5); border:1.5px solid rgba(255,255,255,.5); transition:transform .18s, background .18s, border-color .18s, box-shadow .18s; }
.mask:hover{ transform:translateY(-3px); }
.mask.on{ background:rgba(22,96,132,.62); border-color:var(--gold); box-shadow:0 18px 36px -18px rgba(0,12,28,.7), 0 0 0 1px rgba(255,217,138,.4) inset; }
.mask.locked{ cursor:default; }
.mask.locked:hover{ transform:none; }
.mask input{ position:absolute; opacity:0; pointer-events:none; }
.mask-h{ display:flex; align-items:center; gap:.7rem; }
.mask-ic{ flex:none; width:46px; height:46px; border-radius:13px; display:grid; place-items:center; font-size:1.25rem; color:var(--night);
  background:linear-gradient(150deg,var(--gold),var(--amber)); }
.mask-tt{ flex:1 1 auto; min-width:0; }
.mask-tt b{ display:block; font-size:1.08rem; line-height:1.2; color:#fff; text-transform:uppercase; letter-spacing:.03em; }
.mask-tt span{ display:block; margin-top:.12rem; font-size:.82rem; line-height:1.3; color:rgba(234,244,251,.72); }
.mask-tick{ flex:none; width:26px; height:26px; border-radius:7px; border:2px solid rgba(255,255,255,.3); display:grid; place-items:center; color:transparent; font-size:.8rem; transition:.18s; }
.mask.on .mask-tick{ background:var(--gold); border-color:var(--gold); color:var(--night); }
.mask-tools{ display:flex; flex-wrap:wrap; gap:.4rem; margin-top:.9rem; }
.mask-tool{ font-size:.74rem; font-weight:700; color:rgba(234,244,251,.85); background:rgba(0,0,0,.22); border:1px solid rgba(255,255,255,.12); border-radius:999px; padding:.28rem .6rem; display:inline-flex; align-items:center; gap:.35rem; }
.mask-tool i{ color:var(--gold); opacity:.9; font-size:.7rem; }
/* "sempre attiva" al posto della spunta (La persona) */
.mask-always{ flex:none; font-size:.62rem; font-weight:800; text-transform:uppercase; letter-spacing:.04em; color:var(--night);
  background:linear-gradient(135deg,var(--gold),var(--amber)); border-radius:999px; padding:.2rem .55rem; display:inline-flex; align-items:center; gap:.3rem; }
/* visibilità della maschera: Pubblica · Solo amici · Privata */
.mask-vis{ display:flex; gap:.3rem; margin-top:.9rem; padding-top:.85rem; border-top:1px solid rgba(255,255,255,.1); }
.vis-opt{ flex:1; text-align:center; font-size:.7rem; font-weight:700; padding:.42rem .3rem; border-radius:10px; cursor:pointer; white-space:nowrap;
  color:rgba(234,244,251,.7); background:rgba(0,0,0,.22); border:1px solid rgba(255,255,255,.1); display:inline-flex; align-items:center; justify-content:center; gap:.32rem; transition:.15s; }
.vis-opt i{ font-size:.68rem; opacity:.85; }
.vis-opt.on{ color:var(--night); background:linear-gradient(135deg,var(--gold),var(--amber)); border-color:var(--gold); }

/* griglia "cosa ti aspetta" (entusiasmo prima del form) */
.feat-grid{ display:grid; gap:.9rem; margin-top:1.5rem; }
@media(min-width:620px){ .feat-grid{ grid-template-columns:1fr 1fr; } }
.feat{ display:flex; gap:.85rem; text-align:left; border-radius:16px; padding:1rem 1.05rem; }
.feat-ic{ flex:none; width:44px; height:44px; border-radius:12px; display:grid; place-items:center; font-size:1.08rem; color:var(--night);
  background:linear-gradient(150deg,var(--gold),var(--amber)); box-shadow:0 8px 18px -10px rgba(242,167,67,.7); }
.feat b{ display:block; color:#fff; font-size:1rem; margin-bottom:.2rem; }
.feat p{ font-size:.86rem; color:rgba(234,244,251,.78); line-height:1.45; }
.pitch-close{ margin-top:1.6rem; text-align:center; font-size:1.06rem; line-height:1.5; color:#fff; max-width:44ch; margin-left:auto; margin-right:auto; }
.pitch-close b{ color:var(--gold); }

/* "come viaggi": solo / coppia / famiglia / amici / gruppo */
/* hidden deve vincere sempre: una regola di classe con display:grid/flex batte
   il display:none del browser, e l'elemento resta visibile pur essendo hidden. */
[hidden]{ display:none !important; }

/* in colonne, non a fiume: le righe si incolonnano e nessuna resta spaiata */
.travelers{ display:grid; grid-template-columns:repeat(auto-fill, minmax(118px, 1fr)); gap:.45rem; margin-top:1.6rem; }
@media(min-width:620px){ .travelers{ grid-template-columns:repeat(auto-fill, minmax(140px, 1fr)); } }
.travelers span{ display:flex; align-items:center; gap:.42rem; font-size:.82rem; font-weight:700; color:rgba(234,244,251,.9);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  background:linear-gradient(160deg, rgba(12,54,90,.7), rgba(6,32,56,.66)); border-radius:999px; padding:.46rem .8rem;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16), inset 0 -1px 0 rgba(0,8,20,.4), 0 8px 16px -12px rgba(0,10,26,.8); }
.travelers span i{ color:var(--gold); }
/* strumenti delle maschere (elenco maschera → i suoi strumenti) */
.strum{ margin-top:1.4rem; display:flex; flex-direction:column; gap:.5rem; }
.strum-row{ display:flex; align-items:center; gap:.85rem; padding:.7rem .8rem; border-radius:14px; }
.strum-ic{ flex:none; width:42px; height:42px; border-radius:12px; display:flex; align-items:center; justify-content:center; line-height:1;
  font-size:1.05rem; color:var(--night); background:linear-gradient(150deg,var(--gold),var(--amber)); box-shadow:0 8px 18px -10px rgba(242,167,67,.7); }
.strum-ic i{ line-height:1; display:block; }
.strum-row > div b{ display:block; color:#fff; font-size:1rem; }
.strum-row > div span{ display:block; font-size:.72rem; color:rgba(234,244,251,.72); margin-top:.12rem; text-transform:uppercase; letter-spacing:.04em; }

/* "Non un progetto": prova che il software c'è già (numeri + strumenti reali) */
.stat-row{ display:flex; gap:.7rem; margin-top:1.5rem; }
.stat{ flex:1; text-align:center; border-radius:14px; padding:.9rem .4rem; }
.stat b{ display:block; font-family:'Fraunces','Georgia',serif; font-optical-sizing:auto; font-weight:600; font-size:1.7rem; color:var(--gold); line-height:1; }
.stat span{ display:block; margin-top:.35rem; font-size:.7rem; color:rgba(234,244,251,.72); line-height:1.3; }
.tool-grid{ display:grid; grid-template-columns:1fr 1fr; gap:.8rem; margin-top:1.4rem; }
@media(min-width:620px){ .tool-grid{ grid-template-columns:1fr 1fr 1fr; } }
.tool{ text-align:center; border-radius:16px; padding:1rem .95rem; transition:transform .18s, box-shadow .18s; }
.tool:hover{ transform:translateY(-2px); }
.tool i{ display:inline-grid; place-items:center; width:38px; height:38px; border-radius:11px; font-size:1rem; color:var(--night);
  background:linear-gradient(150deg,var(--gold),var(--amber)); margin-bottom:.6rem; }
.tool b{ display:block; color:#fff; font-size:.95rem; }
.tool span{ display:block; margin-top:.2rem; font-size:.8rem; color:rgba(234,244,251,.72); line-height:1.4; }
.tool-more{ margin-top:1.4rem; font-size:.92rem; color:rgba(234,244,251,.72); }

/* ══ MASCHERE in home: le stesse card minimal dell'account, senza strumenti ══
   Classi proprie (mk-*) e non .mini*: land.css lo carica anche l'account, che ha
   già le sue — due definizioni sullo stesso nome finirebbero per pestarsi. */
.mk-row{ display:flex; gap:.6rem; overflow-x:auto; scroll-snap-type:x mandatory;
  margin-top:1.4rem; padding:.2rem .1rem 1.9rem; scrollbar-width:none;
  -webkit-overflow-scrolling:touch; overscroll-behavior-x:contain; }
.mk-row::-webkit-scrollbar{ display:none; }
.mk-card{ position:relative; flex:0 0 236px; width:236px; aspect-ratio:351/200; border-radius:14px; overflow:hidden;
  scroll-snap-align:center; background:rgba(20,74,116,.5) center/cover no-repeat;
  border:1.5px solid rgba(255,255,255,.55); box-shadow:0 10px 22px -14px rgba(0,12,28,.7); }
/* velo dal basso: il nome resta leggibile su qualunque sfondo */
/* la maschera in evidenza: filo d'oro attorno. È il segnale di "scelto" che usiamo
   in tutto il sito (maschere, visibilità, strumento attivo). */
.mk-card{ cursor:pointer; transition:border-color .2s, box-shadow .2s; }
.mk-card.on{ border-color:var(--gold);
  box-shadow:0 0 0 1px rgba(255,217,138,.45), 0 14px 28px -14px rgba(0,12,28,.85); }
.mk-card.on::after{ content:''; position:absolute; inset:0; z-index:3; border-radius:14px; pointer-events:none;
  box-shadow:inset 0 0 22px -6px rgba(255,217,138,.5); }
.mk-card::before{ content:''; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(to top, rgba(4,18,34,.72) 0%, rgba(4,18,34,.34) 34%, rgba(4,18,34,.06) 62%); }
/* le tre icone in alto a destra: le stesse della card grande dell'account
   (campanella, busta, ingranaggio), rimpicciolite per la minicard. */
.mk-act{ position:absolute; top:8px; right:9px; z-index:3; display:flex; gap:5px; }
.mk-btn{ width:24px; height:24px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center;
  font-size:.62rem; color:#fff; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.4); }
.mk-av{ position:absolute; top:38.197%; transform:translateY(-50%); left:11px; z-index:2;
  width:40px; height:40px; border-radius:50%; display:grid; place-items:center;
  border:2px solid rgba(255,255,255,.75); background:rgba(255,255,255,.07); color:rgba(255,255,255,.62); font-size:.9rem; }
.mk-foot{ position:absolute; left:0; right:0; bottom:0; z-index:2; display:flex; align-items:flex-end; gap:.4rem; padding:0 11px 10px; }
/* Il nome della maschera in LOBSTER: è il carattere del marchio, quello del
   titolo in cima alla home. Sulle card fa il paio con l'insegna — le maschere
   sono SicilyTravel addosso a una persona, e si vede.
   Il maiuscolo è dovuto sparire: Lobster è una scrittura, e in maiuscolo con la
   spaziatura si sfalda. Un po' più grande perché è compatto di suo. */
.mk-name{ flex:1 1 auto; min-width:0; color:#fff;
  font-family:'Lobster', 'Fraunces', cursive; font-weight:400;
  font-size:1.15rem; line-height:1.06; letter-spacing:.01em; }
.mk-stats{ flex:0 0 42%; width:42%; display:flex; flex-direction:column; align-items:flex-end; color:#fff; }
.mk-stats .n,.mk-stats .c{ display:grid; grid-template-columns:repeat(3,1fr); width:100%; justify-items:center; }
.mk-stats .n b{ font-size:.76rem; font-weight:800; line-height:1.15; }
.mk-stats .ln{ width:100%; height:1px; background:rgba(255,255,255,.45); margin:.12rem 0; }
.mk-stats .c i{ font-style:normal; font-size:.48rem; color:rgba(255,255,255,.82); line-height:1; }
/* in coda al carosello: le maschere che ancora non esistono */
.mk-card.mk-piu{ display:flex; align-items:center; justify-content:center;
  background:rgba(11,36,60,.4); border:1.5px dashed rgba(255,217,138,.6); box-shadow:none; }
.mk-card.mk-piu::before{ display:none; }
.mk-piu-in{ display:flex; flex-direction:column; align-items:center; gap:.45rem; text-align:center; color:var(--gold); }
.mk-piu-c{ width:40px; height:40px; border-radius:50%; display:grid; place-items:center; font-size:1.1rem;
  background:rgba(255,217,138,.14); border:1px solid rgba(255,217,138,.5); }
.mk-piu-t{ font-weight:800; font-size:.82rem; line-height:1.2; }

.mk-hint{ font-size:.8rem; color:rgba(234,244,251,.6); }
.mk-hint i{ color:var(--gold); margin-right:.3rem; }

/* la sagoma dell'isola sopra il titolo: piccola, in maschera così prende il colore
   che vogliamo (l'SVG originale è grigio-azzurro fisso) e non porta il suo. */
.sic-mini{ width:76px; height:85px; margin:40px auto .5rem;
  background-color:rgba(255,255,255,.9);
  -webkit-mask:url('sicilia.svg') center/contain no-repeat; mask:url('sicilia.svg') center/contain no-repeat;
  filter:drop-shadow(0 6px 14px rgba(0,12,28,.55)); }

/* ══ SCOPRI E VIVI LA SICILIA — la banda dei pallini della home del sito ══
   Riga che scorre SOLO di lato, cerchi bianco-translucidi col blur, etichette in
   maiuscoletto, e sull'attivo l'anello che si riempie (conic-gradient pilotato da --p
   dal JS) e poi passa al prossimo. Sotto, le card della sezione scelta. */
.sp-band{ display:flex; flex-wrap:nowrap; align-items:center; justify-content:flex-start; gap:1.4rem;
  margin:1.2rem calc(-1.15rem) 0 calc(-1.15rem - 9px); padding:12px 1.5rem 0 12px;
  height:95px; min-height:95px; flex:none;
  overflow-x:auto; overflow-y:hidden; touch-action:pan-x pan-y; overscroll-behavior-x:contain;
  -webkit-overflow-scrolling:touch; scrollbar-width:none; }
.sp-band::-webkit-scrollbar{ display:none; }
.sp-pill{ flex:0 0 auto; display:flex; flex-direction:column; align-items:center; gap:.5rem;
  background:none; border:0; padding:0; cursor:pointer; font-family:inherit; }
.sp-band .icon-pill{ position:relative; flex:none; width:50px; height:50px; aspect-ratio:1; border-radius:50%;
  background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.25);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  display:flex; align-items:center; justify-content:center; transition:background .2s, transform .2s; }
.sp-band .icon-pill i{ font-size:1.15rem; color:#fff; }
.sp-band .label{ font-size:.66rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:rgba(255,255,255,.85); white-space:nowrap; }
/* L'ANELLO-TIMER SI RIEMPIE DA SOLO, IN CSS.
   Prima lo muoveva il JavaScript: sessanta risvegli al secondo per far girare
   una lancetta. Con @property la variabile diventa un numero VERO agli occhi del
   browser — e un numero vero si può animare. Da qui il JavaScript non tocca più
   niente a ogni frame: aspetta la fine del giro, una volta sola.
   Sui browser vecchi @property non c'è: l'anello non si riempie, ma l'animazione
   scatta lo stesso e i giri continuano. Si perde un ornamento, non la funzione. */
@property --p{ syntax:'<number>'; inherits:false; initial-value:0; }

.sp-band .ring{ position:absolute; inset:-4px; border-radius:50%; padding:3px; opacity:0; pointer-events:none;
  background:conic-gradient(#fff calc(var(--p,0) * 1%), rgba(255,255,255,.22) 0);
  -webkit-mask:radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px));
          mask:radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px)); }
.sp-pill.active .icon-pill{ background:rgba(255,255,255,.32); transform:scale(1.05); }
.sp-pill.active .ring{ opacity:1; animation:ringGiro 7s linear; }
@keyframes ringGiro{ from{ --p:0 } to{ --p:100 } }
/* La pausa non ferma un ciclo: mette in pausa un'animazione. Costa zero. */
.sp-band.paused .sp-pill.active .ring{ animation-play-state:paused; }
.sp-pill.active .label{ color:#fff; }
.sp-band.paused .sp-pill.active .ring{ opacity:.45; }
@media (prefers-reduced-motion:reduce){ .sp-band .ring{ animation:none !important; } }
.sp-pill .icon-pill.pop{ animation:pillPop .34s cubic-bezier(.34,1.56,.64,1); }
@keyframes pillPop{ 0%{ transform:scale(1) } 35%{ transform:scale(.8) } 100%{ transform:scale(1.05) } }

/* le card della sezione: una riga che scorre, minimal */
.sp-set{ display:none; gap:.6rem; overflow-x:auto; scroll-snap-type:x mandatory;
  margin:.9rem calc(-1.15rem) 0 calc(-1.15rem - 9px); padding:.2rem 1.15rem 1rem 9px; scrollbar-width:none;
  -webkit-overflow-scrolling:touch; overscroll-behavior-x:contain; text-align:left; }
/* Entrano UNA ALLA VOLTA, a 0,1s l'una dall'altra: l'indice --i lo mette il PHP.
   L'animazione sta sulle card, non sul gruppo, sennò arriverebbero tutte insieme. */
.sp-set.on{ display:flex; }
.sp-set.on .sp-card{ animation:spEntra .3s cubic-bezier(.2,.9,.3,1) both;
  animation-delay:calc(var(--i, 0) * .1s); }
.sp-set.esce{ animation:spEsce .1s ease-in both; }
/* entra ingrandendosi dal 90%, esce rimpicciolendo all'86%: il cambio si vede */
@keyframes spEntra{ from{ opacity:0; transform:scale(.9) } to{ opacity:1; transform:none } }
@keyframes spEsce{  from{ opacity:1; transform:none }      to{ opacity:0; transform:scale(.86) } }
@media (prefers-reduced-motion:reduce){ .sp-set.on .sp-card, .sp-set.esce{ animation:none; } }
.sp-set::-webkit-scrollbar{ display:none; }
.sp-card{ position:relative; flex:0 0 236px; width:236px; aspect-ratio:351/200; border-radius:14px; overflow:hidden;
  scroll-snap-align:center; background:rgba(20,74,116,.5) center/cover no-repeat;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.34), 0 10px 22px -14px rgba(0,12,28,.75); }
/* ══ LA MINIMAPPA NELLA CARD ════════════════════════════════════════════════
   Portata da st26 com'era: 65 pixel in alto a destra, DAVANTI a tutto, con
   l'ombra che la stacca dalla fotografia sotto.

   Il rapporto è quello del disegno (1000/1119) e non quello della card: la
   Sicilia deve restare della sua forma. È anche la ragione per cui i pin
   cadono giusti — il disegno ha `preserveAspectRatio:none` e la cornice ha lo
   stesso rapporto, quindi la proiezione del disegno e quella dei pin
   coincidono. Cambiando questo rapporto i pin scivolano, e scivolano di poco:
   cadono in mare accanto al posto giusto, che è il modo peggiore di sbagliare
   perché sembra quasi funzionare. */
.card-minimap{ position:absolute; top:.55rem; right:.55rem; z-index:3;
  width:70px; aspect-ratio:1000/1119; pointer-events:none;
  filter:drop-shadow(0 2px 4px rgba(0,0,0,.45)); }
.card-minimap .cm-isola{ position:absolute; inset:0; width:100%; height:100%;
  color:#eaf4fb; opacity:.92; }
/* ═══ LA PUNTA DELLA GOCCIA SUL PUNTO, DAVVERO ═══════════════════════════
   Orizzontale: mezzo passo indietro, perché la goccia sia centrata sul punto.

   Verticale: `bottom` mette il fondo della CASELLA del carattere sul punto, non
   la punta del disegno — sotto la punta la casella ha ancora lo spazio che ogni
   carattere si porta dietro. Erano un paio di pixel, e un paio di pixel su una
   mappa larga settanta sono chilometri: il pin galleggiava appena sopra il
   posto.

   Si scende di `.14em` e non di due pixel: così resta giusto anche il giorno
   che la goccia cambia misura — come è già successo passando da 11 a 11,8. */
.card-minimap .cm-pin{ position:absolute; transform:translate(-50%, .14em);
  /* Cresciuta con l'isola: la mappa è passata da 65 a 70 pixel e la goccia era
     rimasta a 11 — le POSIZIONI si erano adeguate da sole, perché stanno in
     percentuale e il rapporto della cornice non è cambiato, ma la goccia no.
     Restando ferma sarebbe diventata più piccola in rapporto all'isola: 11,8 è
     quegli stessi sette per cento. */
  color:#d03f2c; font-size:11.8px; line-height:1;
  text-shadow:0 0 2px #fff, 0 1px 2px rgba(0,0,0,.5); }

/* Le definizioni non si vedono: sono lì solo per essere richiamate. */
.sagome-def{ position:absolute; width:0; height:0; overflow:hidden; }

.sp-card::before{ content:''; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(to top, rgba(4,18,34,.8) 0%, rgba(4,18,34,.34) 44%, rgba(4,18,34,.05) 72%); }
.sp-foot{ position:absolute; left:0; right:0; bottom:0; z-index:2; display:block; padding:0 11px 10px; }
.sp-nm{ display:block; color:#fff; font-weight:800; font-size:.92rem; line-height:1.14; }
.sp-dv{ display:block; margin-top:.2rem; font-size:.62rem; color:rgba(234,244,251,.82); line-height:1.2; }
.sp-dv i{ color:var(--gold); margin-right:.22rem; }
.sp-when{ position:absolute; top:10px; left:11px; z-index:2; padding:.24rem .5rem; border-radius:999px;
  font-size:.62rem; font-weight:800; color:var(--night);
  background:linear-gradient(135deg,var(--gold),var(--amber)); box-shadow:0 8px 16px -10px rgba(242,167,67,.8); }

/* ══ EVENTI in home: assaggio del contenuto vero, stessa card delle maschere ══ */
.ev-row{ display:flex; gap:.6rem; overflow-x:auto; scroll-snap-type:x mandatory;
  margin-top:1.4rem; padding:.2rem .1rem 1rem; scrollbar-width:none;
  -webkit-overflow-scrolling:touch; overscroll-behavior-x:contain; }
.ev-row::-webkit-scrollbar{ display:none; }
.ev-card{ position:relative; flex:0 0 236px; width:236px; aspect-ratio:351/200; border-radius:14px; overflow:hidden;
  scroll-snap-align:center; text-align:left; background:rgba(20,74,116,.5) center/cover no-repeat;
  border:1.5px solid rgba(255,255,255,.55); box-shadow:0 10px 22px -14px rgba(0,12,28,.7); }
.ev-card::before{ content:''; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(to top, rgba(4,18,34,.78) 0%, rgba(4,18,34,.36) 40%, rgba(4,18,34,.06) 68%); }
/* il giorno: come lo strappo di un biglietto */
.ev-date{ position:absolute; top:10px; left:11px; z-index:2; display:flex; flex-direction:column; align-items:center;
  min-width:44px; padding:.28rem .4rem .3rem; border-radius:10px; color:var(--night); line-height:1;
  background:linear-gradient(135deg,var(--gold),var(--amber)); box-shadow:0 8px 18px -10px rgba(242,167,67,.8); }
.ev-date b{ font-size:1.15rem; font-weight:800; }
.ev-date i{ font-style:normal; font-size:.52rem; font-weight:800; letter-spacing:.1em; margin-top:.12rem; }
/* quanti ci vanno */
.ev-who{ position:absolute; top:10px; right:11px; z-index:2; display:inline-flex; align-items:center; gap:.28rem;
  padding:.24rem .5rem; border-radius:999px; font-size:.66rem; font-weight:800; color:#fff;
  background:rgba(4,18,34,.5); border:1px solid rgba(255,255,255,.35); }
.ev-who i{ font-size:.58rem; opacity:.85; }
.ev-foot{ position:absolute; left:0; right:0; bottom:0; z-index:2; display:block; padding:0 11px 10px; }
.ev-name{ display:block; color:#fff; font-weight:800; font-size:.92rem; line-height:1.12; }
.ev-place{ display:block; margin-top:.2rem; font-size:.62rem; color:rgba(234,244,251,.82); line-height:1.2; }
.ev-place i{ color:var(--gold); margin-right:.2rem; }

/* sezione senza pannello: il contenuto sta sulla pagina, non dentro una card.
   Il rientro laterale è quello del testo dei pannelli, così le sezioni si allineano. */
.wrap.nudo{ padding:0 1.15rem; }
.wrap.nudo.center{ text-align:center; }
.wrap.nudo.center .lead{ margin-left:auto; margin-right:auto; }
/* le card degli strumenti annullano il rientro: i loro bordi cadono esattamente
   dove cadono quelli dei pannelli blu sopra e sotto (.65rem dal bordo pagina). */
.wrap.nudo .st-card{ margin-left:-1.15rem; margin-right:-1.15rem; }
/* i caroselli senza pannello: annullano il rientro e NON se lo rimettono, così la prima
   card parte allo stesso x dei pannelli blu e delle card degli strumenti (167px a 1234
   di finestra). Il titolo resta rientrato: è il testo che va a misura di lettura. */
.wrap.nudo .hs-tools, .wrap.nudo .hs-demo{ margin-left:-1.15rem; margin-right:-1.15rem; }
.wrap.nudo .mk-row, .wrap.nudo .ev-row{
  margin-left:-1.15rem; margin-right:-1.15rem;
  padding-left:0; padding-right:0;
  text-align:left; }

/* IL BATTITO degli strumenti: due colpi come un cuore (lub-dub), non un ingrandimento
   liscio, e sfalsati uno dall'altro (il ritardo lo mette il JS) → sembra un'onda. */
.hs-tool.batte{ animation:battito .18s ease-out; transform-origin:50% 40%; }
/* un plop e basta: sale e torna. Niente rimbalzi, niente code — deve finire prima
   che l'occhio ci si fermi sopra, e non deve mai stare fra il dito e il bottone. */
@keyframes battito{
  0%{   transform:scale(1) }
  45%{  transform:scale(1.14) }
  100%{ transform:scale(1) }
}
@media (prefers-reduced-motion:reduce){ .hs-tool.batte{ animation:none; } }

/* il titolino degli strumenti, dentro la sezione delle maschere: non è una sezione
   nuova, è quello che la maschera sa fare — quindi sta vicino, non a distanza di card. */
.hs-titolo{ position:relative; z-index:1; margin-top:.45rem; font-family:'Fraunces','Georgia',serif; font-optical-sizing:auto;
  font-weight:600; font-size:1.28rem; line-height:1.2; color:#fff; }
.hs-titolo em{ font-style:italic; font-weight:500; color:var(--gold); }

/* ══ STRUMENTI DELLE MASCHERE in home ══
   Stessa striscia dell'account (App → "Strumenti della maschera"): icone nel blu delle
   card, linea sopra, e la selezionata con l'icona gialla dentro un pallino blu. Classi
   proprie (hs-*) e non ac-*: land.css lo carica anche l'account, che ha già le sue. */
.hs-tools{ position:relative; z-index:1; display:flex; margin-top:.7rem; border-top:1px solid #144a74;
  overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch; overscroll-behavior-x:contain; }
.hs-tools::-webkit-scrollbar{ display:none; }
.hs-tool{ flex:0 0 auto; min-width:86px; display:flex; flex-direction:column; align-items:center; gap:.24rem;
  padding:.7rem .2rem; cursor:pointer; background:none; border:0; border-top:2px solid transparent;
  margin-top:-1px; font-family:inherit; color:#144a74; transition:color .2s, border-color .2s; }
.hs-tool i{ font-size:1.05rem; width:30px; height:30px; border-radius:50%; display:grid; place-items:center;
  transition:background .2s, color .2s; }
.hs-tool .nm{ font-size:.58rem; font-weight:800; text-transform:uppercase; letter-spacing:.03em; text-align:center; }
.hs-tool.on{ border-top-color:var(--gold); }
.hs-tool.on i{ background:#144a74; color:var(--gold); }
/* col cielo scuro linea e scritte diventano bianche, come nell'account */
body[data-phase="silver"] .hs-tools, body[data-phase="notte"] .hs-tools{ border-top-color:rgba(255,255,255,.55); }
body[data-phase="silver"] .hs-tool, body[data-phase="notte"] .hs-tool{ color:#fff; }

/* l'assaggio: card blu, altezza naturale */
.hs-demo{ margin-top:calc(1rem - 4px); padding:1rem; border-radius:16px; overflow-anchor:none; text-align:left;
  background:rgba(20,74,116,.5);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.38), inset 0 -1px 0 rgba(0,8,20,.42), 0 12px 24px -16px rgba(0,10,26,.75); }
/* le foto stanno meglio sfuse, senza cornice attorno */
.hs-demo.sfuse{ padding:0; background:none; box-shadow:none; }
.hs-demo.sfuse .dm-grid{ gap:.5rem; }
.hs-demo.sfuse .dm-ph{ border-radius:12px; background:rgba(20,74,116,.5); box-shadow:none; }
/* griglia delle foto */
.dm-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:.4rem; }
.dm-ph{ position:relative; aspect-ratio:1; border-radius:8px; background:rgba(255,255,255,.12);
  display:grid; place-items:center; color:rgba(255,255,255,.45); font-size:.9rem; }
/* pagina: titolo e righe di testo */
.dm-title{ height:12px; width:58%; border-radius:4px; background:rgba(255,255,255,.6); margin-bottom:.6rem; }
/* vetrina: si capisce che il prodotto si mette nel carrello */
.dm-buy{ color:rgba(255,255,255,.55); font-size:1.05rem; }
/* i post dentro la pagina: un'immagine e due righe di testo, come una bacheca */
.dm-post{ display:flex; gap:.6rem; margin-top:.8rem; padding-top:.7rem; border-top:1px solid rgba(255,255,255,.14); }
/* Quando i post sono tutto il contenuto (la "Pagina", senza intestazione) il primo
   non ha niente sopra da cui staccarsi: la riga resterebbe appesa nel vuoto. */
.dm-post:first-child{ margin-top:0; padding-top:0; border-top:0; }
.dm-th{ flex:none; width:52px; height:52px; border-radius:10px; background:rgba(255,255,255,.14); }
.dm-txt{ flex:1 1 auto; min-width:0; display:block; padding-top:.2rem; }
.dm-txt .dm-line{ display:block; }
.dm-line{ height:7px; border-radius:4px; background:rgba(255,255,255,.26); margin-bottom:.4rem; }
/* i pannelli: uno alla volta */
.st-pan{ display:none; }
.st-pan.on{ display:block; }

/* ── COMANDE: il tavolo aperto, come nel sito ── */
.cm-tav{ display:flex; align-items:center; gap:.7rem; padding:.55rem 0; border-bottom:1px solid rgba(255,255,255,.12); }
.cm-tav:last-of-type{ border-bottom:0; }
.cm-n{ flex:none; width:42px; height:42px; border-radius:12px; display:grid; place-items:center;
  font-weight:800; font-size:1.05rem; color:#fff;
  background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.3); }
.cm-info{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; }
.cm-nm{ font-weight:800; font-size:.88rem; color:#fff; line-height:1.15; }
.cm-sm{ display:flex; align-items:center; flex-wrap:wrap; gap:.2rem .7rem; margin-top:.25rem;
  font-size:.68rem; color:rgba(234,244,251,.7); }
.cm-pax, .cm-min{ display:inline-flex; align-items:center; gap:.25rem; }
.cm-pax i, .cm-min i{ font-size:.6rem; color:var(--gold); opacity:.9; }
/* i pallini delle uscite: pieno = inviata in cucina, vuoto = ancora al tavolo */
.cm-pall{ display:inline-flex; align-items:center; gap:5px; }
.cm-pall i, .cm-legend i{ width:9px; height:9px; border-radius:50%; box-sizing:border-box;
  border:1.5px solid var(--gold); background:transparent; display:inline-block; }
.cm-pall i.sent, .cm-legend i.sent{ background:var(--gold); }
.cm-tot{ flex:none; font-weight:800; font-size:.95rem; color:#fff; white-space:nowrap; }
.cm-legend{ display:flex; flex-wrap:wrap; gap:.2rem 1rem; margin-top:.7rem; padding-top:.55rem;
  border-top:1px solid rgba(255,255,255,.12); font-size:.63rem; color:rgba(234,244,251,.55); }
.cm-legend span{ display:inline-flex; align-items:center; gap:.35rem; }

/* ── BOOKING: camere per notti, come un planner ── */
.bk{ display:flex; flex-direction:column; gap:4px; }
.bk-days, .bk-riga{ display:grid; grid-template-columns:78px repeat(7,1fr); gap:3px; align-items:center; }
.bk-days span{ text-align:center; font-size:.6rem; font-weight:800; letter-spacing:.06em;
  color:rgba(234,244,251,.45); text-transform:uppercase; }
.bk-cam{ font-size:.72rem; font-weight:700; color:rgba(234,244,251,.85); white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis; }
.bk-riga > span:not(.bk-cam){ height:26px; border-radius:4px; background:rgba(255,255,255,.07);
  position:relative; display:flex; align-items:center; }
.bk-riga > span.on{ background:linear-gradient(135deg,var(--gold),var(--amber));
  box-shadow:0 6px 14px -10px rgba(242,167,67,.9); }
/* la prenotazione è una barra sola: angoli tondi solo alle estremità */
.bk-riga > span.on{ border-radius:0; }
.bk-riga > span.on.a{ border-radius:13px 0 0 13px; }
.bk-riga > span.on.z{ border-radius:0 13px 13px 0; }
.bk-riga > span.on.a.z{ border-radius:13px; }
/* il nome dell'ospite esce dalla prima cella: la barra è stretta, il nome no */
.bk-riga > span.on.a b{ position:absolute; left:9px; font-size:.62rem; font-weight:800;
  color:var(--night); white-space:nowrap; z-index:1; }

/* i pannelli degli assaggi: uno alla volta */
.st-pan{ display:none; }
.st-pan.on{ display:block; }
.st-t{ cursor:pointer; font-family:inherit; background:none; transition:background .15s, color .15s, border-color .15s; }
.st-t:hover{ color:#fff; border-color:rgba(255,255,255,.35); }
.st-t.on:hover{ color:var(--night); }

/* ── MENU: categorie e piatti ── */
.mn-cat{ display:flex; gap:.3rem; overflow-x:auto; scrollbar-width:none; padding-bottom:.55rem; margin-bottom:.2rem; }
.mn-cat::-webkit-scrollbar{ display:none; }
.mn-cat span{ flex:none; padding:.26rem .6rem; border-radius:999px; font-size:.68rem; font-weight:700;
  color:rgba(234,244,251,.6); border:1px solid rgba(255,255,255,.14); }
.mn-cat span.on{ color:#fff; background:rgba(255,255,255,.14); border-color:rgba(255,255,255,.4); }
.mn-p{ display:flex; align-items:center; gap:.6rem; padding:.42rem 0; border-bottom:1px solid rgba(255,255,255,.12); }
.mn-p:last-of-type{ border-bottom:0; }
.mn-th{ flex:none; width:30px; height:30px; border-radius:8px; display:grid; place-items:center; font-size:.72rem;
  color:rgba(255,255,255,.4); background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.22); }
.mn-nm{ flex:1 1 auto; min-width:0; font-size:.84rem; color:rgba(234,244,251,.92); }
.mn-nm i{ display:block; font-style:normal; font-size:.62rem; color:var(--gold); opacity:.85; margin-top:.1rem; }
.mn-pr{ flex:none; font-weight:800; font-size:.84rem; color:#fff; }
.mn-p.off .mn-nm, .mn-p.off .mn-pr{ opacity:.45; text-decoration:line-through; }
.mn-p.off .mn-nm i{ opacity:1; text-decoration:none; }

/* ── MAGAZZINO: quanto ne resta ── */
.mg-r{ display:flex; align-items:center; gap:.55rem; padding:.45rem 0; border-bottom:1px solid rgba(255,255,255,.12); }
.mg-r:last-of-type{ border-bottom:0; }
.mg-nm{ flex:0 0 33%; width:33%; font-size:.8rem; color:rgba(234,244,251,.92); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
/* nei progetti il nome porta sotto con chi lo fai */
.pj-con{ display:block; font-style:normal; font-size:.62rem; color:rgba(234,244,251,.6); margin-top:.1rem; }
.mg-bar{ flex:1 1 auto; height:7px; border-radius:999px; background:rgba(255,255,255,.1); overflow:hidden; }
.mg-bar i{ display:block; height:100%; border-radius:999px; background:var(--gold); }
.mg-bar i.ok{ background:#7ef7a6; }
.mg-bar i.wait{ background:var(--gold); }
.mg-bar i.low{ background:#ff9b83; }
.mg-q{ flex:none; font-size:.72rem; font-weight:800; color:#fff; white-space:nowrap; }

/* ── PRENOTAZIONI (sala): la sera ora per ora ── */
.pr-r{ display:flex; align-items:center; gap:.55rem; padding:.45rem 0; border-bottom:1px solid rgba(255,255,255,.12); }
.pr-r:last-of-type{ border-bottom:0; }
.pr-h{ flex:none; font-weight:800; font-size:.82rem; color:var(--gold); font-variant-numeric:tabular-nums; }
.pr-nm{ flex:1 1 auto; min-width:0; font-size:.84rem; color:#fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pr-pax{ flex:none; display:inline-flex; align-items:center; gap:.25rem; font-size:.72rem; color:rgba(234,244,251,.75); }
.pr-pax i{ font-size:.6rem; color:var(--gold); }

/* ── EVENTI (strumento): il giorno strappato, il titolo, quanti ci vanno ── */
.ev-r{ display:flex; align-items:center; gap:.6rem; padding:.5rem 0;
  border-bottom:1px solid rgba(255,255,255,.12); }
.ev-r:last-of-type{ border-bottom:0; }
.ev-g{ flex:none; display:flex; flex-direction:column; align-items:center; min-width:40px; line-height:1;
  padding:.26rem .36rem .3rem; border-radius:9px; color:var(--night);
  background:linear-gradient(135deg,var(--gold),var(--amber)); box-shadow:0 8px 16px -10px rgba(242,167,67,.8); }
.ev-g b{ font-size:1rem; font-weight:800; }
.ev-g i{ font-style:normal; font-size:.5rem; font-weight:800; letter-spacing:.08em; margin-top:.1rem; }
.ev-chi{ flex:none; margin-left:auto; min-width:46px; justify-content:flex-end; display:inline-flex; align-items:center; gap:.3rem;
  font-family:'JetBrains Mono',ui-monospace,monospace; font-size:.7rem; color:rgba(234,244,251,.8); }
.ev-chi i{ font-size:.6rem; color:var(--gold); }

/* ── VIAGGI: le tappe in fila, col filo che le lega ── */
.vg-t{ font-size:.86rem; font-weight:800; color:#fff; margin-bottom:.6rem; }
.vg-t i{ font-style:normal; font-weight:600; font-size:.68rem; color:rgba(234,244,251,.6); margin-left:.4rem; }
.vg-p{ display:flex; align-items:center; gap:.65rem; }
.vg-n{ flex:none; width:24px; height:24px; border-radius:50%; display:grid; place-items:center;
  font-size:.68rem; font-weight:800; color:rgba(234,244,251,.75);
  background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.28); }
.vg-nm{ flex:1 1 auto; min-width:0; font-size:.86rem; color:rgba(234,244,251,.92); }
.vg-nm i{ font-style:normal; font-size:.66rem; color:rgba(234,244,251,.55); margin-left:.4rem; }
/* la tappa fatta si spegne, quella dove sei si accende */
.vg-p.fatta .vg-n{ background:rgba(126,247,166,.18); border-color:rgba(126,247,166,.5); color:#9ff9c2; }
.vg-p.fatta .vg-nm{ color:rgba(234,244,251,.6); }
.vg-p.qui .vg-n{ background:var(--gold); border-color:var(--gold); color:var(--night); }
.vg-p.qui .vg-nm{ color:#fff; font-weight:800; }
.vg-fil{ display:block; width:2px; height:13px; margin:2px 0 2px 11px; background:rgba(255,255,255,.22); }

/* ── GRUPPI: chi c'è dentro e l'ultima cosa detta ── */
.gp-r{ display:flex; align-items:center; gap:.65rem; padding:.5rem 0; border-bottom:1px solid rgba(255,255,255,.12); }
.gp-r:last-of-type{ border-bottom:0; }
.gp-av{ flex:none; display:flex; align-items:center; }
.gp-av > span{ flex:none; width:26px; height:26px; border-radius:50%; margin-left:-8px; display:grid; place-items:center;
  font-size:.6rem; font-weight:800; color:rgba(255,255,255,.85);
  background:rgba(60,110,155,.95); border:2px solid rgba(12,54,90,1); }
.gp-av > span:first-child{ margin-left:0; }
.gp-av > span.more{ background:var(--gold); color:var(--night); font-size:.56rem; }
.gp-tt{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; }
.gp-tt b{ font-size:.86rem; font-weight:800; color:#fff; line-height:1.2; }
.gp-tt i{ font-style:normal; font-size:.68rem; color:rgba(234,244,251,.62); margin-top:.1rem;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.gp-badge{ flex:none; min-width:20px; height:20px; padding:0 .35rem; border-radius:999px; display:grid; place-items:center;
  font-size:.62rem; font-weight:800; color:var(--night); background:var(--gold); }

/* ── MAPPA: la sagoma dell'isola coi posti segnati ── */
/* Il riquadro del file sicilia.svg arriva fino a Lampedusa: preso così com'è, l'isola
   resta un francobollo in alto e sotto c'è mezzo schermo di mare vuoto. Quindi si
   ritaglia: .mp-wrap è la finestra (proporzioni della Sicilia), .mp-zoom è la carta
   intera ingrandita e spostata dietro, così dalla finestra si vede solo l'isola.
   I pin restano nelle coordinate della carta intera e si spostano insieme a lei. */
.mp-wrap{ position:relative; width:100%; max-width:320px; margin:.2rem auto .4rem;
  overflow:hidden; border-radius:10px; }
.mp-zoom{ position:absolute; }
.mp-isola{ position:absolute; inset:0; background-color:rgba(255,255,255,.16);
  -webkit-mask:url('sicilia.svg') center/contain no-repeat; mask:url('sicilia.svg') center/contain no-repeat; }
.mp-pin{ position:absolute; transform:translate(-50%, 50%); display:flex; flex-direction:column; align-items:center; }
.mp-pin i{ font-size:.8rem; color:var(--gold); filter:drop-shadow(0 2px 4px rgba(0,10,26,.9)); }
.mp-pin em{ font-style:normal; font-size:.54rem; font-weight:700; color:rgba(234,244,251,.85);
  white-space:nowrap; margin-top:.1rem; text-shadow:0 1px 3px rgba(0,10,26,.9); }

/* ── BANDI: righe a colonne, si leggono in verticale come una tabella ── */
.bn-r{ display:grid; grid-template-columns:46px 1fr auto; align-items:center; gap:.55rem;
  padding:.45rem 0; border-bottom:1px solid rgba(255,255,255,.12); }
.bn-r:last-of-type{ border-bottom:0; }
.bn-t{ font-family:'JetBrains Mono',ui-monospace,monospace; font-size:.72rem; font-weight:600;
  color:var(--gold); text-align:right; }
.bn-o{ min-width:0; display:flex; flex-direction:column; }
.bn-o b{ font-size:.84rem; font-weight:800; color:#fff; line-height:1.2;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.bn-o i{ font-style:normal; font-size:.64rem; color:rgba(234,244,251,.6); margin-top:.1rem;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.bn-cat{ justify-self:end; min-width:44px; text-align:center;
  font-family:'JetBrains Mono',ui-monospace,monospace; font-size:.6rem; font-weight:700;
  padding:.16rem .4rem; border-radius:5px; color:rgba(234,244,251,.85); background:rgba(255,255,255,.1); }

/* i cantieri: barra dell'avanzamento a destra, larghezza FISSA per tutti — è il
   confronto fra i cantieri che conta, e con barre di lunghezza diversa non si legge. */
.ct-av{ flex:none; margin-left:auto; display:flex; align-items:center; gap:.5rem; }
.ct-bar{ width:96px; height:7px; border-radius:999px; background:rgba(255,255,255,.1); overflow:hidden; }
.ct-bar i{ display:block; height:100%; border-radius:999px; background:var(--gold); }
.ct-bar i.ok{ background:#7ef7a6; }
.ct-bar i.wait{ background:var(--gold); }
.ct-bar i.low{ background:#ff9b83; }
.ct-q{ min-width:34px; text-align:right; font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:.68rem; font-weight:600; color:#fff; }

/* i documenti: l'icona dice che tipo è, il colore come sta messo
   (verde a posto · oro da rinnovare · corallo scaduto). Incolonnata a destra. */
.dc-ic{ flex:none; margin-left:auto; width:30px; height:30px; border-radius:9px;
  display:grid; place-items:center; font-size:.86rem; }
.dc-ic.ok{   color:#9ff9c2; background:rgba(126,247,166,.14); border:1px solid rgba(126,247,166,.42); }
.dc-ic.wait{ color:var(--gold); background:rgba(255,217,138,.14); border:1px solid rgba(255,217,138,.45); }
.dc-ic.low{  color:#ffbfae; background:rgba(255,155,131,.14); border:1px solid rgba(255,155,131,.45); }

/* dove sta la squadra oggi: incolonnato a destra */
.sq-dove{ flex:none; margin-left:auto; min-width:64px; text-align:right;
  font-family:'JetBrains Mono',ui-monospace,monospace; font-size:.68rem; font-weight:600;
  color:var(--gold); white-space:nowrap; }

/* quanto manca, nelle altre liste */
.bn-quando{ flex:none; font-family:'JetBrains Mono',ui-monospace,monospace; font-size:.68rem;
  font-weight:600; color:var(--gold); white-space:nowrap; }

/* il prezzo di una tratta: incolonnato a destra, si confrontano a colpo d'occhio */
.tf-p{ flex:none; margin-left:auto; min-width:58px; text-align:right;
  font-family:'JetBrains Mono',ui-monospace,monospace; font-size:.82rem; font-weight:700;
  color:#fff; white-space:nowrap; }
.tf-p em{ font-style:normal; font-size:.62rem; font-weight:600; color:rgba(234,244,251,.55); }

/* ── AVVALIMENTI: la freccia dice il verso — giù chiedi, su presti ── */
.av-v{ flex:none; margin-left:auto; width:24px; height:24px; border-radius:50%; display:grid; place-items:center;
  font-size:.8rem; font-weight:800; }
.av-v.cerco{ color:var(--night); background:var(--gold); }
.av-v.offro{ color:#9ff9c2; background:rgba(126,247,166,.16); border:1px solid rgba(126,247,166,.5); }

/* ── TOUR (guida): il giro e chi si è già prenotato ── */
.gr-r{ display:flex; align-items:center; justify-content:space-between; gap:.6rem; padding:.5rem 0;
  border-bottom:1px solid rgba(255,255,255,.12); }
.gr-r:last-of-type{ border-bottom:0; }
.gr-tt{ display:flex; flex-direction:column; min-width:0; }
.gr-tt b{ font-size:.86rem; font-weight:800; color:#fff; line-height:1.2; }
.gr-tt i{ font-style:normal; font-size:.68rem; color:rgba(234,244,251,.62); margin-top:.1rem; }
/* i partecipanti, uno sopra l'altro come nel sito */
.gr-people{ flex:none; display:flex; align-items:center; }
.gr-people > span{ flex:none; width:26px; height:26px; border-radius:50%; margin-left:-7px; display:grid; place-items:center;
  background:rgba(60,110,155,.95); border:2px solid rgba(12,54,90,1); color:rgba(255,255,255,.75); font-size:.58rem; }
.gr-people > span:first-child{ margin-left:0; }
.gr-people > span.more{ background:var(--gold); color:var(--night); font-weight:800; font-size:.58rem; }

/* ── CALENDARIO (guida): il mese, con i tour segnati ── */
.cl-m{ font-size:.72rem; font-weight:800; text-transform:uppercase; letter-spacing:.1em;
  color:var(--gold); margin-bottom:.5rem; }
.cl{ display:grid; grid-template-columns:repeat(7,1fr); gap:3px; }
.cl > span{ aspect-ratio:1.25; border-radius:6px; display:grid; place-items:center; font-size:.62rem;
  background:rgba(255,255,255,.07); color:rgba(234,244,251,.7); }
.cl > span.cl-g{ background:none; font-size:.56rem; font-weight:800; letter-spacing:.06em;
  color:rgba(234,244,251,.42); text-transform:uppercase; }
.cl > span.on{ background:var(--gold); color:var(--night); font-weight:800; }
.cl > span.mezzo{ background:rgba(255,217,138,.28); color:#fff; font-weight:800; }

/* ── CAMERE: com'è messa la struttura ── */
/* due colonne: le camere sono quattro e fanno un quadrato pieno. Con tre colonne
   l'ultima resterebbe sola su una riga tutta sua, e si nota. */
.cr-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:.45rem; }
.cr{ display:block; padding:.55rem .6rem; border-radius:11px; border:1px solid rgba(255,255,255,.16);
  background:rgba(255,255,255,.06); border-left:3px solid rgba(255,255,255,.3); }
.cr b{ display:block; font-size:1rem; font-weight:800; color:#fff; line-height:1; }
.cr i{ display:block; font-style:normal; font-size:.62rem; color:rgba(234,244,251,.6); margin-top:.18rem; }
.cr em{ display:block; font-style:normal; font-size:.6rem; font-weight:800; text-transform:uppercase;
  letter-spacing:.04em; margin-top:.22rem; }
.cr.occ{ border-left-color:var(--gold); } .cr.occ em{ color:var(--gold); }
.cr.free{ border-left-color:#7ef7a6; } .cr.free em{ color:#9ff9c2; }
.cr.pul{ border-left-color:#ff9b83; } .cr.pul em{ color:#ffbfae; }

/* ── PORTFOLIO ──
   Non è la griglia delle foto: là sono scatti, qui sono LAVORI SCELTI. Quattro riquadri
   grandi, ognuno con la sua targhetta — chi guarda deve leggere per chi l'hai fatto. */
.pf-g{ display:grid; grid-template-columns:repeat(2,1fr); gap:.5rem; }
/* stesso fondo e stessi angoli delle tessere di "Foto": è la stessa famiglia di
   riquadri, cambiarne il colore le farebbe sembrare di un'altra pagina */
.pf-i{ position:relative; aspect-ratio:4/3; border-radius:12px; overflow:hidden;
  background:rgba(20,74,116,.5);
  display:grid; place-items:center; }
.pf-i > .fa-solid{ font-size:1.1rem; color:rgba(255,255,255,.45); }
.pf-c{ position:absolute; left:0; right:0; bottom:0; padding:.3rem .4rem;
  background:linear-gradient(to top, rgba(4,18,34,.92), rgba(4,18,34,0)); }
.pf-c b{ display:block; font-size:.64rem; font-weight:800; color:#fff; line-height:1.15;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pf-c i{ display:block; font-style:normal; font-size:.55rem; color:rgba(234,244,251,.65); }

/* ── STAGIONI ──
   Cosa c'è adesso e cosa sta per finire. La barra è il periodo dell'anno, il pallino
   dice a che punto siamo: si capisce al volo se conviene aspettare o correre. */
.sg-r{ display:flex; align-items:center; gap:.6rem; padding:.42rem 0;
  border-bottom:1px solid rgba(255,255,255,.1); }
.sg-r:last-of-type{ border-bottom:0; }
.sg-nm{ flex:0 0 34%; min-width:0; font-size:.82rem; font-weight:700; color:#fff;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sg-nm i{ display:block; font-style:normal; font-size:.6rem; font-weight:600; color:rgba(234,244,251,.5); }
.sg-b{ flex:1 1 auto; height:8px; border-radius:999px; background:rgba(255,255,255,.08);
  position:relative; overflow:hidden; }
.sg-b > i{ position:absolute; top:0; bottom:0; border-radius:999px; background:rgba(255,217,138,.35); }
.sg-b > em{ position:absolute; top:50%; width:8px; height:8px; margin:-4px 0 0 -4px;
  border-radius:50%; background:var(--gold); box-shadow:0 0 0 2px rgba(11,42,71,.9); }
.sg-r.finita .sg-b > i{ background:rgba(255,255,255,.14); }
.sg-r.finita .sg-nm{ color:rgba(234,244,251,.45); }
.sg-t{ flex:none; min-width:54px; text-align:right; font-size:.62rem; font-weight:700;
  color:var(--gold); white-space:nowrap; }
.sg-r.finita .sg-t{ color:rgba(234,244,251,.35); }

/* ── LISTE (da fare, spesa) ──
   Una casella e una riga. Le cose fatte non spariscono: restano spuntate e sbiadite,
   perché vedere quello che hai già tolto di mezzo è metà della soddisfazione. */
.li-r{ display:flex; align-items:center; gap:.6rem; padding:.42rem 0;
  border-bottom:1px solid rgba(255,255,255,.1); }
.li-r:last-of-type{ border-bottom:0; }
.li-q{ flex:none; width:19px; height:19px; border-radius:6px; display:grid; place-items:center;
  font-size:.6rem; color:var(--night); background:transparent; border:1.5px solid rgba(255,255,255,.35); }
.li-r.fatta .li-q{ background:#7ef7a6; border-color:#7ef7a6; }
.li-t{ flex:1 1 auto; min-width:0; font-size:.85rem; color:rgba(234,244,251,.94); line-height:1.25; }
.li-t i{ display:block; font-style:normal; font-size:.63rem; color:rgba(234,244,251,.5); margin-top:.08rem; }
.li-r.fatta .li-t{ color:rgba(234,244,251,.4); text-decoration:line-through; text-decoration-thickness:1px; }
.li-r.fatta .li-t i{ text-decoration:none; }
/* la quantità della spesa, o quando scade una cosa da fare */
.li-n{ flex:none; font-family:'JetBrains Mono',ui-monospace,monospace; font-size:.66rem;
  font-weight:600; color:var(--gold); white-space:nowrap; }
.li-r.fatta .li-n{ color:rgba(234,244,251,.3); }

/* ── STAFF: la rota della settimana ──
   Chi lavora, quando. Una griglia e basta: il turno si legge dal colore, non dalla
   scritta — così in un colpo d'occhio si vede chi è scoperto e chi è in riposo.
   Le lettere restano per chi non distingue bene i colori. */
.rt-g{ display:grid; grid-template-columns:58px repeat(7, 1fr); gap:3px; align-items:center; }
.rt-h{ font-size:.56rem; font-weight:800; text-transform:uppercase; letter-spacing:.04em;
  text-align:center; color:rgba(234,244,251,.5); padding-bottom:.15rem; }
.rt-nm{ font-size:.72rem; font-weight:700; color:#fff; line-height:1.15;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; padding-right:.2rem; }
.rt-nm i{ display:block; font-style:normal; font-size:.55rem; font-weight:600;
  color:rgba(234,244,251,.5); }
.rt-c{ aspect-ratio:1; border-radius:5px; display:grid; place-items:center;
  font-size:.58rem; font-weight:800; font-family:'JetBrains Mono',ui-monospace,monospace; }
.rt-c.m{ color:var(--night); background:var(--gold); }                                  /* mattina */
.rt-c.p{ color:#cdeaff; background:rgba(56,140,200,.55); }                              /* pomeriggio */
.rt-c.n{ color:#dcd0ff; background:rgba(76,60,140,.6); }                                /* notte */
.rt-c.r{ color:rgba(234,244,251,.28); background:rgba(255,255,255,.05); }               /* riposo */
/* la legenda: piccola, sotto, non è lei la protagonista */
.rt-leg{ display:flex; flex-wrap:wrap; gap:.7rem; margin-top:.7rem; padding-top:.6rem;
  border-top:1px solid rgba(255,255,255,.12); font-size:.6rem; color:rgba(234,244,251,.6); }
.rt-leg span{ display:inline-flex; align-items:center; gap:.3rem; }
.rt-leg b{ width:11px; height:11px; border-radius:3px; }

/* ── OSPITI: chi c'è dentro ── */
.os-r{ display:flex; align-items:center; gap:.6rem; padding:.45rem 0; border-bottom:1px solid rgba(255,255,255,.12); }
.os-r:last-of-type{ border-bottom:0; }
.os-av{ flex:none; width:32px; height:32px; border-radius:50%; display:grid; place-items:center;
  font-size:.66rem; font-weight:800; color:#fff; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.3); }
.os-info{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; }
.os-nm{ font-size:.86rem; font-weight:800; color:#fff; line-height:1.15; }
.os-sm{ font-size:.66rem; color:rgba(234,244,251,.65); margin-top:.1rem; }

/* mock della chat (sponsorizzazione) */
.chatmock{ margin:1.4rem auto 0; max-width:460px; background:rgba(20,74,116,.5);
  border-radius:18px; overflow:hidden;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.38), inset 0 -1px 0 rgba(0,8,20,.42), 0 18px 38px -22px rgba(0,12,28,.65); }
.cm-head{ display:flex; align-items:center; gap:.5rem; padding:.7rem 1rem; font-size:.82rem; font-weight:700; color:#fff;
  background:rgba(255,255,255,.05); border-bottom:1px solid rgba(255,255,255,.08); }
.cm-title{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cm-head .cm-dot{ flex:none; width:8px; height:8px; border-radius:50%; background:#7ef7a6; box-shadow:0 0 8px #7ef7a6; }
.cm-head .muted{ margin-left:auto; display:flex; align-items:center; gap:.35rem; white-space:nowrap; color:rgba(234,244,251,.6); font-weight:500; }
.cm-body{ padding:1rem; display:flex; flex-direction:column; gap:.75rem; }
.cm-msg{ display:flex; gap:.6rem; align-items:flex-end; opacity:0; }
.reveal.in .cm-msg{ animation:cmIn .5s ease forwards; }
.reveal.in .cm-msg:nth-child(1){ animation-delay:.25s } .reveal.in .cm-msg:nth-child(2){ animation-delay:1.1s } .reveal.in .cm-msg:nth-child(3){ animation-delay:2s } .reveal.in .cm-msg:nth-child(4){ animation-delay:2.9s }
@keyframes cmIn{ from{ opacity:0; transform:translateY(9px) } to{ opacity:1; transform:none } }
.cm-av{ flex:none; width:36px; height:36px; border-radius:50%; display:grid; place-items:center; font-weight:800; font-size:.9rem; color:#fff; overflow:hidden; }
.cm-av.av1{ background:linear-gradient(135deg,#ff6cae,#c94dd0) }
.cm-av.av2{ background:linear-gradient(135deg,#3aa0dd,#2b6bff) }
.cm-av.av4{ background:linear-gradient(135deg,#0b2a47,#123f6e); color:var(--gold); border:1px solid rgba(255,217,138,.55); font-size:.8rem }
img.cm-av{ object-fit:cover; border:1px solid rgba(255,255,255,.18); }
/* messaggio "a destra" (in stile proprio) */
.cm-msg.me{ flex-direction:row-reverse; }
.cm-msg.me .cm-b{ border-radius:14px 14px 4px 14px; background:rgba(58,160,221,.2); border-color:rgba(58,160,221,.38); }
.cm-msg.me .cm-b b{ text-align:right; }
.cm-role{ font-size:.58rem; font-weight:800; text-transform:uppercase; letter-spacing:.04em; color:var(--night);
  background:linear-gradient(135deg,var(--gold),var(--amber)); border-radius:999px; padding:.06rem .4rem; margin-left:.35rem; vertical-align:.05em; }
.cm-b{ background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.08); border-radius:14px 14px 14px 4px; padding:.55rem .8rem; max-width:82%; }
.cm-b b{ display:block; font-size:.72rem; color:var(--gold); margin-bottom:.15rem; }
.cm-b p{ font-size:.9rem; color:rgba(234,244,251,.92); line-height:1.4; }
.cm-b .link{ color:var(--gold); text-decoration:underline; }
@media (prefers-reduced-motion:reduce){ .reveal.in .cm-msg{ animation:none; opacity:1 } }
.cofano-punch{ color:var(--gold); font-weight:600; }
.stat-soon{ display:block; margin-top:.28rem; font-size:.6rem; font-weight:700; letter-spacing:.02em; color:var(--gold); opacity:.92; }
.stat-grid{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:.7rem; margin-top:1.5rem; }
@media(max-width:520px){ .stat-grid{ grid-template-columns:1fr 1fr; } }

/* footer nello stile account: blu delle card, bianco quando il cielo è scuro */
footer{ text-align:center; max-width:560px; margin:0 auto; padding:2.4rem .65rem 3.2rem; color:#144a74; font-size:.82rem; }
footer .fsub{ margin-top:-.1rem; font-size:.72rem; font-weight:800; letter-spacing:.22em; text-transform:uppercase; opacity:.85; }
footer .fnav{ margin-top:.6rem; }
footer .fnav a{ color:inherit; text-decoration:none; opacity:.75; font-size:.78rem; }
footer .fnav a:hover{ opacity:1; text-decoration:underline; }
footer .fbrand{ font-family:'Lobster',cursive; font-size:1.7rem; color:#144a74; margin-bottom:.3rem; }

.reveal{ opacity:0; transform:translateY(24px); transition:opacity .7s ease, transform .7s ease; }
.reveal.in{ opacity:1; transform:none; }
.reveal.d1{ transition-delay:.08s } .reveal.d2{ transition-delay:.16s } .reveal.d3{ transition-delay:.24s }

/* ============================================================
   TEMPLATE ORARI — la scena cambia colore con l'ora del giorno
   (contenuto e layout invariati, cambiano solo i colori).
   Default = mattino azzurrino fresco, prima che sky.js entri.
   ============================================================ */
:root{
  --sky-grad:linear-gradient(to bottom,#4c85bb 0%,#6091c3 27%,#7ea8d0 54%,#a1c1da 80%,#c1d5e5 100%);
  --orb-a:rgba(255,255,245,.98);--orb-b:rgba(255,250,220,.6);--orb-c:rgba(255,235,190,.24);--orb-op:.85;--sun-top:42%;
  --sea-grad:linear-gradient(to bottom,#9ac4db 0%,#6ba1be 45%,#668aa2 100%);
  --shimmer:#fffdf0; --sea-h:16%;
  --star-op:0; --moon-op:0;
}
/* ALBA — rosati/pesca, ultime stelle */
body[data-phase="alba"]{
  --sky-grad:linear-gradient(to bottom,#52789f 0%,#6a86ad 27%,#8a9cba 54%,#aeb6c4 80%,#ccc9c9 100%);
  --orb-a:rgba(255,225,205,.96);--orb-b:rgba(255,190,160,.55);--orb-c:rgba(255,160,130,.22);--orb-op:.9;--sun-top:70%;
  --sea-grad:linear-gradient(to bottom,#b2b1bf 0%,#82899e 45%,#707382 100%);
  --shimmer:#f0d8ca; --star-op:.18; --moon-op:0;
}
/* MATTINO — azzurrino fresco */
body[data-phase="mattino"]{
  --sky-grad:linear-gradient(to bottom,#4c85bb 0%,#6091c3 27%,#7ea8d0 54%,#a1c1da 80%,#c1d5e5 100%);
  --orb-a:rgba(255,255,245,.98);--orb-b:rgba(255,250,220,.6);--orb-c:rgba(255,235,190,.24);--orb-op:.85;--sun-top:42%;
  --sea-grad:linear-gradient(to bottom,#9ac4db 0%,#6ba1be 45%,#668aa2 100%);
  --shimmer:#fffdf0; --star-op:0; --moon-op:0;
}
/* GIORNO — il tema caldo (arancio, giallo): si accende quando OGGI in Sicilia
   fa ≥30°. Scalda il SOLE e il riflesso sull'acqua, non l'acqua.

   ═══ IL MARE VIOLA ══════════════════════════════════════════════════════════
   Qui c'era un gradiente fucsia-viola (#c94d7a → #7a2f7a). Sulla carta seguiva
   il tema caldo; a schermo, alle due del pomeriggio, era un mare viola — e un
   mare viola di giorno non si legge come "fa caldo", si legge come "il sito è
   rotto". Il caldo lo raccontano già il sole basso e denso e il riflesso dorato:
   l'acqua non ha bisogno di cambiare colore per dire che è agosto.

   Vale la regola dei temi: quelli alternativi restano scritti, ma fuori esce il
   blu. Il gradiente caldo è archiviato qui sotto, non cancellato.
     mare caldo (archiviato): #c94d7a 0%, #7a2f7a 45%, #2c1e52 100%           */
body[data-phase="giorno"]{
  --sky-grad:linear-gradient(to bottom,#5382b2 0%,#6b8fb8 27%,#8ba6c3 54%,#b1bfc9 80%,#d2cfc7 100%);
  --orb-a:rgba(255,250,220,.98);--orb-b:rgba(255,220,150,.6);--orb-c:rgba(255,170,90,.28);--orb-op:.92;--sun-top:16%;
  --sea-grad:linear-gradient(to bottom,#b6c3c9 0%,#85adbd 45%,#7797a4 100%);
  --shimmer:#eaf4fa; --star-op:0; --moon-op:0;
}
/* GIORNO "mite" — se OGGI in Sicilia è sotto i 30°: cielo azzurro pulito, luminoso, col sole alto (stile app meteo) */
body.st-mild[data-phase="giorno"]{
  /* CONTRASTO APPROVATO (pagina account): non modificare */
  --sky-grad:radial-gradient(circle at 85% 7%, rgba(255,255,255,.92), rgba(255,255,255,.22) 13%, rgba(255,255,255,0) 35%), linear-gradient(to bottom,#4a7fb4 0%,#5c8cbd 27%,#7aa4cd 54%,#9dbdd7 80%,#bcd0e1 100%);
  --orb-a:rgba(255,255,255,.85);--orb-b:rgba(240,248,255,.35);--orb-c:rgba(210,230,250,.12);--orb-op:.25;--sun-top:6%;
  --sea-grad:linear-gradient(to bottom,#a5c3da 0%,#7aaec8 45%,#6c98b1 100%);
  --shimmer:#eaf4fa;
}
/* card stile app meteo (giorno mite): vetro azzurro, tinta che varia piano = pagina dinamica */
body.st-mild[data-phase="giorno"] .panel{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.42), inset 0 -1px 0 rgba(20,50,90,.42), 0 22px 50px -30px rgba(20,50,90,.5);
  animation:cardBreathe 9s ease-in-out infinite;
}
/* anche di giorno: niente bordo uniforme, solo il filo di luce sopra e d'ombra sotto */
body.st-mild[data-phase="giorno"] .tool,
body.st-mild[data-phase="giorno"] .feat,
body.st-mild[data-phase="giorno"] .stat,
body.st-mild[data-phase="giorno"] .strum-row,
body.st-mild[data-phase="giorno"] .st-card,
body.st-mild[data-phase="giorno"] .chatmock{ background:rgba(50,88,126,.55);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28), inset 0 -1px 0 rgba(20,50,90,.4), 0 12px 24px -16px rgba(20,50,90,.55); }
body.st-mild[data-phase="giorno"] .mask{ background:rgba(50,88,126,.55); border-color:rgba(255,255,255,.5); }
/* stesso tono del cielo (#4a7fb4) ma più scuro */
@keyframes cardBreathe{ 0%,100%{ background:rgba(44,80,118,.58) } 50%{ background:rgba(62,100,142,.62) } }
@media (prefers-reduced-motion:reduce){ body.st-mild[data-phase="giorno"] .panel{ animation:none; background:rgba(52,90,130,.60) } }
/* GOLDEN HOUR — dorato */
body[data-phase="golden"]{
  --sky-grad:linear-gradient(to bottom,#4e5f86 0%,#7a6f8c 22%,#b5857c 46%,#e0a26c 70%,#f2c079 86%,#f7d492 100%);
  --orb-a:rgba(255,242,210,.98);--orb-b:rgba(255,205,125,.7);--orb-c:rgba(245,165,80,.34);--orb-op:1;--sun-top:91%; /* 91% = si vede ~70% del sole in basso */ /* golden: sta tramontando → 35% SOTTO il fondo pagina */
  --sea-grad:linear-gradient(to bottom,#ebb574 0%,#b8866e 45%,#8e7663 100%);
  --shimmer:#ffdca8; --star-op:.08; --moon-op:0;
}
/* SILVER HOUR — argenteo, sale la luna */
body[data-phase="silver"]{
  --sky-grad:linear-gradient(to bottom,#4e88ad 0%,#4079a6 22%,#2f5e85 52%,#24496b 78%,#1b3552 100%);
  --orb-a:rgba(235,242,250,.9);--orb-b:rgba(200,215,235,.5);--orb-c:rgba(170,190,215,.2);--orb-op:0;--sun-top:24%; /* silver: il sole è già tramontato */
  --sea-grad:linear-gradient(to bottom,#314d6b 0%,#344a67 45%,#192a41 100%);
  --shimmer:#cbdcee; --star-op:.35; --moon-op:.9;
}
/* NOTTE — blu profondo (sky.js sfuma in base alla luna e alle stelle) */
body[data-phase="notte"]{
  --sky-grad:linear-gradient(to bottom,#1c4c6b 0%,#14406a 22%,#0e2c4c 52%,#0a1e36 78%,#071426 100%);
  --orb-op:0;--sun-top:28%;
  --sea-grad:linear-gradient(to bottom,#0a1f36 0%,#091d35 45%,#061223 100%);
  --shimmer:#93b7dc; --star-op:1; --moon-op:1;
}

/* barra bottoni per switchare manualmente i template */
.phasebar{ position:fixed; top:0; left:0; right:0; z-index:60; display:flex; flex-wrap:wrap; gap:.3rem; justify-content:center; align-items:center;
  padding:calc(.35rem + env(safe-area-inset-top)) .5rem .4rem; background:linear-gradient(to bottom,rgba(4,12,24,.55),rgba(4,12,24,0)); }
.phasebar button{ font-family:inherit; font-size:.64rem; font-weight:700; letter-spacing:.02em; cursor:pointer; color:#eaf4fb;
  background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.22); border-radius:999px; padding:.28rem .58rem;
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); transition:.15s; }
.phasebar button:hover{ background:rgba(255,255,255,.2); }
.phasebar button.on{ background:linear-gradient(135deg,var(--gold),var(--amber)); color:var(--night); border-color:var(--gold); }
.phase-info{ flex-basis:100%; text-align:center; font-size:.58rem; letter-spacing:.03em; color:rgba(234,244,251,.7); margin-top:.15rem; }

/* pulsante sottofondo musicale (attivo solo 20–23 ora italiana) */
.music-btn{ position:fixed; left:14px; bottom:calc(14px + env(safe-area-inset-bottom)); z-index:60; width:42px; height:42px; border-radius:50%;
  border:1.5px solid rgba(255,255,255,.5); background:rgba(20,74,116,.5); color:var(--gold); font-size:1rem; cursor:pointer;
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); display:grid; place-items:center; transition:transform .15s, background .2s; }
.music-btn:hover{ transform:scale(1.06); }
.music-btn.on{ background:linear-gradient(135deg,var(--gold),var(--amber)); color:var(--night); animation:mpulse 1.8s ease-in-out infinite; }
.music-btn.hidden{ display:none; }
@keyframes mpulse{ 0%,100%{ box-shadow:0 0 0 4px rgba(255,217,138,.18) } 50%{ box-shadow:0 0 0 9px rgba(255,217,138,.05) } }
@media (prefers-reduced-motion:reduce){ .music-btn.on{ animation:none } }

/* città sulla terra: luci accese/spente + auto in movimento (di giorno spente) */
:root{ --city-op:0; }
body[data-phase="alba"]{ --city-op:.4; }
body[data-phase="golden"]{ --city-op:0; }   /* ora dorata: niente luci di città, niente auto */
body[data-phase="silver"]{ --city-op:.55; }
body[data-phase="notte"]{ --city-op:1; }
/* LA RIVA: un numero solo per tutto quello che sta sul pelo dell'acqua.
   Prima ognuno aveva il suo — il mare 16%, le case 17%, la strada 16.5%, il faro
   un calcolo a parte — e finché il mare era alto tornavano. Abbassato il mare,
   auto e paesi sono rimasti appesi a mezz'aria. Ora la riva la decide questa
   riga, e tutti gli altri le stanno addosso. */
.scene{ --riva:calc(var(--sea-h, 16%) * .62); }
.cityscape{ position:absolute; left:0; right:0; bottom:calc(var(--riva) + 6px); height:64px; z-index:3; pointer-events:none; }
.city{ position:absolute; inset:0; opacity:var(--city-op,0); transition:opacity 1.8s ease; }
/* --cl-fade la imposta sky.js: è sempre metà del giro (spegnersi + riaccendersi) */
.citylight{ position:absolute; width:2px; height:2px; border-radius:1px; background:#ffd98a; box-shadow:0 0 4px 1px rgba(255,206,120,.85); transition:opacity var(--cl-fade,1.6s) ease; }
.citylight.cool{ background:#dff0ff; box-shadow:0 0 4px 1px rgba(200,225,255,.8); }
.citylight.blink{ animation:cblink var(--bd,5s) steps(1,end) infinite; animation-delay:var(--dl,0s); }
@keyframes cblink{ 0%,46%{opacity:1} 50%,96%{opacity:.04} 100%{opacity:1} }
.road{ position:absolute; left:0; right:0; bottom:calc(var(--riva) + 2px); height:4px; z-index:3; pointer-events:none;
  opacity:var(--city-op,0); transition:opacity 1.8s ease; } /* stessa visibilità delle luci di città: di giorno spariscono anche le auto in transito */
.car{ position:absolute; width:2px; height:2px; border-radius:1px; will-change:transform; }
.car.h{ background:#ffd98a; box-shadow:0 0 4px 1px rgba(255,206,120,.85); }
.car.t{ background:#ff6a58; box-shadow:0 0 4px 1px rgba(255,110,90,.85); }
/* mezzo di soccorso: due lampeggianti blu fluorescente, piccoli e vicini */
.car.emg{ width:4px; height:1.8px; background:transparent; box-shadow:none; }
.car.emg::before, .car.emg::after{ content:''; position:absolute; top:0; width:1.8px; height:1.8px; border-radius:50%; background:#3a50ff; }
.car.emg::before{ left:0; box-shadow:0 0 9px 4px rgba(90,120,255,1); animation:emgL 1s steps(1,end) infinite; }
.car.emg::after{ right:0; box-shadow:0 0 9px 4px rgba(90,120,255,1); animation:emgR 1s steps(1,end) infinite; }
/* 3 fasi in 1 secondo: led sinistro, led destro, entrambi spenti */
@keyframes emgL{ 0%{opacity:1} 33%,100%{opacity:0} }
@keyframes emgR{ 0%,33%{opacity:0} 34%{opacity:1} 66%,100%{opacity:0} }
@media (prefers-reduced-motion:reduce){ .car.emg::before,.car.emg::after{ animation:none; opacity:.9 } }
@media (prefers-reduced-motion:reduce){ .citylight.blink{ animation:none } }

/* CIELI SCURI (silver · notte): quello che di giorno è blu passa a bianco, per leggibilità */
body[data-phase="silver"] footer, body[data-phase="silver"] footer .fbrand,
body[data-phase="notte"] footer, body[data-phase="notte"] footer .fbrand{ color:#fff; }
body[data-phase="silver"] .quote-c, body[data-phase="notte"] .quote-c{ color:rgba(255,255,255,.8); }

/* BANNER COOKIE — in tema: card blu + bordo bianco, sale dal basso */
.ck-banner{ position:fixed; left:0; right:0; bottom:0; z-index:90; padding:.7rem .7rem calc(.7rem + env(safe-area-inset-bottom));
  animation:ckUp .45s cubic-bezier(.2,.7,.2,1) both; }
.ck-banner.gone{ animation:ckDown .3s ease forwards; }
@keyframes ckUp{ from{ transform:translateY(110%) } to{ transform:none } }
@keyframes ckDown{ to{ transform:translateY(115%); opacity:0 } }
.ck-banner .ck-in{ max-width:640px; margin:0 auto; border-radius:18px; padding:1rem 1.05rem;
  background:rgba(20,74,116,.92); border:1.5px solid rgba(255,255,255,.5);
  box-shadow:0 -12px 40px -18px rgba(0,8,20,.8);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); }
.ck-banner .ck-txt{ font-size:.88rem; line-height:1.5; color:rgba(234,244,251,.92); }
.ck-banner .ck-txt b{ color:#fff; }
.ck-banner .ck-txt a{ color:var(--gold); }
.ck-banner .ck-btns{ display:flex; gap:.5rem; margin-top:.85rem; flex-wrap:wrap; }
.ck-banner .ck-b{ flex:1 1 auto; padding:.7rem 1rem; border-radius:12px; border:0; cursor:pointer;
  font-family:inherit; font-weight:800; font-size:.9rem; color:var(--night);
  background:linear-gradient(135deg,var(--gold),var(--amber)); }
.ck-banner .ck-b.ghost{ color:var(--gold); background:transparent; border:1px solid rgba(255,217,138,.5); }
@media (prefers-reduced-motion:reduce){ .ck-banner{ animation:none } .ck-banner.gone{ display:none } }
/* voce cookie, in fondo all'offcanvas */
/* Le voci di amministrazione: stessa forma delle altre, ma spente d'oro —
   sono attrezzi, non parti del sito. */
.ln-drawer-nav.ln-admin{ margin-top:.2rem; }
.ln-drawer-nav.ln-admin a{ color:var(--gold); opacity:.85; }
.ln-drawer-nav.ln-admin a:hover{ opacity:1; }

.ln-legal{ margin-top:auto; padding:1rem .8rem calc(.4rem + env(safe-area-inset-bottom)); }
.ln-legal a{ display:flex; align-items:center; gap:.55rem; padding:.6rem .7rem; border-radius:10px;
  color:rgba(234,244,251,.62); text-decoration:none; font-size:.8rem; font-weight:600;
  border-top:1px solid rgba(255,255,255,.1); border-radius:0; }
.ln-legal a i{ color:rgba(234,244,251,.45); font-size:.8rem; }

/* ── ENTRA CON GOOGLE / FACEBOOK ────────────────────────────────────────────
   Stanno in due pagine — la home e accedi — quindi lo stile sta QUI, in un posto
   solo. Una copia per pagina è l'errore che abbiamo già pagato con i riquadri
   degli strumenti: due elenchi che dicono la stessa cosa divergono sempre.
   Colori ufficiali dei due marchi: sono riconoscibili solo se lo sono davvero. */
/* Sopra e sotto la stessa aria: 1.3 e .9 lo facevano sembrare appoggiato ai
   pallini invece che in mezzo fra le due strade. Uguali, e sta al centro. */
.oa-sep{ display:flex; align-items:center; gap:.7rem; margin:1.1rem auto; max-width:420px;
  color:rgba(234,244,251,.45); font-size:.76rem; }
/* Due trattini che si allungano ai lati, NON una riga che passa dietro la parola:
   dietro c'è il cielo, che cambia colore con l'ora — nessuna tinta piatta lo
   coprirebbe senza lasciare una macchia. */
.oa-sep::before, .oa-sep::after{ content:''; flex:1 1 auto; height:1px; background:rgba(255,255,255,.18); }
.oa-sep span{ flex:none; }
/* I TRE PALLINI DELL'ACCESSO.
   Erano bottoni larghi con la scritta "Entra con Google": occupavano quanto il
   campo email e sembravano la strada principale. Non lo sono — la strada è
   l'indirizzo. Tre tondi in fila dicono la stessa cosa e non rubano la scena.
   Quelli SPENTI restano visibili: non per finta, per contare. Ogni tocco va in
   evento.php, e i numeri dicono se vale la pena accenderli davvero. */
.oa-tondi{ display:flex; justify-content:center; gap:.9rem; margin:0 auto; }
.oa-t{ width:54px; height:54px; border-radius:50%; display:grid; place-items:center;
  font-size:1.35rem; text-decoration:none; border:1px solid transparent; cursor:pointer;
  transition:transform .15s, filter .15s; }
.oa-t:active{ transform:scale(.94); }
.oa-t.oa-google{ background:#fff; color:#ea4335; }   /* il rosso della G */
.oa-t.oa-facebook{ background:#1877f2; color:#fff; }
.oa-t.oa-apple{ background:#000; color:#fff; }
/* Spento = si vede che c'è ma che non è pronto. Non "disabled": deve restare
   toccabile, se no il conteggio non esiste e resteremmo a indovinare. */
.oa-t.spento{ filter:grayscale(1); opacity:.42; }
.oa-t.spento:hover{ opacity:.6; }
.oa-t.segnato{ filter:none; opacity:.85; box-shadow:0 0 0 2px var(--gold); }
/* Vuota quasi sempre: la riempie il JavaScript solo quando tocchi un accesso
   spento ("Ho segnato che la vuoi"). Senza contenuto non deve occupare spazio. */
.oa-nota{ margin:0 auto; max-width:420px; font-size:.76rem; color:rgba(234,244,251,.5); }
.oa-nota:empty{ display:none; }
.oa-nota:not(:empty){ margin-top:.6rem; }

/* La card in coda alle maschere: non è un contenuto, è una porta. Si distingue
   perché non ha foto — solo il segno più su vetro — se no sembra la quinta
   maschera e nessuno la tocca. */
.sp-piu{ display:flex; flex-direction:column; justify-content:flex-end;
  text-decoration:none; background:rgba(255,255,255,.08);
  border:1.5px dashed rgba(255,255,255,.34); }
.sp-piu-ic{ position:absolute; top:50%; left:50%; transform:translate(-50%,-62%);
  width:44px; height:44px; border-radius:50%; display:grid; place-items:center;
  background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.4);
  color:#fff; font-size:1.05rem; }

/* ── LE CARD DEGLI STRUMENTI: dentro c'è l'assaggio vero ───────────────────
   Non una foto: il riquadro di _strumenti.php, rimpicciolito e tagliato come
   uno scorcio di schermo. Una foto di magazzino non dice cosa fa il magazzino,
   una riga di scorte che scende sì.
   Il velo scuro in basso serve a far restare leggibile il nome: sotto ci passa
   di tutto, e senza quello certe righe chiare lo mangiavano. */
.sp-attrezzo{ background:linear-gradient(160deg, rgba(16,58,95,.96), rgba(9,34,58,.96)); }
.sp-demo{ position:absolute; inset:0; overflow:hidden; border-radius:inherit; }
.sp-demo-in{ display:block; width:168%; padding:.7rem .8rem;
  transform:scale(.595); transform-origin:top left; pointer-events:none; }
/* Il nome sta sopra al velo, il velo sopra all'assaggio: 3 > 1.
   (Qui prima avevo scritto "position:relative", che toglieva alla .sp-foot
   l'ancoraggio in basso e le faceva risalire il nome in cima alla card.) */
.sp-attrezzo .sp-foot{ z-index:3; }
.sp-attrezzo::after{ content:''; position:absolute; left:0; right:0; bottom:0; height:62%;
  background:linear-gradient(to top, rgba(4,14,28,.92) 18%, rgba(4,14,28,0));
  z-index:1; pointer-events:none; }

/* La freccia sotto l'hero porta a "La Sicilia", ma si fermava con la sezione
   troppo in basso: si vedeva il titolo e poco altro. Il margine NEGATIVO fa
   scorrere un po' più giù, così le card entrano in scena — è quello che uno è
   sceso a vedere. Cento erano troppi: mangiavano il titolo. */
#scopri{ scroll-margin-top:-50px; }

/* "presto online": ultima riga del claim. Sta più in basso e più piano — è una
   nota, non un annuncio. In oro perché è l'unica cosa della riga che riguarda
   il futuro, ed è quello che uno deve portarsi via. */
.claim .c-presto{ color:var(--gold); letter-spacing:.02em; }

/* ── IL MARE, VERSIONE SOFT ─────────────────────────────────────────────────
   Il mare "pieno" era una fascia netta: una riga orizzontale che tagliava la
   pagina e si scontrava con tutto quello che ci sta sopra. Qui resta lo stesso
   colore e la stessa marea, ma: più basso, semitrasparente, e con il bordo alto
   che si dissolve nel cielo — così non c'è più nessun orizzonte disegnato, c'è
   solo un fondo che diventa acqua. */
/* ═══ IL MARE È PIENO, E HA UN ORIZZONTE ═══════════════════════════════════
   Prima era mezzo trasparente (`opacity:.5`) con una maschera che ne sfumava
   la parte alta: il colore che si vedeva non era il suo, era lui mescolato al
   cielo dietro. Funzionava, e il risultato piaceva — ma un colore che nasce da
   una sovrapposizione è un colore che nessuno ha scelto: cambia se cambia il
   cielo, e non lo puoi ritoccare senza rifare i conti.

   Adesso quei colori sono scritti: i `--sea-grad` di ogni fase SONO il
   risultato di quella mescola, calcolato uno per uno e messo lì pieno. A
   schermo non cambia niente; nel foglio, adesso c'è scritto.

   E torna l'ORIZZONTE. La maschera sfumava il bordo alto fino a farlo sparire:
   il mare non finiva, svaniva. Il mare vero finisce con una riga netta — solo
   che a mezzogiorno quella riga quasi non si vede, perché acqua e cielo lì
   sopra hanno quasi lo stesso colore. È esattamente quello che succede qui: la
   linea c'è, tagliata, e si nota appena — perché il primo colore del mare è il
   cielo con dentro un filo d'acqua.                                          */
.sea.soft{
  height:var(--riva);
}

/* ── IL FARO ────────────────────────────────────────────────────────────────
   Un punto di luce appena sopra il pelo dell'acqua che cresce piano, diventa
   bagliore, e piano si spegne. Non lampeggia: i fari veri non fanno "clic",
   fanno una luce che arriva e se ne va — è il fascio che ruota e ti passa
   davanti, e quello che vedi da riva è proprio quel gonfiarsi.
   Otto secondi di giro, e per più di metà è spento: se pulsasse in continuazione
   diventerebbe un led, e la pagina un allarme.
   ANCORATO AL MARE, non alla pagina: la stessa formula dell'altezza dell'acqua
   più qualche pixel. Così quando la marea respira, il faro le resta sopra. */
.faro{
  position:absolute; left:78%; bottom:calc(var(--riva) + 14px);
  width:5px; height:5px; border-radius:50%;
  background:#fff8e6;
  /* NIENTE ALONE. Erano due ombre di luce, e sbrodolavano sull'acqua sotto:
     quello che si vedeva nella zona del faro non erano riflessi sfumati, era
     il suo bagliore steso sul mare. Una luce lontana, di notte, è un punto. */
  opacity:0; pointer-events:none;
  animation:faroGiro 8s ease-in-out infinite;
}
/* Metà giro per accendersi, metà per spegnersi: niente tempo morto, niente guizzo. */
@keyframes faroGiro{
  0%    { opacity:0; transform:scale(.7);   }
  50%   { opacity:1; transform:scale(1.25); }   /* quattro secondi per arrivare */
  100%  { opacity:0; transform:scale(.7);   }   /* e quattro per andarsene */
}
/* Di giorno il faro batte lo stesso: più smorto, perché il sole se lo mangia,
   ma il suo giro si vede a ogni ora. Di notte è l'unica cosa accesa là in fondo. */
body[data-phase="giorno"] .faro,
body[data-phase="mattino"] .faro{ filter:opacity(.7); }
body[data-phase="alba"] .faro{ filter:opacity(.45); }
body[data-phase="golden"] .faro{ opacity:0 !important; animation:none; }  /* ora dorata: spento */
body[data-phase="notte"] .faro{ filter:opacity(1) saturate(1.1); }
/* Chi ha chiesto meno movimento vede una luce ferma e discreta, non il buio. */
@media (prefers-reduced-motion:reduce){
  .faro{ animation:none; opacity:.5; }
}

/* La riga sotto "La Sicilia": stesso carattere del claim dell'hero. Non è un
   sottotitolo decorativo — è l'unica cosa che spiega cosa siano i pallini e le
   card prima di guardarli uno per uno. */
/* Prende la classe .claim, quella del titolo in cima: stesso carattere da
   terminale, stessa misura, stesso oro sulla parte che conta. Riusata, non
   ricopiata — se domani il claim cambia maschera, cambia anche questa. Qui si
   corregge solo il margine, che là serviva a staccare dall'insegna. */
/* Niente max-width: il claim in cima non ce l'ha, e con quello le righe
   andavano a capo in un punto diverso — stesso carattere, ma "formattato
   diverso" a vedersi. Qui si corregge solo lo stacco dal titolo. */
.sic-sotto{ margin:.45rem auto 0; }

/* ═══ IL TASTO «ESCI» ═══════════════════════════════════════════════════════
   Qui sotto c'era il suo vestito di quando il menu era un elenco: fondo
   trasparente, testo a sinistra, l'icona larga venti. Con la griglia sopra ha
   continuato a vincere — stessa forza, ma scritto più in basso — e la
   piastrella dell'uscita restava l'unica senza fondo, con l'icona schiacciata.
   Il suo vestito è quello delle altre voci, e sta scritto con loro: qui non ci
   va più niente. Resta solo il form, che non deve fare margini. */
.ln-drawer-nav form{ margin:0; }

/* ══ I DUE LATI DELLA BARRA ═══════════════════════════════════════════════════
   A sinistra il menu o una freccia; a destra le maschere o niente. Sono opzioni
   della stessa barra, non barre diverse.

   La freccia sta ESATTAMENTE dove sta il menu: `absolute` a sinistra, larga
   uguale. Il nome in mezzo e' centrato sulla barra, non messo in fila — se la
   freccia entrasse nella fila lo spingerebbe di lato, ed e' quello che
   succedeva: sembravano una parola sola, «← SicilyTravel», invece della freccia
   in un angolo e il nome al centro. */
  .landing-nav .ln-indietro{ position:absolute; left:.35rem; top:env(safe-area-inset-top); bottom:0;
    width:46px; display:inline-flex; align-items:center; justify-content:center;
    background:none; border:0; padding:0; color:#fff; font-size:1.15rem;
    cursor:pointer; text-decoration:none; -webkit-tap-highlight-color:transparent; }
  .landing-nav .ln-indietro:active{ transform:scale(.92); }
/* Il lato vuoto non occupa niente: la barra e' centrata, non in fila. */
  .landing-nav .ln-vuoto{ display:none; }

/* ═══ LA FOTO DIETRO LA CARD ═══════════════════════════════════════════════
   Sotto tutto: sopra ci passa la velatura scura che tiene leggibile il nome, e
   la minimappa le sta davanti. `object-fit:cover` perché una foto schiacciata
   in un rettangolo diventa un'altra foto. */
.sp-foto{ position:absolute; inset:0; z-index:0; width:100%; height:100%;
  object-fit:cover; display:block; }
/* La card che è una porta resta identica a quella che non lo è: cambia solo
   che si preme. Il colore ereditato, se no diventerebbe blu sottolineata. */
a.sp-card{ text-decoration:none; color:inherit; -webkit-tap-highlight-color:transparent; }
a.sp-card:active{ transform:translateY(1px); }

/* ═══ LA SICILIA DENTRO UN PALLINO ═════════════════════════════════════════
   Sta al posto di un carattere, e quindi deve avere la misura e il colore di
   un carattere: bianca come le altre icone, e alta quanto loro.

   Prima ereditava il colore dal bottone — che bianco non è — e la misura da un
   `em` calcolato sul testo dell'etichetta, che è minuscolo: usciva una macchia
   grigia grande come un'unghia.

   La misura è in pixel e non in `em` perché qui l'`em` non è quello
   dell'icona: il bottone ha il carattere dell'etichetta, non quello del set.
   Ventotto, come le icone accanto: misurate a schermo, non a occhio. */
/* L'ALTEZZA SEGUE IL DISEGNO, non il quadrato. La Sicilia è larga una volta e
   mezza di quanto è alta: dentro una casella quadrata restava dello stesso
   disegno ma con due strisce di vuoto sopra e sotto, e nel cerchio sembrava
   spinta in alto. Con la sua forma vera, a centrarla ci pensa il cerchio. */
/* I nostri disegni dentro un pallino: misura e colore di un'icona. */
.sp-band .icon-pill .pill-segno{ width:28px; height:28px; display:block; color:#fff; }

.sp-band .icon-pill .pill-sicilia{ width:28px; height:auto; aspect-ratio:833/541;
  display:block; color:#fff;
  /* Due pixel più in basso del centro esatto. Geometricamente era centrata —
     ventuno di vuoto sopra e ventuno sotto — ma a occhio saliva: la Sicilia ha
     la punta a destra e il peso in basso, e l'occhio la legge più alta di
     dov'è. Si corregge dove si vede il problema, non dove sta il calcolo. */
  transform:translateY(2px); }
.sp-pill.active .icon-pill .pill-sicilia{ color:#fff; }

/* Il bottone del cielo: stessa forma di quello della musica, appena sopra.
   Due cose che riguardano COME stai guardando la pagina, nello stesso angolo. */
.fasi-btn{ bottom:calc(66px + env(safe-area-inset-bottom)); }

/* ═══════════════════════════════════════════════════════════════════════════
   IL CIELO, A CHE ORA — il foglio che si apre dal suo bottone
   ═══════════════════════════════════════════════════════════════════════════
   Stava in fondo al menu, dove il menu non c'entrava niente: un menu dice DOVE
   andare, non come dev'essere fatto il cielo. Qui è dietro il segno del sito,
   che è la cosa che il cielo lo disegna. Provvisorio, e va bene così: meglio in
   un posto che si capisce che in uno che non c'entra. */
.fs{ position:fixed; inset:0; z-index:1300; display:flex;
  align-items:flex-end; justify-content:center;
  background:rgba(3,10,22,.55); backdrop-filter:blur(2px); }
.fs[hidden]{ display:none; }

.fs-carta{ width:100%; max-width:520px;
  padding:1rem 1rem calc(1rem + env(safe-area-inset-bottom));
  border-radius:20px 20px 0 0;
  background:linear-gradient(160deg,#0b2440,#061426);
  border-top:1px solid rgba(255,255,255,.14); }

.fs-tit{ display:block; margin-bottom:.7rem; color:#fff;
  font-size:.95rem; font-weight:800; }

.fs-carta .ln-phase{ padding:0; }

.fs-ok{ width:100%; margin-top:1rem; padding:.7rem;
  border:0; border-radius:12px; cursor:pointer;
  background:rgba(255,255,255,.1); color:#fff;
  font-family:inherit; font-size:.85rem; font-weight:800; }