/* ============================================================
   B&B San Marco — style.css
   Direzione grafica: «Cementine».
   I colori vengono dalla casa: il giallo della facciata, il carminio
   degli infissi, l'inchiostro delle cementine dei bagni, il grigio
   dei pavimenti esagonali. Fondo bianco calce, niente crema.
   Font scaricati e serviti da qui: nessuna richiesta esterna.
   ============================================================ */

@font-face{
  font-family:"Fraunces";
  src:url("/assets/fonts/fraunces.woff2") format("woff2");
  font-weight:300 700; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Fraunces";
  src:url("/assets/fonts/fraunces-italic.woff2") format("woff2");
  font-weight:300 700; font-style:italic; font-display:swap;
}
@font-face{
  font-family:"Karla";
  src:url("/assets/fonts/karla.woff2") format("woff2");
  font-weight:300 700; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Karla";
  src:url("/assets/fonts/karla-italic.woff2") format("woff2");
  font-weight:300 700; font-style:italic; font-display:swap;
}

:root{
  /* colore */
  --c-bg:#ffffff;              /* calce */
  --c-bg-alt:#ecedea;          /* pietra: il grigio dei pavimenti esagonali */
  --c-surface:#ffffff;
  --c-testo:#14140f;           /* inchiostro delle cementine */
  --c-testo-soft:#5b5b53;
  --c-bordo:#dcdcd4;
  --c-brand:#a5342e;           /* carminio degli infissi */
  --c-brand-scuro:#7d2620;
  --c-brand-chiaro:#e9b949;    /* giallo Napoli della facciata */
  --c-giallo:#e9b949;
  --c-giallo-scuro:#c9971f;
  --c-scuro:#14140f;
  --c-scuro-testo:#f6f4ee;
  --c-occupato:#9a968c;        /* non disponibile = spento, non allarme */
  --c-errore:#a5342e;
  --c-verde:#1fa855;           /* WhatsApp */
  --c-verde-scuro:#178943;

  /* tipografia */
  --font-titoli:"Fraunces",Georgia,"Times New Roman",serif;
  --font-testo:"Karla",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  --t-xs:.78rem; --t-sm:.9rem; --t-base:1.03rem; --t-lg:1.2rem;
  --t-xl:clamp(1.4rem,2.7vw,1.95rem);
  --t-2xl:clamp(1.95rem,4.4vw,3.05rem);
  --t-hero:clamp(2.35rem,5.4vw,4rem);

  /* spazio */
  --s-1:.25rem; --s-2:.5rem; --s-3:.75rem; --s-4:1rem; --s-5:1.5rem;
  --s-6:2rem; --s-7:3rem; --s-8:4.5rem; --s-9:6.5rem; --s-10:9rem;

  /* forma — la lingua è la piastrella: angoli quasi vivi */
  --r-sm:2px; --r-md:3px; --r-lg:4px; --r-full:999px;
  --ombra-1:0 1px 0 rgba(20,20,15,.06);
  --ombra-2:0 18px 50px -22px rgba(20,20,15,.28);
  --ombra-hover:0 26px 60px -26px rgba(20,20,15,.34);

  /* movimento */
  --dur-veloce:.18s; --dur-media:.42s; --ease-out:cubic-bezier(.22,.61,.36,1);

  /* layout */
  --contenitore:1180px;
  --nav-h:70px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;background:var(--c-bg);color:var(--c-testo);
  font-family:var(--font-testo);font-size:var(--t-base);line-height:1.62;
  font-synthesis-weight:none;-webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3{
  font-family:var(--font-titoli);font-weight:500;line-height:1.08;
  letter-spacing:-.015em;margin:0;font-optical-sizing:auto;
  font-variation-settings:"SOFT" 30,"WONK" 1;
}
p{margin:0 0 var(--s-4)}
ul{margin:0;padding:0;list-style:none}
::selection{background:var(--c-giallo);color:var(--c-testo)}

.contenitore{width:100%;max-width:var(--contenitore);margin-inline:auto;padding-inline:var(--s-5)}
.sezione{padding-block:var(--s-9)}
.sezione--alt{background:var(--c-bg-alt)}
@media (max-width:700px){.sezione{padding-block:var(--s-8)}}

.occhiello{
  font-size:var(--t-xs);letter-spacing:.2em;text-transform:uppercase;
  color:var(--c-brand);font-weight:700;margin:0 0 var(--s-4)
}
.titolo-sez{font-size:var(--t-2xl);max-width:20ch;margin-bottom:var(--s-4);text-wrap:balance}
.intro{color:var(--c-testo-soft);max-width:58ch;font-size:var(--t-lg)}

.skip{position:absolute;left:-999px;top:0;z-index:200;background:var(--c-testo);color:#fff;padding:var(--s-3) var(--s-4)}
.skip:focus{left:var(--s-4);top:var(--s-4)}
:focus-visible{outline:3px solid var(--c-brand);outline-offset:3px}

/* ---------- la firma della casa: la fascia di cementine ----------
   Il motivo è ricalcato dalle piastrelle dei bagni della struttura.
   Segna le soglie: sotto l'apertura e sopra il footer. Niente altrove. */
.cementine{
  height:40px;
  background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 60' fill='%2314140f'%3E%3Cpath d='M30 5c3 18 7 22 25 25-18 3-22 7-25 25-3-18-7-22-25-25 18-3 22-7 25-25z'/%3E%3Cpath d='M60 0h28L60 28zM120 0v28L92 0zM120 60H92l28-28zM60 60V32l28 28z'/%3E%3Cpath d='M150 6l9 9-9 9-9-9zM174 30l-9 9-9-9 9-9zM150 54l-9-9 9-9 9 9zM126 30l9-9 9 9-9 9zM146 26h8v8h-8z'/%3E%3Ccircle cx='210' cy='13' r='8'/%3E%3Ccircle cx='227' cy='30' r='8'/%3E%3Ccircle cx='210' cy='47' r='8'/%3E%3Ccircle cx='193' cy='30' r='8'/%3E%3Crect x='206' y='26' width='8' height='8'/%3E%3C/svg%3E") repeat-x center/auto 100%;
  opacity:.88;
}
@media (max-width:700px){.cementine{height:26px}}
/* versione su fondo inchiostro, per chiudere l'apertura */
.cementine--scura{
  background:var(--c-scuro) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 60' fill='%23f6f4ee'%3E%3Cpath d='M30 5c3 18 7 22 25 25-18 3-22 7-25 25-3-18-7-22-25-25 18-3 22-7 25-25z'/%3E%3Cpath d='M60 0h28L60 28zM120 0v28L92 0zM120 60H92l28-28zM60 60V32l28 28z'/%3E%3Cpath d='M150 6l9 9-9 9-9-9zM174 30l-9 9-9-9 9-9zM150 54l-9-9 9-9 9 9zM126 30l9-9 9 9-9 9zM146 26h8v8h-8z'/%3E%3Ccircle cx='210' cy='13' r='8'/%3E%3Ccircle cx='227' cy='30' r='8'/%3E%3Ccircle cx='210' cy='47' r='8'/%3E%3Ccircle cx='193' cy='30' r='8'/%3E%3Crect x='206' y='26' width='8' height='8'/%3E%3C/svg%3E") repeat-x center/auto 100%;
  opacity:1;
}

/* ---------- rimando alla galleria (le foto vivono lì) ---------- */
.foto-rimando{display:flex;align-items:center;justify-content:space-between;gap:var(--s-5);flex-wrap:wrap;border-top:2px solid var(--c-testo);padding-top:var(--s-5)}
.foto-rimando p{margin:0;color:var(--c-testo-soft);max-width:46ch}

/* ---------- pulsanti ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.6em;
  font-family:var(--font-testo);font-size:var(--t-sm);font-weight:700;
  letter-spacing:.02em;
  padding:.95em 1.6em;border-radius:var(--r-sm);border:1px solid transparent;
  text-decoration:none;cursor:pointer;white-space:nowrap;
  transition:transform var(--dur-veloce) var(--ease-out),background var(--dur-veloce),color var(--dur-veloce),border-color var(--dur-veloce);
}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn--wa{background:var(--c-verde);color:#fff}
.btn--wa:hover{background:var(--c-verde-scuro)}
.btn--brand{background:var(--c-testo);color:#fff}
.btn--brand:hover{background:var(--c-brand)}
.btn--linea{background:transparent;color:var(--c-testo);border-color:var(--c-testo)}
.btn--linea:hover{background:var(--c-testo);color:#fff}
.btn--grande{font-size:var(--t-base);padding:1.05em 2em}
.ico{width:1.15em;height:1.15em;flex:none;fill:currentColor}

/* ---------- nav ---------- */
.nav{
  position:sticky;top:0;z-index:100;height:var(--nav-h);
  background:rgba(255,255,255,.94);backdrop-filter:none;
  border-bottom:1px solid transparent;
  transition:border-color var(--dur-media),background var(--dur-media);
}
.nav.scrolled{border-color:var(--c-bordo);background:#fff}
.nav__in{display:flex;align-items:center;justify-content:space-between;height:var(--nav-h);gap:var(--s-4)}
.marchio{display:flex;align-items:baseline;gap:.55rem;text-decoration:none;font-family:var(--font-titoli);font-size:1.22rem;font-weight:600;letter-spacing:-.02em}
.marchio span{font-family:var(--font-testo);font-size:.66rem;letter-spacing:.22em;text-transform:uppercase;color:var(--c-testo-soft);font-weight:700}
.nav__menu{display:flex;align-items:center;gap:var(--s-6)}
.nav__menu a{text-decoration:none;font-size:var(--t-sm);font-weight:600;color:var(--c-testo-soft);position:relative;padding-block:.35em}
.nav__menu a::after{content:"";position:absolute;left:0;bottom:0;width:0;height:2px;background:var(--c-giallo);transition:width var(--dur-media) var(--ease-out)}
.nav__menu a:hover{color:var(--c-testo)}
.nav__menu a:hover::after,.nav__menu a[aria-current="page"]::after{width:100%}
.nav__menu a[aria-current="page"]{color:var(--c-testo)}
.nav__azione{display:flex;align-items:center;gap:var(--s-3)}
.burger{display:none;background:none;border:0;padding:.55rem;cursor:pointer;color:var(--c-testo)}
.burger svg{width:26px;height:26px;stroke:currentColor;stroke-width:1.6;fill:none;stroke-linecap:round}

@media (max-width:900px){
  .nav__menu{
    position:fixed;inset:var(--nav-h) 0 auto;background:var(--c-bg);
    flex-direction:column;align-items:flex-start;gap:0;padding:var(--s-4) var(--s-5) var(--s-6);
    border-bottom:1px solid var(--c-bordo);
    transform:translateY(-120%);transition:transform var(--dur-media) var(--ease-out);
  }
  .nav__menu.aperto{transform:translateY(0)}
  .nav__menu a{width:100%;padding:1rem 0;font-size:var(--t-lg);border-bottom:1px solid var(--c-bordo);color:var(--c-testo);font-family:var(--font-titoli);font-weight:500}
  .nav__menu a::after{display:none}
  .burger{display:inline-flex}
  .nav__azione .btn{display:none}
}

/* ---------- apertura SENZA FOTOGRAFIA ----------
   Le foto della struttura sono amatoriali: in apertura facevano più danno
   che altro (decisione di Domenico, 18/08). L'apertura la regge il marchio,
   e tutte le foto stanno nella galleria, per chi le vuole vedere. */
.hero{
  position:relative;isolation:isolate;overflow:hidden;
  background:var(--c-scuro);color:var(--c-scuro-testo);
  padding-block:var(--s-8) var(--s-9);
}
/* dietro l'apertura c'è la Reggia, il motivo per cui si viene qui.
   Il velo scuro tiene il campo inchiostro del progetto e la leggibilità del testo. */
.hero__sfondo{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;object-position:60% center}
.hero::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(180deg,rgba(20,20,15,.7) 0%,rgba(20,20,15,.42) 45%,rgba(20,20,15,.85) 100%),
    linear-gradient(90deg,rgba(20,20,15,.88) 0%,rgba(20,20,15,.42) 55%,rgba(20,20,15,.08) 100%);
}
/* il testo resta leggibile anche dove il velo è più chiaro */
.hero .contenitore>*{text-shadow:0 1px 24px rgba(20,20,15,.55)}
.hero__dato,.hero__punti li,.hero .btn{text-shadow:none}
@media (max-width:900px){
  .hero__sfondo{object-position:50% center}
  .hero::after{background:linear-gradient(180deg,rgba(20,20,15,.76) 0%,rgba(20,20,15,.5) 42%,rgba(20,20,15,.88) 100%)}
}
.hero>*>*{animation:sali .75s var(--ease-out) both}
.hero>*>*:nth-child(2){animation-delay:.06s}
.hero>*>*:nth-child(3){animation-delay:.12s}
.hero>*>*:nth-child(4){animation-delay:.18s}
.hero>*>*:nth-child(5){animation-delay:.24s}
.hero>*>*:nth-child(6){animation-delay:.3s}
.hero>*>*:nth-child(7){animation-delay:.36s}
@keyframes sali{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* il marchio: una cementina e il nome. Non è un logo del cliente — non ne esiste uno */
.marchio-grande{display:flex;align-items:center;gap:var(--s-4);margin-bottom:var(--s-8)}
.marchio-grande__segno{width:46px;height:46px;flex:none;fill:var(--c-giallo)}
.marchio-grande b{display:block;font-family:var(--font-titoli);font-size:1.7rem;font-weight:600;letter-spacing:-.02em;line-height:1;color:#fff}
.marchio-grande span{display:block;font-size:.64rem;letter-spacing:.24em;text-transform:uppercase;color:var(--c-giallo);font-weight:700;margin-top:.5rem}

.hero__dato{
  display:inline-flex;align-items:baseline;gap:.55em;margin:0 0 var(--s-5);
  background:var(--c-giallo);color:var(--c-testo);padding:.5rem .9rem;
}
.hero__dato b{font-family:var(--font-titoli);font-size:1.15rem;font-weight:700;line-height:1}
.hero__dato span{font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;font-weight:700}

.hero h1{font-size:var(--t-hero);max-width:16ch;margin-bottom:var(--s-5);color:#fff;text-wrap:balance}
.hero__testo{max-width:46ch;color:rgba(246,244,238,.74);margin-bottom:var(--s-5)}
.hero__cta{display:flex;flex-wrap:wrap;gap:var(--s-3);margin-bottom:var(--s-4)}
.hero .btn--linea{color:#fff;border-color:rgba(246,244,238,.45)}
.hero .btn--linea:hover{background:#fff;color:var(--c-testo);border-color:#fff}
.hero__nota{display:flex;align-items:center;gap:.6em;font-size:var(--t-sm);color:rgba(246,244,238,.68);margin-bottom:var(--s-7)}
.hero__nota::before{content:"";width:8px;height:8px;flex:none;border-radius:50%;background:var(--c-verde)}
.hero__punti{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:rgba(246,244,238,.2);border:1px solid rgba(246,244,238,.2);max-width:660px}
.hero__punti li{display:flex;align-items:center;gap:.6em;background:var(--c-scuro);padding:.9rem 1rem;font-size:var(--t-sm);font-weight:600;color:#fff}
.hero__punti .ico{color:var(--c-giallo);width:20px;height:20px}

@media (max-width:900px){
  .hero{padding-block:var(--s-7) var(--s-8)}
  .marchio-grande{margin-bottom:var(--s-6)}
  .hero__punti{grid-template-columns:1fr;max-width:none}
}

/* pagina interna: intestazione */
.testata{background:var(--c-bg-alt);padding-block:var(--s-8) var(--s-7);border-bottom:1px solid var(--c-bordo)}
.testata h1{font-size:var(--t-2xl);max-width:18ch;margin-bottom:var(--s-4);text-wrap:balance}
.testata p{color:var(--c-testo-soft);max-width:58ch;margin:0;font-size:var(--t-lg)}
.briciole{font-size:var(--t-xs);color:var(--c-testo-soft);margin-bottom:var(--s-4);letter-spacing:.08em;text-transform:uppercase;font-weight:600}
.briciole a{text-decoration:none}.briciole a:hover{text-decoration:underline}

/* ---------- i numeri della struttura ---------- */
.numeri{background:var(--c-bg-alt)}
.numeri__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;padding-block:0;background:var(--c-bordo);border-block:1px solid var(--c-bordo)}
.numeri__grid>div{background:var(--c-bg-alt);padding:var(--s-6) var(--s-4)}
.numeri__v{font-family:var(--font-titoli);font-size:clamp(1.8rem,3.8vw,2.6rem);font-weight:600;line-height:1;letter-spacing:-.02em}
.numeri__e{font-size:.68rem;letter-spacing:.14em;color:var(--c-testo-soft);margin-top:.55rem;text-transform:uppercase;font-weight:700}
@media (max-width:700px){.numeri__grid{grid-template-columns:repeat(2,1fr)}}

/* ---------- camere ---------- */
.camere{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s-6);margin-top:var(--s-7)}
@media (max-width:820px){.camere{grid-template-columns:1fr;gap:var(--s-7)}}
.camera{display:flex;flex-direction:column;background:var(--c-bg)}
.camera__foto{aspect-ratio:3/2;overflow:hidden;background:var(--c-bg-alt)}
.camera__foto img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease-out)}
.camera:hover .camera__foto img{transform:scale(1.04)}
.camera__corpo{padding:var(--s-5) 0 0;display:flex;flex-direction:column;flex:1;gap:var(--s-3);border-top:2px solid var(--c-testo);margin-top:var(--s-4)}
.camera__testa{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s-3);flex-wrap:wrap}
.camera h3{font-size:var(--t-xl);max-width:18ch}
.pill{font-size:.68rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;background:var(--c-giallo);color:var(--c-testo);padding:.4em .7em;white-space:nowrap}
.camera__d{color:var(--c-testo-soft);font-size:var(--t-sm);margin:0}
.camera__dot{display:flex;flex-wrap:wrap;gap:.4rem;font-size:var(--t-xs);color:var(--c-testo-soft)}
.camera__dot li{border:1px solid var(--c-bordo);padding:.35em .65em}
.camera__piede{margin-top:auto;padding-top:var(--s-4);display:flex;align-items:center;justify-content:space-between;gap:var(--s-3);flex-wrap:wrap}
.prezzo{font-family:var(--font-titoli);font-size:var(--t-xl);font-weight:600}
.prezzo small{font-family:var(--font-testo);font-size:var(--t-xs);color:var(--c-testo-soft);font-weight:600}
.prezzo--richiesta{font-family:var(--font-testo);font-size:var(--t-sm);color:var(--c-testo-soft)}

/* ---------- i tre passi ---------- */
.passi{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-6);margin-top:var(--s-7);counter-reset:p}
.passi--due{grid-template-columns:repeat(2,1fr)}
@media (max-width:820px){.passi{grid-template-columns:1fr;gap:var(--s-5)}}
.passo{position:relative;padding-top:var(--s-5);border-top:1px solid var(--c-bordo);counter-increment:p}
.passo::before{
  content:counter(p,decimal-leading-zero);
  font-family:var(--font-titoli);font-size:.9rem;font-weight:700;letter-spacing:.1em;
  color:var(--c-testo);background:var(--c-giallo);
  display:inline-block;padding:.25em .55em;margin-bottom:var(--s-3)
}
.passo h3{font-size:var(--t-lg);margin-bottom:var(--s-2)}
.passo p{color:var(--c-testo-soft);font-size:var(--t-sm);margin:0}

/* ---------- servizi ---------- */
.servizi{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:var(--s-4) var(--s-5);margin-top:var(--s-7)}
@media (max-width:620px){.servizi{grid-template-columns:repeat(2,1fr);gap:var(--s-4) var(--s-3)}}
.servizio{display:flex;align-items:center;gap:var(--s-3);font-size:var(--t-sm);font-weight:600;line-height:1.35}
.servizio .ico{
  width:46px;height:46px;padding:12px;flex:none;
  background:var(--c-bg);border:1px solid var(--c-bordo);color:var(--c-brand);
  transition:background var(--dur-veloce),color var(--dur-veloce)
}
.servizio:hover .ico{background:var(--c-giallo);border-color:var(--c-giallo);color:var(--c-testo)}
@media (max-width:620px){.servizio .ico{width:38px;height:38px;padding:9px}}

/* ---------- blocco foto + testo ---------- */
.split{display:grid;grid-template-columns:1.02fr .98fr;gap:var(--s-8);align-items:center}
@media (max-width:900px){.split{grid-template-columns:1fr;gap:var(--s-6)}}
.split__foto{overflow:hidden;background:var(--c-bg-alt)}
/* niente aspect-ratio forzato: le foto della struttura hanno proporzioni
   diverse (3:2 le camere, 4:3 gli ambienti) e un ritaglio fisso le tagliava male */
.split__foto img{width:100%;height:auto;display:block}

/* ---------- citazione al posto di una foto ----------
   Dove non c'è una foto che regge (la colazione non è mai stata fotografata)
   è meglio la parola di un ospite che un'immagine sbagliata. */
.citazione{background:var(--c-bg-alt);border-top:4px solid var(--c-giallo);padding:var(--s-6);margin:0}
.citazione blockquote{margin:0;font-family:var(--font-titoli);font-style:italic;font-size:var(--t-xl);line-height:1.42}
.citazione figcaption{margin-top:var(--s-5);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--c-testo-soft)}

/* ---------- elenchi con valore a destra ---------- */
.distanze{margin-top:var(--s-5);border-top:1px solid var(--c-testo)}
.distanze li{display:flex;align-items:center;gap:var(--s-4);padding:.95rem 0;border-bottom:1px solid var(--c-bordo)}
.distanze .ico{color:var(--c-brand);width:20px;height:20px}
.distanze b{font-weight:700}
.distanze span{margin-left:auto;color:var(--c-testo-soft);font-size:var(--t-sm);white-space:nowrap;font-variant-numeric:tabular-nums}

/* ---------- recensioni ---------- */
.recensioni{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-6);margin-top:var(--s-7)}
@media (max-width:900px){.recensioni{grid-template-columns:repeat(2,1fr);gap:var(--s-5)}}
@media (max-width:620px){.recensioni{grid-template-columns:1fr}}
.rec{margin:0;padding-top:var(--s-4);border-top:1px solid var(--c-bordo);display:flex;flex-direction:column;gap:var(--s-3)}
.rec__stelle{color:var(--c-giallo-scuro);font-size:var(--t-sm);letter-spacing:.16em}
.rec blockquote{margin:0;font-family:var(--font-titoli);font-style:italic;font-size:var(--t-lg);line-height:1.42}
.rec figcaption{margin-top:auto;font-size:.68rem;color:var(--c-testo-soft);letter-spacing:.14em;text-transform:uppercase;font-weight:700}

/* ---------- domande frequenti ---------- */
.faq{margin-top:var(--s-6);border-top:1px solid var(--c-testo);max-width:840px}
.faq__v{border-bottom:1px solid var(--c-bordo)}
.faq__d{
  width:100%;background:none;border:0;text-align:left;cursor:pointer;
  font-family:var(--font-titoli);font-size:var(--t-lg);font-weight:500;color:var(--c-testo);
  padding:1.25rem 2.6rem 1.25rem 0;position:relative;line-height:1.32
}
/* il segno è un + che diventa − : si capisce senza spiegazioni */
.faq__d::after{
  content:"";position:absolute;right:.6rem;top:50%;width:14px;height:2px;
  background:var(--c-brand);transform:translateY(-50%)
}
.faq__d::before{
  content:"";position:absolute;right:calc(.6rem + 6px);top:50%;width:2px;height:14px;
  background:var(--c-brand);transform:translateY(-50%);transition:transform var(--dur-media) var(--ease-out)
}
.faq__d[aria-expanded="true"]::before{transform:translateY(-50%) scaleY(0)}
.faq__d:hover{color:var(--c-brand)}
.faq__r{display:grid;grid-template-rows:0fr;transition:grid-template-rows var(--dur-media) var(--ease-out)}
.faq__v.aperta .faq__r{grid-template-rows:1fr}
.faq__r>div{overflow:hidden}
.faq__r p{color:var(--c-testo-soft);padding-bottom:1.25rem;margin:0;max-width:68ch}

/* ---------- galleria ---------- */
.galleria{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s-3);margin-top:var(--s-7)}
@media (max-width:900px){.galleria{grid-template-columns:repeat(3,1fr)}}
@media (max-width:600px){.galleria{grid-template-columns:repeat(2,1fr);gap:var(--s-2)}}
.galleria button{padding:0;border:0;background:var(--c-bg-alt);cursor:zoom-in;overflow:hidden;display:block;aspect-ratio:4/3}
.galleria img{width:100%;height:100%;object-fit:cover;transition:transform var(--dur-media) var(--ease-out)}
.galleria button:hover img{transform:scale(1.06)}

.lightbox{position:fixed;inset:0;z-index:300;background:rgba(16,16,12,.95);display:none;align-items:center;justify-content:center;padding:var(--s-5)}
.lightbox.aperta{display:flex}
.lightbox img{max-width:min(1100px,94vw);max-height:86vh;width:auto}
.lightbox__x,.lightbox__n{position:absolute;background:rgba(255,255,255,.12);border:0;color:#fff;width:48px;height:48px;cursor:pointer;font-size:1.4rem;line-height:1;display:grid;place-items:center;transition:background var(--dur-veloce)}
.lightbox__x:hover,.lightbox__n:hover{background:var(--c-giallo);color:var(--c-testo)}
.lightbox__x{top:var(--s-5);right:var(--s-5)}
.lightbox__n--p{left:var(--s-4);top:50%;transform:translateY(-50%)}
.lightbox__n--s{right:var(--s-4);top:50%;transform:translateY(-50%)}

/* ---------- la banda gialla prima del footer ----------
   È l'unico campo di colore pieno del sito: sta lì e basta. */
.banda{background:var(--c-giallo);color:var(--c-testo);text-align:center}
.banda .occhiello{color:var(--c-brand-scuro)}
.banda .titolo-sez{margin-inline:auto;max-width:18ch}
.banda p{color:rgba(20,20,15,.78);max-width:54ch;margin-inline:auto}
.banda .btn--wa{background:var(--c-testo);color:#fff}
.banda .btn--wa:hover{background:#000}
.banda .btn--linea{color:var(--c-testo);border-color:rgba(20,20,15,.45)}
.banda .btn--linea:hover{background:var(--c-testo);color:var(--c-giallo);border-color:var(--c-testo)}
.banda__cta{display:flex;gap:var(--s-3);justify-content:center;flex-wrap:wrap;margin-top:var(--s-6)}

/* ---------- mappa ---------- */
.mappa{position:relative;overflow:hidden;border:1px solid var(--c-bordo);background:var(--c-bg-alt);aspect-ratio:16/10;display:grid;place-items:center;text-align:center;padding:var(--s-5)}
.mappa iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.mappa__ph{max-width:34ch}
.mappa__ph p{color:var(--c-testo-soft);font-size:var(--t-sm)}

/* ---------- footer ---------- */
.footer{background:var(--c-scuro);color:var(--c-scuro-testo);padding-block:var(--s-8) var(--s-5);font-size:var(--t-sm)}
.footer__grid{display:grid;grid-template-columns:1.7fr 1fr 1fr 1fr;gap:var(--s-6)}
@media (max-width:900px){.footer__grid{grid-template-columns:1fr 1fr;gap:var(--s-6) var(--s-5)}}
@media (max-width:560px){.footer__grid{grid-template-columns:1fr}}
.footer h3{font-family:var(--font-testo);font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;color:var(--c-giallo);margin-bottom:var(--s-4);font-weight:700}
.footer li{margin-bottom:.55rem;color:rgba(246,244,238,.72)}
.footer a{text-decoration:none;color:rgba(246,244,238,.72)}
.footer a:hover{color:var(--c-giallo)}
.footer__marchio{font-family:var(--font-titoli);font-size:1.45rem;font-weight:600;margin-bottom:var(--s-3)}
.footer__intro{color:rgba(246,244,238,.72);max-width:34ch}
.footer__legale{
  margin-top:var(--s-7);padding-top:var(--s-4);border-top:1px solid rgba(246,244,238,.16);
  display:flex;justify-content:space-between;gap:var(--s-3) var(--s-5);flex-wrap:wrap;
  font-size:var(--t-xs);color:rgba(246,244,238,.55)
}
.cin{font-variant-numeric:tabular-nums;letter-spacing:.02em}
.credit{font-size:var(--t-xs);color:rgba(246,244,238,.55);margin:0}
.credit a{color:rgba(246,244,238,.75);text-decoration:underline;text-underline-offset:2px}
.credit a:hover{color:var(--c-giallo)}

/* ---------- barra contatti su telefono ---------- */
.barra{
  position:fixed;left:0;right:0;bottom:0;z-index:90;display:none;gap:1px;
  background:var(--c-testo);border-top:1px solid var(--c-testo);
  padding-bottom:env(safe-area-inset-bottom);
}
.barra a{flex:1;display:flex;align-items:center;justify-content:center;gap:.5em;padding:1rem;background:var(--c-bg);text-decoration:none;font-size:var(--t-sm);font-weight:700}
.barra a.wa{background:var(--c-verde);color:#fff}
@media (max-width:820px){
  .barra{display:flex}
  body{padding-bottom:62px}
  /* la barra contatti è fissa: senza questo copriva l'ultima riga del footer */
  .footer{padding-bottom:calc(var(--s-6) + 62px)}
}

/* ---------- avviso cookie: una riga sola, si chiude con la × ---------- */
.cookie{
  position:fixed;left:0;right:0;bottom:0;z-index:95;
  background:var(--c-scuro);color:rgba(246,244,238,.9);
  padding:.6rem var(--s-5);display:none;gap:var(--s-4);
  align-items:center;justify-content:center;font-size:var(--t-xs);line-height:1.35
}
.cookie.visibile{display:flex}
.cookie p{margin:0}
.cookie a{color:#fff;text-decoration:underline;text-underline-offset:2px}
.cookie__x{background:none;border:0;color:inherit;font-size:1.15rem;line-height:1;cursor:pointer;padding:.15rem .35rem;opacity:.7}
.cookie__x:hover{opacity:1;color:var(--c-giallo)}
@media (max-width:820px){.cookie{bottom:62px}}
@media (max-width:520px){.cookie{gap:var(--s-3);padding-inline:var(--s-4)}}

/* ---------- comparsa allo scorrimento ---------- */
.reveal{opacity:0;transform:translateY(16px);transition:opacity .8s var(--ease-out),transform .8s var(--ease-out)}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  .btn:hover,.camera:hover .camera__foto img{transform:none}
  .hero__foto img,.hero__pannello>*{animation:none}
}

/* ---------- pagine di testo e 404 ---------- */
.prosa{max-width:70ch}
.prosa h2{font-size:var(--t-xl);margin-top:var(--s-7);margin-bottom:var(--s-3)}
.prosa h2:first-child{margin-top:0}
.prosa p{color:var(--c-testo-soft)}
.prosa strong{color:var(--c-testo)}
.prosa a{color:var(--c-brand)}
.centrata{text-align:center;padding-block:var(--s-10)}
.centrata h1{font-size:var(--t-2xl);margin-bottom:var(--s-4);text-wrap:balance}
.centrata .intro{margin-inline:auto}

/* ============================================================
   DISPONIBILITÀ E PREVENTIVO
   ============================================================ */
.prenota{display:grid;grid-template-columns:1.12fr .88fr;gap:var(--s-6);margin-top:var(--s-6);align-items:start}
@media (max-width:900px){.prenota{grid-template-columns:1fr}}

.scelta-camera{display:flex;gap:0;flex-wrap:wrap;margin-bottom:var(--s-5);border:1px solid var(--c-testo);width:fit-content;max-width:100%}
.scelta-camera button{
  font:inherit;font-size:var(--t-sm);font-weight:700;cursor:pointer;
  background:var(--c-bg);color:var(--c-testo-soft);
  border:0;padding:.85em 1.3em;
  transition:background var(--dur-veloce),color var(--dur-veloce)
}
.scelta-camera button+button{border-left:1px solid var(--c-testo)}
.scelta-camera button:hover{color:var(--c-testo)}
.scelta-camera button[aria-pressed="true"]{background:var(--c-testo);color:var(--c-bg)}
@media (max-width:520px){
  .scelta-camera{width:100%}
  .scelta-camera button{flex:1;padding:.85em .6em;font-size:var(--t-xs)}
}

.cal{background:var(--c-bg);border:1px solid var(--c-testo);padding:var(--s-5)}
.cal__testa{display:flex;align-items:center;justify-content:space-between;gap:var(--s-3);margin-bottom:var(--s-4)}
.cal__mese{font-family:var(--font-titoli);font-size:var(--t-xl);font-weight:600;text-transform:capitalize}
.cal__freccia{
  width:40px;height:40px;border:1px solid var(--c-bordo);background:var(--c-bg);
  font-size:1.2rem;line-height:1;cursor:pointer;color:var(--c-testo);display:grid;place-items:center;
  transition:border-color var(--dur-veloce),background var(--dur-veloce)
}
.cal__freccia:hover:not(:disabled){border-color:var(--c-testo);background:var(--c-giallo)}
.cal__freccia:disabled{opacity:.28;cursor:default}
.cal__giorni,.cal__celle{display:grid;grid-template-columns:repeat(7,1fr);gap:3px}
.cal__giorni{margin-bottom:6px}
.cal__giorni span{text-align:center;font-size:.66rem;color:var(--c-testo-soft);font-weight:700;letter-spacing:.1em;text-transform:uppercase}
.cal__celle button,.cal__celle .vuota{aspect-ratio:1;display:grid;place-items:center;font-size:var(--t-sm)}
.cal__celle button{
  font-family:var(--font-testo);font-weight:600;border:1px solid var(--c-bordo);background:var(--c-bg);
  color:var(--c-testo);cursor:pointer;position:relative;
  transition:background var(--dur-veloce),color var(--dur-veloce),border-color var(--dur-veloce)
}
/* il :not(.sel) serve: senza, passando il mouse su una data già scelta sembrava deselezionata */
.cal__celle button:hover:not(:disabled):not(.occupata):not(.sel){border-color:var(--c-testo);background:var(--c-giallo)}
.cal__celle button:disabled{opacity:.3;cursor:default;border-color:transparent;background:transparent}
.cal__celle button.occupata{
  color:#fff;border-color:transparent;text-decoration:none;
  background:repeating-linear-gradient(135deg,var(--c-occupato) 0 5px,#a8a49b 5px 10px)
}
.cal__celle button.occupata.solo-uscita{box-shadow:inset 0 0 0 2px var(--c-testo)}
.cal__celle button.sel{background:var(--c-testo);border-color:var(--c-testo);color:#fff;font-weight:700}
.cal__celle button.intervallo,.cal__celle button.anteprima{background:var(--c-giallo);border-color:var(--c-giallo);color:var(--c-testo)}
.cal__celle button.anteprima{opacity:.6}
.cal__legenda{display:flex;flex-wrap:wrap;gap:var(--s-2) var(--s-4);margin-top:var(--s-4);font-size:var(--t-xs);color:var(--c-testo-soft)}
.cal__legenda span{display:flex;align-items:center;gap:.45em}
.cal__legenda i{width:13px;height:13px;display:inline-block}
.cal__nota{font-size:var(--t-xs);color:var(--c-testo-soft);margin:var(--s-3) 0 0;line-height:1.5}

.riepilogo{background:var(--c-scuro);color:var(--c-scuro-testo);padding:var(--s-5);position:sticky;top:calc(var(--nav-h) + var(--s-4))}
@media (max-width:900px){.riepilogo{position:static}}
.riepilogo h3{font-size:var(--t-xl);margin-bottom:var(--s-4);color:#fff}
.riepilogo__riga{display:flex;justify-content:space-between;gap:var(--s-3);padding:.65rem 0;border-bottom:1px solid rgba(246,244,238,.14);font-size:var(--t-sm)}
.riepilogo__riga b{font-weight:700}
.riepilogo__riga span{color:rgba(246,244,238,.68);text-align:right}
.riepilogo__tot{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s-3);margin-top:var(--s-4);padding-top:var(--s-4);border-top:1px solid rgba(246,244,238,.3)}
.riepilogo__tot b{font-family:var(--font-titoli);font-size:1.9rem;font-weight:600;color:var(--c-giallo)}
.riepilogo__vuoto{color:rgba(246,244,238,.68);font-size:var(--t-sm);margin:0}
.riepilogo .btn{width:100%;margin-top:var(--s-4)}
.riepilogo__avviso{
  background:rgba(233,185,73,.14);border-left:3px solid var(--c-giallo);
  padding:.65rem .85rem;font-size:var(--t-xs);margin-top:var(--s-3);color:#fff
}

.ospiti{display:flex;align-items:center;justify-content:space-between;gap:var(--s-3);margin-top:var(--s-4);padding-top:var(--s-4);border-top:1px solid rgba(246,244,238,.14)}
.ospiti__c{display:flex;align-items:center;gap:.9rem}
.ospiti__c button{
  width:36px;height:36px;border:1px solid rgba(246,244,238,.34);background:transparent;
  color:inherit;font-size:1.1rem;line-height:1;cursor:pointer;display:grid;place-items:center;
  transition:background var(--dur-veloce),color var(--dur-veloce)
}
.ospiti__c button:hover:not(:disabled){background:var(--c-giallo);color:var(--c-testo);border-color:var(--c-giallo)}
.ospiti__c button:disabled{opacity:.3;cursor:default}
.ospiti__c output{min-width:1.5ch;text-align:center;font-family:var(--font-titoli);font-size:1.35rem;font-weight:600}