/* =============================================================
   Carte delle spiagge · foglio di stile condiviso
   Usato da ogni pagina regionale (Corsica, Puglia, …).
   Non contiene nulla di specifico di una regione: le uniche
   misure che cambiano sono due variabili, che ogni pagina
   ridefinisce nel proprio <style> in testa:

       :root{ --colonna-carta: 450px;            larghezza della colonna carta
              --telaio-h:      min(70vh,880px) } altezza del riquadro carta

   Regola pratica: --telaio-h ≈ --colonna-carta × (altezza/larghezza
   della regione). Corsica ≈ 1:2, Puglia ≈ 1:0,9.
   ============================================================= */

:root{
  --carta:#ffffff; --nebbia:#f4f9fc; --schiuma:#e6f2f9; --secca:#c9e5f3; --basso:#9ed4ea;
  --azzurro:#1786bd; --blu:#0c5b87; --profondo:#083c5c; --inchiostro:#0f3550; --grigio:#5f849c;
  --tratto:#cfe3ee; --terra:#f7f0dd; --terra-b:#cbb98e;
  --corallo:#dd5b45; --ambra:#cf8a13; --verde:#2f9772; --indaco:#6470c4;
  --display:"Fraunces",Georgia,serif;
  --testo:"Archivo",system-ui,-apple-system,"Segoe UI",sans-serif;
  --dati:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace;
  --ombra:0 1px 2px rgba(12,91,135,.06), 0 8px 24px -12px rgba(12,91,135,.22);
}
*{box-sizing:border-box}
/* «clip» e non «hidden»: hidden fa di body un contenitore di scorrimento, e
   dentro un contenitore di scorrimento «position:sticky» non si aggancia piu'
   in cima allo schermo — la barra della home scorreva via su ogni telefono.
   Clip taglia allo stesso modo senza creare lo scorrimento, e serve a tutte
   le larghezze da quando testata, barra e piede arrivano ai bordi dello
   schermo: quei margini negativi sconfinano di qualche pixel oltre la
   larghezza utile, ed e' quello sconfinamento che va tagliato. */
html,body{margin:0;padding:0;overflow-x:clip}
body{
  background:
    radial-gradient(1200px 600px at 12% -5%, #eaf5fb 0%, transparent 60%),
    linear-gradient(180deg,#fbfdfe 0%, #f2f8fc 100%);
  background-attachment:fixed;
  color:var(--inchiostro); font-family:var(--testo); font-size:15px; line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--azzurro)}
.guscio{max-width:1480px;margin:0 auto;padding:26px 20px 56px}

/* onde decorative in testata */
.testata{display:flex;flex-wrap:wrap;align-items:flex-end;gap:16px 34px;padding-bottom:18px;margin-bottom:18px;
  border-bottom:1px solid var(--tratto);position:relative}
.occhiello{font-family:var(--dati);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--azzurro);margin:0 0 8px}
h1{font-family:var(--display);font-variation-settings:"SOFT" 40,"WONK" 1,"opsz" 144;font-weight:400;
  font-size:clamp(30px,4.4vw,50px);line-height:.98;margin:0;letter-spacing:-.018em;color:var(--profondo)}
/* La seconda parte del titolo era in corsivo e di un altro colore. Ora è
   indistinguibile dalla prima: si legge come una frase sola. Il tag <em>
   resta perché nel testo il senso è quello. */
h1 em{font-style:normal;font-variation-settings:inherit;color:inherit}

/* ---------- ritorno alla carta d'insieme ---------- */
/* Presente su ogni pagina regionale, subito sopra il titolo: riporta a index.html,
   la carta d'Italia e Corsica da cui si scelgono le regioni. */
.ritorno{display:inline-flex;align-items:center;gap:7px;margin:0 0 10px;text-decoration:none;
  color:var(--grigio);background:var(--carta);border:1px solid var(--tratto);border-radius:999px;
  padding:4px 13px 4px 10px;font-family:var(--dati);font-size:10px;letter-spacing:.12em;
  text-transform:uppercase;transition:.16s}
.ritorno:hover,.ritorno:focus-visible{color:var(--azzurro);border-color:var(--basso);box-shadow:var(--ombra)}
/* Home page: lo stesso pulsante, con dentro il segno del sito. Il bordo
   sinistro si stringe perche' il quadratino porta gia' il suo margine. */
.ritorno.casa{padding:3px 14px 3px 4px;color:var(--profondo)}
.ritorno.casa .marchio{width:21px;height:21px;border-radius:6px;display:block;flex:none}
/* Sulle pagine regionali i ritorni sono due — al sito e al paese — e stanno
   sulla stessa riga, nell'ordine in cui si e' arrivati fin qui. */
.briciole{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0 0 10px}
.briciole .ritorno{margin:0}
.ritorno.vicino{color:var(--azzurro);border-color:var(--basso)}
.ritorno.vicino:hover{background:var(--schiuma)}

.strumenti{display:flex;flex-wrap:wrap;gap:16px 26px;align-items:flex-start;margin-bottom:18px}
.gruppo{display:flex;flex-direction:column;gap:8px}
.gruppo>span{font-family:var(--dati);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--grigio)}
.filtri{display:flex;flex-wrap:wrap;gap:6px;max-width:660px}
button.f{font-family:var(--testo);font-size:12.5px;font-weight:500;background:var(--carta);color:var(--blu);
  border:1px solid var(--tratto);border-radius:999px;padding:5px 12px;cursor:pointer;transition:.16s;
  display:inline-flex;align-items:center;gap:7px}
button.f:hover:not(.spenta){border-color:var(--basso);box-shadow:var(--ombra)}
/* Il filtro che in questa regione non puo' trovare niente. Non si nasconde:
   sapere che la voce esiste ma qui non e' compilata e' un'informazione. Ma non
   deve nemmeno sembrare premibile, perche' premerlo darebbe sempre zero. */
button.f.spenta{opacity:.42;color:var(--grigio);background:var(--nebbia);
  border-color:var(--tratto);border-style:dashed;cursor:not-allowed;box-shadow:none}
button.f.spenta .pt{filter:grayscale(1);opacity:.6}
button.f[aria-pressed="true"]{color:#fff;background:var(--azzurro);border-color:var(--azzurro)}
button.f .pt{width:8px;height:8px;border-radius:50%;flex:none}
button.f:focus-visible,.marker:focus-visible,input:focus-visible,li:focus-visible{outline:2px solid var(--ambra);outline-offset:2px}
.sel{font-family:var(--testo);font-size:12.5px;font-weight:500;color:var(--blu);background:var(--carta);
  border:1px solid var(--tratto);border-radius:999px;padding:6px 12px;cursor:pointer}
.sel:hover{border-color:var(--basso)}
.azzera{background:none;border:0;color:var(--grigio);font-family:var(--dati);font-size:11px;
  text-decoration:underline;text-underline-offset:3px;cursor:pointer;padding:6px 0}
.azzera:hover{color:var(--corallo)}

/* uniche misure che cambiano da regione a regione: la Corsica è stretta e alta,
   la Puglia quasi quadrata. Il resto del foglio di stile è condiviso. */
.impaginato{display:grid;grid-template-columns:minmax(330px,var(--colonna-carta,450px)) 1fr;gap:24px;align-items:start}
/* senza min-width:0 un elemento di griglia non scende sotto la larghezza minima del suo
   contenuto: basta una riga lunga nel blocco live per allargare tutta la pagina */
.impaginato>*,.pannello,.scheda,.live,.andamento,.giorni,.dati,.servizi,.tag{min-width:0;max-width:100%}
.dati div,.giorni div{min-width:0}
.dati dd{overflow-wrap:anywhere}
.azioni a,.azioni button{min-width:0}

/* ---------- collegamento spento ---------- */
/* Un pulsante che non porta da nessuna parte è peggio di un pulsante assente:
   qui resta al suo posto ma dichiara perché non si può premere. */
.azioni .spento,.riquadro h5 .spento{color:var(--secca);cursor:not-allowed;
  font-family:var(--dati);font-size:10px;letter-spacing:.06em;text-transform:uppercase}
.azioni .spento{flex:1 1 auto;background:#fff;border:1px dashed var(--tratto);box-shadow:none;
  padding:9px 12px;text-align:center}
.azioni .spento::after{content:""}
.riquadro h5 .spento{font-size:9px;text-transform:none;letter-spacing:0}
/* la data della panoramica, accanto al titolo del riquadro */
.riquadro h5 .quando{margin-left:auto;margin-right:8px;font-family:var(--dati);font-size:9px;
  text-transform:none;letter-spacing:0;color:var(--grigio);font-weight:400}

/* ---------- carta ---------- */
.carta-cont{background:var(--carta);border:1px solid var(--tratto);border-radius:10px;overflow:hidden;box-shadow:var(--ombra)}
.zone{display:flex;flex-wrap:wrap;gap:1px;background:var(--tratto);border-bottom:1px solid var(--tratto)}
.zone button{flex:1 1 auto;background:var(--nebbia);border:0;color:var(--grigio);font-family:var(--dati);
  font-size:9.5px;letter-spacing:.07em;text-transform:uppercase;padding:8px 7px;cursor:pointer;transition:.16s;white-space:nowrap}
.zone button:hover{color:var(--azzurro);background:var(--schiuma)}
.zone button[aria-pressed="true"]{color:#fff;background:var(--blu)}
.telaio{position:relative;height:var(--telaio-h,min(70vh,880px));min-height:400px;background:linear-gradient(180deg,#f6fbfd,#e9f4fa)}
.telaio:focus-visible{outline:2px solid var(--ambra);outline-offset:-2px}
svg.carta{display:block;width:100%;height:100%;touch-action:none;cursor:grab}
svg.carta.trascino{cursor:grabbing}
.comandi{position:absolute;right:10px;bottom:10px;display:flex;flex-direction:column;gap:6px;z-index:2}
.comandi button{width:34px;height:34px;border-radius:9px;border:1px solid var(--tratto);background:rgba(255,255,255,.95);
  color:var(--blu);font-size:18px;line-height:1;cursor:pointer;box-shadow:var(--ombra);
  display:flex;align-items:center;justify-content:center;transition:.14s;padding:0}
.comandi button:hover{background:var(--schiuma);color:var(--azzurro);border-color:var(--basso)}
.comandi button.fit{font-size:13px}
.comandi button.qui{font-size:15px}

/* ---------- dove sono ---------- */
/* L'alone chiaro è il margine d'errore dichiarato dal dispositivo, non un effetto:
   quando è grande vuol dire che la posizione è incerta davvero. */
.qui-segno{pointer-events:none}
.qui-alone{fill:rgba(23,134,189,.13);stroke:rgba(23,134,189,.32);stroke-width:1;vector-effect:non-scaling-stroke}
.qui-bordo{fill:#fff;stroke:rgba(8,60,92,.12);stroke-width:1;vector-effect:non-scaling-stroke}
.qui-punto{fill:var(--azzurro)}

/* Il messaggio è una striscia sottile in fondo alla carta, non un riquadro che
   la copre: compare scivolando da sotto e porta un pallino che richiama il segno. */
.avviso-qui{position:absolute;left:10px;right:10px;bottom:10px;z-index:3;
  display:flex;align-items:center;gap:10px;
  background:rgba(255,255,255,.97);border:1px solid var(--tratto);
  border-left:3px solid var(--azzurro);border-radius:10px;
  padding:9px 13px;font-size:12.5px;line-height:1.45;color:var(--profondo);
  box-shadow:0 4px 16px rgba(8,60,92,.13);animation:sali .22s ease-out}
.avviso-qui::before{content:"";flex:none;width:9px;height:9px;border-radius:50%;
  background:var(--azzurro);box-shadow:0 0 0 4px rgba(23,134,189,.18)}
.avviso-qui b{font-weight:600}
.avviso-qui[hidden]{display:none}
/* quando è un intoppo e non una notizia */
.avviso-qui.storto{border-left-color:#c2703f}
.avviso-qui.storto::before{background:#c2703f;box-shadow:0 0 0 4px rgba(194,112,63,.18)}
@keyframes sali{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.avviso-qui{animation:none}}
@media (max-width:700px){.avviso-qui{font-size:12px;padding:8px 11px;bottom:8px;left:8px;right:8px}}
/* ---------- legenda sotto la carta ---------- */
/* Due righe: in alto la misura del segno, in basso il suo colore. */
.legenda{margin:9px 0 0;padding:9px 12px;border:1px solid var(--tratto);
  border-radius:8px;background:var(--carta)}
.lg-riga{display:flex;flex-wrap:wrap;align-items:center;gap:5px 16px}
/* le misure stanno su una riga sola, i colori uno sotto l'altro */
.lg-riga.lg-colonna{flex-direction:column;align-items:flex-start;flex-wrap:nowrap;gap:5px}
.lg-riga+.lg-riga{margin-top:8px;padding-top:8px;border-top:1px solid var(--tratto)}
.lg-voce{display:inline-flex;align-items:center;gap:6px;font-family:var(--dati);
  font-size:10px;letter-spacing:.04em;color:var(--grigio);white-space:nowrap}
.lg-voce i{font-style:normal}
.lg-voce svg{flex:none;overflow:visible}
@media (max-width:700px){.lg-riga{gap:5px 12px}.lg-voce{font-size:9.5px;gap:5px}}

.bussola{position:absolute;left:10px;top:10px;font-family:var(--dati);font-size:9px;letter-spacing:.06em;
  color:var(--grigio);background:rgba(255,255,255,.85);border:1px solid var(--tratto);border-radius:7px;
  padding:4px 9px;pointer-events:none;z-index:2}
.terra{fill:var(--terra);stroke:var(--terra-b);stroke-width:1.2;stroke-linejoin:round;vector-effect:non-scaling-stroke}
/* Regioni non insulari: il contorno viene disegnato a parte, spezzato in costa vera
   e confine di terra, quindi il riempimento va lasciato senza bordo. */
.terra.nudo{stroke:none}
.costa{fill:none;stroke:var(--terra-b);stroke-width:1.2;stroke-linejoin:round;stroke-linecap:round;vector-effect:non-scaling-stroke}
.confine{fill:none;stroke:#c6b79a;stroke-width:1;stroke-dasharray:5 4;opacity:.7;vector-effect:non-scaling-stroke}
.vicina{fill:#e9e0cb;stroke:none}
.isolotto{fill:var(--terra);stroke:var(--terra-b);stroke-width:1;vector-effect:non-scaling-stroke}
.batim{fill:none;stroke:var(--basso);stroke-width:.8;vector-effect:non-scaling-stroke}
.griglia{stroke:var(--secca);stroke-width:.5;opacity:.65;vector-effect:non-scaling-stroke}
.cima{fill:none;stroke:#b9a276;stroke-width:1.1;vector-effect:non-scaling-stroke}
.eti-cima{font-family:var(--dati);fill:#a08a5e}
.paese-pt{fill:var(--profondo);opacity:.8}
.eti-paese{font-family:var(--dati);fill:var(--profondo);letter-spacing:.1em;text-transform:uppercase;opacity:.7}
.marker{cursor:pointer}
.marker .alone{fill:#fff;stroke-width:1.6}
.marker:hover .alone,.marker.attivo .alone{stroke-width:3}
.marker .nome{font-family:var(--testo);font-size:11px;font-weight:600;fill:var(--profondo);opacity:0;
  paint-order:stroke;stroke:rgba(255,255,255,.95);stroke-width:3.4px;stroke-linejoin:round;pointer-events:none;transition:opacity .15s}
/* Il nome si vede quando la carta è ingrandita, quando il segno è scelto
   o quando ci si passa sopra: tre condizioni, sempre le stesse. */
/* Il filo del callout: parte dal segno e arriva al nome quando il nome ha
   dovuto spostarsi. Compare e sparisce insieme al nome — un filo senza la sua
   scritta sarebbe un graffio sulla carta. */
.marker .guida{stroke:var(--profondo);stroke-width:.9px;opacity:0;
  vector-effect:non-scaling-stroke;pointer-events:none;transition:opacity .15s}
.carta.nomi .marker .nome,.marker:hover .nome,.marker.attivo .nome,.marker.eti .nome{opacity:1}
.carta.nomi .marker .guida,.marker:hover .guida,.marker.attivo .guida,.marker.eti .guida{opacity:.42}
.carta.nomi .marker.spento .guida{opacity:0}
.marker:hover .guida,.marker.attivo .guida{opacity:.75}
.carta.nomi .marker.spento .nome{opacity:0}
.marker.spento{opacity:.13;pointer-events:none}

.cerca{display:flex;align-items:center;gap:9px;border:1px solid var(--tratto);border-radius:10px;
  background:var(--carta);padding:9px 12px;box-shadow:var(--ombra)}
.cerca:focus-within{border-color:var(--basso);box-shadow:0 0 0 3px rgba(23,134,189,.10)}
.cerca .lente{flex:none;width:15px;height:15px;fill:none;stroke:var(--basso);stroke-width:1.9;stroke-linecap:round}
.cerca input{flex:1;background:none;border:0;color:var(--inchiostro);
  font-family:var(--dati);font-size:12.5px;letter-spacing:.01em;outline:none}
.cerca input::placeholder{color:#9ab7c6}
.cerca span{font-family:var(--dati);font-size:10px;color:var(--grigio);white-space:nowrap}
.tendina{display:block;background:none;border:0;color:var(--azzurro);font-size:15px;line-height:1;
  padding:4px 2px 4px 8px;cursor:pointer}
.elenco.chiuso{display:none}
.elenco{position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:30;max-height:min(58vh,420px);
  overflow-y:auto;border:1px solid var(--tratto);border-radius:10px;background:var(--carta);
  box-shadow:0 18px 40px -14px rgba(8,60,92,.45);scrollbar-width:thin;scrollbar-color:var(--basso) transparent}
.elenco::-webkit-scrollbar{width:8px}
.elenco::-webkit-scrollbar-thumb{background:var(--basso);border-radius:8px}
.elenco h4{position:sticky;top:0;margin:0;font-family:var(--dati);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--azzurro);background:var(--nebbia);padding:7px 13px;border-bottom:1px solid var(--tratto);z-index:1}
.elenco ul{list-style:none;margin:0;padding:0}
.elenco li{display:flex;align-items:center;gap:9px;padding:7px 13px;cursor:pointer;border-bottom:1px solid var(--tratto);font-size:13.5px}
.elenco li:hover,.elenco li.attivo{background:var(--schiuma);color:var(--blu)}
/* Il segno dell'elenco e' lo stesso della legenda — stessa taglia, stesso
   colore, e il quadratino dove la lunghezza non e' nota: chi ha guardato la
   carta ritrova nell'elenco i segni che ha appena imparato a leggere. */
.elenco li .pt{width:16px;height:16px;flex:none;overflow:visible}
.elenco li small{margin-left:auto;font-family:var(--dati);font-size:10px;color:var(--grigio)}

/* ---------- pannello ---------- */
.pannello{position:sticky;top:20px}
.scheda[hidden]{display:none}
.scheda{background:var(--carta);border:1px solid var(--tratto);border-radius:10px;overflow:hidden;box-shadow:var(--ombra)}
/* ===================== LA FINESTRA DELLA SCHEDA =======================
   Una zona sola di immagini, in cima. Parte dalla vista aerea — che c'e'
   sempre — e vado-foto.js ci mette sopra la prima fotografia appena l'ha.
   Il nome sta dentro, su un velo scuro: e' l'unica cosa che ne garantisce
   la leggibilita' sia su un'acqua bianca di sole sia su uno scoglio in
   ombra, e fa cominciare la scheda con una fotografia invece che con una
   tabella. */
.finestra{position:relative;aspect-ratio:3/2;overflow:hidden;background:#0d3b52;
  border-bottom:1px solid var(--tratto)}
.finestra>svg{display:block;width:100%;height:auto}
.finestra.con-foto{cursor:zoom-in}
/* la fotografia sta SOPRA la tela: cosi' scambiarle e' mostrare o nascondere
   una cosa sola, e sotto la vista aerea resta pronta senza ricaricarsi */
.fin-foto{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1}
.fin-foto[hidden]{display:none}
/* il mirino indica il punto della spiaggia sulla carta: su una fotografia non
   vuol dire niente, quindi sparisce insieme alla vista aerea */
.finestra.con-foto .mirino{display:none}
.fin-velo{position:absolute;inset:auto 0 0 0;height:58%;z-index:2;pointer-events:none;
  background:linear-gradient(to top,rgba(5,28,44,.88) 0%,rgba(5,28,44,.46) 42%,rgba(5,28,44,0) 100%)}
.fin-sopra{position:absolute;inset:auto 0 0 0;z-index:3;padding:15px 17px 14px;color:#fff;
  pointer-events:none}
.fin-sopra h2{font-family:var(--display);font-variation-settings:"SOFT" 40,"WONK" 1,"opsz" 96;
  font-weight:400;font-size:clamp(23px,3.2vw,32px);line-height:1.02;margin:0;
  letter-spacing:-.018em;color:#fff;text-shadow:0 1px 12px rgba(0,0,0,.38)}
/* il rientro a destra tiene la riga lontana dal collegamento a Google, che sta
   nello stesso angolo: senza, su una scheda stretta le due scritte si
   accavallavano */
.fin-dove{font-family:var(--dati);font-size:9.5px;letter-spacing:.09em;text-transform:uppercase;
  margin:6px 0 0;padding-right:200px;color:rgba(255,255,255,.88);
  text-shadow:0 1px 8px rgba(0,0,0,.45)}
.fin-mosse{position:absolute;right:9px;top:9px;z-index:4;display:flex;align-items:center;gap:6px}
.fin-mosse .stella{font-size:17px;line-height:1;width:32px;height:32px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;flex:none;margin:0;
  background:rgba(8,60,92,.5);border:1px solid rgba(255,255,255,.45);color:#fff;
  backdrop-filter:blur(3px);cursor:pointer}
.fin-mosse .stella.on{background:#fff;border-color:#fff;color:var(--ambra)}
.fin-mosse .manda{width:32px;height:32px;border-radius:50%;flex:none;margin:0;padding:0;
  display:flex;align-items:center;justify-content:center;
  background:rgba(8,60,92,.5);border:1px solid rgba(255,255,255,.45);color:#fff;
  backdrop-filter:blur(3px);cursor:pointer}
.fin-mosse .manda svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round}
.fin-mosse .lucchetto{position:static;right:auto;top:auto;padding:6px 11px;backdrop-filter:blur(3px)}
.fin-credito{position:absolute;left:11px;bottom:auto;top:11px;z-index:3;max-width:60%;
  font-family:var(--dati);font-size:8.5px;letter-spacing:.06em;color:rgba(255,255,255,.82);
  background:rgba(5,28,44,.42);padding:3px 8px;border-radius:99px;backdrop-filter:blur(3px)}
.fin-apri{position:absolute;right:11px;bottom:12px;z-index:4;font-family:var(--dati);font-size:9px;
  letter-spacing:.08em;text-transform:uppercase;color:#fff;text-decoration:none;
  background:rgba(8,60,92,.55);border:1px solid rgba(255,255,255,.45);
  padding:4px 10px;border-radius:999px;transition:.15s}
.fin-apri:hover,.fin-apri:focus-visible{background:var(--azzurro);border-color:#fff}

/* ---------------------------------------------------------- i provini
   Fondo scuro, come la pellicola: stacca dalla scheda bianca e non compete
   con le fotografie, che sono la cosa da guardare. */
.provini{display:flex;gap:6px;padding:8px 10px;background:#082a3f;overflow-x:auto;
  scrollbar-width:thin}
.provini::-webkit-scrollbar{height:5px}
.provini::-webkit-scrollbar-thumb{background:rgba(255,255,255,.25);border-radius:99px}
.prov-t{flex:0 0 64px;height:46px;border-radius:5px;overflow:hidden;position:relative;
  border:2px solid transparent;padding:0;cursor:pointer;background:#0d3b52;transition:border-color .14s}
.prov-t.on{border-color:#fff}
.prov-t:hover{border-color:rgba(255,255,255,.55)}
.prov-t:focus-visible{outline:2px solid var(--ambra);outline-offset:1px}
.prov-t img{width:100%;height:100%;object-fit:cover;display:block}
.prov-t.attesa{border-color:var(--ambra);border-style:dashed}
.prov-tela{position:absolute;inset:0;display:block;overflow:hidden}
.prov-tela img{position:absolute;width:25%;height:37.4817%;object-fit:cover}
.prov-tela img.ortofoto{inset:0;width:100%;height:100%}
.prov-aerea i{position:absolute;inset:auto 0 0 0;font-style:normal;font-family:var(--dati);
  font-size:6.5px;letter-spacing:.09em;text-transform:uppercase;color:#fff;
  background:rgba(5,28,44,.72);padding:2px 0;text-align:center}
.prov-piu{background:transparent;border:1px dashed rgba(255,255,255,.45);color:rgba(255,255,255,.8);
  font-size:19px;line-height:1;display:flex;align-items:center;justify-content:center;flex:0 0 40px}
.prov-piu:hover{border-color:#fff;color:#fff;background:rgba(255,255,255,.08)}

/* nessuna fotografia: una riga che spiega che cosa si sta guardando */
.fin-senza{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:11px 14px;
  background:var(--nebbia);border-bottom:1px solid var(--tratto)}
.fin-senza p{margin:0;font-size:12.5px;line-height:1.5;color:#20536e;flex:1 1 220px}
.fin-manda{font-family:var(--dati);font-size:9.5px;letter-spacing:.09em;text-transform:uppercase;
  background:var(--carta);border:1px dashed var(--basso);color:var(--blu);border-radius:999px;
  padding:7px 14px;cursor:pointer;white-space:nowrap}
.fin-manda:hover{border-style:solid;background:var(--schiuma)}
.fin-fuori{font-family:var(--dati);font-size:9.5px;letter-spacing:.06em;color:var(--grigio);white-space:nowrap}

@media (max-width:620px){
  .fin-sopra{padding:12px 13px 11px}
  .fin-dove{padding-right:0;font-size:9px}
  .fin-mosse .lucchetto{display:none}   /* fissare la scheda serve col mouse */
  /* lo stesso collegamento e' il primo pulsante subito sotto: sulla finestra
     stretta ruberebbe la riga del comune per ripetere una cosa che c'e' gia' */
  .fin-apri{display:none}
  .prov-t{flex:0 0 56px;height:40px}
}

.vetrina{position:relative;aspect-ratio:3/2;overflow:hidden;background:#0d3b52;border-bottom:1px solid var(--tratto)}
.vetrina>svg{display:block;width:100%;height:auto}
.tela{position:absolute;inset:0}
.tela img{position:absolute;width:25%;height:37.4817%;object-fit:cover}
/* Il ritaglio ufficiale riempie il riquadro da solo: non e' un pezzo di
   mosaico, quindi non segue le percentuali delle tessere. */
.tela img.ortofoto{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.mirino{position:absolute;left:50%;top:50%;width:32px;height:32px;margin:-16px 0 0 -16px;border:2px solid #fff;
  border-radius:50%;box-shadow:0 0 0 2px rgba(8,60,92,.5),0 0 16px rgba(0,0,0,.4);pointer-events:none}
.mirino::after{content:"";position:absolute;left:50%;top:50%;width:5px;height:5px;margin:-2.5px;background:#fff;border-radius:50%}
.lucchetto{position:absolute;right:9px;top:9px;z-index:2;font-family:var(--dati);font-size:9.5px;letter-spacing:.07em;
  text-transform:uppercase;border:1px solid rgba(255,255,255,.5);background:rgba(8,60,92,.5);color:#fff;
  padding:5px 11px;border-radius:999px;cursor:pointer;transition:.15s}
.lucchetto:hover{background:rgba(8,60,92,.78)}
.lucchetto.on{background:#fff;color:var(--profondo);border-color:#fff;font-weight:600}
.sat-eti i{display:block;font-style:normal;font-size:8px;opacity:.72;letter-spacing:.05em}
.sat-eti{position:absolute;left:10px;bottom:8px;font-family:var(--dati);font-size:9px;letter-spacing:.08em;
  text-transform:uppercase;color:#fff;background:rgba(8,60,92,.5);padding:3px 8px;border-radius:4px}
/* La foto porta dove porta «Foto e recensioni». L'etichetta in basso a destra
   non aspetta il passaggio del mouse: se comparisse solo al passaggio, sul
   telefono — dove il mouse non c'e' — nessuno saprebbe mai che si puo' premere. */
.apri-foto{position:absolute;inset:0;z-index:1;display:block;text-decoration:none}
.apri-foto>span{position:absolute;right:9px;bottom:8px;font-family:var(--dati);font-size:9px;
  letter-spacing:.08em;text-transform:uppercase;color:#fff;background:rgba(8,60,92,.55);
  border:1px solid rgba(255,255,255,.45);padding:3px 9px;border-radius:999px;transition:.15s}
.apri-foto:hover>span,.apri-foto:focus-visible>span{background:var(--azzurro);border-color:#fff}
.apri-foto:focus-visible{outline:2px solid var(--ambra);outline-offset:-3px}
.vetrina-veduta{position:relative;display:block;text-decoration:none}
.vetrina-veduta>svg{display:block;width:100%;height:auto}
.vetrina-veduta>span{position:absolute;right:9px;bottom:8px;font-family:var(--dati);font-size:9px;
  letter-spacing:.08em;text-transform:uppercase;color:#fff;background:rgba(8,60,92,.55);
  border:1px solid rgba(255,255,255,.45);padding:3px 9px;border-radius:999px;transition:.15s}
.vetrina-veduta:hover>span{background:var(--azzurro);border-color:#fff}
/* Erano quattro strisce bianche divise da un filo: sembravano righe di una
   tabella, non cose da premere. Ora hanno la forma che ha un pulsante — bordo,
   angoli tondi, un po' d'ombra, e stanno su un fondo diverso dal proprio, che
   e' quel che li stacca dalla scheda. La freccia dice quali portano fuori. */
.azioni{display:flex;flex-wrap:wrap;gap:7px;background:var(--nebbia);padding:10px 12px;
  border-bottom:1px solid var(--tratto)}
.azioni a,.azioni button{flex:1 1 auto;background:#fff;border:1px solid var(--basso);border-radius:999px;
  color:var(--blu);font-family:var(--dati);font-size:10.5px;letter-spacing:.07em;text-transform:uppercase;
  padding:9px 12px;text-align:center;cursor:pointer;text-decoration:none;box-shadow:var(--ombra);
  transition:transform .13s,background .15s,border-color .15s,color .15s}
.azioni a[target="_blank"]::after{content:" ↗";opacity:.65}
.azioni a:hover,.azioni button:hover{background:var(--schiuma);border-color:var(--azzurro);
  color:var(--azzurro);transform:translateY(-1px)}
.azioni a:active,.azioni button:active{transform:translateY(0)}
.azioni .primaria{background:var(--profondo);border-color:var(--profondo);color:#fff}
.azioni .primaria:hover{background:var(--azzurro);border-color:var(--azzurro);color:#fff}
.credito{padding:6px 12px;font-family:var(--dati);font-size:9.5px;color:var(--grigio);background:var(--nebbia);
  border-top:1px solid var(--tratto);line-height:1.4}
.credito a{color:var(--azzurro);text-decoration:none;border-bottom:1px dotted}

/* ---- sottopagina ---- */
.velo{position:fixed;inset:0;background:rgba(8,60,92,.5);backdrop-filter:blur(4px);z-index:60;
  display:flex;align-items:flex-start;justify-content:center;padding:22px 14px;overflow:auto}
.foglio{background:#fff;border-radius:12px;max-width:1080px;width:100%;overflow:hidden;
  box-shadow:0 32px 80px -18px rgba(8,60,92,.55)}
.foglio-testa{display:flex;align-items:center;gap:14px;padding:14px 18px;border-bottom:1px solid var(--tratto);
  background:linear-gradient(180deg,#fff,#f2f9fc);position:sticky;top:0;z-index:3}
.foglio-testa h3{font-family:var(--display);font-variation-settings:"SOFT" 30,"WONK" 1;font-weight:400;
  font-size:25px;margin:0 0 2px;color:var(--profondo);line-height:1.05}
.chiudi{margin-left:auto;background:#fff;border:1px solid var(--tratto);border-radius:8px;width:34px;height:34px;
  font-size:18px;line-height:1;cursor:pointer;color:var(--grigio);flex:none}
.chiudi:hover{color:var(--corallo);border-color:var(--corallo)}
.riquadri{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--tratto);border-bottom:1px solid var(--tratto)}
.riquadro{background:#fff;display:flex;flex-direction:column}
.riquadro h5{margin:0;font-family:var(--dati);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--azzurro);padding:9px 14px;border-bottom:1px solid var(--tratto);display:flex;gap:8px;align-items:center}
.riquadro h5 a{margin-left:auto;text-transform:none;letter-spacing:0;font-size:10px;text-decoration:none}
.riquadro iframe{display:block;width:100%;height:330px;border:0;background:var(--schiuma)}
.foglio-corpo{padding:18px}
.avviso{padding:9px 14px;font-family:var(--dati);font-size:10px;color:var(--grigio);background:var(--nebbia);
  border-top:1px solid var(--tratto);line-height:1.6}
@media(max-width:820px){.riquadri{grid-template-columns:1fr}.riquadro iframe{height:280px}}

.corpo{padding:19px 21px 21px}
.riga-titolo{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:13px}
.corpo h2{font-family:var(--display);font-variation-settings:"SOFT" 30,"WONK" 1,"opsz" 100;font-weight:400;
  font-size:30px;line-height:1.02;margin:0 0 5px;color:var(--profondo);letter-spacing:-.012em}
.sotto{font-family:var(--dati);font-size:11px;color:var(--grigio)}
.zona{font-family:var(--dati);font-size:10px;color:var(--azzurro);letter-spacing:.12em;text-transform:uppercase;
  flex:none;padding-top:5px;text-align:right;max-width:130px;line-height:1.4}
.badge-accesso{display:inline-flex;align-items:center;gap:9px;border-radius:6px;padding:9px 13px;margin-bottom:16px;
  font-size:13.5px;font-weight:500;line-height:1.3}
.badge-accesso .glifo{font-family:var(--dati);font-size:10.5px;letter-spacing:.1em;opacity:.8}

/* ---------- blocco live ---------- */
.live{border:1px solid var(--tratto);border-radius:8px;overflow:hidden;margin-bottom:17px;background:linear-gradient(180deg,#f8fcfe,#eef7fc)}
.live-testa{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 12px;
  background:var(--blu);color:#fff}
.live-testa span{font-family:var(--dati);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase}
.pulse{display:inline-block;width:7px;height:7px;border-radius:50%;background:#6ff0c0;margin-right:7px;
  box-shadow:0 0 0 0 rgba(111,240,192,.7);animation:battito 2.2s infinite}
@keyframes battito{0%{box-shadow:0 0 0 0 rgba(111,240,192,.6)}70%{box-shadow:0 0 0 7px rgba(111,240,192,0)}100%{box-shadow:0 0 0 0 rgba(111,240,192,0)}}
/* ---------- l'andamento della giornata ---------- */
/* Il disegno ha una larghezza sua: sul telefono si scorre invece di schiacciarsi,
   altrimenti le diciassette ore diventerebbero illeggibili. */
.andamento{background:#fff;padding:10px 6px 4px;overflow-x:auto;-webkit-overflow-scrolling:touch}
svg.grafico{display:block;width:100%;min-width:520px;height:auto}
.g-temp{fill:none;stroke:#dd7a45;stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.g-punto{fill:#dd7a45}
.g-onda{fill:rgba(23,134,189,.22);stroke:#1786bd;stroke-width:1.4;stroke-linejoin:round}
.g-pioggia{fill:rgba(110,170,210,.16)}
.g-freccia{fill:#5f849c}
.g-riga{stroke:var(--tratto);stroke-width:1}
.g-valore{font-family:var(--dati);font-size:10px;fill:var(--profondo)}
.g-mini{font-family:var(--dati);font-size:8.5px;fill:var(--grigio)}
.g-ora{font-family:var(--dati);font-size:9px;fill:var(--grigio)}
.g-corsia{font-family:var(--dati);font-size:8.5px;letter-spacing:.1em;
  text-transform:uppercase;fill:var(--secca)}
/* la riga verticale dell'ora corrente */
.g-adesso{stroke:#dd7a45;stroke-width:1;stroke-dasharray:3 3;opacity:.55}
.sintesi{padding:9px 12px;font-size:13px;border-top:1px solid var(--tratto);display:flex;align-items:center;gap:9px}
.sintesi b{font-weight:600}
/* lo stato del mare accanto alla sintesi, separato da un punto mediano */
.mare-stato{color:var(--grigio)}
.mare-stato i{font-style:normal;font-family:var(--dati);font-size:9.5px;letter-spacing:.05em;
  text-transform:uppercase;color:var(--secca);margin-left:5px}
.mare-stato::before{content:'·';margin:0 6px;color:var(--secca)}
.pallino{width:10px;height:10px;border-radius:50%;flex:none}
.giorni{display:grid;grid-template-columns:repeat(7,1fr);gap:1px;background:var(--tratto);border-top:1px solid var(--tratto)}
/* Ogni giorno ha sempre cinque celle — sigla, cielo, temperature, onda, vento — anche
   quando manca la probabilità di pioggia. Prima la percentuale era una cella in più e
   mandava a capo la griglia del telefono: temperature e pioggia finivano sovrapposte. */
.giorni div{background:#fff;padding:9px 4px;text-align:center;
  display:flex;flex-direction:column;align-items:center;gap:3px}
.giorni b{font-family:var(--dati);font-size:9px;letter-spacing:.08em;text-transform:uppercase;color:var(--grigio)}
.giorni .ic{display:flex;flex-direction:column;align-items:center;gap:1px;line-height:1}
/* flex:none o la percentuale di pioggia accanto schiaccia l'icona fino a farla sparire */
.giorni .ic svg{width:22px;height:22px;display:block;margin:0;flex:none}
.giorni .pio{font-family:var(--dati);font-style:normal;font-size:9px;color:#4f9bd0}
.giorni .t{font-size:13px;font-weight:600;color:var(--profondo);white-space:nowrap}
.giorni .t i{font-style:normal;font-weight:400;color:var(--grigio)}
.giorni .o{font-family:var(--dati);font-size:9.5px;color:var(--azzurro);white-space:nowrap}
/* velocità e unità sulla prima riga, direzione sulla seconda: nelle sette colonne
   strette del desktop tutto su una riga si accavallava */
.giorni .vento{font-family:var(--dati);font-size:9.5px;color:#5f849c;line-height:1.3;
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:1px 4px}
.giorni .vento svg{width:10px;height:10px;flex:none;margin:0}
.giorni .vento b{color:var(--profondo);font-weight:600;font-size:10.5px;letter-spacing:0}
.giorni .vento u{text-decoration:none;font-size:8.5px;opacity:.7}
.giorni .vento .dir{flex:0 0 100%;font-size:8.5px;letter-spacing:.08em;opacity:.85}
.cam{display:flex;align-items:center;gap:9px;padding:9px 12px;border-top:1px solid var(--tratto);background:#fff;font-size:12.5px}
.cam a{font-weight:600;text-decoration:none}
.cam .dist{font-family:var(--dati);font-size:10px;color:var(--grigio);margin-left:auto;white-space:nowrap}
.live-nota{padding:7px 12px;font-family:var(--dati);font-size:9.5px;color:var(--grigio);border-top:1px solid var(--tratto);background:var(--nebbia)}
.live-nota a{color:var(--azzurro);text-decoration:none;border-bottom:1px dotted}

.dati{display:grid;grid-template-columns:repeat(auto-fit,minmax(118px,1fr));gap:1px;background:var(--tratto);
  border:1px solid var(--tratto);border-radius:8px;overflow:hidden;margin-bottom:17px}
.dati div{background:#fff;padding:9px 11px}
.dati dt{font-family:var(--dati);font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--grigio);margin:0 0 3px}
.dati dd{margin:0;font-size:13px;color:var(--inchiostro)}
.titoletto{font-family:var(--dati);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--azzurro);
  margin:0 0 9px;display:flex;align-items:center;gap:10px}
.titoletto::after{content:"";flex:1;height:1px;background:var(--tratto)}
.servizi{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:17px}
.sv{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--tratto);border-radius:6px;padding:5px 10px 5px 8px;font-size:12.5px;line-height:1;background:#fff}
.sv svg{width:16px;height:16px;flex:none;fill:none;stroke:currentColor;stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round}
.sv.si{color:var(--verde);border-color:#b6e0cd;background:#f0faf6}
.sv.forse{color:var(--ambra);border-color:#f0dcb0;background:#fdf8ee}
.sv.no{color:#9fb6c3;border-color:#e2ecf2}
.sv.no .lab{text-decoration:line-through}
.sv .st{font-family:var(--dati);font-size:9px;opacity:.85}
.nota{border-left:3px solid var(--basso);padding:2px 0 2px 14px;margin:0 0 17px;font-size:14px;color:#20536e}
.tag{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:17px}
.tag span{font-family:var(--dati);font-size:10.5px;border:1px dashed var(--basso);color:var(--blu);border-radius:4px;padding:4px 9px;background:var(--nebbia)}
.vai{display:inline-flex;align-items:center;gap:9px;font-family:var(--dati);font-size:11.5px;letter-spacing:.08em;
  text-transform:uppercase;color:#fff;background:var(--profondo);text-decoration:none;padding:10px 16px;border-radius:6px;transition:.16s}
.vai:hover{background:var(--azzurro)}

.avvertenza{margin-top:18px;padding:12px 15px;border:1px solid var(--tratto);border-left:3px solid var(--ambra);
  border-radius:8px;background:var(--nebbia);font-family:var(--dati);font-size:10.5px;
  line-height:1.75;color:var(--grigio)}
.avvertenza b{display:block;margin-bottom:4px;color:var(--profondo);font-family:var(--dati);font-size:10px;
  letter-spacing:.13em;text-transform:uppercase;font-weight:500}
/* Crediti e licenze: presenti nella pagina ma resi del colore dello sfondo.
   Restano leggibili al passaggio del mouse, selezionabili e letti dagli screen reader. */
.piede{margin-top:20px;font-family:var(--dati);font-size:11px;line-height:1.75;
  color:transparent;transition:color .25s}
.piede a{color:inherit;border-bottom:0;text-decoration:none}
.piede:hover,.piede:focus-within{color:var(--grigio)}
.piede:hover a,.piede:focus-within a{color:var(--azzurro)}

@media (max-width:960px){
  .guscio{padding:18px 13px 40px}
  .impaginato{grid-template-columns:1fr;gap:16px}
  /* la colonna sparisce come contenitore: carta, scheda ed elenco diventano riordinabili */
  .colonna-carta{display:contents}
  .carta-cont{order:1}
  .pannello{order:2;position:static}
  .elenco{max-height:56vh}
  .telaio{height:48vh;min-height:300px}
  /* una passata verticale del dito scorre la pagina; due dita zoomano la carta */
  .filtri{max-width:none}
  .azioni a,.azioni button{flex:1 1 45%}
}
@media (max-width:700px){
  h1{font-size:31px}
  /* le previsioni diventano righe: si leggono senza tagli e si scorrono con la pagina */
  .giorni{display:flex;flex-direction:column}
  /* Cinque colonne sempre, così le celle non scivolano da una riga all'altra.
     Le larghezze hanno un minimo e poi cedono: su uno schermo da 320 px la riga sta
     dentro lo stesso, e se qualcosa non ci sta va a capo dentro la propria cella. */
  .giorni div{display:grid;align-items:center;gap:0 8px;text-align:left;padding:10px 12px;
    grid-template-columns:38px 28px minmax(44px,1fr) minmax(38px,auto) minmax(56px,auto)}
  /* Sul telefono la colonna dell'icona è stretta: cielo e pioggia restano incolonnati,
     mai affiancati, altrimenti l'icona si riduce a pochi pixel. */
  .giorni .ic{flex-direction:column;align-items:center;justify-content:center;gap:0}
  .giorni .pio{font-size:8px}
  .giorni .t{font-size:12.5px;white-space:normal}
  .giorni .o{text-align:right}
  .giorni .vento{justify-content:flex-end;text-align:right}
  .giorni .vento .dir{flex:none}
  .sintesi{flex-wrap:wrap;gap:6px}
  .cam{flex-wrap:wrap}
  .cam a{overflow-wrap:anywhere}
  .cam .dist{margin-left:0;flex:0 0 100%;white-space:normal}
  .corpo{padding:16px 15px 18px}
  .corpo h2{font-size:25px}
  .riga-titolo{flex-direction:column;gap:6px}
  .zona{text-align:left;max-width:none;padding-top:0}
}
/* ---------- insegna del sito e firma ---------- */
/* Si chiama «insegna» e non «marchio» perche' .marchio e' gia' preso: e' il
   quadratino dentro il pulsante Home page (riga 60). Due classi con lo stesso
   nome e scopi diversi non danno errore, danno un guaio silenzioso. */
.insegna{display:inline-flex;align-items:center;gap:9px;margin:0 0 10px;font-family:var(--dati);
  font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--azzurro)}
.insegna svg{flex:none;width:26px;height:12px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round}
.firma{display:flex;align-items:center;justify-content:center;gap:11px;flex-wrap:wrap;
  margin:38px 0 0;padding-top:20px;border-top:1px solid var(--tratto);
  font-family:var(--dati);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--grigio)}
.firma b{color:var(--azzurro);font-weight:400}
.firma span{letter-spacing:.05em;text-transform:none;font-size:10.5px}
.firma svg{flex:none;width:26px;height:12px;fill:none;stroke:var(--basso);stroke-width:1.7;stroke-linecap:round}

/* ---------- ricerca in testata ---------- */
.ricerca{position:relative;margin-left:auto;flex:1 1 300px;max-width:420px;min-width:240px}
@media (max-width:700px){.ricerca{margin-left:0;max-width:none}}

.giorni div[data-g]{cursor:pointer;transition:background .14s}
.giorni div[data-g]:hover{background:var(--nebbia)}
.giorni div.scelto{background:var(--schiuma);box-shadow:inset 0 2px 0 var(--azzurro)}

/* ---------- il cursore delle ore ---------- */
.tempo{display:flex;align-items:center;gap:10px;padding:8px 12px;border-top:1px solid var(--tratto);
  background:var(--nebbia);font-family:var(--dati);font-size:10px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--grigio)}
.tempo[hidden]{display:none}
.tempo input[type=range]{flex:1;min-width:0;accent-color:var(--azzurro);height:18px;cursor:pointer}
.tempo .ora{color:var(--profondo);letter-spacing:.05em;text-transform:none;
  font-size:11px;min-width:82px;text-align:right}
.tempo button{background:none;border:1px solid var(--tratto);border-radius:999px;color:var(--azzurro);
  font-family:var(--dati);font-size:9px;letter-spacing:.1em;text-transform:uppercase;
  padding:4px 9px;cursor:pointer;transition:.16s}
.tempo button:hover{border-color:var(--basso);background:var(--carta)}
.tempo button[hidden]{display:none}
@media (max-width:700px){.tempo{gap:7px;padding:7px 10px}.tempo label{display:none}.tempo .ora{min-width:70px;font-size:10.5px}}

/* ---------- onda e vento sulla carta ---------- */
.comandi button[aria-pressed="true"]{background:var(--azzurro);color:#fff;border-color:var(--azzurro)}
.comandi button.clima svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round}
.cl{pointer-events:none}
.cl-onda{fill:none;stroke:currentColor;stroke-width:2.3;stroke-linecap:round;
  vector-effect:non-scaling-stroke;opacity:.9}
.onda-g path{animation:ondeggia 2.8s ease-in-out infinite;animation-delay:var(--rit,0s);
  transform-box:fill-box;transform-origin:center}
@keyframes ondeggia{0%,100%{transform:translateY(0)}50%{transform:translateY(calc(-1 * var(--amp,2.2px)))}}
.cl-scia{stroke:currentColor;stroke-width:2.4;stroke-linecap:round;vector-effect:non-scaling-stroke;
  stroke-dasharray:5 13;animation-name:scorri;animation-timing-function:linear;animation-iteration-count:infinite;opacity:.92}
@keyframes scorri{from{stroke-dashoffset:18}to{stroke-dashoffset:0}}
.cl-punta{fill:currentColor;opacity:.92}
.cl-eti{font-family:var(--dati);font-size:9.5px;fill:currentColor;letter-spacing:.04em;
  paint-order:stroke;stroke:rgba(255,255,255,.92);stroke-width:2.6px;stroke-linejoin:round}
/* In basso a sinistra: in alto a destra copriva i pulsanti dello zoom, che con
   tre strati sono diventati sei e occupano tutta la colonna. */
.clima-eti{position:absolute;left:10px;bottom:10px;z-index:2;max-width:min(52%,250px);
  background:rgba(255,255,255,.95);border:1px solid var(--tratto);border-radius:9px;
  padding:6px 9px;font-family:var(--dati);font-size:8.5px;letter-spacing:.03em;color:var(--grigio);
  box-shadow:var(--ombra);pointer-events:none;line-height:1.55}
.clima-eti[hidden]{display:none}
.clima-eti b{display:block;font-weight:400;color:var(--profondo);letter-spacing:.1em;
  text-transform:uppercase;margin-bottom:1px}
.clima-eti i{font-style:normal;display:inline-flex;align-items:center;gap:3px;margin-right:7px;white-space:nowrap}
.clima-eti i::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--pal,#ccc)}
@media (max-width:700px){.clima-eti{font-size:8.5px;padding:6px 8px;left:8px;bottom:8px}}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* --- bandierine di stato e regione --- */
.bandiere{display:inline-flex;align-items:center;gap:5px;vertical-align:middle;flex:0 0 auto}
.bandiera{display:block;height:15px;width:auto;max-width:24px;border-radius:2px;background:#fff;
  box-shadow:0 0 0 .5px rgba(8,60,92,.30), 0 1px 2px rgba(8,60,92,.14)}
h1 .bandiere{gap:7px;margin-left:.36em;vertical-align:middle;position:relative;top:-.04em}
h1 .bandiera{height:.46em;max-width:none;border-radius:.05em;
  box-shadow:0 0 0 .022em rgba(8,60,92,.30), 0 .03em .06em rgba(8,60,92,.14)}
@media (max-width:520px){ h1 .bandiera{height:.5em} }

/* --- Bandiera Blu --- */
/* La targhetta della Bandiera Blu si stacca dalle altre: bordo pieno e fondo azzurro,
   perché è un riconoscimento ufficiale, non una caratteristica come "dune" o "surf". */
.tag span.bb{border-style:solid;border-color:var(--azzurro);background:var(--azzurro);
  color:#fff;font-weight:500;letter-spacing:.02em}
/* Sulla carta: una bandierina sotto il segno, non un anello — così non litiga
   col colore dell'accesso né con la forma che dice la lunghezza. */
.marker .bandierina{fill:var(--azzurro);stroke:#fff;stroke-width:.55;paint-order:stroke;
  stroke-linejoin:round}
.marker.spento .bandierina{opacity:.25}
button.f[data-s="bb"]{border-color:var(--basso);color:var(--azzurro)}
button.f[data-s="bb"][aria-pressed="true"]{background:var(--azzurro);border-color:var(--azzurro);color:#fff}

/* --- dati che non abbiamo --- */
/* Quadratino al posto del cerchio: il raggio dei marker misura la lunghezza della
   spiaggia, quindi quando non la sappiamo non possiamo disegnare un cerchio senza
   mentire. Il quadratino ha una taglia sola e dichiara di non saperlo. */
.marker .alone-q{fill:#fff;stroke-width:1.6}
.marker:hover .alone-q,.marker.attivo .alone-q{stroke-width:3}
/* Servizio non rilevato: non è un "no". Tratteggio, nessuna barratura. */
.sv.nc{color:#93a6b3;border-color:#e4ecf1;border-style:dashed}
.sv.nc .lab{text-decoration:none}
.sv.nc svg{opacity:.55}
.sv .st{font-family:var(--dati);font-size:9px;letter-spacing:.04em;opacity:.8;margin-left:5px}

/* Quando due spiagge finiscono nello stesso punto della carta, la scheda lo
   dice: senza questa riga il clic che passa da una all'altra sembra un
   difetto invece che una scelta. */
.corpo .grappolo{margin:.35rem 0 0;padding:6px 9px;border-left:3px solid var(--azzurro);
  background:#f2f9fc;font-size:.78rem;line-height:1.45;color:var(--profondo)}
.corpo .grappolo b{font-weight:700}
/* I nomi delle spiagge nascoste sotto lo stesso segno: si leggono e si
   premono, cosi' non c'e' piu' niente da spiegare. */
.corpo .grappolo .vicina{display:inline-block;margin:4px 4px 0 0;padding:3px 9px;
  border:1px solid var(--basso);border-radius:999px;background:#fff;color:var(--blu);
  font-family:inherit;font-size:.95em;line-height:1.3;cursor:pointer;transition:.14s}
.corpo .grappolo .vicina:hover{background:var(--azzurro);border-color:var(--azzurro);color:#fff}
.corpo .grappolo .vicina:focus-visible{outline:2px solid var(--azzurro);outline-offset:2px}
.corpo .grappolo span{display:block;margin-top:5px;color:var(--grigio);font-size:.92em}


/* ---------- entrare, uscire, iscriversi ----------
   La finestrella e' un <dialog>: il browser sa gia' metterlo sopra a tutto,
   chiuderlo col tasto Esc e togliere il fuoco al resto della pagina. Rifarlo a
   mano con un div sarebbe stato piu' codice e meno accessibile. */
.conto{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
a.conto-chi{text-decoration:none;transition:.15s}
a.conto-chi:hover{color:var(--azzurro)}
.conto-chi{font-family:var(--dati);font-size:10.5px;letter-spacing:.04em;color:var(--grigio);
  max-width:22ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.conto-entra,.conto-esci{font-family:var(--dati);font-size:10px;letter-spacing:.12em;
  text-transform:uppercase;cursor:pointer;border-radius:999px;padding:6px 15px;transition:.16s}
.conto-entra{background:var(--profondo);color:#fff;border:1px solid var(--profondo);white-space:nowrap}
.conto-entra:hover{background:var(--azzurro);border-color:var(--azzurro)}
.conto-esci{background:var(--carta);color:var(--grigio);border:1px solid var(--tratto)}
.conto-esci:hover{color:var(--azzurro);border-color:var(--basso)}
/* ---------- manda a chi viene con te ----------
   Sta accanto alla stellina e ha lo stesso peso visivo: sono due gesti dello
   stesso tipo — tengo questa per me, mando questa a qualcuno. */
.manda{background:none;border:0;cursor:pointer;padding:3px 4px;line-height:0;border-radius:6px;
  color:var(--grigio);transition:.15s;vertical-align:baseline}
.manda svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round;display:block}
.manda:hover{color:var(--azzurro);background:var(--nebbia)}
.manda.fatto{color:var(--verde)}
.manda:focus-visible{outline:2px solid var(--ambra);outline-offset:1px}

/* La fascia della vetrina non e' un muro: e' la stessa forma, ma dice il
   contrario — «questa la vedi tutta», non «questa non la vedi». */
/* NON chiamarla «vetrina»: quel nome ce l'ha gia' il riquadro della foto
   aerea, che porta con se' aspect-ratio 16/9 — e la fascia diventava alta
   765 pixel, con il testo perso in mezzo al vuoto. */
.serratura.assaggiata{border-left-color:var(--verde)}
.serratura.assaggiata h2{color:var(--profondo)}

/* ---------- l'assaggio: una spiaggia per paese ----------
   Sta dentro la fascia della regione chiusa, sotto quello che spiega il muro:
   prima si dice che cosa manca, poi si dice come averne un pezzo. */
.assaggio{margin:16px 0 0;padding:14px;background:var(--carta);border:1px solid var(--tratto);
  border-left:3px solid var(--verde);border-radius:10px}
.assaggio-eti{margin:0 0 6px;font-family:var(--dati);font-size:9.5px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--verde)}
.assaggio-dice{margin:0 0 10px;font-size:13px;line-height:1.55;color:#20536e}
.assaggio-dice a{color:var(--azzurro)}
.assaggio-invito{margin:12px 0 0;font-size:13px;line-height:1.55;color:#20536e}
.assaggio-cerca{width:100%;font:inherit;font-size:13px;padding:7px 12px;border-radius:999px;
  border:1px solid var(--tratto);background:var(--nebbia);color:var(--inchiostro);margin:0 0 9px}
.assaggio-cerca:focus{outline:2px solid var(--ambra);outline-offset:1px;background:#fff}
.assaggio-nomi{display:flex;flex-wrap:wrap;gap:6px;max-height:230px;overflow:auto;
  padding:2px;border-radius:8px}
.assaggio-nomi button{font:inherit;font-size:12.5px;cursor:pointer;background:var(--nebbia);
  border:1px solid var(--tratto);border-radius:999px;padding:5px 12px;color:var(--profondo);
  display:inline-flex;align-items:baseline;gap:6px;transition:.14s}
.assaggio-nomi button:hover:not(:disabled){border-color:var(--verde);color:var(--verde);
  background:#f0f8f4}
.assaggio-nomi button:disabled{opacity:.45;cursor:default}
.assaggio-nomi small{font-family:var(--dati);font-size:9px;letter-spacing:.04em;color:var(--grigio)}
.assaggio-esito{margin:9px 0 0;font-size:12.5px;color:var(--grigio)}
.assaggio-esito.brutta{color:var(--corallo)}

/* ---------- i pareri nella vetrina ----------
   Dentro la fascia di una regione chiusa: non un elenco, tre voci sole. Sono
   la prova che dietro la porta c'e' qualcosa, non il contenuto della stanza. */
.serratura-pareri{margin:14px 0 0;display:flex;flex-direction:column;gap:9px}
.serratura-eti{margin:0;font-family:var(--dati);font-size:9.5px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--grigio)}
.serratura-pareri blockquote{margin:0;padding:9px 12px;background:var(--carta);
  border:1px solid var(--tratto);border-radius:9px;display:flex;flex-wrap:wrap;
  align-items:baseline;gap:4px 9px}
.serratura-pareri q{font-size:13px;line-height:1.5;color:#20536e;quotes:"\201C" "\201D"}
.serratura-pareri cite{font-family:var(--dati);font-size:9.5px;letter-spacing:.05em;
  color:var(--grigio);font-style:normal;margin-left:auto;white-space:nowrap}

/* ---------- il vento tradotto ----------
   Tre colori perche' sono tre cose diverse, non tre sfumature della stessa:
   verde il vento che appiattisce il mare, ambra quello di lato, corallo quello
   che porta l'onda a riva. */
.vento-dice{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 9px;margin:0 0 11px;
  padding:9px 12px;border-radius:9px;font-size:12.5px;line-height:1.5;
  background:var(--nebbia);border:1px solid var(--tratto);border-left:3px solid var(--grigio);
  color:#20536e}
.vento-dice b{font-family:var(--dati);font-size:10px;letter-spacing:.1em;text-transform:uppercase}
.vento-dice i{font-family:var(--dati);font-size:9.5px;letter-spacing:.05em;color:var(--grigio);
  font-style:normal;margin-left:auto;white-space:nowrap}
.vento-dice.terra{border-left-color:var(--verde);background:#f0f8f4}
.vento-dice.terra b{color:var(--verde)}
.vento-dice.mare{border-left-color:var(--corallo);background:#fdf3f1}
.vento-dice.mare b{color:var(--corallo)}
.vento-dice.lato{border-left-color:var(--ambra);background:#fdf8ef}
.vento-dice.lato b{color:var(--ambra)}
.vento-dice.ferma b{color:var(--grigio)}

/* ---------- pareri di chi c'e' stato ----------
   Le stelle del VOTO sono ambra piena; quelle dei PREFERITI, piu' sotto, sono
   la stessa forma ma un'altra cosa. Si distinguono per posizione — il voto sta
   dentro il riquadro dei pareri, il preferito accanto al nome — e per il fatto
   che il voto e' sempre cinque, il preferito sempre uno. */
.voto-stelle{display:inline-flex;gap:1px;font-size:14px;line-height:1;color:var(--secca)}
.voto-stelle .on{color:var(--ambra)}
.voto-quanti{font-family:var(--dati);font-size:10px;letter-spacing:.06em;color:var(--grigio)}
.voto-vuoto{font-family:var(--dati);font-size:10.5px;letter-spacing:.04em;color:var(--grigio)}
.rec-riassunto{display:flex;align-items:baseline;gap:7px;margin:-6px 0 11px}
.rec-riassunto b{font-size:14px;color:var(--profondo)}
.rec{margin-top:20px;border-top:1px solid var(--tratto);padding-top:16px}
.rec-attesa{font-size:12.5px;color:var(--grigio);margin:0}
.rec-media{display:flex;align-items:baseline;gap:8px;margin:0 0 12px}
.rec-media b{font-size:17px;color:var(--profondo)}
.rec-elenco{list-style:none;margin:0 0 14px;padding:0;display:flex;flex-direction:column;gap:10px}
.rec-elenco li{background:var(--nebbia);border:1px solid var(--tratto);border-radius:9px;padding:10px 12px}
.rec-alto{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.rec-firma{font-weight:500;font-size:13px;color:var(--profondo)}
.rec-quando{font-family:var(--dati);font-size:9.5px;letter-spacing:.06em;color:var(--grigio);margin-left:auto}
.rec-togli{background:none;border:1px solid var(--tratto);border-radius:999px;width:22px;height:22px;
  line-height:1;cursor:pointer;color:var(--grigio);font-size:11px;padding:0}
.rec-togli:hover{color:var(--corallo);border-color:var(--corallo)}
.rec-testo{margin:7px 0 0;font-size:13.5px;line-height:1.6;color:#20536e;white-space:pre-wrap}
.rec-invito{background:var(--nebbia);border:1px solid var(--tratto);border-radius:10px;padding:14px;
  text-align:center}
.rec-invito p{margin:0 0 10px;font-size:13px;color:#20536e}
.rec-modulo{background:var(--nebbia);border:1px solid var(--tratto);border-radius:10px;padding:13px;
  display:flex;flex-direction:column;gap:9px}
.rec-mio{margin:0;font-family:var(--dati);font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--azzurro)}
.rec-voto{display:flex;align-items:center;gap:2px}
.rec-voto button{background:none;border:0;cursor:pointer;font-size:25px;line-height:1;padding:0 1px;
  color:var(--secca);transition:.12s}
.rec-voto button.on{color:var(--ambra)}
.rec-voto button:hover{transform:scale(1.12)}
.rec-voto-eti{margin-left:9px;font-family:var(--dati);font-size:10px;letter-spacing:.06em;color:var(--grigio)}
.rec-modulo textarea{font:inherit;font-size:13.5px;line-height:1.5;padding:9px 11px;border-radius:8px;
  border:1px solid var(--tratto);background:var(--carta);color:var(--inchiostro);resize:vertical}
.rec-modulo textarea:focus{outline:2px solid var(--ambra);outline-offset:1px}
.rec-nome{display:flex;align-items:center;gap:8px;font-size:12.5px;color:#20536e;cursor:pointer}
.rec-nome input{width:15px;height:15px;accent-color:var(--azzurro);cursor:pointer}
.rec-azioni{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.rec-azioni .conto-vai{margin:0}
.rec-cancella{background:none;border:0;padding:2px 0;cursor:pointer;font-family:var(--dati);
  font-size:10px;letter-spacing:.08em;color:var(--grigio);text-decoration:underline;
  text-underline-offset:3px}
.rec-cancella:hover{color:var(--corallo)}
.rec-esito{margin:0;font-size:12.5px;line-height:1.5}
.rec-esito.buona{color:var(--verde)}
.rec-esito.brutta{color:var(--corallo)}
.rec-esito a{color:var(--azzurro)}

/* ---------- preferiti ----------
   La stellina e' un pulsante, non un'icona: ha un'etichetta per chi non vede lo
   schermo, e cambia stato senza ricaricare niente. Chi non e' entrato la vede
   lo stesso — cliccandola si apre l'accesso — perche' nascondere la stellina a
   chi non ha un account e' il modo migliore per non fargli mai venire voglia
   di farsene uno. */
/* Il colore va scelto per essere VISTO. --secca (#c9e5f3) su carta bianca fa
   un rapporto di contrasto di 1,2: la stellina c'era, era disegnata, si poteva
   perfino premere — semplicemente non si vedeva. Una cosa invisibile e' una
   cosa che non esiste. */
.stella{background:none;border:0;cursor:pointer;padding:2px 4px;line-height:1;
  font-size:19px;color:var(--grigio);transition:.15s;border-radius:6px}
.stella:hover{color:var(--ambra);background:var(--nebbia)}
.stella.on{color:var(--ambra)}
.stella:focus-visible{outline:2px solid var(--ambra);outline-offset:1px}
/* La stellina va ACCANTO al nome, non sotto: l'h2 e' un blocco, e senza
   questo il pulsante finiva a capo, da solo, senza piu' niente vicino che
   dicesse a che cosa si riferisse. Il nome e la stellina su una riga; le
   coordinate, che sono un'altra cosa, vanno a capo per conto loro. */
.riga-titolo>div:first-child{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 4px}
.riga-titolo>div:first-child>.sotto{flex-basis:100%}
.riga-titolo .stella{font-size:22px;margin-left:0}
.elenco h4 .stella{font-size:15px;float:right;margin:-4px -4px 0 0;color:var(--azzurro)}
.elenco h4 .stella.on{color:var(--ambra)}

.pref-vuoto{background:var(--carta);border:1px solid var(--tratto);border-radius:10px;
  padding:26px 22px;text-align:center;color:var(--grigio);font-size:13.5px;line-height:1.6;
  box-shadow:var(--ombra)}
.pref-griglia{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px}
.pref-carta{background:var(--carta);border:1px solid var(--tratto);border-left:3px solid var(--basso);
  border-radius:10px;padding:13px 15px;box-shadow:var(--ombra);display:flex;flex-direction:column;gap:5px;
  position:relative}
.pref-carta.persa{border-left-color:var(--secca);background:var(--nebbia)}
.pref-alto{display:flex;align-items:baseline;gap:9px}
.pref-nome{font-family:var(--display);font-variation-settings:"SOFT" 30,"WONK" 1,"opsz" 100;
  font-weight:400;font-size:21px;line-height:1.1;color:var(--profondo);text-decoration:none}
.pref-nome:hover{color:var(--azzurro)}
/* Il collegamento sta sul nome, ma il bersaglio e' tutta la scheda: questo
   rettangolo invisibile, grande quanto la carta, e' il collegamento stesso
   allungato fin dove arriva il dito. Il nome resta il nome — chi usa un lettore
   di schermo sente quello, non «clicca qui» — e la stellina, che sta piu' in
   alto di un livello, continua a ricevere il proprio clic. */
.pref-carta:has(a.pref-nome){cursor:pointer}
a.pref-nome::after{content:"";position:absolute;inset:0;border-radius:inherit}
.pref-carta:hover{border-color:var(--azzurro);border-left-color:var(--azzurro)}
.pref-carta.persa:hover{border-color:var(--tratto);border-left-color:var(--secca)}
a.pref-nome:focus-visible{outline:none}
a.pref-nome:focus-visible::after{outline:2px solid var(--azzurro);outline-offset:2px;border-radius:10px}
.pref-alto .stella{margin-left:auto;position:relative;z-index:1}
.pref-dove{font-family:var(--dati);font-size:10px;letter-spacing:.05em;color:var(--grigio)}
.pref-persa{font-size:12.5px;line-height:1.5;color:var(--grigio)}
.pref-persa a{color:var(--azzurro)}
.conto-gest{font-family:var(--dati);font-size:10px;letter-spacing:.12em;text-transform:uppercase;
  text-decoration:none;border-radius:999px;padding:6px 13px;transition:.16s;
  background:var(--carta);color:var(--azzurro);border:1px solid var(--basso)}
.conto-gest:hover{background:var(--nebbia);border-color:var(--azzurro)}

.velo-conto{border:0;padding:0;background:transparent;max-width:100%}
.velo-conto::backdrop{background:rgba(8,60,92,.5);backdrop-filter:blur(4px)}
.foglio-conto{position:relative;width:min(94vw,420px);background:var(--carta);
  border:1px solid var(--tratto);border-radius:14px;box-shadow:0 18px 50px rgba(8,60,92,.22);
  padding:26px 24px 24px;display:flex;flex-direction:column;gap:13px}
.foglio-conto .chiudi{position:absolute;right:10px;top:10px;background:none;border:0;
  font-size:16px;line-height:1;color:var(--secca);cursor:pointer;padding:4px 6px}
.foglio-conto .chiudi:hover{color:var(--azzurro)}
.conto-schede{display:flex;flex-wrap:wrap;gap:6px;margin-right:26px}
.conto-schede button{font-family:var(--dati);font-size:9.5px;letter-spacing:.09em;
  text-transform:uppercase;background:none;border:1px solid transparent;border-radius:999px;
  padding:5px 10px;color:var(--grigio);cursor:pointer;transition:.15s}
.conto-schede button:hover{color:var(--azzurro)}
.conto-schede button.on{background:var(--nebbia);border-color:var(--tratto);color:var(--profondo)}
.conto-nota{margin:0;font-size:12.5px;line-height:1.55;color:#20536e}
.conto-campo{display:flex;flex-direction:column;gap:5px}
.conto-campo>span{font-family:var(--dati);font-size:9.5px;letter-spacing:.11em;
  text-transform:uppercase;color:var(--grigio)}
.conto-campo input{font:inherit;font-size:14px;padding:9px 11px;border:1px solid var(--tratto);
  border-radius:8px;background:var(--nebbia);color:var(--profondo)}
.conto-campo input:focus{outline:2px solid var(--ambra);outline-offset:1px;background:#fff}
.conto-vai{font-family:var(--dati);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
  background:var(--profondo);color:#fff;border:1px solid var(--profondo);border-radius:999px;
  padding:11px 16px;cursor:pointer;transition:.16s}
.conto-vai:hover:not(:disabled){background:var(--azzurro);border-color:var(--azzurro)}
.conto-vai:disabled{opacity:.55;cursor:default}
/* "Password dimenticata" non e' una scheda: e' un collegamento piccolo sotto
   il campo della password, dov'e' su quasi tutti i siti. Lo si cerca solo dopo
   aver provato a entrare e aver sbagliato — metterlo in cima, alla pari con
   "Accedi", vuol dire proporre di aver dimenticato la password a chi se la
   ricordava benissimo. */
/* L'attributo `hidden` vale display:none, ma e' una regola del browser: QUALSIASI
   regola di questo foglio che dica display vince su di lui. Qui dentro ci sono
   righe con display:flex che vanno nascoste e mostrate a seconda del passo —
   senza questa riga restano visibili tutte insieme, e la finestra mostra il
   campo della password anche quando sta chiedendo solo l'indirizzo. */
[hidden]{display:none!important}
/* Il misuratore della password. La barra dice quanto, la parola dice cosa:
   una barra colorata da sola non si sa se e' buona o cattiva. */
.conto-forza{display:flex;align-items:center;gap:10px;margin:-5px 0 0}
.conto-forza .forza-barra{flex:1;height:5px;border-radius:999px;background:var(--schiuma);overflow:hidden}
.conto-forza .forza-barra i{display:block;height:100%;width:0;border-radius:999px;
  background:var(--corallo);transition:width .22s,background .22s}
.conto-forza .forza-eti{font-family:var(--dati);font-size:9.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--grigio);min-width:9ch;text-align:right}
.conto-captcha{display:flex;justify-content:center;min-height:65px}
.conto-scordata{display:flex;justify-content:flex-end;margin:-6px 0 0}
.conto-torna{display:flex;margin:-4px 0 0}
.conto-scordata button,.conto-torna button{background:none;border:0;padding:2px 0;cursor:pointer;
  font:inherit;font-size:12px;color:var(--grigio);text-decoration:underline;
  text-underline-offset:2px;text-decoration-color:var(--secca)}
.conto-scordata button:hover,.conto-torna button:hover{color:var(--azzurro);text-decoration-color:var(--azzurro)}
.conto-esito{margin:0;font-size:12.5px;line-height:1.5;padding:9px 11px;border-radius:8px}
.conto-esito.buona{background:#eaf6ee;color:#1f6b45;border:1px solid #bfe3cd}
.conto-esito.brutta{background:#fdecea;color:#a3352a;border:1px solid #f3c6c0}


/* ---------- regione da sbloccare ----------
   Non e' un errore, e non deve sembrarlo: chi arriva qui deve capire che il
   sito funziona benissimo e che manca solo una cosa, che puo' chiedere.
   Per questo la fascia sta SOTTO IL TITOLO e non in fondo alla colonna: in
   fondo, sotto una carta vuota, si guarda per ultimo — e solo dopo aver
   pensato che il sito fosse rotto. */
.serratura{display:flex;flex-wrap:wrap;align-items:center;gap:18px 26px;
  justify-content:space-between;margin:0 0 20px;padding:18px 22px;border-radius:12px;
  background:linear-gradient(100deg,#f3faf6,#eaf4fb);border:1px solid var(--tratto);
  border-left:4px solid var(--azzurro);box-shadow:var(--ombra)}
.serratura-dice{flex:1 1 420px;min-width:0}
.serratura-dice h2{font-family:var(--display);font-variation-settings:"SOFT" 30,"WONK" 1,"opsz" 100;
  font-weight:400;font-size:23px;line-height:1.1;margin:0 0 6px;color:var(--profondo);
  letter-spacing:-.012em}
.serratura-dice p{margin:0;font-size:13.5px;line-height:1.55;color:#20536e}
.serratura-dice p b{color:var(--profondo);font-weight:600}
.serratura-zone{margin:7px 0 0!important;font-family:var(--dati);font-size:10.5px!important;
  letter-spacing:.04em;color:var(--grigio)!important;line-height:1.7!important}
.serratura-chi{margin:8px 0 0!important;font-size:12px!important;color:var(--grigio)!important}
.serratura-fai{display:flex;flex-direction:column;gap:8px;flex:0 0 auto;min-width:210px}

.elenco-avviso{padding:13px;display:flex;flex-direction:column;gap:11px}
.elenco-avviso p{margin:0;font-size:13px;line-height:1.55;color:#20536e}
/* Due strade, non una: la regione oppure il paese. Sul pulsante il nome e
   sotto il numero — 295 contro 997 dice tutto quello che serve a scegliere,
   e senza dover indovinare se e' «tutta la» o «tutto il». */
.sblocca-eti{margin:0 0 2px;font-family:var(--dati);font-size:9px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--grigio);text-align:center}
.sblocca span{display:block;font-size:9px;letter-spacing:.06em;opacity:.72;
  margin-top:3px;text-transform:none}
.sblocca,.sblocca-entra{font-family:var(--dati);font-size:10px;letter-spacing:.1em;
  text-transform:uppercase;text-align:center;text-decoration:none;cursor:pointer;
  border-radius:999px;padding:9px 16px;transition:.16s}
.sblocca{background:var(--profondo);color:#fff;border:1px solid var(--profondo)}
.sblocca:hover{background:var(--azzurro);border-color:var(--azzurro)}
/* Quando non si e' entrati, il pulsante pieno e' quello dell'accesso: uno
   sblocco si attacca a un account, quindi senza account non c'e' niente da
   sbloccare. «Sblocca <regione>» resta, ma un passo indietro. */
.sblocca.seconda{background:var(--carta);color:var(--profondo);border:1px solid var(--basso)}
.sblocca.seconda:hover{background:var(--nebbia);color:var(--azzurro);border-color:var(--azzurro)}
.sblocca-entra{background:var(--profondo);color:#fff;border:1px solid var(--profondo)}
.sblocca-entra:hover{background:var(--azzurro);border-color:var(--azzurro)}
@media (max-width:700px){ .serratura-fai{width:100%;min-width:0} }

/* il messaggio di ritorno dalla posta */
.conto-benvenuto{font-family:var(--dati);font-size:11px;letter-spacing:.06em;
  background:#eaf6ee;color:#1f6b45;border:1px solid #bfe3cd;border-radius:8px;
  padding:9px 13px;margin:0 0 14px}
.conto-benvenuto.brutto{background:#fdecea;color:#a3352a;border-color:#f3c6c0}

/* ---------------- segnalare un errore ----------------------------------
   Stessa finestra della scheda, stretta: e' un modulo di tre righe, non una
   pagina. Il <dialog> porta il suo sfondo, quindi il velo qui non colora
   niente — lo fa ::backdrop. */
.segnala-velo{border:0;padding:0;background:transparent;max-width:100%}
.segnala-velo::backdrop{background:rgba(8,60,92,.5);backdrop-filter:blur(4px)}
.segnala-foglio{width:min(94vw,470px);max-width:none}
.segnala-corpo{padding:16px 18px}
.segnala-nota{margin:0 0 14px;font-size:13.5px;line-height:1.55;color:var(--grigio)}
.segnala-campo{display:block;margin:0 0 12px}
.segnala-campo>span{display:block;font-family:var(--dati);font-size:10px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--grigio);margin:0 0 5px}
.segnala-campo select,.segnala-campo textarea{width:100%;box-sizing:border-box;font:inherit;
  font-size:14px;color:var(--blu);background:#fff;border:1px solid var(--basso);border-radius:9px;
  padding:9px 11px;transition:border-color .14s,box-shadow .14s}
.segnala-campo textarea{resize:vertical;min-height:88px;line-height:1.5}
.segnala-campo select:focus,.segnala-campo textarea:focus{outline:0;border-color:var(--azzurro);
  box-shadow:0 0 0 3px rgba(23,134,189,.16)}
.segnala-esito{margin:10px 0 0;font-size:13px;line-height:1.5;padding:9px 11px;border-radius:9px}
.segnala-esito.bene{background:#e8f6ec;color:#1c6b36;border:1px solid #b6dfc3}
.segnala-esito.male{background:#fdecea;color:#8d2b22;border:1px solid #f2c2bc}
.segnala-entra{font:inherit;font-size:13.5px;color:var(--azzurro);background:none;border:0;
  padding:0;cursor:pointer;text-decoration:underline;text-underline-offset:2px}
.segnala-entra:hover{color:var(--profondo)}

/* ---------------- le segnalazioni nella pagina di gestione ------------- */
.gest-segn{display:grid;gap:10px}
.gest-segn-riga{border:1px solid var(--tratto);border-radius:10px;padding:11px 13px;background:#fff}
.gest-segn-riga.letta{background:var(--nebbia);opacity:.72}
.gest-segn-capo{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:0 0 6px}
.gest-segn-capo b{font-size:14px}
.gest-segn-genere{font-family:var(--dati);font-size:9px;letter-spacing:.08em;text-transform:uppercase;
  background:var(--schiuma);border:1px solid var(--basso);border-radius:999px;padding:2px 8px;color:var(--blu)}
.gest-segn-testo{margin:0;font-size:14px;line-height:1.55;white-space:pre-wrap}
.gest-segn-pie{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:9px 0 0}
.gest-segn-pie button{font-family:var(--dati);font-size:9.5px;letter-spacing:.07em;text-transform:uppercase;
  border:1px solid var(--tratto);border-radius:999px;background:#fff;color:var(--grigio);
  padding:4px 10px;cursor:pointer;transition:.14s}
.gest-segn-pie button:hover{border-color:var(--azzurro);color:var(--azzurro);background:var(--schiuma)}
.gest-segn-pie a{font-size:12px;color:var(--azzurro)}

/* ---------------- le caselle dei consensi nella finestra dell'account ---- */
.conto-consensi{display:grid;gap:10px;margin:2px 0 14px}
.conto-consensi label{display:grid;grid-template-columns:auto 1fr;gap:9px;align-items:start;
  font-size:12.5px;line-height:1.5;color:var(--blu);cursor:pointer}
.conto-consensi input{margin:2px 0 0;width:16px;height:16px;accent-color:var(--azzurro);cursor:pointer}
.conto-consensi a{color:var(--azzurro)}
.conto-consensi i{display:block;font-style:normal;color:var(--grigio);font-size:11.5px;margin-top:2px}

/* ---------------- entrare con Google ------------------------------------
   Il pulsante sta sopra il modulo perche' e' la strada piu' corta: chi ce
   l'ha non deve leggere due campi per accorgersene. Il «oppure» e' una riga
   con una parola in mezzo, non un titolo: separa senza pesare. */
.conto-google{margin:0 0 14px}
.conto-g{display:flex;align-items:center;justify-content:center;gap:9px;width:100%;
  background:#fff;border:1px solid var(--basso);border-radius:10px;cursor:pointer;
  font-family:var(--dati);font-size:12px;letter-spacing:.03em;color:var(--blu);
  padding:11px 14px;box-shadow:var(--ombra);transition:.14s}
.conto-g:hover{background:var(--schiuma);border-color:var(--azzurro)}
.conto-g:focus-visible{outline:2px solid var(--ambra);outline-offset:2px}
.conto-g svg{flex:0 0 auto}
.conto-oppure{display:flex;align-items:center;gap:10px;margin:13px 0 0;
  font-family:var(--dati);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--grigio)}
.conto-oppure::before,.conto-oppure::after{content:"";flex:1;height:1px;background:var(--tratto)}

/* ---------------- la foto nelle recensioni ------------------------------ */
.rec-foto-vista{margin:8px 0 0;border-radius:9px;overflow:hidden;border:1px solid var(--tratto);
  background:var(--nebbia);max-width:420px}
.rec-foto-vista img{display:block;width:100%;height:auto}
.rec-foto{margin:2px 0 10px}
.rec-foto-scegli{font-family:var(--dati);font-size:10px;letter-spacing:.07em;text-transform:uppercase;
  background:#fff;border:1px solid var(--basso);border-radius:999px;color:var(--blu);
  padding:7px 13px;cursor:pointer;transition:.14s}
.rec-foto-scegli:hover{background:var(--schiuma);border-color:var(--azzurro);color:var(--azzurro)}
.rec-foto-scelta{font-size:12px;color:var(--grigio);margin-left:9px}
.rec-foto-riga{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:8px 0 0}
.rec-foto-stato{font-family:var(--dati);font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;
  border-radius:999px;padding:3px 9px;border:1px solid}
.rec-foto-stato.ok{background:#e8f6ec;color:#1c6b36;border-color:#b6dfc3}
.rec-foto-stato.attesa{background:#fff3d4;color:#7a5a08;border-color:#e4c56a}
.rec-foto-via{font-size:11.5px;color:var(--grigio);background:none;border:0;padding:0;
  cursor:pointer;text-decoration:underline;text-underline-offset:2px}
.rec-foto-via:hover{color:var(--corallo)}
.rec-foto-via:disabled{opacity:.5;cursor:default;text-decoration:none}
.rec-foto-nota{margin:7px 0 0;font-size:11.5px;line-height:1.5;color:var(--grigio)}

/* ---------------- le foto da approvare, in gestione --------------------- */
.gest-foto{display:flex;gap:10px;align-items:flex-start;margin:8px 0 0;
  background:var(--nebbia);border:1px solid var(--tratto);border-radius:10px;padding:9px}
.gest-foto img{width:150px;height:100px;object-fit:cover;border-radius:7px;display:block;
  background:#dde8ee;flex:0 0 auto}
.gest-foto-lato{display:flex;flex-direction:column;gap:6px;min-width:0}
.gest-foto-stato{font-family:var(--dati);font-size:9px;letter-spacing:.07em;text-transform:uppercase;
  color:var(--grigio)}
.gest-foto-lato button{font-family:var(--dati);font-size:9.5px;letter-spacing:.07em;
  text-transform:uppercase;border:1px solid var(--tratto);border-radius:999px;background:#fff;
  color:var(--grigio);padding:5px 11px;cursor:pointer;transition:.14s;align-self:flex-start}
.gest-foto-lato button.si:hover{border-color:#3a9b5c;color:#1c6b36;background:#e8f6ec}
.gest-foto-lato button.no:hover{border-color:var(--corallo);color:#8d2b22;background:#fdecea}

/* ---------------- il piede del sito -------------------------------------
   Si chiama «piede-sito» e non «piede» perche' .piede esisteva gia': e' la
   riga dei crediti sotto le carte regionali. Due cose diverse con lo stesso
   nome e' il modo piu' rapido per farne sparire una. */
.piede-sito{margin:34px 0 0;border-top:1px solid var(--tratto);background:var(--nebbia)}
.piede-dentro{padding:18px 0 26px;display:grid;gap:7px}
.piede-copy{margin:0;font-size:13px;color:var(--blu)}
.piede-dati{margin:0;font-size:11.5px;line-height:1.7;color:var(--grigio);
  display:flex;flex-wrap:wrap;gap:3px 14px}
.piede-voce i{font-style:normal;font-family:var(--dati);font-size:9.5px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--basso)}
.piede-vie{margin:5px 0 0;display:flex;flex-wrap:wrap;gap:16px}
.piede-vie a{font-size:12.5px;color:var(--azzurro);text-decoration:none}
.piede-vie a:hover{text-decoration:underline}

/* ---------------- la fascia dei cookie ---------------------------------- */
.ck{position:fixed;left:0;right:0;bottom:0;z-index:80;background:#fff;
  border-top:1px solid var(--basso);box-shadow:0 -8px 28px rgba(8,60,92,.16)}
.ck-dentro{max-width:960px;margin:0 auto;padding:16px 18px;display:grid;gap:13px;
  grid-template-columns:1fr auto;align-items:center}
.ck-testo p{margin:0 0 6px;font-size:13px;line-height:1.55;color:#20536e}
.ck-testo p:last-child{margin-bottom:0}
.ck-testo a{color:var(--azzurro)}
/* Le due risposte pesano uguale: stessa misura, stesso carattere, un clic
   ciascuna. Se rifiutare costasse piu' fatica non sarebbe un consenso libero. */
.ck-scelte{display:flex;flex-wrap:wrap;gap:9px}
.ck-scelte button{font-family:var(--dati);font-size:11px;letter-spacing:.05em;
  border-radius:999px;padding:11px 17px;cursor:pointer;border:1px solid var(--profondo);
  background:var(--profondo);color:#fff;transition:.14s;white-space:nowrap}
.ck-scelte button[data-ck-no]{background:#fff;color:var(--profondo)}
.ck-scelte button:hover{background:var(--azzurro);border-color:var(--azzurro);color:#fff}
.ck-ora{grid-column:1/-1;margin:0;font-size:11.5px;color:var(--grigio)}
@media (max-width:700px){
  .ck-dentro{grid-template-columns:1fr}
  .ck-scelte button{flex:1 1 auto;text-align:center}
}
.ck-bloccato{display:flex;flex-direction:column;align-items:flex-start;gap:7px;
  justify-content:center;padding:18px;background:var(--nebbia);
  border:1px dashed var(--basso);border-radius:10px;min-height:180px}
.ck-bloccato p{margin:0;font-size:13.5px;color:var(--blu)}
.ck-bloccato .ck-perche{font-size:12px;line-height:1.5;color:var(--grigio)}
.ck-bloccato button{font-family:var(--dati);font-size:10px;letter-spacing:.06em;
  text-transform:uppercase;border:1px solid var(--profondo);background:var(--profondo);
  color:#fff;border-radius:999px;padding:8px 14px;cursor:pointer;transition:.14s}
.ck-bloccato button.ck-sempre{background:#fff;color:var(--profondo)}
.ck-bloccato button:hover{background:var(--azzurro);border-color:var(--azzurro);color:#fff}

/* ---------------- i dati dell'azienda, in gestione ---------------------- */
.gest-imp{background:var(--carta);border:1px solid var(--tratto);border-radius:10px;
  box-shadow:var(--ombra);overflow:hidden}
.gest-imp-gruppo{padding:14px 16px;border-bottom:1px solid var(--tratto)}
.gest-imp-gruppo h4{margin:0;font-size:14px;font-weight:600;color:var(--profondo)}
.gest-imp-nota{margin:2px 0 12px;font-size:12px;color:var(--grigio)}
.gest-imp-campo{display:grid;grid-template-columns:minmax(150px,24%) 1fr;gap:4px 14px;
  align-items:center;margin:0 0 9px}
.gest-imp-campo>span{font-family:var(--dati);font-size:10px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--grigio)}
.gest-imp-campo input{font:inherit;font-size:14px;color:var(--blu);background:#fff;
  border:1px solid var(--basso);border-radius:8px;padding:8px 11px;width:100%;
  box-sizing:border-box;transition:border-color .14s,box-shadow .14s}
.gest-imp-campo input:focus{outline:0;border-color:var(--azzurro);
  box-shadow:0 0 0 3px rgba(23,134,189,.16)}
.gest-imp-campo.vuoto input{background:#fff9ec;border-color:#e4c56a}
.gest-imp-campo>i{grid-column:2;font-style:normal;font-size:11.5px;color:var(--grigio)}
.gest-imp-fondo{display:flex;align-items:center;gap:12px;padding:13px 16px;background:var(--nebbia)}
.gest-imp-fondo button{font-family:var(--dati);font-size:10.5px;letter-spacing:.07em;
  text-transform:uppercase;border:1px solid var(--profondo);background:var(--profondo);
  color:#fff;border-radius:999px;padding:9px 18px;cursor:pointer;transition:.14s}
.gest-imp-fondo button:hover:not(:disabled){background:var(--azzurro);border-color:var(--azzurro)}
.gest-imp-fondo button:disabled{opacity:.45;cursor:default}
.gest-imp-esito{font-size:12.5px;color:var(--grigio)}
@media (max-width:620px){
  .gest-imp-campo{grid-template-columns:1fr}
  .gest-imp-campo>i{grid-column:1}
}

/* ==================== le immagini di chi c'è stato ========================
   Una griglia che si riempie sola: le foto arrivano una per una con il loro
   indirizzo firmato, e il riquadro le aspetta gia' della misura giusta —
   senza aspect-ratio la pagina salterebbe a ogni immagine che atterra. */
/* La striscia scorre di lato e si aggancia alle immagini: con tre foto su un
   telefono, una griglia che va a capo occuperebbe mezza scheda. */
/* La sezione immagini sta in cima alla scheda, appena sotto i pulsanti della
   vista aerea. Essendo la prima cosa, si stacca da sola dal resto con un filo
   di sfondo e un bordo: senza, sembrava che le foto appartenessero alla vista
   aerea qui sopra invece che alla spiaggia qui sotto. */
.imm-sez{background:var(--nebbia);border:1px solid var(--tratto);border-radius:11px;
  padding:11px 12px 12px;margin:0 0 15px}
.imm-sez .titoletto{margin-top:0}
.imm-sez .imm-striscia .imm-scatto{flex-basis:200px}
.imm-sez .imm-scatto{background:var(--carta);box-shadow:var(--ombra)}
.imm-sez .imm-scatto img{aspect-ratio:3/2}
.imm-riga{position:relative;margin:0 0 6px}
.imm-striscia{display:flex;gap:8px;overflow-x:auto;scroll-snap-type:x mandatory;
  scrollbar-width:thin;padding-bottom:2px;align-items:flex-start}
.imm-striscia::-webkit-scrollbar{height:6px}
.imm-striscia::-webkit-scrollbar-thumb{background:var(--tratto);border-radius:99px}
.imm-striscia .imm-scatto{flex:0 0 170px;scroll-snap-align:start}
.imm-quante{font-family:var(--dati);font-size:9px;letter-spacing:.06em;color:var(--grigio);
  border:1px solid var(--tratto);border-radius:999px;padding:1px 7px;margin-left:8px}
.imm-frec{position:absolute;top:calc(50% - 26px);transform:translateY(-50%);z-index:2;
  width:30px;height:30px;border-radius:50%;border:1px solid var(--tratto);
  background:rgba(255,255,255,.94);color:var(--profondo);font-size:17px;line-height:1;
  cursor:pointer;box-shadow:var(--ombra);display:flex;align-items:center;justify-content:center}
.imm-frec:hover{border-color:var(--azzurro);color:var(--azzurro)}
.imm-frec.sx{left:-6px} .imm-frec.dx{right:-6px}
.imm-griglia{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
  gap:8px;margin:0 0 6px;align-items:start}
.imm-scatto{margin:0;background:var(--nebbia);border:1px solid var(--tratto);
  border-radius:10px;overflow:hidden;display:flex;flex-direction:column}
.imm-scatto img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;
  background:var(--nebbia);max-width:100%;cursor:zoom-in}
.imm-scatto figcaption{padding:7px 10px 8px;font-size:11.5px;line-height:1.45;
  color:var(--grigio)}
.imm-scatto.attesa{border-color:var(--ambra);border-style:dashed}
.imm-scatto.attesa img{opacity:.72}
.imm-attesa{color:var(--ambra) !important;font-family:var(--dati);font-size:9.5px;
  letter-spacing:.05em}
.imm-invito{margin:4px 0 0;font-size:12.5px;color:var(--grigio)}
.imm-invito.imm-fuori{color:var(--secca)}
.imm-manda{font-family:var(--dati);font-size:9.5px;letter-spacing:.08em;
  text-transform:uppercase;background:none;border:1px dashed var(--basso);
  border-radius:999px;padding:4px 11px;color:var(--azzurro);cursor:pointer}
.imm-manda:hover{background:var(--nebbia);border-style:solid}
.imm-anteprima{margin:10px 0 0;border-radius:10px;overflow:hidden;
  border:1px solid var(--tratto)}
.imm-anteprima img{display:block;width:100%;max-height:220px;object-fit:cover}
.imm-velo .conto-spunta{display:grid;grid-template-columns:auto 1fr;gap:9px;
  align-items:start;font-size:12.5px;line-height:1.5;color:#20536e;margin:12px 0 2px}
.imm-velo .conto-spunta input{margin:2px 0 0;width:16px;height:16px;
  accent-color:var(--azzurro);cursor:pointer}
.imm-velo .conto-spunta a{color:var(--azzurro)}

/* ========================= si dice in giro =============================== */
.notiz{border:1px solid var(--tratto);border-left:3px solid var(--azzurro);
  border-radius:0 11px 11px 0;background:var(--carta);margin:20px 0 0;overflow:hidden}
.notiz h3{display:flex;align-items:baseline;gap:10px;margin:0;padding:11px 14px 9px;
  font-family:var(--dati);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--profondo);font-weight:500;border-bottom:1px solid var(--tratto)}
.notiz h3 em{font-style:normal;font-size:9px;letter-spacing:.06em;color:var(--grigio);
  text-transform:none;margin-left:auto}
.notiz ol{list-style:none;margin:0;padding:0}
.notiz li{border-bottom:1px solid var(--nebbia)}
.notiz li:last-child{border-bottom:0}
.notiz a{display:block;padding:10px 14px;text-decoration:none;color:var(--profondo);
  font-size:13.5px;line-height:1.45}
.notiz a:hover{background:var(--schiuma)}
.notiz .fonte{display:block;margin-top:3px;font-family:var(--dati);font-size:9.5px;
  letter-spacing:.05em;color:var(--grigio)}

/* ============================ qui intorno =============================== */
.sponsor-testa{display:flex;align-items:baseline;gap:10px;margin:24px 0 9px}
.sponsor-testa p{margin:0;font-family:var(--dati);font-size:9.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--azzurro)}
.sponsor-testa small{margin-left:auto;font-size:11px;color:var(--grigio)}
.sponsor{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.spon{position:relative;display:flex;flex-direction:column;gap:6px;
  background:var(--carta);border:1px solid var(--tratto);border-radius:11px;
  padding:13px 14px 12px;transition:border-color .14s}
.spon:hover{border-color:var(--azzurro)}
.spon-alto{display:flex;align-items:center;gap:8px}
.spon-alto svg{width:18px;height:18px;flex:0 0 auto;stroke:var(--azzurro);fill:none;
  stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.spon h4{margin:0;font-family:var(--display);font-variation-settings:"SOFT" 30,"WONK" 1,"opsz" 100;
  font-weight:400;font-size:18px;line-height:1.15;color:var(--profondo)}
.spon .ann{margin-left:auto;font-family:var(--dati);font-size:8px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--secca);border:1px solid var(--tratto);
  border-radius:3px;padding:2px 5px}
.spon p{margin:0;font-size:12.5px;line-height:1.5;color:var(--grigio)}
.spon p b{color:#20536e;font-weight:600}
.spon a.vai{margin-top:auto;align-self:flex-start;font-family:var(--dati);font-size:9.5px;
  letter-spacing:.1em;text-transform:uppercase;text-decoration:none;
  background:var(--profondo);color:#fff;border-radius:999px;padding:6px 14px}
.spon a.vai:hover{background:var(--azzurro)}
.spon a.vai::after{content:"";position:absolute;inset:0;border-radius:11px}
.spon a.vai:focus-visible{outline:none}
.spon a.vai:focus-visible::after{outline:2px solid var(--ambra);outline-offset:2px}
.spon .chi{font-family:var(--dati);font-size:9px;letter-spacing:.05em;color:var(--secca)}
.trasparenza{margin:10px 0 0;font-size:11.5px;line-height:1.55;color:var(--secca)}
@media (max-width:560px){ .sponsor{grid-template-columns:1fr} }

/* ============================== la lente ================================
   A schermo intero. Il <dialog> del browser fa gia' il velo, il fuoco che non
   esce e la chiusura con Esc: non serve costruirli a mano. */
.imm-lente{border:0;padding:0;background:transparent;max-width:100vw;max-height:100vh;
  width:100vw;height:100vh;overflow:hidden}
.imm-lente::backdrop{background:rgba(6,32,48,.92)}
.imm-lente img{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  max-width:92vw;max-height:82vh;object-fit:contain;border-radius:8px;
  box-shadow:0 10px 40px rgba(0,0,0,.4);background:#0c2434}
.imm-chiudi{position:absolute;top:14px;right:14px;z-index:3;width:38px;height:38px;
  border-radius:50%;border:1px solid rgba(255,255,255,.35);background:rgba(0,0,0,.35);
  color:#fff;font-size:15px;cursor:pointer;line-height:1}
.imm-chiudi:hover{background:rgba(0,0,0,.6)}
.imm-lfrec{position:absolute;top:50%;transform:translateY(-50%);z-index:3;
  width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.35);
  background:rgba(0,0,0,.35);color:#fff;font-size:24px;line-height:1;cursor:pointer;
  display:flex;align-items:center;justify-content:center}
.imm-lfrec:hover{background:rgba(0,0,0,.6)}
.imm-lfrec.sx{left:10px} .imm-lfrec.dx{right:10px}
.imm-lsotto{position:absolute;left:0;right:0;bottom:16px;margin:0;display:flex;
  gap:14px;align-items:baseline;justify-content:center;padding:0 20px;
  color:#dbeaf2;font-size:13px;line-height:1.4;text-align:center;flex-wrap:wrap}
.imm-lsotto span:last-child{font-family:var(--dati);font-size:10px;letter-spacing:.1em;
  color:#93b4c6}
@media (max-width:560px){
  .imm-striscia .imm-scatto{flex-basis:148px}
  .imm-frec.sx{left:-2px} .imm-frec.dx{right:-2px}
  .imm-lente img{max-width:96vw;max-height:74vh}
}

/* ============ gestione · che cosa vede ogni persona ====================== */
.gest-pat-testo{display:flex;flex-direction:column;line-height:1.25}
.gest-pat-testo i{font-style:normal;font-family:var(--dati);font-size:9px;
  letter-spacing:.04em;color:var(--grigio);margin-top:2px}
.gest-pat.scaduto .gest-pat-testo i{color:var(--secca)}
.gest-pat.tutto{background:var(--profondo);border-color:var(--profondo);color:#fff;
  padding:4px 12px}
.gest-tutto{display:flex;flex-direction:column;gap:5px;align-items:flex-start}
.gest-mosse-sbl{margin-top:7px}
.gest-piu.via{color:var(--corallo);border-color:#e8b8b0}
.gest-piu.via:hover{background:#fdecea;border-color:var(--corallo)}

/* ------------------------------------------------- storia e backup (gestione)
   Il riquadro sta in cima alla scheda perche' la cosa da fare — portare fuori
   il file — viene prima della cosa da leggere, cioe' l'elenco dei movimenti. */
.gest-backup{background:var(--carta);border:1px solid var(--tratto);border-radius:11px;
  padding:16px;margin:0 0 18px;display:flex;flex-direction:column;gap:12px}
.gest-backup-ora{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.gest-post{margin:0;font-size:12.5px;line-height:1.55;padding:9px 12px;border-radius:8px}
.gest-post.spenta{background:#fdf3ef;color:#8a3a28;border:1px solid #f0d2c8}
.gest-post.attesa{background:#fdf8ea;color:#7a5a12;border:1px solid #efe0b6}
.gest-post.buona {background:#eff8f1;color:#1d5a32;border:1px solid #cfe6d6}
.gest-backup .gest-imp{display:flex;flex-direction:column;gap:12px;margin:0}
.gest-mov{font-family:var(--dati);font-size:9.5px;letter-spacing:.09em;text-transform:uppercase;
  padding:3px 8px;border-radius:99px;border:1px solid var(--tratto);white-space:nowrap}
.gest-mov.su{background:#eff8f1;border-color:#cfe6d6;color:#1d5a32}
.gest-mov.giu{background:#fdf3ef;border-color:#f0d2c8;color:#8a3a28}
.gest-quando{white-space:nowrap;font-family:var(--dati);font-size:11px;color:var(--grigio)}

/* --------------------------------------------- foto d'archivio (gestione)
   Provini grandi e affiancati: qui si guarda, e per guardare servono immagini
   vicine. I due gesti compaiono sopra la foto al passaggio del mouse, cosi' la
   griglia resta pulita finche' non serve — ma dove il mouse non c'e' (telefoni,
   tavolette) restano sempre visibili, altrimenti la pagina sarebbe inusabile
   proprio dove la si usa in spiaggia. */
.gest-arch{background:var(--carta);border:1px solid var(--tratto);border-radius:11px;
  padding:0;margin:0 0 18px;overflow:hidden}
.gest-arch>summary{cursor:pointer;padding:13px 16px;font-family:var(--dati);font-size:11px;
  letter-spacing:.09em;text-transform:uppercase;color:var(--profondo);
  display:flex;align-items:center;gap:9px}
.gest-arch>summary::-webkit-details-marker{display:none}
.gest-arch[open]>summary{border-bottom:1px solid var(--tratto)}
.gest-arch-nota{margin:0;padding:12px 16px 0;font-size:12.5px;line-height:1.6;color:#20536e}
.gest-arch-nota.fioca{font-size:11.5px;color:var(--grigio);padding-top:8px}
.gest-arch-mosse{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:12px 16px}
.gest-arch-att{color:#8a3a28}

.gest-prov{display:grid;gap:10px;padding:0 16px 16px;
  grid-template-columns:repeat(auto-fill,minmax(190px,1fr))}
.prov{position:relative;margin:0;border-radius:9px;overflow:hidden;background:var(--nebbia);
  border:1px solid var(--tratto);transition:opacity .18s,transform .18s}
.prov>img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover}
.prov figcaption{padding:7px 9px 8px;display:flex;flex-direction:column;gap:1px;background:var(--carta)}
.prov figcaption b{font-size:12.5px;line-height:1.25;color:var(--inchiostro)}
.prov figcaption span{font-family:var(--dati);font-size:9.5px;letter-spacing:.04em;color:var(--grigio)}

.prov-mosse{position:absolute;inset:0 0 auto;display:flex;gap:6px;padding:8px;
  align-items:flex-start;opacity:0;transition:opacity .15s;
  background:linear-gradient(to bottom,rgba(6,32,48,.62),rgba(6,32,48,0))}
.prov:hover .prov-mosse,.prov:focus-within .prov-mosse{opacity:1}
.prov-mosse button{font:inherit;font-size:12px;padding:5px 11px;border-radius:99px;
  border:1px solid transparent;cursor:pointer;font-weight:600}
.prov-si{background:#fff;color:#14512c}
.prov-no{background:rgba(255,255,255,.18);color:#fff;border-color:rgba(255,255,255,.55)}
.prov-si:hover{background:#dff3e5} .prov-no:hover{background:rgba(255,255,255,.3)}
.prov-mosse button:disabled{opacity:.5;cursor:default}
.prov-vai{margin-left:auto;color:#fff;text-decoration:none;font-size:15px;line-height:1;
  padding:4px 6px;border-radius:6px;background:rgba(255,255,255,.18)}
.prov-vai:hover{background:rgba(255,255,255,.34)}
@media (hover:none){ .prov-mosse{opacity:1} }

.prov-stato{padding:6px 9px;font-size:11.5px;background:var(--carta);border-top:1px solid var(--nebbia)}
.prov-amano{display:inline-flex;align-items:center;gap:5px;margin-left:4px}
.prov-amano input{width:118px;font-size:10px}
.prov.corso{opacity:.55}
.prov.fatta{border-color:#bcdcc7}
.prov.fatta .prov-stato{color:#1d5a32;background:#f1f9f3}
.prov.fatta>img{filter:saturate(.4) brightness(1.05)}
.prov.male .prov-stato,.prov.amano .prov-stato{color:#8a3a28;background:#fdf6f3}

.imm-arch{font-family:var(--dati);font-size:9.5px;letter-spacing:.05em;color:var(--grigio)}
/* solo l'invito a mandare la prima foto: niente riquadro pieno, sarebbe un
   blocco grande per una riga di testo */
.imm-sez.imm-sola{background:transparent;border-style:dashed;padding:9px 12px}