/* Tema Coquetel - CSS personalizado
   Loja: coquetel-media.lojaintegrada.com.br
   Baseado no visual de cjr-portal.vercel.app (Coquetel Media / Ediouro)
   Cole este arquivo em Aparencia > Editar CSS e salve. */

/* base */
body {
  background-color: #FAF7F0 !important;
  color: #18181B !important;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
}

h1, h2, h3, h4 {
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
  font-weight: 700 !important;
  color: #18181B !important;
}

/* cabecalho e barra superior
   a loja trocou de variante de tema (agora "tema-transparente") e o
   cabecalho deixou de ter o id #cabecalho, virou uma tag <header> comum */
#cabecalho, #barraTopo, header {
  background-color: #FAF7F0 !important;
}

#cabecalho, header {
  border-bottom: 2px solid #18181B !important;
}

/* em paginas que nao sao a home (login, carrinho, conta etc.) o tema
   aplica um margin-bottom de 80px no cabecalho - provavelmente pensado
   pra abrir espaco pra um banner de titulo de pagina que esse tema nao
   usa. Sem banner nenhum ali, esse espaco fica vazio e mostra a cor de
   fundo bege do body por baixo do menu, antes do conteudo branco
   comecar. Zerando isso, o bege fica só no menu mesmo. */
header {
  margin-bottom: 0 !important;
}

.logo.cor-secundaria, .logo {
  color: #18181B !important;
  font-weight: 700 !important;
  margin: 0 22px !important;
}

/* a imagem da logo esta com 90x188px (retrato), o que forcava o cabecalho
   inteiro a ficar mais alto pra caber ela. Limitando a altura, o cabecalho
   volta a um tamanho mais compacto. */
.logo img {
  max-height: 56px !important;
  width: auto !important;
}

/* no tema Mosaico o cabecalho usa 3 colunas flex (menu | logo | icones),
   as duas de fora com flex:1 pra empurrar a logo pro centro. Encolhendo a
   coluna do menu (que na loja esta vazia, sem categorias cadastradas) pro
   tamanho do conteudo, a logo volta a ficar no canto esquerdo, com os
   icones de busca/conta/carrinho mantidos no canto direito. */
header .container .row-flex > .col.g_menu {
  flex: 0 0 auto !important;
}

/* faixa dos banners em largura total (full-bleed)
   a secao de banners fica dentro de um ".conteiner" com max-width de
   1140px centralizado (o "boxed layout" padrao do tema), o que deixava
   o banner como uma caixa flutuando no meio da pagina, com a cor de
   fundo da loja aparecendo dos dois lados. Removendo esse limite so
   pra essa secao, o fundo/gradiente do banner preenche a largura toda
   da tela, se misturando direto com a secao seguinte - sem sobrar
   nenhuma faixa da cor de fundo da loja nas laterais. */
.secao-banners .conteiner {
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* banners do slider (Full Banner / Banner Tarja) - bug de escala
   o FlexSlider do tema fixa a largura do slider, do modulo que envolve
   ele e das imagens no tamanho nativo do arquivo (1920px), sem escalar
   pro tamanho real do container (~1140px), e ainda desloca tudo pra
   esquerda (left negativo) pra "centralizar" o recorte. O resultado e
   um banner cortado/ampliado, mostrando so um pedaco da imagem em telas
   menores que 1920px - e o texto parece gigante porque so aparece uma
   fatia central ampliada dele. Forcando largura 100%, altura automatica
   e zerando o deslocamento, a imagem escala certinho dentro do espaco
   disponivel, mantendo a proporcao. */
.modulo.fullminibanner {
  width: 100% !important;
}

.flexslider,
.flexslider .slides,
.flexslider .slides > li {
  width: 100% !important;
  height: auto !important;
  left: 0 !important;
  right: auto !important;
}

/* o deslocamento pra esquerda do banner, alem do "left" ja tratado acima,
   tambem vinha de uma MARGEM negativa fixa (nao a propriedade "left") -
   ".flexslider" nativo tem "margin-left: -100px" (provavelmente pensado
   pra compensar alguma seta/controle do slider em telas largas). Em telas
   estreitas (celular) esses 100px são uma fatia enorme da largura toda,
   entao o banner aparecia deslocado pra esquerda e cortado, com o texto
   parecendo ampliado (so aparecia um pedaco). Zerando a margem em vez da
   propriedade "left" (que e outra coisa), o slider volta a ficar
   centralizado e do tamanho certo do container em qualquer largura de
   tela. Testado ao vivo em viewport de celular (375px). */
.flexslider {
  margin-left: 0 !important;
}

.flexslider .slides > li img {
  width: 100% !important;
  height: auto !important;
}

/* espaco creme entre o banner Hero e a faixa preta logo abaixo
   causa real (achada depois, com o elemento inspecionado ao vivo): não é
   a altura do wrapper (isso já é automático) - é a linha do slider
   (".row-fluid.banner.cheio", classe de grid antiga do tema) que carrega
   um margin-bottom de 20px, mais 10px de padding-bottom no ".conteiner"
   em volta. Como o ".conteiner" tem padding, essa margem não "colapsa"
   pra fora - ela vira 30px de espaço reais dentro do wrapper do banner,
   com a cor de fundo da loja aparecendo por baixo da imagem. */
.secao-banners .conteiner {
  padding-bottom: 0 !important;
}
.secao-banners .row-fluid {
  margin-bottom: 0 !important;
}

/* IMPORTANTE: eu tinha criado classes ".fundo-principal", ".fundo-secundario",
   ".cor-principal", ".cor-secundaria" e ".borda-principal" pensando que eram
   utilitarias livres pra eu usar. Na verdade sao classes que o proprio tema
   ja usa internamente em varios elementos (botao de busca, botao de
   newsletter, precos, o bloco "Institucional" do rodape etc.) - por isso o
   bloco "Institucional" do rodape ficou azul-marinho sem eu ter mandado
   nada mudar ali. Removi essas 5 regras. Se precisarmos de cores utilitarias
   no futuro, vamos usar nomes exclusivos nossos (ex: .cq-fundo-escuro) pra
   nao colidir com o tema de novo.

   Rodape: forcando o bloco Institucional do rodape de volta pra preto,
   igual ao resto do rodape. */
#rodape .fundo-secundario {
  background-color: #18181B !important;
  color: #FFFFFF !important;
}

/* Atendimento no rodape - ocultando o telefone a pedido.
   (usei :has() antes, mas o editor de CSS da Loja Integrada nao aceita
   essa sintaxe mais nova e acusava erro - troquei por um seletor simples,
   suportado em qualquer navegador/editor)
   IMPORTANTE: escondia a <ul> inteira antes, mas agora o e-mail de
   contato entra como ::after dessa mesma <ul> (regra mais abaixo) - um
   elemento com display:none não renderiza nem o próprio ::after, então
   troquei pra esconder só o <li> do telefone (o único filho dela) e
   deixar a <ul> em si visível, senão o e-mail desaparecia junto. */
#rodape .g_atendimento li {
  display: none !important;
}

/* texto de copyright do rodape estava centralizado, destoando do resto
   do rodape que e alinhado a esquerda */
#rodape .span9.span12 {
  text-align: left !important;
}

/* botoes
   o CSS do tema (carregado de outro dominio, nao consigo ler as regras
   exatas dele) tem uma regra de border-radius mais especifica que a nossa
   pra variantes de botao (busca, newsletter etc). Repetir a classe
   ".botao" aumenta a especificidade da nossa regra so pro border-radius,
   pra garantir que ganhe da regra do tema. */
.botao {
  background-color: #FCD34D !important;
  color: #18181B !important;
  border: 2px solid #18181B !important;
  box-shadow: 3px 3px 0 0 #18181B !important;
  font-weight: 600 !important;
  padding: 10px 22px !important;
}

.botao.botao.botao {
  border-radius: 9999px !important;
}

.botao.secundario {
  background-color: #FFFFFF !important;
  color: #18181B !important;
}

.newsletter-assinar {
  background-color: #18181B !important;
  color: #FFFFFF !important;
  border: 2px solid #18181B !important;
}

#barraNewsletter {
  background-color: #FAF7F0 !important;
  color: #18181B !important;
  border-top: 2px solid #18181B !important;
  border-bottom: 2px solid #18181B !important;
}

/* carrinho */
.carrinho {
  color: #18181B !important;
}

/* produtos - confirmar seletor .produto quando houver catalogo */
.nome-produto {
  color: #18181B !important;
  font-weight: 700 !important;
}

.preco-venda, .preco-promocional {
  color: #143A6F !important;
  font-weight: 700 !important;
}

.imagem-produto.imagem-produto.imagem-produto {
  border-radius: 12px !important;
}

.produto:not(.span12) {
  background-color: #FFFFFF !important;
  border: 2px solid #18181B !important;
  box-shadow: 6px 6px 0 0 #18181B !important;
}

.produto:not(.span12).produto:not(.span12) {
  border-radius: 16px !important;
}

/* pagina de produto (detalhe): o wrapper principal da pagina inteira
   usa a MESMA classe ".produto" dos cards de listagem (".span12.produto"),
   só que aqui ele envolve a página de detalhe inteira - a borda + sombra
   dura de card ficava gigante, tomando quase a tela toda, em vez de um
   quadradinho de produto. Tirando esse tratamento só nesse contexto, a
   área abaixo do menu fica lisa e branca, sem caixa em volta. */
.span12.produto {
  background: none !important;
  border: none !important;
  box-shadow: none !important;
}

/* pagina de produto (detalhe) - confirmado na pagina de teste
   "teste-de-produto-digital-pacote-teste" */

/* botao "comprar" ja usa a classe .botao, entao ja herda o estilo
   geral (amarelo, borda preta, formato pilula) sem precisar de regra
   nova. Aqui so ajustamos o seletor de quantidade ao lado dele. */
.qtde-adicionar-carrinho {
  display: inline-flex !important;
  align-items: center !important;
  border: 2px solid #18181B !important;
  border-radius: 9999px !important;
  overflow: hidden !important;
  background-color: #FFFFFF !important;
}

.qtde-adicionar-carrinho .qtde-carrinho {
  border: none !important;
  background: transparent !important;
  color: #18181B !important;
  font-weight: 700 !important;
  text-align: center !important;
}

.qtde-adicionar-carrinho .minus,
.qtde-adicionar-carrinho .plus {
  background-color: #FAF7F0 !important;
  color: #18181B !important;
  border: none !important;
}

/* moldura da imagem principal do produto (pagina de detalhe) */
.imagem-produto img {
  border-radius: 12px !important;
  border: 2px solid #18181B !important;
}

/* abas de descricao/especificacoes do produto */
.abas-custom {
  border-top: 2px solid #18181B !important;
  padding-top: 20px !important;
  margin-top: 24px !important;
}

.abas-custom .tab-pane {
  color: #27272a !important;
  line-height: 1.6 !important;
}

/* rodape
   os titulos (h5) e textos (p, span) do rodape tem cor propria definida
   pelo tema, que ganha da cor herdada do #rodape. Preciso mirar cada tag
   dentro do rodape especificamente pra forcar o branco. */
#rodape {
  background-color: #18181B !important;
  color: #FFFFFF !important;
}

#rodape a,
#rodape h1, #rodape h2, #rodape h3, #rodape h4, #rodape h5, #rodape h6,
#rodape li, #rodape div {
  color: #FFFFFF !important;
}

#rodape p, #rodape span {
  color: #d4d4d8 !important;
}

/* bloco de "Selos" (selo de site seguro) dentro do rodape - o tema da a
   ele um fundo proprio cinza-claro (ignorando o preto do resto do
   rodape) e um espacamento vertical enorme (64px), sobrando uma faixa
   clara destoante com um titulo apagado e uma imagem pequena boiando
   num mar de espaco em branco. Aqui a gente encaixa esse bloco no resto
   do rodape (fundo preto, titulo branco igual "Sobre a Loja" etc) e
   poe o selo dentro de um cartao branco, pra nao ficar so um texto
   solto no fundo escuro. */
#rodape .pagamento-selos {
  background-color: #18181B !important;
  padding: 8px 0 40px !important;
}

#rodape .pagamento-selos .titulo {
  color: #FFFFFF !important;
  font-weight: 800 !important;
}

#rodape .pagamento-selos ul li {
  display: inline-flex !important;
  align-items: center !important;
  background-color: #FFFFFF !important;
  border-radius: 10px !important;
  padding: 8px 14px !important;
}

/* badges/selos - usar manualmente em banners e categorias */
.badge, .etiqueta, .tag, .selo {
  display: inline-block;
  border-radius: 9999px;
  border: 2px solid #18181B;
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  background-color: #FFFBEB;
  color: #18181B;
}

/* caixa branca "flutuando" sem contorno (newsletter, identificacao/login,
   checkout, area da conta) - o tema usa uma classe propria pra indicar
   "essa caixa deve ter borda/sombra" (".borda-principal" na barra de
   newsletter, ".caixa-sombreada" no login/checkout/conta), mas nessa
   variante do tema ela nao aplica largura de borda nem sombra nenhuma -
   so fica uma caixa branca sem contorno. Aqui a gente aplica o mesmo
   tratamento visual dos outros cards do site (borda preta + sombra dura). */
.componente.newsletter.borda-principal {
  border: 2px solid #18181B !important;
  border-radius: 16px !important;
  box-shadow: 6px 6px 0 0 #18181B !important;
}

/* o texto e o botao ficavam colados na borda da caixa - o miolo
   (".interno") so tem respiro vertical (padding de cima/baixo) definido
   pelo tema, sem nenhum respiro nas laterais. */
.componente.newsletter .interno {
  padding-left: 48px !important;
  padding-right: 48px !important;
}

/* dentro da caixa de newsletter: o botao "Assinar" vinha com uma altura
   propria do tema (bem maior que o campo de e-mail ao lado, ficando com
   cara de "balao"), e a caixa toda e' larga (1140px) mas o texto+campo+
   botao juntos ocupam bem menos que isso. A primeira tentativa foi
   esticar o campo de e-mail pra preencher esse espaco, mas isso so
   trocou o vazio de lugar - virou um campo de texto enorme (quase 730px)
   com bem pouca coisa dentro, e continuava com cara de "espaco vazio".
   Solucao atual: o campo volta a ter uma largura fixa e razoavel (o
   suficiente pra digitar um e-mail comodamente). O texto fica a
   esquerda, o botao fica encostado na borda direita, e o campo de
   e-mail fica exatamente no meio do espaco entre os dois. Pra isso o
   ".input-conteiner" (que no HTML da Loja Integrada embrulha input+
   botao juntos) vira "display:contents" - ele some do layout mas deixa
   os dois filhos (input e botao) soltos, participando direto do
   flex do ".interno-conteudo" ao lado do texto. Com
   "justify-content:space-between" nos 3 itens (texto, campo, botao),
   os dois espacos (texto-campo e campo-botao) ficam iguais - ou seja,
   o campo fica centralizado entre o texto e o botao, sem precisar
   esticar nada.

   IMPORTANTE: o script que embrulha a newsletter num <form> de verdade
   (pra o RD Station conseguir capturar o lead - ver campo "Cabeçalho -
   Todas as páginas") insere esse <form id="cq-newsletter-form"> ENTRE o
   texto e o ".input-conteiner", quebrando a cadeia de "display:contents"
   (o pai direto do input-conteiner passa a ser o <form>, não mais o
   ".interno-conteudo"). Por isso o form também precisa ser
   "display:contents" - assim os 3 itens (texto, campo, botao) continuam
   caindo todos direto no flex do ".interno-conteudo", não importa quantos
   embrulhos existam no meio. */
.componente.newsletter .interno-conteudo {
  align-items: center !important;
  justify-content: space-between !important;
}
#cq-newsletter-form {
  display: contents !important;
}
.componente.newsletter .newsletter-cadastro.input-conteiner {
  display: contents !important;
}
.componente.newsletter .newsletter-cadastro.input-conteiner input {
  flex: 0 0 auto !important;
  width: 380px !important;
  height: 48px !important;
  box-sizing: border-box !important;
}
.componente.newsletter .newsletter-assinar {
  height: 48px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 auto !important;
}
/* no celular, o botao "Assinar" (com o texto que a gente injeta via
   ::after mais o padding do tema) precisa de bem mais espaco do que sobra
   na tela - como ele tem "flex:0 0 auto" (nao encolhe), sobrava tudo pro
   campo de e-mail, que ia a zero de largura e sumia. Empilhando campo e
   botao (cada um ocupando a linha toda) resolve sem depender de encolher
   ninguem. Reduzindo tambem o respiro lateral de ".interno" (48px pensado
   pro desktop) que no celular sozinho ja comia boa parte da tela. */
@media (max-width: 600px) {
  .componente.newsletter .interno {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  .componente.newsletter .interno-conteudo {
    flex-wrap: wrap !important;
  }
  .componente.newsletter .newsletter-cadastro.input-conteiner input {
    flex: 1 1 100% !important;
    width: auto !important;
  }
  .componente.newsletter .newsletter-assinar {
    flex: 1 1 100% !important;
  }
}

/* IMPORTANTE: ".caixa-sombreada" sozinha (sem ".borda-principal" junto)
   também é a classe que o tema usa pra envolver o conteúdo de QUALQUER
   Página customizada (Visual > Páginas) - inclusive a página inteira do
   Plano Básico ficou dentro de uma caixa gigante com essa regra. Por
   isso a borda + sombra só entra quando as duas classes aparecem juntas
   (é assim que os cards de login/cadastro vêm no HTML nativo), deixando
   uma Página customizada inteira de fora desse tratamento. */
.caixa-sombreada.borda-principal {
  background-color: #FFFFFF !important;
  border: 2px solid #18181B !important;
  border-radius: 16px !important;
  box-shadow: 6px 6px 0 0 #18181B !important;
}
/* no celular, o respiro nativo da pagina (".conteiner", 10px) mais a
   sombra que a gente adicionou acima (6px, deslocada pra direita/baixo)
   deixavam essa caixa (login/cadastro/conta) bem espremida contra a
   borda direita da tela - a sombra sozinha ja comia mais da metade do
   respiro que sobrava. Um respiro extra lateral resolve. */
@media (max-width: 600px) {
  .caixa-sombreada.borda-principal {
    margin-left: 6px !important;
    margin-right: 12px !important;
  }
}

/* espaco entre o fim dos banners (#corpo) e o que vem depois (barra de
   newsletter ou, na home, as secoes injetadas via HTML) - o tema aplica
   um margin-bottom de 30px no #corpo, o que deixava uma faixa da cor de
   fundo da loja (creme) aparecendo entre os banners e o proximo bloco,
   quebrando a continuidade visual. Zerando esse espaco. Alem disso, quando
   os banners antigos (Numeros/Case/Como funciona) sao removidos do painel,
   o #corpo fica com um "resto" vazio de ~60px sem cor de fundo propria -
   isso deixava aparecer uma tarja creme entre a secao "Como funciona" (HTML,
   fundo branco) e a secao "Planos" (HTML, fundo branco) logo abaixo. Como o
   #corpo fica sempre encostado em secoes de fundo branco (o HTML do topo
   antes dele, o HTML de baixo depois dele), deixar o proprio #corpo branco
   resolve nos dois casos, com ou sem banner dentro dele. */
#corpo {
  margin-bottom: 0 !important;
  background: #FFFFFF !important;
}


/* RODAPE: bloco "Sobre a Loja" trocado pela marca real da Coquetel Media -
   logo do Grupo Ediouro (extraida do site de referencia, recolorida em
   branco pro fundo escuro, igual ao efeito "brightness(0) invert(1)" que
   o site original usa) + "Coquetel Media" no lugar do titulo generico
   "Sobre a Loja". O paragrafo de descricao abaixo (nativo, editavel no
   admin) continua igual. */
#rodape .institucional .col-md-3 h5 {
  font-size: 0 !important;
  line-height: 0 !important;
}
#rodape .institucional .col-md-3 h5::before {
  content: "";
  display: block;
  width: 120px;
  height: 51px;
  background-image: url("data:image/png;base64,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");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: left center;
  margin-bottom: 12px;
}
#rodape .institucional .col-md-3 h5::after {
  content: "Coquetel Mídia";
  display: block;
  font-size: 17px !important;
  font-weight: 800 !important;
  color: #FFFFFF !important;
  line-height: normal !important;
}

/* esconder o link "Pacote básico" que a Loja Integrada lista sozinho
   dentro de "Institucional" no rodapé (toda Página customizada criada em
   Visual > Páginas aparece ali automaticamente).
   (usei :has() antes pra esconder o <li> inteiro, mas o editor de CSS da
   Loja Integrada não aceita essa sintaxe mais nova e acusa erro - troquei
   por esconder só o link; sobra uns 10px de espaço vazio no lugar dele,
   mas evita o erro de sintaxe no painel)
   IMPORTANTE - achado ao vivo: ".institucional" NÃO é só a coluna visual
   "Institucional" (Meios de pagamento/Segurança e privacidade) - é a
   classe da SEÇÃO INTEIRA do rodapé que engloba as 4 colunas (Sobre a
   Loja/Atendimento/Categorias/Institucional), nome escolhido pelo tema,
   coincidência com o nome da coluna. Por causa disso, quando adicionamos
   via JS (arquivo codigo-botao-topo-outras-paginas.html) um link
   "Básico" na coluna "Categorias" apontando pra essa mesma página
   pacote-basico.html, esse link também estava sendo escondido por engano
   por essa regra. Troquei o escopo de ".institucional" (a seção inteira)
   pra ":nth-child(4)" (só a 4ª coluna, que é a Institucional de verdade),
   testado ao vivo em /empresarial - agora só esconde o link nativo da
   coluna Institucional, sem afetar o nosso link na coluna Categorias. */
#rodape .row-flex > .col:nth-child(4) a[href*="pacote-basico"] {
  display: none !important;
}

/* esconder o link "Fale Conosco" do rodapé (fora a home) que abria
   aquele box/modal com formulário - só em páginas fora a home, já que é
   o rodapé nativo (na home o rodapé é o nosso próprio, sem esse link).
   O e-mail de contato aparece embaixo de "Atendimento" em vez disso (ver
   regra ".g_atendimento::after" logo abaixo) - a pedido, pra ficar junto
   com o telefone em vez de sozinho em "Institucional".
   O modal em si também fica com display:none por garantia, caso algum
   outro lugar do site aponte pra ele no futuro. */
#rodape .institucional a[href="#modalContato"] {
  display: none !important;
}
#modalContato {
  display: none !important;
}

/* harmonizacao do rodape nativo (paginas fora a home) com o estilo do
   rodape customizado da home - mesma fonte, mesmo tratamento dourado
   caixa-alta nos titulos de coluna, mesmo cinza claro nos links. A coluna
   "Sobre a Loja" fica de fora (:not(.col-md-3)) porque ja tem tratamento
   proprio - ver regra "#rodape .institucional .col-md-3 h5" acima. */
#rodape .col:not(.col-md-3) > h5 {
  color: #FBBF24 !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
  margin-bottom: 14px !important;
}
#rodape a,
#rodape p,
#rodape li {
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
}
#rodape .institucional a {
  color: #d4d4d8 !important;
}
#rodape .institucional a:hover {
  color: #FBBF24 !important;
}
#rodape .institucional {
  border-bottom-color: #27272a !important;
}

/* e-mail de contato embaixo do telefone, na coluna "Atendimento" do
   rodapé nativo (fora a home). ".g_atendimento" é a lista nativa do
   telefone - ::after entra como último item dessa lista, então cai
   visualmente logo abaixo do telefone, sem precisar mover nada de
   verdade entre colunas (impossível só com CSS, sem :has()). Estilo
   copiado do próprio link de telefone ao lado (branco, 16px, mesma
   fonte) pra combinar. */
#rodape .g_atendimento::after {
  content: "coquetelmidia@ediouro.com.br";
  display: block;
  margin-top: 10px;
  color: #FFFFFF;
  font-size: 16px;
}

/* esconder o título de qualquer coluna do rodapé que fique vazia (sem
   nenhuma lista de links embaixo) - continua útil como segurança geral,
   mesmo agora que a loja já tem categorias de produto cadastradas
   (Profissional/Empresarial). Não dá pra pegar isso direto com :has()
   (a Loja Integrada não aceita, como já vimos no link "Pacote básico"
   acima), por isso a checagem via :last-child (só esconde o título
   quando ele é o único filho da coluna, ou seja, quando não tem lista
   de fato depois dele).
   Antes das categorias existirem, tinha aqui também uma 2ª regra
   encolhendo a 3ª coluna (Categorias) pra não sobrar espaço vazio no
   rodapé. Ela foi removida porque agora "Categorias" tem conteúdo de
   verdade (Profissional/Empresarial) - com a regra antiga, a coluna
   ficava com largura zero mas o texto dela continuava aparecendo,
   sobrepondo a coluna "Institucional" ao lado. Se um dia todas as
   categorias forem removidas de novo e a coluna voltar a ficar vazia,
   é só recriar aquela regra (encolhe a coluna pela posição/nth-child). */
#rodape .col > h5:last-child {
  display: none !important;
}

/* esconder a função de busca (lupa) do cabeçalho, em todo o site */
.search-trigger {
  display: none !important;
}

/* Logo do rodape novo da home (secao #cq-secao-footer, injetada via
   Visual > Incluir codigo HTML > Cabecalho - ver arquivo
   codigo-topo-home-incluir-html.html). E a mesma logo Ediouro branca
   usada no rodape nativo das outras paginas, so que aqui o elemento
   .cq-ft-logo ja vem sem estilo pra nao duplicar essa imagem grande
   dentro do campo de HTML (que tem limite de caracteres). */
#cq-secao-footer .cq-ft-logo {
  background-image: url("data:image/png;base64,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");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: left center;
}

/* Menu do topo: as "áreas" (Como funciona/Planos/Resultados/FAQ/Entrar/
   Fale com vendas) do site de referência. A loja ainda não tem categoria
   de produto cadastrada, então o menu ".nivel-um" do cabeçalho está
   vazio - os itens são injetados ali (ver "cq-nav-item" no arquivo
   codigo-topo-home-incluir-html.html, campo Cabeçalho, só na home) e
   este bloco só cuida do visual deles.
   ("o menu quebrou" - o tema nativo tem uma regra pra "li" desse menu com
   padding: 28.8px 16px (pensada pra outro tipo de item), que a gente não
   estava sobrescrevendo. Isso deixava cada item com ~94px de altura e a
   barra toda desalinhada com a logo. Corrigido zerando padding/margin e
   forçando altura automática abaixo.) */
.menu.superior .nivel-um {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 2px !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
.menu.superior .nivel-um .cq-nav-item {
  list-style: none !important;
  float: none !important;
  width: auto !important;
  padding: 0 !important;
  margin: 0 !important;
  height: auto !important;
  display: flex !important;
  align-items: center !important;
}
.menu.superior .nivel-um .cq-nav-item > a {
  display: inline-flex !important;
  align-items: center !important;
  padding: 8px 14px !important;
  border-radius: 9999px !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  color: #18181B !important;
  background: none !important;
  border: none !important;
  text-decoration: none !important;
  white-space: nowrap;
  transition: background-color .15s ease;
}
.menu.superior .nivel-um .cq-nav-item > a:hover {
  background-color: rgba(24, 24, 27, 0.08) !important;
}
.menu.superior .nivel-um .cq-nav-item.cq-nav-cta {
  margin-left: 8px !important;
}
.menu.superior .nivel-um .cq-nav-item.cq-nav-cta > a {
  background-color: #FCD34D !important;
  border: 2px solid #18181B !important;
  box-shadow: 2px 2px 0 0 #18181B !important;
  padding: 7px 16px !important;
}
.menu.superior .nivel-um .cq-nav-item.cq-nav-cta > a:hover {
  background-color: #FBBF24 !important;
}
@media (max-width: 860px) {
  .menu.superior .nivel-um .cq-nav-item > a { padding: 8px 10px !important; font-size: 14px !important; }
}

/* esconder as categorias nativas (Empresarial/Profissional) do menu do
   topo só na home - a Loja Integrada passou a preencher essa mesma lista
   ".nivel-um" sozinha com as categorias de verdade assim que elas foram
   cadastradas (isso já acontecia nas outras páginas, mas agora também
   acontece na home). O JS que injeta os itens custom (ver comentário
   acima) só ACRESCENTA os itens dele, não troca o que já está lá, então
   as categorias nativas passaram a aparecer junto, antes de "Como
   funciona/Planos/etc". Na home a decisão foi manter só o menu custom,
   então escondemos os itens nativos (identificados pela classe
   "borda-principal", que só eles têm - os itens custom usam
   "cq-nav-item"). Fora da home o comportamento nativo continua normal
   (é onde o menu de categorias faz sentido de verdade). Testado ao vivo
   na home. */
body.pagina-inicial .menu.superior .nivel-um > li.borda-principal {
  display: none !important;
}

/* cabecalho "sumia" ao rolar a pagina no celular, mesmo tendo
   "position:sticky" - o motivo: o <body> do tema vem com
   "overflow-x:hidden" (pra nao deixar a pagina rolar de lado), e o
   proprio CSS obriga o overflow-y correspondente a virar "auto" nesse
   caso (nao da pra ter só um eixo com "hidden" sem o outro virar
   scrollavel). Isso faz o <body> "roubar" a referencia de rolagem do
   cabecalho: como o <body> nunca rola de verdade dentro dele mesmo (a
   altura dele e igual a do conteudo), o sticky nao tem contra o que se
   fixar e o cabecalho passa a rolar junto com o resto da pagina depois de
   pouco menos de 100px - ficando inacessivel (o botao de menu some da
   tela) assim que a pessoa rola um pouco, em qualquer largura de tela.
   Tirando essa restricao do <body> (o <html> ja tem "overflow-x:hidden"
   por conta propria e continua segurando a rolagem lateral sozinho)
   resolve o sticky sem reabrir rolagem de lado. */
body:not(.g_backshadow) {
  overflow: visible !important;
}

/* menu mobile (hamburguer) nao travava a rolagem da pagina por tras dele
   - o tema so adiciona a classe "g_backshadow" no <body> pra escurecer o
   conteudo, mas nunca tenta bloquear o scroll de verdade (nao existe
   nenhuma regra nativa pra essa classe). "overflow:hidden" no body sozinho
   nao resolve, porque quem realmente rola a pagina aqui e o <html> (ele
   tem sua propria regra nativa de overflow, separada da do body). Como
   nao da pra "selecionar o pai" em CSS puro sem :has() (que a Loja
   Integrada nao aceita), a solucao 100% CSS pro celular e usar
   "touch-action: none" num elemento que cobre a tela toda enquanto o
   menu esta aberto - isso desliga o gesto de arrastar/rolar por toque
   nessa area (que e como se rola no celular), sem precisar de JS. */
body.g_backshadow {
  overflow: hidden !important;
}
body.g_backshadow::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 998;
  touch-action: none;
  overscroll-behavior: none;
}
/* trava de verdade (funciona em qualquer navegador, inclusive Safari do
   iPhone): JS que "congela" o body na posicao atual enquanto o menu
   esta aberto - ver campo "Cabeçalho" (so roda na home, mas e onde o
   menu tem conteudo mesmo - ver regra abaixo). As regras acima ficam
   como reforço extra, sem prejuizo. */

/* (removida) "menu hamburguer some fora da home" - regra escrita quando a
   loja ainda nao tinha categoria cadastrada: nas outras paginas a lista
   ".nivel-um" (onde o menu e injetado) ficava vazia, entao abrir o menu
   la so mostrava um painel em branco sem nenhum link, e o botao ficava
   escondido fora da home por causa disso.
   Agora que existem categorias de verdade (Empresarial/Profissional/
   Básico), a Loja Integrada preenche essa mesma lista sozinha em
   QUALQUER pagina que nao seja a home (testado ao vivo em /profissional
   e em /pagina/pacote-basico.html - via body.pagina-pagina, ou seja vale
   pra pagina de categoria e pagina avulsa) - so a home continua vazia
   por padrao e recebe os itens custom via JS (arquivo
   codigo-topo-home-incluir-html.html). Como o menu agora sempre tem
   conteudo em qualquer pagina, nao faz mais sentido esconder o botao
   fora da home: ele voltou a se comportar como o padrao nativo do tema
   (aparece em qualquer pagina, no celular). */

/* imagem do produto menor - a foto (465x700 no arquivo original) aparecia
   no tamanho nativo dela, ocupando quase toda a coluna e ficando grande
   demais perto do texto ao lado. Limitando a largura maxima. */
#imagemProduto {
  max-width: 340px !important;
  width: 100% !important;
  height: auto !important;
}

/* titulo do produto com respiro do topo - a coluna de informacoes nao
   tinha nenhum espaco acima do <h1>, entao o nome do produto ficava
   colado na borda superior da area de conteudo. */
.info-principal-produto h1.nome-produto {
  margin-top: 18px !important;
}

/* trecho da descricao marcado pra aparecer logo abaixo do nome/codigo do
   produto (o resto do texto continua so embaixo, no lugar de sempre) - a
   marcacao e feita a mao no campo de descricao (ver instrucoes no arquivo
   HTML de "outras paginas"). Estilo pra combinar com o resto do texto do
   site, com respiro do nome do produto acima e do preco/botao Comprar
   abaixo. */
.cq-resumo-topo {
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
  color: #3f3f46 !important;
  margin: 12px 0 20px !important;
}

/* cabeçalho "grudado" no topo ao rolar a página (logo + menu ficam sempre
   visíveis) - em todo o site, não só na home. O "header" nativo é só
   "position: relative" (rola junto com o conteúdo), então troca pra
   "sticky": some com o próprio espaço reservado no fluxo normal da
   página (diferente de "fixed", que precisaria de um ajuste manual de
   padding no conteúdo de baixo pra não ficar tampado) e testado ao vivo
   sem nenhum ancestral com "overflow" cortando o efeito. */
header {
  position: sticky !important;
  top: 0 !important;
  z-index: 1000 !important;
  background: #FFF9EC !important;
}

/* "o menu ainda aparece quebrado": a barra do menu (".col.g_menu", onde o
   nosso menu é injetado) é uma coluna do tema nativo que, por padrão,
   ocupa 100% da largura sozinha - isso não aparecia antes porque a lista
   ficava vazia (loja sem categoria cadastrada), então essa faixa ficava
   em branco. Assim que colocamos os itens do menu nela, ela virou uma
   segunda barra inteira acima da barra da logo, em vez de ficar ao lado -
   por isso o menu "quebrado" continuava aparecendo mesmo depois do
   conserto do padding dos itens.
   Conserto (só em telas ≥861px - no celular deixa o comportamento nativo
   do tema em paz, que provavelmente vira um menu hamburguer): impede a
   quebra de linha nessa barra e reordena as 3 colunas nativas (menu / logo
   / conta+carrinho) pra ficarem lado a lado numa única linha, com a logo
   primeiro. Testado ao vivo, inclusive rolando a página com o cabeçalho
   fixo (regra acima). */
@media (min-width: 861px) {
  header .row-flex.align-items-center {
    flex-wrap: nowrap !important;
  }
  header .row-flex.align-items-center > .col.g_menu {
    width: auto !important;
    flex: 1 1 auto !important;
    order: 2 !important;
    display: flex !important;
    align-items: center !important;
  }
  header .row-flex.align-items-center > .col-auto {
    order: 1 !important;
  }
  header .row-flex.align-items-center > :nth-child(3) {
    order: 3 !important;
    flex: 0 0 auto !important;
    width: auto !important;
  }
}

/* cabeçalho mais centralizado: o ".container" nativo do cabeçalho ocupa
   100% da tela (sem limite de largura), então em telas grandes a logo
   ficava grudada na borda esquerda e sobrava um vão enorme à direita.
   Limita à mesma largura de conteúdo usada no resto do site (1140px) e
   centraliza - fica igual ao "cartão" central do site de referência, só
   no cabeçalho (não mexe em telas estreitas, onde o conteúdo já nem
   chega perto de 1140px). */
header .container {
  max-width: 1140px !important;
  margin: 0 auto !important;
}

/* respiro vertical no cabecalho: como a altura do cabecalho e so o
   tamanho da propria caixa da logo (sem padding proprio nenhum), a borda
   preta debaixo do menu ficava colada direto na caixa, sem nenhum espaco
   entre as duas. Colocando um respiro em cima/embaixo do conteudo do
   cabecalho (aplicado no proprio container, que ja e quem define a altura
   do cabecalho todo). */
header .container {
  padding-top: 14px !important;
  padding-bottom: 14px !important;
}

/* logo dentro de uma "caixa" (contorno preto arredondado, fundo branco,
   sombrinha) - igual ao site de referência, que também não deixa a logo
   solta. Mesmo estilo de caixa usado em outros elementos do site (borda
   preta + sombra deslocada). */
header .logo a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 3px solid #18181B !important;
  border-radius: 16px !important;
  background: #FFFFFF !important;
  padding: 10px 16px !important;
  box-shadow: 2px 2px 0 0 #18181B !important;
}

/* esconder a área de "Calcule o frete" (CEP + botão Calcular) na página
   de produto - os produtos são digitais (PDF), não tem envio pelo
   Correios, então esse bloco não faz sentido aqui. Testado ao vivo na
   página /teste-de-produto-digital-pacote-teste: ".cep" é uma classe
   única nessa página (o form "formCalcularCep" + a lista de opções de
   frete + o aviso de disponibilidade ficam todos dentro dela), escondendo
   ela some com tudo de uma vez, sem sobrar espaço vazio e sem afetar o
   preço, o botão Comprar, Lista de Desejos ou Formas de pagamento. */
.produto .cep {
  display: none !important;
}

/* botão "Comprar" da página de produto desproporcional - o tema nativo
   aplica a ele as classes "principal grande" (modificador de tamanho
   "grande" da Loja Integrada), o que deixava o botão com 74px de altura
   e 412px de largura (ocupando quase toda a coluna direita), bem maior
   que qualquer outro botão do site. Forcei o mesmo tamanho/proporção dos
   outros botões ".botao" (padding e fonte parecidos com o "Fale com
   vendas" do cabeçalho), com largura no conteúdo em vez de esticado.
   Precisou de "!important" em tudo porque as classes nativas "grande"/
   "principal" competem em especificidade com a nossa ".botao" genérica.
   Testado ao vivo em /profissional-pacote-caca-palavras. */
.comprar {
  text-align: center !important;
}
.comprar .botao-comprar {
  width: auto !important;
  max-width: 340px !important;
  height: auto !important;
  line-height: normal !important;
  padding: 18px 40px !important;
  font-size: 19px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
}

/* esconder o widget nativo "Newsletter" só na barra lateral estreita das
   páginas de categoria (ex: Profissional/Empresarial) - já existe um
   formulário de newsletter perto do rodapé (outro widget, em outro lugar
   da página), esse da lateral ficava redundante e apertado numa coluna
   estreita. Testado ao vivo em /categoria/empresarial: ".coluna.span3.
   esquerda" é a coluna lateral estreita; o widget perto do rodapé fica
   fora dela (dentro de ".posicao-rodape"), então essa regra não mexe
   nele. */
.coluna.span3.esquerda .componente.newsletter {
  display: none !important;
}

/* esconde o widget nativo "Filtrar por Preço" da barra lateral das
   páginas de categoria - com poucos produtos por categoria (ainda mais
   com só um preço por plano hoje), esse filtro não tem utilidade real e
   só ocupa espaço. Testado ao vivo em /empresarial. */
.coluna.span3.esquerda .faceta-preco {
  display: none !important;
}

/* destaque pra categoria da lista lateral que é a página sendo vista no
   momento (ex: "Empresarial" com fundo quando você está em /empresarial).
   A Loja Integrada não marca isso sozinha - a classe "cq-cat-atual" é
   adicionada via JS no arquivo codigo-botao-topo-outras-paginas.html
   (compara a URL de cada link da lista com a URL atual). Aqui só cuida do
   visual. */
.menu.lateral .nivel-um > li.cq-cat-atual > a {
  background: #FBBF24 !important;
  border-radius: 10px !important;
  margin: 4px 6px !important;
  width: calc(100% - 12px) !important;
  box-sizing: border-box !important;
}
.menu.lateral .nivel-um > li.cq-cat-atual > a .titulo {
  color: #18181B !important;
}

/* destaque do Empresarial com cor própria (azul-marinho #143A6F, a mesma
   já usada pro Profissional na home, no card "mais escolhido") - pedido
   pra diferenciar visualmente os planos também aqui, e não só usar o
   amarelo padrão pra qualquer categoria ativa. Depende da classe
   "cq-cat-atual-empresarial" (JS em codigo-botao-topo-outras-paginas.html)
   pra saber que a categoria ativa é especificamente o Empresarial. Vem
   depois da regra genérica acima de propósito, pra ganhar dela (mesma
   especificidade + "!important" nas duas - quem vem depois no arquivo
   leva). */
.menu.lateral .nivel-um > li.cq-cat-atual-empresarial > a {
  background: #143A6F !important;
}
.menu.lateral .nivel-um > li.cq-cat-atual-empresarial > a .titulo {
  color: #FFFFFF !important;
}

/* tela de categoria sem produtos ("Não existem produtos nessa categoria")
   - vinha com o visual "cru" padrão da Loja Integrada, sem nenhuma das
   bordas/sombras que o resto do site usa, e o botão "Ir às compras"
   estava com a variante secundária (branca) do nosso .botao. Aplica a
   mesma linguagem visual das outras caixas do site (fundo branco, borda
   preta, sombra deslocada) e troca esse botão pra amarelo (cor
   primária), já que é a única ação disponível na tela. Escopado por
   "body.pagina-categoria" (classe que a própria Loja Integrada já
   coloca no body dessa página) pra não afetar nenhuma outra tela que
   use ".caixa-destaque" ou ".botao.secundario" em outro contexto.
   Testado ao vivo em /empresarial. */
body.pagina-categoria .caixa-destaque {
  background: #FFFFFF;
  border: 2px solid #18181B;
  border-radius: 16px;
  box-shadow: 6px 6px 0 0 #18181B;
  padding: 40px 32px;
  text-align: center;
}
body.pagina-categoria .caixa-destaque h1 {
  color: #18181B;
  font-size: 24px;
  font-weight: 800;
  margin: 0 0 12px;
}
body.pagina-categoria .caixa-destaque p {
  color: #52525b;
  margin: 0 0 24px;
}
body.pagina-categoria .caixa-destaque .botao.secundario {
  background-color: #FCD34D !important;
  color: #18181B !important;
}

/* "sobre a categoria" depois de movida pro topo da coluna direita (o JS
   que move ela está no arquivo codigo-botao-topo-outras-paginas.html) -
   sem caixa/borda, só texto mesmo (decisão: não precisava do tratamento
   de card aqui), com um respiro embaixo pra separar do que vem depois
   (aviso de categoria vazia ou lista de produtos).
   Esse widget vem nativo da Loja Integrada com uma "caixa" própria (fundo
   cinza claro em ".componente" + 20px de respiro em ".interno", ambos do
   tema, sem relação com nosso ".caixa-destaque") e com o texto em Roboto
   12px, menor e com fonte diferente do resto do site. Removi o fundo/
   respiro nativo (sem caixa mesmo, como decidido) e troquei a fonte do
   título e do parágrafo pra mesma família sans-serif usada no cabeçalho/
   rodapé/menus, com o parágrafo um pouco maior (14px) pra ficar mais
   legível e consistente com o restante do site. Precisou de "!important"
   em mais propriedades aqui porque o seletor nativo do tema (elemento +
   classe, ex: "h4.titulo") é mais específico que o nosso (só classes),
   então sem "!important" o tema ganhava a disputa de especificidade CSS
   mesmo com nossa regra vindo depois. Testado ao vivo em /empresarial. */
.conteudo.span9 > .componente {
  background: transparent !important;
  margin-bottom: 24px;
}
.conteudo.span9 > .componente .interno {
  padding: 0 !important;
}
/* título desse widget (H4 "Profissional"/"Empresarial" etc, nativo do
   tema) - mantido visível, com a mesma fonte do resto do texto do site.
   Ele repetia o nome da categoria junto com o título de verdade da página
   (H1, ao lado do filtro de "Relevância", mais abaixo) - decidido manter
   só este de cima (é o que fica junto da descrição) e esconder o H1 de
   baixo em vez deste (ver regra ".categoryTitle" logo depois). */
.conteudo.span9 > .componente .titulo {
  display: block !important;
  color: #18181B !important;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
  font-size: 18px !important;
  font-weight: 800 !important;
}
/* esconde o iconezinho de "documento" que o tema coloca antes do título
   desse widget (nativo, não é algo que a gente adicionou) - testado ao
   vivo em /empresarial. */
.conteudo.span9 > .componente .titulo i {
  display: none !important;
}

/* esconde o título "de baixo" da página de categoria (H1 nativo, ao lado
   do filtro de "Relevância") - ficava duplicado com o título do widget de
   descrição, de cima (mesmo texto: nome da categoria duas vezes na
   página). Mantido só o de cima. Escondo só o H1 em si (não a coluna
   ".categoryTitle" inteira) porque essa coluna e a do filtro de
   "Relevância" são lado a lado nessa grade (a coluna do título vem antes,
   flutuando à esquerda) - se eu escondesse a coluna inteira, o filtro
   perdia o espaço reservado e pulava pra esquerda, saindo do lugar de
   sempre (era isso que aconteceu na primeira tentativa - corrigido
   aqui). Escondendo só o texto de dentro, a coluna continua reservando o
   espaço e o filtro fica onde sempre esteve, à direita. A regra usa
   "body.pagina-categoria .categoryTitle" (não só ".categoryTitle") de
   propósito, pra manter a mesma especificidade da coluna em si - com
   "!important" dos dois lados, quem tem mais classes no seletor ganha,
   então precisa bater a especificidade certinho. Testado ao vivo em
   /profissional. */
body.pagina-categoria .categoryTitle h1.titulo.cor-secundaria {
  display: none !important;
}
.conteudo.span9 > .componente p {
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
  color: #3f3f46 !important;
}