/*
Theme Name: Consulenti Immobiliari
Theme URI: https://www.analiticamarketing.it/temi/consulenti-immobiliari
Author: Studio Analitica Marketing
Author URI: https://analiticamarketing.it
Description: Tema immobiliare su misura per Consulenti Immobiliari di Anghi Marzia (Suzzara, MN). Home orientata alla vendita con gli annunci subito dopo l'above the fold, ricerca immobili con filtri, pagina dedicata ai nuovi cantieri, schede immobile complete e gestione degli annunci dal backend WordPress. Ottimizzato per la SEO locale di Suzzara e del basso mantovano.
Version: 3.2.0
Requires at least: 6.0
Tested up to: 7.1
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: consulenti-immobiliari
Tags: real-estate, custom-header, custom-menu, custom-logo, featured-images, translation-ready, block-styles, wide-blocks, accessibility-ready
*/

/* ─────────────────────────── Tokens ───────────────────────────
   I colori nascono dal marchio: il tondo del logo è #36446B, la scritta
   #7F82A3. Sono le due tinte da cui discendono navy, accento e grigi, così
   il logo non è un corpo estraneo appoggiato sopra una palette diversa.
   ───────────────────────────────────────────────────────────── */
:root {
  /* Tipografia */
  --font-display: 'Archivo', 'Archivo ripiego', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-text:    'Instrument Sans', 'Instrument ripiego', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Superfici */
  --bg:        oklch(98.3% 0.003 270);
  --surface:   oklch(100% 0 0);
  --surface-2: oklch(96.2% 0.005 270);

  /* Testo */
  --ink:        oklch(19% 0.028 270);
  --ink-soft:   oklch(28% 0.030 270);
  --gray:       oklch(48% 0.026 272);
  --gray-soft:  oklch(62% 0.020 274);

  /* Marchio */
  --navy:       oklch(33.5% 0.059 269);   /* #2A3555 — tondo del logo, scurito per il contrasto */
  --navy-deep:  oklch(23% 0.045 270);     /* fondi pieni: footer, hero, menu mobile */
  --blue:       oklch(49.5% 0.088 270);   /* #4E5F94 — link e focus */
  --periwinkle: oklch(61.6% 0.050 281);   /* #7F82A3 — la scritta del logo */

  --line:       oklch(19% 0.028 270 / 0.14);
  --line-light: oklch(19% 0.028 270 / 0.07);

  --wa:         #25D366;
  --wa-deep:    #128C7E;
  --gold:       oklch(72% 0.12 78);
  --label:      oklch(53.6% 0.083 269);
  --accent:     oklch(49.5% 0.088 270);
  --accent-ink: oklch(97% 0.008 270);
  --alert:      oklch(55% 0.2 27);

  --r-sm: 4px; --r-md: 10px; --r-lg: 18px; --r-full: 999px;
  /* Altezza reale della testata agganciata: pastiglia più il respiro sopra
     e sotto. Ci si regolano la barra dei filtri e i salti alle ancore: se il
     numero non corrisponde, i titoli di sezione finiscono coperti. */
  --header-h: 96px;
  --ease: cubic-bezier(.16, 1, .3, 1);
  --container: 1440px;

  /* Scala tipografica. Archivo ha occhio medio più grande di Fraunces: i corpi
     dei titoli scendono di un gradino perché a parità di px risulterebbero
     più ingombranti dei precedenti. */
  --t-xs:  12px;
  --t-sm:  14px;
  --t-base:17px;
  --t-md:  19px;
  --t-lg:  clamp(21px, 1.9vw, 26px);
  --t-xl:  clamp(26px, 2.8vw, 35px);
  --t-2xl: clamp(34px, 4.4vw, 64px);
  --t-3xl: clamp(38px, 5.6vw, 84px);
}

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

/* Qualsiasi regola con display esplicito batte l'attributo hidden: questa riga
   evita che un elemento nascosto resti visibile o continui a intercettare i clic. */
[hidden] { display: none !important; }
html, body { margin: 0; padding: 0; }
html {
  scroll-behavior: smooth;
  /* Con la testata agganciata, ogni salto a un'ancora deve fermarsi sotto di
     essa: altrimenti il titolo di sezione finisce coperto. */
  scroll-padding-top: calc(var(--header-h) + 14px);
}

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-text);
  font-weight: 400;
  font-size: var(--t-base);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  text-rendering: optimizeLegibility;
}

.section-cv { content-visibility: auto; contain-intrinsic-size: 1px 800px; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; height: auto; display: block; }
/* Un SVG inline senza dimensioni proprie si espande a tutta la larghezza:
   questo tetto lo impedisce anche se il resto del foglio non venisse applicato. */
svg { max-width: 100%; max-height: 100%; }

:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 3px;
  border-radius: 3px;
}
.hero :focus-visible,
.mobile-cta :focus-visible { outline-color: var(--surface); }

.screen-reader-text {
  border: 0; clip: rect(1px,1px,1px,1px); clip-path: inset(50%);
  height: 1px; width: 1px; overflow: hidden; position: absolute !important;
  word-wrap: normal !important; padding: 0; margin: -1px;
}
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--ink); color: var(--surface);
  padding: 12px 20px; border-radius: 0 0 var(--r-md) 0; font-size: var(--t-sm); font-weight: 600;
}
.skip-link:focus { left: 0; }

.container {
  max-width: var(--container); margin: 0 auto;
  padding-left: clamp(20px, 4vw, 56px); padding-right: clamp(20px, 4vw, 56px);
}

.liquid-glass {
  background: rgba(20,26,46,0.52);
  backdrop-filter: blur(8px) saturate(180%);
  -webkit-backdrop-filter: blur(8px) saturate(180%);
  box-shadow: inset 0 1px 1px rgba(255,255,255,0.14), 0 8px 32px -8px rgba(0,0,0,0.28);
  position: relative; overflow: hidden;
}
.liquid-glass::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1px;
  background: linear-gradient(160deg,
    rgba(255,255,255,0.3) 0%, rgba(255,255,255,0.08) 30%,
    rgba(255,255,255,0) 55%, rgba(255,255,255,0.06) 80%,
    rgba(255,255,255,0.22) 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none;
}

/* ─────────────────────────── HERO ─────────────────────────── */
.hero {
  position: relative; min-height: 100dvh;
  display: flex; flex-direction: column;
  color: #fff; overflow: hidden;
  /* Fondo di riserva: se la foto non carica l'hero resta leggibile. */
  background: linear-gradient(160deg, var(--navy) 0%, var(--navy-deep) 100%);
}
.hero-media { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; }
.hero-media img,
.hero-media video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.hero-media video { opacity: 0; transition: opacity .9s var(--ease); pointer-events: none; }
.hero-media video.is-ready { opacity: 1; }
.hero::after {
  content: ''; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to top,
    rgba(20,26,46,0.78) 0%, rgba(20,26,46,0.32) 38%,
    rgba(20,26,46,0.08) 65%, transparent 100%);
  pointer-events: none;
}

/* ─────────────────────────── NAVBAR ─────────────────────────── */
.navbar { position: relative; z-index: 20; padding: clamp(14px,2vw,22px) clamp(20px,4vw,56px) 0; }
.navbar-inner {
  display: flex; align-items: center; justify-content: space-between; gap: clamp(16px,2vw,32px);
  border-radius: var(--r-lg); padding: 10px 18px;
  min-height: 68px; max-height: 84px;
}
.navbar-logo {
  display: inline-flex; align-items: center; flex: 0 1 auto; min-width: 0;
  font-family: var(--font-display); font-size: clamp(17px, 1.5vw, 21px);
  font-weight: 700; letter-spacing: -0.02em; color: #fff; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.navbar-logo em { font-style: normal; font-weight: 400; opacity: 0.85; }

/* Il logo caricato dal cliente non detta mai l'altezza della barra. */
.navbar-logo img {
  display: block;
  height: clamp(34px, 3.4vw, 48px);
  width: auto; max-width: min(240px, 42vw);
  object-fit: contain; object-position: left center;
}
/* Pulsante del menu: solo da mobile */
.navbar-toggle {
  display: none; align-items: center; justify-content: center;
  width: 46px; height: 46px; border-radius: var(--r-md);
  background: rgba(255,255,255,0.14); border: 1px solid rgba(255,255,255,0.24);
  color: #fff; cursor: pointer; padding: 0;
}
.navbar-toggle span {
  display: block; width: 20px; height: 2px; background: currentColor;
  position: relative; border-radius: 2px; transition: background .2s;
}
.navbar-toggle span::before,
.navbar-toggle span::after {
  content: ''; position: absolute; left: 0; width: 20px; height: 2px;
  background: currentColor; border-radius: 2px; transition: transform .25s var(--ease);
}
.navbar-toggle span::before { top: -6px; }
.navbar-toggle span::after { top: 6px; }
.menu-aperto .navbar-toggle span { background: transparent; }
.menu-aperto .navbar-toggle span::before { transform: translateY(6px) rotate(45deg); }
.menu-aperto .navbar-toggle span::after { transform: translateY(-6px) rotate(-45deg); }

.menu-mobile {
  position: fixed; inset: 0; z-index: 95;
  background: var(--navy-deep); color: #fff;
  padding: 88px clamp(20px,6vw,32px) 32px;
  display: flex; flex-direction: column; gap: 6px;
  overflow-y: auto;
}
.menu-mobile a {
  font-family: var(--font-display); font-size: 26px; font-weight: 700;
  letter-spacing: -0.02em; padding: 14px 0; min-height: 48px;
  border-bottom: 1px solid rgba(255,255,255,0.12); display: flex; align-items: center;
}
.menu-mobile .menu-cta {
  margin-top: 22px; background: #fff; color: var(--navy);
  border-radius: var(--r-full); justify-content: center; border: none;
  font-family: var(--font-text); font-size: 16px; font-weight: 600; padding: 16px 24px;
}
/* display:flex batte l'attributo hidden: senza questa riga il pannello resta
   sopra la pagina e intercetta ogni clic anche da chiuso. */
.menu-aperto { overflow: hidden; }

/* Riquadro bianco dietro il logo, ovunque.
   Prima valeva solo sull'hero della home. Sulle pagine interne la barra era
   blu notte e il tondo del marchio, che è dello stesso blu, ci spariva dentro:
   si leggeva la scritta e non il simbolo. */
.navbar-logo--img {
  background: rgba(255,255,255,0.94);
  border-radius: var(--r-md);
  padding: 7px 12px;
}
.navbar-links {
  display: none; gap: clamp(16px, 1.6vw, 28px); flex-wrap: nowrap; font-size: var(--t-sm); font-weight: 500;
  color: rgba(255,255,255,0.72); list-style: none; margin: 0; padding: 0; letter-spacing: 0.01em;
}
.navbar-links a { transition: color .22s; }
.navbar-links a:hover,
.navbar-links .current-menu-item > a { color: var(--surface); }
.navbar-cta {
  background: var(--surface); color: var(--navy); border: none;
  padding: 10px 22px; border-radius: var(--r-full);
  font-size: var(--t-sm); font-weight: 600;
  cursor: pointer; letter-spacing: 0.005em;
  transition: background .22s, color .22s, transform .25s var(--ease);
  white-space: nowrap;
}
.navbar-cta:hover { background: var(--bg); color: var(--navy-deep); transform: translateY(-1px); }

/* Navbar delle pagine interne.
   Stessa forma della home — pastiglia arrotondata, stesse misure, stesso
   respiro sui lati — con il fondo blu pieno al posto del vetro smerigliato.
   Prima era una fascia piena a tutta larghezza con gli angoli vivi: due
   testate diverse, e passando da una pagina all'altra si vedeva il salto.

   Resta agganciata in alto: prima la barra dei filtri della ricerca si
   incollava da sola e il logo spariva dallo schermo. */
.navbar--solid {
  background: transparent;
  padding: clamp(12px,1.6vw,18px) clamp(20px,4vw,56px);
  position: sticky; top: 0; z-index: 60;
}
.admin-bar .navbar--solid { top: 32px; }
.navbar--solid .navbar-inner {
  border-radius: var(--r-lg);
  padding: 10px 18px;
  min-height: 64px; max-height: 80px;
}
/* Il vetro smerigliato serve a far leggere il testo sopra una fotografia.
   Qui sotto non c'è una fotografia ma il colore pieno: il velo e il bordo
   luminoso diventerebbero sporcizia sopra una tinta piatta. */
.navbar--solid .liquid-glass {
  background: var(--navy);
  backdrop-filter: none; -webkit-backdrop-filter: none;
  box-shadow: 0 10px 30px -14px rgba(20,26,46,0.55);
}
.navbar--solid .liquid-glass::before { display: none; }

.hero-body {
  position: relative; z-index: 10; flex: 1;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 0 clamp(20px,4vw,56px) clamp(44px,5.5vw,80px);
}
.hero-content-grid { display: grid; grid-template-columns: 1fr; gap: 28px; align-items: end; }

.hero-heading {
  font-family: var(--font-display); font-size: var(--t-3xl);
  font-weight: 700; letter-spacing: -0.035em; line-height: 0.98;
  margin: 0 0 clamp(16px,2vw,24px) 0; color: var(--surface);
  text-wrap: balance;
}
/* Archivo non ha corsivo nel corredo imbarcato: la parola in evidenza si
   stacca scendendo di peso e virando sul pervinca del logo, che su fondo
   scuro resta leggibile ma chiaramente distinto dal bianco. */
.hero-heading em { font-style: normal; font-weight: 400; color: #B9BCD4; }
/* Nessuno stato iniziale invisibile sul titolo: è l'elemento più grande della
   pagina e deve essere dipinto al primo frame utile. */

.hero-sub {
  font-size: clamp(var(--t-base), 1.6vw, var(--t-md));
  color: rgba(255,255,255,0.8); line-height: 1.7;
  max-width: 50ch; margin: 0 0 clamp(20px,2.5vw,32px) 0;
  animation: hero-entra 700ms var(--ease) 120ms both;
}

.hero-buttons {
  display: flex; flex-wrap: wrap; gap: 12px;
  animation: hero-entra 700ms var(--ease) 260ms both;
}

@keyframes hero-entra {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

.btn-hero-primary {
  background: var(--surface); color: var(--navy); border: none;
  padding: 15px 30px; border-radius: var(--r-full);
  font-size: 16px; font-weight: 600; cursor: pointer; letter-spacing: -0.005em;
  transition: background .22s, color .22s, transform .3s var(--ease); white-space: nowrap;
}
.btn-hero-primary:hover { background: var(--bg); color: var(--navy-deep); transform: translateY(-2px); }

.btn-hero-glass {
  padding: 15px 30px; border-radius: var(--r-full);
  font-size: 16px; font-weight: 500; cursor: pointer; color: var(--surface);
  border: 1px solid rgba(255,255,255,0.3); white-space: nowrap;
  transition: background .28s, color .28s, transform .3s var(--ease); letter-spacing: 0.01em;
}
.btn-hero-glass:hover { background: rgba(255,255,255,0.12); transform: translateY(-2px); }

.hero-right {
  display: flex; align-items: flex-end; justify-content: flex-start;
  animation: hero-entra 700ms var(--ease) 380ms both;
}
.hero-tag {
  border-radius: var(--r-md); padding: 14px 24px;
  font-family: var(--font-display);
  font-size: clamp(var(--t-base), 2.2vw, var(--t-xl));
  font-weight: 600; letter-spacing: -0.015em;
  color: var(--surface); border: 1px solid rgba(255,255,255,0.18);
  white-space: nowrap; line-height: 1.3;
}
.hero-dot {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: var(--t-xs); letter-spacing: 0.16em; text-transform: uppercase;
  color: rgba(255,255,255,0.72); margin-bottom: clamp(14px,2vw,22px);
  font-weight: 500; animation: hero-entra 700ms var(--ease) both;
}
.hero-dot .dot { width: 7px; height: 7px; border-radius: 50%; background: #4caf50; box-shadow: 0 0 0 3px rgba(76,175,80,0.28); }

/* ─────────────────────────── STATS ─────────────────────────── */
.stats-bar { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: clamp(32px,4.5vw,56px) 0; }
.stats-bar .container { display: grid; grid-template-columns: repeat(4,1fr); gap: 24px; align-items: baseline; }
.stat-item { display: flex; flex-direction: column; gap: 10px; border-left: 1px solid var(--line); padding-left: 24px; }
.stat-item:first-child { border-left: none; padding-left: 0; }
.stat-item .n {
  font-family: var(--font-display); font-size: clamp(34px, 4.6vw, 64px); font-weight: 700;
  letter-spacing: -0.04em; line-height: 1; color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.stat-item .n em { font-style: normal; color: var(--blue); font-weight: 400; }
.stat-item .l { font-size: var(--t-sm); color: var(--gray); line-height: 1.5; max-width: 22ch; }

/* ─────────────────────────── Section head ─────────────────────────── */
.section-head {
  display: grid; grid-template-columns: 1fr 1.5fr; gap: clamp(24px,4vw,64px);
  margin-bottom: clamp(52px,7vw,96px); align-items: end;
}
.section-head .label {
  font-size: var(--t-xs); letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--navy); font-weight: 600; margin-bottom: 14px; display: block;
}
.section-head h2 {
  font-family: var(--font-display); font-size: var(--t-2xl);
  font-weight: 700; letter-spacing: -0.03em; line-height: 1.02; margin: 0; max-width: 18ch;
  text-wrap: balance;
}
.section-head h2 em { font-style: normal; font-weight: 400; color: var(--blue); }
.section-head .lead { font-size: clamp(var(--t-base), 1.5vw, var(--t-md)); line-height: 1.7; color: var(--ink-soft); max-width: 46ch; }
.section-head .lead strong { font-weight: 500; color: var(--ink); }

/* ─────────────────────────── PROMISE ─────────────────────────── */
.promise { padding: clamp(80px,12vw,160px) 0; }
.promise-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(40px,6vw,88px); align-items: stretch; }
.promise-image {
  position: relative; border-radius: var(--r-lg); overflow: hidden; aspect-ratio: 4/5;
  box-shadow: 0 32px 64px -24px rgba(30,38,66,0.28);
}
.promise-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ease); }
.promise-image:hover img { transform: scale(1.04); }
.promise-image .tag {
  position: absolute; bottom: 18px; left: 18px;
  background: rgba(255,255,255,0.9); padding: 9px 18px;
  border-radius: var(--r-full); font-size: var(--t-xs); letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ink); backdrop-filter: blur(10px); font-weight: 500;
}
.promise-list { display: flex; flex-direction: column; justify-content: center; }
.promise-item {
  display: grid; grid-template-columns: 64px 1fr; gap: 24px;
  padding: clamp(24px,3vw,36px) 0; border-top: 1px solid var(--line);
  opacity: 0; transform: translateY(18px);
  transition: opacity .9s var(--ease), transform .9s var(--ease);
}
.promise-item.is-in { opacity: 1; transform: translateY(0); }
.promise-item:last-child { border-bottom: 1px solid var(--line); }
.promise-item .num {
  font-family: var(--font-display); font-size: clamp(28px,3vw,42px); font-weight: 600; color: var(--navy); line-height: 1; letter-spacing: -0.02em; padding-top: 3px;
}
.promise-item h3 {
  font-family: var(--font-display); font-size: clamp(var(--t-lg), 2.2vw, 32px);
  font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; margin: 0 0 10px 0;
}
.promise-item p { font-size: var(--t-sm); color: var(--gray); line-height: 1.7; max-width: 38ch; margin: 0; }

/* ─────────────────────────── METHOD ─────────────────────────── */
.method { background: var(--surface-2); padding: clamp(72px,10vw,128px) 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.method-steps { display: grid; grid-template-columns: repeat(4,1fr); counter-reset: step; }
.step { padding: clamp(28px,3vw,40px) clamp(20px,2.5vw,32px); border-left: 1px solid var(--line); display: flex; flex-direction: column; gap: 14px; position: relative; }
.step:first-child { border-left: none; }
.step::before {
  counter-increment: step; content: "0" counter(step);
  font-family: var(--font-display); font-weight: 600;
  color: var(--navy); font-size: clamp(22px,2.5vw,32px); letter-spacing: -0.02em;
}
.step h3 { font-family: var(--font-display); font-size: clamp(var(--t-md),2vw,26px); font-weight: 700; letter-spacing: -0.02em; margin: 0; line-height: 1.2; }
.step p { font-size: var(--t-sm); color: var(--gray); line-height: 1.65; margin: 0; }
.step .ico { margin-top: auto; color: var(--navy); font-size: var(--t-md); font-family: var(--font-display); }

/* ─────────────────────────── GALLERY (marquee) ─────────────────────────── */
.gallery { padding: clamp(80px,12vw,160px) 0 clamp(64px,10vw,120px) 0; background: var(--bg); overflow: hidden; position: relative; }
.gallery .section-head { margin-bottom: clamp(40px, 6vw, 72px); }
.marquee {
  position: relative; overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 6%, black 94%, transparent 100%);
          mask-image: linear-gradient(to right, transparent 0%, black 6%, black 94%, transparent 100%);
}
.marquee-track { display: flex; gap: clamp(14px, 1.6vw, 22px); width: max-content; animation: marquee-scroll 70s linear infinite; will-change: transform; }
.marquee:hover .marquee-track, .marquee:focus-within .marquee-track { animation-play-state: paused; }
@keyframes marquee-scroll { from { transform: translate3d(0,0,0); } to { transform: translate3d(-50%,0,0); } }

.gallery-card {
  flex-shrink: 0; width: clamp(240px, 26vw, 340px); aspect-ratio: 1 / 1;
  position: relative; border-radius: var(--r-lg); overflow: hidden; margin: 0;
  background: var(--surface-2); border: 1px solid var(--line);
  box-shadow: 0 8px 24px -16px rgba(30,38,66,0.18);
  transition: transform .45s var(--ease), box-shadow .45s var(--ease);
}
.gallery-card:hover { transform: translateY(-6px) scale(1.02); box-shadow: 0 24px 48px -16px rgba(30,38,66,0.28); z-index: 5; }
.gallery-card img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease); }
.gallery-card:hover img { transform: scale(1.05); }
.sold-tag {
  position: absolute; top: 14px; left: 14px;
  background: var(--navy); color: var(--surface);
  padding: 6px 12px; border-radius: var(--r-full);
  font-size: 11px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase;
  display: inline-flex; align-items: center; gap: 6px; z-index: 2;
}
.sold-tag::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--gold); }

.gallery-footer { margin-top: clamp(40px, 5vw, 64px); display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px; }
.gallery-footer .note { font-family: var(--font-display); font-size: clamp(15px, 1.4vw, 19px); color: var(--gray); max-width: 50ch; }
.gallery-footer .cta {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 13px 26px; border-radius: var(--r-full);
  background: var(--ink); color: #fff; font-size: 15px; font-weight: 500;
  transition: background .28s var(--ease), transform .28s var(--ease);
}
.gallery-footer .cta:hover { background: var(--navy); transform: translateY(-2px); }
.gallery-footer .cta .arrow { transition: transform .28s var(--ease); }
.gallery-footer .cta:hover .arrow { transform: translateX(4px); }

/* ─────────────────────────── TEAM ─────────────────────────── */
.team { padding: clamp(80px,12vw,160px) 0; background: var(--bg); border-top: 1px solid var(--line); }
.team-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px,4vw,56px); }
.team-card { display: flex; flex-direction: column; background: var(--surface); border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--line); transition: transform .5s var(--ease), box-shadow .5s var(--ease); }
.team-card:hover { transform: translateY(-4px); box-shadow: 0 36px 60px -28px rgba(30,38,66,0.28); }
.team-photo { position: relative; aspect-ratio: 1086 / 1448; overflow: hidden; background: var(--surface-2); }
.team-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; transition: transform 1.6s var(--ease); }
.team-card:hover .team-photo img { transform: scale(1.04); }
.team-photo .stripe { position: absolute; left: 0; right: 0; bottom: 0; height: 6px; background: var(--navy); }
.team-body { padding: clamp(22px,2.5vw,32px) clamp(22px,2.5vw,32px) clamp(26px,3vw,36px); display: flex; flex-direction: column; gap: 14px; }
.team-role { font-size: var(--t-xs); letter-spacing: 0.2em; text-transform: uppercase; color: var(--navy); font-weight: 600; }
.team-name { font-family: var(--font-display); font-size: clamp(26px, 3vw, 38px); font-weight: 700; letter-spacing: -0.025em; line-height: 1; margin: 0; }
.team-name em { font-style: normal; font-weight: 400; color: var(--blue); }
.team-bio { font-size: var(--t-sm); color: var(--gray); line-height: 1.7; margin: 4px 0 0 0; }

/* ─────────────────────────── REVIEWS ─────────────────────────── */
.reviews { padding: clamp(80px,12vw,160px) 0; border-top: 1px solid var(--line); }
.featured-testimonial {
  display: grid; grid-template-columns: 1.2fr 1fr; gap: 0;
  background: var(--surface); border-radius: var(--r-lg); overflow: hidden;
  margin-bottom: clamp(28px,4vw,56px); border: 1px solid var(--line);
  box-shadow: 0 24px 48px -24px rgba(30,38,66,0.18);
}
.ft-image { position: relative; min-height: 320px; background: var(--navy); overflow: hidden; }
.ft-image img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.ft-content { padding: clamp(28px,3.5vw,52px); display: flex; flex-direction: column; justify-content: center; gap: 18px; }
.ft-eyebrow { font-size: var(--t-xs); letter-spacing: 0.2em; text-transform: uppercase; color: var(--navy); font-weight: 600; display: flex; align-items: center; gap: 10px; }
.ft-eyebrow::before { content: '★'; color: var(--gold); font-size: 16px; letter-spacing: 0; }
.ft-quote { font-family: var(--font-display); font-size: clamp(22px, 2.4vw, 32px); font-weight: 600; letter-spacing: -0.022em; line-height: 1.25; color: var(--ink); margin: 0; }
.ft-quote em { font-style: normal; font-weight: 400; color: var(--blue); }
.ft-cite { display: flex; flex-direction: column; gap: 4px; padding-top: 18px; border-top: 1px solid var(--line); }
.ft-cite .who { font-family: var(--font-display); font-size: var(--t-md); font-weight: 700; color: var(--ink); letter-spacing: -0.015em; }
.ft-cite .role { font-size: var(--t-sm); color: var(--gray); }

.reviews-masonry { columns: 3; column-gap: clamp(16px,2vw,22px); }
.review-card {
  break-inside: avoid; display: inline-block; width: 100%;
  margin-bottom: clamp(14px,1.8vw,20px);
  background: var(--surface); border: 1px solid var(--line-light); border-radius: var(--r-lg);
  padding: clamp(20px,2.5vw,30px); position: relative; overflow: hidden;
  transition: transform .32s var(--ease), box-shadow .32s var(--ease);
}
.review-card::before {
  content: '\201C'; position: absolute; top: -10px; left: 14px;
  font-family: var(--font-display); font-size: 100px; font-weight: 600;
  line-height: 1; color: var(--navy); opacity: 0.055; pointer-events: none; user-select: none; transition: opacity .32s;
}
.review-card:hover::before { opacity: 0.1; }
.review-text { font-size: var(--t-sm); line-height: 1.72; color: var(--ink-soft); margin: 0 0 18px 0; position: relative; z-index: 1; }
.review-foot { border-top: 1px solid var(--line-light); padding-top: 13px; position: relative; z-index: 1; display: flex; flex-direction: column; gap: 3px; }
.review-stars { color: var(--gold); font-size: 12px; letter-spacing: 3px; display: block; line-height: 1; }
.review-name { font-family: var(--font-display); font-size: var(--t-base); font-weight: 700; letter-spacing: -0.015em; color: var(--ink); display: block; }
.reviews-footer {
  margin-top: clamp(48px,6vw,80px); padding-top: clamp(32px,4vw,48px);
  border-top: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center;
  flex-wrap: wrap; gap: clamp(20px,3vw,48px);
}
.score-group { display: flex; align-items: center; gap: 20px; }
.score-num { font-family: var(--font-display); font-size: clamp(38px,5vw,60px); font-weight: 700; letter-spacing: -0.04em; line-height: 1; color: var(--ink); font-variant-numeric: tabular-nums; }
.score-right { display: flex; flex-direction: column; gap: 3px; }
.score-stars { color: var(--gold); font-size: 18px; letter-spacing: 3px; line-height: 1; }
.score-label { font-size: var(--t-sm); color: var(--gray); }
.score-link {
  display: inline-flex; align-items: center; gap: 10px; min-height: 44px;
  font-size: var(--t-sm); font-weight: 600; color: var(--navy);
  border-bottom: 2px solid var(--navy); padding-bottom: 4px;
}
.score-link .arrow { transition: transform .3s var(--ease); }
.score-link:hover .arrow { transform: translateX(5px); }

/* ─────────────────────────── LEAD FORM ─────────────────────────── */
section.lead { background: var(--navy); color: var(--surface); padding: clamp(80px,12vw,160px) 0; position: relative; overflow: hidden; }
section.lead::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(circle at 18% 12%, rgba(255,255,255,0.07) 0%, transparent 48%),
              radial-gradient(circle at 82% 88%, rgba(78,95,148,0.38) 0%, transparent 58%);
  pointer-events: none;
}
section.lead .container { position: relative; z-index: 1; }
section.lead .form-card .wz-title,
section.lead .form-card .wz-q { color: var(--ink); }
.lead-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(40px,6vw,96px); align-items: start; }
.lead-intro .label { color: rgba(255,255,255,0.52); font-size: var(--t-xs); letter-spacing: 0.2em; text-transform: uppercase; font-weight: 600; display: block; margin-bottom: 16px; }
.lead-intro h2 { font-family: var(--font-display); font-size: var(--t-2xl); font-weight: 600; letter-spacing: -0.035em; line-height: 1; margin: 0 0 24px 0; }
.lead-intro h2 em { font-style: normal; color: #B9BCD4; font-weight: 400; }
.lead-intro p { color: rgba(255,255,255,0.72); font-size: var(--t-base); line-height: 1.7; max-width: 42ch; margin: 0 0 36px 0; }
.lead-benefits { display: flex; flex-direction: column; gap: 14px; margin-top: 32px; border-top: 1px solid rgba(255,255,255,0.1); padding-top: 28px; }
.lead-benefit { display: flex; gap: 14px; align-items: flex-start; }
.lead-benefit .check {
  flex-shrink: 0; width: 34px; height: 34px; border-radius: 50%;
  background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.22);
  display: flex; align-items: center; justify-content: center; color: #fff; font-size: 14px; margin-top: 3px;
}
.lead-benefit .t { font-size: var(--t-sm); line-height: 1.6; color: rgba(255,255,255,0.82); }

.form-card { background: var(--surface); color: var(--ink); border-radius: var(--r-lg); border: 1px solid var(--line-light); padding: clamp(28px,3.5vw,48px); box-shadow: 0 32px 64px -20px rgba(0,0,0,0.38); }
.form-card .title { font-family: var(--font-display); font-size: clamp(24px,2.5vw,34px); font-weight: 700; letter-spacing: -0.02em; margin: 0 0 8px 0; }
.form-card .sub { font-size: var(--t-sm); color: var(--gray); margin: 0 0 28px 0; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field.full { grid-column: 1 / -1; }
.field label { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gray); font-weight: 600; }
.field input, .field select, .field textarea {
  font: inherit; font-family: var(--font-text); font-size: var(--t-base);
  color: var(--ink); background: transparent; border: none;
  border-bottom: 1px solid var(--line); padding: 9px 0 11px 0; outline: none;
  transition: border-color .22s var(--ease); width: 100%; appearance: none; min-height: 44px;
}
.field textarea { resize: vertical; min-height: 80px; }
.field input:focus, .field select:focus, .field textarea:focus { border-bottom-color: var(--navy); border-bottom-width: 2px; }
.field input[aria-invalid="true"], .field textarea[aria-invalid="true"] { border-bottom-color: var(--alert); border-bottom-width: 2px; }
.form-card .submit {
  background: var(--ink); color: var(--surface); border: none;
  padding: 15px 28px; border-radius: var(--r-full); font-family: inherit;
  font-weight: 500; font-size: 16px; cursor: pointer; letter-spacing: -0.005em;
  transition: background .28s var(--ease), transform .28s var(--ease);
  display: inline-flex; align-items: center; gap: 10px;
}
.form-card .submit:hover { background: var(--navy); transform: translateY(-2px); }
.form-card .submit[disabled] { opacity: .6; cursor: progress; transform: none; }
.form-success { display: none; text-align: center; padding: 36px 0; }
.form-success.show { display: block; }
.form-success .ok { width: 60px; height: 60px; border-radius: 50%; background: var(--navy); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 26px; margin-bottom: 18px; }
.form-success h3 { font-family: var(--font-display); font-size: clamp(22px,2.5vw,30px); font-weight: 700; margin: 0 0 10px 0; letter-spacing: -0.02em; }
.form-success p { color: var(--gray); font-size: var(--t-base); max-width: 34ch; margin: 0 auto; }
.form-error { color: var(--alert); font-size: var(--t-sm); margin: 16px 0 0; }
.hp-field { position: absolute; left: -9999px; opacity: 0; height: 0; overflow: hidden; }

.field input[type="checkbox"] {
  appearance: auto; -webkit-appearance: auto;
  width: 18px; height: 18px; min-height: auto;
  border-bottom: none; padding: 0; flex-shrink: 0; accent-color: var(--navy); cursor: pointer;
}
.privacy-label {
  display: flex; gap: 10px; align-items: flex-start; cursor: pointer;
  font-size: var(--t-sm); color: var(--gray); line-height: 1.55;
  font-weight: 400; text-transform: none; letter-spacing: 0;
}
.privacy-label input { margin-top: 2px; }
.privacy-label a { color: var(--navy); text-decoration: underline; text-underline-offset: 2px; }
.privacy-error { outline: 2px solid var(--alert); outline-offset: 4px; border-radius: 4px; }

/* ─────────────────────────── Modulo a passi ─────────────────────────── */
.ci-wizard { position: relative; }
/* Spazio in fondo: i pulsanti fissi di contatto non devono coprire "Avanti". */
.ci-form { padding-bottom: 72px; }
.wz-title {
  font-family: var(--font-display); font-size: clamp(24px, 2.6vw, 34px);
  font-weight: 700; letter-spacing: -0.025em; line-height: 1.15; margin: 0 0 10px;
  color: var(--ink);
}
.wz-sub { font-size: 15px; line-height: 1.6; color: var(--gray); margin: 0 0 22px; max-width: 48ch; }

.wz-rif {
  display: flex; align-items: center; gap: 10px;
  background: rgba(78,95,148,.07); border: 1px solid rgba(78,95,148,.2);
  border-radius: var(--r-md); padding: 11px 14px; margin: 0 0 20px;
  font-size: 14px; color: var(--ink-soft); line-height: 1.45;
}
.wz-rif svg { width: 17px; height: 17px; color: var(--accent); flex-shrink: 0; }

.wz-progress { height: 5px; background: var(--surface-2); border-radius: 3px; overflow: hidden; margin-bottom: 10px; }
.wz-progress-bar { display: block; height: 100%; width: 25%; background: var(--navy); border-radius: 3px; transition: width .35s var(--ease); }
.wz-counter { font-size: 14px; color: var(--gray); margin: 0 0 22px; }
.wz-counter strong { color: var(--ink); font-weight: 600; }

.wz-step { display: none; border: none; padding: 0; margin: 0; min-width: 0; }
.wz-step.is-current { display: block; animation: wz-in .35s var(--ease); }
@keyframes wz-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.no-js .wz-step { display: block; margin-bottom: 26px; }

.wz-q {
  font-size: clamp(18px, 1.8vw, 22px); font-weight: 600; letter-spacing: -0.015em;
  color: var(--ink); padding: 0; margin: 0 0 6px; line-height: 1.3;
}
.wz-help { font-size: 14px; color: var(--gray); margin: 0 0 18px; line-height: 1.55; max-width: 52ch; }
.wz-q + .wz-options { margin-top: 18px; }

.wz-options { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.wz-options--compact { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.wz-options--comuni { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); }
.wz-options.wz-invalid .wz-option-box { border-color: var(--alert); }

.wz-option { position: relative; display: block; }
.wz-option input { position: absolute; opacity: 0; width: 0; height: 0; }
.wz-option-box {
  display: flex; align-items: center; gap: 12px; height: 100%;
  min-height: 60px; padding: 14px 18px;
  background: var(--surface-2); border: 1.5px solid transparent;
  border-radius: var(--r-md); cursor: pointer;
  font-size: 16px; color: var(--ink-soft); line-height: 1.35;
  transition: border-color .2s, background .2s, transform .2s var(--ease);
}
.wz-option-box svg { color: var(--navy); flex-shrink: 0; }
.wz-option-box strong { display: block; font-weight: 600; color: var(--ink); }
.wz-option-box small { display: block; font-size: 13px; color: var(--gray); margin-top: 2px; }
.wz-option:hover .wz-option-box { border-color: var(--gray-soft); transform: translateY(-1px); }
.wz-option input:checked + .wz-option-box {
  border-color: var(--navy); background: rgba(34,43,73,.06);
}
.wz-option input:focus-visible + .wz-option-box { outline: 3px solid var(--blue); outline-offset: 2px; }

.wz-extra { margin-top: 16px; }
.wz-step--dati .form-grid { margin-top: 18px; }

.wz-nav { display: flex; align-items: center; gap: 16px; margin-top: 28px; flex-wrap: wrap; }
.wz-next, .wz-submit {
  display: inline-flex; align-items: center; gap: 12px;
  min-height: 54px; padding: 0 30px 0 8px; border: none; border-radius: var(--r-full);
  background: var(--navy); color: #fff; cursor: pointer;
  font-family: var(--font-text); font-size: 15px; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  transition: background .22s, transform .22s var(--ease);
}
.wz-submit { padding: 0 30px; letter-spacing: 0.02em; text-transform: none; font-size: 16px; }
.wz-next:hover, .wz-submit:hover { background: var(--navy-deep); transform: translateY(-2px); }
.wz-next[disabled], .wz-submit[disabled] { opacity: .6; cursor: progress; transform: none; }
.wz-arrow {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 50%;
  background: #fff; color: var(--navy); font-size: 18px;
}
.wz-back {
  background: none; border: none; padding: 8px 4px; cursor: pointer;
  font: inherit; font-size: 15px; color: var(--gray);
  text-decoration: underline; text-underline-offset: 4px; min-height: 44px;
}
.wz-back:hover { color: var(--navy); }
.wz-nav .wz-back { order: -1; margin-right: auto; }

@media (max-width: 560px) {
  .wz-options { grid-template-columns: 1fr; }
  .wz-options--compact, .wz-options--comuni { grid-template-columns: 1fr 1fr; }
  .wz-nav { gap: 10px; }
  .wz-next, .wz-submit { width: 100%; justify-content: center; }
  .wz-nav .wz-back { order: 1; margin: 0 auto; }
}

/* ─────────────────────────── LOCATION ─────────────────────────── */
.location { padding: clamp(72px,10vw,128px) 0; }
.location-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: clamp(32px,4vw,72px); align-items: stretch; }
.location-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: clamp(32px,4vw,56px); display: grid; grid-template-columns: 1fr 1fr; gap: 36px; align-content: start; }
.location-card .head { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: flex-end; padding-bottom: 28px; border-bottom: 1px solid var(--line); }
.location-card .head h2 { font-family: var(--font-display); font-size: clamp(26px,3vw,42px); font-weight: 600; letter-spacing: -0.03em; line-height: 1; margin: 0; }
.location-card .head h2 em { font-style: normal; color: var(--blue); font-weight: 400; }
.location-card .head .label { font-size: var(--t-xs); letter-spacing: 0.16em; text-transform: uppercase; color: var(--gray); font-weight: 600; }
.loc-block .lbl { font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gray-soft); font-weight: 600; margin-bottom: 8px; display: flex; align-items: center; gap: 8px; }
.loc-block .lbl .wa-pill { background: var(--wa-deep); color: #fff; font-size: 9px; padding: 2px 6px; border-radius: 999px; letter-spacing: 0.1em; font-weight: 700; }
.loc-block .v { font-family: var(--font-display); font-size: clamp(var(--t-base),1.8vw,26px); font-weight: 700; letter-spacing: -0.015em; line-height: 1.35; color: var(--ink); }
.loc-block .v a:hover { color: var(--navy); }
.loc-block .sub { font-size: var(--t-sm); color: var(--gray); margin-top: 6px; line-height: 1.55; }

.map-card { position: relative; border-radius: var(--r-lg); overflow: hidden; background: var(--navy); color: var(--surface); min-height: 380px; display: flex; flex-direction: column; justify-content: space-between; }
.map-iframe { flex: 1; width: 100%; border: 0; display: block; min-height: 280px; }
.map-card .map-foot { position: relative; z-index: 1; padding: 20px 28px; display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; border-top: 1px solid rgba(255,255,255,0.1); }
.map-card .map-foot .coord { font-family: var(--font-display); font-size: var(--t-sm); opacity: 0.8; }
.map-card .map-foot a { background: var(--surface); color: var(--ink); padding: 10px 18px; border-radius: var(--r-full); font-size: var(--t-sm); font-weight: 500; transition: transform .28s var(--ease); white-space: nowrap; }
.map-card .map-foot a:hover { transform: translateY(-2px); }

/* ─────────────────────────── FOOTER ─────────────────────────── */
.site-footer { background: var(--navy-deep); color: rgba(255,255,255,0.72); padding: clamp(56px,7vw,88px) 0 0; font-size: var(--t-sm); }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: clamp(28px,4vw,56px); padding-bottom: clamp(40px,5vw,64px); }
.footer-brand .logo { display: block; width: auto; height: clamp(36px,3.4vw,46px); margin-bottom: 18px; }
.footer-brand p { margin: 0; max-width: 34ch; line-height: 1.7; }
.footer-col h2 { font-size: var(--t-xs); letter-spacing: 0.18em; text-transform: uppercase; color: rgba(255,255,255,0.5); font-weight: 600; margin: 0 0 16px; font-family: var(--font-text); }
.footer-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.footer-col a:hover { color: var(--surface); }
.footer-legal { border-top: 1px solid rgba(255,255,255,0.1); padding: 22px 0 28px; display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between; align-items: center; font-size: var(--t-xs); color: rgba(255,255,255,0.55); line-height: 1.7; }
.footer-legal a { text-decoration: underline; text-underline-offset: 2px; }
.footer-legal a:hover { color: var(--surface); }

/* ─────────────────────────── Azioni fisse: chiama + WhatsApp ─────────────────────────── */
/* Un solo gruppo, su tutte le larghezze: compatto in basso a destra da desktop,
   barra piena in fondo allo schermo da mobile. Nessuna icona duplicata. */
.contatto-fisso {
  position: fixed; z-index: 90;
  right: 22px; bottom: 22px;
  display: flex; gap: 10px;
}
.contatto-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 0 22px; border-radius: var(--r-full);
  font-size: 15px; font-weight: 600; color: #fff; white-space: nowrap;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.contatto-btn svg { width: 20px; height: 20px; flex-shrink: 0; }
.contatto-btn:hover { transform: translateY(-2px); }
.contatto-btn--call { background: var(--navy); box-shadow: 0 10px 26px -8px rgba(30,38,66,.55); }
.contatto-btn--wa { background: var(--wa-deep); box-shadow: 0 10px 26px -8px rgba(18,140,126,.55); }
.contatto-btn--wa:hover { background: var(--wa); color: var(--ink); }

@media (max-width: 767px) {
  .contatto-fisso {
    right: 0; left: 0; bottom: 0; gap: 0;
    background: var(--navy); box-shadow: 0 -14px 30px rgba(0,0,0,.22);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  .contatto-btn {
    flex: 1 1 50%; border-radius: 0; min-height: 58px; box-shadow: none;
    font-size: 16px;
  }
  .contatto-btn--call { background: var(--navy); }
  .contatto-btn--wa { background: var(--wa-deep); }
  .contatto-btn:hover { transform: none; }
}

/* ─────────────────────────── Consenso cookie ─────────────────────────── */
.cookie-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 120;
  background: var(--navy-deep); color: rgba(255,255,255,.82);
  box-shadow: 0 -20px 48px rgba(0,0,0,.3);
  padding: clamp(18px,2.4vw,26px) clamp(16px,4vw,56px);
  padding-bottom: calc(clamp(18px,2.4vw,26px) + env(safe-area-inset-bottom, 0px));
}
.cookie-inner {
  max-width: var(--container); margin: 0 auto;
  display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 24px; align-items: center;
}
.cookie-text h2 {
  font-family: var(--font-display); font-size: 20px; font-weight: 700;
  color: #fff; margin: 0 0 6px; letter-spacing: -0.02em;
}
.cookie-text p { margin: 0; font-size: 14px; line-height: 1.6; max-width: 78ch; }
.cookie-text a { color: #fff; text-decoration: underline; text-underline-offset: 2px; }

.cookie-prefs { display: flex; flex-wrap: wrap; gap: 12px 28px; margin-top: 16px; }
.cookie-pref { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; line-height: 1.5; max-width: 38ch; }
.cookie-pref input { margin-top: 3px; accent-color: var(--wa); width: 17px; height: 17px; }
.cookie-pref b { display: block; color: #fff; font-weight: 600; }

.cookie-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; }
.cookie-btn {
  border: 1px solid rgba(255,255,255,.28); background: transparent; color: #fff;
  border-radius: var(--r-full); padding: 12px 22px; font: inherit; font-size: 14px; font-weight: 600;
  cursor: pointer; white-space: nowrap; transition: background .2s, transform .2s var(--ease);
}
.cookie-btn:hover { background: rgba(255,255,255,.12); transform: translateY(-1px); }
.cookie-btn--accept { background: #fff; color: var(--navy-deep); border-color: #fff; }
.cookie-btn--accept:hover { background: rgba(255,255,255,.88); }
.cookie-btn--prefs { border-style: dashed; }

.cookie-link {
  background: none; border: none; padding: 0; cursor: pointer;
  font: inherit; font-size: var(--t-xs); color: inherit;
  text-decoration: underline; text-underline-offset: 2px;
}
.cookie-link:hover { color: #fff; }

.cookie-reopen {
  position: fixed; left: 18px; bottom: 18px; z-index: 90;
  background: var(--surface); color: var(--ink-soft);
  border: 1px solid var(--line); border-radius: var(--r-full);
  padding: 8px 15px; font: inherit; font-size: 12px; cursor: pointer;
  box-shadow: 0 6px 18px -10px rgba(30,38,66,.5); opacity: .75;
}
.cookie-reopen:hover { opacity: 1; }

/* Segnaposto degli embed bloccati finché manca il consenso */
.embed-blocco {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 12px; text-align: center; padding: 32px 24px; height: 100%;
  background: var(--surface-2); color: var(--gray); font-size: 14px;
}
.embed-blocco button {
  background: var(--ink); color: #fff; border: none; border-radius: var(--r-full);
  padding: 11px 22px; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
}
.embed-blocco button:hover { background: var(--navy); }

/* ─────────────────────────── Reveal ─────────────────────────── */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .85s var(--ease), transform .85s var(--ease); }
.reveal.is-in { opacity: 1; transform: translateY(0); }
.no-js .reveal, .no-js .promise-item,
.ci-mostra-tutto .reveal, .ci-mostra-tutto .promise-item {
  opacity: 1; transform: none;
}

/* ─────────────────────────── Pagine interne / editor ─────────────────────────── */
.page-hero {
  background: var(--navy); color: var(--surface);
  padding: clamp(72px,9vw,120px) 0 clamp(48px,6vw,72px);
  position: relative; overflow: hidden;

  /* Altezza minima: senza, la testata è alta quanto il testo che contiene e
     della fotografia si vede una striscia. L'altezza si regola da Personalizza
     e arriva come variabile; il valore qui è il ripiego se non è impostata.

     È solo un minimo, mai un massimo: con un titolo lungo o un testo di
     accompagnamento su più righe la testata deve poter crescere. Un tetto
     in altezza, con overflow nascosto, taglierebbe le ultime righe. */
  min-height: var(--page-hero-h, clamp(280px, 50vh, 900px));
  display: flex; align-items: flex-end;
}
.page-hero > .container { width: 100%; }


/* Lo sfondo media usa le stesse regole .hero-media dell'hero della home: il
   fondo navy della testata resta sotto, quindi se l'immagine non arriva il
   titolo bianco resta leggibile invece di finire sul bianco della pagina. */

/* Velo scuro sopra la fotografia: senza, un cielo chiaro come quello del
   video di Suzzara manda il titolo bianco sotto il contrasto minimo.
   Il testo è ancorato in basso, quindi il velo è fitto solo lì e in alto
   quasi sparisce: è la parte di fotografia che si vuole far vedere. */
.page-hero::before {
  content: ''; position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(to top, rgba(20,26,46,0.90) 0%, rgba(20,26,46,0.62) 38%, rgba(20,26,46,0.22) 100%),
    radial-gradient(circle at 85% 90%, rgba(78,95,148,0.24) 0%, transparent 56%);
  pointer-events: none;
}

.page-hero .container { position: relative; z-index: 2; }
.page-hero .label { font-size: var(--t-xs); letter-spacing: 0.2em; text-transform: uppercase; color: rgba(255,255,255,0.7); font-weight: 600; display: block; margin-bottom: 14px; }
.page-hero h1 { font-family: var(--font-display); font-size: var(--t-2xl); font-weight: 700; letter-spacing: -0.03em; line-height: 1.03; margin: 0; max-width: 20ch; text-wrap: balance; }
.page-hero h1 em { font-style: normal; font-weight: 400; color: #B9BCD4; }
.page-hero p { color: rgba(255,255,255,0.82); max-width: 52ch; margin: 20px 0 0; line-height: 1.7; }

.breadcrumbs { font-size: var(--t-sm); color: var(--gray); padding: 18px 0; }
.breadcrumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; }
.breadcrumbs li::after { content: '/'; margin-left: 8px; color: var(--gray-soft); }
.breadcrumbs li:last-child::after { content: ''; }
.breadcrumbs a:hover { color: var(--navy); text-decoration: underline; }
.page-hero .breadcrumbs { color: rgba(255,255,255,0.6); padding-top: 0; padding-bottom: 20px; }
.page-hero .breadcrumbs li::after { color: rgba(255,255,255,0.4); }

.entry-content { padding: clamp(48px,6vw,88px) 0; max-width: 74ch; }
.entry-content > * + * { margin-top: 1.1em; }
.entry-content h2 { font-family: var(--font-display); font-size: var(--t-xl); font-weight: 700; letter-spacing: -0.025em; line-height: 1.15; margin-top: 1.8em; }
.entry-content h3 { font-family: var(--font-display); font-size: var(--t-lg); font-weight: 700; letter-spacing: -0.02em; margin-top: 1.6em; }
.entry-content a { color: var(--navy); text-decoration: underline; text-underline-offset: 3px; }
.entry-content ul, .entry-content ol { padding-left: 1.3em; }
.entry-content li + li { margin-top: .5em; }
.entry-content blockquote { border-left: 3px solid var(--navy); padding-left: 22px; font-family: var(--font-display); font-size: var(--t-md); color: var(--ink-soft); margin-left: 0; }
.entry-content img, .entry-content figure { border-radius: var(--r-md); }
.alignwide { max-width: min(1100px, 92vw); }
.alignfull { max-width: 100%; }
.aligncenter { margin-left: auto; margin-right: auto; }

.pagination { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; padding: 40px 0 8px; }
.pagination .page-numbers {
  min-width: 44px; height: 44px; padding: 0 14px; border-radius: var(--r-full);
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--surface); border: 1px solid var(--line); font-size: 15px; font-weight: 500;
  transition: background .2s, color .2s, border-color .2s;
}
.pagination .page-numbers:hover { border-color: var(--navy); }
.pagination .page-numbers.current { background: var(--navy); color: var(--surface); border-color: var(--navy); }

/* ─────────────────────────── Contatti ─────────────────────────── */
.contact-layout { display: grid; grid-template-columns: 1fr 1.05fr; gap: clamp(32px,5vw,72px); padding: clamp(56px,7vw,104px) 0; align-items: start; }
.contact-channels { display: flex; flex-direction: column; gap: 4px; }
.contact-channel { display: grid; grid-template-columns: 46px 1fr; gap: 18px; padding: 24px 0; border-top: 1px solid var(--line); align-items: start; }
.contact-channel:last-child { border-bottom: 1px solid var(--line); }
.contact-channel .ico { width: 46px; height: 46px; border-radius: 50%; background: var(--surface-2); color: var(--navy); display: flex; align-items: center; justify-content: center; }
.contact-channel .ico svg { width: 20px; height: 20px; }
.contact-channel .k { font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gray-soft); font-weight: 600; margin-bottom: 6px; display: block; }
.contact-channel .v { font-family: var(--font-display); font-size: clamp(19px,1.8vw,24px); letter-spacing: -0.015em; line-height: 1.3; }
.contact-channel .v a:hover { color: var(--navy); text-decoration: underline; text-underline-offset: 3px; }
.contact-channel .sub { font-size: var(--t-sm); color: var(--gray); margin-top: 5px; }
.contact-hours { margin-top: 34px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: clamp(22px,2.6vw,32px); }
.contact-hours h2 { font-family: var(--font-display); font-size: var(--t-lg); font-weight: 700; margin: 0 0 16px; letter-spacing: -0.02em; }
.contact-hours dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 10px 24px; font-size: var(--t-sm); }
.contact-hours dt { color: var(--gray); }
.contact-hours dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
.contact-hours .today { color: var(--navy); font-weight: 600; }
.contact-form-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: clamp(26px,3.4vw,48px); box-shadow: 0 28px 56px -32px rgba(30,38,66,0.35); }
.contact-map { width: 100%; height: clamp(300px, 42vw, 460px); border: 0; display: block; border-radius: var(--r-lg); overflow: hidden; }
.contact-map-wrap { padding-bottom: clamp(56px,7vw,104px); }

/* ─────────────────────────── Responsive ─────────────────────────── */
@media (min-width: 768px) {
  .navbar-links { display: flex; }
  .hero-content-grid { grid-template-columns: 1fr 1fr; }
  .hero-right { justify-content: flex-end; }
}
@media (max-width: 1100px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 980px) {
  .stats-bar .container { grid-template-columns: repeat(2,1fr); gap: 32px 24px; }
  .stat-item { border-left: none; padding-left: 0; }
  .promise-grid { grid-template-columns: 1fr; }
  .promise-image { aspect-ratio: 16/10; }
  .section-head { grid-template-columns: 1fr; gap: 20px; }
  .method-steps { grid-template-columns: repeat(2,1fr); }
  .step { border-left: none; border-top: 1px solid var(--line); padding: 24px 0; }
  .step:first-child { border-top: none; }
  .lead-grid { grid-template-columns: 1fr; }
  .location-grid { grid-template-columns: 1fr; }
  .location-card { grid-template-columns: 1fr; gap: 28px; }
  .form-grid { grid-template-columns: 1fr; }
  .team-grid { grid-template-columns: 1fr; gap: 28px; }
  .team-photo { aspect-ratio: 4/3; }
  .team-photo img { object-position: center 25%; }
  .featured-testimonial { grid-template-columns: 1fr; }
  .ft-image { aspect-ratio: 16/10; min-height: 0; }
  .reviews-masonry { columns: 2; }
  .gallery-card { width: clamp(220px, 50vw, 280px); }
  .marquee-track { animation-duration: 50s; }
  .contact-layout { grid-template-columns: 1fr; }
}
@media (max-width: 767px) {
  body { padding-bottom: 64px; }

  /* Area toccabile minima: nessun bersaglio sotto i 44px per lato. */
  .breadcrumbs a,
  .footer-col a,
  .footer-legal a,
  .loc-block .v a,
  .contact-channel .v a,
  .cookie-text a,
  .privacy-label a,
  .sb-clear,
  .listing-more {
    display: inline-block;
    min-height: 44px;
    line-height: 2.4;
  }
  .footer-col ul { gap: 2px; }
  .breadcrumbs ol { gap: 4px 8px; }
  .field input, .field select, .field textarea { min-height: 48px; padding-top: 12px; padding-bottom: 12px; }
  .field input[type="checkbox"] { width: 24px; height: 24px; }
  .privacy-label { padding: 6px 0; }
  .listing-allphotos { min-height: 44px; }
  .navbar-logo { min-height: 44px; }
  .contact-channel .sub a { display: inline-block; min-height: 44px; line-height: 2.6; }
  .hero-body { padding-bottom: 92px; }
  /* Velatura più leggera: la foto della città deve restare visibile. */
  /* Velatura leggera su tutta la foto: la città resta riconoscibile. */
  .hero::after {
    background: linear-gradient(to top,
      rgba(20,26,46,0.55) 0%, rgba(20,26,46,0.28) 45%,
      rgba(20,26,46,0.10) 75%, rgba(20,26,46,0.16) 100%);
  }
  /* Il fondo scuro segue il blocco di testo, ovunque finisca. */
  .hero-body {
    background: linear-gradient(to top,
      rgba(20,26,46,0.94) 0%, rgba(20,26,46,0.88) 45%,
      rgba(20,26,46,0.62) 78%, rgba(20,26,46,0) 100%);
    padding-top: 64px;
  }
  .hero-heading { font-size: clamp(32px, 9vw, 46px); }
  section.lead .container { padding-left: clamp(16px, 5vw, 28px); padding-right: clamp(16px, 5vw, 28px); }
  .lead-grid { width: 100%; gap: 32px; }
  .form-card { width: 100%; }
  .form-card .submit { width: 100%; justify-content: center; }
  .lead-intro .lead-benefits { margin-top: 20px; }
  .fab-stack { bottom: 84px; right: 16px; gap: 10px; }
  .fab { width: 50px; height: 50px; }
  .fab svg { width: 23px; height: 23px; }
  .fab--call { display: none; } /* su mobile la chiamata è già nella barra fissa */
  .cookie-bar { padding: 16px 16px calc(16px + env(safe-area-inset-bottom, 0px)); }
  .cookie-inner { grid-template-columns: 1fr; gap: 14px; }
  .cookie-text h2 { font-size: 17px; margin-bottom: 4px; }
  .cookie-text p { font-size: 13px; line-height: 1.5; }
  .cookie-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .cookie-btn { padding: 13px 12px; font-size: 14px; text-align: center; justify-content: center; }
  .cookie-btn--prefs, .cookie-btn--save { grid-column: 1 / -1; }
  /* Su mobile il pulsante flottante coprirebbe le card: il richiamo alle
     preferenze resta nel footer, dove non intralcia la lettura. */
  .cookie-link {
  background: none; border: none; padding: 0; cursor: pointer;
  font: inherit; font-size: var(--t-xs); color: inherit;
  text-decoration: underline; text-underline-offset: 2px;
}
.cookie-link:hover { color: #fff; }

.cookie-reopen { display: none; }
  .liquid-glass { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(20,26,46,0.55); }
  .footer-grid { grid-template-columns: 1fr; gap: 32px; }

  /* Header sempre presente: logo a sinistra, menu a destra. */
  .navbar { padding: 12px 16px 0; }
  .navbar--solid { padding: 10px 16px; }
  :root { --header-h: 82px; }
  .navbar-inner { min-height: 60px; padding: 8px 14px; }
  .navbar-links, .navbar-cta { display: none !important; }
  .navbar-toggle { display: inline-flex; }
  .navbar-logo img { height: 36px; max-width: 54vw; }
}
@media (max-width: 580px) {
  .stats-bar .container { grid-template-columns: 1fr 1fr; gap: 24px; }
  .method-steps { grid-template-columns: 1fr; }
  .location-card .head { flex-direction: column; gap: 8px; align-items: flex-start; }
  .hero-tag { white-space: normal; }
  .promise-item { grid-template-columns: 48px 1fr; gap: 16px; }
  .reviews-masonry { columns: 1; }
  .gallery-card { width: 78vw; }
  .marquee-track { animation-duration: 40s; }
  .gallery-footer { flex-direction: column; align-items: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero-dot, .hero-sub, .hero-buttons, .hero-right { animation: none; opacity: 1; transform: none; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .marquee { overflow-x: auto; scroll-snap-type: x mandatory; }
  .gallery-card { scroll-snap-align: start; }
}

/* ══════════════════════════════════════════════════════════════════
   Sezioni introdotte per Consulenti Immobiliari
   ══════════════════════════════════════════════════════════════════ */

/* ── Ultimi immobili (prima sezione dopo l'hero) ────────────────── */
.ultimi { padding: clamp(56px,7vw,96px) 0 clamp(64px,8vw,110px); }
.ultimi .section-head { margin-bottom: clamp(24px,3vw,36px); }

/* Scorciatoie ai comuni: sono la seconda cosa che cerca chi arriva sul sito
   di un'agenzia, subito dopo aver visto che ci sono case. */
.scorciatoie {
  display: flex; flex-wrap: wrap; gap: 10px;
  margin: 0 0 clamp(24px,3vw,34px);
}
.scorciatoie a {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 16px; border-radius: var(--r-full);
  border: 1px solid var(--line); background: var(--surface);
  font-size: var(--t-sm); font-weight: 500; color: var(--ink-soft);
  transition: border-color .2s, color .2s, background .2s;
  min-height: 44px;
}
.scorciatoie a:hover,
.scorciatoie a:focus-visible { border-color: var(--navy); color: var(--navy); }
.scorciatoie a .n {
  font-size: var(--t-xs); font-weight: 600; color: var(--gray);
  font-variant-numeric: tabular-nums;
}
.scorciatoie a.is-cantieri {
  background: var(--navy); border-color: var(--navy); color: var(--surface);
}
.scorciatoie a.is-cantieri:hover,
.scorciatoie a.is-cantieri:focus-visible { background: var(--navy-deep); color: var(--surface); }

.ultimi-cta { margin: clamp(28px,3.5vw,44px) 0 0; }
.ultimi-cta .cta,
.cantieri .cta {
  display: inline-flex; align-items: center; gap: 10px;
  font-weight: 600; font-size: var(--t-md); color: var(--navy);
  border-bottom: 2px solid var(--navy); padding-bottom: 4px; min-height: 44px;
}
.ultimi-cta .cta .arrow,
.cantieri .cta .arrow { transition: transform .3s var(--ease); }
.ultimi-cta .cta:hover .arrow,
.cantieri .cta:hover .arrow { transform: translateX(5px); }

/* ── Nuovi cantieri in home ─────────────────────────────────────── */
.cantieri {
  padding: clamp(56px,7vw,96px) 0;
  background: var(--surface-2);
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}

/* ── Perché sceglierci, tre colonne ─────────────────────────────── */
.promise-list--tre {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(24px,3vw,44px); margin-top: clamp(32px,4vw,52px);
}
.promise-list--tre .promise-item {
  grid-template-columns: 1fr; gap: 0;
  border-top: 2px solid var(--navy); border-bottom: none;
  padding: 22px 0 0;
}
.promise-list--tre .promise-item:last-child { border-bottom: none; }
.promise-list--tre .num {
  font-family: var(--font-display); font-size: var(--t-sm); font-weight: 700;
  color: var(--blue); letter-spacing: 0.08em; padding: 0 0 12px;
  font-variant-numeric: tabular-nums;
}
.promise-eyebrow {
  display: block; font-size: var(--t-xs); font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--gray); margin-bottom: 8px;
}
.promise-list--tre h3 { max-width: none; }
.promise-list--tre p { max-width: none; }

/* ── Recensioni: avatar con le iniziali ─────────────────────────── */
.review-foot { display: flex; align-items: center; gap: 12px; }
.review-avatar {
  flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--navy); color: var(--surface);
  font-family: var(--font-display); font-size: 14px; font-weight: 700;
  letter-spacing: 0.02em;
}
.review-who { display: flex; flex-direction: column; gap: 2px; }
.review-who .review-stars { font-size: 13px; color: var(--gold); letter-spacing: 0.06em; }

/* ── Chi siamo: i valori dell'agenzia ───────────────────────────── */
.chi-siamo { padding: clamp(64px,8vw,120px) 0; }
.valori-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px,2.5vw,32px); margin-top: clamp(32px,4vw,52px);
}
.valore-card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: clamp(24px,3vw,34px);
}
.valore-card h3 {
  font-family: var(--font-display); font-size: clamp(19px,1.8vw,23px);
  font-weight: 700; letter-spacing: -0.02em; line-height: 1.25; margin: 0 0 12px;
}
.valore-card p { font-size: var(--t-sm); color: var(--gray); line-height: 1.7; margin: 0; }

/* ── Devi vendere casa ──────────────────────────────────────────── */
.vendere-motivi { padding: clamp(56px,7vw,100px) 0; }

.faq { padding: clamp(56px,7vw,100px) 0; background: var(--surface-2); border-top: 1px solid var(--line); }
.faq-list { margin-top: clamp(28px,3.5vw,44px); max-width: 900px; }
.faq-item {
  border-bottom: 1px solid var(--line);
  background: transparent;
}
.faq-item summary {
  cursor: pointer; list-style: none;
  padding: 20px 44px 20px 0; position: relative;
  font-family: var(--font-display); font-size: clamp(17px,1.6vw,21px);
  font-weight: 600; letter-spacing: -0.015em; color: var(--ink);
  min-height: 44px;
}
.faq-item summary::-webkit-details-marker { display: none; }
/* Il segno "+" ruota a "×" all'apertura: senza un indicatore di stato, un
   elenco di <details> sembra un elenco di titoli inerti. */
.faq-item summary::after {
  content: '+'; position: absolute; right: 8px; top: 50%;
  transform: translateY(-50%); font-size: 26px; font-weight: 400;
  color: var(--blue); line-height: 1; transition: transform .3s var(--ease);
}
.faq-item[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq-item p {
  margin: 0 0 22px; max-width: 68ch;
  font-size: var(--t-sm); line-height: 1.75; color: var(--gray);
}

/* ── Testata corta per le pagine elenco ─────────────────────────── */

@media (max-width: 980px) {
  .promise-list--tre,
  .valori-grid { grid-template-columns: 1fr; }
  .promise-list--tre .promise-item { padding-top: 18px; }
}

/* ── I consulenti (pagina Chi siamo) ────────────────────────────
   Riquadro a tutta larghezza per persona: foto a sinistra, contenuti a
   destra. Con le colonne verticali una sola persona lascerebbe due terzi di
   riga vuoti; così il blocco regge da uno a tre senza sembrare monco. */
.consulenti { padding: clamp(56px,7vw,100px) 0; background: var(--surface-2); border-top: 1px solid var(--line); }
.consulenti-lista {
  display: flex; flex-direction: column; gap: clamp(20px,2.5vw,32px);
  margin-top: clamp(32px,4vw,52px);
}
.consulente-card {
  display: grid; grid-template-columns: minmax(180px, 260px) 1fr;
  gap: clamp(24px,3vw,44px); align-items: center;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: clamp(22px,2.6vw,34px);
}
.consulente-foto {
  position: relative; border-radius: var(--r-md); overflow: hidden;
  /* Rapporto fisso: la foto arriva dal Customizer e non se ne conoscono le
     dimensioni, quindi il riquadro le detta lui e la pagina non si sposta
     mentre l'immagine carica. */
  aspect-ratio: 3 / 4;
  background: linear-gradient(160deg, var(--surface-2) 0%, #E7E8EF 100%);
  display: flex; align-items: center; justify-content: center;
}
.consulente-foto img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.consulente-iniziali {
  font-family: var(--font-display); font-size: clamp(38px,4vw,56px);
  font-weight: 700; color: var(--periwinkle); letter-spacing: -0.02em;
}
.consulente-corpo { min-width: 0; }
.consulente-nome {
  font-family: var(--font-display); font-size: clamp(26px,3vw,40px);
  font-weight: 700; letter-spacing: -0.03em; line-height: 1.05;
  margin: 0; color: var(--ink);
}
.consulente-ruolo {
  font-size: var(--t-xs); font-weight: 600; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--gray); margin: 10px 0 0;
}
.consulente-bio { margin: 18px 0 0; max-width: 62ch; }
.consulente-bio p {
  font-size: var(--t-sm); line-height: 1.75; color: var(--ink-soft); margin: 0;
}
.consulente-bio p + p { margin-top: 0.9em; }
.consulente-contatti {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
  margin-top: clamp(20px,2.4vw,28px);
}
.cc-btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 12px 22px; border-radius: var(--r-full); min-height: 44px;
  font-size: var(--t-sm); font-weight: 600; letter-spacing: 0.01em;
  transition: background .22s, color .22s, border-color .22s;
}
.cc-btn svg { flex: 0 0 auto; }
.cc-btn--tel { background: var(--navy); color: var(--surface); }
.cc-btn--tel:hover, .cc-btn--tel:focus-visible { background: var(--navy-deep); }
.cc-btn--wa { background: #E4E6EF; color: var(--navy); }
.cc-btn--wa:hover, .cc-btn--wa:focus-visible { background: var(--periwinkle); color: #fff; }
.cc-mail {
  font-size: var(--t-sm); color: var(--blue);
  text-decoration: underline; text-underline-offset: 4px;
  display: inline-flex; align-items: center; min-height: 44px;
}
.cc-mail:hover { color: var(--navy); }

@media (max-width: 720px) {
  .consulente-card { grid-template-columns: 1fr; gap: 22px; }
  /* Da telefono la foto verticale a tutta larghezza occuperebbe uno schermo
     intero prima di arrivare al nome: qui si accorcia e resta contenuta. */
  .consulente-foto { max-width: 200px; aspect-ratio: 1 / 1; }
  .consulente-contatti { gap: 10px; }
  .cc-btn { flex: 1 1 auto; justify-content: center; }
}

/* ── Consulenze del consulente ──────────────────────────────────
   Etichette, non un elenco puntato: sono voci brevi e affiancate leggono
   come competenze, incolonnate come una lista della spesa. */
.consulente-consulenze { margin-top: clamp(18px,2.2vw,26px); }
.cc-titolo {
  display: block; font-size: var(--t-xs); font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--gray); margin-bottom: 12px;
}
.consulente-consulenze ul {
  display: flex; flex-wrap: wrap; gap: 8px;
  list-style: none; margin: 0; padding: 0;
}
.consulente-consulenze li {
  background: var(--surface-2); border: 1px solid var(--line-light);
  border-radius: var(--r-full); padding: 7px 15px;
  font-size: var(--t-sm); font-weight: 500; color: var(--navy);
}

/* ── Recensioni dentro la scheda del consulente ─────────────────
   Stanno sotto il riquadro, a tutta larghezza, separate da una riga: sono un
   contenuto di supporto, non devono competere con la presentazione. */
.consulente-recensioni {
  grid-column: 1 / -1;
  margin-top: clamp(24px,3vw,34px);
  padding-top: clamp(22px,2.6vw,30px);
  border-top: 1px solid var(--line);
}
.consulente-recensioni-lista {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px;
}
.mini-recensione {
  background: var(--surface-2); border-radius: var(--r-md);
  padding: 18px 20px; display: flex; flex-direction: column; gap: 10px;
}
.mini-recensione .stelle { color: var(--gold); font-size: 14px; letter-spacing: 2px; line-height: 1; }
.mini-recensione p {
  margin: 0; font-size: var(--t-sm); line-height: 1.65; color: var(--ink-soft);
}
.mini-recensione footer {
  margin-top: auto; display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px;
  font-size: var(--t-xs);
}
.mini-recensione footer strong { color: var(--ink); font-weight: 600; font-size: var(--t-sm); }
.mini-recensione .fonte { color: var(--gray); }
.mini-recensione .fonte::before { content: '· '; }

@media (max-width: 900px) {
  .consulente-recensioni-lista { grid-template-columns: 1fr; }
}

/* Nome collegato al profilo di chi ha scritto: il sottolineato compare solo
   al passaggio, perché nella griglia delle recensioni cinque link sottolineati
   diventerebbero rumore. */
.review-name a,
.mini-recensione footer a { color: inherit; text-decoration: none; }
.review-name a:hover,
.review-name a:focus-visible,
.mini-recensione footer a:hover,
.mini-recensione footer a:focus-visible { text-decoration: underline; text-underline-offset: 3px; }

/* ── Landing di zona ────────────────────────────────────────────
   Due righe sopra i risultati e il testo lungo sotto: una pagina comune che
   si apre con una griglia di annunci e basta è indistinguibile da quella del
   comune accanto, per chi legge e per chi la deve indicizzare. */
.zona-intro {
  max-width: 68ch; margin: clamp(20px,2.6vw,32px) 0 0;
  font-size: clamp(17px, 1.6vw, 20px); line-height: 1.7; color: var(--ink-soft);
}
.zona-testo {
  padding: clamp(40px,5vw,72px) 0;
  border-top: 1px solid var(--line); background: var(--surface-2);
  margin-top: clamp(32px,4vw,56px);
}