/* ==========================================================================
   Alleimob | Signature — formulário no topo + cabeçalho de vidro
   Carregado depois do style.css; só sobrescreve o necessário.
   ========================================================================== */

/* ---------- Cabeçalho de vidro ---------- */
.site-header,
.site-header.scrolled {
  top: 12px;
  left: 50%;
  right: auto;
  width: min(calc(100% - 24px), 1240px);
  transform: translate3d(-50%, 0, 0);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.22);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  /* camada própria na GPU: evita o "piscar" ao rolar a página */
  will-change: transform;
  isolation: isolate;
  transition: background 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease;
}
.site-header.scrolled {
  background: rgba(255, 255, 255, 0.72);
  border-color: rgba(255, 255, 255, 0.6);
  box-shadow: 0 10px 30px rgba(11, 11, 10, 0.10);
}
.header-inner { padding: 12px clamp(16px, 2.4vw, 28px); }

/* Sobre a foto (topo) o texto do cabeçalho fica claro */
.site-header:not(.scrolled) .logo,
.site-header:not(.scrolled) .main-nav a { color: #fff; text-shadow: 0 1px 10px rgba(0, 0, 0, 0.35); }
.site-header:not(.scrolled) .logo-sig { color: rgba(255, 255, 255, 0.78); }
.site-header:not(.scrolled) .header-cta { color: #fff; border-color: rgba(255, 255, 255, 0.7); }
.site-header:not(.scrolled) .header-cta:hover { background: #fff; color: var(--black); }
.site-header:not(.scrolled) .menu-toggle span { background: #fff; }
.header-cta { border-radius: 10px; }

/* Menu de celular aberto: tira o vidro para o painel ocupar a tela inteira */
body.nav-open .site-header,
body.nav-open .site-header.scrolled {
  transform: none;
  left: 0; top: 0; width: 100%;
  border-radius: 0; border-color: transparent; box-shadow: none;
  will-change: auto;
}

/* Efeitos que brigavam com o desfoque e causavam tremidas na tela */
.hero-grade { mix-blend-mode: normal; opacity: 0.55; }

/* ---------- Hero com formulário ---------- */
.hero {
  align-items: center;
  padding: clamp(104px, 13vh, 132px) 0 clamp(40px, 7vh, 72px);
}
.hero-scrim {
  background:
    linear-gradient(90deg, rgba(11,11,10,0.80) 0%, rgba(11,11,10,0.55) 45%, rgba(11,11,10,0.25) 100%),
    linear-gradient(to top, rgba(11,11,10,0.55) 0%, rgba(11,11,10,0) 45%);
}
.hero-layout {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(340px, 440px);
  gap: clamp(28px, 5vw, 72px);
  align-items: center;
}
.hero-layout .hero-content {
  max-width: none;
  margin: 0;
  padding: 0;
}

/* Valor bem destacado */
.hero-price,
.hero-price:hover {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  height: auto;
  padding: 14px 22px 16px;
  margin-bottom: 26px;
  background: rgba(11, 11, 10, 0.55);
  border: 1px solid var(--gold);
  border-left-width: 4px;
  border-radius: 10px;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  transform: none;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.25);
}
.hero-price-label { font-size: 12px; letter-spacing: 0.16em; }
.hero-price-val {
  font-size: clamp(30px, 3.6vw, 44px);
  line-height: 1.1;
  color: var(--gold);
}

.hero-more { border-radius: 10px; gap: 10px; }
.hero-more span { transition: transform 0.25s ease; }
.hero-more:hover { background: rgba(255, 255, 255, 0.12); }
.hero-more:hover span { transform: translateY(3px); }

/* Cartão do formulário */
.hero-form {
  background: #fff;
  color: var(--black);
  border-radius: 18px;
  padding: clamp(22px, 2.6vw, 32px);
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.35);
  scroll-margin-top: 96px;
}
.hero-form-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(19px, 1.8vw, 23px);
  line-height: 1.2;
  margin: 0 0 6px;
}
.hero-form-sub { font-size: 14px; color: var(--text-secondary); margin: 0 0 20px; line-height: 1.5; }
.hero-form .form-progress { margin-bottom: 20px; }
.hero-form .field { margin-bottom: 16px; }
.hero-form .field input,
.hero-form .field select { border-radius: 10px; }
.hero-form .form-option { border-radius: 10px; padding: 11px 14px; }
.hero-form .form-options { gap: 8px; margin-bottom: 16px; }
.hero-form .btn { border-radius: 10px; }
.hero-form-note { font-size: 12px; color: var(--text-secondary); margin: 14px 0 0; text-align: center; max-width: none; }

/* Faixa de contato no fim da página (leva de volta ao formulário) */
.cta-band .section-inner { text-align: center; }
.cta-band p.center { color: var(--text-secondary); }
.cta-band-actions { margin-top: 26px; display: flex; justify-content: center; }
.cta-band .btn { border-radius: 10px; }

/* ---------- Responsivo ---------- */
@media (max-width: 1023px) {
  .hero { padding-top: 96px; }
  .hero-layout { grid-template-columns: 1fr; gap: 26px; }
  .hero-form { max-width: 560px; width: 100%; }
  .hero-scrim {
    background: linear-gradient(to bottom, rgba(11,11,10,0.55) 0%, rgba(11,11,10,0.70) 60%, rgba(11,11,10,0.85) 100%);
  }
}
@media (max-width: 640px) {
  .site-header, .site-header.scrolled { top: 8px; width: calc(100% - 16px); border-radius: 14px; }
  .hero { padding: 84px 0 32px; min-height: auto; }
  .hero-content h1 { font-size: 26px; margin-bottom: 12px; }
  .hero-divider { margin-bottom: 14px; }
  .hero-sub { font-size: 15px; margin-bottom: 18px; }
  .hero-price { margin-bottom: 18px; padding: 12px 18px 14px; }
  .hero-price-val { font-size: 30px; }
  .hero-ctas { flex-direction: row; }
  .hero-ctas .btn.hero-more { width: auto; min-height: 44px; padding: 10px 18px; }
  .hero-form { padding: 22px 18px; border-radius: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .site-header { transition: none; }
}