.mc-navwrap { scrollbar-width: none; -ms-overflow-style: none; scroll-behavior: smooth; }
    .mc-navwrap::-webkit-scrollbar { display: none; }
    .mc-navwrap > * { flex-shrink: 0 !important; }

    /* ═══ 24/08 , MOBILE: ALVO DE TOQUE E TAMANHO DE LETRA (P1-11 e P1-12) ═══
       Medido em 390px: 15 alvos com menos de 40px e 54 textos abaixo de 11px
       (varios a 9px), entre eles "OFF LIFETIME", "CUPOM EXCLUSIVO", "100K",
       "SPLIT" e "DD" , exatamente os dados que decidem a compra. E o botao
       "Copiar", que e A conversao da pagina, tinha 74x33.
       O minimo e 44x44 (Apple) / 48x48 (Material). Aqui vai por min-height e
       padding, que crescem o alvo sem mover nada de lugar. */
    @media (max-width: 640px) {
      .mc-navwrap { }
      button, [role="button"], a[href] > button {
        min-height: 44px;
      }
      /* o botao de copiar cupom, em qualquer das quatro cascas */
      .oc-coupon button, .offer-coupon-box button, .fr-coupon-box button,
      .drw-coupon-bar button, .fr-cta, .sp-buy {
        min-height: 44px; padding-top: 10px; padding-bottom: 10px;
      }
      /* piso de leitura: nada abaixo de 11.5px em texto informativo */
      body [style*="font-size: 9px"], body [style*="font-size:9px"],
      body [style*="font-size: 9.5px"], body [style*="font-size:9.5px"],
      body [style*="font-size: 10px"], body [style*="font-size:10px"],
      body [style*="font-size: 10.5px"], body [style*="font-size:10.5px"] {
        font-size: 11.5px !important;
      }
      /* os icones sociais do rodape nasciam 34x34; o alvo minimo e 44 */
      footer a[aria-label] { min-width: 44px; min-height: 44px; }
      /* 🦊 o mascote flutua no canto e cobria botao de cupom e "Escrever
         avaliacao" ao rolar. O respiro no fim da pagina resolve sem tirar ele
         do lugar , ele e um <button> fixo de 74px. */
      body { padding-bottom: 92px; }
    }
    /* 24/08 (P1-01): o menu rola, mas a barra de rolagem esta escondida por
       CSS e nada indicava que havia mais itens , em 1280px o "Sala ao vivo"
       fica 62px fora da tela.
       ⚠️ A primeira versao usava ::after com flex:0 0 34px , e o pseudo-
       elemento virava ITEM DO FLEX, aumentava o scrollWidth e o menu nunca
       chegava ao fim. Aqui e a tecnica de sombra por background: quatro
       camadas, duas fixas (attachment:local) e duas que acompanham a rolagem,
       entao o degrade aparece sozinho no lado em que ha conteudo escondido.
       Zero elemento novo, zero mudanca de largura. */
    .mc-navwrap {
      background-image:
        linear-gradient(90deg, rgba(7,10,6,1), rgba(7,10,6,0)),
        linear-gradient(270deg, rgba(7,10,6,1), rgba(7,10,6,0)),
        linear-gradient(90deg, rgba(7,10,6,.92), rgba(7,10,6,0)),
        linear-gradient(270deg, rgba(7,10,6,.92), rgba(7,10,6,0));
      background-position: left center, right center, left center, right center;
      background-repeat: no-repeat;
      background-size: 26px 100%, 26px 100%, 22px 100%, 22px 100%;
      background-attachment: local, local, scroll, scroll;
    }
    /* ⚠️ 05/08, TERCEIRA tentativa. A segunda ESCONDIA o ícone abaixo de 1750px e o menu
       ficou sem cara , o Everton mandou o print. Medindo direito: o ícone custa 16px + 6
       de vão, mas o vão, o padding e a fonte juntos devolvem quase o mesmo SEM apagar
       nada. Aperto em degraus, ícone SEMPRE visível até 1280px. */
    /* ⚠️ O RECUO DA BARRA NAO SE MEXE. Eu tinha baixado de 26px pra 16px pra ganhar
       espaco e o menu ficou 16px A ESQUERDA DO LOGO , o Everton mandou o print. O
       cabecalho tem 32px de cada lado e o logo comeca exatamente em 32: a barra alinha
       nos 32 tambem. E nem precisava do aperto: sobravam 136px. Quem cede espaco sao os
       ITENS (vao e padding), nunca a margem da pagina. */
    .mc-navwrap { padding-left: 32px !important; padding-right: 32px !important; }
    /* BARRA DE ROLAGEM , o Everton mandou o print do cadastro com DUAS barras brancas.
       Nao e defeito de layout: o painel do modal tem 1073px de conteudo em 1000px de
       altura, entao rola mesmo, e o Windows desenha a barra CLARA por padrao. Num site
       preto ela vira um risco branco no meio da tela. Deixo fina e escura (aparece,
       porque sumir esconderia que ha mais conteudo abaixo do botao). Vale pra pagina
       inteira, o Log in tem o mesmo painel. */
    * { scrollbar-width: thin; scrollbar-color: rgba(191,255,0,0.28) transparent; }
    *::-webkit-scrollbar { width: 8px; height: 8px; }
    *::-webkit-scrollbar-track { background: transparent; }
    *::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.16); border-radius: 8px; }
    *::-webkit-scrollbar-thumb:hover { background: rgba(191,255,0,0.45); }
    *::-webkit-scrollbar-corner { background: transparent; }
    @media (max-width: 1749px) {
      .mc-navwrap { gap: 1px !important; }
      .mc-navwrap > * { gap: 5px !important; padding: 8px 8px !important; font-size: 13px !important; }
      .mc-navwrap > * > i.ti { font-size: 14px !important; }
    }
    @media (max-width: 1449px) {
      .mc-navwrap > * { gap: 4px !important; padding: 8px 5px !important; font-size: 12px !important; }
      .mc-navwrap > * > i.ti { font-size: 13px !important; }
    }
    /* 19/08 (auditoria dele): em ~1110-1388px o "Live Room" saia cortado.
       Um degrau a mais de aperto nessa faixa , itens cedem, margem NUNCA. */
    @media (max-width: 1388px) {
      .mc-navwrap { gap: 0 !important; }
      .mc-navwrap > * { gap: 3px !important; padding: 8px 4px !important; font-size: 11.5px !important; }
    }
    /* abaixo de 1280px nem apertando cabe: aí sim o ícone sai, que é melhor que rolar */
    @media (max-width: 1279px) {
      .mc-navwrap > * > i.ti { display: none; }
    }
    .mc-navfade { position: relative; }
    .mc-navfade::after {
      content: ''; position: absolute; top: 0; right: 0; bottom: 10px; width: 64px;
      pointer-events: none; opacity: 0; transition: opacity .18s;
      background: linear-gradient(90deg, rgba(10,13,7,0), rgba(10,13,7,.94) 72%);
    }
    .mc-navfade.mc-tem-mais::after { opacity: 1; }

    /* 🚨 26/08 , O 'TRAVAMENTO' DA HOME ERA GESTO ROUBADO, NAO CONGELAMENTO.
       Ele achou o que a minha telemetria nunca ia achar: 'na home eu nao
       consigo rolar se passo o dedo na imagem; se pego no botao See the
       coupons e arrasto, desliza'. A tela nunca congelou , ela ignorava o dedo,
       e isso nao gera tarefa longa nem buraco de quadro. Medidor cego.
       CAUSA: no iOS, arrastar em cima de uma <img> inicia o ARRASTE DA IMAGEM
       (a mesma coisa que abre 'salvar/compartilhar' no toque longo) em vez de
       rolar a pagina. E o hero e uma imagem de 503px de largura numa tela de
       390 , ou seja, ela cobre a primeira dobra inteira. Medido: em 42 das 60
       celulas da tela, quem recebe o toque e uma <img>.
       ⚠️ Isto NAO da pra reproduzir no WebKit de mesa (nao existe arraste de
       imagem la, e o construtor Touch nem existe pra simular) , quem fecha e o
       teste dele no aparelho.
       As imagens do site sao decorativas: ninguem precisa arrastar nem salvar
       o mascote. `pan-y` deixa claro pro motor que o gesto vertical e da
       PAGINA, e nao do elemento. */
    /* ═══ 27/08 , O CHAT DO MAX COBRIA O BOTAO DE COMPRA NO CELULAR ═══
       Print dele: o painel aberto por cima do hero, tapando "See the coupons".
       Medido em WebKit 390x844: o painel e 259x374 em posicao fixa e o
       retangulo dele INTERSECTA o botao , ou seja, o cliente que abre o chat
       perde de vista exatamente o caminho da compra.

       No celular ele passa a ser uma FOLHA de tela cheia, que e o padrao de
       qualquer app de chat: enquanto conversa, conversa; ao fechar, volta pra
       pagina inteira, com o botao no lugar. Nada de painel flutuante disputando
       espaco com o CTA numa tela de 390px.

       ⚠️ `dvh` com queda para `vh`: a barra do Safari muda a altura viva da
       janela, e foi por isso que o print dele parecia maior que a medida. */
    @media (max-width: 900px) {
      #mc-max-chat {
        position: fixed !important;
        left: 0 !important; right: 0 !important; top: 0 !important; bottom: 0 !important;
        width: 100% !important; max-width: 100% !important;
        height: 100vh !important; height: 100dvh !important;
        max-height: 100vh !important; max-height: 100dvh !important;
        border-radius: 0 !important;
        z-index: 9995 !important;
        display: flex !important; flex-direction: column !important;
      }
      /* a area de conversa rola sozinha; o cabecalho com o X fica sempre visivel */
      #mc-max-chat > * { max-width: 100% !important; }
    }

    @media (max-width: 900px) {
      img, picture, svg {
        -webkit-user-drag: none;
        -webkit-touch-callout: none;
        touch-action: pan-y;
      }
      /* ⚠️ 26/08 , A REGRA ACIMA NAO PEGAVA O MASCOTE, e era ele que ele
         sentia: "se eu passo o dedo na foto do Max nao rola, so se eu toco no
         botao SEE THE COUPONS".
         Medido em WebKit: a <img> do Max ja estava com touch-action pan-y, mas
         quem esta SOB O DEDO e um <button> por cima dela, com touch-action
         auto. O dedo nunca encosta na imagem.
         O proprio CLAUDE.md registra desde 19/08 que "o mascote flutuante e um
         <button>, nao img/div" , eu escrevi a regra ignorando isso.
         Aqui a trava vale para o BOTAO que carrega imagem, que e o caso do
         mascote: o gesto vertical continua sendo da PAGINA. O clique nao muda,
         `pan-y` so cede o eixo Y ao scroll. */
      /* ⚠️ EM DUAS REGRAS DE PROPOSITO. Se `:has()` nao for suportado , e o
         publico daqui inclui WebView de Android velho , o navegador descarta a
         REGRA INTEIRA, e levaria junto a parte do atributo. Separadas, a que
         ele entende continua valendo. */
      [data-mcmascote], [data-mcmascote] * {
        touch-action: pan-y;
      }
      button:has(img), button:has(picture), button:has(svg) {
        touch-action: pan-y;
      }
    }

    /* ═══ ACABAMENTO MOBILE , os 4 itens dos prints dele (25/08) ═══
       Regra dele: nenhum elemento fixo cortado, margem minima de 8px.

       1. O ≡ SAIA DA TELA , SO LOGADO. Medido em WebKit, na home:
          logado, o chip do usuario entra na barra e o grupo da direita fica com
          200px de largura e `flex-shrink: 0` , ele se RECUSA a ceder. Como a
          marca tambem nao cede, a conta nao fecha e o ultimo item (o ≡) sai:
          2px fora a 390px, 17px fora a 375px. Deslogado cabia, e por isso eu
          nao tinha visto , medir so a tela deslogada e medir metade.
          Conserto: no celular a MARCA cede (ela e texto, corta com reticencias)
          e o grupo da direita passa a poder encolher tambem, como ultimo
          recurso. Nenhum botao e removido. */
    @media (max-width: 460px) {
      header.mc-navfade > div { padding-left: 10px !important; padding-right: 10px !important; }
      /* a marca e a primeira a ceder: e texto e trunca sem perder funcao */
      header.mc-navfade > div > *:first-child {
        min-width: 0 !important; flex-shrink: 1 !important; overflow: hidden !important;
      }
      header.mc-navfade > div > *:first-child > * { min-width: 0; }
      /* e o grupo da direita deixa de ser intocavel , antes ele empurrava o ≡
         pra fora da tela em vez de apertar */
      header.mc-navfade > div > *:last-child { min-width: 0 !important; flex-shrink: 1 !important; }
    }

    /* 2. A BADGE DO MAX ficava a 5px da borda. ⚠️ Tentei resolver AQUI, por
          folha de estilo, e PERDI: o modulo que posiciona o mascote escreve
          `right: 8px !important` INLINE, e inline com !important ganha de
          folha com !important. O conserto foi na origem (busca por 'BADGE' no
          modulo do mascote, mais acima). Fica o registro pra eu nao tentar
          por CSS de novo. */

    /* 3. O MAX COBRINDO O LINK DO RODAPE (print dele: tapava o 'Quiz').
          ⚠️ O modulo JA decidia esconder , a marca data-mcmascote-oculto estava
          gravada no botao , mas o `display:none` inline era SOBRESCRITO: o
          mascote tem animacao propria que reescreve o estilo a cada quadro.
          Mesma armadilha do opacity em 20/08, agora com display.
          Regra de folha de estilo com !important nao tem esse problema: a
          animacao escreve o estilo inline e a regra continua ganhando. */
    [data-mcmascote-oculto] { display: none !important; }

    /* 4. O X DA GAVETA media 32x44 de area de toque. Ele aparece , conferi no
          print , mas o alvo e menor que os 44px que o dedo precisa, e num canto
          onde o polegar chega torto. Vira 44x44, sem mudar o desenho do icone. */
    @media (max-width: 460px) {
      [aria-label='Close' i], [aria-label='Fechar' i] {
        min-width: 44px !important; min-height: 44px !important;
        display: inline-flex !important; align-items: center !important; justify-content: center !important;
      }
    }

    /* 21/08: trava de rolagem do menu do celular. E MINHA e so minha , nao
       encosta no style inline do body, que e do runtime. */
    html.mc-menu-aberto, html.mc-menu-aberto body { overflow: hidden; }
    /* 20/08 (item 3.3): o mascote flutuante cobria o codigo do cupom, o botao
       "Copiar" e o fim de titulos no celular. Em tela estreita ele encolhe e
       sobe , continua alcancavel, para de comer conteudo. */
    @media (max-width: 640px) {
      /* ⚠️ 27/08 , ESTA REGRA ESTAVA ENCOLHENDO O CHAT. O painel do Max
         carrega o mesmo `data-mc-mascote` do botao, entao pegava o
         scale(.72) junto: o computed dizia 390x844 e a caixa real media
         281x608 , exatamente 390x0,72 e 844x0,72. Foi por isso que o
         fullscreen "nao pegou" e o painel continuou por cima do botao de
         compra. Mesma familia do modulo que achou a si mesmo em 25/08.
         A escala e do BOTAO; o painel fica de fora. */
      [data-mc-mascote]:not(#mc-max-chat), .mc-mascote-wrap { transform: scale(.72); transform-origin: bottom right; }
      #mc-max-chat { transform: none !important; }
      /* o X do chat media 30x44 , abaixo do alvo de 44 que ele definiu em
         25/08. Em tela cheia, o X e a UNICA saida: se erra o toque, o cliente
         fica preso na conversa em vez de voltar para a compra. */
      #mc-max-chat button:first-of-type {
        min-width: 44px !important; min-height: 44px !important;
      }
    }
    /* 21/08: a seta do "Ver detalhes" desliza no hover , a mesma micro
       interacao dos outros CTAs do site. */
    [data-vfdetails]:hover svg { transform: translateX(3px); }
    /* 21/08 (ele viu no print): o modal do portao saiu em SERIF. Tudo que eu
       monto em JS herda Inter daqui, sem depender de eu lembrar em cada no. */
    #mc-portao-ind, #mc-portao-ind * { font-family: Inter, system-ui, -apple-system, sans-serif; }

    /* ═══ 21/08 , FONTE PADRAO DA PAGINA ═══
       Ele perguntou: "o site nao era pra ter todas as fontes Inter?". Estava
       certo. MEDIDO: html e body destas duas telas computavam TIMES NEW ROMAN.
       Tudo aparecia em Inter so porque cada componente da casca declara Inter
       um por um , entao QUALQUER no que nao declare (um modal meu, um texto
       novo do runtime) caia em serifa. Foi assim que o modal do portao do
       indicador apareceu com fonte de jornal no print dele.
       Aqui a fonte passa a ser herdada, e o problema nao volta. */
    html, body {
      font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    }