/* ============================================================================
   CASA DI SILVA TRA MONTI E LAGHI — style.css
   Art direction: lago di Como · pietra lariana · oro tenue
   Target desktop 1440px (impeccabile ≥1280px), fallback < 1024px
   ============================================================================ */

/* ─── DESIGN TOKENS ──────────────────────────────────────────────────────── */
:root {
  /* Palette */
  --lago:        #1b4242;   /* verde lago profondo */
  --lago-scuro:  #102a2a;
  --acqua:       #5c9ead;   /* blu-acqua */
  --acqua-chiaro:#a8cdd4;
  --pietra:      #c9bda4;   /* beige pietra/sabbia */
  --sabbia:      #e8e0d2;
  --crema:       #f7f3ec;   /* bianco caldo */
  --crema-puro:  #fdfbf7;
  --oro:         #b08d4f;   /* oro/ottone tenue */
  --oro-chiaro:  #cfa968;
  --inchiostro:  #21201c;   /* testo scuro */
  --grigio:      #6b675e;
  --grigio-chiaro:#9a958a;

  /* Tipografia */
  --serif: "Cormorant Garamond", "Times New Roman", serif;
  --sans:  "Inter", system-ui, -apple-system, sans-serif;

  /* Ritmo */
  --pad-x: clamp(24px, 6vw, 120px);
  --maxw: 1440px;

  /* Motion */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
  --dur: 0.7s;

  /* Ombre */
  --shadow-sm: 0 4px 20px rgba(16, 42, 42, 0.08);
  --shadow-md: 0 16px 50px rgba(16, 42, 42, 0.14);
  --shadow-lg: 0 30px 90px rgba(16, 42, 42, 0.22);
}

/* ─── RESET ──────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}
body {
  font-family: var(--sans);
  color: var(--inchiostro);
  background: var(--crema);
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
ul { list-style: none; }
::selection { background: var(--oro); color: var(--crema-puro); }

/* Custom cursor: hide native on capable pointers */
@media (hover: hover) and (pointer: fine) {
  body.has-cursor, body.has-cursor a, body.has-cursor button { cursor: none; }
}

/* ─── HELPERS ────────────────────────────────────────────────────────────── */
.wrap { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--pad-x); }
.eyebrow {
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--oro);
  display: inline-block;
}
.serif { font-family: var(--serif); }
.section-title {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(2.6rem, 5vw, 4.6rem);
  line-height: 1.04;
  letter-spacing: -0.01em;
  color: var(--inchiostro);
}
.lede { color: var(--grigio); font-size: 1.06rem; max-width: 56ch; }

/* Reveal base state (GSAP toggles .is-in) */
[data-reveal] { opacity: 0; transform: translateY(38px); }
[data-reveal].is-in { opacity: 1; transform: none; }

/* ════════════════════════════════════════════════════════════════════════
   PRELOADER
   ════════════════════════════════════════════════════════════════════════ */
#preloader {
  position: fixed; inset: 0; z-index: 9999;
  background: var(--lago-scuro);
  display: grid; place-items: center;
  transition: opacity 0.8s var(--ease), visibility 0.8s;
}
#preloader.done { opacity: 0; visibility: hidden; }
.pl-inner { text-align: center; width: min(80vw, 320px); }
.pl-mark {
  font-family: var(--serif);
  font-size: 2rem; font-weight: 500;
  color: var(--crema); letter-spacing: 0.04em;
  margin-bottom: 1.4rem;
}
.pl-mark span { color: var(--oro-chiaro); font-style: italic; }
.pl-track { height: 1px; background: rgba(255,255,255,0.15); overflow: hidden; }
.pl-bar { height: 100%; width: 0; background: var(--oro-chiaro); transition: width 0.4s var(--ease-soft); }
.pl-pct { margin-top: 0.8rem; font-size: 0.7rem; letter-spacing: 0.3em; color: rgba(255,255,255,0.4); }

/* ════════════════════════════════════════════════════════════════════════
   CUSTOM CURSOR
   ════════════════════════════════════════════════════════════════════════ */
.cursor { position: fixed; top: 0; left: 0; z-index: 9998; pointer-events: none; will-change: transform; mix-blend-mode: difference; }
.cursor-dot { width: 6px; height: 6px; border-radius: 50%; background: #fff; transform: translate(-50%, -50%); }
.cursor-ring {
  position: fixed; top: 0; left: 0; z-index: 9998; pointer-events: none;
  width: 38px; height: 38px; border: 1px solid rgba(255,255,255,0.6); border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: width 0.3s var(--ease), height 0.3s var(--ease), background 0.3s, border-color 0.3s;
  will-change: transform; mix-blend-mode: difference;
}
.cursor-ring.is-hover { width: 60px; height: 60px; background: rgba(255,255,255,0.1); }
@media (hover: none), (pointer: coarse) { .cursor, .cursor-ring { display: none; } }

/* ════════════════════════════════════════════════════════════════════════
   NAVBAR
   ════════════════════════════════════════════════════════════════════════ */
#nav {
  position: fixed; inset: 0 0 auto 0; z-index: 1000;
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.6rem var(--pad-x);
  transition: padding 0.5s var(--ease), background 0.5s var(--ease), box-shadow 0.5s var(--ease);
}
#nav.solid {
  background: rgba(247, 243, 236, 0.94);
  backdrop-filter: blur(8px) saturate(1.1);
  box-shadow: 0 1px 0 rgba(16,42,42,0.06);
  padding-block: 1rem;
}
.nav-logo { font-family: var(--serif); font-size: 1.4rem; font-weight: 600; color: var(--crema); letter-spacing: 0.02em; transition: color 0.5s var(--ease); white-space: nowrap; }
.nav-logo span { font-style: italic; color: var(--oro-chiaro); }
#nav.solid .nav-logo { color: var(--inchiostro); }
#nav.solid .nav-logo span { color: var(--oro); }

.nav-menu { display: flex; align-items: center; gap: 2.2rem; }
.nav-link { position: relative; font-size: 0.86rem; font-weight: 500; letter-spacing: 0.04em; color: rgba(255,255,255,0.85); transition: color 0.4s; padding-block: 4px; }
.nav-link::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background: var(--oro-chiaro); transform: scaleX(0); transform-origin: left; transition: transform 0.4s var(--ease); }
.nav-link:hover::after { transform: scaleX(1); }
#nav.solid .nav-link { color: var(--grigio); }
#nav.solid .nav-link:hover { color: var(--inchiostro); }

.nav-right { display: flex; align-items: center; gap: 1.1rem; }
.lang-toggle {
  display: flex; align-items: center; font-size: 0.74rem; font-weight: 600; letter-spacing: 0.08em;
  border: 1px solid rgba(255,255,255,0.4); border-radius: 100px; overflow: hidden; color: var(--crema);
  transition: border-color 0.5s;
}
#nav.solid .lang-toggle { border-color: rgba(33,32,28,0.2); color: var(--inchiostro); }
.lang-toggle button { padding: 6px 11px; color: inherit; transition: background 0.3s, color 0.3s; }
.lang-toggle button.active { background: var(--oro); color: var(--crema-puro); }

.nav-cta {
  background: var(--oro); color: var(--crema-puro);
  padding: 0.7rem 1.4rem; border-radius: 100px;
  font-size: 0.82rem; font-weight: 600; letter-spacing: 0.04em;
  transition: transform 0.4s var(--ease), background 0.3s, box-shadow 0.4s;
  box-shadow: 0 6px 20px rgba(176,141,79,0.32);
}
.nav-cta:hover { background: var(--oro-chiaro); transform: translateY(-2px); box-shadow: 0 10px 28px rgba(176,141,79,0.45); }

.nav-burger { display: none; flex-direction: column; gap: 5px; padding: 6px; }
.nav-burger span { width: 24px; height: 2px; background: currentColor; transition: 0.3s; }

/* ════════════════════════════════════════════════════════════════════════
   HERO
   ════════════════════════════════════════════════════════════════════════ */
#hero { position: relative; height: 100svh; min-height: 640px; overflow: hidden; display: flex; align-items: flex-end; }
.hero-media { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.hero-media img {
  width: 100%; height: 120%; object-fit: cover;
  will-change: transform;
  animation: kenburns 28s ease-in-out infinite alternate;
}
@keyframes kenburns {
  from { transform: scale(1.06) translate(0, 0); }
  to   { transform: scale(1.16) translate(-1.5%, -2%); }
}
.hero-scrim {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(to top, rgba(16,42,42,0.82) 0%, rgba(16,42,42,0.28) 42%, rgba(16,42,42,0.12) 70%, rgba(16,42,42,0.32) 100%);
}
.hero-content { width: 100%; max-width: var(--maxw); margin-inline: auto; padding: 0 var(--pad-x) clamp(3rem, 9vh, 7rem); }
.hero-eyebrow { color: var(--oro-chiaro); margin-bottom: 1.5rem; }
.hero-title {
  font-family: var(--serif); font-weight: 500; color: var(--crema-puro);
  font-size: clamp(3.2rem, 8.5vw, 9rem); line-height: 0.98; letter-spacing: -0.015em;
  margin-bottom: 1.6rem; max-width: 16ch;
}
.hero-title .ln { display: block; overflow: hidden; }
.hero-title .ln > span { display: block; will-change: transform; }
.hero-title em { font-style: italic; color: var(--oro-chiaro); }
.hero-sub { color: rgba(255,255,255,0.82); font-size: clamp(1rem, 1.5vw, 1.25rem); max-width: 46ch; margin-bottom: 2.4rem; font-weight: 300; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; }

.btn {
  display: inline-flex; align-items: center; gap: 0.6rem;
  font-size: 0.9rem; font-weight: 600; letter-spacing: 0.03em;
  padding: 1rem 1.9rem; border-radius: 100px;
  transition: transform 0.4s var(--ease), background 0.35s, color 0.35s, box-shadow 0.4s, border-color 0.35s;
}
.btn-gold { background: var(--oro); color: var(--crema-puro); box-shadow: 0 10px 30px rgba(176,141,79,0.4); }
.btn-gold:hover { background: var(--oro-chiaro); transform: translateY(-3px); box-shadow: 0 16px 40px rgba(176,141,79,0.5); }
.btn-ghost { color: var(--crema-puro); border: 1px solid rgba(255,255,255,0.5); }
.btn-ghost:hover { background: rgba(255,255,255,0.12); border-color: var(--crema-puro); transform: translateY(-3px); }
.btn-arrow { transition: transform 0.4s var(--ease); }
.btn:hover .btn-arrow { transform: translateX(4px); }

.hero-badge {
  position: absolute; right: var(--pad-x); bottom: clamp(3rem, 9vh, 7rem);
  display: flex; align-items: center; gap: 0.7rem;
  background: rgba(247,243,236,0.12); backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.22); border-radius: 100px;
  padding: 0.7rem 1.2rem; color: var(--crema-puro); font-size: 0.84rem; font-weight: 500;
}
.hero-badge .stars { color: var(--oro-chiaro); letter-spacing: 0.05em; }
.hero-scroll {
  position: absolute; left: 50%; bottom: 1.8rem; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 0.5rem;
  color: rgba(255,255,255,0.6); font-size: 0.64rem; letter-spacing: 0.3em; text-transform: uppercase;
}
.hero-scroll .line { width: 1px; height: 46px; background: linear-gradient(rgba(255,255,255,0.6), transparent); position: relative; overflow: hidden; }
.hero-scroll .line::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 40%; background: var(--oro-chiaro); animation: scrolldrop 2s var(--ease-soft) infinite; }
@keyframes scrolldrop { 0% { transform: translateY(-100%); } 100% { transform: translateY(280%); } }

/* ════════════════════════════════════════════════════════════════════════
   INTRO / STATEMENT
   ════════════════════════════════════════════════════════════════════════ */
#intro { padding: clamp(6rem, 14vh, 11rem) 0; background: var(--crema); }
.intro-statement {
  font-family: var(--serif); font-weight: 500;
  font-size: clamp(1.8rem, 3.6vw, 3.4rem); line-height: 1.22; letter-spacing: -0.01em;
  color: var(--inchiostro); max-width: 24ch;
}
.intro-statement .word { display: inline-block; opacity: 0.12; transition: opacity 0.5s var(--ease); }
.intro-statement .word.lit { opacity: 1; }
.intro-statement em { font-style: italic; color: var(--oro); }
.intro-kpis { display: flex; flex-wrap: wrap; gap: clamp(2rem, 6vw, 6rem); margin-top: clamp(3.5rem, 8vh, 6rem); border-top: 1px solid rgba(33,32,28,0.1); padding-top: 3rem; }
.kpi-num { font-family: var(--serif); font-weight: 500; font-size: clamp(3rem, 6vw, 5rem); color: var(--lago); line-height: 1; }
.kpi-num .unit { font-size: 0.45em; color: var(--oro); margin-left: 0.15em; }
.kpi-label { margin-top: 0.5rem; font-size: 0.82rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--grigio); }

/* ════════════════════════════════════════════════════════════════════════
   GALLERY 3D
   ════════════════════════════════════════════════════════════════════════ */
#gallery { padding: clamp(5rem, 12vh, 9rem) 0; background: var(--lago-scuro); overflow: hidden; }
.gallery-head { text-align: center; margin-bottom: clamp(3rem, 7vh, 5rem); }
.gallery-head .section-title { color: var(--crema-puro); }
.gallery-head .eyebrow { color: var(--oro-chiaro); margin-bottom: 1rem; }
.gallery-head .lede { color: rgba(255,255,255,0.65); margin-inline: auto; text-align: center; }

.swiper { width: 100%; padding-block: 2rem 4rem !important; overflow: visible; perspective: 1600px; }
.swiper-wrapper { align-items: center; }   /* niente stretch verticale: l'aspect-ratio è rispettato */
.swiper-slide {
  /* aspect-ratio fisso → ogni immagine riempie la slide nello stesso modo, su ogni schermo */
  width: clamp(300px, 54vw, 700px); aspect-ratio: 16 / 10; height: auto;
  align-self: center;
  border-radius: 14px; overflow: hidden; position: relative;
  box-shadow: var(--shadow-lg); cursor: pointer;
  transition: box-shadow 0.4s;
}
.swiper-slide img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; transition: transform 1.2s var(--ease); }
.swiper-slide-active:hover img { transform: scale(1.05); }
.slide-cap {
  position: absolute; inset: auto 0 0 0; z-index: 2;
  padding: 3rem 1.8rem 1.6rem;
  background: linear-gradient(to top, rgba(16,42,42,0.9), transparent);
  color: var(--crema-puro);
  transform: translateY(12px); opacity: 0; transition: 0.5s var(--ease);
}
.swiper-slide-active .slide-cap { transform: none; opacity: 1; }
.slide-cap .t { font-family: var(--serif); font-size: 1.5rem; font-weight: 500; }
.slide-cap .s { font-size: 0.8rem; letter-spacing: 0.06em; color: rgba(255,255,255,0.7); margin-top: 0.2rem; }
.slide-zoom { position: absolute; top: 1.1rem; right: 1.1rem; z-index: 2; width: 40px; height: 40px; border-radius: 50%; background: rgba(247,243,236,0.16); backdrop-filter: blur(8px); display: grid; place-items: center; color: #fff; opacity: 0; transition: 0.4s; }
.swiper-slide-active .slide-zoom { opacity: 1; }

.gallery-nav { display: flex; justify-content: center; gap: 1rem; margin-top: 1rem; }
.gnav-btn { width: 52px; height: 52px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.25); color: var(--crema-puro); display: grid; place-items: center; transition: 0.4s var(--ease); }
.gnav-btn:hover { background: var(--oro); border-color: var(--oro); transform: translateY(-2px); }
.swiper-pagination { position: static !important; margin-top: 1.4rem; }
.swiper-pagination-bullet { background: rgba(255,255,255,0.35); opacity: 1; transition: 0.3s; }
.swiper-pagination-bullet-active { background: var(--oro-chiaro); width: 26px; border-radius: 4px; }

/* Lightbox */
#lightbox { position: fixed; inset: 0; z-index: 9000; background: rgba(16,42,42,0.96); backdrop-filter: blur(8px); display: grid; place-items: center; opacity: 0; visibility: hidden; transition: opacity 0.4s var(--ease), visibility 0.4s; }
#lightbox.open { opacity: 1; visibility: visible; }
.lb-figure { max-width: min(92vw, 1200px); max-height: 86vh; transform: scale(0.92); transition: transform 0.5s var(--ease); text-align: center; }
#lightbox.open .lb-figure { transform: scale(1); }
.lb-figure img { max-height: 78vh; width: auto; margin-inline: auto; border-radius: 8px; box-shadow: var(--shadow-lg); }
.lb-figure figcaption { margin-top: 1rem; color: var(--crema); font-family: var(--serif); font-size: 1.3rem; }
.lb-close { position: fixed; top: 1.6rem; right: 1.8rem; z-index: 9001; width: 48px; height: 48px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.3); color: #fff; font-size: 1.4rem; display: grid; place-items: center; transition: 0.3s; }
.lb-close:hover { background: rgba(255,255,255,0.12); transform: rotate(90deg); }
.lb-arrow {
  position: fixed; top: 50%; transform: translateY(-50%); z-index: 9001;
  width: 56px; height: 56px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.3); color: #fff;
  background: rgba(16,42,42,0.35); backdrop-filter: blur(4px);
  font-size: 2rem; line-height: 1; display: grid; place-items: center;
  transition: background 0.3s, transform 0.3s var(--ease);
}
.lb-arrow:hover { background: var(--oro); border-color: var(--oro); }
.lb-prev { left: 1.6rem; } .lb-prev:hover { transform: translateY(-50%) translateX(-3px); }
.lb-next { right: 1.6rem; } .lb-next:hover { transform: translateY(-50%) translateX(3px); }
.lb-counter { position: fixed; bottom: 1.6rem; left: 50%; transform: translateX(-50%); z-index: 9001; color: rgba(255,255,255,0.7); font-size: 0.85rem; letter-spacing: 0.15em; }
@media (max-width: 600px) { .lb-arrow { width: 44px; height: 44px; font-size: 1.5rem; } .lb-prev { left: 0.6rem; } .lb-next { right: 0.6rem; } }
.book-sep { color: rgba(33,32,28,0.3); margin: 0 0.2rem; }

/* ════════════════════════════════════════════════════════════════════════
   SPAZI (zig-zag)
   ════════════════════════════════════════════════════════════════════════ */
#spazi { padding: clamp(5rem, 12vh, 9rem) 0; background: var(--crema); }
.spazi-head { text-align: center; margin-bottom: clamp(3.5rem, 8vh, 6rem); }
.spazi-head .eyebrow { margin-bottom: 1rem; }
.spazi-head .lede { margin-inline: auto; }

/* Rooms — banda immagine + card frosted sovrapposta, alternata, con numero indice */
.rooms { display: flex; flex-direction: column; gap: clamp(3.5rem, 8vh, 6.5rem); }
.room { position: relative; }
.room-img { position: relative; width: 100%; aspect-ratio: 16 / 8.5; border-radius: 18px; overflow: hidden; box-shadow: var(--shadow-md); }
.room-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ease); will-change: transform; }
.room:hover .room-img img { transform: scale(1.045); }
.room-img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 45%, rgba(16,42,42,0.28)); pointer-events: none; }

.room-panel {
  position: relative; z-index: 2;
  width: min(460px, 78%);
  margin-top: clamp(-150px, -11vw, -90px);
  /* sfondo quasi solido: niente blur pesante sopra l'immagine in scroll → fluido */
  background: rgba(250,247,241,0.97);
  border: 1px solid rgba(255,255,255,0.7);
  border-radius: 16px;
  padding: 2rem 2.2rem 2.1rem;
  box-shadow: var(--shadow-lg);
}
/* odd → card a destra · even → card a sinistra */
.room:nth-child(odd)  .room-panel { margin-left: auto;  margin-right: clamp(1rem, 4vw, 4rem); }
.room:nth-child(even) .room-panel { margin-right: auto; margin-left: clamp(1rem, 4vw, 4rem); }

.room-head { display: flex; align-items: baseline; gap: 0.8rem; margin-bottom: 0.7rem; }
.room-num { font-family: var(--serif); font-size: 2.4rem; line-height: 1; font-weight: 500; color: var(--oro); }
.room-num::after { content: ""; display: inline-block; width: 30px; height: 1px; background: var(--oro); vertical-align: middle; margin-left: 0.7rem; opacity: 0.6; }
.room-panel .eyebrow { display: block; margin-bottom: 0.5rem; }
.room-panel h3 { font-family: var(--serif); font-weight: 500; font-size: clamp(1.7rem, 2.6vw, 2.4rem); line-height: 1.06; color: var(--inchiostro); margin-bottom: 0.8rem; }
.room-panel p { color: var(--grigio); font-size: 0.95rem; margin-bottom: 1.3rem; }
.room-chips { display: flex; flex-wrap: wrap; gap: 0.55rem; }
.chip { font-size: 0.76rem; font-weight: 500; color: var(--lago); background: rgba(27,66,66,0.08); padding: 0.4rem 0.85rem; border-radius: 100px; }

/* ════════════════════════════════════════════════════════════════════════
   MAP SECTIONS
   ════════════════════════════════════════════════════════════════════════ */
.map-section { padding: clamp(5rem, 12vh, 9rem) 0; background: var(--lago); }
.map-head { text-align: center; margin-bottom: clamp(2.5rem, 6vh, 4rem); }
.map-head .eyebrow { color: var(--oro-chiaro); margin-bottom: 1rem; }
.map-head .section-title { color: var(--crema-puro); }
.map-head .lede { color: rgba(255,255,255,0.62); margin-inline: auto; text-align: center; }

/* Property aerial map */
.property-map-grid { display: grid; grid-template-columns: 1fr 340px; gap: 1.4rem; }
.map-canvas { position: relative; border-radius: 16px; overflow: hidden; min-height: 540px; box-shadow: var(--shadow-lg); background: var(--lago-scuro); }
#propertyMap, #attractionsMap { position: absolute; inset: 0; }
.map-aside { background: rgba(247,243,236,0.06); border: 1px solid rgba(255,255,255,0.1); border-radius: 16px; padding: 2rem 1.8rem; display: flex; flex-direction: column; gap: 1.2rem; }
.map-aside h3 { font-family: var(--serif); font-weight: 500; font-size: 1.7rem; color: var(--crema-puro); }
.aside-item { display: flex; gap: 0.9rem; align-items: flex-start; padding-bottom: 1.2rem; border-bottom: 1px solid rgba(255,255,255,0.08); }
.aside-item:last-child { border-bottom: none; padding-bottom: 0; }
.aside-item .ic { font-size: 1.4rem; flex-shrink: 0; }
.aside-item .t { color: var(--crema-puro); font-weight: 600; font-size: 0.95rem; }
.aside-item .s { color: rgba(255,255,255,0.6); font-size: 0.84rem; margin-top: 0.15rem; }
.map-disclaimer { margin-top: 0.5rem; font-size: 0.78rem; color: rgba(255,255,255,0.55); display: flex; gap: 0.5rem; align-items: flex-start; }

/* Map fallback (no API key) */
.map-fallback { position: absolute; inset: 0; display: grid; place-items: center; overflow: hidden; }
.map-fallback img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: saturate(0.7) brightness(0.55); }
.map-fallback .mf-card { position: relative; z-index: 2; text-align: center; background: rgba(16,42,42,0.78); backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,0.15); border-radius: 14px; padding: 2rem 2.4rem; color: var(--crema-puro); max-width: 380px; }
.map-fallback .mf-card .ic { font-size: 2.2rem; }
.map-fallback .mf-card h4 { font-family: var(--serif); font-size: 1.5rem; margin: 0.6rem 0 0.4rem; }
.map-fallback .mf-card p { font-size: 0.86rem; color: rgba(255,255,255,0.72); }
.map-fallback svg { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; }

/* Attractions interactive */
.attractions-grid { display: grid; grid-template-columns: 380px 1fr; gap: 1.4rem; }
.attr-panel { background: rgba(247,243,236,0.05); border: 1px solid rgba(255,255,255,0.1); border-radius: 16px; overflow: hidden; display: flex; flex-direction: column; max-height: 660px; }
.attr-filters { display: flex; flex-wrap: wrap; gap: 0.5rem; padding: 1.2rem; border-bottom: 1px solid rgba(255,255,255,0.08); }
.filter-btn { font-size: 0.74rem; font-weight: 600; letter-spacing: 0.04em; color: rgba(255,255,255,0.7); border: 1px solid rgba(255,255,255,0.2); padding: 0.4rem 0.85rem; border-radius: 100px; transition: 0.3s; }
.filter-btn:hover { border-color: var(--oro-chiaro); color: var(--crema-puro); }
.filter-btn.active { background: var(--oro); border-color: var(--oro); color: var(--crema-puro); }
.attr-list { overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--oro) transparent; }
.attr-list::-webkit-scrollbar { width: 6px; }
.attr-list::-webkit-scrollbar-thumb { background: rgba(176,141,79,0.6); border-radius: 3px; }
.attr-item { padding: 1.1rem 1.4rem; border-bottom: 1px solid rgba(255,255,255,0.07); cursor: pointer; transition: background 0.3s; display: grid; grid-template-columns: auto 1fr auto; gap: 0.4rem 0.9rem; align-items: center; }
.attr-item:hover, .attr-item.active { background: rgba(176,141,79,0.16); }
.attr-item.active { box-shadow: inset 3px 0 0 var(--oro-chiaro); }
.attr-item .a-ic { grid-row: span 2; font-size: 1.5rem; }
.attr-item .a-name { font-family: var(--serif); font-size: 1.25rem; font-weight: 500; color: var(--crema-puro); line-height: 1.1; }
.attr-item .a-tag { grid-column: 2; font-size: 0.76rem; color: rgba(255,255,255,0.58); }
.attr-item .a-badge { grid-row: span 2; font-size: 0.62rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; padding: 0.3rem 0.55rem; border-radius: 100px; white-space: nowrap; }
.a-badge.imperdibile { background: rgba(176,141,79,0.22); color: var(--oro-chiaro); }
.a-badge.consigliata { background: rgba(92,158,173,0.22); color: var(--acqua-chiaro); }
.a-badge.sehaitempo { background: rgba(255,255,255,0.1); color: rgba(255,255,255,0.6); }

/* Mapbox popup card */
.mapboxgl-popup-content { border-radius: 14px !important; padding: 0 !important; overflow: hidden; box-shadow: var(--shadow-lg) !important; }
.mapboxgl-popup-close-button { font-size: 1.4rem; padding: 0.2rem 0.6rem; color: var(--grigio); z-index: 3; }
.attr-card { width: 290px; font-family: var(--sans); }
.attr-card .ac-head { padding: 1.1rem 1.3rem 0.8rem; background: var(--lago); color: var(--crema-puro); }
.attr-card .ac-badge { font-size: 0.62rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--oro-chiaro); }
.attr-card .ac-name { font-family: var(--serif); font-size: 1.5rem; font-weight: 500; line-height: 1.05; margin-top: 0.2rem; }
.attr-card .ac-tag { font-size: 0.78rem; color: rgba(255,255,255,0.7); margin-top: 0.2rem; }
.attr-card .ac-body { padding: 1rem 1.3rem 1.2rem; background: var(--crema-puro); }
.attr-card .ac-blurb { font-size: 0.82rem; color: var(--grigio); line-height: 1.5; margin-bottom: 0.9rem; }
.attr-card .ac-row { display: flex; gap: 0.6rem; font-size: 0.8rem; padding: 0.35rem 0; border-top: 1px solid var(--sabbia); }
.attr-card .ac-row .k { color: var(--grigio-chiaro); flex-shrink: 0; width: 78px; font-weight: 500; }
.attr-card .ac-row .v { color: var(--inchiostro); }
.attr-card .ac-note { margin-top: 0.7rem; font-size: 0.74rem; color: var(--oro); background: rgba(176,141,79,0.1); padding: 0.5rem 0.7rem; border-radius: 8px; }
.attr-card .ac-verify { margin-top: 0.7rem; font-size: 0.7rem; color: var(--grigio-chiaro); font-style: italic; }

/* Dettaglio = TERZA COLONNA a destra della mappa (fuori dal box mappa, non la copre).
   La griglia diventa lista | mappa | dettaglio quando si seleziona un posto. */
.attractions-grid { transition: grid-template-columns 0.45s var(--ease); }
/* lista larga anche col dettaglio aperto → le frasi non si accavallano */
.attractions-grid.detail-open { grid-template-columns: 380px minmax(0, 1fr) 320px; }
.attr-detail {
  position: relative; display: none;
  align-self: start;                 /* la card si adatta al contenuto, non si stira */
  background: var(--crema-puro);
  border-radius: 16px; box-shadow: var(--shadow-lg);
  overflow: hidden;                  /* angoli arrotondati puliti su head/body */
  max-height: 660px;                 /* se il contenuto fosse lunghissimo → scroll interno */
  scrollbar-width: thin; scrollbar-color: var(--oro) transparent;
}
.attractions-grid.detail-open .attr-detail { display: flex; flex-direction: column; animation: detailIn 0.45s var(--ease); }
.attr-detail .attr-card { overflow-y: auto; }
@keyframes detailIn { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: none; } }
.attr-detail::-webkit-scrollbar { width: 6px; }
.attr-detail::-webkit-scrollbar-thumb { background: rgba(176,141,79,0.6); border-radius: 3px; }
.attr-detail .attr-card { width: 100%; }
.attr-detail .attr-card .ac-head { padding-right: 3rem; }
.attr-detail .ad-close {
  position: absolute; top: 10px; right: 10px; z-index: 3;
  width: 30px; height: 30px; border-radius: 50%;
  background: rgba(255,255,255,0.22); color: #fff;
  display: grid; place-items: center; font-size: 1.2rem; line-height: 1;
  transition: background 0.25s, transform 0.25s;
}
.attr-detail .ad-close:hover { background: rgba(255,255,255,0.4); transform: rotate(90deg); }

/* ════════════════════════════════════════════════════════════════════════
   SERVIZI & REGOLE
   ════════════════════════════════════════════════════════════════════════ */
#servizi { padding: clamp(5rem, 12vh, 9rem) 0; background: var(--crema); }
.amen-head { text-align: center; margin-bottom: clamp(2.5rem, 6vh, 4rem); }
.amen-head .eyebrow { margin-bottom: 1rem; }
.amen-head .lede { margin-inline: auto; }
.amen-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1rem; margin-bottom: 2.5rem; }
@media (max-width: 1024px) { .amen-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 600px)  { .amen-grid { grid-template-columns: repeat(2, 1fr); } }
.amen-item {
  display: flex; align-items: center; gap: 0.7rem;
  padding: 0.95rem 1.1rem; border-radius: 12px;
  background: var(--crema-puro); border: 1px solid rgba(33,32,28,0.07);
  box-shadow: var(--shadow-sm);
  font-size: 0.88rem; font-weight: 500; color: var(--inchiostro);
  transition: transform 0.3s var(--ease), box-shadow 0.3s, border-color 0.3s;
}
.amen-item:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: rgba(176,141,79,0.4); }
.amen-item .ai { font-size: 1.3rem; flex-shrink: 0; }

.rules-bar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.7rem;
  padding: 1.3rem 1.6rem; border-radius: 14px;
  background: var(--lago); margin-bottom: 1.2rem;
}
.rules-title { font-family: var(--serif); font-size: 1.2rem; color: var(--crema-puro); margin-right: 0.5rem; }
.rule-chip {
  font-size: 0.8rem; font-weight: 600; letter-spacing: 0.02em;
  color: var(--crema-puro); background: rgba(247,243,236,0.12);
  border: 1px solid rgba(255,255,255,0.18);
  padding: 0.4rem 0.9rem; border-radius: 100px;
}
.rule-chip.rule-no { color: #f3c9c2; background: rgba(179,64,47,0.22); border-color: rgba(179,64,47,0.4); }
.rule-chip.rule-no::before { content: "🚫 "; }
.amen-safety { font-size: 0.82rem; color: var(--grigio); display: flex; gap: 0.5rem; align-items: flex-start; }
.amen-safety::before { content: "ℹ️"; }

/* ════════════════════════════════════════════════════════════════════════
   ESPERIENZE
   ════════════════════════════════════════════════════════════════════════ */
#esperienze { padding: clamp(5rem, 12vh, 9rem) 0; background: var(--sabbia); }
.exp-head { text-align: center; margin-bottom: clamp(3rem, 7vh, 5rem); }
.exp-head .eyebrow { margin-bottom: 1rem; }
.exp-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6rem; }
.exp-card { position: relative; border-radius: 14px; overflow: hidden; aspect-ratio: 3 / 4; box-shadow: var(--shadow-sm); transition: transform 0.5s var(--ease), box-shadow 0.5s; }
.exp-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-lg); }
.exp-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s var(--ease); }
.exp-card:hover img { transform: scale(1.08); }
.exp-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(16,42,42,0.9) 0%, rgba(16,42,42,0.15) 55%, transparent 100%); transition: opacity 0.5s; }
.exp-card:hover::after { background: linear-gradient(to top, rgba(16,42,42,0.94) 0%, rgba(27,66,66,0.35) 60%, rgba(27,66,66,0.1) 100%); }
.exp-card .exp-body { position: absolute; inset: auto 0 0 0; z-index: 2; padding: 1.8rem; color: var(--crema-puro); }
.exp-card .exp-ic { font-size: 1.7rem; display: block; margin-bottom: 0.6rem; transition: transform 0.5s var(--ease); }
.exp-card:hover .exp-ic { transform: translateY(-4px) scale(1.1); }
.exp-card h3 { font-family: var(--serif); font-weight: 500; font-size: 1.6rem; line-height: 1.08; }
.exp-card p { font-size: 0.85rem; color: rgba(255,255,255,0.78); margin-top: 0.4rem; max-height: 0; opacity: 0; overflow: hidden; transition: max-height 0.5s var(--ease), opacity 0.4s, margin 0.5s; }
.exp-card:hover p { max-height: 6rem; opacity: 1; margin-top: 0.6rem; }

/* ════════════════════════════════════════════════════════════════════════
   RECENSIONI
   ════════════════════════════════════════════════════════════════════════ */
#recensioni { padding: clamp(5rem, 12vh, 9rem) 0; background: var(--crema); }
.rev-top { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: clamp(2rem, 6vw, 5rem); align-items: center; margin-bottom: clamp(3rem, 7vh, 5rem); }
.rev-score { text-align: center; }
.rev-score .big { font-family: var(--serif); font-weight: 500; font-size: clamp(5rem, 11vw, 9rem); line-height: 0.9; color: var(--lago); }
.rev-score .big .slash { color: var(--oro); font-size: 0.4em; }
.rev-score .stars { color: var(--oro); font-size: 1.3rem; letter-spacing: 0.1em; margin: 0.6rem 0 0.3rem; }
.rev-score .count { font-size: 0.86rem; color: var(--grigio); letter-spacing: 0.04em; }
.subscores { display: grid; gap: 1rem; }
.subscore { display: grid; grid-template-columns: 130px 1fr 40px; gap: 1rem; align-items: center; }
.subscore .lbl { font-size: 0.86rem; color: var(--grigio); }
.subscore .track { height: 4px; background: var(--sabbia); border-radius: 2px; overflow: hidden; }
.subscore .fill { height: 100%; width: 0; background: linear-gradient(90deg, var(--acqua), var(--lago)); border-radius: 2px; transition: width 1.2s var(--ease); }
.subscore .val { font-size: 0.86rem; font-weight: 700; color: var(--lago); text-align: right; }

.rev-tags { display: flex; flex-wrap: wrap; gap: 0.7rem; justify-content: center; margin-bottom: clamp(2.5rem, 6vh, 4rem); }
.rev-tag { font-size: 0.82rem; font-weight: 500; color: var(--lago); background: var(--sabbia); padding: 0.5rem 1.1rem; border-radius: 100px; transition: 0.3s; }
.rev-tag:hover { background: var(--lago); color: var(--crema-puro); transform: translateY(-2px); }

.rev-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; }
.rev-card { background: var(--crema-puro); border: 1px solid rgba(33,32,28,0.06); border-radius: 14px; padding: 1.8rem; box-shadow: var(--shadow-sm); transition: transform 0.4s var(--ease), box-shadow 0.4s; }
.rev-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); }
.rev-card .qm { font-family: var(--serif); font-size: 3rem; line-height: 0.5; color: var(--oro); opacity: 0.4; }
.rev-card .body { font-size: 0.94rem; color: var(--inchiostro); line-height: 1.65; margin: 0.8rem 0 1.4rem; }
.rev-card .who { display: flex; justify-content: space-between; align-items: center; font-size: 0.82rem; }
.rev-card .who .nm { font-weight: 600; color: var(--lago); }
.rev-card .who .st { color: var(--oro); letter-spacing: 0.05em; }

/* ════════════════════════════════════════════════════════════════════════
   HOST
   ════════════════════════════════════════════════════════════════════════ */
#host { padding: clamp(5rem, 12vh, 9rem) 0; background: var(--lago); color: var(--crema-puro); }
.host-grid { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: clamp(2.5rem, 6vw, 6rem); align-items: center; }
.host-photo { position: relative; max-width: 320px; margin-inline: auto; }
.host-photo img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 50%; box-shadow: var(--shadow-lg); }
.host-photo .ring { position: absolute; inset: -14px; border: 1px solid rgba(207,169,104,0.4); border-radius: 50%; }
.host-photo .pill { position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%); background: var(--oro); color: var(--crema-puro); font-size: 0.74rem; font-weight: 600; letter-spacing: 0.04em; padding: 0.5rem 1rem; border-radius: 100px; white-space: nowrap; box-shadow: var(--shadow-md); }
.host-body .eyebrow { color: var(--oro-chiaro); margin-bottom: 1rem; }
.host-body h2 { font-family: var(--serif); font-weight: 500; font-size: clamp(2.4rem, 4.5vw, 3.8rem); line-height: 1.04; margin-bottom: 1.2rem; }
.host-body .quote { font-family: var(--serif); font-style: italic; font-size: clamp(1.2rem, 2vw, 1.6rem); color: var(--acqua-chiaro); line-height: 1.4; margin-bottom: 1.4rem; }
.host-body p { color: rgba(255,255,255,0.78); margin-bottom: 1rem; max-width: 52ch; }
.host-meta { display: flex; flex-wrap: wrap; gap: 1.6rem; margin: 1.6rem 0; }
.host-meta .m .n { font-family: var(--serif); font-size: 1.8rem; color: var(--oro-chiaro); }
.host-meta .m .l { font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255,255,255,0.55); }
.btn-host { background: transparent; border: 1px solid var(--oro-chiaro); color: var(--oro-chiaro); }
.btn-host:hover { background: var(--oro); border-color: var(--oro); color: var(--crema-puro); transform: translateY(-3px); }

/* ════════════════════════════════════════════════════════════════════════
   PRENOTA
   ════════════════════════════════════════════════════════════════════════ */
#prenota { padding: clamp(5rem, 12vh, 9rem) 0; background: var(--crema); }
.book-head { text-align: center; margin-bottom: clamp(3rem, 7vh, 5rem); }
.book-head .eyebrow { margin-bottom: 1rem; }
.book-head .lede { margin-inline: auto; text-align: center; }
.book-grid { display: grid; grid-template-columns: 1fr 420px; gap: clamp(2rem, 5vw, 4rem); align-items: start; }

.book-perks { display: grid; gap: 1.2rem; margin-bottom: 2rem; }
.perk { display: flex; gap: 1.1rem; align-items: flex-start; padding: 1.4rem; background: var(--crema-puro); border: 1px solid rgba(33,32,28,0.06); border-radius: 14px; box-shadow: var(--shadow-sm); }
.perk .ic { font-size: 1.8rem; flex-shrink: 0; }
.perk h4 { font-size: 1.05rem; color: var(--inchiostro); margin-bottom: 0.25rem; }
.perk p { font-size: 0.88rem; color: var(--grigio); }
.book-scarcity { display: flex; gap: 0.7rem; align-items: center; font-size: 0.88rem; color: var(--lago); background: rgba(92,158,173,0.12); border: 1px solid rgba(92,158,173,0.25); border-radius: 10px; padding: 0.9rem 1.2rem; margin-bottom: 1.4rem; }
.book-airbnb { font-size: 0.86rem; color: var(--grigio); }
.book-airbnb a { color: var(--oro); font-weight: 600; border-bottom: 1px solid currentColor; transition: 0.3s; }
.book-airbnb a:hover { color: var(--lago); }
#booking-engine:empty { display: none; }

/* Booking widget (sticky) */
.book-widget { position: sticky; top: 100px; background: var(--lago); border-radius: 18px; padding: 2rem; color: var(--crema-puro); box-shadow: var(--shadow-lg); }
.bw-price { display: flex; align-items: baseline; gap: 0.5rem; margin-bottom: 1.5rem; }
.bw-price .from { font-size: 0.78rem; color: rgba(255,255,255,0.6); text-transform: uppercase; letter-spacing: 0.1em; }
.bw-price .amt { font-family: var(--serif); font-size: 2.6rem; font-weight: 500; color: var(--crema-puro); }
.bw-price .per { font-size: 0.9rem; color: rgba(255,255,255,0.6); }
.bw-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 0.9rem; margin-bottom: 1rem; }
.bw-field { display: flex; flex-direction: column; gap: 0.35rem; }
.bw-field.full { grid-column: 1 / -1; }
.bw-field label { font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255,255,255,0.6); }
.bw-field input, .bw-field select { background: rgba(247,243,236,0.08); border: 1px solid rgba(255,255,255,0.18); border-radius: 9px; padding: 0.75rem 0.85rem; color: var(--crema-puro); font-family: inherit; font-size: 0.92rem; transition: border-color 0.3s, background 0.3s; }
.bw-field input:focus, .bw-field select:focus { outline: none; border-color: var(--oro-chiaro); background: rgba(247,243,236,0.12); }
.bw-field input::-webkit-calendar-picker-indicator { filter: invert(0.8); cursor: pointer; }
.bw-field select option { background: var(--lago-scuro); color: var(--crema-puro); }

.bw-estimate { background: rgba(247,243,236,0.06); border: 1px solid rgba(255,255,255,0.1); border-radius: 12px; padding: 1.1rem 1.2rem; margin-bottom: 1.2rem; min-height: 64px; }
.bw-est-row { display: flex; justify-content: space-between; align-items: center; font-size: 0.88rem; color: rgba(255,255,255,0.78); padding: 0.2rem 0; }
.bw-est-row.total { border-top: 1px solid rgba(255,255,255,0.14); margin-top: 0.5rem; padding-top: 0.7rem; font-weight: 700; color: var(--crema-puro); font-size: 1.05rem; }
.bw-est-row.bw-tax { font-size: 0.78rem; color: rgba(255,255,255,0.55); padding-top: 0.5rem; }
.bw-est-row.bw-tax em { font-style: normal; color: var(--oro-chiaro); font-size: 0.72rem; }
.bw-est-empty { font-size: 0.86rem; color: rgba(255,255,255,0.5); text-align: center; padding: 0.6rem 0; }
.bw-season { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; padding: 0.25rem 0.6rem; border-radius: 100px; }
.bw-season.alta { background: rgba(176,141,79,0.26); color: var(--oro-chiaro); }
.bw-season.media { background: rgba(92,158,173,0.26); color: var(--acqua-chiaro); }
.bw-season.bassa { background: rgba(255,255,255,0.12); color: rgba(255,255,255,0.7); }
.bw-cta { width: 100%; justify-content: center; margin-bottom: 0.8rem; }
.bw-note { font-size: 0.74rem; color: rgba(255,255,255,0.5); text-align: center; }

/* Booking modal */
#bookingModal { position: fixed; inset: 0; z-index: 9100; background: rgba(16,42,42,0.78); backdrop-filter: blur(8px); display: grid; place-items: center; padding: 1.5rem; opacity: 0; visibility: hidden; transition: opacity 0.4s var(--ease), visibility 0.4s; }
#bookingModal.open { opacity: 1; visibility: visible; }
.modal-card { background: var(--crema-puro); border-radius: 18px; width: min(560px, 100%); max-height: 90vh; overflow-y: auto; padding: clamp(1.8rem, 4vw, 2.8rem); transform: translateY(24px) scale(0.97); transition: transform 0.5s var(--ease); position: relative; }
#bookingModal.open .modal-card { transform: none; }
.modal-close { position: absolute; top: 1.2rem; right: 1.2rem; width: 40px; height: 40px; border-radius: 50%; background: var(--sabbia); color: var(--inchiostro); font-size: 1.2rem; display: grid; place-items: center; transition: 0.3s; }
.modal-close:hover { background: var(--oro); color: var(--crema-puro); transform: rotate(90deg); }
.modal-card h3 { font-family: var(--serif); font-weight: 500; font-size: clamp(1.8rem, 3.5vw, 2.4rem); color: var(--inchiostro); margin-bottom: 0.4rem; }
.modal-card .modal-sub { color: var(--grigio); font-size: 0.92rem; margin-bottom: 1.6rem; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.form-field { display: flex; flex-direction: column; gap: 0.35rem; }
.form-field.full { grid-column: 1 / -1; }
.form-field label { font-size: 0.74rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--grigio); font-weight: 600; }
.form-field input, .form-field select, .form-field textarea { font-family: inherit; font-size: 0.94rem; padding: 0.8rem 0.9rem; border: 1px solid rgba(33,32,28,0.16); border-radius: 9px; background: var(--crema); color: var(--inchiostro); transition: border-color 0.3s; }
.form-field input:focus, .form-field select:focus, .form-field textarea:focus { outline: none; border-color: var(--oro); }
.form-field textarea { resize: vertical; min-height: 84px; }
.form-field .err { font-size: 0.74rem; color: #b3402f; min-height: 1em; }
.form-submit { grid-column: 1 / -1; margin-top: 0.4rem; }
.btn-submit { width: 100%; justify-content: center; background: var(--oro); color: var(--crema-puro); box-shadow: 0 8px 24px rgba(176,141,79,0.35); }
.btn-submit:hover { background: var(--oro-chiaro); transform: translateY(-2px); }
.btn-submit:disabled { opacity: 0.6; cursor: wait; transform: none; }
.form-fallback-note { grid-column: 1/-1; font-size: 0.76rem; color: var(--grigio-chiaro); text-align: center; }

.form-success { text-align: center; padding: 1.5rem 0; }
.form-success .tick { width: 72px; height: 72px; border-radius: 50%; background: rgba(92,158,173,0.16); display: grid; place-items: center; margin: 0 auto 1.2rem; }
.form-success .tick svg { width: 36px; height: 36px; stroke: var(--lago); }
.form-success h3 { color: var(--lago); }
.form-success p { color: var(--grigio); margin-top: 0.5rem; }

/* ════════════════════════════════════════════════════════════════════════
   FAQ
   ════════════════════════════════════════════════════════════════════════ */
#faq { padding: clamp(4rem, 10vh, 7rem) 0; background: var(--sabbia); }
.faq-head { text-align: center; margin-bottom: clamp(2.5rem, 6vh, 4rem); }
.faq-list { max-width: 800px; margin-inline: auto; }
.faq-item { border-bottom: 1px solid rgba(33,32,28,0.12); }
.faq-q { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1.4rem 0; text-align: left; font-size: 1.1rem; font-weight: 500; color: var(--inchiostro); transition: color 0.3s; }
.faq-q:hover { color: var(--oro); }
.faq-q .pm { flex-shrink: 0; width: 26px; height: 26px; position: relative; }
.faq-q .pm::before, .faq-q .pm::after { content: ""; position: absolute; top: 50%; left: 50%; background: var(--oro); transition: transform 0.4s var(--ease); }
.faq-q .pm::before { width: 14px; height: 2px; transform: translate(-50%,-50%); }
.faq-q .pm::after { width: 2px; height: 14px; transform: translate(-50%,-50%); }
.faq-item.open .faq-q .pm::after { transform: translate(-50%,-50%) scaleY(0); }
.faq-a { max-height: 0; overflow: hidden; transition: max-height 0.5s var(--ease); }
.faq-a-inner { padding-bottom: 1.4rem; color: var(--grigio); font-size: 0.96rem; max-width: 66ch; }

/* ════════════════════════════════════════════════════════════════════════
   FOOTER
   ════════════════════════════════════════════════════════════════════════ */
#footer { background: var(--lago-scuro); color: rgba(255,255,255,0.7); padding: clamp(4rem, 9vh, 6rem) 0 2.5rem; }
.foot-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: clamp(2rem, 5vw, 4rem); margin-bottom: 3rem; }
.foot-brand .nm { font-family: var(--serif); font-size: 1.8rem; font-weight: 500; color: var(--crema-puro); }
.foot-brand .nm span { font-style: italic; color: var(--oro-chiaro); }
.foot-brand .sub { font-size: 0.84rem; letter-spacing: 0.06em; color: rgba(255,255,255,0.5); margin: 0.3rem 0 1.2rem; }
.foot-brand p { font-size: 0.88rem; max-width: 40ch; }
.foot-col h5 { font-size: 0.74rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--oro-chiaro); margin-bottom: 1.1rem; }
.foot-col a, .foot-col p { display: block; font-size: 0.9rem; color: rgba(255,255,255,0.7); margin-bottom: 0.7rem; transition: color 0.3s; }
.foot-col a:hover { color: var(--crema-puro); }
.foot-bottom { border-top: 1px solid rgba(255,255,255,0.1); padding-top: 1.8rem; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; align-items: center; }
.foot-cir { font-size: 0.8rem; color: rgba(255,255,255,0.55); }
.foot-cir code { font-family: ui-monospace, monospace; color: var(--oro-chiaro); letter-spacing: 0.04em; }
.foot-credit { font-size: 0.78rem; color: rgba(255,255,255,0.4); }
.foot-safety { font-size: 0.76rem; color: rgba(255,255,255,0.4); margin-top: 0.6rem; max-width: 60ch; }

/* ════════════════════════════════════════════════════════════════════════
   RESPONSIVE
   ════════════════════════════════════════════════════════════════════════ */
@media (max-width: 1280px) {
  .property-map-grid { grid-template-columns: 1fr 300px; }
  .attractions-grid { grid-template-columns: 360px 1fr; }
  .attractions-grid.detail-open { grid-template-columns: 340px minmax(0, 1fr) 300px; }
}
@media (max-width: 1024px) {
  .nav-menu { display: none; }
  .nav-burger { display: flex; color: var(--crema); }
  #nav.solid .nav-burger { color: var(--inchiostro); }
  .property-map-grid, .attractions-grid, .attractions-grid.detail-open, .book-grid, .host-grid, .rev-top { grid-template-columns: 1fr; }
  .room-img { aspect-ratio: 16 / 11; }
  .room-panel { width: min(440px, 90%); margin-top: -70px; }
  .exp-grid { grid-template-columns: repeat(2, 1fr); }
  .rev-cards { grid-template-columns: 1fr 1fr; }
  .foot-grid { grid-template-columns: 1fr 1fr; }
  .book-widget { position: static; }
  .attr-panel { max-height: 420px; }
  .map-canvas { min-height: 440px; }
  .host-photo { max-width: 240px; }
}
@media (max-width: 720px) {
  .exp-grid, .rev-cards, .foot-grid, .bw-fields, .form-grid { grid-template-columns: 1fr; }
  .hero-badge { display: none; }
  .intro-kpis { gap: 2rem; }
  .exp-card p { max-height: 6rem; opacity: 1; margin-top: 0.6rem; }
  .room-img { aspect-ratio: 4 / 3; }
  .room-panel { width: 100%; margin: -50px 0 0; }
}

/* Nav mobile drawer */
.nav-drawer { position: fixed; inset: 0; z-index: 999; background: var(--lago); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.6rem; transform: translateX(100%); transition: transform 0.5s var(--ease); }
.nav-drawer.open { transform: none; }
.nav-drawer a { font-family: var(--serif); font-size: 2rem; color: var(--crema-puro); }
.nav-drawer .nav-cta { font-family: var(--sans); font-size: 1rem; }

/* ════════ SEZIONI AGGIUNTE: stagioni · itinerario · come arrivare ════════ */
.exp-head .section-lede { color: var(--grigio); font-size: 1.06rem; max-width: 60ch; margin: 1.1rem auto 0; }

/* Quando venire */
#stagioni { padding: clamp(5rem, 12vh, 9rem) 0; background: var(--crema); }
.seasons-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.4rem; }
.season-card { position: relative; border-radius: 16px; padding: 2rem 1.6rem 1.8rem; background: var(--crema-puro); border: 1px solid rgba(27,66,66,0.1); box-shadow: var(--shadow-sm); overflow: hidden; transition: transform 0.5s var(--ease), box-shadow 0.5s; }
.season-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-lg); }
.season-card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: var(--oro-chiaro); }
.season-card.spring::before { background: #d98fb0; }
.season-card.summer::before { background: #e8a93c; }
.season-card.autumn::before { background: #c0702f; }
.season-card.winter::before { background: #7fa8c9; }
.season-ic { font-size: 2rem; display: block; }
.season-card h3 { font-family: var(--serif); font-weight: 500; font-size: 1.7rem; margin-top: 0.8rem; color: var(--inchiostro); }
.season-mo { display: inline-block; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.05em; color: var(--oro); margin: 0.2rem 0 0.8rem; }
.season-card p { font-size: 0.9rem; color: var(--grigio); line-height: 1.55; }
.season-tag { display: inline-block; margin-top: 1.1rem; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.04em; padding: 0.32rem 0.7rem; border-radius: 100px; background: rgba(27,66,66,0.08); color: var(--lago); }
.season-tag.hot { background: rgba(232,169,60,0.18); color: #9a6a13; }
.season-tag.cool { background: rgba(127,168,201,0.2); color: #3a6890; }

/* Itinerario (timeline) */
#itinerario { padding: clamp(5rem, 12vh, 9rem) 0; background: var(--lago); }
#itinerario .section-title, #itinerario .exp-head .eyebrow { color: var(--crema-puro); }
#itinerario .section-lede { color: rgba(255,255,255,0.78); }
.timeline { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6rem; }
.tl-day { position: relative; padding: 2.2rem 1.8rem; border-radius: 16px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.12); transition: transform 0.5s var(--ease), background 0.5s; }
.tl-day:hover { transform: translateY(-6px); background: rgba(255,255,255,0.08); }
.tl-n { font-family: var(--serif); font-size: 2.6rem; font-weight: 500; color: var(--oro-chiaro); line-height: 1; }
.tl-day h3 { font-family: var(--serif); font-weight: 500; font-size: 1.5rem; color: var(--crema-puro); margin: 0.6rem 0 0.7rem; }
.tl-day p { font-size: 0.92rem; color: rgba(255,255,255,0.8); line-height: 1.6; }

/* Come arrivare */
#comearrivare { padding: clamp(5rem, 12vh, 9rem) 0; background: var(--sabbia); }
.arrive-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.4rem; }
.arrive-card { padding: 2rem 1.6rem; border-radius: 16px; background: var(--crema-puro); border: 1px solid rgba(27,66,66,0.1); box-shadow: var(--shadow-sm); transition: transform 0.5s var(--ease), box-shadow 0.5s; }
.arrive-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-lg); }
.arrive-ic { font-size: 2rem; display: block; margin-bottom: 0.7rem; }
.arrive-card h3 { font-family: var(--serif); font-weight: 500; font-size: 1.5rem; color: var(--inchiostro); }
.arrive-card p { font-size: 0.9rem; color: var(--grigio); line-height: 1.55; margin-top: 0.5rem; }

@media (max-width: 1024px) {
  .seasons-grid, .arrive-grid { grid-template-columns: repeat(2, 1fr); }
  .timeline { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .seasons-grid, .arrive-grid { grid-template-columns: 1fr; }
}