/* =============================================================================
   TEMA CLARO — Ultrapep Peptides
   Referência: /pure (base clara, acento azul #2A5D94 no lugar do dourado,
   topbar e footer azul-grafite, seção da equipe em #EEF4F8). Aqui o acento é
   o azul do wordmark (#1F5FD3), o navy do wordmark (#0E2549) vira texto,
   topbar e footer; o teal (#15B3A8) entra nos pontos das badges e no degradê
   do painel do hero (menta → azul).
   ========================================================================== */

:root {
  color-scheme: light;

  --bg:        #F3F8FC;
  --bg-2:      #EAF2F9;
  --surface:   #FFFFFF;
  --surface-2: #F9FCFF;

  --acc:        #1F5FD3;
  --acc-bright: #15B3A8;
  --acc-dim:    #174AA8;
  --acc-rgb:    31 95 211;
  --acc-bright-rgb: 21 179 168;
  --accent-grad: linear-gradient(96deg, #1F5FD3, #1C6FD0 92%);

  --line:        rgb(14 37 73 / .14);
  --line-strong: rgb(14 37 73 / .26);
  --line-acc:    rgb(31 95 211 / .42);

  --text:       #0E2549;
  --text-muted: #4D6078;
  --text-faint: #71839A;

  --atmosfera:
    radial-gradient(52rem 30rem at 84% -10%, rgb(21 179 168 / .10), transparent 66%),
    radial-gradient(44rem 30rem at 5% 0%, rgb(31 95 211 / .07), transparent 68%);
  --grade: rgb(14 37 73 / .03);

  --shadow-card: 0 12px 32px -24px rgb(14 37 73 / .36);

  --ghost-bg: rgba(14,37,73,.05);
  --ghost-bg-hover: rgba(14,37,73,.1);
  --seller-bg: var(--surface);
  --seller-bg-hover: var(--surface-2);
  --seller-line: var(--line-strong);
  --seller-line-hover: var(--line-acc);

  /* Faixa de aviso no navy da marca (referência: azul-grafite #1d2730) */
  --topbar-bg: #0E2549;
  --topbar-line: rgba(255,255,255,.08);
  --topbar-ink: #F2C4BC;
  --topbar-strong: #FFFFFF;
  --topbar-icon: #E05A4B;

  --header-stuck: rgba(255,255,255,.92);
  --mark-bg: #FFFFFF;
  --phone-bg: linear-gradient(160deg, #2A3A52, #0E2549 64%);

  --hero-foto-bg: #FFFFFF;
  --painel-grad: linear-gradient(122deg, #CBEFE3 0%, #CFE3F4 46%, #C6D8F2 100%);

  /* Segunda seção contínua, sem divisórias entre os itens */
  --trust-bg: var(--bg-2);
  --trust-gap: 0px;
  --trust-grid: transparent;
  --trust-item-bg: var(--bg-2);

  --card-bg: linear-gradient(168deg, #FFFFFF, #F6FBFF 68%);
  --card-line: rgb(14 37 73 / .17);
  --card-top: linear-gradient(90deg, transparent, rgb(31 95 211 / .28) 30%, rgb(21 179 168 / .34) 70%, transparent);
  /* Ícones: bloco azul chapado com desenho branco (referência) */
  --card-icon-line: var(--acc);
  --card-icon-bg: var(--acc);
  --card-icon-ink: #FFFFFF;

  --step-bg: var(--surface);

  --team-bg: #EDF3F9;
  --badge-ink: #29435C;

  --finale-bg:
    radial-gradient(90% 130% at 50% 0%, rgb(31 95 211 / .12), transparent 58%),
    radial-gradient(70% 100% at 84% 100%, rgb(21 179 168 / .12), transparent 60%),
    var(--surface);

  --footer-bg: #0E2549;
  --footer-line: rgb(21 179 168 / .22);
  --footer-ink: #F4F8FB;
  --footer-link: #A7B6C1;
  --footer-link-hover: #6EE3DA;
  --footer-faint: #92A3AF;
  --footer-strong: #D7E2EA;

  --sticky-bg: rgba(255,255,255,.93);
  --consent-bg: rgba(255,255,255,.97);
}

/* Superfícies: seções brancas; a faixa de credibilidade e a comunidade em azul-gelo */
main > .section { background: #FFFFFF; }
main > .section.team { background: var(--team-bg); }

.site-footer .rule { background: linear-gradient(90deg, transparent, rgb(110 227 218 / .28) 50%, transparent); }
.site-footer__copy { padding-top: 1.5rem; border-top: 1px solid rgba(167,182,193,.16); text-align: center; }

@media (prefers-contrast: more) {
  :root {
    --line: rgba(14,37,73,.3);
    --line-strong: rgba(14,37,73,.45);
    --text-muted: #35475C;
    --text-faint: #53657A;
  }
}