/* ============================================
   FURIA IMMOBILIARE SRLS — STYLE.CSS
   Design system + navbar + hero
   Breakpoint mobile-first: 480 / 768 / 1024
   ============================================ */

:root {
  --colore-sfondo: #1B1B1B;
  --colore-primario: #cfb53b;
  --colore-accento: #B79E2C;
  --colore-secondario: #0E2B2C;
  --colore-testo: #E4E4DE;
  --colore-testo-muto: #9A9A92;
  --colore-bordo: #5a5a5a;
  --colore-successo: #2ecc71;
  --colore-errore: #ff2200;
  --colore-navbar: #E4E4DE;
  --colore-testo-scuro: #1A1A1A;
  --colore-bianco: #ffffff;

  --ombra-base: 0 2px 8px rgba(0, 0, 0, 0.25);
  --ombra-media: 0 8px 24px rgba(0, 0, 0, 0.35);

  --spazio-1: 4px;
  --spazio-2: 8px;
  --spazio-3: 16px;
  --spazio-4: 24px;
  --spazio-5: 32px;
  --spazio-6: 48px;
  --spazio-7: 64px;
  --spazio-8: 96px;

  --raggio-sm: 8px;
  --raggio-md: 12px;
  --raggio-lg: 16px;

  --container-max: 1280px;
  --nav-height: 76px;

  --font-titoli: "Cardo", serif;
  --font-corpo: "Poppins", sans-serif;
}

/* ===== FONT SELF-HOSTED ===== */
@font-face {
  font-family: "Cardo";
  src: url("assets/font/Cardo-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Cardo";
  src: url("assets/font/Cardo-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Poppins";
  src: url("assets/font/Poppins-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Poppins";
  src: url("assets/font/Poppins-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Poppins";
  src: url("assets/font/Poppins-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ===== RESET ===== */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  overflow-x: hidden;
  max-width: 100%;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  margin: 0;
  font-family: var(--font-corpo);
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--colore-testo);
  background: var(--colore-sfondo);
  overflow-x: hidden;
  max-width: 100%;
}

/* Blocco scroll pagina (drawer, filtri fullscreen, lightbox) */
html.is-scroll-locked,
body.is-scroll-locked {
  overflow: hidden;
  overscroll-behavior: none;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input {
  font-family: inherit;
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

h1 {
  font-family: var(--font-titoli);
  font-weight: 700;
  line-height: 1.15;
  text-wrap: balance;
  margin: 0 0 var(--spazio-4);
  font-size: clamp(2.4rem, 5.5vw, 3.8rem);
  color: #fff;
}

h2 {
  font-family: var(--font-titoli);
  font-weight: 700;
  line-height: 1.2;
  text-wrap: balance;
  margin: 0 0 var(--spazio-4);
  font-size: clamp(1.85rem, 3.5vw, 2.6rem);
  color: #fff;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.container {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  /* Solo orizzontale: non azzerare padding-top di .hero-inner */
  padding-left: 20px;
  padding-right: 20px;
}

.icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.icon--sm {
  width: 16px;
  height: 16px;
}

/* Cottage/Home in elenco tipologie: stessa misura delle altre voci */
.search-dropdown-menu--tipo .icon--cottage {
  width: 16px;
  height: 16px;
}

/* Cottage sul pulsante chiuso (hero): stessa base delle altre icone sm */
.search-dropdown-toggle .icon--cottage {
  width: 16px;
  height: 16px;
}

/* ===== BOTTONI ===== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 12px 28px;
  border-radius: var(--raggio-md);
  border: none;
  font-family: var(--font-corpo);
  font-weight: 700;
  font-size: 0.95rem;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
}

.btn--oro {
  background: var(--colore-primario);
  color: var(--colore-testo-scuro);
}

.btn--oro:hover:not(.hero-cta):not(.valuta-btn) {
  filter: brightness(1.05);
  box-shadow: var(--ombra-base);
}

/* ===== NAVBAR ===== */
.navbar {
  position: fixed;
  top: 8px;
  left: 12px;
  right: 12px;
  z-index: 1600;
  width: auto;
  max-width: calc(100% - 24px);
  box-sizing: border-box;
  border-radius: 999px;
  background: var(--colore-navbar);
  border-bottom: none;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
  transition: box-shadow 0.25s ease;
  /* niente overflow:hidden — altrimenti clippa i dropdown */
}

/* Solo desktop: pillola più stretta (+1,5 cm per lato). Mobile/tablet/iPad invariati. */
@media (min-width: 1367px) {
  .navbar {
    left: calc(12px + 1.5cm);
    right: calc(12px + 1.5cm);
  }
}

.navbar.is-scrolled {
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.22);
}

.navbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--nav-height);
  min-width: 0;
  max-width: 100%;
}

.navbar-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  /* Touch: niente flash azzurro al tap sul logo */
  -webkit-tap-highlight-color: transparent;
}

.navbar-logo {
  /* Quasi a tutta altezza navbar, allineato al wordmark */
  height: calc(var(--nav-height) - 12px);
  width: auto;
  max-height: calc(var(--nav-height) - 12px);
  object-fit: contain;
  flex-shrink: 0;
  display: block;
}

.navbar-wordmark {
  font-family: var(--font-titoli);
  font-weight: 700;
  /* Altezza lettere allineata a FURIA nel logo */
  font-size: 1.28rem;
  color: #aa9333;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  line-height: 1;
  /* REGOLA FISSA: stessa baseline di FURIA nel logo — non modificare senza conferma */
  transform: translateY(calc((var(--nav-height) - 12px) * 0.085 + 0.9mm));
}

.navbar-links {
  display: none;
  align-items: center;
  gap: 20px;
  /* Abbassa leggermente i link rispetto al centro navbar */
  transform: translateY(2.5mm);
}

.navbar-links>a,
.nav-dropdown-toggle {
  display: inline-flex;
  align-items: center;
  height: 28px;
  margin: 0;
  padding: 0;
  font-family: var(--font-corpo);
  font-size: 0.95rem;
  font-weight: 400;
  line-height: 1;
  text-transform: uppercase;
  color: #0E2B2C;
  background: none;
  border: none;
  cursor: pointer;
}

.navbar-links>a:hover,
.navbar-links>a.is-active,
.nav-dropdown-toggle:hover {
  color: #0E2B2C;
}

.nav-dropdown {
  position: relative;
  display: flex;
  align-items: center;
}

.nav-dropdown-toggle {
  gap: 4px;
}

.nav-dropdown-menu {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  min-width: 160px;
  padding: 8px 0;
  margin: 0;
  background: #fff;
  border-radius: var(--raggio-sm);
  box-shadow: var(--ombra-media);
  z-index: 20;
}

.nav-dropdown-menu a {
  display: block;
  padding: 10px 16px;
  font-family: var(--font-corpo);
  font-size: 0.92rem;
  font-weight: 400;
  line-height: 1;
  text-transform: uppercase;
  color: #0E2B2C;
}

.nav-dropdown-menu a:hover {
  background: none;
  color: #0E2B2C;
}

/*
  Solo desktop con mouse (non tablet/touch in landscape):
  pillola accento + tendina fade-down all’hover
*/
@media (min-width: 1024px) and (hover: hover) and (pointer: fine) {
  .navbar-links {
    gap: 18px;
  }

  .navbar-links>a,
  .nav-dropdown-toggle {
    height: 32px;
    padding: 0 10px;
    border-radius: 999px;
    background: transparent;
    transition: background-color 0.22s ease-out, color 0.22s ease-out;
  }

  .navbar-links>a:hover,
  .nav-dropdown-toggle:hover,
  .nav-dropdown:hover .nav-dropdown-toggle,
  .nav-dropdown:has(.nav-dropdown-toggle:focus-visible) .nav-dropdown-toggle {
    background-color: color-mix(in srgb, var(--colore-accento) 32%, transparent);
  }

  .nav-dropdown-menu::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 100%;
    height: 12px;
  }

  .nav-dropdown-menu a {
    border-radius: 6px;
    margin: 0 6px;
    transition: background-color 0.18s ease-out;
  }

  .nav-dropdown-menu a:hover {
    background-color: color-mix(in srgb, var(--colore-accento) 22%, transparent);
  }

  .nav-dropdown-menu,
  .nav-dropdown-menu[hidden] {
    display: block !important;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-8px);
    transition:
      opacity 0.22s ease-out,
      transform 0.22s ease-out,
      visibility 0.22s ease-out;
  }

  /* Solo hover (mouse) o focus-visible (tastiera): evita tendina “incollata” al click */
  .nav-dropdown:hover .nav-dropdown-menu,
  .nav-dropdown:has(.nav-dropdown-toggle:focus-visible) .nav-dropdown-menu,
  .nav-dropdown:hover .nav-dropdown-menu[hidden],
  .nav-dropdown:has(.nav-dropdown-toggle:focus-visible) .nav-dropdown-menu[hidden] {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
  }
}

/* Hamburger */
.hamburger {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  border: none;
  background: none;
  padding: 0;
  cursor: pointer;
}

.hamburger span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--colore-testo-scuro);
  transition: transform 0.25s ease, opacity 0.25s ease;
}

.hamburger.is-open span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.hamburger.is-open span:nth-child(2) {
  opacity: 0;
}

.hamburger.is-open span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* Drawer mobile: larghezza = navbar, attaccato sotto, angoli uniformi */
.drawer-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: 1400;
}

/* Overlay in chiusura: stessa durata/easing della tendina */
.drawer-overlay.is-closing {
  animation: drawer-overlay-sali 0.36s ease forwards;
  pointer-events: none;
}

@keyframes drawer-overlay-sali {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

.drawer-overlay[hidden],
.mobile-drawer[hidden] {
  display: none;
}

.mobile-drawer {
  position: fixed;
  /* Attaccato sotto la navbar; ~4mm (16px) più stretto per lato */
  top: calc(8px + var(--nav-height));
  left: 28px;
  right: 28px;
  width: auto;
  max-width: none;
  height: auto;
  max-height: min(70dvh, calc(100dvh - 8px - var(--nav-height) - 12px));
  box-sizing: border-box;
  background: var(--colore-navbar);
  z-index: 1500;
  display: flex;
  flex-direction: column;
  padding: var(--spazio-4);
  /* Angoli superiori = inferiori */
  border-radius: 15px;
  box-shadow: var(--ombra-media);
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.mobile-drawer:not([hidden]) {
  animation: mobile-drawer-scendi 0.28s ease forwards;
}

/* Solo chiusura: stesso movimento, più soft */
.mobile-drawer.is-closing {
  animation: mobile-drawer-sali 0.36s ease forwards;
  pointer-events: none;
}

@keyframes mobile-drawer-scendi {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes mobile-drawer-sali {
  from {
    opacity: 1;
    transform: translateY(0);
  }

  to {
    opacity: 0;
    transform: translateY(-8px);
  }
}

@media (min-width: 1367px) {
  .mobile-drawer {
    left: calc(12px + 1.5cm + 16px);
    right: calc(12px + 1.5cm + 16px);
  }
}

.mobile-drawer a {
  padding: var(--spazio-3) 0;
  border-bottom: 1px solid var(--colore-primario);
  font-weight: 500;
  color: var(--colore-testo-scuro);
  text-align: center;
  /* Touch: niente flash azzurro al tap */
  -webkit-tap-highlight-color: transparent;
}

.mobile-drawer a:hover {
  color: var(--colore-primario);
}

/* Attivo: niente oro / grassetto — stesso aspetto degli altri link */
.mobile-drawer a.is-active {
  color: var(--colore-testo-scuro);
}

.mobile-drawer-group {
  border-bottom: 1px solid var(--colore-primario);
}

.mobile-drawer-toggle {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: var(--spazio-3) 0;
  border: none;
  background: transparent;
  font-family: var(--font-corpo);
  font-size: inherit;
  font-weight: 500;
  color: var(--colore-testo-scuro);
  text-align: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.mobile-drawer-toggle .icon {
  position: absolute;
  right: 0;
  top: 50%;
  width: 16px;
  height: 16px;
  margin-top: -8px;
  flex-shrink: 0;
  transition: transform 0.2s ease;
}

.mobile-drawer-toggle[aria-expanded="true"] .icon {
  transform: rotate(180deg);
}

.mobile-drawer-sub {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 0 var(--spazio-2);
}

.mobile-drawer-sub[hidden] {
  display: none;
}

.mobile-drawer-sub a {
  border-bottom: none;
  padding: 10px 0;
  font-weight: 400;
  width: 100%;
  text-align: center;
}

/* ===== HERO ===== */
.hero {
  position: relative;
  /* A tutta altezza viewport: l’immagine passa dietro la navbar a pillola */
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: stretch;
  color: #fff;
  overflow: hidden;
  z-index: 0;
}

.hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center;
  z-index: 0;
}

/* Default (mobile / tablet / portrait): hero = seconda immagine, niente cinematico */
.hero-bg--esterno,
.hero-transizione,
.hero-frase,
.hero-brand-finale {
  display: none;
}

.hero-bg--interno {
  display: block;
  opacity: 1;
  transform: none;
}

.hero-transizione {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: #0E2B2C;
  opacity: 0;
}

/* Frase sul primo fotogramma: centro esatto, bianco + bagliore scuro (da PS Outer Glow) */
.hero-frase {
  position: absolute;
  inset: 0;
  z-index: 2;
  margin: 0;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.12em;
  pointer-events: none;
  text-align: center;
  font-family: var(--font-titoli);
  font-weight: 400;
  font-size: clamp(2.2rem, 4.8vw, 3.85rem);
  line-height: 1.15;
  color: #fff;
  /* Approssimazione Bagliore esterno PS: #1b1b1b, opacità 90%, size ~30px, spread 25% */
  text-shadow:
    0 0 8px rgba(27, 27, 27, 0.9),
    0 0 16px rgba(27, 27, 27, 0.9),
    0 0 28px rgba(27, 27, 27, 0.9),
    0 0 40px rgba(27, 27, 27, 0.85);
}

.hero-frase-riga {
  display: block;
}

.hero-brand-finale {
  position: absolute;
  inset: 0;
  z-index: 2;
  margin: 0;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.15em;
  pointer-events: none;
  text-align: center;
  font-family: var(--font-titoli);
  font-weight: 700;
  text-transform: uppercase;
  color: var(--colore-primario);
  opacity: 0;
}

.hero-brand-finale-riga {
  display: block;
  line-height: 1.05;
}

.hero-brand-finale-riga:first-child {
  font-size: clamp(2.8rem, 7vw, 5.5rem);
  letter-spacing: 0.06em;
}

.hero-brand-finale-riga:last-child {
  font-size: clamp(1rem, 2.4vw, 1.85rem);
  letter-spacing: 0.28em;
}

/* Cinematico solo ≥1280px in landscape (desktop + tablet/iPad larghi) */
@media (min-width: 1280px) and (orientation: landscape) {
  .hero {
    height: auto;
    min-height: 100dvh;
    max-height: none;
  }

  /* Stato a riposo (visite successive): solo interno + UI, niente animazione */
  .hero-bg--esterno,
  .hero-transizione,
  .hero-frase,
  .hero-brand-finale {
    display: none;
  }

  .hero-bg--interno {
    display: block;
    opacity: 1;
    transform: none;
  }

  .hero-inner {
    opacity: 1;
  }

  /* Prima visita in sessione: JS aggiunge .hero--cinematico-attivo */
  .hero.hero--cinematico-attivo .hero-bg--esterno,
  .hero.hero--cinematico-attivo .hero-bg--interno,
  .hero.hero--cinematico-attivo .hero-transizione {
    display: block;
  }

  .hero.hero--cinematico-attivo .hero-frase,
  .hero.hero--cinematico-attivo .hero-brand-finale {
    display: flex;
  }

  /*
   * Attesa foto 1: hero non rivelato (niente foto 2, niente poster).
   * Schermo bianco finché JS avvia il cinematico dal fotogramma 0.
   */
  html.furia-cine,
  html.furia-cine body {
    background: #fff;
  }

  html.furia-cine .hero .hero-bg--esterno,
  html.furia-cine .hero .hero-bg--interno,
  html.furia-cine .hero .hero-transizione,
  html.furia-cine .hero .hero-frase,
  html.furia-cine .hero .hero-brand-finale,
  html.furia-cine .hero .hero-inner,
  html.furia-cine .hero::before,
  html.furia-cine .hero::after {
    visibility: hidden;
    opacity: 0;
  }

  /* Foto 1 può decodificare off-screen senza comparire */
  html.furia-cine .hero .hero-bg--esterno {
    display: block;
  }

  /* Uscita frase flyin: insieme allo zoom (frase al 100% ≈2.85s + 1s = 3.85s) */
  .hero.hero--cinematico-attivo .hero-frase {
    transform-origin: center center;
    animation: hero-frase-flyin-esci 1.5s linear 3.85s 1 forwards;
  }

  /* Entrata frase: prima solo foto 1 (~1s), poi fade-up una riga alla volta */
  .hero.hero--cinematico-attivo .hero-frase-riga {
    opacity: 0;
    transform: translateY(0.55em);
  }

  .hero.hero--cinematico-attivo .hero-frase-riga:nth-child(1) {
    animation: hero-frase-fade-up 0.85s ease-out 1s forwards;
  }

  .hero.hero--cinematico-attivo .hero-frase-riga:nth-child(2) {
    animation: hero-frase-fade-up 0.85s ease-out 1.5s forwards;
  }

  .hero.hero--cinematico-attivo .hero-frase-riga:nth-child(3) {
    animation: hero-frase-fade-up 0.85s ease-out 2s forwards;
  }

  @keyframes hero-frase-fade-up {
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  /* Solo tratto d’uscita del demo fly-in: rimpicciolisce, blur e svanisce in lontananza */
  @keyframes hero-frase-flyin-esci {
    0% {
      opacity: 1;
      filter: blur(0);
      transform: scale(1);
    }

    100% {
      opacity: 0;
      filter: blur(10px);
      transform: scale(0.1);
    }
  }

  .hero.hero--cinematico-attivo .hero-bg--esterno,
  .hero.hero--cinematico-attivo .hero-bg--interno {
    transform-origin: 50% 50%;
    will-change: transform, opacity;
  }

  /* UI hero rientra subito dopo la fine brand */
  .hero.hero--cinematico-attivo .hero-inner {
    opacity: 0;
    animation: hero-ui-entra 0.85s ease 8.95s 1 forwards;
  }

  /* Zoom esterno: stesso start dell’uscita frase (3.85s), 1.5s lineare */
  .hero.hero--cinematico-attivo .hero-bg--esterno {
    animation: hero-esterno-zoom 1.5s linear 3.85s 1 forwards;
  }

  /* Seconda foto: ancorata alla fine zoom */
  .hero.hero--cinematico-attivo .hero-bg--interno {
    opacity: 0;
    transform: scale(1.35);
    animation: hero-interno-continua 2.8s linear 5s 1 forwards;
  }

  /* Fondue scura tra esterno e interno */
  .hero.hero--cinematico-attivo .hero-transizione {
    animation: hero-overlay-transizione 1.2s linear 4.8s 1 forwards;
  }

  /* Brand finale: durata 2.6s, start dopo zoom */
  .hero.hero--cinematico-attivo .hero-brand-finale {
    animation: hero-brand-finale 2.6s linear 5.91s 1 forwards;
    transform-origin: center center;
  }

  @keyframes hero-esterno-zoom {
    0% {
      transform: scale(1);
      opacity: 1;
    }

    88% {
      transform: scale(1.95);
      opacity: 1;
    }

    /* Scompare sotto l’overlay mentre entra l’interno */
    100% {
      transform: scale(2.05);
      opacity: 0;
    }
  }

  @keyframes hero-interno-continua {
    0% {
      opacity: 0;
      transform: scale(1.35);
    }

    12% {
      opacity: 1;
      transform: scale(1.4);
    }

    100% {
      opacity: 1;
      transform: scale(1.72);
    }
  }

  @keyframes hero-overlay-transizione {
    0% {
      opacity: 0;
    }

    35% {
      opacity: 0.60;
    }

    100% {
      opacity: 0;
    }
  }

  @keyframes hero-brand-finale {

    /* Scale sempre in aumento (zoom fuori); arriva quasi “sotto” / oltre il frame */
    0% {
      opacity: 0;
      transform: scale(0.9);
    }

    16% {
      opacity: 1;
      transform: scale(1.05);
    }

    /* Resta visibile più a lungo; fade solo nel tratto finale */
    76% {
      opacity: 1;
      transform: scale(1.85);
    }

    100% {
      opacity: 0;
      transform: scale(2.55);
    }
  }

  @keyframes hero-ui-entra {
    from {
      opacity: 0;
    }

    to {
      opacity: 1;
    }
  }
}

/* Reduced motion in landscape largo: niente animazione, resta la seconda immagine */
@media (min-width: 1280px) and (orientation: landscape) and (prefers-reduced-motion: reduce) {

  .hero.hero--cinematico-attivo .hero-bg--esterno,
  .hero.hero--cinematico-attivo .hero-bg--interno,
  .hero.hero--cinematico-attivo .hero-transizione,
  .hero.hero--cinematico-attivo .hero-frase,
  .hero.hero--cinematico-attivo .hero-brand-finale,
  .hero.hero--cinematico-attivo .hero-inner {
    animation: none;
  }

  .hero.hero--cinematico-attivo .hero-bg--esterno,
  .hero.hero--cinematico-attivo .hero-transizione,
  .hero.hero--cinematico-attivo .hero-frase,
  .hero.hero--cinematico-attivo .hero-brand-finale {
    display: none;
  }

  .hero.hero--cinematico-attivo .hero-bg--interno {
    display: block;
    opacity: 1;
    transform: none;
  }

  .hero.hero--cinematico-attivo .hero-inner {
    opacity: 1;
  }
}

/* Alone colore-sfondo alla base delle immagini hero: 90% → trasparente */
.hero::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  height: 42%;
  pointer-events: none;
  background: linear-gradient(to top,
      color-mix(in srgb, var(--colore-sfondo) 100%, transparent) 0%,
      transparent 100%);
}

/* Overlay scuro #0E2B2C al 35%: da sinistra, sfuma fino a 3/4 */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(to right,
      rgba(14, 43, 44, 0.35) 0%,
      rgba(14, 43, 44, 0) 75%);
}

.hero-inner {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: clamp(48px, 10vh, 120px);
  width: 100%;
  /* 8px offset + altezza pillola + stacco search */
  padding-top: calc(8px + var(--nav-height));
  padding-bottom: var(--spazio-6);
  min-height: 100vh;
  min-height: 100dvh;
}

/* Più specifico di .container: il padding alto non deve essere azzerato */
.container.hero-inner {
  padding-top: calc(8px + var(--nav-height));
  padding-bottom: var(--spazio-6);
}

/* Search bar — centrata, staccata dalla navbar */
.hero-search {
  display: flex;
  flex-direction: column;
  gap: var(--spazio-2);
  width: 100%;
  max-width: 920px;
  margin-top: 1cm;
  margin-left: auto;
  margin-right: auto;
}

.search-dropdown-toggle,
.hero-search-input,
.hero-search-btn {
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.55);
}

.search-dropdown {
  position: relative;
}

.search-dropdown-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  height: 48px;
  padding: 0 14px;
  border: none;
  border-radius: var(--raggio-md);
  background: #fff;
  color: var(--colore-testo-scuro);
  font-size: 0.95rem;
  font-weight: 500;
  cursor: pointer;
}

.search-dropdown-toggle--oro {
  background: #aa9333;
  color: var(--colore-testo-scuro);
  font-weight: 700;
}

/* Tipologia: stesso fondo della navbar */
.search-dropdown--tipo .search-dropdown-toggle {
  background: #E4E4DE;
}

/* Hero index: label tipologia nascosta di default (solo icona su mobile/portrait) */
.hero-search:not(.pagina-vendita-search) .search-tipo-label {
  display: none;
}

.search-dropdown-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 30;
  background: #fff;
  border-radius: var(--raggio-md);
  box-shadow: var(--ombra-media);
  padding: 6px 0;
  overflow: hidden;
}

.search-dropdown-menu[hidden] {
  display: none;
}

.search-dropdown-menu li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  color: var(--colore-testo-scuro);
  font-size: 0.95rem;
  cursor: pointer;
}

.search-dropdown-menu li:hover,
.search-dropdown-menu li[aria-selected="true"] {
  background: rgba(207, 181, 59, 0.14);
}

.search-dropdown-menu--tipo {
  min-width: 220px;
}

.hero-search-input {
  width: 100%;
  height: 48px;
  padding: 0 16px;
  border: none;
  border-radius: var(--raggio-md);
  background: #fff;
  color: var(--colore-testo-scuro);
  font-size: 0.95rem;
}

.hero-search-input:focus {
  outline: 2px solid var(--colore-primario);
  outline-offset: 2px;
}

.hero-search-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 48px;
  border: none;
  border-radius: var(--raggio-md);
  background: #aa9333;
  color: var(--colore-testo-scuro);
  cursor: pointer;
  overflow: hidden;
}

.hero-search-btn .icon {
  transition: transform 0.2s ease;
}

.hero-search-btn:hover .icon {
  transform: scale(1.35);
}

.hero-content {
  max-width: 920px;
  margin-left: 0;
}

.hero-title {
  margin: 0 0 var(--spazio-4);
  color: #E4E4DE;
  text-shadow: 2px 2px 1px #000;
}

/* Due span in HTML; nowrap solo da desktop per evitare overflow */
.hero-title-riga {
  display: block;
}

.hero-payoff {
  margin: 0 0 var(--spazio-3);
  color: var(--colore-secondario);
  font-family: var(--font-corpo);
  font-size: calc(1.05rem + 2px);
  font-weight: 700;
  letter-spacing: 0.01em;
  word-spacing: -0.05em;
  text-transform: uppercase;
  text-shadow: none;
}

.hero-payoff-chiavi {
  word-spacing: 0.12em;
}

.hero-sub {
  margin: 0 0 var(--spazio-5);
  color: #ffffff;
  font-size: 1.2rem;
  line-height: 1.65;
  max-width: 540px;
  text-shadow: 1px 2px 1px #000;
}

/* Mobile / tablet / iPad: fade-right lento e fluido — no desktop mouse */
@media (max-width: 1366px) {
  .hero-payoff,
  .hero-title,
  .hero-sub {
    opacity: 0;
    transform: translate3d(-3.5rem, 0, 0);
    transition:
      opacity 1.15s cubic-bezier(0.33, 1, 0.68, 1),
      transform 1.2s cubic-bezier(0.22, 1, 0.36, 1);
  }

  .hero-payoff.is-in-view,
  .hero-title.is-in-view,
  .hero-sub.is-in-view {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }

  /* CTA: fade-up, stesso ritmo */
  .hero a.btn.btn--oro.hero-cta {
    opacity: 0;
    transform: translate3d(0, 2.5rem, 0);
    transition:
      opacity 1.15s cubic-bezier(0.33, 1, 0.68, 1),
      transform 1.2s cubic-bezier(0.22, 1, 0.36, 1),
      background 0.2s ease,
      box-shadow 0.2s ease,
      filter 0.2s ease;
  }

  .hero a.btn.btn--oro.hero-cta.is-in-view {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@media (max-width: 1366px) and (prefers-reduced-motion: reduce) {
  .hero-payoff,
  .hero-title,
  .hero-sub,
  .hero a.btn.btn--oro.hero-cta {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* Desktop mouse: niente fade hero (annulla la regola ≤1366) */
@media (min-width: 1024px) and (hover: hover) and (pointer: fine) {
  .hero-payoff,
  .hero-title,
  .hero-sub,
  .hero a.btn.btn--oro.hero-cta {
    opacity: 1;
    transform: none;
  }
}

.hero-cta {
  text-transform: lowercase;
  border: 1px solid #000;
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.33);
  transition: background 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
}

/* Riposo: fondo #aa9333, testo nero */
.hero a.btn.btn--oro.hero-cta,
.hero a.btn.btn--oro.hero-cta:visited {
  color: #1a1a1a;
  -webkit-text-fill-color: #1a1a1a;
  background: #aa9333;
  background-color: #aa9333;
  filter: none;
}

.hero a.btn.btn--oro.hero-cta *,
.hero a.btn.btn--oro.hero-cta:visited * {
  color: #1a1a1a;
  -webkit-text-fill-color: #1a1a1a;
}

/* Hover: arancione carico */
.hero a.btn.btn--oro.hero-cta:hover,
.hero a.btn.btn--oro.hero-cta:focus-visible {
  color: #1a1a1a;
  -webkit-text-fill-color: #1a1a1a;
  background: #e87a1e;
  background-color: #e87a1e;
  filter: none;
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.33);
}

.hero a.btn.btn--oro.hero-cta:hover *,
.hero a.btn.btn--oro.hero-cta:focus-visible * {
  color: #1a1a1a;
  -webkit-text-fill-color: #1a1a1a;
}

.hero-cta::first-letter {
  text-transform: lowercase;
}

/* Mobile portrait: CTA hero sempre su un solo rigo */
@media (max-width: 599px) and (orientation: portrait) {
  .hero a.btn.btn--oro.hero-cta {
    white-space: nowrap;
    font-size: clamp(0.72rem, 3.6vw, 0.88rem);
    padding-left: 12px;
    padding-right: 12px;
    gap: 6px;
    max-width: 100%;
    width: fit-content;
  }
}

/* ===== RESPONSIVE ===== */
@media (max-width: 767px) {

  /* Search sotto la navbar fixed + un po’ di luce */
  .hero-inner,
  .container.hero-inner {
    padding-top: calc(8px + var(--nav-height) + var(--spazio-3));
  }

  /* Hero search mobile: Compra 3/4 + Tipologia 1/4 sulla stessa riga */
  .hero-search {
    display: grid;
    grid-template-columns: 3fr 1fr;
    gap: var(--spazio-2);
    align-items: stretch;
    margin-top: 0;
  }

  .search-dropdown--azione {
    grid-column: 1;
    min-width: 0;
  }

  .search-dropdown--tipo {
    grid-column: 2;
    min-width: 0;
  }

  .search-dropdown--tipo .search-dropdown-toggle {
    justify-content: center;
    padding: 0 8px;
    gap: 4px;
  }

  /* Menu tipologia ancorato a destra: non esce dal viewport */
  .search-dropdown--tipo .search-dropdown-menu--tipo {
    left: auto;
    right: 0;
    width: max-content;
    min-width: 200px;
    max-width: calc(100vw - 40px);
  }

  .hero-search-input {
    grid-column: 1 / -1;
  }
}

/* Tablet portrait ~600–720px (Tab S/A, M10, Pad…): widget 2 righe → tipologia per esteso */
@media (min-width: 600px) and (max-width: 767px) and (orientation: portrait) {
  .hero-search:not(.pagina-vendita-search) {
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.35fr);
  }

  .hero-search:not(.pagina-vendita-search) .search-tipo-label {
    display: block;
    flex: 1 1 auto;
    min-width: 0;
    text-align: left;
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--colore-testo-scuro);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .hero-search:not(.pagina-vendita-search) .search-dropdown--tipo .search-dropdown-toggle {
    justify-content: flex-start;
    gap: 8px;
    padding: 0 10px 0 12px;
  }

  .hero-search:not(.pagina-vendita-search) .search-dropdown--tipo .search-dropdown-toggle .icon:last-of-type {
    margin-left: auto;
    flex-shrink: 0;
  }
}

/* Mobile portrait + landscape: tipologia per esteso */
@media (max-width: 599px),
(max-width: 1023px) and (orientation: landscape) and (max-height: 499px) {
  .hero-search:not(.pagina-vendita-search) {
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.35fr);
  }

  .hero-search:not(.pagina-vendita-search) .search-dropdown--tipo {
    flex: 0 1 auto;
    width: auto;
    min-width: 0;
    max-width: 7cm;
  }

  .hero-search:not(.pagina-vendita-search) .search-tipo-label {
    display: block;
    flex: 1 1 auto;
    min-width: 0;
    text-align: left;
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--colore-testo-scuro);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .hero-search:not(.pagina-vendita-search) .search-dropdown--tipo .search-dropdown-toggle {
    justify-content: flex-start;
    gap: 8px;
    padding: 0 10px 0 12px;
  }

  .hero-search:not(.pagina-vendita-search) .search-dropdown--tipo .search-dropdown-toggle .icon:last-of-type {
    margin-left: auto;
    flex-shrink: 0;
  }

  .hero-search:not(.pagina-vendita-search) .hero-search-input {
    flex: 1 1 0;
    min-width: 0;
  }
}

@media (max-width: 479px) {
  .navbar-wordmark {
    font-size: 1.05rem;
    transform: translateY(calc((var(--nav-height) - 16px) * 0.085 + 0.9mm));
  }

  .navbar-logo {
    height: calc(var(--nav-height) - 16px);
    width: auto;
    max-height: calc(var(--nav-height) - 16px);
  }
}

/* Solo phone portrait: wordmark nascosto (le tablet portrait sono ~600–720px di larghezza) */
@media (max-width: 599px) and (orientation: portrait) {
  .navbar-wordmark {
    display: none;
  }
}

/* Tablet / iPad portrait (incl. Tab S/A, M10, Pad): wordmark a destra del logo */
@media (min-width: 600px) and (max-width: 1366px) and (orientation: portrait) {
  .navbar-wordmark {
    display: block;
    white-space: nowrap;
    font-size: clamp(0.78rem, 2.1vw, 1.1rem);
  }
}

@media (min-width: 768px) {
  .container {
    padding-left: 32px;
    padding-right: 32px;
  }

  .hero-search {
    flex-direction: row;
    align-items: stretch;
    background: transparent;
    padding: 0;
    gap: 8px;
  }

  .search-dropdown--azione {
    flex: 0 0 140px;
  }

  .search-dropdown--tipo {
    flex: 0 0 64px;
  }

  .search-dropdown-toggle {
    height: 52px;
  }

  .hero-search-input {
    flex: 1;
    height: 52px;
    min-width: 0;
  }

  .hero-search-btn {
    flex: 0 0 52px;
    width: 52px;
    height: 52px;
  }

  .hero-inner,
  .container.hero-inner {
    padding-top: calc(8px + var(--nav-height) + 0.5cm);
    padding-bottom: var(--spazio-7);
    gap: clamp(56px, 12vh, 140px);
  }

  .hero-search {
    margin-top: 1cm;
  }

  .hero-content {
    margin-left: max(-3cm, calc(-8px - (100vw - 1280px) / 2));
  }
}

/* Hero widget: tipologia per esteso — solo desktop + tablet/iPad landscape (no mobile, no portrait) */
@media (min-width: 768px) and (orientation: landscape) and (min-height: 500px),
(min-width: 1367px) {
  .hero-search:not(.pagina-vendita-search) .search-dropdown--tipo {
    /* Larghezza = icona + gap + «Nuove Costruzioni» + gap + chevron + padding */
    flex: 0 0 auto;
    width: calc(18px + 8px + 17ch + 8px + 16px + 26px);
    max-width: calc(18px + 8px + 17ch + 8px + 16px + 26px);
    min-width: 0;
  }

  .hero-search:not(.pagina-vendita-search) .search-tipo-label {
    display: block;
    flex: 1 1 auto;
    min-width: 0;
    text-align: left;
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--colore-testo-scuro);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .hero-search:not(.pagina-vendita-search) .search-dropdown--tipo .search-dropdown-toggle {
    justify-content: flex-start;
    gap: 8px;
    padding: 0 12px 0 14px;
  }

  .hero-search:not(.pagina-vendita-search) .search-dropdown--tipo .search-dropdown-toggle .icon:last-of-type {
    margin-left: auto;
    flex-shrink: 0;
  }

  /* Spazio preso alla barra indirizzo */
  .hero-search:not(.pagina-vendita-search) .hero-search-input {
    flex: 1 1 0;
    min-width: 0;
  }
}

/* Tablet / iPad portrait da 768px (iPad Mini / 1ª gen inclusi): niente offset negativo */
@media (min-width: 768px) and (orientation: portrait) {
  .hero-content {
    margin-left: 0;
  }
}

/* iPad Pro 13 portrait 1032×1376: payoff/h1/sub/cta +2cm dx, +2cm basso */
@media (width: 1032px) and (height: 1376px) and (orientation: portrait) {
  .hero-content {
    margin-left: 2cm;
    margin-top: 2cm;
  }
}

/* iPad Pro 13 landscape 1376×1032: stesso blocco +1.5cm a destra */
@media (width: 1376px) and (height: 1032px) and (orientation: landscape) {
  .hero-content {
    margin-left: 1.5cm;
  }
}

/* Tablet / iPad landscape oltre 769px (iPad Pro 1366 + Surface Pro 7 1368 inclusi) */
@media (min-width: 770px) and (max-width: 1368px) and (orientation: landscape) {
  .hero-content {
    margin-left: 0;
  }
}

/* Mobile / tablet / iPad: cerca dentro il campo indirizzo, a destra */
@media (max-width: 1023px) {
  .hero-search {
    position: relative;
  }

  .hero-search-input {
    padding-right: 48px;
  }

  .hero-search-btn {
    position: absolute;
    right: 4px;
    width: 40px;
    height: 40px;
    flex: none;
    box-shadow: none;
  }
}

@media (max-width: 767px) {
  .hero-search-btn {
    bottom: 4px;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .hero-search-btn {
    top: 50%;
    transform: translateY(-50%);
  }
}

@media (min-width: 1024px) {
  .container {
    padding-left: 40px;
    padding-right: 40px;
  }

  .hamburger {
    display: none;
  }

  .navbar-links {
    display: flex;
  }

  .drawer-overlay,
  .mobile-drawer {
    display: none !important;
  }

  .hero-search {
    max-width: 960px;
  }

  /* Hero: una riga per span solo da desktop (niente overflow su tablet/phone) */
  .hero-title-riga {
    white-space: nowrap;
  }
}

/* ===== SEZIONE ANNUNCI (VENDITA) ===== */
.sezione-annunci {
  padding: var(--spazio-7) 0;
  background: var(--colore-sfondo);
}

/*
  ===== MODELLO TITOLO SEZIONE (riutilizzare ovunque) =====
  HTML:
  <h2 class="sezione-titolo" id="...">
    <span class="sezione-titolo-testo">Testo <span>ENFASI</span></span>
  </h2>
*/
.sezione-titolo {
  display: flex;
  align-items: center;
  gap: 12px;
  text-align: left;
  margin: 0 0 var(--spazio-5);
  font-family: var(--font-titoli);
  font-weight: 400;
  font-size: clamp(1.85rem, 3.5vw, 2.4rem);
  line-height: 1;
  color: #aa9333;
}

/* Linea elenco prima del titolo */
.sezione-titolo::before {
  content: "";
  flex-shrink: 0;
  width: 10px;
  height: 30px;
  background: var(--colore-secondario);
}

.sezione-titolo-bullet {
  display: none;
}

.sezione-titolo-testo {
  display: inline;
  line-height: 1;
  margin-left: 0;
  transform: none;
}

.sezione-titolo-testo span {
  font-weight: 700;
  text-transform: uppercase;
}

/* Immobili in Evidenza: solo iniziale maiuscola su «Evidenza» */
#titolo-vendita .sezione-titolo-testo span {
  text-transform: none;
}

.carousel {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas:
    "track"
    "footer";
  row-gap: var(--spazio-4);
  align-items: center;
}

.carousel-viewport {
  grid-area: track;
  min-width: 0;
}

.carousel-footer {
  grid-area: footer;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  min-height: 28px;
}

.carousel-btn {
  width: 44px;
  height: 44px;
  border: none;
  border-radius: 50%;
  background: var(--colore-primario);
  color: var(--colore-secondario);
  display: none;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: var(--ombra-base);
  transition: filter 0.2s ease, opacity 0.2s ease;
  z-index: 2;
}

.carousel-btn:hover {
  filter: brightness(1.05);
}

.carousel-btn:disabled,
.carousel.is-singolo .carousel-btn {
  opacity: 0.35;
  cursor: default;
  pointer-events: none;
}

/* Desktop: frecce ai lati del carosello */
@media (min-width: 1024px) {
  .carousel:not(.is-singolo) {
    padding-left: 52px;
    padding-right: 52px;
  }

  .carousel:not(.is-singolo) .carousel-btn {
    display: flex;
    position: absolute;
    /* Centro verticale sulla fascia card (sopra i dots) */
    top: 38%;
    transform: translateY(-50%);
  }

  .carousel:not(.is-singolo) .carousel-btn--prev {
    left: 0;
  }

  .carousel:not(.is-singolo) .carousel-btn--next {
    right: 0;
  }

  /* Evita che overflow+snap taglino il bordo sx della prima card */
  .carousel-track {
    padding-left: 8px;
    padding-right: 8px;
    scroll-padding-inline: 8px;
  }
}

.carousel.is-singolo .carousel-dots {
  display: none;
}

/* Una sola card: niente gap/footer sotto (allinea lo spazio alla sezione successiva) */
.carousel.is-singolo {
  row-gap: 0;
}

.carousel.is-singolo .carousel-footer {
  display: none;
}

.carousel.is-singolo .carousel-track {
  padding-bottom: 0;
}

/* Una sola card: niente scroll/drag orizzontale (niente oscillio al tocco) */
.carousel.is-singolo .carousel-track {
  overflow-x: hidden;
  cursor: default;
  touch-action: pan-y;
}

.carousel-viewport {
  overflow: hidden;
}

.carousel-track {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding: 4px 2px 12px;
  cursor: grab;
  /* Swipe orizzontale nativo (phone landscape / Android) */
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x pan-y;
}

.carousel-track::-webkit-scrollbar {
  display: none;
}

.carousel-track.is-dragging {
  cursor: grabbing;
  scroll-behavior: auto;
  scroll-snap-type: none;
}

/* Card annuncio — foto e info staccate (filo d'aria 1mm) */
.card-annuncio {
  flex: 0 0 min(440px, 90vw);
  max-width: 440px;
  display: flex;
  flex-direction: column;
  gap: 1mm;
  background: transparent;
  scroll-snap-align: start;
}

/* Filtri vendita: display:flex non deve sovrascrivere [hidden] */
.card-annuncio[hidden],
.card-annuncio.is-nascosto-filtro {
  display: none !important;
}

/* Link trasparente su tutta la card collegabile */
.card-annuncio--cliccabile {
  position: relative;
}

.card-annuncio-hit {
  position: absolute;
  inset: 0;
  z-index: 3;
  border-radius: var(--raggio-md);
  text-indent: -9999px;
  overflow: hidden;
  color: transparent;
}

/* Condividi annuncio (card collegabili) */
.card-annuncio-share {
  position: relative;
  /* Sopra la cover (media z-index: 5): altrimenti il menu verso l’alto resta nascosto */
  z-index: 6;
  flex-shrink: 0;
}

.card-annuncio-share-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1.5px solid var(--colore-accento);
  border-radius: 50%;
  background: transparent;
  color: var(--colore-accento);
  cursor: pointer;
  box-sizing: border-box;
}

.card-annuncio-share-btn svg {
  width: 20px;
  height: 20px;
  display: block;
}

.card-annuncio-share-menu {
  /* fixed: esce dal carousel (overflow) e resta sopra tutto */
  position: fixed;
  top: 0;
  right: auto;
  left: 0;
  min-width: 180px;
  margin: 0;
  padding: 6px 0;
  list-style: none;
  background: #E4E4DE;
  border: none;
  border-radius: var(--raggio-sm);
  box-shadow: none;
  z-index: 2500;
}

.card-annuncio-share-menu[hidden] {
  display: none;
}

.card-annuncio-share-menu button {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 14px;
  border: none;
  background: transparent;
  color: #0E2B2C;
  font-family: var(--font-corpo);
  font-size: 0.85rem;
  text-align: left;
  cursor: pointer;
}

.card-annuncio-share-menu button svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: #0E2B2C;
}

.card-annuncio-share-menu button:hover {
  background: rgba(14, 43, 44, 0.08);
  color: #0E2B2C;
}

.card-annuncio-media {
  position: relative;
  aspect-ratio: 440 / 250;
  background: #0a1f20;
  border: 1px solid var(--colore-primario);
  /* Solo angoli superiori arrotondati; inferiori retti */
  border-radius: var(--raggio-md) var(--raggio-md) 0 0;
  overflow: hidden;
}

/* Sopra l’hit a tutta card: hover foto e click sulla cover */
.card-annuncio--cliccabile .card-annuncio-media {
  z-index: 5;
}

.card-annuncio-media-link {
  display: block;
  height: 100%;
  position: relative;
  color: inherit;
  text-decoration: none;
}

.card-annuncio-cover-link {
  display: block;
  height: 100%;
  color: inherit;
  text-decoration: none;
}

.card-annuncio-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Seconda foto: nascosta di default; crossfade solo su desktop con hover reale */
.card-annuncio-media-hover {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  z-index: 1;
}

/* Barra «In vendita»: angolo alto sx, sempre sopra la foto (anche in hover) */
.card-annuncio-badge-vendita {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  padding: 4px 12px;
  border-radius: 0 0 var(--raggio-md) 0;
  background: var(--colore-primario);
  font-family: var(--font-corpo);
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: center;
  color: var(--colore-secondario);
  pointer-events: none;
  box-sizing: border-box;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.33);
}

@media (hover: hover) and (pointer: fine) {

  .card-annuncio-media--hover .card-annuncio-media-cover,
  .card-annuncio-media--hover .card-annuncio-media-hover {
    transition: opacity 0.2s ease;
  }

  .card-annuncio-media--hover:hover .card-annuncio-media-hover {
    opacity: 1;
  }
}

.card-annuncio-media--vuota {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--colore-testo-muto);
  font-size: 0.9rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.card-annuncio-body {
  padding: 16px 16px 18px;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "tipo tipo"
    "comune prezzo"
    "specs cta";
  column-gap: 12px;
  row-gap: 10px;
  align-items: end;
  min-height: 172px;
  background: var(--colore-secondario);
  border: 1px solid var(--colore-primario);
  /* Solo angoli superiori retti; inferiori arrotondati */
  border-radius: 0 0 var(--raggio-md) var(--raggio-md);
}

/* Layout card collegabili (modello standard): prezzo / tipologia+via / comune / specs */
.card-annuncio--cliccabile .card-annuncio-body {
  background: #1B1B1B;
  grid-template-columns: 1fr;
  grid-template-areas:
    "prezzo"
    "tipo"
    "comune"
    "specs";
  align-items: start;
}

.card-annuncio--cliccabile .card-annuncio-prezzo {
  grid-area: unset;
  justify-self: start;
  text-align: left;
  font-family: var(--font-corpo);
  font-size: calc(0.98rem + 17px);
  font-weight: 700;
  color: var(--colore-accento);
}

.card-annuncio--cliccabile .card-annuncio-prezzo-riga {
  grid-area: prezzo;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  min-width: 0;
}

.card-annuncio--cliccabile .card-annuncio-tipo {
  grid-area: tipo;
  font-family: var(--font-corpo);
  font-weight: 400;
  color: var(--colore-testo);
}

.card-annuncio--cliccabile .card-annuncio-comune {
  grid-area: comune;
  font-family: var(--font-corpo);
  font-weight: 400;
  text-transform: uppercase;
  color: var(--colore-testo-muto);
}

.card-annuncio--cliccabile .card-annuncio-specs {
  grid-area: specs;
}

.card-annuncio--cliccabile .card-spec {
  background: var(--colore-secondario);
}

.card-annuncio--cliccabile .card-annuncio-cta {
  display: none;
}

.card-annuncio-tipo {
  grid-area: tipo;
  margin: 0;
  width: 100%;
  min-width: 0;
  font-size: 1.4rem;
  font-weight: 400;
  color: #fff;
  line-height: 1.25;
  /* Wrap su mobile: nowrap solo da tablet (card più larga) */
  overflow-wrap: anywhere;
}

.card-annuncio-riga {
  display: contents;
}

.card-annuncio-comune {
  grid-area: comune;
  margin: 0;
  align-self: center;
  display: flex;
  align-items: center;
  gap: 0.4em;
  font-size: calc(0.82rem + 7px);
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #fff;
}

/* Icona tipologia: colore accento, scala col testo città */
.card-annuncio-comune-icon {
  width: 1em;
  height: 1em;
  flex-shrink: 0;
  display: block;
  object-fit: contain;
  filter: brightness(0) saturate(100%) invert(62%) sepia(41%) saturate(612%) hue-rotate(16deg) brightness(92%) contrast(88%);
}

.card-annuncio-prezzo {
  grid-area: prezzo;
  margin: 0;
  justify-self: end;
  text-align: right;
  font-size: calc(0.98rem + 10px);
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
}

.card-annuncio-meta {
  display: contents;
}

.card-annuncio-specs {
  grid-area: specs;
  display: flex;
  gap: 8px;
  min-width: 0;
  align-self: end;
}

.card-spec {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: auto;
  min-width: 0;
  min-height: 64px;
  padding: 8px 8px;
  border: 1px solid var(--colore-primario);
  border-radius: 4px;
}

/* Contenitore fisso: icone diverse allineate e stessa misura */
.card-spec-icon {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.card-spec-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.card-spec>span:last-child {
  font-size: 0.78rem;
  color: var(--colore-testo-muto);
  text-align: center;
  line-height: 1.2;
  white-space: nowrap;
}

.card-annuncio-cta {
  grid-area: cta;
  justify-self: end;
  align-self: end;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 12px 22px;
  border-radius: var(--raggio-sm);
  background: var(--colore-primario);
  color: var(--colore-secondario);
  font-size: 1rem;
  font-weight: 700;
  white-space: nowrap;
  transition: filter 0.2s ease;
}

.card-annuncio-cta:hover {
  filter: brightness(1.05);
}

.card-annuncio--vuota .card-annuncio-tipo,
.card-annuncio--vuota .card-annuncio-comune {
  color: var(--colore-testo-muto);
}

.card-annuncio--vuota .card-annuncio-cta {
  opacity: 0.55;
  pointer-events: none;
}

.carousel-dots {
  display: flex;
  gap: 0;
  align-items: center;
  justify-content: center;
}

.carousel-dot {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: none;
  padding: 0;
  background: transparent;
  opacity: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.carousel-dot::after {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--colore-primario);
  opacity: 0.35;
}

.carousel-dot.is-active::after {
  opacity: 1;
}

.carousel-vedi-tutti {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.9rem;
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.carousel-vedi-tutti:hover {
  color: var(--colore-primario);
}

@media (min-width: 768px) {
  .card-annuncio {
    flex-basis: 440px;
  }

  .card-annuncio-tipo {
    white-space: nowrap;
    overflow-wrap: normal;
  }
}

/* Card mobile: icone a tutta riga, Scopri sotto (niente sovrapposizione) */
@media (max-width: 767px) {

  /* 90vw sforava il .container (padding): bordo dx tagliato */
  .carousel-track {
    padding-left: 0;
    padding-right: 0;
  }

  .card-annuncio {
    flex: 0 0 100%;
    width: 100%;
    max-width: 100%;
  }

  .carousel.is-singolo .carousel-track {
    justify-content: center;
  }

  .card-annuncio-body {
    grid-template-areas:
      "tipo tipo"
      "comune prezzo"
      "specs specs"
      "cta cta";
    align-items: start;
  }

  /* Card collegabili: stesso layout desktop anche su mobile */
  .card-annuncio--cliccabile .card-annuncio-body {
    grid-template-columns: 1fr;
    grid-template-areas:
      "prezzo"
      "tipo"
      "comune"
      "specs";
  }

  .card-annuncio-specs {
    width: 100%;
    justify-content: space-between;
    gap: 6px;
  }

  .card-spec {
    flex: 1 1 0;
    padding: 6px 4px;
    min-height: 58px;
  }

  .card-annuncio-cta {
    justify-self: end;
    margin-top: 2px;
  }
}

/* Mobile portrait stretti: Sparanise (CE) + prezzo su un solo rigo */
@media (max-width: 349px) and (orientation: portrait) {
  .card-annuncio-body {
    column-gap: 8px;
  }

  .card-annuncio-comune,
  .card-annuncio-prezzo {
    white-space: nowrap;
  }

  .card-annuncio-comune {
    font-size: 0.82rem;
    letter-spacing: 0.02em;
  }

  .card-annuncio-prezzo {
    font-size: 1.15rem;
  }
}

@media (min-width: 1024px) {
  .sezione-annunci {
    padding: var(--spazio-8) 0;
  }
}

/* ===== SEZIONE VENDI (layout mockup) ===== */
.sezione-vendi {
  padding: var(--spazio-7) 0;
  background: var(--colore-sfondo);
}

.vendi-occhiello {
  margin: 0 0 var(--spazio-5);
  font-family: var(--font-titoli);
  font-size: clamp(calc(1.05rem + 3px), calc(2.2vw + 3px), calc(1.35rem + 3px));
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #fff;
}

/* Copy editoriale Vendi: tutto Cardo Bold, centrato */
.vendi-intro {
  width: 100%;
  max-width: none;
  margin: 0 0 var(--spazio-5);
  padding-inline: 0;
  box-sizing: border-box;
  font-family: var(--font-titoli);
  font-weight: 700;
  text-align: center;
  color: var(--colore-testo);
}

/* Tagline post-banner: Cardo Bold, centrata, grande, 3 righe a tutta colonna */
.vendi-tagline {
  width: 100%;
  max-width: none;
  margin: 0;
  padding-inline: 0;
  box-sizing: border-box;
  font-family: var(--font-titoli);
  font-weight: 700;
  text-align: center;
  /* Fade-up allo scroll (blocco intero; tutti i viewport) */
  opacity: 0;
  transform: translateY(4.5rem);
  transition: opacity 1.15s ease-in-out, transform 1.15s cubic-bezier(0.22, 1, 0.36, 1);
}

.vendi-tagline.is-in-view {
  opacity: 1;
  transform: translateY(0);
}

/* Salita: mostra subito senza rilanciare la transizione */
.vendi-tagline.is-no-trans,
.vendi-scroll-fade-down.is-no-trans {
  transition: none;
}

/* Elemento già visto in questa sessione: compare subito, senza animazione (hero, valuta, servizi, chi siamo) */
.is-no-trans,
.valuta-loco.is-no-trans .valuta-loco-card--stima-testo,
.valuta-loco.is-no-trans .valuta-loco-card--stima-lato,
.valuta-loco.is-no-trans .valuta-loco-card--come,
.valuta-loco.is-no-trans .valuta-loco-card--lato,
.valuta-loco.is-no-trans .valuta-loco-foto-wrap {
  transition: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .vendi-tagline {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

.vendi-intro-riga,
.vendi-tagline-riga {
  display: block;
  white-space: normal;
  overflow-wrap: break-word;
  word-break: normal;
  hyphens: none;
}

/* Tutte le righe intro: stessa misura della tagline post-banner */
.vendi-intro-riga {
  margin: 0;
  font-family: var(--font-titoli);
  font-size: clamp(1.35rem, 3.2vw, 2.25rem);
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: 0.01em;
  text-transform: none;
  color: var(--colore-testo);
}

.vendi-intro-blocco {
  display: block;
}

/* Fade-down allo scroll (blocco «Come primo passo») */
.vendi-scroll-fade-down {
  opacity: 0;
  transform: translateY(-4.5rem);
  transition: opacity 1.15s ease-in-out, transform 1.15s cubic-bezier(0.22, 1, 0.36, 1);
}

.vendi-scroll-fade-down.is-in-view {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .vendi-scroll-fade-down {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* Tagline: tutte le righe Cardo Bold, grandi, colore testo */
.vendi-tagline-riga {
  font-family: var(--font-titoli);
  font-size: clamp(1.35rem, 3.2vw, 2.25rem);
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: 0.01em;
  text-transform: none;
  color: var(--colore-testo);
}

/* Banner: tutta larghezza — desktop/tablet = composito; mobile portrait = stack */
.vendi-banner {
  width: 100%;
  margin: 0 0 var(--spazio-5);
  overflow: visible;
}

/* Wrapper scala allo scroll (solo desktop mouse, via JS) */
.vendi-banner-scala {
  width: 100%;
  overflow: hidden;
  transform-origin: center center;
  border-radius: 0;
  will-change: transform;
}

.vendi-banner-desktop {
  display: block;
  width: 100%;
  height: auto;
  vertical-align: middle;
}

/* Stack mobile nascosto di default (tablet/desktop invariati) */
.vendi-banner-mobile {
  display: none;
}

.vendi-banner-testo,
.vendi-banner-foto {
  display: block;
  width: 100%;
  height: auto;
  vertical-align: middle;
}

.vendi-banner-testo { aspect-ratio: 828 / 640; }
.vendi-banner-foto { aspect-ratio: 1600 / 893; }

/* Solo mobile portrait: testo (immagine) sopra + foto stretta di mano */
@media (max-width: 767px) and (orientation: portrait) {
  .vendi-banner-desktop {
    display: none;
  }

  .vendi-banner-mobile {
    display: flex;
    flex-direction: column;
  }
}

.vendi-cards {
  display: grid;
  /* Mobile portrait: 1 colonna */
  grid-template-columns: 1fr;
  gap: var(--spazio-5);
}

.vendi-card {
  display: flex;
  flex-direction: column;
  gap: 0;
  background: transparent;
  min-width: 0;
}

/* Titolo subito sopra la descrizione */
.vendi-card-titolo {
  margin: 0 0 var(--spazio-2);
  font-family: "Cardo", serif;
  font-size: calc(0.95rem + 7px);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: lowercase;
  text-align: left;
  color: var(--colore-primario);
  line-height: 1.3;
}

.vendi-card-titolo::first-letter {
  text-transform: uppercase;
}

.vendi-card-box {
  display: flex;
  flex-direction: column;
  flex: 1;
  border: none;
  border-radius: 0;
  overflow: visible;
  background: transparent;
}

.vendi-card-media {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border: 1px solid var(--colore-accento);
  border-radius: 20px;
  box-sizing: border-box;
}

.vendi-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 20px;
}

.vendi-card-body {
  position: relative;
  isolation: isolate;
  margin-top: 1mm;
  padding: var(--spazio-3);
  box-sizing: border-box;
  overflow: hidden;
  border-radius: 20px;
}

/* Bordo 1px accento su titolo+descrizione: solo metà alta, lati sfumati in basso */
.vendi-card-body::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border: 1px solid var(--colore-accento);
  border-radius: 20px;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom,
      #000 0%,
      #000 42%,
      transparent 72%);
  mask-image: linear-gradient(to bottom,
      #000 0%,
      #000 42%,
      transparent 72%);
}

/* Alone secondario dentro il box: dall’alto, scende oltre metà e sfuma */
.vendi-card-body::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 58%;
  z-index: 0;
  border-radius: 20px 20px 0 0;
  background: var(--colore-secondario);
  filter: blur(40px);
  opacity: 0.55;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 20%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 20%, transparent 100%);
}

.vendi-card-titolo,
.vendi-card-body p {
  position: relative;
  z-index: 2;
}

.vendi-card-body p {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--colore-testo);
}

/* Card Vendi unita + hover (tutte): scale / foto full / testo su fondo trasparente */
.vendi-card--unita .vendi-card-box {
  position: relative;
  container-type: inline-size;
  container-name: vendi-unita;
  background: #242424;
  border: 1px solid var(--colore-accento);
  border-radius: 20px;
  overflow: hidden;
  box-sizing: border-box;
  box-shadow: 0 12px 20px -4px rgba(0, 0, 0, 0.6);
  /* Lineare: niente cubic-bezier “spring” (evita rimbalzo al mouseout) */
  transition: transform 0.25s linear, box-shadow 0.25s linear, border-color 0.25s linear;
}

.vendi-card--unita .vendi-card-media {
  position: relative;
  z-index: 0;
  border: none;
  border-radius: 0;
}

/* Img nascosta: tiene l’altezza iniziale come nel demo */
.vendi-card--unita .vendi-card-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
  visibility: hidden;
}

.vendi-card--unita .vendi-card-media-hover {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  /* Stessa altezza della media 4/3 — background-image inline in HTML */
  height: calc(100cqw * 3 / 4);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transition: height 0.25s linear, opacity 0.25s linear;
  opacity: 1;
  pointer-events: none;
  z-index: 1;
}

.vendi-card--unita .vendi-card-body {
  position: relative;
  z-index: 2;
  margin-top: 0;
  background: #242424;
  /* Al mouseout: ritarda il ritorno dello sfondo dopo che la foto è scesa */
  transition: background-color 0.15s linear 0.18s;
}

.vendi-card--unita .vendi-card-body::before,
.vendi-card--unita .vendi-card-body::after {
  content: none;
  display: none;
}

@media (hover: hover) and (pointer: fine) {
  .vendi-card--unita .vendi-card-box:hover {
    transform: scale(1.1);
    box-shadow: 0 30px 18px -8px rgba(0, 0, 0, 1);
    border-color: transparent;
    z-index: 3;
  }

  /* Sfondo grigio sparisce subito, poi parte l’espansione foto */
  .vendi-card--unita .vendi-card-box:hover .vendi-card-body {
    background-color: transparent;
    transition: background-color 0.06s linear 0s;
  }

  .vendi-card--unita .vendi-card-box:hover .vendi-card-media-hover {
    height: 100%;
    opacity: 1;
    transition: height 0.25s linear 0.04s, opacity 0.25s linear 0.04s;
  }

  /* Gradiente all’hover (stesso principio touch: 80→60→40→20→0) */
  .vendi-card--unita .vendi-card-box::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    opacity: 0;
    background: linear-gradient(to top,
        rgba(0, 0, 0, 0.80) 0%,
        rgba(0, 0, 0, 0.60) 33%,
        rgba(0, 0, 0, 0.40) 66%,
        rgba(0, 0, 0, 0.20) 99%,
        transparent 100%);
    transition: opacity 0.25s linear;
  }

  .vendi-card--unita .vendi-card-box:hover::after {
    opacity: 1;
    transition: opacity 0.25s linear 0.04s;
  }
}

/* Touch (mobile/tablet): foto piena; opacità solo dal basso ai 3/4, sfumata */
@media not ((hover: hover) and (pointer: fine)) {
  .vendi-card--unita .vendi-card-box {
    transform: none;
  }

  .vendi-card--unita .vendi-card-body {
    background-color: transparent;
    transition: none;
  }

  .vendi-card--unita .vendi-card-media-hover {
    height: 100%;
    opacity: 1;
    transition: none;
  }

  /* Gradiente: scuro dietro i testi → sfuma fino a ~3/4 foto */
  .vendi-card--unita .vendi-card-box::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(to top,
        rgba(0, 0, 0, 0.80) 0%,
        rgba(0, 0, 0, 0.60) 33%,
        rgba(0, 0, 0, 0.40) 66%,
        rgba(0, 0, 0, 0.20) 99%,
        transparent 100%);
  }

  /* Solo card 4 (Consulenza 360°), touch: crop 3mm a sinistra */
  .vendi-cards .vendi-card--unita:nth-child(4) .vendi-card-media-hover {
    background-position: calc(50% + 3mm) center;
  }
}

/* Mobile landscape (tutti i phone, anche larghi): sempre 2 colonne */
@media (orientation: landscape) and (max-height: 520px) {
  .vendi-cards {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spazio-4);
  }
}

/* Tablet / iPad portrait: 2 colonne
   (incl. Lenovo Tab M10, OnePlus Pad, Tab A7/A9/S10 FE/S4, Surface Duo) */
@media (min-width: 520px) and (max-width: 1366px) and (orientation: portrait) {
  .vendi-cards {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spazio-4);
  }

  /* Immobili in Vendita: card a metà (mai piena); più card = carosello sx↔dx, mai stack */
  #immobili-vendita .carousel-track {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    overflow-x: auto;
  }

  #immobili-vendita .card-annuncio {
    flex: 0 0 calc(50% - 10px);
    width: calc(50% - 10px);
    max-width: calc(50% - 10px);
  }

  #immobili-vendita .carousel.is-singolo .carousel-track {
    justify-content: flex-start;
  }

  /* Sparanise (CE) + prezzo su un rigo, senza far uscire specs/CTA dal bordo */
  #immobili-vendita .card-annuncio-body {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "tipo tipo"
      "comune prezzo"
      "specs specs"
      "cta cta";
    column-gap: 8px;
    align-items: start;
  }

  /* Card collegabili: mantiene i 3 righi anche in tablet portrait */
  #immobili-vendita .card-annuncio--cliccabile .card-annuncio-body {
    grid-template-columns: 1fr;
    grid-template-areas:
      "prezzo"
      "tipo"
      "comune"
      "specs";
  }

  #immobili-vendita .card-annuncio-tipo {
    min-width: 0;
    font-size: 1.05rem;
  }

  #immobili-vendita .card-annuncio-comune,
  #immobili-vendita .card-annuncio-prezzo {
    white-space: nowrap;
    min-width: 0;
  }

  #immobili-vendita .card-annuncio-comune {
    font-size: 0.78rem;
    letter-spacing: 0.02em;
  }

  #immobili-vendita .card-annuncio-prezzo {
    font-size: 1.1rem;
  }

  #immobili-vendita .card-annuncio--cliccabile .card-annuncio-prezzo {
    font-size: calc(1.1rem + 7px);
  }

  #immobili-vendita .card-annuncio-specs {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    justify-content: space-between;
    gap: 6px;
  }

  #immobili-vendita .card-spec {
    flex: 1 1 0;
    min-width: 0;
    padding: 6px 4px;
  }

  #immobili-vendita .card-annuncio-cta {
    justify-self: end;
  }
}

/* Desktop: sempre 3 card intere in vista; carosello utile dalla 4ª in poi */
@media (min-width: 1024px) and (orientation: landscape),
(min-width: 1367px) {
  #immobili-vendita .carousel-track {
    padding-left: 2px;
    padding-right: 2px;
    scroll-padding-inline: 2px;
  }

  /* (100% − 2 gap da 20px) / 3 = larghezza esatta di ogni card */
  #immobili-vendita .card-annuncio {
    flex: 0 0 calc((100% - 40px) / 3);
    width: calc((100% - 40px) / 3);
    max-width: none;
  }

  /* Testi più compatti: entrano nella card a 1/3 (no specs/icone) */
  #immobili-vendita .card-annuncio--cliccabile .card-annuncio-prezzo {
    font-size: 1.2rem;
  }

  #immobili-vendita .card-annuncio--cliccabile .card-annuncio-tipo,
  #immobili-vendita .card-annuncio-tipo {
    font-size: 0.92rem;
  }

  #immobili-vendita .card-annuncio--cliccabile .card-annuncio-comune,
  #immobili-vendita .card-annuncio-comune {
    font-size: 0.78rem;
  }
}

/* Desktop: alone secondario dietro il carosello — stretto in verticale, abbondante in orizzontale */
@media (min-width: 1024px) and (orientation: landscape),
(min-width: 1367px) {
  #immobili-vendita .carousel {
    isolation: isolate;
  }

  #immobili-vendita .carousel::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 0;
    bottom: 28px;
    /* Poco oltre le frecce prev/next (non a tutta viewport) */
    left: -18px;
    right: -18px;
    width: auto;
    transform: none;
    background: var(--colore-secondario);
    border-radius: 0;
    filter: blur(42px);
    opacity: 0.85;
    pointer-events: none;
  }
}

/* Tablet/iPad landscape stretti (Tab S4/A9/S10, iPad mini/Air, Nest Hub):
   specs dentro la card a 1/3 — altri modelli invariati */
@media (min-width: 1024px) and (max-width: 1180px) and (orientation: landscape) and (max-height: 820px) {
  #immobili-vendita .card-annuncio-specs {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    justify-content: space-between;
    gap: 4px;
  }

  #immobili-vendita .card-spec {
    flex: 1 1 0;
    min-width: 0;
    padding: 5px 2px;
    min-height: 52px;
    gap: 4px;
  }

  #immobili-vendita .card-spec-icon {
    width: 22px;
    height: 22px;
  }

  #immobili-vendita .card-spec>span:last-child {
    font-size: 0.68rem;
  }
}

/* Mobile portrait <400px: tipologia + indirizzo su due righe ok */
@media (max-width: 399px) and (orientation: portrait) {

  .card-annuncio-tipo,
  #immobili-vendita .card-annuncio-tipo {
    white-space: normal;
    overflow-wrap: anywhere;
  }
}

/* Portrait ≥400px (mobile/tablet/iPad): un solo rigo, size adattiva via JS */
@media (min-width: 400px) and (orientation: portrait) {

  .card-annuncio-tipo,
  #immobili-vendita .card-annuncio-tipo {
    white-space: nowrap;
    overflow-wrap: normal;
  }
}

/* Tablet / iPad landscape (+ ribelli es. Surface Duo 720×540): sempre 4 colonne */
@media (min-width: 520px) and (max-width: 1366px) and (orientation: landscape) and (min-height: 521px) {
  .vendi-cards {
    grid-template-columns: repeat(4, 1fr);
    column-gap: var(--spazio-3);
    row-gap: var(--spazio-4);
  }
}

/* Surface Duo e viewport 520–767: niente scroll orizzontale */
@media (min-width: 520px) and (max-width: 767px) {

  html,
  body {
    overflow-x: hidden;
    max-width: 100%;
  }

  .container,
  .vendi-cards,
  .chi-siamo-intro,
  .servizi-accordion,
  .valuta-loco,
  .sezione-vendi,
  .sezione-servizi,
  .sezione-chi-siamo,
  .sezione-valuta {
    max-width: 100%;
    min-width: 0;
  }

  /* Grid items: evita min-width:auto che spinge oltre il viewport */
  .vendi-card,
  .chi-siamo-foto,
  .chi-siamo-bio,
  .servizi-item {
    min-width: 0;
    max-width: 100%;
  }

  .servizi-toggle-titolo,
  .servizi-voce-titolo,
  .servizi-voce-testo,
  .chi-siamo-bio-testo,
  .vendi-card-titolo,
  .vendi-card-body p {
    overflow-wrap: anywhere;
    word-break: break-word;
    min-width: 0;
  }

  .valuta-loco-cta {
    max-width: calc(100% - 16px);
    box-sizing: border-box;
    overflow: hidden;
  }
}

@media (min-width: 1024px) {
  .sezione-vendi {
    padding: var(--spazio-8) 0;
  }

  .vendi-cards {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--spazio-4) var(--spazio-3);
  }

  .vendi-card-body p {
    font-size: 0.82rem;
  }
}

/* Desktop mouse: micro-break griglia + gap più largo (aria per scale hover 1.1) */
@media (min-width: 1024px) and (hover: hover) and (pointer: fine) {
  .vendi-cards {
    width: calc(100% + 40px);
    margin-left: -20px;
    margin-right: -20px;
    column-gap: clamp(28px, 2.8vw, 44px);
    row-gap: var(--spazio-5);
  }
}

/* iPad Pro portrait (~1024×1366): resta 2 colonne, non le 4 del desktop */
@media (min-width: 1024px) and (max-width: 1366px) and (orientation: portrait) {
  .vendi-cards {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spazio-4);
  }
}

/* ===== SEZIONE VALUTA ===== */
.sezione-valuta {
  padding: var(--spazio-7) 0 var(--spazio-8);
  background: var(--colore-sfondo);
}

#titolo-valuta {
  justify-content: center;
  text-align: center;
}

.valuta-headline {
  margin: 0 0 var(--spazio-2);
  font-family: var(--font-titoli);
  font-size: clamp(1.05rem, 2.5vw, 1.45rem);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-align: center;
  color: var(--colore-testo);
}

.valuta-subhead {
  margin: 0 0 var(--spazio-4);
  text-align: center;
  font-size: 1rem;
  color: #fff;
}

/* Stessa misura di «Valutazione in loco» */
.valuta-online-titolo {
  margin: 0 0 var(--spazio-5);
  font-family: var(--font-titoli);
  font-size: clamp(1.05rem, 2vw, 1.25rem);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-align: center;
  color: #E4E4DE;
}

.valuta-form {
  display: flex;
  flex-direction: column;
  gap: var(--spazio-5);
  margin-bottom: var(--spazio-7);
}

.valuta-box {
  background: var(--colore-secondario);
  border: 1px solid var(--colore-primario);
  border-radius: var(--raggio-md);
  padding: var(--spazio-4);
}

.valuta-intro-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spazio-5);
  margin-bottom: var(--spazio-5);
}

.valuta-intro-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: var(--spazio-3);
}

.valuta-intro-head img {
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  object-fit: contain;
}

.valuta-intro-head h3 {
  margin: 0;
  font-family: var(--font-corpo);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--colore-primario);
}

.valuta-intro-col p,
.valuta-loco-block p {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--colore-testo);
}

.valuta-campi {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

.valuta-campi--dati {
  margin-bottom: var(--spazio-4);
  /* Mobile: 4 righe; da 768px torna 2 colonne */
  grid-template-columns: 1fr;
}

.valuta-field {
  position: relative;
  display: block;
  min-width: 0;
}

.valuta-field input[type="text"],
.valuta-field input[type="email"],
.valuta-field input[type="tel"],
.valuta-field input[type="number"],
.valuta-dropdown-toggle {
  width: 100%;
  min-height: 48px;
  padding: 10px 14px;
  border: none;
  border-radius: 2px;
  background: var(--colore-navbar);
  color: var(--colore-testo-scuro);
  font-family: var(--font-corpo);
  font-size: 0.95rem;
}

.valuta-field input::placeholder {
  color: var(--colore-testo-scuro);
  opacity: 0.85;
}

.valuta-dropdown-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  cursor: pointer;
  text-align: left;
}

.valuta-dropdown-toggle span:not(.is-selected) {
  opacity: 0.85;
}

.valuta-dropdown-menu {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 4px);
  z-index: 20;
  margin: 0;
  padding: 6px 0;
  list-style: none;
  background: var(--colore-navbar);
  border: 1px solid var(--colore-primario);
  border-radius: 2px;
  box-shadow: var(--ombra-media);
}

.valuta-dropdown-menu li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  color: var(--colore-testo-scuro);
  cursor: pointer;
  font-size: 0.95rem;
}

.valuta-dropdown-menu li[hidden] {
  display: none;
}

.valuta-dropdown-menu li:hover,
.valuta-dropdown-menu li[aria-selected="true"] {
  background: rgba(207, 181, 59, 0.18);
}

.valuta-checks {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 20px;
  padding: 8px 0;
}

.valuta-check {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #fff;
  font-size: 0.92rem;
  cursor: pointer;
}

.valuta-check input,
.valuta-privacy input {
  width: 18px;
  height: 18px;
  accent-color: var(--colore-primario);
  flex-shrink: 0;
  background: var(--colore-navbar);
}

.valuta-dati-titolo {
  margin: 0;
  text-align: center;
  font-family: var(--font-titoli);
  font-size: clamp(0.95rem, 1.8vw, 1.1rem);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #fff;
}

.valuta-footer {
  display: flex;
  flex-direction: column;
  gap: var(--spazio-4);
  align-items: stretch;
}

.valuta-privacy {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.78rem;
  line-height: 1.45;
  color: #fff;
  cursor: pointer;
}

.valuta-btn {
  align-self: flex-end;
  text-transform: uppercase;
  border: 1px solid #000;
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.33);
  color: #1a1a1a;
  -webkit-text-fill-color: #1a1a1a;
}

.valuta-btn:hover,
.btn.btn--oro.valuta-btn:hover {
  filter: none;
  background: #e87a1e;
  color: #1a1a1a;
  -webkit-text-fill-color: #1a1a1a;
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.33);
}

.valuta-form-msg {
  margin: var(--spazio-3) 0 0;
  font-size: 0.9rem;
}

.valuta-form-msg.is-errore {
  color: var(--colore-errore);
}

.valuta-form-msg.is-ok {
  display: flex;
  align-items: flex-start;
  gap: 0.4em;
  color: var(--colore-primario);
}

/* Spunta di conferma prima del testo */
.valuta-form-msg.is-ok::before {
  content: "✓";
  flex-shrink: 0;
  font-weight: 700;
  line-height: 1.35;
}

/* Banner valutazione in loco: card a sx + foto quadrata a dx (mockup) */
.valuta-loco {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--spazio-4);
  width: 100%;
  margin-top: var(--spazio-5);
  overflow: visible;
}

.valuta-loco-titolo {
  margin: 0;
  font-family: var(--font-titoli);
  font-size: clamp(1.05rem, 2vw, 1.25rem);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-align: center;
  color: #E4E4DE;
}

.valuta-loco-inner {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spazio-4);
  align-items: stretch;
  min-width: 0;
  isolation: isolate;
}

.valuta-loco-cards {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  width: 100%;
  box-sizing: border-box;
}

.valuta-loco-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spazio-3);
  flex: 1 1 auto;
  padding: var(--spazio-3) var(--spazio-4);
  border: none;
  border-radius: 20px;
  box-sizing: border-box;
  min-width: 0;
}

/* Hover card testo (Come / Affidati / Stima): scale + ombra — solo desktop mouse */
@media (min-width: 1024px) and (hover: hover) and (pointer: fine) {

  /* Colonna card sopra foto banner quando una card è in hover */
  .valuta-loco-cards:has(.valuta-loco-card--come:hover),
  .valuta-loco-cards:has(.valuta-loco-card--lato:hover),
  .valuta-loco-cards:has(.valuta-loco-card--stima-testo:hover) {
    position: relative;
    z-index: 20;
  }

  .valuta-loco-card--come,
  .valuta-loco-card--lato,
  .valuta-loco-card--stima-testo {
    position: relative;
    z-index: 0;
    transition: transform 0.4s cubic-bezier(0.33, 1, 0.68, 1);
  }

  .valuta-loco-card--come::before,
  .valuta-loco-card--lato::before,
  .valuta-loco-card--stima-testo::before,
  .valuta-loco-card--come::after,
  .valuta-loco-card--lato::after,
  .valuta-loco-card--stima-testo::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 20px;
    z-index: -1;
    pointer-events: none;
    transition: opacity 0.4s cubic-bezier(0.33, 1, 0.68, 1);
  }

  /* Ombra a riposo (leggera) */
  .valuta-loco-card--come::before,
  .valuta-loco-card--lato::before,
  .valuta-loco-card--stima-testo::before {
    box-shadow: -2px 2px 6px 1px hsla(0, 0%, 0%, 0.2);
  }

  /* Ombra hover (più pronunciata) — direzione per card */
  .valuta-loco-card--come::after,
  .valuta-loco-card--lato::after,
  .valuta-loco-card--stima-testo::after {
    opacity: 0;
  }

  /* Come: 45° diagonale in basso a dx */
  .valuta-loco-card--come::after {
    box-shadow: 20px 20px 16px 7px hsla(0, 0%, 0%, 0.6);
  }

  /* Affidati: diagonale in basso a sx (invariata) */
  .valuta-loco-card--lato::after {
    box-shadow: -20px 20px 16px 7px hsla(0, 0%, 0%, 0.6);
  }

  /* Stima: 225° diagonale in alto a sx */
  .valuta-loco-card--stima-testo::after {
    box-shadow: -20px -20px 16px 7px hsla(0, 0%, 0%, 0.6);
  }

  .valuta-loco-card--come:hover,
  .valuta-loco-card--lato:hover,
  .valuta-loco-card--stima-testo:hover {
    z-index: 20;
    transform: scale(1.1);
    cursor: pointer;
  }

  /* Come: scale + 3mm più in basso e 3mm più a dx */
  .valuta-loco-card--come:hover {
    z-index: 20;
    transform: scale(1.1) translate(5mm, 3mm);
  }

  /* Affidati: ingrandimento leggermente spostato a sx */
  .valuta-loco-card--lato {
    transform-origin: 70% center;
  }

  .valuta-loco-card--lato:hover,
  article.valuta-loco-card.valuta-loco-card--lato:hover {
    z-index: 20;
    transform: scale(1.1) translate(-2mm, 3mm);
  }

  /* Stima: scale + 3mm più in alto e 3mm più a sx */
  .valuta-loco-card--stima-testo {
    transform-origin: 70% center;
  }

  .valuta-loco-card--stima-testo:hover {
    z-index: 20;
    transform: scale(1.1) translate(-3mm, -3mm);
  }

  .valuta-loco-card--come:hover::before,
  .valuta-loco-card--lato:hover::before,
  .valuta-loco-card--stima-testo:hover::before {
    opacity: 0;
  }

  .valuta-loco-card--come:hover::after,
  .valuta-loco-card--lato:hover::after,
  .valuta-loco-card--stima-testo:hover::after {
    opacity: 1;
  }
}

/* Reveal allo scroll: desktop mouse + tablet/iPad landscape ≥1220px */
@media (min-width: 1024px) and (hover: hover) and (pointer: fine),
(min-width: 1220px) and (orientation: landscape) {

  /* Clip spento fino a fine animazione (se torna subito, restano nel box) */
  .sezione-valuta:has(.valuta-loco:not(.is-reveal-done)),
  .sezione-valuta:has(.valuta-loco:not(.is-reveal-done))>.container,
  .valuta-loco:not(.is-reveal-done),
  .valuta-loco:not(.is-reveal-done) .valuta-loco-inner,
  .valuta-loco:not(.is-reveal-done) .valuta-loco-cards,
  .valuta-loco:not(.is-reveal-done) .valuta-loco-card-riga {
    overflow: visible;
    overflow-x: visible;
  }

  .valuta-loco-card--stima-testo,
  .valuta-loco-card--stima-lato,
  .valuta-loco-card--come,
  .valuta-loco-foto-wrap {
    opacity: 0;
    transition:
      transform 0.4s cubic-bezier(0.33, 1, 0.68, 1),
      translate 1s cubic-bezier(0.33, 1, 0.68, 1),
      opacity 0.75s cubic-bezier(0.33, 1, 0.68, 1);
  }

  /* TEMP: Affidati a noi ferma in posizione naturale (solo per valutazione) */
  .valuta-loco-card--lato {
    opacity: 1;
    translate: none;
    transition: transform 0.4s cubic-bezier(0.33, 1, 0.68, 1);
  }

  /* 2) Laterali: fuori viewport — tempi calibrati per arrivare insieme (~1,15s) */
  .valuta-loco-card--come {
    translate: -100vw 0;
    transition-delay: 0.18s;
    transition-duration: 0.4s, 0.97s, 0.75s;
  }

  .valuta-loco-card--stima-lato {
    translate: -100vw 0;
    transition-delay: 0.28s;
    transition-duration: 0.4s, 0.87s, 0.7s;
  }

  .valuta-loco-foto-wrap {
    translate: 100vw 0;
    transition-delay: 0.22s;
    transition-duration: 0.4s, 0.93s, 0.72s;
  }

  /* 3) Ultima a partire, ma atterra col gruppo (ricongiunge) */
  .valuta-loco-card--stima-testo {
    translate: 0 100vh;
    transition-delay: 0.32s;
    transition-duration: 0.4s, 0.83s, 0.7s;
  }

  .valuta-loco.is-revealed .valuta-loco-card--stima-testo,
  .valuta-loco.is-revealed .valuta-loco-card--stima-lato,
  .valuta-loco.is-revealed .valuta-loco-card--come,
  .valuta-loco.is-revealed .valuta-loco-foto-wrap {
    opacity: 1;
    translate: 0 0;
    transition-delay: 0s;
  }

  /* Dopo l’ingresso: ripristina clip anti-overflow delle card +1cm */
  .valuta-loco.is-reveal-done .valuta-loco-inner {
    overflow-x: clip;
  }
}

@media (min-width: 1024px) and (hover: hover) and (pointer: fine) and (prefers-reduced-motion: reduce),
(min-width: 1220px) and (orientation: landscape) and (prefers-reduced-motion: reduce) {

  .valuta-loco-card--stima-testo,
  .valuta-loco-card--stima-lato,
  .valuta-loco-card--come,
  .valuta-loco-card--lato,
  .valuta-loco-foto-wrap {
    opacity: 1;
    translate: none;
    transition: transform 0.4s cubic-bezier(0.33, 1, 0.68, 1);
  }
}

.valuta-loco-card-testo {
  min-width: 0;
  flex: 1 1 auto;
}

/* Wrapper overflow foto stima (pan/zoom desktop) */
.valuta-loco-card--stima-lato .valuta-loco-card-foto-overflow {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 100%;
  flex: 1 1 auto;
  min-height: 0;
}

/* Caption: nascosta di default; solo desktop mouse */
.valuta-loco-card-foto-caption {
  display: none;
}

/* Icona sopra il titolo, angolo alto sx, colore secondario */
.valuta-loco-card-icona {
  display: block;
  width: 40px;
  height: 40px;
  margin: 0 0 var(--spazio-2);
  flex-shrink: 0;
  background-color: var(--colore-secondario);
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
  mask-repeat: no-repeat;
}

.valuta-loco-card-icona--ruler {
  -webkit-mask-image: url("assets/images/icons/icon-ruler-dimension-line.svg");
  mask-image: url("assets/images/icons/icon-ruler-dimension-line.svg");
}

.valuta-loco-card-icona--checkup {
  -webkit-mask-image: url("assets/images/icons/icon-Checkup-Diagnostic.svg");
  mask-image: url("assets/images/icons/icon-Checkup-Diagnostic.svg");
}

.valuta-loco-card-riga {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

/* Mobile: solo le card con testo; le metà vuote restano nascoste */
.valuta-loco-card--lato,
.valuta-loco-card--stima-lato {
  display: none;
}

.valuta-loco-card--come {
  background: var(--colore-accento);
}

.valuta-loco-card--lato {
  background: var(--colore-secondario);
  border: 1px solid var(--colore-accento);
}

.valuta-loco-card--stima {
  background: #8D7A2A;
}

.valuta-loco-card h3 {
  margin: 0 0 var(--spazio-2);
  font-family: "Poppins", sans-serif;
  font-size: clamp(1rem, 2vw, 1.15rem);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--colore-sfondo);
}

.valuta-loco-card p {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--colore-sfondo);
}

.valuta-loco-card strong {
  color: var(--colore-sfondo);
  font-weight: 700;
}

/* Titolo stima: Poppins Bold, MAIUSCOLO */
.valuta-loco-card h3.valuta-loco-card-criteri-titolo {
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  font-style: normal;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--colore-sfondo);
}

.valuta-loco-card p.valuta-loco-card-criteri {
  font-family: "Poppins", sans-serif;
  font-weight: 400;
  font-style: normal;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--colore-sfondo);
}

/* Default (mobile + tablet/iPad portrait): voci in linea con virgole */
.valuta-loco-card-criteri-voce {
  display: inline;
}

.valuta-loco-card-criteri-voce:not(:last-child)::after {
  content: ", ";
}

/* Desktop + tablet/iPad landscape: 5 voci su 5 righe */
@media (min-width: 768px) and (orientation: landscape),
(min-width: 1367px) {
  .valuta-loco-card-criteri-voce {
    display: block;
  }

  .valuta-loco-card-criteri-voce:not(:last-child)::after {
    content: none;
  }
}

/* Card stima: testi bianco puro */
.valuta-loco-card--stima h3,
.valuta-loco-card--stima p,
.valuta-loco-card--stima strong,
.valuta-loco-card--stima h3.valuta-loco-card-criteri-titolo,
.valuta-loco-card--stima p.valuta-loco-card-criteri {
  color: #fff;
}

.valuta-loco-foto-wrap {
  position: relative;
  width: 100%;
  max-width: 100%;
  aspect-ratio: 1 / 1;
  border: 1px solid var(--colore-accento);
  border-radius: 20px;
  overflow: hidden;
  background: var(--colore-secondario);
  min-width: 0;
}

.valuta-loco-foto {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.valuta-loco-cta {
  position: absolute;
  right: clamp(10px, 2vw, 20px);
  bottom: clamp(10px, 2vw, 20px);
  z-index: 1;
  max-width: calc(100% - 24px);
  width: fit-content;
  text-align: center;
  white-space: normal;
  line-height: 1.25;
}

/* Mobile portrait: CTA sempre sotto la foto, fuori dall’immagine */
@media (max-width: 1023px) and (orientation: portrait) {
  .valuta-loco-foto-wrap {
    aspect-ratio: auto;
    height: auto;
    overflow: visible;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--spazio-3);
    border: none;
    border-radius: 0;
    background: transparent;
  }

  .valuta-loco-foto {
    aspect-ratio: 1 / 1;
    width: 100%;
    height: auto;
    border: 3px solid var(--colore-accento);
    border-radius: 20px;
  }

  .valuta-loco-cta {
    position: static;
    right: auto;
    bottom: auto;
    align-self: center;
    max-width: 100%;
  }
}

/* Solo mobile portrait: alone secondario dietro la foto, spostato in basso */
@media (max-width: 767px) and (orientation: portrait) {
  .valuta-loco-foto-wrap {
    isolation: isolate;
  }

  .valuta-loco-foto-wrap::before {
    content: "";
    position: absolute;
    z-index: 0;
    left: 50%;
    top: 0;
    width: 108%;
    aspect-ratio: 1 / 1;
    transform: translate(-50%, 12%);
    background: var(--colore-secondario);
    border-radius: 20px;
    filter: blur(44px);
    opacity: 0.80;
    pointer-events: none;
  }

  .valuta-loco-foto,
  .valuta-loco-cta {
    position: relative;
    z-index: 1;
  }
}

/* Solo da 1024px: card a sx, foto a dx.
   Mobile landscape resta impilato (come portrait) per non perdere le card piccole. */
@media (min-width: 1024px) {
  .valuta-loco-inner {
    /* Luce unica tra card/foto: 0.5cm */
    --valuta-loco-gap-ref: 0.5cm;
    grid-template-columns: minmax(0, 1.15fr) minmax(280px, 0.85fr);
    align-items: stretch;
    /* Gap colonna 0: la distanza 0.5cm dalla foto banner la danno le card dx (+1cm vs inset 1.5cm) */
    gap: 0;
    min-width: 0;
    width: 100%;
    /* Evita che le card +1cm espandano il viewport (attiva dopo reveal: .is-reveal-done) */
    overflow-x: visible;
  }

  .valuta-loco-cards {
    display: flex;
    flex-direction: column;
    gap: var(--valuta-loco-gap-ref);
    height: 100%;
    min-width: 0;
    min-height: 0;
    align-self: stretch;
    overflow: visible;
  }

  .valuta-loco-foto-wrap {
    width: 100%;
    min-width: 0;
    aspect-ratio: 1 / 1;
    align-self: stretch;
    /* Area piena per CTA; bordo/alone solo sulla foto ridotta */
    overflow: visible;
    border: none;
    background: transparent;
  }

  /* Foto −1.5cm, ancorata in alto a dx (si riduce da sx / dal basso) */
  .valuta-loco-foto {
    position: absolute;
    top: 0;
    right: 0;
    width: calc(100% - 1.5cm);
    height: calc(100% - 1.5cm);
    object-fit: cover;
    object-position: center;
    border: 1px solid var(--colore-accento);
    border-radius: 20px;
  }

  /* CTA: stessa larghezza della foto, radius come foto, baseline card stima, allineato a dx */
  .valuta-loco-cta {
    z-index: 2;
    right: 0;
    bottom: 0;
    width: calc(100% - 1.5cm);
    max-width: none;
    box-sizing: border-box;
    border-radius: 20px;
    min-height: 40px;
    padding: 8px 18px;
    font-size: 0.82rem;
    justify-content: center;
  }
}

/* Mobile / tablet landscape <1024: impilato —
   1) Come | 2) stima 2/3 + foto-stima 1/3 | 3) Affidati a tutta larghezza */
@media (max-width: 1023px) and (orientation: landscape) {
  .valuta-loco-inner {
    grid-template-columns: 1fr;
  }

  .valuta-loco-card-riga {
    display: contents;
  }

  .valuta-loco-cards {
    display: grid;
    grid-template-columns: 2fr 1fr;
    grid-template-areas:
      "come come"
      "stima foto"
      "lato lato";
    gap: 8px;
    align-items: stretch;
  }

  .valuta-loco-card--come {
    grid-area: come;
  }

  .valuta-loco-card--stima-testo {
    grid-area: stima;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    min-height: 0;
    height: auto;
  }

  .valuta-loco-card--stima-lato {
    grid-area: foto;
    display: flex;
    padding: 0;
    overflow: hidden;
    border: 3px solid #8D7A2A;
    box-sizing: border-box;
    min-height: 0;
    height: auto;
    align-self: stretch;
  }

  .valuta-loco-card--stima-lato .valuta-loco-card-foto {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }

  /* Terza riga: Affidati a tutta larghezza, testo a dx */
  article.valuta-loco-card.valuta-loco-card--lato {
    grid-area: lato;
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    padding: 12px 14px;
    box-sizing: border-box;
    height: auto;
    min-height: 0;
  }

  .valuta-loco-card--lato .valuta-loco-card-lato-testo {
    margin: 0;
    font-family: "Poppins", sans-serif;
    font-size: calc(0.75rem + 5px);
    font-weight: 700;
    line-height: 1.35;
    color: var(--colore-accento);
    text-align: right;
    white-space: normal;
    max-width: 100%;
    overflow-wrap: break-word;
  }

  /* Foto banner con CTA in overlay, angolo basso a dx */
  .valuta-loco-foto-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    height: auto;
    overflow: hidden;
    display: block;
    border: 1px solid var(--colore-accento);
    border-radius: 20px;
    background: var(--colore-secondario);
  }

  .valuta-loco-foto {
    aspect-ratio: auto;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border: none;
    border-radius: 0;
  }

  .valuta-loco-cta {
    position: absolute;
    right: clamp(10px, 2vw, 20px);
    bottom: clamp(10px, 2vw, 20px);
    z-index: 1;
    align-self: auto;
    max-width: calc(100% - 24px);
    width: fit-content;
  }
}

/* Mobile portrait: Affidati sotto la stima, altezza = 2/3 della stima (--valuta-stima-h da JS) */
@media (max-width: 599px) and (orientation: portrait) {
  .valuta-loco-card-riga {
    display: contents;
  }

  .valuta-loco-cards {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas:
      "come"
      "stima"
      "lato";
    gap: 8px;
  }

  .valuta-loco-card--come {
    grid-area: come;
    /* Flip-up allo scroll */
    opacity: 0;
    transform: perspective(900px) rotateX(55deg) translateY(1.25rem);
    transform-origin: center bottom;
    transition: opacity 0.85s ease-out, transform 0.85s cubic-bezier(0.22, 1, 0.36, 1);
  }

  .valuta-loco-card--stima-testo {
    grid-area: stima;
    /* Flip-up allo scroll (dopo «Come funziona») */
    opacity: 0;
    transform: perspective(900px) rotateX(55deg) translateY(1.25rem);
    transform-origin: center bottom;
    transition: opacity 0.85s ease-out, transform 0.85s cubic-bezier(0.22, 1, 0.36, 1);
  }

  .valuta-loco-card--come.is-in-view,
  .valuta-loco-card--stima-testo.is-in-view {
    opacity: 1;
    transform: perspective(900px) rotateX(0deg) translateY(0);
  }

  .valuta-loco-card--stima-lato {
    display: none;
  }

  article.valuta-loco-card.valuta-loco-card--lato {
    grid-area: lato;
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    padding: 12px 14px;
    box-sizing: border-box;
    height: calc(var(--valuta-stima-h, 10.5rem) * 2 / 3);
    min-height: 0;
  }

  .valuta-loco-card--lato .valuta-loco-card-lato-testo {
    margin: 0;
    font-family: "Poppins", sans-serif;
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1.35;
    color: var(--colore-accento);
    text-align: right;
    white-space: normal;
    max-width: 100%;
    overflow-wrap: break-word;
  }

  /* «(entro i 50 km).» sempre su un solo rigo */
  .valuta-loco-km {
    white-space: nowrap;
  }
}

/* Sotto i 345px: «Affidati a noi per una» su un solo rigo */
@media (max-width: 344px) and (orientation: portrait) {
  .valuta-loco-br--dopo-per {
    display: none;
  }

  .valuta-loco-affidati-prima {
    white-space: nowrap;
  }
}

@media (max-width: 599px) and (orientation: portrait) and (prefers-reduced-motion: reduce) {
  .valuta-loco-card--come,
  .valuta-loco-card--stima-testo {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* Mobile portrait ≥344px: terza riga a metà — foto-stima | Affidati */
@media (min-width: 344px) and (max-width: 599px) and (orientation: portrait) {
  .valuta-loco-cards {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "come come"
      "stima stima"
      "foto lato";
  }

  .valuta-loco-card--stima-lato {
    grid-area: foto;
    display: flex;
    padding: 0;
    overflow: hidden;
    border: 3px solid #8D7A2A;
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    height: calc(var(--valuta-stima-h, 10.5rem) * 2 / 3);
    min-height: 0;
    /* Fade-right: entra da sinistra (translate, non transform: evita conflitti) */
    opacity: 0;
    translate: -2.75rem 0;
    transition: opacity 0.9s ease-out, translate 0.9s cubic-bezier(0.22, 1, 0.36, 1);
  }

  .valuta-loco-card--stima-lato .valuta-loco-card-foto {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }

  /* Fade-left: entra da destra (simultaneo alla foto) */
  article.valuta-loco-card.valuta-loco-card--lato {
    width: 100%;
    min-width: 0;
    opacity: 0;
    translate: 2.75rem 0;
    transition: opacity 0.9s ease-out, translate 0.9s cubic-bezier(0.22, 1, 0.36, 1);
  }

  .valuta-loco-card--stima-lato.is-in-view,
  article.valuta-loco-card.valuta-loco-card--lato.is-in-view {
    opacity: 1;
    translate: 0 0;
  }

  /* Default ≥344px: «Affidati a noi per una» su un rigo */
  .valuta-loco-br--dopo-per {
    display: none;
  }

  .valuta-loco-affidati-prima {
    white-space: nowrap;
  }
}

/* 345–365px: «Affidati a noi per» / «una consulenza…» */
@media (min-width: 345px) and (max-width: 365px) and (orientation: portrait) {
  .valuta-loco-br--dopo-per {
    display: block;
  }

  .valuta-loco-br--dopo-una {
    display: none;
  }

  .valuta-loco-affidati-prima {
    white-space: normal;
  }
}

@media (min-width: 344px) and (max-width: 599px) and (orientation: portrait) and (prefers-reduced-motion: reduce) {
  .valuta-loco-card--stima-lato,
  article.valuta-loco-card.valuta-loco-card--lato {
    opacity: 1;
    translate: none;
    transition: none;
  }
}

/* Tablet / iPad portrait ≥600px:
   1) Come | 2) stima 2/3 + foto-stima 1/3 | 3) Affidati a tutta larghezza (testo a dx)
   CTA in overlay sulla foto banner; niente alone sotto la foto */
@media (min-width: 600px) and (max-width: 1023px) and (orientation: portrait) {
  .valuta-loco-card-riga {
    display: contents;
  }

  .valuta-loco-cards {
    display: grid;
    grid-template-columns: 2fr 1fr;
    grid-template-areas:
      "come come"
      "stima foto"
      "lato lato";
    gap: 8px;
    align-items: stretch;
  }

  .valuta-loco-card--come {
    grid-area: come;
    align-self: stretch;
    height: auto;
    box-sizing: border-box;
  }

  .valuta-loco-card--stima-testo {
    grid-area: stima;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    min-height: 0;
    height: auto;
    box-sizing: border-box;
  }

  /* Icona sopra, titolo sotto; testo più grande per riempire la card larga */
  .valuta-loco-card--stima-testo .valuta-loco-card-testo {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    width: 100%;
  }

  .valuta-loco-card--stima-testo .valuta-loco-card-icona {
    display: block;
    width: 40px;
    height: 40px;
    margin: 0 0 4px;
  }

  .valuta-loco-card--stima-testo .valuta-loco-card-criteri-titolo {
    margin: 0 0 4px;
    font-size: 1rem;
    line-height: 1.3;
  }

  .valuta-loco-card--stima-testo .valuta-loco-card-criteri {
    width: 100%;
    font-size: 0.82rem;
    line-height: 1.5;
    letter-spacing: 0.01em;
  }

  .valuta-loco-card--stima-lato {
    grid-area: foto;
    display: flex;
    padding: 0;
    overflow: hidden;
    border: 3px solid #8D7A2A;
    box-sizing: border-box;
    min-height: 0;
    height: auto;
    align-self: stretch;
  }

  .valuta-loco-card--stima-lato .valuta-loco-card-foto {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }

  /* Terza riga: solo Affidati, testo a dx */
  article.valuta-loco-card.valuta-loco-card--lato {
    grid-area: lato;
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    padding: 12px 14px;
    box-sizing: border-box;
    height: auto;
    min-height: 0;
    align-self: stretch;
  }

  .valuta-loco-card--lato .valuta-loco-card-lato-testo {
    margin: 0;
    font-family: "Poppins", sans-serif;
    font-size: calc(0.75rem + 5px);
    font-weight: 700;
    line-height: 1.35;
    color: var(--colore-accento);
    text-align: right;
    white-space: normal;
    max-width: 100%;
    overflow-wrap: break-word;
  }

  /* CTA in overlay, angolo basso a dx sulla foto banner */
  .valuta-loco-foto-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    height: auto;
    overflow: hidden;
    display: block;
    border: 1px solid var(--colore-accento);
    border-radius: 20px;
    background: var(--colore-secondario);
  }

  .valuta-loco-foto-wrap::before {
    content: none;
    display: none;
  }

  .valuta-loco-foto {
    aspect-ratio: auto;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border: none;
    border-radius: 0;
    position: relative;
    z-index: 0;
  }

  .valuta-loco-cta {
    position: absolute;
    right: clamp(10px, 2vw, 20px);
    bottom: clamp(10px, 2vw, 20px);
    z-index: 1;
    align-self: auto;
    max-width: calc(100% - 24px);
    width: fit-content;
  }
}

/* Tablet / iPad portrait ≥600px: «Affidati a noi per una» su un solo rigo */
@media (min-width: 600px) and (max-width: 1366px) and (orientation: portrait) {
  .valuta-loco-br--dopo-per {
    display: none;
  }

  .valuta-loco-affidati-prima {
    white-space: nowrap;
  }
}

/* Da 768px in poi (tutti i modelli): «Affidati a noi per una» su un solo rigo */
@media (min-width: 768px) {
  .valuta-loco-br--dopo-per {
    display: none;
  }

  .valuta-loco-affidati-prima {
    white-space: nowrap;
  }
}

/* Tablet / iPad portrait 600–1024: reveal AOS card Valuta in loco */
@media (min-width: 600px) and (max-width: 1024px) and (orientation: portrait) {
  .valuta-loco-card--come {
    opacity: 0;
    transform: translate3d(0, -2.5rem, 0);
    transition: opacity 0.7s ease, transform 0.7s ease;
  }

  .valuta-loco-card--stima-testo {
    opacity: 0;
    transform: translate3d(-2.5rem, 0, 0);
    transition: opacity 0.7s ease, transform 0.7s ease;
  }

  .valuta-loco-card--stima-lato {
    opacity: 0;
    transform: translate3d(2.5rem, 0, 0);
    transition: opacity 0.7s ease, transform 0.7s ease;
  }

  article.valuta-loco-card.valuta-loco-card--lato {
    opacity: 0;
    transform: translate3d(0, 2.5rem, 0);
    transition: opacity 0.7s ease, transform 0.7s ease;
  }

  .valuta-loco-card--come.is-in-view,
  .valuta-loco-card--stima-testo.is-in-view,
  .valuta-loco-card--stima-lato.is-in-view,
  article.valuta-loco-card.valuta-loco-card--lato.is-in-view {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@media (min-width: 600px) and (max-width: 1024px) and (orientation: portrait) and (prefers-reduced-motion: reduce) {
  .valuta-loco-card--come,
  .valuta-loco-card--stima-testo,
  .valuta-loco-card--stima-lato,
  article.valuta-loco-card.valuta-loco-card--lato {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* Desktop: righe = metà altezza foto; prima 2/3+1/3; seconda 50/50 con testo a dx */
@media (min-width: 1024px) {
  .valuta-loco-cards {
    display: grid;
    grid-template-rows: 1fr 1fr;
    gap: var(--valuta-loco-gap-ref);
  }

  .valuta-loco-card-riga {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: var(--valuta-loco-gap-ref);
    align-items: stretch;
    min-height: 0;
    height: 100%;
  }

  .valuta-loco-card-riga--stima {
    grid-template-columns: 1fr 1fr;
    gap: var(--valuta-loco-gap-ref);
  }

  .valuta-loco-card--lato,
  .valuta-loco-card--stima-lato {
    display: flex;
    min-height: 100%;
  }

  /* «Affidati a noi»: estesa +1cm verso banner; testo in basso a dx */
  article.valuta-loco-card.valuta-loco-card--lato {
    align-items: flex-end;
    justify-content: flex-end;
    padding: 16px 14px;
    position: relative;
    z-index: 1;
    box-sizing: border-box;
    width: calc(100% + 1cm);
  }

  /* «La stima si basa su»: stessa estensione verso banner */
  .valuta-loco-card--stima-testo {
    position: relative;
    z-index: 1;
    box-sizing: border-box;
    width: calc(100% + 1cm);
  }

  .valuta-loco-card--stima-lato {
    position: relative;
    padding: 0;
    overflow: hidden;
    border: 3px solid #8D7A2A;
  }

  .valuta-loco-card--stima-lato .valuta-loco-card-foto-overflow {
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 100%;
  }

  .valuta-loco-card--stima-lato .valuta-loco-card-foto {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    will-change: transform;
    backface-visibility: hidden;
  }

  /* Caption + pan/zoom foto: solo desktop mouse */
  @media (hover: hover) and (pointer: fine) {
    .valuta-loco-card--stima-lato {
      cursor: pointer;
    }

    .valuta-loco-card-foto-caption {
      display: block;
      position: absolute;
      left: 0;
      bottom: 0;
      z-index: 2;
      width: 100%;
      margin: 0;
      padding: 10px 14px;
      background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.6) 100%);
      color: #fff;
      text-align: center;
      text-shadow: 0 1px 1px #000;
      pointer-events: none;
      backface-visibility: hidden;
      transform: translateY(100%);
      transition: transform 450ms ease-out;
    }

    .valuta-loco-card-foto-caption h4 {
      margin: 0;
      font-family: "Poppins", sans-serif;
      font-size: 0.85rem;
      font-weight: 700;
      letter-spacing: 0.04em;
      text-transform: uppercase;
    }

    .valuta-loco-card--stima-lato:hover .valuta-loco-card-foto-caption {
      transform: translateY(0);
    }

    .valuta-loco-card--stima-lato .valuta-loco-card-foto {
      transition: transform 0.4s linear;
    }

    .valuta-loco-card--stima-lato.is-foto-reset .valuta-loco-card-foto {
      transition: transform 1s ease-out;
    }
  }

  .valuta-loco-card--lato .valuta-loco-card-lato-testo {
    margin: 0;
    font-family: "Poppins", sans-serif;
    font-size: 0.8rem;
    font-weight: 700;
    line-height: 1.35;
    color: var(--colore-accento);
    text-align: right;
    white-space: normal;
    max-width: 100%;
    overflow-wrap: break-word;
  }

  .valuta-loco-card--stima-testo {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
  }

  .valuta-loco-card--stima-testo .valuta-loco-card-criteri {
    font-size: 0.78rem;
    line-height: 1.5;
    letter-spacing: 0.01em;
  }

  .valuta-loco-card--stima-testo .valuta-loco-card-criteri-titolo {
    font-size: 0.95rem;
  }
}

/* Stima: +3px sul contenuto — tablet / iPad / desktop (no mobile phone) */
@media (min-width: 768px) {
  .valuta-loco-card--stima-testo .valuta-loco-card-criteri-titolo {
    font-size: calc(0.95rem + 3px);
  }

  .valuta-loco-card--stima-testo .valuta-loco-card-criteri {
    font-size: calc(0.78rem + 3px);
  }
}

/* Mobile: CTA sotto la foto se serve spazio */
@media (max-width: 767px) {
  .valuta-loco-cta {
    padding: 12px 18px;
    font-size: 0.78rem;
    line-height: 1.3;
  }
}

/* Mobile portrait: ritocchi spazi, titoli e CTA */
@media (max-width: 767px) and (orientation: portrait) {

  /* Titolo Immobili in Vendita: stessa misura degli altri titoli di sezione */
  #titolo-vendita {
    max-width: 100%;
  }

  #titolo-vendita .sezione-titolo-testo {
    white-space: nowrap;
  }

  /* Spazio card → Vendi allineato alle altre sezioni (niente footer vuoto) */
  .carousel.is-singolo {
    row-gap: 0;
  }

  .carousel.is-singolo .carousel-footer {
    display: none;
  }

  .carousel.is-singolo .carousel-track {
    padding-bottom: 0;
  }

  .sezione-annunci {
    padding-bottom: var(--spazio-7);
  }

  /* Meno spazio tra form dati e blocco valutazione in loco */
  .valuta-form {
    margin-bottom: var(--spazio-4);
  }

  .valuta-loco {
    margin-top: 0;
  }

  /* CTA Prenota: sempre un solo rigo */
  .valuta-loco-cta {
    white-space: nowrap;
    font-size: 0.78rem;
    padding: 12px 14px;
  }

  /* FAQ: spazio reale tra titolo e «Domande Frequenti» (padding evita collasso margini) */
  #titolo-faq {
    margin-bottom: 0;
  }

  .faq-occhiello {
    margin: 0 0 var(--spazio-2);
    padding-top: var(--spazio-6);
  }

  .faq-lista .faq-item:first-child .faq-domanda {
    padding-top: 8px;
  }
}

/* Landscape / tablet: CTA resta sotto il blocco (niente overlay sulla foto) */
@media (max-width: 767px) and (orientation: landscape) and (min-height: 521px) {
  .valuta-loco-cta {
    font-size: 0.78rem;
    padding: 10px 14px;
    white-space: nowrap;
  }
}

@media (max-width: 1023px) and (orientation: landscape) and (max-height: 520px) {
  .valuta-loco-cta {
    font-size: 0.78rem;
    padding: 10px 14px;
  }
}

@media (min-width: 768px) and (max-width: 1366px) and (min-height: 521px) {
  .valuta-loco-cta {
    font-size: clamp(0.82rem, 1.1vw, 0.95rem);
  }
}

@media (min-width: 520px) and (max-width: 1366px) and (orientation: landscape) and (min-height: 521px) {
  .valuta-loco-cta {
    white-space: nowrap;
  }
}

@media (min-width: 768px) {
  .valuta-box {
    padding: var(--spazio-5);
  }

  .valuta-intro-grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--spazio-5);
  }

  .valuta-campi {
    grid-template-columns: repeat(6, 1fr);
  }

  .valuta-field--full {
    grid-column: span 3;
  }

  .valuta-campi>.valuta-field:not(.valuta-field--full) {
    grid-column: span 2;
  }

  .valuta-campi>.valuta-dropdown:not(.valuta-field--full) {
    grid-column: span 3;
  }

  .valuta-checks {
    grid-column: span 3;
    justify-content: flex-start;
  }

  .valuta-campi--dati {
    grid-template-columns: 1fr 1fr;
  }

  /* Due campi per riga (nome|cognome, telefono|email) */
  .valuta-campi.valuta-campi--dati>.valuta-field {
    grid-column: span 1;
  }

  .valuta-footer {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
  }

  .valuta-privacy {
    flex: 1;
    max-width: 70%;
  }
}

@media (min-width: 1024px) {
  .sezione-valuta {
    padding: var(--spazio-8) 0;
  }
}

/* ===== SEZIONE SERVIZI ===== */
.sezione-servizi {
  padding: var(--spazio-7) 0 var(--spazio-8);
  background: var(--colore-sfondo);
}

/* Prefazione breve prima delle card overview */
.servizi-prefazione {
  margin: calc(var(--spazio-3) * -1) 0 var(--spazio-5);
  max-width: 40rem;
  font-family: var(--font-corpo);
  font-size: clamp(0.95rem, 1.6vw, 1.08rem);
  font-weight: 400;
  line-height: 1.55;
  color: var(--colore-testo);
}

/* Spazio tra le card overview e l'accordion dettaglio */
.sezione-servizi .vendi-cards {
  margin-bottom: var(--spazio-6);
}

/* Default: titoli card su una riga (br nascosto) */
.sezione-servizi .vendi-card-titolo-br {
  display: none;
}

/* Landscape <1107px: titoli sempre su due righe */
@media (max-width: 1106px) and (orientation: landscape) {
  .sezione-servizi .vendi-card-titolo-br {
    display: block;
  }
}

/* Solo mobile portrait: fade-up tipo AOS (atterraggio con saltello) */
@media (max-width: 599px) and (orientation: portrait) {
  .sezione-servizi .vendi-card {
    opacity: 0;
    transform: translate3d(0, 3.25rem, 0);
    transition:
      opacity 0.7s ease,
      transform 0.95s cubic-bezier(0.22, 1.85, 0.36, 1);
  }

  .sezione-servizi .vendi-card.is-in-view {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@media (max-width: 599px) and (orientation: portrait) and (prefers-reduced-motion: reduce) {
  .sezione-servizi .vendi-card {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

.servizi-accordion {
  display: flex;
  flex-direction: column;
  gap: 0;
  max-width: 920px;
}

/* Mobile/tablet: le colonne non esistono in layout → ordine originale dei 4 toggle */
.servizi-col {
  display: contents;
}

.servizi-item--valutazione {
  order: 1;
}

.servizi-item--marketing {
  order: 2;
}

.servizi-item--pratiche {
  order: 3;
}

.servizi-item--consulenza {
  order: 4;
}

.servizi-item {
  border-bottom: 1px solid var(--colore-accento);
}

.servizi-toggle {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 16px 0;
  border: none;
  background: transparent;
  color: #aa9333;
  font-family: var(--font-corpo);
  text-align: left;
  cursor: pointer;
  /* Touch: evita flash azzurro su tap */
  -webkit-tap-highlight-color: transparent;
}

.servizi-toggle:focus-visible {
  outline: 2px solid var(--colore-accento);
  outline-offset: 2px;
}

.servizi-icona {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  object-fit: contain;
}

.servizi-toggle-titolo {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.25;
  color: #aa9333;
}

/* Cerchio secondario + freccia accento verso il basso (solo toggle Servizi) */
.servizi-toggle-segno {
  position: relative;
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--colore-secondario);
  transition: transform 0.2s ease;
}

.servizi-toggle-segno::after {
  content: "";
  position: absolute;
  top: 42%;
  left: 50%;
  width: 9px;
  height: 9px;
  border-right: 2px solid var(--colore-accento);
  border-bottom: 2px solid var(--colore-accento);
  transform: translate(-50%, -60%) rotate(45deg);
  box-sizing: border-box;
}

/* Aperto: freccia verso l’alto */
.servizi-item.is-open .servizi-toggle-segno {
  transform: rotate(180deg);
}

.servizi-panel {
  padding: 0 0 var(--spazio-4);
}

.servizi-voce {
  width: 100%;
  margin-bottom: var(--spazio-3);
}

.servizi-voce:last-child {
  margin-bottom: 0;
}

.servizi-voce-titolo {
  margin: 0 0 var(--spazio-2);
  font-family: var(--font-corpo);
  font-size: 0.95rem;
  font-weight: 500;
  line-height: 1.3;
  text-transform: uppercase;
  color: var(--colore-testo-muto);
  text-align: left;
}

.servizi-voce-testo {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--colore-testo);
  text-align: left;
}

.servizi-item.is-open .servizi-toggle {
  padding-bottom: 10px;
}

@media (min-width: 1024px) {
  .sezione-servizi {
    padding: var(--spazio-8) 0;
  }

  .servizi-icona {
    width: 48px;
    height: 48px;
  }
}

/* Desktop (≥1367) + tablet/iPad landscape da 1280px (Surface Pro 7 1368 incluso):
   2 colonne indipendenti — sx: Valutazione → Pratiche | dx: Marketing → Consulenza */
@media (min-width: 1367px),
(min-width: 1280px) and (max-width: 1366px) and (orientation: landscape) {
  .servizi-accordion {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--spazio-5);
    row-gap: 0;
    max-width: none;
    width: 100%;
    align-items: start;
  }

  .servizi-col {
    display: flex;
    flex-direction: column;
    min-width: 0;
  }

  .servizi-item {
    min-width: 0;
    order: unset;
  }
}

/* ===== SEZIONE CHI SIAMO ===== */
.sezione-chi-siamo {
  padding: var(--spazio-7) 0 var(--spazio-8);
  background: var(--colore-sfondo);
}

.chi-siamo-intro {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spazio-5);
  align-items: start;
}

.chi-siamo-foto {
  position: relative;
  isolation: isolate;
  margin: 0;
  width: 100%;
  overflow: visible;
  border-radius: var(--raggio-md);
  border: 1px solid #aa9333;
  box-sizing: border-box;
}

/* Alone secondario dietro la foto — alone leggero, non a tutta pagina */
.chi-siamo-foto::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -2%;
  bottom: -3%;
  left: -4%;
  right: -4%;
  background: var(--colore-secondario);
  border-radius: 0;
  filter: blur(36px);
  opacity: 0.8;
  pointer-events: none;
}

/* Mobile portrait: alone più esteso solo sotto */
@media (max-width: 767px) and (orientation: portrait) {
  .chi-siamo-foto::before {
    bottom: -12%;
  }
}

.chi-siamo-foto img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: center;
  border-radius: var(--raggio-md);
}

/* Solo mobile portrait: fade-left tipo AOS (duration 500) */
@media (max-width: 599px) and (orientation: portrait) {
  .chi-siamo-foto {
    opacity: 0;
    transform: translate3d(100px, 0, 0);
    transition: opacity 500ms ease, transform 500ms ease;
  }

  .chi-siamo-foto.is-in-view {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@media (max-width: 599px) and (orientation: portrait) and (prefers-reduced-motion: reduce) {
  .chi-siamo-foto {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

.chi-siamo-bio-nome {
  margin: 0 0 var(--spazio-2);
  font-family: var(--font-titoli);
  font-size: clamp(calc(1.35rem + 2px), calc(2.5vw + 2px), calc(1.75rem + 2px));
  font-weight: 400;
  color: #aa9333;
}

.chi-siamo-bio-ruolo {
  margin: 0 0 var(--spazio-3);
  font-family: var(--font-corpo);
  font-size: 0.95rem;
  font-weight: 400;
  color: var(--colore-testo);
}

/* «Il tuo agente immobiliare»: Poppins Bold, maiuscolo */
.chi-siamo-bio-ruolo-agente {
  font-family: var(--font-corpo);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* «Titolare di Furia Immobiliare Srls»: Cardo Bold */
.chi-siamo-bio-ruolo-linea {
  font-family: var(--font-titoli);
  font-size: calc(1rem);
  font-weight: 700;
}

/* «Titolare»: senza maiuscolo forzato */
.chi-siamo-bio-ruolo-titolare {
  text-transform: none;
}

/* «Furia Immobiliare Srls»: colore testo, maiuscolo */
.chi-siamo-bio-ruolo-agenzia {
  color: var(--colore-testo);
  text-transform: uppercase;
}

.chi-siamo-bio-testo {
  margin: 0 0 var(--spazio-3);
  font-size: 1rem;
  line-height: 1.65;
  color: var(--colore-testo);
  text-align: justify;
}

/* Mobile portrait: bio allineata a sinistra (non giustificata) */
@media (max-width: 767px) and (orientation: portrait) {
  .chi-siamo-bio-testo {
    text-align: left;
  }
}

.chi-siamo-bio-testo:last-child {
  margin-bottom: 0;
}

@media (min-width: 1024px) {
  .sezione-chi-siamo {
    padding: var(--spazio-8) 0;
  }

  /* Desktop: foto e bio affiancate, allineate in alto */
  .chi-siamo-intro {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    gap: var(--spazio-6);
    align-items: start;
  }

  /* Solo foto: −5%; bio invariata nella sua colonna */
  .chi-siamo-foto {
    width: 95%;
    max-width: 95%;
    justify-self: start;
    /* Fade-right tipo AOS (duration 500) */
    opacity: 0;
    transform: translate3d(-100px, 0, 0);
    transition: opacity 500ms ease, transform 500ms ease;
  }

  .chi-siamo-foto.is-in-view {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }

  /* Bio 3mm più in alto */
  .chi-siamo-bio {
    margin-top: -3mm;
  }
}

@media (min-width: 1024px) and (prefers-reduced-motion: reduce) {
  .chi-siamo-foto {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* Tablet / iPad portrait: fade-right tipo AOS (duration 500; dopo desktop per iPad Pro) */
@media (min-width: 600px) and (max-width: 1366px) and (orientation: portrait) {
  .chi-siamo-foto {
    opacity: 0;
    transform: translate3d(-100px, 0, 0);
    transition: opacity 500ms ease, transform 500ms ease;
  }

  .chi-siamo-foto.is-in-view {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@media (min-width: 600px) and (max-width: 1366px) and (orientation: portrait) and (prefers-reduced-motion: reduce) {
  .chi-siamo-foto {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* Mobile / tablet / iPad landscape: fade-right tipo AOS (duration 500) */
@media (max-width: 1366px) and (orientation: landscape) {
  .chi-siamo-foto {
    opacity: 0;
    transform: translate3d(-100px, 0, 0);
    transition: opacity 500ms ease, transform 500ms ease;
  }

  .chi-siamo-foto.is-in-view {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@media (max-width: 1366px) and (orientation: landscape) and (prefers-reduced-motion: reduce) {
  .chi-siamo-foto {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* Tablet / iPad landscape sotto 1150px: bio sempre sotto la foto */
@media (max-width: 1149px) and (orientation: landscape) {
  .chi-siamo-intro {
    grid-template-columns: 1fr;
    align-items: start;
    justify-items: start;
    gap: var(--spazio-4);
  }

  .chi-siamo-foto {
    width: min(518px, 60.5vw);
    max-width: 100%;
    justify-self: start;
  }

  .chi-siamo-foto img {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
  }

  .chi-siamo-bio {
    width: 100%;
  }
}

/* Tablet / iPad / ribelli portrait (Tab S4, Duo, M10, OnePlus Pad, A7/A9, S10 FE):
   foto mai a tutta pagina — ridotta di 1/4 (75%), alto a sx, bio sotto */
@media (min-width: 520px) and (max-width: 1366px) and (orientation: portrait) {
  .chi-siamo-intro {
    grid-template-columns: 1fr;
    align-items: start;
    justify-items: start;
    gap: var(--spazio-4);
  }

  .chi-siamo-foto {
    width: 75%;
    max-width: 75%;
    justify-self: start;
  }

  .chi-siamo-foto img {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
  }

  .chi-siamo-bio {
    width: 100%;
  }
}

/* ===== SEZIONE FAQ ===== */
.sezione-faq {
  padding: var(--spazio-7) 0 var(--spazio-8);
  background: var(--colore-sfondo);
}

#titolo-faq {
  justify-content: center;
  text-align: center;
}

.faq-occhiello {
  margin: calc(var(--spazio-3) * -1) 0 var(--spazio-3);
  text-align: center;
  font-size: calc(1rem + 3px);
  font-weight: 500;
  color: #fff;
}

.faq-intro {
  margin: 0 auto var(--spazio-6);
  max-width: 720px;
  text-align: center;
  font-size: clamp(0.88rem, 1.5vw, 1rem);
  line-height: 1.55;
  color: var(--colore-testo);
}

.faq-lista {
  max-width: 920px;
  margin: 0 auto;
}

.faq-item {
  border-bottom: 1px solid var(--colore-accento);
}

.faq-domanda {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  padding: 18px 0;
  border: none;
  background: transparent;
  color: #fff;
  font-family: var(--font-titoli);
  font-size: 1.25rem;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
}

/* + con bracci allungati (stessa area del segno precedente) */
.faq-toggle {
  position: relative;
  flex-shrink: 0;
  width: 0.85em;
  height: 0.85em;
  font-size: 1.35rem;
}

.faq-toggle::before,
.faq-toggle::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  background: var(--colore-primario);
  transform: translate(-50%, -50%);
}

/* Stanghetta orizzontale */
.faq-toggle::before {
  width: 100%;
  height: 2px;
}

/* Stanghetta verticale */
.faq-toggle::after {
  width: 2px;
  height: 100%;
}

/* Aperto: resta solo la stanghetta orizzontale (−) */
.faq-item.is-open .faq-toggle::after {
  display: none;
}

.faq-risposta {
  padding: 0 2rem 18px 0;
}

.faq-risposta p {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 400;
  line-height: 1.6;
  color: var(--colore-testo);
}

.faq-item.is-open .faq-domanda {
  padding-bottom: 10px;
}

@media (min-width: 1024px) {
  .sezione-faq {
    padding: var(--spazio-8) 0;
  }
}

/* ===== SEZIONE CONTATTI ===== */
.sezione-contatti {
  padding: var(--spazio-7) 0 var(--spazio-8);
  background: var(--colore-sfondo);
}

.contatti-top {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spazio-5);
  margin-bottom: var(--spazio-6);
}

.contatti-ragione {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 var(--spazio-4);
  font-family: var(--font-titoli);
  font-size: calc(1.35rem + 3px);
  font-weight: 400;
  color: var(--colore-primario);
}

.contatti-ragione>span {
  /* Allineamento ottico rispetto al logo disegno */
  transform: translateY(4mm);
}

.contatti-logo-disegno {
  display: block;
  flex-shrink: 0;
  width: auto;
  height: 1.85em;
}

.contatti-lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.contatti-lista li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  color: #fff;
  font-size: 0.95rem;
  line-height: 1.45;
}

.contatti-lista img {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  margin-top: 2px;
}

.contatti-lista a {
  color: #fff;
}

.contatti-lista a:hover {
  color: var(--colore-primario);
}

.contatti-nota {
  margin: var(--spazio-3) 0 0;
  font-size: 0.85rem;
  font-weight: 400;
  line-height: 1.45;
  color: var(--colore-testo-muto);
}

.contatti-mappa {
  position: relative;
  width: 100%;
  min-height: 280px;
  border: 1px solid var(--colore-primario);
  border-radius: var(--raggio-md);
  overflow: hidden;
  background: #d9d9d9;
}

/* Segnaposto finché l’iframe Maps resta bloccato (src=about:blank) */
.contatti-mappa-placeholder {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--spazio-3);
  padding: var(--spazio-4);
  box-sizing: border-box;
  text-align: center;
  color: var(--colore-testo-scuro);
  background: #d9d9d9;
}

.contatti-mappa-placeholder p {
  margin: 0;
  max-width: 28rem;
  font-size: 0.95rem;
  line-height: 1.5;
}

.contatti-mappa-placeholder .btn {
  display: inline-block;
  margin: var(--spazio-3) 0;
  white-space: nowrap;
}

.contatti-mappa-placeholder-alt {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.5;
}

.contatti-mappa:has(iframe:not([src="about:blank"])) .contatti-mappa-placeholder {
  display: none;
}

/* Nasconde il segnaposto quando Leaflet ha montato la mappa OSM */
.contatti-mappa:has(.leaflet-container) .contatti-mappa-placeholder {
  display: none;
}

.contatti-mappa iframe {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 280px;
  border: 0;
}

.contatti-mappa iframe[src="about:blank"] {
  visibility: hidden;
}

.contatti-aiuto {
  margin: 0 0 var(--spazio-4);
  text-align: center;
  font-family: var(--font-titoli);
  font-size: clamp(0.95rem, 1.8vw, 1.1rem);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--colore-testo);
}

/* Box campi “Ciao come possiamo aiutarti” (stesso stile di .valuta-box) */
.contatti-aiuto-box {
  margin-bottom: var(--spazio-5);
}

.contatti-aiuto-riga {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin-bottom: 0;
  align-items: start;
}

.contatti-aiuto-seleziona {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.contatti-descrizione {
  display: flex;
  flex-direction: column;
}

.contatti-descrizione textarea {
  width: 100%;
  min-height: 120px;
  padding: 12px 14px;
  border: none;
  border-radius: 2px;
  resize: vertical;
  background: var(--colore-navbar);
  color: var(--colore-testo-scuro);
  font-family: var(--font-corpo);
  font-size: 0.95rem;
}

.contatti-descrizione textarea::placeholder {
  color: var(--colore-testo-scuro);
  opacity: 0.85;
}

.contatti-dati-titolo {
  margin-bottom: var(--spazio-4);
  color: var(--colore-testo);
}

.valuta-dropdown-toggle:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

/* ===== FOOTER ===== */
.site-footer {
  position: relative;
  color: #fff;
  overflow: hidden;
}

.site-footer-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.site-footer-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Crop sulla chiesa: +~1cm a sinistra rispetto al centro */
  object-position: 60% 32%;
  opacity: 0.1;
}

/* Marca tipografica full-bleed (dietro i contenuti) */
.site-footer-marca {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
  color: var(--colore-accento);
}

.site-footer-marca svg {
  display: block;
  width: 100%;
  height: 100%;
}

.site-footer-marca text {
  fill: currentColor;
  fill-opacity: 0.3;
  font-family: var(--font-titoli);
  font-weight: 700;
  font-size: 30px;
  text-transform: uppercase;
}

.site-footer-inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spazio-5);
  /* Solo verticale: non azzerare il padding orizzontale di .container */
  padding-top: var(--spazio-7);
  padding-bottom: var(--spazio-5);
  justify-items: center;
}

.footer-col {
  width: 100%;
  max-width: 280px;
}

/* Colonne laterali vuote: nascoste fuori da desktop / tablet landscape */
.footer-col--sx,
.footer-col--dx {
  display: none;
}

.footer-col--info {
  text-align: left;
}

.footer-col--link {
  text-align: center;
}

.footer-col--contatti {
  text-align: right;
}

.footer-col p,
.footer-col a {
  margin: 0 0 8px;
  color: #fff;
  font-size: 0.92rem;
  line-height: 1.5;
}

.footer-col a:hover {
  color: var(--colore-primario);
}

.footer-col p.footer-ragione,
.footer-col p.footer-titolo {
  margin: 0 0 12px;
  font-family: var(--font-corpo);
  font-size: 0.92rem;
  font-weight: 700;
  line-height: 1.5;
  color: var(--colore-primario);
}

.footer-info {
  list-style: none;
  margin: 0;
  padding: 0;
}

.footer-info li {
  position: relative;
  margin: 0 0 8px;
  padding-left: 14px;
  color: #fff;
  font-size: 0.92rem;
  line-height: 1.5;
}

.footer-info li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--colore-primario);
}

.footer-info a {
  color: #fff;
}

.footer-link {
  list-style: none;
  margin: 0;
  padding: 0;
}

.footer-link li {
  margin-bottom: 8px;
}

.footer-copy {
  position: relative;
  z-index: 1;
  margin: 0;
  padding: var(--spazio-3) var(--spazio-3) var(--spazio-4);
  border-top: 1px solid var(--colore-primario);
  text-align: center;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.9);
}

/* Footer mobile portrait: colonne allineate al centro */
@media (max-width: 767px) {
  .site-footer-inner {
    justify-items: stretch;
    gap: var(--spazio-5);
    padding-top: var(--spazio-6);
    padding-bottom: var(--spazio-4);
  }

  .footer-col {
    max-width: none;
    width: 100%;
  }

  .footer-col--info,
  .footer-col--link,
  .footer-col--contatti {
    text-align: center;
  }

  /* Info: niente elenco puntato, centrato come le altre colonne */
  .footer-info {
    display: block;
    text-align: center;
    margin: 0 auto;
  }

  .footer-info li {
    padding-left: 0;
    text-align: center;
  }

  .footer-info li::before {
    display: none;
  }

  .footer-link {
    display: inline-block;
    text-align: center;
    margin: 0 auto;
  }

  .site-footer-bg img {
    object-position: 60% 28%;
  }
}

@media (min-width: 768px) {
  .contatti-top {
    grid-template-columns: 1fr 1.2fr;
    gap: var(--spazio-5);
    align-items: start;
  }

  .contatti-mappa,
  .contatti-mappa iframe {
    min-height: 320px;
  }

  .contatti-aiuto-riga {
    grid-template-columns: 1fr 1.2fr;
    gap: var(--spazio-5);
    align-items: stretch;
  }

  .contatti-descrizione textarea {
    flex: 1;
    min-height: 0;
    height: 100%;
    resize: none;
  }
}

/* Phone landscape: 3 colonne affiancate, Contatti a dx ma testo a sx nella colonna */
@media (min-width: 768px) and (max-width: 1023px) {
  .site-footer-inner {
    width: 100%;
    grid-template-columns: 1fr auto 1fr;
    gap: clamp(24px, 4vw, 48px);
    padding-top: var(--spazio-5);
    padding-bottom: var(--spazio-5);
    /* Respiro dai bordi viewport (oltre al padding .container) */
    padding-left: var(--spazio-4);
    padding-right: var(--spazio-4);
    justify-items: stretch;
    align-items: start;
  }

  .footer-col {
    max-width: none;
    min-width: 0;
    overflow-wrap: anywhere;
  }

  .footer-col--info {
    justify-self: start;
    width: auto;
    max-width: 100%;
    text-align: left;
  }

  .footer-col--link {
    justify-self: center;
    width: auto;
    text-align: center;
  }

  .footer-col--contatti {
    /* Blocco a destra della griglia; testo giustificato a dx */
    justify-self: end;
    width: auto;
    max-width: 100%;
    text-align: right;
  }

  .footer-link {
    text-align: center;
  }
}

@media (min-width: 1024px) {
  .sezione-contatti {
    padding: var(--spazio-8) 0;
  }

  /* Desktop: info sx / link centro / contatti dx */
  .site-footer-inner {
    width: 100%;
    grid-template-columns: 1fr auto 1fr;
    gap: clamp(48px, 6vw, 96px);
    padding-top: var(--spazio-8);
    padding-bottom: var(--spazio-5);
    justify-items: stretch;
    align-items: start;
  }

  .footer-col {
    max-width: 280px;
    min-width: 0;
  }

  .footer-col--info {
    justify-self: start;
    text-align: left;
  }

  .footer-col--link {
    justify-self: center;
    text-align: center;
  }

  .footer-col--contatti {
    justify-self: end;
    text-align: right;
  }
}

/* Footer 5 colonne: solo desktop e tablet/iPad landscape
   (le laterali vuote bilanciano lo spazio dai bordi viewport) */
@media (min-width: 1024px) and (orientation: landscape) {

  .footer-col--sx,
  .footer-col--dx {
    display: block;
    width: auto;
    max-width: none;
    min-width: 0;
  }

  .site-footer-inner {
    width: 100%;
    /* Laterali strette + info/contatti che si aprono come prima (1fr | auto | 1fr) */
    grid-template-columns: minmax(24px, 6vw) 1fr auto 1fr minmax(24px, 6vw);
    gap: clamp(48px, 6vw, 96px);
    padding-top: var(--spazio-8);
    padding-bottom: var(--spazio-5);
    justify-items: stretch;
    align-items: start;
  }

  .footer-col--info {
    justify-self: start;
    max-width: 280px;
    min-width: 0;
    text-align: left;
  }

  .footer-col--link {
    justify-self: center;
    max-width: 280px;
    min-width: 0;
    text-align: center;
  }

  .footer-col--contatti {
    justify-self: end;
    max-width: 280px;
    min-width: 0;
    text-align: right;
  }
}

/* ===== PAGINA IMMODILE (dettaglio) ===== */
.pagina-immobile {
  /* Spazio sotto navbar fixed a pillola */
  padding: calc(8px + var(--nav-height) + var(--spazio-4)) 0 var(--spazio-7);
  transition: opacity 0.18s ease;
}

.pagina-immobile.is-transizione {
  opacity: 0.28;
  pointer-events: none;
}

.pagina-immobile-inner {
  display: flex;
  flex-direction: column;
  gap: var(--spazio-5);
}

.immobile-header {
  display: flex;
  flex-direction: column;
  gap: var(--spazio-2);
}

.immobile-contratto-riga {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: var(--spazio-2);
  border-bottom: 1px solid var(--colore-accento);
}

.immobile-contratto {
  margin: 0;
  font-size: clamp(1.15rem, 2.5vw, 1.5rem);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--colore-primario);
}

.immobile-nav-annunci {
  display: flex;
  align-items: baseline;
  flex-shrink: 0;
  gap: 6px;
  font-size: clamp(0.78rem, 1.6vw, 0.95rem);
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--colore-testo);
}

.immobile-nav-annunci[hidden] {
  display: none;
}

.immobile-nav-annunci-btn {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: var(--colore-accento);
  cursor: pointer;
  white-space: nowrap;
}

.immobile-nav-annunci-btn:hover:not(:disabled) {
  text-decoration: underline;
}

.immobile-nav-annunci-btn:disabled {
  opacity: 0.35;
  cursor: default;
}

.immobile-nav-annunci-contatore {
  white-space: nowrap;
  color: var(--colore-testo);
}

.immobile-titolo {
  margin: 0;
  font-family: var(--font-titoli);
  font-size: clamp(1.05rem, 4.2vw, 1.85rem);
  font-weight: 700;
  color: var(--colore-testo);
  line-height: 1.3;
  /* Mobile-first: può andare a capo; nowrap solo desktop */
  white-space: normal;
  overflow-wrap: anywhere;
}

.immobile-comune {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.4em;
  font-size: calc(1rem + 7px);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--colore-testo-muto);
}

/* Icona tipologia: colore accento, scala col testo città */
.immobile-comune-icon {
  width: 1em;
  height: 1em;
  flex-shrink: 0;
  display: block;
  object-fit: contain;
  filter: brightness(0) saturate(100%) invert(62%) sepia(41%) saturate(612%) hue-rotate(16deg) brightness(92%) contrast(88%);
}

.immobile-prezzo {
  margin: var(--spazio-2) 0 0;
  font-size: clamp(1.4rem, 3vw, 1.8rem);
  font-weight: 700;
  color: var(--colore-primario);
}

/* Specs sotto prezzo / sopra foto (stesso linguaggio della card home) */
.immobile-specs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: var(--spazio-3);
  min-width: 0;
}

.immobile-specs .card-spec {
  flex: 1 1 0;
  max-width: 120px;
}

.immobile-specs .card-spec>span:last-child {
  color: var(--colore-testo-muto);
}

/* Pagina immobile: usa il container standard (12 colonne / max-width sito) */

/* ===== MEDIA IMMODILE: sistema stabile (cover nel box, lightbox per l'originale) ===== */
.immobile-media {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas:
    "foto"
    "azioni"
    "scheda";
  gap: 10px;
  align-items: stretch;
  position: relative;
}

/* Condividi: fuori dalla foto, angolo alto destro; top/left impostati da JS */
.immobile-condividi {
  position: absolute;
  z-index: 6;
  width: max-content;
  pointer-events: none;
}

.immobile-condividi .card-annuncio-share {
  pointer-events: auto;
}

/* Mobile/tablet: i figli restano celle della griglia; desktop attiva la colonna flex */
.immobile-media-sx {
  display: contents;
}

.immobile-galleria-principale {
  grid-area: foto;
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  border: 3px solid var(--colore-primario);
  border-radius: var(--raggio-md);
  overflow: hidden;
  cursor: pointer;
  background: #111;
  touch-action: pan-y;
}

/* L'immagine riempie SEMPRE il box (niente bande); ritaglio ok in anteprima */
.immobile-galleria-principale>img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Dot navigation sopra la foto */
.immobile-foto-dots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 12px;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: center;
  padding: 0 12px;
  pointer-events: none;
}

.immobile-foto-dot {
  pointer-events: auto;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: none;
  padding: 0;
  background: #1B1B1B;
  opacity: 1;
  cursor: pointer;
  box-shadow: none;
}

.immobile-foto-dot.is-active {
  background: var(--colore-accento);
}

/* Azioni sotto foto: planimetria, foto+conteggio, video — allineate a sx */
.immobile-media-azioni {
  grid-area: azioni;
  display: flex;
  align-items: stretch;
  justify-content: flex-start;
  gap: 14px;
  min-width: 0;
  width: 100%;
}

.immobile-azione {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: calc(108px - 3mm);
  min-height: calc(92px - 3mm);
  padding: calc(12px - 1.5mm) calc(14px - 1.5mm) calc(10px - 1.5mm);
  border: 1px solid var(--colore-primario);
  border-radius: var(--raggio-sm);
  background: var(--colore-secondario);
  color: var(--colore-testo);
  cursor: pointer;
  transition: filter 0.2s ease, opacity 0.2s ease;
}

.immobile-azione:hover:not(:disabled) {
  filter: brightness(1.12);
}

.immobile-azione:disabled {
  opacity: 0.4;
  cursor: default;
}

.immobile-azione img {
  display: block;
  width: 30px;
  height: 30px;
  object-fit: contain;
}

/* Solo foto: altezza 50 (larghezza 40); video resta 40×40; planimetria 30×30 */
#immobileBtnFoto img {
  width: 40px;
  height: 50px;
  object-fit: fill;
}

#immobileBtnVideo img {
  width: 40px;
  height: 40px;
  transform: translateY(0.2mm);
}

/* Spacer = altezza etichetta: togliendo il testo dal flusso le icone non si spostano */
.immobile-azione::after {
  content: "";
  display: block;
  flex: 0 0 auto;
  width: 0;
  height: calc(0.78rem * 1.2);
  visibility: hidden;
  pointer-events: none;
}

/* Etichette fisse sul fondo del pulsante → stessa linea d’orizzonte */
.immobile-azione-label {
  position: absolute;
  left: 4px;
  right: 4px;
  bottom: calc(10px - 1.5mm);
  margin: 0;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: lowercase;
  color: var(--colore-testo);
  line-height: 1.2;
  text-align: center;
  white-space: nowrap;
}

/* Mobile portrait <390px: i 3 pulsanti restano dentro i margini foto/scheda */
@media (max-width: 389px) and (orientation: portrait) {
  .immobile-media-azioni {
    gap: 8px;
  }

  .immobile-azione {
    flex: 1 1 0;
    min-width: 0;
    min-height: 84px;
    padding: 10px 6px 8px;
  }

  .immobile-azione::after {
    height: calc(0.7rem * 1.2);
  }

  .immobile-azione-label {
    bottom: 8px;
    font-size: 0.7rem;
    letter-spacing: 0;
  }
}

.immobile-scheda {
  grid-area: scheda;
  min-width: 0;
  width: 100%;
  margin: 0;
  padding: 12px 0 0;
  border: 1px solid var(--colore-primario);
  border-radius: var(--raggio-md);
  background: var(--colore-secondario);
  overflow: hidden;
  box-sizing: border-box;
}

.immobile-scheda h2 {
  margin: 0 12px 10px;
  font-family: var(--font-titoli);
  font-size: 1.2rem;
  text-transform: uppercase;
  text-align: center;
  color: #E4E4DE;
}

.immobile-scheda-lista {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  overflow: hidden;
}

/* Corpo: solo descrizione */
.immobile-corpo {
  display: flex;
  flex-direction: column;
  gap: var(--spazio-5);
}

.immobile-descrizione h2 {
  margin: 0 0 var(--spazio-3);
  font-family: var(--font-titoli);
  font-size: 1.5rem;
  color: var(--colore-primario);
}

.immobile-descrizione p {
  margin: 0;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--colore-testo);
  white-space: pre-line;
}

/* Box unità / dettaglio superfici */
.immobile-unita {
  margin-top: var(--spazio-5);
}

.immobile-unita[hidden] {
  display: none;
}

.immobile-unita h2 {
  margin: 0 0 var(--spazio-3);
  font-family: var(--font-titoli);
  font-size: 1.5rem;
  color: var(--colore-primario);
}

.immobile-unita-griglia {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spazio-3);
}

.immobile-unita-box {
  padding: var(--spazio-3) var(--spazio-4);
  border: 1px solid var(--colore-accento);
  border-radius: var(--raggio-md);
  background: var(--colore-secondario);
}

/* Box unità in evidenza (es. terreno Francolise) */
.immobile-unita-box--evidenza {
  border: 2px solid var(--colore-primario);
  background: var(--colore-secondario);
}

/* Titolo + barra «In evidenza» stessa riga */
.immobile-unita-testata {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spazio-2);
  margin-bottom: var(--spazio-2);
}

.immobile-unita-testata h3 {
  margin: 0;
  min-width: 0;
}

/* Titolo unità + icona accento (stessa altezza del titolo) */
.immobile-unita-titolo {
  display: flex;
  align-items: center;
  gap: 0.4em;
  min-width: 0;
  flex: 1 1 auto;
}

.immobile-unita-box>.immobile-unita-titolo {
  margin-bottom: var(--spazio-2);
}

.immobile-unita-icona {
  flex-shrink: 0;
  width: 1.2rem;
  height: 1.2rem;
  background-color: var(--colore-accento);
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
  mask-repeat: no-repeat;
}

/* Barra a dx, chiusura netta, stesso margine sx/dx sul testo */
.immobile-unita-badge {
  margin: 0 0 0 auto;
  flex: 0 0 auto;
  width: max-content;
  max-width: 50%;
  padding: 4px 12px;
  border-radius: 0;
  background: var(--colore-primario);
  font-family: var(--font-corpo);
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: center;
  color: var(--colore-sfondo);
  box-sizing: border-box;
}

.immobile-unita-box--evidenza h3 {
  color: var(--colore-primario);
}

.immobile-unita-box--evidenza dd {
  font-weight: 700;
}

/* Servizi limitrofi */
.immobile-dintorni {
  margin-top: var(--spazio-5);
}

.immobile-dintorni[hidden] {
  display: none;
}

.immobile-dintorni h2 {
  margin: 0 0 var(--spazio-2);
  font-family: var(--font-titoli);
  font-size: 1.5rem;
  color: var(--colore-primario);
}

.immobile-dintorni-nota {
  margin: 0 0 var(--spazio-3);
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--colore-testo-muto);
}

.immobile-dintorni-nota[hidden] {
  display: none;
}

.immobile-dintorni-lista {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spazio-2);
}

.immobile-dintorni-voce {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border: none;
  border-radius: var(--raggio-md);
  background: var(--colore-primario);
}

.immobile-dintorni-icona-cerchio {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--colore-sfondo);
  display: grid;
  place-items: center;
}

.immobile-dintorni-icona {
  width: 18px;
  height: 18px;
  background-color: var(--colore-primario);
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
  mask-repeat: no-repeat;
}

/* Hospital: cerchio già nell’SVG → scala ottica come le altre icone */
.immobile-dintorni-icona[style*="icon-Hospital.svg"] {
  width: 28px;
  height: 28px;
}

.immobile-dintorni-testo {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.immobile-dintorni-nome {
  font-family: var(--font-corpo);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--colore-sfondo);
}

.immobile-dintorni-dettaglio {
  font-size: 0.82rem;
  color: var(--colore-sfondo);
  opacity: 0.85;
}

@media (min-width: 768px) {
  .immobile-dintorni-lista {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .immobile-dintorni-lista {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.immobile-unita-box h3 {
  margin: 0;
  font-family: var(--font-titoli);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--colore-testo);
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  /* Allineamento ottico (Terreno / Terrazzo) */
  transform: translateY(1mm);
}

.immobile-unita-box>h3 {
  margin: 0 0 var(--spazio-2);
}

.immobile-unita-box dl {
  margin: 0;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 6px 16px;
}

.immobile-unita-box dt {
  margin: 0;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--colore-testo-muto);
}

.immobile-unita-box dd {
  margin: 0;
  font-size: 0.92rem;
  color: var(--colore-testo);
}

@media (min-width: 768px) {
  .immobile-unita-griglia {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .immobile-unita-griglia {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.immobile-mappa-sezione {
  width: 100%;
}

.immobile-mappa-titolo {
  margin: 0 0 var(--spazio-3);
  font-family: var(--font-titoli);
  font-size: 1.5rem;
  color: var(--colore-primario);
}

.immobile-mappa {
  width: 100%;
  border: 1px solid var(--colore-primario);
  border-radius: var(--raggio-md);
  overflow: hidden;
  background: #d9d9d9;
}

.immobile-mappa iframe {
  display: block;
  width: 100%;
  height: 360px;
  min-height: 320px;
  border: 0;
}

.immobile-scheda-lista>div {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--spazio-2);
  padding: 8px 12px;
  border-bottom: 1px solid var(--colore-bordo);
}

.immobile-scheda-lista>div:last-child {
  border-bottom: none;
}

.immobile-scheda-lista dt {
  margin: 0;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--colore-testo-muto);
}

.immobile-scheda-lista dd {
  margin: 0;
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--colore-testo);
  text-align: right;
}

/* Toggle scheda: nascosto di default (solo telefoni via media query) */
.immobile-scheda-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: calc(100% - 24px);
  margin: 4px 12px 12px;
  padding: 10px 12px;
  border: none;
  border-top: 1px solid var(--colore-bordo);
  border-radius: 0;
  background: transparent;
  font-family: var(--font-corpo);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--colore-primario);
  cursor: pointer;
  text-align: center;
  -webkit-tap-highlight-color: transparent;
  outline: none;
  box-shadow: none;
  appearance: none;
  -webkit-appearance: none;
}

.immobile-scheda-toggle:focus,
.immobile-scheda-toggle:focus-visible,
.immobile-scheda-toggle:active {
  outline: none;
  box-shadow: none;
  background: transparent;
}

.immobile-scheda-toggle-freccia {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: var(--colore-primario);
}

.immobile-scheda.is-scheda-aperta .immobile-scheda-toggle-freccia {
  transform: rotate(180deg);
}

/* CTA */
.immobile-cta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spazio-3);
  padding: var(--spazio-4);
  border: 1px solid var(--colore-primario);
  border-radius: var(--raggio-md);
  background: var(--colore-secondario);
}

.immobile-cta p {
  margin: 0;
  font-size: 1.05rem;
  color: var(--colore-testo);
}

.pagina-immobile-errore {
  padding: var(--spazio-7) var(--spazio-3);
  text-align: center;
}

.pagina-immobile-errore h1 {
  margin: 0 0 var(--spazio-3);
  font-family: var(--font-titoli);
  color: var(--colore-testo);
}

.pagina-immobile-errore p {
  margin: 0 0 var(--spazio-4);
  color: var(--colore-testo-muto);
}

/* ===== LISTING VUOTO (es. affitto senza annunci) ===== */
.pagina-listing {
  /* Spazio sotto navbar fixed a pillola */
  padding: calc(8px + var(--nav-height) + var(--spazio-6)) 0 var(--spazio-8);
  min-height: 60vh;
}

.pagina-listing-inner {
  max-width: 640px;
  text-align: center;
}

.pagina-listing-titolo {
  margin: 0 0 var(--spazio-4);
  font-family: var(--font-titoli);
  color: var(--colore-primario);
}

.pagina-listing-messaggio {
  margin: 0 0 var(--spazio-5);
  font-size: 1.05rem;
  line-height: 1.65;
  color: var(--colore-testo);
}

.pagina-listing-azioni {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--spazio-3);
}

/* ===== PAGINA VENDITA (lista + mappa Leaflet) ===== */
.pagina-vendita {
  padding: calc(8px + var(--nav-height) + var(--spazio-5)) 0 var(--spazio-8);
}

.pagina-vendita-titolo {
  margin: 0 0 var(--spazio-4);
  font-family: var(--font-titoli);
  font-size: clamp(1.85rem, 3.5vw, 2.4rem);
  font-weight: 400;
  color: var(--colore-primario);
}

/* Widget ricerca: sotto il titolo, sopra lista+mappa */
.pagina-vendita-search {
  margin-top: 0;
  margin-bottom: var(--spazio-3);
  margin-left: 0;
  margin-right: 0;
  max-width: none;
  width: 100%;
}

/* Tipologia su vendita: di base solo icona (+ freccia) */
.pagina-vendita-search .search-dropdown--tipo {
  width: 100%;
  max-width: 64px;
}

.pagina-vendita-search .search-dropdown--tipo .search-dropdown-toggle {
  justify-content: center;
  gap: 6px;
  padding: 0 10px;
  min-width: 0;
  width: 100%;
}

.pagina-vendita-search .search-tipo-label {
  display: none;
  flex: 1 1 auto;
  min-width: 0;
  text-align: left;
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--colore-testo-scuro);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pagina-vendita-search .search-dropdown--tipo .search-dropdown-toggle .icon:last-of-type {
  margin-left: 0;
  flex-shrink: 0;
}

.pagina-vendita-search .search-dropdown--tipo .search-dropdown-toggle .icon,
.pagina-vendita-search .search-dropdown--tipo .search-dropdown-toggle .icon--sm,
.pagina-vendita-search .search-dropdown--tipo .search-dropdown-toggle .icon--cottage {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.pagina-vendita-search .search-dropdown-menu--tipo .icon,
.pagina-vendita-search .search-dropdown-menu--tipo .icon--sm,
.pagina-vendita-search .search-dropdown-menu--tipo .icon--cottage {
  width: 18px;
  height: 18px;
}

/* Desktop + tablet/iPad landscape: icona + nome tipologia */
@media (min-width: 1024px) and (orientation: landscape),
(min-width: 1367px) {
  .pagina-vendita-search .search-dropdown--tipo {
    max-width: 6cm;
  }

  .pagina-vendita-search .search-dropdown--tipo .search-dropdown-toggle {
    justify-content: flex-start;
    gap: 8px;
    padding: 0 12px 0 14px;
  }

  .pagina-vendita-search .search-tipo-label {
    display: block;
  }

  .pagina-vendita-search .search-dropdown--tipo .search-dropdown-toggle .icon:last-of-type {
    margin-left: auto;
  }
}

/* Toggle filtri (Prezzo / Superficie / Locali) */
.pagina-vendita-toggle {
  position: relative;
  min-width: 0;
}

.pagina-vendita-toggle-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  height: 48px;
  padding: 0 14px;
  border: none;
  border-radius: var(--raggio-md);
  background: #fff;
  color: var(--colore-testo-scuro);
  font-size: 0.92rem;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.55);
  white-space: nowrap;
  /* Touch: evita flash azzurro su tap */
  -webkit-tap-highlight-color: transparent;
}

.pagina-vendita-toggle-btn[aria-expanded="true"] {
  outline: 2px solid var(--colore-primario);
  outline-offset: 1px;
}

.pagina-vendita-toggle-btn .icon {
  width: 16px;
  height: 16px;
  transition: transform 0.2s ease;
}

.pagina-vendita-toggle-btn[aria-expanded="true"] .icon {
  transform: rotate(180deg);
}

.pagina-vendita-toggle-panel {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 8px;
  width: max-content;
  min-width: 100%;
  padding: 10px;
  border-radius: var(--raggio-md);
  background: #fff;
  box-shadow: var(--ombra-media);
}

.pagina-vendita-toggle-panel[hidden] {
  display: none;
}

.pagina-vendita-toggle-sep {
  color: var(--colore-testo-muto);
  font-weight: 700;
}

.pagina-vendita-filtro-input {
  width: 96px;
  min-width: 0;
  height: 36px;
  padding: 0 8px;
  border: 1px solid rgba(14, 43, 44, 0.18);
  border-radius: var(--raggio-sm);
  background: #f7f7f4;
  color: var(--colore-testo-scuro);
  font-size: 0.88rem;
  box-sizing: border-box;
}

.pagina-vendita-filtro-input--prezzo {
  width: 112px;
}

.pagina-vendita-filtro-input:focus {
  outline: 2px solid var(--colore-primario);
  outline-offset: 1px;
}

.pagina-vendita-risultati {
  margin: 0 0 var(--spazio-4);
  font-size: 0.9rem;
  color: var(--colore-testo-muto);
}

/* Pannello «Filtri» (bagni, caratteristiche, piano, clima, stato, APE) */
.pagina-vendita-filtri-extra {
  position: relative;
  min-width: 0;
}

.pagina-vendita-filtri-btn {
  position: relative;
}

.pagina-vendita-filtri-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.25rem;
  height: 1.25rem;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--colore-primario);
  color: var(--colore-testo-scuro);
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1;
}

.pagina-vendita-filtri-badge[hidden] {
  display: none;
}

.pagina-vendita-filtri-panel {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  left: auto;
  z-index: 50;
  width: min(420px, calc(100vw - 40px));
  max-height: min(70vh, 520px);
  overflow-y: auto;
  padding: 14px;
  border-radius: var(--raggio-md);
  background: #fff;
  color: var(--colore-testo-scuro);
  box-shadow: var(--ombra-media);
  -webkit-overflow-scrolling: touch;
}

.pagina-vendita-filtri-panel[hidden] {
  display: none;
}

.pagina-vendita-filtri-sezione {
  margin-bottom: 14px;
}

.pagina-vendita-filtri-sezione:last-of-type {
  margin-bottom: 8px;
}

.pagina-vendita-filtri-titolo {
  margin: 0 0 8px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #5a5a5a;
}

.pagina-vendita-filtri-range {
  display: flex;
  align-items: center;
  gap: 8px;
}

.pagina-vendita-filtri-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.pagina-vendita-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  padding: 6px 12px;
  border: 1px solid rgba(14, 43, 44, 0.18);
  border-radius: 999px;
  background: #f7f7f4;
  font-size: 0.86rem;
  font-weight: 500;
  cursor: pointer;
  user-select: none;
  touch-action: manipulation;
}

.pagina-vendita-chip:has(input:checked) {
  border-color: var(--colore-primario);
  background: rgba(207, 181, 59, 0.18);
}

.pagina-vendita-chip input {
  width: 16px;
  height: 16px;
  accent-color: var(--colore-accento);
  flex-shrink: 0;
}

.pagina-vendita-filtri-azioni {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 4px;
  border-top: 1px solid rgba(14, 43, 44, 0.1);
}

.pagina-vendita-filtri-azzera {
  min-height: 40px;
  padding: 0 12px;
  border: none;
  border-radius: var(--raggio-sm);
  background: transparent;
  color: var(--colore-accento);
  font-size: 0.88rem;
  font-weight: 700;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.pagina-vendita-filtri-applica {
  min-height: 44px;
  padding: 0 18px;
  border: none;
  border-radius: var(--raggio-sm);
  background: var(--colore-primario);
  color: var(--colore-testo-scuro);
  font-size: 0.92rem;
  font-weight: 700;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

/* Mobile: tipologia solo icona + cerca; sotto toggle + Filtri */
.pagina-vendita-search.hero-search {
  display: grid;
  grid-template-columns: 64px minmax(0, 1.2fr);
  gap: var(--spazio-2);
  align-items: stretch;
}

.pagina-vendita-search .search-dropdown--tipo {
  grid-column: 1;
}

.pagina-vendita-search .hero-search-input {
  grid-column: 2;
}

.pagina-vendita-search .pagina-vendita-toggle,
.pagina-vendita-search .pagina-vendita-filtri-extra {
  grid-column: 1 / -1;
}

/* Intestazione pannello Filtri: nascosta fuori da mobile portrait */
.pagina-vendita-filtri-panel-head {
  display: none;
}

.pagina-vendita-filtri-panel-titolo {
  margin: 0;
  font-family: var(--font-titoli);
  font-size: 1.25rem;
  font-weight: 400;
  color: var(--colore-testo-scuro);
}

.pagina-vendita-filtri-chiudi {
  min-height: 40px;
  padding: 0 12px;
  border: 1px solid rgba(14, 43, 44, 0.18);
  border-radius: var(--raggio-sm);
  background: #f7f7f4;
  color: var(--colore-testo-scuro);
  font-size: 0.88rem;
  font-weight: 700;
  cursor: pointer;
}

@media (max-width: 767px) {
  .pagina-vendita-filtri-panel {
    left: 0;
    right: 0;
    width: auto;
  }
}

/* Mobile phone stretto (<600): riga1 = tipo + indirizzo; riga2 = Filtri + cerca */
@media (max-width: 599px) {
  .pagina-vendita-search.hero-search {
    grid-template-columns: 64px minmax(0, 1fr) 48px;
    gap: var(--spazio-2);
  }

  /* Tipologia è a sinistra: menu apre verso destra (non fuori schermo) */
  .pagina-vendita-search .search-dropdown--tipo .search-dropdown-menu--tipo {
    left: 0;
    right: auto;
    width: max-content;
    min-width: 200px;
    max-width: calc(100vw - 40px);
    z-index: 60;
  }

  .pagina-vendita-search .search-dropdown--tipo {
    grid-column: 1;
    grid-row: 1;
  }

  .pagina-vendita-search .hero-search-input {
    grid-column: 2 / 4;
    grid-row: 1;
    min-width: 0;
    padding-right: 16px;
  }

  .pagina-vendita-search .pagina-vendita-toggle {
    display: none;
  }

  .pagina-vendita-search .pagina-vendita-filtri-extra {
    grid-column: 1 / 3;
    grid-row: 2;
  }

  .pagina-vendita-search .hero-search-btn {
    display: inline-flex;
    grid-column: 3;
    grid-row: 2;
    position: static;
    top: auto;
    right: auto;
    bottom: auto;
    transform: none;
    width: 48px;
    height: 48px;
  }

  .pagina-vendita-filtri-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    position: sticky;
    top: 0;
    z-index: 5;
    margin: 0 0 14px;
    padding: 14px 0 12px;
    background: #fff;
    border-bottom: 1px solid rgba(14, 43, 44, 0.1);
    /* Evita che i campi scrollino visibili sopra l’header */
    box-shadow: 0 8px 0 #fff;
  }

  .pagina-vendita-filtri-panel {
    position: fixed;
    inset: 0;
    z-index: 1700;
    width: 100% !important;
    max-width: none;
    max-height: none;
    height: 100%;
    height: 100dvh;
    margin: 0;
    border-radius: 0;
    padding: 0 14px 14px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  body.is-filtri-vendita-aperti {
    overflow: hidden;
    overscroll-behavior: none;
  }

  html:has(body.is-filtri-vendita-aperti) {
    overflow: hidden;
    overscroll-behavior: none;
  }

  body.is-filtri-vendita-aperti .whatsapp-float {
    display: none;
  }
}

/* Tablet+: barra con Prezzo / Superficie / Locali (esclude mobile landscape basso) */
@media (min-width: 768px) and (min-height: 500px) {
  .pagina-vendita-search.hero-search {
    grid-template-columns: 64px minmax(0, 1.2fr) repeat(3, minmax(100px, auto)) minmax(100px, auto) 52px;
    gap: 8px;
    align-items: stretch;
  }

  .pagina-vendita-search .search-dropdown--tipo,
  .pagina-vendita-search .hero-search-input,
  .pagina-vendita-search .pagina-vendita-toggle,
  .pagina-vendita-search .pagina-vendita-filtri-extra {
    grid-column: auto;
  }

  .pagina-vendita-search .search-dropdown-toggle,
  .pagina-vendita-search .pagina-vendita-toggle-btn {
    height: 52px;
  }

  .pagina-vendita-search .hero-search-input {
    height: 52px;
    padding-right: 16px;
  }

  .pagina-vendita-search .hero-search-btn {
    position: static;
    width: 52px;
    height: 52px;
    right: auto;
    top: auto;
    transform: none;
  }

  .pagina-vendita-filtri-sezione--bar-mobile {
    display: none !important;
  }
}

@media (min-width: 1024px) {
  .pagina-vendita-search.hero-search {
    grid-template-columns: 64px minmax(140px, 1.3fr) repeat(3, minmax(110px, auto)) minmax(110px, auto) 52px;
  }

  .pagina-vendita-filtri-panel {
    width: min(460px, 50vw);
  }
}

/* Landscape largo / desktop: colonna tipologia con testo */
@media (min-width: 1024px) and (orientation: landscape),
(min-width: 1367px) {
  .pagina-vendita-search.hero-search {
    grid-template-columns: minmax(0, 6cm) minmax(140px, 1.3fr) repeat(3, minmax(110px, auto)) minmax(110px, auto) 52px;
  }
}

/*
  Tablet / iPad portrait + landscape compatti (incl. iPad mini 1024×768)
  + phone landscape larghi (iPhone SE 667×375, Galaxy S8+ 740×360, iPhone 14 landscape, ecc.):
  riga 1 = Tipologia per esteso + indirizzo fino al cerca
  riga 2 = Prezzo / Superficie / Locali / Filtri
*/
@media (min-width: 600px) and (max-width: 1366px) and (orientation: portrait),
(min-width: 600px) and (max-width: 1200px) and (orientation: landscape) and (max-height: 768px) {
  .pagina-vendita-search.hero-search {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-template-rows: auto auto;
    gap: 10px 8px;
    align-items: stretch;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }

  /* Evita che i figli (nowrap) allarghino la pagina e troncino a dx */
  .pagina-vendita-search.hero-search>* {
    min-width: 0;
  }

  .pagina-vendita-search .search-dropdown--tipo {
    grid-column: 1 / 4;
    grid-row: 1;
    width: 100%;
    max-width: none;
  }

  .pagina-vendita-search .search-dropdown--tipo .search-dropdown-toggle {
    justify-content: flex-start;
    gap: 8px;
    padding: 0 10px 0 12px;
    height: 52px;
  }

  .pagina-vendita-search .search-tipo-label {
    display: block;
  }

  .pagina-vendita-search .search-dropdown--tipo .search-dropdown-toggle .icon:last-of-type {
    margin-left: auto;
  }

  /* Tipologia a sinistra: tendina apre verso destra (non esce dal viewport) */
  .pagina-vendita-search .search-dropdown--tipo .search-dropdown-menu--tipo {
    left: 0;
    right: auto;
    width: max-content;
    min-width: 200px;
    max-width: calc(100vw - 40px);
    z-index: 60;
  }

  .pagina-vendita-search .hero-search-input {
    grid-column: 4 / 12;
    grid-row: 1;
    min-width: 0;
    height: 52px;
    padding-right: 16px;
  }

  .pagina-vendita-search .hero-search-btn {
    grid-column: 12;
    grid-row: 1;
    display: inline-flex;
    justify-self: stretch;
    position: static;
    top: auto;
    transform: none;
    width: 100%;
    min-width: 52px;
    height: 52px;
  }

  .pagina-vendita-search .pagina-vendita-toggle {
    display: block;
  }

  .pagina-vendita-search .pagina-vendita-toggle[data-filtro-bar="prezzo"] {
    grid-column: 1 / 4;
    grid-row: 2;
  }

  .pagina-vendita-search .pagina-vendita-toggle[data-filtro-bar="superficie"] {
    grid-column: 4 / 7;
    grid-row: 2;
  }

  .pagina-vendita-search .pagina-vendita-toggle[data-filtro-bar="locali"] {
    grid-column: 7 / 10;
    grid-row: 2;
  }

  .pagina-vendita-search .pagina-vendita-filtri-extra {
    grid-column: 10 / 13;
    grid-row: 2;
  }

  .pagina-vendita-search .pagina-vendita-toggle-btn {
    width: 100%;
    height: 52px;
    padding: 0 8px;
    gap: 4px;
    min-width: 0;
    overflow: hidden;
  }

  .pagina-vendita-search .pagina-vendita-toggle-btn span {
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .pagina-vendita-filtri-sezione--bar-mobile {
    display: none !important;
  }
}

.pagina-vendita-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spazio-5);
  align-items: start;
}

.pagina-vendita-lista {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spazio-4);
  min-width: 0;
}

.pagina-vendita-lista .card-annuncio {
  position: relative;
  isolation: isolate;
  width: 100%;
  max-width: none;
}

/* Alone secondario intorno alle card (pagina vendita) */
.pagina-vendita-lista .card-annuncio::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: -8%;
  right: -8%;
  top: 8%;
  bottom: -12%;
  background: var(--colore-secondario);
  border-radius: 40%;
  filter: blur(32px);
  opacity: 0.6;
  pointer-events: none;
}

.pagina-vendita-lista .card-annuncio.is-mappa-attiva {
  outline: 2px solid var(--colore-primario);
  outline-offset: 2px;
}

.pagina-vendita-mappa-wrap {
  position: relative;
  width: 100%;
  min-height: 280px;
  height: 50vh;
  border: 1px solid var(--colore-primario);
  border-radius: var(--raggio-md);
  overflow: hidden;
  background: #0a1f20;
}

/* Altezza piena del wrap: #mappaVendita (height:100%) resta > 0 */
.pagina-vendita-mappa-wrap .contatti-mappa {
  height: 100%;
  min-height: 100%;
}

.pagina-vendita-mappa {
  width: 100%;
  height: 100%;
  z-index: 0;
}

/* Popup Leaflet: testo scuro su fondo chiaro */
.pagina-vendita-mappa .leaflet-popup-content-wrapper {
  border-radius: var(--raggio-sm);
  background: #E4E4DE;
  color: #0E2B2C;
  box-shadow: none;
}

.pagina-vendita-mappa .leaflet-popup-tip {
  background: #E4E4DE;
}

.pagina-vendita-mappa .leaflet-popup-content {
  margin: 10px 12px;
  font-family: var(--font-corpo);
  font-size: 0.88rem;
  line-height: 1.4;
}

.pagina-vendita-mappa .leaflet-popup-content a {
  color: var(--colore-accento);
  font-weight: 700;
  text-decoration: underline;
}

/* Specs: restano dentro la card anche su card strette (tablet) */
.pagina-vendita-lista .card-annuncio-body {
  min-width: 0;
  overflow: hidden;
}

/* Tipografia compatta: evita prezzi/città giganti che stirano le card */
.pagina-vendita-lista .card-annuncio--cliccabile .card-annuncio-prezzo {
  font-size: 1.15rem;
}

.pagina-vendita-lista .card-annuncio--cliccabile .card-annuncio-tipo,
.pagina-vendita-lista .card-annuncio-tipo {
  font-size: 0.92rem;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pagina-vendita-lista .card-annuncio--cliccabile .card-annuncio-comune,
.pagina-vendita-lista .card-annuncio-comune {
  font-size: 0.78rem;
  letter-spacing: 0.03em;
}

.pagina-vendita-lista .card-annuncio-specs {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  gap: 4px;
  justify-content: space-between;
}

.pagina-vendita-lista .card-spec {
  flex: 1 1 0;
  min-width: 0;
  padding: 6px 3px;
  min-height: 56px;
  gap: 4px;
}

.pagina-vendita-lista .card-spec-icon {
  width: 22px;
  height: 22px;
}

.pagina-vendita-lista .card-spec>span:last-child {
  font-size: 0.68rem;
  white-space: normal;
  overflow-wrap: anywhere;
}

/* Tablet portrait stretto: 2 card affiancate (mappa sotto) */
@media (min-width: 768px) and (max-width: 1023px) {
  .pagina-vendita-lista {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* iPad Pro / tablet portrait: mappa sotto con altezza contenuta (no stiramento) */
@media (min-width: 1024px) and (max-width: 1366px) and (orientation: portrait) {
  .pagina-vendita-layout {
    grid-template-columns: 1fr;
    gap: var(--spazio-5);
  }

  .pagina-vendita-lista {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .pagina-vendita-mappa-wrap {
    position: relative;
    top: auto;
    height: 40vh;
    min-height: 280px;
    max-height: 420px;
  }

  .pagina-vendita-lista .card-spec {
    padding: 8px 6px;
    min-height: 64px;
  }

  .pagina-vendita-lista .card-spec-icon {
    width: 26px;
    height: 26px;
  }

  .pagina-vendita-lista .card-spec>span:last-child {
    font-size: 0.78rem;
  }
}

/* Landscape tablet + desktop: metà — lista | mappa sticky */
@media (min-width: 1024px) and (orientation: landscape),
(min-width: 1367px) {
  .pagina-vendita-layout {
    grid-template-columns: 1fr 1fr;
    gap: var(--spazio-5);
    align-items: start;
  }

  /* Tablet landscape: 1 card per riga (evita overflow icone) */
  .pagina-vendita-lista {
    grid-template-columns: 1fr;
  }

  .pagina-vendita-mappa-wrap {
    position: sticky;
    top: calc(8px + var(--nav-height) + var(--spazio-3));
    height: calc(100vh - var(--nav-height) - var(--spazio-7));
    min-height: 0;
    max-height: none;
    align-self: start;
  }

  .pagina-vendita-lista .card-spec {
    padding: 8px 6px;
    min-height: 64px;
  }

  .pagina-vendita-lista .card-spec-icon {
    width: 26px;
    height: 26px;
  }

  .pagina-vendita-lista .card-spec>span:last-child {
    font-size: 0.78rem;
  }
}

/* Tablet / iPad landscape da 1280: card impilate a metà sx, mappa a dx
   (override della griglia a 2: resta 1fr dalla MQ landscape sopra) */
@media (min-width: 1280px) and (max-width: 1440px) and (orientation: landscape) {
  .pagina-vendita-lista {
    grid-template-columns: 1fr;
  }
}

/* Desktop: card più strette del carosello; più spazio alla mappa; oltre le 12 col */
@media (min-width: 1441px) {
  .pagina-vendita>.container {
    max-width: calc(var(--container-max) + 96px);
  }

  .pagina-vendita-layout {
    grid-template-columns: max-content minmax(0, 1fr);
    gap: var(--spazio-3);
  }

  .pagina-vendita-lista {
    grid-template-columns: repeat(2, 370px);
    /* +2mm tra le due colonne (fascia verticale) */
    gap: 16px calc(16px + 2mm);
  }

  .pagina-vendita-lista .card-annuncio {
    width: 370px;
    max-width: 370px;
  }
}

/* ===== LIGHTBOX GALLERIA (overlay stile Tempocasa) ===== */
.immobile-lightbox {
  position: fixed;
  inset: 0;
  z-index: 2000;
  box-sizing: border-box;
  display: grid;
  /* Frecce ai lati + area foto che può restringersi (minmax 0) */
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  justify-items: center;
  column-gap: 12px;
  padding: max(12px, env(safe-area-inset-top, 0px)) max(12px, env(safe-area-inset-right, 0px)) max(12px, env(safe-area-inset-bottom, 0px)) max(12px, env(safe-area-inset-left, 0px));
  background: rgba(0, 0, 0, 0.78);
  overflow: hidden;
  touch-action: pan-y;
}

.immobile-lightbox[hidden] {
  display: none;
}

.immobile-lightbox-frame {
  position: relative;
  grid-column: 2;
  min-width: 0;
  min-height: 0;
  max-width: 100%;
  max-height: min(90vh, 100%);
  line-height: 0;
  border: 3px solid var(--colore-primario);
  box-sizing: border-box;
  background: #000;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.immobile-lightbox-frame img {
  display: block;
  /* Contiene sempre nel frame: niente spill fuori viewport */
  max-width: 100%;
  max-height: min(90vh, calc(100dvh - 24px));
  width: auto;
  height: auto;
  object-fit: contain;
}

.immobile-lightbox-chiudi {
  position: absolute;
  top: 6px;
  right: 10px;
  left: auto;
  z-index: 2;
  width: 28px;
  height: 28px;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  /* Stesso + FAQ, ruotato a X; nero pieno, senza ombra */
  transform: rotate(45deg);
}

.immobile-lightbox-chiudi::before,
.immobile-lightbox-chiudi::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  background: var(--colore-sfondo);
  transform: translate(-50%, -50%);
}

.immobile-lightbox-chiudi::before {
  width: 100%;
  height: 2px;
}

.immobile-lightbox-chiudi::after {
  width: 2px;
  height: 100%;
}

.immobile-lightbox-chiudi:hover {
  filter: brightness(1.1);
}

.immobile-lightbox-nav {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 1px solid var(--colore-primario);
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.35);
  color: var(--colore-primario);
  cursor: pointer;
}

.immobile-lightbox-nav--prev {
  grid-column: 1;
}

.immobile-lightbox-nav--next {
  grid-column: 3;
}

.immobile-lightbox-nav:hover {
  border-color: var(--colore-primario);
  background: rgba(0, 0, 0, 0.55);
  filter: brightness(1.08);
}

.immobile-lightbox-nav img {
  display: block;
  width: 24px;
  height: 24px;
  /* Icona freccia in colore primario #aa9333 */
  filter: brightness(0) saturate(100%) invert(62%) sepia(41%) saturate(612%) hue-rotate(16deg) brightness(92%) contrast(88%);
}

body.immobile-lightbox-open {
  overflow: hidden;
  overscroll-behavior: none;
}

html:has(body.immobile-lightbox-open) {
  overflow: hidden;
  overscroll-behavior: none;
}

/* Desktop: frecce next/prev sempre vicino ai bordi della foto (portrait e landscape) */
@media (min-width: 1024px) {
  .immobile-lightbox {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 12px;
  }

  .immobile-lightbox-frame {
    grid-column: auto;
    flex: 0 1 auto;
    width: fit-content;
    max-width: calc(100% - 120px);
  }

  .immobile-lightbox-nav,
  .immobile-lightbox-nav--prev,
  .immobile-lightbox-nav--next {
    grid-column: auto;
    position: static;
    flex: 0 0 48px;
  }
}

/* ===== RESPONSIVE IMMODILE — famiglie viewport (responsive-viewport-foundation) ===== */

/* Famiglia A — Mobile portrait (base già stacked; raffinamenti) */
@media (max-width: 767px) {
  .pagina-immobile {
    padding: calc(8px + var(--nav-height) + var(--spazio-3)) 0 var(--spazio-6);
  }

  .pagina-immobile-inner {
    gap: var(--spazio-4);
  }

  .immobile-contratto {
    font-size: clamp(1rem, 4vw, 1.25rem);
  }

  .immobile-comune {
    font-size: 1rem;
  }

  .immobile-media {
    gap: 12px;
  }

  .immobile-galleria-principale {
    aspect-ratio: 4 / 3;
  }

  .immobile-scheda h2 {
    font-size: 1.05rem;
  }

  .immobile-scheda-lista dt {
    font-size: 0.68rem;
  }

  .immobile-scheda-lista dd {
    font-size: 0.85rem;
  }

  .immobile-mappa iframe {
    height: 260px;
    min-height: 220px;
  }

  .immobile-cta {
    align-items: stretch;
  }

  .immobile-cta .btn {
    width: 100%;
    justify-content: center;
    min-height: 44px;
  }
}

/* Mobile portrait <400px: niente scroll laterale; card superfici intere */
@media (max-width: 399px) and (orientation: portrait) {

  .pagina-immobile-inner,
  .immobile-corpo,
  .immobile-unita,
  .immobile-unita-griglia,
  .immobile-unita-box {
    min-width: 0;
    max-width: 100%;
  }

  .immobile-contratto-riga {
    flex-wrap: wrap;
    row-gap: 6px;
  }

  .immobile-contratto {
    min-width: 0;
    flex: 1 1 auto;
  }

  .immobile-nav-annunci {
    margin-left: auto;
  }

  .immobile-comune span {
    min-width: 0;
    overflow-wrap: anywhere;
  }

  .immobile-unita-box {
    box-sizing: border-box;
    padding: var(--spazio-3);
  }

  .immobile-unita-box dl {
    grid-template-columns: minmax(0, max-content) minmax(0, 1fr);
    gap: 6px 10px;
  }

  .immobile-unita-box dt,
  .immobile-unita-box dd {
    min-width: 0;
    overflow-wrap: anywhere;
  }
}

/* Mobile: scheda chiusa dopo 6 voci + toggle (classe viewport da JS) */
.immobile-scheda.is-viewport-mobile-scheda:not(.is-scheda-aperta) .immobile-scheda-extra-mobile {
  display: none;
}

.immobile-scheda.is-viewport-mobile-scheda:not(.is-scheda-aperta) .immobile-scheda-fino-mobile {
  border-bottom: none;
}

.immobile-scheda.is-viewport-mobile-scheda.immobile-scheda--ha-extra-mobile .immobile-scheda-toggle:not([hidden]) {
  display: inline-flex;
}

/* Tablet / iPad (+ iPad Pro 13 1032×1376, Surface Pro 10 1440×960): dopo 8 voci */
.immobile-scheda.is-viewport-tablet-scheda:not(.is-scheda-aperta) .immobile-scheda-extra-tablet {
  display: none;
}

.immobile-scheda.is-viewport-tablet-scheda:not(.is-scheda-aperta) .immobile-scheda-fino-tablet {
  border-bottom: none;
}

.immobile-scheda.is-viewport-tablet-scheda.immobile-scheda--ha-extra-tablet .immobile-scheda-toggle:not([hidden]) {
  display: inline-flex;
}

/* Tablet / iPad portrait: niente filetto lista sopra «Mostra di più» (ultima riga a 2 col) */
@media (orientation: portrait) {

  .immobile-scheda.is-viewport-tablet-scheda:not(.is-scheda-aperta) .immobile-scheda-lista>div:nth-child(7),
  .immobile-scheda.is-viewport-tablet-scheda:not(.is-scheda-aperta) .immobile-scheda-lista>div:nth-child(8) {
    border-bottom: none;
  }
}

/* Desktop: scheda chiusa dopo 10 voci + toggle */
.immobile-scheda.is-viewport-desktop-scheda:not(.is-scheda-aperta) .immobile-scheda-extra-desktop {
  display: none;
}

.immobile-scheda.is-viewport-desktop-scheda:not(.is-scheda-aperta) .immobile-scheda-fino-desktop {
  border-bottom: none;
}

.immobile-scheda.is-viewport-desktop-scheda.immobile-scheda--ha-extra-desktop .immobile-scheda-toggle:not([hidden]) {
  display: inline-flex;
}

/* Mobile/tablet portrait: frecce sotto la foto, fuori, attaccate al bordo inferiore */
@media (max-width: 1023px) and (orientation: portrait) {
  .immobile-lightbox {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    align-content: center;
    justify-items: center;
    row-gap: 8px;
    column-gap: 20px;
    padding: max(44px, env(safe-area-inset-top, 0px)) max(12px, env(safe-area-inset-right, 0px)) max(12px, env(safe-area-inset-bottom, 0px)) max(12px, env(safe-area-inset-left, 0px));
  }

  .immobile-lightbox-frame {
    grid-column: 1 / -1;
    grid-row: 1;
    width: fit-content;
    max-width: 100%;
    max-height: calc(100dvh - 140px);
  }

  .immobile-lightbox-frame img {
    max-width: 100%;
    max-height: calc(100dvh - 140px);
  }

  .immobile-lightbox-nav {
    width: 44px;
    height: 44px;
  }

  .immobile-lightbox-nav--prev {
    grid-column: 1;
    grid-row: 2;
    justify-self: end;
  }

  .immobile-lightbox-nav--next {
    grid-column: 2;
    grid-row: 2;
    justify-self: start;
  }

  .immobile-lightbox-chiudi {
    top: 4px;
    right: 8px;
    left: auto;
    width: 44px;
    height: 44px;
  }
}

/* Famiglia B — Mobile landscape: foto a tutta larghezza */
@media (max-width: 1023px) and (orientation: landscape) and (max-height: 520px) {
  .pagina-immobile {
    padding: calc(8px + var(--nav-height) + var(--spazio-2)) 0 var(--spazio-5);
  }

  .immobile-galleria-principale {
    aspect-ratio: 16 / 10;
    width: 100%;
    max-width: 100%;
    margin-inline: auto;
  }
}

/* Mobile/tablet landscape: frecce ai lati esterni della foto, attaccate (mai dentro) */
@media (max-width: 1023px) and (orientation: landscape) {
  .immobile-lightbox {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 8px max(8px, env(safe-area-inset-right, 0px)) 8px max(8px, env(safe-area-inset-left, 0px));
  }

  .immobile-lightbox-frame {
    flex: 0 1 auto;
    width: fit-content;
    max-width: calc(100% - 100px);
    max-height: calc(100dvh - 16px);
  }

  .immobile-lightbox-frame img {
    max-height: calc(100dvh - 16px);
    max-width: 100%;
  }

  .immobile-lightbox-nav,
  .immobile-lightbox-nav--prev,
  .immobile-lightbox-nav--next {
    grid-column: auto;
    grid-row: auto;
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    justify-self: auto;
  }

  .immobile-lightbox-chiudi {
    width: 40px;
    height: 40px;
  }
}

/* Famiglia C — Tablet portrait (iPad incluso, 768–1023) */
@media (min-width: 768px) and (max-width: 1023px) and (orientation: portrait) {
  .pagina-immobile {
    padding: calc(8px + var(--nav-height) + var(--spazio-4)) 0 var(--spazio-7);
  }

  /* Stack verticale: più stabile su iPad portrait */
  .immobile-media {
    grid-template-columns: 1fr;
    grid-template-areas:
      "foto"
      "azioni"
      "scheda";
    gap: 14px;
  }

  .immobile-galleria-principale {
    aspect-ratio: 16 / 10;
    height: auto;
  }

  .immobile-scheda {
    height: auto;
  }

  .immobile-cta {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}

/* Famiglia D — Tablet landscape (iPad landscape, non ancora desktop) */
@media (min-width: 768px) and (max-width: 1023px) and (orientation: landscape) and (min-height: 521px) {
  .immobile-media {
    grid-template-columns: minmax(0, 1.4fr) minmax(220px, 0.85fr);
    grid-template-rows: auto;
    grid-template-areas: "sx scheda";
    gap: 10px 16px;
    align-items: start;
  }

  /* Foto+azioni unite: il toggle scheda non sposta i pulsanti */
  .immobile-media-sx {
    display: flex;
    flex-direction: column;
    gap: 10px;
    grid-area: sx;
    min-width: 0;
  }

  .immobile-galleria-principale {
    aspect-ratio: 16 / 10;
    height: auto;
    min-height: 0;
    align-self: stretch;
  }

  .immobile-media-azioni {
    grid-area: auto;
  }

  .immobile-scheda {
    display: flex;
    flex-direction: column;
    height: auto;
    align-self: start;
  }

  .immobile-scheda-lista {
    flex: none;
  }

  .immobile-cta {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}

/* Famiglia E — Desktop (≥1024px): layout a 2 colonne */
@media (min-width: 1024px) {
  .pagina-immobile {
    padding: calc(8px + var(--nav-height) + var(--spazio-5)) 0 var(--spazio-8);
  }

  .immobile-titolo {
    white-space: nowrap;
    overflow-wrap: normal;
  }

  .immobile-media {
    grid-template-columns: minmax(0, 1fr) minmax(260px, 320px);
    grid-template-rows: auto;
    grid-template-areas: "sx scheda";
    gap: 10px var(--spazio-4);
    align-items: start;
  }

  /* Foto+azioni unite: il toggle scheda non sposta più i pulsanti */
  .immobile-media-sx {
    display: flex;
    flex-direction: column;
    gap: 10px;
    grid-area: sx;
    min-width: 0;
  }

  .immobile-galleria-principale {
    aspect-ratio: 16 / 10;
    height: auto;
    min-height: 0;
    align-self: stretch;
  }

  .immobile-media-azioni {
    grid-area: auto;
  }

  .immobile-scheda {
    display: flex;
    flex-direction: column;
    height: auto;
    align-self: start;
  }

  .immobile-scheda-lista {
    flex: none;
  }

  .immobile-corpo {
    display: block;
  }

  .immobile-cta {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}

/* Tablet / iPad portrait 520–1366 (Tab M10, OnePlus Pad, Tab A7/A9/S10 FE/S4,
   Surface Duo, iPad Pro): dopo desktop — foto sopra, scheda sotto, lista a 2 colonne */
@media (min-width: 520px) and (max-width: 1366px) and (orientation: portrait) {
  .immobile-media {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    grid-template-areas:
      "foto"
      "azioni"
      "scheda";
    gap: 14px;
    align-items: stretch;
  }

  /* Torna alla griglia stacked: foto e azioni come celle separate */
  .immobile-media-sx {
    display: contents;
  }

  .immobile-galleria-principale {
    aspect-ratio: 16 / 10;
    height: auto;
    min-height: 0;
    align-self: auto;
  }

  .immobile-scheda {
    display: block;
    height: auto;
    align-self: auto;
    width: 100%;
  }

  .immobile-scheda h2 {
    text-align: center;
  }

  .immobile-scheda-lista {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 2.5rem;
    flex: none;
  }
}

/* Surface Duo landscape (~720×540): scheda tecnica a 2 colonne */
@media (min-width: 700px) and (max-width: 780px) and (min-height: 500px) and (max-height: 560px) and (orientation: landscape) {
  .immobile-scheda-lista {
    grid-template-columns: 1fr 1fr;
    column-gap: 2.5rem;
  }
}

/* ===== FONDAMENTA — browser legacy (aspect-ratio / clamp) ===== */
@supports not (aspect-ratio: 16 / 10) {
  .immobile-galleria-principale {
    position: relative;
    height: 0;
    padding-bottom: 62.5%;
    /* 16/10 */
    overflow: hidden;
  }

  .immobile-galleria-principale>img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

@supports not (height: 100dvh) {

  .immobile-lightbox-frame img {
    max-height: calc(100vh - 24px);
  }

  @media (max-width: 767px) {
    .immobile-lightbox-frame img {
      max-height: calc(100vh - 120px);
    }
  }

  @media (max-width: 1023px) and (orientation: landscape) and (max-height: 520px) {
    .immobile-lightbox-frame img {
      max-height: calc(100vh - 16px);
    }
  }
}

/* ===== PULSANTE WHATSAPP FISSO ===== */
.whatsapp-float {
  position: fixed;
  right: max(16px, env(safe-area-inset-right));
  bottom: max(16px, env(safe-area-inset-bottom));
  z-index: 1700;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #25d366;
  color: #fff;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
  transition: transform 0.2s ease, filter 0.2s ease;
}

.whatsapp-float:hover {
  filter: brightness(1.06);
  transform: scale(1.06);
}

.whatsapp-float img {
  width: 28px;
  height: 28px;
  display: block;
  /* Icona bianca sul verde WhatsApp */
  filter: brightness(0) invert(1);
}

/* ===== PAGINA PRIVACY + COOKIE ===== */
.pagina-privacy {
  padding: calc(8px + var(--nav-height) + var(--spazio-6)) 0 var(--spazio-8);
}

.pagina-privacy-inner {
  max-width: 46rem;
}

.pagina-privacy-titolo {
  margin: 0 0 var(--spazio-2);
  font-family: var(--font-titoli);
  font-size: clamp(1.85rem, 3.5vw, 2.5rem);
  color: var(--colore-primario);
}

.pagina-privacy-meta {
  margin: 0 0 var(--spazio-4);
  font-size: 0.9rem;
  color: var(--colore-muto);
}

.pagina-privacy-intro p,
.pagina-privacy-sezione p,
.pagina-privacy-sezione li {
  line-height: 1.65;
  color: var(--colore-testo);
}

.pagina-privacy-nota {
  padding: var(--spazio-3);
  border: 1px solid var(--colore-bordo);
  border-left: 3px solid var(--colore-primario);
  background: color-mix(in srgb, var(--colore-secondario) 35%, transparent);
}

.pagina-privacy-indice {
  margin: var(--spazio-5) 0;
  padding: var(--spazio-4);
  border: 1px solid var(--colore-bordo);
}

.pagina-privacy-indice-titolo {
  margin: 0 0 var(--spazio-2);
  font-family: var(--font-titoli);
  color: var(--colore-primario);
}

.pagina-privacy-indice ol {
  margin: 0;
  padding-left: 1.25rem;
}

.pagina-privacy-indice a {
  color: var(--colore-testo);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.pagina-privacy-indice a:hover {
  color: var(--colore-primario);
}

.pagina-privacy-sezione {
  margin: var(--spazio-6) 0 0;
  padding-top: var(--spazio-4);
  border-top: 1px solid var(--colore-bordo);
}

.pagina-privacy-sezione h2 {
  margin: 0 0 var(--spazio-3);
  font-family: var(--font-titoli);
  font-size: clamp(1.25rem, 2.4vw, 1.55rem);
  color: var(--colore-primario);
}

.pagina-privacy-sezione h3 {
  margin: var(--spazio-4) 0 var(--spazio-2);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--colore-testo);
}

.pagina-privacy-sezione ul {
  margin: 0 0 var(--spazio-3);
  padding-left: 1.2rem;
}

.pagina-privacy-sezione a {
  color: var(--colore-primario);
}

.pagina-privacy-sezione code {
  font-size: 0.92em;
  color: var(--colore-muto);
}

.pagina-privacy-tabella-wrap {
  overflow-x: auto;
  margin: var(--spazio-3) 0 var(--spazio-4);
}

.pagina-privacy-tabella {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.92rem;
}

.pagina-privacy-tabella th,
.pagina-privacy-tabella td {
  padding: 0.75rem 0.85rem;
  border: 1px solid var(--colore-bordo);
  text-align: left;
  vertical-align: top;
  line-height: 1.5;
}

.pagina-privacy-tabella th {
  font-weight: 700;
  color: var(--colore-primario);
  background: color-mix(in srgb, var(--colore-secondario) 45%, transparent);
}

.pagina-privacy-chiusura {
  margin: var(--spazio-6) 0 0;
  padding-top: var(--spazio-4);
  border-top: 1px solid var(--colore-bordo);
  color: var(--colore-muto);
}

.pagina-privacy-chiusura a {
  color: var(--colore-primario);
}