/* Elite Immobiliare Lecco — style.css
   Colori misurati sul design del kit (confronta-design.py --colori e campioni sulle fette ingrandite).
   Carattere: Inter (variabile, con l'asse opsz: nei titoli grandi prende il taglio Display), servito dal sito. */

@font-face {
  font-family: "Inter";
  src: url("/assets/fonts/inter-latin-opsz-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  src: url("/assets/fonts/inter-latin-ext-opsz-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* P7: finché Inter non è arrivato (font-display: swap, il 3G) il testo usa Arial misurato come Inter, così quando
   Inter arriva le righe non cambiano e la pagina non salta (CLS). Inter resta il carattere del sito: questi valgono
   solo nei primi istanti e solo dove c'è Arial. Le misure vengono dai file (fontTools: altezze 1984/494 su 2048) e
   da una prova col carattere in ritardo di 1,5 s su 9 pagine a 390 e 4 a 1440: il testo corrente col 109 % (i
   grassetti piccoli sono più larghi del normale), i titoli grandi (700, 24-52 px: Inter vi usa il taglio Display, più
   stretto) con Arial Bold al 96,5 %. Senza: fino a 0,134 di CLS (una scheda a 390); con: al massimo 0,0099. */
@font-face {
  font-family: "Inter Fallback";
  src: local("Arial"), local("ArialMT");
  size-adjust: 109%;
  ascent-override: 88.88%;
  descent-override: 22.13%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Inter Fallback Titoli";
  src: local("Arial Bold"), local("Arial-BoldMT");
  font-weight: 100 900;
  size-adjust: 96.5%;
  ascent-override: 100.39%;
  descent-override: 25%;
  line-gap-override: 0%;
}

:root {
  /* colori del design */
  --blu: #009BFE;            /* pulsanti pieni, pillola attiva, linee */
  --blu-testo: #0A95FD;      /* link con freccia */
  --blu-icona: #0E8FFC;      /* icone del kit */
  --navy: #050B3F;           /* titoli e menu */
  --testo: #4B588A;          /* testi */
  --testo-tenue: #5F6B92;    /* testi piccoli, footer */
  --bianco: #FFFFFF;
  --azzurro: #E5F6FD;        /* riquadro «Vendi con noi» */
  --azzurro-cerchio: #E8F7FE;/* cerchi dei servizi */
  --ricerca: #ECF4FA;        /* riquadro della ricerca */
  --pillola: #EEF3F8;        /* pillole spente */
  --piede: #F1F5F9;          /* footer */
  --bordo: #E8EDF3;          /* schede e riquadri */
  --bordo-campo: #D6E2F0;    /* tendine */
  --divisore: #DDE3ED;       /* linee verticali */
  --bordo-blu: #90D1FC;      /* pulsante a contorno */

  /* misure */
  --larghezza: 1368px;
  --margine: 36px;
  --interno: 24px;
  --raggio: 6px;
  --raggio-scheda: 10px;
  --raggio-riquadro: 12px;
  --altezza-testata: 118px;     /* 3 Step, voce 2: il logo più grande */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  /* movimento (P6.1): le entrate allo scroll in 500 ms, la prima schermata in 600; 20 px di strada, il minimo che si
     vede (09 § 0-bis-2); fra un elemento e l'altro 50 ms, al massimo 250 */
  --durata-entrata: 500ms;
  --durata-prima: 600ms;
  --spostamento-entrata: 20px;
  --font: "Inter", "Inter Fallback", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-titoli: "Inter", "Inter Fallback Titoli", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

/* ── base ─────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  scroll-padding-top: calc(var(--altezza-testata) + 16px);
}
html.menu-aperto { overflow: hidden; }
body {
  margin: 0;
  background: var(--bianco);
  color: var(--testo);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.55;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
img, picture, svg { display: block; max-width: 100%; height: auto; }
[hidden] { display: none !important; }
h1, h2, h3, p, ul, ol, figure { margin: 0; }
ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
a, button, select, label { touch-action: manipulation; }
:focus-visible { outline: 3px solid var(--blu); outline-offset: 3px; border-radius: 4px; }

.salta {
  position: absolute; left: 16px; top: 12px; z-index: 100;
  background: var(--navy); color: var(--bianco); padding: 10px 16px; border-radius: var(--raggio);
  transform: translateY(-80px);
  transition: transform .2s var(--ease-out);
}
.salta:focus { transform: none; }

.solo-largo { display: none; }
@media (min-width: 1100px) { .solo-largo { display: inline; } }

/* ── contenitori ──────────────────────────────────────────────────────── */
.contenitore {
  width: 100%;
  max-width: calc(var(--larghezza) + 2 * var(--margine));
  margin-inline: auto;
  padding-inline: max(var(--margine), env(safe-area-inset-left, 0px)) max(var(--margine), env(safe-area-inset-right, 0px));
}
.contenitore--interno {
  max-width: calc(var(--larghezza) + 2 * var(--margine));
  padding-inline: calc(var(--margine) + var(--interno));
}

.riquadro { border-radius: var(--raggio-riquadro); }
.riquadro--azzurro { background: var(--azzurro); }
.riquadro--bianco { background: var(--bianco); }
.riquadro--bordo { background: var(--bianco); border: 1px solid var(--bordo); }

/* ── testi ricorrenti ─────────────────────────────────────────────────── */
.occhiello {
  font-size: 14px;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--testo);
  margin-bottom: 12px;
}
.occhiello--tenue { color: var(--testo-tenue); }

.titolo-sezione {
  color: var(--navy);
  font-size: clamp(28px, 2.4vw + 6px, 40px);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
}
.titolo-sezione--grande { font-size: clamp(28px, 2.6vw + 7px, 44px); }

.testo-grande { font-size: clamp(16px, .6vw + 11px, 20px); line-height: 1.55; }
.testo-medio { font-size: clamp(16px, .3vw + 13px, 18px); line-height: 1.6; }

/* link con freccia (icona del kit) */
.link-freccia {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--blu-testo);
  font-weight: 500;
  font-size: 17px;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
}
.link-freccia::after {
  content: "";
  flex: none;
  width: 18px; height: 18px;
  background: currentColor;
  -webkit-mask: url("/assets/img/icone/icona-freccia-destra.png") center / contain no-repeat;
  mask: url("/assets/img/icone/icona-freccia-destra.png") center / contain no-repeat;
  transition: transform .25s var(--ease-out);
}
.link-freccia--tenue { color: var(--testo); text-decoration: none; font-weight: 400; font-size: 15px; }
@media (hover: hover) and (pointer: fine) {
  a.link-freccia:hover::after, .scheda-immobile:hover .link-freccia::after { transform: translateX(4px); }
  a.link-freccia:hover { text-decoration-thickness: 2px; }
}

/* icone del kit, colorate come nel design */
.icona {
  display: inline-block;
  flex: none;
  width: 1em; height: 1em;
  background: currentColor;
  -webkit-mask: var(--i) center / contain no-repeat;
  mask: var(--i) center / contain no-repeat;
}
.icona--casa { --i: url("/assets/img/icone/icona-casa.png"); }
.icona--villa { --i: url("/assets/img/icone/icona-villa.png"); }
.icona--negozio { --i: url("/assets/img/icone/icona-negozio.png"); }
.icona--capannone { --i: url("/assets/img/icone/icona-capannone.png"); }
.icona--terreno { --i: url("/assets/img/icone/icona-terreno.png"); }
.icona--ufficio { --i: url("/assets/img/icone/icona-ufficio.png"); }
.icona--valutazioni { --i: url("/assets/img/icone/icona-valutazioni.png"); }
.icona--persone { --i: url("/assets/img/icone/icona-persone.png"); }
.icona--ristrutturazioni { --i: url("/assets/img/icone/icona-ristrutturazioni.png"); }
.icona--consulenza-tecnica { --i: url("/assets/img/icone/icona-consulenza-tecnica.png"); }
.icona--assistenza-legale { --i: url("/assets/img/icone/icona-assistenza-legale.png"); }
.icona--investimenti { --i: url("/assets/img/icone/icona-investimenti.png"); }
.icona--posizione { --i: url("/assets/img/icone/icona-posizione.png"); }
.icona--ricerca { --i: url("/assets/img/icone/icona-ricerca.png"); }
.icona--cuore { --i: url("/assets/img/icone/icona-cuore-bianco.png"); }
.icona--freccia-esterna { --i: url("/assets/img/icone/icona-freccia-esterna.png"); }

/* ── pulsanti ─────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 50px;
  padding: 12px 28px;
  border-radius: var(--raggio);
  border: 1px solid transparent;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease, transform .16s var(--ease-out), box-shadow .2s ease;
}
.btn:active { transform: scale(0.97); }
.btn--pieno { background: var(--blu); color: var(--bianco); }
.btn--contorno { background: var(--bianco); color: var(--blu-testo); border-color: var(--bordo-blu); }
.btn--largo { width: 100%; }
@media (hover: hover) and (pointer: fine) {
  .btn--pieno:hover { background: #0A8BEB; box-shadow: 0 8px 20px -10px rgba(0, 155, 254, .7); }
  .btn--contorno:hover { border-color: var(--blu); }
}

/* ── tendine e campi ──────────────────────────────────────────────────── */
.campo { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.campo label { font-size: 15px; font-weight: 500; color: var(--navy); }
.campo :is(input, select, textarea) { scroll-margin-top: 40px; }   /* col fuoco su un campo sbagliato, si vede anche la sua etichetta */
.selezione { position: relative; }
.selezione select {
  width: 100%;
  height: 52px;
  padding: 0 46px 0 16px;
  border: 1px solid var(--bordo-campo);
  border-radius: var(--raggio);
  background: var(--bianco);
  color: var(--testo);
  font-size: 16px;
  -webkit-appearance: none; appearance: none;
  cursor: pointer;
  text-overflow: ellipsis;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.selezione::after {
  content: "";
  position: absolute; right: 16px; top: 50%;
  width: 16px; height: 16px; margin-top: -8px;
  background: var(--navy);
  -webkit-mask: url("/assets/img/icone/icona-chevron-giu.png") center / contain no-repeat;
  mask: url("/assets/img/icone/icona-chevron-giu.png") center / contain no-repeat;
  pointer-events: none;
}
.selezione select:focus-visible { outline: none; border-color: var(--blu); box-shadow: 0 0 0 3px rgba(0, 155, 254, .25); }
@media (hover: hover) and (pointer: fine) { .selezione select:hover { border-color: #A9C6E4; } }

/* ── testata ──────────────────────────────────────────────────────────── */
.testata {
  position: sticky; top: 0; z-index: 50;
  background: var(--bianco);
  border-bottom: 1px solid var(--bordo);
  padding-top: env(safe-area-inset-top, 0px);
  transition: box-shadow .25s ease;
}
.testata.scorrendo { box-shadow: 0 6px 24px -14px rgba(5, 11, 63, .35); }
.testata__riga {
  display: flex;
  align-items: center;
  height: var(--altezza-testata);
  padding-inline: calc(var(--margine) + 2px) calc(var(--margine) + 14px);
}
.logo { display: block; flex: none; }
.logo img { height: 90px; width: auto; }   /* 3 Step, voce 2 (prima 76): «aumentare la grandezza del logo principale» */

.menu { display: flex; align-items: center; margin-left: auto; }
.menu__voci { display: flex; gap: 30px; list-style: none; margin: 0; padding: 0; }   /* 3 Step: 6 voci col logo più grande (prima 36) */
.menu__voci a {
  position: relative;
  display: inline-block;
  padding: 8px 0;
  color: var(--navy);
  font-size: 16px;
  font-weight: 500;
  white-space: nowrap;
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
}
.menu__voci a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 2px;
  background: var(--blu); transform: scaleX(0); transform-origin: left;
  transition: transform .25s var(--ease-out);
}
.menu__voci a:active { color: var(--blu-testo); }
@media (hover: hover) and (pointer: fine) { .menu__voci a:hover::after { transform: scaleX(1); } }
.menu__cta { margin-left: 48px; min-width: 133px; min-height: 51px; }

.hamburger {
  display: none;
  margin-left: auto;
  width: 48px; height: 48px;
  border: 0; border-radius: var(--raggio);
  background: transparent;
  position: relative;
  -webkit-user-select: none; user-select: none;
}
.hamburger:active { background: var(--pillola); }
.hamburger__righe, .hamburger__righe::before, .hamburger__righe::after {
  position: absolute; left: 12px; width: 24px; height: 2px; border-radius: 2px;
  background: var(--navy);
  transition: transform .25s var(--ease-out), opacity .2s ease;
}
.hamburger__righe { top: 23px; }
.hamburger__righe::before, .hamburger__righe::after { content: ""; left: 0; }
.hamburger__righe::before { transform: translateY(-7px); }
.hamburger__righe::after { transform: translateY(7px); }
.hamburger[aria-expanded="true"] .hamburger__righe { background: transparent; }
.hamburger[aria-expanded="true"] .hamburger__righe::before { transform: rotate(45deg); background: var(--navy); }
.hamburger[aria-expanded="true"] .hamburger__righe::after { transform: rotate(-45deg); background: var(--navy); }

/* ── hero ─────────────────────────────────────────────────────────────── */
/* 3 Step, voce 1 (vocale del 23/10: «Sulla foto non ci devono essere scritte … Deve essere una foto intera, unica»): in
   alto solo la foto, da bordo a bordo, senza velo e senza scritte: da 700 px la larga 2.4:1, da telefono la verticale
   4:5, tutte e due intere. Il titolo della pagina resta per Google e per i lettori di schermo, nascosto (.vh) */
.hero { position: relative; overflow: hidden; background: var(--ricerca); }
.hero__media { width: 100%; margin: 0; aspect-ratio: 2.4 / 1; max-height: calc(100svh - var(--altezza-testata) - 96px); }
.hero__media picture { display: block; height: 100%; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: 100% 35%; }   /* se manca l'altezza, si taglia il lago: le due case restano intere */

/* 3 Step, voce 3: lo slogan del cliente, sotto la foto, come sulla sua cartelletta (maiuscole con le grazie e il
   corsivo). Le grazie sono quelle di sistema (Didot sui Mac e sugli iPhone, come il logo; altrove Georgia): nessun
   carattere in più da scaricare */
.slogan {
  margin: 0;
  padding: 30px var(--margine) 0;
  text-align: center;
  color: var(--navy);
  font-family: "Didot", "Bodoni 72", "Bodoni MT", Georgia, "Times New Roman", serif;
  line-height: 1.25;
  text-wrap: balance;
  animation: entra-su var(--durata-prima) var(--ease-out) 90ms both;
}
.slogan__dritto { font-size: clamp(15px, .5vw + 12px, 19px); letter-spacing: .16em; text-transform: uppercase; }
.slogan__corsivo { font-size: clamp(23px, 1vw + 16px, 31px); font-style: italic; color: var(--blu); white-space: nowrap; }
.slogan + .ricerca-sezione { margin-top: 26px; }

/* 3 Step, voce 4b: /nuove-costruzioni, un riquadro per cantiere: il comune e la via sopra, a destra quanti immobili,
   sotto le schede di /immobili */
.cantieri { padding-top: 8px; }
.cantieri__nota { margin: 0 0 28px; color: var(--testo); font-size: 17px; }
.richiesta__tel-fisso { margin-top: 10px; }
/* 3 Step, voce 6: lo stemma FIMAA nel footer, sotto la frase dell'agenzia */
.piede__associato { display: block; margin-top: 18px; }
.piede__associato img { display: block; width: 50px; height: auto; }   /* 3 Step, voce 12: il fisso sotto il telefono grande */
.cantiere + .cantiere { margin-top: var(--passo-sezione); }
.cantiere__testa { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 24px; padding-bottom: 14px; margin-bottom: 22px; border-bottom: 1px solid var(--bordo); }
.cantiere__titolo { margin: 0; color: var(--navy); font-family: var(--font-titoli); font-size: clamp(24px, 1vw + 16px, 30px); font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; }
.cantiere__dove { display: block; margin-top: 4px; color: var(--testo); font-family: var(--font); font-size: 17px; font-weight: 400; letter-spacing: 0; }
.cantiere__conto { margin: 0; color: var(--testo-tenue); font-size: 15px; }
.didascalia {
  display: flex; align-items: center; gap: 20px;
  margin-top: 16px;
  font-size: 17px;
  color: var(--testo);
}
.didascalia::before { content: ""; flex: none; width: 66px; height: 3px; border-radius: 2px; background: var(--blu); }

/* ── ricerca ──────────────────────────────────────────────────────────── */
.ricerca-sezione { margin-top: 44px; }
.ricerca {
  background: var(--ricerca);
  padding: 0 var(--interno) 26px;
  box-shadow: 0 1px 0 rgba(5, 11, 63, .03);
}
.ricerca__testa {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  border-bottom: 1px solid #DCE6F0;
  margin-bottom: 22px;
}
.ricerca__schede { display: flex; gap: 8px; }
.ricerca__scheda {
  position: relative;
  border: 0; background: transparent;
  min-height: 68px;
  padding: 10px 26px 8px;
  color: var(--navy);
  font-size: 17px; font-weight: 400;
  -webkit-user-select: none; user-select: none;
  transition: color .2s ease;
}
.ricerca__scheda::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; border-radius: 2px;
  background: var(--blu); transform: scaleX(0);
  transition: transform .3s var(--ease-out);
}
.ricerca__scheda[aria-pressed="true"] { font-weight: 600; }
.ricerca__scheda[aria-pressed="true"]::after { transform: scaleX(1); }
.ricerca__scheda:active { color: var(--blu-testo); }
.ricerca__avanzata { padding: 12px 0; }
.ricerca__campi {
  display: grid;
  grid-template-columns: 1.25fr 1.25fr 1fr 0.8fr;
  gap: 18px;
  align-items: end;
}
.btn--cerca { min-height: 83px; font-size: 17px; padding-inline: 20px; }
.btn--cerca .icona { width: 22px; height: 22px; }

/* ── sezioni ──────────────────────────────────────────────────────────── */
.sezione { padding-top: var(--passo-sezione); }
.sezione__testa {
  display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap;
  margin-bottom: 24px;
}
.sezione__azioni { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; }

.pillole { display: flex; gap: 12px; }
.pillola {
  display: inline-flex; align-items: center;
  min-height: 36px; padding: 6px 18px;
  border-radius: 999px;
  background: var(--pillola);
  color: var(--testo);
  font-size: 15px;
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
  transition: background-color .2s ease, color .2s ease, transform .16s var(--ease-out);
}
.pillola[aria-current] { background: var(--blu); color: var(--bianco); font-weight: 500; }
.pillola:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) { .pillola:not([aria-current]):hover { background: #E2EBF4; color: var(--navy); } }

/* schede degli immobili (riusabili nella pagina Immobili) */
.schede-immobili {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}
.scheda-immobile {
  position: relative;
  height: 100%;
  display: flex; flex-direction: column;
  background: var(--bianco);
  border: 1px solid var(--bordo);
  border-radius: var(--raggio-scheda);
  overflow: hidden;
  transition: box-shadow .3s ease, transform .16s var(--ease-out), border-color .3s ease;
}
/* al tocco si stringe appena, ma con 60 ms di attesa in entrata: chi fa scorrere la riga col dito non lo vede */
.scheda-immobile:active { transform: scale(0.985); transition-delay: 0s, 60ms, 0s; }
@media (hover: hover) and (pointer: fine) {
  .scheda-immobile:hover { box-shadow: 0 18px 40px -24px rgba(5, 11, 63, .35); border-color: #D9E3EE; }
  .scheda-immobile:hover .scheda-immobile__foto img { transform: scale(1.05); }
}
.scheda-immobile__foto { position: relative; overflow: hidden; background: var(--ricerca); }
.scheda-immobile__foto img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; transition: transform .6s var(--ease-out); }
.etichetta {
  position: absolute; top: 16px; left: 16px;
  padding: 5px 14px;
  border-radius: 999px;
  background: var(--bianco);
  color: var(--navy);
  font-size: 13px; font-weight: 500;
}
.cuore {
  position: absolute; top: 10px; right: 10px; z-index: 2;
  width: 44px; height: 44px;
  border: 0; border-radius: 50%;
  background: transparent;
  color: var(--bianco);
  display: grid; place-items: center;
  -webkit-user-select: none; user-select: none;
  transition: background-color .2s ease, color .2s ease, transform .16s var(--ease-out);
}
.cuore::before {
  content: ""; width: 26px; height: 26px;
  background: currentColor;
  -webkit-mask: url("/assets/img/icone/icona-cuore-bianco.png") center / contain no-repeat;
  mask: url("/assets/img/icone/icona-cuore-bianco.png") center / contain no-repeat;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .25));
}
.cuore:active { transform: scale(0.95); }
.cuore[aria-pressed="true"] { background: var(--bianco); color: var(--blu); }
.cuore[aria-pressed="true"]::before { filter: none; }
.scheda-immobile__corpo { padding: 18px 24px 22px; display: flex; flex-direction: column; gap: 6px; }
.luogo { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--testo-tenue); }
.luogo .icona { width: 16px; height: 16px; color: var(--blu-icona); }
.scheda-immobile__titolo { color: var(--navy); font-size: clamp(20px, .6vw + 15px, 24px); font-weight: 600; line-height: 1.25; letter-spacing: -0.015em; margin-bottom: 4px; }
.scheda-immobile__link::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.scheda-immobile__link:focus-visible { outline: none; }
.scheda-immobile:has(.scheda-immobile__link:focus-visible) { outline: 3px solid var(--blu); outline-offset: 3px; }
.scheda-immobile .link-freccia { font-size: 16px; align-self: flex-start; }

/* tipologie */
.tipologie {
  display: flex;
  margin-top: 26px;
}
.tipologie li { flex: 1 1 auto; display: flex; justify-content: center; border-left: 1px solid var(--divisore); }
.tipologie li:first-child { border-left: 0; }
.tipologia {
  display: inline-flex; align-items: center; gap: 18px;
  min-height: 60px; padding: 8px 26px;
  border-radius: var(--raggio);
  color: var(--testo);
  font-size: 17px; font-weight: 500;
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
  transition: background-color .2s ease, color .2s ease, transform .16s var(--ease-out);
}
.tipologia .icona { width: 32px; height: 32px; color: var(--blu-icona); }
/* 3 Step, voce 4d: con la sesta tipologia («Nuove costruzioni») la riga a 1100-1279 px usciva dallo schermo */
@media (min-width: 1100px) and (max-width: 1279px) { .tipologia { padding-inline: 14px; gap: 12px; } }
.tipologia:active { transform: scale(0.97); }
.tipologia .icona { transition: transform .25s var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .tipologia:hover { background: var(--ricerca); color: var(--navy); }
  .tipologia:hover .icona { transform: translateY(-3px); }
}

/* vendi con noi */
.vendi { padding-top: 38px; }
.vendi__box {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 384px;
  gap: 28px;
  padding: 24px 24px 24px 45px;
}
.vendi__testo { padding: 22px 0 14px; }
.vendi__testo .titolo-sezione { margin-bottom: 14px; }
.passi { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 40px; }
.passo { padding: 0 18px 0 22px; border-left: 1px solid #CFE3F0; }
.passo:first-child { padding-left: 0; border-left: 0; }
.passo__icona { width: 42px; height: 42px; color: var(--blu-icona); margin-bottom: 18px; }
.passo__titolo { color: var(--navy); font-size: 21px; font-weight: 700; letter-spacing: -0.015em; margin-bottom: 6px; }
.passo p { font-size: 15.5px; line-height: 1.55; }

.modulo-valutazione {
  display: flex; flex-direction: column; gap: 14px;
  padding: 32px 30px 24px;
  box-shadow: 0 12px 34px -26px rgba(5, 11, 63, .35);
}
.modulo-valutazione__titolo { color: var(--navy); font-size: 25px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; }
.modulo-valutazione__sotto { font-size: 16px; margin-top: -8px; margin-bottom: 6px; }
.modulo-valutazione .btn { margin-top: 6px; min-height: 52px; }

/* commerciale */
.commerciale { padding-top: 31px; }
.commerciale__griglia {
  display: grid;
  grid-template-columns: minmax(0, 690fr) minmax(0, 574fr);
  gap: 52px;
  align-items: start;
}
.commerciale__foto { border-radius: var(--raggio-scheda); overflow: hidden; background: var(--ricerca); }
.commerciale__foto img { width: 100%; aspect-ratio: 1.95 / 1; object-fit: cover; }
.commerciale__testo { padding-top: 4px; }
.commerciale__testo .titolo-sezione { margin-bottom: 10px; }
.bottoni-tipo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 14px; margin: 24px 0 26px; }
.btn-tipo {
  display: flex; align-items: center; gap: 16px;
  min-height: 56px; padding: 8px 20px;
  border: 1px solid var(--bordo);
  border-radius: var(--raggio);
  background: var(--bianco);
  color: var(--blu-testo);
  font-size: 17px; font-weight: 500;
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
  transition: border-color .2s ease, background-color .2s ease, transform .16s var(--ease-out);
}
.btn-tipo .icona { width: 28px; height: 28px; color: var(--blu-icona); }
.btn-tipo::after {
  content: ""; width: 16px; height: 16px; flex: none;
  background: currentColor;
  -webkit-mask: url("/assets/img/icone/icona-freccia-destra.png") center / contain no-repeat;
  mask: url("/assets/img/icone/icona-freccia-destra.png") center / contain no-repeat;
  transition: transform .25s var(--ease-out);
}
.btn-tipo:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) {
  .btn-tipo:hover { border-color: var(--bordo-blu); background: #F7FBFE; }
  .btn-tipo:hover::after { transform: translateX(4px); }
}

/* servizi */
.servizi { padding-top: 46px; }
.servizi .titolo-sezione { margin-bottom: 30px; }
.servizi__griglia { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 30px; }
.servizio { display: flex; gap: 20px; align-items: flex-start; padding: 0 18px 0 22px; border-left: 1px solid var(--divisore); }
.servizio:nth-child(3n + 1) { padding-left: 0; border-left: 0; }
.cerchio {
  flex: none;
  width: 64px; height: 64px; border-radius: 50%;
  background: var(--azzurro-cerchio);
  display: grid; place-items: center;
  color: var(--blu-icona);
}
.cerchio .icona { width: 30px; height: 30px; }
.servizio__titolo { color: var(--navy); font-size: 18px; font-weight: 600; letter-spacing: -0.01em; margin: 4px 0 6px; }
.servizio p { font-size: 15px; line-height: 1.55; }

/* agenzia */
.agenzia { padding-top: 36px; padding-bottom: 16px; }
.agenzia__box {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 470px);
  padding: 30px 42px 32px;
}
.agenzia__testo { padding-right: 40px; border-right: 1px solid var(--bordo); }
.agenzia__titolo { margin-bottom: 18px; }
.agenzia__titolo-leggero { display: block; font-weight: 400; letter-spacing: -0.025em; }
.agenzia__cta { padding: 16px 0 0 46px; }
.agenzia__cta-titolo { color: var(--navy); font-size: 22px; font-weight: 700; letter-spacing: -0.02em; margin-bottom: 8px; }
.agenzia__cta p { font-size: 15.5px; }
.agenzia__bottoni { display: flex; gap: 12px; margin-top: 24px; }
.agenzia__bottoni .btn { flex: 1 1 0; min-height: 52px; padding-inline: 16px; }

/* ── footer ───────────────────────────────────────────────────────────── */
.piede { background: var(--piede); margin-top: 22px; padding: 40px 0 24px; padding-bottom: calc(28px + env(safe-area-inset-bottom, 0px)); }
.piede__griglia {
  display: grid;
  grid-template-columns: minmax(0, 440px) repeat(3, minmax(0, 1fr)) minmax(0, 1.4fr);
  gap: 0;
}
.logo--piede { align-self: start; margin-top: 6px; }
.logo--piede img { height: 70px; }
.piede__colonna { padding: 0 24px; border-left: 1px solid #DCE4EC; }
.piede__colonna:nth-child(2) { border-left: 0; }
.piede__titolo { color: var(--navy); font-size: 16px; font-weight: 600; margin-bottom: 14px; }
.piede__colonna ul { display: flex; flex-direction: column; gap: 6px; }
.piede__colonna a, .piede__colonna p { font-size: 15px; color: var(--testo-tenue); line-height: 1.55; }
.piede__colonna ul a { display: inline-block; padding: 2px 0; -webkit-user-select: none; user-select: none; }
.piede__colonna a:active { color: var(--blu-testo); }
@media (hover: hover) and (pointer: fine) { .piede a:hover { color: var(--blu-testo); } }
.piede__contatti { margin-top: 12px; }
.piede__contatti a { font-weight: 500; color: var(--navy); }
.piede__fondo {
  display: flex; justify-content: space-between; align-items: flex-end; gap: 16px 32px; flex-wrap: wrap;
  margin-top: 32px; padding-top: 20px;
  border-top: 1px solid #E0E8F0;
  font-size: 15px; color: var(--testo-tenue);
}
.piede__legale { font-size: 13px; margin-top: 4px; }
.piede__legali { display: flex; }
.piede__legali a { padding: 4px 16px; border-left: 1px solid var(--divisore); color: var(--testo-tenue); }
.piede__legali a:first-child { border-left: 0; }
.credit { margin-top: 18px; font-size: 13px; color: var(--testo-tenue); }
.credit a { text-decoration: underline; text-underline-offset: 3px; }

/* ── pagine semplici (legali, 404) ────────────────────────────────────── */
.pagina { padding: 56px 0 72px; }
.pagina .contenitore--interno { max-width: calc(860px + 2 * (var(--margine) + var(--interno))); }
.legale h1, .pagina h1 { color: var(--navy); font-size: clamp(32px, 2vw + 20px, 44px); font-weight: 700; letter-spacing: -0.03em; line-height: 1.1; margin-bottom: 12px; }
.legale h2 { color: var(--navy); font-size: 22px; font-weight: 700; letter-spacing: -0.015em; margin: 36px 0 10px; }
.legale h3 { color: var(--navy); font-size: 18px; font-weight: 600; margin: 24px 0 8px; }
.legale p, .legale li { font-size: 16px; line-height: 1.65; }
.legale p + p { margin-top: 10px; }
.legale ul, .legale ol { padding-left: 22px; margin: 10px 0; }
.legale li + li { margin-top: 6px; }
.legale a:not(.btn) { color: var(--blu-testo); text-decoration: underline; text-underline-offset: 3px; word-break: break-word; }
.legale table { width: 100%; border-collapse: collapse; margin: 16px 0; font-size: 15px; display: block; overflow-x: auto; }
.legale th, .legale td { text-align: left; vertical-align: top; padding: 10px 12px; border-bottom: 1px solid var(--bordo); }
.legale th { color: var(--navy); font-weight: 600; background: var(--ricerca); }
.pagina__azioni { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }

/* ════════════════════════════════════════════════════════════════════════
   computer piccolo (1100-1439 px): stesso impaginato, più stretto (3 Step: sotto i 1366 px il menu a tendina)
   ════════════════════════════════════════════════════════════════════════ */
/* Domenico, 26/10/2026: «Lavora con noi» nel menu, sei voci coi nomi più lunghi («Cerca un immobile», «Valuta il tuo
   immobile»): in una riga col logo e il pulsante non entrano più. Da computer la testata ha due righe: sopra il logo e
   «Richiedi informazioni», sotto le sei voci, in centro (il menu a tendina resta sotto i 1100 px) */
@media (min-width: 1100px) {
  :root { --riga-logo: 118px; --riga-menu: 54px; --altezza-testata: calc(var(--riga-logo) + var(--riga-menu)); }
  .testata__riga { position: relative; flex-wrap: wrap; height: auto; }
  .logo { display: flex; align-items: center; height: var(--riga-logo); }
  .menu { flex: 1 0 100%; justify-content: center; height: var(--riga-menu); margin-left: 0; border-top: 1px solid var(--bordo); }
  .menu__voci { gap: 52px; }
  .menu__cta { position: absolute; top: calc((var(--riga-logo) - 51px) / 2); right: calc(var(--margine) + 14px); margin-left: 0; }
}
@media (min-width: 1100px) and (max-width: 1279px) {
  .vendi__box { grid-template-columns: minmax(0, 1fr) 340px; }
}

/* 3 Step: il menu a tendina sotto i 1366 px; dal 26/10/2026, con le due righe da computer, solo sotto i 1100 px */
@media (max-width: 1099px) {
  :root { --altezza-testata: 104px; }
  .logo img { height: 80px; }
  .hamburger { display: block; }
  .menu {
    position: fixed; z-index: 49;
    top: calc(var(--altezza-testata) + env(safe-area-inset-top, 0px)); left: 0; right: 0;
    height: calc(100dvh - var(--altezza-testata) - env(safe-area-inset-top, 0px));
    flex-direction: column; align-items: stretch; justify-content: flex-start;
    margin: 0;
    padding: 20px max(24px, env(safe-area-inset-right, 0px)) calc(32px + env(safe-area-inset-bottom, 0px)) max(24px, env(safe-area-inset-left, 0px));
    background: var(--bianco);
    border-top: 1px solid var(--bordo);
    overflow-y: auto; overscroll-behavior: contain;
    opacity: 0; visibility: hidden; transform: translateY(-8px);
    transition: opacity .2s ease, transform .25s var(--ease-out), visibility 0s linear .25s;
  }
  .menu.aperto { opacity: 1; visibility: visible; transform: none; transition: opacity .25s ease, transform .3s var(--ease-out), visibility 0s; }
  .menu__voci { flex-direction: column; gap: 0; }
  .menu__voci li { border-bottom: 1px solid var(--bordo); }
  .menu__voci a { display: block; padding: 16px 2px; font-size: 20px; }
  .menu__voci a::after { display: none; }
  .menu__cta { margin: 28px 0 0; min-height: 54px; font-size: 17px; }

  .testata__riga { padding-inline: max(var(--margine), env(safe-area-inset-left, 0px)) max(14px, env(safe-area-inset-right, 0px)); }
}

/* ════════════════════════════════════════════════════════════════════════
   tablet (sotto i 1100 px)
   ════════════════════════════════════════════════════════════════════════ */
@media (max-width: 1099px) {
  :root { --margine: 24px; --interno: 0px; --altezza-testata: 88px; }

  .logo img { height: 66px; }

  .didascalia { padding-inline: max(var(--margine), env(safe-area-inset-left, 0px)); font-size: 15px; gap: 14px; }
  .didascalia::before { width: 44px; }

  .ricerca-sezione { margin-top: 32px; }
  .ricerca { padding: 0 20px 22px; }
  .ricerca__campi { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .btn--cerca { grid-column: 1 / -1; min-height: 56px; margin-top: 4px; }

  .schede-immobili { gap: 14px; }
  .scheda-immobile__corpo { padding: 16px 18px 20px; }
  ul.tipologie {
    display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
    margin-inline: calc(-1 * var(--margine)); padding-inline: var(--margine); scroll-padding-inline: var(--margine);
  }
  .tipologie::-webkit-scrollbar { display: none; }
  .tipologie li, .tipologie li:first-child, .tipologie li:last-child { flex: none; justify-content: flex-start; scroll-snap-align: start; }
  .tipologia { padding-inline: 18px; white-space: nowrap; }

  .vendi__box { grid-template-columns: 1fr; padding: 28px 20px 20px; gap: 28px; }
  .vendi__testo { padding: 0; }
  .passi { margin-top: 28px; }

  .commerciale__griglia { grid-template-columns: 1fr; gap: 28px; }

  .servizi__griglia { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 28px; }
  .servizio, .servizio:nth-child(3n + 1) { padding: 0 20px; border-left: 1px solid var(--divisore); }
  .servizio:nth-child(2n + 1) { padding-left: 0; border-left: 0; }

  .agenzia__box { grid-template-columns: 1fr; padding: 28px 24px; }
  .agenzia__testo { padding: 0 0 26px; border-right: 0; border-bottom: 1px solid var(--bordo); }
  .agenzia__cta { padding: 26px 0 0; }

  .piede__griglia { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 32px; }
  .logo--piede { grid-column: 1 / -1; }
  .logo--piede img { height: 58px; }
  .piede__colonna:nth-child(2) { padding-left: 0; }
  .piede__colonna--testo { grid-column: 1 / -1; padding: 0; border-left: 0; }
}

/* ════════════════════════════════════════════════════════════════════════
   telefono (sotto i 700 px)
   ════════════════════════════════════════════════════════════════════════ */
@media (max-width: 699px) {
  :root { --margine: 20px; --altezza-testata: 80px; }

  .logo img { height: min(60px, calc((100vw - 92px) * .2128)); }   /* il più grande che sta accanto al menu */

  /* 3 Step, voce 1: da telefono la foto verticale 4:5, intera */
  .hero__media { aspect-ratio: 4 / 5; max-height: none; }
  .slogan { padding-top: 22px; }
  .slogan__dritto, .slogan__corsivo { display: block; }
  .slogan + .ricerca-sezione { margin-top: 20px; }
  .occhiello { font-size: 13px; margin-bottom: 10px; }
  .link-freccia { font-size: 16px; min-height: 44px; }

  .ricerca { display: flex; flex-direction: column; }
  .ricerca__testa { display: contents; }
  .ricerca__schede { order: 1; gap: 0; border-bottom: 1px solid #DCE6F0; margin-bottom: 18px; }
  .ricerca__scheda { flex: 1 1 0; min-height: 56px; padding-inline: 8px; font-size: 16px; white-space: nowrap; }
  .ricerca__campi { order: 2; grid-template-columns: 1fr; gap: 14px; }
  .ricerca__avanzata { order: 3; align-self: center; margin-top: 10px; padding: 8px 0; min-height: 44px; }
  .campo label { font-size: 14px; }
  .selezione select { height: 50px; padding: 0 36px 0 12px; }
  .selezione::after { right: 12px; width: 14px; height: 14px; margin-top: -7px; }

  .sezione__testa { margin-bottom: 18px; gap: 14px; }
  .sezione__azioni { width: 100%; justify-content: space-between; gap: 12px; }
  .pillole { gap: 8px; }
  .pillola { padding-inline: 14px; font-size: 14px; }

  /* le schede scorrono in una riga, col bordo della successiva in vista */
  ul.schede-immobili {
    display: flex; gap: 14px;
    overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
    margin-inline: calc(-1 * var(--margine)); padding: 2px var(--margine) 6px; scroll-padding-inline: var(--margine);
  }
  .schede-immobili::-webkit-scrollbar { display: none; }
  .schede-immobili li { flex: 0 0 82%; scroll-snap-align: start; }
  .scheda-immobile__corpo { padding: 14px 18px 18px; }

  .tipologie { margin-top: 18px; }
  .tipologia { min-height: 52px; gap: 12px; font-size: 16px; padding-inline: 14px; }
  .tipologia .icona { width: 26px; height: 26px; }

  .vendi { padding-top: 40px; }
  .vendi__box { padding: 26px 16px 16px; border-radius: var(--raggio-scheda); }
  .vendi__testo { padding-inline: 4px; }
  .passi { grid-template-columns: 1fr; gap: 18px; }
  .passo, .passo:first-child {
    display: grid; grid-template-columns: 40px 1fr; column-gap: 16px;
    padding: 0; border-left: 0;
  }
  .passo__icona { width: 34px; height: 34px; margin: 2px 0 0; grid-row: span 2; }
  .passo__titolo { font-size: 18px; margin-bottom: 2px; }
  .passo p { font-size: 15px; }
  .modulo-valutazione { padding: 24px 18px 20px; }
  .modulo-valutazione__titolo { font-size: 22px; }

  .commerciale { padding-top: 40px; }
  .commerciale__foto img { aspect-ratio: 16 / 10; }
  .bottoni-tipo { gap: 10px; margin: 20px 0 22px; }
  .btn-tipo { gap: 10px; padding: 8px 12px; min-height: 54px; font-size: 16px; }
  .btn-tipo .icona { width: 22px; height: 22px; }
  .btn-tipo::after { margin-left: auto; width: 14px; height: 14px; }

  .servizi .titolo-sezione { margin-bottom: 24px; }
  .servizi__griglia { grid-template-columns: 1fr; row-gap: 22px; }
  .servizio, .servizio:nth-child(3n + 1), .servizio:nth-child(2n + 1) { padding: 0; border-left: 0; gap: 16px; }
  .cerchio { width: 54px; height: 54px; }
  .cerchio .icona { width: 26px; height: 26px; }
  .servizio__titolo { font-size: 17px; margin-top: 2px; }
  .servizio p { font-size: 15px; }

  .agenzia { padding-top: 40px; }
  .agenzia__box { padding: 24px 18px; border-radius: var(--raggio-scheda); }
  .agenzia__titolo { font-size: 27px; }
  .agenzia__titolo-leggero { font-size: 24px; margin-top: 4px; }
  .agenzia .testo-medio { font-size: 15.5px; }
  .agenzia__cta-titolo { font-size: 20px; }
  .agenzia__bottoni { flex-direction: column; gap: 10px; }

  .piede { padding-top: 36px; }
  .piede__griglia { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 28px; }
  .logo--piede img { height: 50px; }
  .piede__colonna, .piede__colonna:nth-child(2) { padding: 0 0 0 16px; border-left: 1px solid #DCE4EC; }
  .piede__colonna:nth-child(2n) { padding-left: 0; border-left: 0; }
  .piede__colonna--testo { padding: 0; border-left: 0; }
  .piede__fondo { flex-direction: column; align-items: flex-start; margin-top: 32px; font-size: 14px; }
  .piede__legali { margin-left: -16px; flex-wrap: wrap; }
  .piede__legali a { padding: 10px 16px; }
}
}


/* riga del modello sotto i moduli */
.thk-avviso-modulo { font-size: 12.5px; line-height: 1.5; color: var(--testo-tenue); margin-top: -2px; }
.thk-avviso-modulo a { color: var(--blu-testo); text-decoration: underline; text-underline-offset: 2px; }

/* ════════════════════════════════════════════════════════════════════════
   SEZIONI DEL COPY (step 6) — con le forme del design: pillole, passi con icona,
   riquadri, schede, cerchi, pulsanti. Riusabili nelle pagine interne.
   ════════════════════════════════════════════════════════════════════════ */
.vh {
  position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.hamburger[aria-expanded="false"] .hamburger__chiudi,
.hamburger[aria-expanded="true"] .hamburger__apri { display: none; }

.sezione__testa { align-items: flex-end; }
.sezione__sotto { margin-top: 10px; font-size: clamp(16px, .3vw + 13px, 18px); line-height: 1.55; color: var(--testo); }
.btn--grande { min-height: 56px; padding-inline: 34px; font-size: 17px; }
.hero__azioni { margin-top: 32px; }

/* ricerca: il prezzo massimo si scrive, in euro */
.selezione--testo::after { display: none; }
.selezione__unita {
  position: absolute; left: 16px; top: 50%; transform: translateY(-50%);
  color: var(--testo-tenue); font-size: 16px; pointer-events: none;
}
.selezione--testo input {
  width: 100%; height: 52px;
  padding: 0 16px 0 34px;
  border: 1px solid var(--bordo-campo); border-radius: var(--raggio);
  background: var(--bianco); color: var(--navy); font-size: 16px;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.selezione--testo input::placeholder { color: var(--testo); opacity: 1; }
.selezione--testo input:focus-visible { outline: none; border-color: var(--blu); box-shadow: 0 0 0 3px rgba(0, 155, 254, .25); }
@media (hover: hover) and (pointer: fine) { .selezione--testo input:hover { border-color: #A9C6E4; } }

/* schede degli immobili: prezzo */
.schede-immobili { row-gap: 24px; }
.prezzo { color: var(--navy); font-size: 19px; font-weight: 600; letter-spacing: -0.01em; margin: -2px 0 4px; }
.prezzo span { font-size: 15px; font-weight: 400; color: var(--testo-tenue); }

/* i comuni: le pillole del design, più grandi da toccare */
.pillole--comuni { flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; }
.pillole--comuni .pillola { min-height: 44px; padding: 8px 15px 8px 12px; font-size: 15px; gap: 7px; color: var(--navy); }
.pillole--comuni .pillola .icona { width: 18px; height: 18px; color: var(--blu-icona); transition: color .2s ease; }
@media (hover: hover) and (pointer: fine) {
  .pillole--comuni .pillola:hover { background: var(--blu); color: var(--bianco); }
  .pillole--comuni .pillola:hover .icona { color: var(--bianco); }
}

/* le tipologie */
.tipologie-sezione .tipologie { margin-top: 8px; }
.tipologia { line-height: 1.3; }

/* come funziona: i passi del design, numerati */
.passi--numerati { counter-reset: passo; margin-top: 30px; }
.passi--numerati .passo { counter-increment: passo; border-color: var(--divisore); }
.passi--numerati .passo p { font-size: 17px; line-height: 1.5; color: var(--testo); max-width: 340px; }

/* la valutazione: il riquadro azzurro del design, con la scheda bianca */

.valutazione__box {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 384px;
  gap: 28px;
  align-items: center;
  padding: 24px 24px 24px 45px;
}
.valutazione__testo { padding: 26px 0; }
.valutazione__testo .titolo-sezione { margin-bottom: 14px; }
.valutazione__scheda {
  display: flex; flex-direction: column; gap: 18px;
  padding: 30px 30px 26px;
  box-shadow: 0 12px 34px -26px rgba(5, 11, 63, .35);
}
.valutazione__icone { display: flex; gap: 12px; margin: 0; padding: 0; list-style: none; }
.valutazione__icone li {
  width: 52px; height: 52px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--azzurro-cerchio); color: var(--blu-icona);
}
.valutazione__icone .icona { width: 26px; height: 26px; }
.valutazione__nota { color: var(--navy); font-size: 18px; font-weight: 600; line-height: 1.4; letter-spacing: -0.01em; }

/* i servizi: i cerchi del design, otto in due righe da quattro */
.servizi__griglia--otto { grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: 26px; }
.servizi__griglia--otto > li { padding: 0 16px 0 22px; border-left: 1px solid var(--divisore); }
.servizi__griglia--otto > li:nth-child(4n + 1) { padding-left: 0; border-left: 0; }
.servizi__griglia--otto .servizio {
  display: flex; align-items: center; gap: 18px;
  padding: 6px 0; border: 0; border-radius: var(--raggio);
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
  transition: transform .16s var(--ease-out);
}
.servizi__griglia--otto .servizio:active { transform: scale(0.97); }
.servizi__griglia--otto .cerchio { width: 62px; height: 62px; transition: background-color .2s ease; }
.servizi__griglia--otto .cerchio .icona { transition: transform .25s var(--ease-out); }
.servizi__griglia--otto .servizio__titolo { margin: 0; font-size: 17px; line-height: 1.3; transition: color .2s ease; }
@media (hover: hover) and (pointer: fine) {
  .servizi__griglia--otto .servizio:hover .cerchio { background: #D6EFFC; }
  .servizi__griglia--otto .servizio:hover .cerchio .icona { transform: translateY(-2px); }
  .servizi__griglia--otto .servizio:hover .servizio__titolo { color: var(--blu-testo); }
}

/* chi siamo: la forma «foto e testo» del design */

.chi-siamo .commerciale__griglia { align-items: center; }
.chi-siamo__testo .titolo-sezione { margin-bottom: 14px; }
.chi-siamo__testo .testo-medio + .testo-medio { margin-top: 12px; }
.chi-siamo__testo .link-freccia { margin-top: 22px; }

/* domande frequenti: riquadri a fisarmonica */

.domande__griglia { display: grid; grid-template-columns: minmax(0, 360px) minmax(0, 1fr); gap: 48px; align-items: start; }
.domande__elenco { display: flex; flex-direction: column; gap: 12px; }
.domanda { background: var(--bianco); border: 1px solid var(--bordo); border-radius: var(--raggio-scheda); transition: border-color .2s ease; }
.domanda summary {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  min-height: 58px; padding: 14px 22px;
  color: var(--navy); font-size: 17px; font-weight: 600; line-height: 1.35;
  list-style: none; cursor: pointer;
  border-radius: var(--raggio-scheda);
  -webkit-user-select: none; user-select: none;
  transition: background-color .2s ease;
}
.domanda summary::-webkit-details-marker { display: none; }
.domanda summary::after {
  content: ""; flex: none; width: 16px; height: 16px;
  background: var(--navy);
  -webkit-mask: url("/assets/img/icone/icona-chevron-giu.png") center / contain no-repeat;
  mask: url("/assets/img/icone/icona-chevron-giu.png") center / contain no-repeat;
  transition: transform .25s var(--ease-out);
}
.domanda[open] summary::after { transform: rotate(180deg); }
.domanda summary:active { background: var(--ricerca); }
.domanda p { padding: 0 22px 20px; font-size: 16px; line-height: 1.6; }
.domanda p + p { margin-top: -12px; }
.domanda[open] p { animation: appare .2s var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .domanda:hover { border-color: #D2DEEA; } }

/* contatti: il riquadro col bordo del design, recapiti a sinistra e modulo a destra */
.contatti { padding-bottom: 16px; }
.contatti__box {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 540px);
  padding: 36px 42px 38px;
}
.contatti__testo { padding-right: 46px; border-right: 1px solid var(--bordo); }
.contatti__testo .titolo-sezione { margin-bottom: 12px; }
.recapiti { display: flex; flex-direction: column; gap: 10px; margin: 24px 0 26px; padding: 0; list-style: none; font-size: 17px; }
.recapiti__voce { color: var(--navy); font-weight: 600; }
.recapiti a { color: var(--blu-testo); }
.modulo { display: flex; flex-direction: column; gap: 14px; padding-left: 46px; }
.modulo__titolo { color: var(--navy); font-size: 22px; font-weight: 700; letter-spacing: -0.02em; margin-bottom: 2px; }
.modulo__coppia { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.casella {
  width: 100%; min-height: 52px;
  padding: 0 16px;
  border: 1px solid var(--bordo-campo); border-radius: var(--raggio);
  background: var(--bianco); color: var(--navy); font-size: 16px;
  transition: border-color .2s ease, box-shadow .2s ease;
}
textarea.casella { padding: 12px 16px; min-height: 124px; resize: vertical; line-height: 1.5; }
.casella::placeholder { color: var(--testo-tenue); opacity: 1; }
.casella:focus-visible { outline: none; border-color: var(--blu); box-shadow: 0 0 0 3px rgba(0, 155, 254, .25); }
.casella[aria-invalid="true"] { border-color: #C2341B; }
@media (hover: hover) and (pointer: fine) { .casella:hover { border-color: #A9C6E4; } }
.campo__errore { font-size: 14px; line-height: 1.4; color: #B42318; }
.modulo > .campo__errore { margin-top: -6px; }
.modulo .btn { margin-top: 4px; min-height: 54px; }
.modulo .btn[disabled] { opacity: .7; cursor: progress; }
.modulo__esito { padding: 12px 14px; border-radius: var(--raggio); font-size: 15px; line-height: 1.5; }
.modulo__esito--ok { background: var(--azzurro); color: var(--navy); }
.modulo__esito--errore { background: #FDEDEB; color: #8A1C14; }
.modulo__esito a { color: inherit; font-weight: 600; text-decoration: underline; }

/* footer col copy */
.piede__griglia { grid-template-columns: minmax(0, 1.5fr) minmax(0, .7fr) minmax(0, 1fr); }
.piede__marchio p { margin-top: 18px; max-width: 380px; font-size: 15px; line-height: 1.55; color: var(--testo-tenue); }
.piede__colonna--testo p { margin-top: 4px; }
.piede__colonna--testo a { font-weight: 500; color: var(--navy); }

/* il pulsante fisso da telefono */
.cta-fissa { display: none; }

@media (min-width: 1100px) and (max-width: 1399px) {
  .pillole--comuni { gap: 6px; }
  .pillole--comuni .pillola { padding: 7px 11px 7px 9px; font-size: 14px; gap: 6px; }
}
@media (min-width: 1100px) and (max-width: 1279px) {
  .valutazione__box, .vendi__box { grid-template-columns: minmax(0, 1fr) 340px; }
  .contatti__box { grid-template-columns: minmax(0, 1fr) minmax(0, 480px); }
}

@media (max-width: 1099px) {
  .ricerca__campi .campo:nth-child(3) { grid-column: 1 / -1; }
  .valutazione__box { grid-template-columns: 1fr; padding: 28px 20px 20px; gap: 22px; }
  .valutazione__testo { padding: 0; }
  .servizi__griglia--otto { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .servizi__griglia--otto > li, .servizi__griglia--otto > li:nth-child(4n + 1) { padding: 0 0 0 20px; border-left: 1px solid var(--divisore); }
  .servizi__griglia--otto > li:nth-child(2n + 1) { padding-left: 0; border-left: 0; }
  .domande__griglia { grid-template-columns: 1fr; gap: 24px; }
  .contatti__box { grid-template-columns: 1fr; padding: 28px 24px; }
  .contatti__testo { padding: 0 0 26px; border-right: 0; border-bottom: 1px solid var(--bordo); }
  .modulo { padding: 26px 0 0; }
  .piede__griglia { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .piede__marchio { grid-column: 1 / -1; }
  .piede__colonna--testo { grid-column: auto; padding: 0 0 0 24px; border-left: 1px solid #DCE4EC; }
}

@media (max-width: 699px) {
  .sezione__testa { align-items: flex-start; }
  .sezione__testa .btn { width: 100%; }
  .sezione__sotto { margin-top: 8px; }
  .hero__azioni { margin-top: 24px; }
  .hero__azioni .btn { width: 100%; }
  .ricerca__campi .campo:nth-child(3) { grid-column: auto; }
  .prezzo { font-size: 18px; }
  .pillole--comuni { gap: 10px; }
  .pillole--comuni .pillola { font-size: 15px; padding: 8px 14px 8px 12px; }
  .passi--numerati { margin-top: 22px; }
  .passi--numerati .passo { grid-template-columns: 40px 1fr; }
  .passi--numerati .passo__icona { grid-row: auto; }
  .passi--numerati .passo p { font-size: 16px; }
  .valutazione__box { padding: 26px 16px 16px; border-radius: var(--raggio-scheda); }
  .valutazione__scheda { padding: 22px 18px 18px; }
  .servizi__griglia--otto { row-gap: 20px; }
  .servizi__griglia--otto > li, .servizi__griglia--otto > li:nth-child(4n + 1) { padding: 0 0 0 14px; }
  .servizi__griglia--otto > li:nth-child(2n + 1) { padding-left: 0; }
  .servizi__griglia--otto .servizio { flex-direction: column; align-items: flex-start; gap: 10px; }
  .servizi__griglia--otto .cerchio { width: 52px; height: 52px; }
  .servizi__griglia--otto .cerchio .icona { width: 26px; height: 26px; }
  .servizi__griglia--otto .servizio__titolo { font-size: 16px; }
  .domanda summary { padding: 14px 16px; font-size: 16px; }
  .domanda p { padding: 0 16px 18px; font-size: 15.5px; }
  .contatti__box { padding: 24px 18px; border-radius: var(--raggio-scheda); }
  .recapiti { font-size: 16px; margin: 20px 0 22px; }
  .modulo__coppia { grid-template-columns: 1fr; }
  .piede__griglia { grid-template-columns: 1fr; row-gap: 24px; }
  .piede__colonna, .piede__colonna:nth-child(2), .piede__colonna--testo { padding: 0; border-left: 0; }
  .piede__colonna ul { flex-direction: row; flex-wrap: wrap; gap: 4px 18px; }
  .piede__colonna ul a { padding: 6px 0; font-size: 15px; }
  .piede { padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)); }
}

/* il pulsante fisso: da telefono a tutta larghezza, fra 700 e 1099 px a destra in basso (P6.4, blocco P6) */
@media (max-width: 1099px) {
  .cta-fissa {
    display: flex; align-items: center; justify-content: center;
    position: fixed; z-index: 40;
    left: max(16px, env(safe-area-inset-left, 0px)); right: max(16px, env(safe-area-inset-right, 0px));
    bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    min-height: 54px; padding: 12px 20px;
    border-radius: var(--raggio);
    background: var(--blu); color: var(--bianco);
    font-size: 16px; font-weight: 600;
    box-shadow: 0 12px 30px -10px rgba(5, 11, 63, .45);
    opacity: 0; transform: translateY(calc(100% + 24px));
    pointer-events: none;
    -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
    transition: transform .2s var(--ease-out), opacity .2s ease;
  }
  .cta-fissa.visibile { opacity: 1; transform: none; pointer-events: auto; transition-duration: .4s, .3s; }
  .cta-fissa.visibile:active { transform: scale(0.97); transition-duration: .16s; }
}

@media (prefers-reduced-motion: reduce) {
  .cta-fissa, .cta-fissa.visibile { transform: none; }
}

/* ════════════════════════════════════════════════════════════════════════
   PAGINE INTERNE (step 6-bis) — gli stessi pezzi della home: titoli, riquadri,
   schede, cerchi, pillole, pulsanti; niente di nuovo.
   ════════════════════════════════════════════════════════════════════════ */
.titolo-pagina {
  color: var(--navy);
  font-size: clamp(32px, 2.6vw + 10px, 48px);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.022em;
  max-width: 900px;
}
.testa-pagina { padding: 56px 0 8px; }
.testa-pagina .titolo-pagina { animation: entra-su var(--durata-prima) var(--ease-out) both; }
.testa-pagina__sotto { margin-top: 14px; max-width: 760px; font-size: clamp(17px, .5vw + 12px, 20px); line-height: 1.5; color: var(--testo); animation: entra-su var(--durata-prima) var(--ease-out) .06s both; }
.testa-pagina .hero__azioni, .testa-pagina .recapiti, .testa-pagina .elenco-segni, .testa-pagina .pillole--indice { animation: entra-su var(--durata-prima) var(--ease-out) .12s both; }
.testa-pagina .recapiti { margin: 22px 0 0; }
.testa-pagina__griglia { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 52px; align-items: center; }
.testa-pagina__foto { animation: appare var(--durata-prima) ease .06s both; }
.testa-pagina__foto img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.testa-pagina .elenco-segni { margin-top: 14px; }
.foto-larga { margin-top: 40px; border-radius: var(--raggio-scheda); overflow: hidden; }
.foto-larga img { width: 100%; aspect-ratio: 2.4 / 1; object-fit: cover; }
.pillole--indice { margin-top: 30px; }
.pillole--indice { gap: 8px; }
.pillole--indice .pillola { padding: 7px 13px; font-size: 14px; }

.titolo-sezione--piccolo { font-size: clamp(24px, 1.2vw + 14px, 30px); }
.link-testo { color: var(--blu-testo); text-decoration: underline; text-underline-offset: 3px; }
.maiuscola { display: inline-block; }
.maiuscola::first-letter { text-transform: uppercase; }

/* elenco con un segno davanti */
.elenco-segni { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; }
.elenco-segni li { position: relative; padding-left: 26px; font-size: 17px; line-height: 1.5; color: var(--testo); }
.elenco-segni li::before { content: ""; position: absolute; left: 4px; top: .62em; width: 9px; height: 9px; border-radius: 50%; background: var(--blu); }
.elenco-segni li::first-letter { text-transform: uppercase; }
.elenco-segni--grande { gap: 12px; margin-bottom: 18px; }
.elenco-segni--grande li { font-size: 18px; color: var(--navy); }

/* due colonne: titolo a sinistra, testo a destra */
.due-colonne { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: start; }
.due-colonne--centro { align-items: center; }
.due-colonne .testo-medio + .testo-medio { margin-top: 12px; }
.due-colonne .titolo-sezione { margin-bottom: 4px; }
.link-coppia { display: flex; flex-wrap: wrap; gap: 10px 32px; margin-top: 22px; }

/* fasce: il riquadro azzurro, quello col bordo e quello della ricerca */
.fascia {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px 48px; align-items: center;
  padding: 36px 45px;
}
.fascia .titolo-sezione { margin-bottom: 10px; }
.fascia .testo-medio + .testo-medio { margin-top: 8px; }
.fascia--ricerca { background: var(--ricerca); grid-template-columns: auto minmax(0, 1fr); padding: 30px 36px; }
.fascia--sobria { grid-template-columns: auto minmax(0, 1fr) auto; padding: 28px 36px; }
.fascia--sobria:not(:has(.cerchio)) { grid-template-columns: minmax(0, 1fr) auto; }
.cerchio--bianco { background: var(--bianco); }

/* /immobili: i filtri, i risultati */
.ricerca-sezione--pagina { margin-top: 26px; }
.filtri { padding-top: 24px; }
.filtri__campi { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 18px; }
.filtri__azioni { display: flex; align-items: center; gap: 24px; margin-top: 20px; }
.filtri .btn--cerca { min-height: 54px; min-width: 200px; }
.link-togli { color: var(--blu-testo); font-weight: 500; text-decoration: underline; text-underline-offset: 4px; padding: 12px 0; }
.risultati { padding-top: 40px; }
.risultati__testa { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px 32px; flex-wrap: wrap; margin-bottom: 22px; }
.risultati__conteggio { color: var(--navy); font-size: 22px; font-weight: 700; letter-spacing: -0.015em; margin-bottom: 6px; }
.risultati__nota { font-size: 14px; color: var(--testo-tenue); }
.campo--ordina { min-width: 230px; }
.schede-immobili--elenco > li[hidden] { display: none; }
.nessun-risultato { padding: 40px 32px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.nessun-risultato .testo-medio a { color: var(--blu-testo); }
.risultati__altri { display: flex; justify-content: center; margin-top: 30px; }
.dati-brevi { font-size: 14px; color: var(--testo-tenue); margin-top: -4px; }

/* le tipologie e i luoghi */
.servizio--senza-link { cursor: default; }
.servizi__griglia--lunghi .servizio__titolo { font-size: 16px; }
.servizi__griglia--due { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.servizi__griglia--due > li:nth-child(4n + 1) { padding-left: 22px; border-left: 1px solid var(--divisore); }
.servizi__griglia--due > li:nth-child(2n + 1) { padding-left: 0; border-left: 0; }
.luoghi { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px 48px; }
.luoghi__titolo { color: var(--navy); font-size: 18px; font-weight: 600; margin-bottom: 14px; }
.luoghi--testo { margin: 24px 0 0; padding: 0; list-style: none; }
.luoghi__voce { display: flex; gap: 14px; align-items: flex-start; padding: 22px 24px; font-size: 17px; line-height: 1.6; }
.luoghi__voce .icona { width: 22px; height: 22px; margin-top: 3px; color: var(--blu-icona); }
.luoghi__voce strong { color: var(--navy); font-weight: 600; }
.luoghi__voce a { color: var(--blu-testo); text-decoration: underline; text-underline-offset: 3px; }
.luoghi__nota { margin-top: 22px; }
.tipologie--testo .tipologia { cursor: default; }

/* /valutazione: un esempio di scheda accanto al testo */
.schede-immobili--una { display: block; max-width: 460px; justify-self: end; width: 100%; }

/* /servizi: una scheda col bordo per servizio */
.servizi-schede { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.servizio-scheda { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 28px 30px 30px; scroll-margin-top: calc(var(--altezza-testata) + 24px); }
.servizio-scheda .cerchio { margin-bottom: 8px; }
.servizio-scheda__titolo { color: var(--navy); font-size: 22px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; }
.servizio-scheda .link-freccia { margin-top: 6px; }
.servizio-scheda--larga { grid-column: 1 / -1; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; column-gap: 24px; align-items: center; background: var(--azzurro); border-color: transparent; }
.servizio-scheda--larga .cerchio { grid-row: span 2; margin: 0; background: var(--bianco); }
.servizio-scheda--larga .link-freccia { grid-row: span 2; grid-column: 3; margin: 0; }
.contatti__vai { margin-top: 22px; }

/* la scheda dell'immobile */
.scheda-testa { padding: 32px 0 0; }
.link-freccia--indietro { flex-direction: row-reverse; font-size: 15px; }
.link-freccia--indietro::after { transform: scaleX(-1); }
@media (hover: hover) and (pointer: fine) { a.link-freccia--indietro:hover::after { transform: scaleX(-1) translateX(4px); } }
.scheda-testa__riga { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px 40px; flex-wrap: wrap; margin: 18px 0 26px; }
.scheda-testa__testo { max-width: 820px; }
.titolo-pagina--scheda { font-size: clamp(28px, 1.8vw + 12px, 40px); animation: entra-su var(--durata-prima) var(--ease-out) both; }
.luogo--grande { margin-top: 12px; font-size: 16px; }
.luogo--grande .icona { width: 18px; height: 18px; }
.scheda-testa__prezzo { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.etichetta--in-riga { position: static; background: var(--pillola); font-size: 14px; padding: 6px 14px; }
.separatore { color: var(--testo-tenue); }
.prezzo--grande { margin: 0; font-size: 26px; font-weight: 700; letter-spacing: -0.02em; color: var(--navy); }
.prezzo--grande span { font-size: 17px; }
.link-chiedi { margin-top: 10px; font-size: 16px; }
.scheda-testa__azioni { display: flex; flex-wrap: wrap; gap: 12px; animation: entra-su var(--durata-prima) var(--ease-out) .12s both; }

.galleria { position: relative; display: grid; gap: 12px; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); grid-template-rows: 1fr 1fr; height: clamp(320px, 38vw, 540px); }
.galleria--1 { grid-template-columns: 1fr; grid-template-rows: 1fr; }
.galleria--2 { grid-template-rows: 1fr; }
.galleria__foto {
  display: block; padding: 0; border: 0; background: var(--ricerca);
  border-radius: var(--raggio-scheda); overflow: hidden; cursor: zoom-in;
  transition: transform .16s var(--ease-out);
}
.galleria__foto:active { transform: scale(0.985); transition-delay: 60ms; }
.galleria__foto picture, .galleria__foto img { width: 100%; height: 100%; }
.galleria__foto img { object-fit: cover; transition: transform .6s var(--ease-out); }
.galleria__foto--grande { grid-row: 1 / -1; }
.galleria__foto:nth-of-type(n + 4) { display: none; }
/* con 3 caselle le foto accanto alla grande stanno in una colonna loro (collaudo step 7: nessuna foto sola in una
   riga); da computer se ne vedono 2, da telefono la colonna diventa display: contents e torna la striscia */
.galleria__colonna { grid-row: 1 / -1; display: grid; grid-template-rows: 1fr 1fr; gap: 12px; min-height: 0; }
.galleria__colonna .galleria__foto:nth-of-type(n + 3) { display: none; }
.galleria__tutte { position: absolute; right: 16px; bottom: 16px; min-height: 44px; padding: 8px 18px; font-size: 15px; box-shadow: 0 8px 24px -12px rgba(5, 11, 63, .45); }
@media (hover: hover) and (pointer: fine) { .galleria__foto:hover img { transform: scale(1.04); } }

.scheda-corpo { padding-top: 48px; }
.scheda-corpo__griglia { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 440px); gap: 48px; align-items: start; }
.scheda-corpo__testo { display: flex; flex-direction: column; gap: 40px; }
.scheda-blocco__titolo { color: var(--navy); font-size: 24px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; margin-bottom: 14px; }
.descrizione p + p { margin-top: 12px; }
.caratteristiche { width: 100%; border-collapse: collapse; font-size: 16px; }
.caratteristiche th, .caratteristiche td { padding: 12px 0; border-bottom: 1px solid var(--bordo); text-align: left; vertical-align: top; }
.caratteristiche th { width: 46%; font-weight: 500; color: var(--testo-tenue); padding-right: 16px; }
.caratteristiche td { color: var(--navy); font-weight: 600; }
.caratteristiche tr[hidden] { display: none; }
.nota-classe { margin-top: 12px; font-size: 14px; color: var(--testo-tenue); }
.scheda-blocco .link-freccia { margin-top: 12px; }
.chiedi { padding: 28px 30px; }
.chiedi .recapiti { margin: 16px 0 0; }
.visita { padding: 28px 24px 24px; }
.visita .scheda-blocco__titolo { margin-bottom: 8px; }
.visita__modulo { margin-top: 18px; padding: 24px 22px 22px; }
.modulo--visita { padding: 0; }
.altri-immobili__torna { margin-top: 26px; }
.simile { padding-bottom: 8px; }

/* la galleria a tutto schermo */
.lightbox { width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: rgba(5, 11, 63, .94); color: var(--bianco); overscroll-behavior: contain; }
.lightbox[open] { display: block; animation: appare .25s ease; }
.lightbox::backdrop { background: transparent; }
.lightbox__dentro { position: relative; height: 100%; display: grid; place-items: center; padding: 64px 72px; padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)); }
.lightbox__foto { margin: 0; padding: 0; list-style: none; width: 100%; height: 100%; display: grid; place-items: center; }
.lightbox__voce { width: 100%; height: 100%; display: grid; place-items: center; }
.lightbox__voce[hidden] { display: none; }
.lightbox__voce picture, .lightbox__voce img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; border-radius: 6px; }
.lightbox__voce:not([hidden]) img { animation: appare .3s ease; }
.lightbox__conto { position: absolute; top: 22px; left: 50%; transform: translateX(-50%); font-size: 15px; opacity: .85; }
.lightbox__tasto, .lightbox__chiudi {
  position: absolute; width: 52px; height: 52px; border: 0; border-radius: 50%;
  background: rgba(255, 255, 255, .12); color: var(--bianco);
  display: grid; place-items: center;
  transition: background-color .2s ease, transform .16s var(--ease-out);
}
.lightbox__tasto:active, .lightbox__chiudi:active { transform: scale(0.94); }
.lightbox__tasto::before, .lightbox__chiudi::before {
  content: ""; width: 22px; height: 22px; background: currentColor;
  -webkit-mask: url("/assets/img/icone/icona-freccia-destra.png") center / contain no-repeat;
  mask: url("/assets/img/icone/icona-freccia-destra.png") center / contain no-repeat;
}
.lightbox__tasto--prima { left: 14px; top: 50%; margin-top: -26px; }
.lightbox__tasto--prima::before { transform: scaleX(-1); }
.lightbox__tasto--dopo { right: 14px; top: 50%; margin-top: -26px; }
.lightbox__chiudi { right: 14px; top: 14px; }
.lightbox__chiudi::before { -webkit-mask-image: none; mask-image: none; background: none; width: 20px; height: 20px;
  background-image: linear-gradient(45deg, transparent 45%, currentColor 45%, currentColor 55%, transparent 55%), linear-gradient(-45deg, transparent 45%, currentColor 45%, currentColor 55%, transparent 55%); }
@media (hover: hover) and (pointer: fine) { .lightbox__tasto:hover, .lightbox__chiudi:hover { background: rgba(255, 255, 255, .22); } }
html.foto-aperte { overflow: hidden; }

/* scelte del modulo (vendere o dare in affitto) */
.scelte { border: 0; margin: 0; padding: 0; }
.scelte legend { padding: 0; margin-bottom: 8px; font-size: 15px; font-weight: 500; color: var(--navy); }
.scelte__voci { display: flex; flex-wrap: wrap; gap: 10px; }
.scelta { position: relative; display: inline-flex; }
.scelta input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.scelta span {
  display: inline-flex; align-items: center; min-height: 44px; padding: 8px 18px;
  border: 1px solid var(--bordo-campo); border-radius: 999px; background: var(--bianco);
  color: var(--navy); font-size: 16px;
  -webkit-user-select: none; user-select: none;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease, transform .16s var(--ease-out);
}
.scelta input:checked + span { background: var(--blu); border-color: var(--blu); color: var(--bianco); font-weight: 500; }
.scelta input:focus-visible + span { outline: 3px solid var(--blu); outline-offset: 2px; }
.scelta:active span { transform: scale(0.97); }

.pagina-404 .pagina__azioni { gap: 24px; }

@media (max-width: 1099px) {
  .testa-pagina__griglia { grid-template-columns: 1fr; gap: 28px; }
  .due-colonne { grid-template-columns: 1fr; gap: 20px; }
  .schede-immobili--una { justify-self: start; }
  .fascia, .fascia--sobria, .fascia--sobria:not(:has(.cerchio)) { grid-template-columns: 1fr; padding: 28px 24px; }
  .fascia--ricerca { grid-template-columns: auto minmax(0, 1fr); }
  .scheda-corpo__griglia { grid-template-columns: 1fr; }
  .luoghi { grid-template-columns: 1fr; }
  .servizi-schede { grid-template-columns: 1fr; }
  .servizio-scheda--larga { grid-template-columns: auto minmax(0, 1fr); }
  .servizio-scheda--larga .link-freccia { grid-column: 2; grid-row: auto; justify-self: start; }
  .galleria { height: clamp(300px, 52vw, 460px); }
}

@media (max-width: 699px) {
  .testa-pagina { padding-top: 32px; }
  .testa-pagina__sotto { font-size: 17px; }
  .foto-larga { margin-top: 28px; }
  .foto-larga img { aspect-ratio: 16 / 10; }
  .elenco-segni li { font-size: 16px; }
  .elenco-segni--grande li { font-size: 17px; }
  .fascia, .fascia--sobria, .fascia--sobria:not(:has(.cerchio)) { padding: 24px 18px; border-radius: var(--raggio-scheda); }
  .fascia--ricerca { grid-template-columns: 1fr; gap: 14px; }
  .fascia .btn { width: 100%; }
  .filtri { padding-top: 20px; }
  .filtri__campi { grid-template-columns: 1fr; gap: 14px; }
  .filtri__azioni { flex-direction: column; align-items: stretch; gap: 8px; }
  .filtri .btn--cerca { width: 100%; }
  .link-togli { text-align: center; }
  .risultati__testa { align-items: stretch; }
  .campo--ordina { min-width: 0; width: 100%; }
  ul.schede-immobili--elenco { display: grid; grid-template-columns: 1fr; gap: 16px; margin: 0; padding: 0; overflow: visible; }
  ul.schede-immobili--elenco li { flex: none; }
  .servizi__griglia--lunghi, .servizi__griglia--due { grid-template-columns: 1fr; }
  .servizi__griglia--lunghi > li, .servizi__griglia--lunghi > li:nth-child(n), .servizi__griglia--due > li, .servizi__griglia--due > li:nth-child(n) { padding: 0; border-left: 0; }
  .servizi__griglia--lunghi .servizio, .servizi__griglia--due .servizio { flex-direction: row; align-items: center; gap: 16px; }
  .luoghi__voce { padding: 16px 14px; font-size: 15.5px; line-height: 1.55; }
  .luoghi__voce .icona { display: none; }
  .servizio-scheda { padding: 22px 20px 24px; }
  .servizio-scheda--larga { grid-template-columns: 1fr; row-gap: 10px; }
  .servizio-scheda--larga .cerchio, .servizio-scheda--larga .link-freccia { grid-row: auto; grid-column: auto; }
  .scheda-testa { padding-top: 22px; }
  .scheda-testa__azioni { width: 100%; }
  .scheda-testa__azioni .btn { flex: 1 1 100%; }
  .galleria {
    display: flex; height: auto; gap: 10px;
    overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
    margin-inline: calc(-1 * var(--margine)); padding-inline: var(--margine); scroll-padding-inline: var(--margine);
  }
  .galleria::-webkit-scrollbar { display: none; }
  .galleria__colonna { display: contents; }
  .galleria__foto, .galleria__foto:nth-of-type(n + 4), .galleria__colonna .galleria__foto:nth-of-type(n + 3) { display: block; flex: 0 0 86%; aspect-ratio: 4 / 3; scroll-snap-align: start; }
  .galleria--1 .galleria__foto { flex-basis: 100%; }
  .galleria__tutte { position: static; flex: none; align-self: center; margin-left: 4px; }
  .scheda-corpo { padding-top: 36px; }
  .scheda-corpo__testo { gap: 32px; }
  .caratteristiche th { width: 50%; }
  .chiedi { padding: 22px 18px; }
  .visita { padding: 22px 14px 14px; border-radius: var(--raggio-scheda); }
  .visita__modulo { padding: 20px 16px 18px; }
  .lightbox__dentro { padding: 60px 8px 88px; }
  .lightbox__tasto--prima, .lightbox__tasto--dopo { top: auto; bottom: calc(18px + env(safe-area-inset-bottom, 0px)); margin-top: 0; }
  .lightbox__tasto--prima { left: calc(50% - 64px); }
  .lightbox__tasto--dopo { right: calc(50% - 64px); }
}

@media (prefers-reduced-motion: reduce) {
  .testa-pagina .titolo-pagina, .testa-pagina__sotto, .testa-pagina .hero__azioni, .testa-pagina .recapiti,
  .testa-pagina .elenco-segni, .testa-pagina .pillole--indice, .titolo-pagina--scheda, .scheda-testa__azioni { animation-name: appare; }
  .galleria__foto:hover img { transform: none; }
}

/* ════════════════════════════════════════════════════════════════════════
   ANNUNCI COME SUI PORTALI (21/10/2026): testo esatto, foto identiche
   ════════════════════════════════════════════════════════════════════════ */
.segnaposto { display: grid; place-items: center; width: 100%; aspect-ratio: 3 / 2; background: var(--azzurro); }
.segnaposto img { width: 34%; max-width: 160px; height: auto; opacity: .9; }
.galleria .segnaposto { aspect-ratio: auto; height: 100%; border-radius: var(--raggio-scheda); }
.galleria__foto--pianta { background: var(--bianco); border: 1px solid var(--bordo); cursor: pointer; }
.galleria__foto--pianta img { object-fit: contain !important; }
.caption { display: inline-block; margin-bottom: 12px; padding: 5px 12px; border-radius: 999px; background: var(--pillola); color: var(--testo); font-size: 13px; font-weight: 500; letter-spacing: .02em; }
.prezzo-mq { font-size: 15px; color: var(--testo-tenue); }
.descrizione { white-space: pre-line; font-size: 16px; line-height: 1.7; color: var(--testo); overflow-wrap: anywhere; }
/* la descrizione del portale, lunga, da telefono si apre con «Leggi tutta la descrizione» (come sui portali); senza
   JavaScript resta tutta aperta */
.descrizione__tutta { display: none; }
@media (max-width: 699px) {
  html.js .descrizione--lunga:not(.aperta) {
    max-height: calc(1.7em * 7); overflow: hidden;
    -webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent); mask-image: linear-gradient(to bottom, #000 55%, transparent);
  }
  html.js .descrizione--lunga:not(.aperta) + .descrizione__tutta { display: inline-flex; margin-top: 10px; min-height: 44px; }
  .descrizione--lunga.aperta { animation: appare .2s ease both; }
}
.caratteristiche td { overflow-wrap: anywhere; }
.dotazioni { display: flex; flex-wrap: wrap; gap: 8px; margin: 20px 0 0; padding: 0; list-style: none; }
.dotazioni li { padding: 6px 12px; border-radius: 999px; background: var(--pillola); color: var(--navy); font-size: 14px; }
.dotazioni li::first-letter { text-transform: uppercase; }
.scheda-blocco__sotto { margin: 26px 0 10px; color: var(--navy); font-size: 18px; font-weight: 600; }
/* la composizione della superficie: una tabella con le intestazioni (collaudo step 7); da telefono ogni riga è un
   blocco con l'etichetta accanto al valore */
.superfici { width: 100%; border-collapse: collapse; font-size: 15px; color: var(--testo); font-variant-numeric: tabular-nums; }
.superfici th { padding: 8px 10px 8px 0; border-bottom: 1px solid var(--bordo); text-align: left; font-size: 13px; font-weight: 600; color: var(--navy); vertical-align: bottom; }
.superfici td { padding: 10px 10px 10px 0; border-bottom: 1px solid var(--bordo); text-align: left; vertical-align: top; }
.superfici td:first-child { color: var(--navy); font-weight: 500; }
@media (max-width: 699px) {
  .superfici thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .superfici, .superfici tbody, .superfici tr, .superfici td { display: block; width: 100%; }
  .superfici tr { padding: 10px 0; border-bottom: 1px solid var(--bordo); }
  .superfici td { display: flex; justify-content: space-between; gap: 16px; padding: 3px 0; border: 0; }
  .superfici td::before { content: attr(data-etichetta); color: var(--testo-tenue, var(--testo)); font-size: 14px; }
  .superfici td:first-child { font-size: 16px; }
  .superfici td:first-child::before { content: none; }
}
.superfici__totale { margin-top: 10px; font-size: 15px; color: var(--navy); font-weight: 600; }
.miniature {
  display: flex; gap: 8px; margin: 12px 0 0; padding: 0 0 6px; list-style: none;
  overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: thin;
}
.miniatura {
  display: block; width: 112px; height: 80px; flex: none; padding: 0; border: 0; border-radius: 6px; overflow: hidden;
  background: var(--ricerca); cursor: zoom-in; scroll-snap-align: start;
  transition: transform .16s var(--ease-out), opacity .2s ease;
}
.miniatura img { width: 100%; height: 100%; object-fit: cover; }
.miniatura:active { transform: scale(0.95); }
@media (hover: hover) and (pointer: fine) { .miniatura:hover { opacity: .85; } }
.planimetrie { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.planimetrie:has(> :nth-child(4):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }   /* 4 piante: 2 + 2, mai una sola in fondo */
.planimetrie__voce { margin: 0; border: 1px solid var(--bordo); border-radius: var(--raggio-scheda); overflow: hidden; background: var(--bianco); }
.planimetrie__voce a { display: block; cursor: zoom-in; }
.planimetrie__voce img { width: 100%; height: 260px; object-fit: contain; background: var(--bianco); }
.planimetrie__voce figcaption { padding: 10px 14px; border-top: 1px solid var(--bordo); font-size: 14px; color: var(--testo); }
.lightbox__voce figure { margin: 0; width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; }
.lightbox__voce figure img { max-height: calc(100% - 40px); }
.lightbox__voce figcaption { font-size: 15px; color: rgba(255, 255, 255, .85); text-align: center; }
.scheda-immobile__foto .segnaposto { aspect-ratio: 3 / 2; }
@media (max-width: 699px) {
  .descrizione { font-size: 15.5px; }
  .miniatura { width: 92px; height: 68px; }
  /* da telefono le planimetrie scorrono in fila col dito, come la galleria, mai una sotto l'altra (collaudo step 7) */
  .planimetrie {
    display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
    margin-inline: calc(-1 * var(--margine)); padding-inline: var(--margine); scroll-padding-inline: var(--margine);
  }
  .planimetrie::-webkit-scrollbar { display: none; }
  .planimetrie__voce { flex: 0 0 78%; scroll-snap-align: start; }
  .planimetrie__voce:only-child { flex-basis: 100%; }
  .planimetrie__voce img { height: 220px; }
}

/* ════════════════════════════════════════════════════════════════════════
   MOVIMENTO (step 5-bis) — curve e durate di Emil Kowalski, solo transform e opacity
   ════════════════════════════════════════════════════════════════════════ */
@keyframes entra-su { from { opacity: 0; transform: translateY(var(--spostamento-entrata)); } }
@keyframes appare { from { opacity: 0; } }
@keyframes traccia { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes assesta { from { scale: 1.07; } to { scale: 1.04; } }

/* la prima schermata entra al caricamento, senza aspettare il JavaScript; la foto è visibile da subito (P6.1: il
   titolo in 600 ms, sottotitolo e pulsanti a +60 e +120 ms, la ricerca a +180 ms) */
.hero__titolo .riga,
.hero__sotto,
.hero__azioni,
.ricerca-sezione { animation: entra-su var(--durata-prima) var(--ease-out) both; }
.hero__titolo .riga:nth-child(2) { animation-delay: 30ms; }
.hero__sotto { animation-delay: 60ms; }
.hero__azioni { animation-delay: 120ms; }
.ricerca-sezione { animation-delay: 180ms; }
/* la foto di Lecco si assesta una volta all'ingresso; col mouse, in più, una profondità leggera allo scroll (main.js) */
.hero__media img {
  scale: 1.04;
  transform-origin: 50% 0;   /* cresce verso il lago: il profilo delle case resta sempre intero */
  animation: assesta var(--durata-prima) var(--ease-out) both;
}

/* sezioni che entrano scorrendo: .reveal → .in (main.js); senza JavaScript tutto resta visibile.
   P6.1: 500 ms e 20 px; scorrendo veloce main.js aggiunge .subito e la sezione arriva già ferma (blocco P6) */
.reveal { transition: opacity var(--durata-entrata) var(--ease-out), transform var(--durata-entrata) var(--ease-out); }
.js .reveal:not(.in) { opacity: 0; transform: translateY(var(--spostamento-entrata)); }
/* i gruppi entrano uno dopo l'altro, a 50 ms, al massimo 250 */
.js .reveal-gruppo:not(.in) { opacity: 1; transform: none; }
.reveal-gruppo > * { transition: opacity var(--durata-entrata) var(--ease-out), transform var(--durata-entrata) var(--ease-out); }
.js .reveal-gruppo:not(.in) > * { opacity: 0; transform: translateY(var(--spostamento-entrata)); }
.reveal-gruppo.in > :nth-child(2) { transition-delay: 50ms; }
.reveal-gruppo.in > :nth-child(3) { transition-delay: 100ms; }
.reveal-gruppo.in > :nth-child(4) { transition-delay: 150ms; }
.reveal-gruppo.in > :nth-child(5) { transition-delay: 200ms; }
.reveal-gruppo.in > :nth-child(n + 6) { transition-delay: 250ms; }
/* le foto «foto e testo» entrano in dissolvenza mentre la foto si assesta (1.04 → 1): solo opacity e transform */
.commerciale__foto.reveal { transition: opacity var(--durata-entrata) var(--ease-out); }
.js .commerciale__foto.reveal:not(.in) { opacity: 0; transform: none; }
.commerciale__foto.reveal img { transition: transform var(--durata-entrata) var(--ease-out); }
.js .commerciale__foto.reveal:not(.in) img { transform: scale(1.04); }

/* menu da telefono: le voci arrivano in fila all'apertura, escono insieme e più in fretta */
@media (max-width: 1099px) {
  .menu__voci li, .menu__cta { transition: opacity .3s var(--ease-out), transform .4s var(--ease-out); }
  .menu:not(.aperto) .menu__voci li, .menu:not(.aperto) .menu__cta { opacity: 0; transform: translateY(12px); transition-duration: .15s; }
  .menu.aperto .menu__voci li:nth-child(2) { transition-delay: 40ms; }
  .menu.aperto .menu__voci li:nth-child(3) { transition-delay: 80ms; }
  .menu.aperto .menu__voci li:nth-child(4) { transition-delay: 120ms; }
  .menu.aperto .menu__voci li:nth-child(5) { transition-delay: 160ms; }
  .menu.aperto .menu__voci li:nth-child(6) { transition-delay: 200ms; }
  .menu.aperto .menu__cta { transition-delay: 240ms; }
}

/* meno movimento, non zero: restano le dissolvenze e i colori, spariscono gli spostamenti */
@media (prefers-reduced-motion: reduce) {
  .hero__titolo .riga, .hero__sotto, .hero__azioni, .ricerca-sezione, .slogan { animation-name: appare; }
  .hero__media img { animation: none; scale: 1; }
  .js .reveal:not(.in), .js .reveal-gruppo:not(.in) > * { transform: none; }
  .js .commerciale__foto.reveal:not(.in) img { transform: none; }
  .menu, .menu:not(.aperto) .menu__voci li, .menu:not(.aperto) .menu__cta { transform: none; }
  .scheda-immobile:hover .scheda-immobile__foto img, .tipologia:hover .icona { transform: none; }
}
.pagina__azioni { align-items: center; }
.pillola--testo { cursor: default; }

/* ════════════════════════════════════════════════════════════════════════
   P1 · DIFETTI (21/10/2026) — foto del kit, segnaposto, galleria, cuori,
   moduli, righe che scorrono, 404, footer. Si muovono solo transform e opacity.
   ════════════════════════════════════════════════════════════════════════ */

/* foto d'atmosfera del kit: il taglio tiene il soggetto */
.chi-siamo .commerciale__foto img { object-position: 60% 30%; }   /* il Resegone e il campanile */
.foto-larga img { object-position: 50% 17%; }                      /* 2.4:1, il profilo delle due case intero */

/* annunci senza foto: il simbolo delle case del kit su --azzurro */
.segnaposto { display: grid; place-items: center; width: 100%; aspect-ratio: 4 / 3; background: var(--azzurro); }
.segnaposto picture { width: 38%; max-width: 180px; }
.segnaposto img { width: 100%; max-width: none; height: auto; opacity: 1; }
.scheda-immobile__foto .segnaposto { aspect-ratio: 3 / 2; }   /* come le foto: la riga delle schede resta allineata */
.galleria--vuota { display: block; height: auto; }
.galleria--vuota .segnaposto { aspect-ratio: auto; height: clamp(240px, 24vw, 340px); border-radius: var(--raggio-scheda); }
.galleria--vuota .segnaposto picture { width: 180px; }

/* galleria della scheda: l'ultima casella col velo e «+N foto», il pulsante sulla foto grande */
.galleria__foto { position: relative; }
.galleria__altre {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  background: rgba(5, 11, 63, .55);
  color: var(--bianco);
  font-size: clamp(22px, 1.2vw + 10px, 30px); font-weight: 600; letter-spacing: -0.01em;
  pointer-events: none;
  transition: background-color .2s ease;
}
@media (hover: hover) and (pointer: fine) { .galleria__foto:hover .galleria__altre { background: rgba(5, 11, 63, .42); } }
.galleria__tutte { left: 16px; right: auto; }
.galleria__numero { font-weight: 500; }

/* cuore: acceso resta acceso (localStorage «elite-preferiti»), e batte una volta quando si accende */
@keyframes batte { 0% { transform: scale(.82); } 60% { transform: scale(1.1); } 100% { transform: scale(1); } }
.cuore.batte::before { animation: batte .28s var(--ease-out); }
.risultati__riga { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 16px; margin-bottom: 6px; }
.risultati__riga .risultati__conteggio { margin-bottom: 0; }
.pillola--preferiti { gap: 8px; border: 0; color: var(--navy); font-weight: 500; min-height: 40px; }
.pillola--preferiti .icona { width: 16px; height: 16px; color: var(--blu-icona); transition: color .2s ease; }
.pillola--preferiti[aria-pressed="true"] { background: var(--blu); color: var(--bianco); }
.pillola--preferiti[aria-pressed="true"] .icona { color: var(--bianco); }
@media (hover: hover) and (pointer: fine) {
  .pillola--preferiti:not([aria-pressed="true"]):hover { background: #E2EBF4; }
  .pillola--preferiti[aria-pressed="true"]:hover { background: #0A8BEB; color: var(--bianco); }
}

/* moduli: durante l'invio */
.modulo[aria-busy="true"] { cursor: progress; }
.modulo .btn.invio { opacity: .6; cursor: progress; }

/* la galleria a tutto schermo esce più in fretta di come entra */
.lightbox { transition: opacity .15s ease; }
.lightbox.chiude { opacity: 0; }

/* /valutazione: i tipi di immobile; da computer l'icona da sola, come nella riga del design */
.tipologie--testo .cerchio { display: contents; }
.tipologie--testo .tipologia .icona { width: 32px; height: 32px; }

/* footer: l'etichetta della sede legale */
.piede__etichetta { font-weight: 500; }

/* 404: la pagina riempie la finestra, il footer tocca il fondo */
.corpo-404 { display: flex; flex-direction: column; min-height: 100vh; min-height: 100svh; }
.corpo-404 > main { flex: 1 0 auto; }

@media (max-width: 1099px) {
  /* home: la riga delle tipologie scorre; a destra sfuma finché non si arriva in fondo (.fine, main.js) */
  ul.tipologie:not(.tipologie--testo) {
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 56px), transparent);
    mask-image: linear-gradient(to right, #000 calc(100% - 56px), transparent);
  }
  ul.tipologie.fine { -webkit-mask-image: none; mask-image: none; }
  ul.tipologie:not(.tipologie--testo)::after { content: ""; flex: 0 0 1px; }

  /* /valutazione: una griglia coi cerchi, niente riga che esce dallo schermo */
  ul.tipologie--testo {
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px 16px;
    overflow: visible; scroll-snap-type: none; margin-inline: 0; padding-inline: 0;
  }
  .tipologie--testo li, .tipologie--testo li:first-child, .tipologie--testo li:last-child { border-left: 0; justify-content: flex-start; }
  .tipologie--testo .tipologia { flex-direction: column; align-items: flex-start; gap: 12px; min-height: 0; padding: 0; white-space: normal; }
  .tipologie--testo .cerchio { display: grid; width: 56px; height: 56px; }
  .tipologie--testo .cerchio .icona { width: 28px; height: 28px; }
}

@media (max-width: 699px) {
  ul.tipologie--testo { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 14px; }
  .tipologie--testo .cerchio { width: 52px; height: 52px; }
  .tipologie--testo .cerchio .icona { width: 26px; height: 26px; }
  .galleria--vuota { display: block; margin: 0; padding: 0; overflow: visible; }
  .galleria--vuota .segnaposto { height: auto; aspect-ratio: 4 / 3; }
  .galleria--vuota .segnaposto picture { width: 42%; }
}

@media (prefers-reduced-motion: reduce) {
  .cuore.batte::before { animation: none; }
  .lightbox { transition: none; }
}

/* ════════════════════════════════════════════════════════════════════════
   P2 · HOME (21/10/2026) — il design del kit fino in fondo, e i componenti comuni:
   occhiello, titolo a due pesi, ritmo, motivo delle due case, didascalia, link esterno,
   ricerca con l'indicatore unico, pillole, caselle numerate, mini-modulo, footer a colonne.
   Si muovono solo transform e opacity; con meno movimento restano le dissolvenze.
   ════════════════════════════════════════════════════════════════════════ */

/* d) il ritmo verticale: fra i gruppi, fra le sezioni, prima e dopo i riquadri */
:root { --passo-gruppo: 28px; --passo-sezione: 72px; --passo-riquadro: 96px; }
@media (max-width: 699px) { :root { --passo-gruppo: 20px; --passo-sezione: 48px; --passo-riquadro: 64px; } }
.sezione:has(> .contenitore > .riquadro:first-child),
.sezione:has(> .contenitore > .riquadro:first-child) + .sezione { padding-top: var(--passo-riquadro); }

/* b-c) titoli: la parte dopo i due punti a capo e leggera; i titoli lunghi un filo meno pesanti */
.titolo-leggero { display: block; font-weight: 400; letter-spacing: -0.02em; }
.titolo--lungo { font-weight: 650; }

/* a) occhiello: sopra il titolo della hero, nel riquadro della valutazione, in «Chi siamo» e in «Contatti» */
.occhiello { line-height: 1.3; }
.chi-siamo__testo .occhiello, .contatti__testo .occhiello { margin-bottom: 12px; }

/* h) link verso un altro sito: la freccia esterna del kit */
.link-freccia--esterna::after {
  -webkit-mask-image: url("/assets/img/icone/icona-freccia-esterna.png");
  mask-image: url("/assets/img/icone/icona-freccia-esterna.png");
}
@media (hover: hover) and (pointer: fine) {
  a.link-freccia--esterna:hover::after { transform: translate(2px, -2px); }
}

/* f) il motivo delle due case del kit: maschera sul PNG, colore --blu, dietro al contenuto */
.motivo {
  position: absolute; z-index: 0;
  width: clamp(280px, 25vw, 360px);
  aspect-ratio: 1050 / 645;
  color: var(--blu);
  background: currentColor;
  opacity: .42;
  pointer-events: none;
  -webkit-mask: url("/assets/img/kit/motivo-doppia-casa.png") center / contain no-repeat;
  mask: url("/assets/img/kit/motivo-doppia-casa.png") center / contain no-repeat;
  transition: opacity var(--durata-entrata) var(--ease-out) .1s, transform var(--durata-entrata) var(--ease-out) .1s;
}
.js .reveal:not(.in) .motivo { opacity: 0; transform: translateY(var(--spostamento-entrata)); }

/* ── hero: occhiello, titolo, pulsante e link sopra la foto ── */
.hero__occhiello { margin-bottom: 18px; animation: entra-su var(--durata-prima) var(--ease-out) both; }
.hero__azioni { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; }
.hero__azioni .btn--grande { padding-inline: 28px; }
/* g) la lineetta della didascalia si allunga una volta, da sinistra */
.didascalia::before { transform-origin: left center; animation: traccia var(--durata-prima) var(--ease-out) .3s both; }

/* ── ricerca: la fetta 05-sezioni/01 del kit ── */
.ricerca-sezione { margin-top: 26px; }
.ricerca {
  border: 1px solid #DCE6F0;
  box-shadow: 0 18px 40px -28px rgba(5, 11, 63, .28);
  padding-bottom: 24px;
}
.ricerca__testa { margin-bottom: 18px; }
.ricerca__schede { position: relative; }
.ricerca__scheda { min-height: 62px; }
.ricerca__avanzata { gap: 10px; }
/* UN indicatore che scorre fra In vendita e In affitto (main.js): prende il posto delle due ::after */
.js .ricerca__scheda::after { display: none; }
.ricerca__indicatore {
  position: absolute; left: 0; bottom: -1px;
  width: 100px; height: 3px; border-radius: 2px;
  background: var(--blu);
  transform-origin: 0 50%;
  transform: scaleX(0);
  pointer-events: none;
}
.ricerca__indicatore.scorre { transition: transform .25s var(--ease-in-out); }
html:not(.js) .ricerca__indicatore { display: none; }
.ricerca__campi { grid-template-columns: 1.25fr 1.25fr 1fr 1fr auto; gap: 16px; }
.btn--cerca { min-height: 82px; padding-inline: 28px; white-space: nowrap; }
.ricerca__conto { font-variant-numeric: tabular-nums; font-weight: 500; }

/* ── gli ultimi immobili: titolo, pillole e «Vedi tutti» su una riga ── */
.immobili__testa { align-items: flex-end; }
.immobili__azioni { gap: 16px 28px; }
.pillole--filtro { gap: 8px; }
.pillole--filtro .pillola {
  position: relative; isolation: isolate;
  min-height: 42px; padding: 8px 18px;
  border: 0;
  font: inherit; font-size: 15px; font-weight: 500;
  color: var(--testo);
  transition: color .15s ease, transform .16s var(--ease-out);
}
.pillole--filtro .pillola::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  border-radius: inherit; background: var(--blu);
  opacity: 0; transition: opacity .15s ease;
}
.pillole--filtro .pillola[aria-pressed="true"] { color: var(--bianco); }
.pillole--filtro .pillola[aria-pressed="true"]::before { opacity: 1; }
@media (hover: hover) and (pointer: fine) {
  .pillole--filtro .pillola[aria-pressed="false"]:hover { background: #E2EBF4; color: var(--navy); }
}
html:not(.js) .pillole--filtro { display: none; }
/* le schede che compaiono cambiando pillola: in fila, 40 ms l'una dall'altra (main.js) */
@keyframes entra-scheda { from { opacity: 0; transform: translateY(8px); } }
.schede-immobili > li.entra { animation: entra-scheda .26s var(--ease-out) both; }

/* ── tipologie e comuni: un gruppo solo, subito sotto le schede ── */
.gruppo-cerca { padding-top: var(--passo-gruppo); }
.gruppo-cerca__parte { padding-top: 24px; border-top: 1px solid var(--bordo); }
.gruppo-cerca__parte + .gruppo-cerca__parte { margin-top: var(--passo-gruppo); }
.gruppo-cerca__testa {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 12px 32px; flex-wrap: wrap;
  margin-bottom: 18px;
}
.titolo-gruppo { color: var(--navy); font-size: clamp(20px, .5vw + 16px, 24px); font-weight: 650; line-height: 1.2; letter-spacing: -0.015em; }
.gruppo-cerca__sotto { margin-top: 6px; font-size: 16px; line-height: 1.5; color: var(--testo); }
.tipologie-sezione .tipologie { margin-top: 0; }

/* ── come funziona la ricerca: le caselle numerate della guida al kit ── */
.passi--numerati .passo { display: flex; align-items: center; gap: 18px; }
.passo__numero {
  flex: none; display: grid; place-items: center;
  width: 46px; height: 46px; border-radius: 10px;
  background: var(--azzurro-cerchio);
  color: var(--blu); font-size: 17px; font-weight: 600; letter-spacing: .01em;
  font-variant-numeric: tabular-nums;
}

/* ── valutazione: la forma «Vendi con noi», col mini-modulo e il motivo ── */
.valutazione__box { position: relative; overflow: hidden; isolation: isolate; align-items: stretch; }
.valutazione__testo { position: relative; display: flex; flex-direction: column; align-items: flex-start; padding: 30px 0 22px; }
.valutazione__testo > :not(.motivo) { position: relative; z-index: 1; }
.valutazione__testo .occhiello { margin-bottom: 14px; }
.valutazione__testo .testo-grande { max-width: 640px; margin-bottom: 30px; }
.valutazione__icone { margin-top: auto; }
.valutazione__icone li { background: var(--bianco); }
.valutazione__testo .motivo { right: 2%; bottom: -112px; }
.valutazione__scheda { position: relative; z-index: 1; gap: 14px; padding: 30px 30px 28px; }
.valutazione__nota { font-size: 21px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.25; margin-bottom: 4px; }
.valutazione__scheda .btn { margin-top: 6px; min-height: 52px; }

/* ── footer a colonne (05-sezioni/04): linee fra le colonne, logo e frase a sinistra ── */
.piede { padding-top: 48px; }
.piede__griglia { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr) minmax(0, 1.05fr) minmax(0, .7fr) minmax(0, 1.25fr); }
.piede__marchio { padding-right: 28px; }
.piede__colonna, .piede__colonna:nth-child(2) { padding: 0 22px; border-left: 1px solid #DCE4EC; }
.piede__colonna:last-child { padding-right: 0; }
.piede__titolo { margin-bottom: 12px; }
.piede__colonna ul { gap: 4px; }
.piede__colonna ul a { line-height: 1.4; }
.credit .link-freccia--esterna { font-size: inherit; font-weight: 400; color: inherit; gap: 6px; text-decoration-thickness: 1px; text-underline-offset: 3px; min-height: 0; }
.credit .link-freccia--esterna::after { width: 11px; height: 11px; }

/* ── /immobili: la categoria che arriva dalla home, da togliere con un tocco ── */
.pillola--togli::after { content: "×"; margin-left: 8px; font-size: 18px; line-height: 1; }

@media (min-width: 1100px) and (max-width: 1279px) {
  .ricerca__campi { gap: 12px; }
  .btn--cerca { padding-inline: 20px; }
}

@media (max-width: 1099px) {
  .ricerca__campi { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ricerca__campi .campo:nth-child(3) { grid-column: auto; }
  .btn--cerca { min-height: 56px; }
  .valutazione__testo { padding: 0; }
  .valutazione__testo .testo-grande { margin-bottom: 22px; }
  .valutazione__testo .motivo { right: -12px; bottom: -86px; width: 260px; }
  .piede__griglia { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 32px; }
  .piede__marchio { grid-column: 1 / -1; padding-right: 0; }
  .piede__colonna, .piede__colonna:nth-child(2), .piede__colonna--testo { grid-column: auto; padding: 0 0 0 22px; border-left: 1px solid #DCE4EC; }
  .piede__colonna:nth-child(2n) { padding-left: 0; border-left: 0; }
}

@media (max-width: 699px) {
  .hero__occhiello { margin-bottom: 12px; }
  .hero__azioni { gap: 6px 24px; }
  .hero__azioni .link-freccia { align-self: center; }
  .ricerca__campi { grid-template-columns: 1fr; gap: 14px; }
  .ricerca__scheda { min-height: 54px; }

  /* gli ultimi immobili: titolo, pillole, schede che scorrono, poi «Vedi tutti gli immobili» */
  .immobili__griglia { display: flex; flex-direction: column; }
  .immobili__testa, .immobili__azioni { display: contents; }
  .immobili__testa .sezione__titoli { order: 1; margin-bottom: 16px; }
  .pillole--filtro { order: 2; margin-bottom: 16px; }
  .immobili__griglia > .schede-immobili { order: 3; }
  .immobili__tutti { order: 4; margin-top: 18px; }
  .pillole--filtro .pillola { padding-inline: 16px; }

  .gruppo-cerca__parte { padding-top: 20px; }
  .gruppo-cerca__testa { margin-bottom: 14px; }
  .gruppo-cerca__sotto { font-size: 15px; }

  .passi--numerati .passo, .passi--numerati .passo:first-child { display: flex; gap: 16px; }
  .passo__numero { width: 42px; height: 42px; font-size: 16px; }

  .valutazione__nota { font-size: 19px; }
  .valutazione__icone { gap: 10px; }
  .valutazione__testo .motivo { right: -24px; bottom: -70px; width: 180px; }

  .piede { padding-top: 36px; }
  .piede__colonna, .piede__colonna:nth-child(2), .piede__colonna--testo { padding: 0 0 0 16px; }
  .piede__colonna:nth-child(2n) { padding-left: 0; }
  .piede__colonna ul { flex-direction: column; gap: 0; }
  .piede__colonna ul a { display: block; padding: 7px 0; font-size: 15px; }
  .piede__colonna--testo { grid-column: 1 / -1; padding: 0; border-left: 0; }
  .credit .link-freccia--esterna { padding-block: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .hero__occhiello { animation-name: appare; }
  .didascalia::before { animation: none; }
  .ricerca__indicatore.scorre { transition: none; }
  .js .reveal:not(.in) .motivo { transform: none; }
  .schede-immobili > li.entra { animation-name: appare; }
}

/* ════════════════════════════════════════════════════════════════════════
   P3 · SCHEDE DEGLI IMMOBILI (21/10/2026) — la card dell'elenco e la pagina dell'immobile:
   dati brevi e bollino della classe, briciole, fascia dei dati chiave, scala APE, galleria che segue il dito,
   visita sempre a portata di mano, immobili simili, Salva · Condividi · Stampa, foglio di stampa A4.
   Si muovono solo transform e opacity; con meno movimento restano le dissolvenze.
   ════════════════════════════════════════════════════════════════════════ */

.icona--freccia-destra { --i: url("/assets/img/icone/icona-freccia-destra.png"); }

/* ── la classe energetica: i colori convenzionali dell'APE, dalla A4 verde alla G rossa (Copy/scheda-immobile.md,
   riga 124). Stanno sul componente e non in :root: non sono colori del sito, sono la scala di legge. Testo bianco o
   navy secondo il contrasto. A+ e A sono le classi della scala di prima del 2015: fuori dai 10 gradini. ── */
.ape--a4 { --ape: #006B33; --ape-testo: #FFFFFF; }
.ape--a3 { --ape: #17803A; --ape-testo: #FFFFFF; }
.ape--a2 { --ape: #3EA548; --ape-testo: #050B3F; }
.ape--a1 { --ape: #7DBB42; --ape-testo: #050B3F; }
.ape--b  { --ape: #B5D334; --ape-testo: #050B3F; }
.ape--c  { --ape: #F0E31C; --ape-testo: #050B3F; }
.ape--d  { --ape: #FCBC16; --ape-testo: #050B3F; }
.ape--e  { --ape: #F7941E; --ape-testo: #050B3F; }
.ape--f  { --ape: #EE5A24; --ape-testo: #050B3F; }
.ape--g  { --ape: #D8202A; --ape-testo: #FFFFFF; }
.ape--a-piu, .ape--a { --ape: #006B33; --ape-testo: #FFFFFF; }

/* il bollino: «Classe» e la lettera nel riquadro del suo colore (card, riassunto della visita, scheda) */
.ape-bollino { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.ape-bollino__lettera {
  display: inline-grid; place-items: center;
  min-width: 24px; height: 20px; padding: 0 5px;
  border-radius: 4px;
  background: var(--ape); color: var(--ape-testo);
  font-size: 12px; font-weight: 700; letter-spacing: 0; line-height: 1;
}
.ape-bollino--grande { font-size: 16px; font-weight: 600; color: var(--navy); gap: 10px; }
.ape-bollino--grande .ape-bollino__lettera { min-width: 40px; height: 32px; padding: 0 8px; border-radius: 6px; font-size: 17px; }
.ape-lettera {
  display: inline-grid; place-items: center;
  min-width: 1.6em; padding: 0 .28em;
  border-radius: 6px;
  background: var(--ape); color: var(--ape-testo);
  font-size: .8em; line-height: 1.35;
}

/* la scala dei 10 gradini: il gradino della classe più alto, con la lettera; senza classe, tenue */
.ape { margin: 2px 0 20px; }
.ape__testa { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 18px; margin-bottom: 16px; }
.ape__indice { color: var(--navy); font-size: 16px; font-weight: 600; font-variant-numeric: tabular-nums; }
.ape__scala {
  display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); align-items: end; gap: 4px;
  height: 58px; margin: 0; padding: 0; list-style: none;
}
.ape__gradino {
  height: 34px; border-radius: 4px;
  display: grid; place-items: center;
  background: var(--ape); color: var(--ape-testo);
  font-size: 12px; font-weight: 600; line-height: 1;
  transform-origin: 50% 100%;
}
.ape__gradino span { opacity: .8; }
.ape__gradino.attivo { height: 58px; font-size: 19px; font-weight: 700; box-shadow: 0 10px 22px -12px rgba(5, 11, 63, .55); }
.ape__gradino.attivo span { opacity: 1; }
.ape--tenue .ape__gradino { opacity: .3; }
.ape--tenue .ape__scala { height: 34px; }
/* il gradino attivo entra una volta, quando la sezione arriva: cresce dall'altezza degli altri (scaleY, 300 ms) */
.ape__gradino.attivo { transition: transform .3s var(--ease-out) .35s; }
.js .reveal:not(.in) .ape__gradino.attivo { transform: scaleY(.59); }

/* ── la card degli immobili (P3.2): luogo, titolo, dati brevi, prezzo, piede col filetto; i piedi allineati ── */
.scheda-immobile__corpo { flex: 1 1 auto; gap: 8px; padding: 18px 22px 0; }
.scheda-immobile__corpo .luogo { font-size: 13.5px; line-height: 1.35; }
.scheda-immobile__corpo .luogo .icona { width: 15px; height: 15px; }
.scheda-immobile__titolo { margin: 0; font-size: clamp(19px, .35vw + 15px, 21px); line-height: 1.25; }
/* i puntini fra le voci: ognuna ha il suo davanti, e quello a inizio riga resta fuori (clip-path), anche quando la
   riga va a capo nelle schede strette */
.dati-brevi {
  --sep: 8px;
  display: flex; flex-wrap: wrap; align-items: center; row-gap: 6px;
  margin: 2px 0 0 calc(-3px - 2 * var(--sep)); padding: 0; list-style: none;
  clip-path: inset(0 0 0 calc(3px + 2 * var(--sep)));
  font-size: 14px; color: var(--testo); font-variant-numeric: tabular-nums;
}
.schede-immobili .dati-brevi li, .dati-brevi li { display: block; flex: none; white-space: nowrap; scroll-snap-align: none; }
.dati-brevi li::before {
  content: ""; display: inline-block; vertical-align: middle; position: relative; top: -1px;
  width: 3px; height: 3px; margin: 0 var(--sep); border-radius: 50%; background: currentColor; opacity: .55;
}
.dati-brevi .ape-bollino { color: var(--testo); }
.scheda-immobile .prezzo {
  margin: 6px 0 14px;
  color: var(--navy); font-size: clamp(21px, .45vw + 16px, 24px); font-weight: 700; letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.scheda-immobile .prezzo span { font-size: inherit; font-weight: inherit; color: inherit; }
.scheda-immobile__piede { display: flex; margin-top: auto; padding: 14px 0 18px; border-top: 1px solid var(--bordo); }
.scheda-immobile__piede .link-freccia { font-size: 15.5px; }

/* ── la testa della scheda: briciole, prezzo con Salva · Condividi · Stampa, fascia dei dati chiave ── */
.scheda-testa__nav { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 6px 28px; }
.briciole__voci { display: flex; flex-wrap: wrap; align-items: center; margin: 0; padding: 0; list-style: none; font-size: 14px; color: var(--testo-tenue); }
.briciole__voci li { display: inline-flex; align-items: center; min-width: 0; }
.briciole a {
  padding: 8px 0; color: var(--testo);
  text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 3px;
  transition: color .2s ease, text-decoration-color .2s ease;
}
.briciole a:active { color: var(--blu-testo); }
@media (hover: hover) and (pointer: fine) { .briciole a:hover { color: var(--blu-testo); text-decoration-color: currentColor; } }
.briciole__sep { width: 12px; height: 12px; margin: 0 10px; color: var(--testo-tenue); opacity: .75; }
.briciole__qui { max-width: 38ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--navy); font-weight: 500; }
.scheda-testa__riga { margin-top: 14px; }
.scheda-testa__testo { max-width: 780px; }

.scheda-testa__prezzi { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 28px; margin-top: 16px; }
.scheda-testa__prezzi .scheda-testa__prezzo { margin-top: 0; }
.prezzo--grande { font-size: clamp(28px, 1vw + 18px, 34px); font-variant-numeric: tabular-nums; }
.prezzo--grande .maiuscola { font-size: inherit; font-weight: inherit; color: inherit; }

.azioni-scheda { position: relative; display: flex; align-items: center; gap: 6px; }
.azione {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 40px; padding: 8px 14px;
  border: 1px solid var(--bordo-campo); border-radius: 999px;
  background: var(--bianco); color: var(--navy);
  font-size: 14px; font-weight: 500; line-height: 1;
  -webkit-user-select: none; user-select: none;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease, transform .16s var(--ease-out);
}
.azione .icona { width: 16px; height: 16px; color: var(--blu-icona); transition: color .2s ease; }
.azione:active { transform: scale(0.97); }
.azione[aria-pressed="true"] { background: var(--blu); border-color: var(--blu); color: var(--bianco); }
.azione[aria-pressed="true"] .icona { color: var(--bianco); }
.azione.batte .icona { animation: batte .28s var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .azione:not([aria-pressed="true"]):hover { border-color: #A9C6E4; background: var(--ricerca); }
}
.azione__avviso {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 3;
  padding: 7px 12px; border-radius: var(--raggio);
  background: var(--navy); color: var(--bianco);
  font-size: 13.5px; font-weight: 500; white-space: nowrap;
  opacity: 0; pointer-events: none;
  transition: opacity .2s ease;
}
.azione__avviso.visibile { opacity: 1; }
.azione__avviso:not(.visibile) { transition-duration: .15s; }

.fascia-dati { display: flex; flex-wrap: wrap; width: fit-content; max-width: 100%; margin: 24px 0 0; padding: 0; list-style: none; }
.fascia-dati__voce { display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 0 28px; border-left: 1px solid var(--divisore); }
.fascia-dati__voce:first-child { padding-left: 0; border-left: 0; }
.fascia-dati__numero {
  color: var(--navy); font-size: clamp(24px, .7vw + 16px, 30px); font-weight: 700; letter-spacing: -0.02em; line-height: 1.1;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.fascia-dati__etichetta { font-size: 14px; line-height: 1.3; color: var(--testo-tenue); }
.link-chiedi + .fascia-dati, .scheda-testa__prezzi + .fascia-dati { margin-top: 24px; }

/* ── la galleria: il pulsante sopra la foto, e da telefono il contatore con la barra ── */
.galleria-box { position: relative; }
.galleria__conto { display: none; }
.avanzamento { display: block; height: 3px; border-radius: 2px; background: var(--bordo); overflow: hidden; }
.avanzamento__barra {
  display: block; height: 100%; width: 100%;
  background: var(--blu); border-radius: inherit;
  transform-origin: 0 50%; transform: scaleX(0);
  transition: transform .2s var(--ease-out);
}
.avanzamento--riga { display: none; }

/* ── la galleria a tutto schermo (P3.7): la traccia segue il dito, una foto per schermata ── */
.lightbox { background: transparent; }
.lightbox__fondo { position: fixed; inset: 0; background: rgba(5, 11, 63, .97); }
.lightbox__dentro { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; place-items: stretch; padding: 0; }
.lightbox__testa {
  position: relative; z-index: 1;
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 10px 22px;
  min-height: 72px; padding: 14px 80px 8px;
  padding-top: calc(14px + env(safe-area-inset-top, 0px));
}
.lightbox__conto { position: static; transform: none; font-size: 15px; opacity: .85; font-variant-numeric: tabular-nums; }
.lightbox__schede { display: flex; gap: 6px; }
.lightbox__scheda {
  min-height: 40px; padding: 8px 16px; border: 0; border-radius: 999px;
  background: rgba(255, 255, 255, .1); color: var(--bianco);
  font-size: 14px; font-weight: 500;
  transition: background-color .2s ease, color .2s ease, transform .16s var(--ease-out);
}
.lightbox__scheda:active { transform: scale(0.97); }
.lightbox__scheda[aria-pressed="true"] { background: var(--bianco); color: var(--navy); }
@media (hover: hover) and (pointer: fine) { .lightbox__scheda:not([aria-pressed="true"]):hover { background: rgba(255, 255, 255, .2); } }
.lightbox__traccia {
  display: flex; min-height: 0; margin: 0; padding: 0; list-style: none;
  overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory; overscroll-behavior: contain;
  scrollbar-width: none;
  touch-action: pan-x;
}
.lightbox__traccia::-webkit-scrollbar { display: none; }
.lightbox__traccia .lightbox__voce {
  flex: 0 0 100%; min-width: 0; height: 100%;
  /* P8: una riga e una colonna 1fr. Con la riga «auto» l'altezza al 100 % della figura non valeva, la foto si
     allargava fino al bordo e da computer ne finiva un terzo sotto le miniature */
  display: grid; grid-template: minmax(0, 1fr) / minmax(0, 1fr); place-items: center;
  padding: 6px 80px;
  scroll-snap-align: center; scroll-snap-stop: always;
}
.lightbox__traccia .lightbox__voce figure { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; }
.lightbox__traccia .lightbox__voce img {
  max-width: 100%; max-height: calc(100% - 36px); width: auto; height: auto; object-fit: contain;
  border-radius: 6px; animation: none;
  opacity: 0; transition: opacity .2s ease;
  -webkit-user-drag: none; -webkit-user-select: none; user-select: none;
}
.lightbox__traccia .lightbox__voce figure:not(:has(figcaption)) img { max-height: 100%; }
.lightbox__traccia .lightbox__voce img.pronta { opacity: 1; }
.lightbox__voce--pianta img { background: var(--bianco); }
.lightbox__miniature {
  display: flex; gap: 8px; margin: 0; padding: 12px 20px; list-style: none;
  padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  overflow-x: auto; scrollbar-width: none; scroll-padding-inline: 20px;
}
.lightbox__miniature::-webkit-scrollbar { display: none; }
.lightbox__miniature li { flex: none; }
.lightbox__miniature li:first-child { margin-left: auto; }
.lightbox__miniature li:last-child { margin-right: auto; }
.lightbox__mini {
  display: block; width: 72px; height: 54px; padding: 0; border: 0; border-radius: 5px; overflow: hidden;
  background: rgba(255, 255, 255, .08);
  opacity: .5;
  transition: opacity .2s ease, transform .16s var(--ease-out), box-shadow .2s ease;
}
.lightbox__mini img { width: 100%; height: 100%; object-fit: cover; }
.lightbox__mini--pianta img { object-fit: contain; background: var(--bianco); }
.lightbox__mini:active { transform: scale(0.95); }
.lightbox__mini[aria-current="true"] { opacity: 1; box-shadow: inset 0 0 0 2px var(--bianco); }
@media (hover: hover) and (pointer: fine) { .lightbox__mini:not([aria-current="true"]):hover { opacity: .8; } }
.lightbox__tasto { z-index: 2; }
.lightbox__tasto[aria-disabled="true"] { opacity: .3; cursor: default; }
.lightbox__chiudi { z-index: 2; top: calc(10px + env(safe-area-inset-top, 0px)); right: 12px; }
/* trascinando in giù la foto si sposta col dito e il fondo sfuma; sotto la soglia torna su in 200 ms */
.lightbox__voce figure.torna { transition: transform .2s var(--ease-out); }
.lightbox__fondo.torna { transition: opacity .2s ease; }

/* ── la visita sempre a portata di mano (P3.8): da computer resta in vista fino al footer ──
   P8: niente più riquadro che scorre dentro di sé (il pulsante «Invia la richiesta» restava nascosto). Il riquadro è
   intero: se ci sta nella finestra, resta incollato sotto la testata; se è più alto (portatili con la finestra bassa)
   main.js gli mette .visita--libera e scorre con la pagina, così nessun campo finisce sotto la testata. Senza
   JavaScript resta nel flusso della pagina. */
.scheda-corpo__griglia { grid-template-areas: "testo visita" "dopo dopo"; row-gap: 64px; }   /* «Altri immobili» e «Hai un immobile simile?» a tutta larghezza: la visita resta accanto al testo (collaudo step 7) */
.scheda-corpo__testo { grid-area: testo; min-width: 0; }
.scheda-corpo__visita {
  grid-area: visita; align-self: start;
  position: sticky; top: var(--cima-visita, calc(var(--altezza-testata) + 24px));
  border-radius: var(--raggio-riquadro);
}
html:not(.js) .scheda-corpo__visita, .scheda-corpo__visita.visita--libera { position: static; }
.scheda-corpo__dopo { grid-area: dopo; min-width: 0; display: flex; flex-direction: column; gap: 48px; }
.visita__riassunto { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; padding-bottom: 18px; border-bottom: 1px solid #CDE6F4; }
.visita__foto { flex: none; width: 88px; height: 66px; border-radius: 6px; overflow: hidden; background: var(--ricerca); }
.visita__foto img { width: 100%; height: 100%; object-fit: cover; }
.visita__dati { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.visita__prezzo { color: var(--navy); font-size: 21px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; font-variant-numeric: tabular-nums; }
.visita__dati .dati-brevi { --sep: 7px; margin-top: 0; margin-bottom: 0; font-size: 13.5px; }

/* ── gli altri immobili, nella colonna del testo ── */
.altri-immobili .sezione__testa { align-items: center; margin-bottom: 22px; }
.altri-immobili .sezione__testa .btn { min-height: 46px; padding: 10px 20px; font-size: 15px; }
.schede-immobili--simili { grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); gap: 16px; }
.schede-immobili--simili.schede-immobili--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.schede-immobili--simili.schede-immobili--1 { grid-template-columns: minmax(0, 420px); }
.schede-immobili--simili .scheda-immobile__corpo { padding-inline: 18px; }
.schede-immobili--simili .scheda-immobile__titolo { font-size: 18px; }
.schede-immobili--simili .scheda-immobile .prezzo { font-size: 20px; }
.schede-immobili--simili .dati-brevi { font-size: 13.5px; }
.schede-immobili--simili .dati-brevi { --sep: 7px; }
.scheda-corpo__dopo .simile { padding: 28px 32px; }
.scheda-corpo__dopo .simile .link-freccia { margin-top: 0; }
/* da computer «Altri immobili» sta a tutta larghezza sotto testo e visita: la griglia a 3 colonne della home, con le
   schede della stessa misura, qualunque sia il numero (1-3) */
@media (min-width: 1100px) {
  .scheda-corpo__dopo .schede-immobili--simili,
  .scheda-corpo__dopo .schede-immobili--simili.schede-immobili--1,
  .scheda-corpo__dopo .schede-immobili--simili.schede-immobili--2 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
}
.altri-immobili__torna { margin-top: 22px; }

/* ── la barra fissa da telefono della scheda: due pulsanti al 50 % ── */
.cta-fissa--doppia { display: none; }

@media (max-width: 1099px) {
  .scheda-corpo__griglia { grid-template-areas: none; row-gap: 40px; }
  .scheda-corpo__testo, .scheda-corpo__visita, .scheda-corpo__dopo { grid-area: auto; }
  .scheda-corpo__visita { position: static; max-height: none; overflow: visible; }
  .visita__riassunto { display: none; }
  .schede-immobili--simili, .schede-immobili--simili.schede-immobili--2 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 699px) {
  /* le briciole: senza il titolo (è l'h1 qui sotto); «Torna alla ricerca» sopra */
  .scheda-testa__nav { flex-direction: column-reverse; align-items: flex-start; gap: 0; }
  .briciole__voci li:last-child { display: none; }
  .briciole__voci li:nth-last-child(2) .briciole__sep { display: none; }
  .briciole a { padding: 10px 0; }
  .scheda-testa__riga { margin-top: 10px; }
  .scheda-testa__prezzi { gap: 12px; margin-top: 14px; }
  .azione { min-height: 44px; padding: 8px 13px; }

  /* la fascia dei dati chiave: una griglia 3 + 2 */
  .fascia-dati { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; row-gap: 16px; margin-top: 20px; }
  .fascia-dati__voce { padding: 0 0 0 14px; }
  .fascia-dati__voce:nth-child(3n + 1) { padding-left: 0; border-left: 0; }
  .fascia-dati__numero { font-size: 23px; }
  .fascia-dati__etichetta { font-size: 13.5px; }

  /* la galleria: TUTTE le foto in fila, «Vedi tutte le foto» sopra la prima, il contatore e la barra sotto */
  .galleria__altre { display: none; }
  .galleria-box .galleria__tutte { position: absolute; left: auto; right: calc(14% + 12px); bottom: 12px; margin: 0; min-height: 44px; padding: 8px 14px; font-size: 14px; }
  .galleria--1 + .galleria__tutte { right: 12px; }
  .galleria__conto { display: flex; align-items: center; gap: 14px; margin-top: 12px; font-size: 14px; color: var(--testo); }
  .galleria__numeri { flex: none; min-width: 4.5ch; font-variant-numeric: tabular-nums; }
  .galleria__conto .avanzamento { flex: 1 1 auto; }
  .miniature { display: none; }

  .ape__scala { gap: 3px; height: 52px; }
  .ape__gradino { height: 30px; font-size: 10.5px; }
  .ape__gradino.attivo { height: 52px; font-size: 16px; }
  .js .reveal:not(.in) .ape__gradino.attivo { transform: scaleY(.58); }
  .ape__indice { font-size: 15px; }

  /* gli altri immobili: una riga che scorre, 1,15 schede in vista, e la barra sotto */
  ul.schede-immobili--simili > li { flex-basis: 86%; }
  .avanzamento--riga { display: block; margin-top: 14px; }
  .avanzamento--riga.ferma { display: none; }
  .altri-immobili .sezione__testa .btn { width: 100%; }
  .scheda-corpo__dopo { gap: 36px; }
  .scheda-corpo__dopo .simile { padding: 24px 18px; }

  .lightbox__testa { min-height: 60px; padding: 10px 60px 6px 16px; padding-top: calc(10px + env(safe-area-inset-top, 0px)); justify-content: flex-start; gap: 8px 14px; }
  .lightbox__traccia .lightbox__voce { padding: 4px 0; }
  .lightbox__traccia .lightbox__voce img { border-radius: 0; }
  .lightbox__traccia .lightbox__voce figcaption { padding-inline: 16px; }
  .lightbox__tasto { display: none; }
  .lightbox__mini { width: 56px; height: 42px; }
  .lightbox__miniature { padding: 10px 16px; padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px)); }

  .cta-fissa.cta-fissa--doppia {
    display: flex; gap: 8px;
    padding: 8px; min-height: 0;
    border-radius: 12px;
    background: rgba(255, 255, 255, .97); color: var(--navy);
    box-shadow: 0 14px 34px -12px rgba(5, 11, 63, .45), 0 0 0 1px var(--bordo);
  }
  .cta-fissa--doppia .btn { flex: 1 1 0; min-width: 0; min-height: 48px; padding: 10px 8px; font-size: 15px; white-space: nowrap; }
  .cta-fissa--doppia .btn--contorno { font-weight: 600; font-variant-numeric: tabular-nums; }
  .cta-fissa--doppia.visibile:active { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .js .reveal:not(.in) .ape__gradino.attivo { transform: none; }
  .avanzamento__barra { transition: none; }
  .azione.batte .icona { animation: none; }
  .lightbox__voce figure.torna { transition: none; }
}

/* ── il foglio di stampa (P3.10): una pagina A4 col logo, la foto principale, i dati, la classe e i recapiti;
   senza menu, moduli né barra fissa ── */
@media print {
  @page { size: A4; margin: 10mm 14mm; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html, body { background: #FFFFFF !important; }
  body { font-size: 10.5pt; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .js .reveal:not(.in), .js .reveal-gruppo:not(.in) > * { opacity: 1 !important; transform: none !important; }
  .salta, .menu, .hamburger, .cta-fissa, .piede, .lightbox, .scheda-testa__nav, .scheda-testa__azioni, .azioni-scheda,
  .link-chiedi, .galleria__tutte, .galleria__conto, .galleria__altre, .miniature, .galleria--vuota, .scheda-corpo__visita,
  .scheda-corpo__dopo, .caption, .scheda-corpo__testo > .scheda-blocco:not(.scheda-blocco--classe):not(.chiedi) { display: none !important; }
  .testata { position: static; border: 0; border-bottom: .3mm solid var(--bordo); box-shadow: none !important; padding: 0; margin-bottom: 4mm; }
  .testata__riga { height: auto; padding: 0 0 3mm; }
  .logo img { height: 14mm; width: auto; }
  .contenitore, .contenitore--interno { max-width: none; padding: 0 !important; }
  .scheda-testa { padding: 0; }
  .scheda-testa__riga { display: block; margin: 0; }
  .titolo-pagina--scheda { font-size: 20pt; max-width: none; }
  .luogo--grande { margin-top: 2mm; font-size: 10.5pt; }
  .scheda-testa__prezzi { margin-top: 3mm; }
  .prezzo--grande { font-size: 18pt; }
  .fascia-dati { margin-top: 4mm; }
  .fascia-dati__numero { font-size: 16pt; }
  .galleria-box { margin-top: 4mm; }
  .galleria { display: block !important; height: auto !important; }
  .galleria__foto { display: none !important; }
  .galleria__foto--grande { display: block !important; width: 100%; height: 66mm; border-radius: 3mm; }
  .galleria__foto--grande img { width: 100%; height: 100%; object-fit: cover; transform: none !important; }
  .scheda-corpo { padding-top: 5mm; }
  .scheda-corpo__griglia { display: block; }
  .scheda-corpo__testo { gap: 4mm; }
  .scheda-blocco__titolo { font-size: 13pt; margin-bottom: 3mm; }
  .ape { margin-bottom: 3mm; }
  .ape__scala { height: 12mm; }
  .ape__gradino { height: 7mm; }
  .ape__gradino.attivo { height: 12mm; box-shadow: none; }
  .caratteristiche { font-size: 9.5pt; }
  .caratteristiche th, .caratteristiche td { padding: 1.5mm 0; }
  .nota-classe { margin-top: 2mm; font-size: 8.5pt; }
  .chiedi { padding: 4mm 5mm; break-inside: avoid; }
  .chiedi .testo-medio, .chiedi .recapiti { font-size: 10pt; }
  .chiedi .recapiti { gap: 1mm; margin-top: 2mm; }
  a { color: inherit !important; text-decoration: none !important; }
}

/* ════════════════════════════════════════════════════════════════════════
   P4 · /IMMOBILI COME UN PORTALE (21/10/2026) — testata compatta, i filtri col componente della ricerca della home
   (schede con l'indicatore unico, campi e pulsante su una riga, seconda riga più tenue), filtri dal vivo col numero
   che si scambia, pillole dei filtri attivi, «12 di 29», stato vuoto che allenta, una chiusura in due metà; da
   telefono la barra fissa, il pannello dal basso e 2 schede per riga. Si muovono solo transform e opacity.
   ════════════════════════════════════════════════════════════════════════ */

/* ── la testata compatta: briciole, occhiello, titolo e la riga sotto ── */
.testa-pagina--compatta { padding: 34px 0 0; }
.testa-pagina--compatta .briciole { margin-bottom: 16px; animation: appare .5s ease both; }
.testa-pagina--compatta .occhiello { margin-bottom: 12px; animation: entra-su var(--durata-prima) var(--ease-out) both; }
.testa-pagina--compatta .briciole__voci li:last-child { display: inline-flex; }
.testa-pagina--compatta .briciole__voci li:nth-last-child(2) .briciole__sep { display: inline-block; }
.testa-pagina--compatta .testa-pagina__sotto { margin-top: 12px; }
.ricerca-sezione--pagina { margin-top: 28px; animation-delay: .2s; }

/* ── i filtri: lo stesso componente della ricerca della home ── */
label.ricerca__scheda { display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.ricerca__scheda:has(input:checked) { font-weight: 600; }
.ricerca__scheda:has(input:checked)::after { transform: scaleX(1); }
.ricerca__scheda:has(input:focus-visible) { outline: 3px solid var(--blu); outline-offset: -6px; border-radius: 10px; }
.ricerca--pagina .ricerca__testa { margin-bottom: 18px; }
.ricerca--pagina .link-togli { font-size: 15px; }
.btn--cerca [data-mostra-testo] { font-variant-numeric: tabular-nums; }
@media (min-width: 1100px) {
  /* campi e pulsante su UNA riga: Comune, (Zona con Lecco), Tipologia, Prezzo minimo, Prezzo massimo, «Mostra N immobili» */
  .ricerca__campi--pagina { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 16px; }
  .ricerca__campi--pagina > .campo { flex: 1 1 170px; min-width: 0; }
  .ricerca__campi--pagina > .btn--cerca { flex: 0 0 auto; min-width: 248px; }
}
/* la seconda riga, più tenue: Superficie da · Locali da */
.ricerca__altri {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 36px;
  margin-top: 18px; padding-top: 16px; border-top: 1px solid #DCE6F0;
}
.campo--riga { flex-direction: row; align-items: center; gap: 12px; }
.campo--riga label { font-size: 14px; font-weight: 500; color: var(--testo); white-space: nowrap; }
.selezione--piccola select { height: 42px; min-width: 156px; padding: 0 40px 0 14px; font-size: 15px; background: rgba(255, 255, 255, .78); }
.selezione--piccola::after { right: 14px; width: 14px; height: 14px; margin-top: -7px; }

/* ── i risultati: il numero che si scambia, le pillole dei filtri attivi ── */
.numero { display: inline-block; font-variant-numeric: tabular-nums; }
@keyframes scambia { from { opacity: 0; transform: translateY(6px); } }
.numero.scambia { animation: scambia .18s var(--ease-out); }
.risultati__conteggio:focus { outline: none; }
.risultati__sinistra { min-width: 0; }
.pillole-attive { display: contents; }
.pillola--togli, .pillola--togli[aria-pressed="true"] {
  background: var(--azzurro); color: var(--navy);
  box-shadow: inset 0 0 0 1px #BEE3FA;
}
.pillola--togli::after { color: var(--blu-testo); transition: transform .16s var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .pillola--togli:hover, .pillola--togli[aria-pressed="true"]:hover { background: #D6EFFC; color: var(--navy); }
  .pillola--togli:hover::after { transform: scale(1.15); }
}

/* «12 di 29» con la barra, sopra «Mostra altri 12 immobili» */
.risultati__altri { flex-direction: column; align-items: center; gap: 16px; margin-top: 36px; }
.risultati__quanti {
  display: flex; flex-direction: column; align-items: center; gap: 10px; width: min(240px, 100%);
  font-size: 14px; color: var(--testo-tenue); font-variant-numeric: tabular-nums;
}
.risultati__quanti .avanzamento { width: 100%; }
.risultati__quanti .avanzamento__barra { transition: transform .3s var(--ease-out); }

/* ── nessun risultato: i pulsanti che allentano un filtro alla volta, col loro numero ── */
.allenta { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; max-width: 780px; margin: 4px 0 6px; padding: 0; list-style: none; }
.allenta li:has(> button[hidden]) { display: none; }
.allenta__tasto {
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 44px; padding: 7px 8px 7px 18px;
  border: 1px solid var(--bordo-blu); border-radius: 999px;
  background: var(--bianco); color: var(--blu-testo);
  font-size: 15px; font-weight: 500; line-height: 1.2;
  -webkit-user-select: none; user-select: none;
  transition: border-color .2s ease, background-color .2s ease, transform .16s var(--ease-out);
}
.allenta__tasto:active { transform: scale(0.97); }
.allenta__n {
  display: inline-grid; place-items: center; min-width: 28px; height: 28px; padding: 0 8px;
  border-radius: 999px; background: var(--azzurro); color: var(--navy);
  font-size: 13.5px; font-weight: 600; font-variant-numeric: tabular-nums;
}
@media (hover: hover) and (pointer: fine) { .allenta__tasto:hover { border-color: var(--blu); background: var(--ricerca); } }

/* ── una sola chiusura, in due metà (05-sezioni/04): chi cerca a sinistra, chi vende nella metà azzurra col motivo ── */
.chiusura { padding-bottom: 16px; }   /* come la sezione dei contatti: il footer non si incolla */
.due-meta { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); overflow: hidden; isolation: isolate; }
.due-meta__parte { position: relative; display: flex; flex-direction: column; align-items: flex-start; padding: 42px 46px 44px; }
.due-meta__parte .titolo-sezione { max-width: 540px; margin-bottom: 12px; }
.due-meta__parte .testo-medio { max-width: 540px; }
.due-meta__parte .testo-medio + .testo-medio { margin-top: 6px; }
.due-meta__azione { margin-top: auto; padding-top: 28px; }
.due-meta__parte--azzurra { background: var(--azzurro); overflow: hidden; }
.due-meta__parte--azzurra > :not(.motivo) { position: relative; z-index: 1; }
.due-meta__parte--azzurra .motivo { right: -30px; bottom: -104px; width: clamp(240px, 22vw, 320px); }

/* ── il pannello dal basso (<dialog>), da telefono: lo stesso modulo dei filtri ── */
.barra-filtri { display: none; }
.pannello {
  position: fixed; inset: auto 0 0 0;
  width: 100%; max-width: 100%; height: auto; max-height: 88vh; max-height: min(88dvh, 760px);
  margin: 0; padding: 0; border: 0; border-radius: 18px 18px 0 0;
  background: var(--bianco); color: var(--testo);
  box-shadow: 0 -20px 50px -24px rgba(5, 11, 63, .5);
  transform: translateY(100%);
  transition: transform .18s var(--ease-out);
}
.pannello[open] { display: flex; flex-direction: column; }
.pannello.aperto { transform: none; transition-duration: .24s; }
.pannello::backdrop { background: rgba(5, 11, 63, .42); opacity: 0; transition: opacity .18s ease; }
.pannello.aperto::backdrop { opacity: 1; transition-duration: .24s; }
.pannello__testa {
  flex: none; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 12px 12px 20px; border-bottom: 1px solid var(--bordo);
}
.pannello__titolo { color: var(--navy); font-size: 19px; font-weight: 700; letter-spacing: -0.015em; }
.pannello__titolo:focus { outline: none; }
.pannello__chiudi {
  display: grid; place-items: center; width: 44px; height: 44px;
  border: 0; border-radius: 50%; background: var(--pillola); color: var(--navy);
  -webkit-user-select: none; user-select: none;
  transition: transform .16s var(--ease-out), background-color .2s ease;
}
.pannello__chiudi::before {
  content: ""; width: 16px; height: 16px;
  background-image: linear-gradient(45deg, transparent 44%, currentColor 44%, currentColor 56%, transparent 56%),
                    linear-gradient(-45deg, transparent 44%, currentColor 44%, currentColor 56%, transparent 56%);
}
.pannello__chiudi:active { transform: scale(0.94); background: #E2EBF4; }
.pannello__corpo {
  flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  padding: 6px 20px calc(14px + env(safe-area-inset-bottom, 0px));
}
html.pannello-aperto { overflow: hidden; }
/* il modulo dentro il pannello: senza il riquadro, una colonna, il pulsante sempre in vista in fondo */
.pannello .ricerca { display: flex; flex-direction: column; padding: 0; background: none; border: 0; border-radius: 0; box-shadow: none; }
.pannello .ricerca__testa { display: contents; }
.pannello .ricerca__schede { order: 1; display: flex; gap: 0; margin: 0 0 18px; border-bottom: 1px solid #DCE6F0; }
.pannello .ricerca__scheda { flex: 1 1 0; min-height: 52px; padding-inline: 6px; font-size: 16px; white-space: nowrap; }
.pannello .ricerca__campi { display: contents; }
.pannello .ricerca__campi > .campo { order: 2; margin-bottom: 14px; }
.pannello .ricerca__altri { order: 3; margin-top: 2px; }
.pannello .link-togli { order: 4; align-self: center; margin-top: 8px; padding: 10px 0; }
.pannello .btn--cerca {
  order: 5; position: sticky; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); z-index: 2;
  width: 100%; min-height: 54px; margin-top: 18px;
  box-shadow: 0 14px 30px -12px rgba(0, 155, 254, .75);
}

@media (min-width: 1100px) and (max-width: 1279px) {
  .ricerca__campi--pagina > .btn--cerca { min-width: 232px; }
}

@media (max-width: 1099px) {
  .ricerca__campi--pagina > .btn--cerca { grid-column: 1 / -1; }
}

@media (max-width: 899px) {
  .due-meta { grid-template-columns: 1fr; }
}

@media (max-width: 699px) {
  .testa-pagina--compatta { padding-top: 18px; }
  .testa-pagina--compatta .briciole { margin-bottom: 6px; }
  .testa-pagina--compatta .briciole a { padding: 10px 0; }
  .testa-pagina--compatta .occhiello { margin-bottom: 8px; }
  .testa-pagina--compatta .testa-pagina__sotto { margin-top: 10px; font-size: 16px; }

  /* i campi da telefono (nel pannello e, senza JavaScript, in pagina) */
  .ricerca--pagina .ricerca__altri { order: 3; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .ricerca--pagina .link-togli { order: 4; }
  .campo--riga { flex-direction: column; align-items: stretch; gap: 8px; }
  .campo--riga label { color: var(--navy); }
  .selezione--piccola select { height: 50px; min-width: 0; padding: 0 36px 0 12px; font-size: 16px; background: var(--bianco); }
  .selezione--piccola::after { right: 12px; }

  /* la barra fissa sotto la testata: Filtri (N) · Ordina · N immobili */
  .con-pannello .ricerca-sezione--pagina { display: none; }
  .con-pannello .barra-filtri {
    display: block; position: sticky; z-index: 30;
    top: calc(var(--altezza-testata) + 1px + env(safe-area-inset-top, 0px));
    background: rgba(255, 255, 255, .97);
    border-bottom: 1px solid var(--bordo);
  }
  .barra-filtri__dentro {
    display: flex; align-items: center; gap: 8px; min-height: 64px;
    padding: 10px max(var(--margine), env(safe-area-inset-right, 0px)) 10px max(var(--margine), env(safe-area-inset-left, 0px));
  }
  .barra-filtri__tasto {
    position: relative; display: inline-flex; align-items: center; gap: 8px;
    min-height: 44px; padding: 8px 15px;
    border: 1px solid var(--bordo-campo); border-radius: 999px;
    background: var(--bianco); color: var(--navy);
    font-size: 15px; font-weight: 600; line-height: 1; white-space: nowrap;
    -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
    transition: transform .16s var(--ease-out), border-color .2s ease, background-color .2s ease;
  }
  .barra-filtri__tasto .icona { width: 16px; height: 16px; color: var(--blu-icona); }
  .barra-filtri__tasto:active, .barra-filtri__ordina:active .barra-filtri__tasto { transform: scale(0.97); background: var(--ricerca); }
  .barra-filtri__tasto:has(.barra-filtri__n:not([hidden])) { border-color: var(--blu); color: var(--blu-testo); }
  .barra-filtri__n { margin-left: -3px; font-variant-numeric: tabular-nums; }
  .barra-filtri__ordina { position: relative; display: inline-flex; }
  .barra-filtri__ordina .barra-filtri__tasto::after {
    content: ""; width: 12px; height: 12px; background: currentColor;
    -webkit-mask: url("/assets/img/icone/icona-chevron-giu.png") center / contain no-repeat;
    mask: url("/assets/img/icone/icona-chevron-giu.png") center / contain no-repeat;
  }
  .barra-filtri__ordina select {
    position: absolute; inset: 0; width: 100%; height: 100%;
    opacity: 0; border: 0; font-size: 16px; cursor: pointer;
    -webkit-appearance: none; appearance: none;
  }
  .barra-filtri__ordina:has(select:focus-visible) .barra-filtri__tasto { outline: 3px solid var(--blu); outline-offset: 2px; }
  .barra-filtri__conto { margin-left: auto; color: var(--navy); font-size: 15px; font-weight: 700; white-space: nowrap; }

  /* i risultati subito sotto il titolo; il numero è nella barra, l'ordine anche */
  .con-pannello .risultati { padding-top: 6px; }
  .con-pannello .risultati > .contenitore { padding-top: 14px; }
  .con-pannello .risultati__conteggio {
    position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
  }
  .con-pannello .campo--ordina { display: none; }
  .risultati__testa { gap: 10px; margin-bottom: 16px; }
  .risultati__riga {
    flex-wrap: nowrap; gap: 8px; overflow-x: auto; scrollbar-width: none;
    margin: 0 calc(-1 * var(--margine)); padding: 2px var(--margine);
  }
  .risultati__riga::-webkit-scrollbar { display: none; }
  .risultati__riga .pillola { flex: none; min-height: 40px; }
  .con-pannello .risultati__riga:has(button:not([hidden])) { margin-bottom: 10px; }
  .risultati__nota { font-size: 13px; line-height: 1.5; }

  /* P4.5 · due schede per riga, nella forma verticale del design: foto 4:3, titolo su 2 righe, prezzo, dati brevi */
  ul.schede-immobili--elenco { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 10px; }
  .schede-immobili--elenco .scheda-immobile__foto img,
  .schede-immobili--elenco .scheda-immobile__foto .segnaposto { aspect-ratio: 4 / 3; }
  .schede-immobili--elenco .segnaposto picture { width: 46%; }
  .schede-immobili--elenco .etichetta { top: 8px; left: 8px; padding: 3px 9px; font-size: 11.5px; }
  .schede-immobili--elenco .cuore { top: 2px; right: 2px; }
  .schede-immobili--elenco .cuore::before { width: 22px; height: 22px; }
  .schede-immobili--elenco .scheda-immobile__corpo { gap: 5px; padding: 10px 11px 13px; }
  .schede-immobili--elenco .luogo { gap: 5px; font-size: 12px; }
  .schede-immobili--elenco .luogo .icona { width: 13px; height: 13px; }
  .schede-immobili--elenco .luogo span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .schede-immobili--elenco .scheda-immobile__titolo {
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden;
    font-size: 15px; line-height: 1.3; letter-spacing: -0.01em;
  }
  .schede-immobili--elenco .dati-brevi { --sep: 5px; row-gap: 3px; font-size: 12px; }
  .schede-immobili--elenco .ape-bollino { gap: 4px; }
  .schede-immobili--elenco .ape-bollino__lettera { min-width: 20px; height: 17px; padding: 0 4px; font-size: 10.5px; }
  .schede-immobili--elenco .prezzo { margin: 2px 0 0; font-size: 16.5px; letter-spacing: -0.015em; }
  .schede-immobili--elenco .scheda-immobile__piede { display: none; }

  .risultati__altri .btn { width: 100%; }
  .nessun-risultato { padding: 28px 18px; }
  .allenta { gap: 8px; }
  .allenta__tasto { font-size: 14.5px; padding-left: 14px; }

  .due-meta__parte { padding: 26px 20px 24px; }
  .due-meta__azione { width: 100%; padding-top: 22px; }
  .due-meta__azione .btn { width: 100%; }
  .due-meta__parte--azzurra .motivo { right: -24px; bottom: -70px; width: 180px; }
}

/* meno movimento: il pannello compare in dissolvenza, i numeri sfumano, niente spostamenti */
@media (prefers-reduced-motion: reduce) {
  .pannello, .pannello.aperto { transform: none; }
  .pannello { opacity: 0; transition: opacity .18s ease; }
  .pannello.aperto { opacity: 1; }
  .numero.scambia { animation-name: appare; }
  .testa-pagina--compatta .occhiello { animation-name: appare; }
  .risultati__quanti .avanzamento__barra { transition: none; }
}

@media print {
  .barra-filtri, .pannello { display: none !important; }
}

/* ════════════════════════════════════════════════════════════════════════
   P5 · PAGINE INTERNE CON LA FIRMA DELLA HOME (21/10/2026) — la testata divisa (briciole, occhiello, titolo a due
   pesi, pulsante; a destra un oggetto del kit), i moduli nella forma «Vendi con noi» con la colonna sticky e il
   telefono grande, l'indice dei servizi e la barra che segue la lettura, le schede «Più di un'agenzia», il valore
   coi numeri della guida, la scala APE piccola, la scheda d'esempio con le etichette, «Cosa trattiamo» nella forma
   «Immobili commerciali», il riquadro «La nostra agenzia», la scheda dei recapiti col motivo, la 404.
   Si muovono solo transform e opacity, al massimo 600 ms; con meno movimento restano le dissolvenze.
   ════════════════════════════════════════════════════════════════════════ */
@keyframes entra-oggetto { from { opacity: 0; transform: translateY(var(--spostamento-entrata)); } }
@keyframes entra-voce { from { opacity: 0; transform: translateY(12px); } }
@keyframes assesta-foto { from { opacity: 0; transform: scale(1.04); } }

/* ── P5.1 · la testata divisa ── */
.testa-divisa { padding: 34px 0 0; }
.testa-divisa .briciole { margin-bottom: 22px; animation: appare .4s ease both; }
/* qui la pagina è corta («Valutazione», «Contatti»): resta anche da telefono, dove la scheda dell'immobile la toglie */
.testa-divisa .briciole__voci li:last-child { display: inline-flex; }
.testa-divisa .briciole__voci li:nth-last-child(2) .briciole__sep { display: inline-block; }
/* un numero di telefono non va mai a capo a metà */
a[href^="tel:"] { white-space: nowrap; }
.testa-divisa__griglia {
  display: grid; grid-template-columns: minmax(0, 1.04fr) minmax(0, 1fr);
  gap: 40px 64px; align-items: center;
}
.testa-divisa--larga .testa-divisa__griglia { grid-template-columns: minmax(0, 500px) minmax(0, 1fr); }
.testa-divisa__testo { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; }
.testa-divisa .occhiello { margin-bottom: 14px; animation: entra-su .6s var(--ease-out) .02s both; }
.testa-divisa .titolo-pagina { animation: entra-su .6s var(--ease-out) .06s both; }
.testa-divisa .testa-pagina__sotto, .testa-divisa .elenco-segni { animation: entra-su .6s var(--ease-out) .12s both; }
.testa-divisa .testa-pagina__sotto + .testa-pagina__sotto { margin-top: 10px; }
.testa-divisa .hero__azioni { margin-top: 30px; animation: entra-su .6s var(--ease-out) .18s both; }
.testa-divisa__oggetto { min-width: 0; animation: entra-oggetto .6s var(--ease-out) .1s both; }

/* 3 Step, voce 7 (24/10/2026): il racconto del cliente nella testata di /chi-siamo, sotto il titolo, e la sua riga finale
   in evidenza come lo slogan della home (le maiuscole con le grazie e il corsivo azzurro), allineata al testo */
.testa-pagina__racconto { max-width: 760px; animation: entra-su .6s var(--ease-out) .12s both; }
.testa-pagina__racconto p { margin-top: 12px; font-size: clamp(16px, .3vw + 13px, 18px); line-height: 1.6; color: var(--testo); }
.testa-pagina__racconto p:first-child { margin-top: 16px; }
.slogan--testa { padding: 0; margin-top: 22px; text-align: left; animation: entra-su .6s var(--ease-out) .16s both; }
.slogan--testa .slogan__dritto { display: block; font-size: clamp(13px, .3vw + 11px, 15px); }
.slogan--testa .slogan__corsivo { display: block; margin-top: 4px; font-size: clamp(21px, .6vw + 15px, 25px); white-space: normal; }
.testa-divisa .slogan--testa + .testa-pagina__sotto { margin-top: 18px; }
/* col racconto la colonna del testo è lunga: da computer la foto parte in alto, all'altezza del titolo, e resta in vista
   mentre si legge (non più a metà, centrata sul testo) */
@media (min-width: 1100px) {
  .testa-divisa__griglia:has(.testa-pagina__racconto) { align-items: start; }
  .testa-divisa__griglia:has(.testa-pagina__racconto) .testa-divisa__oggetto { position: sticky; top: calc(var(--altezza-testata) + 32px); margin-top: 40px; }
}

/* la foto del kit con la didascalia della hero: la foto si assesta, la lineetta si allunga */
.testa-divisa__foto picture { display: block; border-radius: var(--raggio-scheda); overflow: hidden; background: var(--ricerca); }
.testa-divisa__foto img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; animation: assesta-foto .6s var(--ease-out) .1s both; }
.testa-divisa--larga .testa-divisa__foto img { aspect-ratio: 2.4 / 1; object-position: 50% 17%; }
.testa-divisa__foto .didascalia { margin-top: 14px; font-size: 15px; gap: 16px; animation: appare .5s ease .35s both; }
.testa-divisa__foto .didascalia::before { animation-delay: .4s; }

/* ── P5.3 · l'indice visivo dei servizi: i cerchi dei badge del kit, col nome ── */
.indice-servizi { padding: 30px 22px; border: 1px solid #DCE6F0; border-radius: var(--raggio-riquadro); background: var(--ricerca); }
.indice-servizi__voci { display: flex; flex-wrap: wrap; justify-content: center; row-gap: 26px; margin: 0; padding: 0; }
.indice-servizi__voci > li { flex: 0 0 25%; display: flex; justify-content: center; min-width: 0; animation: entra-voce .4s var(--ease-out) both; }
.indice-servizi__voci > li:nth-child(1) { animation-delay: .2s; }
.indice-servizi__voci > li:nth-child(2) { animation-delay: .24s; }
.indice-servizi__voci > li:nth-child(3) { animation-delay: .28s; }
.indice-servizi__voci > li:nth-child(4) { animation-delay: .32s; }
.indice-servizi__voci > li:nth-child(5) { animation-delay: .36s; }
.indice-servizi__voci > li:nth-child(6) { animation-delay: .4s; }
.indice-servizi__voci > li:nth-child(7) { animation-delay: .44s; }
.indice-servizi__voce {
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  width: 100%; max-width: 156px; padding: 4px 6px 6px;
  border-radius: var(--raggio);
  color: var(--navy); font-size: 15px; font-weight: 600; line-height: 1.3; letter-spacing: -0.005em; text-align: center;
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
  transition: transform .16s var(--ease-out), color .2s ease;
}
.indice-servizi .cerchio { width: 64px; height: 64px; background: var(--bianco); box-shadow: 0 6px 16px -12px rgba(5, 11, 63, .5); transition: background-color .2s ease, color .2s ease; }
.indice-servizi .cerchio .icona { width: 29px; height: 29px; transition: transform .25s var(--ease-out); }
.indice-servizi__voce:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) {
  .indice-servizi__voce:hover { color: var(--blu-testo); }
  .indice-servizi__voce:hover .cerchio { background: var(--blu); color: var(--bianco); }
  .indice-servizi__voce:hover .cerchio .icona { transform: translateY(-2px); }
}

/* la barra sottile sotto la testata: compare quando l'indice esce dallo schermo e accende il servizio che si legge */
.barra-servizi {
  position: fixed; z-index: 45; left: 0; right: 0;
  top: calc(var(--altezza-testata) + 1px + env(safe-area-inset-top, 0px));
  background: rgba(255, 255, 255, .97);
  border-bottom: 1px solid var(--bordo);
  box-shadow: 0 10px 24px -20px rgba(5, 11, 63, .45);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .15s ease, transform .15s var(--ease-out), visibility 0s linear .15s;
}
.barra-servizi.vista { opacity: 1; visibility: visible; transform: none; transition: opacity .2s ease, transform .25s var(--ease-out), visibility 0s; }
html:not(.js) .barra-servizi { display: none; }
.barra-servizi__dentro {
  max-width: calc(var(--larghezza) + 2 * var(--margine)); margin-inline: auto;
  padding-inline: max(calc(var(--margine) + var(--interno)), env(safe-area-inset-left, 0px));
}
.barra-servizi__voci { display: flex; gap: 30px; margin: 0; padding: 0; overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; }
.barra-servizi__voci::-webkit-scrollbar { display: none; }
.barra-servizi__voci > li { flex: none; }
.barra-servizi__voce {
  position: relative; display: inline-flex; align-items: center; min-height: 50px;
  color: var(--testo); font-size: 14.5px; font-weight: 500; white-space: nowrap;
  -webkit-user-select: none; user-select: none;
  transition: color .2s ease;
}
.barra-servizi__voce::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; border-radius: 2px;
  background: var(--blu); transform: scaleX(0); transform-origin: left center;
  transition: transform .25s var(--ease-out);
}
.barra-servizi__voce[aria-current] { color: var(--navy); }
.barra-servizi__voce[aria-current]::after { transform: scaleX(1); }
.barra-servizi__voce:active { color: var(--blu-testo); }
@media (hover: hover) and (pointer: fine) { .barra-servizi__voce:hover { color: var(--navy); } }

/* le schede dei servizi: la valutazione resta la fascia larga col motivo; gli altri nella forma «Più di un'agenzia» */
.servizi-pagina .servizio-scheda--larga {
  position: relative; overflow: hidden; overflow: clip; isolation: isolate;
  grid-template-columns: auto minmax(0, 1fr); column-gap: 28px; row-gap: 8px; align-items: start;
  padding: 34px 40px 36px;
}
.servizi-pagina .servizio-scheda--larga > :not(.motivo) { position: relative; z-index: 1; grid-column: 2; }
.servizi-pagina .servizio-scheda--larga > .cerchio { grid-column: 1; grid-row: 1 / span 3; width: 88px; height: 88px; }
.servizi-pagina .servizio-scheda--larga > .cerchio .icona { width: 38px; height: 38px; }
.servizi-pagina .servizio-scheda--larga .testo-medio { max-width: 640px; }
.servizi-pagina .servizio-scheda--larga .link-freccia { grid-row: auto; justify-self: start; margin-top: 8px; }
.servizi-pagina .servizio-scheda--larga .motivo { right: 4%; bottom: -118px; width: clamp(240px, 23vw, 330px); }
.servizio-scheda, .servizio-voce { scroll-margin-top: 64px; }   /* più lo scroll-padding della pagina (testata + 16 px) */
.servizi-righe { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 48px; margin-top: 56px; }
.servizio-voce { display: flex; align-items: flex-start; gap: 22px; min-width: 0; padding: 0 26px 0 30px; border-left: 1px solid var(--divisore); }
.servizio-voce:nth-child(3n + 1) { padding-left: 0; border-left: 0; }
.cerchio--grande { width: 88px; height: 88px; }
.cerchio--grande .icona { width: 38px; height: 38px; }
.servizio-voce__testo { min-width: 0; padding-top: 6px; }
.servizio-voce__titolo { color: var(--navy); font-size: 21px; font-weight: 650; line-height: 1.25; letter-spacing: -0.015em; margin-bottom: 8px; }
.servizio-voce p { font-size: 16px; line-height: 1.55; color: var(--testo); }
.servizio-voce p + p { margin-top: 8px; }
.servizio-voce .link-freccia { margin-top: 12px; font-size: 16px; }
/* arrivando dall'indice, il cerchio del servizio batte una volta */
.servizio-voce:target .cerchio, .servizio-scheda:target > .cerchio { animation: batte .32s var(--ease-out) .15s; }

/* ── P5.2 · i moduli nella forma «Vendi con noi»: a sinistra, sticky, titolo, testo e telefono; il modulo nella
   scheda bianca a destra. overflow: clip (non hidden) per non spegnere lo sticky ── */
.richiesta {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 520px);
  gap: 40px; align-items: stretch;
  padding: 30px 30px 30px 48px;
  overflow: hidden; overflow: clip; isolation: isolate;
}
.richiesta__lato { position: relative; min-width: 0; }
.richiesta__fisso {
  position: sticky; top: calc(var(--altezza-testata) + 24px); z-index: 1;
  display: flex; flex-direction: column; align-items: flex-start;
  padding: 24px 0 28px;
}
.richiesta__fisso .titolo-sezione { max-width: 580px; margin-bottom: 14px; }
.richiesta__fisso .testo-medio { max-width: 540px; }
.richiesta__fisso > .link-freccia { margin-top: 4px; }
.richiesta__lato .motivo { right: 6%; bottom: -116px; }
.richiesta__scheda { position: relative; z-index: 1; min-width: 0; padding: 32px 32px 28px; box-shadow: 0 12px 34px -26px rgba(5, 11, 63, .35); }
.richiesta__scheda .modulo { padding: 0; }
.richiesta-sezione:last-child { padding-bottom: 16px; }

/* il telefono su una riga grande: la frase del copy davanti, il numero da toccare */
.richiesta__chiama { margin-top: 20px; }
.telefono-grande {
  display: inline-flex; align-items: center; gap: 16px;
  min-height: 60px; margin-top: 10px; padding: 10px 22px;
  border: 1px solid #CFE3F0; border-radius: var(--raggio);
  background: var(--bianco); color: var(--navy);
  font-size: clamp(20px, .6vw + 14px, 24px); font-weight: 650; letter-spacing: -0.01em; font-variant-numeric: tabular-nums;
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
  transition: border-color .2s ease, box-shadow .2s ease, transform .16s var(--ease-out);
}
.telefono-grande::after {
  content: ""; flex: none; width: 18px; height: 18px; background: var(--blu-testo);
  -webkit-mask: url("/assets/img/icone/icona-freccia-destra.png") center / contain no-repeat;
  mask: url("/assets/img/icone/icona-freccia-destra.png") center / contain no-repeat;
  transition: transform .25s var(--ease-out);
}
.voci-icona + .telefono-grande { margin-top: 26px; }
.telefono-grande:active { transform: scale(0.98); }
@media (hover: hover) and (pointer: fine) {
  .telefono-grande:hover { border-color: var(--blu); box-shadow: 0 10px 24px -18px rgba(0, 155, 254, .8); }
  .telefono-grande:hover::after { transform: translateX(4px); }
}
.richiesta__icone { margin-top: 30px; }

/* /contatti: le tre voci di «Cosa scrivere», ognuna col suo cerchio */
.voci-icona { display: flex; flex-direction: column; gap: 16px; margin: 18px 0 0; padding: 0; }
.voci-icona li { display: flex; align-items: flex-start; gap: 16px; }
.voci-icona .cerchio { width: 48px; height: 48px; background: var(--bianco); }
.voci-icona .cerchio .icona { width: 22px; height: 22px; }
.voci-icona p { padding-top: 2px; max-width: 470px; font-size: 16.5px; line-height: 1.5; color: var(--testo); }
.voci-icona strong { color: var(--navy); font-weight: 600; }

/* i recapiti come righe da toccare (home, /contatti): l'etichetta piccola, il valore grande, la freccia */
.recapiti-righe { display: flex; flex-direction: column; width: 100%; max-width: 540px; margin: 22px 0 18px; padding: 0; }
.recapiti-righe > li + li { border-top: 1px solid #CFE3F0; }
.recapito {
  display: flex; align-items: center; gap: 14px;
  min-height: 64px; padding: 10px 2px;
  color: var(--navy);
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
  transition: transform .16s var(--ease-out);
}
.recapito__testo { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.recapito__voce { font-size: 12.5px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--testo-tenue); }
.recapito__valore { font-size: 17.5px; font-weight: 600; line-height: 1.35; color: var(--navy); overflow-wrap: anywhere; transition: color .2s ease; }
.recapito--telefono .recapito__valore { font-size: clamp(20px, .6vw + 14px, 24px); font-weight: 650; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.recapito__icona { width: 22px; height: 22px; color: var(--blu-icona); align-self: flex-start; margin-top: 12px; }
.recapito__mappa { margin-top: 4px; font-size: 15px; }
.recapito__mappa::after { width: 14px; height: 14px; }
a.recapito:not(.recapito--via)::after {
  content: ""; flex: none; margin-left: auto; width: 18px; height: 18px; background: var(--blu-testo);
  -webkit-mask: url("/assets/img/icone/icona-freccia-destra.png") center / contain no-repeat;
  mask: url("/assets/img/icone/icona-freccia-destra.png") center / contain no-repeat;
  transition: transform .25s var(--ease-out);
}
a.recapito:active { transform: scale(0.985); }
@media (hover: hover) and (pointer: fine) {
  a.recapito:hover .recapito__valore { color: var(--blu-testo); }
  a.recapito:hover::after { transform: translateX(4px); }
  a.recapito--via:hover .recapito__mappa::after { transform: translate(2px, -2px); }
}

/* ── P5.6 · /contatti: la scheda bianca dei recapiti, col motivo delle due case che sale da dietro ── */
.scheda-recapiti { position: relative; padding-top: 112px; }
.scheda-recapiti .motivo { top: 0; right: 9%; width: clamp(240px, 22vw, 320px); opacity: .5; animation: entra-oggetto .6s var(--ease-out) .25s both; }
.scheda-recapiti__dentro {
  position: relative; z-index: 1; padding: 8px 28px;
  border: 1px solid var(--bordo);
  box-shadow: 0 22px 48px -30px rgba(5, 11, 63, .38);
}
.scheda-recapiti .recapiti-righe { max-width: none; margin: 0; }
.scheda-recapiti .recapiti-righe > li + li { border-top-color: var(--bordo); }
.scheda-recapiti .recapito { min-height: 76px; }
.due-meta__parte > .cerchio { margin-bottom: 18px; }

/* ── P5.4 · /valutazione ── */
/* da cosa dipende il valore: un elenco, ogni voce con la casella numerata della guida al kit; due colonne */
.valore__elenco {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(3, auto); grid-auto-flow: column;
  column-gap: 56px; margin: 4px 0 0; padding: 0;
}
.valore__voce { display: flex; align-items: center; gap: 18px; padding: 12px 0; border-bottom: 1px solid var(--bordo); }
.valore__testo { color: var(--navy); font-size: 18px; font-weight: 500; line-height: 1.4; }
.valore__piede { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px 32px; margin-top: 24px; }

/* la classe energetica: al posto dell'icona, la scala dei 10 gradini in piccolo, che si costruisce una volta */
.riquadro.fascia.fascia--ape { grid-template-columns: minmax(0, 270px) minmax(0, 1fr); gap: 24px 48px; }
.ape--piccola { width: 100%; margin: 0; }
.ape--piccola .ape__scala { height: 34px; gap: 3px; }
.ape--piccola .ape__gradino { height: 34px; font-size: 11.5px; transition: transform .3s var(--ease-out), opacity .3s ease; }
.ape--piccola .ape__gradino span { opacity: 1; }
.js .reveal:not(.in) .ape--piccola .ape__gradino { opacity: 0; transform: scaleY(.4); }
.reveal.in .ape--piccola .ape__gradino:nth-child(2) { transition-delay: 25ms; }
.reveal.in .ape--piccola .ape__gradino:nth-child(3) { transition-delay: 50ms; }
.reveal.in .ape--piccola .ape__gradino:nth-child(4) { transition-delay: 75ms; }
.reveal.in .ape--piccola .ape__gradino:nth-child(5) { transition-delay: 100ms; }
.reveal.in .ape--piccola .ape__gradino:nth-child(6) { transition-delay: 125ms; }
.reveal.in .ape--piccola .ape__gradino:nth-child(7) { transition-delay: 150ms; }
.reveal.in .ape--piccola .ape__gradino:nth-child(8) { transition-delay: 175ms; }
.reveal.in .ape--piccola .ape__gradino:nth-child(9) { transition-delay: 200ms; }
.reveal.in .ape--piccola .ape__gradino:nth-child(10) { transition-delay: 225ms; }

/* dove va l'annuncio: la scheda d'esempio a 380 px e intorno le 4 parole della frase, con la lineetta */
.annuncio { align-items: start; }
.annuncio__esempio { display: grid; grid-template-columns: minmax(0, 1fr) 380px; justify-self: end; width: 100%; max-width: 620px; }
.annuncio__etichette { position: relative; margin: 0; padding: 0; list-style: none; }
.annuncio__etichetta {
  position: absolute; right: 14px; top: var(--y, 50%);
  flex-direction: row-reverse; gap: 12px; margin: 0;
  color: var(--navy); font-size: 15px; font-weight: 500; white-space: nowrap;
  transform: translateY(-50%);
  transition: opacity .4s ease;
}
.annuncio__etichetta[data-indica="foto"] { --y: 27%; }
.annuncio__etichetta[data-indica="titolo"] { --y: 64%; }
.annuncio__etichetta[data-indica="classe"] { --y: 73%; }
.annuncio__etichetta[data-indica="prezzo"] { --y: 81%; }
.annuncio__etichetta::before { width: 56px; transform-origin: right center; animation: none; transition: transform .5s var(--ease-out); }
.js .reveal:not(.in) .annuncio__etichetta { opacity: 0; }
.js .reveal:not(.in) .annuncio__etichetta::before { transform: scaleX(0); }
.reveal.in .annuncio__etichetta:nth-child(2), .reveal.in .annuncio__etichetta:nth-child(2)::before { transition-delay: 80ms; }
.reveal.in .annuncio__etichetta:nth-child(3), .reveal.in .annuncio__etichetta:nth-child(3)::before { transition-delay: 160ms; }
.reveal.in .annuncio__etichetta:nth-child(4), .reveal.in .annuncio__etichetta:nth-child(4)::before { transition-delay: 240ms; }
.annuncio .schede-immobili--una { max-width: 380px; justify-self: auto; }

/* il modulo in 3 passi: «Passo N di 3» con la barra, Avanti e Indietro (main.js); senza JavaScript, un modulo solo */
.passi-modulo { display: flex; flex-direction: column; gap: 10px; margin: -2px 0 4px; }
.passi-modulo__testo { font-size: 14px; font-weight: 500; color: var(--testo-tenue); }
.passi-modulo__testo .numero { color: var(--navy); font-weight: 600; }
.passi-modulo .avanzamento { height: 4px; background: var(--azzurro); }
.passi-modulo .avanzamento__barra { transition: transform .3s var(--ease-out); }
.passo-modulo { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.modulo--a-passi .passo-modulo:not(.attivo) { display: none; }
.modulo--a-passi .passo-modulo.entra { animation: entra-passo .22s var(--ease-out) both; }
.modulo--a-passi .passo-modulo.entra--indietro { animation-name: entra-passo-indietro; }
@keyframes entra-passo { from { opacity: 0; transform: translateX(14px); } }
@keyframes entra-passo-indietro { from { opacity: 0; transform: translateX(-14px); } }
.passi-modulo__tasti { display: flex; gap: 12px; margin-top: 4px; }
.passi-modulo__tasti .btn { flex: 1 1 0; min-height: 54px; }
.passi-modulo__tasti [data-passo-avanti] { flex-grow: 1.6; }
.modulo--a-passi .passo-modulo .modulo__coppia { margin: 0; }

/* ── P5.5 · /chi-siamo ── */
/* «Cosa trattiamo» nella forma «Immobili commerciali» del kit: la foto a sinistra, il testo e le voci a destra */
.tratta__griglia { align-items: center; }
.tratta .commerciale__foto img { aspect-ratio: 4 / 3; }
.tratta .commerciale__testo .testo-medio { max-width: 560px; }
.bottoni-tipo--righe { grid-template-columns: 1fr; gap: 10px; margin: 24px 0 24px; padding: 0; }
.btn-tipo--riga { min-height: 62px; padding: 10px 20px; color: var(--testo); font-size: 16.5px; line-height: 1.4; }
.btn-tipo--riga strong { color: var(--navy); font-weight: 600; }
.btn-tipo__testo { flex: 1 1 auto; min-width: 0; }
.btn-tipo--riga .icona { width: 26px; height: 26px; }

/* «Dove lavoriamo»: comuni e quartieri come pillole con l'icona del kit */
.luoghi--pillole { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 56px; margin-top: 26px; }
.luoghi--pillole .luoghi__titolo { margin-bottom: 14px; }

/* «La nostra agenzia / Parliamo del tuo progetto» (05-sezioni/04): servizi a sinistra, pulsanti a destra, sotto
   la richiesta d'informazioni nella fascia azzurra */
.agenzia-box { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 420px); overflow: hidden; overflow: clip; }
.agenzia-box__testo { padding: 40px 48px 40px 46px; border-right: 1px solid var(--bordo); }
.agenzia-box__testo .titolo-sezione { margin-bottom: 14px; }
.agenzia-box__testo .testo-medio { max-width: 700px; }
.agenzia-box__testo .testo-medio + .testo-medio { margin-top: 10px; }
.agenzia-box__azioni { display: flex; flex-direction: column; justify-content: center; gap: 12px; padding: 40px 46px; }
.agenzia-box__azioni .btn { width: 100%; }
.agenzia-box__fondo {
  grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 20px 40px;
  padding: 32px 46px 34px; background: var(--azzurro);
}
.agenzia-box__fondo .titolo-sezione { margin-bottom: 8px; }
.agenzia-box__fondo .btn { flex: none; }

/* ── P5.7 · la 404: il motivo in alto, titolo e pulsanti, la ricerca della home e le 3 schede più recenti ── */
.pagina-404 { padding: 48px 0 72px; }
.pagina-404 .contenitore--interno { max-width: calc(var(--larghezza) + 2 * var(--margine)); }
.pagina-404__testa { display: flex; flex-direction: column; align-items: center; max-width: 760px; margin: 0 auto; text-align: center; }
.motivo--404 { position: relative; display: block; width: 180px; opacity: 1; margin-bottom: 26px; animation: entra-oggetto .6s var(--ease-out) both; }
.pagina-404 .titolo-pagina { margin: 0; font-size: clamp(34px, 2.6vw + 10px, 52px); animation: entra-su .6s var(--ease-out) .06s both; }
.pagina-404 .testa-pagina__sotto { margin-top: 14px; animation: entra-su .6s var(--ease-out) .12s both; }
.pagina-404 .pagina__azioni { justify-content: center; gap: 14px 28px; margin-top: 28px; animation: entra-su .6s var(--ease-out) .18s both; }
.ricerca--404 { max-width: 920px; margin: 48px auto 0; padding: 24px; animation: entra-su .6s var(--ease-out) .24s both; }
.ricerca__campi--404 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; }
.ricerca--404 .btn--cerca { min-height: 52px; }
.pagina-404__schede { margin-top: 48px; animation: appare .6s ease .3s both; }

/* ── computer piccolo ── */
@media (min-width: 1100px) and (max-width: 1279px) {
  .testa-divisa__griglia { gap: 40px 44px; }
  .richiesta { grid-template-columns: minmax(0, 1fr) minmax(0, 470px); padding-left: 36px; }
  .servizio-voce { gap: 18px; padding: 0 18px 0 22px; }
  .cerchio--grande { width: 72px; height: 72px; }
  .cerchio--grande .icona { width: 32px; height: 32px; }
  .annuncio__esempio { grid-template-columns: minmax(0, 1fr) 340px; }
  .agenzia-box { grid-template-columns: minmax(0, 1fr) minmax(0, 360px); }
}

/* ── tablet ── */
@media (max-width: 1099px) {
  .testa-divisa__griglia, .testa-divisa--larga .testa-divisa__griglia { grid-template-columns: 1fr; gap: 30px; }
  /* /contatti: la scheda dei recapiti subito sotto il titolo, prima del pulsante e del modulo */
  .testa-divisa--recapiti .testa-divisa__griglia { gap: 0; }
  .testa-divisa--recapiti .testa-divisa__testo { display: contents; }
  .testa-divisa--recapiti .occhiello { order: 1; }
  .testa-divisa--recapiti .titolo-pagina { order: 2; }
  .testa-divisa--recapiti .testa-pagina__sotto { order: 3; }
  .testa-divisa--recapiti .scheda-recapiti { order: 4; margin-top: 4px; }
  .testa-divisa--recapiti .hero__azioni { order: 5; margin-top: 24px; }

  .richiesta { grid-template-columns: 1fr; gap: 24px; padding: 30px 22px 22px; }
  .richiesta__fisso { position: relative; top: auto; padding: 0; }
  .richiesta__lato .motivo { bottom: -44px; right: 28px; width: 230px; }   /* sale da dietro la scheda del modulo */
  .servizi-righe { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 36px; }
  .servizio-voce, .servizio-voce:nth-child(3n + 1) { padding: 0 0 0 26px; border-left: 1px solid var(--divisore); }
  .servizio-voce:nth-child(2n + 1) { padding-left: 0; border-left: 0; }
  .servizi-pagina .servizio-scheda--larga { padding: 28px 26px 30px; }
  .riquadro.fascia.fascia--ape { grid-template-columns: 1fr; }
  .ape--piccola { max-width: 340px; }
  .annuncio__esempio { justify-self: start; }
  .tratta .commerciale__foto img { aspect-ratio: 16 / 10; }
  .agenzia-box { grid-template-columns: 1fr; }
  .agenzia-box__testo { padding: 30px 26px 26px; border-right: 0; border-bottom: 1px solid var(--bordo); }
  .agenzia-box__azioni { flex-direction: row; padding: 24px 26px; }
  .agenzia-box__fondo { padding: 26px; }
}

/* ── telefono ── */
@media (max-width: 699px) {
  .testa-divisa { padding-top: 18px; }
  .testa-divisa .briciole { margin-bottom: 10px; }
  .testa-divisa .briciole a { padding: 10px 0; }
  .testa-divisa .occhiello { margin-bottom: 10px; }
  .testa-divisa .hero__azioni { margin-top: 22px; width: 100%; }
  .testa-divisa__griglia, .testa-divisa--larga .testa-divisa__griglia { gap: 24px; }
  .testa-divisa--recapiti .testa-divisa__griglia { gap: 0; }
  .testa-divisa--recapiti .hero__azioni { margin-top: 20px; }
  .testa-divisa--larga .testa-divisa__foto img { aspect-ratio: 16 / 10; }
  .testa-divisa__foto .didascalia { padding-inline: 0; font-size: 14px; }
  .testa-divisa__foto .didascalia::before { width: 40px; }

  /* l'indice dei servizi: una riga che scorre, con la sfumatura che sparisce in fondo */
  .indice-servizi { padding: 18px 0 16px; margin-inline: calc(-1 * var(--margine)); border-radius: 0; border-inline: 0; }
  .indice-servizi__voci {
    flex-wrap: nowrap; justify-content: flex-start; gap: 4px;
    overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none;
    padding-inline: calc(var(--margine) - 6px); scroll-padding-inline: var(--margine);
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 48px), transparent);
    mask-image: linear-gradient(to right, #000 calc(100% - 48px), transparent);
  }
  .indice-servizi__voci.fine { -webkit-mask-image: none; mask-image: none; }
  .indice-servizi__voci::-webkit-scrollbar { display: none; }
  .indice-servizi__voci > li { flex: 0 0 112px; scroll-snap-align: start; }
  .indice-servizi__voci > li:last-child { margin-right: 14px; }
  .indice-servizi__voce { font-size: 13.5px; gap: 10px; }
  .indice-servizi .cerchio { width: 56px; height: 56px; }
  .indice-servizi .cerchio .icona { width: 26px; height: 26px; }
  .barra-servizi__voci { gap: 22px; padding-right: 20px; }
  .barra-servizi__voce { min-height: 46px; font-size: 14px; }
  .servizio-scheda, .servizio-voce { scroll-margin-top: 58px; }

  .servizi-pagina .servizio-scheda--larga { grid-template-columns: 1fr; padding: 24px 18px 26px; }
  .servizi-pagina .servizio-scheda--larga > :not(.motivo), .servizi-pagina .servizio-scheda--larga > .cerchio { grid-column: 1; grid-row: auto; }
  .servizi-pagina .servizio-scheda--larga > .cerchio { width: 64px; height: 64px; margin-bottom: 6px; }
  .servizi-pagina .servizio-scheda--larga > .cerchio .icona { width: 30px; height: 30px; }
  .servizi-pagina .servizio-scheda--larga .motivo { right: -30px; bottom: -78px; width: 190px; }
  .servizi-righe { grid-template-columns: 1fr; row-gap: 26px; margin-top: 34px; }
  .servizio-voce, .servizio-voce:nth-child(3n + 1), .servizio-voce:nth-child(2n + 1) { gap: 16px; padding: 0; border-left: 0; }
  .cerchio--grande { width: 56px; height: 56px; }
  .cerchio--grande .icona { width: 26px; height: 26px; }
  .servizio-voce__testo { padding-top: 2px; }
  .servizio-voce__titolo { font-size: 19px; margin-bottom: 6px; }
  .servizio-voce p { font-size: 15.5px; }

  .richiesta { padding: 26px 16px 16px; border-radius: var(--raggio-scheda); }
  .richiesta__lato .motivo { display: none; }   /* da telefono non c'è posto accanto ai cerchi e al telefono */
  .richiesta__scheda { padding: 22px 18px 20px; }
  .telefono-grande { width: 100%; justify-content: space-between; padding-inline: 18px; }
  .recapito { min-height: 60px; }
  .recapito__valore { font-size: 16.5px; }
  .voci-icona p { font-size: 15.5px; }
  .voci-icona .cerchio { width: 44px; height: 44px; }

  .scheda-recapiti { padding-top: 64px; margin-top: 6px; }
  .scheda-recapiti .motivo { right: 6%; width: 190px; }
  .scheda-recapiti__dentro { padding: 4px 16px; }
  .scheda-recapiti .recapito { min-height: 68px; }
  .due-meta__parte > .cerchio { width: 52px; height: 52px; margin-bottom: 14px; }

  .valore__elenco { grid-template-columns: 1fr; grid-template-rows: none; grid-auto-flow: row; }
  .valore__voce { gap: 14px; padding: 10px 0; }
  .valore__testo { font-size: 16.5px; }
  .valore__piede { flex-direction: column; align-items: flex-start; }

  .annuncio__esempio { grid-template-columns: 1fr; max-width: none; }
  .annuncio__etichette { order: 2; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 16px; margin-top: 16px; }
  .annuncio__etichetta { position: static; flex-direction: row; gap: 10px; transform: none; font-size: 14.5px; }
  .annuncio__etichetta::before { width: 26px; transform-origin: left center; }
  .annuncio ul.schede-immobili--una { display: block; max-width: none; margin: 0; padding: 0; overflow: visible; }
  .annuncio .schede-immobili--una > li { flex: none; }
  .passi-modulo__tasti .btn { padding-inline: 14px; }

  .bottoni-tipo--righe { margin: 20px 0 22px; }
  .btn-tipo--riga { min-height: 58px; padding: 10px 14px; font-size: 15.5px; }
  .luoghi--pillole { grid-template-columns: 1fr; gap: 22px; margin-top: 20px; }

  .agenzia-box__testo { padding: 24px 18px 22px; }
  .agenzia-box__azioni { flex-direction: column; padding: 20px 18px; }
  .agenzia-box__fondo { flex-direction: column; align-items: flex-start; padding: 22px 18px 20px; }
  .agenzia-box__fondo .btn { width: 100%; }

  .pagina-404 { padding: 28px 0 48px; }
  .motivo--404 { width: 160px; margin-bottom: 18px; }
  .pagina-404 .pagina__azioni .btn { width: 100%; }
  .ricerca--404 { margin-top: 32px; padding: 18px; }
  .ricerca__campi--404 { grid-template-columns: 1fr; }
  .pagina-404__schede { margin-top: 32px; }
}

/* meno movimento: niente spostamenti, solo dissolvenze */
@media (prefers-reduced-motion: reduce) {
  .testa-divisa .occhiello, .testa-divisa .titolo-pagina, .testa-divisa .testa-pagina__sotto, .testa-divisa .elenco-segni,
  .testa-divisa .hero__azioni, .testa-divisa__oggetto, .testa-divisa__foto img, .indice-servizi__voci > li,
  .scheda-recapiti .motivo, .motivo--404, .pagina-404 .titolo-pagina, .pagina-404 .testa-pagina__sotto,
  .pagina-404 .pagina__azioni, .ricerca--404, .modulo--a-passi .passo-modulo.entra,
  .testa-pagina__racconto, .slogan--testa { animation-name: appare; }
  .barra-servizi, .barra-servizi.vista { transform: none; }
  .js .reveal:not(.in) .ape--piccola .ape__gradino { transform: none; }
  .js .reveal:not(.in) .annuncio__etichetta::before { transform: none; }
  .servizio-voce:target .cerchio, .servizio-scheda:target > .cerchio { animation: none; }
  .passi-modulo .avanzamento__barra { transition: none; }
}

@media print {
  .barra-servizi { display: none !important; }
}

/* ════════════════════════════════════════════════════════════════════════
   P6 · TELEFONO E MOVIMENTO (21/10/2026) — il sito risponde al dito come un'app: entrate più brevi (500 ms, 20 px,
   cascata a 50 ms fino a 250), e scorrendo veloce le sezioni arrivano già ferme (.subito); ogni riga che scorre ha il
   suo segno (la barra o la sfumatura); UNA pillola blu che scorre fra Tutti · Residenziale · Commerciale; il pulsante
   fisso anche da tablet, che si fa da parte scorrendo veloce; le risposte che sfumano anche chiudendosi; la scheda
   che si stringe solo quando il dito si ferma. Solo transform e opacity; con meno movimento solo dissolvenze.
   ════════════════════════════════════════════════════════════════════════ */

/* ── P6.1 · scorrendo veloce: la sezione entra già al suo posto, con una dissolvenza di 150 ms (main.js) ── */
.js .reveal.subito, .js .reveal.subito *, .js .reveal.subito *::before, .js .reveal.subito *::after {
  transition: opacity .15s var(--ease-out) !important;
  transition-delay: 0s !important;
}

/* ── P6.2 · la riga delle schede della home: sotto, la barra che segue lo scorrimento (come «Altri immobili») ── */
@media (max-width: 699px) {
  .immobili__griglia > .avanzamento--riga { order: 3; }
}

/* ── P6.3 · Tutti · Residenziale · Commerciale: la pillola blu è una sola e scorre (main.js), sopra il grigio delle
   pillole e sotto le loro parole; il bianco delle parole arriva con lei, e il grigio della scelta se ne va solo quando
   la pillola blu l'ha coperto (con la pressione che torna subito a 1, così il grigio resta sotto il blu) ── */
.js .pillole--filtro { position: relative; isolation: isolate; }
.js .pillole--filtro .pillola { isolation: auto; background: none; }
.js .pillole--filtro .pillola::before { z-index: -2; background: var(--pillola); opacity: 1; transition: background-color .15s ease, opacity .15s ease; }
.js .pillole--filtro .pillola[aria-pressed="true"]::before { opacity: 0; transition: background-color .15s ease, opacity .1s ease .25s; }
.js .pillole--filtro .pillola[aria-pressed="true"] { transition: color .15s ease .1s, transform 0s; }
@media (hover: hover) and (pointer: fine) {
  .js .pillole--filtro .pillola[aria-pressed="false"]:hover { background: none; }
  .js .pillole--filtro .pillola[aria-pressed="false"]:hover::before { background: #E2EBF4; }
}
.pillole__indicatore { position: absolute; left: 0; top: 0; z-index: -1; pointer-events: none; }
.pillole__indicatore > span { position: absolute; left: 0; top: 0; background: var(--blu); transform-origin: 0 0; }
.pillole__capo { border-radius: 50%; }
.pillole__corpo { width: 100px; }
.pillole__indicatore.scorre > span { transition: transform .25s var(--ease-in-out); }

/* ── P6.4 · il pulsante fisso anche fra 700 e 1099 px: a destra in basso, largo quanto il suo testo ── */
@media (min-width: 700px) and (max-width: 1099px) {
  .cta-fissa {
    left: auto; right: max(24px, env(safe-area-inset-right, 0px));
    bottom: calc(24px + env(safe-area-inset-bottom, 0px));
    min-width: 260px; padding: 12px 28px;
  }
  .cta-fissa.cta-fissa--doppia {
    display: flex; gap: 8px;
    min-width: 0; min-height: 0; padding: 8px;
    border-radius: 12px;
    background: rgba(255, 255, 255, .97); color: var(--navy);
    box-shadow: 0 14px 34px -12px rgba(5, 11, 63, .45), 0 0 0 1px var(--bordo);
  }
  .cta-fissa--doppia .btn { flex: none; min-height: 48px; padding: 10px 20px; font-size: 15px; white-space: nowrap; }
  .cta-fissa--doppia .btn--contorno { font-weight: 600; font-variant-numeric: tabular-nums; }
  .cta-fissa--doppia.visibile:active { transform: none; }
  .piede { padding-bottom: calc(110px + env(safe-area-inset-bottom, 0px)); }
}

/* ── P6.6 · le domande: la risposta sfuma aprendo (200 ms) e chiudendo (150 ms); l'altezza non si anima ── */
@supports selector(::details-content) {
  .domanda::details-content { opacity: 0; transition: opacity .15s var(--ease-out), content-visibility .15s allow-discrete; }
  .domanda[open]::details-content { opacity: 1; transition-duration: .2s; }
  .domanda[open] p { animation: none; }
}

/* ── il tocco: col dito la scheda si stringe solo se il dito si ferma (.premuta, main.js), mai durante lo swipe ── */
.js .scheda-immobile:active:not(.premuta), .js .galleria__foto:active:not(.premuta),
.js .tipologia:active:not(.premuta), .js .indice-servizi__voce:active:not(.premuta) { transform: none; }
.scheda-immobile.premuta, .galleria__foto.premuta { transform: scale(0.985); }
.tipologia.premuta, .indice-servizi__voce.premuta { transform: scale(0.97); }
.scheda-immobile.premuta { transition-delay: 0s; }

/* meno movimento: la pillola non scorre (le pillole cambiano colore in dissolvenza) */
@media (prefers-reduced-motion: reduce) {
  .pillole__indicatore { display: none; }
  .js .pillole--filtro .pillola[aria-pressed="true"]::before { opacity: 1; background: var(--blu); transition-delay: 0s; }
  .js .pillole--filtro .pillola[aria-pressed="true"] { transition-delay: 0s; }
}

/* ── P7 · le anteprime in <picture> (AVIF, WebP, JPG) ──────────────────────
   Le miniature della galleria, del visore e della visita ora hanno la <picture> attorno all'<img>: riempie la
   casella come prima l'<img> da sola. */
.miniatura picture, .lightbox__mini picture, .visita__foto picture { width: 100%; height: 100%; }

/* /immobili: le schede oltre le prime 12 (PER_VOLTA di main.js) non entrano nella prima impaginazione. Prima main.js
   (defer) le nascondeva dopo: intanto il browser aveva già chiesto le foto di 24 schede (611 KB a 390 px invece di
   ~300). Senza JavaScript le 33 schede restano tutte in pagina. */
.js .schede-immobili--elenco:not(.elenco-pronto) > [data-immobile]:nth-child(n + 13) { display: none; }

/* P7: i titoli grandi aspettano Inter con la loro riserva (vedi «Inter Fallback Titoli» in cima): a Inter arrivato
   non cambia niente */
.hero__titolo, .titolo-pagina, .titolo-sezione { font-family: var(--font-titoli); }

/* ── P8 · aree di tocco da telefono: almeno 44 px, con gli stessi pezzi e lo stesso ordine ──
   I link del footer prendono qualche px d'aria, telefono ed email (footer e «Chiedi a…») diventano righe da 44 px, le
   briciole e le pillole passano da 42 a 44. «Informativa privacy» è dentro una frase: l'area cresce col padding
   verticale di un elemento in riga, che non sposta niente. */
@media (max-width: 699px) {
  .piede__colonna ul a { padding: 11.5px 0; }
  /* recapiti: righe da 44 px tutte uguali (anche l'indirizzo, che non è un link); il flex toglie lo spazio fra
     «Telefono:» e il numero, e lo rimette column-gap */
  .piede__colonna--testo p, .chiedi .recapiti li { display: flex; flex-wrap: wrap; align-items: center; column-gap: .3em; min-height: 44px; margin-top: 0; }
  .piede__colonna--testo a, .chiedi .recapiti a { display: inline-flex; align-items: center; min-height: 44px; }
  .chiedi .recapiti { gap: 0; }
  .piede__legali a { display: inline-flex; align-items: center; min-height: 44px; }
  .credit .link-freccia--esterna { padding-block: 12px; }
  .thk-avviso-modulo a { padding-block: 15px; }
  .briciole .briciole__voci a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 4px; margin-inline: -4px; }
  .pillole--filtro .pillola { min-height: 44px; }
}

/* P8: «Superficie da» e «Locali da» a 16 px dove si tocca col dito (tablet compresi): sotto i 16 px Safari ingrandisce
   la pagina al tocco */
@media (max-width: 1099px), (pointer: coarse) {
  .selezione--piccola select { font-size: 16px; }
}

/* ── 2 Step (call del 22/10/2026) ─────────────────────────────────────────── */
/* voce 6 · i comuni e le zone come su Studio B: un riquadro per luogo, la foto, il nome sopra e quanti immobili ci
   sono. Lecco più grande. Raggio, bordo, ombra e movimento delle schede degli immobili; finché la foto di ChatGPT non
   c'è, il riquadro è azzurro col motivo delle due case del kit e il nome in navy */
.comuni-foto {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin: 0; padding: 0; list-style: none;
}
.comuni-foto > li:first-child { grid-column: span 2; grid-row: span 2; }
.comune-foto {
  position: relative;
  isolation: isolate;
  display: flex; align-items: flex-end;
  height: 100%;
  min-height: 150px;
  aspect-ratio: 4 / 3;
  padding: 16px 18px;
  border-radius: var(--raggio-scheda);
  overflow: hidden;
  background: var(--navy);
  color: var(--bianco);
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
  transition: box-shadow .3s ease, transform .16s var(--ease-out);
}
.comune-foto--grande { aspect-ratio: auto; padding: 24px 26px; }
.comune-foto picture { position: absolute; inset: 0; z-index: -2; }
.comune-foto img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease-out); }
.comune-foto:not(.comune-foto--senza)::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(0deg, rgba(5, 11, 63, .78) 0%, rgba(5, 11, 63, .35) 45%, rgba(5, 11, 63, 0) 70%);
}
.comune-foto--senza { background: var(--azzurro); color: var(--navy); border: 1px solid #D3ECF8; }
.comune-foto__motivo {
  position: absolute; z-index: -1; right: -8%; top: 10%;
  width: 78%; aspect-ratio: 1050 / 645;
  background: var(--blu); opacity: .22;
  -webkit-mask: url("/assets/img/kit/motivo-doppia-casa.png") center / contain no-repeat;
  mask: url("/assets/img/kit/motivo-doppia-casa.png") center / contain no-repeat;
  transition: transform .6s var(--ease-out);
}
.comune-foto__testo { display: flex; flex-direction: column; gap: 2px; }
.comune-foto__nome { font-family: var(--font-titoli); font-size: 19px; font-weight: 650; line-height: 1.2; letter-spacing: -0.01em; }
.comune-foto--grande .comune-foto__nome { font-size: clamp(24px, 1.4vw + 10px, 32px); }
.comune-foto__conto { font-size: 14px; opacity: .9; }
.comune-foto:active { transform: scale(0.985); }
@media (hover: hover) and (pointer: fine) {
  .comune-foto:hover { box-shadow: 0 18px 40px -24px rgba(5, 11, 63, .45); }
  .comune-foto:hover img, .comune-foto:hover .comune-foto__motivo { transform: scale(1.05); }
}
@media (max-width: 1099px) {
  .comuni-foto { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
  .comuni-foto > li:first-child { grid-column: 1 / -1; grid-row: auto; }
  .comune-foto--grande { aspect-ratio: 21 / 8; }
}
@media (max-width: 699px) {
  .comuni-foto { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .comune-foto { min-height: 0; padding: 12px 14px; }
  .comune-foto--grande { aspect-ratio: 16 / 9; padding: 16px 18px; }
  .comune-foto__nome { font-size: 16px; }
  .comune-foto__conto { font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) {
  .comune-foto:hover img, .comune-foto:hover .comune-foto__motivo, .comune-foto:active { transform: none; }
}

/* voce 7 · la mappa degli immobili trovati, in /immobili: si apre al clic */
.pillola--mappa { gap: 7px; color: var(--navy); }
.pillola--mappa .icona { width: 18px; height: 18px; color: var(--blu-icona); }
.pillola--mappa[aria-expanded="true"] { background: var(--blu); color: var(--bianco); }
.pillola--mappa[aria-expanded="true"] .icona { color: var(--bianco); }
.pillola--mappa:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) { .pillola--mappa[aria-expanded="false"]:hover { background: #E2EBF4; } }
.mappa-risultati { margin: 0 0 28px; }
.mappa-risultati__carta {
  height: clamp(320px, 42vw, 460px);
  border: 1px solid var(--bordo);
  border-radius: var(--raggio-riquadro);
  overflow: hidden;
  background: var(--ricerca);
  animation: appare .3s ease both;
}
.mappa-risultati__nota { margin-top: 10px; font-size: 14px; line-height: 1.5; color: var(--testo-tenue); }
.punto-mappa { background: none; border: 0; }
.punto-mappa__segno {
  display: block; width: 30px; height: 30px;
  background: var(--blu);
  border: 3px solid var(--bianco);
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  box-shadow: 0 4px 12px rgba(5, 11, 63, .35);
}
.punto-mappa__titolo { display: block; color: var(--navy); font-weight: 600; font-size: 15px; line-height: 1.35; text-decoration: underline; text-underline-offset: 3px; }
.punto-mappa__prezzo { margin: 6px 0 0 !important; color: var(--testo); font-size: 14px; }
.mappa-risultati .leaflet-container { font-family: var(--font); }
.mappa-risultati .leaflet-popup-content { margin: 14px 16px; }
@media (max-width: 699px) {
  .mappa-risultati__carta { height: 340px; }
}

/* voce 8 · le recensioni vere del cliente, quando arrivano */
.recensioni__elenco { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 28px; }
.recensione { display: flex; flex-direction: column; justify-content: space-between; gap: 18px; padding: 24px; }
.recensione__testo { margin: 0; color: var(--navy); font-size: 17px; line-height: 1.6; }
.recensione__chi { font-size: 15px; color: var(--testo); }
.recensione__nome { display: block; color: var(--navy); font-weight: 600; }
@media (max-width: 1099px) { .recensioni__elenco { grid-template-columns: 1fr; } }

/* ── 4 Step, voce 6 · «Lavora con noi» (25/10/2026): coi pezzi del sito. La testata compatta (come /nuove-costruzioni),
   le posizioni in due riquadri col bordo e il cerchio dell'icona (affiancati da computer, uno sotto l'altro da telefono),
   «Dove si lavora» nella forma testo e foto di «Chi siamo» (qui il testo a sinistra), il modulo come /contatti ── */
.testa-lavora .testa-pagina__sotto { max-width: 720px; }
.testa-lavora .testa-pagina__sotto + .testa-pagina__sotto { margin-top: 8px; }
.testa-lavora .hero__azioni { margin-top: 28px; }
.posizioni__elenco { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 20px; }
.posizione { display: flex; gap: 20px; align-items: center; padding: 26px 28px; }
.posizione p { font-size: clamp(16px, .3vw + 13px, 18px); line-height: 1.55; color: var(--testo); }
.posizione strong { display: block; margin-bottom: 4px; color: var(--navy); font-size: 19px; font-weight: 600; letter-spacing: -0.01em; }
.posizioni__link { margin-top: 26px; }
.dove-si-lavora__griglia { grid-template-columns: minmax(0, 574fr) minmax(0, 690fr); align-items: center; }
.dove-si-lavora .commerciale__testo .testo-medio + .testo-medio { margin-top: 12px; }
.dove-si-lavora .commerciale__testo .link-freccia { margin-top: 22px; }
.dove-si-lavora .commerciale__foto img { object-position: 50% 17%; }
/* la home e /chi-siamo: «Lavora con noi» accanto al collegamento o sotto il pulsante */
.chi-siamo__link { display: flex; flex-wrap: wrap; gap: 6px 30px; margin-top: 22px; }
.chi-siamo__testo .chi-siamo__link .link-freccia { margin-top: 0; }
.agenzia-box__chiudi { display: flex; flex-direction: column; align-items: center; gap: 8px; flex: none; }
/* il curriculum: la casella del file, col pulsante del browser nella forma «a contorno» del sito */
.campo__aiuto { font-size: 14px; line-height: 1.4; color: var(--testo-tenue); }
.casella--file { display: flex; align-items: center; padding: 8px 12px; font-size: 15px; color: var(--testo); cursor: pointer; }
.casella--file::file-selector-button {
  margin-right: 14px; min-height: 36px; padding: 0 16px;
  border: 1px solid var(--blu); border-radius: var(--raggio);
  background: var(--bianco); color: var(--blu-testo); font: inherit; font-weight: 600; cursor: pointer;
  transition: background-color .2s ease;
}
@media (hover: hover) and (pointer: fine) { .casella--file:hover::file-selector-button { background: var(--azzurro); } }
@media (max-width: 1099px) {
  .dove-si-lavora__griglia { grid-template-columns: 1fr; }
  .dove-si-lavora .commerciale__foto { order: -1; }
}
@media (max-width: 699px) {
  .posizioni__elenco { grid-template-columns: 1fr; gap: 14px; }
  .posizione { gap: 16px; padding: 20px 18px; align-items: flex-start; }
  .posizione strong { font-size: 18px; }
  .agenzia-box__chiudi { align-items: flex-start; }
  .casella--file { font-size: 14px; }
  .casella--file::file-selector-button { margin-right: 10px; padding: 0 12px; }
}