/* MyBeach · sito pubblico. Idea: la pagina è una spiaggia vista dall'alto e una giornata che passa,
   dal mare del mattino (in cima) al tramonto e alla notte (in fondo). Un solo carattere: Bricolage Grotesque. */

:root {
  --adriatico: #0B4A72;   /* mare profondo, testi su chiaro */
  --turchese: #3FC2CF;    /* acqua bassa */
  --sabbia: #ECDDC3;      /* la stessa sabbia del mare animato */
  --calce: #FBF7EF;       /* pietra di Polignano: fondi chiari */
  --corallo: #FF5A5F;     /* l'ombrellone dell'icona: azioni */
  --corallo-scuro: #B8242E;
  --corallo-bottone: #D42F3A; /* pulsanti: testo bianco leggibile (contrasto 4,6:1) */
  --sole: #FFC34D;
  --tramonto: #FF7A3D;
  --notte: #14203F;
  --inchiostro: #10233A;
  --tenue: #4C5B6B;
  --linea: rgba(16, 35, 58, .14);
  --larghezza: 1200px;
  --carattere: 'Bricolage Grotesque', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation: none !important; transition: none !important; } }
body { margin: 0; background: var(--calce); color: var(--inchiostro); font: 400 1.0625rem/1.6 var(--carattere);
  font-variation-settings: 'opsz' 14; -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3 { margin: 0; font-weight: 800; letter-spacing: -.02em; text-wrap: balance; }
h1, h2 { font-variation-settings: 'opsz' 96, 'wdth' 78; line-height: .95; }
h1 { font-size: clamp(3rem, 8.4vw, 7.4rem); }
h2 { font-size: clamp(2.2rem, 5.2vw, 4.4rem); }
h3 { font-size: 1.45rem; line-height: 1.15; font-variation-settings: 'opsz' 32; letter-spacing: -.01em; }
p { margin: 0; text-wrap: pretty; }
.largo { width: min(var(--larghezza), 100% - 40px); margin-inline: auto; }
.salta { position: absolute; left: -999px; top: 8px; background: var(--inchiostro); color: #fff; padding: 10px 16px; border-radius: 10px; z-index: 50; }
.salta:focus { left: 12px; }
:focus-visible { outline: 3px solid var(--sole); outline-offset: 3px; border-radius: 6px; }

/* ----- pulsanti ----- */
.bottone { display: inline-flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 24px; border-radius: 999px;
  font: 700 1.02rem/1 var(--carattere); text-decoration: none; cursor: pointer; border: 2px solid transparent;
  transition: transform .15s ease, background-color .15s ease; }
.bottone:hover { transform: translateY(-2px); }
.bottone.pieno { background: var(--corallo-bottone); color: #fff; }
.bottone.pieno:hover { background: var(--corallo-scuro); }
.bottone.vuoto { border-color: currentColor; color: inherit; }
.azioni { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }

/* ----- testata ----- */
.testata { position: absolute; inset: 0 0 auto 0; z-index: 10; color: #fff; }
.testata .largo { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 18px; }
.marchio { display: inline-flex; align-items: center; gap: 10px; font-weight: 800; font-size: 1.3rem; text-decoration: none;
  font-variation-settings: 'opsz' 32; letter-spacing: -.01em; }
.marchio img { width: 40px; height: 40px; border-radius: 10px; }
.testata nav { display: flex; align-items: center; gap: 4px 22px; flex-wrap: wrap; justify-content: flex-end; font-weight: 600; }
.testata nav a { text-decoration: none; padding: 10px 0; min-height: 44px; display: inline-flex; align-items: center; }
.testata nav a:hover { text-decoration: underline; text-underline-offset: 5px; }
.testata nav .console { background: rgba(255, 255, 255, .16); border: 1.5px solid rgba(255, 255, 255, .6); padding: 8px 16px; border-radius: 999px; }
.testata nav .console:hover { text-decoration: none; background: rgba(255, 255, 255, .28); }
@media (max-width: 720px) {
  .testata nav { gap: 4px 14px; font-size: .95rem; }
  .testata nav a.facoltativo { display: none; }
  .testata nav .console { padding: 8px 12px; }
  .testata .lungo { display: none; }
  .testata nav { flex-wrap: nowrap; }
}
@media (max-width: 400px) { .testata nav a.stretto { display: none; } .marchio { font-size: 1.15rem; } }
@media (min-width: 721px) { .testata .corto { display: none; } }

/* ----- primo piano: il mare dall'alto e la spiaggia da toccare ----- */
.spiaggia { position: relative; background: var(--sabbia); overflow: hidden; }
.spiaggia .acqua { position: relative; min-height: clamp(520px, 74vh, 760px); color: #fff; display: flex; align-items: flex-end;
  background: linear-gradient(180deg, #0A436A 0%, #136C93 55%, #3FB0BF 90%, var(--sabbia) 100%); }
.spiaggia canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
/* la sabbia del mare animato sfuma nella sabbia della pagina, senza gradino */
.spiaggia .acqua::after { content: ''; position: absolute; inset: auto 0 0 0; height: 70px; pointer-events: none;
  background: linear-gradient(180deg, rgba(236, 221, 195, 0), var(--sabbia)); }
.spiaggia .acqua .largo { position: relative; padding-block: 120px clamp(110px, 16vh, 170px); }
@media (max-width: 720px) {
  .spiaggia .acqua { min-height: 0; }
  .spiaggia .acqua .largo { padding-block: 104px max(150px, 22vh); }
  .spiaggia .sotto { font-size: 1.08rem; }
  .sabbia .invito { flex-direction: column; align-items: flex-start; gap: 6px; }
}
.spiaggia h1 { max-width: 11ch; text-shadow: 0 2px 30px rgba(4, 30, 52, .35); }
.spiaggia .sotto { max-width: 34rem; margin-top: 22px; font-size: 1.22rem; line-height: 1.5; color: #EAF6FA;
  text-shadow: 0 1px 16px rgba(4, 30, 52, .45); }
.spiaggia .bottone.vuoto { color: #fff; }

.sabbia { position: relative; padding-block: 8px 70px; }
.sabbia .largo { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 32px; align-items: start; }
.sabbia .invito { grid-column: 1 / -1; display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  font-weight: 600; color: #6A5838; }
.sabbia .invito strong { font-size: 1.15rem; color: var(--inchiostro); }
.legenda { display: flex; gap: 18px; font-size: .92rem; }
.legenda span { display: inline-flex; align-items: center; gap: 7px; }
.legenda i { width: 14px; height: 14px; border-radius: 50%; display: inline-block; }
.legenda .l-libero { background: conic-gradient(var(--corallo) 0 25%, #fff 0 50%, var(--corallo) 0 75%, #fff 0); }
.legenda .l-preso { background: #C9B48D; }
.legenda .l-tuo { background: conic-gradient(var(--adriatico) 0 25%, #fff 0 50%, var(--adriatico) 0 75%, #fff 0); }

.file { display: grid; gap: 14px; padding: 6px 0; }
.fila { display: grid; grid-template-columns: 30px repeat(var(--posti, 12), minmax(0, 1fr)); gap: 8px; align-items: center; }
.fila > b { font-weight: 800; color: #8A7550; font-size: .95rem; text-align: center; }
.ombrellone { position: relative; aspect-ratio: 1; border: 0; padding: 0; border-radius: 50%; cursor: pointer; background: transparent;
  display: grid; place-items: center; }
.ombrellone .tela { width: 86%; aspect-ratio: 1; border-radius: 50%;
  background: conic-gradient(from 22.5deg, var(--corallo) 0 12.5%, #fff 0 25%, var(--corallo) 0 37.5%, #fff 0 50%,
    var(--corallo) 0 62.5%, #fff 0 75%, var(--corallo) 0 87.5%, #fff 0);
  box-shadow: 5px 7px 0 rgba(120, 92, 48, .28); transition: transform .25s cubic-bezier(.3, 1.6, .5, 1); }
.ombrellone .tela::after { content: ''; position: absolute; inset: 0; margin: auto; width: 12%; height: 12%; border-radius: 50%; background: #5E4A2A; }
.ombrellone:hover .tela { transform: scale(1.12) rotate(12deg); }
.ombrellone[aria-disabled='true'] { cursor: not-allowed; }
.ombrellone[aria-disabled='true'] .tela { width: 46%; background: #C9B48D; box-shadow: 2px 3px 0 rgba(120, 92, 48, .22); }
.ombrellone[aria-disabled='true'] .tela::after { display: none; }
.ombrellone[aria-disabled='true']:hover .tela { transform: none; }
.ombrellone[aria-pressed='true'] .tela { transform: scale(1.18) rotate(30deg);
  background: conic-gradient(from 22.5deg, var(--adriatico) 0 12.5%, #fff 0 25%, var(--adriatico) 0 37.5%, #fff 0 50%,
    var(--adriatico) 0 62.5%, #fff 0 75%, var(--adriatico) 0 87.5%, #fff 0); }
.ombrellone[aria-pressed='true']::before { content: ''; position: absolute; inset: -6px; border-radius: 50%; border: 3px solid var(--adriatico);
  animation: onda 1.6s ease-out infinite; }
@keyframes onda { from { transform: scale(.8); opacity: 1; } to { transform: scale(1.5); opacity: 0; } }

/* il biglietto che compare quando scegli un posto */
.biglietto { position: sticky; top: 24px; background: #fff; border-radius: 22px; padding: 22px; box-shadow: 0 24px 60px rgba(84, 62, 24, .18);
  display: grid; gap: 14px; }
.biglietto[hidden] { display: none; }
.biglietto .vuoto-msg { color: var(--tenue); }
.biglietto h2 { font-size: 2.6rem; font-variation-settings: 'opsz' 96, 'wdth' 75; }
.biglietto dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; }
.biglietto dt { color: var(--tenue); }
.biglietto dd { margin: 0; font-weight: 700; text-align: right; }
.biglietto .totale dd { font-size: 1.5rem; }
.biglietto .tempo { font-size: .92rem; color: var(--adriatico); font-weight: 700; }
.biglietto .bottone { justify-content: center; }
.qr { width: 108px; aspect-ratio: 1; display: grid; grid-template-columns: repeat(11, 1fr); gap: 1px; padding: 8px; background: #fff;
  border: 1.5px solid var(--linea); border-radius: 10px; }
.qr i { background: var(--inchiostro); border-radius: 1px; }
.qr i.v { background: transparent; }
.biglietto .riga { display: flex; gap: 16px; align-items: center; }
.biglietto .riga p { font-size: .95rem; color: var(--tenue); }
@media (max-width: 900px) {
  .sabbia .largo { grid-template-columns: 1fr; }
  .biglietto { position: static; }
  .fila { grid-template-columns: 22px repeat(var(--posti, 8), minmax(0, 1fr)); gap: 5px; }
}

/* ----- una giornata al mare: ogni ora ha il suo cielo ----- */
.giornata > header { background: var(--sabbia); padding-block: 40px 30px; }
.giornata > header p { max-width: 38rem; margin-top: 16px; font-size: 1.15rem; color: #5B4A2C; }
.giornata ol { list-style: none; margin: 0; padding: 0; }
.ora { padding-block: clamp(56px, 9vw, 110px); }
.ora .largo { display: grid; grid-template-columns: 220px minmax(0, 1fr) minmax(0, 380px); gap: 40px; align-items: center; }
.ora time { font-weight: 800; font-size: clamp(3rem, 6vw, 5.2rem); line-height: 1; letter-spacing: -.04em;
  font-variation-settings: 'opsz' 96, 'wdth' 75; font-variant-numeric: tabular-nums; }
.ora h3 { font-size: clamp(1.6rem, 2.8vw, 2.3rem); font-variation-settings: 'opsz' 60, 'wdth' 85; letter-spacing: -.02em; }
.ora .testo p { margin-top: 14px; font-size: 1.12rem; max-width: 34rem; }
.ora .testo ul { margin: 16px 0 0; padding-left: 20px; display: grid; gap: 4px; }
.ora .telefoni { display: flex; gap: 14px; justify-content: center; }
.telefono { border-radius: 34px; padding: 8px; background: #0E1B2C; box-shadow: 0 30px 60px rgba(9, 30, 50, .28); max-width: 240px; }
.telefono img { border-radius: 26px; }
.telefoni .telefono:nth-child(2) { margin-top: 48px; }
.ora-1 { background: #FDF3E1; } .ora-1 time { color: #A55A00; }
.ora-2 { background: #E7F6F7; } .ora-2 time { color: #0B6B78; }
.ora-3 { background: #FFF6D9; } .ora-3 time { color: #8F5B00; }
.ora-4 { background: #FFE6CC; } .ora-4 time { color: #A83A0E; }
.ora-5 { background: linear-gradient(180deg, #FF8A4C 0%, #E8436F 60%, #5A2A6B 100%); color: #fff; }
.ora-5 time { color: #FFE3A3; }
.ora-5 .testo p { color: #FFEDE6; }
@media (max-width: 900px) {
  .ora .largo { grid-template-columns: 1fr; gap: 22px; }
  .ora .telefoni { justify-content: flex-start; }
  .telefono { max-width: 200px; }
}

/* ----- per chi ha un lido: la notte ----- */
.notte { background: radial-gradient(1200px 500px at 80% 0%, #2A2F6B 0%, transparent 60%), var(--notte); color: #E8ECF6;
  padding-block: clamp(70px, 10vw, 130px); }
.notte .divisa { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 50px; align-items: center; }
.notte h2, .notte .intro h2 { color: #fff; }
.notte .intro p { color: #C5CEE4; }
.notte p { margin-top: 18px; font-size: 1.15rem; color: #C5CEE4; max-width: 32rem; }
.notte ul { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 12px; }
.notte li { padding-left: 28px; position: relative; }
.notte li::before { content: ''; position: absolute; left: 0; top: .55em; width: 12px; height: 12px; border-radius: 50%; background: var(--sole);
  box-shadow: 0 0 14px var(--sole); }
.notte .bottone.vuoto { color: #fff; }
.schermo { border-radius: 16px; overflow: hidden; background: #fff; box-shadow: 0 40px 80px rgba(0, 0, 0, .35); }
.schermo .barra { display: flex; gap: 7px; padding: 11px 14px; background: #E9ECF2; }
.schermo .barra i { width: 11px; height: 11px; border-radius: 50%; background: #C8CDD8; }
@media (max-width: 900px) { .notte .divisa { grid-template-columns: 1fr; } }

/* ----- sezioni semplici ----- */
.sezione { padding-block: clamp(64px, 9vw, 110px); }
.sezione .intro { max-width: 46rem; margin-bottom: 40px; }
.sezione .intro p { margin-top: 16px; font-size: 1.15rem; color: var(--tenue); }
.sabbiosa { background: var(--sabbia); }

.scarica .largo { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 30px; align-items: end; }
.scarica p { margin-top: 16px; font-size: 1.15rem; color: var(--tenue); max-width: 36rem; }
.store { display: flex; flex-wrap: wrap; gap: 12px; }
.in-arrivo { cursor: default; background: var(--inchiostro); color: #fff; }
.in-arrivo:hover { transform: none; }
.in-arrivo svg { width: 24px; height: 24px; }
.in-arrivo small { display: block; font-size: .72rem; font-weight: 600; opacity: .8; margin-bottom: 3px; }
@media (max-width: 800px) { .scarica .largo { grid-template-columns: 1fr; } }

.domande { display: grid; gap: 0; border-top: 1.5px solid var(--linea); max-width: 52rem; }
.domande details { border-bottom: 1.5px solid var(--linea); }
.domande summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 20px; padding: 22px 0;
  font-weight: 700; font-size: 1.2rem; }
.domande summary::-webkit-details-marker { display: none; }
.domande summary::after { content: '+'; font-size: 1.6rem; line-height: 1; color: var(--corallo); transition: transform .2s ease; }
.domande details[open] summary::after { transform: rotate(45deg); }
.domande details p { padding: 0 0 22px; color: var(--tenue); max-width: 44rem; }

/* passi numerati: qui sono davvero una sequenza */
.passi { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 28px;
  counter-reset: passo; }
.passi li { counter-increment: passo; border-top: 3px solid var(--inchiostro); padding-top: 18px; }
.passi li::before { content: counter(passo); display: block; font-weight: 800; font-size: 3.2rem; line-height: 1; color: var(--corallo);
  font-variation-settings: 'opsz' 96, 'wdth' 75; margin-bottom: 10px; }
.passi p { margin-top: 8px; color: var(--tenue); }

/* ----- piede: il buio dopo il tramonto ----- */
.piede { background: #0C1530; color: #AEB8D2; padding-block: 50px; font-size: .98rem; }
.piede .largo { display: flex; justify-content: space-between; gap: 30px; flex-wrap: wrap; }
.piede .marchio { color: #fff; }
.piede p { margin-top: 10px; }
.piede nav { display: flex; flex-wrap: wrap; gap: 10px 26px; align-items: center; }
.piede nav a { text-decoration: none; }
.piede nav a:hover { color: #fff; text-decoration: underline; }

/* ----- pagina dei gestori ----- */
.gestori-primo { background: radial-gradient(900px 500px at 15% 0%, #23407A 0%, transparent 60%), var(--notte); color: #fff;
  padding: 130px 0 0; overflow: hidden; }
.gestori-primo h1 { max-width: 12ch; }
.gestori-primo p { max-width: 36rem; margin-top: 22px; font-size: 1.22rem; color: #C5CEE4; }
.gestori-primo .bottone.vuoto { color: #fff; }
.gestori-primo .schermo { margin-top: 60px; margin-bottom: -60px; }
.dopo-schermo { padding-top: 130px; }
.funzione { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 50px; align-items: center; padding-block: 40px; }
.funzione.rovescia { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.funzione.rovescia .testo { order: 2; }
.funzione h3 { font-size: clamp(1.5rem, 2.4vw, 2rem); font-variation-settings: 'opsz' 60, 'wdth' 85; letter-spacing: -.02em; }
.funzione .testo p { margin-top: 12px; font-size: 1.1rem; color: var(--tenue); }
@media (max-width: 900px) { .funzione, .funzione.rovescia { grid-template-columns: 1fr; gap: 24px; } .funzione.rovescia .testo { order: 0; } }
.griglia { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 34px 40px; }
.griglia svg { width: 34px; height: 34px; color: var(--sole); margin-bottom: 12px; }
.griglia p { margin-top: 8px; color: #C5CEE4; }
.notte .griglia h3 { color: #fff; }
.chiamata { display: flex; justify-content: space-between; align-items: end; gap: 30px; flex-wrap: wrap; }
.chiamata .intro { margin-bottom: 0; }