/* ============================================================
   BRUCI BEAUTY — Fontes self-hosted (CSP-safe)
   ============================================================ */
@font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 500; font-display: swap; src: url('/assets/fonts/cormorant-garamond-500-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 500; font-display: swap; src: url('/assets/fonts/cormorant-garamond-500-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 600; font-display: swap; src: url('/assets/fonts/cormorant-garamond-600-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 600; font-display: swap; src: url('/assets/fonts/cormorant-garamond-600-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 700; font-display: swap; src: url('/assets/fonts/cormorant-garamond-700-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 700; font-display: swap; src: url('/assets/fonts/cormorant-garamond-700-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Jost'; font-style: normal; font-weight: 400; font-display: swap; src: url('/assets/fonts/jost-400-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Jost'; font-style: normal; font-weight: 400; font-display: swap; src: url('/assets/fonts/jost-400-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Jost'; font-style: normal; font-weight: 500; font-display: swap; src: url('/assets/fonts/jost-500-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Jost'; font-style: normal; font-weight: 500; font-display: swap; src: url('/assets/fonts/jost-500-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Jost'; font-style: normal; font-weight: 600; font-display: swap; src: url('/assets/fonts/jost-600-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Jost'; font-style: normal; font-weight: 600; font-display: swap; src: url('/assets/fonts/jost-600-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Jost'; font-style: normal; font-weight: 700; font-display: swap; src: url('/assets/fonts/jost-700-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Jost'; font-style: normal; font-weight: 700; font-display: swap; src: url('/assets/fonts/jost-700-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
/* ============================================================
   RESET BASE (equivalente ao preflight do Tailwind)
   Garante renderização IDÊNTICA entre páginas com e sem
   Tailwind CDN: body sem margem, border-box, fontes herdadas.
   ============================================================ */
*, ::before, ::after { box-sizing: border-box; border-width: 0; border-style: solid; border-color: currentColor; }
html { -webkit-text-size-adjust: 100%; tab-size: 4; }
body { margin: 0; line-height: inherit; }
h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd, hr { margin: 0; }
h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img, svg, video, canvas, audio, iframe, embed, object { display: block; vertical-align: middle; }
img, video { max-width: 100%; height: auto; }
button, input, optgroup, select, textarea { font-family: inherit; font-size: 100%; font-weight: inherit; line-height: inherit; color: inherit; margin: 0; padding: 0; }
button, [type='button'], [type='reset'], [type='submit'] { -webkit-appearance: button; background-color: transparent; background-image: none; cursor: pointer; }
fieldset { margin: 0; padding: 0; }
legend { padding: 0; }
table { border-collapse: collapse; text-indent: 0; border-color: inherit; }
a { color: inherit; text-decoration: inherit; }
summary { display: list-item; }
:disabled { cursor: default; }
/* Links dentro de conteúdo rico (descrições, posts) mantêm affordance */
.b-lead a, .b-post-body a, .b-review a, .b-faq a { color: var(--b-accent-dark); text-decoration: underline; text-underline-offset: 2px; }

/* ============================================================
   BRUCI BEAUTY — Design System v1
   Premium · Clean · Feminino moderno · Wellness
   Paleta: off-white, nude, champagne, rose gold
   ============================================================ */

/* ---------- Tokens ---------- */
:root {
  --b-bg: #FAF6F1;            /* off white       */
  --b-bg-soft: #F7EDE4;       /* nude claro      */
  --b-bg-card: #FFFFFF;
  --b-ink: #3E3430;           /* marrom quente   */
  --b-ink-soft: #7A6A61;
  --b-ink-faint: #A79A90;
  --b-rose: #B76E79;          /* rose gold       */
  --b-rose-dark: #9D5560;
  --b-rose-soft: #F3E3E5;
  --b-champagne: #C9A06C;
  --b-champagne-dark: #A67F4E;
  --b-champagne-soft: #F1E4D2;
  --b-green: #7C9A6D;         /* wellness accent */
  --b-terra: #C0653B;         /* energia accent  */
  --b-bronze: #C9955C;        /* colágeno accent */
  --b-danger: #C25450;
  --b-success: #6E9A63;
  --b-grad: linear-gradient(120deg, #C9A06C 0%, #B76E79 100%);
  --b-grad-soft: linear-gradient(160deg, #FAF6F1 0%, #F7EDE4 55%, #F3E3E5 100%);
  --b-border: #EADDD0;
  --b-shadow-sm: 0 1px 3px rgba(62, 52, 48, .07);
  --b-shadow: 0 8px 30px rgba(62, 52, 48, .09);
  --b-shadow-lg: 0 20px 60px rgba(62, 52, 48, .14);
  --b-radius: 14px;
  --b-radius-lg: 24px;
  --b-font-display: 'Cormorant Garamond', 'Times New Roman', Georgia, serif;
  --b-font-body: 'Jost', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --b-max: 1200px;
  --b-accent: var(--b-rose);
  --b-accent-dark: var(--b-rose-dark);
  --b-accent-soft: var(--b-rose-soft);
}

html.dark {
  --b-bg: #221C19;
  --b-bg-soft: #2C2420;
  --b-bg-card: #2F2823;
  --b-ink: #F3EAE2;
  --b-ink-soft: #C9B8AC;
  --b-ink-faint: #8F7F73;
  --b-rose-soft: #4A3538;
  --b-champagne-soft: #443826;
  --b-border: #453A32;
  --b-grad-soft: linear-gradient(160deg, #221C19 0%, #2C2420 55%, #33282A 100%);
  --b-shadow-sm: 0 1px 3px rgba(0, 0, 0, .3);
  --b-shadow: 0 8px 30px rgba(0, 0, 0, .35);
  --b-shadow-lg: 0 20px 60px rgba(0, 0, 0, .5);
}

/* ---------- Base ---------- */
.bruci, .bruci body { background: var(--b-bg); color: var(--b-ink); font-family: var(--b-font-body); }
.b-page { background: var(--b-bg); color: var(--b-ink); font-family: var(--b-font-body); line-height: 1.6; }
.b-container { max-width: var(--b-max); margin-inline: auto; padding-inline: 16px; }
/* Larguras de container UNIFICADAS (header/footer/conteúdo = 1200px em todo o site) */
.max-w-6xl, .max-w-7xl, .max-w-5xl { max-width: var(--b-max) !important; }
.b-narrow { max-width: 860px; }

.b-display, .b-h1, .b-h2, .b-h3 { font-family: var(--b-font-display); font-weight: 600; line-height: 1.12; color: var(--b-ink); letter-spacing: .01em; }
.b-h1 { font-size: clamp(2.3rem, 5.2vw, 3.9rem); }
.b-h2 { font-size: clamp(1.8rem, 3.6vw, 2.6rem); }
.b-h3 { font-size: clamp(1.3rem, 2.4vw, 1.7rem); }
.b-kicker { display: inline-flex; align-items: center; gap: .5rem; text-transform: uppercase; letter-spacing: .22em; font-size: .72rem; font-weight: 600; color: var(--b-accent); }
.b-kicker::before, .b-kicker.b-kicker-both::after { content: ""; width: 34px; height: 1px; background: var(--b-accent); opacity: .6; }
.b-lead { font-size: 1.12rem; color: var(--b-ink-soft); max-width: 60ch; }
.b-center { text-align: center; }
.b-center .b-lead { margin-inline: auto; }

.b-section { padding-block: clamp(56px, 9vw, 104px); }
.b-section-soft { background: var(--b-bg-soft); }
.b-section-head { margin-bottom: clamp(28px, 5vw, 52px); display: flex; flex-direction: column; gap: 12px; }

/* ---------- Botões ---------- */
.b-btn { display: inline-flex; align-items: center; justify-content: center; gap: .55rem; padding: .95rem 2.1rem; border-radius: 999px; font-family: var(--b-font-body); font-weight: 600; font-size: 1rem; letter-spacing: .02em; text-decoration: none; border: 1px solid transparent; cursor: pointer; transition: transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease; will-change: transform; }
.b-btn:focus-visible { outline: 3px solid var(--b-champagne); outline-offset: 2px; }
.b-btn-primary { background: var(--b-grad); color: #fff; box-shadow: 0 8px 22px rgba(183, 110, 121, .35); }
.b-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(183, 110, 121, .45); color: #fff; }
.b-btn-dark { background: var(--b-ink); color: var(--b-bg); }
.b-btn-dark:hover { transform: translateY(-2px); }
.b-btn-outline { background: transparent; color: var(--b-accent-dark); border-color: var(--b-accent); }
.b-btn-outline:hover { background: var(--b-accent-soft); }
.b-btn-ghost { background: transparent; color: var(--b-ink-soft); }
.b-btn-ghost:hover { color: var(--b-accent-dark); background: var(--b-accent-soft); }
.b-btn-lg { padding: 1.15rem 2.7rem; font-size: 1.08rem; }
.b-btn-sm { padding: .55rem 1.25rem; font-size: .88rem; }
.b-btn-block { width: 100%; }
.b-btn[disabled] { opacity: .55; pointer-events: none; }
.b-btn-pulse { animation: bPulse 2.4s ease-in-out infinite; }
@keyframes bPulse { 0%,100% { box-shadow: 0 8px 22px rgba(183,110,121,.35); } 50% { box-shadow: 0 8px 22px rgba(183,110,121,.35), 0 0 0 12px rgba(183,110,121,.08); } }

/* ---------- Badges / pills ---------- */
.b-badge { display: inline-flex; align-items: center; gap: .35rem; padding: .3rem .8rem; border-radius: 999px; font-size: .74rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.b-badge-accent { background: var(--b-accent); color: #fff; }
.b-badge-soft { background: var(--b-accent-soft); color: var(--b-accent-dark); }
.b-badge-champagne { background: var(--b-champagne-soft); color: var(--b-champagne-dark); }
.b-badge-outline { border: 1px solid var(--b-border); color: var(--b-ink-soft); background: var(--b-bg-card); }
.b-pill-row { display: flex; flex-wrap: wrap; gap: .5rem; }

/* ---------- Cards ---------- */
.b-card { background: var(--b-bg-card); border: 1px solid var(--b-border); border-radius: var(--b-radius-lg); box-shadow: var(--b-shadow-sm); }
.b-card-hover { transition: transform .22s ease, box-shadow .22s ease; }
.b-card-hover:hover { transform: translateY(-6px); box-shadow: var(--b-shadow); }
.b-card-pad { padding: clamp(20px, 3vw, 32px); }

/* ---------- Grid helpers ---------- */
.b-grid { display: grid; gap: clamp(16px, 2.5vw, 28px); }
.b-grid-2 { grid-template-columns: repeat(2, 1fr); }
.b-grid-3 { grid-template-columns: repeat(3, 1fr); }
.b-grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 980px) { .b-grid-4 { grid-template-columns: repeat(2, 1fr); } .b-grid-3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .b-grid-4, .b-grid-3, .b-grid-2 { grid-template-columns: 1fr; } .b-grid-2-mobile { grid-template-columns: repeat(2, 1fr); } }

/* ---------- Preço ---------- */
.b-price { display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap; }
.b-price-old { color: var(--b-ink-faint); text-decoration: line-through; font-size: .95rem; }
.b-price-now { font-size: 1.55rem; font-weight: 700; color: var(--b-accent-dark); }
.b-price-installments { width: 100%; font-size: .86rem; color: var(--b-ink-soft); }
.b-price-save { font-size: .78rem; font-weight: 700; color: var(--b-success); }

/* ---------- Estrelas ---------- */
.b-stars { display: inline-flex; gap: 2px; color: var(--b-champagne); font-size: .95rem; letter-spacing: 1px; }
.b-stars-num { font-size: .85rem; color: var(--b-ink-soft); margin-left: .4rem; }

/* ---------- Product card ---------- */
.b-product-card { display: flex; flex-direction: column; overflow: hidden; position: relative; }
.b-product-card .b-badge { position: absolute; top: 14px; left: 14px; z-index: 2; }
.b-product-media { aspect-ratio: 1/1; background: var(--b-bg-soft); display: grid; place-items: center; overflow: hidden; border-radius: var(--b-radius-lg) var(--b-radius-lg) 0 0; }
.b-product-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.b-product-card:hover .b-product-media img { transform: scale(1.05); }
.b-product-body { display: flex; flex-direction: column; gap: .45rem; padding: 18px 20px 22px; flex: 1; }
.b-product-name { font-family: var(--b-font-display); font-size: 1.25rem; font-weight: 600; color: var(--b-ink); text-decoration: none; }
.b-product-name:hover { color: var(--b-accent-dark); }
.b-product-desc { font-size: .88rem; color: var(--b-ink-soft); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.b-product-cta { margin-top: auto; display: flex; gap: .5rem; padding-top: .8rem; }

/* ---------- Header ---------- */
.b-announce { background: var(--b-bg-soft); color: var(--b-champagne-dark); font-size: .82rem; font-weight: 500; letter-spacing: .04em; text-align: center; padding: .55rem 16px; }
.b-header { position: sticky; top: 0; z-index: 60; background: color-mix(in srgb, var(--b-bg) 88%, transparent); backdrop-filter: blur(14px); border-bottom: 1px solid var(--b-border); }
.b-header-inner { display: flex; align-items: center; gap: 22px; padding-block: 14px; }
.b-logo { font-family: var(--b-font-display); font-size: 1.65rem; font-weight: 700; letter-spacing: .04em; color: var(--b-ink); text-decoration: none; white-space: nowrap; }
.b-logo em { font-style: normal; background: var(--b-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.b-logo img { max-height: 44px; width: auto; }
.b-nav { display: flex; align-items: center; gap: 26px; margin-inline: auto; }
.b-nav a { color: var(--b-ink-soft); text-decoration: none; font-size: .95rem; font-weight: 500; letter-spacing: .03em; padding: .35rem 0; border-bottom: 2px solid transparent; transition: color .15s, border-color .15s; }
.b-nav a:hover, .b-nav a[aria-current="page"] { color: var(--b-accent-dark); border-bottom-color: var(--b-accent); }
.b-header-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.b-icon-btn { position: relative; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; color: var(--b-ink-soft); background: transparent; border: none; cursor: pointer; text-decoration: none; font-size: 1.05rem; transition: background .15s, color .15s; }
.b-icon-btn:hover { background: var(--b-accent-soft); color: var(--b-accent-dark); }
.b-cart-badge { position: absolute; top: 2px; right: 0; min-width: 18px; height: 18px; border-radius: 999px; background: var(--b-accent); color: #fff; font-size: .68rem; font-weight: 700; display: grid; place-items: center; padding-inline: 4px; }
.b-burger { display: none; }
.b-mobile-nav { display: none; }
@media (max-width: 900px) {
  .b-nav { display: none; }
  .b-burger { display: grid; }
  .b-mobile-nav.is-open { display: block; position: fixed; inset: 0; top: 0; background: var(--b-bg); z-index: 80; padding: 24px; overflow: auto; }
  .b-mobile-nav a { display: block; padding: 16px 4px; font-size: 1.25rem; font-family: var(--b-font-display); color: var(--b-ink); text-decoration: none; border-bottom: 1px solid var(--b-border); }
}

/* ---------- Footer ---------- */
.b-footer { background: var(--b-bg-soft); border-top: 1px solid var(--b-border); margin-top: 40px; }
.b-footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 36px; padding-block: clamp(40px, 6vw, 64px); }
@media (max-width: 900px) { .b-footer-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .b-footer-grid { grid-template-columns: 1fr; } }
.b-footer h4 { font-family: var(--b-font-body); font-size: .8rem; text-transform: uppercase; letter-spacing: .18em; color: var(--b-ink); margin-bottom: 14px; }
.b-footer a { display: block; color: var(--b-ink-soft); text-decoration: none; padding-block: 5px; font-size: .93rem; }
.b-footer a:hover { color: var(--b-accent-dark); }
.b-footer-bottom { border-top: 1px solid var(--b-border); padding-block: 18px; display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; font-size: .82rem; color: var(--b-ink-faint); }
.b-trust-strip { display: flex; flex-wrap: wrap; gap: clamp(14px, 3vw, 40px); justify-content: center; padding-block: 26px; border-bottom: 1px solid var(--b-border); }
.b-trust-item { display: flex; align-items: center; gap: 10px; font-size: .88rem; color: var(--b-ink-soft); }
.b-trust-item i, .b-trust-item svg { color: var(--b-accent); font-size: 1.3rem; }

/* ---------- Hero ---------- */
.b-hero { position: relative; overflow: hidden; background: var(--b-grad-soft); }
.b-hero-inner { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(24px, 5vw, 64px); align-items: center; padding-block: clamp(48px, 8vw, 110px); }
@media (max-width: 900px) { .b-hero-inner { grid-template-columns: 1fr; text-align: center; } .b-hero-copy { display: flex; flex-direction: column; align-items: center; } }
.b-hero-copy { display: flex; flex-direction: column; gap: 20px; }
.b-hero-media { position: relative; }
.b-hero-media img { width: 100%; max-width: 520px; margin-inline: auto; display: block; border-radius: var(--b-radius-lg); box-shadow: var(--b-shadow-lg); }
.b-hero-blob { position: absolute; inset: auto; width: 55vw; max-width: 640px; aspect-ratio: 1; border-radius: 50%; filter: blur(80px); opacity: .5; background: radial-gradient(circle, rgba(201,160,108,.55), rgba(183,110,121,.25) 60%, transparent 75%); pointer-events: none; }
.b-float-chip { position: absolute; background: var(--b-bg-card); border: 1px solid var(--b-border); border-radius: 999px; box-shadow: var(--b-shadow); padding: .6rem 1.1rem; font-size: .82rem; font-weight: 600; color: var(--b-ink); display: flex; align-items: center; gap: .5rem; }
.b-float-chip i { color: var(--b-accent); }

/* ---------- Marquee ---------- */
.b-marquee { overflow: hidden; border-block: 1px solid var(--b-border); background: var(--b-bg-card); padding-block: 14px; }
.b-marquee-track { display: flex; gap: 48px; width: max-content; animation: bMarquee 30s linear infinite; }
.b-marquee-track span { display: flex; align-items: center; gap: 10px; font-size: .85rem; letter-spacing: .14em; text-transform: uppercase; color: var(--b-ink-soft); white-space: nowrap; }
.b-marquee-track i { color: var(--b-champagne); }
@keyframes bMarquee { to { transform: translateX(-50%); } }

/* ---------- Ícone redondo de benefício ---------- */
.b-benefit { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.b-benefit-icon { width: 54px; height: 54px; border-radius: 18px; display: grid; place-items: center; background: var(--b-accent-soft); color: var(--b-accent-dark); font-size: 1.3rem; }
.b-benefit h3 { font-size: 1.08rem; font-weight: 600; font-family: var(--b-font-body); }
.b-benefit p { font-size: .92rem; color: var(--b-ink-soft); }

/* ---------- Steps / Como funciona ---------- */
.b-steps { counter-reset: step; }
.b-step { position: relative; padding: 26px; counter-increment: step; }
.b-step::before { content: counter(step, decimal-leading-zero); font-family: var(--b-font-display); font-size: 2.6rem; font-weight: 700; background: var(--b-grad); -webkit-background-clip: text; background-clip: text; color: transparent; display: block; margin-bottom: 8px; }

/* ---------- Rotina timeline ---------- */
.b-routine { display: grid; gap: 0; }
.b-routine-item { display: grid; grid-template-columns: 90px 20px 1fr; gap: 18px; align-items: start; padding-block: 20px; }
.b-routine-time { font-weight: 700; font-size: .9rem; color: var(--b-champagne-dark); text-align: right; padding-top: 2px; }
.b-routine-dot { position: relative; display: flex; justify-content: center; }
.b-routine-dot::before { content: ""; width: 12px; height: 12px; border-radius: 50%; background: var(--b-accent); box-shadow: 0 0 0 5px var(--b-accent-soft); margin-top: 6px; }
.b-routine-item:not(:last-child) .b-routine-dot::after { content: ""; position: absolute; top: 24px; bottom: -26px; width: 2px; background: var(--b-border); }
.b-routine-body h4 { font-size: 1.02rem; font-weight: 600; }
.b-routine-body p { font-size: .9rem; color: var(--b-ink-soft); }

/* ---------- Depoimentos ---------- */
.b-quote { display: flex; flex-direction: column; gap: 16px; height: 100%; }
.b-quote-text { font-size: .98rem; color: var(--b-ink); font-style: italic; position: relative; }
.b-quote-text::before { content: "“"; font-family: var(--b-font-display); font-size: 2.6rem; line-height: 1; height: auto; color: var(--b-champagne); display: block; margin-bottom: 6px; }
.b-quote-who { margin-top: auto; display: flex; align-items: center; gap: 12px; }
.b-avatar { width: 42px; height: 42px; border-radius: 50%; background: var(--b-grad); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: .95rem; }
.b-quote-who strong { display: block; font-size: .92rem; }
.b-quote-who small { color: var(--b-ink-faint); font-size: .78rem; }

/* ---------- FAQ accordion ---------- */
.b-faq { display: grid; gap: 12px; }
.b-faq details { background: var(--b-bg-card); border: 1px solid var(--b-border); border-radius: var(--b-radius); overflow: hidden; }
.b-faq summary { list-style: none; cursor: pointer; padding: 18px 22px; font-weight: 600; display: flex; justify-content: space-between; align-items: center; gap: 14px; }
.b-faq summary::-webkit-details-marker { display: none; }
.b-faq summary::after { content: "+"; font-size: 1.4rem; color: var(--b-accent); transition: transform .2s; flex-shrink: 0; }
.b-faq details[open] summary::after { transform: rotate(45deg); }
.b-faq details > div { padding: 0 22px 20px; color: var(--b-ink-soft); font-size: .95rem; }

/* ---------- Newsletter ---------- */
/* Bloco escuro intencional nos DOIS modos (cores fixas — não usa vars
   que flipam no dark, senão vira texto branco sobre fundo claro). */
/* Newsletter "Clube Bruci": mesma superfície do hero (--b-grad-soft), para
   acompanhar o modo claro/escuro como o resto do site em vez de inverter. */
.b-news { background: var(--b-grad-soft); border: 1px solid var(--b-border); color: var(--b-ink); border-radius: var(--b-radius-lg); padding: clamp(32px, 6vw, 64px); position: relative; overflow: hidden; }
.b-news::before { content: ""; position: absolute; right: -80px; top: -80px; width: 320px; height: 320px; border-radius: 50%; background: var(--b-grad); opacity: .25; filter: blur(60px); }
.b-news h2 { color: var(--b-ink); }
.b-news p { color: var(--b-ink-soft); }
.b-news .b-kicker { color: var(--b-champagne-dark); }
.b-news .b-kicker::before, .b-news .b-kicker::after { background: var(--b-champagne-dark); }
.b-news-form { display: flex; gap: 10px; margin-top: 22px; flex-wrap: wrap; }
.b-news-form input { flex: 1 1 220px; padding: .95rem 1.3rem; border-radius: 999px; border: 1px solid var(--b-border); background: var(--b-bg-card); color: var(--b-ink); font-family: var(--b-font-body); font-size: .95rem; }
.b-news-form input::placeholder { color: var(--b-ink-faint); }
.b-news-form input:focus { outline: 2px solid var(--b-accent); outline-offset: 1px; border-color: var(--b-accent); }
.b-news .b-news-msg { color: var(--b-ink-soft); }

/* ---------- Forms ---------- */
.b-input, .b-select, .b-textarea { width: 100%; padding: .85rem 1.1rem; border-radius: var(--b-radius); border: 1px solid var(--b-border); background: var(--b-bg-card); color: var(--b-ink); font-family: var(--b-font-body); font-size: .95rem; transition: border-color .15s, box-shadow .15s; }
.b-input:focus, .b-select:focus, .b-textarea:focus { outline: none; border-color: var(--b-accent); box-shadow: 0 0 0 3px var(--b-accent-soft); }
.b-label { display: block; font-size: .85rem; font-weight: 600; margin-bottom: 6px; color: var(--b-ink); }

/* ---------- Página de produto ---------- */
.b-pdp { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(28px, 5vw, 64px); align-items: start; }
@media (max-width: 900px) { .b-pdp { grid-template-columns: 1fr; } }
.b-gallery { position: sticky; top: 96px; display: grid; gap: 14px; }
@media (max-width: 900px) { .b-gallery { position: static; } }
.b-gallery-main { border-radius: var(--b-radius-lg); overflow: hidden; background: var(--b-bg-soft); aspect-ratio: 1/1; cursor: zoom-in; position: relative; }
.b-gallery-main img { width: 100%; height: 100%; object-fit: cover; transition: transform .25s ease; }
.b-gallery-main.is-zoomed { cursor: zoom-out; }
.b-gallery-main.is-zoomed img { transform: scale(1.9); }
.b-gallery-thumbs { display: flex; gap: 10px; flex-wrap: wrap; }
.b-gallery-thumbs button { width: 74px; height: 74px; border-radius: var(--b-radius); overflow: hidden; border: 2px solid transparent; padding: 0; cursor: pointer; background: var(--b-bg-soft); }
.b-gallery-thumbs button.is-active { border-color: var(--b-accent); }
.b-gallery-thumbs img { width: 100%; height: 100%; object-fit: cover; }
.b-buybox { display: flex; flex-direction: column; gap: 18px; }
.b-buybox .b-price-now { font-size: 2.1rem; }
.b-qty { display: inline-flex; align-items: center; border: 1px solid var(--b-border); border-radius: 999px; overflow: hidden; }
.b-qty button { width: 44px; height: 46px; border: none; background: transparent; font-size: 1.2rem; cursor: pointer; color: var(--b-ink-soft); }
.b-qty button:hover { background: var(--b-accent-soft); color: var(--b-accent-dark); }
.b-qty input { width: 52px; text-align: center; border: none; background: transparent; font-weight: 700; font-size: 1rem; color: var(--b-ink); }
.b-buy-row { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.b-subscription { border: 1.5px dashed var(--b-champagne); background: var(--b-champagne-soft); border-radius: var(--b-radius); padding: 14px 18px; display: flex; gap: 12px; align-items: flex-start; }
.b-subscription input { accent-color: var(--b-accent); width: 18px; height: 18px; margin-top: 3px; }
.b-shipping-calc { display: flex; gap: 8px; }
.b-shipping-calc input { max-width: 180px; }
.b-accordion { border-top: 1px solid var(--b-border); }
.b-accordion details { border-bottom: 1px solid var(--b-border); }
.b-accordion summary { list-style: none; cursor: pointer; padding: 18px 4px; font-weight: 600; font-size: 1.02rem; display: flex; justify-content: space-between; align-items: center; }
.b-accordion summary::-webkit-details-marker { display: none; }
.b-accordion summary::after { content: "+"; color: var(--b-accent); font-size: 1.3rem; }
.b-accordion details[open] summary::after { content: "–"; }
.b-accordion details > div { padding: 0 4px 20px; color: var(--b-ink-soft); font-size: .95rem; }
.b-ingredient { display: flex; gap: 14px; align-items: flex-start; padding: 14px 0; border-bottom: 1px dashed var(--b-border); }
.b-ingredient:last-child { border-bottom: none; }
.b-ingredient i { color: var(--b-green); margin-top: 4px; }
.b-ingredient strong { display: block; font-size: .97rem; }
.b-ingredient span { font-size: .88rem; color: var(--b-ink-soft); }
.b-nutri-table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.b-nutri-table td { padding: 10px 8px; border-bottom: 1px solid var(--b-border); }
.b-nutri-table tr td:last-child { text-align: right; color: var(--b-ink-soft); }
.b-review { padding: 20px 0; border-bottom: 1px solid var(--b-border); }
.b-review-head { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; flex-wrap: wrap; }
.b-verified { font-size: .72rem; color: var(--b-success); font-weight: 600; display: inline-flex; gap: 4px; align-items: center; }

/* ---------- Sticky buy bar (produto + LP) ---------- */
.b-stickybar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 70; background: color-mix(in srgb, var(--b-bg-card) 92%, transparent); backdrop-filter: blur(12px); border-top: 1px solid var(--b-border); box-shadow: 0 -8px 30px rgba(62,52,48,.12); transform: translateY(110%); transition: transform .3s ease; padding: 10px 0; }
.b-stickybar.is-visible { transform: translateY(0); }
.b-stickybar-inner { display: flex; align-items: center; gap: 16px; }
.b-stickybar-inner img { width: 52px; height: 52px; border-radius: 12px; object-fit: cover; }
.b-stickybar-info { display: flex; flex-direction: column; min-width: 0; }
.b-stickybar-info strong { font-size: .95rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.b-stickybar-info .b-price-now { font-size: 1.15rem; }
.b-stickybar .b-btn { margin-left: auto; flex-shrink: 0; }
@media (max-width: 560px) { .b-stickybar-inner img { display: none; } }

/* ---------- CTA flutuante (LP) ---------- */
.b-float-cta { position: fixed; right: 18px; bottom: 84px; z-index: 69; }
@media (max-width: 560px) { .b-float-cta { display: none; } }

/* Provas sociais: cards compactos, clean e com o MESMO tamanho visual */
#social-proof-container > div {
  width: min(248px, calc(100vw - 1rem)) !important;
  min-height: 58px;
  max-height: 58px;
  display: flex;
  align-items: center;
  padding: 8px 12px !important;
  border-radius: 12px !important;
  box-shadow: 0 4px 18px rgba(62, 52, 48, .12) !important;
}
#social-proof-container > div > .flex { width: 100%; align-items: center; gap: 8px; }
#social-proof-container .flex-1 { min-width: 0; }
#social-proof-container .flex-1 > div {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
#social-proof-container .flex-1 > div:nth-child(1) { font-size: 11px; }
#social-proof-container .flex-1 > div:nth-child(2) { font-size: 10px; margin-top: 1px; }
#social-proof-container .flex-1 > div:nth-child(3) { font-size: 9px; margin-top: 1px; }
#social-proof-container .text-base { font-size: 15px; }

/* Botão do chat da Dayse: compacto e elegante */
#drt-chat-toggle { padding: 7px 14px 7px 8px !important; font-size: 11.5px !important; gap: 7px !important; }
#drt-chat-toggle img, #drt-chat-toggle > span.inline-flex { width: 26px !important; height: 26px !important; }
#drt-chat-panel { width: 300px !important; }

/* Sticky bar visível: desloca widgets flutuantes p/ cima (nada fica coberto) */
#social-proof-container, #drt-chat-widget-root { transition: bottom .25s ease; }
body.b-has-stickybar #social-proof-container { bottom: 96px; }
body.b-has-stickybar #drt-chat-widget-root { bottom: 88px; }
body.b-has-stickybar .b-float-cta { bottom: 160px; }

/* ---------- Tabela comparativa ---------- */
.b-compare { width: 100%; border-collapse: separate; border-spacing: 0; font-size: .93rem; background: var(--b-bg-card); border-radius: var(--b-radius-lg); overflow: hidden; border: 1px solid var(--b-border); }
.b-compare th, .b-compare td { padding: 14px 18px; text-align: center; border-bottom: 1px solid var(--b-border); }
.b-compare thead th { background: var(--b-bg-soft); font-weight: 600; }
.b-compare tbody tr:last-child td { border-bottom: none; }
.b-compare td:first-child, .b-compare th:first-child { text-align: left; font-weight: 500; }
.b-compare .is-hero { background: var(--b-accent-soft); font-weight: 700; color: var(--b-accent-dark); }
.b-compare i.fa-check { color: var(--b-success); }
.b-compare i.fa-xmark, .b-compare i.fa-minus { color: var(--b-ink-faint); }
.b-table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ---------- Selos de garantia ---------- */
.b-seal { display: flex; align-items: center; gap: 16px; padding: 18px 22px; }
.b-seal-icon { width: 58px; height: 58px; border-radius: 50%; background: var(--b-grad); color: #fff; display: grid; place-items: center; font-size: 1.4rem; flex-shrink: 0; }
.b-seal strong { display: block; font-size: .98rem; }
.b-seal span { font-size: .85rem; color: var(--b-ink-soft); }

/* ---------- Countdown / escassez ---------- */
.b-countdown { display: flex; gap: 10px; }
.b-countdown div { background: var(--b-ink); color: var(--b-bg); border-radius: 12px; min-width: 64px; padding: 10px 8px; text-align: center; }
.b-countdown b { display: block; font-size: 1.5rem; font-variant-numeric: tabular-nums; }
.b-countdown small { font-size: .64rem; text-transform: uppercase; letter-spacing: .1em; opacity: .7; }
.b-stock-bar { background: var(--b-accent-soft); border-radius: 999px; height: 10px; overflow: hidden; }
.b-stock-bar span { display: block; height: 100%; background: var(--b-grad); border-radius: 999px; }

/* ---------- Upsell / funil ---------- */
.b-upsell-wrap { max-width: 720px; margin-inline: auto; }
.b-upsell-offer { display: grid; grid-template-columns: 240px 1fr; gap: 26px; align-items: center; }
@media (max-width: 640px) { .b-upsell-offer { grid-template-columns: 1fr; text-align: center; } }
.b-upsell-offer img { width: 100%; border-radius: var(--b-radius-lg); }
.b-progress-steps { display: flex; justify-content: center; gap: 8px; margin-bottom: 28px; font-size: .78rem; color: var(--b-ink-faint); align-items: center; flex-wrap: wrap; }
.b-progress-steps span { display: inline-flex; align-items: center; gap: 6px; }
.b-progress-steps .is-active { color: var(--b-accent-dark); font-weight: 700; }
.b-progress-steps i { font-size: .55rem; }

/* ---------- Popup / modal captura ---------- */
.b-modal-backdrop { position: fixed; inset: 0; background: rgba(40, 30, 26, .55); backdrop-filter: blur(4px); z-index: 90; display: none; align-items: center; justify-content: center; padding: 20px; }
.b-modal-backdrop.is-open { display: flex; }
.b-modal { background: var(--b-bg-card); border-radius: var(--b-radius-lg); max-width: 460px; width: 100%; padding: clamp(26px, 5vw, 40px); position: relative; box-shadow: var(--b-shadow-lg); animation: bModalIn .3s ease; }
@keyframes bModalIn { from { opacity: 0; transform: translateY(18px) scale(.97); } }
.b-modal-close { position: absolute; top: 14px; right: 14px; }
.b-coupon-chip { display: inline-flex; align-items: center; gap: 10px; border: 2px dashed var(--b-accent); background: var(--b-accent-soft); color: var(--b-accent-dark); font-weight: 700; letter-spacing: .12em; padding: .7rem 1.4rem; border-radius: 12px; font-size: 1.1rem; cursor: pointer; }

/* ---------- Instagram grid ---------- */
.b-insta { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; }
@media (max-width: 900px) { .b-insta { grid-template-columns: repeat(3, 1fr); } }
.b-insta a { aspect-ratio: 1/1; border-radius: var(--b-radius); overflow: hidden; position: relative; display: block; background: var(--b-grad-soft); }
.b-insta img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.b-insta a:hover img { transform: scale(1.08); }
.b-insta a::after { content: "\f16d"; font-family: "Font Awesome 6 Brands"; position: absolute; inset: 0; display: grid; place-items: center; font-size: 1.4rem; color: #fff; background: rgba(183, 110, 121, .45); opacity: 0; transition: opacity .2s; }
.b-insta a:hover::after { opacity: 1; }

/* ---------- Blog cards ---------- */
.b-post-card { overflow: hidden; display: flex; flex-direction: column; }
.b-post-card img { aspect-ratio: 16/10; object-fit: cover; width: 100%; }
.b-post-body { padding: 20px 22px 24px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.b-post-body time { font-size: .78rem; color: var(--b-ink-faint); text-transform: uppercase; letter-spacing: .1em; }
.b-post-title { font-family: var(--b-font-display); font-size: 1.3rem; font-weight: 600; color: var(--b-ink); text-decoration: none; }
.b-post-title:hover { color: var(--b-accent-dark); }

/* ---------- Breadcrumbs ---------- */
.b-crumbs { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: .82rem; color: var(--b-ink-faint); padding-block: 18px; }
.b-crumbs a { color: var(--b-ink-soft); text-decoration: none; }
.b-crumbs a:hover { color: var(--b-accent-dark); }
.b-crumbs i { font-size: .6rem; }

/* ---------- LP base ---------- */
.b-lp { --b-accent: var(--lp-accent, var(--b-rose)); --b-accent-dark: var(--lp-accent-dark, var(--b-rose-dark)); --b-accent-soft: var(--lp-accent-soft, var(--b-rose-soft)); }
.b-lp-topbar { display: flex; align-items: center; justify-content: space-between; padding-block: 14px; }
.b-lp-hero { background: var(--b-grad-soft); position: relative; overflow: hidden; }
.b-lp-section-alt { background: var(--b-bg-soft); }
.b-problem-list { display: grid; gap: 14px; }
.b-problem-list li { display: flex; gap: 12px; align-items: flex-start; list-style: none; background: var(--b-bg-card); border: 1px solid var(--b-border); border-radius: var(--b-radius); padding: 16px 20px; }
.b-problem-list li i { margin-top: 3px; }
.b-check-list { display: grid; gap: 12px; }
.b-check-list li { display: flex; gap: 12px; align-items: flex-start; list-style: none; }
.b-check-list li i { color: var(--b-success); margin-top: 4px; }

/* ---------- Animações de entrada (progressive enhancement) ----------
   Conteúdo SEMPRE visível por padrão. O estado oculto só existe quando
   o JS confirma que vai animar (html.b-anim) — sem JS, nada some. */
html.b-anim .b-reveal { opacity: 0; transform: translateY(22px); transition: opacity .6s ease, transform .6s ease; }
html.b-anim .b-reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .b-reveal { opacity: 1; transform: none; transition: none; }
  .b-marquee-track { animation: none; }
  .b-btn-pulse { animation: none; }
  * { scroll-behavior: auto !important; }
}

/* ---------- Utilidades ---------- */
.b-mt-1 { margin-top: 8px; } .b-mt-2 { margin-top: 16px; } .b-mt-3 { margin-top: 24px; } .b-mt-4 { margin-top: 40px; }
.b-mb-2 { margin-bottom: 16px; } .b-mb-3 { margin-bottom: 24px; }
.b-flex { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.b-between { justify-content: space-between; }
.b-muted { color: var(--b-ink-soft); }
.b-small { font-size: .85rem; }
.b-strong-accent { color: var(--b-accent-dark); }
.b-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.b-skip-link { position: absolute; left: -9999px; top: 0; background: var(--b-ink); color: #fff; padding: 10px 18px; z-index: 100; border-radius: 0 0 12px 0; }
.b-skip-link:focus { left: 0; }
img { max-width: 100%; }
/* .hidden e variantes responsivas foram movidos p/ o FIM do arquivo:
   a ordem na cascata precisa ser display-base → .hidden → lg:* */
.b-grad-text { background: var(--b-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ============================================================
   Harmonização de páginas legadas (Tailwind) com o tema
   — mata o verde/azul do tema anterior em TODAS as páginas
   ============================================================ */
.btn-primary { background: var(--b-grad) !important; border: none !important; }
.use-primary-color { color: var(--b-accent-dark) !important; }
.use-primary-bg { background: var(--b-accent) !important; }

/* Esmeralda/verde → rose gold */
.bg-emerald-500, .bg-emerald-600, .bg-green-600 { background-color: var(--b-rose) !important; background-image: var(--b-grad) !important; }
.hover\:bg-emerald-700:hover, .hover\:bg-emerald-600:hover, .hover\:bg-green-700:hover { background-color: var(--b-rose-dark) !important; background-image: none !important; }
.bg-emerald-50, .bg-emerald-100, .bg-green-50 { background-color: var(--b-rose-soft) !important; }
.text-emerald-600, .text-emerald-700, .text-emerald-800, .text-green-600 { color: var(--b-rose-dark) !important; }
.hover\:text-emerald-600:hover, .hover\:text-emerald-700:hover, .hover\:text-emerald-400:hover, .hover\:text-emerald-300:hover { color: var(--b-rose-dark) !important; }
.border-emerald-200, .border-green-200 { border-color: var(--b-border) !important; }
.border-green-600 { border-color: var(--b-rose) !important; }
.hover\:border-emerald-500:hover, .hover\:border-emerald-600:hover { border-color: var(--b-rose) !important; }
.focus\:border-emerald-500:focus { border-color: var(--b-rose) !important; }
.focus\:ring-emerald-500:focus { --tw-ring-color: var(--b-rose) !important; }
html.dark .dark\:text-emerald-400, html.dark .dark\:text-emerald-300 { color: #DDABB3 !important; }
html.dark .dark\:bg-emerald-900\/20, html.dark .dark\:bg-emerald-900\/30, html.dark .dark\:bg-emerald-900\/40, html.dark .dark\:bg-green-900\/20 { background-color: rgba(183, 110, 121, .18) !important; }
html.dark .dark\:border-emerald-800, html.dark .dark\:border-green-800 { border-color: #5A4046 !important; }

/* Azul → champagne */
.bg-blue-600, .hover\:bg-blue-700:hover, .hover\:bg-sky-600:hover { background-color: var(--b-champagne) !important; background-image: none !important; }
.bg-blue-50 { background-color: var(--b-champagne-soft) !important; }
.to-blue-50 { --tw-gradient-to: var(--b-champagne-soft) !important; }
.text-blue-600, .text-blue-700 { color: var(--b-champagne-dark) !important; }
html.dark .dark\:bg-blue-900\/20 { background-color: rgba(201, 160, 108, .18) !important; }

/* ============================================================
   Fallback de utilitários p/ componentes flutuantes
   (chat widget, social proof, toasts, modais) nas páginas
   novas SEM Tailwind CDN. Sem !important: nas páginas legadas
   o Tailwind continua mandando.
   ============================================================ */
.fixed { position: fixed; }
.absolute { position: absolute; }
.relative { position: relative; }
.inset-0 { inset: 0; }
.z-40 { z-index: 40; } .z-50 { z-index: 50; } .z-\[100\] { z-index: 100; }
.bottom-2 { bottom: 8px; } .bottom-3 { bottom: 12px; } .bottom-4 { bottom: 16px; }
.top-4 { top: 16px; } .right-4 { right: 16px; } .right-6 { right: 24px; } .left-2 { left: 8px; } .left-4 { left: 16px; }
.flex { display: flex; } .inline-flex { display: inline-flex; } .flex-1 { flex: 1 1 0%; } .flex-col { flex-direction: column; }
.items-center { align-items: center; } .items-end { align-items: flex-end; } .items-start { align-items: flex-start; }
.justify-between { justify-content: space-between; } .justify-center { justify-content: center; } .justify-end { justify-content: flex-end; } .justify-start { justify-content: flex-start; }
.gap-2 { gap: 8px; } .gap-3 { gap: 12px; }
.space-y-2 > * + * { margin-top: 8px; }
.rounded-full { border-radius: 9999px; } .rounded-xl { border-radius: 12px; } .rounded-lg { border-radius: 8px; } .rounded-2xl { border-radius: 16px; } .rounded-bl-sm { border-bottom-left-radius: 2px; }
.border { border: 1px solid var(--b-border); } .border-t { border-top: 1px solid var(--b-border); } .border-b { border-bottom: 1px solid var(--b-border); }
.border-slate-200, .border-slate-300 { border-color: var(--b-border); }
.bg-white { background-color: var(--b-bg-card); }
.bg-slate-100 { background-color: var(--b-bg-soft); }
.bg-black\/50 { background-color: rgba(30, 24, 20, .55); }
.bg-white\/20 { background-color: rgba(255, 255, 255, .2); }
.max-w-md { max-width: 28rem; } .max-w-\[80\%\] { max-width: 80%; } .max-h-72 { max-height: 18rem; } .max-w-\[calc\(100vw-1rem\)\] { max-width: calc(100vw - 1rem); }
.overflow-y-auto { overflow-y: auto; } .overflow-hidden { overflow: hidden; }
.w-6 { width: 24px; } .h-6 { height: 24px; } .w-8 { width: 32px; } .h-8 { height: 32px; } .w-10 { width: 40px; } .h-10 { height: 40px; } .w-12 { width: 48px; } .h-12 { height: 48px; } .w-full { width: 100%; } .w-72 { width: 18rem; } .w-80 { width: 20rem; }
.px-2 { padding-inline: 8px; } .px-3 { padding-inline: 12px; } .px-4 { padding-inline: 16px; }
.py-1 { padding-block: 4px; } .py-1\.5 { padding-block: 6px; } .py-2 { padding-block: 8px; } .py-3 { padding-block: 12px; }
.p-3 { padding: 12px; } .p-4 { padding: 16px; }
.mt-0\.5 { margin-top: 2px; } .mt-1 { margin-top: 4px; } .mb-2 { margin-bottom: 8px; } .mx-auto { margin-inline: auto; }
.text-\[10px\] { font-size: 10px; } .text-\[11px\] { font-size: 11px; } .text-xs { font-size: 12px; } .text-sm { font-size: 14px; } .text-base { font-size: 16px; } .text-lg { font-size: 18px; }
.font-medium { font-weight: 500; } .font-semibold { font-weight: 600; } .font-bold { font-weight: 700; }
.leading-none { line-height: 1; }
.shadow-2xl { box-shadow: var(--b-shadow-lg); } .shadow-lg { box-shadow: var(--b-shadow); }
.object-cover { object-fit: cover; }
.resize-none { resize: none; }
.pointer-events-none { pointer-events: none; }
.cursor-pointer { cursor: pointer; }
.text-white { color: #fff; } .text-white\/80 { color: rgba(255, 255, 255, .8); }
.text-slate-400 { color: var(--b-ink-faint); } .text-slate-500, .text-slate-600 { color: var(--b-ink-soft); } .text-slate-700, .text-slate-800, .text-slate-900 { color: var(--b-ink); }
.transition, .transition-colors, .transition-all { transition: all .15s ease; }
@media (min-width: 640px) { .sm\:bottom-3 { bottom: 12px; } .sm\:right-6 { right: 24px; } .sm\:left-4 { left: 16px; } }

/* ============================================================
   TEMA COMPLETO nas páginas legadas — mata o slate (azul-marinho)
   e o cinza frio em AMBOS os modos. Com !important p/ vencer o
   Tailwind CDN. Variáveis fazem o dark mode contrastar certo.
   ============================================================ */
/* Fundos claros frios → off-white/nude quentes */
.bg-slate-50, .bg-gray-50 { background-color: var(--b-bg) !important; }
.bg-slate-100 { background-color: var(--b-bg-soft) !important; }
.bg-slate-200 { background-color: #EFE3D6 !important; }
.hover\:bg-slate-50:hover, .hover\:bg-slate-100:hover, .hover\:bg-gray-100:hover, .active\:bg-slate-100:active { background-color: var(--b-bg-soft) !important; }
.bg-white { background-color: var(--b-bg-card) !important; }
.bg-white\/80, .bg-white\/90, .bg-white\/95 { background-color: color-mix(in srgb, var(--b-bg-card) 93%, transparent) !important; }

/* Textos frios → tinta quente (contraste correto nos 2 modos via var) */
.text-slate-900, .text-slate-800, .text-slate-700, .text-gray-900, .text-gray-700 { color: var(--b-ink) !important; }
.text-slate-600, .text-slate-500, .text-gray-600, .text-gray-500 { color: var(--b-ink-soft) !important; }
.text-slate-400 { color: var(--b-ink-faint) !important; }
.hover\:text-slate-600:hover { color: var(--b-ink) !important; }
.border-slate-200, .border-slate-300 { border-color: var(--b-border) !important; }

/* Dark: slate-950/900/800 (azul-marinho) → marrons quentes */
html.dark .dark\:bg-slate-950, html.dark .dark\:bg-slate-950\/95, html.dark .dark\:bg-slate-950\/60 { background-color: #1D1815 !important; }
html.dark .dark\:bg-slate-900, html.dark .dark\:bg-slate-900\/90, html.dark .dark\:bg-slate-900\/80, html.dark .dark\:bg-slate-900\/50 { background-color: #221C19 !important; }
html.dark .dark\:bg-slate-800, html.dark .dark\:bg-slate-800\/50, html.dark .dark\:bg-slate-700 { background-color: #2F2823 !important; }
html.dark .dark\:hover\:bg-slate-800:hover, html.dark .dark\:active\:bg-slate-700:active { background-color: #3A3129 !important; }
html.dark .dark\:border-slate-700, html.dark .dark\:border-slate-800 { border-color: #453A32 !important; }
html.dark .dark\:text-slate-100, html.dark .dark\:text-slate-200, html.dark .dark\:text-slate-300 { color: #F3EAE2 !important; }
html.dark .dark\:text-slate-400, html.dark .dark\:text-slate-500, html.dark .dark\:text-gray-300 { color: #C9B8AC !important; }
html.dark .dark\:hover\:text-slate-300:hover { color: #F3EAE2 !important; }

/* Roxo (social proof) e esmeraldas restantes → rose gold */
.text-purple-600 { color: var(--b-rose-dark) !important; }
.bg-purple-50 { background-color: var(--b-rose-soft) !important; }
html.dark .dark\:bg-purple-900\/20 { background-color: rgba(183, 110, 121, .18) !important; }
.border-emerald-100, .border-emerald-600 { border-color: var(--b-rose) !important; }
html.dark .dark\:border-emerald-900 { border-color: #5A4046 !important; }
html.dark .dark\:hover\:border-emerald-600:hover { border-color: var(--b-rose) !important; }
.focus\:ring-emerald-400:focus { --tw-ring-color: var(--b-rose) !important; }
.to-emerald-50 { --tw-gradient-to: var(--b-rose-soft) !important; }
html.dark .dark\:to-emerald-900\/20 { --tw-gradient-to: rgba(183, 110, 121, .18) !important; }

/* ============================================================
   Fallback estrutural completo p/ componentes dinâmicos (JS)
   em páginas sem Tailwind — sem !important (Tailwind vence onde existe)
   ============================================================ */
.mt-2 { margin-top: 8px; } .mt-3 { margin-top: 12px; } .mt-4 { margin-top: 16px; } .mt-8 { margin-top: 32px; }
.mb-1 { margin-bottom: 4px; } .mb-1\.5 { margin-bottom: 6px; } .mb-3 { margin-bottom: 12px; } .mb-4 { margin-bottom: 16px; } .mb-6 { margin-bottom: 24px; } .mb-8 { margin-bottom: 32px; }
.mr-2 { margin-right: 8px; } .mx-2 { margin-inline: 8px; } .my-3 { margin-block: 12px; }
.p-2 { padding: 8px; } .p-5 { padding: 20px; } .p-6 { padding: 24px; } .px-6 { padding-inline: 24px; } .py-12 { padding-block: 48px; } .py-2\.5 { padding-block: 10px; }
.gap-1 { gap: 4px; } .gap-4 { gap: 16px; }
.space-x-2 > * + * { margin-left: 8px; } .space-y-1 > * + * { margin-top: 4px; } .space-y-3 > * + * { margin-top: 12px; } .space-y-4 > * + * { margin-top: 16px; } .space-y-6 > * + * { margin-top: 24px; }
.top-0 { top: 0; } .top-2 { top: 8px; } .right-2 { right: 8px; } .bottom-0 { bottom: 0; } .z-10 { z-index: 10; }
.w-9 { width: 36px; } .h-9 { height: 36px; } .w-16 { width: 64px; } .h-16 { height: 64px; } .w-20 { width: 80px; } .h-20 { height: 80px; } .h-4 { height: 16px; } .h-full { height: 100%; } .min-h-full { min-height: 100%; }
.w-1\/2 { width: 50%; } .w-1\/3 { width: 33.333%; } .w-1\/4 { width: 25%; } .w-3\/4 { width: 75%; } .w-\[95\%\] { width: 95%; }
.min-w-0 { min-width: 0; } .min-w-\[300px\] { min-width: 300px; } .min-h-\[2\.5rem\] { min-height: 2.5rem; }
.max-w-xs { max-width: 20rem; } .max-w-2xl { max-width: 42rem; } .max-w-4xl { max-width: 56rem; } .max-w-none { max-width: none; } .max-h-\[90vh\] { max-height: 90vh; }
.text-center { text-align: center; } .text-left { text-align: left; }
.text-xl { font-size: 20px; } .text-2xl { font-size: 24px; } .text-3xl { font-size: 30px; } .text-6xl { font-size: 60px; }
.leading-relaxed { line-height: 1.625; }
.inline-block { display: inline-block; }
.flex-shrink-0 { flex-shrink: 0; }
.grid-cols-1 { grid-template-columns: 1fr; } .grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
.border-2 { border-width: 2px; border-style: solid; } .border-b-2 { border-bottom: 2px solid; } .border-transparent { border-color: transparent; }
.rounded-br-sm { border-bottom-right-radius: 2px; }
.shadow-md { box-shadow: var(--b-shadow-sm); } .shadow-xl { box-shadow: var(--b-shadow-lg); }
.hover\:shadow-lg:hover { box-shadow: var(--b-shadow); }
.hover\:underline:hover { text-decoration: underline; }
.hover\:opacity-90:hover { opacity: .9; }
.opacity-0 { opacity: 0; } .opacity-75 { opacity: .75; } .opacity-100 { opacity: 1; }
.transition-opacity { transition: opacity .3s ease; } .transition-shadow { transition: box-shadow .2s ease; } .duration-300 { transition-duration: .3s; }
.translate-x-0 { transform: translateX(0); } .translate-x-full { transform: translateX(100%); }
.scale-95 { transform: scale(.95); } .scale-100 { transform: scale(1); } .scale-125 { transform: scale(1.25); }
.pointer-events-auto { pointer-events: auto; }
.cursor-not-allowed { cursor: not-allowed; }
.disabled\:opacity-50:disabled { opacity: .5; } .disabled\:cursor-not-allowed:disabled { cursor: not-allowed; }
.focus\:outline-none:focus { outline: none; }
.focus\:ring-2:focus { box-shadow: 0 0 0 2px var(--b-accent-soft); }
.backdrop-blur, .backdrop-blur-sm { backdrop-filter: blur(8px); }
.aspect-square { aspect-ratio: 1/1; }
.line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.list-disc { list-style-type: disc; } .list-inside { list-style-position: inside; }
.bg-black\/40 { background-color: rgba(30, 24, 20, .45); }
.hover\:text-white:hover { color: #fff; }
/* Semânticos de erro/aviso (toasts e validações nas páginas sem Tailwind) */
.bg-red-50 { background-color: #FBEAE8; } .hover\:bg-red-50:hover { background-color: #FBEAE8; }
.text-red-500, .text-red-600 { color: var(--b-danger); } .text-red-700, .hover\:text-red-700:hover { color: #9E3F3B; }
.border-red-200 { border-color: #EFC5C1; } .border-red-500 { border-color: var(--b-danger); }
.bg-amber-500 { background-color: #D99A3E; } .text-amber-500 { color: #C4882F; } .text-amber-700 { color: #8F6320; }
.border-amber-200 { border-color: #EFD9AE; }
.touch-manipulation { touch-action: manipulation; }
.animate-spin { animation: bSpin 1s linear infinite; }
.animate-pulse { animation: bPulseSoft 2s cubic-bezier(.4, 0, .6, 1) infinite; }
.animate-bounce, .animate-bounce-slow { animation: bBounce 1.6s infinite; }
@keyframes bSpin { to { transform: rotate(360deg); } }
@keyframes bPulseSoft { 50% { opacity: .5; } }
@keyframes bBounce { 0%, 100% { transform: translateY(-8%); } 50% { transform: translateY(0); } }
@media (min-width: 640px) {
  .sm\:block { display: block; } .sm\:flex-row { flex-direction: row; } .sm\:items-center { align-items: center; }
  .sm\:justify-between { justify-content: space-between; } .sm\:gap-6 { gap: 24px; } .sm\:grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
  .sm\:p-4 { padding: 16px; } .sm\:mb-2 { margin-bottom: 8px; } .sm\:mb-3 { margin-bottom: 12px; }
  .sm\:text-xs { font-size: 12px; } .sm\:text-sm { font-size: 14px; } .sm\:text-base { font-size: 16px; } .sm\:text-lg { font-size: 18px; }
  .sm\:max-w-\[90vw\] { max-width: 90vw; }
}
@media (min-width: 768px) { .md\:text-3xl { font-size: 30px; } }
@media (min-width: 1024px) { .lg\:grid-cols-3 { grid-template-columns: repeat(3, 1fr); } }

/* ============================================================
   Ajustes finos — contraste, alinhamento e espaçamento
   ============================================================ */
:root { --b-ink-faint: #8A796D; }
html.dark { --b-ink-faint: #A18F82; }
.b-announce { font-weight: 600; }
.b-footer a { display: flex; align-items: center; gap: 8px; }
.b-footer .b-logo { display: inline-block; }
/* Botões redondos (redes sociais) voltam a centralizar o ícone no círculo */
.b-footer a.b-icon-btn { display: grid; place-items: center; gap: 0; padding: 0; }
.b-crumbs { padding-block: 20px 8px; }
.b-price-old { align-self: center; }
.b-quote-text { line-height: 1.55; }
.b-stickybar-info { gap: 2px; }
@media (max-width: 900px) {
  .b-hero-copy .b-flex { justify-content: center; }
  .b-hero-media { margin-top: 8px; }
}
@media (max-width: 640px) {
  /* Header mobile: menos ícones, sem estourar o container */
  .b-header-inner { gap: 8px; padding-block: 10px; }
  .b-logo { font-size: 1.3rem; }
  .b-logo img { max-height: 36px; }
  .b-icon-btn { width: 38px; height: 38px; font-size: .95rem; }
  .b-header-actions { gap: 0; }
  .b-header-actions .b-hide-mobile { display: none; }
  .b-announce { font-size: .72rem; padding: .45rem 12px; }
  .b-container { padding-inline: 16px; }
  .b-section { padding-block: 48px; }
  .b-hero-inner { padding-block: 40px; gap: 26px; }
  .b-footer-grid { gap: 26px; }
  .b-news { padding: 28px 20px; }
  .b-news-form { flex-direction: column; }
  /* em coluna, o flex-basis 220px viraria ALTURA — zera e ocupa a largura */
  .b-news-form input { flex: 0 0 auto; width: 100%; padding: .85rem 1.1rem; }
  .b-news-form .b-btn { width: 100%; }
  .b-btn-lg { padding: 1.05rem 1.8rem; }
  .b-stickybar-info strong { max-width: 42vw; }
  .b-h1 { font-size: clamp(2rem, 8.5vw, 2.6rem); }
  .b-countdown div { min-width: 56px; }
  .b-upsell-offer img { max-width: 260px; margin-inline: auto; }
}

/* ============================================================
   ORDEM FINAL DA CASCATA (não mover): utilitários de display
   base vêm antes; .hidden vence qualquer .flex/.grid/.block no
   mesmo elemento; variantes responsivas lg:* vencem .hidden.
   ============================================================ */
.hidden { display: none; }
@media (min-width: 1024px) {
  .lg\:hidden { display: none; }
  .lg\:block { display: block; }
  .lg\:flex { display: flex; }
  .lg\:flex-row { flex-direction: row; }
  .lg\:w-72 { width: 18rem; }
}

/* ============================================================
   CORREÇÕES light/dark + seleção (paridade com damacandlehome)
   ============================================================ */
:root { --d-star: #B58A2E; }
html.dark { --d-star: #DBB05E; }

/* Nav ativa: aba selecionada (rosé + sublinhado + peso) */
.b-nav a[aria-current="page"] { color: var(--b-accent-dark); border-bottom: 2px solid var(--b-accent); font-weight: 700; }
.b-nav a:focus-visible, .b-icon-btn:focus-visible { outline: 2px solid var(--b-accent); outline-offset: 3px; }
.b-mobile-nav a[aria-current="page"] { color: var(--b-accent-dark); border-left: 3px solid var(--b-accent); padding-left: 12px; }
.b-icon-btn.is-active { color: var(--b-accent-dark); background: var(--b-accent-soft); }

/* Estrelas: dourado mais visível */
.b-stars, .b-stars i, .text-amber-500, .fa-star { color: var(--d-star) !important; }

/* Newsletter no escuro: champanhe mais claro (o -dark do modo claro perde
   contraste sobre a superfície escura). O fundo vem de --b-grad-soft. */
html.dark .b-news .b-kicker { color: var(--b-champagne); }
html.dark .b-news .b-kicker::before, html.dark .b-news .b-kicker::after { background: var(--b-champagne); }
html.dark .b-news::before { opacity: .3; }

/* Barra de aviso do topo adapta no dark */
html.dark .b-announce { background: #2C2420 !important; color: #E8C7C1 !important; border-bottom: 1px solid var(--b-border); }

/* Inputs: fundo consistente + autofill (Nome/E-mail ficavam brancos no dark) */
input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]):not([type=range]),
textarea, select { background-color: var(--b-bg-card); color: var(--b-ink); border-color: var(--b-border); }
html.dark input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]):not([type=range]),
html.dark textarea, html.dark select { background-color: var(--b-bg-card) !important; color: var(--b-ink) !important; border-color: var(--b-border) !important; }
input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--b-ink) !important; caret-color: var(--b-ink);
  transition: background-color 9999s ease-in-out 0s;
  box-shadow: 0 0 0 100px var(--b-bg-card) inset !important; -webkit-box-shadow: 0 0 0 100px var(--b-bg-card) inset !important;
}
input:focus, textarea:focus, select:focus { outline: none; border-color: var(--b-accent); box-shadow: 0 0 0 3px var(--b-accent-soft); }

/* Cards de produto com a MESMA altura */
.b-product-card { display: flex; flex-direction: column; }
.b-product-body { display: flex; flex-direction: column; flex: 1 1 auto; }
.b-product-desc { min-height: 2.55em; -webkit-line-clamp: 2; }
.b-product-card .b-stars { min-height: 1.15em; }
.b-product-cta { margin-top: auto; }
.grid.grid-cols-2 { grid-auto-rows: 1fr; }
.grid.grid-cols-2 > * { height: 100%; }
.product-card { display: flex; flex-direction: column; height: 100%; }
.product-card > a:first-of-type { flex: 0 0 auto; }
.product-card > .p-3 { display: flex; flex-direction: column; flex: 1 1 auto; }
.product-card > .p-3 > h3 { min-height: 2.5rem; }
.product-card > .p-3 > .flex { margin-top: auto; }

/* ===== Antes & depois: comparação por slider =====
   A posição do corte é a custom property --b-ba-pos, escrita pelo JS a partir
   do input range (que é o controle real, para funcionar no teclado). */
.b-ba { --b-ba-pos: 50%; position: relative; aspect-ratio: 4/3; overflow: hidden; background: var(--b-bg-soft); touch-action: pan-y; }
.b-ba-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; user-select: none; -webkit-user-drag: none; }
.b-ba-clip { position: absolute; inset: 0; clip-path: inset(0 calc(100% - var(--b-ba-pos)) 0 0); }

.b-ba-line { position: absolute; top: 0; bottom: 0; left: var(--b-ba-pos); width: 2px; margin-left: -1px; background: #fff; box-shadow: 0 0 0 1px rgba(62, 52, 48, .22); pointer-events: none; }
.b-ba-line::after { content: ""; position: absolute; top: 50%; left: 50%; width: 40px; height: 40px; transform: translate(-50%, -50%); border-radius: 999px; background: #fff; box-shadow: var(--b-shadow); border: 1px solid var(--b-border); }
/* Setas do handle: máscara SVG (chevrons ‹ ›) tingida com a cor de destaque */
.b-ba-line::before { content: ""; position: absolute; top: 50%; left: 50%; width: 19px; height: 13px; transform: translate(-50%, -50%); z-index: 1;
  background-color: var(--b-accent-dark);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 16'%3E%3Cpath d='M7 2 1 8l6 6M17 2l6 6-6 6' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 16'%3E%3Cpath d='M7 2 1 8l6 6M17 2l6 6-6 6' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; }

/* O range cobre a área toda e fica invisível: o traço branco é o "handle" visual */
.b-ba-range { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; opacity: 0; cursor: ew-resize; -webkit-appearance: none; appearance: none; background: transparent; }
.b-ba-range::-webkit-slider-thumb { -webkit-appearance: none; width: 44px; height: 100%; cursor: ew-resize; }
.b-ba-range::-moz-range-thumb { width: 44px; height: 100%; border: 0; border-radius: 0; background: transparent; cursor: ew-resize; }
.b-ba-range:focus-visible + .b-ba-line::after { outline: 3px solid var(--b-accent); outline-offset: 2px; }

.b-ba-label { position: absolute; bottom: 12px; font-size: .68rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; padding: .3rem .7rem; border-radius: 999px; background: rgba(255, 255, 255, .9); color: var(--b-ink); border: 1px solid var(--b-border); pointer-events: none; }
.b-ba-label-antes { left: 12px; }
.b-ba-label-depois { right: 12px; }
html.dark .b-ba-label { background: rgba(47, 40, 35, .9); }

/* Aviso de que a arte é ilustrativa — a promessa da seção é foto real de cliente */
.b-ba-note { position: absolute; top: 12px; left: 12px; right: 12px; font-size: .64rem; letter-spacing: .08em; text-transform: uppercase; font-weight: 600; text-align: center; padding: .28rem .5rem; border-radius: 999px; background: rgba(255, 255, 255, .82); color: var(--b-ink-soft); border: 1px solid var(--b-border); pointer-events: none; }
html.dark .b-ba-note { background: rgba(47, 40, 35, .82); }

@media (max-width: 560px) {
  .b-ba-label { font-size: .6rem; padding: .25rem .55rem; }
  .b-ba-line::after { width: 34px; height: 34px; }
}
@media (prefers-reduced-motion: reduce) { .b-ba-clip { transition: none; } }