/* Umbria Private Spa Villa — bozza della home */

@font-face { font-family: "Inter Tight"; src: url("../fonts/inter-tight-latin-wght-normal.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Instrument Serif"; src: url("../fonts/instrument-serif-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Instrument Serif"; src: url("../fonts/instrument-serif-latin-400-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }

:root {
  --bg: #f7f4ee;
  --paper: #ffffff;
  --stone: #ebe5db;
  --ink: #1d1b18;
  --ink-2: #57514a;
  --ink-3: #8c857b;
  --line: #e2dbd0;
  --night: #161513;
  --night-2: #23211e;
  --on-night: #f3efe8;
  --on-night-2: #b9b2a7;

  --sans: "Inter Tight", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --serif: "Instrument Serif", ui-serif, Georgia, serif;

  --gutter: clamp(16px, 4vw, 56px);
  --edge: calc(10px + clamp(16px, 2vw, 30px)); /* margine della copertina e della testata */
  --max: 1400px;
  --radius: 20px;
  --radius-s: 14px;
  --ease: cubic-bezier(.2, .7, .1, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: var(--sans); font-size: 17px; line-height: 1.6; font-weight: 400;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, video { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }

.wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }

.label {
  font-size: 12px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-3);
}
.serif { font-family: var(--serif); font-weight: 400; }
.serif-i { font-family: var(--serif); font-style: italic; font-weight: 400; }

.display {
  font-weight: 300; letter-spacing: -.035em; line-height: .92; margin: 0;
  font-size: clamp(44px, 10.5vw, 168px);
}
.h2 {
  font-weight: 300; letter-spacing: -.03em; line-height: 1.04; margin: 0;
  font-size: clamp(36px, 5.6vw, 84px);
}
.lead {
  font-weight: 300; letter-spacing: -.02em; line-height: 1.18; margin: 0;
  font-size: clamp(26px, 3.6vw, 52px);
}
.body-l { font-size: clamp(17px, 1.35vw, 19px); color: var(--ink-2); max-width: 46ch; }

/* Banner di bozza */
.draft-flag {
  position: fixed; left: 50%; top: 84px; transform: translateX(-50%); z-index: 60;
  background: #b4472b; color: #fff; font-size: 12px; letter-spacing: .08em; text-transform: uppercase;
  padding: 7px 14px; border-radius: 99px; pointer-events: none; font-weight: 500; white-space: nowrap;
}

/* Testata */
.header {
  position: fixed; inset: 0 0 auto 0; z-index: 50; color: #fff;
  padding-top: env(safe-area-inset-top, 0px);
  transition: background .4s var(--ease), color .4s var(--ease), box-shadow .4s var(--ease);
}
.header .wrap { display: flex; align-items: center; justify-content: space-between; height: 76px; gap: 24px; max-width: none; padding-inline: var(--edge); }
.header.solid { background: rgba(247, 244, 238, .9); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); color: var(--ink); box-shadow: 0 1px 0 var(--line); }
.brand { text-decoration: none; display: flex; flex-direction: column; line-height: 1; gap: 5px; }
.brand b { font-weight: 500; font-size: 12px; letter-spacing: .28em; text-transform: uppercase; }
.brand .brand-sub { font-family: var(--serif); font-style: italic; font-size: 14px; letter-spacing: .01em; opacity: .8; }
.nav { display: flex; align-items: center; gap: clamp(16px, 2.2vw, 34px); font-size: 14px; }
.nav a { text-decoration: none; opacity: .9; }
.nav a:hover { opacity: 1; text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; }
.lang { display: flex; gap: 8px; font-size: 13px; letter-spacing: .06em; }
.lang a[aria-current] { font-weight: 600; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: 48px; padding: 0 22px; border-radius: 10px; border: 1px solid transparent;
  font-size: 15px; font-weight: 500; letter-spacing: .01em; text-decoration: none; cursor: pointer;
  transition: transform .3s var(--ease), background .3s var(--ease), color .3s var(--ease);
}
.btn:hover { transform: translateY(-1px); }
.btn-dark { background: var(--ink); color: #fff; }
.btn-light { background: #fff; color: var(--ink); }
.btn-ghost { border-color: currentColor; background: transparent; }
.header .btn { height: 42px; padding: 0 18px; font-size: 14px; }
.header:not(.solid) .btn-dark { background: #fff; color: var(--ink); }
.menu-toggle { display: none; background: none; border: 0; padding: 8px; cursor: pointer; }
.menu-toggle span { display: block; width: 24px; height: 1.5px; background: currentColor; margin: 6px 0; }

/* Copertina */
.hero { position: relative; height: calc(100svh - 40px); min-height: 620px; padding: 10px; }
.hero-media {
  position: relative; height: 100%; border-radius: var(--radius); overflow: hidden; background: #2a2620;
}
.hero-media video, .hero-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.38) 0%, rgba(0,0,0,0) 26%, rgba(0,0,0,0) 48%, rgba(0,0,0,.55) 100%);
}
.hero-copy {
  position: absolute; z-index: 2; left: 0; right: 0; bottom: clamp(96px, 14vh, 150px); color: #fff;
  padding-inline: var(--edge);
}
.hero-copy .display { margin-left: -.05em; }
.hero-copy .label { color: rgba(255,255,255,.85); margin-bottom: 22px; display: block; }
.hero-copy .display span { display: block; white-space: nowrap; }
.hero-sub {
  margin: 26px 0 0; max-width: 34ch; font-size: clamp(17px, 1.5vw, 21px); line-height: 1.45; color: rgba(255,255,255,.9);
}
.film-btn {
  position: absolute; z-index: 2; right: var(--edge); bottom: clamp(96px, 14vh, 150px);
  display: flex; align-items: center; gap: 14px; background: none; border: 0; color: #fff; cursor: pointer; font-size: 14px; letter-spacing: .04em;
}
.film-btn i {
  width: 64px; height: 64px; border-radius: 50%; border: 1px solid rgba(255,255,255,.7); display: grid; place-items: center;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); background: rgba(255,255,255,.08); transition: background .3s;
}
.film-btn:hover i { background: rgba(255,255,255,.22); }
.film-btn svg { width: 16px; height: 16px; margin-left: 3px; }

/* Barra di prenotazione */
.booking { position: relative; z-index: 5; margin-top: -58px; }
.booking-card {
  background: var(--paper); border-radius: 18px; box-shadow: 0 24px 60px -24px rgba(29,27,24,.28), 0 2px 6px rgba(29,27,24,.05);
  display: grid; grid-template-columns: 1fr 1fr 1fr auto; align-items: stretch; padding: 8px;
}
.field { display: flex; flex-direction: column; justify-content: center; gap: 2px; padding: 12px 22px; border-right: 1px solid var(--line); min-width: 0; }
.field:nth-child(3) { border-right: 0; }
.field label { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); font-weight: 500; }
.field input, .field select {
  border: 0; background: transparent; padding: 2px 0; font: inherit; font-size: 17px; color: var(--ink); width: 100%; outline: none; appearance: none; -webkit-appearance: none;
}
.booking-card .btn { height: auto; min-height: 58px; padding: 0 30px; border-radius: 12px; }
.booking-note { font-size: 13px; color: var(--ink-3); margin: 14px 4px 0; display: flex; gap: 22px; flex-wrap: wrap; }
.booking-note span::before { content: "✓"; margin-right: 8px; color: var(--ink-2); }
.booking-msg { display: none; margin: 14px 4px 0; font-size: 14px; color: var(--ink-2); background: var(--stone); border-radius: 10px; padding: 12px 16px; }
.booking-msg.on { display: block; }

/* Sezioni */
section { position: relative; }
.pad { padding-block: clamp(88px, 12vw, 170px); }
.pad-s { padding-block: clamp(64px, 8vw, 110px); }

.intro .lead { max-width: 23ch; }
.intro .lead em { font-family: var(--serif); font-style: italic; letter-spacing: -.01em; }
.facts {
  margin-top: clamp(56px, 7vw, 96px); display: grid; grid-template-columns: repeat(6, 1fr); border-top: 1px solid var(--line);
}
.fact { padding: 26px 18px 0 0; }
.fact strong { display: block; font-weight: 300; font-size: clamp(30px, 3.2vw, 46px); letter-spacing: -.03em; line-height: 1; }
.fact span { display: block; margin-top: 10px; font-size: 14px; color: var(--ink-2); }

.head { display: grid; grid-template-columns: 1.1fr .9fr; gap: 40px; align-items: end; margin-bottom: clamp(40px, 5vw, 72px); }
.head .serif-i { font-size: clamp(22px, 2vw, 28px); color: var(--ink-2); display: block; margin-bottom: 14px; }
.head p { margin: 0; }

/* L'acqua — sezione scura */
.water { background: var(--night); color: var(--on-night); }
.water .serif-i, .water .label { color: var(--on-night-2); }
.water .body-l { color: var(--on-night-2); }
.water-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: clamp(12px, 1.4vw, 20px); }
.ph { position: relative; overflow: hidden; border-radius: var(--radius-s); background: var(--night-2); margin: 0; }
.ph img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.ph:hover img { transform: scale(1.03); }
.ph figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 40px 20px 16px; color: #fff; font-size: 14px;
  background: linear-gradient(180deg, transparent, rgba(0,0,0,.55));
}
.ph figcaption b { display: block; font-weight: 500; font-size: 16px; }
.w-a { grid-column: span 8; aspect-ratio: 16 / 9; }
.w-b { grid-column: span 4; }
.w-c, .w-d, .w-e { grid-column: span 4; aspect-ratio: 4 / 3; }
/* le foto che si allungano all'altezza della vicina non devono spingere la riga */
.w-b img, .o-b img, .o-c img { position: absolute; inset: 0; }
.spa-film video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sound-btn {
  position: absolute; z-index: 2; top: 16px; right: 16px; display: inline-flex; align-items: center; gap: 10px;
  height: 42px; padding: 0 16px 0 12px; border-radius: 99px; border: 1px solid rgba(255,255,255,.45); cursor: pointer;
  background: rgba(20,19,17,.35); color: #fff; font-size: 14px; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  transition: background .3s var(--ease);
}
.sound-btn:hover { background: rgba(20,19,17,.55); }
.sound-btn svg { width: 20px; height: 20px; }
.sound-btn .wave { display: none; }
.sound-btn[aria-pressed="true"] .wave { display: inline; }
.sound-btn[aria-pressed="true"] .mute { display: none; }

/* All'aperto */
.full-top { margin-top: clamp(40px, 6vw, 84px); }
.out-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: clamp(12px, 1.4vw, 20px); }
.o-a, .o-d { grid-column: span 7; aspect-ratio: 3 / 2; }
.o-b, .o-c { grid-column: span 5; }
.o-e { grid-column: span 4; aspect-ratio: 4 / 3; }
.water-quote { grid-column: span 12; padding-block: clamp(40px, 6vw, 90px) 0; }
.water-quote p { margin: 0; font-family: var(--serif); font-style: italic; font-size: clamp(30px, 4vw, 60px); line-height: 1.1; max-width: 26ch; color: var(--on-night); }

/* Rotaia orizzontale (La casa) */
.rail {
  display: grid; grid-auto-flow: column; grid-auto-columns: clamp(270px, 30vw, 440px); gap: clamp(12px, 1.4vw, 20px);
  overflow-x: auto; scroll-snap-type: x mandatory; padding-inline: max(var(--gutter), calc((100vw - var(--max)) / 2 + var(--gutter))); scroll-padding-inline: max(var(--gutter), calc((100vw - var(--max)) / 2 + var(--gutter))); padding-bottom: 8px;
  scrollbar-width: none; max-width: 100vw;
}
.rail::-webkit-scrollbar { display: none; }
.card { scroll-snap-align: start; margin: 0; }
.card .ph { aspect-ratio: 4 / 5; }
.inq-camino { object-position: 94% 50%; } /* il camino è sul lato destro della foto */
.inq-balilla { object-position: 30% 50%; } /* il calcio balilla è sul lato sinistro */
.card figcaption.under { padding: 14px 2px 0; }
.card figcaption.under b { font-weight: 500; font-size: 17px; display: block; }
.card figcaption.under span { font-size: 13px; color: var(--ink-3); letter-spacing: .02em; }
.rail-ctrl { display: flex; gap: 10px; }
.rail-ctrl button {
  width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--line); background: var(--paper); cursor: pointer; display: grid; place-items: center;
}
.rail-ctrl svg { width: 18px; height: 18px; }

/* Camere */
.rooms { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(24px, 4vw, 72px); align-items: start; }
.rooms-text { position: sticky; top: 110px; }
.rooms-text ul { list-style: none; padding: 0; margin: 32px 0 0; border-top: 1px solid var(--line); }
.rooms-text li { display: flex; justify-content: space-between; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--line); font-size: 15px; }
.rooms-text li span:last-child { color: var(--ink-3); text-align: right; }
.rooms-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(12px, 1.4vw, 20px); }
.rooms-grid .ph:nth-child(1) { grid-column: span 2; aspect-ratio: 16 / 10; }
.rooms-grid .ph:nth-child(n+2) { aspect-ratio: 4 / 3; }

/* Fuori — immagine a tutta pagina */
.full { padding: 10px; }
.full-media { position: relative; border-radius: var(--radius); overflow: hidden; height: min(92svh, 980px); min-height: 520px; }
.full-media img { position: absolute; inset: -6% 0; width: 100%; height: 112%; object-fit: cover; will-change: transform; }
.full-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.05) 40%, rgba(0,0,0,.5)); }
.full-copy { position: absolute; z-index: 2; left: 0; right: 0; bottom: clamp(36px, 6vw, 80px); color: #fff; }
.full-copy .h2 { max-width: 13ch; }
.full-copy p { margin: 18px 0 0; max-width: 40ch; color: rgba(255,255,255,.9); }
.duo { display: grid; grid-template-columns: 7fr 5fr; gap: clamp(12px, 1.4vw, 20px); margin-top: clamp(12px, 1.4vw, 20px); }
.duo .ph:first-child { aspect-ratio: 16 / 10; }
.duo .ph:last-child { aspect-ratio: auto; }

/* Territorio */
.area { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 90px); align-items: center; }
.area .ph { aspect-ratio: 5 / 6; }
.dist { list-style: none; margin: 36px 0 0; padding: 0; border-top: 1px solid var(--line); }
.dist li { display: grid; grid-template-columns: 1fr auto; padding: 16px 0; border-bottom: 1px solid var(--line); align-items: baseline; }
.dist li b { font-weight: 400; font-size: 18px; }
.dist li span { font-variant-numeric: tabular-nums; color: var(--ink-2); font-size: 15px; }
.dist-note { margin-top: 12px; font-size: 13px; color: var(--ink-3); }

/* Journal */
.journal { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2vw, 28px); }
.post { text-decoration: none; display: block; }
.post .ph { aspect-ratio: 4 / 3; }
.post h3 { font-weight: 400; font-size: 20px; line-height: 1.3; letter-spacing: -.01em; margin: 16px 0 6px; }
.post span { font-size: 13px; color: var(--ink-3); }
.post:hover h3 { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.example-tag { display: inline-block; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: #b4472b; margin-left: 10px; vertical-align: middle; }

/* Prenota diretto */
.direct { background: var(--stone); border-radius: var(--radius); padding: clamp(36px, 6vw, 90px); display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(28px, 5vw, 80px); align-items: center; }
.direct .h2 { font-size: clamp(34px, 4.6vw, 68px); }
.perks { list-style: none; margin: 0; padding: 0; }
.perks li { padding: 18px 0; border-bottom: 1px solid rgba(29,27,24,.14); display: grid; grid-template-columns: 34px 1fr; }
.perks li:first-child { border-top: 1px solid rgba(29,27,24,.14); }
.perks li b { font-weight: 500; display: block; }
.perks li span { color: var(--ink-2); font-size: 15px; }
.perks li i { font-family: var(--serif); font-style: italic; font-size: 20px; color: var(--ink-3); line-height: 1.2; }
.direct .btn { margin-top: 30px; }

/* Galleria */
.gallery { columns: 3; column-gap: clamp(10px, 1.2vw, 16px); }
.gallery button { all: unset; display: block; cursor: zoom-in; margin-bottom: clamp(10px, 1.2vw, 16px); break-inside: avoid; border-radius: 10px; overflow: hidden; background: var(--stone); }
.gallery button[hidden] { display: none; }
.gallery button:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.gallery img { width: 100%; height: auto; transition: transform 1s var(--ease), opacity .6s; }
.gallery button:hover img { transform: scale(1.025); }
.gallery-more { text-align: center; margin-top: 36px; }

/* Domande frequenti */
.faq { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(24px, 5vw, 90px); }
.faq details { border-bottom: 1px solid var(--line); }
.faq details:first-child { border-top: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; padding: 22px 40px 22px 0; position: relative; font-size: 18px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 4px; top: 16px; font-size: 26px; font-weight: 300; transition: transform .3s var(--ease); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { margin: -6px 0 22px; color: var(--ink-2); max-width: 60ch; }

/* Piè di pagina */
.footer { padding: 10px; }
.footer-in { background: var(--stone); border-radius: var(--radius); padding: clamp(40px, 6vw, 90px) clamp(24px, 6vw, 90px) 32px; }
.footer-top { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 40px; }
.footer h2 { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: clamp(40px, 5vw, 72px); line-height: 1; margin: 0 0 20px; letter-spacing: -.01em; }
.footer p, .footer li { color: var(--ink-2); font-size: 15px; margin: 0; }
.footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.footer .label { margin-bottom: 14px; display: block; }
.footer-bottom { margin-top: 64px; padding-top: 22px; border-top: 1px solid rgba(29,27,24,.14); display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; font-size: 13px; color: var(--ink-3); }
.ph-todo { color: #b4472b; }

/* Bottone fisso */
.sticky-cta {
  position: fixed; right: 20px; bottom: calc(20px + env(safe-area-inset-bottom, 0px)); z-index: 45; opacity: 0; transform: translateY(16px); pointer-events: none;
  transition: opacity .4s var(--ease), transform .4s var(--ease); box-shadow: 0 12px 32px -10px rgba(0,0,0,.45);
}
.sticky-cta.on { opacity: 1; transform: none; pointer-events: auto; }

/* Finestre: film e foto */
.modal { position: fixed; inset: 0; z-index: 100; background: rgba(12,11,10,.94); display: none; align-items: center; justify-content: center; padding: 64px 20px; }
.modal.on { display: flex; }
.modal video { width: min(1280px, 100%); max-height: 100%; border-radius: 12px; background: #000; }
.modal-close { position: absolute; top: 18px; right: 18px; width: 48px; height: 48px; border-radius: 50%; border: 1px solid rgba(255,255,255,.4); background: none; color: #fff; font-size: 22px; cursor: pointer; }
.lb img { max-width: min(1600px, 100%); max-height: 100%; width: auto; height: auto; border-radius: 6px; object-fit: contain; }
.lb-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 52px; height: 52px; border-radius: 50%; border: 1px solid rgba(255,255,255,.35); background: rgba(0,0,0,.25); color: #fff; font-size: 22px; cursor: pointer; }
.lb-prev { left: 18px; } .lb-next { right: 18px; }
.lb-count { position: absolute; bottom: 20px; left: 0; right: 0; text-align: center; color: rgba(255,255,255,.7); font-size: 13px; letter-spacing: .1em; }

/* Comparsa allo scorrimento */
/* il contenuto resta sempre visibile: si muove solo un poco quando entra */
.reveal { transform: translateY(22px); transition: transform 1.1s var(--ease); }
.reveal.in { transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { transform: none; transition: none; }
  .ph img, .gallery img { transition: none; }
}

/* Schermi stretti */
@media (max-width: 1080px) {
  .nav .hide-m { display: none; }
  .facts { grid-template-columns: repeat(3, 1fr); row-gap: 30px; }
  .head, .rooms, .area, .direct, .faq, .footer-top { grid-template-columns: 1fr; }
  .rooms-text { position: static; }
  .gallery { columns: 2; }
}
@media (max-width: 760px) {
  body { font-size: 16px; }
  .header .wrap { height: 64px; }
  .brand b { line-height: 1.45; font-size: 11px; letter-spacing: .22em; }
  .brand b .nw { display: block; }
  .brand .brand-sub { display: none; }
  .nav { gap: 14px; }
  .nav .lang, .nav .hide-s { display: none; }
  .hero { height: 92svh; min-height: 560px; padding: 6px; }
  .hero-copy, .film-btn { bottom: 104px; }
  .film-btn { right: auto; left: var(--edge); bottom: 40px; }
  .film-btn i { width: 48px; height: 48px; }
  :root { --edge: 22px; }
  .hero-copy { bottom: 120px; }
  .booking { margin-top: -34px; }
  .booking-card { grid-template-columns: 1fr 1fr; }
  .field { padding: 10px 14px; }
  .field:nth-child(2) { border-right: 0; }
  .field:nth-child(3) { grid-column: span 2; border-top: 1px solid var(--line); }
  .booking-card .btn { grid-column: span 2; min-height: 52px; margin-top: 4px; }
  .facts { grid-template-columns: repeat(2, 1fr); }
  .water-grid { grid-template-columns: 1fr 1fr; }
  .w-a { grid-column: span 2; }
  .w-b, .w-c, .w-d, .w-e { grid-column: span 1; aspect-ratio: 4 / 5; }
  .sound-btn { top: 10px; right: 10px; height: 38px; font-size: 13px; }
  .out-grid { grid-template-columns: 1fr 1fr; }
  .o-a, .o-b, .o-c, .o-d { grid-column: span 2; aspect-ratio: 4 / 3; }
  .o-e { grid-column: span 1; aspect-ratio: 1; }
  .o-e:last-child { grid-column: span 2; aspect-ratio: 16 / 9; }
  .water-quote { grid-column: span 2; }
  .duo { grid-template-columns: 1fr; }
  .duo .ph:last-child { aspect-ratio: 4 / 3; }
  .journal { grid-template-columns: 1fr; }
  .gallery { columns: 2; }
  .full { padding: 6px; }
  .footer { padding: 6px; }
  .sticky-cta { right: 12px; bottom: 12px; height: 46px; }
  .draft-flag { top: 70px; font-size: 10px; padding: 5px 10px; }
  .lb-nav { top: auto; bottom: 14px; transform: none; }
}

/* Pagine interne del sito WordPress (prenotazione, condizioni, privacy) */
.pagina { padding-block: clamp(120px, 14vw, 170px) clamp(72px, 10vw, 130px); min-height: 70vh; }
.pagina-titolo { margin-bottom: clamp(28px, 4vw, 48px); text-wrap: balance; }
.pagina-testo { max-width: 920px; color: var(--ink-2); }
.pagina-testo h2, .pagina-testo h3 { color: var(--ink); font-weight: 400; letter-spacing: -.01em; }
.pagina-testo a { color: var(--ink); }

/* Motore di prenotazione (VikBooking) nella pagina «prenota»: colori e forme del sito.
   Il motore si colora con variabili proprie (--vbo-*): ridefinite su body valgono anche
   per ciò che aggiunge fuori dal contenuto, come il calendario delle date. */
body {
  --vbo-pref-textcolor: var(--ink);
  --vbo-pref-bgcolor: var(--ink);
  --vbo-pref-fontcolor: #fff;
  --vbo-pref-bgcolorhov: #000;
  --vbo-pref-fontcolorhov: #fff;
  --vbo-base-color: var(--ink);
  --vbo-base-color-hover: #000;
  --vbo-green-color: var(--ink);
  --vbo-green-color-hover: #000;
  --vbo-blue-color: var(--ink);
  --vbo-blue-color-hover: #000;
  --vbo-text-color: var(--ink);
  --vbo-body-text-color: var(--ink-2);
  --vbo-middle-text-color: var(--ink-2);
  --vbo-light-text-color: var(--ink-3);
  --vbo-border-color: var(--line);
  --vbo-light-border-color: var(--line);
  --vbo-light-grey-bg-color: var(--stone);
  --vbo-grey-bg-color: var(--stone);
  --vbo-input-style: var(--paper);
  --vbo-white-bg-color: var(--paper);
}
/* il motore avvolge tutto in un «wrap»: è la stessa classe del sito, che aggiungerebbe un secondo margine */
.pagina-testo .plugin-container { max-width: none; padding-inline: 0; margin: 0; }
.pagina-testo .plugin-container { color: var(--ink-2); font-size: 16px; }
.pagina-testo h3, .pagina-testo h4 { font-family: var(--sans); color: var(--ink); }

/* bottoni: pieno come «Prenota» della testata, vuoto per tornare indietro */
.pagina-testo .btn, .pagina-testo .booknow, .pagina-testo .vbo-goback-link, .pagina-testo .vbo-pref-color-btn-secondary {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; width: auto;
  min-height: 48px; height: auto; margin: 0; padding: 0 24px !important; border-radius: 10px; border: 1px solid transparent;
  font: 500 15px/1.2 var(--sans); letter-spacing: .01em; text-transform: none; text-decoration: none; text-shadow: none; box-shadow: none; cursor: pointer;
  transition: background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.pagina-testo .vbo-pref-color-btn, .pagina-testo .booknow { background: var(--ink); color: #fff; border-color: var(--ink); }
.pagina-testo .vbo-pref-color-btn:hover, .pagina-testo .booknow:hover { background: #000; color: #fff; border-color: #000; }
.pagina-testo .vbo-goback-link, .pagina-testo .vbo-pref-color-btn-secondary { background: transparent; color: var(--ink); border-color: rgba(29,27,24,.28); }
.pagina-testo .vbo-goback-link:hover, .pagina-testo .vbo-pref-color-btn-secondary:hover { background: var(--stone); color: var(--ink); border-color: rgba(29,27,24,.28); }

/* caselle e menu */
.pagina-testo input[type=text], .pagina-testo input[type=email], .pagina-testo input[type=tel], .pagina-testo input[type=number],
.pagina-testo select, .pagina-testo textarea {
  height: 48px; border: 1px solid var(--line); border-radius: 10px; background-color: var(--paper); color: var(--ink);
  font: 400 16px/1.3 var(--sans); box-shadow: none; outline: none; max-width: 100%;
}
.pagina-testo textarea { height: auto; min-height: 120px; padding: 12px 14px; }
.pagina-testo input:focus, .pagina-testo select:focus, .pagina-testo textarea:focus { border-color: var(--ink-3); }
.pagina-testo input[type=checkbox], .pagina-testo input[type=radio] { accent-color: var(--ink); width: 18px; height: 18px; }

/* riquadri: carta bianca con l'ombra della barra di prenotazione della home */
.pagina-testo .vbdivsearch, .pagina-testo .vbo-results-head, .pagina-testo .room_item, .pagina-testo .vbo-showprc-room-block,
.pagina-testo .vbo-oconfirm-summary-room-wrapper, .pagina-testo .vbo-oconfirm-summary-total-wrapper, .pagina-testo .vbcustomfields {
  background: var(--paper); border: 0; border-radius: 18px;
  box-shadow: 0 24px 60px -30px rgba(29,27,24,.22), 0 2px 6px rgba(29,27,24,.05);
}

/* 1 · scelta delle date: come la barra della home, etichette piccole in maiuscolo */
.pagina-testo .vbdivsearch { padding: clamp(18px, 2.4vw, 30px); }
.pagina-testo .vbdivsearch .vb-search-inner { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 18px 20px; font-size: 16px; }
.pagina-testo .vbdivsearch .vb-search-inner > div { margin: 0; }
.pagina-testo .vbdivsearch label, .pagina-testo .vbo-search-num-adults-entry-label, .pagina-testo .vbo-search-num-children-entry-label {
  display: block; margin: 0 0 8px; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); font-weight: 500; line-height: 1.2;
}
.pagina-testo .vbo-search-inpblock { flex: 1 1 170px; }
.pagina-testo .vbdivsearch .input-group { width: 100%; }
/* il motore impone «width:auto !important» alle caselle di testo: la data non riempirebbe il suo spazio */
.pagina-testo .vbdivsearch .vb-search-inner .vbo-search-inpblock .input-group > input[type=text] {
  width: 100% !important; flex: 1 1 auto; min-width: 0; height: 48px; border-radius: 10px 0 0 10px; padding: 0 14px; font-size: 16px; cursor: pointer;
}
/* la villa è una sola: niente numero di camere né «Camera 1» */
.pagina-testo .vbo-search-num-rooms, .pagina-testo .vbo-search-roomnum { display: none; }
.pagina-testo .vb-search-inner .input-group .vbo-caltrigger {
  height: 48px; width: 48px; display: grid; place-items: center; border: 1px solid var(--line); border-left: 0; border-radius: 0 10px 10px 0;
  background: var(--paper); color: var(--ink-2); font-size: 16px; cursor: pointer;
}
.pagina-testo .vbdivsearch .vb-search-inner > .vbo-search-num-racblock { display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 0; flex: 0 0 auto; }
.pagina-testo .vbo-search-num-aduchild-block, .pagina-testo .vbo-search-num-aduchild-entry { display: flex; gap: 20px; align-items: flex-end; margin: 0; }
.pagina-testo .vbo-search-num-aduchild-entry > div { margin: 0; }
.pagina-testo .vbdivsearch .vb-search-inner select { min-width: 88px; height: 48px; padding: 0 34px 0 14px; border-radius: 10px; }
.pagina-testo .vbdivsearch .vbo-search-submit { flex: 0 0 auto; width: auto; margin: 0; }
.pagina-testo .vbdivsearch .vbo-search-submit .btn { min-width: 150px; padding: 0 28px !important; }
.pagina-testo #vbjstotnights { flex-basis: 100%; font-size: 14px; color: var(--ink-3); }
.pagina-testo #vbjstotnights:empty { display: none; }

/* calendario delle date (il motore lo aggiunge in fondo alla pagina, fuori dal contenuto) */
#ui-datepicker-div, #ui-datepicker-div * { font-family: var(--sans); }

/* barra dei passi: linea sottile, pallini scuri */
.pagina-testo .vbstepsbarcont { margin-bottom: clamp(28px, 4vw, 44px); }
.pagina-testo ol.vbo-stepbar li.vbo-step { border-bottom-width: 2px; font-size: 14px; letter-spacing: .02em; }
.pagina-testo ol.vbo-stepbar li.vbo-step-current { color: var(--ink); font-weight: 500; }

/* riepilogo in alto (date, notti, ospiti) */
.pagina-testo .vbo-results-head { padding: 8px; margin-bottom: 24px; }
.pagina-testo .vbo-results-head > div { border-color: var(--line); }
.pagina-testo .vbo-results-head .vbo-results-head-det-lbl { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); font-weight: 500; margin-bottom: 2px; }
.pagina-testo .vbo-results-head .vbo-results-head-det-val { font-size: 17px; font-weight: 400; color: var(--ink); }
.pagina-testo .vbo-results-head i { color: var(--ink-3); }

/* 2 · risultato della ricerca: la villa è una sola, non servono vista a lista/griglia né il secondo «cambia date» */
.pagina-testo .vbo-results-filtering, .pagina-testo #vbselectroomform .goback { display: none; }
.pagina-testo .room_item { overflow: hidden; }
.pagina-testo .room_item .vbrowcname { font-size: 22px; font-weight: 400; letter-spacing: -.01em; margin: 6px 0 10px; }
.pagina-testo .room_item .vbrowcdescr { font-size: 15px; color: var(--ink-2); }
.pagina-testo .vbcontdivtot { border-color: var(--line); }
.pagina-testo .vbsrowprice .room_cost, .pagina-testo .vbo_price, .pagina-testo .vbo_currency { color: var(--ink); }
.pagina-testo .vbsrowprice .vbsrowpricediv .room_cost { font-size: 24px; font-weight: 400; letter-spacing: -.01em; }
.pagina-testo .room_resultdiffusage .vblistroomblock { border-right-width: 1px; border-color: var(--line); }
.pagina-testo .vbselectordiv { display: flex; justify-content: center; padding: 6px 16px 22px; }
.pagina-testo .vbo-searchresults-classic-wrap .room_item.room_selected { box-shadow: 0 0 0 2px var(--ink), 0 24px 60px -30px rgba(29,27,24,.22); }

/* 3 · tariffe */
.pagina-testo .vbo-showprc-room-block { padding: clamp(20px, 3vw, 36px); }
.pagina-testo .vbo-showprc-roomname, .pagina-testo .vbo-showprc-room-head h3 { font-size: clamp(24px, 2.4vw, 32px); font-weight: 300; letter-spacing: -.02em; color: var(--ink); }
.pagina-testo .vbo-showprc-room-block .room_description_box p { color: var(--ink-2); }
.pagina-testo .vbo-showprc-pricetable .vbo-showprc-price-entry { border: 1px solid var(--line); border-radius: 14px; margin: 0 0 10px; background: var(--paper); }
.pagina-testo .vbo-showprc-price-entry-cost { color: var(--ink); font-weight: 400; font-size: 22px; letter-spacing: -.01em; }
.pagina-testo .vbo-showprc-room-head, .pagina-testo .vbo-showprc-staydetails, .pagina-testo .vbo-showprc-staydetails-party { border: 0; background: none; box-shadow: none; }
.pagina-testo .vbo-showprc-staydetails { padding: 0 0 12px; font-size: 14px; color: var(--ink-3); }
/* «Indietro» sempre a sinistra e il bottone per proseguire a destra (nel passo 4 il motore li scrive al contrario) */
.pagina-testo .room_buttons_box, .pagina-testo .vboconfirmbottom { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.pagina-testo .room_buttons_box .goback, .pagina-testo .vboconfirmbottom .goback { order: -1; margin: 0; }

/* 4 · dati dell'ospite */
.pagina-testo .vbo-oconfirm-summary-room-wrapper { padding: 20px 24px; }
.pagina-testo .vbo-oconfirm-summary-total-wrapper { padding: 14px 24px; }
.pagina-testo .vbo-oconfirm-summary-room-head-cell { font-size: 11px; letter-spacing: .14em; color: var(--ink-3); font-weight: 500; }
.pagina-testo .vbo-oconfirm-roomname, .pagina-testo .vbo-oconfirm-roomname a { color: var(--ink); font-weight: 500; text-decoration: none; }
.pagina-testo .vbcustomfields { padding: clamp(20px, 3vw, 36px); }
.pagina-testo .vbcustomfields .vbo-oconfirm-cfield-label { color: var(--ink); font-size: 14px; margin-bottom: 6px; }
.pagina-testo .vbcustomfields .vbo-oconfirm-cfield-input input { height: 48px; font-size: 16px; padding-inline: 14px; }
.pagina-testo .vbo-coupon-outer, .pagina-testo .vbo-enterpin-block { background: var(--stone); border: 0; border-radius: 14px; }
.pagina-testo .vbentercoupon .vbsubmitcoupon { min-height: 48px; font-size: 15px; padding: 0 24px !important; }

@media (max-width: 760px) {
  /* i quattro passi restano su una riga anche sul telefono (il motore li mette su due) */
  .pagina-testo ol.vbo-stepbar li.vbo-step { width: 25%; min-width: 0; font-size: 12px; letter-spacing: 0; }
  .pagina-testo .vbdivsearch .vbo-search-submit { flex-basis: 100%; }
  .pagina-testo .vbdivsearch .vbo-search-submit .btn { width: 100%; }
  .pagina-testo .vbo-search-inpblock { flex-basis: 100%; }
  .pagina-testo .room_buttons_box .btn, .pagina-testo .room_buttons_box .booknow,
  .pagina-testo .vboconfirmbottom .booknow { flex: 1 1 auto; }
}