/* ===========================
   VARIÁVEIS DE TEMA
=========================== */
:root {
  --bg: #0b1220;
  --bg-2: #0f172a;
  --text: #e6e8ee;
  --muted: #9aa4b2;
  --brand: #0d3b66;
  --gold: #d4af37;
  --card: #0f1526;
  --stroke: rgba(255, 255, 255, .08);
  --radius: 22px;
  --shadow: 0 10px 35px rgba(0,0,0,.35);
  --whatsapp: #25D366;
}

/* ===========================
   RESET BÁSICO
=========================== */
* { box-sizing: border-box }
html, body {
  margin: 0;
  padding: 0;
  background: linear-gradient(180deg, var(--bg) 0%, #0c1426 60%, #0b1324 100%);
  color: var(--text);
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}
a { color: inherit; text-decoration: none }
img { max-width: 100%; display: block }

/* ===========================
   NAVBAR
=========================== */
.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(8,12,24,.7);
  backdrop-filter: saturate(120%) blur(10px);
  border-bottom: 1px solid var(--stroke);
}
.nav .wrap {
  max-width: 1200px;
  margin: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 12px;
}
.logo {
  width: 44px; height: 44px;
  border-radius: 12px;
  display: grid; place-items: center;
  background: radial-gradient(80% 80% at 30% 20%, rgba(212,175,55,.35), rgba(13,59,102,.25)),
              linear-gradient(135deg,#14213d,#0b1220);
  border: 1px solid var(--stroke);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.04);
}
.logo svg { width: 26px; height: 26px; fill: var(--gold) }
.brand h1 { font: 800 18px/1 Merriweather, serif; margin: 0 }
.brand span { display: block; font: 600 11px/1.4 Inter, sans-serif; color: var(--muted) }

.menu {
  display: flex;
  align-items: center;
  gap: 20px;
}
.menu a {
  padding: 10px 12px;
  border-radius: 12px;
}
.menu a:hover {
  background: rgba(255,255,255,.06);
}

.cta { display: flex; gap: 10px }

/* Botões */
.btn {
  padding: 12px 16px;
  border-radius: 14px;
  border: 1px solid var(--stroke);
  background: #0c152c;
  box-shadow: var(--shadow);
  font-weight: 700;
}
.btn.gold {
  background: linear-gradient(180deg,#f5d977,#d4af37);
  color: #10131b;
  border: 0;
}
.btn.whatsapp {
  background: var(--whatsapp);
  color: #fff;
  border: 0;
}
.btn.ghost { background: transparent }

/* Botão hambúrguer (mobile) */
.hamb {
  display: none;
  cursor: pointer;
  background: transparent;
  border: none;
  font-size: 22px;
  color: var(--text);
}

/* ===========================
   HERO
=========================== */
.hero {
  position: relative;
  overflow: hidden;
}
.hero .wrap {
  max-width: 1200px;
  margin: auto;
  padding: 64px 18px 80px;
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 36px;
  align-items: center;
}
.title {
  font: 900 clamp(28px,6vw,50px)/1.05 Merriweather, serif;
  margin: 0 0 14px;
}
.subtitle {
  color: var(--muted);
  font-size: clamp(15px,2.2vw,17px);
  margin: 0 0 26px;
}
.hero-card {
  border: 1px solid var(--stroke);
  background: linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.02));
  border-radius: var(--radius);
  padding: 20px;
  display: flex;
  align-items: center;
  gap: 16px;
}
.hero-card svg { flex: 0 0 40px }

/* ===========================
   SEÇÕES
=========================== */
section { padding: 70px 18px }
.container { max-width: 1200px; margin: auto }

/* Sobre */
.about {
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: 36px;
}
.chip {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  padding: 8px 12px;
  border: 1px solid var(--stroke);
  border-radius: 999px;
  color: var(--gold);
  background: rgba(212,175,55,.08);
}

/* Áreas */
.grid {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 18px;
}
.card {
  background: var(--card);
  border: 1px solid var(--stroke);
  border-radius: var(--radius);
  padding: 22px;
  box-shadow: var(--shadow);
}
.card h3 {
  margin: 14px 0 6px;
  font: 800 18px/1.2 Inter, sans-serif;
}
.card p {
  margin: 0;
  color: var(--muted);
}

/* Contato */
.contact {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
form { display: grid; gap: 12px }
input, textarea {
  background: #0b1220;
  border: 1px solid var(--stroke);
  color: var(--text);
  padding: 12px 14px;
  border-radius: 12px;
  outline: none;
}
textarea { min-height: 120px; resize: vertical }

/* ===========================
   RODAPÉ
=========================== */
footer {
  border-top: 1px solid var(--stroke);
  padding: 26px 18px;
  color: var(--muted);
  text-align: center;
}

/* Evita que a página deslize horizontalmente */
body {
    overflow-x: hidden;
}

/* ===========================
   RESPONSIVIDADE
=========================== */
@media (max-width: 980px) {
  .hero .wrap { grid-template-columns: 1fr }
  .about { grid-template-columns: 1fr }
  .grid { grid-template-columns: 1fr 1fr }
  .contact { grid-template-columns: 1fr }
}

@media (max-width: 680px) {
  /* Esconde menu e mostra botão hambúrguer */
  .menu {
    display: none;
    flex-direction: column;
    background: rgba(8,12,24,.96);
    position: absolute;
    top: 64px;
    right: 18px;
    padding: 10px;
    border: 1px solid var(--stroke);
    border-radius: 14px;
  }
  .hamb { display: block }

  /* Seções em coluna única */
  .grid { grid-template-columns: 1fr }
  .hero .wrap { padding: 40px 18px }
}

/* Esconde apenas o botão WhatsApp do TOPO em telas menores */
@media (max-width: 768px) {
  .top-whatsapp {
    display: none;
  }
}