@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Merriweather:ital,wght@0,300;0,400;0,700;0,900;1,300;1,400;1,700&family=Playfair+Display:ital,wght@0,600;0,700;0,800;1,600&display=swap');

:root {
  --color-navy: #0A2342;
  --color-navy-dark: #061528;
  --color-navy-light: #16365c;
  --color-green: #009543;
  --color-green-dark: #007534;
  --color-gold: #B8860B;
  --color-gold-light: #dfa822;
  --color-red: #D90429;
  --color-bg: #F8F9FA;
  --color-surface: #FFFFFF;
  --color-text: #1E293B;
  --color-text-muted: #64748B;
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-serif: 'Merriweather', Georgia, Cambria, serif;
  --font-display: 'Playfair Display', Georgia, serif;
}

body {
  font-family: var(--font-sans);
  background-color: var(--color-bg);
  color: var(--color-text);
  margin: 0;
  padding: 0;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, .font-editorial {
  font-family: var(--font-serif);
}

.font-display {
  font-family: var(--font-display);
}

/* Colores personalizados de marca */
.bg-navy-900 { background-color: var(--color-navy-dark); }
.bg-navy-800 { background-color: var(--color-navy); }
.bg-navy-700 { background-color: var(--color-navy-light); }
.text-navy-900 { color: var(--color-navy); }
.border-navy-800 { border-color: var(--color-navy); }

.bg-diplogreen { background-color: var(--color-green); }
.text-diplogreen { color: var(--color-green); }
.border-diplogreen { border-color: var(--color-green); }

.bg-diplogold { background-color: var(--color-gold); }
.text-diplogold { color: var(--color-gold); }
.border-diplogold { border-color: var(--color-gold); }

.bg-diplored { background-color: var(--color-red); }
.text-diplored { color: var(--color-red); }

/* Badges temáticos para cada sección */
.badge-diplodato { background-color: #FEF3C7; color: #92400E; border: 1px solid #FDE68A; }
.badge-esnoticia { background-color: #DBEAFE; color: #1E40AF; border: 1px solid #BFDBFE; }
.badge-diploafrica { background-color: #DCFCE7; color: #166534; border: 1px solid #BBF7D0; }
.badge-diplofas { background-color: #FEE2E2; color: #991B1B; border: 1px solid #FECACA; }
.badge-diplocult { background-color: #F3E8FF; color: #6B21A8; border: 1px solid #E9D5FF; }
.badge-diplofocus { background-color: #E0E7FF; color: #3730A3; border: 1px solid #C7D2FE; }
.badge-diploser { background-color: #CCFBF1; color: #115E59; border: 1px solid #99F6E4; }
.badge-diploview { background-color: #FFEDD5; color: #9A3412; border: 1px solid #FED7AA; }
.badge-diplodeport { background-color: #F1F5F9; color: #334155; border: 1px solid #E2E8F0; }
.badge-diplored { background-color: #334155; color: #F8FAFC; border: 1px solid #1E293B; }

/* Animaciones sutiles */
.transition-smooth {
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.card-hover:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 24px -10px rgba(10, 35, 66, 0.15);
}

/* Efecto de ticker de noticias */
@keyframes ticker {
  0% { transform: translate3d(0, 0, 0); }
  100% { transform: translate3d(-50%, 0, 0); }
}

.ticker-wrap {
  overflow: hidden;
  white-space: nowrap;
}

.ticker-move {
  display: inline-block;
  white-space: nowrap;
  animation: ticker 35s linear infinite;
}

.ticker-move:hover {
  animation-play-state: paused;
}

/* Estilo para artículos y contenido enriquecido */
.article-content p {
  margin-bottom: 1.25rem;
  line-height: 1.8;
  font-size: 1.1rem;
}

.article-content h2, .article-content h3 {
  font-family: var(--font-serif);
  color: var(--color-navy);
  margin-top: 2rem;
  margin-bottom: 1rem;
}

.article-content blockquote {
  font-family: var(--font-serif);
  font-style: italic;
  border-left: 4px solid var(--color-gold);
  background-color: #F8F9FA;
  padding: 1rem 1.5rem;
  margin: 1.5rem 0;
  color: var(--color-navy);
}

/* Scrollbar estilizado */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: #f1f1f1;
}
::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}