/* ==========================================================================
   HOTEL VILLA DANIELA · San Bartolomeo al Mare (IM)
   Design system v4 "Riviera Luxury".
   Colori struttura: arancione facciata #ECA659 + bianco, con un antracite
   caldo (quasi nero luxury) al posto del grigio medio; bronzo per gli
   accenti testuali su chiaro; sfumature di nero sulle fotografie.
   Tipografia: Fraunces (titoli, serif morbido) + Jost (testi, geometrico).
   Layout simmetrico: testate centrate, griglie 50/50, hero centrato.
   ========================================================================== */

/* ---------- Font self-hosted (variable, subset latin) ---------- */
@font-face {
  font-family: "Fraunces";
  src: url("fonts/Fraunces.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Jost";
  src: url("fonts/Jost.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

/* ---------- Tokens ----------
   I nomi restano storici (sono referenziati inline nell'HTML).
   Mappa v4: notte/cobalto→antracite caldo, cobalto-fondo→nero caldo,
   corallo/sole→arancione facciata, corallo-testo→bronzo. */
:root {
  /* Colore */
  --notte:          #37322E;   /* antracite caldo: testo principale (12.7:1) */
  --slate:          #6A6158;   /* taupe: testo secondario (6.1:1) */
  --cielo:          #F8F6F2;   /* avorio: card e campi */
  --bianco:         #FFFFFF;
  --cobalto:        #37322E;   /* antracite come accento/superficie */
  --cobalto-fondo:  #211E1B;   /* nero caldo: footer, menu, pannello prenota */
  --cobalto-riga:   #E8E3DC;   /* righe/bordi su chiaro */
  --corallo:        #ECA659;   /* arancione facciata: CTA e dettagli */
  --corallo-scuro:  #E19A43;   /* hover CTA */
  --corallo-testo:  #9C6220;   /* bronzo: accento testuale su chiaro (5:1) */
  --sole:           #ECA659;   /* arancione su superfici scure (8:1) */
  --cielo-su-blu:   #DCD6CE;   /* testo corrente su nero caldo (11.5:1) */
  --nero:           #191715;   /* testo sull'arancione (8.7:1) e velature */

  /* Tipografia */
  --serif: "Fraunces", Georgia, "Times New Roman", serif;
  --sans:  "Jost", "Helvetica Neue", Arial, sans-serif;

  /* Scala fluida (rapporto ~1.32) */
  --t-xs:   0.8125rem;
  --t-sm:   0.9375rem;
  --t-base: 1.0625rem;
  --t-md:   clamp(1.25rem, 1.1rem + 0.7vw, 1.625rem);
  --t-lg:   clamp(1.75rem, 1.4rem + 1.6vw, 2.625rem);
  --t-xl:   clamp(2.4rem, 1.7rem + 3.1vw, 4.1rem);
  --t-hero: clamp(2.75rem, 1.55rem + 5.6vw, 6rem);

  /* Spazio */
  --gap:   clamp(1.25rem, 2.5vw, 2rem);
  --sez:   clamp(5rem, 11vw, 9.5rem);
  --sez-s: clamp(2.75rem, 6vw, 4.5rem);
  --colonna: 1180px;
  --lettura: 68ch;
  --raggio: 20px;   /* angoli morbidi, cifra moderna del sito */

  /* Movimento */
  --curva: cubic-bezier(0.16, 1, 0.3, 1); /* ease-out-expo */
  --vel: 0.7s;

  /* Z-index semantico */
  --z-nav: 40;
  --z-menu: 50;
  --z-lightbox: 60;
  --z-cookie: 70;
}

/* ---------- Reset essenziale ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--sans);
  font-size: var(--t-base);
  line-height: 1.7;
  color: var(--notte);
  background: var(--bianco);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
h1, h2, h3, h4 { margin: 0; text-wrap: balance; }
p { margin: 0 0 1em; max-width: var(--lettura); text-wrap: pretty; }
a { color: inherit; }
button { font: inherit; cursor: pointer; }
::selection { background: var(--corallo); color: var(--nero); }

:focus-visible {
  outline: 3px solid var(--notte);
  outline-offset: 3px;
  border-radius: 2px;
  box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.9);
}
.nav :focus-visible, .menu-schermo :focus-visible, .piede :focus-visible,
.hero :focus-visible, .banda :focus-visible, .prenota :focus-visible,
.prenota-chiusa :focus-visible, .pagina-404 :focus-visible,
.lightbox :focus-visible, .mappa-velo :focus-visible {
  outline-color: var(--sole);
  box-shadow: 0 0 0 6px rgba(0, 0, 0, 0.55);
}

.salta-contenuto {
  position: absolute; left: -999px; top: 0;
  background: var(--cobalto-fondo); color: var(--bianco);
  padding: 0.75rem 1.25rem; z-index: 100; font-weight: 600;
}
.salta-contenuto:focus { left: 0; }

[id] { scroll-margin-top: 96px; }

@supports (overflow-x: clip) {
  html, body { overflow-x: clip; }
}

/* ---------- Titoli: Fraunces, serif morbido e pieno ---------- */
.display {
  font-family: var(--serif);
  font-optical-sizing: auto;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.01em;
}
/* Enfasi nei titoli: su chiaro sottolineatura arancio, su scuro arancio pieno */
.display em, .corsivo {
  font-style: normal;
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--corallo);
  text-decoration-thickness: 0.11em;
  text-underline-offset: 0.12em;
  text-decoration-skip-ink: none;
}
.hero .display em,
.banda .display em,
.prenota .display em,
.prenota-chiusa .display em,
.pagina-404 em {
  color: var(--sole);
  text-decoration: none;
}

/* Segnaletica: etichette Jost maiuscole spaziate (unico kicker del sistema) */
.targa {
  font-family: var(--sans);
  font-size: var(--t-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.22em;
}

/* Su fotografia la targa vive in una pillola scura: contrasto garantito */
.hero .targa, .banda .targa {
  background: rgba(0, 0, 0, 0.5);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 999px;
  padding: 0.5rem 1.15rem;
  display: inline-block;
  width: fit-content;
}

/* ---------- Struttura ---------- */
.colonna { width: min(var(--colonna), 100% - 2 * var(--gap)); margin-inline: auto; }
.sezione { padding-block: var(--sez); }
.sezione-s { padding-block: var(--sez-s); }

.riga-fine { border: 0; border-top: 1px solid var(--cobalto-riga); margin: 0; }

/* ==========================================================================
   NAVIGAZIONE
   ========================================================================== */
.nav {
  position: fixed; inset: 0 0 auto 0;
  z-index: var(--z-nav);
  transition: background var(--vel) var(--curva), box-shadow var(--vel) var(--curva);
}
.nav::before {
  /* velatura sempre presente: senza, logo e hamburger spariscono
     sulle zone chiare delle foto (es. facciata illuminata in home) */
  content: ""; position: absolute; inset: 0 0 -28px 0; z-index: -1;
  background: linear-gradient(180deg, rgba(0,0,0,0.62) 0%, rgba(0,0,0,0.38) 62%, rgba(0,0,0,0) 100%);
  pointer-events: none;
}
.nav.compatta::before { opacity: 0; }
.nav-dentro {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem;
  padding: 0.9rem 0;
}
.nav.compatta {
  background: rgba(23, 21, 19, 0.72);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  backdrop-filter: blur(20px) saturate(160%);
  box-shadow: 0 1px 0 rgba(255,255,255,0.08);
}

.logotipo {
  display: flex; flex-direction: column; gap: 0.2rem;
  text-decoration: none; color: var(--bianco);
  line-height: 1;
}
.logotipo strong {
  font-family: var(--serif);
  font-weight: 600; font-size: 1.35rem;
  letter-spacing: 0.01em;
}
.logotipo span {
  font-size: 0.58rem; font-weight: 500; letter-spacing: 0.34em;
  text-transform: uppercase; opacity: 0.85;
}

.nav-voci {
  display: flex; align-items: center; gap: 1.7rem;
  list-style: none; margin: 0; padding: 0;
}
.nav-voci a:not(.bottone) {
  color: var(--bianco); text-decoration: none;
  font-size: var(--t-sm); font-weight: 500; letter-spacing: 0.03em;
  padding-block: 0.35rem;
  border-bottom: 2px solid transparent;
  transition: border-color 0.3s var(--curva);
}
.nav-voci a:not(.bottone):hover,
.nav-voci a[aria-current="page"] { border-bottom-color: var(--sole); }

/* Selettore lingua a tendina */
.lingua-menu { position: relative; }
.lingua-bottone {
  display: inline-flex; align-items: center; gap: 0.45rem;
  background: none;
  border: 1px solid rgba(255,255,255,0.4);
  color: var(--bianco);
  border-radius: 999px;
  padding: 0.42rem 0.9rem;
  font-size: 0.8rem; font-weight: 600; letter-spacing: 0.1em;
  transition: border-color 0.25s var(--curva), background 0.25s var(--curva);
}
.lingua-bottone:hover { border-color: var(--bianco); background: rgba(255,255,255,0.1); }
.lingua-bottone svg { transition: transform 0.3s var(--curva); }
.lingua-menu.aperta .lingua-bottone svg { transform: rotate(180deg); }
.lingua-tendina {
  position: absolute; top: calc(100% + 0.7rem); right: 0;
  min-width: 170px;
  background: var(--bianco); color: var(--notte);
  border: 1px solid var(--cobalto-riga); border-radius: 12px;
  box-shadow: 0 20px 50px rgba(0,0,0,0.22);
  list-style: none; margin: 0; padding: 0.45rem;
  opacity: 0; visibility: hidden; transform: translateY(-8px);
  transition: opacity 0.25s var(--curva), transform 0.25s var(--curva), visibility 0s 0.25s;
}
.lingua-menu.aperta .lingua-tendina {
  opacity: 1; visibility: visible; transform: none;
  transition-delay: 0s;
}
.lingua-tendina button {
  width: 100%; text-align: left;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  background: none; border: 0; border-radius: 8px;
  padding: 0.55rem 0.85rem;
  font-size: var(--t-sm); color: var(--notte);
}
.lingua-tendina button:hover { background: var(--cielo); }
.lingua-tendina button[aria-pressed="true"]::after {
  content: "✓"; font-weight: 700; color: var(--corallo-testo);
}

/* Menu a tutto schermo */
.apri-menu {
  display: none;
  background: rgba(0, 0, 0, 0.55);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border: 1.5px solid rgba(255, 255, 255, 0.55);
  border-radius: 999px;
  color: var(--bianco);
  padding: 0.6rem 0.85rem;
  min-width: 48px; min-height: 44px;
  align-items: center; justify-content: center;
}
.apri-menu svg { display: block; }

.menu-schermo {
  position: fixed; inset: 0; z-index: var(--z-menu);
  background: var(--cobalto-fondo);
  color: var(--bianco);
  display: flex; flex-direction: column;
  padding: calc(1.5rem + env(safe-area-inset-top)) var(--gap) 2.5rem;
  opacity: 0; visibility: hidden;
  transition: opacity 0.45s var(--curva), visibility 0s 0.45s;
  overflow-y: auto;
}
.menu-schermo.aperto { opacity: 1; visibility: visible; transition-delay: 0s; }
.menu-testa { display: flex; justify-content: space-between; align-items: center; }
.chiudi-menu { background: none; border: 0; color: var(--bianco); padding: 0.5rem; }
.menu-voci {
  list-style: none; margin: auto 0; padding: 0;
  display: flex; flex-direction: column; gap: 0.25rem;
  align-items: center; text-align: center;
}
.menu-voci a {
  font-family: var(--serif);
  font-weight: 550;
  font-size: clamp(1.7rem, 5vw, 2.8rem);
  line-height: 1.3; letter-spacing: -0.005em;
  color: var(--bianco); text-decoration: none;
  display: inline-flex; align-items: baseline; gap: 0.9rem;
  transition: color 0.3s var(--curva);
}
.menu-voci a:hover, .menu-voci a[aria-current="page"] { color: var(--sole); }
.lingue-mobile {
  display: flex; gap: 0.5rem; justify-content: center;
  margin-block: 1.6rem;
}
.lingue-mobile button {
  background: none; border: 1px solid rgba(255,255,255,0.35);
  color: var(--bianco); border-radius: 999px;
  padding: 0.4rem 1.05rem; font-size: 0.8rem; font-weight: 600; letter-spacing: 0.1em;
  min-height: 44px; min-width: 48px;
}
.lingue-mobile button[aria-pressed="true"], .lingue-mobile button:hover {
  background: var(--corallo); border-color: var(--corallo); color: var(--nero);
}
.menu-coda {
  display: flex; flex-wrap: wrap; gap: 1rem 2.5rem;
  justify-content: center; align-items: center;
  color: var(--cielo-su-blu); font-size: var(--t-sm);
}
.menu-coda a { color: var(--bianco); }

/* ==========================================================================
   BOTTONI: arancione facciata, testo scuro
   ========================================================================== */
.bottone {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem;
  padding: 0.95rem 2rem;
  background: var(--corallo); color: var(--nero);
  font-weight: 600; font-size: 0.9rem;
  text-transform: uppercase; letter-spacing: 0.12em;
  text-decoration: none; border: 0; border-radius: 999px;
  transition: background 0.3s var(--curva), transform 0.3s var(--curva), box-shadow 0.3s var(--curva);
}
.bottone:hover { background: var(--corallo-scuro); transform: translateY(-2px); box-shadow: 0 14px 34px rgba(236,166,89,0.4); }
.bottone:active { transform: translateY(0); }

.bottone-riga {
  display: inline-flex; align-items: center; gap: 0.55rem;
  color: var(--notte); font-weight: 600; text-decoration: none;
  font-size: var(--t-sm); letter-spacing: 0.04em;
  border-bottom: 2px solid var(--corallo);
  padding-bottom: 0.2rem;
  transition: gap 0.3s var(--curva);
}
.bottone-riga:hover { gap: 0.9rem; }
.bottone-riga svg { flex: none; }

.su-scuro .bottone-riga { color: var(--bianco); border-bottom-color: var(--sole); }
.su-scuro .bottone-riga:hover { color: var(--sole); }

/* ==========================================================================
   HERO: fotografia su velo nero, contenuto centrato e simmetrico
   ========================================================================== */
.hero {
  position: relative;
  min-height: clamp(560px, 92vh, 900px);
  min-height: clamp(560px, 92svh, 900px);
  display: flex; align-items: center;
  color: var(--bianco);
  isolation: isolate;
  overflow: hidden;
}
.hero-foto { position: absolute; inset: 0; z-index: -2; }
.hero-foto img {
  width: 100%; height: 100%; object-fit: cover;
  animation: respiro 18s var(--curva) both;
}
@keyframes respiro { from { transform: scale(1.09); } to { transform: scale(1); } }
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(180deg, rgba(0,0,0,0.62) 0%, rgba(0,0,0,0.42) 50%, rgba(0,0,0,0.68) 100%);
}
.hero-dentro {
  width: min(var(--colonna), 100% - 2 * var(--gap));
  margin: 0 auto;
  padding-block: clamp(6.5rem, 13vh, 9rem) clamp(3rem, 7vh, 5rem);
  text-align: center;
  display: flex; flex-direction: column; align-items: center;
}
.hero h1 {
  font-size: var(--t-hero);
  max-width: 18ch;
  margin-inline: auto;
  text-shadow: 0 2px 24px rgba(0,0,0,0.35);
}
.hero .sotto {
  max-width: 56ch;
  font-size: var(--t-md);
  line-height: 1.5;
  margin: 1.5rem auto 2.3rem;
  color: rgba(255,255,255,0.94);
  text-shadow: 0 1px 12px rgba(0,0,0,0.4);
}
.hero-azioni {
  display: flex; flex-wrap: wrap; gap: 1.1rem 1.8rem;
  align-items: center; justify-content: center;
}

/* targhetta recensioni nel hero */
.sigillo {
  display: inline-flex; align-items: center; gap: 0.7rem;
  background: rgba(0,0,0,0.5);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.28);
  border-radius: 999px;
  padding: 0.5rem 1.1rem 0.5rem 0.55rem;
  color: var(--bianco); text-decoration: none;
  font-size: var(--t-sm);
  transition: background 0.3s var(--curva);
}
.sigillo:hover { background: rgba(0,0,0,0.72); }
.sigillo .voto {
  background: var(--corallo); color: var(--nero);
  font-weight: 700; border-radius: 999px;
  padding: 0.28rem 0.65rem; font-size: var(--t-sm);
}

/* Hero interno (pagine secondarie): più basso */
.hero.interno { min-height: clamp(430px, 66vh, 660px); min-height: clamp(430px, 66svh, 660px); }

/* ==========================================================================
   NASTRO scorrevole (solo homepage): la fascia arancione della facciata
   ========================================================================== */
.nastro {
  background: var(--corallo);
  color: var(--nero);
  overflow: hidden;
  padding-block: 0.9rem;
  border-block: 3px solid var(--cobalto-fondo);
}
.nastro-pista {
  display: flex; gap: 0; width: max-content;
  animation: scorri 36s linear infinite;
}
.nastro span {
  font-weight: 600; font-size: 1rem; letter-spacing: 0.06em;
  white-space: nowrap; display: inline-flex; align-items: center; gap: 1.75rem;
  padding-inline: 1.75rem 0;
}
.nastro span::after { margin-right: 1.75rem; }
.nastro span::after { content: "✦"; color: var(--bianco); font-size: 0.8em; }
@keyframes scorri { to { transform: translateX(-50%); } }

/* ==========================================================================
   MANIFESTO (intro editoriale): due colonne uguali
   ========================================================================== */
.manifesto { background: var(--bianco); }
.manifesto-griglia {
  display: grid; gap: clamp(2rem, 5vw, 4.5rem);
  grid-template-columns: 1fr 1fr;
  align-items: center;
}
.manifesto h2 { font-size: var(--t-xl); max-width: 18ch; }
.manifesto .avvio {
  font-size: var(--t-md); line-height: 1.55; color: var(--notte);
  margin-top: 1.6rem;
}
.manifesto .seguito { color: var(--slate); }
.manifesto figure { margin: 0; position: relative; }
.manifesto figure img { border-radius: var(--raggio); }
.manifesto figcaption {
  margin-top: 0.8rem; font-size: var(--t-xs); color: var(--slate);
  letter-spacing: 0.06em; text-align: center;
}

/* Timbro "Marchio di Qualità" (dritto: simmetria) */
.timbro {
  position: absolute; top: -1.6rem; right: -1rem;
  width: 108px; height: 108px;
}

/* ==========================================================================
   NUMERI (banda tipografica): celle centrate
   ========================================================================== */
.numeri { background: var(--bianco); }
.numeri-fila {
  display: flex; flex-wrap: wrap;
  border-block: 1px solid var(--cobalto-riga);
}
.numeri-fila > div {
  flex: 1 1 150px;
  padding: clamp(1.4rem, 3vw, 2.4rem) clamp(1rem, 2vw, 1.8rem);
  border-inline-start: 1px solid var(--cobalto-riga);
  text-align: center;
}
.numeri-fila > div:first-child { border-inline-start: 0; }
.numeri-fila strong {
  display: block;
  font-family: var(--serif);
  font-weight: 600; letter-spacing: -0.01em;
  font-size: clamp(2rem, 4vw, 3.2rem); line-height: 1.05;
  color: var(--notte);
  border-bottom: 3px solid var(--corallo);
  padding-bottom: 0.4rem;
  width: fit-content;
  margin-inline: auto;
}
.numeri-fila small { display: block; margin-top: 0.6rem; color: var(--slate); font-size: var(--t-sm); }

/* ==========================================================================
   CAMERE: righe alternate, colonne uguali
   ========================================================================== */
.camere-lista { display: flex; flex-direction: column; gap: var(--sez-s); }
.camera-riga {
  display: grid; gap: clamp(1.5rem, 4vw, 4rem);
  grid-template-columns: 1fr 1fr;
  align-items: center;
}
.camera-riga:nth-child(even) .camera-foto { order: 2; }
.camera-foto { position: relative; overflow: hidden; border-radius: var(--raggio); }
.camera-foto img {
  aspect-ratio: 3 / 2; object-fit: cover; width: 100%;
  transition: transform 1.2s var(--curva);
}
.camera-riga:hover .camera-foto img { transform: scale(1.04); }
.camera-foto .quante {
  position: absolute; top: 1rem; left: 1rem;
  background: var(--corallo); color: var(--nero);
  border-radius: 999px; padding: 0.35rem 0.9rem;
  font-size: var(--t-xs); font-weight: 600; letter-spacing: 0.1em;
  text-transform: uppercase;
}
.camera-testo h3 {
  font-family: var(--serif);
  font-weight: 600; letter-spacing: -0.005em;
  font-size: var(--t-lg); line-height: 1.12;
}
.camera-testo .dati {
  display: flex; flex-wrap: wrap; gap: 0.4rem 1.4rem;
  margin: 1rem 0 1.1rem; padding: 0; list-style: none;
  color: var(--slate); font-size: var(--t-sm);
}
.camera-testo .dati li { display: inline-flex; align-items: center; gap: 0.45rem; }
.camera-testo .dati svg { color: var(--corallo-testo); flex: none; }
.camera-testo p { color: var(--slate); }

/* ==========================================================================
   BANDE drenched: fotografia sotto velo nero, contenuto centrato
   ========================================================================== */
.banda {
  position: relative; isolation: isolate;
  color: var(--bianco);
  padding-block: var(--sez);
  overflow: hidden;
  text-align: center;
}
.banda .fondale { position: absolute; inset: 0; z-index: -2; }
.banda .fondale img { width: 100%; height: 100%; object-fit: cover; }
.banda::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(0,0,0,0.72) 0%, rgba(0,0,0,0.55) 50%, rgba(0,0,0,0.72) 100%);
}
.banda.calda::after {
  background: linear-gradient(180deg, rgba(0,0,0,0.72) 0%, rgba(0,0,0,0.55) 50%, rgba(0,0,0,0.72) 100%);
}
.banda h2 { font-size: var(--t-xl); max-width: 20ch; margin-inline: auto; }
.banda .testo {
  max-width: 56ch; margin: 1.4rem auto 2.2rem;
  color: rgba(255,255,255,0.93); font-size: var(--t-md); line-height: 1.55;
}
.banda .targa { margin-bottom: 1rem; margin-inline: auto; max-width: none; }

/* ==========================================================================
   SERVIZI: bacheca a righe
   ========================================================================== */
.servizi { background: var(--bianco); }
.servizi-griglia {
  display: grid; gap: 0 clamp(2rem, 5vw, 5rem);
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
}
.servizio {
  display: grid; grid-template-columns: auto 1fr; gap: 1.1rem;
  padding-block: 1.35rem;
  border-bottom: 1px solid var(--cobalto-riga);
  align-items: start;
}
.servizio svg { color: var(--corallo-testo); margin-top: 0.2rem; }
.servizio strong { display: block; font-size: var(--t-base); font-weight: 600; letter-spacing: 0.01em; }
.servizio span { color: var(--slate); font-size: var(--t-sm); line-height: 1.55; display: block; margin-top: 0.15rem; }

/* griglia servizi a 2 colonne fisse (es. "Come arrivare") */
.servizi-griglia.due-colonne { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 700px) {
  .servizi-griglia.due-colonne { grid-template-columns: 1fr; }
}

/* ==========================================================================
   DINTORNI: cartoline
   ========================================================================== */
.cartoline {
  display: grid; gap: var(--gap);
  grid-template-columns: repeat(auto-fit, minmax(min(290px, 100%), 1fr));
}
.cartolina {
  position: relative; overflow: hidden; border-radius: var(--raggio);
  aspect-ratio: 4 / 3;
  display: flex; align-items: flex-end; justify-content: center;
  color: var(--bianco); text-decoration: none;
  isolation: isolate;
}
.cartolina img {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 1.1s var(--curva);
}
.cartolina::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(0,0,0,0) 42%, rgba(0,0,0,0.86) 100%);
}
.cartolina:hover img { transform: scale(1.05); }
.cartolina.descrittiva::after {
  background: linear-gradient(180deg, rgba(0,0,0,0.12) 0%, rgba(0,0,0,0.55) 42%, rgba(0,0,0,0.92) 100%);
}
.cartolina-testo { padding: 1.3rem 1.4rem; width: 100%; text-align: center; }
.cartolina-testo strong {
  font-family: var(--serif);
  font-weight: 600; font-size: 1.5rem;
  display: block; line-height: 1.15;
}
.cartolina-testo span { font-size: var(--t-sm); color: rgba(255,255,255,0.9); display: block; margin-top: 0.3rem; }

/* ==========================================================================
   RECENSIONI
   ========================================================================== */
.recensioni { background: var(--bianco); }
.rec-testata {
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
  gap: 1.4rem; margin-bottom: clamp(2rem, 5vw, 3.5rem);
}
.rec-testata h2 { font-size: var(--t-xl); max-width: 18ch; margin-inline: auto; }
.rec-punteggio { display: flex; align-items: center; justify-content: center; gap: 1.1rem; }
.rec-punteggio .voto-grande {
  font-family: var(--serif);
  font-weight: 600; letter-spacing: -0.01em;
  font-size: clamp(2.8rem, 5.5vw, 4.2rem); line-height: 1; color: var(--notte);
  border-bottom: 4px solid var(--corallo);
  padding-bottom: 0.2rem;
}
.rec-punteggio .di-che { font-size: var(--t-sm); color: var(--slate); max-width: 24ch; text-align: left; }
.rec-punteggio .di-che a { color: var(--notte); font-weight: 600; }

.rec-griglia { columns: 3; column-gap: var(--gap); }
.rec-voce {
  break-inside: avoid;
  margin: 0 0 var(--gap);
  border: 0;
  border-radius: 16px;
  padding: 1.6rem 1.6rem 1.3rem;
  background: var(--cielo);
  box-shadow: 0 10px 30px rgba(31, 23, 15, 0.07);
}
.rec-voce blockquote { margin: 0; }
.rec-voce blockquote p {
  font-family: var(--serif);
  font-size: 1.05rem; line-height: 1.55; font-weight: 450;
  color: var(--notte); margin-bottom: 1rem;
}
.rec-voce footer {
  display: flex; align-items: center; justify-content: space-between; gap: 0.8rem;
  font-size: var(--t-sm); color: var(--slate);
}
.rec-voce footer b { color: var(--notte); font-weight: 600; }
.rec-voce .rec-voto {
  background: var(--corallo); color: var(--nero);
  border-radius: 999px; padding: 0.18rem 0.6rem;
  font-weight: 700; font-size: var(--t-xs); flex: none;
}

/* sotto-punteggi (pagina recensioni) */
.barre { display: grid; gap: 1rem 3rem; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); }
.barra .etichetta { display: flex; justify-content: space-between; font-size: var(--t-sm); font-weight: 600; letter-spacing: 0.02em; margin-bottom: 0.4rem; }
.barra .pista { height: 6px; background: var(--cobalto-riga); border-radius: 999px; overflow: hidden; }
.barra .pieno { height: 100%; background: var(--corallo); border-radius: 999px; }

/* ==========================================================================
   GALLERIA + lightbox
   ========================================================================== */
.galleria {
  display: grid; gap: var(--gap);
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
}
.galleria a { display: block; overflow: hidden; border-radius: var(--raggio); position: relative; }
.galleria img {
  aspect-ratio: 4 / 3; object-fit: cover; width: 100%;
  transition: transform 1s var(--curva);
}
.galleria a:hover img { transform: scale(1.05); }

.lightbox {
  position: fixed; inset: 0; z-index: var(--z-lightbox);
  background: rgba(12, 10, 9, 0.94);
  display: flex; align-items: center; justify-content: center;
  padding: clamp(1rem, 4vw, 3rem);
  opacity: 0; visibility: hidden;
  transition: opacity 0.35s var(--curva), visibility 0s 0.35s;
}
.lightbox.aperto { opacity: 1; visibility: visible; transition-delay: 0s; }
.lightbox img { max-width: 100%; max-height: 100%; width: auto; height: auto; border-radius: var(--raggio); }
.lightbox button {
  position: absolute; background: rgba(255,255,255,0.12); border: 0; color: var(--bianco);
  width: 48px; height: 48px; border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.25s var(--curva);
}
.lightbox button:hover { background: rgba(255,255,255,0.28); }
.lightbox .lb-chiudi { top: 1.2rem; right: 1.2rem; }
.lightbox .lb-prima { left: 1.2rem; top: 50%; transform: translateY(-50%); }
.lightbox .lb-dopo { right: 1.2rem; top: 50%; transform: translateY(-50%); }
.lightbox figcaption {
  position: absolute; bottom: 1.2rem; left: 50%; transform: translateX(-50%);
  color: rgba(255,255,255,0.88); font-size: var(--t-sm); text-align: center;
  max-width: 80%;
}

/* ==========================================================================
   GALLERIA GENERALE (home): scatti con didascalia visibile
   ========================================================================== */
.galleria-generale { background: var(--cielo); }

.galleria-gruppo {
  font-family: var(--sans);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--corallo-testo);
  display: flex; align-items: center; gap: clamp(0.9rem, 3vw, 1.6rem);
  margin: clamp(2.75rem, 6vw, 4.25rem) 0 clamp(1.4rem, 3vw, 2rem);
}
.galleria-gruppo::before, .galleria-gruppo::after {
  content: ""; flex: 1 1 0; height: 1px; background: var(--cobalto-riga);
}
.galleria-scatti + .galleria-gruppo { margin-top: clamp(3rem, 7vw, 5rem); }
.galleria-gruppo:first-of-type { margin-top: 0; }

.galleria-scatti {
  display: grid; gap: var(--gap) var(--gap);
  grid-template-columns: repeat(auto-fill, minmax(min(270px, 100%), 1fr));
  align-items: start;
}

.scatto { margin: 0; }
.scatto > a {
  display: block; overflow: hidden; border-radius: var(--raggio);
  background: var(--cobalto-riga);
}
.scatto img {
  aspect-ratio: 4 / 3; object-fit: cover; width: 100%;
  transition: transform 1s var(--curva);
}
.scatto > a:hover img { transform: scale(1.05); }

.scatto figcaption {
  display: flex; gap: 0.65rem; align-items: baseline;
  padding: 0.85rem 0.15rem 0;
  font-size: var(--t-sm); line-height: 1.5; color: var(--slate);
  text-wrap: pretty;
}
.scatto figcaption b { color: var(--notte); font-weight: 600; }
.scatto-num {
  flex: none;
  font-family: var(--serif); font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--corallo-testo);
}

/* ==========================================================================
   PAGINE CAMERA
   ========================================================================== */
.scheda-camera {
  display: grid; gap: clamp(2rem, 5vw, 5rem);
  grid-template-columns: minmax(0, 1fr) minmax(280px, 380px);
  align-items: start;
}
.scheda-camera .racconto h2 { font-family: var(--serif); font-size: var(--t-lg); font-weight: 600; letter-spacing: -0.005em; }
.scheda-camera .racconto p { color: var(--slate); }
.scheda-camera .racconto p:first-of-type { color: var(--notte); font-size: var(--t-md); line-height: 1.55; }

.quadro-dati {
  border: 1px solid var(--cobalto-riga); border-radius: 16px;
  background: var(--bianco);
  border-top: 4px solid var(--corallo);
  padding: 1.6rem;
  position: sticky; top: 96px;
}
.quadro-dati h3 { font-family: var(--serif); font-size: 1.15rem; font-weight: 600; margin-bottom: 0.4rem; }
.quadro-dati dl { margin: 0 0 1.4rem; }
.quadro-dati .voce-dato {
  display: flex; justify-content: space-between; gap: 1rem;
  padding-block: 0.65rem;
  border-bottom: 1px solid var(--cobalto-riga);
  font-size: var(--t-sm);
}
.quadro-dati dt { color: var(--slate); }
.quadro-dati dd { margin: 0; font-weight: 600; text-align: right; }
.quadro-dati .bottone { width: 100%; }
.quadro-dati .nota { font-size: var(--t-xs); color: var(--slate); margin: 0.8rem 0 0; text-align: center; }

.dotazioni {
  columns: 2; column-gap: 2.5rem;
  list-style: none; margin: 0; padding: 0;
}
.dotazioni li {
  break-inside: avoid;
  display: flex; gap: 0.7rem; align-items: baseline;
  padding-block: 0.55rem;
  border-bottom: 1px solid var(--cobalto-riga);
  font-size: var(--t-sm); color: var(--slate);
}
.dotazioni li::before { content: "✦"; color: var(--corallo-testo); font-size: 0.7em; flex: none; }

/* altre camere */
.altre-camere { display: grid; gap: var(--gap); grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); }
.altra-camera {
  text-decoration: none; color: inherit;
  display: block; overflow: hidden; border-radius: var(--raggio);
  position: relative; aspect-ratio: 16 / 10;
  isolation: isolate;
}
.altra-camera img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--curva); }
.altra-camera::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(0,0,0,0) 38%, rgba(0,0,0,0.84) 100%); }
.altra-camera:hover img { transform: scale(1.05); }
.altra-camera span {
  position: absolute; bottom: 1.1rem; left: 0; right: 0;
  text-align: center;
  color: var(--bianco);
  font-family: var(--serif); font-weight: 600; font-size: 1.35rem;
}

/* ==========================================================================
   CICLOVIA: rotta con tappe
   ========================================================================== */
.rotta { position: relative; padding-left: 2.2rem; max-width: 720px; margin-inline: auto; }
.rotta::before {
  content: ""; position: absolute; left: 8px; top: 8px; bottom: 8px;
  width: 2px;
  background: repeating-linear-gradient(180deg, var(--notte) 0 10px, transparent 10px 18px);
}
.tappa { position: relative; padding-block: 1.1rem; max-width: 62ch; }
.tappa::before {
  content: ""; position: absolute; left: -2.2rem; top: 1.65rem;
  width: 18px; height: 18px; border-radius: 999px;
  background: var(--bianco); border: 3px solid var(--notte);
}
.tappa.qui::before { background: var(--corallo); border-color: var(--corallo); }
.tappa h3 { font-family: var(--serif); font-size: var(--t-md); font-weight: 600; display: flex; align-items: baseline; gap: 0.8rem; flex-wrap: wrap; }
.tappa .km {
  font-family: var(--sans);
  font-size: var(--t-xs); font-weight: 600;
  color: var(--notte); letter-spacing: 0.1em; text-transform: uppercase;
  border: 1px dashed var(--corallo-scuro); border-radius: 3px; padding: 0.15rem 0.5rem;
  background: var(--cielo);
}
.tappa p { color: var(--slate); font-size: var(--t-sm); margin: 0.4rem 0 0; }

/* ==========================================================================
   DISTRIBUTORE: passi
   ========================================================================== */
.passi { display: grid; gap: var(--gap); grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); counter-reset: passo; }
.passo { counter-increment: passo; border-top: 3px solid var(--corallo); padding-top: 1.1rem; text-align: center; }
.passo::before {
  content: counter(passo, decimal-leading-zero);
  font-family: var(--serif);
  font-weight: 600; letter-spacing: -0.01em;
  font-size: 2.2rem; color: var(--corallo-testo); line-height: 1; display: block;
}
.passo strong { display: block; margin: 0.6rem 0 0.3rem; font-size: var(--t-base); font-weight: 600; }
.passo p { color: var(--slate); font-size: var(--t-sm); margin: 0; }

/* ==========================================================================
   MAPPA con consenso
   ========================================================================== */
.mappa-scatola {
  position: relative; border-radius: var(--raggio); overflow: hidden;
  background: var(--cobalto-fondo);
  aspect-ratio: 16 / 8;
}
@media (max-width: 700px) {
  .mappa-scatola { aspect-ratio: 1 / 1; }
}
.mappa-scatola iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.mappa-velo {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem;
  color: var(--bianco); text-align: center; padding: 2rem;
}
.mappa-velo p { color: var(--cielo-su-blu); max-width: 46ch; font-size: var(--t-sm); }

/* ==========================================================================
   PRENOTA: pannello di prenotazione (chiusura pagine), colonne uguali
   ========================================================================== */
.prenota {
  position: relative; isolation: isolate; overflow: hidden;
  background: var(--cobalto-fondo);
  color: var(--bianco);
  padding-block: var(--sez);
}
.prenota::before {
  /* il caldo della facciata che filtra nel buio */
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(46rem 30rem at 88% 0%, rgba(236,166,89,0.14), transparent 60%),
    radial-gradient(40rem 28rem at 6% 100%, rgba(236,166,89,0.07), transparent 55%);
}
.prenota-griglia {
  display: grid; gap: clamp(2rem, 5vw, 4.5rem);
  grid-template-columns: 1fr 1fr;
  align-items: center;
}
.prenota h2 { font-size: var(--t-xl); max-width: 18ch; }
.prenota .prenota-testo {
  color: rgba(255,255,255,0.92); font-size: var(--t-md); line-height: 1.55;
  margin: 1.2rem 0 1.6rem; max-width: 46ch;
}
.prenota-punti { list-style: none; margin: 0 0 1.8rem; padding: 0; display: flex; flex-direction: column; gap: 0.7rem; }
.prenota-punti li {
  display: flex; gap: 0.7rem; align-items: baseline;
  color: var(--cielo-su-blu); font-size: var(--t-sm); line-height: 1.55;
}
.prenota-punti li::before {
  content: "✓"; flex: none;
  color: var(--sole); font-weight: 700;
}
.prenota .contatti-rapidi {
  display: flex; flex-wrap: wrap; gap: 0.6rem 2.2rem;
  font-size: var(--t-sm); color: var(--cielo-su-blu);
}
.prenota .contatti-rapidi a { color: var(--bianco); font-weight: 600; }

/* la scheda di prenotazione */
.prenota-scheda {
  background: var(--bianco); color: var(--notte);
  border-radius: var(--raggio);
  border-top: 5px solid var(--corallo);
  padding: clamp(1.5rem, 3vw, 2.2rem);
  box-shadow: 0 24px 70px rgba(0,0,0,0.45);
}
.scheda-testa {
  display: flex; align-items: center; gap: 0.7rem;
  font-size: var(--t-sm); font-weight: 500; color: var(--slate);
  padding-bottom: 1.1rem; margin-bottom: 1.3rem;
  border-bottom: 1px solid var(--cobalto-riga);
}
.scheda-testa .voto-mini {
  background: var(--corallo); color: var(--nero);
  font-weight: 700; border-radius: 8px; padding: 0.35rem 0.6rem;
  font-size: var(--t-base); flex: none;
}
.campi { display: grid; grid-template-columns: 1fr 1fr; gap: 0.9rem; margin-bottom: 1.2rem; }
.campi label {
  display: flex; flex-direction: column; gap: 0.35rem;
  font-size: var(--t-xs); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--slate);
}
.campi .campo-largo { grid-column: 1 / -1; }
.campi input, .campi select {
  font: inherit; color: var(--notte);
  background: var(--cielo);
  border: 1px solid var(--cobalto-riga); border-radius: 10px;
  padding: 0.8rem 0.95rem;
  width: 100%;
  transition: border-color 0.25s var(--curva), box-shadow 0.25s var(--curva);
}
.campi input:focus, .campi select:focus {
  outline: none; border-color: var(--corallo-testo);
  box-shadow: 0 0 0 3px rgba(156, 98, 32, 0.4);
}
/* Calendario check-in / check-out dentro la scheda */
.campi .campo-data { cursor: pointer; caret-color: transparent; }
.calendario {
  grid-column: 1 / -1;
  width: 100%;
  max-width: 420px;
  margin-inline: auto;
  border: 1px solid var(--cobalto-riga);
  border-radius: 14px;
  background: var(--bianco);
  padding: 1rem 1.1rem 1.2rem;
  box-shadow: 0 14px 40px rgba(31, 23, 15, 0.12);
}
.cal-testa {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 0.35rem;
}
.cal-testa strong { font-family: var(--serif); font-weight: 600; font-size: 1.1rem; }
.cal-nav {
  background: var(--cielo); border: 1px solid var(--cobalto-riga);
  border-radius: 999px; width: 44px; height: 44px;
  font-size: 1.2rem; line-height: 1; color: var(--notte);
  display: inline-flex; align-items: center; justify-content: center;
  transition: background 0.2s var(--curva);
}
.cal-nav:hover:not(:disabled) { background: var(--corallo); color: var(--nero); border-color: var(--corallo); }
.cal-nav:disabled { opacity: 0.35; cursor: default; }
.cal-guida { font-size: var(--t-xs); color: var(--slate); text-align: center; margin: 0 0 0.7rem; max-width: none; }
.cal-guida b { color: var(--corallo-testo); }
.cal-guida.richiamo {
  animation: richiamo 0.9s ease;
  color: var(--corallo-testo);
  font-weight: 700;
}
@keyframes richiamo {
  0%, 100% { transform: none; }
  20%, 60% { transform: translateX(-5px); }
  40%, 80% { transform: translateX(5px); }
}
.cal-griglia {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px;
  text-align: center;
}
.cal-giorno-nome {
  font-size: 0.68rem; font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--slate);
  padding-block: 0.3rem;
}
.cal-giorno {
  background: none; border: 0; border-radius: 10px;
  aspect-ratio: 1; width: 100%;
  font-size: var(--t-sm); font-weight: 500; color: var(--notte);
  display: inline-flex; align-items: center; justify-content: center;
  transition: background 0.15s ease, color 0.15s ease;
}
.cal-giorno:hover:not(:disabled) { background: var(--cielo); box-shadow: inset 0 0 0 2px var(--corallo); }
.cal-giorno:disabled { color: #C9C2B8; cursor: default; }
.cal-giorno.oggi { box-shadow: inset 0 0 0 1px var(--cobalto-riga); }
.cal-giorno.dentro { background: rgba(236, 166, 89, 0.22); border-radius: 0; }
.cal-giorno.inizio, .cal-giorno.fine {
  background: var(--corallo); color: var(--nero); font-weight: 700;
}
.cal-giorno.inizio { border-radius: 10px 0 0 10px; }
.cal-giorno.fine { border-radius: 0 10px 10px 0; }
.cal-giorno.inizio.fine { border-radius: 10px; }

.prenota-scheda .bottone { width: 100%; padding-block: 1.05rem; }
.prenota-scheda .nota {
  font-size: var(--t-xs); color: var(--slate); text-align: center;
  margin: 0.9rem 0 0; max-width: none;
}
.prenota-scheda .nota svg { vertical-align: -2px; margin-right: 0.3rem; }

/* variante compatta storica (non più usata, tenuta per sicurezza) */
.prenota-chiusa {
  background: var(--cobalto-fondo); color: var(--bianco);
  text-align: center;
}
.prenota-chiusa h2 { font-size: var(--t-xl); max-width: 20ch; margin-inline: auto; }
.prenota-chiusa p { color: var(--cielo-su-blu); max-width: 52ch; margin: 1.2rem auto 2.2rem; font-size: var(--t-md); line-height: 1.5; }
.prenota-chiusa .contatti-rapidi {
  display: flex; flex-wrap: wrap; gap: 0.8rem 2.2rem; justify-content: center;
  margin-top: 2rem; font-size: var(--t-sm); color: var(--cielo-su-blu);
}
.prenota-chiusa .contatti-rapidi a { color: var(--bianco); font-weight: 600; }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.piede {
  background: var(--cobalto-fondo); color: var(--cielo-su-blu);
  border-top: 4px solid var(--corallo);
  padding-block: var(--sez-s) 2rem;
  font-size: var(--t-sm);
}
.piede a { color: var(--bianco); text-decoration: none; }
.piede a:hover { text-decoration: underline; text-underline-offset: 3px; }
.piede-griglia {
  display: grid; gap: 2.5rem clamp(2rem, 5vw, 5rem);
  grid-template-columns: minmax(min(240px, 100%), 1.4fr) repeat(auto-fit, minmax(min(160px, 100%), 1fr));
  padding-bottom: 2.5rem; border-bottom: 1px solid rgba(255,255,255,0.14);
}
.piede-brand strong { font-family: var(--serif); font-weight: 600; font-size: 1.5rem; color: var(--bianco); display: block; }
.piede-brand .dove { margin: 0.9rem 0 0; }
.piede h2 { color: var(--bianco); font-size: var(--t-xs); font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; margin-bottom: 0.9rem; }
.piede ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.55rem; }
.piede-coda {
  display: flex; flex-wrap: wrap; gap: 0.6rem 2rem; justify-content: space-between;
  padding-top: 1.6rem; font-size: var(--t-xs); color: rgba(220,214,206,0.78);
}
.piede-coda span { display: inline-block; }

/* ==========================================================================
   COOKIE banner
   ========================================================================== */
.cookie-avviso {
  position: fixed; z-index: var(--z-cookie);
  left: 50%; bottom: max(1rem, env(safe-area-inset-bottom));
  transform: translateX(-50%);
  width: min(680px, calc(100% - 2rem));
  background: var(--bianco); color: var(--notte);
  border: 1px solid var(--cobalto-riga); border-radius: 16px;
  box-shadow: 0 18px 50px rgba(0,0,0,0.28);
  padding: 1.3rem 1.5rem;
  display: none;
}
.cookie-avviso.mostra { display: block; }
.cookie-avviso p { font-size: var(--t-sm); color: var(--slate); margin-bottom: 1rem; max-width: none; }
.cookie-azioni { display: flex; flex-wrap: wrap; gap: 0.7rem; }
.cookie-azioni .secondario {
  background: none; border: 1px solid var(--cobalto-riga); color: var(--notte);
  border-radius: 999px; padding: 0.85rem 1.6rem; font-weight: 600; font-size: var(--t-sm);
}
.cookie-azioni .secondario:hover { border-color: var(--slate); }

/* ==========================================================================
   RIVELAZIONI allo scorrimento (solo con JS: default visibile)
   ========================================================================== */
.js .rivela { opacity: 0; transform: translateY(26px); }
.js .rivela.visto {
  opacity: 1; transform: none;
  transition: opacity 0.9s var(--curva), transform 0.9s var(--curva);
}

/* ==========================================================================
   PAGINE LEGALI + 404
   ========================================================================== */
.legale { background: var(--bianco); }
.legale .colonna { max-width: 820px; }
.legale h1 { font-family: var(--serif); font-weight: 600; letter-spacing: -0.01em; font-size: var(--t-xl); margin-bottom: 0.6rem; }
.legale h2 { font-family: var(--serif); font-weight: 600; letter-spacing: -0.005em; font-size: var(--t-lg); margin: 2.6rem 0 0.8rem; }
.legale h3 { font-size: var(--t-md); margin: 1.8rem 0 0.5rem; }
.legale p, .legale li { color: var(--slate); }
.legale .aggiornato { font-size: var(--t-sm); color: var(--slate); }
.legale table { width: 100%; border-collapse: collapse; font-size: var(--t-sm); display: block; overflow-x: auto; }
.legale td { word-break: break-word; }
.legale th, .legale td { text-align: left; padding: 0.6rem 0.8rem; border: 1px solid var(--cobalto-riga); vertical-align: top; }
.legale th { background: var(--cielo); }

.pagina-404 {
  min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center;
  background: var(--cobalto-fondo); color: var(--bianco);
  padding: 2rem;
}
.pagina-404 .codice {
  font-family: var(--serif);
  font-weight: 600; letter-spacing: -0.02em;
  font-size: clamp(6rem, 20vw, 12rem); line-height: 1; color: var(--sole);
}
.pagina-404 p { color: var(--cielo-su-blu); font-size: var(--t-md); margin: 1rem 0 2rem; }

/* ==========================================================================
   INTESTAZIONI di sezione condivise: centrate (simmetria)
   ========================================================================== */
.testata-sezione { margin-bottom: clamp(2rem, 5vw, 3.5rem); text-align: center; }
.testata-sezione h2 { font-size: var(--t-xl); max-width: 20ch; margin-inline: auto; }
.testata-sezione .guida { color: var(--slate); font-size: var(--t-md); line-height: 1.55; margin: 1.1rem auto 0; max-width: 56ch; }
.testata-sezione .targa { color: var(--corallo-testo); margin-bottom: 0.9rem; margin-inline: auto; max-width: none; }
.testata-sezione.centrata { text-align: center; }
.testata-sezione.centrata h2, .testata-sezione.centrata .guida { margin-inline: auto; }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 1080px) {
  .nav-voci { display: none; }
  .apri-menu { display: inline-flex; }
}
@media (max-width: 960px) {
  .manifesto-griglia, .camera-riga, .scheda-camera, .prenota-griglia { grid-template-columns: 1fr; }
  .camera-riga:nth-child(even) .camera-foto { order: 0; }
  .quadro-dati { position: static; }
  .rec-griglia { columns: 2; }
}
@media (max-width: 620px) {
  .rec-griglia { columns: 1; }
  .logotipo span { font-size: 0.5rem; letter-spacing: 0.2em; white-space: nowrap; }
  .cookie-avviso { padding: 1rem 1.1rem; }
  .cookie-avviso p { font-size: var(--t-xs); margin-bottom: 0.8rem; }
  .cookie-azioni .bottone, .cookie-azioni .secondario { padding: 0.7rem 1.3rem; font-size: var(--t-xs); }
  .piede-griglia { grid-template-columns: 1fr; }
  .calendario { padding: 0.75rem 0.5rem 1rem; }
  .cal-giorno { aspect-ratio: auto; min-height: 42px; }
  .dotazioni { columns: 1; }
  .numeri-fila > div { flex-basis: 40%; border-inline-start: 0; border-top: 1px solid var(--cobalto-riga); }
  .numeri-fila { border-top: 0; }
  .timbro { width: 84px; height: 84px; top: -1.2rem; right: 0.4rem; }
  .campi { grid-template-columns: 1fr; }
}

/* ==========================================================================
   MOVIMENTO RIDOTTO
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .rivela { opacity: 1; transform: none; transition: none; }
  .nastro-pista { animation: none; flex-wrap: wrap; width: auto; }
  .camera-foto img, .cartolina img, .galleria img, .scatto img, .altra-camera img { transition: none; }
  .bottone { transition: background 0.2s ease; }
  .bottone:hover { transform: none; }
  * { animation-duration: 0.001s !important; }
}

/* ==========================================================================
   STAMPA
   ========================================================================== */
@media print {
  .nav, .menu-schermo, .cookie-avviso, .nastro, .lightbox, .whatsapp-float { display: none !important; }
  .hero { min-height: auto; }
  body { background: #fff; color: #000; }
}

/* ==========================================================================
   REVISIONE 17/07/26 — testi giustificati, titolo hero sul tetto,
   WhatsApp flottante, loghi social
   ========================================================================== */

/* Testo dei paragrafi giustificato (niente righe che finiscono a caso) */
.manifesto .avvio,
.manifesto .seguito,
.scheda-camera .racconto p,
.servizio span,
.tappa p,
.prenota .prenota-testo,
.rec-voce blockquote p {
  text-align: justify;
  text-justify: inter-word;
  -webkit-hyphens: auto;
  hyphens: auto;
}

/* Home: titolo sul tetto della casa, su una sola riga, senza il badge recensioni */
.hero.hero-tetto { align-items: flex-start; }
.hero.hero-tetto .hero-dentro {
  padding-block: clamp(4.5rem, 12vh, 8rem) clamp(3rem, 7vh, 5rem);
}
.hero.hero-tetto .titolo-tetto {
  max-width: none;
  white-space: nowrap;
  font-size: clamp(1.9rem, 5.4vw, 4.1rem);
}
@media (max-width: 560px) {
  .hero.hero-tetto .titolo-tetto { white-space: normal; font-size: clamp(1.9rem, 8vw, 2.6rem); }
}

/* Bottone WhatsApp flottante (tutte le pagine) */
.whatsapp-float {
  position: fixed; z-index: 60;
  right: clamp(1rem, 3vw, 2rem); bottom: clamp(1rem, 3vw, 2rem);
  display: inline-flex; align-items: center; gap: 0.6rem;
  background: #25D366; color: #fff;
  padding: 0.85rem 1.2rem; border-radius: 999px;
  text-decoration: none; font-weight: 600; font-size: 0.9rem; letter-spacing: 0.04em;
  box-shadow: 0 10px 30px rgba(0,0,0,0.28);
  transition: transform 0.3s var(--curva), box-shadow 0.3s var(--curva);
}
.whatsapp-float svg { flex: none; }
.whatsapp-float span { white-space: nowrap; }
.whatsapp-float:hover { transform: translateY(-2px); box-shadow: 0 16px 38px rgba(37,211,102,0.45); }
@media (max-width: 620px) {
  .whatsapp-float span { display: none; }
  .whatsapp-float { padding: 0.9rem; }
}

/* Loghi social nel footer */
.social { display: flex; gap: 0.7rem; margin-top: 1.2rem; }
.social a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.28);
  color: var(--bianco);
  transition: background 0.25s var(--curva), border-color 0.25s var(--curva), transform 0.25s var(--curva);
}
.social a:hover { background: rgba(255,255,255,0.12); border-color: var(--bianco); transform: translateY(-2px); }
.social svg { display: block; }