/* ============================================================
   BrightMind — folha de estilo unica
   Abordagem: Flexbox + utilitarios + componentes prefixados "bm-"
   ============================================================ */

/* ---------- Variaveis / tokens ---------- */
:root {
    --indigo: #4f46e5;
    --violet: #7c3aed;
    --amber: #f59e0b;
    --bg: #faf9ff;
    --ink: #1e1b2e;
    --ink-soft: #55506b;
    --white: #ffffff;
    --line: #e8e4f5;
    --grad: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
    --grad-soft: linear-gradient(135deg, #eef0ff 0%, #f3ecff 100%);
    --shadow-sm: 0 4px 14px rgba(79, 70, 229, 0.08);
    --shadow-md: 0 12px 32px rgba(79, 70, 229, 0.14);
    --shadow-lg: 0 24px 60px rgba(79, 70, 229, 0.20);
    --radius: 18px;
    --radius-lg: 28px;
    --pill: 999px;
}

/* ---------- Reset enxuto ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    margin: 0;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    color: var(--ink);
    background: var(--bg);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: var(--indigo); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, h4 { line-height: 1.2; margin: 0 0 .5em; font-weight: 800; letter-spacing: -0.02em; }
p { margin: 0 0 1em; }
ul { margin: 0 0 1em; padding-left: 1.2em; }

/* ---------- Utilitarios de layout ---------- */
.flex { display: flex; }
.col { flex-direction: column; }
.wrap { flex-wrap: wrap; }
.ai-center { align-items: center; }
.ai-start { align-items: flex-start; }
.jc-center { justify-content: center; }
.jc-between { justify-content: space-between; }
.jc-around { justify-content: space-around; }
.gap-2 { gap: .5rem; }
.gap-4 { gap: 1rem; }
.gap-6 { gap: 1.5rem; }
.gap-8 { gap: 2rem; }
.grow { flex: 1 1 0; }
.text-center { text-align: center; }
.mt-2 { margin-top: .5rem; }
.mt-4 { margin-top: 1rem; }
.mt-6 { margin-top: 1.5rem; }
.mb-2 { margin-bottom: .5rem; }
.mb-6 { margin-bottom: 1.5rem; }
.muted { color: var(--ink-soft); }
.hidden { display: none; }

/* ---------- Container ---------- */
.bm-wrap {
    width: 100%;
    max-width: 1140px;
    margin: 0 auto;
    padding: 0 20px;
}
.bm-section { padding: 72px 0; }
.bm-section--tight { padding: 48px 0; }

/* ---------- Titulos de secao ---------- */
.bm-head { max-width: 640px; margin: 0 auto 40px; text-align: center; }
.bm-head h2 { font-size: clamp(1.7rem, 3.5vw, 2.5rem); }
.bm-head p { color: var(--ink-soft); font-size: 1.05rem; }
.bm-eyebrow {
    display: inline-block;
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--violet);
    margin-bottom: .6rem;
}

/* ---------- Pilulas e tags ---------- */
.pill {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .4rem .9rem;
    border-radius: var(--pill);
    background: var(--white);
    box-shadow: var(--shadow-sm);
    font-size: .85rem;
    font-weight: 600;
}
.pill--grad { background: var(--grad); color: #fff; box-shadow: var(--shadow-md); }
.pill--amber { background: #fff7e8; color: #b57708; }
.pill--best { background: var(--amber); color: #3a2500; }

/* ---------- Botoes ---------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: .8rem 1.5rem;
    border-radius: var(--pill);
    border: 2px solid var(--indigo);
    background: var(--white);
    color: var(--indigo);
    font-weight: 700;
    font-size: 1rem;
    cursor: pointer;
    transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
    text-decoration: none;
}
.btn:hover { text-decoration: none; transform: translateY(-2px); box-shadow: var(--shadow-md); }
.btn--grad {
    background: var(--grad);
    color: #fff;
    border-color: transparent;
    box-shadow: var(--shadow-md);
}
.btn--ghost { background: transparent; border-color: rgba(255,255,255,.6); color: #fff; }
.btn--amber { background: var(--amber); border-color: var(--amber); color: #3a2500; }
.btn--lg { padding: 1rem 2rem; font-size: 1.1rem; }
.btn--block { width: 100%; }

/* ---------- Cartao generico ---------- */
.card {
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: 28px;
}

/* ---------- Estrelas ---------- */
.bm-stars { color: var(--amber); font-size: .95rem; letter-spacing: 1px; }
.bm-stars span { color: var(--ink-soft); margin-left: .35rem; font-size: .85rem; }

/* ============================================================
   Skip link (acessibilidade)
   ============================================================ */
.bm-skip {
    position: absolute;
    left: -999px;
    top: 0;
    background: var(--ink);
    color: #fff;
    padding: .7rem 1.1rem;
    border-radius: 0 0 12px 0;
    z-index: 200;
}
.bm-skip:focus { left: 0; }

/* ============================================================
   1. Ribbon (barra de aviso)
   ============================================================ */
.bm-ribbon {
    background: var(--grad);
    color: #fff;
    text-align: center;
    font-size: .88rem;
    font-weight: 600;
    padding: .55rem 1rem;
}

/* ============================================================
   2. Header sticky
   ============================================================ */
.bm-top {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(250, 249, 255, 0.92);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--line);
    padding: .7rem 0;
}
.bm-brand { text-decoration: none; }
.bm-brand:hover { text-decoration: none; }
.bm-brand__name {
    font-weight: 800;
    font-size: 1.25rem;
    color: var(--ink);
    letter-spacing: -0.02em;
}
.bm-nav { display: flex; gap: 1.6rem; }
.bm-nav a {
    color: var(--ink);
    font-weight: 600;
    font-size: .98rem;
    padding: .3rem 0;
}
.bm-nav a:hover { color: var(--indigo); text-decoration: none; }
.bm-top__cta { padding: .6rem 1.3rem; font-size: .95rem; }

.bm-burger {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    border: none;
    background: transparent;
    cursor: pointer;
    padding: 8px;
}
.bm-burger span {
    display: block;
    height: 3px;
    border-radius: 3px;
    background: var(--ink);
    transition: transform .25s ease, opacity .25s ease;
}
.bm-burger.is-open span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.bm-burger.is-open span:nth-child(2) { opacity: 0; }
.bm-burger.is-open span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* ============================================================
   3. Hero centralizado com blob de gradiente
   ============================================================ */
.bm-hero {
    position: relative;
    overflow: hidden;
    text-align: center;
    padding: 84px 0 96px;
}
.bm-hero__blob {
    position: absolute;
    top: -180px;
    left: 50%;
    transform: translateX(-50%);
    width: 900px;
    height: 900px;
    max-width: 140vw;
    background: radial-gradient(circle at 30% 30%, rgba(124,58,237,.22), transparent 60%),
                radial-gradient(circle at 70% 40%, rgba(79,70,229,.20), transparent 60%),
                radial-gradient(circle at 50% 70%, rgba(245,158,11,.16), transparent 55%);
    filter: blur(20px);
    z-index: 0;
    pointer-events: none;
}
.bm-hero .bm-wrap { position: relative; z-index: 1; }
.bm-hero h1 {
    font-size: clamp(2.2rem, 5.5vw, 3.6rem);
    max-width: 14ch;
    margin: .4rem auto .5rem;
}
.bm-hero__sub {
    font-size: 1.15rem;
    color: var(--ink-soft);
    max-width: 46ch;
    margin: 0 auto 1.6rem;
}
.bm-hero__cta { justify-content: center; }
.bm-hero__stage {
    position: relative;
    width: 340px;
    max-width: 80vw;
    margin: 2.5rem auto 0;
}
.bm-hero__product {
    width: 100%;
    border-radius: 32px;
    box-shadow: var(--shadow-lg);
    animation: bm-float 5s ease-in-out infinite;
}
@keyframes bm-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-14px); }
}
.bm-hero__rating {
    position: absolute;
    bottom: 14px;
    right: -18px;
    background: var(--white);
    box-shadow: var(--shadow-md);
    border-radius: var(--pill);
    padding: .6rem 1rem;
    font-weight: 700;
    font-size: .9rem;
    display: flex;
    align-items: center;
    gap: .4rem;
}
.bm-hero__rating small { display: block; font-weight: 500; color: var(--ink-soft); font-size: .72rem; }

/* ============================================================
   4. Perks (faixa de icones)
   ============================================================ */
.bm-perks {
    background: var(--white);
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    padding: 34px 0;
}
.bm-perks__row { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; }
.bm-perk {
    flex: 1 1 200px;
    display: flex;
    align-items: center;
    gap: .8rem;
    padding: .4rem;
}
.bm-perk__ic {
    flex: none;
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    background: var(--grad-soft);
    color: var(--indigo);
}
.bm-perk strong { display: block; font-size: .98rem; }
.bm-perk span { font-size: .84rem; color: var(--ink-soft); }

/* ============================================================
   5 & Shop. Grid de produtos (tiles)
   ============================================================ */
.bm-grid { display: flex; flex-wrap: wrap; gap: 24px; }
.bm-tile {
    flex: 1 1 250px;
    max-width: 100%;
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform .22s ease, box-shadow .22s ease;
    position: relative;
}
.bm-tile:hover { transform: translateY(-8px); box-shadow: var(--shadow-lg); }
.bm-tile__media {
    position: relative;
    background: var(--grad-soft);
    aspect-ratio: 1 / 1;
    display: block;
}
.bm-tile__media img { width: 100%; height: 100%; object-fit: cover; }
.bm-tile__flag {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 2;
}
.bm-tile__body { padding: 18px 20px 22px; display: flex; flex-direction: column; flex: 1; }
.bm-tile__name { font-size: 1.1rem; margin-bottom: .3rem; }
.bm-tile__name a { color: var(--ink); }
.bm-tile__name a:hover { color: var(--indigo); text-decoration: none; }
.bm-tile__desc { font-size: .9rem; color: var(--ink-soft); margin-bottom: .8rem; }
.bm-tile__price { font-size: 1.3rem; font-weight: 800; }
.bm-tile__was { color: var(--ink-soft); text-decoration: line-through; font-size: 1rem; font-weight: 500; margin-left: .4rem; }
.bm-tile__foot { margin-top: auto; padding-top: 14px; }

/* ============================================================
   6. Quiz "Find Your Formula"
   ============================================================ */
.bm-quiz {
    background: var(--grad);
    color: #fff;
    border-radius: 36px;
    padding: 48px clamp(20px, 5vw, 56px);
    box-shadow: var(--shadow-lg);
}
.bm-quiz h2 { color: #fff; }
.bm-quiz__sub { color: rgba(255,255,255,.85); margin-bottom: 2rem; }
.bm-quiz__step { max-width: 620px; margin: 0 auto; }
.bm-quiz__q { font-size: 1.25rem; font-weight: 700; margin-bottom: 1.2rem; }
.bm-quiz__opts { display: flex; flex-wrap: wrap; gap: .8rem; justify-content: center; }
.bm-quiz__opt {
    background: rgba(255,255,255,.12);
    border: 2px solid rgba(255,255,255,.35);
    color: #fff;
    border-radius: var(--pill);
    padding: .8rem 1.4rem;
    font-weight: 600;
    font-size: 1rem;
    cursor: pointer;
    transition: background .18s ease, transform .18s ease;
}
.bm-quiz__opt:hover { background: rgba(255,255,255,.25); transform: translateY(-2px); }
.bm-quiz__progress { font-size: .85rem; letter-spacing: .1em; text-transform: uppercase; opacity: .8; margin-bottom: 1rem; }
.bm-quiz__result {
    background: var(--white);
    color: var(--ink);
    border-radius: var(--radius-lg);
    padding: 28px;
    max-width: 560px;
    margin: 0 auto;
    text-align: left;
    display: flex;
    gap: 20px;
    align-items: center;
    box-shadow: var(--shadow-md);
}
.bm-quiz__result img { width: 120px; height: 120px; border-radius: 18px; object-fit: cover; flex: none; }
.bm-quiz__result h3 { margin-bottom: .2rem; }

/* ============================================================
   7. Reads (cartoes de artigo)
   ============================================================ */
.bm-reads__row { display: flex; flex-wrap: wrap; gap: 24px; }
.bm-read {
    flex: 1 1 280px;
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
    transition: transform .22s ease, box-shadow .22s ease;
}
.bm-read:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); }
.bm-read__media { aspect-ratio: 8 / 5; background: var(--grad-soft); }
.bm-read__media img { width: 100%; height: 100%; object-fit: cover; }
.bm-read__body { padding: 22px; display: flex; flex-direction: column; flex: 1; }
.bm-read__tag { font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--violet); margin-bottom: .5rem; }
.bm-read__body h3 { font-size: 1.15rem; }
.bm-read__body p { font-size: .92rem; color: var(--ink-soft); }
.bm-read__more { margin-top: auto; font-weight: 700; }

/* ============================================================
   8. Reviews (carrossel horizontal)
   ============================================================ */
.bm-say__ctrls { display: flex; gap: .6rem; justify-content: center; margin-top: 1.5rem; }
.bm-say__btn {
    width: 46px; height: 46px;
    border-radius: 50%;
    border: 2px solid var(--indigo);
    background: #fff;
    color: var(--indigo);
    font-size: 1.2rem;
    cursor: pointer;
    display: grid; place-items: center;
    transition: background .18s ease, color .18s ease;
}
.bm-say__btn:hover { background: var(--indigo); color: #fff; }
.bm-say__track {
    display: flex;
    gap: 22px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding: 8px 4px 20px;
    scrollbar-width: thin;
}
.bm-quote {
    flex: 0 0 340px;
    max-width: 85vw;
    scroll-snap-align: start;
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: 26px;
}
.bm-quote__stars { color: var(--amber); margin-bottom: .6rem; }
.bm-quote p { font-size: .98rem; }
.bm-quote__who { display: flex; align-items: center; gap: .7rem; margin-top: 1rem; }
.bm-quote__who .bm-init {
    width: 42px; height: 42px; border-radius: 50%;
    background: var(--grad); color: #fff;
    display: grid; place-items: center; font-weight: 700; flex: none;
}
.bm-quote__who strong { display: block; font-size: .92rem; }
.bm-quote__who span { font-size: .8rem; color: var(--ink-soft); }

/* ============================================================
   9. Join (newsletter)
   ============================================================ */
.bm-join {
    background: var(--grad-soft);
    border-radius: 36px;
    padding: 52px clamp(20px, 5vw, 56px);
    text-align: center;
}
.bm-join form { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: center; max-width: 520px; margin: 1.2rem auto 0; }
.bm-join input[type="email"] {
    flex: 1 1 260px;
    padding: .9rem 1.2rem;
    border-radius: var(--pill);
    border: 2px solid var(--line);
    font-size: 1rem;
    background: #fff;
}
.bm-join input:focus { outline: none; border-color: var(--indigo); }
.bm-join__ok { color: #15803d; font-weight: 700; margin-top: 1rem; }

/* ============================================================
   10. FDA disclaimer (bloco)
   ============================================================ */
.bm-fda {
    background: #f4f1ff;
    border: 1px dashed var(--line);
    border-radius: var(--radius);
    padding: 22px 26px;
    font-size: .85rem;
    color: var(--ink-soft);
    max-width: 900px;
    margin: 0 auto;
}
.bm-fda strong { color: var(--ink); }

/* ============================================================
   11. Footer
   ============================================================ */
.bm-foot {
    background: var(--ink);
    color: #cfc9e6;
    padding: 56px 0 28px;
    margin-top: 72px;
}
.bm-foot a { color: #cfc9e6; }
.bm-foot a:hover { color: #fff; }
.bm-foot__cols { align-items: flex-start; }
.bm-foot__brand { flex: 1 1 280px; }
.bm-foot__brand .bm-brand__name { color: #fff; }
.bm-foot__brand p { font-size: .9rem; margin-top: .8rem; max-width: 34ch; }
.bm-foot__col { flex: 1 1 140px; }
.bm-foot__col h4 { color: #fff; font-size: .95rem; margin-bottom: .9rem; }
.bm-foot__col a { display: block; font-size: .9rem; padding: .25rem 0; text-decoration: none; }
.bm-social { margin-top: 1rem; }
.bm-social a {
    width: 40px; height: 40px; border-radius: 50%;
    background: rgba(255,255,255,.08);
    display: grid; place-items: center;
}
.bm-social a:hover { background: var(--grad); }
.bm-pay { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: 1rem; }
.bm-pay span {
    background: rgba(255,255,255,.1);
    border-radius: 8px;
    padding: .35rem .6rem;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .04em;
}
.bm-foot__fda {
    border-top: 1px solid rgba(255,255,255,.12);
    margin-top: 32px;
    padding-top: 20px;
    font-size: .8rem;
    color: #9d97b8;
}
.bm-foot__legal { font-size: .8rem; color: #9d97b8; margin-top: .6rem; }
.bm-foot__legal a { text-decoration: none; }

/* ============================================================
   Breadcrumbs
   ============================================================ */
.bm-crumbs { font-size: .85rem; color: var(--ink-soft); padding: 20px 0 0; }
.bm-crumbs a { color: var(--ink-soft); }
.bm-crumbs a:hover { color: var(--indigo); }

/* ============================================================
   Pagina de produto
   ============================================================ */
.bm-pdp { display: flex; flex-wrap: wrap; gap: 44px; align-items: flex-start; }
.bm-pdp__media { flex: 1 1 360px; }
.bm-pdp__media img {
    width: 100%;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    background: var(--grad-soft);
}
.bm-pdp__info { flex: 1 1 360px; }
.bm-pdp__info h1 { font-size: clamp(1.8rem, 4vw, 2.6rem); }
.bm-pdp__price { font-size: 2rem; font-weight: 800; margin: .4rem 0 .2rem; }
.bm-pdp__price .bm-tile__was { font-size: 1.3rem; }
.bm-pdp__buy { margin: 1.4rem 0; }
.bm-pdp__list { list-style: none; padding: 0; }
.bm-pdp__list li { padding: .3rem 0 .3rem 1.6rem; position: relative; font-size: .95rem; }
.bm-pdp__list li::before { content: "✓"; position: absolute; left: 0; color: var(--violet); font-weight: 800; }

/* Tabela estilo supplement facts */
.bm-facts {
    border: 2px solid var(--ink);
    border-radius: 12px;
    overflow: hidden;
    max-width: 420px;
}
.bm-facts__head { background: var(--ink); color: #fff; padding: .8rem 1rem; }
.bm-facts__head h3 { color: #fff; margin: 0; }
.bm-facts table { width: 100%; border-collapse: collapse; }
.bm-facts th, .bm-facts td { text-align: left; padding: .55rem 1rem; border-bottom: 1px solid var(--line); font-size: .9rem; }
.bm-facts th { font-weight: 700; }
.bm-facts tr:last-child td, .bm-facts tr:last-child th { border-bottom: none; }
.bm-facts td:last-child { text-align: right; }

.bm-prose { max-width: 760px; }
.bm-prose h2 { font-size: 1.5rem; margin-top: 1.6rem; }
.bm-prose h3 { font-size: 1.2rem; margin-top: 1.2rem; }

/* Reviews especificas do produto */
.bm-revs { display: flex; flex-wrap: wrap; gap: 20px; }
.bm-rev {
    flex: 1 1 300px;
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 22px;
    box-shadow: var(--shadow-sm);
}
.bm-rev__top { display: flex; justify-content: space-between; align-items: center; margin-bottom: .5rem; }
.bm-rev__top strong { font-size: .95rem; }

/* ============================================================
   Accordion FAQ (classes proprias, NAO faq*)
   ============================================================ */
.bm-accordion { max-width: 780px; margin: 0 auto; }
.bm-ac {
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    margin-bottom: 14px;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}
.bm-ac__q {
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    padding: 20px 24px;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--ink);
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}
.bm-ac__q::after { content: "+"; font-size: 1.5rem; color: var(--violet); transition: transform .2s ease; }
.bm-ac.is-open .bm-ac__q::after { transform: rotate(45deg); }
.bm-ac__a { max-height: 0; overflow: hidden; transition: max-height .3s ease; }
.bm-ac__a-inner { padding: 0 24px 22px; color: var(--ink-soft); }

/* ============================================================
   Formulario de contato
   ============================================================ */
.bm-form { max-width: 620px; }
.bm-field { margin-bottom: 1rem; }
.bm-field label { display: block; font-weight: 600; margin-bottom: .35rem; font-size: .92rem; }
.bm-field input, .bm-field textarea {
    width: 100%;
    padding: .8rem 1rem;
    border-radius: 14px;
    border: 2px solid var(--line);
    font-size: 1rem;
    font-family: inherit;
    background: #fff;
}
.bm-field input:focus, .bm-field textarea:focus { outline: none; border-color: var(--indigo); }
.bm-form__ok {
    background: #e9fbef;
    border: 1px solid #b6ecc6;
    color: #15803d;
    border-radius: 14px;
    padding: 16px 20px;
    font-weight: 600;
    margin-top: 1rem;
}

/* ============================================================
   Cabecalho de pagina interna
   ============================================================ */
.bm-phead {
    background: var(--grad-soft);
    padding: 48px 0;
    text-align: center;
}
.bm-phead h1 { font-size: clamp(1.9rem, 4.5vw, 3rem); margin-bottom: .3rem; }
.bm-phead p { color: var(--ink-soft); max-width: 52ch; margin: 0 auto; }

/* Info blocks (about/legal) */
.bm-info { max-width: 820px; margin: 0 auto; }
.bm-info h2 { font-size: 1.5rem; margin-top: 1.8rem; }
.bm-values { display: flex; flex-wrap: wrap; gap: 20px; margin-top: 1.5rem; }
.bm-value { flex: 1 1 220px; }
.bm-value .bm-perk__ic { margin-bottom: .6rem; }

/* Blog post */
.bm-article { max-width: 760px; margin: 0 auto; }
.bm-article__hero { border-radius: var(--radius-lg); box-shadow: var(--shadow-md); margin-bottom: 1.6rem; background: var(--grad-soft); }
.bm-article__meta { color: var(--ink-soft); font-size: .9rem; margin-bottom: 1.2rem; }
.bm-article p { font-size: 1.05rem; }
.bm-article h2 { font-size: 1.5rem; margin-top: 1.8rem; }

/* ============================================================
   Responsivo
   ============================================================ */
@media (max-width: 860px) {
    .bm-nav {
        position: fixed;
        top: 0;
        right: 0;
        height: 100vh;
        width: min(78vw, 320px);
        background: var(--white);
        flex-direction: column;
        padding: 90px 28px 28px;
        gap: 1.2rem;
        box-shadow: var(--shadow-lg);
        transform: translateX(105%);
        transition: transform .28s ease;
        z-index: 90;
    }
    .bm-nav.is-open { transform: translateX(0); }
    .bm-nav a { font-size: 1.15rem; }
    .bm-burger { display: flex; }
    .bm-top__cta { display: none; }
}

@media (max-width: 560px) {
    .bm-section { padding: 52px 0; }
    .bm-quiz__result { flex-direction: column; text-align: center; }
    .bm-quiz__result img { width: 140px; height: 140px; }
    .bm-hero__rating { right: 0; }
}