/* ============================================================
   BioSynx — camada de design do SITE (funil biovip)
   Mesma linguagem do app: Poppins, cards suaves com raio 20,
   tiles de ícone, chips, dourado como único protagonista.
   Carregada DEPOIS do <style> de cada página, então sobrepõe.
   ============================================================ */

:root {
    --u-card:    #191C22;
    --u-card-2:  #21252D;
    --u-line:    #272C35;
    --u-track:   rgba(255, 255, 255, .09);
    --u-shadow:  0 1px 2px rgba(0, 0, 0, .3), 0 10px 30px rgba(0, 0, 0, .25);

    --u-text:    #F1F3F7;
    --u-mut:     #8B94A2;
    --u-dim:     #5B6472;

    --u-gold:    #E8B53B;
    --u-gold-ink:#2B2005;

    --u-t-gold-bg:  rgba(232, 181, 59, .16);  --u-t-gold-fg:  #E8B53B;
    --u-t-green-bg: rgba(51, 190, 151, .16);  --u-t-green-fg: #4FD3A6;
    --u-t-red-bg:   rgba(229, 96, 90, .17);   --u-t-red-fg:   #F0817B;
    --u-t-slate-bg: rgba(255, 255, 255, .07); --u-t-slate-fg: #9AA3B2;

    /* alinha os tokens antigos das páginas ao sistema novo */
    --surface:   #191C22;
    --surface-2: #21252D;
    --line:      #272C35;
    --line-soft: #272C35;
    --ink:       #F1F3F7;
    --ink-soft:  #B9C0CB;
    --ink-mute:  #8B94A2;
    --r:  14px;
    --r-lg: 20px;
    --sans: 'Poppins', system-ui, -apple-system, sans-serif;
}

body {
    font-family: 'Poppins', system-ui, -apple-system, sans-serif;
    background: #0E0F12 !important;
    color: var(--u-text);
    font-size: 16px;
    line-height: 1.6;
}

/* superfícies — tudo que a página trata como card ganha a pele nova */
.card, .box, .panel, .feature, .bullet, .step, .price, .plan, .faq, .quote,
section > div[class*="card"], .cta-box, .lead-box {
    background: var(--u-card) !important;
    border: 1px solid var(--u-line) !important;
    border-radius: 20px !important;
    box-shadow: var(--u-shadow);
}

/* títulos */
h1, h2, h3 { font-family: inherit; color: var(--u-text); letter-spacing: -.02em; font-weight: 800; text-wrap: balance; }
h1 { font-size: clamp(28px, 7vw, 40px); line-height: 1.1; }
h2 { font-size: clamp(21px, 5vw, 27px); line-height: 1.2; }
h3 { font-size: 17px; font-weight: 700; }
p  { color: var(--u-mut); }
strong, b { color: var(--u-text); font-weight: 700; }

/* dourado só onde vale */
.grad, .gold, .hi, [class*="gold"] {
    background: none !important; -webkit-text-fill-color: currentColor !important;
    color: var(--u-gold) !important;
}

/* badges / chips */
.badge, .chip, .tag, .pill {
    display: inline-flex; align-items: center; gap: 6px;
    background: var(--u-t-gold-bg) !important; color: var(--u-t-gold-fg) !important;
    border: 0 !important; border-radius: 999px !important;
    padding: 5px 12px !important; font-size: 12px !important; font-weight: 700 !important;
}

/* botões / CTA */
.btn, .cta, button, a.btn, input[type=submit] {
    font-family: inherit !important; font-weight: 700 !important;
    border-radius: 16px !important; border: 0 !important;
    background: var(--u-gold) !important; color: var(--u-gold-ink) !important;
    box-shadow: 0 8px 22px rgba(232, 181, 59, .28) !important;
    padding: 15px 22px !important; font-size: 15px !important;
    display: inline-flex; align-items: center; justify-content: center; gap: 9px;
    text-decoration: none; cursor: pointer; letter-spacing: 0;
}
.btn--ghost, .btn-ghost, .btn.secondary, .btn--soft {
    background: var(--u-card) !important; color: var(--u-mut) !important;
    border: 1px solid var(--u-line) !important; box-shadow: none !important;
}

/* formulários */
input[type=text], input[type=email], input[type=tel], input[type=password],
input[type=number], select, textarea {
    width: 100%; font-family: inherit; font-size: 15px; font-weight: 500;
    color: var(--u-text); background: var(--u-card-2);
    border: 1px solid var(--u-line); border-radius: 12px; padding: 13px 14px;
    -webkit-appearance: none; appearance: none;
}
input:focus, select:focus, textarea:focus {
    outline: none; border-color: var(--u-gold); box-shadow: 0 0 0 3px rgba(232, 181, 59, .16);
}
::placeholder { color: var(--u-dim); }

/* listas de benefício */
li { color: var(--u-mut); }
li strong, li b { color: var(--u-text); }

/* divisores */
hr { border: 0; height: 1px; background: var(--u-line); }