/* ripieghi vh per iOS < 15.4 */
/* =========================================================
   Dimora Dogana — Home, revisione editoriale del 3/10/2026 (home-ordine-finale-dimora-dogana.md)
   Restano le scene del riferimento (era-residence.com, docs/riferimento.md §2): apertura con area di scroll,
   palazzo con le due finestre e lo zoom, comparse, parallasse delle foto, riquadro finale che si stringe sul footer.
   Cambiano contenuti, gerarchia e tipografia:
   - titoli in serif tondo, maiuscolo/minuscolo, niente corsivo; corpi più contenuti di prima (h1 12vw → 3,4–5vw)
   - paragrafi in tondo, interlinea 1,5, al massimo 65 caratteri per riga
   - spazio tra le sezioni almeno 1,5 volte quello di prima
   - occhielli in maiuscoletto spaziato, piccoli
   Senza movimento (JavaScript spento, GSAP assente, "Riduci movimento") la pagina è una colonna normale.
   ========================================================= */

/* sezioni: griglia di 10 colonne da desktop, colonna sola sul telefono */
.sezione { position: relative; padding: var(--spazio) var(--margine); }
.sezione > * + * { margin-top: var(--spazio-interno); }
@media (min-width: 992px) {
  .sezione { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); column-gap: var(--gap); align-items: start; }
  .sezione > * + * { margin-top: 0; }
  .sezione > .titolo-sezione, .sezione > .titolo-grande { grid-column: 2 / 10; margin-bottom: var(--spazio-interno); }
}
/* ---------- aree di scroll con sezione sticky ---------- */
html.movimento .area-hero { height: 225vh; height: 225svh; }
@media (min-width: 768px) { html.movimento .area-hero { height: 440vh; height: 440svh; } }
@media (min-width: 992px) {
  html.movimento .area-hero { height: 480vh; height: 480svh; }
  html.movimento .area-palazzo { height: 300vh; height: 300svh; }
}

/* ---------- 1. APERTURA (§2.1): solo nome e sottotitolo, centrati ---------- */
.s-hero { position: relative; height: 100vh; height: 100svh; min-height: 520px; overflow: hidden; isolation: isolate; color: var(--avorio); }
/* contenitore della foto: 120svh sotto i 992 px (era 144: la foto 3:2 era disegnata larga 4,7 schermi), 144svh sopra */
.hero-media { position: absolute; left: 0; right: 0; top: 0; height: 120vh; height: 120svh; z-index: -2; transform-origin: 50% 75%; }
@media (min-width: 992px) { .hero-media { height: 144vh; height: 144svh; } }
.hero-foto { position: absolute; inset: 0; }
/* 17/10: video di apertura sopra la foto; compare in dissolvenza quando parte davvero (js/hero-video.js) */
.hero-video { width: 100%; height: 100%; object-fit: cover; background: transparent; opacity: 0; transition: opacity 1.2s ease; pointer-events: none; }
.hero-video.in-riproduzione { opacity: 1; }
.hero-velo { position: absolute; inset: 0; z-index: -1; background:
  radial-gradient(ellipse 62% 34% at 50% 52%, rgba(29,32,31,.52) 0%, rgba(29,32,31,.3) 45%, rgba(29,32,31,0) 100%),
  linear-gradient(180deg, rgba(29,32,31,.34) 0%, rgba(29,32,31,0) 30%, rgba(29,32,31,0) 75%, rgba(29,32,31,.18) 100%); }
/* 4/10: tetti, palme e cielo sotto la scritta: velo più deciso al centro e un'ombra morbida sulle lettere */
.hero-nome, .hero-sotto { text-shadow: 0 2px 28px rgba(29,32,31,.45); }
.hero-contenuto { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; text-align: center; gap: 1.2em; padding: var(--altezza-testata) var(--margine) 0; }
.hero-nome { font-size: 15vw; font-weight: 500; line-height: .95; text-transform: uppercase; letter-spacing: .04em; }
.hero-nome .divisa-parola { display: block; }
.hero-sotto { font-size: 6vw; font-weight: 400; line-height: 1.1; letter-spacing: .02em; }
@media (min-width: 768px) {
  .hero-nome { font-size: 11vw; }
  .hero-sotto { font-size: 4vw; }
}
@media (min-width: 992px) {
  .hero-contenuto { gap: .9vw; }
  .hero-nome { font-size: 7.2vw; }
  .hero-nome .divisa-parola { display: inline-block; }
  .hero-sotto { font-size: 2.1vw; }
}
/* telefono in orizzontale: le misure seguono l'altezza */
@media (orientation: landscape) and (max-height: 540px) and (max-width: 991px) {
  .s-hero { min-height: 0; }
  .hero-nome { font-size: 14vh; }
  .hero-nome .divisa-parola { display: inline-block; }
  .hero-sotto { font-size: 7vh; }
}

/* ---------- 2. LA DIMORA ---------- */
.dimora-testo { display: grid; gap: 1.1em; }
.dimora-testo .frase-chiusura { margin-top: .6em; max-width: 16em; }
.dimora-foto { aspect-ratio: 3 / 2; margin-inline: calc(var(--margine) * -1); }
@media (min-width: 992px) {
  .s-dimora .occhiello { grid-column: 2 / 10; margin-bottom: 1.6vw; }
  .dimora-testo { grid-column: 2 / 6; grid-row: 3; }
  .dimora-foto { grid-column: 7 / 11; grid-row: 3; margin: 0 calc(var(--margine) * -1) 0 0; }
}

/* ---------- 3. IL PALAZZO (§2.11) ---------- */
.area-palazzo { display: none; }
/* sotto i 992 px e senza movimento: il titolo sta su una fascia avorio sopra la foto a tutto schermo */
.palazzo-fascia { padding: var(--spazio) var(--margine) calc(var(--spazio) * .45); text-align: center; }
@media (min-width: 992px) { html.movimento .palazzo-fascia { display: none; } }
.s-palazzo { position: relative; min-height: 100vh; min-height: 100svh; overflow: hidden; isolation: isolate; }
.palazzo-media { position: absolute; left: 0; right: 0; top: -12%; height: 124%; z-index: -2; }
@media (min-width: 992px) {
  html.movimento .area-palazzo { display: block; }
  .s-palazzo-intro { background: var(--avorio); }
  .palazzo-scena { position: absolute; inset: 0; transform-origin: 50% 50%; }
  /* foto da 30svh a 96svh: sopra resta la fascia avorio per la parola. Finestre allineate tra 42,2 e 83,8svh */
  .palazzo-scena-foto { position: absolute; left: 25vw; right: 25vw; top: 30vh; top: 30svh; bottom: 4vh; bottom: 4svh; overflow: hidden; }
  .palazzo-parola { position: absolute; left: 0; right: 0; top: 15vh; top: 15svh; text-align: center; color: var(--antracite); font-size: var(--t-grande); white-space: nowrap; z-index: 2; pointer-events: none; }
  .s-palazzo { min-height: 130vh; min-height: 130svh; }
}
.palazzo-androne { aspect-ratio: 3 / 2; margin-inline: calc(var(--margine) * -1); }
.palazzo-balcone { aspect-ratio: 3 / 2; width: 72%; margin-left: auto; }
@media (min-width: 992px) {
  .palazzo-frase { grid-column: 2 / 6; grid-row: 1; align-self: center; }
  .palazzo-androne { grid-column: 6 / 11; grid-row: 1; margin: 0 calc(var(--margine) * -1) 0 0; }
  .palazzo-balcone { grid-column: 2 / 6; grid-row: 2; width: 100%; margin: calc(var(--spazio-interno) * -1) 0 0; }
  /* 4/10: con la scena la facciata si è appena vista: accanto al testo non si ripete, e la frase si centra */
  html.movimento .palazzo-androne { display: none; }
  html.movimento .palazzo-frase { grid-column: 2 / 11; justify-self: center; text-align: center; font-size: calc(var(--t-testo) * 1.15); }
}

/* ---------- 4. GLI SPAZI ---------- */
.spazio + .spazio { margin-top: calc(var(--spazio) * .8); }
.spazio-grande { aspect-ratio: 3 / 2; }
.spazio-lato { display: grid; gap: 1.2rem; margin-top: 1.4rem; }
.spazio-piccola { width: 62%; }
.spazio-nota { max-width: 24em; }
.spazio-b .spazio-piccola { justify-self: start; }
.spazio-a .spazio-piccola { justify-self: end; }
@media (min-width: 992px) {
  .s-spazi > .spazio { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); column-gap: var(--gap); align-items: end; }
  .spazio-lato { margin-top: 0; gap: 1.4vw; grid-row: 1; }
  .spazio-piccola { width: 100%; }
  /* la colonna 1 resta libera: lì scorre la barra di avanzamento */
  .spazio-a .spazio-grande { grid-column: 2 / 8; grid-row: 1; }
  .spazio-a .spazio-lato { grid-column: 8 / 11; padding-left: calc(var(--gap) * 2); }
  .spazio-b .spazio-grande { grid-column: 5 / 11; grid-row: 1; margin-right: calc(var(--margine) * -1); }
  .spazio-b .spazio-lato { grid-column: 2 / 5; padding-right: calc(var(--gap) * 2); }
}

/* ---------- 5. INFORMAZIONI PRINCIPALI ---------- */
.numeri-dati { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--gap); }
.numeri-dati li { font-size: var(--t-dato); font-weight: 500; line-height: 1.15; padding: .7em 0; border-top: 1px solid var(--antracite-10); }
@media (min-width: 992px) {
  .numeri-dati { grid-column: 2 / 10; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: calc(var(--gap) * 3); }
}

/* ---------- 6. COMFORT E DOTAZIONI ---------- */
.dotazioni-elenco { columns: 2; column-gap: var(--gap); }
.dotazioni-elenco li { font-size: var(--t-testo); line-height: 1.4; padding: .75em 0; border-top: 1px solid var(--antracite-10); break-inside: avoid; }
@media (min-width: 992px) {
  .dotazioni-elenco { grid-column: 2 / 8; column-gap: calc(var(--gap) * 4); }
}

/* ---------- 7. ORTIGIA, UNA STORIA MILLENARIA ---------- */
.ortigia-testo { display: grid; gap: 1.1em; }
.ortigia-foto { aspect-ratio: 4 / 5; }
@media (min-width: 992px) {
  .s-ortigia { grid-template-rows: auto 1fr; }
  .s-ortigia > .titolo-grande { grid-column: 2 / 7; grid-row: 1; }
  .ortigia-testo { grid-column: 2 / 6; grid-row: 2; }
  .ortigia-foto { grid-column: 7 / 11; grid-row: 1 / 3; }
}

/* ---------- 8. POSIZIONE ---------- */
.posizione-mappa .mappa-finestra { height: 118vw; margin: 0 calc(var(--margine) * -1); }
.posizione-mappa .mappa-istruzione { display: none; margin-top: 1rem; font-family: var(--font-testo); font-size: max(10px, .7rem); letter-spacing: .2em; text-transform: uppercase; color: var(--antracite-60); }
/* "Trascinate per esplorare" solo quando la mappa si trascina davvero (telefono) */
.posizione-mappa .mappa-finestra.is-trascinabile + .mappa-istruzione { display: flex; }
.posizione-mappa .punto .l2 { font-size: max(8px, 2vw); letter-spacing: .14em; }
.posizione-mappa .punto-min { font-size: max(7.5px, 1.8vw); }
.distanze li { font-size: var(--t-testo); line-height: 1.4; padding: .7em 0; border-top: 1px solid var(--antracite-10); }
.distanza-tempo { color: var(--antracite-60); }
.indirizzo { margin-top: 1.4em; font-size: var(--t-testo); }
@media (min-width: 992px) {
  .posizione-mappa { grid-column: 2 / 7; grid-row: 2; }
  .posizione-mappa .mappa-finestra { height: auto; aspect-ratio: 2070 / 2178; margin: 0; cursor: default; }
  .posizione-mappa .mappa-tela { position: absolute; inset: 0; width: 100%; height: 100%; }
  .posizione-mappa .punto .l2 { font-size: max(8px, .62vw); }
  .posizione-mappa .punto-min { font-size: max(7.5px, .56vw); }
  .posizione-elenco { grid-column: 7 / 11; grid-row: 2; align-self: center; padding-left: calc(var(--gap) * 2); }
}

/* ---------- 9. VIVERE LA DIMORA ---------- */
.vivere-testo { display: grid; gap: 1.6em; }
.regole li { font-size: var(--t-testo); line-height: 1.45; padding: .7em 0; border-top: 1px solid var(--antracite-10); }
@media (min-width: 992px) {
  .vivere-testo { grid-column: 2 / 9; }
  .regole { columns: 2; column-gap: calc(var(--gap) * 4); }
  .regole li { break-inside: avoid; }
}

/* =========================================================
   SENZA MOVIMENTO: colonna normale, niente sticky; la chiusura (sezioni.css) mette la foto in un riquadro
   e il pulsante sotto, su fondo scuro.
   ========================================================= */
html:not(.movimento) .s-palazzo { min-height: 0; aspect-ratio: 4 / 5; }
html:not(.movimento) .palazzo-media { top: 0; height: 100%; }
@media (min-width: 992px) { html:not(.movimento) .s-palazzo { aspect-ratio: 16 / 9; } }

/* =========================================================
   REVISIONE 17/10 (indicazioni del cliente)
   ========================================================= */
/* apertura: il video sta fuori da .hero-media e occupa esattamente lo schermo; allo scroll solo 1 → 1,15 (js/home.js) */
.hero-video-box { position: absolute; inset: 0; z-index: -2; overflow: hidden; transform-origin: 50% 50%; }
/* pulsante discreto sotto il sottotitolo: entra col sottotitolo (js/preloader.js) */
.hero-prenota { justify-self: center; margin-top: 1.4em; padding: .9em .2em .5em; border-bottom: 1px solid currentColor; text-shadow: 0 1px 14px rgba(29,32,31,.45); transition: opacity var(--dur-s) var(--ease-out); }
.hero-prenota:hover { opacity: .75; }
@media (min-width: 992px) { .hero-prenota { margin-top: 1.6vw; } }

/* la dimora: dettaglio della libreria sotto il testo */
.dimora-dettaglio { width: 55%; aspect-ratio: 4 / 5; margin-left: auto; }
@media (min-width: 992px) {
  .dimora-dettaglio { grid-column: 3 / 5; grid-row: 4; width: 100%; margin: var(--spazio-interno) 0 0; }
}

/* gli spazi: il bagno con foto verticali, la vista ritagliata in orizzontale su porto e barche */
.spazio-verticale .spazio-grande { aspect-ratio: 4 / 5; width: 82%; }
.spazio-vista .spazio-grande .foto { object-position: 50% 42%; }
@media (min-width: 992px) {
  .spazio-verticale .spazio-grande { width: 100%; }
  .spazio-a.spazio-verticale .spazio-grande { grid-column: 2 / 6; }
  .spazio-a.spazio-verticale .spazio-lato { grid-column: 6 / 9; }
}

/* dettagli editoriali tra le sezioni (ceramiche, mobiletto) */
.s-dettaglio { padding: 0 var(--margine); }
.dettaglio-foto { width: 64%; aspect-ratio: 4 / 5; }
.dettaglio-destra .dettaglio-foto { margin-left: auto; }
@media (min-width: 992px) {
  .dettaglio-foto { width: calc(3 * var(--colonna) + 2 * var(--gap)); }
  .dettaglio-destra .dettaglio-foto { margin-right: calc(var(--colonna) + var(--gap)); }
  .dettaglio-sinistra .dettaglio-foto { margin-left: calc(var(--colonna) + var(--gap)); }
}

/* ortigia: la foto orizzontale dei tetti nel riquadro 4:5, centrata su palme e mare */
.ortigia-foto .foto { object-position: 68% 50%; }

/* posizione: introduzione, mappa subito sotto, tre gruppi di luoghi */
.posizione-intro { max-width: 34em; }
.distanze-titolo { margin: 2.4em 0 .4em; color: var(--antracite-60); }
.distanze-titolo:first-child { margin-top: 0; }
@media (min-width: 992px) {
  .posizione-intro { grid-column: 2 / 8; grid-row: 2; margin-bottom: var(--spazio-interno); }
  .posizione-mappa, .posizione-elenco { grid-row: 3; }
  .distanze-titolo { margin-top: 2vw; }
}

/* vivere la dimora: la poltroncina accanto alle regole */
.vivere-foto { width: 64%; aspect-ratio: 4 / 5; margin-left: auto; }
@media (min-width: 992px) {
  .vivere-testo { grid-column: 2 / 7; grid-row: 2; }
  .regole { columns: 1; }
  .vivere-foto { grid-column: 8 / 11; grid-row: 2; width: 100%; align-self: end; }
}

/* chiusura: Prenota in evidenza, Richiedi disponibilità come link sotto */
.finale-pulsanti { display: grid; justify-items: center; gap: 1.1rem; }
.finale-richiesta { font-family: var(--font-testo); font-size: max(11px, .72rem); font-weight: 600; letter-spacing: .2em; text-transform: uppercase; padding: .9em .2em .4em; border-bottom: 1px solid currentColor; text-shadow: 0 1px 12px rgba(29,32,31,.6); }
.finale-richiesta:hover { opacity: .75; }
/* 17/10 sera: meno bianco ai lati delle foto di dettaglio su telefono e tablet */
@media (max-width: 991px) {
  .dimora-dettaglio, .dettaglio-foto, .vivere-foto { width: 74%; }
  .spazio-verticale .spazio-grande { width: 88%; }
}
@media (min-width: 600px) and (max-width: 991px) {
  .dimora-dettaglio, .dettaglio-foto, .vivere-foto { width: 60%; }
}

/* =========================================================
   21/10 — richieste del cliente
   ========================================================= */
/* apertura: sotto il nome solo CONTEMPORARY SICILIAN STAY in maiuscolo (via "Prenota subito": c'è PRENOTA nella testata) */
.hero-sotto { text-transform: uppercase; font-size: 3.7vw; letter-spacing: .12em; }
@media (min-width: 768px) { .hero-sotto { font-size: 2.6vw; } }
@media (min-width: 992px) { .hero-sotto { font-size: 1.75vw; letter-spacing: .15em; font-weight: 500; } }
@media (orientation: landscape) and (max-height: 540px) and (max-width: 991px) { .hero-sotto { font-size: 4.6vh; } }

/* gli spazi, telefono e tablet: il nome dell'ambiente sta sopra le sue due foto */
@media (max-width: 991px) {
  .s-spazi > .spazio { display: flex; flex-direction: column; gap: 1.2rem; }
  .s-spazi .spazio-lato { display: contents; }
  .s-spazi .spazio-nome { order: -2; }
  .s-spazi .spazio-nota { order: -1; margin-top: -.6rem; }
  .s-spazi .spazio-a .spazio-piccola { align-self: flex-end; }
  .s-spazi .spazio-b .spazio-piccola { align-self: flex-start; }
}

/* Ortigia: video al posto della foto dei tetti */
.ortigia-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .8s var(--ease-out); }
.ortigia-video.in-riproduzione { opacity: 1; }
.ortigia-foto { position: relative; overflow: hidden; }