/* =====================================================================
   MC — TEMA CLARO
   ---------------------------------------------------------------------
   O MESMO SITE, só que claro. Regras:
   - O tema escuro (padrão) não é tocado: tudo aqui fica sob
     html[data-theme="light"], exceto o componente novo do botão de tema.
   - Zero mudança de layout: só cor, fundo, borda (cor), sombra, filtro,
     opacidade e tokens de cor.
   Paleta clara
     superfícies : #ffffff · #fbfaf7 (paper) · #f3f1ec (ow) · #e9e6df · #ebe8e1
     linhas      : #e2ded5 · #d3cfc6
     texto       : #0b0b0c · #2c2c31 · muted #5a5a61 / #6d6d74
     preto só nos botões principais (btn--bk / btn--ow virado preto)
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. Botão de tema (componente novo, no fim do rodapé) — vale nos 2 temas
   --------------------------------------------------------------------- */
.theme-row{display:flex;justify-content:center;padding:0 0 22px;position:relative;z-index:2}
.theme-toggle{display:inline-flex;align-items:center;gap:2px;padding:4px;border-radius:999px;border:1px solid var(--g8);background:var(--g9);color:var(--g4);cursor:pointer;font:inherit;font-size:.78rem;font-weight:600;line-height:1;transition:border-color .2s}
.theme-toggle:hover{border-color:var(--g6)}
.theme-toggle:focus-visible{outline:2px solid var(--ow);outline-offset:3px}
.theme-toggle__opt{display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border-radius:999px;transition:background-color .25s,color .25s,box-shadow .25s}
.theme-toggle__opt svg{width:14px;height:14px;flex:none}
html:not([data-theme="light"]) .theme-toggle__opt.is-dark{background:var(--ow);color:var(--bk)}
html[data-theme="light"] .theme-toggle__opt.is-light{background:#ffffff;color:#0b0b0c;box-shadow:0 0 0 1px #d3cfc6,0 4px 10px -6px rgba(11,11,12,.35)}

/* ---------------------------------------------------------------------
   2. Tokens
   Superfícies que eram escuras recebem a paleta "invertida":
   --bk/--g9 viram superfícies claras, --ow/--g3/--g4 viram texto escuro.
   (:where = especificidade baixa, para os ajustes por seção abaixo vencerem)
   --------------------------------------------------------------------- */
html[data-theme="light"] :where(
  .hero,.page-hero,.proof,.dark,.gray,.site-header,.drawer__panel,.toast,.fab__tip,
  .bot__head,.qcart__head,.slidein,.pdfm__head,.vmodal__box,.ex-panel,.rev-score,
  .lead-box,.ask,.wk-card.offer,.cta-band,.marquee.dk,.spec-group__head,.aside-card,
  .site-footer,main > section[style*="background:var(--bk)"]
){
  --bk:#ffffff;   /* fundo da superfície */
  --bk2:#ffffff;
  --g9:#f6f4ef;   /* cartões */
  --g8:#e2ded5;   /* linhas finas */
  --g7:#d3cfc6;   /* linhas mais fortes */
  --g6:#6d6d74;
  --g5:#77777e;
  --g4:#5a5a61;   /* texto secundário */
  --g3:#2c2c31;   /* texto corrido */
  --ow:#0b0b0c;   /* títulos / texto forte */
}

/* Cartões com foto/vídeo e painéis claros aninhados: tokens originais
   (texto branco sobre a foto escurecida continua legível) */
html[data-theme="light"] :where(
  .reel,.sector,.ev-main,.wk-main,.rcard,.hero__reel,.book,.quote-card,.lead-box__form,.pop__img
){
  --bk:#0b0b0c; --bk2:#121214; --g9:#1c1c1f; --g8:#26262a; --g7:#333338;
  --g6:#4b4b52; --g5:#6d6d74; --g4:#9c9ca3; --g3:#c8c6c0; --ow:#f3f1ec;
}

/* Ajustes de superfície por área (alternância suave entre seções) */
html[data-theme="light"] .hero,
html[data-theme="light"] .page-hero,
html[data-theme="light"] .drawer__panel{--bk:#fbfaf7}
html[data-theme="light"] .gray{--g9:#e9e6df}
html[data-theme="light"] .marquee.dk{--bk:#ebe8e1;--g8:#dcd8cf}
html[data-theme="light"] .spec-group__head{--bk:#f1eee8}
html[data-theme="light"] .wk-card.offer{--g9:#ffffff}
html[data-theme="light"] .site-footer{--bk:#ebe8e1;--g9:#f6f4ef;--g8:#d6d1c7;--g7:#c9c4ba}

/* ---------------------------------------------------------------------
   3. Correções de cores fixas dentro das superfícies que viraram claras
   --------------------------------------------------------------------- */
/* botão "off-white" vira o botão principal preto; hover não pode ficar branco */
html[data-theme="light"] :is(.hero,.page-hero,.proof,.dark,.gray,.site-header,.drawer__panel,.toast,.slidein,.pdfm__head,.vmodal__box,.ex-panel,.rev-score,.lead-box,.ask,.wk-card.offer,.cta-band,.aside-card,.site-footer) .btn--ow:not(:is(.reel,.sector,.ev-main,.wk-main,.rcard,.quote-card,.lead-box__form) *):hover{background:#26262a;box-shadow:0 14px 30px -14px rgba(11,11,12,.55)}
html[data-theme="light"] :is(.hero,.page-hero,.proof,.dark,.gray,.site-header,.drawer__panel,.slidein,.vmodal__box,.ex-panel,.rev-score,.lead-box,.ask,.wk-card.offer,.cta-band,.aside-card,.site-footer) .btn--bk:not(:is(.quote-card,.lead-box__form) *){background:#0b0b0c;color:#f3f1ec}

/* botões de contorno claros → contorno escuro */
html[data-theme="light"] :is(.hero,.page-hero,.dark,.gray,.site-header,.drawer__panel,.slidein,.vmodal__box,.ex-panel,.rev-score,.lead-box,.ask,.wk-card.offer,.cta-band,.aside-card,.site-footer) :is(.btn--line,.btn--ghost):not(:is(.reel,.sector,.ev-main,.wk-main,.rcard) *){border-color:rgba(11,11,12,.22);color:#0b0b0c}
html[data-theme="light"] :is(.hero,.page-hero,.dark,.gray,.site-header,.drawer__panel,.slidein,.vmodal__box,.ex-panel,.rev-score,.lead-box,.ask,.wk-card.offer,.cta-band,.aside-card,.site-footer) :is(.btn--line,.btn--ghost):not(:is(.reel,.sector,.ev-main,.wk-main,.rcard) *):hover{border-color:#0b0b0c;background:rgba(11,11,12,.04)}

/* fundos decorativos */
html[data-theme="light"] :is(.dark,.gray,.lead-box) .aurora i{opacity:.7}
html[data-theme="light"] :is(.dark,.gray,.lead-box) .aurora i:nth-child(1){background:radial-gradient(circle,#ffffff,transparent 65%)}
html[data-theme="light"] :is(.dark,.gray,.lead-box) .aurora i:nth-child(2){background:radial-gradient(circle,#e4e0d7,transparent 65%)}
html[data-theme="light"] :is(.dark,.gray,.lead-box) .aurora i:nth-child(3){background:radial-gradient(circle,#ece9e2,transparent 65%)}
html[data-theme="light"] :is(.proof,.dark,.gray) .gridlines{background-image:linear-gradient(rgba(11,11,12,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(11,11,12,.05) 1px,transparent 1px)}
html[data-theme="light"] .spot{background:radial-gradient(600px circle at var(--mx,50%) var(--my,40%),rgba(11,11,12,.035),transparent 45%)}
html[data-theme="light"] .grain::after{opacity:.035}

/* campos dentro das áreas claras */
html[data-theme="light"] :is(.dark,.ask) .field :is(input,select,textarea):not(:is(.quote-card,.lead-box__form) *):focus{border-color:#0b0b0c}

/* ---------------------------------------------------------------------
   4. Topo: aviso, cabeçalho, logo, menu
   --------------------------------------------------------------------- */
html[data-theme="light"] .announce b{background:#ffffff;color:#0b0b0c;box-shadow:0 0 0 1px #d3cfc6}
html[data-theme="light"] .site-header{background:rgba(255,255,255,.86);border-bottom-color:rgba(11,11,12,.08)}
html[data-theme="light"] .site-header.is-scrolled{background:rgba(255,255,255,.97);box-shadow:0 10px 30px -24px rgba(11,11,12,.45)}
html[data-theme="light"] .nav > a:hover,
html[data-theme="light"] .nav__drop > button:hover,
html[data-theme="light"] .nav > a.is-active{background:rgba(11,11,12,.05)}
html[data-theme="light"] .nav__menu{box-shadow:0 30px 60px -30px rgba(11,11,12,.35)}
html[data-theme="light"] .cart-btn__lbl small{color:#9c9ca3}
html[data-theme="light"] .cart-btn:hover{box-shadow:0 12px 30px -12px rgba(11,11,12,.45)}
html[data-theme="light"] .burger{border-color:rgba(11,11,12,.16)}
/* logo PNG cinza-claro → grafite sobre fundo claro */
html[data-theme="light"] .logo__mark img{filter:brightness(0) opacity(.9)}
html[data-theme="light"] .logo__txt{color:#1c1c1f}
html[data-theme="light"] .logo__sep{background:#1c1c1f;opacity:.28}
html[data-theme="light"] .drawer__ov{background:rgba(11,11,12,.35)}
html[data-theme="light"] .drawer__panel a:hover{background:#efece6}

/* ---------------------------------------------------------------------
   5. Hero e topo das páginas internas: véu claro sobre a foto
   --------------------------------------------------------------------- */
html[data-theme="light"] .hero__media::after{background:linear-gradient(100deg,rgba(251,250,247,.97) 0%,rgba(251,250,247,.88) 42%,rgba(251,250,247,.42) 100%),linear-gradient(0deg,#fbfaf7,transparent 35%)}
html[data-theme="light"] .hero__pill{background:rgba(255,255,255,.75);border-color:rgba(11,11,12,.1)}
html[data-theme="light"] .hero__pill .g{background:#ffffff;color:#0b0b0c;box-shadow:0 0 0 1px #e2ded5}
html[data-theme="light"] .hero__reel{color:#f3f1ec;border-color:rgba(11,11,12,.08)}
html[data-theme="light"] .page-hero::before{background:linear-gradient(95deg,rgba(251,250,247,.97) 15%,rgba(251,250,247,.82) 60%,rgba(251,250,247,.5))}
html[data-theme="light"] .page-hero{box-shadow:inset 0 -1px 0 #e2ded5}
@media (max-width:760px){
  html[data-theme="light"] .hero__media::after{background:linear-gradient(100deg,rgba(251,250,247,.96) 0%,rgba(251,250,247,.86) 55%,rgba(251,250,247,.66) 100%),linear-gradient(0deg,#fbfaf7,transparent 35%)}
}

/* ---------------------------------------------------------------------
   6. Números + certificados
   --------------------------------------------------------------------- */
html[data-theme="light"] .proof{box-shadow:inset 0 -1px 0 #e2ded5}
html[data-theme="light"] .cert-chip:hover{background:#ffffff;box-shadow:0 14px 30px -18px rgba(11,11,12,.35)}

/* ---------------------------------------------------------------------
   7. Produtos: abas e painel
   --------------------------------------------------------------------- */
html[data-theme="light"] .ex-tab.is-on{background:#ffffff;border-color:#0b0b0c;color:#0b0b0c;box-shadow:0 14px 30px -20px rgba(11,11,12,.4)}
html[data-theme="light"] .ex-tab .bar{background:#0b0b0c}
html[data-theme="light"] .ex-panel{box-shadow:0 0 0 1px #e2ded5}
html[data-theme="light"] .ex-panel::before{background:linear-gradient(180deg,rgba(251,250,247,0) 0%,rgba(251,250,247,.3) 28%,rgba(251,250,247,.88) 48%,rgba(251,250,247,.97) 62%)}
@media (max-width:760px){
  html[data-theme="light"] .ex-panel::before{background:linear-gradient(180deg,rgba(251,250,247,0) 0,rgba(251,250,247,.72) 170px,rgba(251,250,247,.98) 240px)}
}
html[data-theme="light"] .ex-tag{background:#ffffff;color:#0b0b0c;box-shadow:0 0 0 1px #d3cfc6}
html[data-theme="light"] .ex-specs div{background:rgba(255,255,255,.8);border-color:#e2ded5}

/* ---------------------------------------------------------------------
   8. Quem somos / vídeos / setores / avaliações / eventos
   --------------------------------------------------------------------- */
html[data-theme="light"] .collage > *,
html[data-theme="light"] .wall button,
html[data-theme="light"] .ig-grid a{background:#e2ded5}
html[data-theme="light"] .about__seal{background:#ffffff;color:#0b0b0c;box-shadow:0 0 0 1px #e2ded5,0 30px 60px -30px rgba(11,11,12,.45)}
html[data-theme="light"] .about__seal small{color:#6d6d74}
html[data-theme="light"] .about__seal svg.ring text{fill:#6d6d74}
html[data-theme="light"] .reel{border-color:rgba(11,11,12,.08)}
html[data-theme="light"] .ig-profile img{background:conic-gradient(#0b0b0c,#9c9ca3,#0b0b0c)}
html[data-theme="light"] .rev-score{box-shadow:0 0 0 1px #e2ded5,0 30px 60px -40px rgba(11,11,12,.35)}
/* avatares das avaliações: cinzas escuros invertidos para tons claros */
html[data-theme="light"] .avatar{filter:invert(1)}
html[data-theme="light"] .ev:hover{background:#ffffff}

/* ---------------------------------------------------------------------
   9. Catálogo (lead), FAQ, blog, CTA
   --------------------------------------------------------------------- */
html[data-theme="light"] .lead-box{box-shadow:0 0 0 1px #e2ded5,0 30px 60px -40px rgba(11,11,12,.3)}
html[data-theme="light"] .lead-box__form{box-shadow:inset 1px 0 0 #e2ded5}
html[data-theme="light"] .ask{box-shadow:0 0 0 1px #e2ded5}
html[data-theme="light"] .wk-card.offer{box-shadow:0 20px 40px -30px rgba(11,11,12,.3)}
html[data-theme="light"] .badge{background:#ebe8e1;color:#0b0b0c}
html[data-theme="light"] .cta-band{box-shadow:0 0 0 1px #e2ded5}
html[data-theme="light"] .cta-band::before{background:linear-gradient(100deg,rgba(255,255,255,.97),rgba(255,255,255,.86) 60%,rgba(255,255,255,.62))}

/* abas / filtros / chips selecionados: claro com contorno escuro (sem bloco preto) */
html[data-theme="light"] .faq-cats button.is-on,
html[data-theme="light"] .filters button.is-active,
html[data-theme="light"] .chip:has(input:checked){background:#ffffff;border-color:#0b0b0c;color:#0b0b0c;box-shadow:inset 0 0 0 1px #0b0b0c}

/* ---------------------------------------------------------------------
   10. Contato
   --------------------------------------------------------------------- */
html[data-theme="light"] .dark .way__ic{background:#ebe8e1;color:#0b0b0c}
html[data-theme="light"] .dark .way__ic.wa{background:var(--wa);color:#062b14}
html[data-theme="light"] .dark .way.big .way__ic{background:#062b14;color:var(--wa)}
html[data-theme="light"] .way:not(.big):hover{background:#ffffff}

/* ---------------------------------------------------------------------
   11. Páginas de produto
   --------------------------------------------------------------------- */
html[data-theme="light"] .spec-group__head{box-shadow:inset 0 -1px 0 #e2ded5}
html[data-theme="light"] .aside-card{box-shadow:0 0 0 1px #e2ded5}

/* ---------------------------------------------------------------------
   12. Rodapé
   --------------------------------------------------------------------- */
html[data-theme="light"] .site-footer{box-shadow:inset 0 1px 0 #dcd8cf}
html[data-theme="light"] .footer-news input{background:#ffffff}
html[data-theme="light"] .foot-seals button{box-shadow:0 0 0 1px #d6d1c7}

/* ---------------------------------------------------------------------
   13. Flutuantes: aviso, assistente, cotação, popups
   --------------------------------------------------------------------- */
html[data-theme="light"] .toast{box-shadow:0 30px 60px -30px rgba(11,11,12,.4)}
html[data-theme="light"] .fab__tip{box-shadow:0 20px 40px -20px rgba(11,11,12,.35)}
html[data-theme="light"] .bot__head,
html[data-theme="light"] .qcart__head,
html[data-theme="light"] .pdfm__head{box-shadow:inset 0 -1px 0 #e2ded5}
html[data-theme="light"] .msg.u{background:#e9e6df;color:#0b0b0c}
html[data-theme="light"] .slidein{box-shadow:0 30px 60px -30px rgba(11,11,12,.4)}
html[data-theme="light"] .vmodal__box{box-shadow:0 40px 80px -30px rgba(0,0,0,.6)}

/* Fallback escuro sob texto branco enquanto a foto não pinta (só cor) */
html[data-theme="light"] :is(.sector,.reel,.ev-main,.wk-main,.rcard){background-color:#1c1c1f}
/* Legendas secundárias das abas de produto mais escuras */
html[data-theme="light"] .ex-tab .n,
html[data-theme="light"] .ex-tab small{color:#5a5a61}
/* "Enviar pergunta" (FAQ) é secundário: claro com contorno escuro, sem bloco preto */
html[data-theme="light"] .ask.ask .btn--ow.btn--ow{background:#ffffff;color:#0b0b0c;box-shadow:inset 0 0 0 1px rgba(11,11,12,.28)}
html[data-theme="light"] .ask.ask .btn--ow.btn--ow:hover{background:#f3f1ec;color:#0b0b0c;box-shadow:inset 0 0 0 1px #0b0b0c}
/* foco visível no tema claro (o --bk vira branco em algumas áreas) */
html[data-theme="light"] .field input:focus,html[data-theme="light"] .field select:focus,html[data-theme="light"] .field textarea:focus,html[data-theme="light"] .faq-search input:focus,html[data-theme="light"] .bot__foot input:focus,html[data-theme="light"] .search input:focus{border-color:#0b0b0c}
html[data-theme="light"] :is(a,button,[role="button"],summary,select,input[type="checkbox"],input[type="radio"]):focus-visible{outline:2px solid #0b0b0c;outline-offset:2px}
html[data-theme="light"] .logo__img{filter:brightness(0) opacity(.9)}
html[data-theme="light"] .hero h1 .stroke{background:linear-gradient(90deg,#0b0b0c 0%,#77777e 100%);-webkit-background-clip:text;background-clip:text}
html[data-theme="light"] .eyebrow{color:#5e5e66}