/* ============================================================
   MONASTERO SAN PIETRO CLAVER — Design System
   MLP Studio · Prototipo HTML/CSS
   ============================================================ */

/* ── Google Fonts ── */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400&family=DM+Sans:wght@300;400;500&display=swap');

/* ── Custom Properties ── */
:root {
  /* Palette */
  --nero:       #0d0c0a;
  --nero-soft:  #1a1916;
  --oro:        #b8975a;
  --oro-light:  #d4b07a;
  --oro-dark:   #8c6e3a;
  --crema:      #f4efe8;
  --crema-dark: #e8e1d6;
  --verde:      #2e4535;
  --verde-light:#3d5a47;
  --grigio:     #7a7268;
  --grigio-light:#b0a89c;

  /* Typography */
  --font-serif: 'Cormorant Garamond', Georgia, serif;
  --font-sans:  'DM Sans', system-ui, sans-serif;

  /* Sizing */
  --container:  1320px;
  --radius:     2px;
  --radius-lg:  4px;

  /* Spacing */
  --section-y:  clamp(3.5rem, 6vw, 6rem);

  /* Transitions */
  --ease:       cubic-bezier(.25, .46, .45, .94);
  --dur:        .3s;
}

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; }
body {
  font-family: var(--font-sans);
  background: var(--crema);
  color: var(--nero);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
button { cursor: pointer; border: none; background: none; font: inherit; }

/* ── Typography Scale ── */
h1, h2, h3, h4 {
  font-family: var(--font-serif);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -.01em;
}
h1 { font-size: clamp(2.8rem, 6vw, 5.5rem); }
h2 { font-size: clamp(2rem, 4vw, 3.5rem); }
h3 { font-size: clamp(1.5rem, 2.5vw, 2.2rem); }
h4 { font-size: clamp(1.1rem, 1.8vw, 1.4rem); font-weight: 500; }

p {
  font-size: clamp(.9rem, 1.2vw, 1rem);
  line-height: 1.8;
  color: var(--grigio);
}

.eyebrow {
  font-family: var(--font-sans);
  font-size: .7rem;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--oro);
}

/* ── Container ── */
.container {
  width: 90%;
  max-width: var(--container);
  margin-inline: auto;
}

/* ── Buttons ── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  font-family: var(--font-sans);
  font-size: .75rem;
  font-weight: 500;
  letter-spacing: .15em;
  text-transform: uppercase;
  padding: .9rem 2.2rem;
  border: 1px solid currentColor;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
  white-space: nowrap;
}
.btn-oro {
  color: var(--oro);
  border-color: var(--oro);
}
.btn-oro:hover {
  background: var(--oro);
  color: var(--nero);
}
.btn-bianco {
  color: var(--crema);
  border-color: var(--crema);
}
.btn-bianco:hover {
  background: var(--crema);
  color: var(--nero);
}
.btn-nero {
  color: var(--nero);
  border-color: var(--nero);
}
.btn-nero:hover {
  background: var(--nero);
  color: var(--crema);
}
.btn-filled-oro {
  background: var(--oro);
  color: var(--nero);
  border-color: var(--oro);
}
.btn-filled-oro:hover {
  background: var(--oro-dark);
  border-color: var(--oro-dark);
}

/* ── Divider ── */
.divider {
  width: 3rem;
  height: 1px;
  background: var(--oro);
  display: block;
  margin: 1.5rem 0;
}
.divider-center { margin-inline: auto; }

/* ── Section wrapper ── */
.section { padding-block: var(--section-y); }
.section-dark { background: var(--nero); color: var(--crema); }
.section-dark p { color: var(--grigio-light); }

/* ── Grid helpers ── */
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; }

/* ── Aspect ratio helpers ── */
.ratio-hero  { aspect-ratio: 16/9; }
.ratio-4-3   { aspect-ratio: 4/3; }
.ratio-3-4   { aspect-ratio: 3/4; }
.ratio-1-1   { aspect-ratio: 1; }
.ratio-photo { aspect-ratio: 5/6; }

/* ── Cover image ── */
.cover { object-fit: cover; width: 100%; height: 100%; }

/* ============================================================
   HEADER / NAV
   ============================================================ */
#site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  padding: 1.5rem 0;
  transition: background var(--dur) var(--ease), padding var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
#site-header.scrolled {
  background: rgba(13, 12, 10, .96);
  padding: 1rem 0;
  box-shadow: 0 1px 0 rgba(184,151,90,.15);
  backdrop-filter: blur(10px);
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}
.header-logo img {
  height: 36px;
  width: auto;
}
.header-nav {
  display: flex;
  align-items: center;
  gap: 2.5rem;
}
.header-nav a {
  font-family: var(--font-sans);
  font-size: .7rem;
  font-weight: 500;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: rgba(244,239,232,.7);
  transition: color var(--dur) var(--ease);
}
.header-nav a:hover,
.header-nav a.active { color: var(--oro); }

.header-actions {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.lang-toggle {
  font-size: .7rem;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(244,239,232,.5);
  transition: color var(--dur) var(--ease);
  padding: .3rem .6rem;
  border: 1px solid rgba(244,239,232,.2);
}
.lang-toggle:hover { color: var(--crema); border-color: rgba(244,239,232,.4); }

/* Mobile menu toggle */
.menu-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: .5rem;
}
.menu-toggle span {
  display: block;
  width: 22px;
  height: 1.5px;
  background: var(--crema);
  transition: all var(--dur) var(--ease);
}

/* ============================================================
   HERO — Homepage
   ============================================================ */
.hero {
  position: relative;
  height: 100dvh;
  min-height: 600px;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}
.hero-media {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero-media img,
.hero-media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  filter: contrast(1.06) saturate(1.18);
}
.hero-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to right,  rgba(13,12,10,.7) 0%, rgba(13,12,10,0) 55%),
    linear-gradient(to bottom, rgba(13,12,10,.25) 0%, rgba(13,12,10,0) 30%, rgba(13,12,10,.88) 100%);
  z-index: 1;
}
.hero-content {
  position: relative;
  z-index: 2;
  padding-bottom: clamp(3rem, 6vw, 5rem);
  color: var(--crema);
  max-width: 820px;
}
.hero-content h1 {
  font-weight: 300;
  font-style: italic;
  margin-bottom: 1.5rem;
  text-shadow: 0 2px 24px rgba(13,12,10,.5);
}
.hero-content h1 em { font-style: normal; color: var(--oro-light); }
.hero-content p {
  font-size: 1rem;
  color: rgba(244,239,232,.9);
  max-width: 520px;
  margin-bottom: 2.5rem;
  line-height: 1.7;
  text-shadow: 0 1px 10px rgba(13,12,10,.6);
}
.hero-cta {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  align-items: center;
}

/* Scroll indicator */
.hero-scroll {
  position: absolute;
  bottom: 2rem;
  right: 2rem;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .5rem;
  color: rgba(244,239,232,.4);
  font-size: .6rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  writing-mode: vertical-rl;
}
.hero-scroll::before {
  content: '';
  width: 1px;
  height: 40px;
  background: var(--oro);
  display: block;
}

/* ============================================================
   INTRO / ABOUT STRIP
   ============================================================ */
.intro-section {
  background: var(--nero);
  padding-block: clamp(4rem, 7vw, 7rem);
}
.intro-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5rem;
  align-items: center;
}
.intro-text h2 {
  color: var(--crema);
  margin: 1.2rem 0 1.8rem;
  font-weight: 300;
}
.intro-text p { color: rgba(244,239,232,.6); margin-bottom: 1.2rem; }
.intro-image {
  position: relative;
}
.intro-image img {
  width: 100%;
  height: 580px;
  object-fit: cover;
  object-position: center center;
  filter: contrast(1.06) saturate(1.15);
}
.intro-badge {
  position: absolute;
  bottom: -2rem;
  left: -2rem;
  width: 120px;
  height: 120px;
  background: var(--oro);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--nero);
  padding: 1rem;
}
.intro-badge strong {
  font-family: var(--font-serif);
  font-size: 2.2rem;
  line-height: 1;
  display: block;
}
.intro-badge span {
  font-size: .6rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  font-weight: 500;
  margin-top: .2rem;
}

/* ============================================================
   NUMBERS / STATS STRIP
   ============================================================ */
.stats-strip {
  background: var(--verde);
  padding: 3rem 0;
}
.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: rgba(244,239,232,.1);
}
.stat-item {
  padding: 2rem;
  text-align: center;
  background: var(--verde);
}
.stat-item strong {
  display: block;
  font-family: var(--font-serif);
  font-size: clamp(2.5rem, 4vw, 3.5rem);
  color: var(--oro);
  line-height: 1;
}
.stat-item span {
  display: block;
  font-size: .65rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(244,239,232,.55);
  margin-top: .5rem;
  font-weight: 500;
}

/* ============================================================
   ROOMS — Cards
   ============================================================ */
.rooms-section { padding-block: var(--section-y); }
.section-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 3rem;
  gap: 2rem;
  flex-wrap: wrap;
}
.section-header-left h2 { margin: .8rem 0 0; }
.section-header p { max-width: 400px; }

.rooms-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--crema-dark);
}
.room-card {
  background: var(--crema);
  overflow: hidden;
  position: relative;
  display: block;
}
.room-card-img {
  overflow: hidden;
  aspect-ratio: 4/5;
}
.room-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  filter: contrast(1.06) saturate(1.15);
  transition: transform .6s var(--ease);
}
.room-card:hover .room-card-img img { transform: scale(1.04); }
.room-card-body {
  padding: 1.4rem 1.5rem 1.8rem;
}
.room-card-body h3 {
  font-size: 1.35rem;
  margin-bottom: .5rem;
}
.room-card-body p {
  font-size: .85rem;
  line-height: 1.6;
  margin-bottom: 1rem;
}
.room-meta {
  margin-bottom: 1.5rem;
}
.room-meta-item {
  font-size: .7rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--grigio-light);
  font-weight: 500;
}

/* ============================================================
   SERVICES
   ============================================================ */
.services-section {
  background: var(--nero);
  padding-block: var(--section-y);
}
.services-section h2 { color: var(--crema); margin: .8rem 0 0; }
.services-section p { color: rgba(244,239,232,.55); }


/* ============================================================
   EXPERIENCES
   ============================================================ */
.experiences-section { padding-block: var(--section-y); }
.experiences-section .section-header { margin-bottom: 2.5rem; }
.exp-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--crema-dark);
}
.exp-card {
  background: var(--crema);
  overflow: hidden;
}
.exp-card-img {
  aspect-ratio: 16/10;
  overflow: hidden;
}
.exp-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  filter: contrast(1.06) saturate(1.15);
  transition: transform .6s var(--ease);
}
.exp-card:hover .exp-card-img img { transform: scale(1.04); }
.exp-card-body {
  padding: 1.5rem 1.8rem 2rem;
  border-top: 1px solid var(--crema-dark);
}
.exp-card-body h4 {
  font-family: var(--font-serif);
  font-size: 1.2rem;
  font-weight: 400;
  margin-bottom: .6rem;
}
.exp-card-body p { font-size: .83rem; line-height: 1.65; }
.exp-duration {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-size: .65rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--grigio-light);
  font-weight: 500;
  margin-top: 1rem;
}

/* ============================================================
   LOCATION / MAP STRIP
   ============================================================ */
.location-section {
  background: var(--nero);
  padding-block: var(--section-y);
}
.location-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  align-items: stretch;
  min-height: 500px;
}
.location-map {
  background: var(--verde);
  position: relative;
  overflow: hidden;
}
.location-map img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  filter: contrast(1.06) saturate(1.15);
  opacity: .85;
}
.location-info {
  background: var(--nero-soft);
  padding: 4rem 3.5rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.location-info h2 { color: var(--crema); margin: .8rem 0 1.5rem; }
.location-info p { color: rgba(244,239,232,.55); margin-bottom: 1rem; }
.location-details {
  margin: 2rem 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.location-detail-item {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  font-size: .85rem;
  color: rgba(244,239,232,.6);
}
.location-detail-item strong {
  color: var(--oro);
  font-weight: 500;
  min-width: 120px;
  display: block;
  font-size: .7rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  margin-bottom: .2rem;
}

/* ============================================================
   CTA BANNER
   ============================================================ */
.cta-banner {
  position: relative;
  overflow: hidden;
  padding-block: clamp(4rem, 8vw, 7rem);
}
.cta-banner-bg {
  position: absolute;
  inset: 0;
}
.cta-banner-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cta-banner-overlay {
  position: absolute;
  inset: 0;
  background: rgba(13,12,10,.78);
}
.cta-banner-content {
  position: relative;
  z-index: 1;
  text-align: center;
  color: var(--crema);
  max-width: 700px;
  margin: 0 auto;
}
.cta-banner-content .eyebrow { margin-bottom: 1.2rem; }
.cta-banner-content h2 {
  font-weight: 300;
  font-style: italic;
  margin-bottom: 1.2rem;
}
.cta-banner-content p {
  color: rgba(244,239,232,.65);
  margin-bottom: 2.5rem;
}
.cta-buttons {
  display: flex;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
}

/* ============================================================
   FOOTER
   ============================================================ */
#site-footer {
  background: var(--nero);
  border-top: 1px solid rgba(184,151,90,.12);
  padding-top: 4rem;
  padding-bottom: 2rem;
}
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 3rem;
  padding-bottom: 3rem;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.footer-brand img { height: 32px; margin-bottom: 1.5rem; }
.footer-brand p {
  font-size: .85rem;
  color: rgba(244,239,232,.4);
  line-height: 1.7;
  max-width: 280px;
}
.footer-col h5 {
  font-family: var(--font-sans);
  font-size: .65rem;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--oro);
  margin-bottom: 1.2rem;
}
.footer-col a, .footer-col p {
  display: block;
  font-size: .83rem;
  color: rgba(244,239,232,.4);
  margin-bottom: .6rem;
  transition: color var(--dur) var(--ease);
  line-height: 1.6;
}
.footer-col a:hover { color: var(--crema); }
.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 1.5rem;
  gap: 1rem;
  flex-wrap: wrap;
}
.footer-copy {
  font-size: .72rem;
  color: rgba(244,239,232,.25);
  letter-spacing: .06em;
}
.footer-social {
  display: flex;
  gap: 1.2rem;
  align-items: center;
}
.footer-social a {
  font-size: .68rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(244,239,232,.3);
  font-weight: 500;
  transition: color var(--dur) var(--ease);
}
.footer-social a:hover { color: var(--oro); }

/* ============================================================
   PAGE HERO (inner pages)
   ============================================================ */
.page-hero {
  position: relative;
  /* 56.25vw = rapporto 16:9 del video: dove ci sta, il fotogramma si vede
     intero. Il tetto di 90vh garantisce che il fondo dell'hero — dove stanno
     breadcrumb e H1 — resti sempre dentro la finestra. */
  height: min(56.25vw, 90vh);
  min-height: 460px;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}
.page-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(to right,  rgba(13,12,10,.55) 0%, rgba(13,12,10,0) 60%),
    linear-gradient(to bottom, rgba(13,12,10,.42) 0%, rgba(13,12,10,0) 25%, rgba(13,12,10,.88) 100%);
}
.page-hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.page-hero-bg img,
.page-hero-bg video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  filter: contrast(1.07) saturate(1.2);
}
.page-hero-content {
  position: relative;
  z-index: 2;
  color: var(--crema);
  padding-bottom: 3rem;
}
/* Indicatore di scorrimento: stesso segno della home, qui però è un link —
   con l'hero quasi a tutto schermo serve dire che sotto continua. */
.page-hero-scroll {
  transition: color var(--dur) var(--ease);
}
.page-hero-scroll:hover { color: var(--crema); }
/* Ancora invisibile subito dopo l'hero. Il margine compensa l'header fisso. */
.ancora-contenuto {
  display: block;
  scroll-margin-top: 5rem;
}
.page-hero-content .eyebrow { margin-bottom: .8rem; }
.page-hero-content h1 { font-weight: 300; }

/* Breadcrumb */
.breadcrumb {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: .68rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(244,239,232,.4);
  margin-bottom: 1.5rem;
  font-weight: 500;
}
.breadcrumb a { transition: color var(--dur) var(--ease); }
.breadcrumb a:hover { color: var(--oro); }
.breadcrumb span { color: rgba(244,239,232,.6); }

/* ============================================================
   ABOUT PAGE
   ============================================================ */
.about-intro {
  padding-block: var(--section-y);
}
.about-intro-grid {
  display: grid;
  /* La colonna foto è più larga del testo: con scatti orizzontali serve
     ampiezza, altrimenti l'immagine resta un francobollo accanto a tre
     paragrafi. */
  grid-template-columns: 1fr 1.2fr;
  gap: 4.5rem;
  align-items: center;
}
.about-intro-text h2 { margin: .8rem 0 1.5rem; }
.about-intro-text p { margin-bottom: 1.2rem; }
/* Il riquadro immagine ospita un carosello in formato orizzontale 3:2,
   il taglio naturale della maggior parte degli scatti. */
.about-intro .carosello-img {
  aspect-ratio: 3/2;
  height: auto;
  background: var(--crema-dark);
}
.about-intro-img > img {
  width: 100%;
  aspect-ratio: 3/2;
  object-fit: cover;
  object-position: center center;
  filter: contrast(1.06) saturate(1.15);
}

.about-values {
  background: var(--nero);
  padding-block: var(--section-y);
}
.about-values h2 { color: var(--crema); margin: .8rem 0 3rem; }
.values-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3rem;
}
.value-item {
  border-top: 1px solid rgba(184,151,90,.3);
  padding-top: 2rem;
}
.value-item h4 {
  color: var(--crema);
  font-family: var(--font-serif);
  font-size: 1.3rem;
  font-weight: 400;
  margin: 1rem 0 .8rem;
}
.value-num {
  font-family: var(--font-serif);
  font-size: 3rem;
  /* Al 20% l'oro spariva sul fondo nero: resta decorativo ma si legge. */
  color: rgba(184,151,90,.45);
  line-height: 1;
  display: block;
}
.value-item p { font-size: .875rem; color: rgba(244,239,232,.6); }

/* ============================================================
   ROOMS PAGE
   ============================================================ */
.rooms-list {
  padding-block: var(--section-y);
}
.room-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  min-height: 480px;
  margin-bottom: 2px;
  background: var(--crema-dark);
}
.room-row:nth-child(even) .room-row-img { order: 2; }
.room-row:nth-child(even) .room-row-info { order: 1; }
.room-row-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  filter: contrast(1.06) saturate(1.15);
}
.room-row-info {
  padding: 4rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: var(--crema);
}
.room-row-info .eyebrow { margin-bottom: .8rem; }
.room-row-info h2 { margin-bottom: 1rem; font-size: clamp(1.8rem, 3vw, 2.8rem); }
.room-row-info p { margin-bottom: 1rem; }
/* Indice delle tipologie sotto l'intro: mostra subito l'intera offerta e
   porta alla riga corrispondente senza scorrere tre schermate. */
.camere-indice,
.servizi-indice {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: .6rem 1.4rem;
  margin-top: 2.5rem;
  padding-top: 2rem;
  border-top: 1px solid var(--crema-dark);
}
.camere-indice a,
.servizi-indice a {
  position: relative;
  font-family: var(--font-sans);
  font-size: .68rem;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--grigio);
  transition: color var(--dur) var(--ease);
}
/* Interruzione di riga: quattro voci sopra, le restanti sotto. */
.camere-indice-acapo {
  flex-basis: 100%;
  height: 0;
}
/* Separatore fra una voce e l'altra. In crema era invisibile: serve l'oro. */
.camere-indice a:not(.senza-sep)::after,
.servizi-indice a:not(.senza-sep)::after {
  content: '';
  position: absolute;
  right: -.75rem;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 1.1em;
  background: rgba(184,151,90,.65);
}
.camere-indice a:hover,
.servizi-indice a:hover { color: var(--oro-dark); }

/* L'ancora di ogni riga tiene conto dell'header fisso. */
.room-row { scroll-margin-top: 5rem; }

/* Specifiche in chiaro nella riga camera: una sola linea, in serif, per
   confrontare le tipologie senza aprire le schede. */
.room-specs {
  margin: 1.2rem 0 0;
  font-family: var(--font-serif);
  font-size: 1.15rem;
  line-height: 1.5;
  color: var(--nero);
}
.room-ideale {
  margin: .8rem 0 0;
  font-size: .85rem;
  color: var(--grigio);
}
.room-ideale span {
  font-size: .65rem;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--oro);
  margin-right: .6rem;
}

.room-amenities {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  margin: 1.5rem 0 2rem;
}
.amenity-tag {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .4rem .9rem;
  border: 1px solid var(--crema-dark);
  font-size: .65rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--grigio);
  font-weight: 500;
}

/* ── Tabella di confronto tipologie ──────────────────────── */
.confronto {
  background: var(--crema);
  padding-block: var(--section-y);
}
.confronto-head {
  text-align: center;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}
.confronto-head h2 { margin-top: .8rem; }
/* La tabella scorre da sola: su schermi stretti sei colonne non ci stanno,
   ma non deve mai far scorrere la pagina in orizzontale. */
.confronto-scroll { overflow-x: auto; }
.confronto-tabella {
  width: 100%;
  min-width: 720px;
  border-collapse: collapse;
  text-align: left;
}
.confronto-tabella th,
.confronto-tabella td {
  padding: 1.1rem 1.2rem;
  border-bottom: 1px solid var(--crema-dark);
  vertical-align: middle;
}
.confronto-tabella thead th {
  font-family: var(--font-sans);
  font-size: .62rem;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--oro);
  border-bottom-color: var(--oro);
}
.confronto-tabella tbody th {
  font-family: var(--font-serif);
  font-size: 1.15rem;
  font-weight: 400;
  white-space: nowrap;
}
.confronto-tabella tbody th a { transition: color var(--dur) var(--ease); }
.confronto-tabella tbody th a:hover { color: var(--oro-dark); }
.confronto-tabella td {
  font-size: .88rem;
  color: var(--grigio);
}
.confronto-tabella tbody tr:hover { background: rgba(184,151,90,.05); }

/* ── In ogni camera — le dotazioni comuni a tutte le tipologie ── */
.incluso-ovunque {
  background: var(--nero);
  color: var(--crema);
  padding-block: var(--section-y);
}
.incluso-head {
  text-align: center;
  max-width: 46rem;
  margin: 0 auto clamp(2rem, 4vw, 3rem);
}
.incluso-head h2 { color: var(--crema); font-weight: 300; }
.incluso-head p { color: rgba(244,239,232,.6); margin-top: 1rem; }
.incluso-lista {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: rgba(244,239,232,.12);
}
.incluso-lista li {
  background: var(--nero);
  padding: 1.6rem 1.4rem;
  font-family: var(--font-serif);
  font-size: 1.1rem;
  color: rgba(244,239,232,.85);
}

/* ============================================================
   SCHEDA CAMERA — sintesi, gallerie, spazi, visore
   ============================================================ */

.room-detail-titolo { margin: .8rem 0 1.5rem; font-size: clamp(1.8rem, 3vw, 2.5rem); }
.room-detail-sottotitolo { margin: 2.5rem 0 1.2rem; font-size: 1.4rem; }
.room-ideale--scheda { margin-top: 1.8rem; }
.booking-card .form-note { margin-top: 1.2rem; }

/* Card "Incluso nel soggiorno" sotto la booking card */
.incluso-card {
  margin-top: 2px;
  background: var(--nero-soft);
  padding: 2rem;
  border-top: 1px solid rgba(184,151,90,.15);
}
.incluso-card .eyebrow { display: block; margin-bottom: 1rem; }
.incluso-card ul { display: flex; flex-direction: column; gap: .7rem; }
.incluso-card li {
  font-size: .8rem;
  color: rgba(244,239,232,.55);
  padding-left: 1rem;
  position: relative;
}
.incluso-card li::before {
  content: '+';
  position: absolute;
  left: 0;
  color: var(--oro);
}

/* ── Gallerie ──
   Quattro disposizioni, un solo componente: il visore le tratta uguali.
   La divisione per categoria è ciò che tiene i dettagli fuori dalle
   panoramiche, senza dipendere da chi carica le foto. */
.galleria-sezione { padding-block: var(--section-y); }
.galleria-sezione:nth-of-type(even) { background: var(--crema); }
.galleria-head {
  text-align: center;
  max-width: 44rem;
  margin: 0 auto clamp(2rem, 4vw, 3rem);
}
.galleria-head h2 { margin-top: .8rem; }
.galleria-head p { margin-top: 1rem; color: var(--grigio); }

/* Galleria dentro la colonna del testo: intestazione allineata a sinistra
   come il resto della colonna, non centrata. */
.galleria-blocco { margin-top: 3rem; }
.galleria-head--sx {
  text-align: left;
  max-width: none;
  margin-inline: 0;
  margin-bottom: 1.5rem;
}
.galleria-head--sx h2 { font-size: clamp(1.5rem, 2.4vw, 2rem); }

.galleria { display: grid; gap: 2px; }
.galleria-item {
  display: block;
  padding: 0;
  overflow: hidden;
  background: var(--crema-dark);
  cursor: zoom-in;
}
.galleria-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: contrast(1.06) saturate(1.15);
  transition: transform .6s var(--ease);
}
.galleria-item:hover img { transform: scale(1.04); }
.galleria-item:focus-visible { outline: 2px solid var(--oro); outline-offset: 2px; }

/* Mosaico: la prima foto è la panoramica e occupa il riquadro grande. */
.galleria--mosaico {
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 1fr;
}
.galleria--mosaico .galleria-item { aspect-ratio: 3/2; }
.galleria--mosaico .galleria-item:first-child {
  grid-column: span 2;
  grid-row: span 2;
  aspect-ratio: auto;
}
/* Griglia dei dettagli: due sole colonne, riquadri ampi. Sono scatti
   ravvicinati e in miniatura non si capirebbero. */
.galleria--griglia {
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
}
.galleria--griglia .galleria-item { aspect-ratio: 4/3; }

/* Carosello della camera: una foto alla volta, grande. */
.carosello--camera .carosello-img {
  aspect-ratio: 16/9;
  height: auto;
  width: 100%;
  padding: 0;
  cursor: zoom-in;
}
.carosello--camera .carosello-btn {
  border-color: rgba(13,12,10,.2);
  color: var(--nero);
}
.carosello--camera .carosello-btn:hover {
  background: var(--oro);
  border-color: var(--oro);
  color: var(--crema);
}
.carosello--camera .carosello-conta { color: var(--grigio); }
.carosello--camera .carosello-ui { justify-content: center; }
.galleria--larga { grid-template-columns: 1fr; }
.galleria--larga .galleria-item { aspect-ratio: 21/9; }
.galleria--striscia { grid-template-columns: repeat(6, 1fr); }
.galleria--striscia .galleria-item { aspect-ratio: 1; }

/* ── Distribuzione degli spazi ── */
.spazi {
  background: var(--nero);
  color: var(--crema);
  padding-block: var(--section-y);
}
.spazi-head { text-align: center; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.spazi-head h2 { color: var(--crema); font-weight: 300; margin-top: .8rem; }
.spazi-lista { display: flex; flex-direction: column; gap: 2px; }
.spazio {
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: var(--nero-soft);
}
.spazio:nth-child(even) .spazio-img { order: 2; }
.spazio-img img {
  width: 100%;
  height: 100%;
  aspect-ratio: 3/2;
  object-fit: cover;
}
.spazio-testo {
  padding: clamp(2rem, 4vw, 3.5rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.spazio-num {
  font-family: var(--font-serif);
  font-size: 2.2rem;
  line-height: 1;
  color: rgba(184,151,90,.45);
}
.spazio-testo h3 {
  color: var(--crema);
  font-size: 1.5rem;
  margin: .8rem 0 .4rem;
}
.spazio-mq {
  font-family: var(--font-sans);
  font-size: .65rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--oro);
  margin-bottom: .9rem;
}
.spazio-testo p { color: rgba(244,239,232,.6); font-size: .9rem; }
.planimetria {
  margin: clamp(2rem, 4vw, 3rem) auto 0;
  max-width: 52rem;
}
.planimetria img { width: 100%; }
.planimetria .didascalia { color: rgba(244,239,232,.45); }

/* ── Cosa la rende esclusiva ── */
.esclusiva {
  background: var(--crema);
  padding-block: var(--section-y);
}
.esclusiva-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: clamp(2rem, 4vw, 3.5rem);
}
.esclusiva-voce { border-top: 1px solid var(--oro); padding-top: 1.4rem; }
.esclusiva-voce p { margin-top: .9rem; }

/* ── Altre camere ── */
.altre-camere {
  background: var(--nero);
  padding-block: 4rem;
}
.altre-camere .block-head h2 {
  color: var(--crema);
  margin-top: .6rem;
  font-size: clamp(1.6rem, 3vw, 2.5rem);
}
.altre-camere-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  background: rgba(255,255,255,.05);
}
.altra-camera { display: block; background: var(--nero-soft); overflow: hidden; }
.altra-camera-img img {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  transition: transform .6s var(--ease);
}
.altra-camera:hover .altra-camera-img img { transform: scale(1.05); }
.altra-camera-testo { padding: 1.5rem; }
.altra-camera-testo h4 {
  color: var(--crema);
  font-family: var(--font-serif);
  font-size: 1.2rem;
  font-weight: 400;
}
.altra-camera-testo .eyebrow { display: block; margin-bottom: .5rem; }

/* ── Visore a schermo intero ── */
.visore {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: none;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: clamp(1rem, 4vw, 3rem);
  background: rgba(13,12,10,.96);
}
.visore.aperto { display: flex; }
.visore-figura {
  margin: 0;
  max-width: min(92vw, 1600px);
  max-height: 86vh;
}
.visore-figura img {
  max-width: 100%;
  max-height: 86vh;
  width: auto;
  object-fit: contain;
}
.visore-nav,
.visore-chiudi {
  display: grid;
  place-items: center;
  border: 1px solid rgba(244,239,232,.25);
  color: var(--crema);
  background: none;
  transition: background var(--dur) var(--ease),
              border-color var(--dur) var(--ease),
              color var(--dur) var(--ease);
}
.visore-nav { width: 3rem; height: 3rem; font-size: 1rem; flex: 0 0 auto; }
.visore-chiudi {
  position: absolute;
  top: clamp(1rem, 3vw, 2rem);
  right: clamp(1rem, 3vw, 2rem);
  width: 2.6rem;
  height: 2.6rem;
  font-size: 1.4rem;
  line-height: 1;
}
.visore-nav:hover,
.visore-chiudi:hover {
  background: var(--oro);
  border-color: var(--oro);
  color: var(--nero);
}
.visore--singolo .visore-nav,
.visore--singolo .visore-conta { display: none; }
.visore-conta {
  position: absolute;
  bottom: clamp(1rem, 3vw, 2rem);
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  font-family: var(--font-sans);
  font-size: .68rem;
  letter-spacing: .2em;
  color: rgba(244,239,232,.55);
}
.visore-conta [data-visore-idx] { color: var(--oro); }

/* ============================================================
   ROOM DETAIL PAGE
   ============================================================ */
.room-detail-hero {
  height: 80vh;
  min-height: 500px;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
}
.room-detail-hero img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.room-detail-hero-overlay {
  position: absolute;
  inset: 0;
  /* Tre sfumature: da sinistra per il testo, in alto per il menu, in basso
     per il titolo. Le camere sono fotografate chiare e senza la fascia
     inferiore il titolo si perdeva sul bianco del letto. */
  background:
    linear-gradient(to right,  rgba(13,12,10,.55) 0%, rgba(13,12,10,0) 65%),
    linear-gradient(to bottom, rgba(13,12,10,.45) 0%, rgba(13,12,10,0) 22%, rgba(13,12,10,.85) 100%);
}
.room-detail-hero-content {
  position: relative;
  z-index: 1;
  color: var(--crema);
  padding-bottom: 4rem;
}

.room-detail-body {
  padding-block: var(--section-y);
}
.room-detail-grid {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 5rem;
  align-items: start;
}
.room-detail-content p { margin-bottom: 1.2rem; }
.room-gallery {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  margin-top: 2.5rem;
  background: var(--crema-dark);
}
.room-gallery img {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
}
.room-detail-sidebar {
  position: sticky;
  top: 100px;
}
.booking-card {
  background: var(--nero);
  padding: 2.5rem;
  color: var(--crema);
}
.booking-card h4 {
  color: var(--oro);
  font-family: var(--font-serif);
  font-size: 1.2rem;
  font-weight: 400;
  margin-bottom: 1.5rem;
}
.booking-info {
  display: flex;
  flex-direction: column;
  gap: .8rem;
  margin-bottom: 2rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.booking-info-item {
  display: flex;
  justify-content: space-between;
  font-size: .8rem;
  color: rgba(244,239,232,.5);
}
.booking-info-item strong { color: var(--crema); font-weight: 400; }
.booking-card .btn { width: 100%; justify-content: center; margin-top: .8rem; }

/* ============================================================
   SERVICES PAGE
   ============================================================ */
/* ── "Incluso nel soggiorno" — elenco a righe ──
   Stesso componente delle righe servizio della homepage. La griglia a
   riquadri che c'era prima diventava una tabella di scatole con l'ultima
   cella vuota ogni volta che i servizi non erano un multiplo di tre.
   Due colonne e non una: a tutta larghezza il testo finirebbe troppo
   lontano dall'icona che lo introduce. */
.servizi-elenco-nota {
  max-width: 40rem;
  margin-top: 1.4rem;
  font-size: .85rem;
  line-height: 1.7;
  color: rgba(244,239,232,.52);
}

.servizi-elenco {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0 clamp(2.5rem, 5vw, 5rem);
  margin: clamp(2.5rem, 4vw, 3.5rem) 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid rgba(184,151,90,.4);
}
/* Le righe nascono per il fondo crema della homepage: su nero i filetti e
   l'oro scurito dell'icona vanno riportati in chiaro. */
.servizi-elenco .servizio-riga { border-bottom: 1px solid rgba(244,239,232,.12); }
.servizi-elenco .servizio-icona { color: var(--oro); }
.servizi-elenco h4 { color: var(--crema); }
.servizi-elenco p { color: rgba(244,239,232,.58); }

/* Voce che rimanda alla sezione dedicata più in alto nella pagina.
   Cliccabile su tutto il blocco di testo, non solo sul titolo: a queste
   dimensioni un titolo di due parole è un bersaglio troppo piccolo. */
.servizi-elenco a.servizio-riga-testo { display: block; }
.servizio-riga-freccia {
  display: inline-block;
  margin-left: .5rem;
  font-family: var(--font-sans);
  font-size: .7em;
  color: var(--oro);
  transition: transform var(--dur) var(--ease);
}
.servizi-elenco a.servizio-riga-testo:hover h4,
.servizi-elenco a.servizio-riga-testo:focus-visible h4 { color: var(--oro-light); }
.servizi-elenco a.servizio-riga-testo:hover .servizio-riga-freccia { transform: translateX(.3rem); }
/* Il filetto sotto la riga si accende: dice che è cliccabile anche a chi
   arriva con il puntatore sul testo e non sul titolo. */
.servizio-riga--link { transition: border-color var(--dur) var(--ease); }
.servizi-elenco .servizio-riga--link:hover { border-bottom-color: rgba(184,151,90,.6); }

@media (prefers-reduced-motion: reduce) {
  .servizio-riga-freccia { transition: none; }
  .servizi-elenco a.servizio-riga-testo:hover .servizio-riga-freccia { transform: none; }
}

@media (max-width: 768px) {
  .servizi-elenco { grid-template-columns: 1fr; }
}

/* Le righe dei servizi in evidenza vanno da bordo a bordo: nessun container,
   solo lo stacco dalla griglia che segue. */
.servizi-evidenza { padding-bottom: var(--section-y); }
.sf-cta { margin-top: 1.5rem; }

.services-feature {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  min-height: 520px;
  margin-bottom: 2px;
}
.services-feature:nth-child(even) .sf-img { order: 2; }
.services-feature:nth-child(even) .sf-content { order: 1; }
.sf-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  filter: contrast(1.06) saturate(1.15);
}
.sf-img-placeholder {
  background: var(--crema-dark);
  display: flex;
  align-items: center;
  justify-content: center;
}
.sf-img-placeholder span {
  font-size: .7rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--grigio-light);
  font-weight: 500;
  text-align: center;
  line-height: 1.8;
  border: 1px dashed var(--grigio-light);
  padding: 1rem 1.5rem;
}
.sf-content {
  background: var(--crema);
  padding: 5rem 4rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.sf-content .eyebrow { margin-bottom: 1rem; }
.sf-content h3 { margin-bottom: 1.2rem; }
.sf-content p { margin-bottom: 1rem; }

/* ── Intro delle pagine di elenco (Servizi, Esperienze) ──
   Colonna stretta e centrata: l'apertura è testo, e una riga lunga
   quanto il contenitore non si legge. */
.pagina-intro { padding-block: clamp(3.5rem, 6vw, 5.5rem) clamp(2rem, 3vw, 3rem); }
.pagina-intro-testo {
  max-width: 46rem;
  margin-inline: auto;
  text-align: center;
}
.pagina-intro-testo h2 { margin: 1rem 0 1.5rem; }
.pagina-intro-testo p + p { margin-top: 1.1rem; }

/* Le ancore devono fermarsi sotto l'header fisso, non dietro. */
#colazione, #concierge, #incluso { scroll-margin-top: 5rem; }

/* ── Colazione ──
   Fondo nero: è la sezione con più fotografia della pagina, e il cibo
   su crema perde il contrasto che ha su scuro. Stesso trattamento del
   mosaico degli interni in homepage. */
.colazione {
  background: var(--nero);
  color: var(--crema);
  padding-block: var(--section-y);
}
.colazione .galleria-item { background: var(--nero-soft); }

/* ── Striscia fotografica della Colazione ──
   Stesso trattamento della pagina Il Monastero: scatti a contatto, a tutta
   larghezza, fuori dal container. Chiude la sezione facendo da passaggio fra
   il nero del testo e il crema del concierge, quindi la sezione rinuncia al
   suo padding inferiore.
   Una riga sola, colonne in parti uguali qualunque sia il numero di scatti
   (`grid-auto-flow: column`): i campi sono cinque, quindi non c'è mai una
   seconda riga da riempire. Altezza fissa invece del quadrato perfetto —
   con tre foto un riquadro 1:1 diventerebbe alto mezzo schermo. */
.colazione:has(.colazione-striscia) { padding-bottom: 0; }
.colazione-striscia { margin-top: clamp(3rem, 5vw, 4.5rem); }
.colazione-striscia .galleria-blocco { margin-top: 0; }
.colazione-striscia .galleria--striscia {
  grid-template-columns: none;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 2px;
}
.colazione-striscia .galleria-item {
  aspect-ratio: auto;
  height: clamp(200px, 17vw, 300px);
  background: var(--nero-soft);
}

/* Su schermo stretto cinque colonne diventano cinque fessure: si torna a
   una griglia che va a capo. */
@media (max-width: 900px) {
  .colazione-striscia .galleria--striscia {
    grid-auto-flow: row;
    grid-template-columns: repeat(3, 1fr);
  }
  .colazione-striscia .galleria-item { height: clamp(150px, 28vw, 230px); }
}
@media (max-width: 560px) {
  .colazione-striscia .galleria--striscia { grid-template-columns: repeat(2, 1fr); }
}

/* Orari e sala: il dato secco che si cerca per primo, in serif e grande,
   come i tempi di percorrenza della sezione Posizione. */
.servizio-dati {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: 1.8rem 3rem;
  margin: clamp(2.5rem, 4vw, 3.5rem) 0 0;
  padding-top: 1.8rem;
  border-top: 1px solid rgba(184,151,90,.45);
}
.servizio-dato dt {
  font-family: var(--font-sans);
  font-size: .68rem;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--oro);
}
.servizio-dato dd { margin: .6rem 0 0; }
.servizio-dato-valore {
  display: block;
  font-family: var(--font-serif);
  font-size: clamp(1.2rem, 1.8vw, 1.45rem);
  line-height: 1.3;
  color: var(--crema);
}
.servizio-dato-nota {
  display: block;
  margin-top: .4rem;
  font-size: .78rem;
  line-height: 1.6;
  color: rgba(244,239,232,.55);
}

/* Come funziona / I prodotti / Esigenze alimentari: tre colonne di testo.
   Campi separati in backend, colonne separate in pagina — è ciò che
   impedisce alla sezione di ridursi a un paragrafo di cortesia. */
.servizio-note {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: clamp(2rem, 3vw, 3rem);
  margin-top: clamp(2.5rem, 4vw, 3.5rem);
}
.servizio-nota {
  padding-top: 1.4rem;
  border-top: 1px solid rgba(244,239,232,.18);
}
.servizio-nota h3 {
  font-size: clamp(1.2rem, 1.7vw, 1.45rem);
  font-weight: 400;
  color: var(--crema);
}
.servizio-nota p {
  margin-top: .9rem;
  font-size: .88rem;
  line-height: 1.75;
  color: rgba(244,239,232,.62);
}
.servizio-nota p + p { margin-top: .8rem; }
/* Chi ha un'allergia cerca questa colonna, non la legge per caso:
   il filo oro la fa trovare senza scorrere le altre due. */
.servizio-nota--rilievo { border-top-color: var(--oro); }

/* ── Concierge ──
   Crema: dopo il nero della colazione la pagina torna alla luce, e la
   sezione più fitta di testo della pagina si legge su fondo chiaro. */
.concierge-pagina {
  background: var(--crema);
  padding-block: var(--section-y);
}
.concierge-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2.5rem, 5vw, 5rem);
  align-items: start;
  /* Più stretto del container: a 1320px le voci degli elenchi diventavano
     righe da novanta battute, mentre il testo introduttivo sopra ne tiene
     una sessantina. Due misure diverse nella stessa sezione si notano. */
  max-width: 62rem;
}
.concierge-foto { margin: 0; }
.concierge-foto img {
  width: 100%;
  aspect-ratio: 4/5;
  object-fit: cover;
  filter: contrast(1.05);
}
/* Senza elenchi accanto: la foto occupa la griglia, ma non cresce oltre
   la misura in cui un ritratto 4:5 resta un ritratto e non un poster. */
.concierge-foto--sola {
  grid-column: 1 / -1;
  max-width: 34rem;
}

.concierge-fasi {
  display: flex;
  flex-direction: column;
  gap: clamp(2rem, 3vw, 2.8rem);
}
/* Senza la foto le due fasi si affiancano invece di incolonnarsi
   su mezza pagina, lasciando l'altra metà vuota. */
.concierge-fasi--larghe {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
}
.concierge-fase h3 {
  font-size: clamp(1.15rem, 1.6vw, 1.35rem);
  font-weight: 400;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--oro);
}
.concierge-lista { margin: 0; padding: 0; list-style: none; }
.concierge-lista li {
  position: relative;
  padding: .85rem 0 .85rem 1.7rem;
  font-size: .9rem;
  line-height: 1.7;
  color: var(--grigio);
  border-bottom: 1px solid var(--crema-dark);
}
.concierge-lista li:last-child { border-bottom: none; }
.concierge-lista li::before {
  content: '';
  position: absolute;
  left: 0;
  /* Allineato alla mezzeria della prima riga, non al suo bordo alto. */
  top: 1.8em;
  width: .8rem;
  height: 1px;
  background: var(--oro);
}

/* Le richieste su misura sono l'eccezione all'elenco: vanno fuori dalle
   due colonne, o diventano l'undicesima voce puntata. */
.concierge-extra {
  max-width: 46rem;
  margin-top: clamp(2.5rem, 4vw, 3.5rem);
  padding-top: clamp(1.8rem, 3vw, 2.4rem);
  border-top: 1px solid var(--oro);
}
.concierge-extra h3 {
  font-size: clamp(1.3rem, 2vw, 1.7rem);
  font-weight: 300;
}
.concierge-extra p { margin-top: 1rem; }
.concierge-extra .btn { margin-top: 1.8rem; }

/* Foto di supporto: quattro scatti, non sei come nella striscia dei
   dettagli camera — con sei diventerebbero francobolli. */
.concierge-pagina .galleria--striscia {
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  gap: 6px;
}
.concierge-pagina .galleria-item { background: var(--crema-dark); }

@media (max-width: 900px) {
  .concierge-grid { grid-template-columns: 1fr; }
  .concierge-foto img { aspect-ratio: 4/3; }
}

/* ============================================================
   EXPERIENCES PAGE
   ============================================================ */
/* Righe a tutta larghezza, senza container: l'elenco chiude l'intro e
   arriva fino al CTA, come i servizi in evidenza. */
.exp-detail-list { padding-bottom: var(--section-y); }

/* Metà e metà invece di una colonna foto da 400px: su una pagina che si
   vende con le immagini, un terzo di larghezza non basta. Il lato si alterna
   e con esso il fondo del pannello di testo, così due righe consecutive non
   si fondono in un blocco unico. */
.exp-item {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 520px;
  margin-bottom: 2px;
}
.exp-item:nth-child(even) .exp-item-img { order: 2; }
.exp-item-img {
  overflow: hidden;
  background: var(--crema-dark);
}
.exp-item-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  filter: contrast(1.06) saturate(1.15);
  transition: transform .8s var(--ease);
}
.exp-item:hover .exp-item-img img { transform: scale(1.04); }
.exp-item-content {
  background: var(--crema);
  padding: clamp(2.5rem, 4.5vw, 4.5rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.exp-item:nth-child(even) .exp-item-content { background: var(--crema-dark); }
.exp-item-content > * { max-width: 34rem; }
.exp-item-content h3 {
  font-size: clamp(1.5rem, 2.2vw, 1.9rem);
  margin: .8rem 0 1.1rem;
}
.exp-item-content p { margin-bottom: .8rem; }
.exp-item-cta { align-self: flex-start; margin-top: 2rem; }

/* Sintesi dell'esperienza: durata, formato, lingue. Filetto oro sopra e
   separatori verticali fra le voci — lo stesso segno dell'indice camere.
   Il campo "icona" del repeater nasce per le emoji: qui non vengono
   stampate, perché a questa scala sembrano incollate sopra la pagina. */
.exp-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .4rem 1.5rem;
  margin: 1.8rem 0 0;
  padding-top: 1.4rem;
  padding-inline: 0;
  list-style: none;
  border-top: 1px solid rgba(184,151,90,.45);
}
.exp-meta-tag {
  position: relative;
  display: flex;
  align-items: center;
  gap: .45rem;
  font-family: var(--font-sans);
  font-size: .66rem;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--oro-dark);
}
.exp-meta-tag:not(:last-child)::after {
  content: '';
  position: absolute;
  right: -.78rem;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 1.1em;
  background: rgba(184,151,90,.55);
}
.exp-meta-icona { display: block; line-height: 0; }
.exp-meta-icona svg { width: 1rem; height: 1rem; stroke-width: 1.5; }

/* ============================================================
   CONTACTS PAGE
   ============================================================ */
.contacts-section {
  padding-block: var(--section-y);
}
.contacts-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5rem;
  align-items: start;
}
.contacts-info h2 { margin: .8rem 0 1.5rem; }
.contacts-info p { margin-bottom: 1rem; }
.contact-details {
  margin: 2.5rem 0;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.contact-detail-item {}
.contact-detail-item .eyebrow { margin-bottom: .4rem; }
.contact-detail-item p {
  font-size: .9rem;
  color: var(--nero);
}
.contact-detail-item a {
  color: var(--verde);
  transition: color var(--dur) var(--ease);
}
.contact-detail-item a:hover { color: var(--oro-dark); }

/* Form */
/* ── Vantaggi della prenotazione diretta ──
   Nella colonna dei contatti, sotto i recapiti. Nessun riquadro e nessun
   fondo: su una pagina tutta crema un blocco scuro si legge come un banner
   pubblicitario incollato sopra il contenuto. Qui vale invece lo stesso
   sistema di filetti e maiuscoletti dei recapiti sopra, così la proposta
   commerciale arriva come continuazione della colonna e non come inserzione. */
.prenota-diretta {
  margin-top: clamp(2.5rem, 4vw, 3.5rem);
  padding-top: clamp(1.8rem, 3vw, 2.4rem);
  max-width: 30rem;
  border-top: 1px solid var(--oro);
}
.prenota-diretta h3 {
  margin-top: .8rem;
  font-size: clamp(1.3rem, 2vw, 1.6rem);
  font-weight: 400;
}
.prenota-diretta-lista {
  margin: 1.5rem 0 0;
  padding: 0;
  list-style: none;
}
.prenota-diretta-lista li {
  position: relative;
  padding: .7rem 0 .7rem 1.6rem;
  font-size: .875rem;
  line-height: 1.65;
  color: var(--grigio);
  border-bottom: 1px solid var(--crema-dark);
}
.prenota-diretta-lista li:last-child { border-bottom: none; }
.prenota-diretta-lista li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 1.55em;
  width: .8rem;
  height: 1px;
  background: var(--oro);
}
/* Bottone a filo e non pieno: il modulo accanto ha già una barra oro piena,
   e due barre identiche nella stessa schermata si annullano a vicenda. */
.prenota-diretta-cta { margin-top: 1.8rem; }
.prenota-diretta-nota {
  margin-top: 1.2rem;
  font-size: .75rem;
  line-height: 1.6;
  color: var(--grigio-light);
}

.contact-form {
  background: var(--crema-dark);
  padding: 3rem;
}
.contact-form h3 {
  color: var(--nero);
  font-size: 1.5rem;
  margin-bottom: 2rem;
}
/* Con il testo introduttivo il titolo gli sta attaccato: il margine grande
   serve a staccare dai campi, non dalla riga che li spiega. */
.contact-form h3:has(+ .contact-form-intro) { margin-bottom: .9rem; }
.contact-form-intro { margin-bottom: 2rem; }
.contact-form-intro p { font-size: .88rem; }
.contact-form-intro p + p { margin-top: .7rem; }
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
}
.form-group {
  margin-bottom: 1px;
}
.form-group.full { grid-column: 1 / -1; }
.form-group label {
  display: block;
  font-size: .65rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--grigio);
  font-weight: 500;
  margin-bottom: .5rem;
  padding: 0 .1rem;
}
.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  background: #fff;
  border: 1px solid var(--crema-dark);
  padding: 1rem 1.2rem;
  font-family: var(--font-sans);
  font-size: .9rem;
  color: var(--nero);
  outline: none;
  transition: border-color var(--dur) var(--ease);
  appearance: none;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-color: var(--oro);
}
.form-group input::placeholder,
.form-group textarea::placeholder { color: var(--grigio-light); }
.form-group textarea { resize: vertical; min-height: 120px; }
.form-submit { margin-top: 2rem; }
.form-note {
  font-size: .75rem;
  color: var(--grigio);
  margin-top: 1rem;
  line-height: 1.5;
}

/* ============================================================
   GALLERY STRIP
   ============================================================ */
/* Gallery a due colonne. Aspetto 3:2 invece di un'altezza fissa: a schermo
   largo un riquadro alto 500px diventava una fessura 2:1 che decapitava le
   foto sopra e sotto. */
.gallery-2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
  background: var(--crema-dark);
}
.gallery-2col-item {
  margin: 0;
  aspect-ratio: 3/2;
  overflow: hidden;
}
.gallery-2col-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: contrast(1.06) saturate(1.15);
}

.gallery-strip {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 2px;
  background: var(--nero);
}
.gallery-strip-item {
  aspect-ratio: 1;
  overflow: hidden;
}
.gallery-strip-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  filter: contrast(1.07) saturate(1.2);
  transition: transform .6s var(--ease);
}
.gallery-strip-item:hover img { transform: scale(1.06); }

/* ============================================================
   HOMEPAGE — SEZIONI RISTRUTTURATE
   Ritmo cromatico: nero → verde → crema → nero → crema →
   nero-soft → crema → nero → immagine.
   Ogni blocco dell'esperienza ha un trattamento visivo proprio.
   ============================================================ */

/* ── Didascalia d'archivio — il filo che lega tutto il materiale fotografico ── */
.didascalia {
  display: flex;
  align-items: baseline;
  gap: .7rem;
  margin-top: .9rem;
  font-family: var(--font-sans);
  font-size: .62rem;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--grigio);
}
.didascalia::before {
  content: "";
  flex: 0 0 1.6rem;
  height: 1px;
  background: var(--oro);
  transform: translateY(-.25em);
}

/* ── Intestazione di blocco, condivisa dalle sezioni nuove ── */
.block-head { margin-bottom: 3rem; max-width: 46rem; }
.block-head h2 { margin: .9rem 0 0; font-weight: 300; }
.block-head p { margin-top: 1.4rem; max-width: 38rem; }
.block-head--light h2 { color: var(--crema); }
.block-head--light p  { color: rgba(244,239,232,.6); }
.block-head--light .didascalia { color: rgba(244,239,232,.45); }
.block-head--row {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 2rem;
  flex-wrap: wrap;
  max-width: none;
}
.block-head--row > div { max-width: 42rem; }

.link-oro {
  display: inline-block;
  margin-top: 1.2rem;
  font-family: var(--font-sans);
  font-size: .68rem;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--oro);
}

/* ── 2. Esterni e contesto — testo laterale + carosello ─── */
.esterni {
  background: var(--nero);
  padding-block: clamp(4rem, 7vw, 7rem);
  color: var(--crema);
}
.esterni-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5rem;
  align-items: center;
}
.esterni-testo .eyebrow { display: block; }
.esterni-testo h2 {
  color: var(--crema);
  margin: 0;
  font-weight: 300;
}
.esterni-testo .eyebrow + h2 { margin-top: 1.2rem; }
.esterni-testo p {
  color: rgba(244,239,232,.6);
  margin-bottom: 1.2rem;
}
.esterni-testo .btn { margin-top: 1.5rem; }

/* Carosello — riutilizzabile, guidato da main.js */
.carosello { position: relative; }
.carosello-viewport { overflow: hidden; }
.carosello-track {
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
  transition: transform .7s var(--ease);
}
.carosello-slide {
  flex: 0 0 100%;
  min-width: 0;
}
.carosello-slide figure { margin: 0; }
.carosello-img {
  aspect-ratio: 4/3;
  overflow: hidden;
  background: var(--nero-soft);
}
/* Nella sezione Esterni il carosello riprende l'altezza della vecchia foto singola */
.esterni .carosello-img {
  aspect-ratio: auto;
  height: clamp(420px, 40vw, 580px);
}
.carosello-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: contrast(1.06) saturate(1.15);
}
.carosello .didascalia { color: rgba(244,239,232,.5); }

.carosello-ui {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  margin-top: 1.4rem;
}
.carosello-btn {
  width: 2.8rem;
  height: 2.8rem;
  display: grid;
  place-items: center;
  background: none;
  border: 1px solid rgba(244,239,232,.25);
  color: var(--crema);
  font-size: .9rem;
  cursor: pointer;
  transition: background var(--dur) var(--ease),
              border-color var(--dur) var(--ease),
              color var(--dur) var(--ease);
}
.carosello-btn:hover {
  background: var(--oro);
  border-color: var(--oro);
  color: var(--nero);
}
.carosello-conta {
  margin: 0;
  font-family: var(--font-sans);
  font-size: .68rem;
  font-weight: 500;
  letter-spacing: .2em;
  color: rgba(244,239,232,.55);
}
.carosello-conta [data-carosello-idx] { color: var(--oro); }

/* Variante su fondo chiaro: i comandi nascono per le sezioni scure,
   qui vanno invertiti per restare leggibili. */
.carosello--chiaro .carosello-btn {
  border-color: rgba(13,12,10,.2);
  color: var(--nero);
}
.carosello--chiaro .carosello-btn:hover {
  background: var(--oro);
  border-color: var(--oro);
  color: var(--crema);
}
.carosello--chiaro .carosello-conta { color: var(--grigio); }
.carosello--chiaro .didascalia { color: var(--grigio); }

/* ── 4. Camere ──────────────────────────────────────────── */
.camere {
  background: var(--crema);
  padding-block: var(--section-y);
  /* Margine laterale identico a quello del .container, così lo scroller
     parte e finisce allineato al testo della sezione. */
  --gutter: max(5vw, calc((100vw - var(--container)) / 2));
}
.camere-indice {
  display: flex;
  flex-wrap: wrap;
  gap: 0 2rem;
  margin-top: 2.5rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--crema-dark);
}
.camere-indice a {
  padding: .6rem 0;
  font-family: var(--font-sans);
  font-size: .7rem;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--nero);
  border-bottom: 1px solid transparent;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.camere-indice a:hover,
.camere-indice a:focus-visible {
  color: var(--oro-dark);
  border-color: var(--oro);
}

.camere-scroller {
  margin-top: 3rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline-start: var(--gutter);
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: var(--oro) var(--crema-dark);
}
.camere-track {
  display: flex;
  gap: 2rem;
  list-style: none;
  margin: 0;
  padding-block: 0 1.5rem;
  padding-inline: var(--gutter);
}
/* Safari e Firefox scartano il padding di fine su un contenitore in overflow:
   questo pseudo-elemento garantisce lo stesso spazio dopo l'ultima card. */
.camere-track::after {
  content: "";
  flex: 0 0 1px;
  margin-inline-start: calc(var(--gutter) - 2rem);
}
.camera-card {
  flex: 0 0 clamp(300px, 32vw, 480px);
  scroll-snap-align: start;
}
.camera-card > a { display: block; }
.camera-card-img {
  aspect-ratio: 4/3;
  overflow: hidden;
  background: var(--crema-dark);
}
.camera-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .8s var(--ease);
}
.camera-card:hover .camera-card-img img { transform: scale(1.05); }
.camera-card-body { padding-top: 1.4rem; }
.camera-card-body h3 { font-size: clamp(1.3rem, 1.9vw, 1.7rem); }
.camera-card-meta {
  display: block;
  margin-top: .5rem;
  font-family: var(--font-sans);
  font-size: .65rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--oro-dark);
}
.camera-card-body p {
  margin-top: .9rem;
  font-size: .85rem;
  line-height: 1.7;
}
.scroller-hint {
  margin-top: 1.2rem;
  font-family: var(--font-sans);
  font-size: .62rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--grigio-light);
}

/* ── 5. Interni e spazi comuni ──────────────────────────── */
.interni {
  background: var(--nero);
  padding-block: var(--section-y);
  color: var(--crema);
}
/* Mosaico: la prima foto occupa il riquadro grande, le altre la affiancano.
   Le righe hanno altezza fissa, così gli span restano prevedibili
   qualunque sia il numero di foto caricate. */
.interni-mosaico {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: clamp(150px, 15vw, 215px);
  grid-auto-flow: dense;
  gap: 6px;
}
.interni-foto {
  position: relative;
  margin: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  grid-row: span 2;
}
/* Con 5 foto — il numero previsto — la griglia si chiude senza vuoti:
   la prima occupa due colonne, le altre quattro completano le due fasce. */
.interni-foto:first-child {
  grid-column: span 2;
  grid-row: span 2;
}
.interni-foto-img {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  background: var(--nero-soft);
}
.interni-foto-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: contrast(1.05);
  transition: transform .8s var(--ease);
}
.interni-foto:hover .interni-foto-img img { transform: scale(1.04); }
/* Didascalia sovrapposta: i riquadri restano a contatto e il mosaico
   resta compatto. Il gradiente garantisce la leggibilità sulle foto chiare. */
.interni-foto .didascalia {
  position: absolute;
  inset: auto 0 0 0;
  margin: 0;
  padding: 3rem 1.2rem 1.1rem;
  color: var(--crema);
  background: linear-gradient(to top, rgba(13,12,10,.85), rgba(13,12,10,0));
  pointer-events: none;
}

/* ── 6. Colazione e servizi concierge ───────────────────── */
.concierge {
  background: var(--crema);
  padding-block: var(--section-y);
}
/* Mosaico: servizio bandiera con foto a sinistra, gli altri come righe a destra */
.servizi-mosaico {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 4vw, 4.5rem);
  align-items: start;
}
.servizio-primo-img {
  aspect-ratio: 4/5;
  overflow: hidden;
  background: var(--crema-dark);
}
.servizio-primo-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.servizio-primo-body { padding-top: 1.6rem; }
.servizio-primo-body h3 {
  margin-top: .7rem;
  font-size: clamp(1.6rem, 2.4vw, 2.2rem);
  font-weight: 300;
}
.servizio-primo-body p { margin-top: .9rem; }
.servizio-primo-body .btn { margin-top: 1.5rem; }

.servizi-righe {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--crema-dark);
}
.servizio-riga {
  display: grid;
  grid-template-columns: 2.4rem 1fr;
  gap: 1.4rem;
  align-items: start;
  padding: 1.7rem 0;
  border-bottom: 1px solid var(--crema-dark);
}
.servizio-icona {
  display: block;
  /* Oro scurito: a queste dimensioni il tratto sottile ha bisogno
     di più contrasto di quanto ne dia --oro-dark da solo. */
  color: var(--oro-dark);
  color: color-mix(in srgb, var(--oro-dark) 78%, var(--nero));
  line-height: 0;
  padding-top: .15rem;
}
.servizio-icona svg {
  width: 1.7rem;
  height: 1.7rem;
  stroke-width: 1.5;
}
/* Senza icona resta un trattino oro: la riga non si disallinea */
.servizio-icona:empty::before {
  content: "";
  display: block;
  width: 1.7rem;
  height: 1px;
  background: currentColor;
  margin-top: .7rem;
}
.servizio-riga h4 { font-size: 1.15rem; font-weight: 400; }
.servizio-riga p { margin-top: .4rem; font-size: .86rem; line-height: 1.7; }
.concierge-foot {
  margin-top: clamp(2.5rem, 4vw, 3.5rem);
  text-align: center;
}

/* ── 7. Staff e accoglienza ─────────────────────────────── */
.staff {
  background: var(--nero-soft);
  padding-block: var(--section-y);
  color: var(--crema);
}
.staff-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: center;
}
.staff-img { margin: 0; }
.staff-img img {
  width: 100%;
  aspect-ratio: 5/4;
  object-fit: cover;
}
.staff-img .didascalia { color: rgba(244,239,232,.45); }
.staff-testo h2 {
  color: var(--crema);
  margin-top: .9rem;
  font-weight: 300;
}
.staff-testo p { color: rgba(244,239,232,.62); }
.staff-citazione {
  margin: 2rem 0 0;
  padding-left: 1.6rem;
  border-left: 1px solid var(--oro);
}
.staff-citazione p {
  font-family: var(--font-serif);
  font-size: clamp(1.2rem, 1.9vw, 1.6rem);
  font-style: italic;
  line-height: 1.5;
  color: var(--crema);
}
.staff-citazione cite {
  display: block;
  margin-top: .9rem;
  font-family: var(--font-sans);
  font-size: .62rem;
  font-style: normal;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--oro);
}
.staff-testo .btn { margin-top: 2rem; }

/* Variante manifesto — nessuna foto: colonna unica centrata, fondo verde
   per staccare dalle due sezioni scure vicine, citazione in evidenza. */
.staff--manifesto { background: var(--verde); }
.staff--manifesto .staff-grid {
  grid-template-columns: 1fr;
  max-width: 46rem;
  margin-inline: auto;
  text-align: center;
}
.staff--manifesto .divider { margin-inline: auto; }
/* Righe di lunghezza simile: evita l'ultima parola orfana sotto al titolo.
   Dove non è supportato il testo va semplicemente a capo come prima. */
.staff--manifesto h2,
.staff--manifesto .staff-citazione p { text-wrap: balance; }
.staff--manifesto .staff-testo > p {
  max-width: 36rem;
  margin-inline: auto;
  font-size: 1.02rem;
  line-height: 1.85;
  text-wrap: pretty;
}
.staff--manifesto .staff-citazione {
  margin-top: clamp(2rem, 4vw, 3rem);
  padding: clamp(1.6rem, 3vw, 2.2rem) 0 0;
  border-left: none;
  border-top: 1px solid var(--oro);
}
.staff--manifesto .staff-citazione p {
  font-size: clamp(1.35rem, 2.6vw, 2rem);
}

/* ── 8. Esperienze ──────────────────────────────────────── */
.esperienze {
  background: var(--crema);
  padding-block: var(--section-y);
}
.esperienze-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.5rem;
}
.esperienza-card-img {
  aspect-ratio: 4/5;
  overflow: hidden;
  background: var(--crema-dark);
}
.esperienza-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .8s var(--ease);
}
.esperienza-card:hover .esperienza-card-img img { transform: scale(1.05); }
.esperienza-card-body { padding-top: 1.4rem; }
.esperienza-card-body h3 {
  margin-top: .6rem;
  font-size: clamp(1.25rem, 1.8vw, 1.6rem);
}
.esperienza-card-body p {
  margin-top: .8rem;
  font-size: .86rem;
  line-height: 1.7;
}
.esperienza-durata {
  display: block;
  margin-top: 1rem;
  font-family: var(--font-sans);
  font-size: .62rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--oro-dark);
}

/* ── 9. Posizione ───────────────────────────────────────── */
.posizione {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  background: var(--nero);
  color: var(--crema);
}
.posizione-img img {
  width: 100%;
  height: 100%;
  min-height: clamp(360px, 48vw, 640px);
  object-fit: cover;
  /* Ritaglio spostato in basso: taglia il cielo e tiene in campo villa e verde. */
  object-position: center 62%;
}
.posizione-panel {
  display: flex;
  align-items: center;
  padding: clamp(2.5rem, 6vw, 6rem);
}
.posizione-panel-inner { max-width: 32rem; }
.posizione-panel h2 {
  color: var(--crema);
  margin-top: .9rem;
  font-weight: 300;
}
.posizione-panel p { color: rgba(244,239,232,.6); }

.distanze { margin: 2rem 0 0; }
.distanza {
  display: grid;
  grid-template-columns: 11rem 1fr;
  gap: 1.5rem;
  padding: 1rem 0;
  border-top: 1px solid rgba(244,239,232,.12);
}
.distanza:last-child { border-bottom: 1px solid rgba(244,239,232,.12); }
.distanza dt {
  font-family: var(--font-sans);
  font-size: .68rem;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--oro);
}
.distanza dd { margin: 0; }
/* Il tempo di percorrenza è il dato che si cerca: grande, in serif, leggibile
   in un colpo d'occhio. La nota di servizio resta sotto, in secondo piano. */
.distanza-tempo {
  display: block;
  font-family: var(--font-serif);
  font-size: 1.35rem;
  line-height: 1.25;
  color: var(--crema);
}
.distanza-nota {
  display: block;
  margin-top: .25rem;
  font-size: .78rem;
  line-height: 1.5;
  color: rgba(244,239,232,.55);
}
.posizione-panel .btn { margin-top: 2.2rem; }

/* Link testuale con freccia — alternativa discreta al bottone, dove l'azione
   è informativa e non deve competere con la CTA di prenotazione. */
.link-freccia {
  display: inline-block;
  margin-top: 2.2rem;
  font-family: var(--font-sans);
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--oro);
  padding-bottom: .4rem;
  border-bottom: 1px solid rgba(184,151,90,.4);
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.link-freccia:hover {
  color: var(--oro-light);
  border-bottom-color: var(--oro-light);
}

/* ── Responsive — sezioni homepage ──────────────────────── */
@media (max-width: 1100px) {
  .esterni-grid { gap: 3rem; }
  .esperienze-grid { grid-template-columns: repeat(2, 1fr); }
  .distanza { grid-template-columns: 9rem 1fr; gap: 1rem; }
}

@media (max-width: 768px) {
  .esterni-grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .esterni .carosello-img { height: auto; aspect-ratio: 3/2; }

  .camera-card { flex-basis: 78vw; }

  .interni-mosaico {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: auto;
    gap: 4px;
  }
  .interni-foto,
  .interni-foto:first-child { grid-column: auto; grid-row: auto; }
  .interni-foto:first-child { grid-column: span 2; }
  .interni-foto-img { aspect-ratio: 4/3; }

  .servizi-mosaico { grid-template-columns: 1fr; gap: 2.5rem; }
  .servizio-primo-img { aspect-ratio: 4/3; }

  .staff-grid { grid-template-columns: 1fr; }
  .esperienze-grid { grid-template-columns: 1fr; }

  .posizione { grid-template-columns: 1fr; }
  .posizione-img img { min-height: 0; aspect-ratio: 4/3; }
}

@media (max-width: 480px) {
  .camera-card { flex-basis: 84vw; }
}

/* Accessibilità: focus visibile per la navigazione da tastiera */
a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--oro);
  outline-offset: 3px;
}

/* Accessibilità: rispetta la preferenza di movimento ridotto */
@media (prefers-reduced-motion: reduce) {
  .camera-card-img img,
  .esperienza-card-img img,
  .interni-foto-img img,
  .carosello-track { transition: none; }
  .camera-card:hover .camera-card-img img,
  .esperienza-card:hover .esperienza-card-img img,
  .interni-foto:hover .interni-foto-img img { transform: none; }
  .camere-scroller { scroll-behavior: auto; }
  .exp-item-img img { transition: none; }
  .exp-item:hover .exp-item-img img { transform: none; }
}

/* ============================================================
   RESPONSIVE — Tablet (max 1100px)
   ============================================================ */
@media (max-width: 1100px) {
  .rooms-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 2rem; }
  .intro-grid { gap: 3rem; }
  .room-detail-grid { grid-template-columns: 1fr 340px; gap: 3rem; }
}

/* ============================================================
   RESPONSIVE — Mobile large (max 768px)
   ============================================================ */
@media (max-width: 768px) {
  :root { --section-y: clamp(3rem, 8vw, 5rem); }

  /* Nav */
  .header-nav { display: none; }
  .header-nav.open {
    display: flex;
    flex-direction: column;
    position: fixed;
    inset: 0;
    background: var(--nero);
    justify-content: center;
    align-items: center;
    gap: 2.5rem;
    z-index: 99;
  }
  .header-nav.open a {
    font-size: 1.2rem;
    letter-spacing: .1em;
    color: var(--crema);
  }
  .menu-toggle { display: flex; z-index: 101; }
  .menu-toggle.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
  .menu-toggle.open span:nth-child(2) { opacity: 0; }
  .menu-toggle.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

  /* Hero */
  .hero-content h1 { font-size: clamp(2.2rem, 8vw, 3rem); }
  .hero-scroll { display: none; }

  /* Grids */
  .intro-grid,
  .about-intro-grid,
  .location-grid,
  .contacts-grid { grid-template-columns: 1fr; gap: 2.5rem; }

  /* Su una colonna il 3:2 si allarga a tutta la pagina: va bene così. */
  .about-intro .carosello-img,
  .about-intro-img > img { height: auto; aspect-ratio: 3/2; }

  .intro-image { display: none; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .rooms-grid { grid-template-columns: 1fr; gap: 1px; }
  .exp-grid { grid-template-columns: 1fr; }
  .gallery-strip { grid-template-columns: repeat(3, 1fr); }
  .incluso-lista { grid-template-columns: repeat(2, 1fr); }

  /* Gallerie: il mosaico perde il riquadro grande, la striscia si accorcia. */
  .galleria--mosaico { grid-template-columns: repeat(2, 1fr); }
  .galleria--griglia { gap: 1.2rem; }
  .galleria--mosaico .galleria-item:first-child {
    grid-column: span 2;
    grid-row: auto;
    aspect-ratio: 3/2;
  }
  .galleria--striscia { grid-template-columns: repeat(4, 1fr); }
  .galleria--larga .galleria-item { aspect-ratio: 16/9; }
  .spazio { grid-template-columns: 1fr; }
  .spazio:nth-child(even) .spazio-img { order: 0; }
  .altre-camere-grid { grid-template-columns: repeat(2, 1fr); }

  .room-row,
  .services-feature,
  .exp-item {
    grid-template-columns: 1fr !important;
    min-height: auto;
  }
  .room-row:nth-child(even) .room-row-img,
  .room-row:nth-child(even) .room-row-info,
  .services-feature:nth-child(even) .sf-img,
  .services-feature:nth-child(even) .sf-content,
  .exp-item:nth-child(even) .exp-item-img,
  .exp-item:nth-child(even) .exp-item-content { order: unset; }

  .room-row-img img,
  .sf-img img,
  .exp-item-img img { height: 260px; }
  .room-row-info,
  .sf-content,
  .exp-item-content { padding: 2rem; }

  .room-detail-grid { grid-template-columns: 1fr; gap: 2rem; }
  .room-detail-sidebar { position: static; }

  .footer-grid { grid-template-columns: 1fr; gap: 2rem; }
  .footer-bottom { flex-direction: column; text-align: center; }

  .values-grid { grid-template-columns: 1fr; gap: 2rem; }
  .form-row { grid-template-columns: 1fr; }

  .intro-badge { display: none; }
  .section-header { flex-direction: column; align-items: flex-start; }
}

/* ============================================================
   RESPONSIVE — Mobile small (max 480px)
   ============================================================ */
@media (max-width: 480px) {
  h1 { font-size: 2.2rem; }
  h2 { font-size: 1.8rem; }
  .gallery-strip { grid-template-columns: repeat(2, 1fr); }
  .gallery-2col { grid-template-columns: 1fr; }
  .incluso-lista { grid-template-columns: 1fr; }
  .galleria--mosaico,
  .galleria--griglia { grid-template-columns: 1fr; }
  .galleria--mosaico .galleria-item:first-child { grid-column: span 1; }
  .galleria--striscia { grid-template-columns: repeat(3, 1fr); }
  .altre-camere-grid { grid-template-columns: 1fr; }
  .stats-grid { grid-template-columns: 1fr 1fr; }
  .hero-cta { flex-direction: column; align-items: flex-start; }
  .booking-card { padding: 1.5rem; }
  .contact-form { padding: 1.5rem; }
}

/* ============================================================
   WORDPRESS OVERRIDES
   ============================================================ */

/* Nav menu generata da wp_nav_menu() */
.header-nav-list {
  display: flex;
  align-items: center;
  gap: 2.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.header-nav-list li { margin: 0; padding: 0; }
.header-nav-list a {
  font-family: var(--font-sans);
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: rgba(244,239,232,.7);
  transition: color var(--dur) var(--ease);
}
.header-nav-list a:hover,
.header-nav-list a.active,
.header-nav-list .current-menu-item > a,
.header-nav-list .current_page_item > a { color: var(--oro); }

/* Polylang language switcher */
.lang-switcher { list-style: none; display: flex; align-items: center; gap: .6rem; margin: 0; padding: 0; }
.lang-switcher .lang-item a {
  display: block;
  line-height: 0;
  opacity: .7;
  transition: opacity var(--dur) var(--ease);
}
.lang-switcher .lang-item a:hover { opacity: 1; }
.lang-switcher .lang-item img.pll-flag {
  width: 22px;
  height: auto;
  display: block;
  border-radius: 2px;
}

/* CF7 form style overrides */
.wpcf7 { margin: 0 !important; }
.wpcf7-form .wpcf7-form-control { width: 100%; }
.wpcf7-text,
.wpcf7-email,
.wpcf7-tel,
.wpcf7-date,
.wpcf7-number,
.wpcf7-select,
.wpcf7-textarea {
  width: 100%;
  background: #fff;
  border: 1px solid var(--crema-dark) !important;
  padding: 1rem 1.2rem !important;
  font-family: var(--font-sans) !important;
  font-size: .9rem !important;
  color: var(--nero) !important;
  outline: none;
  transition: border-color var(--dur) var(--ease);
  appearance: none;
  border-radius: 0 !important;
  box-shadow: none !important;
  margin-bottom: 1px !important;
}
.wpcf7-text:focus,
.wpcf7-email:focus,
.wpcf7-tel:focus,
.wpcf7-date:focus,
.wpcf7-select:focus,
.wpcf7-textarea:focus { border-color: var(--oro) !important; }
.wpcf7-submit {
  background: var(--oro) !important;
  color: var(--nero) !important;
  border: 1px solid var(--oro) !important;
  font-family: var(--font-sans) !important;
  font-size: .75rem !important;
  font-weight: 500 !important;
  letter-spacing: .15em !important;
  text-transform: uppercase !important;
  padding: .9rem 2.2rem !important;
  cursor: pointer;
  width: 100%;
  margin-top: 1.5rem;
  transition: background var(--dur) var(--ease) !important;
  border-radius: 0 !important;
}
.wpcf7-submit:hover { background: var(--oro-dark) !important; border-color: var(--oro-dark) !important; }
.wpcf7-not-valid-tip { font-size: .75rem; color: #c0392b; margin-top: .3rem; }
.wpcf7-response-output { margin-top: 1rem; padding: .8rem 1rem; border: none !important; font-size: .8rem; }

/* Mobile nav con struttura WP */
@media (max-width: 768px) {
  .header-nav { display: none; }
  .header-nav.open {
    display: flex;
    flex-direction: column;
    position: fixed;
    inset: 0;
    background: var(--nero);
    justify-content: center;
    align-items: center;
    z-index: 99;
  }
  .header-nav.open .header-nav-list {
    flex-direction: column;
    align-items: center;
    gap: 2.5rem;
  }
  .header-nav.open .header-nav-list a {
    font-size: 1.2rem;
    letter-spacing: .1em;
    color: var(--crema);
  }
}

/* ============================================================
   PAGINA LEGALE (Privacy Policy, Cookie Policy, Termini…)
   ============================================================ */
.legal-content {
  max-width: 820px;
  margin-inline: auto;
}
.legal-content > *:first-child { margin-top: 0; }
.legal-content h2 {
  font-size: clamp(1.5rem, 2.5vw, 2rem);
  color: var(--nero);
  margin: 3rem 0 1rem;
}
.legal-content h3 {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: clamp(1.1rem, 1.8vw, 1.3rem);
  color: var(--nero);
  margin: 2rem 0 1rem;
}
.legal-content p { margin-bottom: 1.2rem; }
.legal-content ul,
.legal-content ol {
  margin: 0 0 1.2rem 1.4rem;
  padding: 0;
}
.legal-content ul { list-style: disc; }
.legal-content ol { list-style: decimal; }
.legal-content li {
  font-size: clamp(.9rem, 1.2vw, 1rem);
  line-height: 1.8;
  color: var(--grigio);
  margin-bottom: .5rem;
}
.legal-content a {
  color: var(--oro);
  text-decoration: underline;
  text-underline-offset: .2em;
}
.legal-content strong { color: var(--nero); font-weight: 500; }
.legal-content table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 1.5rem;
  font-size: .85rem;
}
.legal-content table th,
.legal-content table td {
  border: 1px solid var(--crema-dark);
  padding: .7rem 1rem;
  text-align: left;
}
.legal-content table th {
  font-family: var(--font-sans);
  font-weight: 500;
  color: var(--nero);
}
.legal-content blockquote {
  border-left: 3px solid var(--oro);
  padding-left: 1.5rem;
  margin: 0 0 1.5rem;
  font-style: italic;
  color: var(--grigio);
}