@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/lato-v25-latin-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/lato-v25-latin-700.woff2') format('woff2');
}
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/playfair-display-v40-latin-400.woff2') format('woff2');
}

:root {
  --color-bg: #FAF6EF;
  --color-bg-warm: #EFE7D8;
  --color-bg-warm-rgb: 239, 231, 216;
  --color-bg-section: #FCFAF7;
  --color-bg-input: #F3ECDF;
  --color-bg-card: #FFFDFA;
  --color-text: #2B2724;
  --color-text-strong: #231F1C;
  --color-text-body: #3A322C;
  --color-text-muted: #4A423B;
  --color-text-mutedmore: #5C544C;
  --color-text-light: #8A7F73;
  --color-accent: #C0563A;
  --color-accent-hover: #A2432A;
  --color-accent-alt: #C25538;
  --color-teal: #22424A;
  --color-gold: #D08A2C;
  --nav-height: clamp(100px, 10vw + 32px, 136px);
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--nav-height);
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

.site-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 40;
  background: transparent;
  transition: background-color .25s ease, backdrop-filter .25s ease, box-shadow .25s ease;
}
.site-nav.is-scrolled {
  background: rgba(var(--color-bg-warm-rgb), 0.88);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 4px 14px rgba(43,39,36,0.12);
}

.nav-links {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px clamp(16px, 2.5vw, 38px);
}

.nav-toggle {
  display: none;
  border: none;
  background: transparent;
  color: var(--color-text-strong);
  font-size: 28px;
  line-height: 1;
  padding: 4px 6px;
  cursor: pointer;
}

@media (max-width: 768px) {
  .nav-toggle { display: block; }
  .nav-links {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
    background: rgba(var(--color-bg-warm-rgb), 0.97);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    padding: 20px clamp(16px, 4vw, 48px) 28px;
    box-shadow: 0 12px 24px rgba(43, 39, 36, 0.18);
  }
  .nav-links.is-open { display: flex; }
}

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: 'Lato', sans-serif;
}

a { color: var(--color-accent-alt); text-decoration: none; }
a:hover { color: var(--color-accent-hover); }
img { max-width: 100%; display: block; }

/* Layout primitives — shared by index.html and prenotazione.html.
   Centralizing these here (instead of per-section inline max-width/grid
   values) keeps the page width and column proportions consistent and
   editable from one place, ahead of the CI4 port. */
.container {
  max-width: min(96%, 75%);
  margin: 0 auto;
}
@media (max-width: 768px) {
  /* min(96%, 75%) always resolves to 75% (both are percentages of the
     same base, and 75% < 96%), capping the container far narrower than
     intended and adding a large margin on top of each section's own
     lateral padding. Let width go full-bleed here — the per-section
     clamp(16px,4vw,48px) padding is the actual edge spacing on mobile. */
  .container { max-width: 100%; }
}

.property-grid {
  display: grid;
  grid-template-columns: 50fr 50fr;
  gap: clamp(32px, 5vw, 66px);
  align-items: start;
}
@media (max-width: 768px) {
  .property-grid { grid-template-columns: 1fr; }
}

/* Hero decorative blobs. Position/size live here (not inline) so the
   mobile override below can actually win — inline styles would otherwise
   beat any class selector regardless of media query.
   Aspect ratios are desktop-measured (pixel width/height of each blob at
   1280px) so every blob keeps its true proportions at any screen size
   instead of stretching when width% and height% scale against different
   container axes. */
.hero-blob { position: absolute; }
.hero-blob-1 { left: -12%; top: -30%; width: 46%; aspect-ratio: 589 / 645; }
.hero-blob-2 { right: -14%; top: 150px; width: 46%; aspect-ratio: 589 / 693; }
.hero-blob-3 { right: -10%; bottom: -34%; width: 42%; aspect-ratio: 538 / 596; }
.hero-blob-4 { right: 12%; bottom: -8%; width: 13%; aspect-ratio: 166 / 226; }
.hero-blob-5 { right: 2%; top: 38%; width: 26%; aspect-ratio: 333 / 742; }
.hero-blob-6 { left: -10%; top: 20%; width: 15%; aspect-ratio: 1 / 1; }
.hero-blob-7 { left: -11%; bottom: -18%; width: 17%; aspect-ratio: 1 / 1; }

/* On mobile the hero column stacks (text, then the search widget below it),
   making the section much taller relative to its width than on desktop.
   Sizing purely off container width (as on desktop, above) shrinks every
   blob far too small for that height and most end up clipped out of view
   by #hero's overflow:hidden. These overrides keep each blob's aspect-ratio
   but resize/reposition it to actually backdrop the stacked content instead
   of disappearing above or below it. */
@media (max-width: 768px) {
  .hero-blob-1 { top: -5%; left: -15%; width: 65%; }
  .hero-blob-2 { top: 2%; right: -20%; width: 62%; }
  .hero-blob-3 { bottom: -8%; right: -22%; width: 60%; }
  .hero-blob-4 { bottom: 20%; right: 8%; width: 14%; }
  .hero-blob-5 { top: 34%; right: -10%; width: 30%; }
  .hero-blob-6 { top: 16%; left: -8%; width: 16%; }
  .hero-blob-7 { bottom: 8%; left: -10%; width: 16%; }
}

.gallery-box {
  position: relative;
  aspect-ratio: 4 / 3;
  border-left: 4px solid transparent;
  box-shadow: 0 18px 44px rgba(43, 39, 36, 0.14);
}

.card {
  background: #FFF;
  box-shadow: 0 26px 64px rgba(43, 39, 36, 0.22);
  padding: 25px;
}

.btn-primary {
  border: none;
  background: var(--color-accent);
  color: #fff;
  font-family: 'Lato', sans-serif;
  font-weight: 700;
  cursor: pointer;
  transition: background .2s ease;
}
.btn-primary:hover { background: var(--color-accent-hover); color: #fff; }

.btn-outline {
  border: 1px solid var(--color-accent);
  color: var(--color-accent);
  font-family: 'Lato', sans-serif;
  background: transparent;
  cursor: pointer;
  transition: background .2s ease;
}
.btn-outline:hover { background: rgba(192,86,58,0.08); color: var(--color-accent); }

.btn-outline-teal {
  border: 1px solid var(--color-teal);
  color: var(--color-teal);
  background: transparent;
  cursor: pointer;
  transition: background .2s ease;
}
.btn-outline-teal:hover { background: rgba(34,66,74,0.08); color: var(--color-teal); }

.nav-link { color: var(--color-text-body); font-size: 16px; }
.nav-link:hover { color: var(--color-accent); }

.icon-btn {
  width: 30px; height: 30px; border: none; background: transparent;
  color: var(--color-text-mutedmore); cursor: pointer; font-size: 14px;
  display: flex; align-items: center; justify-content: center;
}
.icon-btn:hover { color: var(--color-accent); }

.icon-btn-round {
  border: none; border-radius: 50%; background: #fff; color: #2B2724;
  box-shadow: 0 4px 14px rgba(43,39,36,0.18); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.icon-btn-round:hover { background: var(--color-bg-input); }

.counter-btn {
  border: 1px solid rgba(43,39,36,0.25); border-radius: 50%; background: var(--color-bg-card);
  color: var(--color-text-body); cursor: pointer; font-size: 12px;
  display: flex; align-items: center; justify-content: center;
}
.counter-btn:hover { border-color: var(--color-accent); color: var(--color-accent); }

.input-field {
  font-family: 'Lato', sans-serif; font-size: 15px; padding: 13px 14px;
  border: 1px solid rgba(43,39,36,0.22); background: var(--color-bg-input);
  color: var(--color-text-strong); outline: none; width: 100%;
}
.input-field:focus { border-color: var(--color-accent); background: var(--color-bg-card); }

.tag-pill {
  border: 1px solid rgba(43,39,36,0.16); border-radius: 2px; padding: 7px 12px;
  font-size: 13px; color: var(--color-text-muted); display: inline-block;
}

.dot {
  height: 7px; width: 7px; border: none; border-radius: 99px; padding: 0; cursor: pointer;
  transition: all .25s ease; background: rgba(43,39,36,0.28);
}
.dot.is-active { width: 20px; background: var(--color-text-strong); }

.gallery-slide {
  position: absolute; inset: 0; transition: opacity .35s ease;
  display: flex; align-items: center; justify-content: center;
  background: #000; color: var(--color-text-light);
  font-size: 13px; text-align: center;
}
.gallery-slide.is-hidden { opacity: 0; pointer-events: none; }

.calendar-day {
  border: none; background: transparent; font-family: 'Lato', sans-serif; font-size: 14px;
  height: 34px; cursor: pointer; transition: all .15s ease; color: var(--color-text-body);
}
.calendar-day.is-empty { visibility: hidden; cursor: default; }
.calendar-day.is-busy {
  background: repeating-linear-gradient(45deg,#E3DACB,#E3DACB 3px,#F7F2E8 3px,#F7F2E8 6px);
  color: #AFA69A; text-decoration: line-through; cursor: not-allowed;
}
.calendar-day.is-selected { background: var(--color-accent); color: #fff; }
.calendar-day.is-in-range { background: var(--color-bg-input); color: var(--color-text-body); }

.gallery-tab, .house-tab {
  flex: 1; font-family: 'Lato', sans-serif; font-size: 14px; padding: 12px 6px;
  cursor: pointer; transition: all .2s ease; background: var(--color-bg-card);
  color: var(--color-text-body); border: 1px solid rgba(43,39,36,0.2);
}
.gallery-tab.is-active, .house-tab.is-active {
  background: var(--color-accent); color: #fff; border: 1px solid var(--color-accent);
}

.whatsapp-fab {
  position: fixed; right: clamp(16px,3vw,28px); bottom: clamp(16px,3vw,28px); z-index: 60;
  display: flex; align-items: center; justify-content: center; width: 60px; height: 60px;
  border-radius: 50%; background: #25D366; box-shadow: 0 10px 28px rgba(43,39,36,0.28);
  transition: transform .2s ease, background .2s ease;
}
.whatsapp-fab:hover { background: #1EBE59; color: #fff; transform: translateY(-2px); }

.cookie-banner {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
  background: var(--color-text-strong); color: #fff;
  padding: 20px clamp(20px, 4vw, 48px);
  box-shadow: 0 -6px 20px rgba(43, 39, 36, 0.25);
}
.cookie-banner-inner {
  max-width: min(96%, 1100px); margin: 0 auto;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 24px;
}
.cookie-banner-inner p { margin: 0; font-size: 14px; line-height: 1.6; color: #fff; flex: 1 1 320px; }
.cookie-banner-inner a { color: #fff; text-decoration: underline; }
.cookie-banner-actions { display: flex; gap: 12px; flex-shrink: 0; }

.grecaptcha-badge { visibility: hidden; }

[hidden] { display: none !important; }