/* Reset básico */
* { margin:0; padding:0; box-sizing:border-box; }

body {
  font-family:'Poppins',sans-serif;
  background:#f4f4f9;
  color:#333;
}

/* Header fixo */
header {
  background:#111;
  color:#fff;
  padding:15px 20px;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 999;
  box-shadow:0 2px 6px rgba(0,0,0,0.3);
}
header h1 { 
  font-size:2em; 
  display:inline-block; 
  margin-left:20px; 
  font-weight:bold;
  color:#fff;
  animation: animarTitulo 3s infinite alternate;
}
header nav ul { 
  list-style:none; 
  float:right; 
}
header nav ul li { 
  display:inline-block; 
  margin-left:20px; 
}
header nav ul li a { 
  color:#fff;
  background:#000;
  padding:12px 20px;
  border-radius:6px;
  font-size:103%;
  text-decoration:none;
  transition:.3s;
  display:inline-block;
}
header nav ul li a:hover { 
  color:#f7c600; 
  background:#111;
  transform:translateY(-2px);
  box-shadow:0 4px 8px rgba(0,0,0,0.2);
}

/* Menu hamburguer (mobile) */
.menu-toggle {
  display: none;
  font-size: 28px;
  color: #fff;
  cursor: pointer;
  z-index: 1001;
  position: absolute;
  right: 20px;
  top: 22px;
}

/* Spacer dinâmico */
.hero-spacer {
  width: 100%;
  height: 80px;
}

/* Hero */
.hero {
  display:flex; 
  flex-direction:column; 
  align-items:center; 
  justify-content:center; 
  position:relative;
  text-align:center;
  padding:20px;
  background:url('https://images.unsplash.com/photo-1605902711622-cfb43c4430e5?auto=format&fit=crop&w=1470&q=80') center/cover no-repeat;
  color:#fff;
  min-height:100vh;
}
.hero-text { 
  z-index:1; 
  max-width:90%; 
}
.hero h2 { 
  font-size:3em; 
  margin-bottom:20px; 
  text-shadow:2px 2px 10px rgba(0,0,0,0.6); 
}
.hero p { 
  font-size:1.3em; 
  margin-bottom:30px; 
  text-shadow:1px 1px 6px rgba(0,0,0,0.6); 
}

/* Canvas IA */
#ai-background {
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  z-index:0;
}

/* Botão */
.btn-primary { 
  background:#f7c600; 
  color:#111; 
  padding:15px 30px; 
  border:none; 
  border-radius:6px; 
  text-decoration:none; 
  font-weight:bold; 
  transition:.3s; 
}
.btn-primary:hover { 
  background:#e6b800; 
  transform:translateY(-3px); 
}

/* Seções */
.container { 
  width:90%; 
  max-width:1200px; 
  margin:0 auto; 
}
.servicos, .sobre, .pacotes, .contato { 
  padding:80px 0; 
  text-align:center; 
}
.cards-servicos, .cards-pacotes { 
  display:flex; 
  flex-wrap:wrap; 
  justify-content:center; 
  gap:30px; 
  margin-top:40px; 
}

/* Cards */
.card, .card-pacote { 
  background:#fff; 
  padding:30px; 
  border-radius:12px; 
  box-shadow:0 10px 25px rgba(0,0,0,0.1); 
  width:300px; 
  transition:.3s; 
}
.card:hover, .card-pacote:hover { 
  transform:translateY(-10px); 
  box-shadow:0 15px 30px rgba(0,0,0,0.2); 
}
.card i { 
  margin-bottom:20px; 
  color:#f7c600; 
}

/* Pacotes */
.card-pacote { 
  background:#222; 
  color:#fff; 
  border:2px solid #f7c600; 
}
.card-pacote h3 { 
  margin-bottom:15px; 
  color:#f7c600; 
}
.card-pacote p { 
  margin:8px 0; 
  line-height:1.5; 
}
.card-pacote .valor { 
  font-size:1.5em; 
  font-weight:bold; 
  margin-top:15px; 
}

/* Contato */
.contato {
  padding: 100px 0 140px;
  text-align: center;
}
.contato h2 {
  margin-bottom: 20px;
}
.contato p {
  margin-bottom: 40px;
  font-size: 1.1em;
  line-height: 1.6;
}
.contato input,
.contato textarea,
.contato button {
  width: 100%;
  padding: 12px;
  margin: 10px 0;
  border-radius: 6px;
  border: 1px solid #ccc;
}
.contato button {
  background: #f7c600;
  color: #111;
  border: none;
  font-weight: bold;
  cursor: pointer;
  transition: 0.3s;
}
.contato button:hover {
  background: #e6b800;
  transform: translateY(-3px);
}

/* Footer */
footer {
  background: #111;
  color: #fff;
  padding: 40px 0 20px;
  text-align: center;
}

/* Responsivo */
@media (max-width: 768px){
  header nav {
    display: none;
    width: 100%;
    background-color: #111;
    position: absolute;
    top: 65px;
    left: 0;
    z-index: 1000;
  }

  header nav.active {
    display: block;
  }

  header nav ul {
    float: none;
    text-align: center;
    margin: 0;
    padding: 10px 0;
  }

  header nav ul li {
    display: block;
    margin: 10px 0;
  }

  .menu-toggle {
    display: block;
  }

  .hero h2 {
    font-size: 2em;
  }

  .hero p {
    font-size: 1em;
  }

  .cards-servicos, .cards-pacotes {
    flex-direction: column;
    gap: 20px;
    align-items: center;
  }

  .header-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
}

@media (max-width: 480px){
  .hero h2 {
    font-size: 1.5em;
  }

  .hero p {
    font-size: 0.95em;
  }

  header h1 {
    font-size: 1.6em;
    margin-left: 10px;
  }

  header nav ul li a {
    padding: 10px 15px;
    font-size: 95%;
  }
}