:root {
  --bn-gold: #FFC940;
  --bn-dark: #07080B;
  --wa-green: #25D366;
  --wa-green-hover: #20BE5A;
  --brand-deep: #092E44;
  --brand-sun: #E7892E;
  --brand-leaf: #48AB4B;
}

html {
  scroll-behavior: smooth;
  font-family: 'Inter', sans-serif;
  background-color: #FAFAFA;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Outfit', sans-serif;
}

::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
  background: #092E44;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: #E7892E;
}

.card-hover-image {
  transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.group:hover .card-hover-image {
  transform: scale(1.05);
}

.editorial-text {
  line-height: 1.6;
  letter-spacing: -0.01em;
}

.scrollbar-hide::-webkit-scrollbar {
  display: none;
}

.scrollbar-hide {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* ==========================================================================
   BLACK NOVEMBER CAMPAIGN STYLES
   ========================================================================== */

/* Fixed Top Bar */
.bn-topbar {
  background-color: var(--bn-dark);
  color: var(--bn-gold);
  border-bottom: 1px solid rgba(255, 201, 64, 0.25);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.45);
  height: 48px;
  display: flex;
  align-items: center;
}

.bn-topbar-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
}

.bn-countdown {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  background: rgba(255, 201, 64, 0.14);
  border: 1px solid rgba(255, 201, 64, 0.35);
  color: var(--bn-gold);
  padding: 0.2rem 0.75rem;
  border-radius: 9999px;
  font-size: 1.125rem !important;
  line-height: 1.2;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* Offset Hero Navbar when Fixed Top Bar is visible */
.hero-navbar {
  top: 48px;
}

body.campanha-encerrada .hero-navbar {
  top: 0;
}

/* Hero Seal & Dark Campaign Overlay */
.bn-hero-seal {
  background: rgba(7, 8, 11, 0.82);
  border: 1px solid var(--bn-gold);
  color: var(--bn-gold);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35);
}

.bn-hero-overlay {
  background: linear-gradient(180deg, rgba(7, 8, 11, 0.72) 0%, rgba(9, 46, 68, 0.55) 55%, rgba(7, 8, 11, 0.80) 100%);
}

body.campanha-encerrada .bn-hero-overlay {
  background: rgba(0, 0, 0, 0.5);
}

/* Gold Discount Seal (Cards & Modals) */
.bn-badge {
  background-color: var(--bn-gold);
  color: var(--bn-dark);
  font-weight: 700;
  font-size: 0.75rem;
  line-height: 1.1;
  padding: 0.28rem 0.6rem;
  border-radius: 0.375rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  letter-spacing: 0.02em;
}

/* 50% OFF Gold Highlight Border (2 and 4 days packages) */
.bn-gold-border {
  border: 2px solid var(--bn-gold) !important;
  box-shadow: 0 0 0 1px rgba(255, 201, 64, 0.35), 0 10px 28px -5px rgba(255, 201, 64, 0.22) !important;
}

/* WhatsApp Buttons (Always Green) */
.btn-wa {
  background-color: var(--wa-green) !important;
  color: #ffffff !important;
  transition: all 0.25s ease;
}

.btn-wa:hover {
  background-color: var(--wa-green-hover) !important;
  transform: translateY(-1px);
}

/* Gold Text Utility */
.text-bn-gold {
  color: var(--bn-gold);
}

/* Campaign Disclaimer Note */
.bn-disclaimer {
  font-size: 0.75rem;
  line-height: 1.45;
  color: #6b7280;
}

.bn-disclaimer-dark {
  font-size: 0.75rem;
  line-height: 1.45;
  color: #9ca3af;
}

/* Post-Campaign Automatic Hide/Revert State */
body.campanha-encerrada .bn-only,
body.campanha-encerrada #bn-topbar {
  display: none !important;
}

body:not(.campanha-encerrada) .bn-fallback {
  display: none !important;
}

body.campanha-encerrada .bn-gold-border {
  border: 1px solid #f3f4f6 !important;
  box-shadow: none !important;
}

/* Mobile Responsive Adjustments for Fixed Top Bar (Single Line) */
@media (max-width: 640px) {
  .bn-topbar {
    height: 42px;
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
  }
  .hero-navbar {
    top: 42px;
  }
  .bn-topbar-inner {
    gap: 0.5rem;
    font-size: 0.75rem;
  }
  .bn-topbar-hide-sm {
    display: none;
  }
  .bn-countdown {
    padding: 0.15rem 0.55rem;
    font-size: 0.975rem !important;
  }
  .bn-topbar-btn {
    padding: 0.2rem 0.5rem !important;
    font-size: 0.65rem !important;
  }
}

/* ==========================================================================
   PATCH: utilitários Tailwind que não existiam no main.css compilado
   (adicionados pelas mudanças da Black November). Gerado manualmente.
   Se recompilar o Tailwind no futuro, este bloco pode ser removido.
   ========================================================================== */
@layer utilities {
  .-mx-6 { margin-inline: calc(var(--spacing) * -6); }
  .mt-0\.5 { margin-top: calc(var(--spacing) * 0.5); }
  .mt-1\.5 { margin-top: calc(var(--spacing) * 1.5); }
  .mt-2\.5 { margin-top: calc(var(--spacing) * 2.5); }
  .mt-3 { margin-top: calc(var(--spacing) * 3); }
  .mt-10 { margin-top: calc(var(--spacing) * 10); }
  .mt-14 { margin-top: calc(var(--spacing) * 14); }
  .mb-1\.5 { margin-bottom: calc(var(--spacing) * 1.5); }
  .mb-8 { margin-bottom: calc(var(--spacing) * 8); }
  .mb-14 { margin-bottom: calc(var(--spacing) * 14); }
  .pt-10 { padding-top: calc(var(--spacing) * 10); }
  .pt-36 { padding-top: calc(var(--spacing) * 36); }
  .py-20 { padding-block: calc(var(--spacing) * 20); }
  .gap-1\.5 { gap: calc(var(--spacing) * 1.5); }
  .gap-2\.5 { gap: calc(var(--spacing) * 2.5); }
  .top-3 { top: calc(var(--spacing) * 3); }
  .left-3 { left: calc(var(--spacing) * 3); }
  .right-3 { right: calc(var(--spacing) * 3); }
  .left-\[16\%\] { left: 16%; }
  .h-36 { height: calc(var(--spacing) * 36); }
  .h-\[75\%\] { height: 75%; }
  .h-\[600px\] { height: 600px; }
  .h-\[800px\] { height: 800px; }
  .w-\[68\%\] { width: 68%; }
  .w-\[600px\] { width: 600px; }
  .w-\[800px\] { width: 800px; }
  .max-w-\[240px\] { max-width: 240px; }
  .z-\[90\] { z-index: 90; }
  .flex-grow { flex-grow: 1; }
  .items-stretch { align-items: stretch; }
  .overflow-x-auto { overflow-x: auto; }
  .leading-snug { --tw-leading: 1.375; line-height: 1.375; }
  .text-\[11px\] { font-size: 11px; }
  .opacity-30 { opacity: 30%; }
  .opacity-80 { opacity: 80%; }
  .object-\[50\%_0\%\] { object-position: 50% 0%; }
  .delay-100 { transition-delay: 100ms; }
  .bg-white\/80 { background-color: color-mix(in oklab, #fff 80%, transparent); }
  .hover\:bg-white:hover { background-color: #fff; }
  .-translate-x-1\/3 { --tw-translate-x: calc(1 / 3 * 100% * -1); translate: var(--tw-translate-x) var(--tw-translate-y); }
  .-translate-y-1\/2 { --tw-translate-y: calc(1 / 2 * 100% * -1); translate: var(--tw-translate-x) var(--tw-translate-y); }
  .translate-y-4 { --tw-translate-y: calc(var(--spacing) * 4); translate: var(--tw-translate-x) var(--tw-translate-y); }
  .from-black\/50 { --tw-gradient-from: color-mix(in oklab, #000 50%, transparent); --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); }
  .from-black\/70 { --tw-gradient-from: color-mix(in oklab, #000 70%, transparent); --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); }
  .via-black\/30 { --tw-gradient-via: color-mix(in oklab, #000 30%, transparent); --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-via-stops); }
  .via-\[\#051622\]\/60 { --tw-gradient-via: color-mix(in oklab, #051622 60%, transparent); --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-via-stops); }
  @media (hover: hover) {
    .group:hover .group-hover\:opacity-100 { opacity: 100%; }
    .group:hover .group-hover\:translate-y-0 { --tw-translate-y: 0px; translate: var(--tw-translate-x) var(--tw-translate-y); }
  }
  @media (width >= 40rem) {
    .sm\:flex-row { flex-direction: row; }
    .sm\:text-base { font-size: 1rem; line-height: 1.5; }
    .sm\:text-5xl { font-size: 3rem; line-height: 1; }
  }
  @media (width >= 48rem) {
    .md\:mt-20 { margin-top: calc(var(--spacing) * 20); }
    .md\:text-sm { font-size: 0.875rem; line-height: calc(1.25 / 0.875); }
    .md\:w-1\/3 { width: calc(1 / 3 * 100%); }
  }
  @media (width >= 64rem) {
    .lg\:mx-0 { margin-inline: 0; }
    .lg\:px-0 { padding-inline: 0; }
    .lg\:pt-40 { padding-top: calc(var(--spacing) * 40); }
    .lg\:pb-20 { padding-bottom: calc(var(--spacing) * 20); }
    .lg\:translate-y-8 { --tw-translate-y: calc(var(--spacing) * 8); translate: var(--tw-translate-x) var(--tw-translate-y); }
  }
}