/* Trastevere Collection — landing Open House 28 novembre 2026
   Palette dal logo DEF: bordeaux #4C1A28, corallo #EC6242.
   Corallo: superfici, pittogrammi, bottoni con testo grande (su bianco 3,3:1, non va come testo normale).
   Forme sempre squadrate. Scroll nativo. Le regole .moto valgono solo con GSAP attivo e senza «riduci movimento». */

@font-face {
  font-family: "HV Muse";
  src: url("../font/hv-muse-regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}

:root {
  --bordeaux: #4C1A28;
  --bordeaux-2: #3A121D;
  --corallo: #EC6242;
  --carta: #FFFFFF;
  --velo: #F7F1F0;
  --testo: #4C1A28;
  --testo-2: #6B4650;
  --rosa: #E9DADD;
  --filo: rgba(76,26,40,.22);

  --f-titoli: "HV Muse", "Didot", "Bodoni 72", Georgia, serif;
  --f-testo: "elza", "Elza", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --contorno-titoli: .008em;

  --gutter: clamp(20px, 5vw, 72px);
  --max: 1360px;
  --sezione: clamp(96px, 13vw, 200px);
  --testata: 84px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html.bloccato { overflow: hidden; }
body {
  margin: 0; background: var(--velo); color: var(--testo);
  font-family: var(--f-testo); font-weight: 300; font-size: clamp(16px, 1.05vw, 18px); line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
button { font: inherit; color: inherit; }
:where(h1, h2, h3) { text-wrap: balance; }
:where(p, li, figcaption) { text-wrap: pretty; }
:focus-visible { outline: 2px solid var(--corallo); outline-offset: 3px; }

.contenitore { width: 100%; max-width: calc(var(--max) + 2 * var(--gutter)); margin: 0 auto; padding-inline: var(--gutter); }
.centro { text-align: center; }

/* ---------- Tipografia ---------- */
.rubrichetta {
  font-family: var(--f-testo); font-weight: 400; font-size: 12px; line-height: 1.5;
  letter-spacing: .22em; text-transform: uppercase; margin: 0;
}
.titolo {
  font-family: var(--f-titoli); font-weight: 400; margin: 0; line-height: 1; letter-spacing: -.005em;
  -webkit-text-stroke: var(--contorno-titoli) currentColor;
}
.titolo--xxl { font-size: clamp(52px, 9.4vw, 168px); line-height: .94; }
.titolo--xl  { font-size: clamp(44px, 7vw, 124px); line-height: .96; }
.titolo--l   { font-size: clamp(38px, 5vw, 88px); }
.titolo--m   { font-size: clamp(30px, 3.4vw, 56px); line-height: 1.08; }
.frase {
  font-family: var(--f-titoli); font-weight: 400; margin: 0;
  font-size: clamp(26px, 2.9vw, 50px); line-height: 1.16;
  -webkit-text-stroke: var(--contorno-titoli) currentColor;
}
.sottotitolo { font-size: clamp(15px, 1.05vw, 17px); line-height: 1.6; margin: 0; max-width: 42ch; color: var(--testo-2); }
.prezzo { display: block; margin-top: .5em; font-family: var(--f-titoli); font-size: clamp(24px, 2vw, 34px); line-height: 1.1; -webkit-text-stroke: var(--contorno-titoli) currentColor; }
.dicitura { font-size: 11px; letter-spacing: .04em; margin: 0; }
.dicitura--su-foto { position: absolute; right: 12px; bottom: 10px; z-index: 2; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.5); }
.filo-v { display: block; width: 1px; height: clamp(64px, 12svh, 140px); background: currentColor; margin: 0 auto; opacity: .55; }
.marchio { width: 34px; height: 34px; }

/* righe e lettere animate */
.split-line { padding-bottom: .08em; margin-bottom: -.08em; }

/* ---------- Bottone «liquido»: una riga sottile entra da sinistra, poi il colore sale e riempie ---------- */
.bottone {
  --b-fondo: var(--bordeaux); --b-testo: var(--carta);
  --b-riempi: var(--corallo); --b-testo-su: var(--bordeaux);
  --b-tempo: .3s;
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 52px; padding: 14px 30px; border: 0; border-radius: 0; cursor: pointer;
  font: 400 14px/1.2 var(--f-testo); letter-spacing: .16em; text-transform: uppercase; text-decoration: none;
  background: var(--b-fondo); color: var(--b-testo);
  transition: transform .25s ease, color var(--b-tempo) ease var(--b-tempo);
}
.bottone::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; z-index: -1;
  height: 3px; background: var(--b-riempi); transform: translateX(-101%);
  transition: height var(--b-tempo) ease 0s, transform var(--b-tempo) ease var(--b-tempo);
}
@media (hover: hover) {
  .bottone:hover { transform: scale(1.05); color: var(--b-testo-su); }
  .bottone:hover::before { transform: none; height: 100%; transition: transform var(--b-tempo) ease 0s, height var(--b-tempo) ease var(--b-tempo); }
}
.bottone:focus-visible { color: var(--b-testo-su); }
.bottone:focus-visible::before { transform: none; height: 100%; transition: transform var(--b-tempo) ease 0s, height var(--b-tempo) ease var(--b-tempo); }
.bottone:active { transform: scale(.95); }
.bottone[disabled] { cursor: progress; opacity: .8; }
.bottone--corallo { --b-fondo: var(--corallo); --b-testo: var(--bordeaux); --b-riempi: var(--carta); --b-testo-su: var(--bordeaux); }
.bottone--chiaro { --b-fondo: var(--carta); --b-testo: var(--bordeaux); --b-riempi: var(--corallo); --b-testo-su: var(--bordeaux); }
.bottone--filo { --b-fondo: transparent; --b-testo: var(--bordeaux); --b-riempi: var(--bordeaux); --b-testo-su: var(--carta); box-shadow: inset 0 0 0 1px var(--bordeaux); }

/* ---------- Ingresso: bordeaux con la finestra rettangolare che sale e si apre ---------- */
.ingresso { display: none; }
.moto .ingresso {
  display: block; position: fixed; inset: 0; z-index: 90; background: var(--bordeaux); color: var(--carta);
  pointer-events: none;
}
.ingresso__centro {
  position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 22px;
}
.ingresso__riga { display: flex; align-items: center; gap: clamp(28px, 6vw, 120px); }
.ingresso__riga img { width: clamp(150px, 15vw, 230px); }
.ingresso .filo-v { height: 64px; }

/* ---------- Testata ---------- */
.testata {
  position: absolute; inset: 0 0 auto; z-index: 50; padding-top: env(safe-area-inset-top, 0px); pointer-events: none;
}
.testata .contenitore { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; min-height: var(--testata); max-width: none; }
.testata__logo { grid-column: 2; }
.testata .bottone { grid-column: 3; justify-self: end; }
.testata a { pointer-events: auto; }
.testata__logo { position: relative; display: block; width: clamp(120px, 10vw, 156px); }
.testata__logo img { width: 100%; transition: opacity .4s ease; }
.testata__logo .scuro { position: absolute; inset: 0; opacity: 0; }
.testata .bottone { min-height: 44px; padding: 10px 22px; font-size: 12px; }
.testata--chiara .chiaro { opacity: 0; }
.testata--chiara .scuro { opacity: 1; }


/* ---------- 1. Hero ---------- */
.eroe { position: relative; background: var(--bordeaux); color: var(--carta); }
.eroe__scena { position: relative; height: 100svh; min-height: 600px; overflow: hidden; }
.eroe__foto { position: absolute; inset: 0; margin: 0; overflow: hidden; }
.eroe__foto img { width: 100%; height: 100%; object-fit: cover; transform-origin: 50% 75%; }
.eroe__velo {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(0,0,0,.45) 0%, rgba(0,0,0,0) 30%, rgba(0,0,0,.15) 50%, rgba(0,0,0,.82) 100%);
}
.eroe__piede {
  position: absolute; inset: auto 0 0; z-index: 2; display: grid; justify-items: center; text-align: center; gap: 18px;
  padding: 0 var(--gutter) clamp(32px, 6svh, 64px);
}
.eroe__piede .titolo { max-width: 18ch; font-size: clamp(36px, 4.4vw, 76px); }
.eroe__piede .sottotitolo { color: #fff; max-width: 48ch; text-align: center; }
.eroe__piede .prezzo { color: var(--carta); }

/* ---------- Sezioni che salgono (blocco squadrato che si allarga) ---------- */
.sale { position: relative; z-index: 3; }

/* ---------- 2. Strillo ---------- */
.strillo { background: var(--velo); color: var(--bordeaux); padding-block: clamp(80px, 12svh, 140px) var(--sezione); }
.strillo__parole {
  font-family: var(--f-titoli); font-size: clamp(30px, 4vw, 64px); line-height: 1; margin: clamp(56px, 9svh, 110px) 0 0;
  text-align: center; white-space: nowrap; -webkit-text-stroke: var(--contorno-titoli) currentColor;
}
.strillo__marchio { display: flex; align-items: center; justify-content: center; gap: clamp(24px, 4vw, 56px); }
.strillo .filo-v { margin-block: 28px 40px; }
.strillo .frase { max-width: 26ch; margin-inline: auto; }

/* ---------- 3. Progetto ---------- */
.progetto { position: relative; z-index: 4; background: var(--velo); padding-block: var(--sezione) 0; }
.progetto .titolo { max-width: 16ch; margin-inline: auto; }
.progetto__corpo { display: grid; justify-items: center; gap: 28px; margin-top: clamp(40px, 6vw, 88px); }
.progetto .sottotitolo { text-align: center; margin-inline: auto; }
.progetto__largo { position: relative; margin-top: var(--sezione); height: min(110svh, 72vw); overflow: hidden; }
.progetto__largo img { position: absolute; inset: -15% 0; width: 100%; height: 130%; object-fit: cover; }

/* ---------- Slider (frecce, contatore, barra) ---------- */
.slider { display: grid; gap: 18px; justify-items: center; }
.slider__vano { position: relative; overflow: hidden; width: 100%; touch-action: pan-y; }
.slider__vano > figure { position: absolute; inset: 0; margin: 0; overflow: hidden; }
.slider__vano > figure:first-child { position: relative; }
.slider__vano > figure:not(.attiva) { visibility: hidden; }
.slider__vano img { width: 100%; height: 100%; object-fit: cover; }
.slider__comandi { display: flex; align-items: center; gap: 14px; font-size: 11px; letter-spacing: .14em; font-variant-numeric: tabular-nums; }
.slider__comandi button { background: none; border: 0; padding: 10px; cursor: pointer; line-height: 0; }
.slider__comandi svg { width: 10px; height: 10px; stroke: currentColor; fill: none; stroke-width: 1.4; }
.slider__barra { position: relative; width: clamp(90px, 9vw, 150px); height: 1px; background: var(--filo); }
.slider__barra i { position: absolute; inset: 0 auto 0 0; width: 0; background: currentColor; transition: width .6s cubic-bezier(.25,1,.5,1); }
.progetto .slider { width: min(100%, 420px); }
.progetto .slider__vano { aspect-ratio: 4 / 5; }

/* ---------- 4. Appartamenti ---------- */
.spazio { background: var(--carta); color: var(--bordeaux); min-height: 100svh; display: grid; place-items: center; padding-block: var(--sezione); }
.spazio .titolo { text-align: center; }

.piante { position: relative; z-index: 4; background: var(--carta); padding-block: 0 var(--sezione); }
.piante__griglia { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 2.6fr) minmax(0, .8fr); gap: clamp(24px, 4vw, 72px); align-items: center; }
.piante__info { display: grid; gap: 26px; justify-self: end; }
.piante__info dt { font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--testo-2); }
.piante__info dd { margin: 6px 0 0; font-family: var(--f-titoli); font-size: clamp(22px, 1.8vw, 30px); line-height: 1.1; -webkit-text-stroke: var(--contorno-titoli) currentColor; }
.piante__azione { display: grid; gap: 22px; justify-items: start; }
.piante .slider__vano { aspect-ratio: 2000 / 1414; background: #fff; }
.piante .slider__vano img { object-fit: contain; }
.piante__nome { text-align: center; margin-top: clamp(32px, 4vw, 56px); }
.piante__nota { margin-top: 12px; color: var(--testo-2); }

.dettagli { position: relative; z-index: 4; background: var(--carta); padding-block: var(--sezione); }
.dettagli__griglia { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(20px, 2.4vw, 40px); }
.dettagli__riquadro { grid-column: 1 / span 6; grid-row: 1 / span 2; background: var(--bordeaux); padding: clamp(40px, 7vw, 120px) clamp(32px, 6vw, 100px); align-self: start; margin-top: clamp(40px, 6vw, 96px); }
.dettagli__riquadro figure { margin: 0; aspect-ratio: 4 / 5; overflow: hidden; position: relative; }
.dettagli__riquadro img, .dettagli__alto img { width: 100%; height: 100%; object-fit: cover; }
.dettagli__alto { grid-column: 8 / span 5; grid-row: 1; margin: 0; aspect-ratio: 16 / 9; overflow: hidden; position: relative; }
.dettagli__testo { grid-column: 8 / span 4; grid-row: 2; display: grid; gap: 30px; justify-items: start; align-content: start; padding-top: clamp(24px, 3vw, 48px); }
.dettagli__testo .frase { font-size: clamp(24px, 2.2vw, 38px); }
.dettagli__testo .sottotitolo { max-width: 34ch; }

.galleria { position: relative; z-index: 4; background: var(--carta); padding-block: 0 var(--sezione); }
.galleria .slider { justify-items: start; }
.galleria .slider__vano { aspect-ratio: 16 / 9; width: min(100%, 1100px); justify-self: end; }
.galleria .slider__comandi { justify-self: start; }

.unione { position: relative; z-index: 4; background: var(--carta); padding-block: 0 var(--sezione); }
.unione__coppia { display: flex; justify-content: center; gap: var(--varco, 3vw); width: var(--larghezza, 58vw); margin: 0 auto; }
.unione__coppia figure { flex: 1; margin: 0; aspect-ratio: 3 / 4; overflow: hidden; position: relative; }
.unione__coppia img { position: absolute; top: 0; height: 100%; width: 200%; max-width: none; object-fit: cover; }
.unione__coppia figure:first-child img { left: 0; }
.unione__coppia figure:last-child img { right: 0; }
.unione .dicitura { text-align: center; margin-top: 12px; color: var(--testo-2); }

/* ---------- 5. Servizi ---------- */
.servizi { position: relative; z-index: 5; background: var(--bordeaux); color: var(--carta); }
.servizi__scena { position: relative; height: 100svh; min-height: 620px; overflow: hidden; }
.servizi__foto { position: absolute; inset: 0; margin: 0; }
.servizi__foto img { width: 100%; height: 100%; object-fit: cover; }
.servizi__foto::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(58,18,29,.82) 0%, rgba(58,18,29,.3) 50%, rgba(58,18,29,.7) 100%); }
.servizi__lato {
  position: absolute; right: var(--gutter); top: calc(var(--testata) + 6svh); z-index: 2;
  display: grid; gap: clamp(32px, 5svh, 56px); justify-items: start;
}
.servizi__elenco {
  list-style: none; margin: 0; padding: 0 0 0 22px; border-left: 1px solid rgba(255,255,255,.4); display: grid; gap: 10px;
}
.servizi__elenco li {
  display: flex; align-items: center; gap: 16px; font-family: var(--f-titoli); font-size: clamp(26px, 2.6vw, 44px); line-height: 1.1;
  -webkit-text-stroke: var(--contorno-titoli) currentColor; transition: opacity .5s ease;
}
.moto .servizi__elenco li { opacity: .35; }
.moto .servizi__elenco li.attivo { opacity: 1; }
.servizi__elenco svg { width: 34px; height: 34px; stroke: var(--corallo); stroke-width: 1.5; fill: none; stroke-linecap: square; flex: none; }
.servizi__piede {
  position: absolute; inset: auto 0 0; z-index: 2; padding: 0 var(--gutter) clamp(32px, 6svh, 64px);
}
.servizi__piede .titolo { max-width: 14ch; }

/* ---------- 6. Posizione ---------- */
.posizione { position: relative; z-index: 6; background: var(--velo); padding-block: var(--sezione) 0; overflow: hidden; }
.posizione__testo { display: grid; justify-items: center; text-align: center; gap: 28px; }
.posizione .titolo { max-width: 14ch; }
.posizione .sottotitolo { text-align: center; }
.profilo { display: block; width: 100%; height: auto; margin-top: clamp(64px, 9vw, 140px); }
.profilo path { fill: none; stroke: var(--corallo); stroke-width: 2; }

/* ---------- 7. Prenota ---------- */
.finale { position: relative; z-index: 7; background: var(--velo); }
.finale__scena { position: relative; height: 100svh; min-height: 600px; overflow: hidden; }
.finale__foto { position: absolute; inset: 0; margin: 0; }
.finale__foto img { width: 100%; height: 100%; object-fit: cover; }
.finale__foto::after { content: ""; position: absolute; inset: 0; background: rgba(58,18,29,.5); }
.finale__testo {
  position: absolute; inset: 0; z-index: 2; display: grid; place-content: center; justify-items: center; text-align: center; gap: 24px;
  padding: 0 calc(var(--gutter) + 4vw); color: var(--carta);
}
.finale__testo .titolo { max-width: 12ch; }
.finale__testo .sottotitolo { color: var(--rosa); text-align: center; max-width: 40ch; }

.prenota { position: relative; z-index: 7; background: var(--velo); padding-block: var(--sezione); }
.prenota .contenitore { max-width: 900px; }
.prenota__intestazione { display: grid; justify-items: center; gap: 18px; margin-bottom: clamp(40px, 5vw, 72px); text-align: center; }

.modulo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 28px; }
.campo { display: grid; gap: 8px; }
.campo--intero { grid-column: 1 / -1; }
.campo label { font-size: 12px; letter-spacing: .16em; text-transform: uppercase; }
.campo input, .campo textarea {
  width: 100%; font: 300 17px/1.4 var(--f-testo); color: var(--testo);
  background: transparent; border: 0; border-bottom: 1px solid var(--testo-2); border-radius: 0; padding: 10px 0;
}
.campo textarea { min-height: 120px; resize: vertical; border: 1px solid var(--testo-2); padding: 12px; }
.campo input:focus, .campo textarea:focus { outline: none; border-color: var(--corallo); box-shadow: 0 1px 0 var(--corallo); }
.consenso { grid-column: 1 / -1; display: flex; gap: 12px; align-items: flex-start; font-size: 14px; line-height: 1.5; color: var(--testo-2); cursor: pointer; padding-block: 4px; }
.consenso input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--bordeaux); flex: none; }
.trappola { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.modulo__invio { grid-column: 1 / -1; display: flex; justify-content: center; }
.modulo__esito { grid-column: 1 / -1; margin: 0; font-size: 15px; min-height: 1.5em; text-align: center; }
.modulo__esito.ok { font-family: var(--f-titoli); font-size: 26px; line-height: 1.3; -webkit-text-stroke: var(--contorno-titoli) currentColor; }
.modulo__esito.errore { color: #A3271B; }
.modulo [aria-invalid="true"] { border-color: #A3271B; }

/* ---------- Piede ---------- */
.piede { position: relative; z-index: 8; background: var(--bordeaux-2); color: var(--rosa); padding-block: 64px calc(40px + env(safe-area-inset-bottom, 0px)); font-size: 14px; }
.piede .contenitore { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 40px; align-items: end; }
.piede img { width: 220px; }
.piede nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 28px; }
.piede nav a { text-decoration: none; display: inline-block; padding-block: 6px; }
.piede nav a:hover { color: var(--corallo); }
.piede__legale { grid-column: 1 / -1; margin: 0; padding-top: 24px; border-top: 1px solid rgba(233,218,221,.18); font-size: 12px; }

/* ---------- Movimento ---------- */
.moto .eroe { height: 200svh; }
.moto .eroe__scena { position: sticky; top: 0; }
.moto .servizi { height: 320svh; }
.moto .servizi__scena { position: sticky; top: 0; }
.moto .finale { height: 200svh; }
.moto .finale__scena { position: sticky; top: 0; }
.moto [data-r] { visibility: hidden; }          /* lo script le rende visibili mentre le anima */
.moto .sale { will-change: clip-path; }

/* ---------- Responsive ---------- */
@media (max-width: 991px) {
  :root { --testata: 68px; }
  .testata { position: fixed; }
  .testata .bottone { padding: 8px 16px; min-height: 40px; }
  .piante__griglia { grid-template-columns: 1fr; justify-items: center; }
  .piante__info { justify-self: center; grid-auto-flow: column; gap: 32px; text-align: center; order: 2; }
  .piante__azione { justify-items: center; order: 3; }
  .piante .slider { order: 1; width: 100%; }
  .dettagli__riquadro { grid-column: 1 / span 9; grid-row: auto; margin-top: 0; }
  .dettagli__alto { grid-column: 5 / -1; grid-row: auto; margin-top: -40px; position: relative; z-index: 2; }
  .dettagli__testo { grid-column: 1 / -1; grid-row: auto; }
  .unione__coppia { width: 100% !important; }
  .servizi__lato { left: var(--gutter); right: auto; }
  @media (max-width: 560px) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
  .bottone:hover, .bottone:active { transform: none; }
}