/* ==========================================================================
   ESTILOS PERSONALIZADOS & ANIMAÇÕES: DRA. MASIEL BICET COLUMBIE
   Design System: Warm Clinical Prestige (Pantone Oficial Regenera)
   ========================================================================== */

/* Suavização de renderização de fontes */
html {
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Scrollbar elegante nos tons da marca */
::-webkit-scrollbar {
  width: 9px;
}
::-webkit-scrollbar-track {
  background: #FAF8F5;
}
::-webkit-scrollbar-thumb {
  background: #BC9E6E;
  border-radius: 9999px;
  border: 2px solid #FAF8F5;
}
::-webkit-scrollbar-thumb:hover {
  background: #286140;
}

/* Gradientes e Texturas de Fundo Refinados */
.bg-warm-radial {
  background: radial-gradient(circle at 50% 20%, rgba(188, 158, 110, 0.08) 0%, rgba(250, 248, 245, 0) 70%);
}

.bg-hero-glow {
  background: radial-gradient(ellipse at top right, rgba(40, 97, 64, 0.07) 0%, rgba(188, 158, 110, 0.06) 40%, rgba(250, 248, 245, 0) 70%);
}

.bg-card-gradient {
  background: linear-gradient(135deg, #FFFFFF 0%, #FAF8F5 100%);
}

.bg-dark-editorial {
  background: linear-gradient(180deg, #13271D 0%, #0F1E16 100%);
}

/* Glassmorphism Suave */
.glass-panel {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(188, 158, 110, 0.2);
}

.glass-panel-dark {
  background: rgba(19, 39, 29, 0.85);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(188, 158, 110, 0.25);
}

/* Efeito Dourado Sutil em Textos e Bordas */
.text-gold-gradient {
  background: linear-gradient(135deg, #BC9E6E 0%, #9B7B4B 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.border-gold-glow {
  border-color: rgba(188, 158, 110, 0.4);
  box-shadow: 0 4px 20px -2px rgba(188, 158, 110, 0.15);
}

/* Animação Flutuante Lenta para Badges e Detalhes */
@keyframes floatSlow {
  0%, 100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-8px);
  }
}

.animate-float-slow {
  animation: floatSlow 6s ease-in-out infinite;
}

.animate-float-delayed {
  animation: floatSlow 7s ease-in-out infinite 2s;
}

/* Pulso Sutil no Botão Principal */
@keyframes pulseSubtle {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(40, 97, 64, 0.4);
  }
  50% {
    box-shadow: 0 0 0 14px rgba(40, 97, 64, 0);
  }
}

.pulse-primary {
  animation: pulseSubtle 3s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* Efeito Shimmer para destaques de conversão */
@keyframes shimmer {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

.shimmer-badge {
  background: linear-gradient(90deg, rgba(188, 158, 110, 0.1) 0%, rgba(188, 158, 110, 0.3) 50%, rgba(188, 158, 110, 0.1) 100%);
  background-size: 200% 100%;
  animation: shimmer 4s infinite linear;
}

/* Estilo do FAQ Acordeão */
.faq-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease;
  opacity: 0;
}

.faq-item.active .faq-content {
  max-height: 500px;
  opacity: 1;
}

.faq-item.active .faq-icon {
  transform: rotate(180deg);
}

/* Tabs de Destaque */
.tab-btn.active {
  background-color: #286140;
  color: #FFFFFF;
  border-color: #286140;
}