/* =========================================================================
   Dimora Vado — foglio di stile unico
   Palette e tipografia nascono dalle foto della casa: l'intonaco albicocca
   della facciata, il turchese del mare di Torre Vado, il bianco di calce.
   ========================================================================= */

/* --- Font ospitati sul nostro server (nessuna chiamata a Google) --------- */
@font-face {
  font-family: 'Fraunces';
  src: url('../fonts/fraunces-latin.woff2') format('woff2');
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Fraunces';
  src: url('../fonts/fraunces-latin-ext.woff2') format('woff2');
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0,
    U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Work Sans';
  src: url('../fonts/work-sans-latin.woff2') format('woff2');
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Work Sans';
  src: url('../fonts/work-sans-latin-ext.woff2') format('woff2');
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0,
    U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* --- Variabili ----------------------------------------------------------- */
:root {
  --notte: #10343f;      /* petrolio scuro: testo e fasce profonde */
  --notte-2: #1c4a57;
  --mare: #0b7a92;       /* turchese profondo: azioni e collegamenti */
  --mare-cupo: #065c70;
  --acqua: #8ed8e4;      /* acqua bassa sulla sabbia */
  --acqua-velo: #dcf0f3;
  --intonaco: #e1935f;   /* l'intonaco della facciata */
  --intonaco-velo: #faebe0;
  --calce: #f2f6f7;      /* foschia marina: fondo pagina */
  --bianco: #fff;
  --grigio: #55696f;
  --bordo: #d7e2e4;

  --prosa: 62ch;
  --contenitore: 1180px;
  --margine: clamp(1.25rem, 5vw, 3rem);
  --ritmo: clamp(3.5rem, 8vw, 7rem);
  --raggio: 2px;
  /* Rotondita' dei soli pulsanti, separata da --raggio perche' schede e foto
     restano squadrate di proposito: il contrasto fa risaltare le azioni.
     999px = pillola. Per angoli solo smussati metti 0.7rem, per tornare
     squadrato come prima metti 2px. */
  --raggio-btn: 999px;
  --ombra: 0 1px 2px rgb(16 52 63 / 0.05), 0 12px 32px -12px rgb(16 52 63 / 0.18);
  --transizione: 260ms cubic-bezier(0.22, 0.61, 0.36, 1);
  --barra: 0px; /* altezza della barra fissa su telefono */
  --testata: 69px; /* 68px di min-height + 1px di bordo inferiore */
}

/* --- Azzeramenti --------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--calce);
  color: var(--notte);
  font-family: 'Work Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 1.0625rem;
  line-height: 1.7;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  padding-bottom: var(--barra);
}
img, svg, picture { display: block; max-width: 100%; }
img { height: auto; }
button { font: inherit; color: inherit; }

/* --- Tipografia ---------------------------------------------------------- */
h1, h2, h3, h4 {
  font-family: 'Fraunces', Georgia, 'Times New Roman', serif;
  font-weight: 500;
  margin: 0;
  text-wrap: balance;
}
h1 {
  font-size: clamp(2.5rem, 1.3rem + 5.1vw, 5rem);
  line-height: 0.98;
  letter-spacing: -0.022em;
  font-variation-settings: 'opsz' 144, 'SOFT' 60, 'WONK' 1;
}
h2 {
  font-size: clamp(1.85rem, 1.15rem + 2.6vw, 3rem);
  line-height: 1.08;
  letter-spacing: -0.016em;
  font-variation-settings: 'opsz' 72, 'SOFT' 50, 'WONK' 1;
}
h3 {
  font-size: clamp(1.15rem, 1rem + 0.5vw, 1.4rem);
  line-height: 1.25;
  font-weight: 600;
  font-variation-settings: 'opsz' 24, 'SOFT' 30, 'WONK' 0;
}
p { margin: 0 0 1.1em; max-width: var(--prosa); }
p:last-child { margin-bottom: 0; }

/* I titoli hanno margin 0, quindi lo stacco dal testo che segue lo mette il
   paragrafo. Deve stare dopo la regola di p, che ha la stessa specificita'.
   Blocchi come .griglia, .dati o .galleria hanno gia' un margine proprio, piu'
   specifico, e restano come sono.
   I titoli grandi hanno line-height sotto 1.1, quindi le lettere sporgono
   dal loro riquadro: serve piu' margine di quanto sembri. */
h1 + p { margin-top: clamp(1.5rem, 3vw, 2.4rem); }
h2 + p { margin-top: clamp(1.1rem, 2.2vw, 1.75rem); }
h3 + p { margin-top: 0.55rem; }
/* Le schede spaziano gia' con il gap del flex: qui il margine raddoppierebbe. */
.scheda h3 + p { margin-top: 0; }
a { color: var(--mare-cupo); text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:hover { color: var(--notte); }

.occhiello {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--mare);
  margin: 0 0 1rem;
  display: flex;
  align-items: center;
  gap: 0.7rem;
  max-width: none;
}
.occhiello::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--bordo);
  max-width: 5rem;
}
.guida {
  font-size: clamp(1.08rem, 1rem + 0.45vw, 1.3rem);
  line-height: 1.58;
  color: var(--notte-2);
}
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* --- Impianto ------------------------------------------------------------ */
.contenitore { width: min(100% - var(--margine) * 2, var(--contenitore)); margin-inline: auto; }
.sez { padding-block: var(--ritmo); }
.sez--stretta { padding-block: calc(var(--ritmo) * 0.62); }
.sez--bianca { background: var(--bianco); }
.sez--notte { background: var(--notte); color: var(--calce); }
.sez--notte h2, .sez--notte h3 { color: var(--bianco); }
.sez--notte .occhiello { color: var(--acqua); }
.sez--notte .occhiello::after { background: rgb(255 255 255 / 0.2); }
.sez--notte .guida { color: rgb(255 255 255 / 0.82); }
.sez--intonaco { background: var(--intonaco-velo); }
.sez--acqua { background: var(--acqua-velo); }

.duetti {
  display: grid;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
  grid-template-columns: 1fr;
}
@media (min-width: 62rem) {
  .duetti { grid-template-columns: 1fr 1fr; }
  .duetti--testo-dx > :first-child { order: 2; }
}
.duetti figure { margin: 0; }
.duetti img { border-radius: var(--raggio); width: 100%; }

/* --- Pulsanti ------------------------------------------------------------ */
.gruppo-azioni { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 2rem; }
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.85rem 1.6rem;
  border: 1px solid transparent;
  border-radius: var(--raggio-btn);
  font-size: 0.94rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--transizione), color var(--transizione),
              border-color var(--transizione), transform var(--transizione),
              box-shadow var(--transizione);
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn--primario {
  background: var(--mare);
  color: var(--bianco);
  /* Ombra nel colore del pulsante, non grigia: sembra che la luce passi
     attraverso invece di posarsi sopra. */
  box-shadow: 0 2px 6px -2px rgb(11 122 146 / 0.5);
}
.btn--primario:hover {
  background: var(--mare-cupo);
  color: var(--bianco);
  box-shadow: 0 10px 20px -8px rgb(11 122 146 / 0.65);
}
.btn--primario:active { box-shadow: 0 1px 3px -1px rgb(11 122 146 / 0.5); }

.btn--fantasma { border-color: var(--bordo); color: var(--notte); background: transparent; }
.btn--fantasma:hover {
  border-color: var(--notte);
  color: var(--notte);
  background: var(--bianco);
  box-shadow: 0 8px 16px -10px rgb(16 52 63 / 0.55);
}
.btn--fantasma:active { box-shadow: none; }

/* Chi ha chiesto meno animazioni non deve vedere i pulsanti saltellare. */
@media (prefers-reduced-motion: reduce) {
  .btn:hover { transform: none; }
}
.sez--notte .btn--fantasma { border-color: rgb(255 255 255 / 0.32); color: var(--bianco); }
.sez--notte .btn--fantasma:hover { background: rgb(255 255 255 / 0.1); border-color: var(--bianco); color: var(--bianco); }
.btn--piattaforma { background: var(--bianco); color: var(--notte); border-color: var(--bordo); }
.btn--piattaforma:hover { border-color: var(--mare); color: var(--mare-cupo); }
.btn svg { flex: none; }

:where(a, button, summary, input, textarea, select):focus-visible {
  outline: 2px solid var(--mare);
  outline-offset: 3px;
  border-radius: var(--raggio);
}
.sez--notte :where(a, button, summary):focus-visible,
.pie :where(a, button):focus-visible { outline-color: var(--acqua); }

.salta {
  position: absolute;
  left: 0.5rem;
  top: -4rem;
  z-index: 70;
  background: var(--notte);
  color: var(--bianco);
  padding: 0.7rem 1.2rem;
  border-radius: var(--raggio);
  text-decoration: none;
  transition: top var(--transizione);
}
.salta:focus { top: 0.5rem; color: var(--bianco); }

/* --- Testata ------------------------------------------------------------- */
.testata {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgb(242 246 247 / 0.86);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--bordo);
}
.testata__interno {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  min-height: 68px;
}
.marchio {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
  color: var(--notte);
  margin-right: auto;
}
.marchio__logo {
  width: 56px;
  height: 56px;
  flex: 0 0 auto;
  border-radius: 50%;
}
@media (max-width: 26rem) {
  /* Su schermi stretti il logo cede spazio al nome e al pulsante "Chiama". */
  .marchio__logo { width: 44px; height: 44px; }
}
.marchio__nome {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 1.16rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1;
  font-variation-settings: 'opsz' 28, 'SOFT' 40, 'WONK' 1;
}
.marchio__luogo {
  display: block;
  font-family: 'Work Sans', sans-serif;
  /* Era 0.62rem, cioe' 9,9 px: sotto la soglia di leggibilita' su telefono.
     Compenso la crescita stringendo un po' la spaziatura fra le lettere. */
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--mare);
  margin-top: 0.22rem;
}
.navigazione { display: none; }
@media (min-width: 64rem) {
  .navigazione { display: flex; align-items: center; gap: clamp(1rem, 1.9vw, 1.8rem); }
}
.navigazione a {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  /* Senza questo "Scopri il Salento" e "Info & Prenotazioni" vanno a capo
     dentro la testata, che diventa illeggibile. */
  white-space: nowrap;
  text-decoration: none;
  color: var(--notte);
  padding-block: 0.4rem;
  border-bottom: 2px solid transparent;
  transition: border-color var(--transizione), color var(--transizione);
}
.navigazione a:hover { border-bottom-color: var(--acqua); }
.navigazione a[aria-current='page'] { border-bottom-color: var(--intonaco); }
.testata .btn { padding: 0.6rem 1.1rem; font-size: 0.85rem; }
.testata__azione { display: none; }
@media (min-width: 64rem) { .testata__azione { display: inline-flex; } }

/* Tablet in orizzontale e portatili stretti (1024–1232 px): la navigazione
   estesa da sola chiede 1026 px, ma a 1024 il contenitore ne offre 928.
   Qui stringo il passo e tolgo la riga del luogo, che il logo accanto ripete
   comunque. Sopra i 1232 px torna tutto alla spaziatura piena. */
@media (min-width: 64rem) and (max-width: 77rem) {
  .navigazione { gap: 0.95rem; }
  .navigazione a { font-size: 0.72rem; letter-spacing: 0.055em; }
  .marchio__luogo { display: none; }
  .testata .btn { padding: 0.55rem 0.9rem; font-size: 0.8rem; }
}

.interruttore {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 0 10px;
  background: none;
  border: 1px solid var(--bordo);
  border-radius: var(--raggio-btn);
  cursor: pointer;
  transition: border-color var(--transizione), background var(--transizione);
}
.interruttore:hover { border-color: var(--notte); background: var(--bianco); }
.interruttore span {
  height: 1.5px;
  background: var(--notte);
  transition: transform var(--transizione), opacity var(--transizione);
}
.interruttore[aria-expanded='true'] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.interruttore[aria-expanded='true'] span:nth-child(2) { opacity: 0; }
.interruttore[aria-expanded='true'] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }
@media (min-width: 64rem) { .interruttore { display: none; } }

.pannello {
  position: fixed;
  inset: var(--testata) 0 0;
  z-index: 39;
  background: var(--calce);
  /* Sotto c'e' la barra fissa (z-index 45): senza questo margine l'ultimo
     pulsante del menu ci finisce sotto. */
  padding: 2rem var(--margine) calc(3rem + var(--barra));
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.pannello[hidden] { display: none; }
/* Solo i figli diretti: i pulsanti stanno dentro .gruppo-azioni e devono
   restare pulsanti. Con `.pannello a` prendevano il serif del menu, perche'
   quel selettore batte .btn per specificita'. */
.pannello > a {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 1.6rem;
  font-weight: 500;
  font-variation-settings: 'opsz' 40, 'SOFT' 50, 'WONK' 1;
  text-decoration: none;
  color: var(--notte);
  padding-block: 0.7rem;
  border-bottom: 1px solid var(--bordo);
}
.pannello > a[aria-current='page'] { color: var(--mare); }
.pannello .gruppo-azioni { margin-top: 2rem; }
.pannello .btn { flex: 1 1 12rem; justify-content: center; }

/* --- Apertura: la finestra sul mare -------------------------------------- */
.apertura { padding-top: clamp(1.5rem, 3vw, 2.5rem); padding-bottom: var(--ritmo); }
.finestra {
  position: relative;
  overflow: hidden;
  border-radius: var(--raggio);
  background: var(--acqua-velo);
  aspect-ratio: 21 / 9;
}
@media (max-width: 47.99rem) { .finestra { aspect-ratio: 4 / 3; } }
.finestra img { width: 100%; height: 100%; object-fit: cover; }
.finestra__nota {
  position: absolute;
  left: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0;
  max-width: none;
  padding: 0.55rem 1.1rem;
  background: rgb(16 52 63 / 0.78);
  backdrop-filter: blur(6px);
  color: var(--bianco);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}
.finestra__nota::before {
  content: '';
  width: 22px;
  height: 1px;
  background: var(--acqua);
  flex: none;
}
.apertura__titolo { margin-top: clamp(2rem, 4vw, 3.2rem); }
.apertura__titolo em { font-style: normal; display: block; color: var(--mare); }
.apertura__corpo {
  display: grid;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  margin-top: clamp(1.6rem, 3vw, 2.4rem);
  grid-template-columns: 1fr;
  align-items: end;
}
@media (min-width: 62rem) { .apertura__corpo { grid-template-columns: 1.05fr 1fr; } }
.apertura__corpo .gruppo-azioni { margin-top: 0; }

/* Riepilogo essenziale della casa */
.sintesi {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.6rem;
  font-size: 0.87rem;
  font-weight: 500;
  color: var(--notte-2);
}
.sintesi li { display: flex; align-items: center; gap: 0.5rem; }
.sintesi li::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--intonaco);
  flex: none;
}

/* --- Firma: i righelli delle distanze ------------------------------------ */
.righelli { display: grid; gap: clamp(3rem, 6vw, 4.5rem); margin-top: clamp(2.5rem, 5vw, 3.5rem); }
.righello__intestazione {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.4rem 0.8rem;
  margin-bottom: 2.6rem;
  padding-bottom: 0.7rem;
  border-bottom: 1px solid var(--bordo);
}
.righello__titolo {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 1.32rem;
  font-weight: 600;
  font-variation-settings: 'opsz' 28, 'SOFT' 40, 'WONK' 0;
}
.righello__scala {
  margin-left: auto;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--grigio);
}
.righello__asse { position: relative; list-style: none; margin: 0; padding: 0; }
.tappa__punto {
  position: absolute;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--mare);
  border: 2px solid var(--calce);
  transform: translate(-50%, -50%);
}
.sez--bianca .tappa__punto { border-color: var(--bianco); }
.sez--acqua .tappa__punto { border-color: var(--acqua-velo); }
.tappa--casa .tappa__punto { background: var(--intonaco); width: 15px; height: 15px; }
.tappa__valore {
  display: block;
  font-family: 'Fraunces', Georgia, serif;
  font-size: 1.26rem;
  font-weight: 600;
  line-height: 1;
  font-variation-settings: 'opsz' 30, 'SOFT' 20, 'WONK' 0;
  color: var(--notte);
}
.tappa__nome { display: block; font-size: 0.83rem; line-height: 1.35; color: var(--grigio); margin-top: 0.3rem; }

/* Asse orizzontale da tablet in su */
@media (min-width: 48rem) {
  .righello__asse { height: 196px; margin-inline: 0.5rem; }
  .righello__asse::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 1px;
    background: linear-gradient(to right, var(--notte) 0%, var(--bordo) 100%);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 1100ms cubic-bezier(0.22, 0.61, 0.36, 1);
  }
  .visibile .righello__asse::before, .righello--fermo .righello__asse::before { transform: scaleX(1); }
  .tappa {
    position: absolute;
    top: 50%;
    left: calc(var(--d) / var(--max) * 100%);
    width: 11rem;
    margin-left: -0.5rem;
    opacity: 0;
    transition: opacity 480ms ease calc(var(--d) / var(--max) * 800ms + 180ms);
  }
  .visibile .tappa, .righello--fermo .tappa { opacity: 1; }
  .tappa__punto { top: 0; left: 0; }
  .tappa__testo { position: absolute; left: 0; bottom: 1.5rem; }
  .tappa:nth-child(even) .tappa__testo { bottom: auto; top: 1.5rem; }
  .tappa::before {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0.45rem;
    width: 1px;
    height: 0.85rem;
    background: var(--bordo);
  }
  .tappa:nth-child(even)::before { bottom: auto; top: 0.45rem; }
  .righello__asse .tappa:last-child { width: 9.5rem; }
}

/* Asse verticale su telefono: diventa un elenco, quindi le tacche non sono piu'
   in proporzione e l'indicazione della scala verrebbe smentita dal disegno. */
@media (max-width: 47.99rem) {
  .righello__scala { display: none; }
  .righello__asse { padding-left: 1.6rem; display: grid; gap: 1.5rem; }
  .righello__asse::before {
    content: '';
    position: absolute;
    left: 5px;
    top: 8px;
    bottom: 8px;
    width: 1px;
    background: linear-gradient(to bottom, var(--notte), var(--bordo));
  }
  .tappa { position: relative; }
  .tappa__punto { top: 0.6rem; left: -1.6rem; margin-left: 5px; }
  .tappa__testo { display: flex; align-items: baseline; gap: 0.9rem; }
  .tappa__valore { font-size: 1.05rem; min-width: 4.4rem; flex: none; }
  .tappa__nome { margin-top: 0; }
}

.righello__nota { margin-top: 1.7rem; font-size: 0.8rem; color: var(--grigio); max-width: none; }

/* --- Galleria ------------------------------------------------------------ */
.galleria {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: repeat(2, 1fr);
  margin-top: clamp(2rem, 4vw, 3rem);
}
@media (min-width: 48rem) { .galleria { grid-template-columns: repeat(4, 1fr); gap: 1rem; } }
.scatto {
  position: relative;
  display: block;
  margin: 0;
  padding: 0;
  border: 0;
  background: var(--acqua-velo);
  overflow: hidden;
  border-radius: var(--raggio);
  cursor: zoom-in;
  aspect-ratio: 4 / 3;
  width: 100%;
}
.scatto img { width: 100%; height: 100%; object-fit: cover; transition: transform 600ms cubic-bezier(0.22, 0.61, 0.36, 1); }
.scatto:hover img { transform: scale(1.045); }
.scatto__etichetta {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 1.8rem 0.8rem 0.6rem;
  background: linear-gradient(to top, rgb(16 52 63 / 0.75), transparent);
  color: var(--bianco);
  font-size: 0.74rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-align: left;
}
@media (min-width: 48rem) {
  /* La cella grande occupa due righe e due colonne: l'altezza gliela danno le
     righe, quindi non deve imporre un proprio rapporto o lascia buchi. */
  .scatto--largo { grid-column: span 2; grid-row: span 2; aspect-ratio: auto; }
}

/* Visore a schermo intero */
.visore {
  position: fixed;
  inset: 0;
  z-index: 60;
  padding: clamp(0.75rem, 3vw, 2.5rem);
  background: rgb(9 28 34 / 0.95);
  border: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  overflow: hidden;
}
.visore[open] { display: flex; align-items: center; justify-content: center; }
.visore::backdrop { background: rgb(9 28 34 / 0.9); }
.visore img { max-width: 100%; max-height: 80vh; object-fit: contain; border-radius: var(--raggio); }
.visore__didascalia {
  position: absolute;
  bottom: clamp(0.9rem, 3vw, 2.5rem);
  left: 0;
  right: 0;
  text-align: center;
  color: rgb(255 255 255 / 0.85);
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  margin: 0;
  max-width: none;
}
.visore__comando, .visore__passo {
  position: absolute;
  display: grid;
  place-items: center;
  background: rgb(255 255 255 / 0.12);
  border: 1px solid rgb(255 255 255 / 0.25);
  border-radius: 50%;
  color: var(--bianco);
  cursor: pointer;
}
.visore__comando:hover, .visore__passo:hover { background: rgb(255 255 255 / 0.22); }
.visore__comando { top: clamp(0.75rem, 3vw, 2rem); right: clamp(0.75rem, 3vw, 2rem); width: 44px; height: 44px; }
.visore__passo { top: 50%; transform: translateY(-50%); width: 48px; height: 48px; }
.visore__passo--prima { left: clamp(0.5rem, 2vw, 1.5rem); }
.visore__passo--dopo { right: clamp(0.5rem, 2vw, 1.5rem); }

/* --- Schede, elenchi, tabelle -------------------------------------------- */
.griglia { display: grid; gap: 1rem; grid-template-columns: 1fr; margin-top: clamp(2rem, 4vw, 3rem); }
@media (min-width: 40rem) { .griglia--2, .griglia--4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 52rem) { .griglia--3 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 64rem) { .griglia--4 { grid-template-columns: repeat(4, 1fr); } }

.scheda {
  background: var(--bianco);
  border: 1px solid var(--bordo);
  border-radius: var(--raggio);
  padding: clamp(1.4rem, 3vw, 2rem);
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  transition: border-color var(--transizione), transform var(--transizione), box-shadow var(--transizione);
}
.scheda p { font-size: 0.95rem; color: var(--grigio); max-width: none; }
.scheda--legame { text-decoration: none; color: inherit; }
.scheda--legame:hover { border-color: var(--mare); transform: translateY(-3px); box-shadow: var(--ombra); color: inherit; }
.scheda__distanza { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--mare); }
.sez--notte .scheda { background: rgb(255 255 255 / 0.05); border-color: rgb(255 255 255 / 0.14); }
.sez--notte .scheda p { color: rgb(255 255 255 / 0.76); }
.sez--notte .scheda__distanza { color: var(--acqua); }

.dotazioni {
  list-style: none;
  margin: clamp(2rem, 4vw, 3rem) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  border-top: 1px solid var(--bordo);
}
@media (min-width: 40rem) { .dotazioni { grid-template-columns: repeat(2, 1fr); column-gap: clamp(1.5rem, 4vw, 3.5rem); } }
@media (min-width: 64rem) { .dotazioni { grid-template-columns: repeat(3, 1fr); } }
.dotazioni li {
  display: flex;
  align-items: baseline;
  gap: 0.85rem;
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--bordo);
  font-size: 0.97rem;
}
.dotazioni li::before {
  content: '';
  flex: none;
  width: 7px;
  height: 7px;
  background: var(--acqua);
  transform: translateY(-2px);
}
.dotazioni b { font-weight: 600; }
.dotazioni span { color: var(--grigio); font-size: 0.87rem; }

.dati { width: 100%; border-collapse: collapse; margin-top: clamp(1.5rem, 3vw, 2.5rem); font-size: 0.97rem; }
.dati th, .dati td { text-align: left; padding: 0.8rem 0.5rem 0.8rem 0; border-bottom: 1px solid var(--bordo); vertical-align: top; }
.dati th { font-weight: 600; width: 45%; }
.dati td { color: var(--grigio); }
@media (min-width: 40rem) { .dati th { width: 34%; } }

.domande { margin-top: clamp(2rem, 4vw, 3rem); border-top: 1px solid var(--bordo); }
.domanda { border-bottom: 1px solid var(--bordo); }
.domanda summary {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.15rem 0;
  cursor: pointer;
  font-weight: 600;
  font-size: 1.02rem;
  list-style: none;
}
.domanda summary::-webkit-details-marker { display: none; }
.domanda summary::after {
  content: '';
  flex: none;
  margin-left: auto;
  width: 11px;
  height: 11px;
  border-right: 1.5px solid var(--mare);
  border-bottom: 1.5px solid var(--mare);
  transform: rotate(45deg) translateY(-25%);
  transition: transform var(--transizione);
}
.domanda[open] summary::after { transform: rotate(-135deg) translateY(-25%); }
.domanda__risposta { padding: 0 0 1.4rem; }
.domanda__risposta p { color: var(--grigio); }

.rilievo { border-left: 3px solid var(--intonaco); padding: 0.3rem 0 0.3rem 1.5rem; margin: clamp(2rem, 4vw, 3rem) 0 0; }
.rilievo p {
  font-family: 'Fraunces', Georgia, serif;
  font-size: clamp(1.25rem, 1rem + 1.1vw, 1.75rem);
  line-height: 1.32;
  font-weight: 500;
  font-variation-settings: 'opsz' 48, 'SOFT' 50, 'WONK' 1;
  color: var(--notte);
}
.sez--notte .rilievo p { color: var(--bianco); }

/* La riga verso il regolamento, in fondo al blocco Prenota.
   Sul fondo scuro il colore normale dei collegamenti scende a 1,75 di
   contrasto: qui il link prende il bianco del testo e resta riconoscibile
   dalla sottolineatura. Misurato: 13,25, ben sopra il 4,5 di WCAG AA. */
.prenota__regola { margin-top: 1.6rem; font-size: 0.95rem; }
.sez--notte .prenota__regola { color: rgb(255 255 255 / 0.82); }
.sez--notte .prenota__regola a { color: var(--bianco); text-underline-offset: 3px; }

/* Informazioni ancora da confermare dal proprietario */
.daverificare {
  background: repeating-linear-gradient(-45deg, #fff6d6, #fff6d6 9px, #ffefba 9px, #ffefba 18px);
  color: #6b4d00;
  padding: 0.05em 0.4em;
  border-radius: 2px;
  font-weight: 600;
  /* Niente nowrap: alcune note sono lunghe una frase e su telefono facevano
     scorrere la pagina in orizzontale. box-decoration-break ricostruisce lo
     sfondo a righe e il padding su ogni riga, cosi' l'etichetta resta intera. */
  overflow-wrap: break-word;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* --- Piede --------------------------------------------------------------- */
.pie { background: var(--notte); color: rgb(255 255 255 / 0.74); padding-block: clamp(3rem, 6vw, 4.5rem) 2rem; font-size: 0.92rem; }
.pie a { color: var(--bianco); text-decoration-color: rgb(255 255 255 / 0.35); }
.pie a:hover { color: var(--acqua); }
.pie__griglia { display: grid; gap: 2.5rem; grid-template-columns: 1fr; }
@media (min-width: 48rem) { .pie__griglia { grid-template-columns: 1.4fr 1fr 1fr; gap: clamp(2rem, 5vw, 4rem); } }
.pie__logo {
  display: block;
  width: 104px;
  height: 104px;
  border-radius: 50%;
  margin: 0 0 1.1rem;
}
.pie__marchio {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--bianco);
  font-variation-settings: 'opsz' 36, 'SOFT' 50, 'WONK' 1;
  margin: 0 0 0.8rem;
  max-width: none;
}
.pie__titolo { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase; color: var(--acqua); margin: 0 0 1rem; max-width: none; }
.pie ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; }

/* Su schermi tattili i collegamenti del piede erano alti 18 px (il numero di
   telefono) e 22 px (Privacy e Cookie): impossibili da centrare col dito.
   Su mouse restano come sono, non serve allargarli. */
@media (pointer: coarse) {
  .pie ul { gap: 0.1rem; }
  .pie ul a,
  .pie__coda nav a { display: inline-flex; align-items: center; min-height: 44px; }
}
.pie p { max-width: 38ch; color: rgb(255 255 255 / 0.74); }
.pie__coda {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  padding-top: 1.5rem;
  border-top: 1px solid rgb(255 255 255 / 0.14);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem 1.6rem;
  font-size: 0.8rem;
  color: rgb(255 255 255 / 0.55);
}
.pie__coda p { margin: 0; max-width: none; color: inherit; }
.pie__coda nav { display: flex; flex-wrap: wrap; gap: 0.6rem 1.4rem; margin-left: auto; }

/* --- Richiesta rapida ----------------------------------------------------- */
.richiesta {
  width: min(34rem, calc(100vw - 2rem));
  max-height: min(90dvh, 44rem);
  padding: 0;
  border: 1px solid var(--bordo);
  border-radius: var(--raggio);
  background: var(--bianco);
  color: var(--notte);
  box-shadow: var(--ombra);
  overflow: auto;
}
.richiesta::backdrop { background: rgb(16 52 63 / 0.55); }
.richiesta { --pad: clamp(1.25rem, 4vw, 2rem); }
.richiesta__interno { padding: var(--pad); }
.richiesta__testa { display: flex; align-items: flex-start; gap: 1rem; }
.richiesta__testa h2 { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem); margin-right: auto; }
.richiesta__chiudi {
  flex: none;
  width: 44px;
  height: 44px;
  margin: -0.5rem -0.5rem 0 0;
  border: 0;
  background: none;
  font-size: 1.1rem;
  line-height: 1;
  color: var(--grigio);
  cursor: pointer;
  border-radius: 50%;
}
.richiesta__chiudi:hover { color: var(--notte); background: var(--calce); }
.richiesta__guida { font-size: 0.92rem; color: var(--grigio); margin: 0.6rem 0 1.4rem; max-width: none; }
.richiesta__campi { display: grid; gap: 0.9rem; margin-bottom: 1.4rem; }
@media (min-width: 30rem) { .richiesta__campi { grid-template-columns: 1fr 1fr; } }
/* Solo le etichette dei campi di testo. Se questa regola prende anche
   .richiesta__scelta (che e' un <label>), il suo display:flex viene
   sovrascritto da block e le caselle si sfasciano. */
.richiesta__campi > label,
.richiesta__altro { display: block; font-size: 0.8rem; font-weight: 600; letter-spacing: 0.04em; }
.richiesta input[type='text'],
.richiesta textarea {
  display: block;
  width: 100%;
  margin-top: 0.35rem;
  padding: 0.7rem 0.8rem;
  font: inherit;
  font-weight: 400;
  letter-spacing: normal;
  color: var(--notte);
  background: var(--calce);
  border: 1px solid var(--bordo);
  border-radius: 0.65rem;
  transition: border-color var(--transizione), background var(--transizione);
}
.richiesta input[type='text']:hover,
.richiesta textarea:hover { border-color: var(--grigio); }
.richiesta input[type='text']:focus-visible,
.richiesta textarea:focus-visible { outline: 2px solid var(--mare); outline-offset: 1px; }
.richiesta__scelte { margin: 0 0 1.4rem; padding: 0; border: 0; }
.richiesta__scelte legend {
  padding: 0;
  margin-bottom: 0.6rem;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.04em;
}
/* Riga intera cliccabile e alta almeno 44 px: si spunta col pollice. */
.richiesta__scelta {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  min-height: 44px;
  padding: 0.15rem 0;
  font-size: 0.95rem;
  font-weight: 400;
  letter-spacing: normal;
  cursor: pointer;
  border-bottom: 1px solid var(--bordo);
}
.richiesta__scelta:last-of-type { border-bottom: 0; }
.richiesta__scelta:hover { color: var(--mare-cupo); }
.richiesta__scelta input { flex: none; width: 20px; height: 20px; accent-color: var(--mare); }
.richiesta__altro { margin-bottom: 1.4rem; }
/* Ancorati in fondo alla finestra: l'elenco degli argomenti e' lungo e senza
   questo i due pulsanti di invio restavano sotto la piega. */
.richiesta__azioni {
  position: sticky;
  bottom: 0;
  margin: 0 calc(var(--pad) * -1) calc(var(--pad) * -1);
  padding: 1rem var(--pad) var(--pad);
  background: var(--bianco);
  border-top: 1px solid var(--bordo);
}
.richiesta__azioni .btn { flex: 1 1 11rem; justify-content: center; }

/* --- Selettore di lingua --------------------------------------------------
   Lo stesso collegamento in tre posti: testata, pannello del menu, pie'.
   Mostra sempre e solo la sigla di due lettere della lingua di destinazione.

   E' un <a> vestito da pulsante, non un <button>: e' una navigazione, e un
   <button> avrebbe bisogno di JavaScript per funzionare. Senza JavaScript il
   resto del sito resta navigabile e questo deve restarlo con lui. */
.lingua {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  text-decoration: none;
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  color: var(--notte);
  background: var(--bianco);
  border: 1px solid var(--bordo);
  border-radius: var(--raggio-btn);
  padding: 0.36rem 0.62rem;
  transition: border-color var(--transizione), background var(--transizione),
              color var(--transizione);
}

/* La bandiera della lingua verso cui si va. Larghezza fissa e altezza libera:
   l'italiana e' 3:2 e la britannica 2:1, forzarle nella stessa scatola
   avrebbe schiacciato una delle due.

   Il filo attorno serve al bianco della bandiera italiana, che sul pulsante
   bianco sparirebbe: senza, si vedono due bande verde e rossa staccate. */
.lingua__bandiera {
  width: 19px;
  height: auto;
  flex: none;
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgb(16 52 63 / 0.18);
}
.sez--notte .lingua__bandiera, .pie .lingua__bandiera {
  box-shadow: 0 0 0 1px rgb(255 255 255 / 0.35);
}
.lingua:hover { border-color: var(--notte); background: var(--notte); color: var(--bianco); }

.lingua--testata { flex: none; }
@media (max-width: 63.99rem) { .lingua--testata { display: none; } }

/* Nel pannello del menu sta sotto i due pulsanti, allineato a sinistra come
   loro invece che centrato: la riga sopra e' larga tutta la colonna.

   Il selettore e' .pannello > a.lingua e non .lingua--pannello perche' le voci
   del menu sono .pannello > a, che vale 0,2,0 e vincerebbe: senza questo il
   selettore ereditava Fraunces a 1,6rem e veniva fuori una medaglia tonda con
   dentro "EN" in tondo grazie. */
.pannello > a.lingua {
  margin-top: 1.4rem;
  align-self: flex-start;
  font-family: 'Work Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 0.82rem;
  font-weight: 700;
  font-variation-settings: normal;
  padding: 0.5rem 0.9rem;
  border: 1px solid var(--bordo);
}

/* Nel pie' la riga delle note legali e' su fondo scuro. */
.sez--notte .lingua, .pie .lingua {
  background: transparent;
  color: var(--bianco);
  border-color: rgb(255 255 255 / 0.32);
}
.sez--notte .lingua:hover, .pie .lingua:hover {
  background: var(--bianco);
  color: var(--notte);
  border-color: var(--bianco);
}

/* --- Barra fissa su telefono --------------------------------------------- */
.barra {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 45;
  display: flex;
  gap: 0.5rem;
  padding: 0.6rem var(--margine) calc(0.6rem + env(safe-area-inset-bottom));
  background: rgb(242 246 247 / 0.94);
  backdrop-filter: blur(14px);
  border-top: 1px solid var(--bordo);
}
.barra .btn { flex: 1; justify-content: center; padding-block: 0.8rem; }
@media (min-width: 64rem) { .barra { display: none; } }
/* Sui telefoni con l'indicatore home la barra e' piu' alta di 72 px: senza
   l'inset il fondo della pagina finisce sotto la barra. Dove l'inset non
   esiste vale 0 e non cambia nulla. */
@media (max-width: 63.99rem) { :root { --barra: calc(72px + env(safe-area-inset-bottom, 0px)); } }

/* --- Pulsante "Torna alla home", fisso in basso a sinistra ---------------
   C'e' su tutte le pagine tranne la home (vedi torna_home() nel generatore).

   Sta SOPRA la barra fissa del telefono: --barra vale 72px piu' la safe area
   sotto i 1024px e 0px sopra, quindi con bottom: calc(1rem + var(--barra))
   il pulsante si alza da solo dove serve. Senza quell'offset finirebbe sotto
   i pulsanti Chiama e WhatsApp.

   z-index 44: sotto la barra (45), il visore (60) e il pannello del menu
   (70), cosi' quando si aprono lo coprono invece di farsi bucare. */
.torna-home {
  position: fixed;
  /* Allineato al bordo del .contenitore, non a quello della finestra: sopra i
     ~1276 px il testo rientra (contenitore 1180 px centrato) e da PC il
     pulsante restava fuori dalla colonna di lettura. */
  left: max(var(--margine), calc(50% - var(--contenitore) / 2));
  bottom: calc(1rem + var(--barra));
  z-index: 44;
  padding: 0.7rem 1.25rem;
  background: var(--bianco);
  color: var(--notte);
  border-color: var(--bordo);
  box-shadow: var(--ombra);
}
.torna-home:hover {
  color: var(--notte);
  border-color: var(--notte);
  box-shadow: 0 12px 26px -10px rgb(16 52 63 / 0.55);
}
.torna-home:active { box-shadow: var(--ombra); }
.torna-home svg { flex: none; }

/* Sotto i 1024 px il WhatsApp fisso c'e' anche lui, in basso a destra, e i due
   si sovrapporrebbero di 65 px. Invece di togliere uno dei due, questo sale di
   una riga: restano tutti e due, in diagonale, sopra la barra. */
@media (max-width: 63.99rem) {
  .torna-home { bottom: calc(1rem + var(--barra) + 3.6rem); }
}

/* --- Pulsante WhatsApp fisso in basso a destra ---------------------------
   C'e' su tutte le pagine, home compresa, e a TUTTE le larghezze.

   Su telefono convive con il pulsante WhatsApp della barra fissa: sono due,
   ed e' voluto (scelta del 25/09/2026). Il doppione e' il prezzo di avere il
   pulsante sempre nello stesso posto, qualunque sia lo schermo.

   Per non scontrarsi con "Torna alla home", che a 375 px e' largo 187 px e
   arriverebbe a 207 px da sinistra mentre questo parte a 142 px (65 px di
   sovrapposizione, misurati), sotto i 1024 px e' "Torna alla home" ad
   alzarsi di una riga. Vedi .torna-home. */
.wa-fisso {
  position: fixed;
  right: max(var(--margine), calc(50% - var(--contenitore) / 2));   /* vedi .torna-home */
  bottom: calc(1rem + var(--barra));
  z-index: 44;
  padding: 0.7rem 1.25rem;
}

/* --- Comparse allo scorrimento -------------------------------------------
   ATTENZIONE: queste regole NASCONDONO del contenuto, ed e' il JavaScript a
   riaccenderlo. Sono percio' tutte vincolate a `.js`, la classe che lo script
   inline in <head> mette sull'elemento <html>.

   Senza quel vincolo, se il JavaScript non parte — disattivato, bloccato, file
   non arrivato, errore imprevisto — nessuno riaccende niente e la pagina resta
   quasi bianca: misurato il 17/09/2026, 8 sezioni su 8 invisibili e il 5% del
   testo leggibile. Con il vincolo, senza JavaScript le regole non si applicano
   e la pagina si vede normalmente, semplicemente senza effetti.

   Regola pratica: se una regola parte da opacity 0, clip-path o simili e
   dipende dal JavaScript per tornare visibile, va messa sotto `.js`. ------- */
.js .comparsa { opacity: 0; transform: translateY(14px); transition: opacity 620ms ease, transform 620ms cubic-bezier(0.22, 0.61, 0.36, 1); }
.js .comparsa.visibile { opacity: 1; transform: none; }

/* Sequenza di apertura della home */
.js .avvio .finestra { clip-path: inset(18% 0 18% 0); }
.js .avvio--pronto .finestra { clip-path: inset(0 0 0 0); transition: clip-path 900ms cubic-bezier(0.22, 0.61, 0.36, 1); }
.js .avvio .apertura__titolo, .js .avvio .apertura__corpo { opacity: 0; transform: translateY(16px); }
.js .avvio--pronto .apertura__titolo, .js .avvio--pronto .apertura__corpo {
  opacity: 1;
  transform: none;
  transition: opacity 700ms ease 320ms, transform 700ms cubic-bezier(0.22, 0.61, 0.36, 1) 320ms;
}
.js .avvio--pronto .apertura__corpo { transition-delay: 460ms; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
  }
  .js .comparsa { opacity: 1; transform: none; }
  .js .avvio .finestra { clip-path: none; }
  .js .avvio .apertura__titolo, .js .avvio .apertura__corpo { opacity: 1; transform: none; }
  .btn:hover, .scheda--legame:hover, .scatto:hover img { transform: none; }
}

@media print {
  .testata, .barra, .visore, .pannello, .salta,
  .torna-home, .wa-fisso { display: none !important; }
  body { background: #fff; padding-bottom: 0; }
  .js .comparsa { opacity: 1; transform: none; }
}