/* =============================================================
 * /assets/css/brand.css
 * Bom Vendedor Brasil — Design System Oficial
 * Versão: V2.0 BRAND BRASIL — Verde Esmeralda
 * Atualizado: 07/05/2026
 *
 * IDENTIDADE OFICIAL:
 *  Verde Escuro (primário):    #0D3B36
 *  Verde Esmeralda (ação):     #0FA67A
 *  Verde Menta (claro):        #E8F7F1
 *  Laranja Destaque (CTA):     #FF6A00
 *  Cinza Neutro (fundo):       #F1F3F5
 *  Cinza Escuro (texto):       #1F2937
 *  Branco:                     #FFFFFF
 *  Gradiente principal: #0D3B36 → #0FA67A
 *
 * TIPOGRAFIA:
 *  Títulos: Poppins (600/700/800/900)
 *  Texto:   Inter (400/500/600/700)
 *
 * GRADE: 8px
 * ============================================================= */

:root {
    /* ===== Paleta oficial ===== */
    --bv-green:        #0D3B36;
    --bv-green-2:      #0A2D2A;
    --bv-emerald:      #0FA67A;
    --bv-emerald-2:    #0E9069;
    --bv-mint:         #E8F7F1;
    --bv-mint-2:       #CFEDDF;
    --bv-orange:       #FF6A00;
    --bv-orange-2:     #E15A00;
    --bv-orange-soft:  rgba(255, 106, 0, .12);

    --bv-gray-50:      #F8FAFB;
    --bv-gray-100:     #F1F3F5;
    --bv-gray-200:     #E5E7EB;
    --bv-gray-300:     #D1D5DB;
    --bv-gray-500:     #6B7280;
    --bv-gray-700:     #374151;
    --bv-gray-900:     #1F2937;

    --bv-text:         #1F2937;
    --bv-muted:        #6B7280;
    --bv-border:       rgba(13, 59, 54, .12);
    --bv-border-soft:  rgba(13, 59, 54, .08);
    --bv-white:        #FFFFFF;

    --bv-success:      #0FA67A;
    --bv-danger:       #DC2626;
    --bv-warning:      #F59E0B;
    --bv-info:         #2563EB;

    /* ===== Aliases legacy (compatibilidade com CSS antigo) ===== */
    --bv-navy:    var(--bv-green);
    --bv-navy-2:  var(--bv-green-2);
    --bv-gold:    var(--bv-orange);
    --bv-blue:    var(--bv-emerald);
    --bv-gray:    var(--bv-gray-100);
    --bv-slate:   var(--bv-gray-500);

    /* ===== Aliases adicionais (legacy v3.0) ===== */
    --bv-primary:        var(--bv-emerald);
    --bv-primary-2:      var(--bv-emerald-2);
    --bv-primary-soft:   var(--bv-mint);
    --bv-success-2:      #0A8161;
    --bv-success-soft:   var(--bv-mint);
    --bv-text-light:     #94A3B8;
    --bv-text-muted:     var(--bv-muted);
    --bv-text-soft:      var(--bv-gray-700);
    --bv-transition:     var(--bv-tr);

    /* ===== Gradientes oficiais ===== */
    --bv-gradient:        linear-gradient(135deg, var(--bv-green) 0%, var(--bv-emerald) 100%);
    --bv-gradient-soft:   linear-gradient(135deg, var(--bv-mint) 0%, #ffffff 100%);
    --bv-gradient-orange: linear-gradient(135deg, var(--bv-orange) 0%, #FF8533 100%);

    /* ===== Tipografia ===== */
    --bv-font:        'Inter', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --bv-font-title:  'Poppins', 'Inter', system-ui, sans-serif;

    /* ===== Bordas (8px grid) ===== */
    --bv-radius-xs:   4px;
    --bv-radius-sm:   8px;
    --bv-radius-md:   12px;
    --bv-radius-lg:   16px;
    --bv-radius-xl:   20px;
    --bv-radius-2xl:  24px;
    --bv-radius-pill: 999px;

    /* ===== Sombras suaves ===== */
    --bv-shadow-xs:   0 1px 2px rgba(13, 59, 54, .04);
    --bv-shadow-sm:   0 2px 8px rgba(13, 59, 54, .06);
    --bv-shadow-md:   0 8px 20px rgba(13, 59, 54, .08);
    --bv-shadow-lg:   0 16px 40px rgba(13, 59, 54, .12);
    --bv-shadow-xl:   0 24px 60px rgba(13, 59, 54, .16);
    --bv-shadow-orange: 0 8px 22px rgba(255, 106, 0, .25);
    --bv-shadow-emerald: 0 8px 22px rgba(15, 166, 122, .22);

    /* ===== Transições ===== */
    --bv-tr-fast: .15s cubic-bezier(.4, 0, .2, 1);
    --bv-tr:      .25s cubic-bezier(.4, 0, .2, 1);
    --bv-tr-slow: .4s cubic-bezier(.4, 0, .2, 1);

    /* ===== Container ===== */
    --bv-container: 1280px;

    /* ===== Espaçamento (8px grid) ===== */
    --bv-sp-1:  4px;
    --bv-sp-2:  8px;
    --bv-sp-3:  12px;
    --bv-sp-4:  16px;
    --bv-sp-5:  20px;
    --bv-sp-6:  24px;
    --bv-sp-8:  32px;
    --bv-sp-10: 40px;
    --bv-sp-12: 48px;
    --bv-sp-16: 64px;
}

/* =========================================================
   RESET BASE
========================================================= */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
    margin: 0;
    font-family: var(--bv-font);
    color: var(--bv-text);
    background: #FFFFFF;
    line-height: 1.55;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
img, picture, video, svg { max-width: 100%; display: block; height: auto; }
button { font-family: inherit; cursor: pointer; }
input, textarea, select { font-family: inherit; }
a { color: inherit; text-decoration: none; }
a:hover { color: var(--bv-emerald); }

h1, h2, h3, h4, h5, h6 {
    font-family: var(--bv-font-title);
    font-weight: 800;
    color: var(--bv-green);
    line-height: 1.2;
    letter-spacing: -.02em;
    margin: 0 0 var(--bv-sp-3);
}
h1 { font-size: clamp(2rem, 4vw + 1rem, 3.5rem); font-weight: 900; }
h2 { font-size: clamp(1.5rem, 2vw + 1rem, 2.25rem); }
h3 { font-size: clamp(1.25rem, 1vw + 1rem, 1.5rem); }
h4 { font-size: 1.125rem; }
p  { margin: 0 0 var(--bv-sp-3); }

/* =========================================================
   CONTAINERS / GRID
========================================================= */
.container, .bv-container {
    width: min(var(--bv-container), calc(100% - 32px));
    margin-inline: auto;
}

.bv-sr-only {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* =========================================================
   BOTÕES (sistema)
========================================================= */
.bv-btn,
.bv-btn-primary,
.bv-btn-secondary,
.bv-btn-orange,
.bv-btn-ghost {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    padding: 10px 22px;
    border-radius: var(--bv-radius-pill);
    font-family: var(--bv-font);
    font-weight: 700;
    font-size: 15px;
    line-height: 1;
    text-decoration: none;
    border: 1px solid transparent;
    cursor: pointer;
    transition: transform var(--bv-tr), box-shadow var(--bv-tr), background var(--bv-tr), color var(--bv-tr);
    white-space: nowrap;
    user-select: none;
}

/* Primário — verde esmeralda (CTA principal) */
.bv-btn-primary,
.bv-btn--primary {
    background: var(--bv-gradient);
    color: var(--bv-white);
    box-shadow: var(--bv-shadow-emerald);
}
.bv-btn-primary:hover,
.bv-btn--primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 12px 28px rgba(15, 166, 122, .35);
    color: var(--bv-white);
}
.bv-btn-primary:active,
.bv-btn--primary:active { transform: translateY(0); }

/* Secundário — outline verde */
.bv-btn-secondary,
.bv-btn--secondary {
    background: var(--bv-white);
    color: var(--bv-green);
    border-color: var(--bv-green);
}
.bv-btn-secondary:hover,
.bv-btn--secondary:hover {
    background: var(--bv-mint);
    color: var(--bv-green);
    transform: translateY(-1px);
}

/* Laranja — destaque/ofertas */
.bv-btn-orange,
.bv-btn--orange {
    background: var(--bv-gradient-orange);
    color: var(--bv-white);
    box-shadow: var(--bv-shadow-orange);
}
.bv-btn-orange:hover,
.bv-btn--orange:hover {
    transform: translateY(-1px);
    box-shadow: 0 12px 28px rgba(255, 106, 0, .35);
    color: var(--bv-white);
}

/* Ghost / link */
.bv-btn-ghost,
.bv-btn--ghost {
    background: transparent;
    color: var(--bv-emerald);
    padding: 10px 16px;
}
.bv-btn-ghost:hover,
.bv-btn--ghost:hover {
    background: var(--bv-mint);
    color: var(--bv-green);
}

/* Tamanhos */
.bv-btn--sm { min-height: 36px; padding: 8px 16px; font-size: 13px; }
.bv-btn--lg { min-height: 52px; padding: 14px 28px; font-size: 16px; }
.bv-btn--block { width: 100%; }

/* Botão desabilitado */
.bv-btn[disabled],
.bv-btn-primary[disabled],
.bv-btn-secondary[disabled],
.bv-btn-orange[disabled] {
    opacity: .55;
    cursor: not-allowed;
    transform: none !important;
    box-shadow: none !important;
}

/* =========================================================
   BADGES / CHIPS / TAGS
========================================================= */
/* =========================================================
   BADGES / CHIPS / TAGS
   - Sem mudança de border-width no hover (causa tremor)
   - Transições suaves em color/background apenas
   - white-space: nowrap previne quebra de linha
========================================================= */
.bv-chip,
.bv-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 28px;
    padding: 4px 12px;
    border-radius: var(--bv-radius-pill);
    font-weight: 600;
    font-size: 12px;
    letter-spacing: .01em;
    line-height: 1.2;
    border: 1px solid var(--bv-border);
    background: var(--bv-white);
    color: var(--bv-green);
    white-space: nowrap;
    user-select: none;
    transition: background-color var(--bv-tr), color var(--bv-tr), border-color var(--bv-tr);
    /* will-change otimiza render — evita tremor */
    will-change: background-color, color;
    /* vertical alignment perfeito em fluxo de texto */
    vertical-align: middle;
}
.bv-chip--green,
.bv-badge--green { background: var(--bv-mint); color: var(--bv-green); border-color: var(--bv-mint-2); }
.bv-chip--orange,
.bv-badge--orange { background: var(--bv-orange-soft); color: var(--bv-orange-2); border-color: rgba(255,106,0,.25); }
.bv-chip--gold,
.bv-badge--gold { background: rgba(255, 184, 0, .14); color: #7A5700; border-color: rgba(255, 184, 0, .30); }
.bv-chip--blue,
.bv-badge--blue { background: rgba(15, 166, 122, .10); color: var(--bv-green); border-color: rgba(15, 166, 122, .22); }
.bv-chip--solid,
.bv-badge--solid { background: var(--bv-emerald); color: var(--bv-white); border-color: var(--bv-emerald); }

/* Badge desconto / oferta relâmpago — versão estável */
.bv-badge-discount {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: var(--bv-radius-sm);
    background: var(--bv-orange);
    color: var(--bv-white);
    font-weight: 800;
    font-size: 13px;
    line-height: 1;
    white-space: nowrap;
    border: 1px solid transparent; /* mantém width estável */
}

/* =========================================================
   CARDS (sistema)
========================================================= */
.bv-card {
    background: var(--bv-white);
    border: 1px solid var(--bv-border-soft);
    border-radius: var(--bv-radius-lg);
    box-shadow: var(--bv-shadow-xs);
    transition: box-shadow var(--bv-tr), transform var(--bv-tr), border-color var(--bv-tr);
}
.bv-card:hover {
    box-shadow: var(--bv-shadow-md);
    border-color: var(--bv-border);
}
.bv-card--hover:hover { transform: translateY(-3px); }
.bv-card--bordered { border: 1px solid var(--bv-border); }

/* =========================================================
   PREÇOS (semantics)
========================================================= */
.bv-price {
    color: var(--bv-orange);
    font-weight: 800;
    letter-spacing: -.02em;
    font-family: var(--bv-font);
}
.bv-price-old {
    color: var(--bv-muted);
    text-decoration: line-through;
    font-weight: 500;
    font-size: .875em;
}
.bv-price--green { color: var(--bv-emerald); }

/* =========================================================
   EYEBROW / LABELS DE SEÇÃO
========================================================= */
.bv-section-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--bv-emerald);
    font-family: var(--bv-font);
}
.bv-section-title {
    margin: var(--bv-sp-2) 0 var(--bv-sp-3);
    color: var(--bv-green);
    font-family: var(--bv-font-title);
    font-weight: 800;
    letter-spacing: -.02em;
    line-height: 1.15;
}
.bv-section-text {
    color: var(--bv-muted);
    line-height: 1.65;
    max-width: 60ch;
}

/* =========================================================
   FORMS / INPUTS
========================================================= */
.bv-input,
.bv-textarea,
.bv-select {
    width: 100%;
    min-height: 44px;
    padding: 10px 14px;
    border: 1px solid var(--bv-border);
    border-radius: var(--bv-radius-sm);
    background: var(--bv-white);
    color: var(--bv-text);
    font-size: 15px;
    font-family: var(--bv-font);
    outline: none;
    transition: border-color var(--bv-tr), box-shadow var(--bv-tr);
}
.bv-input:focus,
.bv-textarea:focus,
.bv-select:focus {
    border-color: var(--bv-emerald);
    box-shadow: 0 0 0 3px rgba(15, 166, 122, .15);
}
.bv-input::placeholder { color: var(--bv-muted); }
.bv-textarea { min-height: 120px; resize: vertical; }
.bv-label {
    display: block;
    margin-bottom: 6px;
    font-weight: 600;
    font-size: 14px;
    color: var(--bv-gray-700);
}

/* =========================================================
   ACESSIBILIDADE / FOCUS
========================================================= */
:focus-visible {
    outline: 3px solid var(--bv-emerald);
    outline-offset: 2px;
    border-radius: 2px;
}
button:focus-visible,
a:focus-visible {
    outline-offset: 4px;
}

/* =========================================================
   SCROLLBAR (sutileza)
========================================================= */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bv-gray-100); }
::-webkit-scrollbar-thumb { background: var(--bv-gray-300); border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: var(--bv-emerald); }

/* =========================================================
   RESPONSIVO BASE
========================================================= */
@media (max-width: 768px) {
    .container, .bv-container { width: min(100% - 24px, var(--bv-container)); }
    .bv-section-title { letter-spacing: -.015em; }
}