/* ============================================================
   Rialto — identità visiva
   L'impianto resta quello che gli ospiti conoscono (scheda di
   prenotazione a lato, calendario, recensioni), ma la pelle è
   nostra: verde laguna, carta calda, ottone, serif.
   Niente rosso corallo, niente stelle nere, niente pillole:
   sono le firme di Airbnb e qui non c'entrano.
   ============================================================ */

:root {
  /* Provenza: oliva, terracotta, argilla, crema. Colori di
     intonaco scolorito dal sole, non di interfaccia. */
  /* Verde persiana: campionato dalle imposte nella foto dell'hero
     (#2d3f38 di media), alzato di un gradino perché il valore grezzo
     a schermo leggerebbe come antracite anziché come verde. */
  --accent:       #38594b;
  --accent-dark:  #2a443a;
  --accent-wash:  #edf1ee;
  --accent-soft:  #a8c0b3;

  --clay:       #a85a33;     /* terracotta — i dettagli caldi */
  --clay-wash:  #f4e9d9;   /* ocra chiaro: la terracotta pura virava al rosa */
  --lavender:   #8d86a8;     /* un tocco, usato con parsimonia */

  /* inchiostro: terra d'ombra, mai nero */
  --ink:        #2a2520;
  --ink-2:      #6d6353;
  /* Tenuto sopra 4,5:1 anche sulla fascia sabbia: lo usano
     etichette e note da 10-13px, che sono testo a tutti gli effetti. */
  --ink-3:      #6b604d;
  --ink-off:    rgba(42, 37, 32, .26);

  /* superfici: calce e lino */
  --paper:   #faf6ec;
  --white:   #fffdf8;
  --sand:    #f2ebda;
  --sand-2:  #e8dfca;
  --border:  #d8cdb4;
  --divider: #eae2d0;

  --gold: #a9762f;   /* miele: stelle e dettagli */

  /* ombre calde, come di sole basso */
  --sh-card:  rgba(76, 58, 36, .06) 0 2px 5px, rgba(76, 58, 36, .07) 0 10px 26px;
  --sh-hover: rgba(76, 58, 36, .12) 0 6px 22px;

  /* angoli morbidi: niente spigoli, ma nemmeno pillole */
  --r-sm:  9px;
  --r-md:  15px;
  --r-lg:  20px;
  --r-pill: 999px;

  --serif: 'Fraunces', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
  --sans:  'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  --ease: cubic-bezier(.22, 1, .36, 1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.68;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: inherit; }

/* Marmorino: l'intonaco lucido veneziano ha due cose insieme, una
   nuvolatura ampia e irregolare e una grana finissima sotto. Qui sono
   due strati SVG inline, nessun file da scaricare, nessun clic
   intercettato. Il multiply li fa sembrare dentro la superficie
   invece che appoggiati sopra. */
body::before {
  content: '';
  position: fixed; inset: 0; z-index: 1;
  pointer-events: none;
  mix-blend-mode: multiply;
  opacity: .5;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='620' height='620'%3E%3Cfilter id='m'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.009' numOctaves='4' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='620' height='620' filter='url(%23m)' opacity='.3'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='170' height='170'%3E%3Cfilter id='t'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='170' height='170' filter='url(%23t)' opacity='.08'/%3E%3C/svg%3E");
  background-size: 620px 620px, 170px 170px;
}

.wrap { width: min(1160px, 100% - 3rem); margin-inline: auto; }
@media (max-width: 744px) { .wrap { width: calc(100% - 2.2rem); } }

.rule { height: 1px; background: var(--divider); border: 0; margin: 3rem 0; }
.band-sand { background: var(--sand); }

/* ============================================================
   Tipografia
   ============================================================ */
h1, h2, h3, h4 { margin: 0; }

.d-1 {
  font-family: var(--serif); font-weight: 600;
  font-size: clamp(2.1rem, 5vw, 3.4rem); line-height: 1.08;
  letter-spacing: -.02em;
  font-variation-settings: 'SOFT' 90, 'WONK' 1, 'opsz' 40;
}
.d-2 {
  font-family: var(--serif); font-weight: 600;
  font-size: clamp(1.5rem, 2.6vw, 2rem); line-height: 1.18; letter-spacing: -.012em;
  font-variation-settings: 'SOFT' 80, 'WONK' 1, 'opsz' 24;
}
.d-3 {
  font-family: var(--serif); font-weight: 600;
  font-size: 1.25rem; line-height: 1.25; letter-spacing: -.005em;
  font-variation-settings: 'SOFT' 80, 'WONK' 1;
}

.t-lead    { font-size: 1.06rem; line-height: 1.65; color: var(--ink-2); }
.t-ui      { font-size: 16px; font-weight: 600; line-height: 1.35; }
.t-body    { font-size: 15px; font-weight: 400; line-height: 1.6; }
.t-small   { font-size: 13px; font-weight: 500; line-height: 1.45; }
.t-eyebrow {
  font-size: 11px; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: var(--ink-3);
}
.muted { color: var(--ink-2); }

/* ============================================================
   Bottoni
   ============================================================ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font-family: inherit; font-size: 15px; font-weight: 700; line-height: 1.2;
  padding: 14px 24px; border-radius: var(--r-sm); border: 0; cursor: pointer;
  text-decoration: none;
  transition: background .18s var(--ease), box-shadow .18s var(--ease), transform .12s var(--ease), color .18s var(--ease);
}
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--accent-soft); }

.btn-accent { background: var(--accent); color: #fff; }
.btn-accent:hover:not(:disabled) { background: var(--accent-dark); box-shadow: var(--sh-hover); }
.btn-accent:disabled { background: var(--sand-2); color: var(--ink-off); cursor: not-allowed; }

.btn-outline { background: transparent; color: var(--ink); border: 1px solid var(--border); }
.btn-outline:hover { border-color: var(--ink); background: var(--sand); }

.btn-light { background: rgba(255,255,255,.92); color: var(--ink); backdrop-filter: blur(6px); }
.btn-light:hover { background: #fff; box-shadow: var(--sh-hover); }

.btn-block { width: 100%; padding: 16px 24px; font-size: 16px; }

.btn-round {
  width: 42px; height: 42px; padding: 0; border-radius: 50%;
  background: var(--white); color: var(--ink); border: 1px solid var(--border);
  display: inline-grid; place-items: center; cursor: pointer; font-size: 16px;
  transition: box-shadow .18s var(--ease), background .18s var(--ease), transform .12s var(--ease);
}
.btn-round:hover:not(:disabled) { box-shadow: var(--sh-hover); border-color: var(--ink-3); }
.btn-round:active:not(:disabled) { transform: scale(.94); }
.btn-round:disabled { opacity: .32; cursor: not-allowed; }

.link-underline {
  background: none; border: 0; padding: 0; cursor: pointer; font-family: inherit;
  font-size: 13px; font-weight: 600; color: var(--ink-2);
  text-decoration: underline; text-underline-offset: 3px;
}
.link-underline:hover { color: var(--ink); }

/* ============================================================
   Intestazione — trasparente sull'hero, poi bianca
   ============================================================ */
.hdr {
  position: fixed; top: 0; left: 0; right: 0; z-index: 60;
  transition: background .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
  border-bottom: 1px solid transparent;
}
.hdr-inner { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; height: 76px; }

.hdr.is-stuck {
  background: rgba(255, 255, 255, .94);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-bottom-color: var(--divider);
}

.brand { display: inline-flex; align-items: center; gap: .7rem; text-decoration: none; }
/* Monogramma inciso, non una piastrella piena: il badge quadrato
   colorato è uno dei tratti più riconoscibili di Airbnb. */
.brand-mark {
  width: 34px; height: 34px; border-radius: 2px; flex: 0 0 auto;
  background: transparent; color: var(--accent);
  border: 1px solid currentColor;
  display: grid; place-items: center;
  font-family: var(--serif); font-weight: 600; font-size: 15px;
}
.brand b {
  font-family: var(--serif); font-weight: 600; font-size: 19px;
  letter-spacing: .01em;
}

.hdr-nav { display: flex; align-items: center; gap: .2rem; }
.hdr-nav a {
  font-size: 14px; font-weight: 600; text-decoration: none;
  padding: .55rem .85rem; border-radius: var(--r-sm);
  transition: background .18s var(--ease);
}
.hdr-nav .btn { margin-left: .7rem; }
@media (max-width: 900px) { .hdr-nav a:not(.btn) { display: none; } }

/* Su schermo stretto il nome andava a capo e finiva contro il pulsante. */
@media (max-width: 480px) {
  .brand { gap: .5rem; }
  .brand b { font-size: 16px; white-space: nowrap; }
  .brand-mark { width: 29px; height: 29px; font-size: 13px; }
  .hdr-nav .btn { padding: 12px 16px; font-size: 14px; }
}

/* varianti su hero scuro */
.hdr:not(.is-stuck) .brand b,
.hdr:not(.is-stuck) .hdr-nav a:not(.btn) { color: #fff; }
/* Sopra la foto il monogramma diventa bianco: in oliva spariva nel cielo. */
.hdr:not(.is-stuck) .brand-mark {
  background: rgba(255, 255, 255, .14);
  color: #fff; border-color: rgba(255, 255, 255, .75);
  backdrop-filter: blur(4px);
}
.hdr:not(.is-stuck) .hdr-nav a:not(.btn):hover { background: rgba(255,255,255,.16); }
.hdr.is-stuck .brand b, .hdr.is-stuck .hdr-nav a:not(.btn) { color: var(--ink); }
.hdr.is-stuck .hdr-nav a:not(.btn):hover { background: var(--sand); }

/* ============================================================
   Hero a tutta pagina
   ============================================================ */
.hero { position: relative; min-height: 76vh; display: flex; align-items: flex-end; overflow: hidden; }
@media (max-width: 744px) { .hero { min-height: 82vh; } }

.hero-img { position: absolute; inset: 0; }
.hero-img img { width: 100%; height: 100%; object-fit: cover; }
.hero-img::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg,
    rgba(58, 38, 20, .42) 0%,
    rgba(58, 38, 20, .08) 34%,
    rgba(52, 34, 18, .30) 62%,
    rgba(40, 26, 14, .76) 100%);
}

.hero-body { position: relative; padding: 0 0 clamp(2.5rem, 6vw, 4.5rem); color: #fff; width: 100%; }
.hero-body .t-eyebrow { color: rgba(255,255,255,.82); margin-bottom: .9rem; }
.hero-body h1 { color: #fff; max-width: 17ch; text-shadow: 0 2px 24px rgba(0,0,0,.28); }

.hero-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .9rem;
  margin-top: 1.4rem; font-size: 14px; font-weight: 600; color: rgba(255,255,255,.94);
}
.hero-meta .sep { opacity: .5; }
.hero-actions { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 2rem; }

.star { display: inline-flex; align-items: center; gap: .32rem; font-weight: 700; }
.star svg { width: 14px; height: 14px; fill: var(--gold); flex: 0 0 auto; }
.hero-meta .star svg { fill: #ffffff; }

/* ============================================================
   Striscia dei numeri
   ============================================================ */
.facts { background: var(--sand); border-top: 1px solid var(--divider); border-bottom: 1px solid var(--divider); }
.facts-grid { display: grid; grid-template-columns: repeat(5, 1fr); }
@media (max-width: 860px) { .facts-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 520px) { .facts-grid { grid-template-columns: repeat(2, 1fr); } }
.fact { padding: 1.6rem .6rem; text-align: center; border-right: 1px solid var(--divider); }
.fact:last-child { border-right: 0; }
.fact b { display: block; font-family: var(--serif); font-weight: 600; font-size: 1.7rem; line-height: 1; }
.fact span { display: block; margin-top: .45rem; font-size: 12px; font-weight: 600; color: var(--ink-3); letter-spacing: .04em; }
@media (max-width: 860px) { .fact:nth-child(3n) { border-right: 0; } }
@media (max-width: 520px) { .fact:nth-child(2n) { border-right: 0; } }

/* ============================================================
   Corpo: contenuto + scheda prenotazione
   ============================================================ */
.body-grid { display: grid; grid-template-columns: 1fr 380px; gap: 4.5rem; padding: 3.5rem 0; align-items: start; }
@media (max-width: 1128px) { .body-grid { grid-template-columns: 1fr 340px; gap: 3rem; } }
@media (max-width: 950px)  { .body-grid { grid-template-columns: 1fr; gap: 2.4rem; } }

.host-row { display: flex; align-items: center; gap: 1rem; }
.host-avatar {
  width: 52px; height: 52px; border-radius: 50%; flex: 0 0 auto;
  background: var(--accent-wash); color: var(--accent);
  display: grid; place-items: center; font-family: var(--serif); font-weight: 600; font-size: 20px;
  border: 1px solid var(--accent-soft);
}

.highlights { display: grid; gap: 1.6rem; }
.highlight { display: flex; gap: 1.05rem; align-items: flex-start; }
.highlight .ico {
  width: 46px; height: 46px; border-radius: 14px 11px 13px 10px; flex: 0 0 auto;
  background: var(--clay-wash); display: grid; place-items: center;
}
.highlight svg { width: 22px; height: 22px; stroke: var(--clay); fill: none; stroke-width: 1.6; }
.highlight h4 { font-size: 16px; font-weight: 700; }
.highlight p { margin: .25rem 0 0; font-size: 14px; color: var(--ink-2); }

.amenities { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem 2rem; padding: 0; margin: 0; list-style: none; }
@media (max-width: 550px) { .amenities { grid-template-columns: 1fr; } }
.amenities li { display: flex; align-items: center; gap: .9rem; font-size: 15px; padding: .35rem 0; }
.amenities svg { width: 21px; height: 21px; flex: 0 0 auto; stroke: var(--clay); fill: none; stroke-width: 1.5; }

.rooms { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; }
.room {
  border: 1px solid var(--border); border-radius: var(--r-md);
  padding: 1.25rem; background: var(--white); transition: box-shadow .2s var(--ease), border-color .2s var(--ease);
}
.room:hover { box-shadow: var(--sh-card); border-color: transparent; }
.room svg { width: 24px; height: 24px; stroke: var(--clay); fill: none; stroke-width: 1.5; margin-bottom: .8rem; }
.room h4 { font-size: 15px; font-weight: 700; margin-bottom: .2rem; }
.room p { margin: 0; font-size: 14px; color: var(--ink-2); }

/* ============================================================
   Scheda prenotazione
   ============================================================ */
.book-card {
  border-radius: var(--r-lg); background: var(--white); border: 1px solid var(--divider);
  box-shadow: var(--sh-card); padding: 1.6rem;
}
@media (min-width: 951px) { .book-card { position: sticky; top: 96px; } }

.book-top { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: 1.3rem; }
.book-price b { font-family: var(--serif); font-weight: 600; font-size: 1.6rem; letter-spacing: -.01em; }
.book-price span { font-size: 14px; color: var(--ink-2); }

.date-box { border: 1px solid var(--border); border-radius: var(--r-sm); overflow: hidden; margin-bottom: 1rem; }
.date-row { display: grid; grid-template-columns: 1fr 1fr; }
.date-cell { padding: 11px 13px; border-right: 1px solid var(--border); }
.date-cell:last-child { border-right: 0; }
.date-cell span { display: block; font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.date-cell strong { display: block; font-size: 14px; font-weight: 600; margin-top: 3px; }
.date-guests { border-top: 1px solid var(--border); padding: 7px 13px 9px; }
.date-guests label { display: block; font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.date-guests select {
  width: 100%; border: 0; background: transparent; font-family: inherit;
  font-size: 14px; font-weight: 600; color: var(--ink); padding: 2px 0; cursor: pointer;
}
.date-guests select:focus { outline: none; }

.field { margin-bottom: .85rem; }
.field label { display: block; font-size: 12px; font-weight: 700; color: var(--ink-2); margin-bottom: .35rem; }
.field input, .field textarea, .field select {
  width: 100%; font-family: inherit; font-size: 14px; color: var(--ink);
  background: var(--white); border: 1px solid var(--border); border-radius: var(--r-sm);
  padding: 11px 12px; transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none; border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink);
}
.field textarea { resize: vertical; min-height: 60px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.price-lines { margin-top: 1.3rem; }
.price-line { display: flex; justify-content: space-between; gap: 1rem; margin-bottom: .7rem; font-size: 15px; }
.price-line span:first-child { color: var(--ink-2); }
.price-line.total {
  border-top: 1px solid var(--divider); margin-top: 1.1rem; padding-top: 1.1rem; font-weight: 700;
}
.price-line.total span:first-child { color: var(--ink); }
.price-line.deposit span { color: var(--accent); font-weight: 700; }
.price-line.discount span { color: #4a7a52; font-weight: 600; }
.price-note { font-size: 12px; color: var(--ink-3); text-align: center; margin: .9rem 0 0; }
.summary-empty { font-size: 14px; color: var(--ink-2); margin: 0; text-align: center; }

.notice { border-radius: var(--r-sm); padding: .75rem .9rem; font-size: 14px; margin-bottom: 1rem; }
.notice-error { background: #fdf4f1; border: 1px solid #e5b8a6; color: #9c3b1b; }
.notice-info  { background: var(--sand); border: 1px solid var(--border); color: var(--ink-2); }
.notice-ok    { background: #f4fbf5; border: 1px solid #b9dcbc; color: #1e7a25; }

.is-loading { opacity: .45; pointer-events: none; }

/* ============================================================
   Galleria sfogliabile
   Una foto per volta, frecce avanti e indietro. La fascia è un
   contenitore con scroll-snap: col dito si scorre da sola, le
   frecce non fanno altro che scorrerla di una schermata.
   Le immagini sono `contain` e non `cover` perché hanno formati
   diversi — orizzontali 3:2 e 4:3, verticali 3:4 — e ritagliarle
   era l'errore di prima.
   ============================================================ */
/* Il riquadro è volutamente stretto e alto: con foto che vanno dal 3:2
   orizzontale al 3:4 verticale non esiste una forma che le contenga
   tutte piene, ma un rapporto intorno a 1,4 le avvicina quasi tutte ai
   bordi invece di lasciare mezzo riquadro vuoto. */
.viewer {
  position: relative;
  --stage: clamp(300px, 62vh, 540px);
  max-width: 760px;
  margin-inline: auto;
}

.viewer-track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  /* Niente scroll-behavior: smooth. Con lo snap obbligatorio
     l'animazione in certi browser non parte affatto e la fascia resta
     ferma mentre il contatore avanza — si vedrebbe il numero cambiare
     senza che cambi la foto. Lo scatto immediato invece si muove
     sempre. Lo scorrimento col dito conserva comunque il suo slancio
     naturale, che lo gestisce il browser. */
  scrollbar-width: none;
  -ms-overflow-style: none;
  border-radius: var(--r-md);
}

/* La dissolvenza dà il senso del passaggio senza dipendere
   dall'animazione dello scorrimento. */
.viewer-ph img { transition: opacity .35s var(--ease); }
.viewer-track.is-changing .viewer-ph img { opacity: .55; }
@media (prefers-reduced-motion: reduce) {
  .viewer-ph img { transition: none; }
  .viewer-track.is-changing .viewer-ph img { opacity: 1; }
}
.viewer-track::-webkit-scrollbar { display: none; }
.viewer-track:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }

.viewer-slide { flex: 0 0 100%; scroll-snap-align: start; margin: 0; }

/* Nessuno sfondo sul riquadro: con foto orizzontali e verticali insieme
   una cornice fissa resterebbe mezza vuota sulle verticali. Così c'è
   solo la foto, alta sempre uguale, appoggiata sulla fascia sabbia. */
.viewer-ph {
  height: var(--stage);
  display: flex; align-items: center; justify-content: center;
}
/* max-height invece di height:100%: la percentuale non si risolveva
   contro il riquadro e l'immagine ripiegava sull'altezza naturale,
   debordando — si vedeva solo la parte alta della foto. */
.viewer-ph img {
  width: auto; height: auto;
  max-width: 100%; max-height: 100%;
  border-radius: var(--r-md);
  box-shadow: var(--sh-card);
}

.viewer-slide figcaption { padding: .95rem .2rem 0; text-align: center; }
.viewer-slide figcaption b {
  display: block; font-family: var(--serif); font-weight: 600;
  font-size: 1.1rem; line-height: 1.25; letter-spacing: -.005em;
  font-variation-settings: 'SOFT' 80, 'WONK' 1;
}
.viewer-slide figcaption span {
  display: block; font-size: 13.5px; line-height: 1.5;
  color: var(--ink-2); margin-top: .2rem;
}

.viewer-arrow {
  position: absolute; top: calc(var(--stage) / 2);
  transform: translateY(-50%);
  z-index: 2;
  background: rgba(255, 253, 248, .93);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  box-shadow: var(--sh-card);
}
.viewer-prev { left: .75rem; }
.viewer-next { right: .75rem; }
@media (max-width: 600px) {
  .viewer-prev { left: .4rem; }
  .viewer-next { right: .4rem; }
}

/* Su telefono lo schermo è stretto e alto: con un riquadro alto le foto
   orizzontali resterebbero una striscia in mezzo a due fasce vuote. */
@media (max-width: 600px) {
  .viewer { --stage: clamp(230px, 44vh, 380px); }
}

.viewer-count {
  margin: .9rem 0 0; text-align: center;
  font-size: 13px; font-weight: 600; color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}

/* ============================================================
   Calendario
   ============================================================ */
.cal-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1.5rem; margin-bottom: 1.6rem; }
#cal-label { font-size: 15px; font-weight: 700; margin: 0; }
.cal-nav { display: flex; gap: .5rem; flex: 0 0 auto; }

.cal-months { display: grid; gap: 2.6rem; grid-template-columns: 1fr; }
@media (min-width: 744px) { .cal-months { grid-template-columns: 1fr 1fr; } }
.cal-month-name { font-size: 15px; font-weight: 700; text-align: center; margin-bottom: 1rem; }
.cal-weekdays, .cal-days { display: grid; grid-template-columns: repeat(7, 1fr); }
.cal-weekdays div {
  text-align: center; font-size: 11px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ink-3); padding-bottom: .8rem;
}
.cal-days { gap: 2px; }

.day {
  position: relative; aspect-ratio: 1; border: 0; background: transparent;
  font-family: inherit; font-size: 14px; font-weight: 600; color: var(--ink);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  cursor: pointer; padding: 0; border-radius: var(--r-sm);
  transition: background .15s var(--ease), color .15s var(--ease), box-shadow .15s var(--ease);
}
.day .num { line-height: 1.1; }
.day .price { font-size: 10px; font-weight: 500; color: var(--ink-3); margin-top: 1px; }
.day:hover:not(.is-disabled):not(.is-selected) { box-shadow: inset 0 0 0 1.5px var(--accent); }
.day.is-empty { visibility: hidden; cursor: default; }
.day.is-disabled { color: var(--ink-off); cursor: not-allowed; text-decoration: line-through; }
.day.is-disabled .price { display: none; }
.day.is-selected { background: var(--accent); color: #fff; }
.day.is-selected .price { color: rgba(255,255,255,.8); }
.day.is-inrange { background: var(--sand-2); border-radius: 0; }
.day.is-start { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.day.is-end   { border-top-left-radius: 0;  border-bottom-left-radius: 0; }
.day.is-turnover:not(.is-selected)::after {
  content: ''; position: absolute; left: 32%; right: 32%; bottom: 6px; height: 1.5px;
  border-radius: 1px; background: var(--border);
}
.day.is-today .num { text-decoration: underline; text-underline-offset: 3px; }

.cal-legend {
  display: flex; flex-wrap: wrap; gap: 1.4rem; margin-top: 2rem;
  padding-top: 1.4rem; border-top: 1px solid var(--divider);
  font-size: 13px; color: var(--ink-2);
}
.cal-legend span { display: inline-flex; align-items: center; gap: .5rem; }
.swatch { width: 14px; height: 14px; border-radius: 4px; display: inline-block; border: 1px solid var(--border); }
.swatch.free { background: var(--white); }
.swatch.busy { background: var(--sand-2); }
.swatch.sel  { background: var(--accent); border-color: var(--accent); }

/* ============================================================
   Recensioni
   ============================================================ */
.rev-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: .7rem; margin-bottom: 2rem; }
.rev-score { font-family: var(--serif); font-weight: 600; font-size: 2.6rem; line-height: 1; }
.review-bars { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem 3.5rem; }
@media (max-width: 744px) { .review-bars { grid-template-columns: 1fr; } }
.review-bar { display: grid; grid-template-columns: 1fr 100px 30px; align-items: center; gap: .9rem; font-size: 14px; }
.review-bar .track { height: 5px; border-radius: 3px; background: var(--sand-2); overflow: hidden; }
.review-bar .fill { height: 100%; background: var(--accent); border-radius: 3px; }
.review-bar .val { text-align: right; font-size: 13px; font-weight: 700; }

.tags { display: flex; flex-wrap: wrap; gap: .55rem; margin-top: 2rem; }
.tag {
  border: 1px solid var(--border); border-radius: var(--r-sm);
  padding: 7px 15px; font-size: 13px; font-weight: 600; background: var(--white);
}

/* ============================================================
   Piè di pagina
   ============================================================ */
.ftr { background: var(--sand); border-top: 1px solid var(--divider); padding: 3.5rem 0 2rem; margin-top: 3.5rem; }
.ftr-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: 2.5rem; }
@media (max-width: 950px) { .ftr-grid { grid-template-columns: 1fr 1fr; gap: 2rem; } }
@media (max-width: 550px) { .ftr-grid { grid-template-columns: 1fr; } }
.ftr h4 { font-size: 13px; font-weight: 700; margin-bottom: 1rem; letter-spacing: .02em; }
.ftr ul { list-style: none; padding: 0; margin: 0; }
.ftr li { margin-bottom: .65rem; font-size: 14px; color: var(--ink-2); }
.ftr a { color: var(--ink-2); text-decoration: none; }
.ftr a:hover { color: var(--ink); text-decoration: underline; }
.ftr-ico { display: inline-flex; align-items: center; gap: .5rem; }
.ftr-ico svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 1.6; flex: 0 0 auto; }
.ftr-legal {
  margin-top: 2.5rem; padding-top: 1.4rem; border-top: 1px solid var(--divider);
  display: flex; flex-wrap: wrap; gap: .5rem 1.6rem; font-size: 13px; color: var(--ink-3);
}

/* ============================================================
   Pagina esito
   ============================================================ */
.result { min-height: 66vh; display: grid; place-items: center; padding: 7rem 0 3rem; }
.result-card {
  max-width: 560px; width: 100%; background: var(--white);
  border-radius: var(--r-lg); border: 1px solid var(--divider);
  box-shadow: var(--sh-card); padding: 2.5rem;
}
.result-badge {
  display: inline-block; border-radius: var(--r-sm); padding: 6px 15px;
  font-size: 12px; font-weight: 700; margin-bottom: 1.3rem;
}
.result-badge.ok      { background: #f0fbf1; color: #1e7a25; }
.result-badge.waiting { background: var(--sand-2); color: var(--ink-2); }
.result-badge.warn    { background: #fdf4f1; color: #9c3b1b; }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
}

/* ============================================================
   Schede recensione
   ============================================================ */
.rev-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1.5rem; margin-top: 2.5rem; }
.rev-card {
  border: 1px solid var(--divider); border-radius: var(--r-lg);
  padding: 1.5rem; background: var(--white);
  transition: box-shadow .2s var(--ease), border-color .2s var(--ease);
}
.rev-card:hover { box-shadow: var(--sh-card); border-color: transparent; }
.rev-card-head { display: flex; align-items: center; gap: .85rem; margin-bottom: .9rem; }
.rev-avatar {
  width: 42px; height: 42px; border-radius: 50%; flex: 0 0 auto;
  background: var(--sand-2); color: var(--ink);
  display: grid; place-items: center;
  font-family: var(--serif); font-weight: 600; font-size: 17px;
}
.rev-who b { display: block; font-size: 15px; font-weight: 700; line-height: 1.25; }
.rev-who span { display: block; font-size: 13px; color: var(--ink-2); }
.rev-stars { display: flex; align-items: center; gap: .45rem; margin-bottom: .7rem; font-size: 12px; color: var(--ink-2); }
.rev-stars i { display: inline-flex; gap: 1px; font-style: normal; letter-spacing: -1px; color: var(--gold); }
.rev-body {
  margin: 0; font-size: 15px; line-height: 1.6; color: var(--ink);
  display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical;
  overflow: hidden;
}
.rev-card.is-open .rev-body { -webkit-line-clamp: unset; }
.rev-more {
  background: none; border: 0; padding: 0; margin-top: .7rem; cursor: pointer;
  font-family: inherit; font-size: 13px; font-weight: 700; color: var(--ink);
  text-decoration: underline; text-underline-offset: 3px;
}
.rev-reply {
  margin-top: 1rem; padding: .9rem 1rem; border-radius: var(--r-md);
  background: var(--sand); font-size: 14px; color: var(--ink-2);
}
.rev-reply b { color: var(--ink); }
.rev-trans { margin: .6rem 0 0; font-size: 12px; color: var(--ink-3); }