/* =============================================================================
   TEMA ESCURO — Ultrapep Peptides
   Referência: "Dark Scientific Luxury" da home original, cujo acento dourado
   era "extraído do logo". Mesma regra: o acento aqui é o degradê do símbolo
   Ultrapep (teal #15B3A8 → azul #1C6FD0), clareado pra passar contraste em
   fundo escuro. Superfícies neutras frias (navy quase preto) no lugar dos
   neutros quentes. Verde WhatsApp continua exclusivo dos CTAs.
   ========================================================================== */

:root {
  color-scheme: dark;

  --bg:        #070B12;
  --bg-2:      #0A1019;
  --surface:   #0F1724;
  --surface-2: #142033;

  --acc:        #2FC4B9;   /* teal da marca, +luminância pra 7:1 sobre --bg */
  --acc-bright: #6EE3DA;
  --acc-dim:    #4A8DEE;   /* azul da marca, clareado (fim do degradê) */
  --acc-rgb:    47 196 185;
  --acc-bright-rgb: 110 227 218;
  --accent-grad: linear-gradient(96deg, #3BD2C6, #4A8DEE 92%);

  --line:        rgb(var(--acc-rgb) / .11);
  --line-strong: rgb(var(--acc-rgb) / .22);
  --line-acc:    rgb(var(--acc-rgb) / .42);

  --text:       #F2F6FA;
  --text-muted: #AFBCCB;
  --text-faint: #7F8DA0;

  --atmosfera:
    radial-gradient(56rem 34rem at 76% -10%, rgb(47 196 185 / .10), transparent 62%),
    radial-gradient(44rem 30rem at 6% 2%, rgb(28 111 208 / .16), transparent 60%);
  --grade: rgb(47 196 185 / .028);

  --shadow-card: 0 1px 0 rgb(var(--acc-rgb) / .07) inset, 0 20px 52px -30px rgba(0,0,0,1);

  --ghost-bg: rgba(255,255,255,.045);
  --ghost-bg-hover: rgba(255,255,255,.09);
  --seller-bg: transparent;
  --seller-bg-hover: rgba(255,255,255,.06);
  --seller-line: rgba(255,255,255,.16);
  --seller-line-hover: rgba(255,255,255,.26);

  /* Vermelho: SOMENTE na barra de alerta (aviso real de faixa etária) */
  --topbar-bg: #1A0D0C;
  --topbar-line: rgba(224,90,75,.28);
  --topbar-ink: #F2C4BC;
  --topbar-strong: #FFF0EC;
  --topbar-icon: #E05A4B;

  --header-stuck: rgba(7, 11, 18, .88);
  --mark-bg: radial-gradient(120% 120% at 30% 20%, #16263C, #0A1019 70%);
  --phone-bg: linear-gradient(160deg, #1B2A40, #070B12 64%);

  --trust-bg: linear-gradient(180deg, var(--surface), var(--bg-2));
  --trust-item-bg: var(--bg-2);

  --card-bg: linear-gradient(168deg, var(--surface-2), var(--surface) 68%);
  --card-top: linear-gradient(90deg, transparent, rgba(255,255,255,.16) 30%, rgba(255,255,255,.16) 70%, transparent);
  --card-icon-line: var(--line-acc);
  --card-icon-bg: radial-gradient(120% 120% at 30% 20%, rgb(var(--acc-rgb) / .16), rgb(var(--acc-rgb) / .04));
  --card-icon-ink: var(--acc);

  --step-bg: linear-gradient(168deg, var(--surface), var(--bg-2));

  --finale-bg:
    radial-gradient(90% 130% at 50% 0%, rgb(47 196 185 / .13), transparent 58%),
    radial-gradient(70% 100% at 84% 100%, rgb(28 111 208 / .24), transparent 60%),
    linear-gradient(168deg, var(--surface-2), var(--bg-2) 72%);

  --footer-bg: var(--bg-2);
  --footer-line: var(--line);
  --footer-ink: var(--text);
  --footer-link: var(--text-muted);
  --footer-link-hover: var(--acc);
  --footer-faint: var(--text-faint);
  --footer-strong: var(--text-muted);

  --sticky-bg: rgba(7,11,18,.93);
  --consent-bg: rgba(12, 18, 28, .97);
}

@media (prefers-contrast: more) {
  :root {
    --line: rgba(255,255,255,.22);
    --line-strong: rgba(255,255,255,.34);
    --text-muted: #C9D3DD;
    --text-faint: #97A4B2;
  }
}