/* Global theme hook: single class to control brand color and font */
.site-theme {
  --brand-color: #D4AF37;
  font-family: 'Calibri Light', 'Calibri', sans-serif, 'Inter';
}

.scroll-show {
  opacity: 0;
  transform: translateY(10px);
  transition: all 0.8s ease-in-out;
}
.opacity-100 {
  opacity: 1 !important;
}
.translate-y-0 {
  transform: translateY(0) !important;
}
body { scroll-behavior: smooth; }
.gold { color: var(--brand-color); }

/* Header theme */
header { background-color: #1F1F1F !important; color: #FFFFFF !important; }
header nav a { color: #FFFFFF !important; }
header nav a:hover { color: var(--brand-color) !important; }

/* Mobile spacing and hero typography */
@media (max-width: 640px) {
  /* add safe lateral spacing on sections */
  section { padding-left: 1rem; padding-right: 1rem; }
  /* reduce main headings on small screens */
  h1 { font-size: 2rem; line-height: 2.5rem; }
  /* hero title and CTA for mobile */
  .hero-title { font-size: 2.35rem; line-height: 2.75rem; }
  .hero-cta { display: flex; flex-direction: column; gap: 0.75rem; align-items: center; }
  .hero-cta a { width: 100%; max-width: 320px; }
}
/* desktop/medium default CTA layout */
.hero-cta { display: flex; justify-content: center; align-items: center; gap: 1rem; flex-wrap: wrap; }

/* Hero background with grayscale overlay */
.hero {
  position: relative;
  overflow: hidden;
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  /* Use PNG by default to avoid 404s when WEBP is absent */
  background-image: url('../images/cognito_hero.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  filter: grayscale(100%);
  transform: scale(1.02);
  pointer-events: none;
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(31,31,31,0.45);
  pointer-events: none;
}
.hero > * { position: relative; z-index: 1; }
.hero p { color: #f3f4f6; }

/* Responsive cropping */
@media (max-width: 640px) {
  .hero::before { background-position: center top; }
}

/* Map common Tailwind yellow utilities to brand color when inside site-theme */
.site-theme .text-yellow-600,
.site-theme .text-yellow-700,
.site-theme .hover\:text-yellow-400:hover { color: var(--brand-color) !important; }
.site-theme .bg-yellow-600,
.site-theme .hover\:bg-yellow-700:hover { background-color: var(--brand-color) !important; }
.site-theme .border-yellow-600 { border-color: var(--brand-color) !important; }
/* Specific sizing for funil de vendas image */
.img-funil { max-width: 38%; height: auto; }
@media (max-width: 640px) { .img-funil { max-width: 64%; } }
/* Reusable 60% width image utility for services */
.img-60 { max-width: 60%; height: auto; }
@media (max-width: 640px) { .img-60 { max-width: 100%; } }
/* Services images: consistent sizing aligned to text */
.img-service { width: 100%; max-width: 358px; height: auto; }
@media (max-width: 640px) { .img-service { max-width: 100%; } }