/* ============================================================
   Villa Milone — CSS del sito (1:1 con l'anteprima React)
   Composizione: colors_and_type.css + tokens.css + tokens-f.css
   Generato per il tema WordPress. NON modificare a mano:
   rigenerare dal sito sorgente.
   ============================================================ */

/* ===================== colors_and_type.css ===================== */
/* ============================================================
   Villa Milone · Design Tokens
   Etna Country House · B&B Esperienziale
   ============================================================ */

/* ---- Fonts (Google Fonts) ----
   Cormorant Garamond — display serif (titles, naming)
   Inter            — body sans (paragraphs, UI)
   Note: Inter substitutes for the unspecified "sans-serif arioso"
   from the brand guide. Replace with brand-issued sans if delivered.
*/
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,400&family=Inter:wght@300;400;500;600&display=swap');

:root {
  /* ============ COLORS ============
     Pulled directly from Villa Milone Brand Identity Guide.
     Each color is rooted in the villa itself.
  */

  /* ── Palette "Lava & Agrumi" — calda, solare, siciliana ── */
  /* — Primari (terracotta bruciata + oliva; lava per i titoli) — */
  --vm-rosa-antico:   #bf8a66;   /* clay caldo — eyebrow, accenti morbidi */
  --vm-verde-etna:    #5e6b3a;   /* oliva / macchia mediterranea */
  --vm-nero-lavico:   #221c16;   /* lava scura — titoli */

  /* — Accent (USE SPARINGLY — only CTAs / events / energy) — */
  --vm-bouganvillea:  #e0892b;   /* arancio zagara — CTA, energia */

  /* — Secondary — */
  --vm-terracotta:    #9c4a2e;   /* terracotta bruciata — materiali */

  /* — Neutral — */
  --vm-bianco-calce:  #f4ece0;   /* sabbia calda — sfondi principali */
  --vm-bianco-puro:   #ffffff;
  --vm-grigio-caldo:  #5c5046;   /* corpo testo */
  --vm-grigio-fumo:   #8c8175;   /* caption / secondary */
  --vm-grigio-velo:   #e6dbcb;   /* divider, sfumature */

  /* — Tinted lights (for backgrounds, cards) — */
  --vm-rosa-velato:   #ebddcc;
  --vm-verde-velato:  #e4e7d6;

  /* — Semantic tokens — */
  --vm-bg:            var(--vm-bianco-calce);
  --vm-bg-elevated:   var(--vm-bianco-puro);
  --vm-fg:            var(--vm-nero-lavico);
  --vm-fg-muted:      var(--vm-grigio-caldo);
  --vm-fg-subtle:     var(--vm-grigio-fumo);
  --vm-border:        var(--vm-grigio-velo);
  --vm-border-strong: var(--vm-rosa-antico);

  --vm-accent:        var(--vm-verde-etna);
  --vm-accent-soft:   var(--vm-rosa-antico);
  --vm-accent-vivid:  var(--vm-bouganvillea);

  /* ============ TYPE FAMILIES ============ */
  --vm-serif-display: 'Cormorant Garamond', 'Cormorant', Georgia, 'Times New Roman', serif; /* @kind font */
  --vm-sans-body:     'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; /* @kind font */
  --vm-sans-tag:      'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; /* @kind font */

  /* ============ TYPE SCALE ============
     Editorial scale — lots of air, generous display sizes.
  */
  --vm-fs-display:  clamp(56px, 8vw, 128px); /* @kind font */
  --vm-fs-h1:       clamp(40px, 5.2vw, 72px); /* @kind font */
  --vm-fs-h2:       clamp(30px, 3.6vw, 48px); /* @kind font */
  --vm-fs-h3:       clamp(22px, 2.4vw, 32px); /* @kind font */
  --vm-fs-h4:       20px; /* @kind font */
  --vm-fs-lead:     20px; /* @kind font */
  --vm-fs-body:     16px; /* @kind font */
  --vm-fs-small:    14px; /* @kind font */
  --vm-fs-caption:  12px; /* @kind font */
  --vm-fs-tag:      11px; /* @kind font */
  --vm-fs-micro:    10px; /* @kind font */

  /* Line heights — generous, "arioso" */
  --vm-lh-tight:    1.05; /* @kind font */
  --vm-lh-display:  1.10; /* @kind font */
  --vm-lh-heading:  1.18; /* @kind font */
  --vm-lh-body:     1.7; /* @kind font */
  --vm-lh-loose:    1.85; /* @kind font */

  /* Letter spacing */
  --vm-ls-tight:    -0.015em; /* @kind font */
  --vm-ls-normal:    0em; /* @kind font */
  --vm-ls-tag:       0.18em; /* @kind font */
  --vm-ls-tag-wide:  0.28em; /* @kind font */

  /* ============ SPACING (8pt-ish) ============ */
  --vm-space-0:  0;
  --vm-space-1:  4px;
  --vm-space-2:  8px;
  --vm-space-3:  12px;
  --vm-space-4:  16px;
  --vm-space-5:  24px;
  --vm-space-6:  32px;
  --vm-space-7:  48px;
  --vm-space-8:  64px;
  --vm-space-9:  96px;
  --vm-space-10: 128px;
  --vm-space-11: 160px;

  /* ============ RADII ============
     Editorial restraint — almost square. A whisper of softness.
  */
  --vm-radius-0:  0;
  --vm-radius-1:  2px;
  --vm-radius-2:  4px;
  --vm-radius-3:  8px;
  --vm-radius-pill: 999px;

  /* ============ BORDERS ============ */
  --vm-border-w:  1px; /* @kind spacing */
  --vm-border-w-thick: 1.5px; /* @kind spacing */
  --vm-rule:      1px solid var(--vm-border); /* @kind other */
  --vm-rule-fg:   1px solid var(--vm-nero-lavico); /* @kind other */

  /* ============ SHADOWS ============
     Soft, warm, almost imperceptible. Never harsh.
  */
  --vm-shadow-sm: 0 1px 2px rgba(28, 24, 18, 0.04), 0 1px 3px rgba(28, 24, 18, 0.04);
  --vm-shadow-md: 0 4px 12px rgba(28, 24, 18, 0.06), 0 1px 3px rgba(28, 24, 18, 0.04);
  --vm-shadow-lg: 0 12px 32px rgba(28, 24, 18, 0.08), 0 2px 6px rgba(28, 24, 18, 0.04);
  --vm-shadow-warm: 0 12px 40px rgba(196, 122, 85, 0.14);

  /* ============ MOTION ============ */
  --vm-ease:        cubic-bezier(0.22, 0.61, 0.36, 1); /* @kind other */
  --vm-ease-soft:   cubic-bezier(0.4, 0, 0.2, 1); /* @kind other */
  --vm-dur-fast:    180ms; /* @kind other */
  --vm-dur-base:    320ms; /* @kind other */
  --vm-dur-slow:    560ms; /* @kind other */

  /* ============ LAYOUT ============ */
  --vm-container:   1240px; /* @kind spacing */
  --vm-container-narrow: 880px; /* @kind spacing */
  --vm-container-prose:  640px; /* @kind spacing */
}

/* ============================================================
   BASE / RESET-LIKE
   ============================================================ */

html { box-sizing: border-box; }
*, *::before, *::after { box-sizing: inherit; }

body {
  margin: 0;
  background: var(--vm-bg);
  color: var(--vm-fg-muted);
  font-family: var(--vm-sans-body);
  font-size: var(--vm-fs-body);
  line-height: var(--vm-lh-body);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ============================================================
   TYPOGRAPHY (semantic, editorial)
   ============================================================ */

.vm-display,
.vm-h1, .vm-h2, .vm-h3, .vm-h4 {
  font-family: var(--vm-serif-display);
  color: var(--vm-fg);
  font-weight: 400;
  letter-spacing: var(--vm-ls-tight);
  text-wrap: balance;
  margin: 0;
}

.vm-display {
  font-size: var(--vm-fs-display);
  line-height: var(--vm-lh-display);
  font-weight: 300;
}

.vm-h1 { font-size: var(--vm-fs-h1); line-height: var(--vm-lh-heading); }
.vm-h2 { font-size: var(--vm-fs-h2); line-height: var(--vm-lh-heading); }
.vm-h3 { font-size: var(--vm-fs-h3); line-height: var(--vm-lh-heading); }
.vm-h4 { font-size: var(--vm-fs-h4); line-height: 1.3; font-family: var(--vm-sans-body); font-weight: 500; letter-spacing: 0; }

.vm-italic-display {
  font-family: var(--vm-serif-display);
  font-style: italic;
  font-weight: 400;
}

.vm-lead {
  font-family: var(--vm-sans-body);
  font-size: var(--vm-fs-lead);
  line-height: var(--vm-lh-loose);
  color: var(--vm-fg-muted);
  font-weight: 300;
  text-wrap: pretty;
}

.vm-body {
  font-size: var(--vm-fs-body);
  line-height: var(--vm-lh-body);
  color: var(--vm-fg-muted);
  text-wrap: pretty;
}

.vm-small { font-size: var(--vm-fs-small); line-height: 1.6; color: var(--vm-fg-muted); }
.vm-caption { font-size: var(--vm-fs-caption); line-height: 1.5; color: var(--vm-fg-subtle); font-weight: 300; }

/* Tags / categories — sans, uppercase, tracking-wide */
.vm-tag {
  font-family: var(--vm-sans-tag);
  font-size: var(--vm-fs-tag);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--vm-ls-tag);
  color: var(--vm-verde-etna);
  line-height: 1;
}
.vm-tag--rosa { color: var(--vm-rosa-antico); }
.vm-tag--lava { color: var(--vm-nero-lavico); }
.vm-tag--bouganvillea { color: var(--vm-bouganvillea); }

/* Eyebrow — wider tracking, often above big titles */
.vm-eyebrow {
  font-family: var(--vm-sans-tag);
  font-size: var(--vm-fs-tag);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: var(--vm-ls-tag-wide);
  color: var(--vm-rosa-antico);
}

/* ============================================================
   ELEMENTS
   ============================================================ */

a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 1px;
  transition: opacity var(--vm-dur-fast) var(--vm-ease);
}
a:hover { opacity: 0.6; }

hr.vm-rule {
  border: 0;
  border-top: var(--vm-rule);
  margin: var(--vm-space-7) 0;
}

/* Decorative thin gold/rosa rule, often used as section divider */
.vm-rule-decorative {
  display: block;
  width: 48px;
  height: 1px;
  background: var(--vm-rosa-antico);
  border: 0;
  margin: 0;
}


/* ===================== tokens.css ===================== */
/* UI Kit · Villa Milone Website
   Composes design tokens with site-specific layout vars. */
/* colors_and_type inlined above */

:root {
  --site-max: 1240px; /* @kind spacing */
  --gutter: clamp(20px, 4vw, 56px); /* @kind spacing */
}

html, body { background: var(--vm-bianco-calce); color: var(--vm-grigio-caldo); }
.app-root { min-height: 100vh; }

/* ===== Header / Nav ===== */
.vm-nav {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px var(--gutter);
  transition: all 320ms var(--vm-ease);
}
.vm-nav.over-photo { background: rgba(28,24,18,0.32); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); color: var(--vm-bianco-calce); }
.vm-nav.solid { background: rgba(245,240,232,0.92); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--vm-grigio-velo); color: var(--vm-nero-lavico); }
.vm-nav .brand { display: flex; flex-direction: column; line-height: 1; cursor: pointer; }
.vm-nav .brand .word { font-family: var(--vm-serif-display); font-size: 24px; letter-spacing: 0.04em; font-weight: 400; }
.vm-nav .brand .sub { font-family: var(--vm-sans-body); font-size: 9px; letter-spacing: 0.32em; text-transform: uppercase; margin-top: 4px; opacity: 0.85; }
.vm-nav .links { display: flex; gap: 32px; }
.vm-nav .links a, .vm-nav .links button { font-family: var(--vm-sans-body); font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: inherit; background: transparent; border: 0; cursor: pointer; padding: 0; transition: opacity 200ms; }
.vm-nav .links a:hover, .vm-nav .links button:hover { opacity: 0.6; }
.vm-nav .links a.active { border-bottom: 1px solid currentColor; padding-bottom: 4px; }
.vm-nav .cta { font-family: var(--vm-sans-body); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--vm-nero-lavico); background: var(--vm-bianco-calce); padding: 12px 22px; border-radius: 999px; cursor: pointer; border: 0; transition: all 200ms var(--vm-ease); }
.vm-nav .cta:hover { box-shadow: 0 4px 14px rgba(28,24,18,0.18); }
.vm-nav.solid .cta { background: var(--vm-nero-lavico); color: var(--vm-bianco-calce); }

/* ----- Mobile burger (hidden on desktop) ----- */
.vm-nav__burger { display: none; flex-direction: column; align-items: center; justify-content: center; gap: 5px; width: 44px; height: 44px; margin-right: -10px; padding: 0; background: transparent; border: 0; color: inherit; cursor: pointer; }
.vm-nav__burger span { display: block; width: 24px; height: 1.5px; background: currentColor; }

/* ----- Mobile drawer ----- */
.vm-drawer { position: fixed; inset: 0; z-index: 100; visibility: hidden; pointer-events: none; }
.vm-drawer.is-open { visibility: visible; pointer-events: auto; }
.vm-drawer__backdrop { position: absolute; inset: 0; background: rgba(28,24,18,0.45); opacity: 0; transition: opacity 420ms var(--vm-ease); }
.vm-drawer.is-open .vm-drawer__backdrop { opacity: 1; }
.vm-drawer__panel {
  position: absolute; top: 0; right: 0; height: 100%; width: min(86vw, 420px);
  box-sizing: border-box; padding: 22px var(--gutter) 32px;
  background: var(--vm-nero-lavico); color: var(--vm-bianco-calce);
  display: flex; flex-direction: column; overflow-y: auto;
  transform: translateX(100%); transition: transform 480ms var(--vm-ease);
}
.vm-drawer.is-open .vm-drawer__panel { transform: translateX(0); }
.vm-drawer__head { display: flex; align-items: flex-start; justify-content: space-between; padding-bottom: 32px; border-bottom: 1px solid rgba(245,240,232,0.14); }
.vm-drawer__brand .word { font-family: var(--vm-serif-display); font-size: 26px; letter-spacing: 0.04em; font-weight: 400; }
.vm-drawer__brand .sub { font-family: var(--vm-sans-body); font-size: 9px; letter-spacing: 0.32em; text-transform: uppercase; margin-top: 6px; color: var(--vm-rosa-antico); }
.vm-drawer__close { width: 44px; height: 44px; margin: -8px -10px 0 0; padding: 0; background: transparent; border: 0; color: inherit; font-family: var(--vm-sans-body); font-weight: 200; font-size: 30px; line-height: 1; cursor: pointer; }
.vm-drawer__close:hover { opacity: 0.6; }
.vm-drawer__links { display: flex; flex-direction: column; padding: 14px 0 8px; }
.vm-drawer__links a { display: block; min-height: 44px; padding: 15px 0; border-bottom: 1px solid rgba(245,240,232,0.10); font-family: var(--vm-serif-display); font-weight: 300; font-size: 30px; letter-spacing: -0.01em; color: var(--vm-bianco-calce); text-decoration: none; transition: opacity 320ms var(--vm-ease); }
.vm-drawer__links a:hover { opacity: 0.6; }
.vm-drawer__links a.active { color: var(--vm-rosa-antico); }
.vm-drawer__cta { margin: auto 0 22px; display: inline-flex; align-items: center; justify-content: center; min-height: 54px; background: var(--vm-bianco-calce); color: var(--vm-nero-lavico); font-family: var(--vm-sans-body); font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; text-decoration: none; transition: box-shadow 320ms var(--vm-ease); }
.vm-drawer__cta:hover { box-shadow: 0 6px 18px rgba(0,0,0,0.32); }
.vm-drawer__contact { display: flex; flex-direction: column; gap: 8px; }
.vm-drawer__contact a { font-family: var(--vm-serif-display); font-style: italic; font-size: 18px; color: var(--vm-rosa-antico); text-decoration: none; }
.vm-drawer__contact a:hover { opacity: 0.6; }
@media (prefers-reduced-motion: reduce) {
  .vm-drawer__panel, .vm-drawer__backdrop { transition: none; }
}

/* ===== Hero ===== */
/* Full-bleed band; video uses object-fit: contain so it shows at native
   aspect with brand-color pillarboxing (the source is 480×848 portrait,
   so cover would upscale 2.6× and look sgranato). */
.vm-hero { position: relative; min-height: 100vh; display: flex; align-items: flex-end; color: var(--vm-bianco-calce); margin-top: -72px; padding-top: 72px; background-color: #2b2826; background-image: radial-gradient(80% 70% at 14% 18%, rgba(150,140,128,0.14), transparent 60%), radial-gradient(70% 60% at 86% 26%, rgba(90,82,74,0.20), transparent 60%), radial-gradient(85% 80% at 72% 88%, rgba(0,0,0,0.38), transparent 64%), radial-gradient(60% 55% at 30% 82%, rgba(120,110,98,0.10), transparent 60%); overflow: hidden; }
.vm-hero .bg { position: absolute; inset: 0; background-size: cover; background-position: center; z-index: 0; }
.vm-hero .bg-video-blur { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; filter: blur(36px) saturate(1.1) brightness(0.92); transform: scale(1.12); }
.vm-hero .bg-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: right center; z-index: 1; }
.vm-hero .scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(28,24,18,0.10) 0%, rgba(28,24,18,0.00) 35%, rgba(28,24,18,0.45) 100%); z-index: 2; }
.vm-hero .content { position: relative; z-index: 3; padding: 0 var(--gutter) 72px; max-width: var(--site-max); margin: 0 auto; width: 100%; }
.vm-hero .eyebrow { font-family: var(--vm-sans-body); font-size: 11px; letter-spacing: 0.32em; text-transform: uppercase; opacity: 0.92; margin-bottom: 22px; }
.vm-hero h1 { font-family: var(--vm-serif-display); font-weight: 300; font-size: clamp(56px, 9vw, 132px); line-height: 0.98; letter-spacing: -0.02em; margin: 0 0 28px; max-width: 14ch; text-wrap: balance; }
.vm-hero h1 em { font-style: italic; font-weight: 400; }
.vm-hero .lede { font-family: var(--vm-sans-body); font-weight: 300; font-size: 18px; line-height: 1.7; max-width: 44ch; margin-bottom: 36px; }
.vm-hero .actions { display: flex; gap: 14px; flex-wrap: wrap; }

/* ===== Editorial sections ===== */
.vm-section { padding: clamp(64px, 10vw, 128px) var(--gutter); max-width: var(--site-max); margin: 0 auto; }
.vm-section--narrow { max-width: 880px; }
.vm-section--wide { max-width: none; padding-left: 0; padding-right: 0; }

/* Soggiorno: Comfort & servizi — testo + foto, e griglia dotazioni */
.vm-overview { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: start; }
.vm-amenities { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 52px; row-gap: 22px; }
@media (max-width: 900px) {
  .vm-overview { grid-template-columns: 1fr; gap: clamp(32px, 6vw, 48px); }
}
@media (max-width: 520px) {
  .vm-amenities { grid-template-columns: 1fr; row-gap: 16px; }
}

.vm-eyebrow { font-family: var(--vm-sans-body); font-size: 11px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--vm-rosa-antico); margin-bottom: 22px; display: flex; align-items: center; gap: 14px; }
.vm-eyebrow::before { content: ''; width: 32px; height: 1px; background: currentColor; }

.vm-section h2 { font-family: var(--vm-serif-display); font-weight: 400; font-size: clamp(36px, 5vw, 64px); line-height: 1.05; letter-spacing: -0.015em; color: var(--vm-nero-lavico); margin: 0 0 28px; max-width: 22ch; text-wrap: balance; }
.vm-section h2 em { font-style: italic; }
.vm-section p { font-family: var(--vm-sans-body); font-size: 18px; line-height: 1.75; color: var(--vm-grigio-caldo); margin: 0 0 20px; max-width: 60ch; font-weight: 300; }

/* Image pair (editorial 2-up, asymmetric) */
.vm-imagepair { display: grid; grid-template-columns: 1.4fr 1fr; gap: clamp(16px, 3vw, 40px); align-items: center; }
.vm-imagepair.flip { grid-template-columns: 1fr 1.4fr; }
.vm-imagepair .img-wrap { aspect-ratio: 4/5; overflow: hidden; }
.vm-imagepair .img-wrap.tall { aspect-ratio: 3/4; }
.vm-imagepair img { width: 100%; height: 100%; object-fit: cover; transition: transform 1200ms var(--vm-ease); }
.vm-imagepair:hover img { transform: scale(1.04); }
.vm-imagepair .text-block { padding: 0 clamp(0px, 2vw, 24px); }

/* Caption */
.vm-caption { font-family: var(--vm-sans-body); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--vm-grigio-fumo); margin-top: 12px; }

/* Manifesto block */
.vm-manifesto { padding: clamp(64px, 10vw, 128px) var(--gutter); background: var(--vm-bianco-calce); }
.vm-manifesto .inner { max-width: 880px; margin: 0 auto; }
.vm-manifesto blockquote { margin: 0; font-family: var(--vm-serif-display); font-size: clamp(28px, 4vw, 48px); line-height: 1.25; font-weight: 300; color: var(--vm-nero-lavico); letter-spacing: -0.01em; }
.vm-manifesto blockquote em { font-style: italic; color: var(--vm-verde-etna); }
.vm-manifesto blockquote p { font-family: inherit; font-size: inherit; line-height: inherit; color: inherit; margin: 0 0 16px; max-width: none; font-weight: inherit; }
.vm-manifesto cite { display: block; margin-top: 32px; font-family: var(--vm-sans-body); font-size: 11px; letter-spacing: 0.28em; text-transform: uppercase; font-style: normal; color: var(--vm-rosa-antico); }

/* Pillars / experience grid */
.vm-pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; background: var(--vm-grigio-velo); }
.vm-pillars--4 { grid-template-columns: repeat(2, 1fr); }
.vm-pillar { background: var(--vm-bianco-calce); padding: 40px 32px 48px; min-height: 280px; display: flex; flex-direction: column; transition: background 320ms var(--vm-ease); cursor: pointer; }
.vm-pillar:hover { background: #fff; }
.vm-pillar .num { font-family: var(--vm-sans-body); font-size: 11px; letter-spacing: 0.28em; color: var(--vm-rosa-antico); }
.vm-pillar h3 { font-family: var(--vm-serif-display); font-size: 32px; font-weight: 400; line-height: 1.1; color: var(--vm-nero-lavico); margin: 16px 0 12px; }
.vm-pillar p { font-family: var(--vm-sans-body); font-size: 14px; line-height: 1.75; color: var(--vm-grigio-caldo); flex: 1; font-weight: 300; }
.vm-pillar .arrow { font-family: var(--vm-serif-display); font-size: 22px; color: var(--vm-verde-etna); margin-top: 24px; }

/* Buttons */
.vm-btn { font-family: var(--vm-sans-body); font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; padding: 16px 30px; border: 0; cursor: pointer; transition: all 200ms var(--vm-ease); display: inline-flex; align-items: center; gap: 10px; }
.vm-btn--primary { background: var(--vm-bianco-calce); color: var(--vm-nero-lavico); border-radius: 2px; }
.vm-btn--primary:hover { box-shadow: 0 6px 18px rgba(28,24,18,0.22); }
.vm-btn--dark { background: var(--vm-nero-lavico); color: var(--vm-bianco-calce); border-radius: 2px; }
.vm-btn--outline { background: transparent; border: 1px solid currentColor; border-radius: 2px; }
.vm-btn--ghost { background: transparent; padding: 14px 0; border-bottom: 1px solid currentColor; }
.vm-btn--cta { background: var(--vm-bouganvillea); color: #fff; border-radius: 999px; padding: 16px 32px; }

/* Contatti — CTA WhatsApp guidato */
.vm-contact-cta { margin-top: 40px; }
.vm-wa-cta { display: inline-flex; align-items: center; gap: 12px; padding: 16px 28px; background: var(--vm-nero-lavico); color: var(--vm-bianco-calce); border-radius: 2px; font-family: var(--vm-sans-body); font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; text-decoration: none; transition: box-shadow 200ms var(--vm-ease); }
.vm-wa-cta svg { color: #25D366; flex: 0 0 auto; }
.vm-wa-cta:hover { box-shadow: 0 6px 18px rgba(28,24,18,0.22); }
.vm-contact-cta__note { font-family: var(--vm-serif-display); font-style: italic; font-size: 19px; line-height: 1.5; color: var(--vm-verde-etna); margin: 20px 0 0; max-width: 42ch; }

/* Booking strip */
.vm-booking { background: var(--vm-nero-lavico); color: var(--vm-bianco-calce); padding: clamp(48px, 6vw, 80px) var(--gutter); }
.vm-booking .inner { max-width: var(--site-max); margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.vm-booking h2 { font-family: var(--vm-serif-display); font-weight: 300; font-size: clamp(40px, 5vw, 64px); line-height: 1.05; color: var(--vm-bianco-calce); margin: 0 0 16px; max-width: 14ch; }
.vm-booking h2 em { font-style: italic; color: var(--vm-rosa-antico); }
.vm-booking .form-card { background: var(--vm-bianco-calce); color: var(--vm-nero-lavico); padding: 36px 36px 32px; border-radius: 2px; }
.vm-booking .form-card .label { font-family: var(--vm-sans-body); font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--vm-grigio-caldo); }
.vm-booking .form-card .row { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; padding: 14px 0; border-bottom: 1px solid var(--vm-grigio-velo); }
.vm-booking .form-card .row > div { display: flex; flex-direction: column; gap: 6px; }
.vm-booking .form-card input { border: 0; background: transparent; font-family: var(--vm-sans-body); font-size: 14px; color: var(--vm-nero-lavico); padding: 0; outline: none; }
.vm-booking .form-card .submit { width: 100%; margin-top: 22px; background: var(--vm-nero-lavico); color: var(--vm-bianco-calce); border: 0; padding: 16px; font-family: var(--vm-sans-body); font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; cursor: pointer; transition: all 200ms; border-radius: 2px; }
.vm-booking .form-card .submit:hover { background: var(--vm-verde-etna); }

/* Footer */
.vm-footer { background: var(--vm-verde-etna); color: var(--vm-bianco-calce); padding: 80px var(--gutter) 36px; }
.vm-footer .inner { max-width: var(--site-max); margin: 0 auto; }
.vm-footer .top { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 40px; padding-bottom: 56px; border-bottom: 1px solid rgba(245,240,232,0.2); }
.vm-footer .word { font-family: var(--vm-serif-display); font-size: 40px; font-weight: 400; letter-spacing: 0.04em; }
.vm-footer .tag { font-family: var(--vm-sans-body); font-size: 10px; letter-spacing: 0.32em; text-transform: uppercase; opacity: 0.85; margin-top: 10px; }
.vm-footer .col h4 { font-family: var(--vm-sans-body); font-size: 10px; letter-spacing: 0.28em; text-transform: uppercase; opacity: 0.7; margin: 0 0 18px; font-weight: 500; }
.vm-footer .col a { display: block; font-family: var(--vm-sans-body); font-size: 14px; line-height: 2.2; color: var(--vm-bianco-calce); text-decoration: none; border: 0; opacity: 0.92; }
.vm-footer .col a:hover { opacity: 0.6; }
.vm-footer .bottom { display: flex; justify-content: space-between; padding-top: 28px; font-family: var(--vm-sans-body); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; opacity: 0.7; }

/* Esperienze: list grid */
.vm-experiences { display: grid; grid-template-columns: repeat(2, 1fr); gap: 64px 56px; }
.vm-experience { display: flex; flex-direction: column; cursor: pointer; }
.vm-experience .img-wrap { aspect-ratio: 5/4; overflow: hidden; margin-bottom: 24px; }
.vm-experience img, .vm-experience video { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1200ms var(--vm-ease); }
.vm-experience:hover img { transform: scale(1.04); }
.vm-experience .meta-row { display: flex; justify-content: space-between; font-family: var(--vm-sans-body); font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--vm-rosa-antico); margin-bottom: 12px; }
.vm-experience h3 { font-family: var(--vm-serif-display); font-size: 36px; font-weight: 400; line-height: 1.1; color: var(--vm-nero-lavico); margin: 0 0 12px; letter-spacing: -0.01em; }
.vm-experience h3 em { font-style: italic; }
.vm-experience .desc { font-family: var(--vm-sans-body); font-size: 15px; line-height: 1.75; color: var(--vm-grigio-caldo); font-weight: 300; }

/* Page banner (sub-page hero) */
.vm-banner { padding: 200px var(--gutter) 80px; background: var(--vm-bianco-calce); }
.vm-banner .inner { max-width: var(--site-max); margin: 0 auto; }
.vm-banner h1 { font-family: var(--vm-serif-display); font-weight: 300; font-size: clamp(56px, 9vw, 132px); line-height: 0.98; letter-spacing: -0.02em; color: var(--vm-nero-lavico); margin: 18px 0 0; max-width: 14ch; }
.vm-banner h1 em { font-style: italic; }
.vm-banner .eyebrow { font-family: var(--vm-sans-body); font-size: 11px; letter-spacing: 0.32em; text-transform: uppercase; color: var(--vm-rosa-antico); }

/* ===== Carousel (homepage frammenti) ===== */
.vm-carousel { overflow: hidden; padding: 12px 0; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.vm-carousel .reel { display: flex; gap: 28px; width: max-content; animation: vm-marquee 90s linear infinite; }
.vm-carousel:hover .reel { animation-play-state: paused; }
.vm-carousel figure { margin: 0; flex: 0 0 auto; width: 380px; }
.vm-carousel img { width: 100%; aspect-ratio: 4/5; object-fit: cover; display: block; }
.vm-carousel figcaption { font-family: var(--vm-serif-display); font-style: italic; font-size: 14px; color: var(--vm-grigio-caldo); margin-top: 10px; padding: 0 4px; }
@keyframes vm-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ===== Reviews ===== */
.vm-reviews { display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px; }
.vm-review { background: var(--vm-bianco-calce); border: 1px solid var(--vm-grigio-velo); padding: 36px 32px; display: flex; flex-direction: column; gap: 18px; }
.vm-review .stars { color: var(--vm-bouganvillea); letter-spacing: 0.18em; font-size: 14px; }
.vm-review blockquote { margin: 0; font-family: var(--vm-serif-display); font-style: italic; font-weight: 300; font-size: 20px; line-height: 1.5; color: var(--vm-nero-lavico); letter-spacing: -0.005em; }
.vm-review footer { display: flex; justify-content: space-between; align-items: baseline; font-family: var(--vm-sans-body); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--vm-grigio-caldo); border-top: 1px solid var(--vm-grigio-velo); padding-top: 18px; margin-top: auto; }
.vm-review .who { color: var(--vm-rosa-antico); }

/* ===== Slow Moments page ===== */
.vm-slow { display: flex; flex-direction: column; padding: 0 var(--gutter); max-width: 1240px; margin: 0 auto; gap: clamp(40px, 6vw, 80px); }
.vm-slow__moment { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 4vw, 64px); align-items: center; padding: clamp(20px, 3vw, 40px) 0; }
.vm-slow__moment.right { direction: rtl; }
.vm-slow__moment.right > * { direction: ltr; }
.vm-slow__moment .img-wrap { aspect-ratio: 4/5; overflow: hidden; }
.vm-slow__moment img { width: 100%; height: 100%; object-fit: cover; transition: transform 1400ms var(--vm-ease); }
.vm-slow__moment:hover img { transform: scale(1.03); }
.vm-slow__moment .text .num { font-family: var(--vm-sans-body); font-size: 11px; letter-spacing: 0.32em; color: var(--vm-rosa-antico); margin-bottom: 18px; }
.vm-slow__moment .text h3 { font-family: var(--vm-serif-display); font-weight: 400; font-size: clamp(28px, 3.6vw, 48px); line-height: 1.08; letter-spacing: -0.015em; color: var(--vm-nero-lavico); margin: 0 0 22px; max-width: 16ch; }
.vm-slow__moment .text h3 em { font-style: italic; }
.vm-slow__moment .text p { font-family: var(--vm-sans-body); font-size: 17px; line-height: 1.75; color: var(--vm-grigio-caldo); margin: 0; max-width: 38ch; font-weight: 300; }
.vm-slow__detail { margin: 0; aspect-ratio: 1/1; position: relative; align-self: center; }
.vm-slow__detail img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vm-slow__detail figcaption { position: absolute; bottom: 14px; left: 14px; font-family: var(--vm-serif-display); font-style: italic; font-size: 14px; color: var(--vm-bianco-calce); text-shadow: 0 1px 8px rgba(0,0,0,0.4); }

/* ===== Slow Moments — rituals (simboli a tratto) ===== */
.vm-rituals { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(36px, 4.5vw, 64px) clamp(48px, 6vw, 104px); max-width: 1160px; margin: 0 auto; padding: 0 var(--gutter); }
.vm-ritual { display: grid; grid-template-columns: auto 1fr; gap: clamp(20px, 2.4vw, 32px); align-items: start; position: relative; }
.vm-ritual + .vm-ritual::before { content: none; }
.vm-ritual__sym { width: clamp(78px, 8vw, 100px); height: clamp(78px, 8vw, 100px); border-radius: 999px; display: grid; place-items: center; background: var(--vm-bianco-calce); border: 1px solid var(--vm-grigio-velo); color: var(--vm-verde-etna); flex: none; transition: transform 600ms var(--vm-ease), color 400ms var(--vm-ease); }
.vm-ritual:nth-child(even) .vm-ritual__sym { color: var(--vm-rosa-antico); }
.vm-ritual:hover .vm-ritual__sym { transform: translateY(-4px) rotate(-2deg); }
.vm-ritual__sym svg { width: 48%; height: 48%; }
.vm-ritual__body { padding-top: 4px; }
.vm-ritual__num { font-family: var(--vm-sans-body); font-size: 11px; letter-spacing: 0.32em; color: var(--vm-rosa-antico); margin-bottom: 12px; }
.vm-ritual h3 { font-family: var(--vm-serif-display); font-weight: 400; font-size: clamp(22px, 2.5vw, 30px); line-height: 1.12; letter-spacing: -0.01em; color: var(--vm-nero-lavico); margin: 0 0 12px; }
.vm-ritual h3 em { font-style: italic; }
.vm-ritual p { font-family: var(--vm-sans-body); font-size: 15.5px; line-height: 1.7; color: var(--vm-grigio-caldo); margin: 0; font-weight: 300; max-width: 42ch; }

/* ===== Dintorni grid ===== */
.vm-dintorni { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(32px, 4vw, 56px) clamp(24px, 3vw, 40px); padding: 0 var(--gutter); max-width: var(--site-max); margin: 0 auto; }
.vm-dintorni__card .img-wrap { aspect-ratio: 4/5; overflow: hidden; margin-bottom: 18px; }
.vm-dintorni__card img { width: 100%; height: 100%; object-fit: cover; transition: transform 1400ms var(--vm-ease); }
.vm-dintorni__card:hover img { transform: scale(1.04); }
.vm-dintorni__card .meta { display: flex; justify-content: space-between; align-items: baseline; padding-bottom: 10px; border-bottom: 1px solid var(--vm-grigio-velo); margin-bottom: 14px; }
.vm-dintorni__card .name { font-family: var(--vm-serif-display); font-size: 24px; font-weight: 400; color: var(--vm-nero-lavico); }
.vm-dintorni__card .dist { font-family: var(--vm-sans-body); font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--vm-rosa-antico); }
.vm-dintorni__card p { font-family: var(--vm-sans-body); font-size: 14px; line-height: 1.7; color: var(--vm-grigio-caldo); font-weight: 300; margin: 0; }

/* ===== Consigli (numbered editorial list) ===== */
.vm-consigli { display: flex; flex-direction: column; }
.vm-consigli__row { display: grid; grid-template-columns: 80px 1fr 80px; gap: 32px; align-items: start; padding: 36px 0; border-top: 1px solid var(--vm-grigio-velo); cursor: pointer; transition: background 200ms; }
.vm-consigli--noarrow .vm-consigli__row { grid-template-columns: 80px 1fr; }
.vm-consigli__row:last-child { border-bottom: 1px solid var(--vm-grigio-velo); }
.vm-consigli__row:hover { background: rgba(245,240,232,0.5); }
.vm-consigli__row .num { font-family: var(--vm-sans-body); font-size: 11px; letter-spacing: 0.32em; color: var(--vm-rosa-antico); padding-top: 8px; }
.vm-consigli__row .tag { font-family: var(--vm-sans-body); font-size: 10px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--vm-verde-etna); margin-bottom: 8px; }
.vm-consigli__row h3 { font-family: var(--vm-serif-display); font-size: clamp(24px, 2.6vw, 34px); font-weight: 400; line-height: 1.1; letter-spacing: -0.01em; color: var(--vm-nero-lavico); margin: 0 0 12px; }
.vm-consigli__row p { font-family: var(--vm-sans-body); font-size: 15px; line-height: 1.7; color: var(--vm-grigio-caldo); font-weight: 300; margin: 0; max-width: 64ch; }
.vm-consigli__row .arrow { font-family: var(--vm-serif-display); font-size: 28px; color: var(--vm-verde-etna); text-align: right; padding-top: 4px; transition: transform 200ms; }
.vm-consigli__row:hover .arrow { transform: translateX(6px); }

/* ===== Floating CTA (sticky during scroll) ===== */
.vm-fab { position: fixed; bottom: 28px; right: 28px; z-index: 80; display: inline-flex; align-items: center; gap: 12px; padding: 16px 26px; background: var(--vm-verde-etna); color: var(--vm-bianco-calce); text-decoration: none; border-radius: 999px; box-shadow: 0 12px 32px rgba(0,0,0,0.18); font-family: var(--vm-sans-body); font-size: 13px; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 500; transition: transform 240ms var(--vm-ease), box-shadow 240ms var(--vm-ease); }
.vm-fab:hover { transform: translateY(-2px); box-shadow: 0 18px 40px rgba(0,0,0,0.22); }
.vm-fab__icon { font-size: 16px; }

/* ===== Agenda (events) ===== */
.vm-agenda { display: flex; flex-direction: column; }
.vm-agenda__row { display: grid; grid-template-columns: 180px 1fr auto; gap: 40px; align-items: center; padding: 36px 0; border-top: 1px solid var(--vm-grigio-velo); }
.vm-agenda__row:last-child { border-bottom: 1px solid var(--vm-grigio-velo); }
.vm-agenda__row .when .day { font-family: var(--vm-sans-body); font-size: 10px; letter-spacing: 0.32em; text-transform: uppercase; color: var(--vm-rosa-antico); margin-bottom: 6px; }
.vm-agenda__row .when .date { font-family: var(--vm-serif-display); font-style: italic; font-size: 32px; color: var(--vm-nero-lavico); }
.vm-agenda__row .when .tba { font-family: var(--vm-serif-display); font-style: italic; font-size: 22px; color: var(--vm-grigio-fumo); }
.vm-agenda__row .tag { font-family: var(--vm-sans-body); font-size: 10px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--vm-verde-etna); margin-bottom: 8px; }
.vm-agenda__row h3 { font-family: var(--vm-serif-display); font-size: clamp(26px, 3vw, 38px); font-weight: 400; line-height: 1.1; letter-spacing: -0.01em; color: var(--vm-nero-lavico); margin: 0 0 10px; }
.vm-agenda__row h3 em { font-style: italic; }
.vm-agenda__row p { font-family: var(--vm-sans-body); font-size: 15px; line-height: 1.65; color: var(--vm-grigio-caldo); font-weight: 300; margin: 0; max-width: 56ch; }

/* ===== Soggiorno: spaces gallery ===== */
.vm-spaces { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; max-width: var(--site-max); margin: 0 auto; padding: 0 var(--gutter); }
.vm-spaces figure { margin: 0; }
.vm-spaces img { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; transition: transform 1400ms var(--vm-ease); }
.vm-spaces figure:hover img { transform: scale(1.03); }
.vm-spaces figcaption { font-family: var(--vm-serif-display); font-style: italic; font-size: 14px; color: var(--vm-grigio-caldo); margin-top: 10px; padding: 0 4px; }

/* ===== Soggiorno: tour virtuale + rooms ===== */
.vm-tour { width: 100%; }
.vm-tour__frame { position: relative; aspect-ratio: 4/5; overflow: hidden; }
.vm-tour__frame img { width: 100%; height: 100%; object-fit: cover; filter: brightness(0.55); }
.vm-tour__frame--video video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: brightness(0.7); }
.vm-tour__frame--video::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(28,24,18,0) 60%, rgba(28,24,18,0.32) 100%); pointer-events: none; }
.vm-tour__overlay--bottom { justify-content: flex-end !important; }
.vm-tour__overlay { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; padding: clamp(24px, 4vw, 56px); color: var(--vm-bianco-calce); }
.vm-tour__eyebrow { font-family: var(--vm-sans-body); font-size: 11px; letter-spacing: 0.28em; text-transform: uppercase; opacity: 0.85; margin-bottom: 16px; }
.vm-tour__title { font-family: var(--vm-serif-display); font-weight: 300; font-size: clamp(36px, 5vw, 56px); line-height: 1; letter-spacing: -0.01em; }
.vm-tour__title em { font-style: italic; }
.vm-tour__sub { font-family: var(--vm-sans-body); font-size: 14px; line-height: 1.6; font-weight: 300; margin-top: 16px; max-width: 30ch; opacity: 0.92; }
.vm-tour__overlay .vm-btn { color: var(--vm-bianco-calce); border-color: var(--vm-bianco-calce); }

.vm-room { max-width: var(--site-max); margin: 0 auto; }
.vm-room__head { max-width: 720px; margin-bottom: 36px; }
.vm-room__head h2 { font-family: var(--vm-serif-display); font-weight: 400; font-size: clamp(32px, 4vw, 52px); line-height: 1.06; letter-spacing: -0.015em; color: var(--vm-nero-lavico); margin: 0 0 18px; }
.vm-room__head h2 em { font-style: italic; }
.vm-room__head p { font-family: var(--vm-sans-body); font-size: 17px; line-height: 1.7; color: var(--vm-grigio-caldo); font-weight: 300; max-width: 60ch; margin: 0; }
.vm-room__grid { display: grid; grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; gap: 8px; aspect-ratio: 16/10; }
.vm-room__grid .big { grid-row: span 2; overflow: hidden; }
.vm-room__grid .small { overflow: hidden; }
.vm-room__grid img { width: 100%; height: 100%; object-fit: cover; transition: transform 1400ms var(--vm-ease); }
.vm-room__grid > div:hover img { transform: scale(1.03); }
.vm-room__cta { margin-top: 24px; }

/* ===== Soggiorno: rooms gallery (filtrabile + lightbox) ===== */
.vm-gallery { max-width: var(--site-max); margin: 0 auto; padding: 0 var(--gutter); }
.vm-gallery__filters { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 40px; }
.vm-gallery__filter { font-family: var(--vm-sans-body); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; font-weight: 400; color: var(--vm-grigio-caldo); background: transparent; border: 1px solid var(--vm-grigio-velo); border-radius: 999px; padding: 11px 22px; cursor: pointer; transition: all 200ms var(--vm-ease); }
.vm-gallery__filter:hover { border-color: var(--vm-rosa-antico); color: var(--vm-nero-lavico); }
.vm-gallery__filter.is-active { background: var(--vm-nero-lavico); color: var(--vm-bianco-calce); border-color: var(--vm-nero-lavico); }
.vm-gallery__count { font-family: var(--vm-sans-body); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--vm-grigio-fumo); margin-left: auto; align-self: center; }
.vm-gallery__band { position: relative; }
.vm-gallery__track { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x proximity; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; padding: 4px 2px 20px; scrollbar-width: thin; scrollbar-color: var(--vm-grigio-velo) transparent; }
.vm-gallery__track::-webkit-scrollbar { height: 6px; }
.vm-gallery__track::-webkit-scrollbar-thumb { background: var(--vm-grigio-velo); border-radius: 999px; }
.vm-gallery__track::-webkit-scrollbar-track { background: transparent; }
.vm-gallery__item { flex: 0 0 auto; width: clamp(248px, 30vw, 400px); height: clamp(330px, 42vw, 480px); scroll-snap-align: start; position: relative; overflow: hidden; cursor: pointer; padding: 0; border: 0; background: var(--vm-grigio-velo); line-height: 0; }
.vm-gallery__item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1200ms var(--vm-ease); }
.vm-gallery__item:hover img { transform: scale(1.05); }
.vm-gallery__cap { position: absolute; inset: auto 0 0 0; padding: 44px 20px 18px; background: linear-gradient(180deg, rgba(28,24,18,0) 0%, rgba(28,24,18,0.72) 100%); color: var(--vm-bianco-calce); opacity: 0; transition: opacity 280ms var(--vm-ease); line-height: 1.3; }
.vm-gallery__item:hover .vm-gallery__cap { opacity: 1; }
.vm-gallery__cap .room { font-family: var(--vm-sans-body); font-size: 9px; letter-spacing: 0.24em; text-transform: uppercase; opacity: 0.85; display: block; margin-bottom: 4px; }
.vm-gallery__cap .what { font-family: var(--vm-serif-display); font-style: italic; font-size: 19px; }
.vm-gallery__empty { font-family: var(--vm-serif-display); font-style: italic; font-size: 20px; color: var(--vm-grigio-fumo); padding: 40px 0; }
.vm-gallery__nav { position: absolute; top: calc(50% - 12px); transform: translateY(-50%); width: 52px; height: 52px; border-radius: 999px; background: var(--vm-bianco-puro); border: 1px solid var(--vm-grigio-velo); color: var(--vm-nero-lavico); cursor: pointer; display: grid; place-items: center; font-size: 22px; line-height: 1; box-shadow: 0 8px 28px rgba(28,24,18,0.14); transition: all 220ms var(--vm-ease); z-index: 3; }
.vm-gallery__nav:hover { background: var(--vm-nero-lavico); color: var(--vm-bianco-calce); border-color: var(--vm-nero-lavico); }
.vm-gallery__nav--prev { left: -10px; }
.vm-gallery__nav--next { right: -10px; }

/* Lightbox */
.vm-lightbox { position: fixed; inset: 0; z-index: 120; background: rgba(20,17,12,0.95); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: clamp(20px, 5vw, 64px); animation: vm-lb-fade 260ms var(--vm-ease); }
@keyframes vm-lb-fade { from { opacity: 0; } to { opacity: 1; } }
.vm-lightbox__stage { position: relative; max-width: 92vw; max-height: 80vh; display: flex; align-items: center; justify-content: center; }
.vm-lightbox__stage img { max-width: 92vw; max-height: 80vh; object-fit: contain; display: block; box-shadow: 0 24px 60px rgba(0,0,0,0.4); }
.vm-lightbox__cap { margin-top: 22px; text-align: center; color: var(--vm-bianco-calce); }
.vm-lightbox__cap .room { font-family: var(--vm-sans-body); font-size: 10px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--vm-rosa-antico); display: block; margin-bottom: 8px; }
.vm-lightbox__cap .what { font-family: var(--vm-serif-display); font-style: italic; font-size: clamp(20px, 3vw, 30px); }
.vm-lightbox__cap .idx { font-family: var(--vm-sans-body); font-size: 11px; letter-spacing: 0.18em; color: var(--vm-grigio-fumo); margin-top: 10px; }
.vm-lightbox__btn { position: absolute; background: rgba(245,240,232,0.1); border: 1px solid rgba(245,240,232,0.25); color: var(--vm-bianco-calce); width: 52px; height: 52px; border-radius: 999px; cursor: pointer; font-size: 20px; display: flex; align-items: center; justify-content: center; transition: all 200ms var(--vm-ease); backdrop-filter: blur(6px); }
.vm-lightbox__btn:hover { background: rgba(245,240,232,0.22); }
.vm-lightbox__btn--prev { left: clamp(12px, 3vw, 40px); top: 50%; transform: translateY(-50%); }
.vm-lightbox__btn--next { right: clamp(12px, 3vw, 40px); top: 50%; transform: translateY(-50%); }
.vm-lightbox__btn--close { top: clamp(16px, 3vw, 32px); right: clamp(16px, 3vw, 32px); width: 46px; height: 46px; font-size: 16px; }

/* ===== Soggiorno: formule / come soggiornare ===== */
.vm-formulas { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; max-width: var(--site-max); margin: 0 auto; padding: 0 var(--gutter); }
.vm-formula { background: var(--vm-bianco-puro); border: 1px solid var(--vm-grigio-velo); padding: clamp(32px, 3.6vw, 52px); display: flex; flex-direction: column; }
.vm-formula__index { font-family: var(--vm-sans-body); font-size: 11px; letter-spacing: 0.28em; color: var(--vm-rosa-antico); }
.vm-formula__kicker { font-family: var(--vm-sans-body); font-size: 10px; letter-spacing: 0.26em; text-transform: uppercase; color: var(--vm-grigio-fumo); margin: 0 0 6px; }
.vm-formula__name { font-family: var(--vm-serif-display); font-weight: 400; font-size: clamp(28px, 3vw, 40px); line-height: 1.08; letter-spacing: -0.01em; color: var(--vm-nero-lavico); margin: 14px 0 16px; }
.vm-formula__name em { font-style: italic; }
.vm-formula__desc { font-family: var(--vm-sans-body); font-size: 15px; line-height: 1.7; color: var(--vm-grigio-caldo); font-weight: 300; margin: 0 0 24px; max-width: 42ch; }
.vm-formula__list { list-style: none; padding: 0; margin: 0 0 28px; display: flex; flex-direction: column; gap: 11px; }
.vm-formula__list li { font-family: var(--vm-sans-body); font-size: 14px; line-height: 1.55; color: var(--vm-grigio-caldo); font-weight: 300; padding-left: 22px; position: relative; }
.vm-formula__list li::before { content: ''; position: absolute; left: 0; top: 9px; width: 6px; height: 6px; border-radius: 999px; background: var(--vm-rosa-antico); }
.vm-formula__foot { margin-top: auto; }
.vm-formula__channels { font-family: var(--vm-sans-body); font-size: 11px; letter-spacing: 0.06em; color: var(--vm-grigio-fumo); margin: 18px 0 0; }
.vm-formula__channels strong { color: var(--vm-nero-lavico); font-weight: 500; }
.vm-formula--feature { background: var(--vm-verde-etna); border-color: var(--vm-verde-etna); color: var(--vm-bianco-calce); }
.vm-formula--feature .vm-formula__index { color: var(--vm-rosa-antico); }
.vm-formula--feature .vm-formula__kicker { color: rgba(245,240,232,0.7); }
.vm-formula--feature .vm-formula__name { color: var(--vm-bianco-calce); }
.vm-formula--feature .vm-formula__desc { color: rgba(245,240,232,0.92); }
.vm-formula--feature .vm-formula__list li { color: rgba(245,240,232,0.92); }
.vm-formula--feature .vm-formula__list li::before { background: var(--vm-rosa-antico); }
.vm-formula--feature .vm-formula__channels { color: rgba(245,240,232,0.65); }
.vm-formula--feature .vm-formula__channels strong { color: var(--vm-bianco-calce); }
.vm-formula__btns { display: flex; flex-wrap: wrap; gap: 12px; }

/* ===== Coming soon ===== */
.vm-coming { min-height: 80vh; display: grid; grid-template-columns: 1fr 1fr; gap: 0; padding-top: 72px; }
.vm-coming__img { background: var(--vm-grigio-velo); overflow: hidden; }
.vm-coming__img img { width: 100%; height: 100%; object-fit: cover; }
.vm-coming__text { display: flex; flex-direction: column; justify-content: center; padding: clamp(40px, 6vw, 96px); background: var(--vm-bianco-calce); }
.vm-coming__text h1 { font-family: var(--vm-serif-display); font-weight: 300; font-size: clamp(48px, 6vw, 88px); line-height: 1; letter-spacing: -0.02em; color: var(--vm-nero-lavico); margin: 18px 0 28px; max-width: 12ch; }
.vm-coming__text h1 em { font-style: italic; }
.vm-coming__text p { font-family: var(--vm-sans-body); font-size: 17px; line-height: 1.7; color: var(--vm-grigio-caldo); font-weight: 300; max-width: 44ch; }
.vm-coming__rule { width: 56px; height: 1px; background: var(--vm-rosa-antico); margin: 36px 0 18px; }
.vm-coming__sig { font-family: var(--vm-serif-display); font-style: italic; font-size: 18px; color: var(--vm-verde-etna); }

@media (max-width: 900px) {
  .vm-imagepair, .vm-imagepair.flip { grid-template-columns: 1fr; }
  .vm-pillars, .vm-experiences, .vm-reviews, .vm-dintorni { grid-template-columns: 1fr; }
  .vm-booking .inner { grid-template-columns: 1fr; gap: 40px; }
  .vm-footer .top { grid-template-columns: 1fr 1fr; }
  .vm-nav .links { display: none; }
  .vm-nav .cta { display: none; }
  .vm-nav__burger { display: inline-flex; }
  .vm-slow { grid-template-columns: 1fr; }
  .vm-slow__moment, .vm-slow__moment.right { grid-column: span 1; grid-template-columns: 1fr; direction: ltr; }
  .vm-rituals { grid-template-columns: 1fr; gap: 32px; }
  .vm-coming { grid-template-columns: 1fr; }
  .vm-coming__img { aspect-ratio: 4/3; }
  .vm-agenda__row { grid-template-columns: 1fr; gap: 14px; }
  .vm-spaces { grid-template-columns: 1fr 1fr; }
  .vm-formulas { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  .vm-spaces { grid-template-columns: 1fr; }
  .vm-gallery__nav { display: none; }
  .vm-gallery__item { width: clamp(220px, 78vw, 300px); height: clamp(300px, 100vw, 400px); }
  .vm-gallery__count { display: none; }
}


/* ===================== tokens-f.css ===================== */
/* Tokens addendum for Home F — Barefoot voice + Respira·Crea·Resta band.
   Loaded after tokens.css; only adds new selectors, doesn't override existing ones. */

/* ============================================================
   TWEAKABLE SURFACE SYSTEM (Home F)
   Tre leve espressive guidate da attributi/variabili su <html>:
   · data-atmosfera  → materiale di TUTTE le superfici scure (hero, nav,
                       banda Respira·Crea·Resta, prenotazione, banda Respira)
   · data-voce       → personalità del serif display
   · --respiro       → ariosità editoriale (ritmo verticale + interlinea)
   I default riproducono esattamente l'aspetto attuale (pietra antracite).
   ============================================================ */

:root {
  /* Grana pietra condivisa (riusata da ogni atmosfera) */
  --grain: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='200'%20height='200'%3E%3Cfilter%20id='n'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='0.85'%20numOctaves='3'%20stitchTiles='stitch'/%3E%3CfeColorMatrix%20type='saturate'%20values='0'/%3E%3C/filter%3E%3Crect%20width='200'%20height='200'%20filter='url(%23n)'%20opacity='0.16'/%3E%3C/svg%3E"); /* @kind other */

  /* — Default = Nero pieno (superficie piatta, senza texture) — */
  --surf-bg: #161310;
  --surf-image: none; /* @kind other */
  --surf-size: auto; /* @kind other */
  --surf-repeat: no-repeat; /* @kind other */
  --surf-fg: var(--vm-bianco-calce);
  --surf-fg-dim: rgba(245,240,232,0.85);
  --surf-accent: var(--vm-rosa-antico);
  --surf-scrim: linear-gradient(180deg, rgba(18,18,20,0.10) 0%, rgba(18,18,20,0.00) 35%, rgba(18,18,20,0.50) 100%); /* @kind other */

  --respiro: 1; /* @kind other */
  --respiro-lh: 1; /* @kind other */
}

/* — Notte (lava nera, l'origine) — */
:root[data-atmosfera="notte"] {
  --surf-bg: var(--vm-nero-lavico);
  --surf-image:
    var(--grain),
    radial-gradient(80% 70% at 16% 18%, rgba(150,140,128,0.16), transparent 60%),
    radial-gradient(70% 60% at 86% 24%, rgba(90,82,74,0.22), transparent 60%),
    radial-gradient(85% 85% at 72% 92%, rgba(0,0,0,0.42), transparent 64%);
}

/* — Terracotta (calore materico) — */
:root[data-atmosfera="terracotta"] {
  --surf-bg: var(--vm-terracotta);
  --surf-image:
    var(--grain),
    radial-gradient(80% 70% at 14% 18%, rgba(255,232,210,0.18), transparent 60%),
    radial-gradient(70% 60% at 86% 26%, rgba(120,60,40,0.20), transparent 60%),
    radial-gradient(85% 85% at 72% 95%, rgba(60,30,20,0.26), transparent 64%);
  --surf-fg: var(--vm-bianco-calce);
  --surf-fg-dim: rgba(245,240,232,0.92);
  --surf-accent: var(--vm-nero-lavico);
  --surf-scrim: linear-gradient(180deg, rgba(40,20,12,0.00) 40%, rgba(40,20,12,0.34) 100%); /* @kind other */
}

/* — Calce (bianco burro, atmosfera chiara) — */
:root[data-atmosfera="calce"] {
  --surf-bg: var(--vm-bianco-calce);
  --surf-image:
    var(--grain),
    radial-gradient(80% 70% at 14% 18%, rgba(180,150,120,0.10), transparent 60%),
    radial-gradient(70% 60% at 86% 26%, rgba(166,138,124,0.10), transparent 60%),
    radial-gradient(85% 80% at 72% 95%, rgba(120,108,92,0.07), transparent 64%);
  --surf-fg: var(--vm-nero-lavico);
  --surf-fg-dim: var(--vm-grigio-caldo);
  --surf-accent: var(--vm-verde-etna);
  --surf-scrim: linear-gradient(180deg, rgba(245,240,232,0.00) 40%, rgba(245,240,232,0.55) 100%); /* @kind other */
}

/* Applica il materiale a tutte le superfici scure insieme */
.vm-hero--light,
.vm-nav.over-photo,
.vm-rcr,
.vm-booking,
.vm-respira .band {
  background-color: var(--surf-bg) !important;
  background-image: var(--surf-image) !important;
  background-size: var(--surf-size);
  background-repeat: var(--surf-repeat);
}
.vm-nav.over-photo { backdrop-filter: none; -webkit-backdrop-filter: none; }

/* ---- Hero ---- */
.vm-hero--light { color: var(--surf-fg); }
.vm-hero--light .scrim { background: var(--surf-scrim); }
.vm-hero--light .eyebrow { color: var(--surf-fg); opacity: 0.9; }
.vm-hero--light h1 { color: var(--surf-fg); }
.vm-hero--light h1 em { color: var(--surf-accent); }
.vm-hero--light .lede { color: var(--surf-fg); opacity: 0.88; }
.vm-hero--light .vm-btn--primary { background: var(--surf-fg); color: var(--surf-bg); }
.vm-hero--light .vm-btn--outline { color: var(--surf-fg) !important; border-color: var(--surf-fg); }
/* Le tinte dei bottoni sono guidate da var() che cambiano con l'atmosfera:
   transizionare solo ombra/scala evita che `transition: all` congeli i colori. */
.vm-hero--light .vm-btn { transition: box-shadow 200ms var(--vm-ease), transform 200ms var(--vm-ease); }

/* ---- Nav ---- */
.vm-nav.over-photo { color: var(--surf-fg); }
.vm-nav.over-photo .cta { background: var(--surf-fg); color: var(--surf-bg); }

/* ---- Banda Respira·Crea·Resta ---- · le tinte testo sono guidate dalle
   regole originali .vm-rcr__* più sotto (consumano i surf-var direttamente). */

/* ---- Striscia prenotazione ---- */
.vm-booking { color: var(--surf-fg); }
.vm-booking .vm-eyebrow { color: var(--surf-accent) !important; }
.vm-booking h2 { color: var(--surf-fg); }
.vm-booking h2 em { color: var(--surf-accent); }
.vm-booking .inner > div > p { color: var(--surf-fg-dim) !important; }
.vm-booking__perks .rule { background: var(--surf-accent); }
.vm-booking__perks .perks-list { color: var(--surf-fg-dim); }
.vm-booking__perks .perks-list span:nth-child(odd) { color: var(--surf-fg); }

/* ---- Banda pagina Respira ---- · tinte testo guidate dalle regole originali
   .vm-respira .band* più sotto (consumano i surf-var direttamente). */

/* ============================================================
   VOCE TIPOGRAFICA — la famiglia display la imposta il pannello su
   <html> via --vm-serif-display; qui solo la messa a punto per voce.
   ============================================================ */
:root[data-voce="didone"] { --vm-ls-tight: -0.012em; }
:root[data-voce="editoriale"] { --vm-ls-tight: 0em; }

/* ============================================================
   RESPIRO — ritmo verticale + interlinea moltiplicati
   ============================================================ */
.vm-section { padding-top: calc(clamp(64px,10vw,128px) * var(--respiro)); padding-bottom: calc(clamp(64px,10vw,128px) * var(--respiro)); }
.vm-barefoot { padding-top: calc(clamp(80px,12vw,140px) * var(--respiro)); padding-bottom: calc(clamp(80px,12vw,140px) * var(--respiro)); }
.vm-rcr { padding-top: calc(clamp(80px,10vw,120px) * var(--respiro)); padding-bottom: calc(clamp(80px,10vw,120px) * var(--respiro)); }
.vm-booking { padding-top: calc(clamp(48px,6vw,80px) * var(--respiro)); padding-bottom: calc(clamp(48px,6vw,80px) * var(--respiro)); }
.vm-manifesto { padding-top: calc(clamp(64px,10vw,128px) * var(--respiro)); padding-bottom: calc(clamp(64px,10vw,128px) * var(--respiro)); }
.vm-hero--light .content { padding-bottom: calc(72px * var(--respiro)); }
.vm-respira .intro { padding-top: calc(clamp(60px,10vw,120px) * var(--respiro)); padding-bottom: calc(60px * var(--respiro)); }
.vm-respira .why { padding-bottom: calc(96px * var(--respiro)); }
.vm-respira .exp { padding-top: calc(64px * var(--respiro)); padding-bottom: calc(64px * var(--respiro)); }
.vm-respira .band { padding-top: calc(clamp(80px,10vw,120px) * var(--respiro)); padding-bottom: calc(clamp(80px,10vw,120px) * var(--respiro)); }
.vm-respira .close { padding-top: calc(clamp(80px,10vw,120px) * var(--respiro)); padding-bottom: calc(clamp(80px,10vw,120px) * var(--respiro)); }
/* interlinea dei blocchi di lettura */
.vm-section p,
.vm-barefoot .body p,
.vm-rcr__body p,
.vm-respira .why p,
.vm-respira .exp .text p { line-height: calc(1.75 * var(--respiro-lh)); }

/* === Long-form editorial: Luxury Barefoot === */
.vm-barefoot {
  padding: clamp(80px, 12vw, 140px) var(--gutter);
  background: var(--vm-bianco-calce);
  border-top: 1px solid var(--vm-grigio-velo);
  border-bottom: 1px solid var(--vm-grigio-velo);
}
.vm-barefoot .inner { max-width: 720px; margin: 0 auto; }
.vm-barefoot h2 {
  font-family: var(--vm-serif-display); font-weight: 300;
  font-size: clamp(40px, 5.4vw, 72px); line-height: 1.02; letter-spacing: -0.02em;
  color: var(--vm-nero-lavico); margin: 0 0 56px; max-width: 18ch; text-wrap: balance;
}
.vm-barefoot h2 em { font-style: italic; color: var(--vm-verde-etna); }
.vm-barefoot .body p {
  font-family: var(--vm-serif-display); font-weight: 300;
  font-size: clamp(20px, 1.8vw, 24px); line-height: 1.6;
  color: var(--vm-nero-lavico); margin: 0 0 24px; max-width: 56ch;
}
.vm-barefoot .body p em { font-style: italic; }
.vm-barefoot .body .closing {
  margin-top: 36px; padding-top: 28px;
  border-top: 1px solid var(--vm-grigio-velo);
  font-style: italic; color: var(--vm-verde-etna);
}

/* === Respira · Crea · Resta band === */
.vm-rcr {
  background: var(--vm-nero-lavico); color: var(--surf-fg);
  padding: clamp(80px, 10vw, 120px) var(--gutter);
  position: relative; overflow: hidden;
}
.vm-rcr::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(120% 80% at 50% 0%, rgba(196,122,85,0.18), transparent 60%);
  pointer-events: none;
}
.vm-rcr__inner { max-width: 1080px; margin: 0 auto; position: relative; z-index: 2; text-align: center; }
.vm-rcr__eyebrow {
  font-family: var(--vm-sans-body); font-size: 11px;
  letter-spacing: 0.32em; text-transform: uppercase;
  color: var(--surf-accent); margin-bottom: 56px;
}
.vm-rcr__triptych {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 4vw, 64px); margin-bottom: 72px;
}
.vm-rcr__verb { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.vm-rcr__verb .word {
  font-family: var(--vm-serif-display); font-weight: 300; font-style: italic;
  font-size: clamp(56px, 8vw, 104px); line-height: 1; letter-spacing: -0.02em;
}
.vm-rcr__verb .kind {
  font-family: var(--vm-sans-body); font-size: 11px;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--surf-fg-dim); font-weight: 400;
}
.vm-rcr__verb--1 .word { color: var(--vm-verde-etna); }
.vm-rcr__verb--2 .word { color: var(--vm-bouganvillea); }
.vm-rcr__verb--3 .word { color: var(--vm-rosa-antico); }
.vm-rcr__body { max-width: 56ch; margin: 0 auto; }
.vm-rcr__body p {
  font-family: var(--vm-sans-body); font-size: 18px;
  line-height: 1.75; font-weight: 300;
  color: var(--surf-fg-dim); margin: 0 0 20px;
}
.vm-rcr__note {
  font-family: var(--vm-serif-display) !important;
  font-style: italic; font-size: 17px !important;
  color: var(--surf-accent) !important;
  margin-top: 24px !important; padding-top: 24px;
  border-top: 1px solid rgba(245,240,232,0.15);
}
.vm-rcr__link {
  display: inline-block; margin-top: 48px;
  font-family: var(--vm-sans-body); font-size: 11px;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--surf-fg); text-decoration: none;
  padding-bottom: 6px; border-bottom: 1px solid currentColor;
  background: transparent; border-top: 0; border-left: 0; border-right: 0;
  cursor: pointer;
}
.vm-rcr__link:hover { color: var(--surf-accent); }

/* Pillar highlight (05 Respira, Crea, Resta) */
.vm-pillar.is-highlight {
  background: linear-gradient(180deg, var(--vm-bianco-calce) 0%, #f9f4ea 100%);
  position: relative;
}
.vm-pillar.is-highlight h3 { color: var(--vm-verde-etna); }

/* Booking perks line */
.vm-booking__perks { margin-top: 32px; }
.vm-booking__perks .rule { width: 48px; height: 1px; background: var(--vm-rosa-antico); margin-bottom: 16px; }
.vm-booking__perks .perks-list {
  display: flex; flex-wrap: wrap; gap: 10px;
  font-family: var(--vm-sans-body); font-size: 11px;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: rgba(245,240,232,0.7);
}
.vm-booking__perks .perks-list span:nth-child(odd) { color: var(--vm-bianco-calce); }

/* === RespiraPage (dedicated page within app) === */
.vm-respira { padding-top: 72px; background: var(--vm-bianco-calce); }
.vm-respira .intro { padding: clamp(60px, 10vw, 120px) var(--gutter) 60px; text-align: center; max-width: 760px; margin: 0 auto; }
.vm-respira .intro .eyebrow {
  font-family: var(--vm-sans-body); font-size: 11px;
  letter-spacing: 0.32em; text-transform: uppercase; font-weight: 500;
  color: var(--vm-rosa-antico); margin-bottom: 36px;
  display: inline-flex; align-items: center; gap: 14px;
}
.vm-respira .intro .eyebrow::before, .vm-respira .intro .eyebrow::after {
  content: ''; width: 32px; height: 1px; background: currentColor;
}
.vm-respira .intro h1 {
  font-family: var(--vm-serif-display); font-weight: 300;
  font-size: clamp(56px, 10vw, 120px); line-height: 0.98;
  letter-spacing: -0.02em; color: var(--vm-nero-lavico); margin: 0 0 36px;
}
.vm-respira .intro h1 .amp {
  font-style: italic; color: var(--vm-rosa-antico);
  font-size: 0.48em; display: block; margin: 6px 0; font-weight: 300;
}
.vm-respira .intro .dream {
  font-family: var(--vm-serif-display); font-style: italic; font-weight: 300;
  font-size: clamp(22px, 2.6vw, 28px); line-height: 1.45;
  color: var(--vm-grigio-caldo); max-width: 30ch; margin: 0 auto;
}
.vm-respira .why { padding: 30px var(--gutter) 96px; max-width: 760px; margin: 0 auto; }
.vm-respira .why p {
  font-family: var(--vm-sans-body); font-size: 19px; line-height: 1.75;
  font-weight: 300; color: var(--vm-nero-lavico);
  margin: 0 auto 24px; max-width: 56ch; text-align: center;
}
.vm-respira .why p strong { font-weight: 600; color: var(--vm-verde-etna); }

.vm-respira .exps { padding: 0 var(--gutter) 60px; max-width: 1040px; margin: 0 auto; }
.vm-respira .exp {
  padding: 64px 0; border-top: 1px solid var(--vm-grigio-velo);
  display: grid; grid-template-columns: 260px 1fr; gap: 56px; align-items: start;
}
.vm-respira .exp:first-child { border-top: none; }
.vm-respira .exp .verb {
  font-family: var(--vm-serif-display); font-weight: 400;
  font-size: clamp(48px, 7vw, 80px); line-height: 1; letter-spacing: -0.02em;
}
.vm-respira .exp.v1 .verb { color: var(--vm-verde-etna); }
.vm-respira .exp.v2 .verb { color: var(--vm-bouganvillea); }
.vm-respira .exp.v3 .verb { color: var(--vm-rosa-antico); }
.vm-respira .exp .kind {
  font-family: var(--vm-sans-body); font-size: 11px;
  text-transform: uppercase; letter-spacing: 0.22em; font-weight: 500;
  color: var(--vm-grigio-fumo); margin-top: 16px;
}
.vm-respira .exp .text p {
  font-family: var(--vm-sans-body); font-size: 18px; font-weight: 300;
  line-height: 1.75; color: var(--vm-nero-lavico); margin: 0;
}
.vm-respira .exp .text p .em {
  font-style: italic; font-family: var(--vm-serif-display);
  font-size: 1.06em; color: var(--vm-nero-lavico);
}

.vm-respira .band {
  background: var(--vm-nero-lavico); color: var(--surf-fg);
  padding: clamp(80px, 10vw, 120px) var(--gutter);
  text-align: center; position: relative; overflow: hidden; margin-top: 36px;
}
.vm-respira .band::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(100% 80% at 50% 0%, rgba(196,122,85,.18), transparent 60%);
}
.vm-respira .band .inner { position: relative; z-index: 2; max-width: 760px; margin: 0 auto; }
.vm-respira .band .q {
  font-family: var(--vm-serif-display); font-style: italic; font-weight: 300;
  font-size: clamp(28px, 4vw, 42px); line-height: 1.3; margin: 0 0 32px;
}
.vm-respira .band .q em { color: var(--surf-accent); font-style: italic; }
.vm-respira .band p {
  font-family: var(--vm-sans-body); font-size: 18px;
  font-weight: 300; line-height: 1.75;
  color: var(--surf-fg-dim); max-width: 56ch; margin: 0 auto 20px;
}
.vm-respira .band p strong { color: var(--surf-fg); font-weight: 500; }

.vm-respira .close { padding: clamp(80px, 10vw, 120px) var(--gutter); text-align: center; max-width: 760px; margin: 0 auto; }
.vm-respira .close .gift {
  font-family: var(--vm-sans-body); font-size: 11px;
  text-transform: uppercase; letter-spacing: 0.28em; font-weight: 500;
  color: var(--vm-rosa-antico); margin-bottom: 24px;
  display: inline-flex; align-items: center; gap: 14px;
}
.vm-respira .close .gift::before, .vm-respira .close .gift::after {
  content: ''; width: 22px; height: 1px; background: currentColor;
}
.vm-respira .close h2 {
  font-family: var(--vm-serif-display); font-weight: 300;
  font-size: clamp(34px, 5vw, 56px); line-height: 1.1;
  color: var(--vm-nero-lavico); margin: 0 auto 24px; max-width: 18ch;
}
.vm-respira .close p {
  font-family: var(--vm-sans-body); font-size: 18px;
  font-weight: 300; line-height: 1.75;
  color: var(--vm-grigio-caldo); max-width: 52ch; margin: 0 auto 36px;
}

@media (max-width: 720px) {
  .vm-respira .exp { grid-template-columns: 1fr; gap: 12px; }
  .vm-rcr__triptych { grid-template-columns: 1fr; gap: 32px; }
}

/* === Chi siamo — storia riassunta, espandibile, con gate romanzo === */
.vm-story {
  display: grid; grid-template-columns: 1fr 1.1fr;
  gap: clamp(24px, 4vw, 64px); align-items: center;
}
.vm-story .img-wrap { aspect-ratio: 4/5; overflow: hidden; }
.vm-story .img-wrap img { width: 100%; height: 100%; object-fit: cover; transition: transform 1200ms var(--vm-ease); }
.vm-story:hover .img-wrap img { transform: scale(1.04); }
.vm-story .text-block { padding: 0 clamp(0px, 2vw, 16px); }
.vm-story .text-block p strong { font-weight: 600; color: var(--vm-nero-lavico); }

.vm-story__more {
  display: grid; grid-template-rows: 0fr;
  opacity: 0; transition: grid-template-rows 520ms var(--vm-ease), opacity 420ms var(--vm-ease);
}
.vm-story__more > * { overflow: hidden; }
.vm-story__more.is-open { grid-template-rows: 1fr; opacity: 1; margin-top: 4px; }
.vm-story__close-line {
  font-family: var(--vm-serif-display) !important; font-style: italic;
  font-size: clamp(19px, 2vw, 23px) !important; line-height: 1.5 !important;
  color: var(--vm-nero-lavico) !important; margin-top: 8px !important;
}
.vm-story__close-line em { color: var(--vm-verde-etna); }

.vm-readmore {
  margin-top: 8px; background: none; border: 0; cursor: pointer; padding: 6px 0;
  font-family: var(--vm-sans-body); font-size: 12px; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--vm-verde-etna);
  border-bottom: 1px solid currentColor;
}
.vm-readmore:hover { color: var(--vm-nero-lavico); }

.vm-story__gate { margin-top: 32px; }
.vm-gate {
  margin-top: 8px; padding: 28px; max-width: 480px;
  background: var(--vm-bianco-calce); border: 1px solid var(--vm-grigio-velo);
}
.vm-gate__intro {
  font-family: var(--vm-serif-display) !important; font-style: italic;
  font-size: 19px !important; line-height: 1.5 !important;
  color: var(--vm-nero-lavico) !important; margin: 0 0 20px !important;
}
.vm-gate__intro em { color: var(--vm-verde-etna); }
.vm-gate__row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 16px; }
.vm-gate input {
  width: 100%; box-sizing: border-box; padding: 13px 14px;
  font-family: var(--vm-sans-body); font-size: 15px; color: var(--vm-nero-lavico);
  background: #fff; border: 1px solid var(--vm-grigio-velo); border-radius: 0;
}
.vm-gate input:focus { outline: none; border-color: var(--vm-verde-etna); }
.vm-gate .vm-btn { width: 100%; }
.vm-gate .vm-btn[disabled] { opacity: 0.5; cursor: not-allowed; }
.vm-gate__note {
  font-family: var(--vm-sans-body) !important; font-size: 12px !important;
  color: var(--vm-grigio-fumo) !important; font-weight: 300;
  margin: 14px 0 0 !important; line-height: 1.5 !important;
}
.vm-gate--done { text-align: left; }
.vm-gate--done a.vm-btn { display: inline-block; width: auto; text-decoration: none; }

@media (max-width: 900px) {
  .vm-story { grid-template-columns: 1fr; }
  .vm-gate__row { grid-template-columns: 1fr; }
}