/* =====================================================================
   Al Tinèl — foglio di stile
   ---------------------------------------------------------------------
   La tavolozza non è scelta a occhio: viene dalle cose del cliente.
     · il verde  #306848  è il verde del suo logo, campionato dal file;
     · il legno  #54240C  è il tono dominante della sua terrazza;
     · la pietra e la calce danno i grigi caldi dei fondi.
   Il contrasto del testo sui fondi è verificato (≥ 4.5:1 sul corpo,
   ≥ 3:1 sui titoli grandi), e sopra le fotografie c'è un velo calcolato
   perché il testo tenga anche dove l'immagine è chiara.

   Un carattere con grazie per i titoli (Playfair) e uno lineare per il
   testo (Inter): su un rustico di valle un titolo tutto lineare sembra
   l'insegna di una banca.
   ===================================================================== */

:root {
  /* ── colori del cliente ── */
  --verde:        #2F6446;
  --verde-cupo:   #1E4530;
  --verde-tenue:  #EAF1EC;
  --legno:        #8A4A20;
  --legno-cupo:   #5A2E12;
  --ottone:       #B08432;
  --ottone-testo: #7C5A1E;

  /* ── fondi e testi ── */
  --fondo:        #FCFAF7;
  --fondo-2:      #F3EDE5;
  --fondo-scuro:  #22201C;
  --carta:        #FFFFFF;
  --testo:        #211E1A;
  --testo-forte:  #14120F;
  --testo-tenue:  #6B645C;
  --su-scuro:     #F4EFE8;
  --su-scuro-ten: #C4BCB1;
  --bordo:        #E4DCD1;
  --bordo-forte:  #B9AE9F;

  --ok:           #1F6B45;
  --ok-tenue:     #E3F1E8;
  --no:           #9C2B22;
  --no-tenue:     #FAE7E4;
  --attesa:       #8A5A12;
  --attesa-tenue: #FAF0DC;

  /* ── velo sopra le fotografie ──
     Non è un valore estetico: è il minimo che tiene il testo chiaro
     sopra 4.5:1 anche se la fotografia in quel punto fosse bianca. */
  /* Il minimo calcolato è .63 con questo fondo: sopra c'è testo bianco
     (4.5:1), bianco caldo (4.5:1) e l'occhiello oro (3:1), e la prova si
     fa sul caso peggiore — «la fotografia in quel punto è bianca».
     Un fondo più scuro fa passare PIÙ fotografia a pari leggibilità:
     con #221E19 servirebbe .66, con questo basta .63. */
  --velo:         .64;
  --velo-fondo:   #14120F;

  /* ── caratteri ── */
  --f-titoli: "Playfair Display", "Iowan Old Style", Georgia, serif;
  --f-testo:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* ── misure ── */
  --wrap:         1180px;
  --wrap-stretto: 760px;
  --h-testata:    76px;
  --r-s: 8px; --r-m: 14px; --r-l: 22px; --r-tondo: 999px;
  --transizione: .2s cubic-bezier(.4, 0, .2, 1);

  --t-xs: .78rem; --t-sm: .9rem;  --t-base: 1rem; --t-md: 1.075rem;
  --t-lg: 1.3rem; --t-xl: clamp(1.6rem, 3.2vw, 2.15rem);
  --t-2xl: clamp(2.1rem, 5.4vw, 3.5rem);

  --sp-3: .9rem; --sp-4: 1.4rem; --sp-5: 2.1rem; --sp-6: 3.2rem; --sp-7: 4.6rem;
}

@font-face { font-family: "Playfair Display"; src: url(../fonts/playfair-600.woff2) format("woff2");
             font-weight: 500 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter"; src: url(../fonts/inter-400.woff2) format("woff2");
             font-weight: 400; font-display: swap; }
@font-face { font-family: "Inter"; src: url(../fonts/inter-600.woff2) format("woff2");
             font-weight: 600; font-display: swap; }
@font-face { font-family: "Inter"; src: url(../fonts/inter-700.woff2) format("woff2");
             font-weight: 700; font-display: swap; }


/* ══════════════════════════════════════════════ base ═══ */

*, *::before, *::after { box-sizing: border-box; }

/* Un `hidden` messo dal JavaScript non basta da solo: la regola del
   browser (`[hidden] { display: none }`) è meno specifica di una classe
   che fissa il display, e `.btn { display: inline-flex }` la batte.
   Senza questa riga i tre pulsanti dei passi si vedevano tutti insieme
   — «Indietro», «Avanti» e «Invia» sullo stesso schermo. */
[hidden] { display: none !important; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--h-testata) + 1rem);
  /* Il pannello del menu sta parcheggiato a destra fuori schermo
     (`translateX(100%)`): `clip` impedisce che quella larghezza diventi
     scorrimento laterale, e a differenza di `hidden` non crea un
     contenitore di scorrimento che rovinerebbe lo `position: sticky`
     della testata. */
  overflow-x: clip;
}

body {
  margin: 0;
  background: var(--fondo);
  color: var(--testo);
  font-family: var(--f-testo);
  font-size: var(--t-base);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg, video, iframe { max-width: 100%; height: auto; display: block; }
img { background: var(--fondo-2); }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .18em; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }

:focus-visible { outline: 3px solid var(--ottone); outline-offset: 3px; border-radius: 3px; }

/* ─────────────────────────────── movimenti ─────────────────────────
   Poco e piano. Tre cose sole:
     · quello che entra nello schermo si presenta (12px e una dissolvenza)
     · il passo nuovo del pannello arriva da destra, come una pagina
     · la testata, appena si scorre, si stacca dalla pagina con un'ombra
   Niente rimbalzi, niente rotazioni, niente che si muova due volte: il
   sito vende una sala, non fa il numero di varietà. E chi ha chiesto al
   sistema di non animare non vede muoversi nulla (in fondo al blocco). */

.entra { opacity: 0; transform: translateY(12px);
         transition: opacity .5s ease, transform .5s cubic-bezier(.22, .61, .36, 1); }
.entra.e-dentro { opacity: 1; transform: none; }
/* A scaglioni dentro la stessa fila: 60ms l'uno dall'altro, non di più. */
.entra:nth-child(2) { transition-delay: .06s; }
.entra:nth-child(3) { transition-delay: .12s; }
.entra:nth-child(4) { transition-delay: .18s; }

/* Il passo nuovo si dissolve, e basta: NON scivola di lato. La prima
   versione entrava con `translateX(14px)`, e quei 14px sporgevano dalla
   zona che scorre — che scorre in verticale — facendo comparire una
   barra orizzontale e un sussulto a ogni passo (misurato: 351px di
   contenuto in una scatola di 337). Un effetto che sposta il contenuto
   dentro un contenitore che scorre non è un effetto: è un difetto con la
   musica. */
@keyframes passo-entra { from { opacity: 0; } to { opacity: 1; } }
/* La dissolvenza si accende SOLO quando si cambia passo, e la classe la
   mette il JavaScript. Messa su `.passo:not([hidden])` il primo passo
   partiva da opacità 0 al caricamento: se per qualsiasi motivo
   l'animazione non gira (una scheda in secondo piano basta), il modulo
   della prenotazione resta invisibile. Il contenuto non deve mai
   dipendere da un'animazione. */
.modulo--passi .passo.appare { animation: passo-entra .22s ease both; }

/* La testata staccata: si accorge dello scorrimento e prende un'ombra. */
.testata { transition: box-shadow .25s ease, border-color .25s ease; }
.testata.e-staccata { box-shadow: 0 6px 24px rgb(20 18 15 / .10); border-bottom-color: transparent; }

/* Chi ha chiesto al sistema di non animare non deve vedere nulla muoversi. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  /* Senza questa riga chi non vuole animazioni vedrebbe le sezioni
     restare invisibili: la comparsa la accende il JavaScript. */
  .entra { opacity: 1 !important; transform: none !important; }
}

.salta {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--verde); color: #fff; padding: .8rem 1.2rem;
  border-radius: 0 0 var(--r-m) 0; font-weight: 600;
}
.salta:focus { left: 0; }


/* ══════════════════════════════════════ tipografia ═══ */

h1, h2, h3 {
  font-family: var(--f-titoli); font-weight: 600; line-height: 1.14;
  letter-spacing: -.01em; margin: 0 0 .55em; text-wrap: balance;
  /* Il tedesco fa parole che a 320px non stanno in nessun modo. */
  overflow-wrap: anywhere; hyphens: auto;
}
h1 { font-size: var(--t-2xl); }
h2 { font-size: var(--t-xl); }
h3 { font-size: var(--t-lg); }

p { margin: 0 0 1.05em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }
strong { font-weight: 700; color: var(--testo-forte); }

.occhiello {
  font-family: var(--f-testo); font-size: var(--t-xs); font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--ottone-testo); margin: 0 0 .7rem;
}
.guida { color: var(--testo-tenue); font-size: var(--t-md); max-width: 60ch; }
.prosa { font-size: var(--t-md); line-height: 1.78; }
.prosa > * + * { margin-top: 1.1em; }
.prosa a { color: var(--verde); text-decoration: underline; }
.prosa--legale { font-size: var(--t-base); }
.prosa--legale h2 { font-size: var(--t-md); margin-top: 2.1em; font-family: var(--f-testo); font-weight: 700; }
.nota {
  background: var(--fondo-2); border-left: 3px solid var(--ottone);
  border-radius: 0 var(--r-s) var(--r-s) 0; padding: .9rem 1.1rem;
  font-size: var(--t-sm); color: var(--testo-tenue);
}
.centro { text-align: center; }
.centro .occhiello, .sez__testa--centro { text-align: center; }
.sez__testa--centro { margin-inline: auto; }


/* ══════════════════════════════════════ impianto ═══ */

.wrap { width: min(100% - 2.4rem, var(--wrap)); margin-inline: auto; }
.wrap--stretto { width: min(100% - 2.4rem, var(--wrap-stretto)); }

.sez { padding-block: var(--sp-7); }
.sez--titolo { padding-block: var(--sp-6) var(--sp-4); }
.sez__testa { max-width: 46rem; margin-bottom: var(--sp-5); }
.sez__nota { margin-top: var(--sp-4); font-size: var(--t-sm); color: var(--testo-tenue); }
.sez__azioni { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: var(--sp-5); }
.centro .sez__azioni { justify-content: center; }

.t-chiaro { background: var(--fondo-2); }
.t-scuro  { background: var(--fondo-scuro); color: var(--su-scuro); }
.t-scuro .occhiello { color: #D9B978; }
.t-scuro h2, .t-scuro h3 { color: #fff; }
.t-scuro .guida, .t-scuro .sez__nota { color: var(--su-scuro-ten); }


/* ══════════════════════════════════════ pulsanti ═══ */

.btn {
  --f: transparent; --c: var(--testo); --b: currentColor;
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 46px; padding: .72rem 1.35rem;
  background: var(--f); color: var(--c);
  border: 1.5px solid var(--b); border-radius: var(--r-tondo);
  font-size: var(--t-sm); font-weight: 600; text-decoration: none; text-align: center;
  transition: background var(--transizione), color var(--transizione),
              border-color var(--transizione), transform var(--transizione);
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn .icona { flex: none; }

.btn--primario { --f: var(--verde); --c: #fff; --b: var(--verde); }
.btn--primario:hover { --f: var(--verde-cupo); --b: var(--verde-cupo); }
.btn--fantasma { --c: var(--testo); --b: var(--bordo-forte); }
.btn--fantasma:hover { --f: var(--verde-tenue); --b: var(--verde); --c: var(--verde-cupo); }
.btn--chiaro { --f: #fff; --c: var(--testo-forte); --b: #fff; }
.btn--chiaro:hover { --f: var(--fondo-2); --b: var(--fondo-2); }
.btn--nudo { --b: transparent; --c: var(--testo-tenue); min-height: 38px; padding: .4rem .6rem; }
.btn--nudo:hover { --c: var(--verde); text-decoration: underline; }
.btn--rosso { --c: var(--no); }
.btn--grande { font-size: var(--t-base); padding: .9rem 1.7rem; min-height: 52px; }
.btn--piccolo { min-height: 38px; padding: .45rem .9rem; font-size: var(--t-xs); }


/* ══════════════════════════════════════ testata ═══ */

/* ⚠ LA SFOCATURA VA SU UNO PSEUDO-ELEMENTO, NON SULLA TESTATA.
   `backdrop-filter` (come `filter` e `transform`) rende l'elemento un
   BLOCCO DI CONTENIMENTO: il menu mobile, che è `position: fixed`, si
   ancora alla testata invece che alla finestra, e il pannello viene
   tagliato all'altezza della testata — si apre e non si vede.
   Messa sul `::before` la sfocatura si vede uguale e la testata torna a
   essere un elemento normale. */
.testata {
  position: sticky; top: 0; z-index: 100;
  background: color-mix(in srgb, var(--fondo) 92%, transparent);
  border-bottom: 1px solid var(--bordo);
  isolation: isolate;
}
.testata::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  backdrop-filter: blur(10px); pointer-events: none;
}
.testata__riga {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; min-height: var(--h-testata); flex-wrap: nowrap;
}
.marchio { flex: 0 0 auto; display: block; text-decoration: none; }
.marchio__img { width: auto; height: 52px; background: none; }

.nav { display: flex; align-items: center; gap: 1.4rem; }
.nav__lista {
  display: flex; align-items: center; gap: 1.2rem;
  list-style: none; margin: 0; padding: 0; flex-wrap: nowrap; min-width: 0;
}
.nav__lista a {
  text-decoration: none; font-size: var(--t-sm); font-weight: 600;
  padding: .7rem 0; min-height: 44px; display: inline-flex; align-items: center;
  white-space: nowrap; position: relative;
}
.nav__lista a::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: .35rem; height: 2px;
  background: var(--ottone); transform: scaleX(0); transform-origin: left;
  transition: transform var(--transizione);
}
.nav__lista a:hover::after, .nav__lista a[aria-current="page"]::after { transform: scaleX(1); }

.nav__azioni { display: flex; align-items: center; gap: .6rem; }
.lingue { display: flex; gap: .1rem; list-style: none; margin: 0; padding: 0; }
.lingue a {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 34px; min-height: 34px; border-radius: var(--r-s);
  font-size: var(--t-xs); font-weight: 700; text-decoration: none; color: var(--testo-tenue);
}
.lingue a:hover { background: var(--fondo-2); color: var(--testo); }
.lingue .is-attiva { background: var(--verde-tenue); color: var(--verde-cupo); }

/* ── Instagram nella testata ──
   Solo il marchio: un cerchio, alto quanto i pulsanti che gli stanno
   accanto. `align-self: stretch` invece di un'altezza scritta a mano —
   gli altri due sono alti 50px perché dentro hanno del testo, e quel
   numero cambia se un giorno cambia il carattere. Così si adegua da sé.
   Senza, l'icona sola si fermava a 46px e la fila era storta di 4px.
   Il nome del profilo sta nell'etichetta parlata. */
.nav__azioni .social-ig {
  /* `align-self: stretch` prende l'altezza dai vicini, qualunque sia —
     gli altri due sono alti 50px perché dentro hanno del testo, e quel
     numero cambierebbe col carattere. Senza, l'icona sola si fermava al
     minimo di 46px e la fila restava storta di quattro pixel.
     Il fianco è scritto a mano perché da qui non si può leggere
     l'altezza dei vicini: 18px d'icona + 3 di bordo + .9rem per parte
     fanno ~50, cioè un cerchio. */
  align-self: stretch; flex: none; padding: 0 .9rem;
}
.nav__azioni .social-ig span { display: none; }

.apri-menu { display: none; }

/* La riga della testata non va a capo. Nella fascia dei portatili si
   stringe per gradi, e il numero di telefono — che compare altre tre
   volte nella pagina — è la prima cosa a uscire. */
@media (min-width: 1001px) and (max-width: 1300px) {
  .nav { gap: 1rem; }
  .nav__lista { gap: .85rem; }
  .nav__azioni .tel span { display: none; }
  /* Perso il numero, resta la sola cornetta: e allora si comporta come
     il bottone di Instagram qui accanto, cerchio della stessa misura.
     Prima restava alto 46 contro i 50 dei vicini — storto di quattro
     pixel, ma da solo non si notava. Con due bottoni-icona affiancati
     sì. */
  .nav__azioni .tel { align-self: stretch; padding: 0 .9rem; }
}
@media (min-width: 1001px) and (max-width: 1120px) {
  .nav__azioni .tel { display: none; }
  .nav__lista { gap: .7rem; font-size: .95em; }
}

@media (max-width: 1000px) {
  .apri-menu {
    display: inline-flex; align-items: center; gap: .55rem;
    background: none; border: 0; padding: .5rem; min-height: 44px;
    font-size: var(--t-sm); font-weight: 600;
  }
  .apri-menu__barre, .apri-menu__barre::before, .apri-menu__barre::after {
    display: block; width: 22px; height: 2px; background: currentColor;
    transition: transform var(--transizione), opacity var(--transizione);
  }
  .apri-menu__barre { position: relative; }
  .apri-menu__barre::before, .apri-menu__barre::after { content: ''; position: absolute; left: 0; }
  .apri-menu__barre::before { top: -7px; }
  .apri-menu__barre::after { top: 7px; }
  .apri-menu[aria-expanded="true"] .apri-menu__barre { background: transparent; }
  .apri-menu[aria-expanded="true"] .apri-menu__barre::before { transform: translateY(7px) rotate(45deg); }
  .apri-menu[aria-expanded="true"] .apri-menu__barre::after { transform: translateY(-7px) rotate(-45deg); }

  .nav {
    position: fixed; inset: var(--h-testata) 0 0; z-index: 90;
    flex-direction: column; align-items: stretch; justify-content: flex-start;
    gap: 0; padding: 1.4rem 1.2rem 6rem;
    background: var(--fondo); border-top: 1px solid var(--bordo);
    overflow-y: auto; transform: translateX(100%); visibility: hidden;
    transition: transform var(--transizione), visibility var(--transizione);
  }
  .nav.is-aperto { transform: none; visibility: visible; }
  .nav__lista { flex-direction: column; align-items: stretch; gap: 0; }
  .nav__lista li + li { border-top: 1px solid var(--bordo); }
  .nav__lista a { display: block; padding: .95rem .2rem; font-size: var(--t-md); }
  .nav__lista a::after { display: none; }
  .nav__azioni { flex-direction: column; align-items: stretch; gap: .7rem; margin-top: 1.6rem; }
  .nav__azioni .btn { width: 100%; }
  /* Nel menu a scomparsa i pulsanti prendono tutta la riga: lì un'icona
     sola in mezzo al vuoto non dice dove porta, e il nome torna. E si
     annulla il quadrato: con `aspect-ratio: 1` su un pulsante largo
     quanto lo schermo verrebbe alto altrettanto. */
  .nav__azioni .social-ig { align-self: auto; padding: .72rem 1.35rem; }
  .nav__azioni .social-ig span { display: inline; }
  .lingue { order: -1; justify-content: center; margin-bottom: .4rem; }
  .marchio__img { height: 44px; }
}


/* ══════════════════════════════════════════ eroe ═══ */

.eroe { position: relative; isolation: isolate; display: grid; align-items: end;
        min-height: min(76svh, 640px); padding-block: var(--sp-7) var(--sp-6); overflow: hidden; }
.eroe__sfondo { position: absolute; inset: 0; z-index: -2; }
.eroe__sfondo img { width: 100%; height: 100%; object-fit: cover; }
/* Due strati: un velo pieno nel colore della casa, che GARANTISCE il
   contrasto anche su una foto chiara, e una sfumatura che dà profondità. */
.eroe::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: var(--velo-fondo); opacity: var(--velo);
}
.eroe::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgb(0 0 0 / 0) 0%, rgb(0 0 0 / .12) 45%, rgb(0 0 0 / .46) 100%);
}
.eroe__dentro { color: #fff; max-width: 34rem; }
.eroe__dentro .occhiello { color: #E4C68A; }
/* Il titolo dell'eroe NON si sillaba. La regola generale spezza le
   parole lunghe perché in tedesco, a 320px, certe parole non stanno da
   nessuna parte — ma in un titolo di 3,5rem il risultato era
   «l'esclu-sività» in mezzo alla prima schermata. `overflow-wrap:
   anywhere`, ereditato, resta come rete di sicurezza: spezza senza
   trattino solo se davvero non ci sta. */
.eroe__titolo { color: #fff; margin-bottom: .5em; hyphens: manual; }
.eroe__testo { font-size: var(--t-md); color: #F2ECE4; }
.eroe__azioni { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: var(--sp-4); }
.eroe__fatti {
  display: flex; flex-wrap: wrap; gap: .5rem 1.4rem; list-style: none;
  margin: var(--sp-4) 0 0; padding: 0; font-size: var(--t-sm); color: #E8E1D8;
}
.eroe__fatti li { display: inline-flex; align-items: center; gap: .45rem; }
.eroe__fatti a { color: inherit; }


/* ═══════════════════ riquadro di prenotazione nell'eroe ═══
   Tutta la prenotazione si fa qui, in tre passi. Chi arriva non viene
   mandato in fondo alla pagina: la data si verifica e si invia senza
   muoversi dalla prima schermata.

   Fondo bianco pieno di proposito: dentro c'è testo piccolo, ci sono
   campi e pulsanti, e sopra una fotografia nessuna velatura basta a
   garantire il contrasto di tutti e tre.

   Su telefono diventa un pannello a tutto schermo che si apre da una
   maniglia — dieci campi dentro l'eroe di uno schermo da 375px
   spingerebbero il titolo fuori dalla vista. */

.eroe__riga { display: grid; gap: var(--sp-4); align-items: end; }
@media (min-width: 1000px) {
  .eroe__riga { grid-template-columns: minmax(0, 1fr) 392px; gap: var(--sp-6); align-items: center; }
}

/* Il pannello non deve far crescere l'eroe. Al terzo passo i campi sono
   sei e, lasciato libero, il riquadro diventava alto 954px: l'eroe
   passava da 640 a 1156 e la pagina si allungava sotto i piedi di chi
   sta prenotando — cioè proprio la cosa che il pannello serviva a
   evitare. Inoltre l'altezza cambiava a ogni passo, e tutto quello che
   sta sotto l'eroe saltava su e giù.
   Quindi: altezza limitata a quella dell'eroe, e scorre SOLO il passo.
   Testa, riepilogo e pulsanti restano fermi e sempre in vista: il
   pulsante che manda la richiesta non deve mai essere da cercare. */
/* Il pannello è una colonna: testa in alto, campi al centro (scorrono
   se serve), pulsanti in fondo. Vale su schermo grande e su telefono —
   sul telefono, anzi, serve di più: il pulsante che manda avanti sta in
   fondo allo schermo, dove arriva il pollice, invece di galleggiare a
   metà con mezzo schermo vuoto sotto. */
.prenota-rapida .modulo--passi { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
.prenota-rapida .modulo--passi .modulo__corpo { flex: 1 1 auto; min-height: 0;
                                                overflow-y: auto; overflow-x: hidden; }

@media (min-width: 1000px) {
  /* Altezza FISSA, non massima: con `max-height` il riquadro cambiava
     altezza a ogni passo (556 → 465 → 608) e l'eroe con lui, quindi
     tutta la pagina sotto saltava su e giù mentre si prenotava. Fissa,
     invece, i pulsanti restano sempre nello stesso punto. */
  /* 672px e non 660: da quando il primo passo è un mese intero di
     calendario, con 660 l'ultima riga («I campi con * sono
     obbligatori») restava mezza sotto il bordo e il velo dello
     scorrimento si accendeva per dodici pixel. */
  .prenota-rapida { height: min(84svh, 672px); display: flex; flex-direction: column; }
}

.prenota-rapida {
  background: var(--carta); color: var(--testo);
  border-radius: var(--r-l); padding: var(--sp-4);
  box-shadow: 0 18px 44px rgb(0 0 0 / .3);
}
.prenota-rapida__testa { display: flex; align-items: flex-start; justify-content: space-between; gap: .5rem; }
.prenota-rapida__occhiello {
  font-size: var(--t-xs); font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ottone-testo); margin: 0 0 .25rem;
}
.prenota-rapida__titolo { font-size: var(--t-lg); margin: 0 0 var(--sp-3); }
.prenota-rapida__chiudi {
  display: none; background: none; border: 0; padding: .4rem; margin: -.4rem -.4rem 0 0;
  color: var(--testo-tenue); border-radius: var(--r-s);
}
.prenota-rapida__chiudi:hover { background: var(--fondo-2); color: var(--testo); }
.prenota-rapida__vuoto { font-size: var(--t-sm); color: var(--testo-tenue); }
.prenota-rapida__sotto { margin: var(--sp-3) 0 0; font-size: var(--t-xs); text-align: center; }
.prenota-rapida__sotto a { color: var(--verde); font-weight: 600; }
.prenota-rapida__tel {
  display: flex; align-items: center; justify-content: center; gap: .4rem;
  margin: var(--sp-3) 0 0; font-size: var(--t-sm); font-weight: 600;
}
.prenota-rapida__tel a { color: var(--verde); }

/* ── le date veloci ── */
.date-veloci {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: .45rem;
  list-style: none; margin: 0 0 var(--sp-3); padding: 0;
}
.data-chip {
  width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 1px; padding: .5rem .2rem; min-height: 64px;
  background: var(--verde-tenue); color: var(--verde-cupo);
  border: 1.5px solid #CFE0D4; border-radius: var(--r-m);
  text-decoration: none; transition: background var(--transizione),
    border-color var(--transizione), transform var(--transizione);
}
.data-chip:hover { background: var(--verde); color: #fff; border-color: var(--verde); transform: translateY(-2px); }
/* «Altra data»: una riga di testo, non una pastiglia. È una via di
   servizio — la maggior parte prende una delle tre date proposte. */
.date-veloci__altra { margin: calc(var(--sp-3) * -1) 0 var(--sp-3); text-align: right; }
.btn-testo { background: none; border: 0; padding: 0; cursor: pointer;
             font: inherit; font-size: var(--t-xs); font-weight: 700; color: var(--verde-cupo);
             text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.btn-testo:hover { color: var(--verde); }
.data-chip.is-scelta { background: var(--verde-cupo); color: #fff; border-color: var(--ottone); }
.data-chip__gio { font-size: .62rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; opacity: .85; }
.data-chip__n { font-family: var(--f-titoli); font-size: 1.3rem; line-height: 1; }
.data-chip__mese { font-size: .62rem; font-weight: 600; text-transform: lowercase; opacity: .85; }

/* ── i passi ── */
.modulo--passi .passo { border: 0; margin: 0; padding: 0; }
/* Nella versione a passi il numero è già scritto in testa al pannello
   («Passo 1 di 3»): ripeterlo nel pallino lo fa leggere due volte. */
.modulo--passi .passo__n { display: none; }
.modulo--passi .passo__titolo { font-size: var(--t-md); }
.modulo--passi .passo[hidden] { display: none; }
.passo__titolo {
  display: flex; align-items: center; gap: .5rem; padding: 0;
  font-size: var(--t-sm); font-weight: 700; margin-bottom: .8rem;
}
.passo__n {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: var(--r-tondo);
  background: var(--verde); color: #fff; font-size: var(--t-xs); flex: none;
}
/* Nel modulo grande i tre gruppi si vedono tutti: là non sono passi. */
.modulo:not(.modulo--passi) .passo { margin-bottom: var(--sp-4); }
.modulo:not(.modulo--passi) .passo__titolo { font-size: var(--t-md); }

.riepilogo { background: var(--fondo-2); border-radius: var(--r-m); padding: .9rem 1.1rem; margin-top: var(--sp-3); }
.riepilogo__titolo { font-size: var(--t-xs); font-weight: 700; letter-spacing: .1em;
                     text-transform: uppercase; color: var(--ottone-testo); margin: 0 0 .5rem; }
.riepilogo dl { display: grid; grid-template-columns: auto 1fr; gap: .2rem .8rem; margin: 0; font-size: var(--t-sm); }
.riepilogo dt { color: var(--testo-tenue); }
.riepilogo dd { margin: 0; font-weight: 600; }

.modulo--passi .modulo__griglia { gap: .7rem; }
/* Il pannello è una colonna stretta: due campi per riga tagliavano il
   testo del menu a tendina — e la parte tagliata era il prezzo. La data
   e la scelta della location prendono tutta la riga; nome/cognome e
   telefono/e-mail restano affiancati perché sono corti. */
.modulo--passi .campo--data, .modulo--passi .campo--area { grid-column: span 6; }
.modulo--passi .modulo__coda { display: grid; gap: .5rem; margin-top: var(--sp-3); }
.modulo--passi .modulo__nota { margin-top: .6rem; }
.btn--pieno { width: 100%; }

/* ── la maniglia, solo su telefono ── */
.prenota-maniglia { display: none; }

@media (max-width: 999px) {
  .prenota-maniglia {
    display: flex; align-items: center; justify-content: space-between; gap: .8rem;
    width: 100%; padding: .9rem 1.1rem; text-align: left;
    background: var(--carta); color: var(--testo);
    border: 0; border-radius: var(--r-l); box-shadow: 0 10px 30px rgb(0 0 0 / .26);
  }
  .prenota-maniglia__t { display: block; font-weight: 700; font-size: var(--t-sm); }
  .prenota-maniglia__d { display: flex; gap: .4rem; margin-top: .2rem; flex-wrap: wrap; }
  .prenota-maniglia__d span {
    font-size: var(--t-xs); font-weight: 600; padding: .1rem .45rem;
    background: var(--verde-tenue); color: var(--verde-cupo); border-radius: var(--r-s);
  }

  /* Il pannello a tutto schermo. `position: fixed` funziona perché la
     testata NON è più un blocco di contenimento — vedi la nota lì. */
  .prenota-rapida {
    position: fixed; inset: 0; z-index: 120; border-radius: 0;
    padding: var(--sp-4) 1.2rem calc(var(--sp-6) + env(safe-area-inset-bottom));
    overflow-y: auto; box-shadow: none;
    transform: translateY(100%); visibility: hidden;
    transition: transform var(--transizione), visibility var(--transizione);
  }
  .prenota-rapida.is-aperta { transform: none; visibility: visible; }
  .prenota-rapida { display: flex; flex-direction: column; }

  /* Il pannello sta DENTRO l'eroe, e l'eroe è un contesto di
     impilamento a sé (`isolation: isolate`, gli serve per il velo sopra
     la fotografia). Perciò un z-index alto sul pannello non lo porta
     sopra la testata: il confronto avviene fra l'eroe e la testata, non
     fra i loro figli, e il pannello finiva sotto il logo e sotto la
     barra del telefono. Si solleva l'eroe, ma solo mentre è aperto. */
  body.ha-pannello .eroe { z-index: 200; }
  .prenota-rapida__chiudi { display: inline-flex; }
  .prenota-rapida__testa { position: sticky; top: calc(var(--sp-4) * -1); z-index: 1;
                           background: var(--carta); padding-block: .3rem var(--sp-3); }
  .date-veloci { grid-template-columns: repeat(3, 1fr); }
}


/* ════════════════════════════════════ tre fatti ═══ */

.fatti { display: grid; gap: var(--sp-4); list-style: none; margin: 0; padding: 0;
         grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }
.fatto { background: var(--carta); border: 1px solid var(--bordo);
         border-radius: var(--r-l); padding: var(--sp-4); }
.fatto h2 { font-size: var(--t-lg); margin-bottom: .4em; }
.fatto p { color: var(--testo-tenue); font-size: var(--t-sm); margin: 0; }
.fatto__icona { display: inline-flex; align-items: center; justify-content: center;
                width: 46px; height: 46px; border-radius: var(--r-tondo);
                background: var(--verde-tenue); color: var(--verde-cupo); margin-bottom: var(--sp-3); }


/* ══════════════════════════════════════ gli spazi ═══ */

.spazi { display: grid; gap: var(--sp-4);
         grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }
.spazio { background: var(--carta); border: 1px solid var(--bordo);
          border-radius: var(--r-l); overflow: hidden; }
.spazio img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; }
.spazio h3 { margin: var(--sp-4) var(--sp-4) .35em; }
.spazio p { margin: 0 var(--sp-4) var(--sp-4); color: var(--testo-tenue); font-size: var(--t-sm); }

.duo { display: grid; gap: var(--sp-5); align-items: center; }
@media (min-width: 860px) {
  .duo { grid-template-columns: 1fr 1fr; gap: var(--sp-6); }
  .sez--duo-inv .duo__testo { order: 2; }
}
.duo__foto { margin: 0; }
.duo__foto img { border-radius: var(--r-l); aspect-ratio: 4 / 3; object-fit: cover; width: 100%; }

.compreso { display: grid; gap: var(--sp-4); margin-top: var(--sp-4); }
@media (min-width: 720px) { .compreso { grid-template-columns: 1fr 1fr; } }
.compreso h3 { font-size: var(--t-md); font-family: var(--f-testo); font-weight: 700; }
.compreso p { color: var(--su-scuro-ten); font-size: var(--t-sm); margin: 0; }


/* ══════════════════════════════════════════ prezzi ═══ */

.prezzi { display: grid; gap: var(--sp-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr)); }
.prezzo { background: var(--carta); border: 1px solid var(--bordo);
          border-radius: var(--r-l); padding: var(--sp-5); display: flex; flex-direction: column; }
.prezzo h2, .prezzo h3 { font-size: var(--t-lg); margin-bottom: .3em; }
.prezzo__cifra { font-family: var(--f-titoli); font-size: clamp(2rem, 5vw, 2.7rem);
                 color: var(--verde); line-height: 1; margin: .2em 0 .5em; }
.prezzo__cosa { color: var(--testo-tenue); font-size: var(--t-sm); flex: 1 1 auto; }
.prezzo .btn { margin-top: var(--sp-4); align-self: flex-start; }

.listino { list-style: none; margin: var(--sp-4) 0 0; padding: 0; max-width: 34rem; }
.listino li { display: flex; justify-content: space-between; gap: 1rem;
              padding: .85rem 0; border-bottom: 1px solid var(--bordo); }
.listino__p { font-weight: 700; color: var(--verde); white-space: nowrap; }

.regole { margin: var(--sp-4) 0 0; padding-left: 1.4em; }
.regole li { margin-bottom: .8em; color: var(--testo-tenue); }
.regole li::marker { color: var(--ottone); font-weight: 700; }


/* ══════════════════════════════════════ calendario ═══ */

/* ═════════════════════════ la sezione della prenotazione ═══
   Una sezione sola: si scegle il giorno a sinistra e si chiede a destra.
   Da 1000px in su le due schede stanno affiancate — il calendario alla
   sua misura (520px) e il modulo che si prende il resto. Sotto, una
   sopra l'altra: prima il giorno, poi la richiesta, che è anche l'ordine
   in cui si ragiona. */
.prenota__riga { display: grid; gap: var(--sp-5); align-items: start; }
.prenota__cal { display: flex; flex-direction: column; gap: var(--sp-3); }
.cal__tel { display: inline-flex; align-items: center; gap: .5rem; margin: 0;
            font-size: var(--t-sm); align-self: center; }
.cal__tel a { color: inherit; font-weight: 700; text-decoration: underline;
              text-decoration-thickness: 1px; text-underline-offset: 3px; }
@media (min-width: 1000px) {
  .prenota__riga { grid-template-columns: 520px minmax(0, 1fr); gap: var(--sp-6); }
  /* Il calendario resta appeso mentre si compila: il modulo è più alto di
     lui, e senza questo la colonna di sinistra finiva a metà lasciando
     mezzo schermo di marrone vuoto. Appeso serve a qualcosa — si vede la
     data scelta e si può cambiarla senza tornare su. */
  .prenota__cal { position: sticky; top: calc(var(--h-testata) + var(--sp-4)); }
}
/* La scheda del modulo è bianca dentro una sezione scura: il colore del
   testo va rimesso a mano, altrimenti eredita il bianco della sezione e
   sparisce sul proprio fondo. */
.t-scuro .modulo-guscio { color: var(--testo); }
.t-scuro .modulo-guscio h2, .t-scuro .modulo-guscio h3 { color: var(--testo); }
.t-scuro .modulo-guscio .sotto, .t-scuro .modulo-guscio .modulo__nota { color: var(--testo-tenue); }

.cal { max-width: 520px; margin-inline: auto; background: var(--carta);
       border-radius: var(--r-l); padding: var(--sp-4); color: var(--testo); }
.cal__testa { display: flex; align-items: center; justify-content: space-between; gap: .5rem;
              margin-bottom: var(--sp-3); }
.cal__mese { font-family: var(--f-titoli); font-size: var(--t-lg); margin: 0; text-align: center; flex: 1 1 auto; }
.cal__nav { display: inline-flex; align-items: center; justify-content: center;
            width: 44px; height: 44px; border-radius: var(--r-tondo);
            border: 1px solid var(--bordo); color: var(--testo); text-decoration: none; }
.cal__nav:hover { background: var(--verde-tenue); border-color: var(--verde); color: var(--verde-cupo); }
.cal__nav.is-spento { opacity: .3; }

/* `minmax(0, 1fr)` e non `1fr`: `1fr` vale `minmax(auto, 1fr)`, cioè le
   colonne non scendono sotto la larghezza del loro contenuto. Bastava la
   parola «aujourd'hui» nella casella di oggi per portare TUTTE E SETTE le
   colonne a 82px: la griglia francese chiedeva 601px dentro una scatola
   di 292 e cinque colonne finivano fuori dallo schermo. Non si vedeva
   perché `overflow-x: clip` sul documento le tagliava in silenzio — la
   larghezza della pagina restava giusta e il calendario era rotto. */
.cal__giorni, .cal__griglia { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.cal__gio { text-align: center; font-size: var(--t-xs); font-weight: 700;
            color: var(--testo-tenue); padding-bottom: .4rem; }
.cal__di { position: relative; aspect-ratio: 1; display: flex; flex-direction: column;
           text-decoration: none; cursor: pointer;
           align-items: center; justify-content: center; gap: 1px;
           border: 1px solid transparent; border-radius: var(--r-s);
           background: var(--fondo-2); font-size: var(--t-sm); font-weight: 600;
           transition: background var(--transizione), border-color var(--transizione),
                       transform var(--transizione); }
.cal__di.is-libera { background: var(--verde-tenue); color: var(--verde-cupo); border-color: #CFE0D4; }
.cal__di.is-libera:hover { background: var(--verde); color: #fff; border-color: var(--verde); transform: scale(1.04); }
.cal__di.is-libera.is-scelta { background: var(--verde-cupo); color: #fff; border-color: var(--ottone); }
.cal__di.is-occupata { background: var(--fondo-2); color: var(--bordo-forte);
                       text-decoration: line-through; cursor: not-allowed; }
.cal__di.is-passata { background: transparent; color: #CFC7BB; cursor: not-allowed; }
.cal__di.is-oggi { box-shadow: inset 0 0 0 2px var(--ottone); }
.cal__oggi { font-size: .58rem; letter-spacing: .04em; text-transform: uppercase; font-weight: 700; }
.cal__vuoto { aspect-ratio: 1; }

@media (max-width: 480px) {
  /* Su schermi stretti la casella sarebbe 33px di lato: si recupera
     spazio dal bordo interno e si tiene l'altezza a 40px, perché un
     bersaglio da 33px si sbaglia. La scritta «oggi» sparisce: il
     cerchietto d'ottone lo dice già, e la data intera resta nel nome
     accessibile del pulsante. */
  .cal { padding: var(--sp-3); }
  .cal__giorni, .cal__griglia { gap: 3px; }
  .cal__di, .cal__vuoto { aspect-ratio: auto; min-height: 40px; }
  .cal__oggi { display: none; }
}

.cal__legenda { display: flex; flex-wrap: wrap; gap: 1rem; list-style: none;
                margin: var(--sp-3) 0 0; padding: 0; font-size: var(--t-xs); color: var(--testo-tenue); }
.cal__legenda li { display: inline-flex; align-items: center; gap: .4rem; }
.pallo { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
.pallo--libera { background: var(--verde-tenue); box-shadow: inset 0 0 0 1px #CFE0D4; }
.pallo--occupata { background: var(--bordo); }

/* ── il calendario dentro il riquadro dell'eroe ──
   Stesso calendario, misure da riquadro: sta dentro una scheda bianca
   larga 392px, quindi qui non gli serve né la sua scheda né i suoi
   bordi interni — sarebbe una scatola dentro una scatola. Le caselle
   perdono il quadrato perfetto (33px di lato sarebbero un bersaglio da
   sbagliare) e tengono 38px di altezza, che è quello che ci vuole per
   far entrare sei righe di mese senza mandare i pulsanti sotto il
   bordo. */
.cal--mini { max-width: none; margin-inline: 0; padding: 0; border-radius: 0; background: none; }
.cal--mini .cal__testa { margin-bottom: .45rem; }
.cal--mini .cal__mese { font-size: var(--t-md); }
.cal--mini .cal__nav { width: 34px; height: 34px; }
.cal--mini .cal__nav svg { width: 16px; height: 16px; }
.cal--mini .cal__giorni, .cal--mini .cal__griglia { gap: 3px; }
.cal--mini .cal__gio { font-size: .68rem; padding-bottom: .2rem; }
.cal--mini .cal__di, .cal--mini .cal__vuoto { aspect-ratio: auto; min-height: 34px; }
.cal--mini .cal__di { font-size: var(--t-sm); border-radius: 6px; }
.cal--mini .cal__oggi { display: none; }
.cal--mini .cal__legenda { gap: .9rem; margin-top: .45rem; font-size: .7rem; }
.cal--mini .pallo { width: 10px; height: 10px; }

/* «Altra data» sta sotto le pastiglie con un margine negativo che le
   riavvicina; sotto il calendario quel margine tirava la riga sopra la
   legenda. Qui si azzera. */
.modulo__cal { margin-bottom: .4rem; }
.modulo__cal + .data-scelta + .date-veloci__altra,
.modulo__cal + .date-veloci__altra { margin-top: 0; }

/* La data scelta, scritta per esteso sotto il calendario, e accanto la
   via di servizio per cambiarla. È l'unico posto in cui la scelta resta
   leggibile dopo aver sfogliato il mese: la casella accesa è rimasta
   nel mese di prima. */
.scelta-riga { display: flex; align-items: center; justify-content: space-between;
               gap: .7rem; margin-bottom: var(--sp-3); min-height: 30px; }
/* Quando la data non è ancora scelta la riga ha un figlio solo, e
   `space-between` lo lasciava a sinistra: «Altra data» sembrava un
   collegamento smarrito sotto il calendario. `margin-left: auto` lo
   tiene a destra in tutti e due i casi. */
.scelta-riga .btn-testo { flex: none; margin-left: auto; }
.data-scelta {
  flex: 1 1 auto; margin: 0; padding: .35rem .65rem;
  background: var(--verde-tenue); color: var(--verde-cupo);
  border-radius: var(--r-s); font-size: var(--t-sm); font-weight: 700;
  text-align: center;
}
/* Solo la prima lettera, non ogni parola: `capitalize` scriveva
   «Martedì 1 Settembre 2026», che in italiano (e in francese, e in
   inglese sui mesi no ma sui giorni sì) non si scrive così. */
.data-scelta::first-letter { text-transform: uppercase; }


/* ══════════════════════════════════════════ modulo ═══ */

.modulo-guscio { background: var(--carta); border: 1px solid var(--bordo);
                 border-radius: var(--r-l); padding: var(--sp-5); }
.modulo__testa { margin-bottom: var(--sp-4); }
.modulo__testa .sotto { color: var(--testo-tenue); margin: 0; }
.modulo__griglia { display: grid; gap: 1rem; grid-template-columns: repeat(6, 1fr); }
.campo { display: flex; flex-direction: column; gap: .35rem; grid-column: span 6; }
@media (min-width: 640px) {
  .campo--meta  { grid-column: span 3; }
  .campo--terzo { grid-column: span 2; }
}
.campo--pieno { grid-column: span 6; }
.campo label { font-size: var(--t-sm); font-weight: 600; }
.campo input, .campo select, .campo textarea {
  width: 100%; min-height: 46px; padding: .6rem .8rem;
  background: var(--fondo); border: 1.5px solid var(--bordo);
  border-radius: var(--r-s); transition: border-color var(--transizione);
}
.campo input:focus, .campo select:focus, .campo textarea:focus { border-color: var(--verde); }
.campo textarea { min-height: 110px; resize: vertical; }
.campo--errore input, .campo--errore select, .campo--errore textarea { border-color: var(--no); }
/* Quando la zona dei campi scorre, un velo in fondo lo dice. La classe
   la mette il JavaScript solo se serve davvero: un velo dove non c'è
   niente sotto sarebbe un invito a scorrere il vuoto. */
.modulo__corpo.scorre { position: relative; }
.modulo__corpo.scorre::after {
  content: ''; position: sticky; bottom: 0; display: block; height: 26px; margin-top: -26px;
  background: linear-gradient(to top, var(--carta) 20%, transparent);
  pointer-events: none;
}

.campo__nota { margin: .3rem 0 0; font-size: var(--t-sm); font-weight: 700; color: var(--verde-cupo); }
.campo__err { color: var(--no); font-size: var(--t-xs); margin: 0; }
.campo--spunta { flex-direction: row; align-items: flex-start; gap: .6rem; flex-wrap: wrap; }
.campo--spunta input { width: 22px; min-height: 22px; height: 22px; flex: none; margin-top: .2rem; }
.campo--spunta label { font-weight: 400; font-size: var(--t-sm); color: var(--testo-tenue); }

/* Campo esca: fuori dallo schermo, non `display:none` — alcuni programmi
   riconoscono il display none e saltano il campo. */
.esca { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.modulo__nota { font-size: var(--t-xs); color: var(--testo-tenue); margin: var(--sp-3) 0 0; }
.modulo__coda { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; margin-top: var(--sp-4); }
.modulo__tel { font-size: var(--t-sm); color: var(--testo-tenue); margin: 0; }
.modulo__tel a { color: var(--verde); font-weight: 600; }

.avviso { display: flex; align-items: flex-start; gap: .6rem; padding: .95rem 1.1rem;
          border-radius: var(--r-m); font-size: var(--t-sm); margin: 0 0 var(--sp-4); }
.avviso--ok { background: var(--ok-tenue); color: #16523A; }
.avviso--no { background: var(--no-tenue); color: #7E211A; }
.avviso .icona { flex: none; margin-top: .15rem; }


/* ══════════════════════════════════════ dove siamo ═══ */

.dove { display: grid; gap: var(--sp-5); align-items: center; }
@media (min-width: 860px) { .dove { grid-template-columns: 1fr 1.15fr; gap: var(--sp-6); } }
.dove__azioni { margin-top: var(--sp-4); }

.mappa { position: relative; min-height: 300px; border-radius: var(--r-l); overflow: hidden;
         background: var(--fondo) url(../img/home3.jpeg) center/cover; }
.mappa__apri {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: .6rem;
  background: color-mix(in srgb, var(--fondo-scuro) 62%, transparent);
  color: #fff; border: 0; font-weight: 600; font-size: var(--t-sm);
}
.mappa__apri:hover { background: color-mix(in srgb, var(--fondo-scuro) 74%, transparent); }
.mappa .leaflet-container { height: 340px; border-radius: var(--r-l); }


/* ══════════════════════════════════════════ galleria ═══ */

.galleria { display: grid; gap: var(--sp-3); list-style: none; margin: 0; padding: 0;
            grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); }
.galleria__cella { margin: 0; }
.galleria__cella img { border-radius: var(--r-m); aspect-ratio: 4 / 3; object-fit: cover; width: 100%; }


/* ══════════════════════════════════════ piè di pagina ═══ */


/* ═══════════════════════════════════════ domande frequenti ═══
   `<details>` nativo: si apre da solo, il comando «trova nella pagina»
   del browser ci cerca dentro, e senza JavaScript funziona uguale. */
.faq { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--bordo); }
.faq__voce { border-bottom: 1px solid var(--bordo); }
.faq__d {
  cursor: pointer; list-style: none; display: flex; align-items: flex-start; gap: .8rem;
  padding: 1.05rem .2rem; font-family: var(--f-titoli); font-size: var(--t-md);
  color: var(--testo); transition: color var(--transizione);
}
.faq__d::-webkit-details-marker { display: none; }
.faq__d::after {
  content: ''; flex: 0 0 auto; width: 11px; height: 11px; margin: .45em 0 0 auto;
  border-right: 2px solid var(--verde); border-bottom: 2px solid var(--verde);
  transform: rotate(45deg); transition: transform var(--transizione);
}
.faq__voce details[open] .faq__d::after { transform: rotate(-135deg); }
.faq__d:hover { color: var(--verde-cupo); }
.faq__r { padding: 0 2rem .95rem .2rem; }
.faq__r p { margin: 0; color: var(--testo-tenue); max-width: 60ch; }
.faq__coda { margin-top: var(--sp-5); padding-top: var(--sp-4); border-top: 1px solid var(--bordo); }
.faq__ancora { font-family: var(--f-titoli); font-size: var(--t-md); margin: 0 0 var(--sp-3); }
.faq__azioni { display: flex; flex-wrap: wrap; gap: .8rem; margin: 0; }

.pie { background: var(--fondo-scuro); color: var(--su-scuro); padding-block: var(--sp-6) var(--sp-4);
       margin-bottom: 64px; }
.pie__griglia { display: grid; gap: var(--sp-5); }
@media (min-width: 780px) { .pie__griglia { grid-template-columns: 1.4fr 1fr 1fr; gap: var(--sp-6); } }
.pie__logo { height: 62px; width: auto; background: none; opacity: .95; }
.pie__claim { color: var(--su-scuro-ten); font-size: var(--t-sm); margin-top: var(--sp-3); }
.pie__titolo { font-size: var(--t-sm); font-family: var(--f-testo); font-weight: 700;
               letter-spacing: .1em; text-transform: uppercase; color: #fff; margin-bottom: .9rem; }
.pie__indirizzo { font-style: normal; font-size: var(--t-sm); color: var(--su-scuro-ten); }
.pie__mappa { display: inline-block; margin-top: .7rem; font-size: var(--t-sm); color: #D9B978; }
.pie__contatti { list-style: none; margin: 0 0 var(--sp-3); padding: 0; font-size: var(--t-sm); }
.pie__contatti li { display: flex; align-items: center; gap: .5rem; margin-bottom: .5rem; }
.pie__contatti a { color: var(--su-scuro); }
.pie__coda { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .8rem;
             margin-top: var(--sp-5); padding-top: var(--sp-4);
             border-top: 1px solid rgb(255 255 255 / .12);
             font-size: var(--t-xs); color: var(--su-scuro-ten); }
.pie__coda p { margin: 0; }
.pie__legale { display: flex; flex-wrap: wrap; gap: .5rem; }
.pie__legale a { color: var(--su-scuro-ten); }


/* ══════════════════════════════ barra fissa del telefono ═══ */

/* Su un affitto di sala la telefonata chiude più della posta: sul
   telefono il numero resta sempre a un pollice di distanza. */
.barra-tel {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 95;
  display: flex; gap: .6rem; padding: .6rem .8rem;
  background: color-mix(in srgb, var(--fondo) 94%, transparent);
  border-top: 1px solid var(--bordo);
}
.barra-tel::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  backdrop-filter: blur(10px); pointer-events: none;
}
.barra-tel a { flex: 1 1 auto; display: inline-flex; align-items: center; justify-content: center;
               gap: .45rem; min-height: 46px; border-radius: var(--r-tondo);
               font-size: var(--t-sm); font-weight: 600; text-decoration: none; }
.barra-tel__chiama { border: 1.5px solid var(--bordo-forte); }
.barra-tel__cta { background: var(--verde); color: #fff; }
@media (min-width: 1001px) { .barra-tel { display: none; } .pie { margin-bottom: 0; } }


/* ══════════════════════════════════════════════ stampa ═══ */

@media print {
  .testata, .barra-tel, .nav, .mappa, .modulo-guscio { display: none !important; }
  /* Sulla carta non c'è nessuno che scorre: senza questa riga tutto
     quello che non era ancora comparso si stamperebbe invisibile. */
  .entra { opacity: 1 !important; transform: none !important; }
  body { background: #fff; color: #000; }
  .eroe { min-height: auto; }
  .eroe::before, .eroe::after, .eroe__sfondo { display: none; }
  .eroe__dentro, .eroe__titolo { color: #000; }
}