/* Tipografia da página Contato — padrão Elun (Neue Haas + Helvetica Neue) */

:root {
  --contato-font: var(--font, "Helvetica Neue", Helvetica, Arial, sans-serif);
  --contato-display: var(--font-h1, "Neue Haas Grotesk Display", "Helvetica Neue", Arial, sans-serif);
  --contato-ink: #1a2e24;
  --contato-muted: #3d4f44;
  --contato-green: #063d22;
  --contato-green-mid: #0c6937;
}

app-contact,
app-contato,
#contact {
  font-family: var(--contato-font) !important;
  color: var(--contato-ink) !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ---------- Banner ---------- */
#contact .banner {
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-end !important;
  padding: 3.25rem 1.5rem 2.5rem !important;
  min-height: 220px !important;
  box-sizing: border-box !important;
}

#contact .banner h1 {
  font-family: var(--contato-display) !important;
  font-weight: 600 !important;
  font-size: clamp(2.4rem, 5.5vw, 3.75rem) !important;
  letter-spacing: -0.035em !important;
  line-height: 1.05 !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.35);
  margin: 0 !important;
}

#contact .banner h2 {
  font-family: var(--contato-font) !important;
  font-weight: 400 !important;
  font-size: clamp(1rem, 2vw, 1.25rem) !important;
  letter-spacing: -0.01em !important;
  line-height: 1.4 !important;
  color: rgba(255, 255, 255, 0.9) !important;
  -webkit-text-fill-color: rgba(255, 255, 255, 0.9) !important;
  margin: 0.55rem 0 0 !important;
  max-width: 36rem;
}

/* ---------- Coluna de conteúdo ---------- */
#contact .container h3,
app-contact .container > .col-half > h3 {
  font-family: var(--contato-display) !important;
  font-weight: 600 !important;
  font-size: clamp(1.65rem, 3vw, 2.15rem) !important;
  letter-spacing: -0.03em !important;
  line-height: 1.15 !important;
  color: var(--contato-green) !important;
  -webkit-text-fill-color: var(--contato-green) !important;
  margin: 0 0 1rem !important;
}

#contact .contact-intro,
#contact .col-half > p:not(.highlight) {
  font-family: var(--contato-font) !important;
  font-weight: 400 !important;
  font-size: 1rem !important;
  letter-spacing: -0.01em !important;
  line-height: 1.65 !important;
  color: var(--contato-muted) !important;
  -webkit-text-fill-color: var(--contato-muted) !important;
  margin: 0 0 0.85rem !important;
}

#contact .contact-subtitle,
#contact h4.contact-subtitle,
#contact .col-half > h4 {
  font-family: var(--contato-display) !important;
  font-weight: 600 !important;
  font-size: clamp(1.05rem, 2vw, 1.25rem) !important;
  letter-spacing: -0.025em !important;
  line-height: 1.25 !important;
  color: var(--contato-green-mid) !important;
  -webkit-text-fill-color: var(--contato-green-mid) !important;
  margin: 1.6rem 0 1rem !important;
}

/* Lista de contatos: label + valor */
#contact ul {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 0 1.5rem !important;
}

#contact ul li {
  font-family: var(--contato-font) !important;
  font-size: 0.82rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  color: var(--contato-muted) !important;
  -webkit-text-fill-color: var(--contato-muted) !important;
  line-height: 1.35 !important;
  margin: 0 0 1.15rem !important;
}

#contact ul li span,
#contact ul li a {
  display: inline !important;
  font-family: var(--contato-font) !important;
  font-size: 1.05rem !important;
  font-weight: 500 !important;
  letter-spacing: -0.015em !important;
  text-transform: none !important;
  text-decoration: none !important;
  line-height: 1.45 !important;
  color: var(--contato-green) !important;
  -webkit-text-fill-color: var(--contato-green) !important;
}

#contact ul li a:hover {
  color: var(--contato-green-mid) !important;
  -webkit-text-fill-color: var(--contato-green-mid) !important;
}

/* CTA abaixo do mapa / lista */
#contact p.highlight,
#contact .highlight {
  font-family: var(--contato-display) !important;
  font-weight: 600 !important;
  font-size: clamp(1.05rem, 2vw, 1.2rem) !important;
  letter-spacing: -0.02em !important;
  line-height: 1.4 !important;
  color: var(--contato-green) !important;
  -webkit-text-fill-color: var(--contato-green) !important;
}

#contact .col-half > p:not(.contact-intro):not(.highlight) {
  font-family: var(--contato-font) !important;
  font-size: 0.98rem !important;
  font-weight: 400 !important;
  letter-spacing: -0.01em !important;
  line-height: 1.6 !important;
  color: var(--contato-muted) !important;
  -webkit-text-fill-color: var(--contato-muted) !important;
}

/* Formulário "Fale conosco" */
#contact app-contact-form .form h3,
app-contact app-contact-form .form h3,
#contact .form h3 {
  font-family: var(--contato-display) !important;
  font-weight: 600 !important;
  font-size: clamp(1.45rem, 2.5vw, 1.85rem) !important;
  letter-spacing: -0.03em !important;
  color: var(--contato-green) !important;
  -webkit-text-fill-color: var(--contato-green) !important;
}

#contact app-contact-form label,
#contact app-contact-form input,
#contact app-contact-form textarea,
#contact app-contact-form button {
  font-family: var(--contato-font) !important;
}

@media (max-width: 768px) {
  #contact .banner {
    min-height: 180px !important;
    padding: 2.5rem 1.1rem 1.75rem !important;
  }

  #contact ul li span,
  #contact ul li a {
    font-size: 0.98rem !important;
  }
}