/* =====================================================================
   BASEUS CAPITAL GROUP — tema visual
   assets/css/bcg-theme.css · v2.0
   ---------------------------------------------------------------------
   Só aparência: cor, tipografia e superfície. Nenhuma regra aqui muda
   posição, tamanho de caixa, grid ou breakpoint. Estrutura, IDs, classes
   funcionais e comportamento continuam exatamente como estão.

   Carregar DEPOIS de todo CSS existente, no <head>:
     <link rel="stylesheet" href="/assets/css/bcg-theme.css">
   ===================================================================== */

/* ---------------------------------------------------------------------
   Montserrat — hospedada no próprio domínio.
   Evita requisição a terceiro, dispensa afrouxar a CSP e elimina o
   salto de texto que o Google Fonts costuma causar no primeiro acesso.
   ------------------------------------------------------------------ */
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 300; font-display: swap;
  src: url('/assets/fonts/montserrat-latin-300-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 300; font-display: swap;
  src: url('/assets/fonts/montserrat-latin-ext-300-normal.woff2') format('woff2');
  unicode-range: U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF; }

@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('/assets/fonts/montserrat-latin-400-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('/assets/fonts/montserrat-latin-ext-400-normal.woff2') format('woff2');
  unicode-range: U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF; }

@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('/assets/fonts/montserrat-latin-500-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('/assets/fonts/montserrat-latin-ext-500-normal.woff2') format('woff2');
  unicode-range: U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF; }

@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('/assets/fonts/montserrat-latin-600-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('/assets/fonts/montserrat-latin-ext-600-normal.woff2') format('woff2');
  unicode-range: U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF; }

@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('/assets/fonts/montserrat-latin-700-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('/assets/fonts/montserrat-latin-ext-700-normal.woff2') format('woff2');
  unicode-range: U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF; }

/* ---------------------------------------------------------------------
   Paleta oficial
   ------------------------------------------------------------------ */
:root {
  --bcg-preto:          #000000;
  --bcg-verde-profundo: #0B1F16;
  --bcg-verde-inst:     #134E3B;
  --bcg-verde-sage:     #6B8F6F;
  --bcg-off-white:      #EAE6D9;
  --bcg-branco:         #FFFFFF;

  /* Dois tons derivados, mesma matiz da paleta — não são cores novas.
     O claro faz o gradiente do botão primário respirar; o escuro dá
     borda visível sobre fundo preto sem virar contorno. */
  --bcg-verde-luz:      #1A6B4F;   /* clareamento de --bcg-verde-inst   */
  --bcg-verde-borda:    #16382A;   /* entre profundo e institucional    */

  --bcg-texto:          var(--bcg-off-white);
  --bcg-texto-forte:    var(--bcg-branco);
  --bcg-texto-suave:    color-mix(in srgb, var(--bcg-off-white) 62%, transparent);
  --bcg-superficie:     var(--bcg-verde-profundo);
  --bcg-linha:          color-mix(in srgb, var(--bcg-verde-sage) 22%, transparent);

  /* Nomes da identidade anterior, remapeados. Qualquer regra existente
     que ainda use var(--gold) passa a receber verde, sem edição. */
  --gold:   var(--bcg-verde-sage);
  --ebony:  var(--bcg-preto);
  --forest: var(--bcg-verde-profundo);
  --green:  var(--bcg-verde-inst);
  --sage:   var(--bcg-verde-sage);
  --paper:  var(--bcg-off-white);
}

/* ---------------------------------------------------------------------
   Tipografia
   Só família, peso e espaçamento. Tamanhos ficam como estão, para não
   mexer no ritmo vertical de nenhuma página.
   ------------------------------------------------------------------ */
body, button, input, select, textarea, .btn, nav, footer {
  font-family: 'Montserrat', ui-sans-serif, system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Montserrat', ui-sans-serif, system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: -0.015em;
}
h1 { letter-spacing: -0.025em; }
h4, h5, h6 { font-weight: 600; letter-spacing: 0; }

p, li { font-weight: 400; }
small, .caption, .meta, .legend, .bcg-notice { font-weight: 300; }
nav a, .nav a, .menu a { font-weight: 500; letter-spacing: 0.01em; }
.btn, button, [role="button"] { font-weight: 600; letter-spacing: 0.02em; }
.eyebrow, .kicker, .label, .badge { font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; }

/* ---------------------------------------------------------------------
   Superfícies
   ------------------------------------------------------------------ */
body {
  background-color: var(--bcg-preto);
  color: var(--bcg-texto);
}

/* Iluminação verde discreta, substituindo a atmosfera dourada. */
body::before {
  content: '';
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(70rem 48rem at 72% -12%, rgba(19, 78, 59, .38), transparent 62%),
    radial-gradient(52rem 40rem at 8% 108%, rgba(11, 31, 22, .72), transparent 60%);
}

/* ---------------------------------------------------------------------
   Componentes
   ------------------------------------------------------------------ */
header, .header, .navbar, nav.main {
  background-color: var(--bcg-preto);
  border-bottom: 1px solid var(--bcg-linha);
}
header a, .header a, .navbar a { color: var(--bcg-off-white); }
header a:hover, .header a:hover, .navbar a:hover { color: var(--bcg-verde-sage); }

.btn-primary, .btn.primary, button.primary, .cta-primary, [data-variant="primary"] {
  background-image: linear-gradient(135deg, var(--bcg-verde-inst) 0%, var(--bcg-verde-luz) 100%);
  border: 1px solid var(--bcg-verde-luz);
  color: var(--bcg-branco);
}
.btn-primary:hover, .btn.primary:hover, button.primary:hover, .cta-primary:hover {
  background-image: linear-gradient(135deg, var(--bcg-verde-luz) 0%, var(--bcg-verde-inst) 100%);
}

.btn-secondary, .btn.secondary, button.secondary, .cta-secondary, [data-variant="secondary"] {
  background: transparent;
  border: 1px solid var(--bcg-verde-sage);
  color: var(--bcg-off-white);
}
.btn-secondary:hover, .btn.secondary:hover, button.secondary:hover, .cta-secondary:hover {
  border-color: var(--bcg-verde-inst);
  background-color: rgba(19, 78, 59, .18);
}

.card, .panel, .tier, .plan, [class*="card" i] {
  background-color: var(--bcg-verde-profundo);
  border: 1px solid var(--bcg-linha);
  box-shadow: 0 1px 2px rgba(0,0,0,.4), 0 12px 32px rgba(0,0,0,.28);
}

hr, .divider, .rule, .separator {
  border: 0; height: 1px;
  background-color: var(--bcg-linha);
}

svg:not([class*="logo" i]) [stroke]:not([stroke="none"]) { stroke: var(--bcg-verde-sage); }
svg:not([class*="logo" i]) [fill]:not([fill="none"]):not([fill^="url"]) { fill: var(--bcg-verde-inst); }
.icon, [class*="icon" i]:not([class*="logo" i]) { color: var(--bcg-verde-sage); }

a { color: var(--bcg-off-white); text-decoration-color: var(--bcg-verde-inst); }
a:hover { text-decoration-color: var(--bcg-verde-sage); }
:focus-visible { outline: 2px solid var(--bcg-verde-sage); outline-offset: 3px; }

::selection { background: var(--bcg-verde-inst); color: var(--bcg-branco); }

/* ---------------------------------------------------------------------
   Logo — troca por CSS, sem tocar no HTML.
   Só age em elementos com "logo"/"brand" no nome da classe ou do id.
   Se o seu HTML usar outro nome, acrescente o seletor aqui.
   ------------------------------------------------------------------ */
img[class*="logo" i], img[id*="logo" i], img[class*="brand" i] {
  content: url('/assets/img/brand/baseus-lockup-horizontal.webp');
  filter: none !important;          /* anula qualquer matiz dourada antiga */
}
/* Deliberadamente NÃO se usa img[alt*="Baseus"]: o alt aparece em prints
   de tela e imagens de conteúdo, e trocá-las por logo seria destrutivo. */

/* ---------------------------------------------------------------------
   Acessibilidade e movimento
   ------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  body::before { background-attachment: initial; }
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

/* Mobile: menos peso de composição, mesma aparência. */
@media (max-width: 768px) {
  body::before {
    background: radial-gradient(40rem 30rem at 70% -10%, rgba(19, 78, 59, .32), transparent 64%);
  }
  .card, .panel, [class*="card" i] { box-shadow: 0 1px 2px rgba(0,0,0,.4); }
}