/*
Theme Name: Meu Bip Loja
Template: twentytwentyfive
Description: Tema da loja Meu Bip (filho do Twenty Twenty-Five). Modelo D "Cores por uso": neutros frios, 5 tons de destaque, tema claro e escuro; Baloo 2 + Inter.
Version: 2.3.0
Text Domain: meubip
*/

/* ================= tokens (claro por padrão; escuro pelo botão ou pelo celular) ================= */
:root {
  --mb-bg: #F4F5F7; --mb-surface: #FFFFFF; --mb-surface-2: #ECEEF2; --mb-line: #E1E4EA; --mb-text: #16161A; --mb-muted: #555A66;
  --mb-marca: #FFC400; --mb-marca-hover: #F0B700; --mb-tinta: #16161A; --mb-inv: #16161A; --mb-inv-text: #F4F5F7;
  --mb-t-amarelo: #FFF1BF; --mb-t-azul: #DCEBFF; --mb-t-verde: #D4F1DF; --mb-t-rosa: #FFE0EA; --mb-t-laranja: #FFE3CC;
  --mb-a-amarelo: #7A5A00; --mb-a-azul: #1D4F91; --mb-a-verde: #1B6B3F; --mb-a-rosa: #A2244F; --mb-a-laranja: #9A4A0C;
  --mb-rodape: #16161A; --mb-foco: #1D4F91;
  --mb-sombra: 0 1px 2px rgba(22,22,26,.06);
  --mb-sombra-g: 0 18px 40px -18px rgba(22,22,26,.3);
  --mb-display: "Baloo 2", ui-rounded, system-ui, sans-serif;
  --mb-corpo: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mb-max: 1240px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --mb-bg: #0F1320; --mb-surface: #171C2E; --mb-surface-2: #1E2438; --mb-line: #2A3148; --mb-text: #F2F3F7; --mb-muted: #A7ADBF;
    --mb-inv: #F2F3F7; --mb-inv-text: #0F1320;
    --mb-t-amarelo: #3A3113; --mb-t-azul: #17294A; --mb-t-verde: #123526; --mb-t-rosa: #3D1A2B; --mb-t-laranja: #3D2614;
    --mb-a-amarelo: #FFD54D; --mb-a-azul: #8DB8FF; --mb-a-verde: #7ED9A4; --mb-a-rosa: #FF9DBE; --mb-a-laranja: #FFB37A;
    --mb-rodape: #090C16; --mb-foco: #FFC400;
    --mb-sombra: 0 1px 2px rgba(0,0,0,.35); --mb-sombra-g: 0 18px 40px -18px rgba(0,0,0,.7);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --mb-bg: #0F1320; --mb-surface: #171C2E; --mb-surface-2: #1E2438; --mb-line: #2A3148; --mb-text: #F2F3F7; --mb-muted: #A7ADBF;
  --mb-inv: #F2F3F7; --mb-inv-text: #0F1320;
  --mb-t-amarelo: #3A3113; --mb-t-azul: #17294A; --mb-t-verde: #123526; --mb-t-rosa: #3D1A2B; --mb-t-laranja: #3D2614;
  --mb-a-amarelo: #FFD54D; --mb-a-azul: #8DB8FF; --mb-a-verde: #7ED9A4; --mb-a-rosa: #FF9DBE; --mb-a-laranja: #FFB37A;
  --mb-rodape: #090C16; --mb-foco: #FFC400;
  --mb-sombra: 0 1px 2px rgba(0,0,0,.35); --mb-sombra-g: 0 18px 40px -18px rgba(0,0,0,.7);
}
/* cores do WordPress/WooCommerce seguem os tokens (vale para carrinho, finalizar compra e páginas de texto) */
:root:root {
  --wp--preset--color--base: var(--mb-bg); --wp--preset--color--base-2: var(--mb-surface-2); --wp--preset--color--contrast: var(--mb-text);
  --wp--preset--color--accent-3: var(--mb-muted); --wp--preset--color--accent-4: var(--mb-line); --wp--preset--color--white: var(--mb-surface);
  --mb-amarelo: var(--mb-marca); --mb-creme: var(--mb-surface-2); --mb-borda: var(--mb-line);
}
.mb-tom-amarelo { --t: var(--mb-t-amarelo); --a: var(--mb-a-amarelo); }
.mb-tom-azul { --t: var(--mb-t-azul); --a: var(--mb-a-azul); }
.mb-tom-verde { --t: var(--mb-t-verde); --a: var(--mb-a-verde); }
.mb-tom-rosa { --t: var(--mb-t-rosa); --a: var(--mb-a-rosa); }
.mb-tom-laranja { --t: var(--mb-t-laranja); --a: var(--mb-a-laranja); }

/* ================= base ================= */
body { background: var(--mb-bg); color: var(--mb-text); -webkit-font-smoothing: antialiased; transition: background-color .3s, color .3s; }
:where(a):focus-visible, :where(button, .wp-element-button, input, select, textarea, summary):focus-visible { outline: 2px solid var(--mb-foco); outline-offset: 2px; border-radius: 8px; }
.wp-site-blocks > .mb-inicio, .wp-site-blocks > .mb-pagina-produto { margin-block-start: 0; }
.mb-wrap { max-width: var(--mb-max); margin-inline: auto; padding-inline: 16px; box-sizing: border-box; }
@media (min-width: 768px) { .mb-wrap { padding-inline: 32px; } }
.mb-inicio h1, .mb-inicio h2, .mb-inicio h3, .mb-produto h1, .mb-produto h2, .mb-produto h3 { font-family: var(--mb-display); letter-spacing: -.01em; text-wrap: balance; margin: 0; }
.mb-inicio p, .mb-produto p { margin: 0; }
.mb-ancora { scroll-margin-top: 72px; }
.mb-secao { padding-block: 72px; }
@media (max-width: 767px) { .mb-secao { padding-block: 56px; } }
.mb-faixa-azul { background: var(--mb-t-azul); }
.mb-faixa-verde { background: var(--mb-t-verde); }

/* botões */
.mb-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 22px; border-radius: 999px; font: 700 15px/1 var(--mb-corpo); text-decoration: none !important; border: 0; cursor: pointer; white-space: nowrap; box-sizing: border-box; transition: transform .15s ease, background-color .15s ease; }
.mb-btn:hover { transform: translateY(-1px); }
.mb-btn:active { transform: scale(.97); }
.mb-btn svg { width: 16px; height: 16px; transition: transform .2s ease; }
.mb-btn:hover svg { transform: translateX(3px); }
.mb-btn--marca { background: var(--mb-marca); color: #16161A !important; }
.mb-btn--marca:hover { background: var(--mb-marca-hover); }
.mb-btn--tinta { background: #16161A; color: #fff !important; }
.mb-btn--grande { min-height: 56px; padding: 0 28px; font-size: 16px; }
.mb-pilula { display: inline-flex; align-items: center; gap: 6px; font: 600 12.5px/1 var(--mb-corpo); padding: 6px 10px; border-radius: 999px; background: var(--t, var(--mb-surface-2)); color: var(--a, var(--mb-text)); white-space: nowrap; }
.mb-preco { display: block; font: 800 28px/1 var(--mb-display); font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--mb-text); }
.mb-preco small { display: block; font: 500 12px/1.3 var(--mb-corpo); color: var(--mb-muted); margin-top: 4px; }
.mb-checks { list-style: none; padding: 16px 0 0 !important; margin: 16px 0 0; border-top: 1px solid var(--mb-line); display: grid; gap: 9px; font-size: 14px; }
.mb-checks li { display: flex; gap: 9px; align-items: flex-start; line-height: 1.35; margin: 0; }
.mb-checks li::before { content: ""; flex: none; width: 17px; height: 17px; margin-top: 1px; border-radius: 50%; background: var(--mb-marca) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2316161A' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12.5 4 4 8-9'/%3E%3C/svg%3E") center/11px no-repeat; }
.mb-cab { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 12px 24px; margin-bottom: 36px; }
.mb-cab h2 { font-size: clamp(34px, 4.8vw, 52px); font-weight: 800; line-height: 1.02; }
.mb-cab p { color: var(--mb-muted); max-width: 54ch; margin-top: 12px; font-size: 17px; }

/* ================= cabeçalho ================= */
/* o WordPress envolve o cabeçalho num <header>; é ele que fica fixo no topo */
.wp-site-blocks > header.wp-block-template-part { position: sticky; top: 0; z-index: 50; }
.admin-bar .wp-site-blocks > header.wp-block-template-part { top: var(--wp-admin--admin-bar--height, 0); }
.mb-topo { position: relative; z-index: 50; border-bottom: 1px solid var(--mb-line); }
/* fundo desfocado numa camada própria: backdrop-filter no próprio cabeçalho prenderia o menu aberto dentro dele */
.mb-topo::before { content: ""; position: absolute; inset: 0; z-index: -1; background: color-mix(in srgb, var(--mb-surface) 88%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.mb-topo__in { max-width: var(--mb-max); margin-inline: auto; padding: 10px 16px; min-height: 64px; gap: 12px !important; box-sizing: border-box; }
@media (min-width: 768px) { .mb-topo__in { padding-inline: 32px; } }
.mb-marca { display: inline-flex; align-items: center; gap: 8px; text-decoration: none !important; font: 800 24px/1 var(--mb-display); color: var(--mb-text) !important; }
.mb-marca__icone { width: 30px; height: 30px; border-radius: 9px; background: var(--mb-marca); display: grid; place-items: center; flex: none; }
.mb-topo nav.mb-nav { margin-left: auto; }
.mb-topo ul.mb-nav { margin-left: 0; }
.mb-topo .mb-nav a { text-decoration: none; color: var(--mb-muted); }
.mb-topo .mb-nav a:hover { color: var(--mb-text); }
.mb-topo .wp-block-navigation__responsive-container.is-menu-open { background: var(--mb-surface) !important; color: var(--mb-text) !important; }
.mb-topo .wp-block-navigation__responsive-container.is-menu-open a { color: var(--mb-text); font-size: 1.25rem; }
.mb-topo .wp-block-navigation__responsive-container.is-menu-open { --navigation-layout-justification-setting: flex-start; --navigation-layout-justify: flex-start; }
.mb-topo .is-menu-open .wp-block-navigation__responsive-container-content, .mb-topo .is-menu-open .wp-block-navigation__container, .mb-topo .is-menu-open .wp-block-navigation-item { align-items: flex-start !important; justify-content: flex-start !important; }
.mb-topo .is-menu-open .wp-block-navigation__responsive-container-content { padding: 24px 8px !important; }
.mb-titulo-loja { font-family: var(--mb-display); font-size: clamp(34px, 4.8vw, 52px); font-weight: 800; line-height: 1.02; margin: 0; }
.mb-loja .mb-cab p { color: var(--mb-muted); max-width: 54ch; margin-top: 12px; font-size: 17px; }
/* menu recolhido até caber numa linha */
@media (min-width: 600px) and (max-width: 1099px) {
  .mb-topo .wp-block-navigation__responsive-container-open:not(.always-shown) { display: flex !important; }
  .mb-topo .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) { display: none !important; }
}
.mb-topo .wp-block-navigation__container { flex-wrap: nowrap; white-space: nowrap; }
.mb-icone-btn { width: 42px; height: 42px; flex: none; border-radius: 999px; border: 1px solid var(--mb-line); background: var(--mb-surface); color: var(--mb-text); display: grid; place-items: center; cursor: pointer; padding: 0; }
.mb-icone-btn svg { width: 19px; height: 19px; }
.mb-tema__sol { display: none; }
:root[data-theme="dark"] .mb-tema__sol { display: block; } :root[data-theme="dark"] .mb-tema__lua { display: none; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .mb-tema__sol { display: block; } :root:not([data-theme="light"]) .mb-tema__lua { display: none; } }
.mb-topo .wc-block-mini-cart__button { color: var(--mb-text); }
.mb-topo .wc-block-mini-cart__badge { background: var(--mb-marca); color: #16161A; }
.mb-btn--topo { display: none; min-height: 42px; padding: 0 16px; font-size: 14px; }
@media (min-width: 600px) { .mb-btn--topo { display: inline-flex; } }

/* ================= banner (cores por uso) ================= */
.mb-hero { position: relative; overflow: hidden; background: var(--f); color: var(--c); transition: background-color .45s ease, color .45s ease; --trilho: color-mix(in srgb, var(--c) 25%, transparent); --cheio: var(--c); }
.mb-hero__grade { display: grid; gap: 32px; align-items: center; padding-block: 44px 100px; }
@media (min-width: 900px) { .mb-hero__grade { grid-template-columns: 1.1fr .9fr; padding-block: 64px 112px; min-height: 600px; } }
.mb-hero__txt > div { translate: 0 10px; }
.mb-hero__txt > .ativo { translate: 0 0; }
.mb-hero__rot { font-weight: 700; font-size: 15px; }
.mb-hero__titulo { font-size: clamp(44px, 7.2vw, 80px) !important; font-weight: 800; margin-top: 12px !important; max-width: 12ch; line-height: .97 !important; color: inherit; }
.mb-hero__sub { font-size: 18px; max-width: 42ch; margin-top: 18px !important; opacity: .88; }
.mb-hero__cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; }
.mb-btn--hero { background: var(--c); color: var(--f) !important; }
.mb-btn--hero2 { background: transparent; color: var(--c) !important; border: 2px solid var(--c); }
.mb-hero__vis { position: relative; place-items: center; }
.mb-hero__vis > div { translate: 24px 0; position: relative; display: grid; place-items: center; }
.mb-hero__vis > .ativo { translate: 0 0; }
.mb-cel { border-radius: 26px; border: 6px solid #16161A; background: #16161A; overflow: hidden; aspect-ratio: 390 / 760; box-shadow: var(--mb-sombra-g); }
.mb-cel img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.mb-hero__vis .mb-cel { width: clamp(170px, 22vw, 248px); rotate: 6deg; }
.mb-chave-bip { position: absolute; left: max(0px, calc(50% - clamp(170px, 22vw, 248px) / 2 - clamp(90px, 10vw, 150px))); bottom: 8%; width: clamp(90px, 11vw, 140px); rotate: -12deg; color: var(--c); }
.mb-chave-bip img { width: 100%; height: auto; display: block; filter: drop-shadow(0 12px 18px rgba(22,22,26,.25)); animation: mb-flutua 4s ease-in-out infinite; }
.mb-chave-bip::before, .mb-chave-bip::after { content: ""; position: absolute; inset: -14%; border-radius: 50%; border: 2.5px solid currentColor; opacity: 0; animation: mb-bip 2.4s ease-out infinite; }
.mb-chave-bip::after { animation-delay: 1.2s; }
.mb-hero__ctrl { position: absolute; left: 0; right: 0; bottom: 26px; }
.mb-hero__ctrl .mb-wrap { display: flex; align-items: center; gap: 10px; }
.mb-pontos { display: flex; align-items: center; gap: 2px; }
.mb-ponto { border: 0; background: none; padding: 8px 3px; cursor: pointer; display: grid; place-items: center; }
.mb-ponto i { position: relative; display: block; width: 10px; height: 10px; border-radius: 99px; background: var(--trilho); overflow: hidden; transition: width .25s ease; }
.mb-ponto.ativo i { width: 38px; }
.mb-ponto i b { position: absolute; inset: 0 auto 0 0; width: 0; background: var(--cheio); border-radius: 99px; }
.mb-ponto.ativo i b { animation: mb-enche var(--tempo, 6s) linear forwards; }
.pausado .mb-ponto.ativo i b { animation-play-state: paused; }
.mb-pausa { width: 40px; height: 40px; border-radius: 50%; border: 1.5px solid currentColor; background: transparent; color: inherit; display: grid; place-items: center; cursor: pointer; padding: 0; opacity: .85; }
.mb-pausa svg { width: 16px; height: 16px; }

/* slides que trocam (banner, passos, exemplos) */
[data-slides] { display: grid; }
[data-slides] > * { grid-area: 1 / 1; opacity: 0; visibility: hidden; transition: opacity .18s ease, visibility .18s, translate .45s ease; }
[data-slides] > .ativo { opacity: 1; visibility: visible; transition: opacity .45s ease .16s, visibility .45s .16s, translate .45s ease .16s; }

/* ================= vitrine ================= */
.mb-vitrine { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 4px 2px 10px; margin-inline: -2px; }
.mb-vitrine::-webkit-scrollbar { display: none; }
.mb-card { position: relative; flex: 0 0 min(80%, 300px); scroll-snap-align: start; display: flex; flex-direction: column; border: 1px solid var(--mb-line); border-radius: 26px; background: var(--mb-surface); overflow: hidden; box-shadow: var(--mb-sombra); transition: transform .25s ease, box-shadow .25s ease; }
.mb-card:hover { transform: translateY(-6px); box-shadow: var(--mb-sombra-g); }
@media (min-width: 1100px) { .mb-vitrine { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); overflow: visible; } .mb-card { flex: none; } }
.mb-card__foto { position: relative; aspect-ratio: 1; background: var(--t); display: grid; place-items: center; overflow: hidden; }
.mb-card__foto > img { width: 74%; height: 74%; object-fit: contain; transition: transform .35s ease; }
.mb-card:hover .mb-card__foto > img { transform: scale(1.06) rotate(-3deg); }
.mb-card__corpo { padding: 18px; display: flex; flex-direction: column; flex: 1; }
.mb-card h3 { font-size: 25px; margin-top: 12px; line-height: 1.1; }
.mb-card__link { color: var(--mb-text) !important; text-decoration: none !important; }
.mb-card__link::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: 26px; }
.mb-card__link:focus-visible { outline: none; }
.mb-card__link:focus-visible::after { outline: 3px solid var(--mb-foco); outline-offset: -3px; }
.mb-card .mb-preco { margin-top: 8px; }
.mb-card .mb-checks { margin-bottom: 14px; }
.mb-card__mais { margin-top: auto; display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; color: var(--a); padding-bottom: 12px; }
.mb-card__mais svg { width: 15px; height: 15px; transition: transform .2s ease; }
.mb-card:hover .mb-card__mais svg { transform: translateX(4px); }
.mb-card__comprar { position: relative; z-index: 2; width: 100%; }
.mb-dica { color: var(--mb-muted); font-size: 13px; margin-top: 10px !important; }
@media (min-width: 1100px) { .mb-dica { display: none; } }

/* Meu Bip Digital: avisos de acesso (sem item) */
.mb-digital { position: absolute; inset: 0; display: grid; align-content: center; justify-items: center; gap: 10px; padding: 18px; }
.mb-aviso { display: flex; align-items: center; gap: 10px; width: min(100%, 230px); background: var(--mb-surface); color: var(--mb-text); border-radius: 16px; padding: 10px 12px; box-shadow: 0 6px 16px -8px rgba(22,22,26,.3); text-align: left; animation: mb-flutua 5s ease-in-out infinite; }
.mb-aviso + .mb-aviso { translate: 14px 0; animation-delay: -2.5s; }
.mb-aviso__ic { flex: none; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--t); color: var(--a); }
.mb-aviso__ic svg { width: 16px; height: 16px; }
.mb-aviso b { display: block; font-size: 12.5px; line-height: 1.2; }
.mb-aviso small { font-size: 11.5px; color: var(--mb-muted); }

/* ================= como funciona ================= */
.mb-como { display: grid; gap: 28px; align-items: center; }
@media (min-width: 960px) { .mb-como { grid-template-columns: 1fr 1fr; gap: 56px; } }
.mb-como .mb-cab { margin-bottom: 24px; }
.mb-passos { display: grid; gap: 8px; }
.mb-passo { display: flex; gap: 16px; align-items: flex-start; text-align: left; border: 0; background: transparent; color: var(--mb-text); border-radius: 20px; padding: 16px; cursor: pointer; font: inherit; transition: background-color .2s; }
.mb-passo:hover { background: color-mix(in srgb, var(--mb-surface) 50%, transparent); }
.mb-passo.ativo { background: var(--mb-surface); box-shadow: var(--mb-sombra); }
.mb-passo__n { flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; border: 2px solid var(--mb-line); font: 800 18px/1 var(--mb-display); transition: all .2s; }
.mb-passo.ativo .mb-passo__n { background: var(--mb-marca); border-color: var(--mb-marca); color: #16161A; }
.mb-passo b { display: block; font: 700 21px/1.2 var(--mb-display); }
.mb-passo__txt { display: block; color: var(--mb-muted); font-size: 15px; margin-top: 4px; }
.mb-palco { position: relative; border-radius: 24px; overflow: hidden; background: var(--mb-t-amarelo); aspect-ratio: 4 / 3; min-height: 280px; }
@media (max-width: 599px) { .mb-palco { aspect-ratio: 1; } }
.mb-palco__chave { position: absolute; left: 10%; top: 50%; width: 30%; height: auto; translate: 0 -50%; rotate: -8deg; filter: drop-shadow(0 12px 16px rgba(22,22,26,.2)); }
.mb-onda { position: absolute; left: 25%; top: 50%; width: 34%; aspect-ratio: 1; border: 3px solid var(--mb-a-amarelo); border-radius: 50%; transform: translate(-50%, -50%) scale(.6); opacity: 0; }
[data-fase="2"] .mb-onda { animation: mb-onda 1.6s ease-out .7s infinite; }
[data-fase="2"] .mb-onda + .mb-onda { animation-delay: 1.5s; }
.mb-fone { position: absolute; right: 12%; top: 50%; width: 30%; aspect-ratio: 390 / 780; transform: translateY(-50%); border: 6px solid #16161A; border-radius: 26px; overflow: hidden; background: #fff; box-shadow: var(--mb-sombra-g); container-type: inline-size; transition: transform .9s cubic-bezier(.2,.8,.2,1); }
@media (min-width: 600px) { .mb-fone { width: 25%; right: 15%; } }
[data-fase="2"] .mb-fone { transform: translate(-44%, -50%) rotate(-8deg); }
.mb-fone__telas { height: 100%; color: #16161A; font-family: var(--mb-corpo); }
.mb-fone__telas > * { height: 100%; min-width: 0; }
.mb-s-msg { background: #F4F5F7; padding: 8cqw; display: flex; flex-direction: column; gap: 5cqw; }
.mb-s-msg__de { font: 700 7cqw/1 var(--mb-corpo); display: flex; align-items: center; gap: 3cqw; padding-bottom: 4cqw; border-bottom: 1px solid #E1E4EA; }
.mb-s-msg__de i { width: 9cqw; height: 9cqw; border-radius: 30%; background: #FFC400; }
.mb-bolha { background: #fff; border-radius: 5cqw; padding: 5cqw 6cqw; font-size: 5.4cqw; line-height: 1.35; overflow-wrap: anywhere; box-shadow: 0 1px 2px rgba(0,0,0,.06); }
.mb-s-pin { background: #fff; padding: 12cqw 9cqw; display: flex; flex-direction: column; align-items: center; gap: 5cqw; text-align: center; }
.mb-s-pin b { font: 800 10cqw/1.05 var(--mb-display); }
.mb-s-pin span { font-size: 6.2cqw; color: #555A66; }
.mb-pin { display: flex; align-items: center; gap: 1.2cqw; margin-top: 4cqw; }
.mb-pin i { width: 6.4cqw; height: 9.6cqw; border: 2px solid #E1E4EA; border-radius: 2cqw; display: grid; place-items: center; }
.mb-pin em { font: 700 5cqw/1 var(--mb-corpo); color: #555A66; font-style: normal; }
.mb-pin i::after { content: ""; width: 2.4cqw; height: 2.4cqw; border-radius: 50%; background: #16161A; transform: scale(0); }
[data-fase="1"] .mb-pin i::after { animation: mb-digita .2s forwards; }
[data-fase="1"] .mb-pin i:nth-of-type(1)::after { animation-delay: 0.50s; }
[data-fase="1"] .mb-pin i:nth-of-type(2)::after { animation-delay: 0.72s; }
[data-fase="1"] .mb-pin i:nth-of-type(3)::after { animation-delay: 0.94s; }
[data-fase="1"] .mb-pin i:nth-of-type(4)::after { animation-delay: 1.16s; }
[data-fase="1"] .mb-pin i:nth-of-type(5)::after { animation-delay: 1.38s; }
[data-fase="1"] .mb-pin i:nth-of-type(6)::after { animation-delay: 1.60s; }
[data-fase="1"] .mb-pin i:nth-of-type(7)::after { animation-delay: 1.82s; }
[data-fase="1"] .mb-pin i:nth-of-type(8)::after { animation-delay: 2.04s; }
.mb-s-pin__bt { margin-top: auto; width: 100%; background: #FFC400; border-radius: 99px; padding: 5cqw; font: 700 6.5cqw/1 var(--mb-corpo); }
.mb-s-pag { width: 100%; object-fit: cover; object-position: top; display: block; }

/* ================= exemplos ================= */
.mb-exemplos { display: grid; gap: 32px; align-items: center; }
@media (min-width: 960px) { .mb-exemplos { grid-template-columns: 1fr auto; gap: 72px; } }
.mb-tipos { display: grid; gap: 4px; grid-template-columns: 1fr; }
@media (min-width: 600px) { .mb-tipos { grid-template-columns: 1fr 1fr; } }
.mb-tipo { display: flex; align-items: center; gap: 14px; text-align: left; border: 0; background: transparent; color: var(--mb-text); border-radius: 18px; padding: 10px 12px; cursor: pointer; font: inherit; transition: background-color .15s; }
.mb-tipo:hover { background: color-mix(in srgb, var(--mb-surface) 50%, transparent); }
.mb-tipo.ativo { background: var(--mb-surface); box-shadow: var(--mb-sombra); }
.mb-tipo__ic { flex: none; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--mb-surface); color: var(--mb-text); transition: all .15s; }
.mb-tipo.ativo .mb-tipo__ic { background: var(--t); color: var(--a); }
.mb-tipo__ic svg { width: 20px; height: 20px; }
.mb-tipo b { display: block; font-size: 15px; }
.mb-tipo small { display: block; color: var(--mb-muted); font-size: 13.5px; line-height: 1.35; }
.mb-ex { display: grid; justify-items: center; gap: 14px; text-align: center; }
.mb-ex .mb-cel { width: min(58vw, 240px); rotate: 4deg; }
.mb-ex > .mb-cel { transition: rotate .45s ease; }
.mb-ex a { font-weight: 600; font-size: 15px; color: var(--mb-text); }
@media (max-width: 959px) { .mb-exemplos__vis { order: -1; } }

/* ================= dúvidas, fechamento ================= */
.mb-faq { display: grid; gap: 10px; max-width: 820px; }
.mb-faq details { background: var(--mb-surface); border: 1px solid var(--mb-line); border-radius: 18px; padding: 4px 20px; }
.mb-faq summary { cursor: pointer; font-weight: 600; min-height: 48px; padding: 8px 0; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.mb-faq summary::-webkit-details-marker { display: none; }
.mb-faq summary::after { content: "+"; font: 700 22px/1 var(--mb-display); color: var(--mb-muted); transition: rotate .2s ease; }
.mb-faq details[open] summary::after { rotate: 45deg; }
.mb-faq details p { color: var(--mb-muted); padding-bottom: 18px; margin: 0; }
.mb-faq a { color: var(--mb-text); }
.mb-final-wrap { padding-bottom: 8px; }
.mb-final { background: var(--mb-marca); color: #16161A; border-radius: 32px; padding: 56px 24px; display: grid; gap: 18px; justify-items: center; text-align: center; position: relative; overflow: hidden; }
.mb-final::before, .mb-final::after { content: ""; position: absolute; border-radius: 50%; border: 2px solid rgba(22,22,26,.12); animation: mb-flutua 7s ease-in-out infinite; }
.mb-final::before { width: 320px; aspect-ratio: 1; left: -110px; top: -170px; }
.mb-final::after { width: 420px; aspect-ratio: 1; right: -170px; bottom: -250px; animation-delay: -3.5s; }
.mb-final > * { position: relative; }
.mb-final h2 { font-size: clamp(42px, 6.6vw, 72px); font-weight: 800; color: #16161A; }
.mb-final p { font-size: 18px; }

/* ================= rodapé ================= */
.wp-site-blocks > footer.wp-block-template-part { margin-block-start: 0; }
.mb-rodape { margin-top: 56px; background: var(--mb-rodape); color: #F2F3F7; padding-block: 48px 28px; font-size: 14px; }
.mb-rodape .mb-marca { color: #F2F3F7 !important; }
.mb-rodape__grade { display: grid; gap: 28px; grid-template-columns: 1fr 1fr; }
@media (min-width: 860px) { .mb-rodape__grade { grid-template-columns: 1.6fr 1fr 1fr 1fr; } }
.mb-rodape__sobre { grid-column: 1 / -1; }
@media (min-width: 860px) { .mb-rodape__sobre { grid-column: auto; } }
.mb-rodape__sobre p { opacity: .72; margin: 12px 0 0; max-width: 34ch; }
.mb-rodape h2 { font: 600 12px/1 var(--mb-corpo) !important; letter-spacing: .1em; text-transform: uppercase; opacity: .6; margin: 0 0 14px; color: #F2F3F7; }
.mb-rodape ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.mb-rodape a { color: #F2F3F7; text-decoration: none; opacity: .9; }
.mb-rodape a:hover { text-decoration: underline; opacity: 1; }
.mb-rodape__baixo { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 20px; margin-top: 36px; padding-top: 20px; border-top: 1px solid rgba(242,243,247,.14); opacity: .65; font-size: 13px; }

/* ================= página de produto ================= */
.mb-produto { padding-block: 24px 16px; }
.mb-voltar { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; color: var(--mb-muted) !important; text-decoration: none !important; margin-bottom: 18px; }
.mb-voltar svg { width: 16px; height: 16px; transition: transform .2s ease; }
.mb-voltar:hover svg { transform: translateX(-3px); }
.mb-produto__topo { display: grid; gap: 28px; align-items: center; }
@media (min-width: 900px) { .mb-produto__topo { grid-template-columns: 1fr 1fr; gap: 56px; } }
.mb-produto__foto { position: relative; aspect-ratio: 1; border-radius: 32px; background: var(--t); display: grid; place-items: center; overflow: hidden; animation: mb-entra .6s ease both; }
.mb-produto__foto > img { width: 72%; height: 72%; object-fit: contain; animation: mb-flutua 5s ease-in-out infinite; }
.mb-produto__foto .mb-aviso { width: min(100%, 300px); padding: 14px 16px; }
.mb-produto__foto .mb-aviso b { font-size: 15px; } .mb-produto__foto .mb-aviso small { font-size: 13px; }
.mb-produto__info { animation: mb-entra .6s ease .1s both; }
.mb-produto h1 { font-size: clamp(40px, 5.6vw, 64px); font-weight: 800; line-height: 1; margin-top: 14px; }
.mb-produto__lead { font-size: 18px; color: var(--mb-muted); margin-top: 16px !important; max-width: 46ch; }
.mb-produto__compra { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--mb-line); }
.mb-produto__compra .mb-preco { font-size: 36px; }
.mb-produto__compra form { margin: 0; }
.mb-produto__garantias { list-style: none; padding: 0; margin: 18px 0 0; display: flex; flex-wrap: wrap; gap: 8px; }
.mb-produto__garantias li { font-size: 13px; font-weight: 600; padding: 7px 12px; border-radius: 999px; background: var(--mb-surface); border: 1px solid var(--mb-line); }
.mb-produto__bloco { margin-top: 64px; }
.mb-produto__bloco > h2, .mb-produto__duas h2 { font-size: clamp(28px, 3.6vw, 38px); font-weight: 800; margin-bottom: 20px; }
.mb-serve { display: grid; gap: 12px; }
@media (min-width: 760px) { .mb-serve { grid-template-columns: repeat(3, 1fr); gap: 14px; } }
.mb-serve__item { background: var(--mb-surface); border: 1px solid var(--mb-line); border-radius: 22px; padding: 22px; border-top: 4px solid var(--a); }
.mb-serve__item b { font: 700 20px/1.2 var(--mb-display); display: block; }
.mb-serve__item p { color: var(--mb-muted); margin-top: 6px !important; font-size: 15px; }
.mb-usar { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
@media (min-width: 760px) { .mb-usar { grid-template-columns: repeat(3, 1fr); gap: 14px; } }
.mb-usar li { background: var(--t); border-radius: 26px; padding: 24px; }
.mb-usar__n { font: 800 56px/1 var(--mb-display); color: var(--a); display: block; }
.mb-usar b { display: block; font: 700 22px/1.2 var(--mb-display); margin-top: 18px; }
.mb-usar p { color: var(--mb-muted); margin-top: 6px !important; font-size: 15px; }
.mb-produto__duas { display: grid; gap: 40px; }
@media (min-width: 900px) { .mb-produto__duas { grid-template-columns: 1fr 1fr; gap: 56px; } }
.mb-checks--grande { font-size: 16px; gap: 12px; border-top: 0; padding-top: 0 !important; margin-top: 0; }
.mb-checks--grande li::before { width: 20px; height: 20px; background-size: 12px; }
.mb-outros { display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 900px) { .mb-outros { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; } }
.mb-outro { display: flex; flex-direction: column; border-radius: 22px; background: var(--mb-surface); border: 1px solid var(--mb-line); overflow: hidden; text-decoration: none !important; color: var(--mb-text) !important; transition: transform .25s ease, box-shadow .25s ease; }
.mb-outro:hover { transform: translateY(-4px); box-shadow: var(--mb-sombra-g); }
.mb-outro__foto { position: relative; aspect-ratio: 4 / 3; background: var(--t); display: grid; place-items: center; overflow: hidden; }
.mb-outro__foto > img { width: 60%; height: 80%; object-fit: contain; transition: transform .35s ease; }
.mb-outro:hover .mb-outro__foto > img { transform: scale(1.06) rotate(-3deg); }
.mb-outro__foto .mb-aviso { width: 90%; padding: 7px 9px; } .mb-outro__foto .mb-aviso__ic { width: 26px; height: 26px; }
.mb-outro__txt { padding: 12px 14px 14px; display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.mb-outro__txt b { font: 700 18px/1.2 var(--mb-display); }
.mb-outro__txt small { font-weight: 600; color: var(--mb-muted); white-space: nowrap; }
.mb-produto-simples { padding-block: 32px; }
.mb-produto .woocommerce-message, .mb-produto .woocommerce-error, .mb-produto .woocommerce-info { margin-bottom: 18px; border-radius: 14px; }

/* ================= animações ================= */
.mb-js .mb-revela { opacity: 0; translate: 0 18px; transition: opacity .6s ease var(--atraso, 0ms), translate .6s cubic-bezier(.2,.8,.2,1) var(--atraso, 0ms), transform .25s ease, box-shadow .25s ease; }
.mb-js .mb-revela.mb-visto, .mb-tudo .mb-revela { opacity: 1; translate: 0 0; }
@keyframes mb-enche { to { width: 100%; } }
@keyframes mb-bip { 0% { opacity: .7; transform: scale(.8); } 100% { opacity: 0; transform: scale(1.35); } }
@keyframes mb-flutua { 50% { transform: translateY(-8px); } }
@keyframes mb-onda { 0% { opacity: .8; transform: translate(-50%, -50%) scale(.6); } 100% { opacity: 0; transform: translate(-50%, -50%) scale(1.35); } }
@keyframes mb-digita { to { transform: scale(1); } }
@keyframes mb-entra { from { opacity: 0; translate: 0 16px; } to { opacity: 1; translate: 0 0; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0s !important; transition-delay: 0s !important; scroll-behavior: auto !important; }
  .mb-chave-bip img, .mb-chave-bip::before, .mb-chave-bip::after, .mb-onda, .mb-aviso, .mb-final::before, .mb-final::after, .mb-produto__foto, .mb-produto__foto > img, .mb-produto__info { animation: none !important; }
  .mb-js .mb-revela { opacity: 1; translate: 0 0; }
}

/* ================= WooCommerce (lista /produtos, carrinho, finalizar compra) ================= */
.woocommerce ul.products li.product, .wc-block-grid__product, .wc-block-product { background: var(--mb-surface); border: 1px solid var(--mb-line); border-radius: 22px; padding: 14px !important; text-align: left; transition: transform .2s ease; }
.woocommerce ul.products li.product:hover { transform: translateY(-3px); }
.woocommerce ul.products li.product a img { border-radius: 16px; margin-bottom: 12px !important; background: var(--mb-surface-2); }
.woocommerce ul.products li.product .woocommerce-loop-product__title { font: 700 1.15rem/1.25 "Baloo 2", sans-serif !important; padding: 0 !important; }
.woocommerce ul.products li.product .price { font: 800 1.2rem/1.2 Inter, sans-serif !important; color: var(--mb-text) !important; }
.woocommerce ul.products li.product .button, .woocommerce a.button, .woocommerce button.button, .wc-block-components-button:not(.is-link) { background: var(--mb-marca) !important; color: #16161A !important; border-radius: 999px !important; font-weight: 700 !important; min-height: 48px; display: inline-flex !important; align-items: center; justify-content: center; }
.woocommerce ul.products li.product .button { width: 100%; margin-top: 10px; }
.woocommerce ul.products { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 24px 0 0 !important; }
.woocommerce ul.products::before, .woocommerce ul.products::after { display: none !important; }
.woocommerce ul.products li.product { width: auto !important; margin: 0 !important; float: none !important; display: flex; flex-direction: column; }
.woocommerce ul.products li.product .button { box-sizing: border-box; margin-top: auto !important; }
.woocommerce ul.products li.product .woocommerce-LoopProduct-link { display: block; }
@media (min-width: 900px) { .woocommerce ul.products { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; } }
@media (max-width: 380px) { .woocommerce ul.products li.product .woocommerce-loop-product__title { font-size: 1rem !important; } }
/* campos e caixas legíveis no tema escuro */
.wc-block-components-text-input input, .wc-block-components-text-input textarea, .wc-block-components-combobox .wc-block-components-combobox-control input, .wc-blocks-components-select__select, .wc-block-components-textarea, .wc-block-components-form .wc-block-components-text-input input { background-color: var(--mb-surface) !important; color: var(--mb-text) !important; border-color: var(--mb-line) !important; }
.wc-block-components-text-input label, .wc-blocks-components-select__label, .wc-block-components-combobox label { color: var(--mb-muted) !important; }
.wc-block-components-quantity-selector { background: var(--mb-surface); }
.wc-block-components-quantity-selector input, .wc-block-components-quantity-selector button { color: var(--mb-text) !important; }
.wc-block-components-notice-banner { color: #16161A; }
.wc-block-mini-cart__drawer .components-modal__content, .wc-block-mini-cart__drawer { background: var(--mb-surface); color: var(--mb-text); }
/* O WooCommerce grava a cor de fundo da gaveta (style inline) na 1ª abertura e não atualiza ao trocar claro/escuro
   com a página aberta: fundo claro + texto do tema escuro. Sempre a cor do tema atual. */
.wc-block-mini-cart__drawer .wp-block-woocommerce-mini-cart-contents { background-color: var(--mb-bg) !important; }

/* ================= Minhas compras ================= */
.mb-compras { margin-top: 24px !important; }
.mb-compras__caixa, .mb-compras__pedido { padding: 22px; margin: 0 0 16px; }
.mb-cartao { background: var(--mb-surface); border: 1px solid var(--mb-line); border-radius: 24px; box-shadow: var(--mb-sombra); }
.mb-compras__caixa h2 { margin: 0 0 6px; font-size: 1.4rem; }
.mb-compras__form { display: grid; gap: 8px; margin-top: 14px; }
.mb-compras__form label { font-weight: 600; }
.mb-compras__form input, .mb-compras__pedido input[type=text] { min-height: 48px; padding: 10px 14px; border: 1px solid var(--mb-line); border-radius: 12px; font-size: 1rem; background: var(--mb-surface); color: var(--mb-text); }
.mb-compras__form input#mb-codigo { font: 700 1.4rem/1 ui-monospace, monospace; letter-spacing: .3em; max-width: 220px; }
.mb-compras__form .wp-element-button, .mb-compras__botao-cancelar { min-height: 48px; border-radius: 12px; font-weight: 700; margin-top: 6px; }
.mb-compras__form .wp-element-button { background: var(--mb-marca); color: #16161A; }
.mb-compras__nota { font-size: .9rem; color: var(--mb-muted); margin: 12px 0 0; }
.mb-compras__aviso { padding: 12px 16px; border-radius: 12px; margin: 0 0 16px; }
.mb-compras__aviso--erro { background: #FDECEC; color: #8A1C1C; }
.mb-compras__aviso--ok { background: #E8F6EC; color: #14532D; }
.mb-compras__topo { font-size: .95rem; margin: 0 0 16px; }
.mb-compras__cab { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
.mb-compras__num { margin: 0; font-weight: 700; }
.mb-compras__total { margin: 2px 0 0; color: var(--mb-muted); }
.mb-compras__status { flex: none; padding: 4px 10px; border-radius: 999px; font-size: .8rem; font-weight: 700; background: var(--mb-surface-2); }
.mb-compras__status--processing, .mb-compras__status--completed { background: #E8F6EC; color: #14532D; }
.mb-compras__status--cancelled, .mb-compras__status--refunded { background: #FDECEC; color: #8A1C1C; }
.mb-compras__itens { margin: 12px 0 0; padding-left: 18px; }
.mb-compras__codigos { margin: 10px 0 0; font-family: ui-monospace, monospace; }
.mb-compras__cancelar { margin-top: 14px; border-top: 1px solid var(--mb-line); padding-top: 10px; }
.mb-compras__cancelar summary { cursor: pointer; font-weight: 700; color: #B42318; min-height: 44px; display: flex; align-items: center; }
.mb-compras__confirmo { display: flex; gap: 10px; align-items: flex-start; margin: 10px 0; }
.mb-compras__confirmo input { width: 20px; height: 20px; margin-top: 2px; flex: none; }
.mb-compras__botao-cancelar { background: #B42318 !important; color: #fff !important; padding: 0 20px; border: 0; }

/* ================= vendas pausadas (sem pagamento ligado) ================= */
.mb-pausa-vendas { box-sizing: border-box; max-width: 1100px; margin: 0 auto 24px; padding: 16px 18px; border-radius: 12px; background: var(--mb-t-amarelo); color: var(--mb-a-amarelo); border: 2px solid var(--mb-marca); line-height: 1.55; }
.mb-pausa-vendas strong { display: block; font-size: 1.1rem; font-weight: 800; margin-bottom: 4px; }
.mb-pausa-vendas p { margin: 0; }
.mb-pausa-vendas a { color: inherit; font-weight: 700; }
.mb-pausa-vendas a.mb-pausa-vendas__voltar { display: inline-flex; align-items: center; min-height: 48px; margin-top: 12px; padding: 0 22px; border-radius: 99px; background: var(--mb-marca); color: #16161A; text-decoration: none; }
body.mb-vendas-pausadas form.checkout, body.mb-vendas-pausadas .woocommerce-form-coupon-toggle, body.mb-vendas-pausadas .woocommerce-form-login-toggle { display: none !important; }

/* ================= minhas compras: andamento do cancelamento ================= */
.mb-compras__andamento { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 8px; }
.mb-compras__andamento li { position: relative; padding-left: 30px; line-height: 1.5; color: var(--mb-muted); }
.mb-compras__andamento li::before { content: ""; position: absolute; left: 0; top: 2px; width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--mb-line); box-sizing: border-box; }
.mb-compras__andamento li.feito { color: var(--mb-text); }
.mb-compras__andamento li.feito::before { content: "✓"; display: grid; place-items: center; font-size: 12px; font-weight: 800; color: #fff; background: var(--mb-a-verde); border-color: var(--mb-a-verde); }
.mb-compras__andamento li.atual { color: var(--mb-text); font-weight: 600; }
.mb-compras__andamento li.atual::before { border-color: var(--mb-marca); background: var(--mb-t-amarelo); }

/* ================= home: Digital em destaque, setas da vitrine ================= */
.mb-so-pagina { margin: -18px 0 22px !important; font-size: 16px; }
.mb-so-pagina a { color: var(--mb-text); text-decoration: underline; text-decoration-color: var(--mb-marca); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.mb-so-pagina svg { width: 15px; height: 15px; vertical-align: -2px; margin-left: 2px; }
.mb-vitrine-wrap { position: relative; }
.mb-vitrine__setas { display: flex; justify-content: flex-end; gap: 10px; margin-top: 6px; }
.mb-seta { width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid var(--mb-line); background: var(--mb-surface); color: var(--mb-text); display: grid; place-items: center; cursor: pointer; }
.mb-seta svg { width: 18px; height: 18px; }
.mb-seta:hover { border-color: var(--mb-text); }
@media (min-width: 1100px) { .mb-vitrine__setas { display: none; } }

/* ================= Ideias de Uso ================= */
.mb-ideias { --trilho: color-mix(in srgb, var(--mb-text) 22%, transparent); --cheio: var(--mb-text); }
.mb-ideias__slides > * { min-width: 0; }
.mb-ideia { display: grid; gap: 22px; padding: 26px 20px 24px; border-radius: 28px; background: var(--t); color: var(--mb-text); }
.mb-ideia__vis { position: relative; display: grid; place-items: center; min-height: 0; }
.mb-ideia__vis .mb-cel { width: min(48vw, 210px); rotate: -3deg; }
.mb-ideia__obj { position: absolute; left: max(0px, calc(50% - min(48vw, 210px) * .95)); bottom: -6px; width: min(30vw, 130px); height: auto; filter: drop-shadow(0 12px 18px rgba(0,0,0,.18)); rotate: 8deg; }
.mb-ideia__vis--itens { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; width: min(100%, 230px); margin-inline: auto; }
.mb-ideia__vis--itens img { width: 100%; height: auto; }
.mb-ideia__txt { display: grid; gap: 12px; align-content: start; }
.mb-ideia__selos { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0 !important; }
.mb-ideia__selo { display: inline-flex; align-items: center; padding: 6px 10px; border-radius: 999px; border: 1.5px dashed var(--a); color: var(--a); font: 700 12.5px/1 var(--mb-corpo); text-transform: uppercase; letter-spacing: .04em; }
.mb-ideia .mb-pilula { background: var(--mb-surface); color: var(--a); }
.mb-ideia h3 { font: 800 clamp(24px, 6.4vw, 34px)/1.08 var(--mb-display); margin: 0; overflow-wrap: anywhere; }
.mb-ideia__txt > p:not(.mb-ideia__selos) { margin: 0; font-size: 17px; line-height: 1.5; color: var(--mb-text); }
.mb-ideia__cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }
.mb-ideia__cta .mb-btn { flex: 1 1 180px; }
.mb-btn--linha { background: transparent; color: var(--mb-text) !important; border: 2px solid var(--mb-text); }
.mb-ideias__ctrl { display: flex; align-items: center; gap: 10px; margin-top: 16px; flex-wrap: wrap; }
.mb-ideias__ctrl .mb-pontos { flex-wrap: wrap; }
.mb-ideias__ctrl .mb-pausa { color: var(--mb-text); }
@media (min-width: 900px) {
  .mb-ideia { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: center; gap: 40px; padding: 44px 48px; }
  .mb-ideia__vis .mb-cel { width: 230px; }
  .mb-ideia__obj { left: calc(50% - 240px); width: 150px; }
  .mb-ideia__txt > p:not(.mb-ideia__selos) { font-size: 19px; max-width: 46ch; }
  .mb-ideia__cta .mb-btn { flex: 0 0 auto; }
}

/* ================= Compra tranquila ================= */
.mb-confianca-secao { padding-block: 24px 56px; }
.mb-confianca__titulo { font: 800 clamp(26px, 4vw, 36px)/1.1 var(--mb-display); margin: 0 0 18px; }
.mb-confianca { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; grid-template-columns: 1fr; }
@media (min-width: 700px) { .mb-confianca { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .mb-confianca { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.mb-confianca li { display: grid; gap: 6px; padding: 18px; border-radius: 18px; background: var(--mb-surface); border: 1px solid var(--mb-line); }
.mb-confianca b { font-size: 16px; font-weight: 700; }
.mb-confianca span { color: var(--mb-muted); font-size: 15px; line-height: 1.5; }
.mb-confianca a { color: var(--mb-text); font-weight: 600; }

/* ================= Ideias de Uso: página /ideias-de-uso/ e cenas nas páginas de produto (etapa 6) ================= */
.mb-usos-todas { margin: 18px 0 0 !important; }
.mb-usos-topo { padding-block: 44px 8px; }
.mb-usos-topo h1 { font-size: clamp(34px, 6.2vw, 62px); font-weight: 800; line-height: 1.02; max-width: 17ch; margin-top: 14px; }
.mb-usos-topo h1 + p { color: var(--mb-muted); font-size: 18px; line-height: 1.5; max-width: 56ch; margin-top: 14px; }
.mb-usos-nav { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
.mb-usos-nav__item { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 16px; border-radius: 999px; background: var(--mb-surface); border: 1px solid var(--mb-line); color: var(--mb-text) !important; font: 600 15px/1 var(--mb-corpo); text-decoration: none !important; }
.mb-usos-nav__item:hover { border-color: var(--mb-text); }
.mb-usos-nav__item small { font-weight: 700; font-size: 12px; color: var(--mb-muted); }
.mb-usos-grupo { padding-block: 44px 12px; }
.mb-usos-grupo .mb-cab { margin-bottom: 22px; }
.mb-usos-grupo .mb-cab h2 { font-size: clamp(28px, 4vw, 42px); }
.mb-usos-grade { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 700px) { .mb-usos-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .mb-usos-grade { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.mb-uso { display: grid; grid-template-rows: auto 1fr; border-radius: 24px; overflow: hidden; background: var(--mb-surface); border: 1px solid var(--mb-line); min-width: 0; }
.mb-uso__vis { position: relative; height: 220px; overflow: hidden; background: var(--t); display: flex; justify-content: center; padding-top: 22px; box-sizing: border-box; }
.mb-uso__vis .mb-cel { flex: none; width: 168px; height: auto; rotate: -3deg; align-self: flex-start; transition: translate .35s ease; }
.mb-uso:hover .mb-uso__vis .mb-cel { translate: 0 -6px; }
.mb-uso__obj { position: absolute; right: max(8px, calc(50% - 168px)); bottom: 12px; width: 96px; height: auto; rotate: 8deg; filter: drop-shadow(0 10px 14px rgba(0,0,0,.2)); }
.mb-uso__txt { display: grid; gap: 10px; align-content: start; padding: 18px 18px 20px; }
.mb-uso h3 { font: 800 23px/1.12 var(--mb-display); margin: 0; overflow-wrap: anywhere; }
.mb-uso__txt > p:not(.mb-ideia__selos) { margin: 0; font-size: 15.5px; line-height: 1.5; }
.mb-uso .mb-uso__formato { font-size: 14px !important; color: var(--mb-muted); }
.mb-uso__formato a { color: var(--mb-text); font-weight: 700; }
.mb-uso__cta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.mb-uso__cta .mb-btn { flex: 1 1 150px; padding-inline: 16px; }
.mb-usos-aviso { margin-top: 18px; padding: 18px 20px; border-radius: 18px; background: var(--mb-t-amarelo); border-left: 6px solid var(--mb-marca); color: var(--mb-text); }
.mb-usos-aviso b { display: block; font-size: 17px; }
.mb-usos-aviso p { margin: 6px 0 0 !important; line-height: 1.55; max-width: 80ch; }
.mb-usos #formatos { margin-top: 44px; }
.mb-formatos { display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); }
.mb-formato { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 14px; align-items: start; padding: 12px; border-radius: 22px; background: var(--mb-surface); border: 1px solid var(--mb-line); color: var(--mb-text) !important; text-decoration: none !important; transition: transform .25s ease, box-shadow .25s ease; }
.mb-formato:hover { transform: translateY(-3px); box-shadow: var(--mb-sombra-g); }
.mb-formato__foto { position: relative; aspect-ratio: 1; border-radius: 16px; background: var(--t); display: grid; place-items: center; overflow: hidden; }
.mb-formato__foto > img { width: 82%; height: 82%; object-fit: contain; }
.mb-formato__foto .mb-aviso { width: 92%; padding: 5px 6px; gap: 6px; border-radius: 10px; } .mb-formato__foto .mb-aviso + .mb-aviso { display: none; }
.mb-formato__foto .mb-aviso__ic { width: 22px; height: 22px; } .mb-formato__foto .mb-aviso__ic svg { width: 12px; height: 12px; }
.mb-formato__foto .mb-aviso b { font-size: 10.5px; } .mb-formato__foto .mb-aviso small { font-size: 10px; }
.mb-formato__foto .mb-digital { padding: 6px; }
.mb-formato__txt { display: grid; gap: 4px; font-size: 14.5px; line-height: 1.45; }
.mb-formato__txt b { font: 800 20px/1.15 var(--mb-display); display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin-bottom: 2px; }
.mb-formato__txt b small { font: 600 14px/1 var(--mb-corpo); color: var(--mb-muted); }
.mb-formato__rot { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--a); margin-top: 6px; }
.mb-formato__mais { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; margin-top: 8px; }
.mb-formato__mais svg { width: 15px; height: 15px; }
@media (min-width: 700px) { .mb-formatos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) {
  .mb-formatos { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .mb-formato { grid-template-columns: minmax(0, 1fr); }
  .mb-formato__foto { aspect-ratio: 4 / 3; }
  .mb-formato__foto > img { width: 62%; }
  .mb-formato__foto .mb-aviso + .mb-aviso { display: flex; }
}
.mb-produto .mb-usos-grade { margin-top: 18px; }
@media (prefers-reduced-motion: reduce) { .mb-uso__vis .mb-cel, .mb-formato { transition: none; } }