@font-face { font-family: 'DM Sans'; font-weight: 400; font-display: swap; src: url(assets/fonts/dm-sans-latin-400-normal.woff2) format('woff2'); }
@font-face { font-family: 'DM Sans'; font-weight: 500; font-display: swap; src: url(assets/fonts/dm-sans-latin-500-normal.woff2) format('woff2'); }
@font-face { font-family: 'DM Sans'; font-weight: 600; font-display: swap; src: url(assets/fonts/dm-sans-latin-600-normal.woff2) format('woff2'); }
@font-face { font-family: 'DM Sans'; font-weight: 700; font-display: swap; src: url(assets/fonts/dm-sans-latin-700-normal.woff2) format('woff2'); }

:root {
  --fondo: #f0efeb; --superficie: #fbfaf8; --inchiostro: #39312e; --tenue: #655a56;
  --linea: #dfd8d4; --accento: #6f5f58; --morbido: #eae5e1; --scuro: #514642; --scuro2: #655650;
  --sans: 'DM Sans', Arial, sans-serif;
  /* l'altezza della testata fissa: i pannelli che si fermano sotto (--sc-margine-alto) e gli ancoraggi (#…) ne tengono conto,
     con un margine solo, scroll-padding-top qui sotto (mai sommato a uno scroll-margin degli elementi) */
  --alto-testata: 88px;
}
@media (max-width: 760px) { :root { --alto-testata: 64px; } }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--alto-testata) + 12px); }
body { margin: 0; background: var(--fondo); color: var(--inchiostro); font: 16px/1.6 var(--sans); }
img { display: block; max-width: 100%; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--inchiostro); outline-offset: 3px; }
h1, h2, h3 { margin: 0; font-family: var(--sans); font-weight: 500; letter-spacing: -.04em; }
p { margin: 0; }

.salta { position: absolute; left: -9999px; top: 12px; z-index: 20; padding: 10px 14px; background: var(--superficie); }
.salta:focus { left: 12px; }

.testata { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 10; height: var(--alto-testata); padding: 0 5.5%; display: flex; align-items: center; justify-content: space-between; background: var(--superficie); border-bottom: 1px solid var(--linea); }
.logo img { width: 64px; height: 65px; object-fit: contain; }
.menu ul { --spazio: 24px; list-style: none; margin: 0; padding: 0; display: flex; gap: var(--spazio); align-items: center; font-size: 15px; }
.menu a { text-decoration: none; }
.menu a:hover { text-decoration: underline; }
/* voce della pagina in cui si è (aria-current="page") */
.menu a[aria-current="page"] { font-weight: 700; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 6px; }
/* le dieci voci («Home» dal 25 ottobre) stanno su una riga anche fra 761 e 1180 px (gli spazi più stretti, le voci senza a
   capo); «Accedi» e le bandierine su una seconda riga sottile, a destra (richiesta di Salvo del 25 ottobre: lo spazio per
   «Home»). Lo fa il CSS, il menu resta una lista sola: ::after largo quanto la riga chiude la prima, order porta «Accedi» e le
   lingue dopo. Sul telefono il menu a scomparsa resta com'è, con «Accedi» e le lingue in fondo */
.menu a { white-space: nowrap; }
@media (min-width: 761px) {
  .menu { flex: 1; min-width: 0; margin-left: 24px; }
  .menu ul { flex-wrap: wrap; justify-content: flex-end; row-gap: 4px; }
  .menu ul::after { content: ''; flex-basis: 100%; height: 0; order: 1; }
  .menu li.voce-accedi, .menu li.voce-lingue { order: 2; }
  .menu li.voce-accedi { margin-right: calc(10px - var(--spazio)); }
}
@media (min-width: 901px) and (max-width: 1180px) { .menu ul { --spazio: 14px; font-size: 14px; } .menu .contatto { padding: 8px 12px; } }
@media (min-width: 761px) and (max-width: 900px) { .menu ul { --spazio: 7px; font-size: 12.5px; } .menu .contatto { padding: 7px 8px; } }
.menu .contatto { border: 1px solid var(--inchiostro); border-radius: 4px; padding: 9px 14px; }
/* il sottomenu di «Esperienze» con «Casi» (richiesta di Salvo del 28 ottobre). Sul computer una tendina sotto la voce, aperta
   passando sopra con il mouse o con il fuoco da tastiera (:focus-within), senza script: nascosta con l'opacità e non con
   visibility, così «Casi» resta raggiungibile con il Tab; un segno ▾ dice che c'è; la tendina e le voci centrate sotto la madre (28 ottobre). Sul telefono
   le voci stanno sotto la madre, rientrate e sempre visibili */
.menu .voce-sotto { position: relative; }
.menu .sottomenu { display: block; }
.menu .sottomenu::after { content: none; }
@media (min-width: 761px) {
  .menu .voce-sotto > a::after { content: ''; display: inline-block; margin-left: 5px; vertical-align: 2px; border: 4px solid transparent; border-top-color: currentColor; border-bottom-width: 0; }
  .menu .voce-sotto::after { content: ''; position: absolute; left: 0; right: 0; top: 100%; height: 12px; }
  .menu .sottomenu { position: absolute; top: calc(100% + 10px); left: 50%; transform: translateX(-50%); text-align: center; z-index: 11; min-width: max-content; padding: 6px 0; background: var(--superficie); border: 1px solid var(--linea); border-radius: 4px; box-shadow: 0 12px 24px #30251d1f; opacity: 0; pointer-events: none; transition: opacity .15s ease; }
  .menu .sottomenu a { display: block; padding: 8px 14px; }
  .menu .voce-sotto:hover .sottomenu, .menu .voce-sotto:focus-within .sottomenu { opacity: 1; pointer-events: auto; }
}
/* «Accedi» al back office: discreta (strumenti/menu-sito.js) */
.menu .accedi { color: var(--tenue); font-size: 14px; }
/* le bandierine delle lingue, a destra: il codice accanto, la lingua in uso segnata (strumenti/menu-sito.js) */
.menu .voce-lingue { display: flex; gap: 4px; }
.menu .lingua { display: inline-flex; align-items: center; gap: 5px; padding: 4px 6px; border-radius: 4px; color: var(--tenue); font-size: 13px; text-decoration: none; }
.menu .lingua[aria-current] { color: var(--inchiostro); font-weight: 700; box-shadow: inset 0 0 0 1px var(--linea); text-decoration: none; }
.menu .bandiera { width: 18px; height: 12px; flex: none; border-radius: 1px; box-shadow: 0 0 0 1px #0000001f; }
/* sulla seconda riga, sul computer: più piccoli e vicini */
@media (min-width: 761px) {
  .menu .accedi { font-size: 12.5px; }
  .menu .voce-lingue { gap: 2px; }
  .menu .lingua { padding: 2px 5px; gap: 4px; font-size: 12px; }
  .menu .bandiera { width: 16px; height: 11px; }
}

.bottone-menu { display: none; }
.occhiello { text-transform: uppercase; letter-spacing: .16em; font-size: 12px; font-weight: 700; color: var(--accento); }

.hero { position: relative; display: grid; grid-template-columns: 1fr 1fr; min-height: 560px; }
.hero-testo { background: var(--scuro); color: #fff; padding: 72px 8% 56px 12%; display: flex; flex-direction: column; justify-content: center; }
.hero-testo .occhiello { color: #d9c7bf; }
.hero h1 { font-size: clamp(40px, 4.6vw, 64px); line-height: 1.05; margin: 16px 0 20px; max-width: 600px; }
.hero-testo > p:not(.occhiello) { color: #e1d9d5; font-size: 17px; max-width: 560px; }
.azioni { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.pulsante { display: inline-flex; align-items: center; gap: 12px; padding: 14px 18px; border: 1px solid transparent; border-radius: 4px; background: #b4a29b; color: var(--inchiostro); font-size: 15px; font-weight: 700; text-decoration: none; }
.pulsante.secondario { background: transparent; color: #fff; border-color: #c1b4ae; }
.hero-testo :focus-visible { outline-color: #fff; }

.hero-foto { position: relative; min-height: 440px; overflow: hidden; background: #d9d1c9; }
.scena { position: absolute; inset: 0; margin: 0; opacity: 0; transition: opacity .9s ease; }
.scena.attiva { opacity: 1; }
.scena img { width: 100%; height: 100%; object-fit: cover; object-position: 68% 50%; }
.scena::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, #17241b80, transparent 40%); pointer-events: none; }
.comandi { position: absolute; z-index: 2; right: 18px; bottom: 14px; display: flex; gap: 8px; }
.comandi[hidden] { display: none; }
.comandi button { width: 40px; height: 40px; border: 1px solid #ffffffb0; border-radius: 50%; background: #2d2927b3; color: #fff; font: 600 16px var(--sans); cursor: pointer; }
.comandi button:hover, .comandi button:focus-visible { background: var(--scuro); outline: 3px solid #fff; outline-offset: 2px; }
/* Frecce ai bordi dell'immagine: solo su telefono, e solo con JavaScript */
.freccia { display: none; }

/* Riquadro delle residenze: sulla foto in alto a sinistra; su telefono a cavallo del suo bordo basso */
.residenze { position: absolute; z-index: 3; left: calc(50% + 18px); top: 18px; display: flex; flex-direction: column; gap: 2px; max-width: 300px; padding: 12px 16px; border-radius: 4px; background: #fbfaf8f2; color: var(--inchiostro); text-decoration: none; box-shadow: 0 8px 24px #30251d33; }
.residenze .sopra { font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--accento); }
.residenze .sotto { font-size: 16px; font-weight: 600; }
.residenze:hover { background: #fff; }
.residenze:focus-visible { outline: 3px solid #fff; outline-offset: 2px; box-shadow: 0 0 0 6px var(--inchiostro); }

/* Pannelli sovrapposti: pila, zoom, ingresso e cometa li dà il pacchetto schede-cometa
   (schede-cometa.css e .js, variante negli attributi data-sc-* in index.html). Qui solo l'aspetto
   di Pavé: angoli di 16 px e 6 px di margine sui lati su telefono (predefiniti del pacchetto,
   --sc-raggio e --sc-margine-lato-telefono) e la stessa ombra leggera e calda per tutti, verso
   l'alto (si vede sul pannello coperto) e verso il basso. */
.pila { --sc-ombra: 0 -8px 28px #30251d14, 0 14px 40px #30251d14; padding: 24px 0 8px; }
.pannello { position: relative; margin: 0 2% 20px; }
.intro { display: grid; grid-template-columns: 1.4fr 1fr 1fr; align-content: center; gap: 32px; padding: clamp(32px, 6vw, 84px); background: var(--morbido); border: 1px solid var(--linea); }
.intro h2 { font-size: clamp(30px, 4.6vw, 84px); line-height: 1.08; max-width: 720px; text-wrap: balance; }
.intro p { align-self: center; color: var(--tenue); font-size: clamp(17px, 1.6vw, 26px); line-height: 1.75; }
.intro p + p { padding-left: 24px; border-left: 1px solid #cfc8bb; }

.metodo { display: flex; flex-direction: column; justify-content: center; padding: clamp(34px, 5vw, 64px); background: var(--superficie); border: 1px solid var(--linea); }
.testa-sezione { display: flex; justify-content: space-between; align-items: end; gap: 24px; margin-bottom: 28px; }
.testa-sezione h2 { font-size: clamp(30px, 3vw, 42px); line-height: 1.12; margin-top: 8px; }
.testa-sezione > p { max-width: 380px; color: var(--tenue); font-size: 16px; }
.passi { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.passo { padding: 22px; background: var(--superficie); border: 1px solid var(--linea); border-radius: 6px; box-shadow: 0 5px 18px #1732490c; }
.passo small { color: var(--accento); font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.passo h3 { font-size: 19px; font-weight: 600; margin: 12px 0 6px; }
.passo p { color: var(--tenue); font-size: 15px; }
.percorsi { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 24px; }
.percorso { display: flex; flex-direction: column; padding: 24px; border-radius: 6px; background: #e9e4e1; }
.percorso + .percorso { background: #e4dfdb; }
.percorso h3 { font-size: 24px; margin: 8px 0; }
.percorso p:not(.occhiello) { color: var(--tenue); font-size: 15px; max-width: 420px; }
.link-testo { margin-top: auto; padding-top: 16px; font-size: 15px; font-weight: 700; text-decoration: none; }

/* niente overflow: hidden sul pannello, che taglierebbe l'alone della cometa: gli angoli
   li arrotonda la colonna del titolo */
.caso { display: grid; grid-template-columns: .8fr 1.2fr; background: var(--scuro); color: #fff; }
.caso-titolo { display: flex; flex-direction: column; justify-content: center; padding: clamp(30px, 5vw, 68px); background: var(--scuro2); border-radius: var(--sc-raggio) 0 0 var(--sc-raggio); }
.caso-titolo .occhiello { color: #e8cfae; }
.caso-titolo h2 { font-size: clamp(28px, 3.6vw, 64px); line-height: 1.1; margin: 12px 0; text-wrap: balance; }
.caso p:not(.occhiello):not(.riassunto) { color: #e6e0dc; font-size: clamp(15px, 1.3vw, 22px); }
.caso-testo { display: flex; flex-direction: column; justify-content: center; gap: 20px; padding: clamp(30px, 5vw, 68px); }
.caso-testo .riassunto { color: #fff; font-size: clamp(22px, 3vw, 56px); line-height: 1.3; }

.link-futuro { font-size: 15px; font-weight: 700; }
.link-futuro small, .pulsante-futuro small { display: inline-block; margin-left: 6px; font-size: 12px; font-weight: 500; color: var(--tenue); }
.caso .link-futuro small { color: #e6e0dc; }

.immobili { padding: clamp(34px, 5vw, 64px); background: #e9e4e1; border: 1px solid var(--linea); }
/* il pulsante verso tutti gli immobili, nella testa della sezione sotto la frase: nello spazio libero accanto al titolo, così il
   pannello non si allunga (deve restare alto al più quanto lo schermo sotto la testata, 1280 × 800, se no non si ferma intero e
   l'ancora #immobili si ferma fuori posto) */
.testa-sezione > .testa-lato { max-width: 380px; }
.testa-lato > p:first-child { color: var(--tenue); font-size: 16px; }
.tutti-immobili { margin: 16px 0 0; }
.tutti-immobili .pulsante { min-height: 44px; padding: 10px 16px; }
.schede { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.scheda { position: relative; overflow: hidden; border-radius: 6px; background: var(--superficie); box-shadow: 0 5px 16px #172c3a0e; }
/* la scheda della homepage porta alla scheda dell'immobile: il collegamento del titolo si allarga a tutta la scheda
   (gestione/homepage.js, htmlScheda), dentro la scheda che è sempre «position: relative» (mai con il selettore «has», che i browser
   vecchi non hanno: il collegamento coprirebbe tutta la riga); il fuoco della tastiera disegna il bordo dello stesso
   ::after, cioè di tutta la scheda */
.scheda-collegamento { color: inherit; text-decoration: none; }
.scheda-collegamento::after { content: ''; position: absolute; inset: 0; z-index: 1; border-radius: 6px; }
.scheda-collegamento:focus-visible { outline: none; }
.scheda-collegamento:focus-visible::after { outline: 3px solid var(--inchiostro); outline-offset: -3px; }
.vai-scheda { font-size: 14px; font-weight: 700; }
.scheda:hover .vai-scheda, .scheda:hover .scheda-collegamento { text-decoration: underline; text-underline-offset: 3px; }
.scheda img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
/* l'etichetta dello stato sulla foto, in alto a sinistra (gestione/sito-etichetta-stato.js; filtri di «Immobili», 25 ottobre):
   disponibili con il fondo scuro, venduti e affittati con il fondo chiaro; sopra il collegamento della scheda, che non copre */
.etichetta-stato { position: absolute; top: 12px; left: 12px; z-index: 2; padding: 4px 9px; border-radius: 4px; background: var(--inchiostro); color: var(--superficie);
  font: 600 13px/1.2 var(--sans); pointer-events: none; }
.etichetta-stato.etichetta-conclusa { background: var(--superficie); color: var(--inchiostro); box-shadow: inset 0 0 0 1px var(--linea); }
.dettagli { padding: 18px; }
.dettagli small { color: var(--accento); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; }
.dettagli .link-futuro small, .scheda-guida .link-futuro small { text-transform: none; letter-spacing: 0; font-weight: 500; color: var(--tenue); }
.dettagli h3 { font-size: 18px; font-weight: 600; margin: 6px 0; }
.dettagli p { color: var(--tenue); font-size: 15px; }
.prezzo { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 8px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--linea); font-weight: 700; }
.prezzo .link-futuro { font-size: 14px; }

.guide { display: grid; grid-template-columns: .9fr 1.1fr; gap: 36px; align-items: center; padding: clamp(34px, 5vw, 64px); background: var(--superficie); border: 1px solid var(--linea); }
.guide h2 { font-size: clamp(28px, 2.8vw, 36px); line-height: 1.1; margin: 8px 0 12px; }
.guide > div > p:not(.occhiello) { color: var(--tenue); max-width: 420px; }
.scheda-guida { padding: 24px; border: 1px solid var(--linea); border-radius: 6px; background: var(--superficie); }
.scheda-guida small { color: var(--accento); font-size: 12px; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; }
.scheda-guida h3 { font-size: 21px; margin: 8px 0; }
.scheda-guida p { color: var(--tenue); font-size: 15px; }
.scheda-guida .link-futuro { margin-top: 14px; color: var(--inchiostro); }

.chiusura { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: clamp(34px, 5vw, 56px); background: #e7e0dc; border: 1px solid var(--linea); }
.chiusura h2 { font-size: 30px; margin: 6px 0; }
.chiusura p:not(.occhiello):not(.pulsante-futuro) { color: var(--tenue); }
/* i pulsanti «Parliamone» e «Richiedi un colloquio» verso il modulo */
.pulsante-colloquio-link { display: inline-flex; align-items: center; min-height: 48px; padding: 14px 22px; border-radius: 4px; background: var(--scuro); color: #fff;
  font-weight: 600; font-size: 16px; text-decoration: none; white-space: nowrap; }
.pulsante-colloquio-link:hover { background: var(--inchiostro); }
.pulsante-futuro { padding: 14px 18px; border: 1px dashed var(--accento); border-radius: 4px; font-size: 15px; font-weight: 700; }

.piede { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 20px; padding: 22px 7%; color: var(--tenue); font-size: 14px; }
.piede .link-futuro { font-size: 14px; font-weight: 500; }
.piede .piede-privacy { color: var(--inchiostro); font-size: 14px; font-weight: 500; text-underline-offset: 3px; }
/* il credito di Dialogicom, come negli altri siti di Dialogicom (strumenti/menu-sito.js) */
.piede .crediti { margin: 0; display: inline-flex; align-items: center; flex-wrap: wrap; gap: 6px; font-size: 13px; color: var(--tenue); }
.piede .crediti a { display: inline-flex; line-height: 0; border-radius: 3px; }
.piede .crediti img { width: 78px; height: 26px; }

/* Segni della homepage (Salvo, 22 ottobre 2026): un'icona di sito/icone.svg per ogni pannello e passo, a tratto sottile
   dentro un cerchio. Al passaggio del puntatore sul suo blocco il cerchio si riempie e l'icona si alza appena; quando
   entra nello schermo l'icona si disegna (segni.js toglie la classe «da-disegnare»; mai con «riduci movimento»: allora è
   ferma e sempre visibile). Le proprietà sono separate (translate, rotate, scale) perché l'ingresso e il passaggio del
   puntatore non si annullino a vicenda. */
.segno { display: block; flex: none; align-self: flex-start; box-sizing: content-box; width: 24px; height: 24px; padding: 11px; margin-bottom: 16px; border: 1px solid var(--linea); border-radius: 50%; background: var(--superficie); color: var(--accento); overflow: visible; transition: background-color .35s ease, color .35s ease, border-color .35s ease, translate .35s ease, rotate .35s ease; }
/* nessun segno allunga un pannello: i pannelli alti quanto lo schermo e quelli fermi sotto la testata devono restare
   interi. Nei paragrafi dell'introduzione e accanto ai titoli il segno sta a sinistra e il testo gli gira attorno;
   nelle schede (passi, percorsi, guida) sta nell'angolo in alto a destra */
.immobili .testa-sezione .segno, .chiusura .segno { float: left; margin: 4px 16px 4px 0; }
/* l'introduzione: sul computer il segno sta sopra il paragrafo (il pannello è alto quanto lo schermo e ha spazio), sul
   telefono accanto; sul telefono in orizzontale niente segni, perché l'introduzione è già più alta dello schermo */
@media (max-width: 760px) { .intro .segno { float: left; margin: 4px 16px 4px 0; } }
@media (max-height: 500px) { .intro .segno { display: none; } }
.passo, .percorso, .scheda-guida { position: relative; }
.passo .segno, .percorso .segno, .scheda-guida .segno { position: absolute; top: 14px; right: 14px; margin: 0; padding: 9px; }
.percorso .segno { background: var(--superficie); border-color: transparent; }
.passo small, .percorso > .occhiello, .scheda-guida > small { display: block; padding-right: 52px; }
:hover > .segno { background-color: var(--scuro); border-color: var(--scuro); color: #fff; translate: 0 -3px; rotate: -8deg; }
.caso .segno { background: transparent; border-color: #ffffff40; color: #e8cfae; }
.caso :hover > .segno { background-color: #e8cfae; border-color: #e8cfae; color: var(--scuro); }
@media (prefers-reduced-motion: no-preference) {
  .segno { stroke-dasharray: 100; stroke-dashoffset: 0; transition: background-color .35s ease, color .35s ease, border-color .35s ease, translate .35s ease, rotate .35s ease, opacity .5s ease, scale .6s cubic-bezier(.2, .7, .2, 1), stroke-dashoffset 1.1s ease .15s; }
  .segno.da-disegnare { opacity: 0; scale: .7; stroke-dashoffset: 100; }
}
@media (prefers-reduced-motion: reduce) {
  .segno { transition: none; }
  :hover > .segno { translate: none; rotate: none; }
}

/* Su schermi larghi e alti i primi tre pannelli sono alti quanto lo schermo, meno i margini */
@media (min-width: 961px) and (min-height: 700px) {
  .intro, .metodo, .caso { height: calc(100vh - 48px); height: calc(100svh - 48px); }
}
@media (min-width: 961px) and (min-height: 700px) and (max-height: 860px) {
  .metodo { padding-block: 24px; }
  .metodo .testa-sezione { margin-bottom: 16px; }
  .metodo .passo { padding: 14px 16px; }
  .metodo .passo h3 { margin: 8px 0 4px; }
  .percorsi { margin-top: 14px; }
  .percorso { padding: 16px 20px; }
  .percorso h3 { margin: 4px 0; }
}

@media (max-width: 760px) {
  .testata { height: auto; min-height: 64px; padding: 8px 5%; flex-wrap: wrap; }
  .logo img { width: 48px; height: 49px; }
  .menu { flex-basis: 100%; }
  .menu ul { flex-wrap: wrap; gap: 4px 18px; padding-bottom: 8px; }
  .js .testata { height: 64px; min-height: 0; flex-wrap: nowrap; padding: 0 5%; }
  .js .bottone-menu { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 14px; border: 1px solid var(--linea); border-radius: 4px; background: transparent; color: var(--inchiostro); font: 500 15px var(--sans); cursor: pointer; }
  .icona { width: 16px; height: 7px; border-top: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; }
  .js .menu { position: absolute; top: 100%; left: 0; right: 0; z-index: 6; background: var(--superficie); border-bottom: 1px solid var(--linea); box-shadow: 0 16px 32px #30251d1f; opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity .2s ease, transform .2s ease, visibility 0s linear .2s; }
  .js .menu.aperto { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
  .js .menu ul { flex-direction: column; align-items: stretch; flex-wrap: nowrap; gap: 0; padding: 0 7% 16px; font-size: 18px; }
  .js .menu li { border-bottom: 1px solid var(--linea); }
  .js .menu li a { display: flex; align-items: center; min-height: 48px; }
  .js .menu li.voce-contatto { border-bottom: 0; padding-top: 16px; }
  .js .menu li.voce-accedi { border-bottom: 0; }
  .js .menu li.voce-lingue { border-bottom: 0; justify-content: center; gap: 16px; }
  .js .menu .lingua { min-height: 48px; padding: 0 12px; font-size: 16px; }
  .js .menu .accedi { justify-content: center; font-size: 16px; }
  .js .menu .contatto { justify-content: center; min-height: 52px; padding: 0 14px; }
  .menu .sottomenu { display: flex; flex-wrap: wrap; gap: 4px 18px; padding: 0; }
  .menu .sottomenu .sotto-madre { display: none; }
  .js .menu .sottomenu { flex-direction: column; padding: 0 0 0 18px; font-size: 16px; }
  .js .menu .sottomenu li { border-bottom: 0; border-top: 1px solid var(--linea); }
  .hero { grid-template-columns: 1fr; }
  .hero { --alto-foto: 280px; }
  .hero-foto { grid-row: 1; min-height: var(--alto-foto); touch-action: pan-y pinch-zoom; }
  .hero-testo { padding: 80px 7% 44px; }
  .residenze { left: 7%; right: auto; top: var(--alto-foto); max-width: 86%; padding: 12px 16px; transform: translateY(-50%); }
  .residenze .sopra { letter-spacing: .08em; }
  .hero h1 { font-size: 40px; }
  .pila { padding: 16px 0 0; }
  .pannello { margin-bottom: 16px; }
  .intro { grid-template-columns: 1fr; gap: 12px; padding: 32px 7%; }
  .segno { padding: 9px; margin-bottom: 12px; }
  .passo .segno, .percorso .segno, .scheda-guida .segno { top: 12px; right: 12px; }
  .intro h2 { font-size: 30px; }
  .intro p + p { padding-left: 0; border-left: 0; }
  .metodo { padding: 34px 7%; }
  .testa-sezione { display: block; }
  .testa-sezione > p, .testa-sezione > .testa-lato { margin-top: 10px; }
  .passi, .percorsi, .schede { grid-template-columns: 1fr; }
  .caso { grid-template-columns: 1fr; }
  .caso-titolo { border-radius: var(--sc-raggio) var(--sc-raggio) 0 0; }
  .caso-titolo, .caso-testo { padding: 28px 7%; }
  .immobili, .guide { padding: 34px 6%; }
  .chiusura { padding: 34px 6%; }
  .guide { grid-template-columns: 1fr; }
  .chiusura { flex-direction: column; align-items: flex-start; justify-content: center; }
  .piede { flex-direction: column; }
}

/* Telefono, anche in orizzontale (basso e non largo): niente comandi ‹ ‖ › in basso, frecce
   discrete ai bordi dell'immagine, con area di tocco di 44 px */
@media (max-width: 760px), (max-width: 960px) and (max-height: 500px) {
  .comandi:not([hidden]) { display: none; }
  .freccia:not([hidden]) { position: absolute; z-index: 2; top: 50%; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin-top: -22px; padding: 0; border: 0; background: transparent; color: #fff; cursor: pointer; }
  .freccia.indietro { left: 2px; }
  .freccia.avanti { right: 2px; }
  .freccia span { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; border: 1px solid #ffffff80; border-radius: 50%; background: #2d2927b3; font: 600 18px/1 var(--sans); }
  .freccia:focus-visible { outline: 3px solid #fff; outline-offset: -3px; border-radius: 50%; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .scena { transition: none; }
  .js .menu { transition: none; }
}

/* regola per tutte le pagine (Salvo, 19 ottobre 2026): i pannelli si fermano sotto la testata e scorrono insieme
   (pannelli-insieme.js scrive --fermo-insieme: si fermano quando il loro fondo è a metà schermo) */
.pila { --sc-margine-alto: var(--alto-testata); }
.pila.sc-attiva:not(.sc-misura) > [data-sc-scheda]:not(.sc-ultima) { top: var(--fermo-insieme, var(--sc-fermo, var(--sc-margine-alto))); }