/* ============================================================
   PROTOCOLO HUMANO — Custom Styles
   ============================================================ */

/* Navigation */
.nav-link {
  @apply text-gray-400 hover:text-white px-3 py-2 rounded-lg text-sm font-medium transition-all duration-200 flex items-center;
}
.nav-active {
  @apply bg-gray-800 text-white;
}
.mobile-nav-link {
  @apply block text-gray-300 hover:text-white hover:bg-gray-800 px-4 py-3 rounded-lg text-sm font-medium transition;
}

/* Buttons */
.btn-primary {
  @apply inline-flex items-center justify-center bg-emerald-500 hover:bg-emerald-600 active:bg-emerald-700 text-white font-bold px-8 py-3 rounded-xl transition-all duration-200 shadow-lg shadow-emerald-500/20 hover:shadow-emerald-500/30;
}
.btn-secondary {
  @apply inline-flex items-center justify-center bg-gray-800 hover:bg-gray-700 text-white font-semibold px-8 py-3 rounded-xl transition-all duration-200 border border-gray-700;
}

/* Forms */
.form-input {
  @apply w-full bg-gray-800 border border-gray-700 focus:border-emerald-500 text-white placeholder-gray-500 rounded-xl px-4 py-3 outline-none transition-all duration-200 text-sm;
}

/* Cards */
.pillar-card {
  @apply bg-gray-900 border border-gray-800 rounded-2xl p-7 transition-all duration-300 hover:shadow-xl hover:-translate-y-1;
}
.pillar-icon {
  @apply w-14 h-14 rounded-2xl flex items-center justify-center mb-5 transition-colors duration-200;
}
.pain-card {
  @apply bg-gray-900 border border-gray-800 hover:border-gray-600 rounded-xl p-5 transition-all duration-200;
}
.testimonial-card {
  @apply bg-gray-900 border border-gray-800 rounded-2xl p-6;
}
.stat-card {
  @apply bg-gray-900 border border-gray-800 rounded-xl p-5;
}
.article-card {
  @apply bg-gray-900 border border-gray-800 hover:border-gray-600 rounded-2xl p-6 transition-all duration-200 hover:-translate-y-1;
}
.article-tag {
  @apply inline-block text-xs font-bold px-3 py-1 rounded-full mb-3;
}

/* Threat Cards */
.threat-card {
  @apply bg-gray-800/50 rounded-xl p-4;
}
.progress-bar {
  @apply w-full bg-gray-700 rounded-full h-1.5;
}
.progress-fill {
  @apply h-1.5 rounded-full transition-all duration-1000;
}

/* Alert Cards */
.alert-card {
  @apply bg-gray-900 border border-gray-800 rounded-2xl p-6 transition-all duration-200 hover:shadow-xl hover:-translate-y-0.5;
}

/* Risk Cards */
.risk-card {
  @apply bg-gray-900 border rounded-xl p-5;
}
.risk-item {
  @apply flex items-center justify-between text-sm py-2 border-b border-gray-800 last:border-0;
}
.risk-item span:first-child {
  @apply text-gray-300;
}

/* Skills */
.skill-card {
  @apply bg-gray-900 border border-gray-800 hover:border-gray-700 rounded-xl p-5 text-center transition-all duration-200;
}
.skill-icon {
  @apply text-3xl mb-3;
}
.skill-tag {
  @apply bg-gray-800 text-gray-400 text-xs px-2 py-1 rounded-full;
}

/* Income Cards */
.income-card {
  @apply bg-gray-900 border border-gray-800 rounded-2xl p-6 flex items-start space-x-5 hover:border-emerald-500/30 transition-all duration-200;
}
.income-number {
  @apply text-5xl font-black text-gray-800 flex-shrink-0 leading-none;
}

/* Checklist */
.checklist-item {
  @apply flex items-start cursor-pointer hover:text-white transition;
}

/* Protection Steps */
.protection-step {
  @apply flex items-start space-x-4 bg-gray-900 border border-gray-800 rounded-xl p-5;
}
.step-number {
  @apply text-2xl font-black text-emerald-400 flex-shrink-0 leading-none;
}

/* Quiz */
.quiz-option {
  @apply flex items-center space-x-3 bg-gray-800 hover:bg-gray-700 border border-gray-700 hover:border-emerald-500/50 rounded-lg px-4 py-3 cursor-pointer transition text-sm text-gray-300;
}

/* Article Content */
.article-content h2 {
  @apply text-2xl font-black text-white mb-4 mt-8;
}
.article-content p {
  @apply text-gray-400 leading-relaxed mb-4;
}
.article-content strong {
  @apply text-white;
}
.article-content ul {
  @apply space-y-2 mb-4;
}
.article-content li {
  @apply text-gray-400 flex items-start space-x-2;
}

/* Filter Buttons */
.filter-btn {
  @apply px-4 py-2 rounded-lg text-sm font-medium text-gray-400 bg-gray-900 border border-gray-800 hover:border-gray-600 hover:text-white transition cursor-pointer;
}
.filter-btn.active {
  @apply bg-emerald-600 border-emerald-600 text-white;
}

/* Ticker animation */
@keyframes ticker {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
.ticker-text {
  display: inline-block;
  animation: ticker 30s linear infinite;
}

/* Scrollbar */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: #111827; }
::-webkit-scrollbar-thumb { background: #374151; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #4b5563; }

/* Selection */
::selection { background: #10b981; color: #fff; }

/* Smooth scroll */
html { scroll-behavior: smooth; }