/* ==============================================================================
   ESTILOS PERSONALIZADOS - INSS OBRA & REDUÇÃO DE CND (DESIGN SYSTEM)
   ============================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&family=Outfit:wght@400;500;600;700;800;900&display=swap');

:root {
  --color-primary-dark: #061B33;
  --color-primary-blue: #0B315C;
  --color-accent-gold: #F5B82E;
  --color-accent-hover: #E5A81E;
  --color-accent-green: #10B981;
  --color-bg-light: #F4F6F8;
  --color-white: #FFFFFF;
}

body {
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background-color: var(--color-bg-light);
  color: #1E293B;
  overflow-x: hidden;
}

h1, h2, h3, h4, .font-heading {
  font-family: 'Outfit', 'Plus Jakarta Sans', sans-serif;
}

/* Gradients Customizados */
.bg-navy-dark {
  background-color: #061B33;
}

.bg-navy-secondary {
  background-color: #0B315C;
}

.bg-navy-gradient {
  background: linear-gradient(135deg, #061B33 0%, #0B315C 60%, #0f4078 100%);
}

.bg-gold-gradient {
  background: linear-gradient(135deg, #F5B82E 0%, #F59E0B 100%);
}

.bg-emerald-gradient {
  background: linear-gradient(135deg, #10B981 0%, #059669 100%);
}

/* Glassmorphism */
.glass-panel {
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.glass-panel-light {
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(226, 232, 240, 0.8);
}

/* Cards Interativos de Opção */
.option-card {
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
  border: 1.5px solid rgba(255, 255, 255, 0.12);
  background: rgba(11, 49, 92, 0.45);
}

.option-card:hover {
  border-color: rgba(245, 184, 46, 0.5);
  background: rgba(11, 49, 92, 0.75);
  transform: translateY(-2px);
}

.option-card.card-selected {
  border-color: #F5B82E !important;
  background: rgba(245, 184, 46, 0.14) !important;
  box-shadow: 0 0 20px rgba(245, 184, 46, 0.25);
}

.option-card.card-selected .check-indicator {
  border-color: #F5B82E;
  background-color: #F5B82E;
  color: #061B33;
}

/* Selo de Garantia "Só Paga Depois de Pronto" */
.badge-pay-after {
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.15) 0%, rgba(245, 184, 46, 0.2) 100%);
  border: 1px solid rgba(245, 184, 46, 0.4);
  animation: pulseSubtle 3s infinite ease-in-out;
}

/* Efeitos de Glow */
.gold-glow {
  box-shadow: 0 4px 25px -4px rgba(245, 184, 46, 0.4);
}

.emerald-glow {
  box-shadow: 0 4px 25px -4px rgba(16, 185, 129, 0.4);
}

.navy-glow {
  box-shadow: 0 10px 30px -10px rgba(6, 27, 51, 0.5);
}

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

.animate-fadeIn {
  animation: fadeIn 0.3s ease-out forwards;
}

@keyframes pulseSubtle {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.02);
  }
}

.animate-pulse-subtle {
  animation: pulseSubtle 3s infinite ease-in-out;
}

/* Acessibilidade - Focus Rings */
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible {
  outline: 2px solid #F5B82E;
  outline-offset: 2px;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  background: #061B33;
}
::-webkit-scrollbar-thumb {
  background: #1e3a5f;
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: #F5B82E;
}