/* Capitolo 02 «Cosa ottieni, in concreto.»: un riquadro 16:9 in cima a ogni colonna.
   01 = anteprima semplificata del documento di riepilogo; 02 e 03 = immagini fornite da Yuri. */
.tour-benefits .result__visual {
  position: relative;
  aspect-ratio: 16 / 9;
  margin: 0 0 26px;
  overflow: hidden;
  border: 1px solid var(--line-soft);
  border-radius: 2px;
  background:
    radial-gradient(120% 100% at 78% 8%, rgba(19, 42, 94, .62), transparent 62%),
    linear-gradient(180deg, var(--navy-850), var(--navy-950));
}
/* Angoli oro come nelle immagini del documento */
.tour-benefits .result__visual::after {
  content: "";
  position: absolute;
  inset: 10px;
  z-index: 3;
  pointer-events: none;
  opacity: .6;
  background:
    linear-gradient(var(--gold), var(--gold)) left top / 14px 1px no-repeat,
    linear-gradient(var(--gold), var(--gold)) left top / 1px 14px no-repeat,
    linear-gradient(var(--gold), var(--gold)) right top / 14px 1px no-repeat,
    linear-gradient(var(--gold), var(--gold)) right top / 1px 14px no-repeat,
    linear-gradient(var(--gold), var(--gold)) left bottom / 14px 1px no-repeat,
    linear-gradient(var(--gold), var(--gold)) left bottom / 1px 14px no-repeat,
    linear-gradient(var(--gold), var(--gold)) right bottom / 14px 1px no-repeat,
    linear-gradient(var(--gold), var(--gold)) right bottom / 1px 14px no-repeat;
}
/* Le colonne hanno padding asimmetrici: la prima riceve lo stesso margine a destra così i tre riquadri sono identici */
@media (min-width: 721px) {
  .tour-benefits .result:first-child .result__visual { margin-right: 28px; }
}

/* Tre colonne strette (tablet, 721-899 px): angoli oro più piccoli, così non toccano i soggetti delle immagini */
@media (min-width: 721px) and (max-width: 899px) {
  .tour-benefits .result__visual::after {
    inset: 7px;
    background-size: 10px 1px, 1px 10px, 10px 1px, 1px 10px, 10px 1px, 1px 10px, 10px 1px, 1px 10px;
  }
}
/* ...e titoli delle colonne un po' più piccoli fino a 858 px: «immaginarmelo».» non esce più dalla colonna
   (difetto già presente online, reso più visibile dal riquadro sopra) */
@media (min-width: 721px) and (max-width: 858px) {
  .tour-benefits .result h3 { font-size: clamp(1.2rem, 2.7vw, 1.45rem); }
}

/* 02 e 03: immagini a tutto riquadro (16:9, WebP 720/1440); gli angoli oro restano sopra */
.tour-benefits .result__visual--image img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
  box-shadow: none;
}

/* 01: anteprima del documento di riepilogo, solo decorativa (aria-hidden): un foglio avorio A4
   con dietro il bordo della copertina blu. Tutto è in em e il font-size segue la larghezza del riquadro
   (unità cqi), quindi il foglio scala in blocco senza spostamenti di layout. Contenuto: intestazione, titolo,
   render del soggiorno «Petrolio e Rovere» (lo stesso mostrato più su), righe di finiture con campione
   (parete petrolio, rovere, marmo, tessuto avorio). */
.tour-benefits .result__visual--doc { container-type: inline-size; }
.tour-benefits .result__visual--doc::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(38% 58% at 50% 54%, rgba(201, 162, 74, .11), transparent 72%);
}
.doc-preview {
  --dp-ink: var(--ivory-ink, #0b1630);
  --dp-muted: rgba(74, 86, 114, .34);
  --dp-gold: var(--gold-on-ivory, #7d5f1c);
  --dp-rule: rgba(11, 22, 48, .12);
  --dp-ease: cubic-bezier(.22, .61, .36, 1);
  position: absolute;
  left: 50%;
  top: 50%;
  font-size: 6.5px;   /* ripiego per i browser senza unità contenitore */
  font-size: 1.94cqi; /* foglio alto circa l'84% del riquadro */
  line-height: 1;
  transform: translate(-50%, -50%);
  pointer-events: none;
  user-select: none;
}
/* Browser senza unità contenitore (Safari/iPadOS 15, Chrome < 105, Firefox < 110): misura dalla larghezza della
   finestra, così il foglio resta all'83-88% dell'altezza del riquadro anche con tre colonne strette */
@supports not (font-size: 1cqi) {
  .doc-preview { font-size: 1.78vw; }
  @media (min-width: 721px) {
    .doc-preview { font-size: min(6.5px, calc(.6vw - 1.1px)); }
  }
}
/* Copertina blu dietro il foglio: se ne vede solo il bordo con il filetto oro */
.doc-preview::before {
  content: "";
  position: absolute;
  inset: 0;
  transform: translate(-1.1em, -.75em) rotate(-3deg);
  border-radius: 1px;
  background:
    radial-gradient(120% 70% at 0 0, rgba(201, 162, 74, .1), transparent 60%),
    linear-gradient(170deg, var(--navy-700, #132a5e) 0%, var(--navy-800, #0d1d43) 55%, var(--navy-850, #0a1736) 100%);
  box-shadow: inset 0 0 0 1px rgba(201, 162, 74, .45), 0 10px 22px -10px rgba(1, 4, 14, .75);
  transition: transform .6s var(--dp-ease);
}
.doc-preview__sheet {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 17.2em;
  aspect-ratio: 1 / 1.4142;
  padding: 1.3em 1.3em 1.05em;
  overflow: hidden;
  color: var(--dp-ink);
  background: linear-gradient(172deg, var(--ivory, #f4efe4) 0%, var(--ivory, #f4efe4) 55%, var(--ivory-2, #ebe4d4) 100%);
  border-radius: 1px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .7),
    0 1px 2px rgba(4, 10, 26, .3),
    0 6px 12px -4px rgba(4, 10, 26, .4),
    0 22px 40px -14px rgba(4, 10, 26, .75);
  transition: transform .6s var(--dp-ease), box-shadow .6s var(--dp-ease);
}
.doc-preview__head {
  display: flex;
  align-items: center;
  gap: .45em;
  padding-bottom: .75em;
  border-bottom: 1px solid rgba(125, 95, 28, .32);
}
.doc-preview__mark { flex: none; width: 1.1em; height: 1.1em; color: var(--gold, #c9a24a); }
.doc-preview__brand { font: 400 .8em/1 var(--font-display); letter-spacing: .01em; white-space: nowrap; }
.doc-preview__tag { margin-left: auto; width: 3.4em; height: .2em; border-radius: 1px; background: var(--dp-muted); }
/* Occhiello come quello del sito: filetto oro sottile seguito da una barretta */
.doc-preview__kicker {
  position: relative;
  display: block;
  flex: none;
  width: 4.4em;
  height: .2em;
  margin: 1.05em 0 0 2.1em;
  border-radius: 1px;
  background: var(--dp-gold);
  opacity: .62;
}
.doc-preview__kicker::before {
  content: "";
  position: absolute;
  right: calc(100% + .5em);
  top: 50%;
  width: 1.6em;
  height: 1px;
  background: var(--gold, #c9a24a);
}
.doc-preview__title {
  display: block;
  margin-top: .5em;
  font: 400 1.36em/1.1 var(--font-display);
  letter-spacing: -.01em;
  white-space: nowrap;
}
.doc-preview__title em { font-style: italic; color: var(--dp-gold); }
.doc-preview__media {
  position: relative;
  display: block;
  flex: none;
  margin-top: .75em;
  aspect-ratio: 16 / 9;
  background: #6f6a62;
}
.doc-preview__media img { width: 100%; height: 100%; object-fit: cover; border-radius: 0; box-shadow: none; }
.doc-preview__media::after {
  content: "";
  position: absolute;
  inset: -.3em;
  --c: rgba(201, 162, 74, .9);
  --l: .7em;
  background:
    linear-gradient(var(--c), var(--c)) left top / var(--l) 1px,
    linear-gradient(var(--c), var(--c)) left top / 1px var(--l),
    linear-gradient(var(--c), var(--c)) right top / var(--l) 1px,
    linear-gradient(var(--c), var(--c)) right top / 1px var(--l),
    linear-gradient(var(--c), var(--c)) left bottom / var(--l) 1px,
    linear-gradient(var(--c), var(--c)) left bottom / 1px var(--l),
    linear-gradient(var(--c), var(--c)) right bottom / var(--l) 1px,
    linear-gradient(var(--c), var(--c)) right bottom / 1px var(--l);
  background-repeat: no-repeat;
}
.doc-preview__kicker--list { width: 3.4em; }
/* Finiture: due colonne fisse di due righe (il foglio ha proporzioni A4: non aggiungere righe) */
.doc-preview__list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: .9em;
  margin-top: .5em;
}
.doc-preview__row {
  display: flex;
  align-items: center;
  gap: .5em;
  padding: .45em 0;
  border-bottom: 1px solid var(--dp-rule);
}
.doc-preview__row:nth-last-child(-n+2) { border-bottom: 0; }
.doc-preview__swatch {
  flex: none;
  width: 1.3em;
  height: 1.3em;
  border-radius: 1px;
  background: linear-gradient(145deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, 0) 60%), var(--sw);
  box-shadow: inset 0 0 0 1px rgba(11, 22, 48, .1);
}
.doc-preview__lines { display: flex; flex: 1; flex-direction: column; gap: .36em; min-width: 0; }
/* Come nel documento: categoria in oro sopra, nome della finitura in blu sotto */
.doc-preview__lines > span { display: block; height: .15em; border-radius: 1px; background: var(--dp-gold); opacity: .55; }
.doc-preview__lines > span + span { height: .26em; background: var(--dp-ink); opacity: .72; }
.doc-preview__row--wall { --sw: #2b5565; }
.doc-preview__row--oak { --sw: #a9784c; }
.doc-preview__row--marble .doc-preview__swatch {
  background:
    radial-gradient(120% 60% at 30% 35%, rgba(214, 196, 168, .28), transparent 60%),
    linear-gradient(128deg, #7b6550 0%, #5f4d3d 42%, #86705a 50%, #604e3e 58%, #735f4b 100%);
}
.doc-preview__row--fabric { --sw: #e7ddcc; }
.doc-preview__row--wall .doc-preview__lines > span:first-child { width: 46%; }
.doc-preview__row--oak .doc-preview__lines > span:first-child { width: 40%; }
.doc-preview__row--marble .doc-preview__lines > span:first-child { width: 52%; }
.doc-preview__row--fabric .doc-preview__lines > span:first-child { width: 44%; }
.doc-preview__row--wall .doc-preview__lines > span + span { width: 78%; }
.doc-preview__row--oak .doc-preview__lines > span + span { width: 64%; }
.doc-preview__row--marble .doc-preview__lines > span + span { width: 72%; }
.doc-preview__row--fabric .doc-preview__lines > span + span { width: 84%; }
.doc-preview__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
  padding-top: .6em;
  border-top: 1px solid var(--dp-rule);
}
.doc-preview__foot > span { display: block; width: 4.8em; height: .18em; border-radius: 1px; background: var(--dp-muted); }
.doc-preview__foot > span + span { width: 1.5em; height: .22em; background: var(--dp-ink); opacity: .7; }
/* Al passaggio sulla colonna il foglio si solleva appena (solo mouse, mai con movimento ridotto) */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .tour-benefits .result:hover .doc-preview__sheet {
    transform: translateY(-.35em);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, .7),
      0 1px 2px rgba(4, 10, 26, .3),
      0 10px 18px -6px rgba(4, 10, 26, .42),
      0 30px 52px -18px rgba(4, 10, 26, .8);
  }
  .tour-benefits .result:hover .doc-preview::before { transform: translate(-1.4em, -.9em) rotate(-4.5deg); }
}
@media (prefers-reduced-motion: reduce) {
  .doc-preview::before, .doc-preview__sheet { transition: none; }
}
/* Contrasto elevato di Windows: l'anteprima si comporta come un'immagine (altrimenti resterebbe un riquadro vuoto) */
@media (forced-colors: active) {
  .doc-preview { forced-color-adjust: none; }
}

/* «Ti è piaciuto?» (sezione #finiture): il riquadro si stringe attorno al contenuto e il bottone sta
   subito accanto alla frase (a capo dopo la domanda nell'HTML), invece che all'estremo opposto.
   Sotto i 900 px il bottone va subito sotto la frase, sempre dentro un riquadro stretto. */
.demo .demo-cta {
  width: fit-content;
  max-width: 100%;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 18px;
  padding: clamp(20px, 2.4vw, 28px) clamp(22px, 3vw, 36px);
}
.demo .demo-cta p { max-width: none; }
/* Da 900 px: bottone accanto alla frase. Resta flex-wrap: wrap (da tour.css), così con il testo ingrandito
   dal browser il bottone va sotto invece di coprire la frase. */
@media (min-width: 900px) {
  .demo .demo-cta { flex-direction: row; align-items: center; gap: clamp(24px, 3vw, 40px); }
  .demo .demo-cta p { flex: 0 1 auto; }
  .demo .demo-cta .btn { flex: none; }
}