/* Trabocco La Chiave sul Mare — foglio di stile */

/* ==========================================================================
   LA CHIAVE SUL MARE — sistema visivo
   --------------------------------------------------------------------------
   TESI
   Un trabocco non è un ristorante con vista mare: è una macchina di legno
   piantata dentro l'acqua. Assi sbiancate dal sale, pali storti, cavi tesi,
   una rete che scende e risale. Il colore non lo dà la vernice, lo dà il
   tempo: sotto c'è l'Adriatico scuro, sopra c'è il legno sbiancato, e in
   mezzo passa una sola cosa calda — la corda. Perciò la pagina è scura come
   l'acqua vista dalle assi, la banda chiara è il tavolato, e l'unico colore
   caldo è quello che si tira con le mani.

   FORME
   Il legno segato non ha angoli tondi: raggio 2px ovunque, mai annidato
   (nessun raggio contiene un altro raggio, quindi la regola concentrica non
   ha su cosa applicarsi — è voluto). L'impaginazione è governata da righe
   orizzontali a tutta larghezza: il tavolato, l'orizzonte, i cavi.

   CARATTERI  (assegnati, di sistema, nessuna richiesta esterna)
   Titoli  Constantia  — serif con le grazie asciutte, tiene bene lo scuro
   Corpo   Corbel      — umanista, aperta, leggibile a 16px su fondo scuro
   Misure  Consolas    — solo etichette maiuscole e numeri (telefono, righe)

   SCALA   12 · 14 · 16 · 18 · 22 · 30 · 42 · 60 · 88
   RITMO   base 4px · gap fra sezioni 120px (88 sotto i 760) · frame 1120px

   COLORE — rampe, non colori sparsi
   Acqua (superfici scure)   Fondale #0E2028 → Secca #14303B → Relitto #1B3E4B
   Legno (superficie chiara) Asse #E7E1D4 — compare una volta sola, la banda
   Testo su acqua            Sale #F2EEE6 · Asse #E7E1D4 · Schiuma #93AEB7
   Struttura                 Cavo #7E9AA4 — bordi dei controlli, non testo
   Azione                    Corda #D9964F — solo i pulsanti e lo stato attivo
   Dato mancante             Vetro #8ED3B4 — un colore, un significato: qui
                             manca un dato e lo deve dare il titolare

   CONTRASTI MISURATI (WCAG 2.1, calcolati, non stimati)
   ---------------------------------------------------------------- testo ---
   Sale     #F2EEE6  su Fondale #0E2028 ........ 14,45:1
   Sale     #F2EEE6  su Secca   #14303B ........ 11,97:1
   Sale     #F2EEE6  su Relitto #1B3E4B .........  9,88:1
   Asse     #E7E1D4  su Fondale #0E2028 ........ 12,83:1
   Asse     #E7E1D4  su Relitto #1B3E4B .........  8,77:1
   Schiuma  #93AEB7  su Fondale #0E2028 .........  7,15:1
   Schiuma  #93AEB7  su Secca   #14303B .........  5,92:1
   Schiuma  #93AEB7  su Relitto #1B3E4B .........  4,89:1  ← la più bassa
   Corda    #D9964F  su Fondale #0E2028 .........  6,71:1
   Corda    #D9964F  su Relitto #1B3E4B .........  4,59:1
   Vetro    #8ED3B4  su Fondale #0E2028 .........  9,66:1
   Vetro    #8ED3B4  sul proprio chip (10%) .....  7,79:1 su fondale
                                                   6,43:1 su secca
                                                   5,31:1 su relitto
   Fondale  #0E2028  su Corda   #D9964F .........  6,71:1  (pulsante pieno)
   Fondale  #0E2028  su Asse    #E7E1D4 ........ 12,83:1  (banda chiara)
   Guado    #3E6270  su Asse    #E7E1D4 .........  5,06:1  (secondario chiaro)
   Corda cupa #8A4A17 su Asse   #E7E1D4 .........  5,25:1  (accento chiaro)
   ------------------------------------------------- componenti e bordi ---
   Cavo     #7E9AA4  su Fondale #0E2028 .........  5,61:1
   Cavo     #7E9AA4  su Secca   #14303B .........  4,65:1
   Cavo     #7E9AA4  su Relitto #1B3E4B .........  3,83:1  ← ≥3:1, ok
   Anello di focus Sale #F2EEE6 sui tre fondi scuri: 14,45 / 11,97 / 9,88
   Anello di focus Secca #14303B dentro la banda chiara ....... 10,63:1
   Il minimo assoluto della pagina è 3,83:1 su un bordo (soglia 3:1) e
   4,59:1 su del testo (soglia 4,5:1). Nessuna coppia sotto soglia.

   ELEVAZIONE
   Nessuna ombra sparsa. Un trabocco è fatto di piani e di fili: le superfici
   si distinguono per luminosità, e l'unica separazione è un filo da 1px.
   ========================================================================== */

:root{
  /* — Acqua: tre profondità, mai una quarta — */
  --fondale: #0E2028;
  --secca:   #14303B;
  --relitto: #1B3E4B;

  /* — Legno: compare una volta sola, nella banda — */
  --asse:    #E7E1D4;

  /* — Testo sull'acqua — */
  --sale:    #F2EEE6;
  --schiuma: #93AEB7;

  /* — Testo dentro la banda chiara — */
  --guado:   #3E6270;

  /* — Struttura: il cavo d'acciaio. Bordi dei controlli, mai testo — */
  --cavo:    #7E9AA4;

  /* — Azione: la corda. Un solo posto, un solo scopo — */
  --corda:      #D9964F;
  --corda-tesa: #E7AC6B;   /* solo :hover del pulsante pieno */
  --corda-cupa: #8A4A17;   /* la stessa corda, dentro la banda chiara */
  --corda-nodo: #6F3A11;   /* :hover del pieno dentro la banda chiara */

  /* — Dato mancante: vetro di mare. Un colore, un significato — */
  --vetro:       #8ED3B4;
  --vetro-fondo: rgba(142, 211, 180, 0.10);

  /* — Fili: decorativi, non portano significato — */
  --filo:       rgba(231, 225, 212, 0.14);
  --filo-fioco: rgba(231, 225, 212, 0.07);
  --filo-scuro: rgba(14, 32, 40, 0.16);

  /* — Caratteri — */
  --titolo: Constantia, ui-serif, "Palatino Linotype", Georgia, serif;
  --corpo:  Corbel, "Segoe UI", system-ui, sans-serif;
  --misura: Consolas, ui-monospace, "Courier New", monospace;

  /* — Scala tipografica — */
  --t12:12px; --t14:14px; --t16:16px; --t18:18px; --t22:22px;
  --t30:30px; --t42:42px; --t60:60px; --t88:88px;

  /* — Ritmo, base 4 — */
  --s4:4px;   --s8:8px;   --s12:12px; --s16:16px; --s24:24px;
  --s32:32px; --s48:48px; --s64:64px; --s88:88px; --s120:120px;

  --frame:1120px;

  /* — Curve: quelle forti, non quelle di serie — */
  --esce:  cubic-bezier(0.23, 1, 0.32, 1);
  --muove: cubic-bezier(0.77, 0, 0.175, 1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  background:var(--fondale);
  color:var(--asse);
  font-family:var(--corpo);
  font-size:var(--t16);
  font-weight:400;
  line-height:1.6;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,p,ul,ol,figure{margin:0}
ul{padding:0;list-style:none}
a{color:inherit;text-decoration:none}
svg{display:block;max-width:100%}

/* Constantia solo per i titoli e i numeri grandi. Mai per l'interfaccia. */
h1,h2,.titolo{
  font-family:var(--titolo);
  font-weight:400;
  color:var(--sale);
  letter-spacing:-0.02em;
  line-height:1.1;
  text-wrap:balance;
}
h3{font-family:var(--corpo);font-weight:600;font-size:var(--t18);
   letter-spacing:-0.005em;line-height:1.25;color:var(--sale)}
p{text-wrap:pretty}

/* Anello di focus: Sale, perché è l'unico tono che regge su tutte e tre le
   profondità d'acqua (14,45 / 11,97 / 9,88). Nella banda chiara si inverte. */
:focus-visible{outline:2px solid var(--sale);outline-offset:3px;border-radius:2px}

/* ---------- Impalcatura ---------- */
.frame{width:100%;max-width:var(--frame);margin-inline:auto;padding-inline:var(--s24)}
.pagina{display:flex;flex-direction:column;gap:var(--s120);padding-block:var(--s120)}
.sezione{display:flex;flex-direction:column;gap:var(--s48)}

/* ---------- Etichetta: Consolas minuscola, spaziata. Mai dentro un chip ---------- */
.etichetta{
  font-family:var(--misura);
  font-size:var(--t12);
  font-weight:400;
  line-height:1;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:var(--schiuma);
}
.etichetta--corda{color:var(--corda)}

/* ---------- Il segnaposto: un colore, un significato ----------
   Il significato non è affidato al colore: la parola c'è scritta dentro. */
.manca{
  display:inline-block;
  font-family:var(--misura);
  font-size:var(--t12);
  letter-spacing:0.08em;
  color:var(--vetro);
  background:var(--vetro-fondo);
  border-left:2px solid var(--vetro);
  padding:2px var(--s8);
  border-radius:0 2px 2px 0;
  white-space:nowrap;
}

/* ---------- Pulsanti ----------
   Squadrati: il legno segato non ha angoli tondi.
   Un solo pieno per schermata, ed è sempre la stessa azione — chiamare. */
.bottone{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--s8);
  min-height:44px;
  padding:var(--s12) var(--s24);
  border:1px solid transparent;border-radius:2px;
  font-family:var(--corpo);font-size:var(--t16);font-weight:600;
  letter-spacing:0.01em;line-height:1.2;cursor:pointer;background:none;
  font-variant-numeric:tabular-nums;
  transition:background-color 180ms ease,border-color 180ms ease,
             color 180ms ease,transform 120ms var(--esce);
}
.bottone--corda{background:var(--corda);color:var(--fondale)}
.bottone--cavo{border-color:var(--cavo);color:var(--sale)}
.bottone:active{transform:scale(0.96)}

/* Il terziario non è un pulsante: è testo con un filo sotto. Il riquadro
   cliccabile arriva a 44px con il padding, il filo resta attaccato al testo. */
.filo-testo{
  display:inline-flex;align-items:center;gap:var(--s8);
  padding-block:var(--s12);
  font-size:var(--t16);font-weight:600;color:var(--sale);
  transition:color 180ms ease;
}
.filo-testo span{border-bottom:1px solid var(--cavo);padding-bottom:2px;
  transition:border-color 180ms ease}
.filo-testo::after{content:"→";font-family:var(--misura);
  transition:transform 200ms var(--esce)}

/* ---------- Navigazione: a filo, senza barra ---------- */
.nav{position:relative;z-index:3;padding-block:var(--s24);border-bottom:1px solid var(--filo-fioco)}
.nav__inner{display:flex;align-items:center;justify-content:space-between;gap:var(--s24);flex-wrap:wrap}
.marchio{font-family:var(--titolo);font-size:var(--t22);color:var(--sale);letter-spacing:-0.01em;line-height:1.2}
.nav__links{display:flex;align-items:center;gap:var(--s32);font-size:var(--t16);color:var(--schiuma)}
.nav__links a{padding-block:var(--s8);transition:color 180ms ease}
.nav__bottone{padding:var(--s8) var(--s16);font-size:var(--t14)}

/* ---------- Apertura ----------
   A sinistra le parole, a destra la macchina. L'orizzonte del disegno e la
   riga che chiude la sezione stanno sulla stessa idea: tutto è orizzontale. */
.apertura{position:relative;border-bottom:1px solid var(--filo)}
.apertura__griglia{
  display:grid;grid-template-columns:1fr;align-items:center;
  gap:var(--s48);padding-block:var(--s64) var(--s88);
}
@media (min-width:960px){
  .apertura__griglia{grid-template-columns:1.02fr 0.98fr;gap:var(--s64);
    padding-block:var(--s88) var(--s120)}
}
.apertura__testo{display:flex;flex-direction:column;align-items:flex-start;gap:var(--s24);min-width:0}
.apertura h1{font-size:clamp(38px,7.6vw,var(--t88));max-width:13ch}
.apertura h1 em{font-style:normal;color:var(--corda)}
.apertura__corpo{max-width:46ch;font-size:var(--t18);color:var(--schiuma)}
.apertura__azioni{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s16);padding-top:var(--s8)}

/* La riga che solo questo posto può dire. Sta sopra la piega, da sola. */
.dichiarazione{
  max-width:44ch;padding-top:var(--s24);border-top:1px solid var(--filo);
  font-family:var(--titolo);font-size:var(--t22);line-height:1.35;
  color:var(--asse);text-wrap:pretty;
}

/* ---------- Il disegno: nessuna foto, solo tratto ---------- */
.macchina{width:100%;min-width:0}
.macchina svg{width:100%;height:auto}
.macchina__legno{stroke:var(--asse);stroke-opacity:.85;fill:none;
  stroke-width:1.6;stroke-linecap:square}
.macchina__cavo{stroke:var(--cavo);stroke-opacity:.9;fill:none;stroke-width:1}
.macchina__rete{stroke:var(--corda);stroke-opacity:.8;fill:none;stroke-width:.9}
.macchina__acqua{stroke:var(--cavo);stroke-opacity:.45;fill:none;
  stroke-width:1.4;stroke-linecap:round}
.macchina__orizzonte{stroke:var(--cavo);stroke-opacity:.55;stroke-width:1}
.macchina__didascalia{font-family:var(--misura);font-size:var(--t12);
  letter-spacing:.14em;text-transform:uppercase;color:var(--schiuma);
  padding-top:var(--s12);border-top:1px solid var(--filo-fioco);margin-top:var(--s12)}

/* ---------- Nastro dei termini concreti ---------- */
.nastro{display:flex;flex-wrap:wrap;gap:var(--s12) var(--s32);
  padding-block:var(--s24);border-bottom:1px solid var(--filo-fioco);
  font-family:var(--misura);font-size:var(--t12);letter-spacing:.14em;
  text-transform:uppercase;color:var(--schiuma)}

/* ---------- Testata di sezione ---------- */
.testata{display:flex;flex-direction:column;gap:var(--s16);max-width:640px}
.testata h2{font-size:clamp(28px,5vw,var(--t60))}
.testata p{color:var(--schiuma);max-width:62ch}

/* ---------- Blocco a due colonne ---------- */
.blocco{display:grid;grid-template-columns:1fr;gap:var(--s32);align-items:start}
@media (min-width:940px){.blocco{grid-template-columns:0.9fr 1.1fr;gap:var(--s64)}}
.blocco > *{min-width:0}
.blocco p{color:var(--schiuma);max-width:60ch}
.blocco p + p{margin-top:var(--s16)}
.blocco strong{color:var(--asse);font-weight:600}

/* ---------- Avviso: il perché dei buchi ---------- */
.avviso{
  border-left:2px solid var(--vetro);background:var(--vetro-fondo);
  padding:var(--s16) var(--s24);max-width:72ch;border-radius:0 2px 2px 0;
  color:var(--asse);font-size:var(--t16);
}
.avviso b{color:var(--vetro);font-weight:600}

/* ---------- Il tabellone del pescato ----------
   È una lavagna vuota apposta: quello che si mangia lo decide il mare la
   mattina, non un sito. Le righe ci sono, il contenuto lo scrive il titolare. */
.tabellone{
  background:var(--relitto);border:1px solid var(--filo);border-radius:2px;
  padding:var(--s24);display:flex;flex-direction:column;gap:var(--s16);
}
@media (min-width:640px){.tabellone{padding:var(--s32)}}
.tabellone__cima{display:flex;flex-wrap:wrap;align-items:baseline;
  justify-content:space-between;gap:var(--s12);
  padding-bottom:var(--s16);border-bottom:1px solid var(--filo)}
.tabellone__titolo{font-family:var(--titolo);font-size:var(--t22);color:var(--sale)}
.tabellone ul{display:flex;flex-direction:column}
.tabellone li{display:flex;align-items:baseline;flex-wrap:wrap;gap:var(--s8) var(--s12);
  padding-block:var(--s16);border-bottom:1px solid var(--filo-fioco)}
.tabellone li:last-child{border-bottom:0}
.tabellone__n{font-family:var(--misura);font-size:var(--t12);color:var(--schiuma);
  font-variant-numeric:tabular-nums;flex:none;min-width:2.2em}
.tabellone__punti{flex:1 1 40px;min-width:40px;
  border-bottom:1px dotted rgba(147,174,183,.45);transform:translateY(-.3rem)}
.tabellone__prezzo{font-family:var(--misura);font-size:var(--t14);color:var(--schiuma);
  font-variant-numeric:tabular-nums;flex:none}
.tabellone__piede{font-size:var(--t14);color:var(--schiuma);max-width:56ch}

/* ---------- Passi: la cifra è la grafica, nessuna scheda ---------- */
.passi{display:grid;grid-template-columns:1fr;gap:var(--s48)}
@media (min-width:820px){.passi{grid-template-columns:repeat(3,1fr);gap:var(--s32)}}
.passo{display:flex;flex-direction:column;gap:var(--s12);min-width:0;
  padding-top:var(--s16);border-top:1px solid var(--filo)}
.passo__cifra{font-family:var(--titolo);font-size:var(--t42);line-height:.9;
  letter-spacing:-0.04em;color:var(--corda);font-variant-numeric:tabular-nums}
.passo p{font-size:var(--t16);color:var(--schiuma);max-width:38ch}
.passo a{border-bottom:1px solid var(--cavo);
  font-variant-numeric:tabular-nums;transition:border-color 180ms ease}

/* ---------- Domande ---------- */
.domande{max-width:74ch;display:flex;flex-direction:column}
details{border-bottom:1px solid var(--filo-fioco)}
summary{
  font-size:var(--t18);font-weight:600;color:var(--sale);cursor:pointer;
  list-style:none;display:flex;justify-content:space-between;gap:var(--s16);
  align-items:baseline;padding-block:var(--s16);min-height:44px;
}
summary::-webkit-details-marker{display:none}
/* Il segno statico: “+” chiuso, “−” aperto. Il colore non è l'unico canale. */
summary::after{content:"+";font-family:var(--misura);font-size:var(--t22);
  color:var(--corda);flex:none;line-height:1}
details[open] summary::after{content:"−"}
details p{color:var(--schiuma);padding-bottom:var(--s16);max-width:64ch}

/* ---------- Dove siamo ---------- */
.visita{display:grid;grid-template-columns:1fr;gap:var(--s48)}
@media (min-width:820px){.visita{grid-template-columns:1fr 1fr;gap:var(--s64)}}
.visita > *{min-width:0}
.orari{display:flex;flex-direction:column}
.orari li{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;
  gap:var(--s8) var(--s16);padding-block:var(--s12);
  border-bottom:1px solid var(--filo-fioco);color:var(--schiuma);font-size:var(--t16)}
.recapiti{display:flex;flex-direction:column;gap:var(--s24)}
.recapito{display:flex;flex-direction:column;gap:var(--s4)}
.recapito__v{font-size:var(--t16);line-height:1.5;color:var(--asse);
  font-variant-numeric:tabular-nums}
.recapito__v a{border-bottom:1px solid var(--cavo);
  transition:border-color 180ms ease,color 180ms ease}

/* ---------- La banda chiara ----------
   L'unico momento di legno di tutta la pagina: si esce dall'acqua e si sale
   sul tavolato. Compare una volta sola, e regge la frase più importante. */
.banda{
  background:var(--asse);color:var(--fondale);
  padding-block:var(--s88);
  background-image:repeating-linear-gradient(
    180deg, rgba(14,32,40,.05) 0 1px, rgba(14,32,40,0) 1px 34px);
}
.banda h2{color:var(--fondale)}
.banda h2 em{font-style:normal;color:var(--corda-cupa)}
.banda p{color:var(--guado);max-width:56ch;margin-top:var(--s16)}
.banda .etichetta{color:var(--guado)}
.banda .bottone--corda{background:var(--corda-cupa);color:var(--asse)}
.banda .bottone--cavo{border-color:var(--guado);color:var(--fondale)}
.banda__azioni{display:flex;flex-wrap:wrap;gap:var(--s16);margin-top:var(--s32)}
/* Nella banda l'anello si inverte: Secca su Asse = 10,63:1 */
.banda :focus-visible{outline-color:var(--secca)}

/* ---------- Chiusura ---------- */
.chiusura{display:flex;flex-direction:column;align-items:flex-start;gap:var(--s24);
  padding-block:var(--s88) var(--s32);border-top:1px solid var(--filo)}
.chiusura h2{font-size:clamp(32px,6.4vw,var(--t60));max-width:14ch}
.chiusura h2 em{font-style:normal;color:var(--corda)}
.piede{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:var(--s12) var(--s24);padding-block:var(--s24) var(--s48);
  border-top:1px solid var(--filo-fioco);
  font-family:var(--misura);font-size:var(--t12);letter-spacing:.1em;color:var(--schiuma)}

/* ==========================================================================
   MOVIMENTO
   Regola: si muovono solo transform e opacity. Mai width, height, margin,
   top o left. Mai ease-in. Ogni cosa che si muove ha anche un segnale fermo.
   ========================================================================== */

/* Le comparse: 560ms — durata dichiarata: sopra i 300ms perché
   non è un feedback a un gesto ma una salita ambientale, e a 200ms sembra
   uno scatto. Lo stato nascosto lo mette solo html.anima: senza JS, o a
   movimento ridotto, la pagina nasce già intera. */
.sale{
  transition:opacity 560ms var(--esce), transform 560ms var(--esce);
  transition-delay:var(--rit,0ms);
}
html.anima .sale{opacity:0;transform:translateY(20px)}
html.anima .sale.dentro{opacity:1;transform:none}

/* La risacca: l'unica animazione perpetua. Il trabocco sta fermo, si muove
   il mare — 7/9/11 secondi, lenti apposta, perché è ambiente e non
   interfaccia. Solo translateX, ampiezza sotto i 14px. */
@keyframes risacca{from{transform:translateX(-7px)}to{transform:translateX(7px)}}
html.anima .onda{animation:risacca var(--dur,9s) var(--muove) infinite alternate}

/* Il movimento su :hover esiste solo dove c'è davvero un puntatore. */
@media (hover:hover) and (pointer:fine){
  .bottone--corda:hover{background:var(--corda-tesa)}
  .banda .bottone--corda:hover{background:var(--corda-nodo)}
  .bottone--cavo:hover{border-color:var(--sale)}
  .banda .bottone--cavo:hover{border-color:var(--fondale)}
  .filo-testo:hover span{border-color:var(--corda)}
  .filo-testo:hover::after{transform:translateX(5px)}
  .nav__links a:hover{color:var(--sale)}
  .passo a:hover,.recapito__v a:hover{border-color:var(--corda)}
  summary:hover{color:var(--corda)}
}

/* A movimento ridotto non si muove niente: nessuna transizione, nessuna
   animazione, e la pagina è intera dal primo disegno (la classe `anima` non
   viene nemmeno aggiunta). Questo blocco è la seconda rete di sicurezza. */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;scroll-behavior:auto !important;
  }
  html.anima .sale{opacity:1;transform:none}
}

/* ---------- Telefono ---------- */
.chiama-fisso{display:none}
@media (max-width:760px){
  .nav__links{display:none}
  body{padding-bottom:64px}
  .pagina{gap:var(--s88);padding-block:var(--s88)}
  .apertura h1{max-width:none}
  .chiama-fisso{
    display:flex;align-items:center;justify-content:center;
    position:fixed;left:0;right:0;bottom:0;z-index:50;min-height:56px;
    background:var(--corda);color:var(--fondale);
    font-family:var(--corpo);font-size:var(--t16);font-weight:600;
    font-variant-numeric:tabular-nums;
    padding:var(--s16);border-top:1px solid var(--fondale);
  }
  .chiama-fisso:focus-visible{outline-offset:-5px}
}