/* ═══════════════════════════════════════════════════════════════════════
   bentuemare.com — lo stesso vestito della GUIDA OSPITI e della pagina di
   registrazione: palette abisso/onda/schiuma/sabbia/corallo, Fraunces per i
   titoli e Karla per il testo, e l'ORIZZONTE come elemento firma — il cielo
   che cambia con l'ora vera, l'astro che sorge e tramonta, le onde.

   La classe del momento (alba/giorno/tramonto/notte) la mette comune.js sul
   <body>, con la stessa regola oraria della guida e del modulo.
   ═══════════════════════════════════════════════════════════════════════ */

@font-face{font-family:'Fraunces';src:url('./fraunces-var.woff2') format('woff2-variations');font-weight:100 900;font-display:swap;}
@font-face{font-family:'Karla';src:url('./karla-var.woff2') format('woff2-variations');font-weight:200 800;font-display:swap;}

:root{
  --abisso:#0F3B43; --onda:#14525E; --onda-chiara:#2C7A8C; --schiuma:#7FB3B8;
  --sabbia:#EFE6D4; --sabbia-chiara:#FCFAF4; --sabbia-scura:#E7DCC6;
  --corallo:#E2674C; --corallo-scuro:#C8503A; --oro:#DCC9A4;
  /* Il corallo di marca sotto il testo piccolo non arriva a 4.5:1 (2.7 sulla
     sabbia, 3.3 col bianco sopra). Queste sono le sue varianti leggibili:
     --corallo-testo per le scritte sui fondi chiari, --corallo-chiaro sul
     blu della sezione scura, --corallo-bottone come fondo col testo chiaro
     sopra. Il pannello host ha le sue regole e non le usa. */
  --corallo-testo:#AE422D; --corallo-chiaro:#F08A70; --corallo-bottone:#C24A34; --corallo-bottone-scuro:#A43A27;
  --oro-stelle:#B8862B; --schiuma-chiara:#9CC5C9; --tenue-piede:#4F5A5C;
  --inchiostro:#273133; --tenue:#5A6668; --bordo:#E7DCC6;
  /* Il bordo di campi, tendine e contatori: --bordo e` 1,3:1 sulla carta,
     e un campo si deve vedere (3:1 su ogni sabbia, carta e bianco). E il colore
     dell'anello di focus: il corallo di marca fa 2,7:1 sulla sabbia; sulle
     sezioni scure lo cambia .sezione.scura. */
  --bordo-campo:#837A6E; --anello:var(--corallo-testo);
  --ok:#2E7D5B; --ok-fondo:#E6F3EC; --err:#A6392F; --err-fondo:#FBEEEC; --avviso-fondo:#FDF3EF;
  --cielo-1:#0F3B43; --cielo-2:#2C7A8C; --astro:#F4E3B8; --astro-glow:rgba(244,227,184,.45);
  --display:'Fraunces',Georgia,'Times New Roman',serif;
  --testo-font:'Karla',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --curva:cubic-bezier(.22,1,.36,1);
  --raggio:16px; --raggio-s:12px;
  --ombra:0 18px 40px -22px rgba(15,59,67,.45);
  --larghezza:1120px;
}
body.ora-alba    { --cielo-1:#2A4A63; --cielo-2:#E0906B; --astro:#FFD9A8; --astro-glow:rgba(255,183,130,.5); }
body.ora-giorno  { --cielo-1:#0F3B43; --cielo-2:#57A5B4; --astro:#FBF3D8; --astro-glow:rgba(251,243,216,.45); }
body.ora-tramonto{ --cielo-1:#1E3A55; --cielo-2:#E2674C; --astro:#FFCC8A; --astro-glow:rgba(226,103,76,.55); }
body.ora-notte   { --cielo-1:#071E29; --cielo-2:#123A47; --astro:#E8EEF2; --astro-glow:rgba(232,238,242,.32); }

*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--sabbia);color:var(--inchiostro);font-family:var(--testo-font);font-size:17px;line-height:1.6;min-height:100vh;display:flex;flex-direction:column}
img{max-width:100%;display:block}
a{color:var(--onda)}
h1,h2,h3{font-family:var(--display);font-weight:500;color:var(--abisso);line-height:1.12;margin:0 0 .5em;letter-spacing:0}
h1{font-size:clamp(34px,5vw,52px);font-weight:300}
h2{font-size:clamp(26px,3.4vw,36px)}
h3{font-size:21px}
p{margin:0 0 1em}
.sub{color:var(--tenue)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
[hidden]{display:none!important}
.contenitore{width:min(100% - 40px,var(--larghezza));margin-inline:auto}
main{flex:1}

/* ── Occhiello / etichette ─────────────────────────────────────────── */
.occhiello{font-size:11px;letter-spacing:.3em;text-transform:uppercase;font-weight:600;color:var(--corallo-testo);margin:0 0 12px}
.sezione.scura .occhiello{color:var(--corallo-chiaro)}
.filo{width:58px;height:1px;background:var(--corallo);border:0;margin:18px 0}
.centro{text-align:center}
.centro .filo{margin-inline:auto}

/* ── Navigazione ───────────────────────────────────────────────────── */
/* ⚠️ `backdrop-filter` NON entra nella transizione. Per ognuno di quei 350ms
   il compositore deve rifotografare e sfocare TUTTA la pagina dietro la barra,
   e accenderlo o spegnerlo gli fa ricostruire i livelli: cioe` ridipingere
   l'intera pagina. Si vedeva tornando di scatto in cima — la classe cade sotto
   i 40px — come un lampeggio di tutti i riquadri insieme. Cosi` scatta e basta. */
.nav{position:fixed;top:0;left:0;right:0;z-index:50;transition:background .35s ease,box-shadow .35s ease}
.nav-inner{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:14px 0;width:min(100% - 40px,var(--larghezza));margin-inline:auto}
.marchio{font-family:var(--display);font-weight:400;font-size:22px;color:var(--sabbia-chiara);text-decoration:none;letter-spacing:.01em;font-variation-settings:'SOFT' 40,'WONK' 1;white-space:nowrap}
.nav-link{display:flex;gap:6px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
.nav-link a{color:var(--sabbia);text-decoration:none;font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;padding:8px 10px;border-radius:999px;opacity:.9}
.nav-link a:hover{opacity:1;background:rgba(252,250,244,.12)}
.nav-link a.cta{background:var(--corallo-bottone);color:#fff;opacity:1;padding:9px 16px}
.nav-link a.cta:hover{background:var(--corallo-bottone-scuro)}
.nav.solida{background:rgba(15,59,67,.92);backdrop-filter:blur(10px);box-shadow:0 8px 30px -18px rgba(0,0,0,.5)}
.nav.scura{background:var(--abisso)}
.lang{background:rgba(252,250,244,.14);border:1px solid rgba(252,250,244,.28);border-radius:999px;color:var(--sabbia);font:600 11px/1 var(--testo-font);letter-spacing:.12em;text-transform:uppercase;padding:9px 13px;cursor:pointer}
.lang:hover{background:rgba(252,250,244,.24)}
/* Il menu delle quattro lingue: lo costruisce comune.js accanto al
   bottone, che da solo dice quella di adesso. */
.lang-box{position:relative;display:inline-flex}
.lang-menu{position:absolute;top:calc(100% + 8px);right:0;z-index:60;display:flex;flex-direction:column;min-width:148px;
  background:var(--sabbia-chiara);border:1px solid var(--bordo);border-radius:12px;padding:6px;
  box-shadow:0 14px 34px -14px rgba(15,59,67,.45)}
.lang-menu button{background:none;border:0;cursor:pointer;text-align:left;padding:9px 12px;border-radius:8px;
  font:500 14px var(--testo-font);color:var(--abisso);letter-spacing:0;text-transform:none}
.lang-menu button:hover{background:var(--sabbia)}
.lang-menu button.attiva{font-weight:700;color:var(--onda)}
.lang-menu button.attiva::after{content:' ✓';color:var(--corallo-testo)}
@media (max-width:720px){
  .nav-link a:not(.cta):not(.lang){display:none}
  .nav-inner{padding:10px 0}
  /* Dietro un fondo quasi opaco la sfocatura non si distingue, ma sul telefono
     e` il pezzo che costa di piu`: qui si toglie del tutto. */
  .nav.solida{background:rgba(15,59,67,.97);-webkit-backdrop-filter:none;backdrop-filter:none}
}
/* Sotto i 360px il nome, la lingua e «Prenota» non stanno su una riga: il
   nome andava a capo su due righe e i due bottoni si impilavano. Si stringe
   tutto di poco, senza togliere niente. */
@media (max-width:359px){
  .nav-inner{gap:10px}
  .marchio{font-size:19px}
  .lang{padding:8px 10px}
  .nav-link a.cta{padding:9px 12px}
}

/* ── Orizzonte (copertina) ─────────────────────────────────────────── */
.orizzonte{position:relative;overflow:hidden;background:linear-gradient(178deg,var(--cielo-1) 0%,var(--cielo-2) 100%);transition:background 1.2s ease;color:var(--sabbia-chiara);text-align:center;display:flex;flex-direction:column;justify-content:center;min-height:100svh;padding:120px 20px 0}
.orizzonte.bassa{min-height:52svh;padding-top:110px}
.orizzonte::before{content:'';position:absolute;width:104px;height:104px;border-radius:50%;background:var(--astro);box-shadow:0 0 80px 30px var(--astro-glow);left:50%;transform:translateX(-50%);top:9%;z-index:1;transition:top 1.2s ease,background 1.2s ease;opacity:0;animation:sorgi 1.6s ease .2s forwards;filter:blur(6px)}
body.ora-alba .orizzonte::before{top:71%}
body.ora-tramonto .orizzonte::before{top:73%}
body.ora-notte .orizzonte::before{top:8%}
.orizzonte.bassa::before{width:78px;height:78px}
@keyframes sorgi{to{opacity:1}}
/* ⚠️ Le due regole qui sopra (ombra + filtro) sono ormai solo il RIPIEGO
   per i browser senza `color-mix()`. Il sole vero e` il blocco qui sotto:
   due sfumature radiali che rifanno lo stesso disegno senza il reticolo di
   quadrati che l'ombra da 80px lasciava attorno all'alone (il browser la
   calcola tessera per tessera, e le tessere non combaciavano). Lo scrive
   `tools/genera_orizzonte.js`, dove c'e` anche il perche' dei numeri: si
   cambia li`. Il `top` dell'ora e l'ingresso (`sorgi`) valgono per tutti e
   due. */
/* sole:inizio — generato da tools/genera_orizzonte.js: si cambia lì, non qui */
@supports (background:color-mix(in srgb,red 50%,transparent)){
.orizzonte::before{width:380px;height:380px;margin-top:-138px;box-shadow:none;filter:none;background:radial-gradient(circle 190px,var(--astro) 30px,color-mix(in srgb,var(--astro) 98.5%,transparent) 38.5px,color-mix(in srgb,var(--astro) 94.4%,transparent) 42px,color-mix(in srgb,var(--astro) 88%,transparent) 44.5px,color-mix(in srgb,var(--astro) 77.6%,transparent) 47px,color-mix(in srgb,var(--astro) 60.2%,transparent) 50px,color-mix(in srgb,var(--astro) 28.3%,transparent) 55px,color-mix(in srgb,var(--astro) 16.1%,transparent) 57.5px,color-mix(in srgb,var(--astro) 8%,transparent) 60px,color-mix(in srgb,var(--astro) 2.8%,transparent) 63px,color-mix(in srgb,var(--astro) 0.3%,transparent) 68px,transparent 74px),radial-gradient(circle 190px,color-mix(in srgb,var(--astro-glow) 87.8%,transparent) 0px,color-mix(in srgb,var(--astro-glow) 84.7%,transparent) 19.5px,color-mix(in srgb,var(--astro-glow) 75.2%,transparent) 39.5px,color-mix(in srgb,var(--astro-glow) 56.7%,transparent) 63.5px,color-mix(in srgb,var(--astro-glow) 24.1%,transparent) 101px,color-mix(in srgb,var(--astro-glow) 11.2%,transparent) 122.5px,color-mix(in srgb,var(--astro-glow) 3.7%,transparent) 146px,color-mix(in srgb,var(--astro-glow) 0.3%,transparent) 183.5px,transparent 190px)}
.orizzonte.bassa::before{width:354px;height:354px;margin-top:-138px;box-shadow:none;filter:none;background:radial-gradient(circle 177px,var(--astro) 17px,color-mix(in srgb,var(--astro) 98.7%,transparent) 25px,color-mix(in srgb,var(--astro) 95%,transparent) 28.5px,color-mix(in srgb,var(--astro) 89.1%,transparent) 31px,color-mix(in srgb,var(--astro) 79.4%,transparent) 33.5px,color-mix(in srgb,var(--astro) 62.7%,transparent) 36.5px,color-mix(in srgb,var(--astro) 30.6%,transparent) 41.5px,color-mix(in srgb,var(--astro) 17.9%,transparent) 44px,color-mix(in srgb,var(--astro) 9.1%,transparent) 46.5px,color-mix(in srgb,var(--astro) 3.3%,transparent) 49.5px,color-mix(in srgb,var(--astro) 0.5%,transparent) 54px,transparent 61px),radial-gradient(circle 177px,color-mix(in srgb,var(--astro-glow) 77.4%,transparent) 0px,color-mix(in srgb,var(--astro-glow) 74.2%,transparent) 17.5px,color-mix(in srgb,var(--astro-glow) 64.2%,transparent) 36.5px,color-mix(in srgb,var(--astro-glow) 34%,transparent) 73.5px,color-mix(in srgb,var(--astro-glow) 16.4%,transparent) 98px,color-mix(in srgb,var(--astro-glow) 6.5%,transparent) 120.5px,color-mix(in srgb,var(--astro-glow) 1.4%,transparent) 149.5px,transparent 177px)}
}
/* sole:fine */
.orizzonte::after{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;opacity:0;transition:opacity 1.4s ease;background-image:radial-gradient(1.6px 1.6px at 12% 18%,#fff,transparent),radial-gradient(1.4px 1.4px at 78% 12%,#fff,transparent),radial-gradient(1.8px 1.8px at 33% 30%,#fff,transparent),radial-gradient(1.3px 1.3px at 64% 26%,#fff,transparent),radial-gradient(1.5px 1.5px at 88% 34%,#fff,transparent),radial-gradient(1.2px 1.2px at 47% 9%,#fff,transparent),radial-gradient(1.4px 1.4px at 22% 44%,#fff,transparent),radial-gradient(1.2px 1.2px at 92% 52%,#fff,transparent);animation:brilla 4.5s ease-in-out infinite}
body.ora-notte .orizzonte::after{opacity:.6}
@keyframes brilla{0%,100%{filter:opacity(.45)}50%{filter:opacity(1)}}
/* Il testo scende di `--scendi` e la stessa misura si toglie dal fondo: la
   sezione resta alta uguale e la centratura non cambia, si sposta solo il
   blocco. Serve perche' l'astro a `top:9%` cade proprio dove comincia il
   testo — su schermo stretto il disco finiva SOTTO il nome, bianco su crema,
   e non si leggeva piu`. Li` il salto e` piu` grande: il titolo e` piccolo,
   quindi il blocco e` corto e la centratura lo lascia in alto. */
.orizzonte-inner{position:relative;z-index:3;--scendi:22px;padding-top:var(--scendi);padding-bottom:calc(26vh - var(--scendi));display:flex;flex-direction:column;align-items:center;max-width:760px;margin:0 auto}
/* ⚠️ `width:100%`: il blocco e` un flex item in colonna con `margin:0 auto`,
   e con i margini automatici la larghezza e` quella del contenuto, non del
   contenitore. Chromium arrivava lo stesso a tutta la larghezza (il riquadro
   delle date «pesa» abbastanza), Safari NO: su iPhone il blocco era largo
   quanto la riga «Appartamento · Alghero · Sardegna», il riquadro ci stava
   dentro stretto con due margini larghi ai lati, e le due caselle data non
   ci stavano piu`. Sul telefono lo si dice esplicitamente; sopra i 760px
   resta com'e`, cioe` largo quanto il riquadro. */
@media (max-width:760px){.orizzonte-inner{--scendi:64px;width:100%}}
.orizzonte.bassa .orizzonte-inner{--scendi:0px;padding-bottom:16vh}
.luogo{margin:0 0 16px;font-size:11px;letter-spacing:.34em;text-transform:uppercase;color:var(--oro);font-weight:500;opacity:0;animation:affiora .9s ease .5s forwards}
.titolo{margin:0;font-family:var(--display);font-weight:300;font-size:clamp(46px,11vw,96px);line-height:.96;color:var(--sabbia-chiara);font-variation-settings:'SOFT' 40,'WONK' 1;opacity:0;transform:translateY(26px);animation:affiora .95s var(--curva) .58s forwards}
.orizzonte.bassa .titolo{font-size:clamp(38px,8vw,64px)}
.orizzonte .filo{width:0;margin:22px auto 18px;animation:tira 1.1s var(--curva) 1.15s forwards}
@keyframes tira{to{width:58px}}
@keyframes affiora{to{opacity:1;transform:none}}
.motto{margin:0;font-family:var(--display);font-weight:300;font-style:italic;font-size:clamp(19px,2.6vw,26px);color:var(--sabbia);opacity:0;animation:affiora .9s ease 1.4s forwards;max-width:34ch}
.orizzonte-azioni{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin-top:34px;opacity:0;animation:affiora .9s ease 1.7s forwards}
/* ⚠️ Le tre onde si muovono con `transform`, non piu` con
   `background-position`. La seconda e` una proprieta` che RIDIPINGE:
   l'elemento e` largo quanto lo schermo e alto un terzo della copertina, e
   ridisegnarlo sessanta volte al secondo — per sempre, perche' l'animazione
   e` infinita — teneva occupato il rasterizzatore proprio dove si guarda per
   primo: la parte alta della home tremolava gia` all'apertura, senza che
   nessuno toccasse niente. Con `transform` il lavoro lo fa la scheda
   grafica e la pagina non si ridipinge mai.
   ⚠️ Servono tre livelli SEPARATI perche' le tre onde vanno a tre velocita`
   diverse e una in senso opposto: e` quello il senso del disegno. `.onde`
   resta FERMA e fa solo da contenitore — se si muovesse lei si porterebbe
   dietro i figli e la parallasse sparirebbe.
   ⚠️ Ogni livello sborda a DESTRA del proprio passo e scorre esattamente di
   quel passo: il disegno si ripete con quella misura, quindi il ciclo si
   richiude senza salti e senza mai scoprire un bordo. Sbordo e spostamento
   sono la stessa misura: cambiarne uno solo fa comparire una striscia vuota
   a meta` animazione.
   ⚠️ Il passo NON e` 1200px (la larghezza della piastrella) ma il periodo
   vero di ciascuna onda: le curve `t` ribaltano il punto di controllo a ogni
   tratto, quindi un'onda intera e` gonfia+incavo, cioe` DUE tratti — 600px
   per la crema (4 tratti da 300), 400 per la media (6 da 200), 300 per la
   pallida (8 da 150). 1200 e` un multiplo esatto di tutti e tre, e infatti
   funzionava; ma teneva ogni livello largo quanto sette schermi, e sul
   telefono erano ~9 MB di trama da ricaricare ogni volta che Android
   riprendeva la scheda dopo che si era usata un'altra app — la copertina
   ricompariva a pezzi. Con il passo vero i livelli stanno in poco piu` di
   uno schermo. Le durate sono ricalcolate per tenere le stesse velocita`
   di sempre (26,7 / 53,3 / 80 px al secondo).
   L'ordine di impilamento e` quello di `background-image`, dove il PRIMO
   sta sopra: `::before` dipinge sotto, poi `<i>`, poi `::after` in cima.
   ⚠️ Da set-2026 le onde sono SFOCATE, come il sole, ma la sfocatura sta
   DENTRO gli SVG e non in un `filter:blur()` qui: su tre livelli che si
   muovono per sempre, il compositore la rifarebbe a ogni fotogramma. Nella
   piastrella si calcola una volta sola, quando si rasterizza. E l'onda
   davanti e` la SABBIA: ha il colore della pagina e sta in cima (::after),
   cosi` la copertina finisce in un'onda che continua nella sezione sotto —
   che per questo non deve avere uno sfondo suo.
   Piastrelle e animazioni — il blocco fra `onde:inizio` e `onde:fine` — le
   scrive `tools/genera_orizzonte.js` (`npm run orizzonte`): i tracciati
   sbordano per non lasciare giunture, e il generatore rifiuta una
   sfocatura che verrebbe tagliata o due onde che si sfiorano abbastanza da
   far lampeggiare una riga (successo fino a set-2026). Un test controlla
   che il blocco sia quello generato: si cambia li`, non qui. */
.onde{position:absolute;left:0;right:0;bottom:-1px;z-index:2;height:30%;min-height:120px}
.onde::before,.onde::after{content:''}
.onde::before,.onde>i,.onde::after{position:absolute;top:0;bottom:0;left:0;
  background-repeat:repeat-x;background-position:0 bottom;background-size:1200px 100%}
/* onde:inizio — generato da tools/genera_orizzonte.js: si cambia lì, non qui */
.onde::before{right:-300px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='200' viewBox='0 0 1200 200' preserveAspectRatio='none'%3E%3Cfilter id='s' filterUnits='userSpaceOnUse' x='-300' y='-60' width='1800' height='340' color-interpolation-filters='sRGB'%3E%3CfeGaussianBlur stdDeviation='3'/%3E%3C/filter%3E%3Cpath fill='%237FB3B8' fill-opacity='0.35' filter='url(%23s)' d='M-300,46q75,-60,150,0t150,0t150,0t150,0t150,0t150,0t150,0t150,0t150,0t150,0t150,0t150,0V260H-300Z'/%3E%3C/svg%3E");animation:onda-pallida 11.25s linear infinite}
.onde>i{right:-400px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='200' viewBox='0 0 1200 200' preserveAspectRatio='none'%3E%3Cfilter id='s' filterUnits='userSpaceOnUse' x='-400' y='-60' width='2000' height='340' color-interpolation-filters='sRGB'%3E%3CfeGaussianBlur stdDeviation='2.5'/%3E%3C/filter%3E%3Cpath fill='%232C7A8C' fill-opacity='0.5' filter='url(%23s)' d='M-400,86q100,48,200,0t200,0t200,0t200,0t200,0t200,0t200,0t200,0t200,0t200,0V260H-400Z'/%3E%3C/svg%3E");animation:onda-media 7.5s linear infinite}
.onde::after{right:-600px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='200' viewBox='0 0 1200 200' preserveAspectRatio='none'%3E%3Cfilter id='s' filterUnits='userSpaceOnUse' x='-600' y='-60' width='2400' height='340' color-interpolation-filters='sRGB'%3E%3CfeGaussianBlur stdDeviation='2'/%3E%3C/filter%3E%3Cpath fill='%23EFE6D4' filter='url(%23s)' d='M-600,126q150,-34,300,0t300,0t300,0t300,0t300,0t300,0t300,0t300,0V260H-600Z'/%3E%3C/svg%3E");animation:onda-crema 7.5s linear infinite}
@keyframes onda-pallida{to{transform:translate3d(-300px,0,0)}}
@keyframes onda-media{from{transform:translate3d(-400px,0,0)}to{transform:translate3d(0,0,0)}}
@keyframes onda-crema{to{transform:translate3d(-600px,0,0)}}
/* onde:fine */
/* Un'animazione CSS continua a girare anche quando il suo elemento e` fuori
   dallo schermo: su una pagina alta quasi 10.000px vuol dire far lavorare il
   compositore per tutto il tempo in cui si legge il resto, e ritrovarselo
   occupato proprio mentre si risale di scatto in cima. La classe la mette
   comune.js quando la copertina esce di vista; il cielo stellato si ferma
   anche di giorno, quando e` a `opacity:0` e non lo vedrebbe nessuno.
   ⚠️ Si mette in pausa la SOLA `animation-play-state`, mai `animation:none`:
   la scorciatoia rifarebbe ripartire l'animazione da capo al ritorno, e
   soprattutto vincerebbe sul blocco `prefers-reduced-motion`, che di
   specificita` ne ha meno e sta piu` in basso. */
.orizzonte.fuori-vista .onde::before,
.orizzonte.fuori-vista .onde>i,
.orizzonte.fuori-vista .onde::after,
body .orizzonte.fuori-vista::after{animation-play-state:paused}
/* Di giorno il cielo stellato non si mette in pausa: non esiste proprio.
   Era a `opacity:0` con l'animazione ferma — invisibile, ma pur sempre un
   elemento grande quanto la copertina con otto sfumature dentro, che il
   browser deve tenersi e ridisegnare quando Android gli ridà la scheda
   dopo che si e` usata un'altra app. Di notte torna com'era. */
body:not(.ora-notte) .orizzonte::after{content:none}
/* Alcune frasi vanno a capo dove lo decidiamo noi: il testo arriva da
   i18n.js con un `\n` dentro e le pagine lo scrivono con `textContent`.
   `pre-line` lo rispetta senza passare da `innerHTML`, che vorrebbe dire
   dare per buono come marcatura anche quello che viene dalla
   configurazione (gli orari di check-in li scrive l'host nel pannello). */
.motto,#attesa-apri,#p-orari,#orario-aiuto,#r-orari{white-space:pre-line}
.orizzonte .scorri-giu{position:absolute;bottom:14px;left:50%;transform:translateX(-50%);z-index:4;color:var(--abisso);font-size:11px;letter-spacing:.2em;text-transform:uppercase;text-decoration:none;opacity:.7}

/* ── Bottoni ───────────────────────────────────────────────────────── */
/* ⚠️ Un bottone va A CAPO invece di uscire dallo schermo: con `nowrap`,
   «Voir les disponibilités et les tarifs» (381px) allargava la sua colonna
   e tutta la pagina scorreva di lato sui telefoni fino a 390px, in francese
   e in tedesco. L'altezza resta quella di prima: interlinea 1.3 e 2px di
   padding in meno. (Il pannello host ha le sue regole .pannello .btn.) */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:999px;background:var(--onda);color:var(--sabbia-chiara);border:0;font:600 12.5px/1.3 var(--testo-font);letter-spacing:.2em;text-transform:uppercase;padding:15px 28px;cursor:pointer;text-decoration:none;transition:background .22s ease,transform .22s var(--curva),opacity .2s;white-space:normal;text-align:center;max-width:100%}
.btn:hover{background:var(--abisso)}
.btn:active{transform:scale(.985)}
.btn:disabled{opacity:.55;cursor:not-allowed}
.btn.corallo{background:var(--corallo-bottone)}
.btn.corallo:hover{background:var(--corallo-bottone-scuro)}
.btn.chiaro{background:var(--sabbia-chiara);color:var(--abisso)}
.btn.chiaro:hover{background:#fff}
.btn.vuoto{background:transparent;color:var(--onda);border:1.5px solid var(--onda)}
.btn.vuoto:hover{background:var(--onda);color:var(--sabbia-chiara)}
/* Un velo appena percettibile invece del trasparente pieno: questo tasto
   sta in fondo alla copertina, dove all'alba e al tramonto passa l'astro,
   e il bianco su bianco-arancio non si leggeva. */
/* ⚠️ Niente `backdrop-filter` qui: 2px di sfocatura su un cielo che e` gia`
   una sfumatura non si distinguono, ma costringono il browser a tenere
   pronta una copia sfocata di tutto cio` che il bottone ha dietro — cioe`
   le onde in movimento — e a rifarla a ogni fotogramma della dissolvenza
   con cui il blocco entra a ogni apertura della pagina. */
.btn.vuoto.chiaro{color:var(--sabbia-chiara);border-color:rgba(252,250,244,.55);background:rgba(15,59,67,.28)}
.btn.vuoto.chiaro:hover{background:rgba(252,250,244,.14)}
.btn.piccolo{padding:9.5px 18px;font-size:11px}
/* email e telefono si leggono come si scrivono, non in maiuscolo spaziato */
.btn.contatto{text-transform:none;letter-spacing:.02em;font-size:13px}
.btn.largo{width:100%}
.btn .spin{width:14px;height:14px;border:2px solid rgba(255,255,255,.4);border-top-color:#fff;border-radius:50%;animation:gira .8s linear infinite}
@keyframes gira{to{transform:rotate(360deg)}}
.link-testo{background:none;border:0;color:var(--onda);text-decoration:underline;cursor:pointer;font:inherit;padding:0}

/* ── Sezioni ───────────────────────────────────────────────────────── */
.sezione{padding:78px 0}
.sezione.stretta{padding:56px 0}
.sezione.scura{background:var(--abisso);color:var(--sabbia);--anello:var(--corallo-chiaro)}
.sezione.scura h2,.sezione.scura h3{color:var(--sabbia-chiara)}
.sezione.scura .sub{color:var(--schiuma)}
.sezione.scura .numero b{color:var(--sabbia-chiara)}
.sezione.scura .numero span,.sezione.scura .distanze b{color:var(--schiuma)}
.sezione.scura .distanze li{border-color:rgba(252,250,244,.18)}
.sezione.carta{background:var(--sabbia-chiara)}
.griglia-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:48px;align-items:center}
.griglia-3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.griglia-4{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
@media (max-width:900px){.griglia-2{grid-template-columns:minmax(0,1fr);gap:30px}.griglia-3,.griglia-4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:540px){.griglia-3,.griglia-4{grid-template-columns:1fr}}
.testo-lungo{font-size:18px;max-width:62ch}
.testo-lungo p+p{margin-top:.2em}
.capolettera::first-letter{font-family:var(--display);font-size:3.2em;float:left;line-height:.8;padding:6px 8px 0 0;color:var(--corallo-bottone)}

/* ── Card ──────────────────────────────────────────────────────────── */
.card{background:var(--sabbia-chiara);border:1px solid var(--bordo);border-radius:var(--raggio);padding:24px}
.card h3,.card .titoletto{margin-top:0}
/* un h2 con la misura di un h3: nelle schede, dove l'ordine dei titoli
   (h1 → h2) conta per chi naviga coi titoli ma la misura no */
.titoletto{font-size:21px}
.card.ombra{box-shadow:var(--ombra)}
.card.evidenza{border-left:4px solid var(--corallo);background:var(--sabbia-scura);border-radius:0 var(--raggio) var(--raggio) 0}
.card.evidenza .sub{color:var(--tenue-piede)} /* --tenue sul fondo sabbia scura: 4,4:1 */

/* ── Numeri in evidenza (posti, camere…) ───────────────────────────── */
.numeri{display:flex;gap:26px;flex-wrap:wrap;margin:22px 0 0}
.numero b{display:block;font-family:var(--display);font-weight:400;font-size:38px;color:var(--abisso);line-height:1}
.numero span{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--tenue);font-weight:600}

/* ── Galleria ──────────────────────────────────────────────────────── */
.galleria{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:190px;gap:12px}
.galleria figure{margin:0;border-radius:var(--raggio-s);overflow:hidden;position:relative;background:var(--sabbia-scura)}
.galleria figure:first-child{grid-column:span 2;grid-row:span 2}
.galleria figure:nth-child(6),.galleria figure:nth-child(7){grid-column:span 2}
/* Stesso motivo del bottone chiaro, e qui per giunta moltiplicato: di
   queste targhette ce n'e` una per foto (sette in home), e ognuna vale un
   livello di composizione a se`. Dietro un fondo opaco al 78%, sopra una
   fotografia, la sfocatura non la vede nessuno. */
.galleria figure .conta{position:absolute;top:10px;right:10px;background:rgba(15,59,67,.78);color:#fff;font-size:11px;font-weight:700;letter-spacing:.04em;padding:3px 8px;border-radius:20px}
.galleria figure{cursor:pointer}
.galleria img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--curva)}
.galleria figure:hover img{transform:scale(1.04)}
.galleria figcaption{position:absolute;left:0;right:0;bottom:0;padding:26px 14px 10px;color:#fff;font-size:12px;letter-spacing:.08em;background:linear-gradient(transparent,rgba(15,59,67,.75) 45%,rgba(15,59,67,.85));pointer-events:none}
.galleria-apri{display:block;width:100%;height:100%;padding:0;border:0;margin:0;background:none;cursor:pointer;border-radius:inherit}
.galleria-apri:focus-visible{outline:3px solid transparent;outline-offset:-3px}
.galleria figure:has(.galleria-apri:focus-visible){outline:2px solid var(--anello);outline-offset:3px}
.galleria .segnaposto{width:100%;height:100%;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:8px;color:var(--onda);background:linear-gradient(160deg,var(--sabbia-scura),#dcefe9)}
.galleria .segnaposto svg{width:40px;height:40px;opacity:.7}
.galleria .segnaposto span{font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;opacity:.75}
@media (max-width:800px){.galleria{grid-template-columns:1fr 1fr;grid-auto-rows:150px}.galleria figure:nth-child(6),.galleria figure:nth-child(7){grid-column:span 2}}
/* Sul telefono il mosaico si ferma a cinque caselle (la grande e le quattro
   accanto): le altre le apre «Vedi tutte le N foto», li` sotto. Sette
   ambienti erano quasi mille pixel di foto prima di leggere una riga sulla
   casa. L'ordine e` quello di AMBIENTI in tools/genera_foto.js. */
@media (max-width:800px){.galleria figure:nth-child(n+6){display:none}}
.galleria-tutte{margin-top:16px;width:100%;justify-content:center}

/* ── La galleria a schermo intero ──────────────────────────────────── */
.foto-piena{position:fixed;inset:0;z-index:200;background:var(--sabbia-chiara);display:flex;flex-direction:column;animation:foto-entra .28s var(--curva)}
@keyframes foto-entra{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.foto-testa{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 22px;border-bottom:1px solid var(--bordo);background:var(--sabbia-chiara)}
.foto-testa b{font-family:var(--display);font-weight:500;font-size:19px;color:var(--abisso);display:block}
.foto-testa span{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--tenue)}
.foto-chiudi{border:1px solid var(--bordo);background:transparent;color:var(--onda);width:40px;height:40px;border-radius:50%;font-size:17px;line-height:1;cursor:pointer;flex:0 0 auto;transition:background .2s,color .2s}
.foto-chiudi:hover{background:var(--abisso);color:#fff;border-color:var(--abisso)}
.foto-scorri{flex:1 1 auto;overflow-y:auto;padding:30px 22px 60px;-webkit-overflow-scrolling:touch}
.foto-gruppo{max-width:var(--larghezza);margin:0 auto 44px}
.foto-gruppo h3{font-family:var(--display);font-weight:500;font-size:23px;color:var(--abisso);margin:0 0 4px}
.foto-gruppo h3::after{content:'';display:block;width:38px;height:1px;background:var(--corallo);margin-top:12px}
.foto-righe{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px;margin-top:18px}
.foto-cella{padding:0;border:0;background:var(--sabbia-scura);border-radius:var(--raggio-s);overflow:hidden;cursor:zoom-in;aspect-ratio:4/3;display:block}
.foto-cella img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .7s var(--curva)}
.foto-cella:hover img{transform:scale(1.05)}
.foto-cella:focus-visible{outline:2px solid var(--anello);outline-offset:3px}
/* Una foto sola, sopra a tutto: qui il fondo scuro serve a far respirare l'immagine. */
/* `touch-action:pan-y` lascia al browser lo scorrimento verticale e il
   pizzico, ma si tiene l orizzontale: e quello lo swipe fra una foto e
   l altra, che altrimenti il telefono legge come un indietro. */
.foto-singola{position:fixed;inset:0;z-index:210;margin:0;background:rgba(9,26,30,.94);display:flex;align-items:center;justify-content:center;gap:10px;padding:20px;cursor:zoom-out;touch-action:pan-y}
/* ⚠️ `width/height:auto` sono indispensabili: galleria.js mette sull <img>
   gli attributi width e height per far conoscere le proporzioni prima che
   la foto arrivi, ma quegli attributi valgono anche come misure vere, e i
   due massimi qui sotto le taglierebbero una per una — il riquadro diventa
   345x682 invece di 345x259, cioe` la foto stirata. Con auto il browser usa
   gli attributi solo per il RAPPORTO, che e` quello che serve. */
.foto-singola img{width:auto;height:auto;max-width:min(1400px,92vw);max-height:84vh;object-fit:contain;border-radius:6px;cursor:default;box-shadow:0 30px 80px -30px rgba(0,0,0,.8)}
.foto-singola figcaption{position:absolute;bottom:22px;left:0;right:0;text-align:center;color:rgba(255,255,255,.72);font-size:12px;letter-spacing:.14em;text-transform:uppercase}
.foto-freccia{flex:0 0 auto;width:52px;height:52px;border-radius:50%;border:1px solid rgba(255,255,255,.28);background:rgba(255,255,255,.08);color:#fff;font-size:26px;line-height:1;cursor:pointer;transition:background .2s}
.foto-freccia:hover{background:rgba(255,255,255,.22)}
.foto-chiudi-singola{position:absolute;top:14px;right:14px;z-index:2;width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.35);background:rgba(9,26,30,.55);color:#fff;font-size:18px;line-height:1;cursor:pointer}
.foto-chiudi-singola:hover{background:rgba(255,255,255,.22)}
/* ⚠️ Sul telefono foto (92vw) + due frecce da 42px non ci stanno in fila:
   le frecce finivano per meta` fuori dallo schermo. Qui si appoggiano sui
   bordi della foto, e la foto prende tutta la larghezza. */
@media (max-width:700px){
  .foto-singola img{max-width:100%}
  .foto-freccia{position:absolute;top:50%;transform:translateY(-50%);z-index:2;background:rgba(9,26,30,.55);border-color:rgba(255,255,255,.4)}
  .foto-freccia.prec{left:10px}
  .foto-freccia.succ{right:10px}
}
@media (max-width:700px){
  .foto-scorri{padding:22px 14px 50px}
  .foto-gruppo{margin-bottom:34px}
  .foto-righe{grid-template-columns:1fr 1fr;gap:8px}
  .foto-singola{padding:8px;gap:4px}
  .foto-freccia{width:42px;height:42px;font-size:22px}
}
@media (prefers-reduced-motion:reduce){
  .foto-piena{animation:none}
  .foto-cella img,.galleria figure img{transition:none}
}

/* ── Dotazioni ─────────────────────────────────────────────────────── */
.dotazioni{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px 22px;margin:0;padding:0;list-style:none}
.dotazioni li{display:flex;gap:12px;align-items:flex-start;padding:10px 0;border-bottom:1px solid var(--bordo)}
.dotazioni svg{width:22px;height:22px;flex:none;color:var(--onda);margin-top:2px}
.dotazioni b{display:block;font-weight:600;color:var(--abisso)}
.dotazioni small{color:var(--tenue);font-size:14px}

/* ── Come funziona (passi) ─────────────────────────────────────────── */
.passi{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;counter-reset:passo}
.passo{position:relative;padding-top:54px}
.passo::before{counter-increment:passo;content:counter(passo);position:absolute;top:0;left:0;width:42px;height:42px;border-radius:50%;background:var(--corallo-bottone);color:#fff;font-family:var(--display);font-size:20px;display:flex;align-items:center;justify-content:center}
.passo h3{font-size:19px}
.passo p{color:var(--tenue);font-size:15.5px;margin:0}
/* sul blu della sezione scura il grigio del testo arrivava a 2:1 */
.sezione.scura .passo p{color:var(--schiuma)}
.passi.due{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:900px){.passi{grid-template-columns:1fr 1fr}}
@media (max-width:540px){.passi,.passi.due{grid-template-columns:minmax(0,1fr)}}

/* ── Recensioni ────────────────────────────────────────────────────── */
.recensioni{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.recensione{background:rgba(252,250,244,.06);border:1px solid rgba(252,250,244,.14);border-radius:var(--raggio);padding:24px}
.recensione p{font-family:var(--display);font-weight:300;font-size:19px;line-height:1.45;color:var(--sabbia-chiara)}
.recensione footer{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--schiuma);font-weight:600}
.sezione.scura .recensione footer{color:var(--schiuma-chiara)}
.stelle{color:var(--oro);letter-spacing:.1em;font-size:14px;margin-bottom:10px}
.recensione .stelle,.rec-badge .stelle{color:var(--oro-stelle)}
@media (max-width:800px){.recensioni{grid-template-columns:1fr}}

.rec-badge{display:flex;gap:10px;flex-wrap:wrap;margin:-6px 0 22px}
.rec-badge .badge{display:inline-flex;align-items:center;gap:8px;background:var(--sabbia-chiara);border:1px solid var(--bordo);border-radius:999px;padding:8px 16px 8px 12px;text-decoration:none;color:var(--abisso)}
.rec-badge .badge b{font-family:var(--display);font-size:22px;font-weight:500;line-height:1}
.rec-badge .badge .stelle{margin:0;font-size:12px}
.rec-badge .badge small{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--tenue);font-weight:600}
.rec-risposta{font-family:var(--testo-font)!important;font-size:14px!important;color:var(--tenue)!important;border-left:2px solid var(--corallo);padding-left:10px;margin-top:-4px}
/* La pagina della recensione: le stelle si scelgono */
.stelle-scelta{display:flex;align-items:center;flex-wrap:wrap;gap:4px;margin:6px 0 2px}
.stelle-scelta button{background:none;border:0;font-size:36px;line-height:1;color:#d9d2c2;cursor:pointer;padding:2px;transition:transform .15s,color .15s}
.stelle-scelta button.piena{color:var(--oro-stelle)}
.stelle-scelta button:hover{transform:scale(1.12)}
.stelle-etichetta{margin-left:10px;font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--tenue);font-weight:600}
/* La lista d'attesa sotto al calendario */
.attesa{margin-top:12px;padding:14px 16px;background:var(--sabbia);border:1px dashed var(--bordo);border-radius:var(--raggio-s)}
.attesa b{font-family:var(--display);font-weight:500;font-size:18px;color:var(--abisso)}
.attesa .aiuto{margin:4px 0 10px}
.attesa-apri-riga{margin:12px 0 0;text-align:center}
.attesa-date{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-bottom:8px}
.attesa-date label{display:flex;flex-direction:column;gap:4px;min-width:0;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:var(--tenue)}
.attesa-date input{padding:10px 12px;font-size:16px;letter-spacing:0;text-transform:none;font-weight:400}
/* sotto i 420px due campi data affiancati non ci stanno: il selettore di
   Chrome tagliava l'anno («10/06/202») */
@media (max-width:420px){.attesa-date{grid-template-columns:minmax(0,1fr)}}
.attesa-form{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr) auto;gap:8px}
.attesa-form input{padding:10px 12px;font-size:16px}
@media (max-width:600px){.attesa-form{grid-template-columns:1fr}}

/* ── FAQ ───────────────────────────────────────────────────────────── */
.faq details{border-bottom:1px solid var(--bordo);padding:4px 0}
.faq summary{cursor:pointer;font-weight:600;color:var(--abisso);padding:14px 30px 14px 0;list-style:none;position:relative;font-size:17px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+';position:absolute;right:4px;top:10px;font-family:var(--display);font-size:24px;color:var(--corallo-testo);transition:transform .3s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{color:var(--tenue);margin:0 0 14px;max-width:70ch}

/* ── Mappa ─────────────────────────────────────────────────────────── */
.mappa{border-radius:var(--raggio);overflow:hidden;border:1px solid var(--bordo);aspect-ratio:16/9;background:var(--sabbia-scura)}
.mappa iframe{width:100%;height:100%;border:0}
.distanze{list-style:none;padding:0;margin:18px 0 0;display:grid;gap:8px}
.distanze li{display:flex;justify-content:space-between;gap:12px;border-bottom:1px dashed var(--bordo);padding:6px 0;font-size:15.5px}
.distanze b{color:var(--abisso);font-weight:600}

/* ── Widget date (in copertina e nel prenota) ──────────────────────── */
.cerca{background:rgba(252,250,244,.96);border-radius:var(--raggio);padding:14px;display:grid;grid-template-columns:1fr 1fr 1fr auto;gap:10px;align-items:end;box-shadow:var(--ombra);color:var(--inchiostro);text-align:left;max-width:820px;width:100%;margin-top:34px;opacity:0;animation:affiora .9s ease 1.8s forwards}
.cerca>div{min-width:0}
/* Tutte e tre le caselle alte quanto il bottone (48px). Senza un'altezza
   fissa ognuna faceva a modo suo — in Chrome la data 54px, la tendina 47 —
   e con `align-items:end` la tendina «Ospiti» restava piu` bassa, con la
   sua etichetta un gradino sotto le altre. Il contenuto si centra da se`:
   il campo data e` un flex `align-items:center` in ogni motore. */
.cerca input,.cerca select{min-width:0;width:100%;height:48px;padding-block:0}
.cerca label{display:block;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:var(--tenue);margin:0 0 6px}
.cerca .btn{height:48px;padding-inline:22px}
/* Sul telefono Arrivo e Partenza stanno appaiate (sono una coppia, e si
   leggono da sinistra a destra come il soggiorno); Ospiti e il bottone
   prendono tutta la riga. Prima Ospiti restava a meta` larghezza con un buco
   accanto, e le tre caselle non si allineavano con niente. Le righe restano
   tre: il riquadro non si e` allungato. */
@media (max-width:760px){
  .cerca{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .cerca>div:nth-of-type(3),.cerca .btn{grid-column:1 / -1}
}
/* Sotto i 360px (iPhone SE di prima generazione e simili) due caselle data
   affiancate non ci stanno: Chrome scrive «gg/mm/aaaa» con accanto l'icona
   del calendario e tagliava l'anno. Solo li` vanno una sotto l'altra. */
@media (max-width:359px){.cerca{grid-template-columns:1fr}}

/* ── Form ──────────────────────────────────────────────────────────── */
label.campo{display:block;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:var(--tenue);margin:16px 0 6px}
label.campo:first-child{margin-top:0}
input[type=text],input[type=email],input[type=tel],input[type=number],input[type=date],input[type=time],input[type=password],input[type=url],select,textarea{width:100%;border:1px solid var(--bordo-campo);border-radius:var(--raggio-s);background:#fff;padding:12px 13px;color:var(--inchiostro);font:inherit;font-size:16px}
textarea{min-height:96px;resize:vertical}
/* ⚠️ iOS Safari e i campi data/ora. Il controllo nativo (`-webkit-appearance:
   menulist-button`) ha una larghezza minima SUA — il valore scritto piu` i
   margini interni — e non scende sotto qualunque `width` gli si dia: nella
   copertina Arrivo e Partenza sbordavano dal riquadro e si montavano una
   sull'altra (visto su iPhone, set-2026). Con `appearance:none` torna una
   casella normale che rispetta la colonna; e` la stessa correzione di
   Bootstrap. Due code, tutte e due solo iOS (il pseudo-elemento esiste solo
   li`): senza aspetto nativo un campo VUOTO perde l'altezza (bug WebKit
   198959), quindi l'altezza la porta il valore; e il valore avrebbe di suo
   `margin:1px 24px 1px 4px` e testo centrato, che non si allineerebbe con
   le altre caselle. Niente `display:block`: nel pannello host stanno in riga
   dopo una parola («Dal … al …»). */
input[type=date],input[type=time]{-webkit-appearance:none;appearance:none;min-width:0;max-width:100%}
input[type=date]::-webkit-date-and-time-value,input[type=time]::-webkit-date-and-time-value{margin:0;min-height:1.6em;text-align:left}
input:focus,select:focus,textarea:focus,button:focus-visible,a:focus-visible,summary:focus-visible{outline:2px solid var(--anello);outline-offset:2px}
/* La mappa e` un iframe dentro un riquadro con overflow:hidden, che
   taglierebbe un anello messo sull'iframe: lo porta il riquadro. */
.mappa:focus-within{outline:2px solid var(--anello);outline-offset:3px}
/* Dove il fondo sotto l'anello cambia da un punto all'altro — il cielo
   della copertina, con l'astro, e la barra in alto che ci passa sopra —
   nessun colore solo arriva a 3:1 dappertutto: l'anello e` chiaro e chiuso
   fra due bordi scuri, e si legge su qualunque cielo. I riquadri chiari
   dentro (ricerca, menu della lingua) tornano all'anello normale. */
.nav :focus-visible,.orizzonte :focus-visible{outline-color:var(--sabbia-chiara);box-shadow:0 0 0 6px var(--abisso)}
.orizzonte .cerca :focus-visible,.nav .lang-menu :focus-visible{outline-color:var(--anello);box-shadow:none}
/* Nel calendario l'anello sta DENTRO la casella: fuori toccherebbe le
   caselle accanto, chiare o (inizio e fine del soggiorno) scure. */
.mese-griglia .giorno:focus-visible{outline-offset:-3px}
.mese-griglia .giorno.inizio:focus-visible,.mese-griglia .giorno.fine:focus-visible{outline-color:var(--sabbia-chiara)}
.errato{border-color:var(--err)!important;background:var(--err-fondo)!important}
.aiuto{font-size:13.5px;color:var(--tenue);margin:6px 0 0}
.riga{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.riga-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px}
@media (max-width:600px){.riga,.riga-3{grid-template-columns:1fr}}
/* due righe del modulo una sotto l'altra: senza, l'etichetta della seconda
   toccava il campo della prima (il pannello host ha la sua regola) */
#form-dati .riga+.riga{margin-top:14px}
.spunta{display:flex;gap:12px;align-items:flex-start;font-size:15px;margin:18px 0 0;cursor:pointer}
.spunta input{width:20px;height:20px;margin:2px 0 0;flex:none;accent-color:var(--onda)}
.contatore{display:flex;align-items:center;gap:0;border:1px solid var(--bordo-campo);border-radius:var(--raggio-s);background:#fff;overflow:hidden;height:48px}
.contatore button{width:44px;height:100%;border:0;background:transparent;font-size:22px;color:var(--onda);cursor:pointer}
.contatore button:disabled{color:#c9c2b3;cursor:not-allowed}
.contatore output{flex:1;text-align:center;font-weight:600;font-size:17px}
.eta-bambini{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.eta-bambini select{width:auto;padding:8px 10px}

/* ── Avvisi ────────────────────────────────────────────────────────── */
.avviso{background:var(--avviso-fondo);border:1px solid var(--corallo);border-left-width:4px;border-radius:0 var(--raggio-s) var(--raggio-s) 0;padding:12px 16px;margin:14px 0;font-size:15px}
.avviso.errore{background:var(--err-fondo);border-color:#e0a99f;border-left-color:var(--err);color:#8a3323}
.avviso.ok{background:var(--ok-fondo);border-color:#b8dcc9;border-left-color:var(--ok);color:#215a42}
.avviso.info{background:#eaf3f4;border-color:#bcd7dc;border-left-color:var(--onda);color:var(--abisso)}
/* ⚠️ La testata e` fissa: una banda nel flusso finiva SOTTO di lei (su
   /prenota/ non si vedeva affatto). La banda e` fissa in cima, e quando c'e`
   comune.js ne misura l'altezza (--avviso-h: va a capo sul telefono) e
   sposta giu` di tanto la testata, la pagina e il riepilogo che resta attaccato. */
.banda-avviso{position:fixed;top:0;left:0;right:0;z-index:55;background:var(--corallo-bottone);color:#fff;text-align:center;padding:10px 16px;font-size:14px;font-weight:600}
body.con-avviso{padding-top:var(--avviso-h,0px)}
body.con-avviso .nav{top:var(--avviso-h,0px)}

/* ── Calendario ────────────────────────────────────────────────────── */
.calendario{background:var(--sabbia-chiara);border:1px solid var(--bordo);border-radius:var(--raggio);padding:18px;user-select:none}
.cal-testa{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.cal-testa button{background:transparent;border:1px solid var(--bordo-campo);border-radius:50%;width:38px;height:38px;cursor:pointer;color:var(--onda);font-size:18px;line-height:1}
.cal-testa button:disabled{opacity:.3;cursor:default}
.cal-mesi{display:grid;grid-template-columns:1fr 1fr;gap:26px}
@media (max-width:700px){.cal-mesi{grid-template-columns:1fr}.cal-mesi .mese:nth-child(2){display:none}}
.mese .mese-titolo{font-family:var(--display);font-weight:500;font-size:18px;line-height:1.12;color:var(--abisso);margin:0 0 10px;text-align:center;text-transform:capitalize}
.mese-griglia{display:grid;grid-template-columns:repeat(7,1fr);gap:3px}
.mese-griglia .gs{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--tenue);text-align:center;padding:4px 0 8px;font-weight:600}
.mese-griglia .giorno{aspect-ratio:1;border:0;background:transparent;border-radius:10px;font:500 15px var(--testo-font);color:var(--inchiostro);cursor:pointer;position:relative;display:flex;align-items:center;justify-content:center}
/* ⚠️ Il passaggio del mouse NON vale sui giorni scelti: la regola e` piu`
   specifica di .inizio/.fine, e il giorno appena cliccato diventava beige
   con il numero bianco sopra, illeggibile finche' il mouse restava li`.
   E solo dove il mouse c'e` davvero: sul telefono il :hover resta appeso
   all'ultimo tocco. */
@media (hover:hover){.mese-griglia .giorno:hover:not(:disabled):not(.inizio):not(.fine):not(.dentro){background:var(--sabbia-scura)}}
.mese-griglia .giorno:disabled{color:#b9b3a6;cursor:not-allowed;text-decoration:line-through;text-decoration-color:#d3cdbf}
.mese-griglia .giorno.occupato{background:repeating-linear-gradient(135deg,transparent 0 4px,rgba(15,59,67,.07) 4px 6px);color:#b9b3a6;text-decoration:line-through}
.mese-griglia .giorno.passato{color:#c9c2b3;text-decoration:none}
.mese-griglia .giorno.checkout-solo{color:var(--tenue);text-decoration:none}
.mese-griglia .giorno.checkout-solo::after{content:'';position:absolute;inset:0;border-radius:10px;background:linear-gradient(135deg,transparent 50%,rgba(15,59,67,.08) 50%)}
.mese-griglia .giorno.oggi{font-weight:700;color:var(--corallo-testo)}
.mese-griglia .giorno.inizio,.mese-griglia .giorno.fine{background:var(--onda);color:#fff;font-weight:700}
.mese-griglia .giorno.dentro{background:#d5e6e8;border-radius:0}
.mese-griglia .giorno.inizio{border-radius:10px 0 0 10px}
.mese-griglia .giorno.fine{border-radius:0 10px 10px 0}
.mese-griglia .giorno.inizio.fine{border-radius:10px}
.mese-griglia .giorno.candidato{background:#e8f0f1}
.cal-legenda{display:flex;gap:18px;flex-wrap:wrap;font-size:12.5px;color:var(--tenue);margin-top:12px}
.cal-legenda span::before{content:'';display:inline-block;width:14px;height:14px;border-radius:4px;vertical-align:-2px;margin-right:6px;border:1px solid var(--bordo-campo)}
.cal-legenda .l-occ::before{background:repeating-linear-gradient(135deg,transparent 0 3px,rgba(15,59,67,.15) 3px 5px)}
.cal-legenda .l-sel::before{background:var(--onda)}
.cal-legenda .l-chk::before{background:linear-gradient(135deg,#fff 50%,rgba(15,59,67,.15) 50%)}

/* ── Pagina prenota: due colonne ───────────────────────────────────── */
.prenota-griglia{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,.9fr);gap:34px;align-items:start}
@media (max-width:900px){.prenota-griglia{grid-template-columns:minmax(0,1fr)}}
/* La barra del totale in fondo allo schermo (prenota.js): solo con una
   colonna, quando il riepilogo sta sotto e non si vede. Niente sfocatura
   dietro: e` fissa sopra una pagina che scorre. */
.barra-totale{display:none}
@media (max-width:900px){
  .barra-totale:not([hidden]){display:flex;position:fixed;left:0;right:0;bottom:0;z-index:60;align-items:center;justify-content:space-between;gap:14px;padding:10px 16px calc(10px + env(safe-area-inset-bottom));background:var(--sabbia-chiara);border-top:1px solid var(--bordo);box-shadow:0 -8px 22px rgba(15,59,67,.10)}
  .barra-totale b{display:block;font-family:var(--display);font-weight:500;font-size:22px;line-height:1.15;color:var(--abisso)}
  .barra-totale small{display:block;font-size:12.5px;color:var(--tenue)}
  .barra-totale .btn{flex:0 0 auto;height:46px;padding-inline:22px}
  body.con-barra-totale .piede{padding-bottom:96px}
}
.riepilogo{position:sticky;top:84px}
body.con-avviso .riepilogo{top:calc(84px + var(--avviso-h,0px))}
.riepilogo .card{padding:22px}
.righe-prezzo{list-style:none;margin:14px 0;padding:0}
.righe-prezzo li{display:flex;justify-content:space-between;gap:12px;padding:8px 0;border-bottom:1px dashed var(--bordo);font-size:15.5px}
.righe-prezzo li.totale{border-bottom:0;border-top:2px solid var(--abisso);margin-top:6px;padding-top:12px;font-weight:700;font-size:19px;color:var(--abisso);font-family:var(--display)}
.righe-prezzo li.tenue{color:var(--tenue);font-size:14px}
.righe-prezzo li.sconto{color:var(--ok)}
.date-scelte{font-family:var(--display);font-size:20px;color:var(--abisso);display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.date-scelte small{font-family:var(--testo-font);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--tenue);display:block}
.pillola{display:inline-block;background:var(--sabbia-scura);color:var(--abisso);border-radius:999px;padding:4px 12px;font-size:12px;letter-spacing:.1em;text-transform:uppercase;font-weight:600}
.pillola.verde{background:var(--ok-fondo);color:var(--ok)}
/* sulla pagina dell'ospite il verde di --ok su quel fondo fa 4,4:1; il pannello
   ha le sue pillole e resta com'e` */
#d-stato.pillola.verde{color:#215a42}
.pillola.rossa{background:var(--err-fondo);color:var(--err)}
.pillola.gialla{background:#fff3d6;color:#8a5a00}
.pillola.blu{background:#e3eef0;color:var(--onda)}

/* ── Passi del form (stepper) ──────────────────────────────────────── */
.tappe{display:flex;gap:8px;margin:0 0 22px;padding:0;list-style:none;font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:var(--tenue)}
.tappe li{flex:1;border-top:3px solid var(--bordo);padding-top:8px}
.tappe li.attiva{border-color:var(--corallo);color:var(--abisso)}
.tappe li.fatta{border-color:var(--onda)}

/* ── Biglietto della prenotazione (pagina ospite) ──────────────────── */
.biglietto{background:var(--sabbia-scura);border:1px solid #dbcfb5;border-left:4px solid var(--corallo);border-radius:0 var(--raggio) var(--raggio) 0;padding:22px 24px}
.biglietto{container-type:inline-size}
.biglietto dl{display:grid;grid-template-columns:minmax(0,1fr);margin:0}
.biglietto dt{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--tenue-piede);font-weight:700;padding-top:11px;margin:0}
.biglietto dd{margin:0;font-weight:600;font-size:16px;line-height:1.4;color:var(--abisso);padding-bottom:11px;border-bottom:1px dotted #cdbfa2}
.biglietto dt:first-of-type{padding-top:0}
.biglietto dd:last-of-type{border-bottom:0;padding-bottom:0}
.biglietto dd .sub,.biglietto dd small{display:block;font-weight:500;font-size:13.5px;color:var(--tenue-piede);margin-top:2px}
.biglietto dd#d-totale,.biglietto dd.forte{font-family:var(--display);font-size:24px;font-weight:500;letter-spacing:.01em}
@container (min-width:340px){
  .biglietto dl{grid-template-columns:minmax(0,9.5em) minmax(0,1fr);column-gap:18px;align-items:baseline}
  .biglietto dt{padding-top:12px;padding-bottom:12px;border-bottom:1px dotted #cdbfa2;align-self:center}
  .biglietto dd{padding-top:12px;text-align:right}
  .biglietto dt:first-of-type{padding-top:0}
  .biglietto dd:first-of-type{padding-top:0}
  .biglietto dt:last-of-type{border-bottom:0}
}
.rif{font-family:var(--display);font-size:26px;color:var(--abisso);letter-spacing:.02em}
.timeline{list-style:none;margin:0;padding:0;border-left:2px solid var(--bordo);margin-left:8px}
.timeline li{position:relative;padding:0 0 14px 20px;font-size:14.5px;color:var(--tenue)}
.timeline li::before{content:'';position:absolute;left:-7px;top:6px;width:12px;height:12px;border-radius:50%;background:var(--sabbia-chiara);border:2px solid var(--onda)}
.timeline li.ora::before{background:var(--corallo);border-color:var(--corallo)}
.timeline b{color:var(--abisso);display:block}
.azioni{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}
/* Nelle file di pulsanti un'etichetta lunga va a capo, non esce dal bordo
   (sul telefono «Cancella la prenotazione» non ci sta su una riga). */
.azioni .btn{white-space:normal;line-height:1.3;text-align:center;padding-left:18px;padding-right:18px;letter-spacing:.12em}

/* ── Pagina di conferma ────────────────────────────────────────────── */
.segno-ok{width:64px;height:64px;border-radius:50%;background:var(--corallo-bottone);color:#fff;display:flex;align-items:center;justify-content:center;font-size:30px;margin:0 auto 18px}

/* ── Footer ────────────────────────────────────────────────────────── */
.piede{background:var(--sabbia-scura);padding:48px 0 34px;margin-top:auto}
.piede-griglia{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:30px}
@media (max-width:760px){.piede-griglia{grid-template-columns:1fr}}
.piede h4{font-family:var(--testo-font);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--onda);margin:0 0 12px;font-weight:600}
.piede a{color:var(--inchiostro);text-decoration:none}
.piede a:hover{color:var(--onda);text-decoration:underline}
.piede ul{list-style:none;margin:0;padding:0;display:grid;gap:8px;font-size:15px}
.piede .saluto{font-family:var(--display);font-weight:500;font-size:30px;color:var(--abisso);margin:0 0 4px}
.piede .host{font-size:11px;letter-spacing:.16em;text-transform:uppercase;font-weight:600;color:var(--onda)}
.piede .legale{margin-top:30px;padding-top:18px;border-top:1px solid #dbcfb5;font-size:12.5px;color:var(--tenue-piede);display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}
.piede .sub{color:var(--tenue-piede)}
.cin{font-variant-numeric:tabular-nums;letter-spacing:.04em}

/* L ingresso della copertina si vede UNA VOLTA per scheda. Sono le stesse
   regole di prefers-reduced-motion qui sotto, che a sua volta lo spegne per
   chi chiede meno movimento: le due cose non si pestano i piedi, dicono
   la stessa cosa per due motivi diversi. Le onde NON si fermano: quelle non
   sono un ingresso, sono il disegno. */
body.gia-vista .luogo,body.gia-vista .titolo,body.gia-vista .motto,
body.gia-vista .orizzonte-azioni,body.gia-vista .cerca{opacity:1;transform:none;animation:none}
/* ⚠️ L'astro sta fuori dall'elenco qui sopra: il suo `transform` non fa
   parte dell'ingresso, è il `translateX(-50%)` che lo CENTRA — con `left:50%`
   da solo appoggia il bordo sinistro a meta` schermo e scivola a destra di
   mezzo disco. Il suo ingresso è una sola opacità, quindi basta spegnere
   quella. Vale per tutti e due i blocchi: la stessa riga copiata senza
   guardare ha tenuto l'astro storto per chi chiede meno movimento. */
body.gia-vista .orizzonte::before{opacity:1;animation:none}
body.gia-vista .orizzonte .filo{width:58px;animation:none}

/* ── Stampa e accessibilità ────────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  .luogo,.titolo,.motto,.orizzonte-azioni,.cerca{opacity:1;transform:none;animation:none}
  .orizzonte::before{opacity:1;animation:none}   /* vedi la nota sopra: niente `transform:none` */
  .orizzonte .filo{width:58px;animation:none}
  .onde::before,.onde>i,.onde::after,.orizzonte::after,.btn .spin{animation:none}
  html{scroll-behavior:auto}
}
@media print{
  .nav,.onde,.orizzonte::before,.orizzonte::after,.azioni,.piede{display:none!important}
  .orizzonte{min-height:0;background:#fff;color:#000;padding:20px}
  .orizzonte .titolo,.orizzonte .motto{color:#000}
  body{background:#fff}
}

/* ── I servizi extra nella tappa delle date ────────────────────────── */
.servizi{margin-top:16px}
.servizio{display:flex;align-items:center;gap:12px;padding:10px 0;border-top:1px dashed var(--bordo);font-size:15px;cursor:pointer}
.servizio:last-child{border-bottom:1px dashed var(--bordo)}
.servizio input{width:20px;height:20px;accent-color:var(--corallo);flex:none}
.servizio>span{flex:1;display:flex;flex-direction:column;line-height:1.3}
.servizio b{font-weight:600;color:var(--abisso)}
.servizio small{color:var(--tenue);font-size:13px}
.contatore.piccolo{height:38px;flex:none}
.contatore.piccolo button{width:36px;font-size:18px}
.contatore.piccolo output{min-width:28px;font-size:15px}

/* ── Il codice sconto nel riepilogo ────────────────────────────────── */
.codice-sconto{margin-top:12px;padding-top:12px;border-top:1px dashed var(--bordo);font-size:13.5px}
.codice-form{display:flex;gap:8px;margin-top:8px}
.codice-form input{flex:1;min-width:0;padding:9px 11px;font-size:16px;text-transform:uppercase;letter-spacing:.08em}
.codice-form .btn{padding:9px 14px;font-size:10.5px}
.codice-esito{margin:6px 0 0;font-size:13px}
.codice-esito.ok{color:var(--ok)}
.codice-esito.errore{color:var(--err)}
.codice-esito .link-testo{font-size:12px;margin-left:6px}

/* ── Calendario ospite: il prezzo sotto al giorno ─────────────────── */
.mese-griglia .giorno{flex-direction:column;gap:1px;line-height:1.1}
.mese-griglia .giorno small{font-size:10px;font-weight:500;color:var(--tenue);letter-spacing:0}
.mese-griglia .giorno:disabled small{display:none}
.mese-griglia .giorno.inizio small,.mese-griglia .giorno.fine small{color:rgba(255,255,255,.85)}
.mese-griglia .giorno.dentro small,.mese-griglia .giorno.candidato small{color:var(--onda)}
.cal-legenda .l-prezzo::before{display:none}

/* ── Pagina dell'ospite: riferimento, bonifico, azioni nella timeline ── */
.riga-rif{display:flex;justify-content:space-between;gap:14px;align-items:center;flex-wrap:wrap;margin-bottom:14px}
.dati-bonifico{display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px 14px;align-items:baseline;font-size:15px;margin:14px 0 0}
.dati-bonifico dt{margin:0}
.dati-bonifico dd{margin:0;overflow-wrap:anywhere}
.dati-bonifico .forte{font-weight:600}
/* l'IBAN a gruppi di quattro, con il suo «Copia» accanto */
.iban-riga{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px}
.iban{font-weight:600;font-variant-numeric:tabular-nums;letter-spacing:.03em;word-spacing:.1em}
.li-azione{display:block;margin-top:8px}
/* il riepilogo: la riga dell'acconto viene dopo il totale e non si somma */
.righe-prezzo li.acconto{border-bottom-style:solid}