/* ============================================================
   WE HOME REAL ESTATE — STYLESHEET
   Foglio di stile unico e condiviso da tutte le pagine.
   Architettura: design token (Custom Properties) + classi
   semantiche per componente. Nessuna utility "soup" inline.
   ============================================================ */

/* ============================================================
   1. RESET
   ============================================================ */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  tab-size: 4;
}

img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}

input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
  background: none;
  border: none;
}

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

ul,
ol {
  list-style: none;
}

p,
h1,
h2,
h3,
h4,
h5,
h6 {
  overflow-wrap: break-word;
}

/* ============================================================
   2. DESIGN TOKENS
   ============================================================ */
:root {
  /* Brand colors */
  --color-primary: #209BD7;
  --color-primary-dark: #1B82B5;
  --color-primary-light: #4BB3E2;
  --color-secondary: #213975;
  --color-secondary-dark: #1A2D5E;
  --color-secondary-light: #2E4F9E;
  --color-accent: #B38B14;
  --color-accent-light: #D4A82A;

  /* Surfaces & text */
  --color-bg: #FFFFFF;
  --color-surface: #F8FAFC;
  --color-surface-warm: #F1F5F9;
  --color-text: #1A202C;
  --color-text-secondary: #475569;
  --color-muted: #66748A;
  --color-border: #E2E8F0;

  /* State colors */
  --color-success: #2D8A4A;
  --color-warning: #C05621;
  --color-danger: #C53030;

  /* Translucent helpers (derive da brand colors) */
  --primary-soft: rgba(32, 155, 215, 0.10);
  --primary-softer: rgba(32, 155, 215, 0.05);
  --primary-strong: rgba(32, 155, 215, 0.20);
  --success-soft: rgba(45, 138, 74, 0.10);
  --overlay-dark: rgba(33, 57, 117, 0.80);
  --on-dark: rgba(255, 255, 255, 0.80);
  --on-dark-muted: rgba(255, 255, 255, 0.70);
  --on-dark-faint: rgba(255, 255, 255, 0.50);
  --on-dark-border: rgba(255, 255, 255, 0.10);

  /* Typography */
  --font-heading: 'Montserrat', system-ui, -apple-system, sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, sans-serif;

  --text-hero: 3.5rem;
  --text-h1: 2.75rem;
  --text-h2: 2rem;
  --text-h3: 1.5rem;
  --text-h4: 1.25rem;
  --text-body-lg: 1.125rem;
  --text-body: 1rem;
  --text-small: 0.875rem;
  --text-xs: 0.75rem;

  --line-hero: 1.1;
  --line-h1: 1.15;
  --line-h2: 1.2;
  --line-h3: 1.3;
  --line-body: 1.7;

  /* Spacing */
  --section: 5rem;
  --section-lg: 7rem;

  /* Shadows */
  --shadow-card: 0 4px 24px rgba(33, 57, 117, 0.08);
  --shadow-card-hover: 0 8px 40px rgba(33, 57, 117, 0.14);
  --shadow-nav: 0 2px 16px rgba(0, 0, 0, 0.06);

  /* Border radius */
  --radius-card: 0.75rem;
  --radius-btn: 0.5rem;
  --radius-full: 9999px;

  /* Transitions */
  --transition-fast: 200ms;
  --transition-normal: 350ms;
  --transition-slow: 600ms;

  /* Layout */
  --max-content: 1280px;
  --max-narrow: 720px;
  --header-height: 5rem;
}

/* ============================================================
   3. BASE ELEMENTS
   ============================================================ */
body {
  min-height: 100vh;
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: var(--line-body);
  color: var(--color-text);
  background-color: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: 600;
  line-height: var(--line-h2);
  color: var(--color-secondary);
}

::selection {
  background-color: var(--color-primary-light);
  color: #fff;
}

/* ============================================================
   4. ANIMATIONS
   ============================================================ */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

.animate-fade-up {
  animation: fadeUp var(--transition-slow) ease-out both;
}

.stagger-children > *:nth-child(1) { animation-delay: 100ms; }
.stagger-children > *:nth-child(2) { animation-delay: 200ms; }
.stagger-children > *:nth-child(3) { animation-delay: 300ms; }
.stagger-children > *:nth-child(4) { animation-delay: 400ms; }
.stagger-children > *:nth-child(5) { animation-delay: 500ms; }
.stagger-children > *:nth-child(6) { animation-delay: 600ms; }

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  html { scroll-behavior: auto; }
}

/* State helper toggled via JS */
.hidden { display: none; }

/* ============================================================
   5. LAYOUT PRIMITIVES
   ============================================================ */
.container {
  width: 100%;
  max-width: var(--max-content);
  margin-inline: auto;
  padding-inline: 1rem;
}

@media (min-width: 640px) {
  .container { padding-inline: 1.5rem; }
}

@media (min-width: 1024px) {
  .container { padding-inline: 2rem; }
}

/* Vertical rhythm for full-width sections */
.section {
  padding-block: var(--section);
}

.section-alt {
  background-color: var(--color-surface);
}

.section-dark {
  position: relative;
  background-color: var(--color-secondary);
  overflow: hidden;
}

@media (min-width: 1024px) {
  .section {
    padding-block: var(--section-lg);
  }
}

/* ============================================================
   6. HEADER & NAVIGATION
   ============================================================ */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 50;
  transition: box-shadow var(--transition-normal);
}

.site-header.is-scrolled {
  box-shadow: var(--shadow-nav);
}

.header-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--header-height);
}

.header-logo {
  flex-shrink: 0;
}

.header-logo img {
  height: 3rem;
  width: auto;
}

/* Desktop navigation */
.header-nav {
  display: none;
  align-items: center;
  gap: 2rem;
}

.header-nav a {
  font-size: var(--text-small);
  font-weight: 500;
  color: var(--color-text-secondary);
  transition: color var(--transition-fast);
}

.header-nav a:hover,
.header-nav a.is-active {
  color: var(--color-primary);
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 1rem;
}

/* Header call-to-action button */
.header-cta {
  display: none;
  align-items: center;
  gap: 0.5rem;
  background-color: var(--color-primary);
  color: #fff;
  font-size: var(--text-small);
  font-weight: 600;
  padding: 0.625rem 1.25rem;
  border-radius: var(--radius-btn);
  transition: background-color var(--transition-fast);
}

.header-cta:hover {
  background-color: var(--color-primary-dark);
}

/* Header phone link */
.header-phone {
  display: none;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--text-small);
  font-weight: 500;
  color: var(--color-secondary);
  transition: color var(--transition-fast);
}

.header-phone:hover {
  color: var(--color-primary);
}

.header-phone svg {
  width: 1rem;
  height: 1rem;
}

/* Mobile menu toggle */
.header-toggle {
  display: block;
  padding: 0.5rem;
  margin-right: -0.5rem;
  color: var(--color-text);
}

.header-toggle svg {
  width: 1.5rem;
  height: 1.5rem;
}

/* Mobile menu panel */
.mobile-menu {
  display: none;
  background-color: #fff;
  border-top: 1px solid var(--color-border);
}

.mobile-menu.is-open {
  display: block;
}

.mobile-menu-nav {
  padding-block: 1rem;
}

.mobile-menu-nav a {
  display: block;
  padding: 0.75rem 1rem;
  font-size: var(--text-small);
  font-weight: 500;
  color: var(--color-text-secondary);
  border-radius: var(--radius-btn);
  transition: background-color var(--transition-fast);
}

.mobile-menu-nav a:hover,
.mobile-menu-nav a.is-active {
  background-color: var(--color-surface);
}

.mobile-menu-cta {
  padding-top: 0.75rem;
  margin-top: 0.75rem;
  border-top: 1px solid var(--color-border);
}

.mobile-menu-cta a {
  text-align: center;
  background-color: var(--color-primary);
  color: #fff;
  font-weight: 600;
}

.mobile-menu-cta a:hover {
  background-color: var(--color-primary-dark);
}

@media (min-width: 640px) {
  .header-cta { display: inline-flex; }
}

@media (min-width: 768px) {
  .header-phone { display: inline-flex; }
}

@media (min-width: 1024px) {
  .header-nav { display: flex; }
  .header-toggle { display: none; }
  .mobile-menu { display: none !important; }
}

/* ============================================================
   7. FOOTER
   ============================================================ */
.site-footer {
  background-color: var(--color-secondary);
  color: #fff;
}

.footer-main {
  padding-block: 4rem;
}

.footer-grid {
  display: grid;
  gap: 3rem;
}

.footer-brand-logo {
  display: block;
  margin-bottom: 1rem;
}

.footer-brand-logo img {
  height: 3rem;
  width: auto;
}

.footer-brand-text {
  color: var(--on-dark-muted);
  font-size: var(--text-small);
}

.footer-col-title {
  font-family: var(--font-heading);
  font-weight: 700;
  line-height: var(--line-h2);
  color: #fff;
  font-size: var(--text-body);
  margin-bottom: 1rem;
}

.footer-col a {
  display: block;
  color: var(--on-dark-muted);
  font-size: var(--text-small);
  padding-block: 0.25rem;
  transition: color var(--transition-fast);
}

.footer-col a:hover {
  color: #fff;
}

.footer-contact p {
  color: var(--on-dark-muted);
  font-size: var(--text-small);
  padding-block: 0.25rem;
}

.footer-contact p.is-dim {
  color: var(--on-dark-faint);
}

.footer-portals {
  border-top: 1px solid var(--on-dark-border);
}

.footer-portals-inner {
  padding-block: 1.5rem;
}

.footer-portals-title {
  color: rgba(255, 255, 255, 0.40);
  font-size: var(--text-xs);
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 1rem;
}

.footer-portals-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 2rem;
}

.footer-portals-list span {
  color: var(--on-dark-faint);
  font-size: var(--text-small);
  font-weight: 600;
  letter-spacing: 0.025em;
  transition: color var(--transition-fast);
}

.footer-portals-list span:hover {
  color: var(--on-dark);
}

.footer-bottom {
  border-top: 1px solid var(--on-dark-border);
}

.footer-bottom-inner {
  padding-block: 1.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

.footer-bottom-inner p {
  font-size: var(--text-small);
  color: var(--on-dark-faint);
}

.footer-bottom-inner a {
  color: rgba(255, 255, 255, 0.60);
  transition: color var(--transition-fast);
}

.footer-bottom-inner a:hover {
  color: #fff;
}

.footer-legal {
  display: flex;
  gap: 1.5rem;
}

@media (min-width: 768px) {
  .footer-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
  .footer-grid { grid-template-columns: repeat(4, 1fr); }
  .footer-bottom-inner {
    flex-direction: row;
    justify-content: space-between;
  }
}

/* ============================================================
   8. BUTTONS
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-weight: 600;
  border-radius: var(--radius-btn);
  padding: 0.75rem 1.5rem;
  font-size: var(--text-body);
  transition: background-color var(--transition-fast),
              border-color var(--transition-fast),
              color var(--transition-fast);
}

.btn-lg {
  padding: 1rem 2rem;
}

.btn-block {
  display: flex;
  width: 100%;
}

.btn svg {
  width: 1.25rem;
  height: 1.25rem;
}

.btn-primary {
  background-color: var(--color-primary);
  color: #fff;
}

.btn-primary:hover {
  background-color: var(--color-primary-dark);
}

.btn-white {
  background-color: #fff;
  color: var(--color-primary);
}

.btn-white:hover {
  background-color: var(--color-surface);
}

.btn-outline {
  border: 1px solid var(--color-primary);
  color: var(--color-primary);
}

.btn-outline:hover {
  background-color: var(--primary-softer);
}

.btn-outline-light {
  border: 2px solid rgba(255, 255, 255, 0.30);
  color: #fff;
}

.btn-outline-light:hover {
  border-color: rgba(255, 255, 255, 0.60);
}

/* Arrow link (testo + freccia) */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
  font-size: var(--text-small);
  color: var(--color-primary);
  transition: color var(--transition-fast);
}

.link-arrow:hover {
  color: var(--color-primary-dark);
}

.link-arrow svg {
  width: 1rem;
  height: 1rem;
}

/* ============================================================
   9. GENERIC COMPONENTS
   ============================================================ */

/* Badge / pill */
.badge {
  display: inline-block;
  font-size: var(--text-xs);
  font-weight: 600;
  padding: 0.25rem 0.75rem;
  border-radius: var(--radius-full);
  color: #fff;
}

.badge-primary   { background-color: var(--color-primary); }
.badge-secondary { background-color: var(--color-secondary); }
.badge-accent    { background-color: var(--color-accent); }
/* "Venduto/Affittato": colore distinto (riprova sociale), volutamente fuori palette per spiccare */
.badge-venduto   { background-color: #C0392B; letter-spacing: 0.03em; text-transform: uppercase; }

/* Tempo di vendita accanto al badge nella scheda (es. "Venduto in 3 settimane") */
.venduto-tempo {
  display: inline-block;
  margin-left: 0.5rem;
  font-size: var(--text-sm);
  font-weight: 600;
  color: #C0392B;
}
/* Tempo di vendita come riga in evidenza nelle card (riprova sociale) */
/* margin-top:auto: ancora la riga in fondo, appena sopra il footer, così resta
   allineata tra le card a prescindere dall'altezza di titolo/descrizione sopra. */
.venduto-tempo-card {
  margin: auto 0 0.5rem;
  font-size: var(--text-sm);
  font-weight: 700;
  color: #C0392B;
}

/* Open House: riga "data e ora" sulle card (immobile IN VENDITA valorizzato con un evento) */
/* margin-top:auto: vedi nota su .venduto-tempo-card — riga ancorata in fondo per l'allineamento. */
.openhouse-card {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin: auto 0 0.5rem;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-accent);
}
.openhouse-card svg {
  width: 1.05rem;
  height: 1.05rem;
  flex-shrink: 0;
}
.openhouse-card strong { font-weight: 700; }

/* Open House: riga "data e ora" accanto al badge nella scheda immobile */
.openhouse-detail {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-left: 0.5rem;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-accent);
}
.openhouse-detail svg {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
}

/* Tag / chip */
.tag {
  display: inline-block;
  background-color: var(--color-surface);
  color: var(--color-secondary);
  font-size: var(--text-small);
  font-weight: 500;
  padding: 0.5rem 1rem;
  border-radius: var(--radius-full);
}

/* Breadcrumb */
.breadcrumb-section {
  padding-top: var(--header-height);
  background-color: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
}

.breadcrumb {
  padding-block: 1rem;
  font-size: var(--text-small);
  color: var(--color-muted);
}

.breadcrumb a {
  color: var(--color-muted);
  transition: color var(--transition-fast);
}

.breadcrumb a:hover {
  color: var(--color-primary);
}

.breadcrumb .separator {
  margin-inline: 0.5rem;
}

.breadcrumb .current {
  color: var(--color-secondary);
  font-weight: 500;
}

/* Section intro (label + titolo + testo, centrato) */
.section-intro {
  text-align: center;
  max-width: var(--max-narrow);
  margin: 0 auto 4rem;
}

.section-intro-label {
  font-size: var(--text-small);
  font-weight: 600;
  color: var(--color-primary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.75rem;
}

.section-intro h2 {
  font-size: var(--text-h2);
  color: var(--color-secondary);
  margin-bottom: 1rem;
}

.section-intro p {
  font-size: var(--text-body-lg);
  color: var(--color-muted);
}

/* Eyebrow label (allineato a sinistra, dentro le sezioni) */
.eyebrow {
  font-size: var(--text-small);
  font-weight: 600;
  color: var(--color-primary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.75rem;
}

.eyebrow-accent {
  color: var(--color-accent);
}

/* Info box (CTA inline su sfondo chiaro) */
.info-box {
  background-color: var(--primary-softer);
  border: 1px solid var(--primary-soft);
  padding: 2rem;
  border-radius: var(--radius-card);
}

.info-box-title {
  font-family: var(--font-heading);
  font-weight: 600;
  line-height: var(--line-h2);
  font-size: var(--text-h3);
  color: var(--color-secondary);
  margin-bottom: 0.75rem;
}

.info-box p {
  color: var(--color-muted);
  margin-bottom: 1.5rem;
}

/* Coppia di azioni (bottoni affiancati) */
.btn-row {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

@media (min-width: 640px) {
  .btn-row { flex-direction: row; }
}

/* ============================================================
   10. FORMS
   ============================================================ */
.form-group {
  margin-bottom: 1.25rem;
}

.form-label {
  display: block;
  font-size: var(--text-small);
  font-weight: 500;
  color: var(--color-secondary);
  margin-bottom: 0.375rem;
}

.form-input,
.form-textarea,
.form-select {
  width: 100%;
  padding: 0.75rem 1rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-btn);
  font-size: var(--text-body);
  color: var(--color-text);
  background-color: #fff;
  transition: border-color var(--transition-fast),
              box-shadow var(--transition-fast);
}

.form-input::placeholder,
.form-textarea::placeholder {
  color: var(--color-muted);
  opacity: 0.6;
}

.form-input:focus,
.form-textarea:focus,
.form-select:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(32, 155, 215, 0.15);
}

/* Stato di errore applicato via JS */
.form-input.border-danger,
.form-textarea.border-danger,
.form-select.border-danger {
  border-color: var(--color-danger) !important;
}

.form-textarea {
  resize: vertical;
  min-height: 6rem;
}

.form-select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2366748A' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M19 9l-7 7-7-7'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 1rem;
  padding-right: 2.5rem;
}

.form-checkbox {
  width: 1rem;
  height: 1rem;
  margin-top: 0.25rem;
  flex-shrink: 0;
  accent-color: var(--color-primary);
}

.form-checkbox-row {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  cursor: pointer;
}

.form-checkbox-row span {
  font-size: var(--text-small);
  color: var(--color-muted);
}

.form-checkbox-row a {
  color: var(--color-primary);
  text-decoration: underline;
}

.form-checkbox-row a:hover {
  color: var(--color-primary-dark);
}

.form-checkbox-row .req {
  color: var(--color-danger);
}

/* Messaggio di errore inline (toggle .hidden via JS) */
.field-error {
  font-size: var(--text-small);
  color: var(--color-danger);
  margin-top: 0.25rem;
}

.form-row {
  display: grid;
  gap: 1.25rem;
}

@media (min-width: 640px) {
  .form-row { grid-template-columns: repeat(2, 1fr); }
}

/* ============================================================
   11. HERO (homepage)
   ============================================================ */
.hero {
  position: relative;
  padding-top: var(--header-height);
  background-color: var(--color-secondary);
  overflow: hidden;
}

.hero-bg {
  position: absolute;
  inset: 0;
  top: -15%;
  bottom: -15%;
}

.hero-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.20;
}

.hero-content {
  position: relative;
  padding-block: var(--section-lg);
}

.hero-grid {
  display: grid;
  gap: 3rem;
  align-items: center;
}

.hero-label {
  font-family: var(--font-body);
  font-size: var(--text-small);
  font-weight: 600;
  line-height: var(--line-body);
  color: var(--color-primary-light);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 1rem;
}

.hero-title {
  font-family: var(--font-heading);
  font-size: var(--text-hero);
  font-weight: 700;
  line-height: var(--line-hero);
  color: #fff;
  margin-bottom: 1.5rem;
}

.hero-text {
  font-size: var(--text-body-lg);
  color: var(--on-dark);
  margin-bottom: 2rem;
  max-width: 36rem;
}

.hero-note {
  font-size: var(--text-small);
  color: var(--on-dark-faint);
  margin-top: 1rem;
}

.hero-media img {
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  width: 100%;
  aspect-ratio: 1280 / 1097; /* riserva lo spazio prima del load → niente CLS (ratio = immagine default) */
  object-fit: cover;
}

@media (min-width: 1024px) {
  .hero-grid { grid-template-columns: 1fr 1fr; }
}

/* ============================================================
   12. PAGE HERO (pagine interne)
   ============================================================ */
.page-hero {
  position: relative;
  padding-top: var(--header-height);
  background-color: var(--color-secondary);
  overflow: hidden;
}

.page-hero-bg {
  position: absolute;
  inset: 0;
  top: -15%;
  bottom: -15%;
}

.page-hero-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.15;
}

.page-hero-content {
  position: relative;
  padding-block: var(--section);
}

.page-hero-inner {
  max-width: var(--max-narrow);
}

.page-hero-inner.is-centered {
  margin-inline: auto;
  text-align: center;
}

.page-hero-label {
  font-size: var(--text-small);
  font-weight: 600;
  color: var(--color-primary-light);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 1rem;
}

.page-hero-title {
  font-family: var(--font-heading);
  font-size: var(--text-hero);
  font-weight: 700;
  line-height: var(--line-hero);
  color: #fff;
  margin-bottom: 1.5rem;
}

.page-hero-text {
  font-size: var(--text-body-lg);
  color: var(--on-dark);
}

@media (min-width: 1024px) {
  .page-hero-content { padding-block: var(--section-lg); }
}

/* ============================================================
   13. CTA BANNER (sezione finale colorata)
   ============================================================ */
.cta-banner {
  position: relative;
  overflow: hidden;
  background-color: var(--color-primary);
}

.cta-banner-bg {
  position: absolute;
  inset: 0;
  top: -15%;
  bottom: -15%;
}

.cta-banner-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.20;
}

.cta-banner-content {
  position: relative;
  text-align: center;
  padding-block: var(--section);
}

.cta-banner-content h2 {
  font-size: var(--text-h2);
  color: #fff;
  margin-bottom: 1rem;
}

.cta-banner-content > p {
  font-size: var(--text-body-lg);
  color: var(--on-dark);
  max-width: var(--max-narrow);
  margin: 0 auto 2rem;
}

.cta-banner-note {
  font-size: var(--text-small);
  color: var(--on-dark-faint);
  margin-top: 1rem;
}

@media (min-width: 1024px) {
  .cta-banner-content { padding-block: var(--section-lg); }
}

/* ============================================================
   14. SECTION BUILDING BLOCKS
   ============================================================ */

/* Due colonne (testo + immagine) */
.two-col {
  display: grid;
  gap: 4rem;
  align-items: center;
}

.two-col img {
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  width: 100%;
  aspect-ratio: 3 / 2; /* riserva lo spazio prima del load → niente CLS (ratio ≈ immagini default 3:2) */
  object-fit: cover;
}

.two-col h2 {
  font-size: var(--text-h2);
  color: var(--color-secondary);
  margin-bottom: 1.5rem;
}

.two-col p {
  color: var(--color-muted);
  margin-bottom: 1.5rem;
}

.two-col p.is-lead {
  font-size: var(--text-body-lg);
}

@media (min-width: 1024px) {
  .two-col { grid-template-columns: 1fr 1fr; }
}

/* Nota discreta a piè di sezione */
.section-note {
  text-align: center;
  color: var(--color-muted);
  font-size: var(--text-small);
  margin-top: 2rem;
}

/* Riga di statistiche (3 numeri in linea) */
.stats-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--color-border);
}

.stat-number {
  font-family: var(--font-heading);
  font-size: var(--text-h2);
  font-weight: 700;
  color: var(--color-primary);
}

.stat-label {
  font-size: var(--text-small);
  color: var(--color-muted);
}

/* Lista di feature con icona check */
.feature-list {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.feature-list-item {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}

.feature-icon {
  width: 2.5rem;
  height: 2.5rem;
  background-color: var(--success-soft);
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 0.125rem;
}

.feature-icon svg {
  width: 1.25rem;
  height: 1.25rem;
  color: var(--color-success);
}

.feature-list-item h3,
.feature-list-item p:first-child {
  font-weight: 600;
  color: var(--color-secondary);
}

.feature-list-item .feature-text {
  font-size: var(--text-small);
  color: var(--color-muted);
}

/* Card prodotto/valore generica con icona */
.feature-card {
  background-color: #fff;
  padding: 2rem;
  border-radius: var(--radius-card);
  border-top: 4px solid transparent;
  box-shadow: var(--shadow-card);
  transition: box-shadow var(--transition-normal),
              transform var(--transition-normal),
              border-color var(--transition-normal);
}

.feature-card:hover {
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-4px);
  border-top-color: var(--color-primary);
}

.feature-card-icon {
  width: 3.5rem;
  height: 3.5rem;
  background-color: var(--primary-soft);
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.5rem;
  transition: background-color var(--transition-normal);
}

.feature-card:hover .feature-card-icon {
  background-color: var(--primary-strong);
}

.feature-card-icon svg {
  width: 1.75rem;
  height: 1.75rem;
  color: var(--color-primary);
  transition: transform var(--transition-normal);
}

.feature-card:hover .feature-card-icon svg {
  transform: scale(1.1);
}

.feature-card h3 {
  font-size: var(--text-h4);
  color: var(--color-secondary);
  margin-bottom: 0.75rem;
}

.feature-card p {
  color: var(--color-muted);
}

/* Griglie responsive di card */
.card-grid {
  display: grid;
  gap: 2rem;
}

@media (min-width: 768px) {
  .card-grid-2,
  .card-grid-3 { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
  .card-grid-3 { grid-template-columns: repeat(3, 1fr); }
}

.card-grid.is-contained {
  max-width: 56rem;
  margin-inline: auto;
}

/* Griglia di piccoli fatti/specifiche */
.spec-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
  margin-bottom: 2rem;
}

.spec {
  background-color: var(--color-surface);
  padding: 1.25rem;
  border-radius: var(--radius-card);
  text-align: center;
}

.spec-number {
  font-family: var(--font-heading);
  font-size: var(--text-h3);
  font-weight: 700;
  color: var(--color-primary);
}

.spec-label {
  font-size: var(--text-small);
  color: var(--color-muted);
}

/* Riga icona + testo (indirizzo, contatti inline) */
.icon-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.icon-row svg {
  width: 1.25rem;
  height: 1.25rem;
  color: var(--color-primary);
  flex-shrink: 0;
}

.icon-row a {
  color: var(--color-primary);
  font-weight: 500;
  transition: color var(--transition-fast);
}

.icon-row a:hover {
  color: var(--color-primary-dark);
}

.icon-row span,
.icon-row p {
  color: var(--color-muted);
}

.icon-row.is-spaced {
  margin-bottom: 1rem;
}

/* Sezione scura: testo e liste su fondo secondary */
.on-dark-text {
  font-size: var(--text-body-lg);
  color: var(--on-dark);
}

.on-dark-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.on-dark-list li {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  color: var(--on-dark);
}

.on-dark-list svg {
  width: 1.25rem;
  height: 1.25rem;
  color: var(--color-primary-light);
  flex-shrink: 0;
}

/* ============================================================
   15. PROPERTY CARD (card immobile)
   ============================================================ */
.property-card {
  background-color: #fff;
  border-radius: var(--radius-card);
  border-top: 4px solid transparent;
  box-shadow: var(--shadow-card);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: box-shadow var(--transition-normal),
              transform var(--transition-normal),
              border-color var(--transition-normal);
}

.property-card:hover {
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-4px);
  border-top-color: var(--color-primary);
}

.property-card-image {
  position: relative;
  overflow: hidden;
}

.property-card-image img {
  width: 100%;
  height: 14rem;
  object-fit: cover;
  transition: transform var(--transition-slow);
}

.property-card:hover .property-card-image img {
  transform: scale(1.05);
}

.property-card-badges {
  position: absolute;
  top: 1rem;
  left: 1rem;
  display: flex;
  gap: 0.5rem;
}

.property-card-body {
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.property-card-location {
  font-size: var(--text-small);
  color: var(--color-muted);
  margin-bottom: 0.25rem;
}

.property-card-title {
  font-family: var(--font-heading);
  font-size: var(--text-h4);
  font-weight: 600;
  color: var(--color-secondary);
  margin-bottom: 0.5rem;
}

/* Riga di icone specifiche (locali / mq / bagni) */
.property-specs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  font-size: var(--text-small);
  color: var(--color-muted);
  margin-bottom: 1rem;
}

.property-specs span {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

.property-specs svg {
  width: 1rem;
  height: 1rem;
}

.property-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 1rem;
  margin-top: auto;
  border-top: 1px solid var(--color-border);
}

/* Quando una riga evento (Open House / Venduto) precede il footer è lei a portare
   il margin-top:auto: qui azzero quello del footer, altrimenti i due auto si
   spartiscono lo spazio libero e si aprirebbe un gap tra riga evento e footer. */
.openhouse-card + .property-card-footer,
.venduto-tempo-card + .property-card-footer {
  margin-top: 0;
}

.property-price {
  font-family: var(--font-heading);
  font-size: var(--text-h3);
  font-weight: 700;
  color: var(--color-primary);
}

/* ============================================================
   16. PROPERTY DETAIL (pagina immobile singolo)
   ============================================================ */
.property-gallery {
  padding-top: var(--header-height);
}

.property-gallery-grid {
  display: grid;
  gap: 1rem;
  padding-block: 2rem;
}

.property-gallery-main img {
  width: 100%;
  height: 20rem;
  object-fit: cover;
  border-radius: var(--radius-card);
}

.property-gallery-thumbs {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}

.property-gallery-thumbs img {
  width: 100%;
  height: 10rem;
  object-fit: cover;
  border-radius: var(--radius-card);
}

@media (min-width: 1024px) {
  .property-gallery-grid { grid-template-columns: 2fr 1fr; }
  .property-gallery-main img { height: 100%; min-height: 24rem; }
  .property-gallery-thumbs { grid-template-columns: 1fr; }
}

.property-layout {
  display: grid;
  gap: 4rem;
}

@media (min-width: 1024px) {
  .property-layout { grid-template-columns: 2fr 1fr; }
}

.property-detail-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}

.property-detail-location {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  color: var(--color-muted);
}

.property-detail-location svg {
  width: 1rem;
  height: 1rem;
  color: var(--color-primary);
  flex-shrink: 0;
}

.property-detail-title {
  font-family: var(--font-heading);
  font-size: var(--text-h1);
  font-weight: 700;
  color: var(--color-secondary);
  margin-bottom: 1rem;
}

.property-detail-head {
  margin-bottom: 2rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid var(--color-border);
}

.property-detail-price-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.75rem;
}

.property-detail-price {
  font-family: var(--font-heading);
  font-size: var(--text-h2);
  font-weight: 700;
  color: var(--color-primary);
}

.property-detail-sqm {
  color: var(--color-muted);
}

/* Griglia feature numeriche dell'immobile */
.property-features {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  margin-bottom: 3rem;
}

.property-feature {
  background-color: var(--color-surface);
  padding: 1.25rem;
  border-radius: var(--radius-card);
  text-align: center;
}

.property-feature svg {
  width: 1.5rem;
  height: 1.5rem;
  color: var(--color-primary);
  margin: 0 auto 0.5rem;
}

.property-feature-number {
  font-family: var(--font-heading);
  font-size: var(--text-h4);
  font-weight: 700;
  color: var(--color-secondary);
}

.property-feature-label {
  font-size: var(--text-small);
  color: var(--color-muted);
}

@media (min-width: 640px) {
  .property-features { grid-template-columns: repeat(4, 1fr); }
}

/* Elenco dettagli (chiave/valore) */
.detail-list {
  display: grid;
  gap: 0;
}

.detail-row {
  display: flex;
  justify-content: space-between;
  padding-block: 0.75rem;
  border-bottom: 1px solid var(--color-border);
}

.detail-row .label {
  color: var(--color-muted);
}

.detail-row .value {
  font-weight: 500;
  color: var(--color-secondary);
}

@media (min-width: 640px) {
  .detail-list {
    grid-template-columns: repeat(2, 1fr);
    column-gap: 3rem;
  }
}

/* Mappa embedded */
.map-embed {
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  margin-top: 2rem;
}

.map-embed iframe {
  width: 100%;
  height: 400px;
  border: 0;
  display: block;
}

/* ============================================================
   17. SIDEBAR (immobile / articolo / agente)
   ============================================================ */
.sidebar {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.sidebar-card {
  background-color: var(--color-surface);
  padding: 1.5rem;
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
}

.sidebar-card-title {
  font-family: var(--font-heading);
  font-weight: 600;
  line-height: var(--line-h2);
  font-size: var(--text-h4);
  color: var(--color-secondary);
  margin-bottom: 1rem;
}

.sidebar-card-text {
  font-size: var(--text-small);
  color: var(--color-muted);
  margin-bottom: 1.5rem;
}

/* Segnali di fiducia (icona + testo) */
.trust-signal {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: var(--text-small);
  color: var(--color-muted);
  margin-bottom: 0.75rem;
}

.trust-signal svg {
  width: 1.25rem;
  height: 1.25rem;
  color: var(--color-success);
  flex-shrink: 0;
}

/* CTA in sidebar (sfondo colorato) */
.sidebar-cta {
  background-color: var(--color-primary);
  padding: 1.5rem;
  border-radius: var(--radius-card);
  text-align: center;
}

.sidebar-cta-title {
  font-family: var(--font-heading);
  font-weight: 600;
  line-height: var(--line-h2);
  font-size: var(--text-h4);
  color: #fff;
  margin-bottom: 0.75rem;
}

.sidebar-cta p {
  font-size: var(--text-small);
  color: var(--on-dark);
  margin-bottom: 1rem;
}

@media (min-width: 1024px) {
  .sidebar.is-sticky {
    position: sticky;
    top: 7rem;
  }
}

/* ============================================================
   18. FILTERS (pagina immobili)
   ============================================================ */
.filters-bar {
  background-color: #fff;
  border-bottom: 1px solid var(--color-border);
  position: sticky;
  top: var(--header-height);
  z-index: 40;
}

.filters-bar-inner {
  padding-block: 0.75rem;
}

.filters-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding-block: 0.5rem;
  font-size: var(--text-small);
  font-weight: 600;
  color: var(--color-secondary);
}

.filters-toggle svg {
  width: 1.25rem;
  height: 1.25rem;
  color: var(--color-primary);
}

.filters-toggle .chevron {
  color: var(--color-muted);
  transition: transform var(--transition-fast);
}

.filters-panel {
  display: none;
  flex-direction: column;
  gap: 0.75rem;
  padding-top: 0.75rem;
}

.filters-panel.is-open {
  display: flex;
}

.filters-label {
  display: none;
  font-size: var(--text-small);
  font-weight: 600;
  color: var(--color-secondary);
  margin-right: 0.5rem;
}

.filter-select {
  appearance: none;
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-btn);
  padding: 0.625rem 2.5rem 0.625rem 1rem;
  font-size: var(--text-small);
  color: var(--color-text);
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2366748A' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M19 9l-7 7-7-7'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 1rem;
}

@media (min-width: 1024px) {
  .filters-toggle { display: none; }
  .filters-panel {
    display: flex !important;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    padding-top: 0;
  }
  .filters-label { display: inline; }
}

/* Barra dei risultati */
.results-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 2rem;
}
/* Il form dell'ordinamento non genera un box: il <select> resta figlio flex della results-bar
   (allineamento identico al placeholder precedente). */
.sort-form { display: contents; }

.results-count {
  font-size: var(--text-small);
  color: var(--color-muted);
}

.results-count strong,
.results-count span {
  color: var(--color-secondary);
  font-weight: 600;
}

/* Property grid */
.property-grid {
  display: grid;
  gap: 2rem;
}

@media (min-width: 640px) {
  .property-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
  .property-grid { grid-template-columns: repeat(3, 1fr); }
}

/* Paginazione */
.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 3rem;
}

.pagination a,
.pagination span {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 2.5rem;
  height: 2.5rem;
  padding-inline: 0.5rem;
  border-radius: var(--radius-btn);
  font-size: var(--text-small);
  font-weight: 600;
  color: var(--color-text-secondary);
  background-color: var(--color-surface);
  transition: background-color var(--transition-fast),
              color var(--transition-fast);
}

.pagination a:hover {
  background-color: var(--color-primary);
  color: #fff;
}

.pagination .is-current {
  background-color: var(--color-primary);
  color: #fff;
}

/* ============================================================
   19. BLOG / ARTICOLI
   ============================================================ */
.blog-card {
  background-color: #fff;
  border-radius: var(--radius-card);
  border-top: 4px solid transparent;
  box-shadow: var(--shadow-card);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: 100%;
  transition: box-shadow var(--transition-normal),
              transform var(--transition-normal),
              border-color var(--transition-normal);
}

.blog-card:hover {
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-4px);
  border-top-color: var(--color-primary);
}

.blog-card-image {
  position: relative;
  overflow: hidden;
}

.blog-card-image img {
  width: 100%;
  height: 12rem;
  object-fit: cover;
  transition: transform var(--transition-slow);
}

.blog-card:hover .blog-card-image img {
  transform: scale(1.05);
}

.blog-card-badge {
  position: absolute;
  top: 1rem;
  left: 1rem;
}

.blog-card-body {
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.blog-card-date {
  font-size: var(--text-small);
  color: var(--color-muted);
  margin-bottom: 0.5rem;
}

.blog-card-title {
  font-family: var(--font-heading);
  font-size: var(--text-h4);
  font-weight: 600;
  color: var(--color-secondary);
  margin-bottom: 0.75rem;
  transition: color var(--transition-fast);
}

.blog-card:hover .blog-card-title {
  color: var(--color-primary);
}

.blog-card-text {
  color: var(--color-muted);
  flex: 1;
  margin-bottom: 1rem;
}

/* Callout (riquadro informativo centrato) */
.callout {
  background-color: #fff;
  padding: 2rem;
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  max-width: var(--max-narrow);
  margin: 4rem auto 0;
  text-align: center;
}

.callout h2 {
  font-size: var(--text-h3);
  color: var(--color-secondary);
  margin-bottom: 0.75rem;
}

.callout p {
  color: var(--color-muted);
  margin-bottom: 1.5rem;
}

/* Articolo singolo */
.article-layout {
  display: grid;
  gap: 4rem;
}

.article-hero {
  padding-top: 2rem;
}

.article-hero img {
  width: 100%;
  height: 16rem;
  object-fit: cover;
  border-radius: var(--radius-card);
}

.article-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.5rem;
  font-size: var(--text-small);
  color: var(--color-muted);
}

.article-body p {
  color: var(--color-muted);
  margin-bottom: 1rem;
}

.article-body h2 {
  font-size: var(--text-h2);
  color: var(--color-secondary);
  margin-bottom: 1rem;
}

.article-body h3 {
  font-size: var(--text-h3);
  color: var(--color-secondary);
  margin-top: 1.5rem;
  margin-bottom: 0.75rem;
}

.article-body ul {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.article-body ul li {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  color: var(--color-muted);
}

.article-body ul li svg {
  width: 1.25rem;
  height: 1.25rem;
  color: var(--color-primary);
  flex-shrink: 0;
  margin-top: 0.125rem;
}

.article-body strong {
  color: var(--color-secondary);
  font-weight: 600;
}

.article-body img {
  border-radius: var(--radius-card);
  margin-block: 1.5rem;
}

/* CTA inline nell'articolo */
.article-cta {
  background-color: var(--color-secondary);
  padding: 2rem;
  border-radius: var(--radius-card);
  margin-block: 3rem;
}

.article-cta-title {
  font-family: var(--font-heading);
  font-weight: 600;
  line-height: var(--line-h2);
  font-size: var(--text-h3);
  color: #fff;
  margin-bottom: 0.75rem;
}

.article-cta p {
  color: var(--on-dark);
  margin-bottom: 1.5rem;
}

/* Card documento (dentro articolo) */
.doc-grid {
  display: grid;
  gap: 1rem;
  margin-block: 1.5rem;
}

.doc-card {
  background-color: var(--color-surface);
  padding: 1.25rem;
  border-radius: var(--radius-card);
}

.doc-card-title {
  font-weight: 600;
  color: var(--color-secondary);
  margin-bottom: 0.25rem;
}

.doc-card-text {
  font-size: var(--text-small);
  color: var(--color-muted);
}

@media (min-width: 640px) {
  .doc-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Sidebar articolo */
.sidebar-section-title {
  font-size: var(--text-small);
  font-weight: 600;
  color: var(--color-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.75rem;
}

.author-card {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.author-name {
  font-weight: 600;
  color: var(--color-secondary);
}

.author-role {
  font-size: var(--text-small);
  color: var(--color-muted);
}

.related-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.related-item {
  display: block;
}

/* Separatore orizzontale */
.divider {
  border-top: 1px solid var(--color-border);
}

.related-item-title {
  font-weight: 500;
  color: var(--color-secondary);
  transition: color var(--transition-fast);
}

.related-item:hover .related-item-title {
  color: var(--color-primary);
}

.related-item-date {
  font-size: var(--text-small);
  color: var(--color-muted);
  margin-top: 0.25rem;
}

/* Avatar con iniziali */
.avatar {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: var(--text-small);
  flex-shrink: 0;
}

.avatar-primary   { background-color: var(--color-primary); color: #fff; }
.avatar-secondary { background-color: var(--color-secondary); color: #fff; }

/* Categorie blog */
.category-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: center;
}

.category-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.625rem 1.25rem;
  background-color: var(--color-surface);
  border-radius: var(--radius-full);
  font-size: var(--text-small);
  font-weight: 500;
  color: var(--color-text-secondary);
  transition: background-color var(--transition-fast),
              color var(--transition-fast);
}

.category-pill:hover,
.category-pill.is-active {
  background-color: var(--color-primary);
  color: #fff;
}

/* Newsletter box */
.newsletter {
  background-color: var(--color-secondary);
  padding: 3rem 2rem;
  border-radius: var(--radius-card);
  text-align: center;
}

.newsletter h2 {
  color: #fff;
  margin-bottom: 0.75rem;
}

.newsletter p {
  color: var(--on-dark);
  max-width: var(--max-narrow);
  margin: 0 auto 1.5rem;
}

.newsletter-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  max-width: var(--max-narrow);
  margin-inline: auto;
}

@media (min-width: 640px) {
  .newsletter-form { flex-direction: row; }
  .newsletter-form .form-input { flex: 1; }
}

@media (min-width: 1024px) {
  .article-layout { grid-template-columns: 2fr 1fr; }
}

/* ============================================================
   20. CARD GALLERIE / TEAM / ZONE
   ============================================================ */

/* Card team / agente (anteprima) */
.team-card {
  background-color: var(--color-surface);
  border-radius: var(--radius-card);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
  height: 100%;
  transition: box-shadow var(--transition-normal);
}

.team-card:hover {
  box-shadow: var(--shadow-card-hover);
}

.team-card img {
  width: 100%;
  height: 16rem;
  object-fit: cover;
  object-position: top;
}

.team-card-body {
  padding: 2rem;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.team-card-name {
  font-family: var(--font-heading);
  font-size: var(--text-h3);
  font-weight: 600;
  color: var(--color-secondary);
  margin-bottom: 0.25rem;
}

.team-card-role {
  color: var(--color-primary);
  font-weight: 500;
  font-size: var(--text-small);
  margin-bottom: 1rem;
}

.team-card-text {
  color: var(--color-muted);
  margin-bottom: 1.5rem;
  flex: 1;
}

/* Galleria immagini */
.gallery-grid {
  display: grid;
  gap: 1rem;
}

.gallery-item {
  position: relative;
  border-radius: var(--radius-card);
  overflow: hidden;
  aspect-ratio: 4 / 3;
}

.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-slow);
}

.gallery-item:hover img {
  transform: scale(1.05);
}

@media (min-width: 640px) {
  .gallery-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
  .gallery-grid { grid-template-columns: repeat(3, 1fr); }
  .gallery-item-wide { grid-column: span 2; }
}

/* Card zona/quartiere (immagine + overlay) */
.zone-card {
  position: relative;
  display: block;
  border-radius: var(--radius-card);
  overflow: hidden;
  aspect-ratio: 4 / 3;
}

.zone-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-slow);
}

.zone-card:hover img {
  transform: scale(1.05);
}

.zone-card-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, var(--overlay-dark), rgba(33, 57, 117, 0.2), transparent);
}

.zone-card-content {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 1.25rem;
}

.zone-card-title {
  font-family: var(--font-heading);
  font-size: var(--text-h4);
  font-weight: 700;
  color: #fff;
}

.zone-card-count {
  font-size: var(--text-small);
  color: var(--on-dark-muted);
}

/* ============================================================
   21. STEPS / FAQ / TESTIMONIAL / COUNTER
   ============================================================ */

/* Steps (processo numerato) */
.steps-grid {
  display: grid;
  gap: 2rem;
}

.step {
  position: relative;
  text-align: center;
}

.step-number {
  width: 4rem;
  height: 4rem;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading);
  font-size: var(--text-h3);
  font-weight: 700;
  background-color: var(--color-primary);
  color: #fff;
  margin: 0 auto 1.5rem;
}

.step-number-accent {
  background-color: var(--color-accent);
  color: #fff;   /* numero step 4: bianco su oro (era navy, poco leggibile) */
}

.step-title {
  font-family: var(--font-heading);
  font-size: var(--text-h4);
  font-weight: 600;
  color: var(--color-secondary);
  margin-bottom: 0.75rem;
}

.step-text {
  color: var(--color-muted);
}

@media (min-width: 768px) {
  .steps-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
  .steps-grid { grid-template-columns: repeat(4, 1fr); }
}

/* FAQ accordion */
.faq-item {
  background-color: #fff;
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  margin-bottom: 1rem;
}

.faq-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.5rem;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--color-secondary);
  transition: color var(--transition-fast);
}

.faq-summary::-webkit-details-marker {
  display: none;
}

.faq-summary:hover {
  color: var(--color-primary);
}

.faq-summary svg {
  width: 1.25rem;
  height: 1.25rem;
  color: var(--color-muted);
  flex-shrink: 0;
  margin-left: 1rem;
  transition: transform var(--transition-fast);
}

.faq-item[open] .faq-summary svg {
  transform: rotate(180deg);
}

.faq-content {
  padding: 0 1.5rem 1.5rem;
}

.faq-content p {
  color: var(--color-muted);
}

/* Testimonial */
.testimonial-grid {
  display: grid;
  gap: 2rem;
}

.testimonial-card {
  position: relative;
  background-color: #fff;
  padding: 2rem;
  border-radius: var(--radius-card);
  border-left: 4px solid var(--color-primary);
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
  height: 100%;
}

.testimonial-text {
  color: var(--color-text);
  flex: 1;
  margin-bottom: 1.5rem;
}

.testimonial-footer {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding-top: 1.5rem;
  margin-top: auto;
  border-top: 1px solid var(--color-border);
}

.testimonial-author {
  font-weight: 600;
  color: var(--color-secondary);
}

.testimonial-role {
  font-size: var(--text-small);
  color: var(--color-muted);
}

.star-rating {
  display: flex;
  gap: 0.125rem;
}

.star-rating svg {
  width: 1.25rem;
  height: 1.25rem;
  fill: var(--color-accent);
  color: var(--color-accent);
}

@media (min-width: 640px) {
  .testimonial-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Counter / statistiche numeriche */
.counter-grid {
  display: grid;
  gap: 2rem;
  text-align: center;
}

.counter-number {
  font-family: var(--font-heading);
  font-size: 2.25rem;
  font-weight: 700;
  color: var(--color-secondary);
  margin-bottom: 0.5rem;
}

.counter-label {
  font-size: var(--text-small);
  font-weight: 500;
  color: var(--color-primary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

@media (min-width: 640px) {
  .counter-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
  .counter-grid { grid-template-columns: repeat(4, 1fr); }
  .counter-number { font-size: 3rem; }
}

/* ============================================================
   22. AGENTE (pagina profilo)
   ============================================================ */
.agent-layout {
  display: grid;
  gap: 4rem;
}

.agent-sidebar-card {
  background-color: var(--color-surface);
  border-radius: var(--radius-card);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}

.agent-sidebar-card img {
  width: 100%;
  height: 18rem;
  object-fit: cover;
  object-position: top;
}

.agent-sidebar-info {
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.agent-sidebar-cta {
  padding-top: 1rem;
  border-top: 1px solid var(--color-border);
}

.agent-name {
  font-family: var(--font-heading);
  font-size: var(--text-hero);
  font-weight: 700;
  color: var(--color-secondary);
  margin-bottom: 0.5rem;
}

.agent-role {
  font-size: var(--text-h4);
  font-weight: 500;
  color: var(--color-primary);
  margin-bottom: 2rem;
}

.agent-bio {
  margin-bottom: 3rem;
}

.agent-bio h2 {
  font-size: var(--text-h2);
  color: var(--color-secondary);
  margin-bottom: 1rem;
}

.agent-bio p {
  color: var(--color-muted);
  margin-bottom: 1rem;
}

.agent-bio p.is-lead {
  font-size: var(--text-body-lg);
}

.agent-block {
  margin-bottom: 3rem;
}

.agent-block h2 {
  font-size: var(--text-h2);
  color: var(--color-secondary);
  margin-bottom: 1.5rem;
}

.competence-grid {
  display: grid;
  gap: 1rem;
}

.competence-item {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  background-color: var(--color-surface);
  padding: 1.25rem;
  border-radius: var(--radius-card);
}

.competence-item svg {
  width: 1.25rem;
  height: 1.25rem;
  color: var(--color-success);
  flex-shrink: 0;
  margin-top: 0.125rem;
}

.competence-item span {
  color: var(--color-muted);
}

.zone-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

@media (min-width: 640px) {
  .competence-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
  .agent-layout { grid-template-columns: 1fr 2fr; }
}

/* ============================================================
   23. CONTATTI / VALUTAZIONE
   ============================================================ */
.contact-grid {
  display: grid;
  gap: 4rem;
}

.contact-info-list {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.contact-info-item {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}

.contact-info-icon {
  width: 3rem;
  height: 3rem;
  border-radius: var(--radius-btn);
  background-color: var(--primary-soft);
  color: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.contact-info-icon svg {
  width: 1.75rem;
  height: 1.75rem;
}

.contact-info-item h3 {
  font-size: var(--text-h4);
  color: var(--color-secondary);
  margin-bottom: 0.25rem;
}

.contact-info-item p {
  color: var(--color-muted);
}

.contact-info-item a {
  color: var(--color-primary);
  font-weight: 500;
  transition: color var(--transition-fast);
}

.contact-info-item a:hover {
  color: var(--color-primary-dark);
}

.contact-map {
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  min-height: 400px;
}

.contact-map iframe {
  width: 100%;
  height: 100%;
  min-height: 400px;
  border: 0;
  display: block;
}

.form-card {
  background-color: #fff;
  padding: 2rem;
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.form-card.is-surface {
  background-color: var(--color-surface);
  box-shadow: none;
}

.form-card h2,
.form-card h3 {
  color: var(--color-secondary);
  margin-bottom: 0.5rem;
}

.form-card-intro {
  color: var(--color-muted);
  margin-bottom: 1.5rem;
}

.valuation-grid {
  display: grid;
  gap: 4rem;
  align-items: start;
}

@media (min-width: 1024px) {
  .contact-grid { grid-template-columns: 1fr 1fr; }
  .valuation-grid { grid-template-columns: 1fr 1fr; }
}

/* ============================================================
   24. PROSE (testo lungo generico)
   ============================================================ */
.prose {
  color: var(--color-text);
}

.prose p {
  margin-bottom: 1rem;
}

.prose h2 {
  font-size: var(--text-h3);
  margin-top: 2rem;
  margin-bottom: 1rem;
}

.prose h3 {
  font-size: var(--text-h4);
  margin-top: 1.5rem;
  margin-bottom: 0.75rem;
}

.prose ul {
  list-style: disc;
  padding-left: 1.5rem;
  margin-bottom: 1rem;
}

.prose ol {
  list-style: decimal;
  padding-left: 1.5rem;
  margin-bottom: 1rem;
}

.prose li {
  margin-bottom: 0.5rem;
}

.prose a {
  color: var(--color-primary);
  text-decoration: underline;
}

.prose strong {
  font-weight: 600;
}

/* ============================================================
   25. ELEMENTI AGGIUNTIVI
   ============================================================ */

/* Articolo: layout a sezioni e testi introduttivi */
.article-body {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.article-title {
  font-family: var(--font-heading);
  font-size: var(--text-hero);
  font-weight: 700;
  color: var(--color-secondary);
  margin-bottom: 1.5rem;
}

.article-lead {
  font-size: var(--text-body-lg);
  color: var(--color-muted);
  margin-bottom: 3rem;
}

.article-body p:last-child {
  margin-bottom: 0;
}

/* Riquadro nota evidenziato (dentro testo lungo) */
.note-box {
  background-color: var(--primary-softer);
  border-left: 4px solid var(--color-primary);
  padding: 1.5rem;
  border-radius: 0 var(--radius-card) var(--radius-card) 0;
}

.note-box p {
  font-weight: 500;
  color: var(--color-secondary);
  margin-bottom: 0;
}

.note-box a {
  color: var(--color-primary);
  font-weight: 600;
}

.note-box a:hover {
  color: var(--color-primary-dark);
}

/* Titolo di sezione allineato a sinistra */
.section-heading {
  font-size: var(--text-h2);
  color: var(--color-secondary);
  margin-bottom: 2rem;
}

/* Avatar con icona */
.avatar svg {
  width: 1.5rem;
  height: 1.5rem;
}

/* Icona quadrata di servizio */
.service-icon {
  width: 3.5rem;
  height: 3.5rem;
  background-color: var(--primary-soft);
  border-radius: var(--radius-btn);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.5rem;
}

.service-icon svg {
  width: 1.75rem;
  height: 1.75rem;
  color: var(--color-primary);
}

/* Lista di voci con spunta */
.check-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-bottom: 2rem;
}

.check-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}

.check-list svg {
  width: 1.25rem;
  height: 1.25rem;
  color: var(--color-success);
  flex-shrink: 0;
  margin-top: 0.125rem;
}

.check-list span {
  color: var(--color-muted);
}

/* two-col: ordine invertito su mobile (testo prima dell'immagine) */
.two-col.reverse-mobile > *:first-child { order: 2; }
.two-col.reverse-mobile > *:last-child { order: 1; }

@media (min-width: 1024px) {
  .two-col.reverse-mobile > *:first-child,
  .two-col.reverse-mobile > *:last-child { order: 0; }
}

/* Pannello su sfondo chiaro */
.panel {
  background-color: var(--color-surface);
  padding: 2rem;
  border-radius: var(--radius-card);
}

.panel h3 {
  font-size: var(--text-h3);
  color: var(--color-secondary);
  margin-bottom: 1rem;
}

/* Lista di righe numerate */
.numbered-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.numbered-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem;
  background-color: #fff;
  border-radius: var(--radius-btn);
}

.numbered-badge {
  width: 2.5rem;
  height: 2.5rem;
  background-color: var(--primary-soft);
  color: var(--color-primary);
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  flex-shrink: 0;
}

.numbered-row p {
  color: var(--color-muted);
}

/* Coppia di bottoni centrata */
.btn-row.is-centered {
  justify-content: center;
}

/* Bottone secondario */
.btn-secondary {
  background-color: var(--color-secondary);
  color: #fff;
}

.btn-secondary:hover {
  background-color: var(--color-secondary-dark);
}

/* Container ristretto */
.container.is-narrow {
  max-width: var(--max-narrow);
}

/* Valore evidenziato (es. orari) */
.value-strong {
  font-weight: 500;
  color: var(--color-text);
}

/* Card informativa su sfondo bianco */
.info-card {
  background-color: #fff;
  padding: 1.5rem;
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  margin-bottom: 2rem;
}

.info-card h3 {
  font-size: var(--text-h4);
  color: var(--color-secondary);
  margin-bottom: 1rem;
}

/* Nota sotto a un form */
.form-note {
  font-size: var(--text-small);
  color: var(--color-muted);
  text-align: center;
}

/* Gruppo di consensi (checkbox) */
.form-consent {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

/* Paragrafo introduttivo */
.lead {
  font-size: var(--text-body-lg);
  color: var(--color-muted);
  margin-bottom: 1.5rem;
}

/* Toggle filtri: gruppo icona + testo */
.filters-toggle > span {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

@media (min-width: 1024px) {
  .filters-bar-inner { padding-block: 1.25rem; }
}

/* Badge singolo sulla card immobile */
.property-card-badge {
  position: absolute;
  top: 1rem;
  left: 1rem;
}

/* Testo descrittivo nella card immobile */
.property-card-text {
  font-size: var(--text-small);
  color: var(--color-muted);
  margin-bottom: 1rem;
}

/* Link dentro una nota di sezione */
.section-note a {
  color: var(--color-primary);
  font-weight: 600;
}

.section-note a:hover {
  color: var(--color-primary-dark);
}

/* ——— Hero Open House ——— */
.hero-open-house {
  position: relative;
  padding-top: var(--header-height);
  background-color: var(--color-secondary);
  overflow: hidden;
}

.hero-open-house-bg {
  position: absolute;
  inset: 0;
}

.hero-open-house-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.25;
}

.hero-open-house-content {
  position: relative;
  padding-block: 6rem;
}

.hero-open-house-inner {
  max-width: 48rem;
}

.hero-open-house-title {
  font-family: var(--font-heading);
  font-size: var(--text-h1);
  font-weight: 700;
  line-height: 1.25;
  color: #fff;
  margin-bottom: 1.5rem;
}

.hero-open-house-text {
  font-size: var(--text-body-lg);
  color: var(--on-dark);
  max-width: var(--max-narrow);
  margin-bottom: 2rem;
}

.hero-open-house-note {
  font-size: var(--text-small);
  color: var(--on-dark-faint);
  margin-top: 1rem;
}

@media (min-width: 1024px) {
  .hero-open-house-content { padding-block: 8rem; }
}

/* Bottone accent */
.btn-accent {
  background-color: var(--color-accent);
  color: #fff;   /* testo bianco su oro (era navy, poco leggibile) */
}

.btn-accent:hover {
  background-color: var(--color-accent-light);
}

/* Immagine con badge flottante */
.media-float {
  position: relative;
}

.float-badge {
  display: none;
  position: absolute;
  bottom: -1.5rem;
  left: -1.5rem;
  background-color: var(--color-primary);
  color: #fff;
  /* padding verticale otticamente bilanciato: meno sotto, perché il "3x" grande in
     alto e la scritta piccola in basso fanno sembrare lo spazio inferiore maggiore */
  padding: 1.5rem 1.5rem 1.15rem;
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card-hover);
}

.float-badge p:first-child {
  font-family: var(--font-heading);
  font-size: 2.5rem;   /* "3x" ingrandito (era 1.5rem) per bilanciare il riquadro sotto */
  line-height: 1.1;    /* contenuto nel box senza sbordare, gap stretto verso la scritta */
  font-weight: 700;
  color: #fff;   /* "3x" sempre bianco, leggibile sia su blu (primary) che su oro (accent) */
}

.float-badge p:last-child {
  font-size: var(--text-small);
  color: var(--on-dark);
  line-height: 1.2;
  margin-top: -0.35rem;   /* avvicina la scritta al "3x" (erano troppo distanti) */
}

@media (min-width: 1024px) {
  .float-badge { display: block; }
}

/* Connettore tratteggiato fra gli step */
.step-connector {
  display: none;
}

@media (min-width: 1024px) {
  .step-connector {
    display: block;
    position: absolute;
    top: 2rem;
    left: 60%;
    width: 80%;
    border-top: 2px dashed var(--color-border);
  }
}

/* Testo in grassetto dentro la check-list */
.check-list strong {
  color: var(--color-secondary);
  font-weight: 600;
}

/* Contenitore FAQ */
.faq-list {
  max-width: 48rem;
  margin-inline: auto;
}

/* Intestazione della scheda immobile (titolo + prezzo) */
.property-block {
  margin-bottom: 3rem;
}

.property-block h2 {
  font-size: var(--text-h2);
  color: var(--color-secondary);
  margin-bottom: 1.5rem;
}

.property-text {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  color: var(--color-muted);
}

/* Form impilato (campi in colonna) */
.form-stack {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* ——— Homepage ——— */

/* Immagine hero affiancata (nascosta su mobile) */
.hero-media {
  display: none;
}

@media (min-width: 1024px) {
  .hero-media { display: block; }
}

/* Sezione contatori numerici */
.counter-section {
  padding-block: 4rem;
  border-bottom: 1px solid var(--color-border);
}

@media (min-width: 1024px) {
  .counter-section { padding-block: 5rem; }
}

.counter-unit {
  font-size: 1.5rem;
  color: var(--color-muted);
}

/* Badge in alto a destra sulla card immobile */
.property-card-badge-right {
  position: absolute;
  top: 1rem;
  right: 1rem;
}

/* Footer di sezione (link / nota centrati) */
.section-footer {
  text-align: center;
  margin-top: 3rem;
}

/* Punti di forza affiancati */
.value-points {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  margin-bottom: 2rem;
}

@media (min-width: 640px) {
  .value-points { flex-direction: row; }
}

/* Riga valutazione (stelle + punteggio) */
.rating-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 1rem;
  font-size: var(--text-small);
  color: var(--color-muted);
}

.rating-row strong {
  font-size: var(--text-body);
  font-weight: 600;
  color: var(--color-secondary);
}

/* Virgolette decorative del testimonial */
.quote-mark {
  position: absolute;
  top: -0.75rem;
  left: 1.5rem;
  font-family: var(--font-heading);
  font-size: 3.75rem;
  line-height: 1;
  color: rgba(32, 155, 215, 0.15);
  user-select: none;
}

/* Badge flottante variante accent (in basso a destra) */
.float-badge.is-accent {
  left: auto;
  right: -1.5rem;
  background-color: var(--color-accent);
  color: var(--color-secondary);
}

.float-badge.is-accent p:last-child {
  color: #fff;   /* testo sotto al "3x": bianco sulla badge oro (era navy, poco leggibile) */
}

/* Nota discreta sotto a un blocco */
.note-after {
  font-size: var(--text-small);
  color: var(--color-muted);
  margin-top: 0.75rem;
}

/* Griglia delle zone/quartieri */
.zone-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}

@media (min-width: 1024px) {
  .zone-grid { grid-template-columns: repeat(4, 1fr); }
}

/* Sfondo immagine di una sezione scura */
.section-dark-bg {
  position: absolute;
  inset: 0;
  top: -15%;
  bottom: -15%;
}

.section-dark-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.10;
}

.section-dark .container {
  position: relative;
}

.section-dark .two-col h2 {
  color: #fff;
}

.section-dark .two-col p {
  color: var(--on-dark);
}

/* Eyebrow chiaro per fondi scuri */
.eyebrow-light {
  color: var(--color-primary-light);
}

/* Lista su fondo scuro: spaziatura inferiore */
.on-dark-list {
  margin-bottom: 2rem;
}

/* Icona feature variante primary */
.feature-icon.is-primary {
  background-color: var(--primary-soft);
}

.feature-icon.is-primary svg {
  color: var(--color-primary);
}

/* Bottone WhatsApp flottante */
.whatsapp-float {
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  z-index: 900;
  width: 3.5rem;
  height: 3.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background-color: #25d366;
  color: #fff;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.whatsapp-float:hover {
  transform: scale(1.06);
  box-shadow: 0 8px 26px rgba(0, 0, 0, 0.24);
}

/* Pulsanti condivisione social */
.share-buttons {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.share-buttons .share-label {
  font-size: var(--text-small);
  color: var(--color-muted);
  margin-right: 0.25rem;
}

.share-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background-color: var(--color-surface);
  color: var(--color-secondary);
  transition: background-color 0.18s ease, color 0.18s ease, transform 0.18s ease;
}

.share-btn:hover { transform: translateY(-2px); color: #fff; }
.share-btn.share-fb:hover   { background-color: #1877f2; }
.share-btn.share-wa:hover   { background-color: #25d366; }
.share-btn.share-li:hover   { background-color: #0a66c2; }
.share-btn.share-mail:hover { background-color: var(--color-primary); }

/* ============================================================
   Calcolatore costi acquisto casa
   ============================================================ */

/* Teaser in sidebar */
.calc-teaser {}

/* Dialog modale */
dialog.calc-modal {
  padding: 0;
  border: none;
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card-hover);
  width: min(1000px, 95vw);
  max-height: 92vh;
  overflow: hidden;
  margin: auto;
  background: var(--color-bg);
}

/* display:flex SOLO da aperto: altrimenti sovrascrive il display:none nativo del
   <dialog> chiuso → il box resta visibile nel flusso e finisce sotto l'header. */
dialog.calc-modal[open] {
  display: flex;
  flex-direction: column;
}

dialog.calc-modal::backdrop {
  background: var(--overlay-dark);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.calc-modal-inner {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;   /* riempie il <dialog> via flex, NON height:100% */
  min-height: 0;    /* Safari: height:100% di un dialog ad altezza indefinita collassa a 0 → box invisibile */
}

.calc-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid var(--color-border);
  flex-shrink: 0;
}

.calc-modal-title {
  font-family: var(--font-heading);
  font-weight: 600;
  line-height: var(--line-h2);
  font-size: var(--text-h4);
  color: var(--color-secondary);
  margin: 0;
}

.calc-close-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.25rem;
  color: var(--color-muted);
  display: flex;
  align-items: center;
  border-radius: var(--radius-btn);
  transition: color var(--transition-fast), background var(--transition-fast);
}
.calc-close-btn:hover {
  color: var(--color-text);
  background: var(--color-surface);
}
.calc-close-btn svg {
  width: 1.25rem;
  height: 1.25rem;
}

.calc-modal-body {
  display: grid;
  grid-template-columns: 1.25fr 0.75fr;
  gap: 0;
  overflow: hidden;
  flex: 1;
  min-height: 0;
}

.calc-modal-body > #calc-form {
  padding: 1.25rem 1.5rem;
  overflow-y: auto;
  border-right: 1px solid var(--color-border);
  gap: 0.875rem;
}

.calc-modal-body > .calc-results {
  padding: 1.25rem 1.5rem;
  overflow-y: auto;
  background: var(--color-surface);
}

.calc-section-title {
  font-family: var(--font-heading);
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-muted);
  margin-bottom: 0.625rem;
  margin-top: 0.875rem;
}
.calc-section-title:first-child {
  margin-top: 0;
}

.calc-row-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
  align-items: end;
}
/* Le label possono andare su 2 righe: ogni cella è una colonna flex e l'input si
   ancora in fondo, così le due caselle della riga restano allineate anche quando
   un'etichetta occupa 2 righe e l'altra 1. */
.calc-row-2 > div {
  display: flex;
  flex-direction: column;
}
.calc-row-2 > div .form-input {
  margin-top: auto;
}

.calc-toggle-row {
  margin: 0.25rem 0;
}
.calc-toggle-label {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  cursor: pointer;
  font-size: var(--text-small);
  color: var(--color-text);
  font-family: var(--font-body);
}
.calc-toggle-switch {
  position: relative;
  display: inline-block;
  width: 2.25rem;
  height: 1.25rem;
  flex-shrink: 0;
}
.calc-toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}
.calc-toggle-slider {
  position: absolute;
  inset: 0;
  background: var(--color-border);
  border-radius: var(--radius-full);
  transition: background var(--transition-fast);
  cursor: pointer;
}
.calc-toggle-slider::before {
  content: '';
  position: absolute;
  width: 0.9rem;
  height: 0.9rem;
  left: 0.175rem;
  top: 0.175rem;
  background: white;
  border-radius: 50%;
  transition: transform var(--transition-fast);
}
.calc-toggle-switch input:checked + .calc-toggle-slider {
  background: var(--color-primary);
}
.calc-toggle-switch input:checked + .calc-toggle-slider::before {
  transform: translateX(1rem);
}

.calc-note {
  font-size: var(--text-xs);
  color: var(--color-muted);
  margin: -0.25rem 0 0.25rem;
  line-height: 1.4;
}

.calc-mutuo-section {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
}

/* Risultati */
.calc-result-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.5rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--color-border);
  font-size: var(--text-small);
  color: var(--color-text);
}
.calc-result-row:last-child {
  border-bottom: none;
}
.calc-result-value {
  font-weight: 600;
  color: var(--color-secondary);
  white-space: nowrap;
}

.calc-total-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.75rem;
  padding: 0.875rem 1rem;
  background: var(--color-secondary);
  color: white;
  border-radius: var(--radius-btn);
  font-size: var(--text-small);
  font-weight: 600;
}
.calc-total-row strong {
  font-size: var(--text-h4);
  font-family: var(--font-heading);
}

.calc-mutuo-results {
  margin-top: 1rem;
}

.calc-disclaimer {
  font-size: var(--text-xs);
  color: var(--color-muted);
  margin-top: 1.25rem;
  line-height: 1.5;
  font-style: italic;
}

/* Spiegazione dinamica del calcolo dell'imposta di registro (prima/seconda casa) */
.calc-spiegazione {
  margin-top: 0.875rem;
  padding: 0.75rem 0.875rem;
  background: var(--primary-soft);
  border-radius: var(--radius-btn);
  font-size: var(--text-xs);
  line-height: 1.6;
  color: var(--color-text-secondary);
}
.calc-spiegazione strong { color: var(--color-secondary); }
.calc-spiegazione-hint { color: var(--color-muted); }

.calc-modal-footer {
  display: flex;
  gap: 0.75rem;
  padding: 1rem 1.5rem;
  border-top: 1px solid var(--color-border);
  flex-shrink: 0;
  justify-content: flex-end;
}

/* Modalità inline (pagina standalone /calcola-spese): il calcolatore vive nel flusso
   della pagina come una card, non in modale. Riusa la griglia .calc-modal-body. */
.calc-inline {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  overflow: hidden;
  background: var(--color-bg);
  box-shadow: var(--shadow-card);
  margin-top: 2.5rem;
}
.calc-inline .calc-modal-body {
  overflow: visible;
}
.calc-inline .calc-modal-body > #calc-form,
.calc-inline .calc-modal-body > .calc-results {
  overflow: visible;
}

/* Responsive: su mobile la modale va full-screen, form e risultati in colonna */
@media (max-width: 640px) {
  dialog.calc-modal {
    width: 100vw;
    max-width: 100vw;
    height: 100dvh;
    max-height: 100dvh;
    border-radius: 0;
    margin: 0;
    position: fixed;
    inset: 0;
  }
  /* libero l'inner dal cap 92vh così riempie tutta l'altezza dello schermo */
  .calc-modal-inner {
    max-height: 100dvh;
  }
  /* su mobile: una sola colonna e un unico scroll (form + risultati impilati) */
  .calc-modal-body {
    grid-template-columns: 1fr;
    overflow-y: auto;
  }
  .calc-modal-body > #calc-form {
    border-right: none;
    border-bottom: 1px solid var(--color-border);
    overflow: visible;
  }
  .calc-modal-body > .calc-results {
    overflow: visible;
  }
  .calc-row-2 {
    grid-template-columns: 1fr;
  }
}

/* ──────────────────────────────────────────────────────────────
   Pagine errore (404 / 405 / 500 / 503)
   Le classi .error-page e .section-padding mancavano: le pagine
   risultavano senza impaginazione (solo testo + bottone). Layout
   centrato e brandizzato, coerente coi token del tema.
   ────────────────────────────────────────────────────────────── */
.section-padding {
  padding-block: var(--section);
}

.error-page {
  min-height: 60vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.error-page .error-code {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: clamp(5rem, 18vw, 9rem);
  line-height: 1;
  letter-spacing: -0.03em;
  background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 0.75rem;
}

.error-page h1 {
  font-family: var(--font-heading);
  font-size: var(--text-h1);
  color: var(--color-secondary);
  margin-bottom: 1rem;
}

.error-page p {
  color: var(--color-text-secondary);
  font-size: var(--text-body-lg);
  max-width: 34rem;
  margin-inline: auto;
  margin-bottom: 2rem;
}

.error-page .btn-row {
  margin-top: 0.5rem;
}