/* Estilos Gerais - Glaxy LTD */

/* Rolagem Suave */
html {
  scroll-behavior: smooth;
}

/* Barra de Rolagem Personalizada */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: #555;
}

/* Animações */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-fade-in-up {
  animation: fadeInUp 0.6s ease-out forwards;
}

/* Animação do Menu Mobile */
.mobile-menu {
  transition: transform 0.3s ease-in-out;
}

.mobile-menu.hidden {
  transform: translateX(100%);
}

/* Fundos Gradientes */
.gradient-bg {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.recommended-badge {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

/* Decoração de Fundo Hero */
.hero-bg-pattern {
  background-image: radial-gradient(
      circle at 20% 80%,
      rgba(59, 130, 246, 0.1) 0%,
      transparent 50%
    ),
    radial-gradient(
      circle at 80% 20%,
      rgba(99, 102, 241, 0.1) 0%,
      transparent 50%
    ),
    radial-gradient(
      circle at 40% 40%,
      rgba(236, 72, 153, 0.05) 0%,
      transparent 50%
    );
}

/* Decoração de Fundo Auth */
.auth-bg-pattern {
  background-image: radial-gradient(
      circle at 10% 20%,
      rgba(59, 130, 246, 0.1) 0%,
      transparent 50%
    ),
    radial-gradient(
      circle at 80% 80%,
      rgba(99, 102, 241, 0.1) 0%,
      transparent 50%
    ),
    radial-gradient(
      circle at 40% 40%,
      rgba(236, 72, 153, 0.05) 0%,
      transparent 50%
    );
}

/* Decoração de Fundo Página */
.page-bg-pattern {
  background-image: radial-gradient(
      circle at 20% 50%,
      rgba(59, 130, 246, 0.08) 0%,
      transparent 50%
    ),
    radial-gradient(
      circle at 80% 80%,
      rgba(99, 102, 241, 0.08) 0%,
      transparent 50%
    );
}

/* Estilos de Botões */
.btn-primary {
  @apply inline-flex items-center justify-center px-6 py-3 text-base font-medium rounded-lg text-white bg-primary-600 hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500 transition-all duration-200;
}

.btn-secondary {
  @apply inline-flex items-center justify-center px-6 py-3 text-base font-medium rounded-lg text-primary-600 bg-white border-2 border-primary-600 hover:bg-primary-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500 transition-all duration-200;
}

/* Estilos de Cartões */
.feature-card {
  @apply bg-white rounded-lg shadow-md p-8 text-center hover:shadow-xl hover:-translate-y-1 transition-all duration-200;
}

.advantage-card {
  @apply bg-white rounded-xl shadow-lg p-8 hover:shadow-xl transition-all duration-300;
}

.pricing-card {
  transition: all 0.3s ease;
}

.pricing-card:hover {
  transform: translateY(-10px);
}

/* Estilos de Campos de Entrada */
.input-base {
  @apply block w-full px-4 py-3 rounded-lg border border-gray-300 text-gray-900 placeholder-gray-500 
             focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent
             transition-all duration-200;
}

/* Estilos de Checkboxes */
.checkbox-base {
  @apply w-4 h-4 text-primary-600 border-gray-300 rounded focus:ring-primary-500 focus:ring-2;
}

/* Animação de Números Estatísticos */
.stat-number {
  @apply text-4xl md:text-5xl font-bold text-primary-600;
}

/* Força da Senha */
.strength-weak {
  background: linear-gradient(to right, #ef4444, #f87171);
}

.strength-medium {
  background: linear-gradient(to right, #f59e0b, #fbbf24);
}

.strength-strong {
  background: linear-gradient(to right, #10b981, #34d399);
}

/* Estados de Etapas */
.step-active {
  @apply bg-primary-600 text-white;
}

.step-completed {
  @apply bg-green-500 text-white;
}

.step-inactive {
  @apply bg-gray-200 text-gray-500;
}

/* Estilos de Campos de Entrada Adicionais */
.input-error {
  @apply border-red-500 focus:ring-red-500;
}

.input-success {
  @apply border-green-500 focus:ring-green-500;
}

/* Estilos de Campos de Seleção */
.select-base {
  @apply input-base appearance-none bg-white;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
  background-position: right 0.5rem center;
  background-repeat: no-repeat;
  background-size: 1.5em 1.5em;
  padding-right: 2.5rem;
}

/* Indicadores de Etapas */
.step-indicator {
  @apply flex items-center justify-center w-8 h-8 rounded-full text-sm font-medium;
}

/* Estilos de Cartões de Soluções */
.solution-card {
  transition: all 0.3s ease;
}

.solution-card:hover {
  transform: translateY(-5px);
}

/* Abas de Indústria */
.industry-tab {
  transition: all 0.3s ease;
}

.industry-tab.active {
  background-color: #3b82f6;
  color: white;
}

/* Badges de Recursos */
.feature-badge {
  background: linear-gradient(135deg, #3b82f6 0%, #1e40af 100%);
}

/* Badges de Categoria */
.category-badge {
  transition: all 0.3s ease;
}

.category-badge.active {
  background-color: #3b82f6;
  color: white;
}

/* Itens FAQ */
.faq-item {
  transition: all 0.3s ease;
}

/* Destaque de Pesquisa */
.search-highlight {
  background-color: #fef3c7;
  padding: 0 2px;
  border-radius: 2px;
}