/* ═══════════════════════════════════════════
   VILLA MEDITERRANEA — il render 3D è la pagina
   Il modello apre il sito al posto dello slideshow fotografico, e le quattro
   sezioni che espone (piano terra, piano superiore, esterni, la residenza)
   diventano i capitoli del resto della pagina. Le foto reali stanno lì dentro.
   Token e font sono quelli di villa-med.css.
═══════════════════════════════════════════ */

/* ═══════════════════════════════════
   HERO — la villa che gira
═══════════════════════════════════ */
.v3d-hero {
  position: relative;
  min-height: 100svh;
  padding: 88px clamp(16px, 4vw, 56px) 40px;
  display: flex;
  flex-direction: column;
  background: var(--verde);
  overflow: hidden;
}

/* Il posto vero dietro al modello: una fotografia del giardino, sfocata e
   scurita a monte (vedi scripts/build_villa3d_manifest.py), non un filtro CSS
   che costerebbe a ogni scroll. Il velo sopra la tiene indietro, così resta
   atmosfera e non entra in concorrenza con la villa che le sta davanti. */
.v3d-hero-bg {
  position: absolute;
  inset: 0;
  background: url('/static/3d/hero-bg.webp') center / cover no-repeat;
  opacity: 0.72;
}
.v3d-hero-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom, rgba(16,30,18,0.74) 0%, rgba(16,30,18,0.26) 40%, rgba(16,30,18,0.7) 100%),
    radial-gradient(ellipse at 38% 60%, transparent 0%, rgba(16,30,18,0.42) 72%);
}

/* Alone caldo dietro il modello: la villa chiara si stacca dallo sfondo. */
.v3d-hero::before {
  content: '';
  position: absolute;
  left: 34%;
  top: 54%;
  width: min(1100px, 82%);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(184,149,106,0.22) 0%, rgba(184,149,106,0.07) 40%, transparent 68%);
  pointer-events: none;
}
.v3d-hero-head {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1560px;
  margin: 0 auto 4px;
  flex-shrink: 0;
}
.v3d-hero-title {
  font-family: var(--font-title);
  font-size: clamp(2rem, 3.6vw, 3.2rem);
  font-weight: 300;
  line-height: 1;
  letter-spacing: 0.02em;
  color: var(--beige);
  margin: 3px 0 7px;
}
.v3d-hero-sub {
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(240, 232, 216, 0.5);
}

/* Freccia di scorrimento verso il primo capitolo. */
.v3d-scroll {
  position: absolute;
  left: 50%;
  bottom: 22px;
  transform: translateX(-50%);
  z-index: 3;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
}
.v3d-scroll span {
  width: 9px;
  height: 9px;
  border-right: 1px solid rgba(240, 232, 216, 0.55);
  border-bottom: 1px solid rgba(240, 232, 216, 0.55);
  transform: rotate(45deg);
  animation: v3d-nudge 2.4s ease-in-out infinite;
}
@keyframes v3d-nudge {
  0%, 100% { transform: rotate(45deg) translate(0, 0); opacity: 0.5; }
  50%      { transform: rotate(45deg) translate(3px, 3px); opacity: 1; }
}

.v3d-fulcrum {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1560px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(300px, 26vw, 380px);
  align-items: center;
  gap: clamp(16px, 3vw, 48px);
  flex: 1;
  min-height: 0;
}
.v3d-stage-wrap {
  display: flex;
  flex-direction: column;
  min-height: 0;
  height: 100%;
}


/* ── Il palco del modello ── */
.v3d-stage {
  position: relative;
  z-index: 2;
  width: 100%;
  flex: 1;
  min-height: 300px;
}
.v3d-stage canvas {
  display: block;
  width: 100%;
  height: 100%;
  touch-action: none;
  cursor: grab;
  position: relative;
  z-index: 1;
  /* Il bordo del canvas e' una linea netta: se il modello dovesse toccarlo,
     meglio che ci si dissolva dentro invece di essere tagliato di netto. */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 5%, #000 92%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 5%, #000 92%, transparent 100%);
}
.v3d-stage canvas:active { cursor: grabbing; }
.v3d-stage canvas:focus-visible { outline: 2px solid var(--oro); outline-offset: 6px; }

/* Ombra a terra: il modello fluttua, l'ombra lo tiene ancorato alla pagina. */
.v3d-shadow {
  position: absolute;
  left: 28%;
  right: 28%;
  bottom: 12%;
  height: 8%;
  background: radial-gradient(ellipse, rgba(5,16,10,0.55) 0%, rgba(5,16,10,0.18) 48%, transparent 72%);
  filter: blur(24px);
  pointer-events: none;
}

/* Didascalia che cambia mentre la villa gira: dice quale lato hai davanti. */
.v3d-facing {
  justify-self: center;
  text-align: center;
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--oro);
  pointer-events: none;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.45s ease, transform 0.45s ease;
}
.v3d-facing.is-visible { opacity: 1; transform: translateY(0); }

.v3d-status {
  position: absolute;
  top: 46%;
  left: 0;
  right: 0;
  text-align: center;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  color: rgba(240, 232, 216, 0.6);
  pointer-events: none;
  margin: 0;
}
.v3d-status.is-error {
  z-index: 3;
  max-width: 440px;
  margin: 0 auto;
  padding: 18px 22px;
  line-height: 1.7;
  background: rgba(10, 22, 14, 0.92);
  border: 1px solid rgba(184,149,106,0.35);
  border-radius: 4px;
}
.v3d-hover {
  position: absolute;
  z-index: 4;
  padding: 9px 14px;
  border-radius: 999px;
  border: 1px solid rgba(184,149,106,0.5);
  background: var(--beige);
  color: var(--verde);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.18s ease, transform 0.18s ease;
  pointer-events: none;
}
.v3d-hover.is-visible { opacity: 1; transform: translateY(0); }

.v3d-controls {
  flex-shrink: 0;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: baseline;
  gap: 24px;
  margin-top: 8px;
  white-space: nowrap;   /* i tre testi stanno su una riga o niente */
}
.v3d-controls .v3d-hint { justify-self: start; text-align: left; }
.v3d-controls .v3d-motion { justify-self: end; }
.v3d-hint {
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(240, 232, 216, 0.42);
  text-align: center;
}
.v3d-hint span { margin: 0 10px; color: var(--oro); }
.v3d-motion {
  font-family: var(--font-body);
  font-size: 0.64rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(240, 232, 216, 0.38);
  background: none;
  border: 0;
  padding: 10px;
  cursor: pointer;
}
.v3d-motion:hover { color: var(--oro); }

/* ── Pallini sui volumi (solo telefono) ──
   Su desktop il passaggio del mouse basta a far capire che le parti si
   illuminano; su telefono quel segnale non esiste, quindi servono qui. */
.v3d-spot { display: none; }

@media (max-width: 720px) {
  .v3d-spot {
    display: block;
    position: absolute;
    z-index: 5;
    transform: translate(-50%, -50%);
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    transition: opacity 0.3s ease;
  }
  .v3d-spot.is-off { opacity: 0; pointer-events: none; }

  /* Il pallino vero, con l'onda che lo fa notare. */
  .v3d-spot i {
    display: block;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: var(--beige);
    border: 1.5px solid var(--oro);
    box-shadow: 0 2px 10px rgba(5, 16, 10, 0.5);
    position: relative;
  }
  .v3d-spot i::after {
    content: '';
    position: absolute;
    inset: -5px;
    border-radius: 50%;
    border: 1.5px solid var(--oro);
    animation: v3d-ping 2.6s cubic-bezier(0.2, 0.8, 0.3, 1) infinite;
  }
  /* Sfalsati, così le tre onde non pulsano all'unisono come un allarme. */
  .v3d-spot[data-spot="first_floor"] i::after { animation-delay: 0.85s; }
  .v3d-spot[data-spot="outdoor"] i::after { animation-delay: 1.7s; }

  .v3d-spot span {
    position: absolute;
    left: 50%;
    top: 20px;
    transform: translateX(-50%);
    white-space: nowrap;
    font-size: 0.6rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--beige);
    background: rgba(10, 22, 14, 0.82);
    border: 1px solid rgba(184,149,106,0.4);
    border-radius: 999px;
    padding: 4px 9px;
  }
  /* Piano terra e piano superiore stanno uno sopra l'altro: se entrambe le
     etichette cadono sotto al pallino, a certe angolazioni si accavallano.
     Quella di sopra va sopra. */
  .v3d-spot[data-spot="first_floor"] span { top: auto; bottom: 20px; }

  .v3d-spot.is-on i { background: var(--oro); }
  .v3d-spot.is-on span { background: var(--oro); color: var(--verde); border-color: var(--oro); }

  /* Area toccabile di 44px attorno al pallino, senza ingrandirlo. */
  .v3d-spot::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: 44px;
    height: 44px;
    transform: translate(-50%, -50%);
  }
}

@keyframes v3d-ping {
  0%       { transform: scale(1);   opacity: 0.9; }
  70%,100% { transform: scale(2.6); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .v3d-spot i::after { animation: none; opacity: 0.5; }
}

/* ── Il pannello che racconta ── */
.v3d-panel {
  position: relative;
  z-index: 2;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-left: 1px solid rgba(184,149,106,0.3);
  padding-left: clamp(20px, 2.4vw, 34px);
}
.v3d-panel-body {
  min-height: 220px;
  transition: opacity 0.22s ease;   /* il contenuto cambia al volo: una
                                       dissolvenza breve evita lo scatto */
}
.v3d-panel-body.is-swapping { opacity: 0; }
.v3d-panel-tag {
  display: block;
  font-size: 0.64rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--oro);
  margin-bottom: 10px;
}
.v3d-panel-title {
  font-family: var(--font-title);
  font-size: clamp(1.5rem, 2.2vw, 2rem);
  font-weight: 300;
  line-height: 1.15;
  color: var(--beige);
  margin-bottom: 12px;
}
.v3d-panel-text {
  font-size: 0.88rem;
  line-height: 1.75;
  color: rgba(240, 232, 216, 0.66);
  margin-bottom: 18px;
}
.v3d-panel-facts { list-style: none; }
.v3d-panel-facts li {
  position: relative;
  padding: 8px 0 8px 20px;
  font-size: 0.8rem;
  letter-spacing: 0.02em;
  color: rgba(240, 232, 216, 0.9);
  border-bottom: 1px solid rgba(184,149,106,0.2);
}
.v3d-panel-facts li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 16px;
  width: 8px;
  height: 1px;
  background: var(--oro);
}
.v3d-panel-note {
  margin-top: 14px;
  font-size: 0.72rem;
  line-height: 1.6;
  font-style: italic;
  color: rgba(240, 232, 216, 0.5);
}
.v3d-panel-note:empty { display: none; }

.v3d-panel-cta {
  margin-top: 18px;
  width: 100%;
  font-family: var(--font-body);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--verde);
  background: var(--beige);
  border: 1px solid var(--beige);
  padding: 15px 18px;
  cursor: pointer;
  transition: background-color 0.25s, border-color 0.25s;
}
.v3d-panel-cta:hover { background: var(--oro); border-color: var(--oro); color: var(--verde); }
.v3d-panel-cta[hidden] { display: none; }

.v3d-picks {
  display: flex;
  flex-direction: column;
  margin-top: 18px;
  border-top: 1px solid rgba(184,149,106,0.3);
}
.v3d-pick {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--font-body);
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  text-align: left;
  color: rgba(240, 232, 216, 0.85);
  background: none;
  border: 0;
  border-bottom: 1px solid rgba(184,149,106,0.2);
  padding: 11px 4px;
  cursor: pointer;
  transition: color 0.22s, background-color 0.22s, padding-left 0.22s;
}
.v3d-pick i { font-style: normal; color: var(--oro); }
.v3d-pick:hover,
.v3d-pick.is-highlighted,
.v3d-pick.is-active {
  color: var(--oro);
  background: rgba(184,149,106,0.14);
  padding-left: 12px;
}
.v3d-pick:focus-visible,
.v3d-motion:focus-visible,
.v3d-panel-cta:focus-visible { outline: 2px solid var(--oro); outline-offset: 3px; }

/* ═══════════════════════════════════
   FASCIA — la villa in numeri
═══════════════════════════════════ */
.v3d-strip {
  background: var(--beige);
  padding: clamp(48px, 7vw, 88px) 24px clamp(32px, 4vw, 48px);
}
.v3d-strip-inner {
  max-width: 1080px;
  margin: 0 auto 40px;
  display: grid;
  /* Il prezzo ha bisogno di piu' spazio dei numeri secchi: un po' piu' di
     larghezza evita di doverlo rimpicciolire ancora. */
  grid-template-columns: repeat(4, minmax(0, 1fr)) minmax(0, 1.35fr);
  border-top: 1px solid rgba(184,149,106,0.3);
  border-bottom: 1px solid rgba(184,149,106,0.3);
}
.v3d-stat {
  padding: 26px 20px;
  text-align: center;
  border-right: 1px solid rgba(184,149,106,0.2);
}
.v3d-stat:last-child { border-right: 0; }
.v3d-stat strong {
  display: block;
  font-family: var(--font-title);
  font-size: clamp(1.8rem, 3.4vw, 2.6rem);
  font-weight: 300;
  line-height: 1;
  color: var(--text-dark);
  margin-bottom: 10px;
}
.v3d-stat span {
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--oro);
}
.v3d-strip-intro {
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
  font-size: 1.02rem;
  line-height: 1.9;
  color: var(--text-muted);
}

/* ═══════════════════════════════════
   I QUATTRO CAPITOLI
   Uno per sezione del render, alternati chiaro/scuro e specchiati, così lo
   sguardo rimbalza invece di scendere sempre sulla stessa colonna.
═══════════════════════════════════ */
.v3d-sec {
  background: var(--beige);
  padding: clamp(56px, 8vw, 104px) clamp(16px, 4vw, 56px);
}
.v3d-sec--dark { background: var(--verde); }
.v3d-sec-inner {
  max-width: 1400px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
  gap: clamp(28px, 4vw, 64px);
  align-items: center;
}
.v3d-sec:nth-child(even) .v3d-sec-inner { grid-template-columns: minmax(0, 1.18fr) minmax(0, 0.82fr); }
.v3d-sec:nth-child(even) .v3d-sec-text { order: 2; }

.v3d-sec-index {
  display: block;
  font-family: var(--font-title);
  font-size: 2.6rem;
  font-weight: 300;
  line-height: 1;
  color: rgba(184,149,106,0.45);
  margin-bottom: 18px;
}
.v3d-sec-tag {
  display: block;
  font-size: 0.64rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--oro);
  margin-bottom: 12px;
}
.v3d-sec-title {
  font-family: var(--font-title);
  font-size: clamp(2rem, 4.4vw, 3rem);
  font-weight: 300;
  line-height: 1.1;
  color: var(--text-dark);
  margin-bottom: 18px;
}
.v3d-sec-body {
  font-size: 0.98rem;
  line-height: 1.85;
  color: var(--text-muted);
  margin-bottom: 26px;
}
.v3d-sec-facts { list-style: none; margin-bottom: 26px; }
.v3d-sec-facts li {
  position: relative;
  padding: 10px 0 10px 22px;
  font-size: 0.85rem;
  color: var(--text-dark);
  border-bottom: 1px solid rgba(184,149,106,0.2);
}
.v3d-sec-facts li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 18px;
  width: 9px;
  height: 1px;
  background: var(--oro);
}
.v3d-sec-note {
  margin: -14px 0 24px;
  font-size: 0.74rem;
  line-height: 1.6;
  font-style: italic;
  color: var(--text-muted);
}
.v3d-sec-note:empty { display: none; }
.v3d-sec-cta {
  font-family: var(--font-body);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--beige);
  background: var(--verde);
  border: 1px solid var(--verde);
  padding: 16px 30px;
  cursor: pointer;
  transition: background-color 0.25s, border-color 0.25s, color 0.25s;
}
.v3d-sec-cta:hover { background: var(--oro); border-color: var(--oro); color: var(--verde); }

/* Sulle sezioni scure il testo si ribalta. */
.v3d-sec--dark .v3d-sec-title { color: var(--beige); }
.v3d-sec--dark .v3d-sec-body { color: rgba(240, 232, 216, 0.66); }
.v3d-sec--dark .v3d-sec-facts li { color: rgba(240, 232, 216, 0.9); }
.v3d-sec--dark .v3d-sec-note { color: rgba(240, 232, 216, 0.5); }
.v3d-sec--dark .v3d-sec-index { color: rgba(184,149,106,0.55); }
.v3d-sec--dark .v3d-sec-cta { color: var(--verde); background: var(--beige); border-color: var(--beige); }

/* Capitolo senza fotografie (catalogo non caricato): il testo si prende tutta
   la riga invece di lasciare mezza sezione vuota. */
.v3d-sec--textonly .v3d-sec-inner,
.v3d-sec--textonly:nth-child(even) .v3d-sec-inner { grid-template-columns: minmax(0, 720px); }

/* ── Le fotografie di apertura ── */
/* Una foto grande che porta la sezione, due di supporto in colonna e una
   fascia bassa che dice quante altre ce ne sono. */
.v3d-sec-photos {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: 1fr 1fr 0.5fr;
  gap: 10px;
  aspect-ratio: 3 / 2.4;
}
.v3d-sec-photo {
  position: relative;
  padding: 0;
  border: 0;
  overflow: hidden;
  background: rgba(26, 46, 26, 0.08);
  cursor: pointer;
}
.v3d-sec-photo--lead { grid-column: 1 / 3; grid-row: 1 / 3; }
.v3d-sec-photo--more { grid-column: 1 / -1; grid-row: 3; }
.v3d-sec-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.v3d-sec-photo:hover img { transform: scale(1.04); }
.v3d-sec-photo:focus-visible,
.v3d-sec-cta:focus-visible { outline: 2px solid var(--oro); outline-offset: 3px; }
/* L'ultimo riquadro dice quante altre foto ci sono dietro. */
.v3d-sec-photo--more::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(10, 22, 14, 0.55);
}
.v3d-sec-more {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: grid;
  place-items: center;
  font-family: var(--font-title);
  font-size: clamp(1.3rem, 2.4vw, 1.9rem);
  font-weight: 300;
  color: var(--beige);
}

/* ═══════════════════════════════════
   SCHEDA COMPLETA DELLA SEZIONE
═══════════════════════════════════ */
.v3d-gallery {
  margin: auto;                 /* il reset globale azzera i margini: senza
                                   questo la dialog nativa non si centra */
  width: min(1280px, 95vw);
  max-width: none;
  height: min(900px, 93svh);
  max-height: 93svh;
  padding: 0;
  border: 1px solid rgba(184,149,106,0.35);
  border-radius: 6px;
  background: var(--beige);
  color: var(--text-dark);
  box-shadow: 0 30px 110px rgba(5, 16, 10, 0.45);
}
.v3d-gallery::backdrop {
  background: rgba(10, 22, 14, 0.75);
  backdrop-filter: blur(6px);
}
.v3d-shell {
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 24px 28px 20px;
}
.v3d-gal-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
  padding-bottom: 16px;
  flex-shrink: 0;
}
.v3d-gal-title {
  font-family: var(--font-title);
  font-size: clamp(1.6rem, 3vw, 2.1rem);
  font-weight: 300;
  line-height: 1.15;
  margin-top: 4px;
}
.v3d-close {
  font-family: var(--font-body);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
  background: none;
  border: 0;
  padding: 10px 0 10px 18px;
  cursor: pointer;
}
.v3d-close i { font-style: normal; font-size: 1.4rem; margin-left: 12px; vertical-align: middle; }
.v3d-close:hover { color: var(--oro); }

.v3d-gal-body {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(240px, 22%, 310px);
  gap: 24px;
}
.v3d-photo-stage {
  position: relative;
  min-height: 0;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(26, 46, 26, 0.06);
  overflow: hidden;
  touch-action: pan-y;
}
.v3d-photo-stage img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  user-select: none;
  opacity: 0;
  transition: opacity 0.4s ease;
}
.v3d-photo-status {
  position: absolute;
  left: 15%;
  right: 15%;
  top: 46%;
  text-align: center;
  font-size: 0.78rem;
  color: var(--text-muted);
  background: rgba(240, 232, 216, 0.9);
  padding: 12px;
  pointer-events: none;
}
.v3d-photo-status:empty { display: none; }

/* Frecce sul bordo della foto: il pollice le trova dove se le aspetta. */
.v3d-edge {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 46px;
  height: 64px;
  border: 0;
  background: rgba(240, 232, 216, 0.82);
  color: var(--verde);
  font-size: 1.2rem;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.2s, background-color 0.2s;
}
.v3d-photo-stage:hover .v3d-edge,
.v3d-edge:focus-visible { opacity: 1; }
.v3d-edge:hover { background: var(--beige); }
.v3d-edge--prev { left: 0; }
.v3d-edge--next { right: 0; }

.v3d-photo-caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: 22px 16px 12px;
  background: linear-gradient(to top, rgba(26,46,26,0.72), transparent);
  color: var(--beige);
  pointer-events: none;
}
.v3d-photo-label { font-size: 0.85rem; }
.v3d-photo-counter {
  font-size: 0.66rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.8;
  white-space: nowrap;
}

.v3d-gal-side {
  overflow-y: auto;
  padding-right: 4px;
}
.v3d-gal-text {
  font-size: 0.9rem;
  line-height: 1.8;
  color: var(--text-muted);
  margin-bottom: 18px;
}
.v3d-gal-facts { list-style: none; }
.v3d-gal-facts li {
  position: relative;
  padding: 8px 0 8px 20px;
  font-size: 0.8rem;
  color: var(--text-dark);
  border-bottom: 1px solid rgba(184,149,106,0.18);
}
.v3d-gal-facts li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 15px;
  width: 8px;
  height: 1px;
  background: var(--oro);
}
.v3d-gal-note {
  margin-top: 14px;
  font-size: 0.72rem;
  line-height: 1.6;
  font-style: italic;
  color: var(--text-muted);
}
.v3d-gal-note:empty { display: none; }

/* ── Striscia di miniature ── */
.v3d-thumbs {
  flex-shrink: 0;
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 16px 0 4px;
  scrollbar-width: thin;
}
.v3d-thumb {
  flex: 0 0 auto;
  width: 88px;
  height: 62px;
  padding: 0;
  border: 1px solid transparent;
  background: rgba(26, 46, 26, 0.06);
  cursor: pointer;
  opacity: 0.55;
  transition: opacity 0.2s, border-color 0.2s;
}
.v3d-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.v3d-thumb:hover { opacity: 0.85; }
.v3d-thumb.is-current { opacity: 1; border-color: var(--oro); }
.v3d-gallery button:focus-visible { outline: 2px solid var(--oro); outline-offset: 3px; }

/* ═══════════════════════════════════
   RESPONSIVE
═══════════════════════════════════ */
@media (max-width: 1080px) {
  .v3d-hero {
    min-height: auto;
    padding-top: 96px;
    padding-bottom: 56px;
  }
  .v3d-hero::before { left: 50%; top: 42%; width: min(780px, 110%); }
  /* In colonna singola il titolo deve restare in cima, sopra al modello, ma
     nel DOM sta dentro al rail di destra: `display: contents` scioglie il rail
     e lascia ordinare i suoi pezzi uno per uno. */
  .v3d-fulcrum {
    display: flex;
    flex-direction: column;
    gap: 22px;
  }
  .v3d-panel {
    border-left: 0;
    border-top: 1px solid rgba(184,149,106,0.3);
    padding-left: 0;
    padding-top: 24px;
    max-width: 620px;
    width: 100%;
    margin: 0 auto;
  }
  /* In colonna i tre comandi tornano impilati e centrati. */
  .v3d-controls { grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 4px; }
  .v3d-controls .v3d-hint { justify-self: center; text-align: center; }
  .v3d-controls .v3d-motion { justify-self: center; }
  .v3d-stage { height: clamp(340px, 46svh, 520px); }
  .v3d-scroll { display: none; }
  .v3d-strip-inner { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .v3d-stat:nth-child(2) { border-right: 0; }
  .v3d-stat:nth-child(-n+2) { border-bottom: 1px solid rgba(184,149,106,0.2); }
  .v3d-sec-inner,
  .v3d-sec:nth-child(even) .v3d-sec-inner { grid-template-columns: minmax(0, 1fr); }
  .v3d-sec:nth-child(even) .v3d-sec-text { order: 0; }
  .v3d-sec-photos { aspect-ratio: 3 / 2.2; }
  .v3d-panel-body { min-height: 0; }
  .v3d-shadow { left: 24%; right: 24%; bottom: 10%; }
}

@media (max-width: 860px) {
  .v3d-gal-body { grid-template-columns: minmax(0, 1fr); }
  /* Su schermo stretto la foto comanda: la scheda testuale sta sotto. */
  .v3d-gal-side {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 18px;
    max-height: 32%;
    /* La scheda scorre: la sfumatura in basso dice che c'è altro testo,
       invece di far sembrare la riga tagliata un errore. */
    -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 26px), transparent);
    mask-image: linear-gradient(to bottom, #000 calc(100% - 26px), transparent);
  }
  .v3d-gal-text { grid-column: 1 / -1; margin-bottom: 10px; }
  .v3d-gal-note { grid-column: 1 / -1; }
  .v3d-photo-stage { min-height: 42svh; }
}

@media (max-width: 720px) {
  .v3d-hero { padding: 88px 16px 48px; }
  /* Il lotto e' lungo: girando, l'ingombro verticale del modello varia da ~150
     a ~375px. A 58svh restavano sempre almeno 90px vuoti sopra, in media 144,
     e si leggevano come un buco fra il titolo e la casa. 48svh sta ancora sopra
     la posa piu' alta, quindi toglie il vuoto senza che il fit debba allontanare
     la camera: il modello resta della stessa dimensione. */
  .v3d-stage { flex: none; height: 48svh; min-height: 360px; }
  .v3d-sec { padding: 52px 16px; }
  .v3d-sec-index { font-size: 2rem; }
  /* Su schermo stretto la griglia 3x2 diventa illeggibile: due riquadri pari. */
  .v3d-sec-photos { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: 1.35fr 1fr 0.55fr; aspect-ratio: 1 / 1.15; }
  .v3d-sec-photo--lead { grid-column: 1 / -1; grid-row: 1; }
  .v3d-strip { padding: 44px 16px; }
  .v3d-strip-intro { font-size: 0.94rem; text-align: left; }
  .v3d-shadow { left: 20%; right: 20%; bottom: 8%; }
  .v3d-hover { font-size: 0.62rem; padding: 8px 11px; }
  .v3d-facing { font-size: 0.6rem; letter-spacing: 0.14em; }
  .v3d-gallery { width: 96vw; height: 92svh; }
  .v3d-shell { padding: 18px 14px 14px; }
  .v3d-edge { opacity: 1; width: 40px; height: 56px; }
  .v3d-thumb { width: 72px; height: 52px; }
  .v3d-gal-side { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  .v3d-hover,
  .v3d-facing,
  .v3d-panel-body,
  .v3d-photo-stage img { transition: none; }
}


/* ── Prezzo ──────────────────────────────────────────────────────────────────
   Era assente dall'intera pagina: l'occhiello diceva FOR SALE e basta, e chi
   arrivava da un articolo non sapeva se la casa costasse 200 mila o 2 milioni.
   Il compratore nordamericano filtra per fascia, quindi la cifra sta in alto. */
.v3d-hero-price {
  margin-top: 6px;
  font-family: var(--font-title, 'Cormorant Garamond', Georgia, serif);
  font-size: clamp(1.15rem, 1.9vw, 1.6rem);
  letter-spacing: 0.01em;
  color: #d4a97a;
}
/* Nella striscia il prezzo e' l'unico dato che non e' una misura: l'oro lo
   stacca dagli altri quattro senza bisogno di un riquadro.
   Il corpo e' piu' piccolo degli altri perche' "MXN 7,800,000" sono tredici
   caratteri contro i due di "78": alla stessa dimensione sbordava dalla cella
   e finiva oltre il filetto. */
.v3d-stat--price strong {
  color: #b8956a;
  white-space: nowrap;
  font-size: clamp(1.05rem, 1.7vw, 1.45rem);
  /* Allineato alla base degli altri numeri, che sono piu' alti. */
  margin-top: 0.42em;
}

@media (max-width: 860px) {
  /* Cinque colonne su un telefono diventano illeggibili: due righe, e il
     prezzo si prende l'ultima intera invece di restare orfano in un angolo. */
  .v3d-strip-inner { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .v3d-stat--price { grid-column: 1 / -1; }
}