/* ============================================================
   N&V Immobiliare — variante CHIARA (fondo crema)
   Si carica dopo style.css e motion.css e sovrascrive la palette.
   L'hero resta fotografico con testo chiaro; il resto è carta/crema.
   ============================================================ */
:root {
  --notte: #EBE4D3;          /* crema di fondo = stesso colore della sezione Contatti (cliente 25/09) */
  --notte-2: #EBE4D3;        /* crema più scura (contatti) */
  --carta: #EBE4D3;          /* galleria sullo stesso crema della pagina */
  --carta-bordo: #DCD3BF;
  --avorio: #1B232B;         /* testo principale: inchiostro */
  --velo: rgba(27, 35, 43, 0.72);
  --ottone: #A07E49;
  --ottone-chiaro: #8A6A3D;  /* accenti: ottone scuro, leggibile su crema */
  --filetto: rgba(138, 106, 61, 0.22);
  --filetto-forte: rgba(138, 106, 61, 0.5);
  --inchiostro: #1B232B;
  --grigio: #6B6659;
}

body { font-weight: 400; }
.grana { opacity: 0.045; mix-blend-mode: multiply; }
::selection { background: var(--ottone); color: #fff; }

/* ---------- topbar: chiara sull'hero, crema quando compatta ---------- */
.topbar { color: #F4EFE4; }
.topbar nav a, .brand-name { color: rgba(244, 239, 228, 0.7); }
.topbar nav a:hover { color: #F4EFE4; }
.topbar nav a:not(.nav-cta)::after { background: #D8BC85; }
.nav-cta { border-color: rgba(216, 188, 133, 0.55); color: #D8BC85 !important; }
.nav-cta:hover { background: #D8BC85; border-color: #D8BC85; color: #10181E !important; }

.topbar.compatta {
  background: rgba(235, 228, 211, 0.9);
  color: var(--inchiostro);
  border-bottom-color: var(--filetto);
}
.topbar.compatta nav a, .topbar.compatta .brand-name { color: var(--velo); }
.topbar.compatta nav a:hover { color: var(--inchiostro); }
.topbar.compatta nav a:not(.nav-cta)::after { background: var(--ottone-chiaro); }
.topbar.compatta .brand-mark em { color: var(--ottone-chiaro); }
.topbar.compatta .nav-cta { border-color: var(--filetto-forte); color: var(--ottone-chiaro) !important; }
.topbar.compatta .nav-cta:hover { background: var(--ottone); border-color: var(--ottone); color: #fff !important; }
.brand-mark em { color: #D8BC85; }
.progresso { background: linear-gradient(90deg, var(--ottone), #D8BC85); }

/* ---------- hero: resta scuro sulla foto ---------- */
.hero { color: #F4EFE4; }
.hero .eyebrow { color: #D8BC85; }
.hero .eyebrow::before { background: rgba(216, 188, 133, 0.6); }
.hero h1 em {
  background: linear-gradient(100deg, #D8BC85 0%, #F3E4C0 30%, #D8BC85 45%, #B08D57 100%);
  background-size: 250% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero-sub { color: rgba(244, 239, 228, 0.85); }
.btn-solid { background: #B08D57; border-color: #B08D57; color: #10181E; }
.btn-solid::before { background: #D8BC85; }
.btn-ghost { border-color: rgba(244, 239, 228, 0.45); color: #F4EFE4; }
.btn-ghost::before { background: #D8BC85; }
.btn-ghost:hover { color: #10181E; border-color: #D8BC85; }
.hero-foot { border-top-color: rgba(244, 239, 228, 0.25); color: rgba(244, 239, 228, 0.7); }
.nastro span::after { background: #D8BC85; }
.hero-cue::before { background: linear-gradient(to bottom, transparent, #D8BC85, transparent); }
/* sotto l'hero la foto sfuma nel crema, non nel nero */
.hero-velo {
  background:
    linear-gradient(to bottom, rgba(10, 17, 22, 0.8) 0%, rgba(10, 17, 22, 0.35) 9%, rgba(10, 17, 22, 0) 20%),
    linear-gradient(90deg, rgba(10, 17, 22, 0.92) 0%, rgba(10, 17, 22, 0.8) 38%, rgba(10, 17, 22, 0.22) 64%, rgba(10, 17, 22, 0.04) 100%),
    linear-gradient(to top, rgba(10, 17, 22, 0.9) 0%, rgba(10, 17, 22, 0.4) 16%, rgba(10, 17, 22, 0) 32%);
}

/* ---------- sezioni su crema ---------- */
.manifesto blockquote { color: var(--inchiostro); }
.servizio-desc, .section-sub, .chi-siamo-colonna p, .contatti-testo > p { color: var(--velo); }
.servizio-punti li, .valori span { color: var(--inchiostro); }
.servizio-punti li:hover { color: var(--ottone-chiaro); }
.servizio-punti li::before { background: var(--ottone-chiaro); }
.foto-frame img { filter: saturate(0.95); }
/* la foto ha una leggera ombra calda: su crema serve a staccarla dal fondo */
.foto-frame img, .scatto-foto { box-shadow: 0 30px 60px -30px rgba(90, 70, 40, 0.35); }

.realizzazioni { border-top: 1px solid var(--filetto); border-bottom: 1px solid var(--filetto); }
.scatto:hover .scatto-foto::after { border-color: rgba(255, 255, 255, 0.75); }

.chi-siamo { border-top: 0; }
.valori strong { color: var(--ottone-chiaro); }

.contatti {
  background: radial-gradient(120% 130% at 50% 130%, #E2D8C2 0%, var(--notte-2) 72%);
  border-top: 1px solid var(--filetto);
}
.contatti::before { opacity: 0.45; background: radial-gradient(circle, rgba(176, 141, 87, 0.45), transparent 60%); }
.contatti::after { opacity: 0.35; background: radial-gradient(circle, rgba(120, 150, 170, 0.45), transparent 60%); }
.recapiti a { color: var(--inchiostro); border-bottom-color: var(--filetto-forte); }
.recapiti a:hover { color: var(--ottone-chiaro); border-color: var(--ottone-chiaro); }
.recapito-label { color: var(--ottone); }
.targa { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), inset 0 -2px 8px rgba(45, 30, 10, 0.4), 0 46px 90px -34px rgba(90, 70, 40, 0.55); }

/* il footer resta una fascia scura: chiude la pagina e fa da base */
.footer { background: #10181E; color: rgba(244, 239, 228, 0.7); border-top: 0; }

a:focus-visible, button:focus-visible { outline-color: var(--ottone-chiaro); }