html,
body {
  min-height: 100vh;
}

/* ... restante do seu CSS ... */

/* Estilos CUSTOMIZADOS para o chat do n8n (revisados) */
:root {
  /* Cores principais */
  --chat--color-primary: #b3557d; /* Rosa/Roxo do seu gradiente - Para botões de ação e destaque */
  --chat--color-primary-shade-50: #9e4a6d; /* Tonalidade para hover/ativo */
  --chat--color-primary-shade-100: #8a3f5c;

  /* Cores de texto padrão */
  --chat--color-dark: #111; /* Preto do seu site */
  --chat--color-white: #ffffff; /* Branco padrão */
  --chat--color-light: #f8f9fa; /* Um cinza bem claro para fundos */

  /* Cores das mensagens */
  --chat--message--bot--background: var(
    --chat--color-white
  ); /* Fundo branco para mensagens do assistente */
  --chat--message--bot--color: var(
    --chat--color-dark
  ); /* Texto preto para mensagens do assistente */

  --chat--message--user--background: var(
    --chat--color-dark
  ); /* Fundo preto para mensagens do usuário */
  --chat--message--user--color: var(
    --chat--color-white
  ); /* Texto branco para mensagens do usuário */

  /* Cor do botão flutuante */
  --chat--toggle--background: #eb9d5b; /* Laranja do seu gradiente para o botão */
  --chat--toggle--hover--background: #d68c4d; /* Tonalidade para hover */
  --chat--toggle--active--background: #c27b3f;

  /* Fonte */
  --chat--font-family: "Poppins", sans-serif;

  /* BORDAS ARREDONDADAS */
  --chat--border-radius: 12px; /* Aumentado para um arredondamento mais suave */
  --chat--window--border-radius: 16px; /* Borda da janela do chat */
}

/* Estilos diretos para garantir arredondamento da janela e cabeçalho */
.n8n-chat-container .chat-window-wrapper .chat-window {
  border-radius: var(--chat--window--border-radius) !important;
  overflow: hidden; /* Garante que o conteúdo respeite o border-radius */
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1); /* Um pouco de sombra para destacar */
}

.n8n-chat-container .chat-window-wrapper .chat-window .chat-header {
  background-color: var(--chat--color-primary) !important;
  color: var(--chat--color-white) !important;
  border-top-left-radius: var(--chat--window--border-radius) !important;
  border-top-right-radius: var(--chat--window--border-radius) !important;
}

.n8n-chat-container .chat-window-wrapper .chat-window .chat-footer {
  border-bottom-left-radius: var(--chat--window--border-radius) !important;
  border-bottom-right-radius: var(--chat--window--border-radius) !important;
}

/* Estilo para o input de texto do chat - Garante fonte e borda arredondada */
.n8n-chat-container .n8n-chat-input-wrapper textarea {
  font-family: "Poppins", sans-serif !important;
  color: var(--chat--color-dark) !important;
  border-radius: var(--chat--border-radius) !important;
  padding: 0.75rem 1rem !important; /* Ajuste para melhor visual */
}

/* Estilo para os botões dentro do chat (se houver, como os de "Nova conversa") */
.n8n-chat-container .n8n-chat-button,
.n8n-chat-container .n8n-button {
  border-radius: 50px !important; /* Bordas super arredondadas para botões */
  font-weight: 600 !important;
}

/* Mensagens do assistente */
.n8n-chat-container .n8n-message.n8n-message--ai {
  border-radius: var(--chat--border-radius) 0 var(--chat--border-radius)
    var(--chat--border-radius) !important; /* Arredondamento específico para balão da IA */
  padding: 0.75rem 1rem !important;
  margin-bottom: 0.5rem !important;
}

/* Mensagens do usuário */
.n8n-chat-container .n8n-message.n8n-message--user {
  border-radius: 0 var(--chat--border-radius) var(--chat--border-radius)
    var(--chat--border-radius) !important; /* Arredondamento específico para balão do usuário */
  padding: 0.75rem 1rem !important;
  margin-bottom: 0.5rem !important;
}

body {
  background: linear-gradient(135deg, #eb9d5b, #b3557d, #eb9d5b);
  background-size: 200% 200%;
  animation: gradientAnimation 12s ease infinite;
  color: #111; /* Alterado para um tom levemente mais escuro para melhor contraste */
  font-family: "Poppins", sans-serif;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

@keyframes gradientAnimation {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

main {
  flex: 1;
}

section {
  scroll-margin-top: 80px; /* Para rolagem suave para as seções */
}

/* Navbar */
.navbar {
  background-color: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(10px);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.navbar-brand {
  font-weight: 600;
  font-size: 1.5rem;
}

.nav-link {
  font-weight: 500;
  color: #111 !important; /* Mantido #111 para um visual coeso */
  transition: color 0.3s ease;
}

.nav-link:hover {
  color: #b3557d !important;
}

/* Títulos */
.section-title {
  font-weight: 600;
  font-size: 2.2rem;
  color: #111;
}

/* Botões */
.btn-modern {
  background-color: #fff;
  border: none;
  color: #111;
  font-weight: 600;
  padding: 0.75rem 1.5rem;
  border-radius: 50px;
  margin: 0.5rem;
  transition: background-color 0.3s ease, color 0.3s ease, transform 0.2s ease;
}

.btn-modern:hover {
  background-color: #111;
  color: #fff;
  transform: translateY(-2px); /* Efeito sutil no hover */
}

/* Cards de Serviço */
.card-service {
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(10px);
  border-radius: 16px;
  padding: 2.5rem 1.5rem; /* Ajuste para mais espaço */
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
  height: 100%;
  border: 1px solid rgba(255, 255, 255, 0.5);
  transition: transform 0.3s ease, box-shadow 0.3s ease; /* Transição no hover */
}

.card-service:hover {
  transform: translateY(-5px); /* Efeito de elevação */
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15); /* Sombra mais intensa */
}

.icon-title {
  font-size: 2.5rem; /* Ícones ligeiramente maiores */
  margin-bottom: 1rem;
  color: #b3557d; /* Cor para os ícones */
}

.lead {
  font-size: 1.25rem;
}

/* Seções */
.bg-dark-section {
  background-color: rgba(0, 0, 0, 0.8); /* Onde 0.8 é 80% de opacidade */
  color: #fff;
  padding: 4rem 1rem;
}

/* Footer */
footer {
  color: #111;
  font-size: 0.9rem;
  padding: 2rem 1rem;
  text-align: center;
  background-color: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(6px);
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
  margin-top: auto; /* Garante que o footer fique no final da página */
}

/* Responsividade */
@media (max-width: 768px) {
  .navbar-collapse {
    background-color: rgba(255, 255, 255, 0.95);
    padding: 1rem;
  }
  .section-title {
    font-size: 1.8rem; /* Ajuste para telas menores */
  }
  .lead {
    font-size: 1rem; /* Ajuste para telas menores */
  }
  .btn-modern {
    font-size: 0.9rem; /* Ajuste para telas menores */
  }
}