:root { 
  --primary: #1DB2C4; 
  --grad: linear-gradient(90deg, #1DB2C4, #76D351); 
  --dark: #111; 
  --text: #333; 
}

* { 
  margin: 0; 
  padding: 0; 
  box-sizing: border-box; 
  font-family: 'Inter', sans-serif; 
  -webkit-tap-highlight-color: transparent; 
}

body { 
  background: white; 
  color: var(--text); 
  overflow-x: hidden; 
}

.wrapper { 
  padding: 30px 20px; 
}

.reveal { 
  opacity: 0; 
  transform: translateY(10px); 
  transition: all 0.5s ease-out; 
}

.reveal.active { 
  opacity: 1; 
  transform: translateY(0); 
}

.faq-grid { 
  display: grid; 
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); 
  gap: 20px; 
  align-items: start; 
}

.faq-card { 
  background: white; 
  padding: 20px; 
  border-radius: 15px; 
  border: 2px solid transparent; 
  background-image: linear-gradient(white, white), var(--grad); 
  background-origin: border-box; 
  background-clip: padding-box, border-box; 
  cursor: pointer; 
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); 
  box-shadow: 0 4px 10px rgba(0,0,0,0.05); 
}

.faq-card:hover { 
  transform: translateY(-5px) scale(1.02); 
  box-shadow: 0 10px 20px rgba(29, 178, 196, 0.15); 
}

.faq-q { 
  font-weight: 800; 
  font-size: 0.9rem; 
  color: var(--dark); 
  margin-bottom: 0; 
}

.faq-a { 
  font-size: 0.85rem; 
  color: #666; 
  max-height: 0; 
  overflow: hidden; 
  transition: max-height 0.3s ease-out; 
}

.faq-card.active .faq-a { 
  max-height: 150px; 
  margin-top: 10px; 
}

.btn-hover:hover { 
  transform: scale(1.05); 
  opacity: 0.9; 
}

.btn-hover:active { 
  transform: scale(0.95); 
}

#chatModal, #gestaoModal { 
  display: none; 
  position: fixed; 
  top: 0; 
  left: 0; 
  width: 100%; 
  height: 100%; 
  background: rgba(0,0,0,0.8); 
  z-index: 9999; 
  align-items: center; 
  justify-content: center; 
  padding: 20px; 
}

.chat-content { 
  background: #e5ddd5; 
  width: 100%; 
  height: 90%; 
  max-width: 500px; 
  display: flex; 
  flex-direction: column; 
  animation: slideUp 0.3s ease-out; 
  position: relative; 
  border-radius: 25px; 
  overflow: hidden; 
  box-shadow: 0 20px 50px rgba(0,0,0,0.3); 
}

@keyframes slideUp { 
  from { transform: translateY(100%); } 
  to { transform: translateY(0); } 
}

.chat-header { 
  background: var(--grad); 
  color: white; 
  padding: 15px 20px; 
  display: flex; 
  align-items: center; 
  gap: 10px; 
}

.chat-body { 
  flex: 1; 
  padding: 20px; 
  overflow-y: auto; 
  display: flex; 
  flex-direction: column; 
  gap: 10px; 
  background-image: url('https://user-images.githubusercontent.com/15075759/28719144-86dc0f70-73b1-11e7-911d-60d70fcded21.png'); 
  background-blend-mode: overlay; 
  padding-bottom: 80px; 
}

.bubble { 
  padding: 10px 15px; 
  border-radius: 15px; 
  max-width: 80%; 
  font-size: 0.9rem; 
  box-shadow: 0 1px 2px rgba(0,0,0,0.1); 
  position: relative; 
  word-wrap: break-word; 
}

.b-bot { 
  background: white; 
  align-self: flex-start; 
  border-top-left-radius: 0; 
}

.b-user { 
  background: #dcf8c6; 
  align-self: flex-end; 
  border-top-right-radius: 0; 
}

#quick-replies { 
  position: absolute; 
  bottom: 70px; 
  width: 100%; 
  display: none; 
  justify-content: center; 
  padding: 10px; 
  z-index: 10; 
}

.quick-btn { 
  background: #fff; 
  border: 1px solid var(--primary); 
  color: var(--primary); 
  padding: 8px 20px; 
  border-radius: 20px; 
  font-weight: 800; 
  font-size: 0.8rem; 
  cursor: pointer; 
  box-shadow: 0 2px 5px rgba(0,0,0,0.1); 
  transition: 0.2s; 
}

.quick-btn:hover { 
  transform: scale(1.1); 
}

.chat-footer { 
  background: #f0f0f0; 
  padding: 10px; 
  display: flex; 
  gap: 10px; 
  align-items: center; 
  z-index: 11; 
}

.chat-footer input { 
  flex: 1; 
  padding: 12px; 
  border-radius: 20px; 
  border: none; 
  outline: none; 
  font-size: 0.9rem; 
}

.chat-footer button { 
  background: var(--grad); 
  width: 40px; 
  height: 40px; 
  border-radius: 50%; 
  border: none; 
  display: flex; 
  align-items: center; 
  justify-content: center; 
  cursor: pointer; 
  transition: 0.2s; 
}

.chat-footer button:hover { 
  transform: rotate(-15deg) scale(1.1); 
}

.chat-opt { 
  background: #fff; 
  color: var(--primary); 
  padding: 10px; 
  border-radius: 12px; 
  border: 1px solid #ddd; 
  font-weight: 700; 
  font-size: 0.8rem; 
  cursor: pointer; 
  text-align: center; 
  margin-top: 5px; 
  transition: 0.2s; 
}

.chat-opt:hover { 
  background: #f9f9f9; 
  transform: translateY(-2px); 
  border-color: var(--primary); 
}

@media (min-width: 768px) { 
  .chat-content { 
    height: 85vh; 
  } 
  nav, .wrapper { 
    padding-left: 10%; 
    padding-right: 10%; 
  } 
}