: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 { 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: 0; }
.chat-content { background: #e5ddd5; width: 100%; height: 100%; max-width: 500px; display: flex; flex-direction: column; animation: slideUp 0.3s ease-out; position: relative; overflow: hidden; }
@media (min-width: 768px) { .chat-content { height: 90vh; border-radius: 25px; } }

@keyframes slideUp { from { transform: translateY(100%); } to { transform: translateY(0); } }
@keyframes fadeIn { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; 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-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; }

/* Splash screen para PWA */
.splash-screen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, #1DB2C4, #76D351);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  animation: fadeOut 2s ease-in-out 1s forwards;
}

.splash-content {
  text-align: center;
  color: white;
}

.splash-logo {
  width: 80px;
  height: 80px;
  margin-bottom: 20px;
  animation: pulse 1.5s ease-in-out infinite;
}

.splash-text {
  font-size: 1.2rem;
  font-weight: 600;
}

@keyframes fadeOut {
  0% { opacity: 1; }
  100% { opacity: 0; visibility: hidden; }
}

@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.05); }
  100% { transform: scale(1); }
}

/* Responsividade adicional para mobile */
@media (max-width: 768px) {
  .chat-content {
    border-radius: 0;
  }
  
  .faq-grid {
    grid-template-columns: 1fr;
  }
  
  .btn-hover {
    width: 100% !important;
    max-width: 280px;
  }
}

/* Melhorias de acessibilidade */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}