/* DESIGN PREMIUM E MELHORIAS DE ENGAJAMENTO */
:root {
  --gold-glow: rgba(201,169,110,0.3);
  --glass-bg: rgba(20, 20, 20, 0.65);
  --glass-border: rgba(255, 255, 255, 0.05);
}

body {
  background: radial-gradient(circle at top center, #151515 0%, var(--bg-primary) 100%);
}

/* Fix para a navbar sobrepondo o título no Hero e ajuste de alinhamento */
.hero {
  padding-top: 40px !important;
  align-items: flex-start !important;
}

/* Efeito Glow no Video do Hero */
#hero-video {
  box-shadow: 0 0 60px rgba(201, 169, 110, 0.15);
  transform: scale(1);
  transition: transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1), box-shadow 0.6s ease;
}
#hero-video:hover {
  transform: scale(1.02);
  box-shadow: 0 0 80px rgba(201, 169, 110, 0.3);
}

/* Glassmorphism na Busca */
.search-field {
  background: var(--glass-bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--glass-border);
  box-shadow: 0 10px 30px rgba(0,0,0,0.5);
  transition: all 0.4s ease;
}
.search-field:focus {
  background: rgba(20,20,20,0.85);
  border-color: var(--gold);
  box-shadow: 0 0 30px var(--gold-glow);
  transform: translateY(-2px);
}

/* Cards (Artigos, Notícias, Recursos) com hover dinâmico */
.artigo-card, .noticia-principal, .noticia-card-pequeno, .recurso-card, .contato-card {
  background: var(--glass-bg);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--glass-border) !important;
  box-shadow: 0 8px 32px rgba(0,0,0,0.4);
  transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
}
.artigo-card:hover, .noticia-principal:hover, .noticia-card-pequeno:hover, .recurso-card:hover, .contato-card:hover {
  border-color: rgba(201, 169, 110, 0.5) !important;
  box-shadow: 0 15px 40px rgba(0,0,0,0.7) !important;
  transform: translateY(-5px) !important;
}

/* Efeito Fotográfico Elite nas Imagens */
.placeholder-img, .noticia-card-pequeno div[style*="background: url"] {
  filter: grayscale(40%) contrast(1.1) brightness(0.9);
  transition: filter 0.8s ease, transform 0.8s cubic-bezier(0.25, 1, 0.5, 1) !important;
}
.noticia-principal:hover .placeholder-img, .noticia-card-pequeno:hover div[style*="background: url"] {
  filter: grayscale(0%) contrast(1) brightness(1);
  transform: scale(1.03);
}

/* Tags Chamativas -> Elite Minimalista */
.noticia-tag, .artigo-category {
  background: rgba(201,169,110,0.05) !important;
  color: var(--gold) !important;
  font-weight: 500 !important;
  border: 1px solid rgba(201,169,110,0.3) !important;
  letter-spacing: 0.15em !important;
  box-shadow: none !important;
  padding: 0.3rem 0.8rem !important;
  border-radius: 2px !important;
}

/* Setas animadas nos links */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 0.85rem;
  transition: color 0.3s ease, transform 0.3s ease;
}
.link-arrow:hover {
  transform: translateX(5px);
  color: #fff;
}

/* Botões de Filtro Modernos */
.filter-btn {
  border-radius: 30px !important;
  text-transform: uppercase;
  font-weight: 600;
  letter-spacing: 0.1em;
  padding: 0.6rem 1.5rem !important;
  transition: all 0.4s ease !important;
  background: transparent !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
}
.filter-btn:hover, .filter-btn.active {
  background: var(--gold) !important;
  color: #000 !important;
  border-color: var(--gold) !important;
  box-shadow: 0 0 20px rgba(201,169,110,0.15);
}

/* Títulos com Gradiente Dourado */
h2 {
  background: linear-gradient(to right, #ffffff, var(--gold));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
}
.noticias-destaque-section h2, .contato-section h2, .recursos-section h2 {
  display: block; /* Garante que o text-align funcione */
}

/* Animação do shimmer elegante */
.placeholder-img {
  position: relative;
  overflow: hidden;
}
.placeholder-img::after {
  content: '';
  position: absolute;
  top: 0; left: -100%; width: 50%; height: 100%;
  background: linear-gradient(to right, transparent, rgba(255,255,255,0.08), transparent);
  animation: shimmer 4s infinite;
  pointer-events: none;
}
@keyframes shimmer {
  100% { left: 200%; }
}