/* MyBeach · sito pubblico. Una sola famiglia (Archivo, larghezza variabile): titoli larghi e pesanti come le insegne
   dei lidi, testo normale per leggere. Palette del litorale: acqua, sabbia, ombrellone giallo, rosso del bagnino. */
:root {
  --adriatico: #0B3D5C;
  --profondo: #072A40;
  --turchese: #3FB8BE;
  --sabbia: #ECDDC3; /* uguale alla sabbia dello shader del mare */
  --sabbia-scura: #E2D1B1;
  --calce: #FBFCFA;
  --giallo: #FFC83D;
  --giallo-scuro: #E5A800;
  --rosso: #D93A2B;
  --testo: #12303F;
  --tenue: #4C6370;
  --linea: #D7E2E5;
  --raggio: 14px;
  --font: "Archivo", 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; } }
body { margin: 0; font: 400 1.0625rem/1.6 var(--font); color: var(--testo); background: var(--calce); }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--adriatico); text-underline-offset: .18em; }
:focus-visible { outline: 3px solid var(--giallo-scuro); outline-offset: 3px; border-radius: 4px; }
.salta { position: absolute; left: -999px; top: 8px; background: var(--giallo); color: var(--profondo); padding: 8px 14px; z-index: 20; }
.salta:focus { left: 16px; }

h1, h2, h3 { font-stretch: 112%; font-weight: 800; line-height: 1.04; letter-spacing: -.02em; margin: 0; color: var(--profondo); }
h1 { font-size: clamp(2.4rem, 6.2vw, 4.6rem); }
h2 { font-size: clamp(1.9rem, 4vw, 3rem); }
h3 { font-size: 1.25rem; font-stretch: 105%; letter-spacing: -.01em; line-height: 1.2; }
p { margin: 0; max-width: 62ch; }
.largo { width: min(1180px, 100% - 32px); margin-inline: auto; }

/* ===== intestazione ===== */
.testata { position: absolute; inset: 0 0 auto 0; z-index: 10; }
.testata .largo { display: flex; align-items: center; gap: 20px; padding-block: 18px; }
.marchio { display: flex; align-items: center; gap: 10px; color: #fff; text-decoration: none; font-weight: 800; font-stretch: 115%; font-size: 1.35rem; }
.marchio svg { width: 38px; height: 38px; border-radius: 22%; }
.testata nav { margin-left: auto; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.testata nav a { color: #fff; text-decoration: none; font-weight: 600; padding: 8px 12px; border-radius: 999px; }
.testata nav a:hover { background: rgba(255, 255, 255, .14); }
.testata nav a.console { background: #fff; color: var(--profondo); }
.testata nav a.console:hover { background: var(--giallo); }
@media (max-width: 720px) { .testata nav a:not(.console) { display: none; } }

/* ===== bottoni ===== */
.bottone { display: inline-flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 24px; border-radius: 999px;
  font: 700 1.05rem var(--font); text-decoration: none; border: 2px solid transparent; cursor: pointer; }
.bottone.pieno { background: var(--giallo); color: var(--profondo); }
.bottone.pieno:hover { background: #FFD668; }
.bottone.vuoto { border-color: var(--profondo); color: var(--profondo); background: transparent; }
.bottone.vuoto:hover { background: rgba(11, 61, 92, .08); }
.bottone svg { width: 22px; height: 22px; flex: none; }

/* ===== primo piano: il lido visto dall'alto ===== */
.lido { position: relative; min-height: min(92vh, 860px); background: var(--sabbia); overflow: hidden; display: grid;
  grid-template-rows: 1fr auto; }
.lido canvas, .lido .mare-fermo { position: absolute; inset: 0 0 auto 0; width: 100%; height: 48%;
  -webkit-mask-image: linear-gradient(#000 82%, transparent); mask-image: linear-gradient(#000 82%, transparent); }
.lido .mare-fermo { background: linear-gradient(180deg, #0B4F73 0%, #1D7C99 60%, #5CC3C3 100%); }
.lido .mare-fermo.nascosto { display: none; }
.lido .pianta { position: absolute; left: 0; right: 0; top: 44%; bottom: 0; width: 100%; height: 56%; }
.lido .contenuto { position: relative; z-index: 2; align-self: end; padding-block: 0 56px; }
.lido .contenuto .riquadro { background: var(--calce); border-radius: 22px; padding: clamp(24px, 4vw, 44px);
  max-width: 720px; box-shadow: 0 30px 60px -30px rgba(7, 42, 64, .45); }
.lido .contenuto p { margin-top: 18px; font-size: 1.2rem; color: var(--tenue); }
.azioni { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }

/* l'ombrellone prenotato: unico movimento della pagina, all'apertura */
.pianta .tuo circle.cupola { fill: var(--giallo); stroke: var(--profondo); stroke-width: 3; }
.pianta .tuo .biglietto { opacity: 0; transform: translateY(10px); transform-box: fill-box; }
@media (prefers-reduced-motion: no-preference) {
  .pianta .tuo .anello { animation: anello 2.4s ease-out .8s 2; transform-origin: center; transform-box: fill-box; opacity: 0; }
  .pianta .tuo .biglietto { animation: biglietto .5s cubic-bezier(.2, .8, .2, 1.2) 1.4s forwards; }
}
@media (prefers-reduced-motion: reduce) { .pianta .tuo .biglietto { opacity: 1; transform: none; } }
@keyframes anello { 0% { opacity: .9; transform: scale(.6); } 100% { opacity: 0; transform: scale(2.4); } }
@keyframes biglietto { to { opacity: 1; transform: none; } }

/* ===== sezioni ===== */
.sezione { padding-block: clamp(64px, 9vw, 120px); }
.sezione .intro { display: grid; gap: 18px; margin-bottom: 48px; }
.sezione .intro p { font-size: 1.15rem; color: var(--tenue); }
.sabbiosa { background: var(--sabbia); }
.scura { background: var(--profondo); color: #DCEAF0; }
.scura h2, .scura h3 { color: #fff; }
.scura .intro p, .scura p { color: #B9D0DA; }
.scura a { color: var(--giallo); }

/* funzioni con le schermate vere */
.funzione { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.funzione + .funzione { margin-top: clamp(64px, 8vw, 110px); }
.funzione.rovescia .testo { order: 2; }
.funzione .testo { display: grid; gap: 14px; }
.funzione .testo p { color: var(--tenue); }
.funzione ul { margin: 6px 0 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.funzione li { padding-left: 30px; position: relative; }
.funzione li::before { content: ""; position: absolute; left: 0; top: .45em; width: 14px; height: 14px; border-radius: 50%;
  background: var(--giallo); box-shadow: 0 0 0 3px rgba(255, 200, 61, .3); }
@media (max-width: 860px) { .funzione { grid-template-columns: 1fr; } .funzione.rovescia .testo { order: 0; } }

.telefoni { display: flex; justify-content: center; gap: 18px; }
.telefono { width: min(250px, 44vw); border-radius: 34px; padding: 10px; background: var(--profondo);
  box-shadow: 0 40px 70px -35px rgba(7, 42, 64, .6); flex: none; }
.telefono img { border-radius: 25px; width: 100%; }
.telefoni .telefono:nth-child(2) { margin-top: 56px; }
@media (max-width: 520px) { .telefoni .telefono:nth-child(2) { display: none; } .telefono { width: min(280px, 78vw); } }

.schermo { border-radius: 16px; overflow: hidden; border: 1px solid #C9D6DA; background: #fff;
  box-shadow: 0 40px 80px -40px rgba(7, 42, 64, .55); }
.schermo .barra { display: flex; gap: 6px; padding: 10px 14px; background: #EEF2F3; border-bottom: 1px solid #DCE4E6; }
.schermo .barra i { width: 11px; height: 11px; border-radius: 50%; background: #C6D1D5; }

/* come funziona: tre passi in sequenza vera */
.passi { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; counter-reset: passo; margin: 0; padding: 0; list-style: none; }
.passi li { counter-increment: passo; display: grid; gap: 10px; align-content: start; padding-top: 22px; border-top: 3px solid var(--profondo); }
.passi li::before { content: counter(passo); font-weight: 800; font-stretch: 125%; font-size: 3.4rem; line-height: 1; color: var(--rosso); }
.passi p { color: var(--tenue); }
@media (max-width: 760px) { .passi { grid-template-columns: 1fr; } }

/* elenco di capacità per i gestori */
.griglia { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 34px 40px; }
.griglia > div { display: grid; gap: 8px; align-content: start; }
.griglia svg { width: 34px; height: 34px; color: var(--rosso); }
.griglia p { color: var(--tenue); }
.scura .griglia svg { color: var(--giallo); }

/* scarica l'app */
.store { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 26px; }
.store .bottone { min-height: 60px; }
.store small { display: block; font-weight: 500; font-size: .8rem; opacity: .8; line-height: 1.1; }
.store .bottone span { line-height: 1.15; text-align: left; }
.nota { font-size: .95rem; margin-top: 14px; }

/* domande */
.domande { display: grid; gap: 12px; max-width: 860px; }
.domande details { background: #fff; border: 1px solid var(--linea); border-radius: var(--raggio); padding: 0 22px; }
.domande summary { cursor: pointer; font-weight: 700; padding: 18px 0; list-style: none; display: flex; justify-content: space-between; gap: 16px; }
.domande summary::-webkit-details-marker { display: none; }
.domande summary::after { content: "+"; font-size: 1.5rem; line-height: 1; color: var(--rosso); }
.domande details[open] summary::after { content: "–"; }
.domande details p { padding-bottom: 20px; color: var(--tenue); }

/* chiamata finale */
.chiamata { display: grid; grid-template-columns: minmax(0, 1.2fr) auto; gap: 28px; align-items: center; }
@media (max-width: 760px) { .chiamata { grid-template-columns: 1fr; } }

/* piede */
.piede { background: var(--profondo); color: #9FB9C5; padding-block: 48px; font-size: .95rem; }
.piede .largo { display: flex; flex-wrap: wrap; gap: 24px 48px; justify-content: space-between; }
.piede a { color: #fff; }
.piede nav { display: flex; flex-wrap: wrap; gap: 10px 22px; }

/* pagina gestori: primo piano con la console */
.gestori-primo { background: var(--profondo); color: #DCEAF0; padding-top: 120px; overflow: hidden; }
.gestori-primo .largo { display: grid; gap: 22px; }
.gestori-primo h1 { color: #fff; max-width: 15ch; }
.gestori-primo p { font-size: 1.2rem; color: #B9D0DA; }
.gestori-primo .schermo { margin-top: 36px; margin-bottom: -80px; }
.gestori-primo .bottone.vuoto { border-color: #fff; color: #fff; }
.dopo-schermo { padding-top: calc(80px + clamp(48px, 7vw, 96px)); }
.pianta .libero { color: #1F7FA8; }
.pianta .preso { color: #BBAA8B; }
.piede .nome { color: #fff; }
.store .in-arrivo { cursor: default; opacity: .75; }
.store .in-arrivo.pieno { background: var(--sabbia-scura); }
.scura .funzione .testo p { color: #B9D0DA; }