/* ripieghi vh per iOS < 15.4 */
/* =========================================================
   Sezioni condivise da tutte le pagine: foto, preloader, aree sticky, mappa OSM,
   elenco con + (info pratiche / buono a sapersi), invito finale con foto.
   Valori dal riferimento: docs/riferimento.md §2.0, §2.12, §2.13, §2.14, §4.1.
   ========================================================= */

.foto { width: 100%; height: 100%; object-fit: cover; background-size: cover; background-position: center; }
.progresso-alto { display: flex; flex-direction: column; align-items: center; }

/* ---------- 0. PRELOADER (§2.0) ---------- */
.preloader { position: fixed; inset: 0; z-index: 150; pointer-events: none; color: var(--avorio); display: grid; place-items: center; overflow: hidden; }
.no-js .preloader, .preloader.is-finito { display: none; }
.preloader.is-uscita { opacity: 0; transition: opacity .6s var(--ease-out); }
/* L'arco è un "buco" nel fondo scuro, disegnato da js/preloader.js in un SVG grande quanto lo schermo (29/09).
   Finché lo script non parte il fondo è pieno: niente arco fuori posto nei primi fotogrammi. */
.preloader:not(.ha-velo) { background: var(--antracite); }
.pre-arco-gruppo { display: none; }
.pre-velo { position: absolute; inset: 0; width: 100%; height: 100%; overflow: hidden; }
.pre-velo path:first-child { fill: var(--antracite); }
/* linee concentriche che seguono l'arco: sottili a ogni larghezza */
.pre-linea { fill: none; stroke: var(--avorio); stroke-width: 1; opacity: 0; }
/* decoro (correzioni 15/09): linee concentriche dell'arco e cornice ad angoli tagliati (3/10: via il nome in corsivo sul fondo) */
.pre-cornice { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.pre-cornice path { fill: none; stroke: var(--avorio); stroke-width: 1; vector-effect: non-scaling-stroke; opacity: .28; }
.pre-cornice path + path { opacity: .14; }
.pre-centro { position: relative; display: grid; justify-items: center; gap: 6vw; text-align: center; }
.pre-lunetta { width: 52vw; height: auto; aspect-ratio: 1520 / 774; overflow: visible; }
/* 3/10: nome e sottotitolo fermi sotto la lunetta, serif tondo; li fa comparire js/preloader.js */
.pre-nome { font-family: var(--font-display); font-weight: 500; text-transform: uppercase; font-size: 6.4vw; letter-spacing: .16em; line-height: 1.1; margin-right: -.16em; }
.pre-sotto { font-family: var(--font-display); font-weight: 400; font-size: 4.6vw; letter-spacing: .04em; line-height: 1.2; margin-top: -4vw; }
html.movimento .pre-nome, html.movimento .pre-sotto { opacity: 0; }
@media (min-width: 992px) {
  .pre-centro { gap: 2vw; }
  .pre-lunetta { width: 16vw; }
  .pre-nome { font-size: 2vw; }
  .pre-sotto { font-size: 1.35vw; margin-top: -1.3vw; }
}

/* ---------- aree di scroll con sezione sticky ---------- */
html.movimento .area { position: relative; }
html.movimento .area > section { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
/* telefoni e tablet (29/09 notte, classe pin-js da js/main.js): niente sticky, la sezione la fissa il pin di GSAP
   (js/animazioni.js, avviaPin) che crea da sé lo spazio di scorrimento. Altezze in px dall'altezza reale (--altezza). */
html.movimento.pin-js .area { height: auto !important; }
html.movimento.pin-js .area > section { position: relative; height: var(--altezza, 100vh); }
/* 3/10: sotto i 992 px il contenitore della foto è alto 1,2 schermi (era 1,44): la foto è ritagliata meno e arriva più nitida */
html.movimento.pin-js .hero-media { height: calc(var(--altezza, 100vh) * 1.2); }
@media (min-width: 992px) { html.movimento.pin-js .hero-media { height: calc(var(--altezza, 100vh) * 1.44); } }

/* ---------- mappa OSM ---------- */
.mappa-finestra { position: relative; height: 150vw; margin-top: 6vw; overflow: hidden; cursor: grab; touch-action: pan-y; user-select: none; }
.mappa-finestra.is-trascinata { cursor: grabbing; }
.mappa-tela { position: absolute; top: 0; left: 0; height: 100%; aspect-ratio: 2070 / 2178; will-change: transform; }
.mappa-svg { width: 100%; height: 100%; max-width: none; pointer-events: none; }
/* nelle aree sticky la mappa non è mai sopra la piega: il disegno si scarica quando serve (16/09) */
.mappa-punti { position: absolute; inset: 0; }
.punto { position: absolute; left: var(--x); top: var(--y); display: flex; flex-direction: column; align-items: center; gap: .6em; transform: translate(-50%, calc(-100% + 4px)); white-space: nowrap; }
.punto[data-lato] { flex-direction: row; gap: .7em; transform: translate(-50%, -50%); }
.punto[data-lato="destra"] { transform: translate(-4px, -50%); flex-direction: row-reverse; }
.punto[data-lato="sinistra"] { transform: translate(calc(-100% + 6px), -50%); }
.punto[data-lato="sotto"] { flex-direction: column-reverse; transform: translate(-50%, -4px); }
.punto[data-lato="sotto"] .punto-testo { text-align: center; }
.punto[data-lato="sotto-sinistra"] { transform: translate(calc(-100% + 6px), -2px); align-items: flex-start; }
.punto[data-lato="sotto-sinistra"] .punto-testo { margin-top: 1.1em; }
.punto::after { content: ""; position: relative; width: 8px; height: 8px; border-radius: 50%; background: var(--antracite); box-shadow: 0 0 0 0 rgba(29,32,31,.35); animation: pulsa 1.2s var(--ease-in) infinite; }
@keyframes pulsa { from { box-shadow: 0 0 0 0 rgba(29,32,31,.35); } to { box-shadow: 0 0 0 9px rgba(29,32,31,0); } }
.punto-min { color: rgba(29, 32, 31, .75); letter-spacing: .16em; font-size: max(7.5px, .82em); }
.punto-testo { display: grid; gap: .15em; line-height: 1.2; }
.punto[data-lato="destra"] .punto-testo { text-align: left; }
.punto[data-lato="sinistra"] .punto-testo, .punto[data-lato="sotto-sinistra"] .punto-testo { text-align: right; }
.punto-casa { color: var(--terracotta); z-index: 2; }
.punto-casa::after { background: var(--terracotta); width: 12px; height: 12px; }
.punto-casa .lunetta-piccola { display: none; }
.mappa-istruzione, .mappa-legenda { text-align: center; margin-top: 3vw; }
.mappa-istruzione { display: flex; justify-content: center; gap: 1em; }
.mappa-legenda { color: rgba(29, 32, 31, .75); }

.mappa-intestazione { display: grid; justify-items: center; text-align: center; gap: 3vw; padding-inline: var(--margine); }
.mappa-sottotitolo { margin: -.35em 0 0 18%; rotate: -6deg; }

/* ---------- 11. INFO (§2.12) ---------- */
.s-info { display: grid; justify-items: center; text-align: center; gap: 8vw; padding: 20vw var(--margine); }
.info-elenco { display: grid; gap: 8vw; }
.info-voce { display: grid; gap: 2vw; justify-items: center; }
.info-voce dt::after, .info-titolo::after { content: "+"; font-size: .32em; vertical-align: 1.9em; margin-left: .1em; font-family: var(--font-testo); font-weight: 400; }
.info-voce dd { max-width: 32em; color: rgba(29, 32, 31, .8); }
.info-link { text-decoration: underline; text-underline-offset: .2em; text-decoration-thickness: 1px; }
/* Vivere la Dimora (Appartamento, 29/09): stesse righe di Info, otto voci su due colonne da 992px, righe pratiche in coda */
.vivere-intro { max-width: 34em; }
.vivere-pratiche { display: grid; gap: 2vw; padding-top: 8vw; border-top: 1px solid rgba(29, 32, 31, .2); color: rgba(29, 32, 31, .8); }
/* tablet (29/09 sera): le misure del telefono in vw, a 768 px, lasciavano mezza schermata vuota fra le sezioni */
@media (min-width: 600px) and (max-width: 991px) {
  .s-info { gap: 5vw; padding: 11vw var(--margine); }
  .info-elenco { gap: 5vw; }
}
@media (min-width: 992px) {
  .s-info { gap: 2.4vw; padding: 6vw var(--margine); }
  .info-elenco { gap: 1.4vw; }
  .info-voce { gap: .4vw; }
  .vivere-elenco { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 6vw; row-gap: 3vw; max-width: 72vw; align-items: start; }
  .vivere-pratiche { gap: .6vw; padding-top: 2.4vw; }
}

/* ---------- 12. FINALE (§2.13) ---------- */
.s-finale { position: relative; min-height: 175vh; min-height: 175svh; display: grid; grid-template-rows: auto 1fr; color: var(--avorio); isolation: isolate; }
.finale-clip { position: absolute; inset: 0; z-index: -1; overflow: hidden; clip-path: inset(0 0 0 0); }
.finale-media { position: absolute; left: 0; right: 0; top: -15%; height: 130%; }
.finale-velo { position: absolute; inset: 0; background: rgba(29, 32, 31, .3); }
.finale-sotto { text-align: center; padding: calc(var(--altezza-testata) + 6vw) var(--margine) 0; max-width: 90vw; justify-self: center; }
.finale-testi { position: sticky; top: 0; height: 100vh; height: 100svh; display: grid; place-content: center; justify-items: center; text-align: center; gap: 4vw; }
.finale-riga { letter-spacing: 1em; margin-right: -1em; }
.finale-cta { position: absolute; right: var(--margine); bottom: 12vw; }
@media (min-width: 992px) {
  .finale-sotto { padding-top: 3vw; max-width: calc(6 * var(--colonna) + 5 * var(--gap)); }
  .finale-testi { gap: 1.4vw; }
  .finale-cta { right: calc(var(--margine) + 2 * (var(--colonna) + var(--gap))); bottom: 30vh; bottom: 30svh; }
}

/* footer: la foto finale si stringe mentre il footer entra (§2.14) */
html.movimento .piede-centro, html.movimento .piede-fondo { transform-origin: 50% 50%; }


/* ---------- bouganville: rami scontornati che ondeggiano (fiori del riferimento, §2.5 e §2.10) ----------
   Contenitore posizionato; dentro un PNG trasparente (oggi img/fiori/segnaposto.png, 1×1) o un video con alpha.
   Ondeggio ±1,5° attorno al punto d'attacco del ramo (--ramo), 7s ease-in-out; parallasse allo scroll in js/home.js. */
.fiori { position: absolute; z-index: 3; width: var(--larghezza, 40vw); pointer-events: none; }
.fiori-img, .fiori-video { display: block; width: 100%; height: auto; transform-origin: var(--ramo, 0% 0%); animation: fiori-ondeggia var(--durata, 7s) ease-in-out infinite alternate; }
@keyframes fiori-ondeggia { from { transform: rotate(-1.5deg); } to { transform: rotate(1.5deg); } }
@media (prefers-reduced-motion: reduce) { .fiori-img, .fiori-video { animation: none; } }
/* rete di sicurezza: se il JavaScript non parte, dopo 9s il preloader sparisce lo stesso (script inline nella head) */
.preloader-scaduto .preloader { display: none; }

/* TELEFONI E TABLET (29/09 sera, classe "leggero" da js/main.js): comparse in dissolvenza con IntersectionObserver
   (js/leggero.js). La classe da-rivelare la ricevono solo i blocchi fuori schermo all'avvio. */
.da-rivelare { opacity: 0; transform: translateY(24px); transition: opacity .9s var(--ease-out), transform .9s var(--ease-out); }
.da-rivelare.comparso { opacity: 1; transform: none; }
/* ogni sezione alta quanto il suo contenuto */
html:not(.movimento) .s-motivi { min-height: 0; }
html:not(.movimento) .motivi-slider { grid-template-rows: none; }
html:not(.movimento) .piede { min-height: 0; }
html:not(.movimento) .s-breve { min-height: 0; }
/* la firma corsiva sotto il titolo della mappa, senza toccarlo */
html:not(.movimento) .mappa-sottotitolo { margin-top: .15em; }
/* comfort a schede: una foto sola (quella della scheda scelta) sopra l'elenco e il testo */
html:not(.movimento) .comfort-foto { display: block; position: relative; aspect-ratio: 4 / 3; margin: 4vw var(--margine) 0; padding: 0; overflow: hidden; }
html:not(.movimento) .comfort-foto .foto { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; opacity: 0; transition: opacity var(--dur-m) var(--ease-out); }
html:not(.movimento) .comfort-foto .foto.is-attiva { opacity: 1; }
@media (min-width: 992px) { html:not(.movimento) .comfort-foto { aspect-ratio: 16 / 9; margin: 3vw var(--margine) 0; } }

/* RIPIEGO SENZA MOVIMENTO (29/09): invito finale con la foto in un riquadro e i testi sotto, niente sticky;
   niente rami di bouganville, che per posizione cadono sopra i testi (vedi home.css) */
html:not(.movimento) .fiori { display: none; }
html:not(.movimento) .s-finale { display: grid; grid-template-rows: none; min-height: 0; gap: 6vw; padding-bottom: 16vw; }
html:not(.movimento) .finale-clip { position: relative; inset: auto; z-index: 0; aspect-ratio: 4 / 5; clip-path: none; }
html:not(.movimento) .finale-media { top: 0; height: 100%; }
html:not(.movimento) .finale-velo { display: none; }
html:not(.movimento) .finale-sotto { padding-top: 0; }
html:not(.movimento) .finale-testi { position: static; height: auto; }
html:not(.movimento) .finale-cta { position: relative; right: auto; bottom: auto; justify-self: center; }
@media (min-width: 992px) {
  html:not(.movimento) .s-finale { gap: 3vw; padding-bottom: 8vw; }
  html:not(.movimento) .finale-clip { aspect-ratio: 16 / 9; }
}


/* =========================================================
   TONO EDITORIALE (3/10/2026): tipografia, chiusura e banner comuni a home e pagine interne.
   Spostati qui da css/home.css quando le pagine interne hanno preso lo stesso tono della home
   (home-ordine-finale-dimora-dogana.md, pagine-interne-ordine-proposta.md).
   ========================================================= */
:root {
  /* telefono */
  --t-grande: 11vw;          /* "Una certa idea di Sicilia." e "Ortigia, una storia millenaria": possono andare a capo */
  --t-sezione: 9vw;          /* titoli di sezione: una riga */
  --t-nome: 7.4vw;           /* denominazioni degli spazi */
  --t-frase: 6.2vw;          /* "Il mare è vicino…": un corpo sopra il testo, sotto il titolo */
  --t-dato: 6.2vw;           /* informazioni principali */
  --t-testo: 16px;
  --spazio: 17vw;            /* tra le sezioni. 17/10: il cliente trova troppo bianco, era 28vw */
  --spazio-interno: 7vw;
}
@media (min-width: 768px) {
  :root { --t-grande: 7.4vw; --t-sezione: 6vw; --t-nome: 4.4vw; --t-frase: 3.6vw; --t-dato: 3.8vw; --t-testo: 17px; --spazio: 11vw; --spazio-interno: 4.5vw; }
}
@media (min-width: 992px) {
  /* a 1440: titolo grande 72 px, titolo di sezione 49 px, testo 16,6 px; spazio tra le sezioni 94 px (17/10, era 158) */
  :root { --t-grande: 5vw; --t-sezione: 3.4vw; --t-nome: 2.3vw; --t-frase: 1.9vw; --t-dato: 2.1vw; --t-testo: clamp(16px, 1.15vw, 21px); --spazio: 6.5vw; --spazio-interno: 3vw; }
}

/* ---------- tipografia della home ---------- */
.titolo-grande, .titolo-sezione, .spazio-nome, .frase-chiusura, .numeri-dati li, .hero-nome, .hero-sotto {
  font-family: var(--font-display); font-style: normal; text-transform: none; letter-spacing: -.01em;
}
.titolo-grande { font-size: var(--t-grande); font-weight: 500; line-height: 1.02; }
.titolo-sezione { font-size: var(--t-sezione); font-weight: 500; line-height: 1.05; }
.spazio-nome { font-size: var(--t-nome); font-weight: 500; line-height: 1.05; }
.frase-chiusura { font-size: var(--t-frase); font-weight: 500; line-height: 1.2; }
/* le righe del titolo: la maschera della comparsa non deve tagliare le discendenti */
.titolo-grande .divisa-maschera, .titolo-sezione .divisa-maschera { padding-block: .12em; margin-block: -.12em; }
.testo { font-family: var(--font-testo); font-size: var(--t-testo); line-height: 1.5; letter-spacing: -.005em; font-weight: 400; max-width: 28em; }
.occhiello { font-family: var(--font-testo); font-size: max(11px, .75vw); font-weight: 600; letter-spacing: .26em; text-transform: uppercase; line-height: 1.4; }

/* foto con parallasse: contenitore interno alto 130% (data-parallasse="img") */
.par { width: 100%; height: 130%; margin-top: -15%; }
main figure { overflow: hidden; }


/* titoli brevi delle pagine interne: voci di elenco, righe e schede della mappa */
.voce-titolo { font-family: var(--font-display); font-weight: 500; font-style: normal; text-transform: none; font-size: calc(var(--t-nome) * .82); line-height: 1.1; letter-spacing: -.005em; }
.dato { font-family: var(--font-display); font-weight: 500; text-transform: none; font-size: var(--t-dato); line-height: 1.15; }
.testo-elenco > li { font-size: var(--t-testo); line-height: 1.4; }
.riga-tempo { color: var(--antracite-60); }

/* ---------- 10. CHIUSURA: foto, pulsante, contatti piccoli ---------- */
/* la foto è 100svh con il contenitore della parallasse al 130%: foto 3:2 disegnata larga max(100vw, 195vh) */
#finale.s-finale { min-height: 100vh; min-height: 100svh; display: grid; grid-template-rows: none; place-items: center; }
.finale-azioni { display: grid; justify-items: center; gap: 1.4rem; text-align: center; padding: var(--spazio) var(--margine); }
/* pulsante pieno avorio: sulla foto del porto (molti dettagli) il bordo sottile non si leggeva */
.pillola-chiara { font-family: var(--font-testo); font-size: max(12px, .8rem); font-weight: 600; letter-spacing: .2em; text-transform: uppercase; padding: 1.1em 2.2em; background: var(--avorio); color: var(--antracite); border-color: var(--avorio); }
.pillola-chiara .pillola-fondo { background: var(--antracite); }
@media (min-width: 992px) { .pillola-chiara:hover .pillola-testo { color: var(--avorio); } }
#finale .finale-velo { background: radial-gradient(ellipse 60% 45% at 50% 50%, rgba(29,32,31,.5), rgba(29,32,31,.18) 100%); }
.finale-contatti { text-shadow: 0 1px 12px rgba(29,32,31,.6); }
.finale-contatti { font-family: var(--font-testo); font-size: max(11px, .72rem); letter-spacing: .14em; }
.finale-contatti a { display: inline-block; padding-block: .9em; }
.finale-contatti a:hover { text-decoration: underline; text-underline-offset: .25em; }

html:not(.movimento) #finale.s-finale { min-height: 0; display: grid; place-items: stretch; }
html:not(.movimento) .finale-azioni { padding-top: 10vw; }
@media (min-width: 992px) { html:not(.movimento) .finale-azioni { padding-top: 5vw; } }
/* il banner dei cookie è comune a tutte le pagine (partials/dialoghi.html, classe a2): nella home niente corsivo (3/10) */
.cookie-titolo { font-style: normal; }
/* niente esponente "+" del riferimento sui titoli tondi (3/10) */
.info-voce dt.voce-titolo::after, .info-titolo.titolo-sezione::after { content: none; }
/* Contatti: il titolo del modulo sta su una riga (3/10), il modulo sotto a tutta larghezza */
@media (min-width: 992px) {
  .s-modulo .modulo-testa { grid-column: 2 / -1; }
  .s-modulo .modulo { grid-column: 2 / -1; }
}

/* ---------- accento terracotta (4/10): il colore delle piastrelle e delle lenzuola, usato poco ----------
   Testi: --terracotta-testo (5,3:1 sull'avorio, 4,5:1 sulla sabbia). Solo su fondi chiari. */
.occhiello, .frase-chiusura, .int-numero, .ambiente-lato > .l2:first-child { color: var(--terracotta-testo); }
.tema-scuro .occhiello, .tema-scuro .frase-chiusura { color: inherit; }
.pillola-chiara .pillola-fondo, .pillola-piena .pillola-fondo { background: var(--terracotta-testo); }
.numeri-dati li { border-top-color: rgba(156, 82, 56, .35); }

/* ---------- credito OpenStreetMap (5/10): obbligatorio per licenza, ma il più discreto possibile ---------- */
.mappa-crediti {
  position: absolute; right: 6px; bottom: 4px; z-index: 3;
  font-family: var(--font-testo); font-size: 9px; line-height: 1; letter-spacing: 0; text-transform: none;
  color: currentColor; opacity: .38; text-decoration: none; pointer-events: auto;
}
.mappa-crediti:hover { opacity: .7; }

/* 17/10: introduzione sotto "Posizione", la mappa subito dopo */
.mappa-intro { max-width: 34em; }

/* 21/10: anche nell'apertura animata (preloader) il sottotitolo è tutto maiuscolo, come sotto il video */
.pre-sotto { text-transform: uppercase; font-size: 3.4vw; letter-spacing: .14em; margin-right: -.14em; }
@media (min-width: 992px) { .pre-sotto { font-size: .95vw; letter-spacing: .16em; margin-right: -.16em; } }

/* 22/10 */
/* chiusura senza foto: invito e pulsante su fondo pieno, poi il footer */
#finale.s-finale-testo { min-height: 0; padding-block: 22vw 14vw; }
.s-finale-testo .finale-azioni { gap: 2.2rem; padding: 0 var(--margine); }
.s-finale-testo .finale-titolo { max-width: 14em; }
.s-finale-testo .finale-contatti { text-shadow: none; opacity: .75; }
@media (min-width: 992px) { #finale.s-finale-testo { padding-block: 10vw 6vw; } .s-finale-testo .finale-azioni { gap: 2.4vw; } }