/* ==========================================================================
   La vetrina pubblica (Fase 16, PT-05).
   Foglio a se': questa pagina la apre un bagnante dal telefono, spesso in
   spiaggia e sotto il sole. Niente framework, niente peso inutile — e il
   contrasto alto, che uno schermo al sole perdona poco.
   ========================================================================== */
:root {
    --blu: #14415e;
    --blu-chiaro: #2e86c1;
    --sabbia: #f7f1e4;
    --sabbia-scura: #ece2cd;
    --testo: #23303a;
    --muto: #7a8894;
    --bordo: #e5e0da;
    --verde: #1e8449;
    --arancio: #d9480f;

}

* { box-sizing: border-box; }
body {
    margin: 0;
    font-family: 'Atkinson Hyperlegible Next', 'Segoe UI', system-ui, -apple-system, sans-serif;
    color: var(--testo);
    background: #fff;
    -webkit-text-size-adjust: 100%;
}
/* IL FONDO E' SPIAGGIA, NON UN FOGLIO A4.
   Sotto la copertina la pagina tagliava di netto sul bianco: la foto del mare
   finiva e cominciava un modulo. E le schede stavano al contrario di come
   vanno — tessere beige su fondo bianco, cioe' la sabbia addosso al contenuto
   e il vuoto intorno. Adesso e' la PAGINA a essere spiaggia e le schede sono
   bianche: la stessa dose di bianco, sabbia, mare e cielo della home e delle
   due porte d'ingresso, che sono il metro di questo prodotto.
   Sta su una classe e non su body: questo foglio lo caricano anche il
   portale, i risultati, /qui.html e la privacy, che hanno il fondo loro. */
/* LA SABBIA NON E' UNA TINTA PIATTA.
   Stesa uniforme su tutta la pagina sembrava fondo tinta unita, non spiaggia:
   il colore era giusto ma la materia mancava. Qui ci sono tre cose.
   1) La GRANA: rumore vero, generato dal browser con feTurbulence dentro un
      SVG in linea. Prima erano due griglie di puntini con passi primi fra
      loro, sperando che l'irregolarita' nascesse dalla sovrapposizione: non
      nasce. L'occhio trova la griglia piu' fitta e legge una carta da parati
      a pois. Il rumore frattale non ha passo, quindi non c'e' niente da
      trovare. Si fonde in "soft-light": il grigio medio e' neutro, cosi' la
      grana schiarisce e scurisce di poco intorno al colore della sabbia
      invece di sporcarla tutta di grigio.
   2) La SPIAGGIA NON E' TUTTA UGUALE, e questa e' la cosa che si vede. Una
      campitura sola dalla prima riga all'ultima annoiava anche col colore
      giusto: qui si scende dalla sabbia BAGNATA — chiara, quasi bianca,
      subito sotto la battigia — a quella ASCIUTTA, piu' calda e profonda,
      lontano dall'acqua, dove infatti stanno gli ombrelloni in fondo alla
      pagina. Sono due strati e non uno, perche' misurano cose diverse:
      - la fascia bagnata e' alta 420px FISSI, cosi' attacca sempre esattamente
        al colore con cui finisce la battigia, che e' anch'essa in pixel;
      - il riscaldamento e' invece in percentuale dell'ALTEZZA DELLA PAGINA:
        con due risultati o con quattordici la spiaggia si percorre tutta.
      Niente background-attachment: fixed — avrebbe tenuto la sfumatura ferma
      allo schermo, ma su iOS e' da sempre ballerino, e questa pagina si
      guarda soprattutto dal telefono.
   3) La grana SCORRE con il contenuto — se restasse ferma sembrerebbe
      sporco sullo schermo, non sabbia sotto i piedi.

   Le due pagine pubbliche col fondo di spiaggia stanno nella stessa regola
   perche' devono avere lo stesso fondo: scritte in due fogli sono divergute
   ogni volta. portale.css NON deve rimettere un `background` su .po-ricerca,
   o la scorciatoia cancellerebbe queste immagini. */
body.pub-corpo,
body.po-ricerca {
    background-color: var(--sabbia);
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23g)' opacity='.5'/%3E%3C/svg%3E"),
        linear-gradient(180deg, #fcf8ef 0%, rgba(252, 248, 239, 0) 100%),
        linear-gradient(180deg, var(--sabbia) 0%, #f2e8d0 46%, #ecdcb9 100%);
    background-size: 220px 220px, 100% 420px, 100% 100%;
    background-repeat: repeat, no-repeat, no-repeat;
    background-position: 0 0, top left, top left;
    background-blend-mode: soft-light, normal, normal;
}

.d-none { display: none !important; }
h1, h2 { font-family: 'Bricolage Grotesque', 'Segoe UI', system-ui, sans-serif; }

/* ─── caricamento e pagina assente ─── */
.pub-loading { min-height: 60vh; display: grid; place-items: center; }
.pub-spinner {
    width: 34px; height: 34px; border-radius: 50%;
    border: 3px solid var(--sabbia-scura); border-top-color: var(--blu);
    animation: gira .8s linear infinite;
}
@keyframes gira { to { transform: rotate(360deg); } }

/* ─── da una pagina all'altra (censimento del movimento) ───
   Fra le pagine del sito pubblico il browser dissolve dall'una all'altra, e
   la foto e il nome della carta di una spiaggia (home, risultati) arrivano
   sulla copertina e sul titolo della vetrina: i nomi li mette copertina.js
   nelle carte e spiaggia.js nella vetrina. Chrome, Edge e Safari lo fanno;
   gli altri browser aprono la pagina come prima. Con «riduci movimento» non
   c'e'. */
@media (prefers-reduced-motion: no-preference) {
    @view-transition { navigation: auto; }
}
::view-transition-group(*) { animation-duration: var(--f-viaggio-lungo, 420ms); animation-timing-function: var(--f-esce, ease); }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: var(--f-cambio, 220ms); }
/* la foto non si deforma passando da carta a copertina: si ritaglia */
::view-transition-old(*.copertina), ::view-transition-new(*.copertina) { height: 100%; object-fit: cover; overflow: clip; }
/* ==========================================================================
   LA RIVA — dove il blu della testata finisce e comincia la sabbia.
   UNA SOLA, per tutte le pagine che ne hanno una: era nata sui risultati e
   stava per essere ricopiata nell'app in spiaggia, che e' il modo in cui due
   settimane dopo si hanno due battigie con due andature diverse.
   Le misure si regolano dall'esterno con le variabili: cambia l'altezza e il
   punto da cui parte il mare, non il disegno.
   ========================================================================== */
.riva {
    position: relative; overflow: hidden;
    height: var(--riva-h, 92px);
    background:
        /* #fcf8ef e non --sabbia: e' il colore con cui COMINCIA il fondo della
           pagina, piu' chiaro nei primi 420px. Con la sabbia piena restava una
           riga chiara appena sotto la battigia. Chi ha un fondo diverso lo
           dice con --riva-sabbia. */
        linear-gradient(var(--riva-sabbia, #fcf8ef), var(--riva-sabbia, #fcf8ef))
            no-repeat bottom / 100% var(--riva-bagnasciuga, 22px),
        radial-gradient(120% 80% at 24% 100%, rgba(255, 255, 255, .16), transparent 60%),
        linear-gradient(180deg, var(--riva-cima, #10425e) 0%, #2b8fae 62%, #63c0d1 100%);
}
/* La schiuma: BIANCA, come sulla copertina della home — stessi archi, stesso
   passo, stessa andatura. Color sabbia sembravano un merletto; bianchi sono
   quello che si vede dove l'acqua tocca la riva. E BASSA e LARGA: a 38px su un
   passo di 190 si leggevano come sbuffi staccati, mentre una battigia e' una
   linea che ondeggia appena. */
.riva::after {
    content: ''; position: absolute; left: -5%; right: -5%;
    bottom: var(--riva-schiuma, 10px); height: 24px;
    background:
        radial-gradient(64% 100% at 50% 100%, rgba(255, 255, 255, .82) 46%, transparent 47%)
            0 0 / 236px 24px repeat-x,
        radial-gradient(64% 100% at 50% 100%, rgba(255, 255, 255, .4) 46%, transparent 47%)
            64px 6px / 288px 20px repeat-x;
    animation: f-onda 18s linear infinite;      /* faro.css */
}

/* ─── la barra in cima (la via d'uscita) ───
   Fissa, non nel flusso: sopra la copertina deve GALLEGGIARE, se occupasse
   spazio spingerebbe giu' la foto lasciando una fascia bianca in testa.

   Nasce opaca perche' nasce sopra il bianco del caricamento e del "non
   disponibile", dove un fondo trasparente renderebbe illeggibile il testo
   bianco. E' spiaggia.js a toglierle il fondo quando sotto c'e' davvero la
   copertina e non si e' ancora scorso: li' una fascia scura sarebbe una
   riga di troppo sopra la foto. */
.pub-topbar {
    position: fixed; top: 0; left: 0; right: 0; z-index: 30;
    background: linear-gradient(180deg, rgba(6, 26, 38, .55), rgba(6, 26, 38, 0));
    transition: background .18s ease, box-shadow .18s ease;
}
.pub-topbar.fissa {
    background: var(--testata-velo);
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    box-shadow: 0 2px 14px rgba(0, 0, 0, .26);
}
.pub-topbar-inner {
    /* IL MODELLO DELLA COLONNA, uguale ovunque: max-width sull'elemento e
       il fianco DENTRO. E' quello che usano le sezioni qui sotto, il
       portale e i risultati. Prima la barra e la copertina usavano l'altro
       (fianco fuori, max-width dentro) e partivano 16px piu' a sinistra
       delle sezioni: il marchio non stava sulla stessa verticale del resto. */
    max-width: var(--colonna); margin: 0 auto;
    /* .9rem come .po-testa-inner e .area-testa-inner: con .62 il marchio
       stava 2px piu' in alto che sulle altre pagine. */
    padding: .9rem var(--fianco);
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
/* Marchio e "indietro" viaggiano insieme a sinistra. Il tasto sta DOPO il
   marchio e non prima: il marchio cade nello stesso punto in ogni pagina del
   sito, e non si sposta per far posto a un altro bottone. */
.pub-topbar-sx { display: flex; align-items: center; gap: .55rem; min-width: 0; }
/* La stessa pastiglia bianca di .btn-back nel gestionale e di .q-torna in
   spiaggia: bianca su fondo scuro, testo blu, freccia a sinistra. */
.pub-indietro {
    display: inline-flex; align-items: center; gap: .4rem;
    padding: .38rem .85rem .38rem .7rem;
    background: #fff; color: var(--blu);
    border: 1px solid rgba(20, 45, 70, .12); border-radius: 999px;
    box-shadow: 0 2px 8px rgba(8, 32, 46, .28);
    font: inherit; font-size: .84rem; font-weight: 600; cursor: pointer;
    white-space: nowrap;
    transition: transform .15s ease, box-shadow .18s ease;
}
.pub-indietro:hover { transform: translateX(-2px); box-shadow: 0 6px 16px rgba(8, 32, 46, .34); }
/* Da telefono la riga in cima ha gia' il marchio e la lente: resta la
   freccia, che da sola si capisce. */
@media (max-width: 560px) {
    .pub-indietro span { display: none; }
    .pub-indietro { padding: .38rem .55rem; }
}

.pub-topbar-cerca {
    display: inline-flex; align-items: center; gap: .4rem;
    color: #fff; text-decoration: none; font-size: .88rem; font-weight: 600;
    padding: .38rem .85rem; border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, .34);
    background: rgba(255, 255, 255, .1);
    transition: background .15s;
}
.pub-topbar-cerca:hover { background: rgba(255, 255, 255, .22); color: #fff; }
/* Da telefono resta l'icona: la frase intera mangerebbe la riga accanto al
   marchio, e la lente da sola si capisce. */
@media (max-width: 560px) {
    .pub-topbar-cerca span { display: none; }
    .pub-topbar-cerca { padding: .38rem .6rem; }
}

.pub-notfound {
    min-height: 70vh; display: grid; place-content: center; text-align: center;
    padding: 4.5rem 2rem 2rem;   /* la barra e' fissa: non occupa spazio da sola */
}
/* La barra galleggia: senza questo il salto a "#mappa" porta il titolo della
   sezione ESATTAMENTE sotto la barra, che glielo copre. */
.pub-section[id], [id]:target { scroll-margin-top: 4.2rem; }
.pub-notfound .bi { font-size: 3rem; color: var(--muto); }
.pub-notfound h1 { font-size: 1.4rem; margin: .8rem 0 .3rem; }
.pub-notfound p { color: var(--muto); margin: 0; }

/* ─── copertina ─── */
.pub-hero {
    background: linear-gradient(160deg, #16506f 0%, #0e3247 100%);
    background-size: cover; background-position: center;
    color: #fff; padding: 4.6rem 0 2rem;   /* +2rem: sotto la barra fissa */
    /* Era una fascia da 340px: la foto si intravedeva e la pagina cominciava
       subito col bianco. Ora e' un ARRIVO — si vede dove si sta andando prima
       di leggere qualsiasi cosa. Il clamp tiene il minimo utile sul telefono
       e non lascia crescere la copertina all'infinito su uno schermo alto. */
    position: relative;
    min-height: clamp(400px, 58vh, 620px);
    display: flex; align-items: flex-end;
    /* Il fondo lascia respiro alla fascia dei fatti, che sale di 2.6rem
       sulla foto: senza, il bordo del riquadro toccherebbe il testo. */
    padding-bottom: 4.4rem; padding-inline: 0;
    /* serve alla riva qui sotto, che sborda di proposito ai due lati */
    overflow: hidden;
}
/* SOTTO LA FOTO una dissolvenza nella sabbia, non un taglio.
   Qui NON va un'onda: la fascia dei fatti copre il centro del bordo, e di un
   festone resterebbero due gobbe ai lati — si legge come uno sbaglio, non
   come una spiaggia (era gia' successo con un divisorio a onda, poi tolto).
   Una dissolvenza invece regge qualsiasi copertina: sabbia, mare o piscina
   che sia. L'onda vera sta dove ha senso — fra il mare DISEGNATO e la sabbia
   DISEGNATA, qui sotto. */
.pub-hero::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: -1px;
    height: 78px; pointer-events: none; z-index: 1;
    background: linear-gradient(180deg, rgba(247, 241, 228, 0) 0%,
                rgba(247, 241, 228, .55) 62%, var(--sabbia) 100%);
}
.pub-hero.con-foto { padding: 6.2rem 0 4.4rem; }
/* Il fianco sta QUI dentro, non sulla sezione: e' il modello della colonna. */
.pub-hero-inner {
    max-width: var(--colonna); margin: 0 auto; width: 100%;
    padding-inline: var(--fianco);
    /* La riva qui sotto e' posizionata: senza questo il testo della
       copertina finirebbe SOTTO il mare invece che sopra. */
    position: relative; z-index: 1;
}

/* LA COPERTINA SENZA FOTO — un rettangolo blu alto mezzo schermo e vuoto era
   il pezzo peggiore della vetrina, e tocca a tutte le spiagge che non hanno
   ancora caricato un'immagine. Al suo posto la scena della home: cielo,
   mare, l'onda e la sabbia con gli ombrelloni VERI della mappa. Non e' un
   riempitivo — e' lo stesso linguaggio grafico del resto del prodotto, e la
   sabbia finisce esattamente nel colore di fondo della pagina, cosi' la
   copertina non "finisce": continua.
   Le bande in PIXEL: a percentuale si muoverebbero con l'altezza della
   copertina e gli ombrelloni finirebbero a mollo. */
.pub-hero-riva {
    position: absolute; left: 0; right: 0; bottom: 0; height: 236px;
    z-index: 0; display: none; pointer-events: none;
    background:
        linear-gradient(180deg, #f3e6cb 0%, var(--sabbia) 100%)
            no-repeat bottom left / 100% 140px,
        radial-gradient(120% 80% at 24% 100%, rgba(255, 255, 255, .16), transparent 62%)
            no-repeat bottom 140px left / 100% 96px,
        linear-gradient(180deg, rgba(47, 155, 180, 0) 0%, #2f9bb4 58%, #6ac3d3 100%)
            no-repeat bottom 140px left / 100% 96px;
}
/* LA SCHIUMA, bianca come la schiuma. Prima erano archi color sabbia e si
   leggevano come un merletto: il bianco e' invece quello che si vede davvero
   dove l'acqua tocca la riva. Sono gli stessi archi della copertina della
   home — stesso passo, stesso sfalsamento, stessa andatura. */
.pub-hero-riva::before {
    content: ''; position: absolute; left: -5%; right: -5%; bottom: 130px; height: 24px;
    background:
        radial-gradient(64% 100% at 50% 100%, rgba(255, 255, 255, .82) 46%, transparent 47%)
            0 0 / 236px 24px repeat-x,
        radial-gradient(64% 100% at 50% 100%, rgba(255, 255, 255, .4) 46%, transparent 47%)
            64px 6px / 288px 20px repeat-x;
    animation: f-onda 18s linear infinite;      /* faro.css */
}
/* Gli ombrelloni stanno in una FASCIA STRETTA di sabbia: sotto ci passa la
   fascia dei fatti, che sale di 2.6rem sulla copertina (e ombrelloni tagliati
   a meta' da una scheda bianca sembrerebbero un errore di impaginazione);
   sopra c'e' la battigia, e una fila piantata dentro l'acqua e' peggio
   ancora. Restano i 98px in mezzo. */
.pub-hero-riva .scena-fila.lontana { bottom: 80px; }
.pub-hero-riva .scena-fila.vicina  { bottom: 44px; }

.pub-hero:not(.con-foto) .pub-hero-riva { display: block; }
/* Il cielo della copertina va dal buio alla luce SCENDENDO: quello di serie
   fa il contrario (diagonale, piu' scuro in basso) perche' e' nato per stare
   sotto una foto e spegnerla. Senza foto, un cielo che si scurisce verso il
   mare e' un cielo al contrario, e i 300px sopra il titolo erano un muro. */
.pub-hero:not(.con-foto) {
    background: linear-gradient(180deg, var(--testata) 0%, #10425e 44%, #1a6d88 100%);
}
/* Il testo sale sopra la riva. */
.pub-hero:not(.con-foto) { padding-bottom: calc(2rem + 236px); }
/* L'onda di fine copertina la porta gia' la riva. */
.pub-hero:not(.con-foto)::after { content: none; }

.pub-eyebrow {
    font-size: .78rem; letter-spacing: .12em; text-transform: uppercase;
    opacity: .8; margin-bottom: .3rem;
}
.pub-hero h1 {
    font-size: clamp(2rem, 6.4vw, 3.6rem); margin: 0 0 .5rem; line-height: 1.08;
    text-shadow: 0 2px 24px rgba(4, 20, 30, .45);   /* leggibile anche su foto chiara */
}
.pub-headline { font-size: clamp(1rem, 3.4vw, 1.15rem); opacity: .92; margin: 0 0 1.2rem; max-width: 46ch; }
.pub-hero-actions { display: flex; gap: .6rem; flex-wrap: wrap; }
/* justify-content: senza, un bottone largo quanto il riquadro ("Mandami il
   codice", "Entra con un codice") teneva la scritta attaccata a sinistra */
.pub-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .2rem;
    padding: .62rem 1.1rem; border-radius: 999px;
    font-weight: 600; font-size: .95rem; text-decoration: none;
    transition: transform .1s, box-shadow .15s, background-color .15s,
                border-color .15s, color .15s, filter .15s;
}
/* I BOTTONI DEVONO SEMBRARE BOTTONI. Un <button> con .pub-btn prendeva il
   grigio e il bordo di serie del browser, e non cambiava ne' al passaggio ne'
   al tocco: "Annulla ordine" e "Chiudi" sembravano due etichette. Le regole
   sotto valevano solo per i link, che la manina ce l'hanno di loro. */
button.pub-btn { cursor: pointer; font-family: inherit; border: 0; }
.pub-btn:active { transform: translateY(1px); }
.pub-btn:focus-visible { outline: 3px solid rgba(46, 134, 193, .45); outline-offset: 2px; }
.pub-btn:disabled { opacity: .55; cursor: not-allowed; transform: none; }
.pub-btn.primary { background: #e8621e; color: #fff; box-shadow: 0 6px 18px rgba(232, 98, 30, .35); }
.pub-btn.primary:hover { filter: brightness(1.05); box-shadow: 0 8px 22px rgba(232, 98, 30, .45); }
.pub-btn.ghost { border: 1px solid rgba(255, 255, 255, .55); color: #fff; background: transparent; }
.pub-btn.ghost:hover { background: rgba(255, 255, 255, .14); }
.pub-open { margin-top: 1rem; font-size: .85rem; opacity: .9; }
.pub-open .aperto { color: #58d68d; font-size: .6rem; vertical-align: 2px; }
.pub-open .chiuso { color: #f5b041; font-size: .6rem; vertical-align: 2px; }

/* ─── la fascia dei fatti ───
   A cavallo fra la foto e il bianco: il margine negativo la fa salire sulla
   copertina, ed e' quello che le da' l'aria di scheda appoggiata sopra
   l'immagine invece di un'altra riga di pagina. */
.pub-fatti {
    max-width: var(--colonna); margin: -2.6rem auto 0;
    padding: 0 var(--fianco);
    position: relative; z-index: 3;
    display: grid; gap: 1px;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    background: transparent;
}
.pub-fatto {
    display: flex; align-items: center; gap: .7rem;
    background: #fff; padding: 1rem 1.1rem;
    border-top: 1px solid var(--bordo); border-bottom: 1px solid var(--bordo);
    box-shadow: 0 10px 30px rgba(20, 65, 94, .1);
}
/* Gli angoli tondi vanno alla fascia, non a ogni tessera: quattro schede
   tonde attaccate sembrano quattro bottoni, una fascia tonda sembra una
   scheda sola. */
.pub-fatto:first-child { border-radius: 14px 0 0 14px; border-left: 1px solid var(--bordo); }
.pub-fatto:last-child  { border-radius: 0 14px 14px 0; border-right: 1px solid var(--bordo); }
.pub-fatto .bi { font-size: 1.25rem; color: var(--blu-chiaro); flex: none; }
.pub-fatto.forte .bi { color: var(--verde); }
.pub-fatto-occhiello {
    font-size: .68rem; letter-spacing: .1em; text-transform: uppercase;
    color: var(--muto); display: block; line-height: 1;
}
.pub-fatto-n {
    font-family: 'Bricolage Grotesque', 'Segoe UI', system-ui, sans-serif; font-weight: 700;
    font-size: 1.35rem; line-height: 1.15; color: var(--blu);
}
.pub-fatto.forte .pub-fatto-n { color: var(--verde); }
.pub-fatto-n.piccolo { font-size: 1rem; }
.pub-fatto-l { font-size: .8rem; color: var(--muto); line-height: 1.3; }
/* Sotto i 700px la fascia si spezza in tessere: quattro colonne da 95px
   sarebbero illeggibili. Tessere separate e non una striscia continua perche'
   i fatti sono tre o quattro a seconda della spiaggia (una senza stagione
   dichiarata ne ha tre), e una striscia con gli angoli cuciti a mano si rompe
   al primo conteggio diverso — come si era rotta: l'ultimo riquadro prendeva
   la riga intera e accanto al terzo restava una casella vuota. */
@media (max-width: 700px) {
    .pub-fatti { grid-template-columns: 1fr 1fr; gap: .5rem; }
    .pub-fatto,
    .pub-fatto:first-child,
    .pub-fatto:last-child {
        border: 1px solid var(--bordo); border-radius: 14px;
    }
    /* Solo se sono in numero DISPARI l'ultimo prende tutta la riga: in numero
       pari riempiono le due colonne da soli. */
    .pub-fatto:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

/* ─── sezioni ─── */
.pub-section { max-width: var(--colonna); margin: 0 auto; padding: 1.8rem var(--fianco); }
.pub-section h2 { font-size: 1.2rem; margin: 0 0 .9rem; }
.pub-section-head {
    display: flex; align-items: end; justify-content: space-between;
    gap: 1rem; flex-wrap: wrap; margin-bottom: .9rem;
}
.pub-section-head h2 { margin: 0; }
.pub-daypick { display: flex; align-items: center; gap: .45rem; font-size: .85rem; color: var(--muto); }
.pub-daypick input {
    font: inherit; padding: .35rem .5rem;
    border: 1px solid var(--bordo); border-radius: 8px; color: var(--testo);
}

/* ─── cosa trovi ─── */
.pub-offer {
    display: grid; gap: .7rem;
    /* auto-FIT, non auto-fill: a colonna larga 1240 l'auto-fill apriva otto
       piste da 148px e ne riempiva quattro, lasciando mezza riga vuota.
       L'auto-fit chiude le piste vuote e distribuisce lo spazio a quelle
       piene — e' gia' quello che fa .men-locali qui sotto. */
    grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
}
/* Quattro schede su tre colonne lasciano la quarta sola in fondo: a due
   colonne fanno un quadrato. */
@media (max-width: 560px) {
    .pub-offer { grid-template-columns: 1fr 1fr; }
}

.pub-card {
    /* Era un rettangolo beige piatto con un'icona di sistema: quattro
       caselle di una tabella nel punto della pagina che dovrebbe far venire
       voglia di andarci. Ora la sabbia e' una sfumatura, il numero e' grande,
       e in un angolo c'e' il DISEGNO VERO dell'oggetto. */
    position: relative; overflow: hidden;
    /* Bianca sulla sabbia, non sabbia sul bianco: e' il rovescio di prima, ed
       e' quello che fa staccare la scheda invece di annegarla nel fondo. La
       sabbia resta DENTRO, nel bollo dell'icona: e' la dose giusta. */
    background: #fff;
    border: 1px solid rgba(20, 65, 94, .1);
    box-shadow: 0 2px 10px rgba(20, 65, 94, .06);
    border-radius: 16px; padding: 1rem 1rem .95rem;
    transition: transform .16s ease, box-shadow .16s ease;
}
.pub-card:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(20, 65, 94, .13); }
/* Il bollo: l'icona su un disco bianco, non appoggiata sulla sabbia. Da'
   alla scheda un punto di appoggio in alto e stacca il simbolo dal fondo,
   che sulla sabbia chiara spariva. */
.pub-card-bollo {
    display: inline-grid; place-items: center;
    width: 38px; height: 38px; border-radius: 12px;
    background: linear-gradient(160deg, #fdf8ee, var(--sabbia-scura));
    border: 1px solid var(--sabbia-scura);
    margin-bottom: .55rem;
}
.pub-card-bollo .bi { font-size: 1.15rem; color: var(--blu-chiaro); line-height: 1; }
.pub-card-n {
    font-family: 'Bricolage Grotesque', 'Segoe UI', system-ui, sans-serif;
    font-size: 2rem; font-weight: 700; line-height: 1.05; color: var(--blu);
    position: relative;
}
.pub-card-l { font-size: .9rem; font-weight: 600; position: relative; max-width: 8.5em; }
.pub-card-p { font-size: .78rem; color: var(--muto); margin-top: .25rem; position: relative; }

/* ─── i servizi ───
   Le stesse voci e le stesse etichette della ricerca: chi ha filtrato per
   "area cani" deve ritrovare qui quella parola, o non e' la stessa promessa.

   Erano cinque elenchi di testo su bianco, con i buchi lasciati dai gruppi
   corti: la sezione piu' informativa della pagina sembrava un foglio di
   appunti. Ora e' un PANNELLO — fondo di sabbia, ogni gruppo una tessera
   bianca — e ogni capitolo ha il suo colore, cosi' l'occhio trova "Acqua e
   relax" senza leggere. I colori sono quelli della palette Open Color, presi
   allo stesso gradino (7): accostati non litigano. */
.pub-servizi-sez .pub-servizi {
    /* Il pannello di sabbia serviva quando la pagina era bianca: dava un
       fondo alle tessere. Ora il fondo ce l'ha la pagina, e un riquadro beige
       su una pagina beige e' solo un bordo in piu' da guardare. */
    background: transparent; border: 0; padding: 0;
    display: grid; gap: .9rem;
    /* 210 e non 230: a 1240 di colonna cinque gruppi entrano in una riga
       sola, mentre a 230 il quinto andava a capo da solo. */
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}
.pub-serv-gruppo {
    background: #fff; border: 1px solid var(--bordo);
    border-radius: 14px; padding: .85rem .9rem 1rem;
    box-shadow: 0 2px 8px rgba(20, 65, 94, .05);
}
.pub-serv-titolo {
    display: flex; align-items: center; gap: .5rem;
    font-size: .74rem; letter-spacing: .07em; text-transform: uppercase;
    color: var(--testo); font-weight: 700;
    padding-bottom: .65rem; margin-bottom: .7rem;
    border-bottom: 1px solid var(--bordo);
}
.pub-serv-bollo {
    display: inline-grid; place-items: center; flex: none;
    width: 28px; height: 28px; border-radius: 9px;
    background: var(--tinta-chiara, #eef4f8);
}
.pub-serv-bollo .bi { font-size: .92rem; color: var(--tinta, #2e86c1); line-height: 1; }
/* Quanti ne ha questo capitolo: il numero e' un dato, e riempie il vuoto a
   destra del titolo meglio di qualsiasi decorazione. */
.pub-serv-n {
    margin-left: auto; font-size: .72rem; font-weight: 700;
    color: var(--tinta, #2e86c1); background: var(--tinta-chiara, #eef4f8);
    border-radius: 999px; padding: .1rem .45rem; letter-spacing: 0;
}
.pub-serv-voci { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }
.pub-serv-voci li {
    display: flex; align-items: center; gap: .5rem;
    font-size: .92rem; line-height: 1.3;
}
.pub-serv-voci .bi { color: var(--tinta, #2e86c1); font-size: .95rem; flex: none; }

/* Un colore per capitolo. Senza, dodici voci uguali diventano un muro. */
.pub-serv-gruppo[data-g="mangiare"] { --tinta: #d9480f; --tinta-chiara: #fff0e6; }
.pub-serv-gruppo[data-g="arrivare"] { --tinta: #5f3dc4; --tinta-chiara: #efeaff; }
.pub-serv-gruppo[data-g="sport"]    { --tinta: #2b8a3e; --tinta-chiara: #e7f6ea; }
.pub-serv-gruppo[data-g="relax"]    { --tinta: #1c7ed6; --tinta-chiara: #e7f1fb; }
.pub-serv-gruppo[data-g="famiglia"] { --tinta: #c2255c; --tinta-chiara: #fdeaf1; }
.pub-serv-gruppo[data-g="servizi"]  { --tinta: #0c8599; --tinta-chiara: #e3f4f7; }

/* ─── disponibilità ─── */
.pub-avail { display: flex; flex-wrap: wrap; gap: .45rem; margin-bottom: .9rem; }
.pub-avail-item {
    display: inline-flex; align-items: center; gap: .35rem;
    background: #eaf6ef; border: 1px solid #cfe8da; color: #14663c;
    border-radius: 999px; padding: .25rem .7rem; font-size: .82rem;
}
.pub-avail-item.pieno { background: #f4f4f4; border-color: #e0e0e0; color: #777; }
.pub-avail-item .l { font-weight: 600; }
.pub-avail-item .n { opacity: .85; }

/* ─── mappa ─── */
.pub-map-wrap {
    /* UNA CORNICE BIANCA VERA, non un bordo da un pixel. Il disegno della
       spiaggia e' di sabbia e la pagina sotto e' di sabbia: finche' il vetro
       arrivava fino al bordo, non si capiva dove finisse la mappa. Gli 8px di
       bianco intorno sono quello che separa — come il passe-partout di una
       stampa — e li conta anche adattaRiquadro (JS), che senza aggiungerli
       stringerebbe il vetro di 16px rispetto alla forma della spiaggia. */
    background: #fff;
    border: 1px solid rgba(20, 65, 94, .16); border-radius: 16px; padding: 8px;
    box-shadow: 0 6px 22px rgba(20, 65, 94, .11);
    /* La larghezza la decide adattaRiquadro (JS) sulla forma della spiaggia:
       qui serve solo che, quando si stringe, la cornice resti in mezzo. */
    margin-inline: auto;
}
.pub-map-toolbar {
    display: flex; align-items: center; gap: .8rem;
    padding: .5rem .75rem; background: #fff;
    border-bottom: 1px solid var(--bordo); font-size: .8rem;
}
.pub-legend { display: inline-flex; align-items: center; gap: .3rem; color: var(--muto); }
.pub-legend .dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.pub-legend .dot.free, .pub-map-legenda .dot.free {
    background: #3fa7d6;                       /* a colori = si puo' prendere */
}
.pub-legend .dot.busy, .pub-map-legenda .dot.busy {
    background: #b9c2c9;                       /* grigio = gia' preso */
}
.pub-map-legenda .dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.pub-zoom {
    border: 1px solid rgba(255, 255, 255, .6);
    background: rgba(255, 255, 255, .92);
    backdrop-filter: blur(4px);
    border-radius: 10px; width: 36px; height: 36px;
    cursor: pointer; color: var(--blu);
    box-shadow: 0 3px 10px rgba(15, 45, 70, .18);
}
.pub-zoom:hover { background: #fff; }
/* La mappa e' un piano che si esplora: niente barre di scorrimento, la si
   sposta col dito o col mouse. touch-action: none serve perche' il gesto
   arrivi a noi invece di far scorrere la pagina sotto. */
.pub-map-viewport {
    position: relative;
    overflow: hidden;
    background: #e9ddc4;
    border: 1px solid #ddd0b0; border-radius: 10px;
    height: 68vh; min-height: 380px;
    touch-action: none;
    cursor: grab;
}
.pub-map-viewport.in-movimento { cursor: grabbing; }
.pub-map-viewport.in-movimento .pub-item { pointer-events: none; }
.pub-map-comandi {
    position: absolute; top: 10px; right: 10px; z-index: 5;
    display: flex; flex-direction: column; gap: .35rem;
}
.pub-map-legenda {
    position: absolute; left: 10px; top: 10px; z-index: 5;
    display: flex; gap: .7rem;
    background: rgba(255, 255, 255, .9); border-radius: 999px;
    padding: .25rem .7rem; font-size: .76rem; color: var(--muto);
    backdrop-filter: blur(4px);
}
.pub-map-legenda span { display: inline-flex; align-items: center; gap: .3rem; }
.pub-map {
    position: relative;
    background-image: radial-gradient(circle at 30% 30%, #efe3c9 0 2px, transparent 2px);
    background-size: 14px 14px;
}
.pub-map-vuota { padding: 2rem; text-align: center; color: var(--muto); }
.pub-item { position: absolute; }
.pub-item img { width: 100%; height: 100%; object-fit: contain; display: block; }
/* Libero o occupato si legge dal COLORE della postazione, non da un anello
   che le gira attorno: quello che si puo' prendere e' a colori, quello che
   non si puo' e' grigio. Su centoquaranta ombrelloni un cerchio ciascuno
   sarebbe rumore; cosi' invece l'occhio va da solo dove c'e' posto. */
.pub-item.posto { cursor: pointer; transition: transform .1s, filter .15s; }
.pub-item.posto.occupato {
    filter: grayscale(1) brightness(1.06) opacity(.45);
    cursor: default;
}
/* L'ingrandimento e' una risposta al passaggio del dito o del mouse: dura
   quanto il gesto. La postazione SCELTA invece si segnala e basta — restare
   gonfia mentre si guarda il pannello la fa sembrare bloccata. */
/* !important non e' pigrizia: l'ordine di disegno lo scrive il renderer
   nello stile inline di ogni oggetto (z-index cresce con la fila, o le cose
   davanti finirebbero dietro), e lo stile inline batte sempre una regola di
   foglio. Senza, cio' che si ingrandisce resta sotto al parcheggio che gli
   sta davanti — che e' esattamente il contrario di quello che serve. */
.pub-item.posto.libero:hover { transform: scale(1.14); z-index: 500 !important; }
.pub-item.posto.scelto {
    z-index: 900 !important;
    filter: drop-shadow(0 0 4px var(--arancio)) drop-shadow(0 0 9px rgba(217, 72, 15, .5));
}
.pub-item.posto.scelto:hover { transform: scale(1.14); z-index: 950 !important; }
.pub-map-hint {
    padding: .6rem .35rem .15rem; font-size: .82rem; color: var(--muto);
    /* Niente filetto: il bianco della cornice separa gia', e due segni per la
       stessa cosa fanno un doppio bordo. */
    background: #fff;
}
.pub-map-hint.ok { color: var(--verde); font-weight: 600; }
.pub-map-hint.no { color: #97a3ad; font-weight: 600; }

/* ─── descrizione e contatti ─── */
.pub-about p { line-height: 1.65; max-width: 68ch; }
.pub-contatti { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1rem; }
.pub-contatti a {
    display: inline-flex; align-items: center; gap: .4rem;
    /* BIANCHE, non trasparenti: su una pagina di sabbia una pastiglia col
       fondo della pagina e il bordo beige spariva. */
    background: #fff;
    border: 1px solid rgba(20, 65, 94, .12); border-radius: 10px;
    padding: .5rem .8rem; text-decoration: none; color: var(--testo);
    font-size: .88rem;
}
.pub-contatti a:hover { border-color: var(--blu-chiaro); color: var(--blu); }
.pub-contatti .bi { color: var(--blu-chiaro); }

.pub-footer {
    border-top: 1px solid var(--bordo); margin-top: 1rem;
    padding: 1.2rem var(--fianco); display: flex; justify-content: space-between;
    gap: 1rem; flex-wrap: wrap;
    max-width: var(--colonna); margin-inline: auto;
    font-size: .82rem; color: var(--muto);
}
.pub-footer span { display: block; }
.pub-powered { opacity: .8; }

/* La mappa resta nella colonna di lettura come tutto il resto: una spiaggia
   e' un disegno VERTICALE (venti celle di larghezza, cinquanta di lunghezza),
   e allargare il riquadro non mostra un ombrellone in piu' — aggiunge solo
   sabbia vuota ai lati e disallinea la sezione dalle altre. */

@media (min-width: 720px) {
    /* Solo il respiro VERTICALE cresce. Il fianco resta quello di tutti:
       qui c'era 1.5rem scritto a mano e le sezioni finivano 6px piu' a
       destra della copertina e della barra, che seguono la variabile. */
    .pub-section { padding: 2.4rem var(--fianco); }
    .pub-map-viewport { height: 72vh; }
}

/* ==========================================================================
   IL PERCORSO DI PRENOTAZIONE (Fase 17)
   Sale dal basso come una scheda: sul telefono e' il gesto che si conosce,
   e sul desktop resta una colonna leggibile invece di una pagina nuova.
   ========================================================================== */
.pren-velo {
    position: fixed; inset: 0; z-index: 900;
    background: rgba(12, 34, 48, .45);
    backdrop-filter: blur(2px);
}
.pren {
    position: fixed; z-index: 901;
    left: 0; right: 0; bottom: 0;
    max-height: 92vh;
    display: flex; flex-direction: column;
    background: #fff;
    border-radius: 18px 18px 0 0;
    box-shadow: 0 -10px 40px rgba(10, 30, 45, .3);
    animation: sale var(--f-cambio) var(--f-esce);
}
@keyframes sale { from { transform: translateY(18px); opacity: .6; } }
body.pren-aperta { overflow: hidden; }

.pren-testa {
    display: flex; align-items: start; justify-content: space-between;
    gap: 1rem; padding: 1rem 1.1rem .6rem;
}
.pren-testa h3 { margin: 0; font-size: 1.25rem; }
.pren-occhiello {
    font-size: .7rem; text-transform: uppercase; letter-spacing: .1em;
    color: var(--muto);
}
.pren-chiudi {
    border: 0; background: transparent; font-size: 1.6rem; line-height: 1;
    color: var(--muto); cursor: pointer; padding: 0 .2rem;
}

.pren-passi {
    display: flex; gap: .35rem; padding: 0 1.1rem .7rem;
    font-size: .68rem; text-transform: uppercase; letter-spacing: .06em;
}
.pren-passi .passo {
    flex: 1; text-align: center; padding: .3rem .2rem;
    border-bottom: 2px solid var(--bordo); color: var(--muto);
}
.pren-passi .passo.attivo { color: var(--blu); border-color: var(--blu); font-weight: 700; }
.pren-passi .passo.fatto { color: var(--verde); border-color: var(--verde); }

.pren-corpo { overflow-y: auto; padding: .2rem 1.1rem 1rem; }
.pren-intro { font-size: .88rem; color: var(--muto); margin: .2rem 0 .8rem; }
.pren-nota { font-size: .78rem; color: var(--muto); margin-top: .4rem; }
.pren-attesa { padding: 1.2rem; text-align: center; color: var(--muto); font-size: .88rem; }
.pren-errore {
    margin-top: .6rem; font-size: .84rem; font-weight: 600; color: #c0392b;
}
.pren-corpo label {
    display: block; font-size: .78rem; font-weight: 600;
    color: var(--muto); margin: .7rem 0 .2rem;
}
.pren-corpo input[type="date"],
.pren-corpo input[type="text"],
.pren-corpo input[type="email"],
.pren-corpo input[type="tel"] {
    width: 100%; font: inherit; padding: .6rem .7rem;
    border: 1px solid var(--bordo); border-radius: 10px; color: var(--testo);
}

/* le formule: il prezzo al giorno accanto al totale, che e' il punto */
.opzione {
    display: flex; width: 100%; align-items: center; justify-content: space-between;
    gap: .8rem; margin-bottom: .45rem;
    padding: .7rem .85rem; cursor: pointer; text-align: left;
    background: #fff; border: 1.5px solid var(--bordo); border-radius: 12px;
    font: inherit; color: var(--testo);
}
.opzione:hover { border-color: var(--blu-chiaro); }
.opzione.scelta {
    border-color: var(--blu); background: #f2f8fb;
    box-shadow: 0 0 0 3px rgba(46, 134, 193, .12);
}
.opzione .op-l strong { display: block; }
.opzione .op-gg { font-size: .76rem; color: var(--verde); font-weight: 600; }
.opzione .op-tot { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* gli extra */
.extra-riga {
    display: flex; align-items: center; gap: .6rem;
    padding: .55rem .7rem; margin-bottom: .4rem;
    border: 1px solid var(--bordo); border-radius: 12px; cursor: pointer;
}
.extra-riga:has(input:checked) { border-color: var(--blu); background: #f2f8fb; }
.extra-riga .ex-l { display: flex; align-items: center; gap: .4rem; flex: 1; }
.extra-riga .ex-lib { font-size: .74rem; color: var(--muto); }
.extra-riga .ex-p { font-weight: 600; font-variant-numeric: tabular-nums; }
.extra-riga input { width: 18px; height: 18px; }

/* riepilogo */
.pren-riepilogo {
    background: var(--sabbia); border-radius: 12px;
    padding: .7rem .85rem; margin-bottom: .3rem;
}
.rp-periodo { font-weight: 700; margin-bottom: .4rem; }
.rp-riga {
    display: flex; justify-content: space-between; gap: .8rem;
    font-size: .88rem; padding: .15rem 0;
}
.rp-riga b { font-variant-numeric: tabular-nums; }
.rp-nota { font-size: .76rem; color: var(--muto); margin-top: .5rem; }
/* come si paga (G4, PG-07) */
.pren-metodo { margin-top: .4rem; }
.pren-metodo .ord-modi { grid-template-columns: 1fr 1fr; }
/* la mezza giornata: mattina o pomeriggio */
.pren-meta { grid-template-columns: 1fr 1fr; }
.pren-meta .ord-modo { text-align: center; }
.pren-da-pagare {
    background: #fff3e0; border-radius: 12px; padding: .7rem .9rem;
    font-size: .92rem; width: 100%; max-width: 34ch;
}
.pren-da-pagare b { font-variant-numeric: tabular-nums; }

/* esito */
.pren-fatto { text-align: center; padding: 1.5rem 0; }
.pren-fatto h4 { margin: .2rem 0 .9rem; }
.pren-codice {
    font-size: 1.5rem; font-weight: 700; letter-spacing: .06em;
    font-variant-numeric: tabular-nums; margin: .3rem 0 .6rem;
}
/* il biglietto: dove, quando, quale posto; il taglio; il codice; il timbro.
   Le tacche del taglio hanno il colore del pannello (bianco). */
.pren-biglietto {
    position: relative; display: grid; gap: 4px; width: min(100%, 320px); margin: 0 auto 14px;
    padding: 16px 18px 14px; text-align: left; border-radius: 14px;
    background: var(--f-bruma, #edf2f4); color: var(--f-inchiostro, #0f2433);
}
.pb-dove, .pb-cosa { font-size: 14px; color: var(--f-grigio, #4f6170); }
.pb-posto { font-family: var(--f-titoli); font-weight: 800; font-size: 26px; line-height: 1.05; letter-spacing: -.01em; }
.pb-taglio { position: relative; margin: 8px -18px 6px; border-top: 2px dashed var(--f-linea-forte, #c9d3d9); }
.pb-taglio::before, .pb-taglio::after {
    content: ''; position: absolute; top: -10px; width: 18px; height: 18px; border-radius: 50%; background: #fff;
}
.pb-taglio::before { left: -9px; }
.pb-taglio::after { right: -9px; }
.pb-eti { font-size: 12px; font-weight: 700; color: var(--f-grigio, #4f6170); }
.pren-biglietto .pren-codice {
    margin: 0; font-family: var(--f-mono); font-size: 26px; letter-spacing: .08em; color: var(--f-inchiostro, #0f2433);
}
/* il timbro accanto al codice, dove il biglietto e' vuoto: in alto copriva
   la data e il numero del posto */
.pb-timbro {
    position: absolute; right: 14px; bottom: 18px; padding: 3px 10px; border-radius: 8px;
    border: 3px solid var(--f-verde, #1e8449); color: var(--f-verde, #1e8449);
    font-family: var(--f-titoli); font-weight: 800; font-size: 16px; letter-spacing: .04em; text-transform: uppercase;
    transform: rotate(-8deg); background: rgba(255, 255, 255, .6);
}
.pren-fatto p { color: var(--muto); font-size: .88rem; max-width: 34ch; margin: 0 auto; }

.pren-piede {
    display: flex; align-items: center; gap: .8rem;
    padding: .8rem 1.1rem calc(.8rem + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--bordo); background: #fff;
    border-radius: 0 0 18px 18px;
}
.pren-totale { flex: 1; display: flex; align-items: baseline; gap: .4rem; }
.pren-totale span { font-size: .76rem; color: var(--muto); }
.pren-totale b { font-size: 1.15rem; font-variant-numeric: tabular-nums; }
.pub-btn.ghost.scuro { border-color: var(--bordo); color: var(--testo); background: #fff; }
.pub-btn.ghost.scuro:hover { border-color: var(--blu-chiaro); color: var(--blu); background: #f2f8fb; }
/* L'azione che toglie qualcosa si riconosce prima di premerla: bordo e
   scritta rossi, il pieno rosso resta per la conferma ("Si', annulla"). */
.pub-btn.annulla { background: #fff; color: #c0392b; border: 1px solid #e8b4ad; gap: .4rem; }
.pub-btn.annulla:hover { background: #fdecea; border-color: #c0392b; }

@media (min-width: 720px) {
    .pren {
        left: auto; right: 24px; bottom: 24px; top: 24px;
        width: 420px; max-height: none; border-radius: 18px;
    }
    .pren-piede { border-radius: 0 0 18px 18px; }
}


/* il pagamento, in fondo alla conferma (Fase 18) */
.pren-paga { margin-top: 1.1rem; display: grid; gap: .5rem; justify-items: center; }
.pren-paga .pub-btn { justify-content: center; }
.pub-btn.w-100 { width: 100%; }


/* la seconda porta d'ingresso (AC-07): dalla spiaggia alla propria area */
.pub-area-link {
    color: var(--blu); text-decoration: none; font-weight: 600;
}
.pub-area-link:hover { text-decoration: underline; }
.d-block { display: block; }
.mt-1 { margin-top: .25rem; }


/* AC-06: la proposta di agganciare la prenotazione a un account. Sobria e
   uguale per tutti — se comparisse solo a chi un account ce l'ha, la sua
   presenza direbbe che quell'email e' registrata. */
.pren-aggancia {
    margin-top: 1.4rem; padding-top: 1rem;
    border-top: 1px dashed var(--bordo);
    display: grid; gap: .6rem; justify-items: center;
}
.pren-aggancia .pa-testo {
    font-size: .82rem; color: var(--muto); max-width: 38ch; text-align: center;
}

/* ─── il menu' del bar, letto prima di prenotare (Fase 24, CL-13) ─── */
/* Una colonna sola, larga quanto la sezione: aprendo il menu' la riga e la
   carta devono formare UN pannello, e in una griglia a piu' colonne la
   carta sarebbe finita sotto tutte le righe invece che sotto la sua.
   Larga tutta: stretta a 780 il pannello galleggiava in mezzo alla pagina
   mentre tutte le altre sezioni arrivavano ai bordi. */
.men-locali { display: grid; gap: .5rem; grid-template-columns: 1fr; }
.men-locale {
    display: flex; align-items: center; gap: .85rem; width: 100%;
    /* Stessa tessera delle schede di "Cosa trovi": un bar e un ombrellone
       sono due cose che lo stabilimento offre, e devono somigliarsi. Erano
       beige tutti e due quando la pagina era bianca; ora la pagina e' di
       sabbia e sono bianchi tutti e due. La sabbia resta al menu APERTO, che
       cosi' si distingue ancora meglio di prima: testata di sabbia, carta
       bianca sotto, un oggetto solo. */
    background: #fff;
    border: 1px solid rgba(20, 65, 94, .1); border-radius: 14px;
    box-shadow: 0 2px 10px rgba(20, 65, 94, .06);
    padding: .95rem 1.1rem; cursor: pointer; text-align: left; font: inherit;
    transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.men-locale:hover {
    border-color: var(--blu-chiaro); transform: translateY(-2px);
    box-shadow: 0 10px 26px rgba(20, 65, 94, .13);
}
.men-locale.aperto { border-color: var(--blu); background: var(--sabbia); }
/* L'icona del locale su un disco bianco, come il bollo delle schede sopra. */
.men-locale > i:first-child {
    font-size: 1.15rem; color: var(--blu-chiaro); flex: none;
    display: inline-grid; place-items: center;
    width: 38px; height: 38px; border-radius: 12px;
    background: linear-gradient(160deg, #fdf8ee, var(--sabbia-scura));
    border: 1px solid var(--sabbia-scura);
}
.men-locale span { flex: 1; display: grid; line-height: 1.3; }
.men-locale span span { font-size: .8rem; color: var(--muto); }

.men-carta {
    margin: -1px 0 0; background: #fff;
    border: 1px solid var(--sabbia-scura); border-top: 0;
    border-radius: 0 0 14px 14px; padding: .3rem 1.2rem 1.2rem;
}
/* LA CARTA.
   Non una griglia di tessere: una carta stampata. Tessere di larghezza
   diversa mandavano i prezzi a finire ognuno a un'altezza sua, e l'occhio
   non trovava piu' niente. Qui e' una colonna sola, righe una sotto l'altra,
   i prezzi incolonnati SEMPRE nello stesso punto, e il filetto puntinato che
   porta dal nome del piatto al suo prezzo — come si stampano i menu' da
   cinquant'anni, perche' si leggono scorrendo il dito lungo una colonna.

   La larghezza e' quella di una carta, non quella della pagina: a 1240 il
   filetto sarebbe stato lungo un metro. */
/* LA FISARMONICA.
   Aperta, la riga e la carta sono lo stesso oggetto: la riga perde gli
   angoli tondi in basso e il bordo di sotto, la carta li perde in alto e
   sale di un pixel a coprire la cucitura. Prima erano due riquadri con un
   centimetro di bianco in mezzo, e sembravano due cose diverse. */
.men-locale.aperto {
    border-radius: 14px 14px 0 0;
    /* Lo stesso bordo della carta sotto, non il blu: con due colori il
       pannello cambiava tinta a meta' altezza e tornava a sembrare due
       oggetti. Che sia aperto lo dicono il fondo e la freccia girata.
       Il fondo e' AZZURRO e non di sabbia: da quando la pagina e' spiaggia,
       una testata color sabbia su fondo sabbia spariva, e restava una carta
       bianca che sembrava cominciare dal nulla. L'azzurro e' lo stesso di
       .opzione.scelta — nel resto del prodotto "acceso" si dice cosi'. */
    border-color: var(--sabbia-scura);
    border-bottom-color: transparent;
    background: #f2f8fb;
    transform: none; box-shadow: none;   /* aperto non si solleva: e' una testata */
}
.men-locale.aperto:hover { border-color: var(--sabbia-scura); transform: none; box-shadow: none; }
.men-locale .men-freccia { transition: transform .2s ease; }
.men-locale.aperto .men-freccia { transform: rotate(180deg); }

/* Le due colonne dei prezzi: la stessa griglia per l'intestazione e per ogni
   riga, o l'incolonnamento non regge. La larghezza fissa e' quella di
   "999,00 €": il prezzo piu' lungo che ha senso in un bar di spiaggia. */
.men-legenda,
.men-sezione li {
    display: grid; align-items: baseline;
    grid-template-columns: 1fr 4.6rem;
    column-gap: .5rem;
}
.men-legenda.due, .men-sezione ul.due-prezzi li {
    grid-template-columns: 1fr 4.6rem 4.6rem;
}
/* In spiaggia la carta ha una colonna in piu': il bottone per aggiungere al
   carrello. Da casa non c'e' — si legge e basta — ed e' giusto che la
   griglia lo sappia invece di lasciarlo traboccare fuori dalla riga. */
.men-sezione ul.con-piu li { grid-template-columns: 1fr 4.6rem 2.4rem; }
.men-sezione ul.con-piu.due-prezzi li { grid-template-columns: 1fr 4.6rem 4.6rem 2.4rem; }
.men-sezione ul.con-piu .men-piu { justify-self: end; align-self: center; }
.men-legenda {
    margin: .55rem 0 0; font-size: .68rem; color: var(--muto);
    /* NIENTE maiuscoletto spaziato: "OMBRELLONE" cosi' misura 87px e la sua
       colonna ne ha 69, quindi sbordava sopra la parola accanto. In tondo e
       minuscolo ci sta, e per un'intestazione di colonna basta. */
    padding-bottom: .3rem; border-bottom: 1px solid var(--sabbia-scura);
}
.men-legenda > span + span {
    text-align: right; display: inline-flex; align-items: center;
    justify-content: flex-end; gap: .25rem;
}
.men-legenda .bi { font-size: .72rem; }
.men-legenda > span:nth-child(2) .bi { color: var(--blu-chiaro); }
.men-legenda > span:nth-child(3) { color: var(--arancio); }

.men-sezione { margin-top: 1.1rem; }
.men-sezione h4 {
    display: flex; align-items: center; gap: .4rem;
    font-size: .72rem; text-transform: uppercase; letter-spacing: .09em;
    color: var(--blu); margin: 0 0 .35rem;
}
.men-sezione h4 .bi { color: var(--arancio); font-size: .85rem; }
/* Il filetto del titolo arriva fino in fondo, sopra le colonne dei prezzi:
   e' quello che tiene insieme la sezione. */
.men-sezione h4::after {
    content: ''; flex: 1; height: 1px; background: var(--sabbia-scura);
    margin-left: .2rem;
}

.men-sezione ul { list-style: none; margin: 0; padding: 0; }
.men-sezione li { padding: .3rem 0; }
.men-sezione li + li { border-top: 1px solid #f4efe4; }

/* Il filetto puntinato: sta nel flusso, quindi si allunga da solo fino alla
   colonna dei prezzi qualunque sia la lunghezza del nome. */
.men-nome { display: flex; align-items: baseline; gap: .45rem; min-width: 0; }
.men-nome::after {
    content: ''; flex: 1 0 1.2rem;
    border-bottom: 1px dotted #d8cdb6; transform: translateY(-.22rem);
}
.men-nome img {
    width: 30px; height: 30px; border-radius: 6px; object-fit: cover;
    flex: none; align-self: center; border: 1px solid var(--sabbia-scura);
}
.men-testo { display: grid; line-height: 1.3; min-width: 0; }
.men-testo strong { font-size: .87rem; font-weight: 600; }
.men-desc { font-size: .74rem; color: var(--muto); }
.men-allergeni {
    display: inline-flex; align-items: center; gap: .25rem;
    font-size: .68rem; color: #9a6206;
}
.men-allergeni .bi { font-size: .66rem; }

.men-eur {
    text-align: right; font-size: .84rem; font-weight: 700;
    font-variant-numeric: tabular-nums; letter-spacing: -.01em;
    white-space: nowrap;
}
.men-eur-2 { color: var(--arancio); }
.men-eur-no { color: var(--muto); font-weight: 400; }

/* Sul telefono la seconda colonna si stringe: 4.6rem due volte piu' il nome
   non ci stanno, e il primo a cedere sarebbe il nome del piatto. */
@media (max-width: 480px) {
    .men-legenda.due, .men-sezione ul.due-prezzi li {
        grid-template-columns: 1fr 3.9rem 3.9rem;
    }
    .men-legenda { font-size: .62rem; }
    .men-eur { font-size: .8rem; }
}

/* ─── ordinare (Fase 25) ─── */
.men-piu {
    flex-shrink: 0; width: 34px; height: 34px; border-radius: 10px;
    border: 1px solid var(--blu); background: #fff; color: var(--blu);
    font-size: 1.2rem; line-height: 1; cursor: pointer;
    transition: background .15s, color .15s, transform .15s;
}
.men-piu:hover { background: var(--blu); color: #fff; }
.men-piu.fatto { background: var(--verde); border-color: var(--verde); color: #fff; transform: scale(1.12); }

/* la barra del carrello: sempre a portata di pollice */
.ord-barra {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    padding: .7rem 1rem calc(.7rem + env(safe-area-inset-bottom));
    background: linear-gradient(180deg, rgba(20,65,94,0) 0%, rgba(20,65,94,.16) 100%);
    pointer-events: none;
}
.ord-apri {
    pointer-events: auto;
    display: flex; align-items: center; gap: .7rem; width: 100%;
    max-width: 520px; margin: 0 auto;
    background: var(--blu); color: #fff; border: 0; border-radius: 999px;
    padding: .85rem 1.2rem; font: inherit; font-weight: 600; cursor: pointer;
    box-shadow: 0 8px 24px rgba(20, 65, 94, .35);
}
.ord-apri span:nth-child(2) { flex: 1; text-align: left; }
.ord-conta {
    background: #fff; color: var(--blu); border-radius: 999px;
    min-width: 26px; height: 26px; display: grid; place-items: center;
    font-weight: 700; font-size: .85rem;
}

.ord-velo {
    position: fixed; inset: 0; z-index: 45;
    background: rgba(15, 30, 40, .5); backdrop-filter: blur(2px);
}
.ord, .ord-fatto {
    position: fixed; z-index: 50; background: #fff;
    left: 50%; transform: translateX(-50%); bottom: 0;
    width: min(520px, 100%); max-height: 92vh; overflow-y: auto;
    border-radius: 20px 20px 0 0; padding: 1.2rem 1.2rem calc(1.2rem + env(safe-area-inset-bottom));
}
.ord-testa { display: flex; align-items: center; justify-content: space-between; }
.ord-testa h3 { margin: 0; font-size: 1.2rem; }
.ord-chiudi {
    border: 0; background: none; font-size: 1.8rem; line-height: 1;
    color: var(--muto); cursor: pointer;
}
.ord-passo { margin-top: 1.1rem; }
.ord-passo h4 {
    font-size: .78rem; text-transform: uppercase; letter-spacing: .07em;
    color: var(--muto); margin: 0 0 .5rem;
}

.ord-riga {
    display: flex; align-items: center; gap: .7rem;
    padding: .55rem 0; border-bottom: 1px solid var(--sabbia-scura);
}
.ord-riga.fuori { opacity: .7; }
.ord-riga-testo { flex: 1; display: grid; line-height: 1.3; min-width: 0; }
.ord-riga-testo span { font-size: .8rem; color: var(--muto); }
.ord-avvertenza { color: var(--arancio) !important; }
.ord-quanti { display: flex; align-items: center; gap: .3rem; }
.ord-quanti button {
    width: 32px; height: 32px; border-radius: 8px; border: 1px solid var(--sabbia-scura);
    background: #fff; font-size: 1.05rem; line-height: 1; cursor: pointer;
}
.ord-quanti button:hover { border-color: var(--blu); }
.ord-quanti span { min-width: 22px; text-align: center; font-weight: 700; }
.ord-riga-tot { min-width: 68px; text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
.ord-vuoto { color: var(--muto); padding: .8rem 0; }

.ord-modi { display: grid; gap: .5rem; }
.ord-modo {
    display: grid; text-align: left; gap: .1rem; width: 100%;
    border: 1px solid var(--sabbia-scura); border-radius: 12px;
    background: #fff; padding: .7rem .9rem; cursor: pointer; font: inherit;
}
.ord-modo span { font-size: .8rem; color: var(--muto); }
.ord-modo.scelto { border-color: var(--blu); background: var(--sabbia); }
.ord-dove { margin-top: .7rem; display: grid; gap: .3rem; }
.ord-dove label, .ord-nota-label { font-size: .82rem; color: var(--muto); }
.ord input[type="text"], .ord input[type="tel"] {
    width: 100%; border: 1px solid var(--sabbia-scura); border-radius: 10px;
    padding: .6rem .8rem; font: inherit;
}
.ord input[type="tel"] { margin-top: .5rem; }
.ord-nota-label { display: block; margin-top: .7rem; }

.ord-errore {
    margin-top: .9rem; background: #fdecea; color: #8a2318;
    border-radius: 10px; padding: .6rem .8rem; font-size: .88rem;
}
.ord-piede { margin-top: 1.2rem; display: grid; gap: .6rem; }
.ord-totale-riga {
    display: flex; justify-content: space-between; align-items: baseline;
    font-size: 1.05rem;
}
.ord-totale-riga strong { font-size: 1.3rem; }
.pub-btn.large { width: 100%; padding: .85rem; font-size: 1.05rem; }
.ord-tempo { text-align: center; font-size: .8rem; color: var(--muto); }

/* ─── l'ordine mandato: il numero, come il totem ─── */
.ord-fatto { text-align: center; }
.ord-fatto-dentro { display: grid; gap: .7rem; justify-items: center; padding: .8rem 0; }
.ord-numero-grande {
    font-family: 'Bricolage Grotesque', 'Segoe UI', system-ui, sans-serif; font-weight: 700; font-size: 3.4rem;
    line-height: 1; color: #fff; background: var(--blu);
    min-width: 108px; padding: .5rem 1rem; border-radius: 18px;
    font-variant-numeric: tabular-nums;
}
.ord-fatto h3 { margin: 0; font-size: 1.35rem; }
.ord-fatto p { margin: 0; color: var(--muto); font-size: .9rem; }
.ord-tappe { display: grid; gap: .4rem; justify-items: start; margin: .6rem 0; }
.ord-tappa { display: flex; align-items: center; gap: .6rem; color: var(--muto); font-size: .92rem; }
.ord-punto {
    width: 11px; height: 11px; border-radius: 50%;
    border: 2px solid var(--sabbia-scura); background: #fff;
}
.ord-tappa.fatta { color: var(--testo); }
.ord-tappa.fatta .ord-punto { background: var(--verde); border-color: var(--verde); }
.ord-tappa.ora { font-weight: 700; }
.ord-tappa.ora .ord-punto { animation: ord-battito 1.6s infinite; }
@keyframes ord-battito {
    0%, 100% { box-shadow: 0 0 0 0 rgba(30, 132, 73, .5); }
    60% { box-shadow: 0 0 0 6px rgba(30, 132, 73, 0); }
}
.ord-avviso {
    display: grid; gap: .5rem; justify-items: center;
    background: var(--sabbia); border-radius: 12px; padding: .8rem 1rem;
    font-size: .88rem; width: 100%;
}
/* Annullare l'ordine (G4): il bottone e la sua conferma, nello stesso posto.
   Nessuna finestra sopra la finestra: si chiede li' dove si e' toccato. */
.ord-annulla { display: grid; gap: .45rem; justify-items: center; width: 100%; }
.ord-annulla .ord-annulla-riga { display: flex; gap: .5rem; justify-content: center; flex-wrap: wrap; }
.ord-annulla strong { font-size: .92rem; }
.pub-btn.pericolo { background: #c0392b; border: 0; color: #fff; cursor: pointer; }
.pub-btn.pericolo:hover { background: #a93226; }
.ord-sotto { font-size: .86rem; color: var(--muto); }
.ord-fatto .ord-errore { width: 100%; margin-top: 0; }

/* ─── la mail dimostrata col codice (G4, CL-15) ─── */
.vf { display: grid; gap: .55rem; }
.vf-titolo { font-weight: 700; font-size: 1.05rem; }
.vf-sotto { margin: 0; color: var(--muto); font-size: .88rem; }
.vf-label { font-size: .82rem; color: var(--muto); }
.vf-campo {
    width: 100%; border: 1px solid var(--sabbia-scura); border-radius: 10px;
    padding: .65rem .8rem; font: inherit; background: #fff;
}
.vf-cifre {
    font-size: 1.6rem; letter-spacing: .45em; text-align: center;
    font-variant-numeric: tabular-nums; padding-left: .45em;
}
.vf-errore {
    background: #fdecea; color: #8a2318; border-radius: 10px;
    padding: .55rem .8rem; font-size: .86rem;
}
.vf-prova {
    background: #fff3cd; color: #6b4e00; border-radius: 10px;
    padding: .55rem .8rem; font-size: .84rem;
}
.vf-riga { display: flex; justify-content: center; gap: 1.2rem; }
.vf-link {
    border: 0; background: none; color: var(--blu); font: inherit;
    font-weight: 600; font-size: .88rem; cursor: pointer; padding: .3rem;
}
.vf-privacy { justify-self: center; font-size: .78rem; color: var(--muto); }
/* il cuoricino della spiaggia (G5, CL-17) */
.pub-btn.cuore.si { background: rgba(255, 255, 255, .95); color: #c0392b; }
.pub-btn.cuore.si:hover { background: #fff; }

/* ─── la galleria del locale (G6, RS-12; galleria.js) ─── */
.gal {
    display: grid; grid-template-columns: repeat(var(--gal-n, 4), minmax(0, 1fr));
    gap: .4rem; margin: .8rem 0;
}
.gal-foto {
    position: relative; padding: 0; border: 0; border-radius: 10px; overflow: hidden;
    aspect-ratio: 4 / 3; cursor: pointer; background: var(--sabbia-scura);
}
.gal-foto img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .2s; }
.gal-foto:hover img { transform: scale(1.04); }
.gal-altre {
    position: absolute; inset: 0; display: grid; place-items: center;
    background: rgba(20, 65, 94, .55); color: #fff; font-weight: 700; font-size: 1.2rem;
}
.gal-visore {
    position: fixed; inset: 0; z-index: 2000; background: rgba(10, 20, 28, .94);
    display: flex; align-items: center; justify-content: center;
}
.gal-grande {
    max-width: calc(100vw - 32px); max-height: calc(100vh - 110px);
    object-fit: contain; border-radius: 6px; user-select: none;
}
.gal-chiudi, .gal-freccia {
    position: absolute; border: 0; color: #fff; cursor: pointer;
    background: rgba(255, 255, 255, .14); border-radius: 50%;
    display: grid; place-items: center;
}
.gal-chiudi { top: 12px; right: 14px; width: 44px; height: 44px; font-size: 1.6rem; line-height: 1; }
.gal-freccia { top: 50%; transform: translateY(-50%); width: 48px; height: 48px; font-size: 1.3rem; }
.gal-chiudi:hover, .gal-freccia:hover { background: rgba(255, 255, 255, .26); }
.gal-prima { left: 12px; }
.gal-dopo { right: 12px; }
.gal-conta {
    position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%);
    color: rgba(255, 255, 255, .85); font-size: .9rem; font-variant-numeric: tabular-nums;
}
body.gal-aperta { overflow: hidden; }

/* la mail gia' dimostrata, dentro un modulo (Verifica.riga) */
.vf-mia {
    display: flex; align-items: center; flex-wrap: wrap; gap: .2rem .45rem;
    margin-top: .55rem; font-size: .88rem; color: var(--muto);
}
.vf-mia .bi { color: var(--verde); }
.vf-mia strong { color: var(--testo); font-weight: 600; overflow-wrap: anywhere; }
.vf-mia .vf-link { margin-left: auto; padding: .15rem .3rem; }

/* ─── i tavoli del locale, lato cliente (Fase 26 rivista) ─── */
.men-schede { display: flex; gap: .4rem; margin: .8rem 0 .2rem; }
.men-scheda {
    border: 0; background: none; font: inherit; font-weight: 600;
    color: var(--muto); padding: .4rem .1rem; cursor: pointer;
    border-bottom: 2px solid transparent; margin-right: .9rem;
}
.men-scheda.attiva { color: var(--blu); border-bottom-color: var(--blu); }

.sala-turni { display: flex; flex-wrap: wrap; gap: .5rem; margin: .9rem 0; }
.sala-turno {
    display: grid; text-align: left; gap: .05rem;
    border: 1px solid var(--sabbia-scura); border-radius: 12px;
    background: #fff; padding: .5rem .8rem; cursor: pointer; font: inherit;
}
.sala-turno span { font-size: .78rem; color: var(--muto); }
.sala-turno.scelto { border-color: var(--blu); background: var(--sabbia); }

.sala-zona { margin-top: 1.1rem; }
.sala-zona h5 {
    font-size: .78rem; text-transform: uppercase; letter-spacing: .07em;
    color: var(--blu); margin: 0 0 .5rem;
    display: flex; align-items: baseline; justify-content: space-between; gap: .5rem;
}
.sala-zona h5 span {
    text-transform: none; letter-spacing: 0; font-weight: 500;
    color: var(--muto); font-size: .8rem;
}
.sala-griglia {
    display: grid; gap: .5rem;
    grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
}
.sala-posto {
    display: grid; justify-items: center; gap: .1rem;
    border: 1px solid var(--sabbia-scura); border-radius: 12px;
    background: #fff; padding: .6rem .3rem; cursor: pointer; font: inherit;
}
.sala-posto.libero { border-color: #b7e1c8; background: #f4fbf6; }
.sala-posto.libero:hover { border-color: var(--verde); }
/* Preso non sparisce: chi guarda deve capire che il locale e' pieno, non che
   e' vuoto. */
.sala-posto.preso { background: var(--sabbia); opacity: .6; cursor: not-allowed; }
.sala-numero {
    font-family: 'Bricolage Grotesque', 'Segoe UI', system-ui, sans-serif; font-weight: 700; font-size: 1.15rem;
    line-height: 1.1; font-variant-numeric: tabular-nums;
}
.sala-posto.libero .sala-numero { color: #14663a; }
.sala-posto.preso .sala-numero { color: var(--muto); }
.sala-posti { font-size: .72rem; color: var(--muto); }

.sala-legenda {
    display: flex; flex-wrap: wrap; gap: .9rem; align-items: center;
    margin-top: .9rem; font-size: .8rem; color: var(--muto);
}
.sala-legenda span { display: flex; align-items: center; gap: .35rem; }
.sala-bollo { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.sala-bollo.libero { background: var(--verde); }
.sala-bollo.preso { background: var(--muto); }
.sala-nota { font-style: italic; }

.tav-riepilogo { display: grid; gap: .4rem; }
.tav-voce { display: flex; align-items: center; gap: .5rem; font-size: .92rem; }
.tav-voce i { color: var(--muto); }

/* Da casa il menù si legge; per ordinare bisogna essere in spiaggia. */
.men-invito {
    display: flex; align-items: center; gap: .8rem; margin-top: 1.2rem;
    padding: .9rem 1rem; border-radius: 14px; text-decoration: none;
    background: var(--sabbia); border: 1px solid var(--sabbia-scura); color: var(--testo);
}
.men-invito:hover { border-color: var(--blu); }
.men-invito > i:first-child { font-size: 1.4rem; color: var(--blu); }
.men-invito span { flex: 1; font-size: .86rem; color: var(--muto); }
.men-invito strong { display: block; color: var(--testo); font-size: .95rem; }

/* ─── la richiesta di tavolo (G6): quanti, quando, dove; il tavolo lo
   sceglie il locale ─── */
.rt-locale {
    font-size: .7rem; text-transform: uppercase; letter-spacing: .1em;
    color: var(--muto); font-weight: 700;
}
.rt-campo {
    width: 100%; border: 1px solid var(--sabbia-scura); border-radius: 10px;
    padding: .6rem .8rem; font: inherit; background: #fff; margin-bottom: .5rem;
}
.rt-turni { margin-top: .2rem; }
.rt-chiuso { color: var(--muto); font-size: .9rem; padding: .4rem 0; }
.rt-persone { display: inline-flex; align-items: center; gap: .9rem; }
.rt-persone button {
    width: 40px; height: 40px; border-radius: 10px; border: 1px solid var(--sabbia-scura);
    background: #fff; font-size: 1.2rem; line-height: 1; cursor: pointer;
}
.rt-persone button:hover { border-color: var(--blu); }
.rt-persone strong { min-width: 2ch; text-align: center; font-size: 1.3rem; font-variant-numeric: tabular-nums; }
.rt-zone { display: flex; flex-wrap: wrap; gap: .45rem; }
.rt-zona {
    border: 1px solid var(--sabbia-scura); background: #fff; border-radius: 999px;
    padding: .45rem .9rem; font: inherit; font-size: .9rem; cursor: pointer;
}
.rt-zona:hover { border-color: var(--blu-chiaro); }
.rt-zona.scelta { border-color: var(--blu); background: var(--sabbia); font-weight: 600; }
.rt-stato {
    display: inline-block; margin-top: .9rem; padding: .3rem .8rem; border-radius: 999px;
    font-weight: 700; font-size: .85rem; background: var(--sabbia); color: var(--testo);
}
.rt-stato.si { background: #d5f5e3; color: #14663a; }
.rt-stato.no { background: #fdecea; color: #8a2318; }
.rt-righe { display: grid; gap: .45rem; margin: .9rem 0; font-size: .95rem; }
.rt-righe .bi { color: var(--blu-chiaro); margin-right: .5rem; }
.rt-nota {
    background: var(--sabbia); border-radius: 12px; padding: .7rem .9rem;
    font-size: .92rem; margin-bottom: .6rem;
}
.rt .ord-annulla { margin: .6rem 0; }
.men-tavolo { margin: 0 0 .9rem; }
.men-tavolo .pub-btn { gap: .45rem; }