/* ==========================================================================
   ZÉ PAULO GOMES · ajustes do site em PHP
   O visual vem de style.css, grid.css e elementor.css, que são os arquivos do
   tema original. Aqui ficam só os acertos que o site sem WordPress precisa e
   os blocos da home, escritos com as mesmas peças do tema.
   Mesma paleta, mesma tipografia, mesmo espaçamento. Nada inventado.
   ========================================================================== */

/* item do menu correspondente à página aberta */
#containerMenuAberto a.ativo{ color:#fff; }

/* aviso de quando o site do cliente não aceita ser exibido dentro da página */
.emuFalha{ display:none; text-align:center; padding:40px 20px; }

/* etiquetas do projeto */
.etiquetasProjeto{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center; padding:0 0 30px; }

.elementor-portfolio__filter{ cursor:pointer; }

/* espaço para a barra fixa do topo */
body{ padding-top:100px; }
@media (max-width:768px){ body{ padding-top:76px; } }


/* ==========================================================================
   VÍDEO COM CAPA
   A capa é um quadro do próprio vídeo, a não ser que o painel envie outra.
   O player do YouTube só carrega depois do clique.
   ========================================================================== */
.quadroVideo{
  position:relative; overflow:hidden; background:#000;
  display:block; width:100%; max-width:100%;
}
/* A proporção vem por padding, que TODO navegador entende, inclusive o
   navegador de dentro do Instagram e do Facebook. Onde houver suporte a
   aspect-ratio, ele assume e o padding sai de cena. */
.quadroVideo::before{ content:''; display:block; padding-top:56.25%; }
.quadroVideo.vertical::before{ padding-top:177.78%; }
@supports (aspect-ratio: 16 / 9){
  .quadroVideo::before{ display:none; }
  .quadroVideo{ aspect-ratio:16 / 9; }
  .quadroVideo.vertical{ aspect-ratio:9 / 16; }
}

/* a coluna do vídeo ocupa a largura que tem, senão o vídeo encolhe */
.comVideo{ width:100%; }

.quadroVideo > img.capaVideo,
.quadroVideo > video,
.quadroVideo > iframe,
.quadroVideo .alvoVideo,
.quadroVideo .alvoVideo iframe{
  position:absolute; top:0; right:0; bottom:0; left:0;
  width:100%; height:100%; max-width:100%;
  border:0; display:block; margin:0;
  /* A capa preenche o quadro inteiro. O quadro do YouTube vem em 16x9 mesmo
     quando o vídeo é em pé: ele guarda a imagem em pé no centro e completa as
     laterais. Preenchendo, é exatamente esse centro que aparece, o vídeo em
     pé, inteiro, sem a tarja preta em cima e embaixo. */
  -o-object-fit:cover;
     object-fit:cover;
  -o-object-position:center;
     object-position:center;
}

/* botão de tocar: o mesmo círculo com triângulo que o site já usa */
.tocarVideo{
  position:absolute; top:0; right:0; bottom:0; left:0; width:100%; height:100%;
  border:0; background:transparent; cursor:pointer; padding:0;
  display:flex; align-items:center; justify-content:center;
  transition:background .3s ease-in;
}
.tocarVideo:hover{ background:rgba(0,0,0,.25); }
.tocarVideo span{
  width:76px; height:76px; border-radius:50%;
  border:3px solid #fff; background:transparent;
  display:flex; align-items:center; justify-content:center;
  transition:.3s ease-in;
}
.tocarVideo span::before{
  content:''; display:block;
  border-left:20px solid #fff;
  border-top:13px solid transparent;
  border-bottom:13px solid transparent;
  margin-left:6px;
}
.tocarVideo:hover span{ background:#feec34; border-color:#feec34; }
.tocarVideo:hover span::before{ border-left-color:#000; }
.quadroVideo.tocando .tocarVideo,
.quadroVideo.tocando > img.capaVideo{ display:none; }

@media (max-width:768px){
  .tocarVideo span{ width:54px; height:54px; }
  .tocarVideo span::before{ border-left-width:15px; border-top-width:10px; border-bottom-width:10px; }
}


/* ==========================================================================
   MOSAICO DE VÍDEOS DO MANIFESTO
   Linhas de três: vertical, horizontal, vertical. Dentro da linha cada vídeo
   cresce na proporção do seu formato, então os três fecham na mesma altura.
   ========================================================================== */
.mosaicoLinha{
  display:flex; align-items:flex-start;
  gap:14px; margin-bottom:14px;
}
.mosaicoLinha:last-child{ margin-bottom:0; }
.mosaicoLinha .quadroVideo{
  aspect-ratio:auto;
  flex-basis:0; min-width:0;
}
.mosaicoLinha .quadroVideo.vertical{   flex-grow:0.5625; }
.mosaicoLinha .quadroVideo.horizontal{ flex-grow:1.7778; }
/* a altura vem daqui e dá o mesmo valor para os dois formatos */
.mosaicoLinha .quadroVideo::before{ content:''; display:block; width:100%; }
.mosaicoLinha .quadroVideo.vertical::before{   padding-top:177.78%; }
.mosaicoLinha .quadroVideo.horizontal::before{ padding-top:56.25%; }

@media (max-width:640px){
  .mosaicoLinha{ flex-direction:column; gap:12px; }
  .mosaicoLinha .quadroVideo{ flex:0 0 auto; }
  .mosaicoLinha .quadroVideo::before{ display:none; }
  .mosaicoLinha .quadroVideo.vertical{   aspect-ratio:9 / 16; }
  .mosaicoLinha .quadroVideo.horizontal{ aspect-ratio:16 / 9; }
}


/* ==========================================================================
   BLOCOS DA HOME
   ========================================================================== */
.acoesHome{
  display:flex; flex-wrap:wrap; gap:1.4em; justify-content:center;
  padding:3em 10px 1em;
}

.chamadaHome{ margin:1.2em 0 1.8em; font-size:2em; line-height:1.55; max-width:34em; }
#homePreto .chamadaHome{ color:#fff; }
#homePreto .direita .quadroVideo{ border-radius:6px; }

/* cartões: preto, título Anton amarelo, selo no rodapé */
.cartoesHome{
  display:grid; gap:1.6em; padding:0 10px;
  grid-template-columns:minmax(0,1fr);
}
.cartaoHome{
  background:#000; color:#fff;
  border-radius:10px; padding:2.6em 2.4em;
  display:flex; flex-direction:column;
}
.cartaoHome .numero{
  font-family:'Anton', Impact, sans-serif; font-weight:400;
  font-size:4.4em; line-height:1; color:#feec34;
  display:block; margin-bottom:.15em;
}
.cartaoHome h4{
  font-family:'Anton', Impact, sans-serif; font-weight:400;
  text-transform:uppercase; letter-spacing:.03em;
  font-size:2.6em; line-height:1.1; color:#feec34;
  margin:0 0 .7em;
}
.cartaoHome p{ font-size:1.9em; line-height:1.55; color:#fff; margin:0; }
.cartaoHome .selo{
  margin-top:auto; padding-top:1.6em;
  font-size:1.7em; line-height:1.3; color:#f2f2f2; font-weight:700;
}

@media (min-width:700px){
  .cartoesHome.tres{   grid-template-columns:repeat(3, minmax(0,1fr)); }
  .cartoesHome.quatro{ grid-template-columns:repeat(2, minmax(0,1fr)); }
}
@media (min-width:1000px){
  .cartoesHome.quatro{ grid-template-columns:repeat(4, minmax(0,1fr)); }
}

/* lista de entregas do bloco amarelo */
.listaEntrega{ margin:0 0 1.6em; padding:0; list-style:none; }
.listaEntrega li{
  font-size:2em; line-height:1.7; font-weight:700; color:#000;
  padding-left:1.3em; position:relative;
}
.listaEntrega li::before{
  content:''; position:absolute; left:0; top:.62em;
  width:.45em; height:.45em; background:#000; border-radius:50%;
}

.enderecoHome{ text-align:center; padding:1.5em 10px 3em; }


/* ==========================================================================
   BOTÃO FLUTUANTE DE VOLTAR, NA INTERNA DE PORTFÓLIO
   ========================================================================== */
.voltarFlutuante{
  position:fixed; left:20px; bottom:20px; z-index:400;
  display:inline-flex; align-items:center; gap:9px;
  background:#000; color:#feec34; border:3px solid #feec34;
  padding:11px 20px; border-radius:30px;
  font-family:'Open Sans', sans-serif; font-size:14px; font-weight:700;
  line-height:1; text-decoration:none;
  box-shadow:0 6px 20px rgba(0,0,0,.28);
  transition:.3s ease-in;
}
/* o tema pinta span e link de preto; a cor precisa ser dita nos dois */
.voltarFlutuante, .voltarFlutuante span{ color:#feec34; }
.voltarFlutuante:hover, .voltarFlutuante:focus{ background:#feec34; border-color:#feec34; }
.voltarFlutuante:hover, .voltarFlutuante:hover span,
.voltarFlutuante:focus, .voltarFlutuante:focus span{ color:#000; background:transparent; }
.voltarFlutuante::before{ content:'←'; font-size:17px; line-height:1; }
@media (max-width:560px){
  .voltarFlutuante{ padding:11px 14px; left:16px; bottom:16px; }
  .voltarFlutuante span{ display:none; }
  .voltarFlutuante::before{ font-size:20px; }
}


/* ==========================================================================
   PORTFÓLIO
   Usa o cartão do próprio tema (.containerPortfolio / .itemPortfolio), com a
   caixa amarela de borda preta que aparece no hover. As regras abaixo só
   completam o que faltava: proporção fixa da capa e as colunas por tamanho
   de tela, para nada vazar da janela.
   ========================================================================== */
.containerPortfolio{ display:flex; flex-wrap:wrap; padding:0; }
.containerPortfolio .coluna{
  width:100%; padding:3px; display:block; overflow:hidden; box-sizing:border-box;
}
@media (min-width:700px){ .containerPortfolio .coluna{ width:50%; } }
@media (min-width:1000px){ .containerPortfolio .coluna{ width:33.3333%; } }

.containerPortfolio .itemPortfolio{ position:relative; overflow:hidden; }
.containerPortfolio .boxImagem{
  position:relative; aspect-ratio:373 / 205; background:rgba(0,0,0,.08); overflow:hidden;
}
.containerPortfolio .boxImagem a,
.containerPortfolio .boxImagem img{
  display:block; width:100%; height:100%; object-fit:cover; margin:0;
}

/* filtros: Open Sans 700, ativo em preto e os outros em cinza, como no site */
.filtrosPortfolio{
  display:flex; flex-wrap:wrap; justify-content:center;
  gap:0 8px; margin:0 0 22px; padding:0; list-style:none;
}
.filtrosPortfolio.etiquetas{ margin-top:-14px; }
.filtrosPortfolio li{
  font-family:'Open Sans', sans-serif; font-weight:700;
  font-size:1.8em; line-height:1.2; color:#aeaeae;
  padding:8px; cursor:pointer; transition:color .2s ease-in;
}
.filtrosPortfolio li:hover{ color:#000; }
.filtrosPortfolio li.elementor-active{ color:#000; }
.filtrosPortfolio.etiquetas li{ font-size:1.5em; }


/* ==========================================================================
   ACERTOS DE ESPAÇO E TAMANHO
   Nada de estilo novo: só folga onde estava apertado e tamanho mínimo onde
   o texto ficava pequeno demais para ler.
   ========================================================================== */
.js-section{ padding-bottom:2em; }
.js-grid.linha{ margin-bottom:.6em; }

/* o tema encolhe a fonte base no celular; isso garante um mínimo legível */
@media (max-width:900px){
  .duasColunas h2{ font-size:3em; }
  .chamadaHome{ font-size:2.4em; }
  .cartaoHome h4{ font-size:3em; }
  .cartaoHome p{ font-size:2.2em; }
  .cartaoHome .selo{ font-size:2em; }
  .listaEntrega li{ font-size:2.4em; }
  .filtrosPortfolio li{ font-size:2.2em; }
  .itemBlog h4{ font-size:2.3em; }
  .itemBlog p{ font-size:2em; }
}
@media (max-width:640px){
  .duasColunas h2{ font-size:3.4em; }
  .chamadaHome{ font-size:2.8em; }
  .cartaoHome h4{ font-size:3.4em; }
  .cartaoHome p{ font-size:2.6em; }
  .cartaoHome .selo{ font-size:2.4em; }
  .listaEntrega li{ font-size:2.8em; }
  .filtrosPortfolio li{ font-size:2.6em; }
  .itemBlog h4{ font-size:2.8em; }
  .itemBlog p{ font-size:2.4em; }
  .acoesHome{ padding:2em 10px 1em; }
  .cartaoHome{ padding:2.2em 2em; }
}

/* botões: garante área de toque e nunca deixa o texto sumir */
.js-button{ font-size:1.9em; }
@media (max-width:900px){ .js-button{ font-size:2.4em; } }
@media (max-width:640px){ .js-button{ font-size:2.8em; } }

/* nada pode vazar da janela */
html, body{ overflow-x:hidden; }
main img, main iframe, main video{ max-width:100%; }
.acoesHome .js-button{ max-width:100%; text-align:center; }
@media (max-width:480px){
  .acoesHome{ flex-direction:column; align-items:stretch; }
  .acoesHome .js-button{ width:100%; }
}


/* ==========================================================================
   A OFERTA, a sessão principal do site

   É aqui que a venda acontece, então ela não pode passar despercebida. O
   bloco ocupa a largura toda, o fundo é preto de ponta a ponta, o prazo
   sai em amarelo e em corpo grande, e cada entrega vem com o seu desenho.
   Nada de degradê, brilho ou sombra colorida: é o mesmo preto, amarelo e
   branco do resto do site, só que no volume certo.
   ========================================================================== */
#ofertaPrazo{
  background:#000; width:100%; margin:0;
  padding:92px 20px 86px; box-sizing:border-box;
  position:relative; overflow:hidden;
}
/* faixa amarela fina em cima e embaixo: marca o começo e o fim da oferta */
#ofertaPrazo::before,
#ofertaPrazo::after{
  content:''; position:absolute; left:0; right:0; height:6px; background:#feec34;
}
#ofertaPrazo::before{ top:0; }
#ofertaPrazo::after{ bottom:0; }

.ofertaCaixa{
  max-width:1000px; margin:0 auto; text-align:center; position:relative; z-index:1;
}

.ofertaChapeu{
  margin:0 0 38px; padding:0;
  font-family:'Ubuntu','Open Sans',system-ui,sans-serif;
  font-size:12px; font-weight:700; line-height:1;
  letter-spacing:3px; text-transform:uppercase;
}
.ofertaChapeu span{
  display:inline-block; background:#feec34; color:#000;
  padding:9px 18px; border-radius:30px;
}

.ofertaTitulo{
  font-family:'Anton', Impact, sans-serif; font-weight:400;
  font-size:74px; line-height:.94; letter-spacing:.5px;
  text-transform:uppercase; color:#fff;
  margin:0 0 30px; padding:0;
}
.ofertaTitulo em{
  display:block; font-style:normal; color:#feec34;
  font-size:1.16em; line-height:.98;
}

.ofertaFrase{
  max-width:640px; margin:0 auto 44px;
  font-family:'Ubuntu','Open Sans',system-ui,sans-serif;
  font-size:16px; line-height:1.62; color:#cfcfc4;
}

/* as cinco entregas, cada uma num cartão de traço amarelo */
.ofertaLista{
  display:-webkit-box; display:-ms-flexbox; display:flex;
  -ms-flex-wrap:wrap; flex-wrap:wrap;
  -webkit-box-pack:center; -ms-flex-pack:center; justify-content:center;
  gap:14px; margin:0 0 46px; padding:0; list-style:none;
}
.ofertaItem{
  display:-webkit-box; display:-ms-flexbox; display:flex;
  -webkit-box-orient:vertical; -webkit-box-direction:normal;
  -ms-flex-direction:column; flex-direction:column;
  -webkit-box-align:center; -ms-flex-align:center; align-items:center;
  -webkit-box-pack:center; -ms-flex-pack:center; justify-content:center;
  -webkit-box-flex:1; -ms-flex:1 1 168px; flex:1 1 168px;
  max-width:186px; min-height:132px; box-sizing:border-box;
  padding:20px 12px 18px;
  border:2px solid transparent; border-radius:14px;
  background:#131313;
  -webkit-transition:.25s ease-in; transition:.25s ease-in;
}
.ofertaItem:hover{ border-color:#feec34; -webkit-transform:translateY(-3px); transform:translateY(-3px); }
.ofertaItem__marca{
  display:-webkit-box; display:-ms-flexbox; display:flex;
  -webkit-box-align:center; -ms-flex-align:center; align-items:center;
  -webkit-box-pack:center; -ms-flex-pack:center; justify-content:center;
  width:46px; height:46px; margin-bottom:12px;
  border-radius:50%; background:#feec34; color:#000;
  -ms-flex-negative:0; flex-shrink:0;
}
.ofertaIcone{ width:24px; height:24px; display:block; }
.ofertaItem__texto{
  font-family:'Ubuntu','Open Sans',system-ui,sans-serif;
  font-size:14px; font-weight:700; line-height:1.28; color:#fff;
  text-align:center;
}

.ofertaBotoes{
  display:-webkit-box; display:-ms-flexbox; display:flex;
  -ms-flex-wrap:wrap; flex-wrap:wrap;
  -webkit-box-pack:center; -ms-flex-pack:center; justify-content:center;
  gap:14px; margin:0 0 26px;
}
.ofertaRodape{
  margin:0; font-family:'Ubuntu','Open Sans',system-ui,sans-serif;
  font-size:12.5px; line-height:1.5; color:#76766d;
}

@media (max-width:900px){
  #ofertaPrazo{ padding:70px 18px 64px; }
  .ofertaChapeu{ margin-bottom:30px; }
  .ofertaTitulo{ font-size:52px; margin-bottom:24px; }
  .ofertaFrase{ font-size:15px; margin-bottom:34px; }
  .ofertaItem{ -ms-flex:1 1 142px; flex:1 1 142px; min-height:118px; padding:16px 10px; }
  .ofertaItem__marca{ width:40px; height:40px; margin-bottom:10px; }
  .ofertaIcone{ width:21px; height:21px; }
  .ofertaItem__texto{ font-size:13px; }
}
@media (max-width:560px){
  #ofertaPrazo{ padding:56px 16px 52px; }
  .ofertaChapeu{ font-size:11px; letter-spacing:2.2px; margin-bottom:24px; }
  .ofertaTitulo{ font-size:38px; margin-bottom:20px; }
  .ofertaFrase{ font-size:14px; margin-bottom:30px; }
  .ofertaLista{ gap:10px; margin-bottom:32px; }
  .ofertaItem{
    -ms-flex:1 1 calc(50% - 5px); flex:1 1 calc(50% - 5px);
    max-width:none; min-height:112px; padding:15px 9px;
  }
  .ofertaBotoes{ -webkit-box-orient:vertical; -ms-flex-direction:column; flex-direction:column; }
  .ofertaBotoes .btn{ width:100%; }
}

/* O tema zera a margem de p, h2, ul e li em regras mais fortes que as de
   classe. Para o respiro da oferta valer mesmo, ele vem pelo id. */
#ofertaPrazo .ofertaChapeu{ margin:0 0 38px; }
#ofertaPrazo .ofertaTitulo{ margin:0 0 30px; }
#ofertaPrazo .ofertaFrase{ margin:0 auto 44px; }
#ofertaPrazo .ofertaLista{ margin:0 0 46px; padding:0; }
#ofertaPrazo .ofertaLista li{ margin:0; }
#ofertaPrazo .ofertaBotoes{ margin:0 0 26px; }
#ofertaPrazo .ofertaRodape{ margin:0; }
@media (max-width:900px){
  #ofertaPrazo .ofertaChapeu{ margin-bottom:30px; }
  #ofertaPrazo .ofertaTitulo{ margin-bottom:24px; }
  #ofertaPrazo .ofertaFrase{ margin-bottom:34px; }
  #ofertaPrazo .ofertaLista{ margin-bottom:38px; }
}
@media (max-width:560px){
  #ofertaPrazo .ofertaChapeu{ margin-bottom:24px; }
  #ofertaPrazo .ofertaTitulo{ margin-bottom:20px; }
  #ofertaPrazo .ofertaFrase{ margin-bottom:30px; }
  #ofertaPrazo .ofertaLista{ margin-bottom:32px; }
}

/* ==========================================================================
   TIPOGRAFIA
   Anton só nos títulos. O texto corrido é Ubuntu, que o tema já carrega.
   ========================================================================== */
/* A base do site é Ubuntu. Vale para tudo, inclusive para os textos que o
   Elementor montou dentro de h2 e h3 sem serem título de verdade. */
body,
body p, body li, body span, body a, body input, body textarea, body select, body button{
  font-family:'Ubuntu', 'Open Sans', system-ui, sans-serif;
}

/* Anton é SÓ para título, e só para os títulos que já eram Anton no site.
   Cada bloco do Elementor traz a sua própria regra de fonte, herdada do
   site publicado, e ela é quem manda ali dentro: não colocamos nenhuma
   regra geral em h1, h2 ou h3, senão parágrafo vira título.
   Aqui embaixo ficam só os títulos das sessões que montamos à mão. */
.tituloLinha,
.ofertaTitulo,
.depoimentos__titulo,
.elementor-portfolio-item__title,
.cartaoHome h4,
.itemPortfolio .boxTexto h4{
  font-family:'Anton', Impact, sans-serif; font-weight:400;
}


/* ==========================================================================
   MOBILE
   O tema reduz a fonte base em telas pequenas; estas regras garantem que
   nada fique estreito demais, apertado ou fora da janela no celular.
   ========================================================================== */

/* portfólio: a imagem nunca passa da coluna */
.elementor-portfolio, .elementor-posts-container{ max-width:100%; }
.elementor-portfolio-item,
.elementor-portfolio-item__img,
.elementor-post__thumbnail__link{ max-width:100%; box-sizing:border-box; }
.elementor-portfolio-item img{ max-width:100%; height:auto; }

@media (max-width:900px){
  /* os dois blocos em coluna viram um embaixo do outro, com respiro */
  .duasColunas .js-container{ display:block; }
  .duasColunas .esquerda,
  .duasColunas .direita{ width:100%; padding-right:0; padding-left:0; }
  .duasColunas .direita{ margin-top:2em; }
  #homeAmarelo .direita{ padding-left:0; padding-right:0; }
  #homePreto .esquerda, #homePreto .direita{ width:100%; }

  .js-section{ padding-left:10px; padding-right:10px; }
  .galeriaPrimaria img{ width:100%; height:auto; }
}

@media (max-width:640px){
  /* a barra do topo encolhe junto com o menu */
  .containerMenuBg #barraMenu{ height:76px; }
  #logoGarnizePropaganda{ max-height:38px; width:auto; }

  /* títulos não podem estourar a linha */
  .tituloLinha{ font-size:2.8em; padding:.6em 0; }
  .duasColunas h2{ word-break:break-word; }

  /* galeria do projeto em coluna única, sem sobra */
  .galeriaSecundaria .itemGaleria.js-third{ width:100%; }
  .galeriaPrimaria img{ margin-bottom:6px; }

  /* emulador do site do cliente cabe na tela */
  #containerSite iframe{ max-width:100%; }
  #navegacao{ display:flex; flex-wrap:wrap; justify-content:center; gap:6px; padding:0 10px 24px; }
  .botaoNavegacao{ margin:0; padding:10px 14px; }
  .botaoNavegacao i{ font-size:22px; }
  .botaoNavegacao span{ font-size:14px; }

  /* artigos: um por linha */
  .containerPosts .coluna{ width:100%; }

  /* o botão do WhatsApp não pode cobrir o botão de voltar */
  #whatsapp-button{ width:52px; height:52px; padding:0; display:flex; align-items:center; justify-content:center; }
  #whatsapp-button svg{ width:30px; height:30px; }
}

/* alvo de toque mínimo em tudo que é clicável */
@media (max-width:900px){
  .js-button, .botaoNavegacao, .filtrosPortfolio li, .tvp-abrir{ min-height:44px; display:inline-flex; align-items:center; justify-content:center; }
}

/* corpo do artigo: o tema deixa o h4 pequeno demais entre 640 e 900 */
@media (max-width:900px){
  .js-container h4{ font-size:2.2em; line-height:1.6; }
}

/* o mosaico usa a mesma margem lateral do resto do site */
.mosaicoManifesto{ max-width:1140px; margin:0 auto; padding:0 20px 3em; }
@media (max-width:640px){ .mosaicoManifesto{ padding:0 12px 2em; } }

/* o título da oferta em branco e os dois botões centralizados juntos */
#ofertaPrazo .ofertaTitulo,
#ofertaPrazo .ofertaTitulo *{ color:#fff; }
#ofertaPrazo .ofertaTitulo em{ color:#feec34; }
#ofertaPrazo .ofertaBotoes .js-button{ flex:0 0 auto; margin:0; min-width:0; }

/* ==========================================================================
   PLAYER DO SITE
   Antes do clique não existe iframe na página, então nada do YouTube
   aparece: nem logo, nem título, nem foto do canal.
   ========================================================================== */
.quadroVideo > video.videoArquivo{
  position:absolute; top:0; right:0; bottom:0; left:0; width:100%; height:100%;
  -o-object-fit:cover; object-fit:cover; display:block; background:#000;
}


/* o alvo vazio não pode ficar por cima do botão de tocar */
.quadroVideo .alvoVideo{ z-index:1; }
.quadroVideo .alvoVideo:empty{ pointer-events:none; }
.quadroVideo > img.capaVideo{ z-index:2; }
.quadroVideo .tocarVideo{ z-index:3; }
.quadroVideo.tocando .alvoVideo{ z-index:4; }

/* vídeo dentro da interna de projeto */
.videoProjeto .quadroVideo{ max-width:1140px; margin:0 auto; }


/* ==========================================================================
   MENU EM TELA CHEIA
   Proporção menor e um separador fino entre as opções.
   ========================================================================== */
#containerMenuAberto{
  font-size:1em;
  padding:2vh 20px;
  gap:0;
}
#containerMenuAberto a{
  font-size:26px; line-height:1.1;
  padding:18px 30px;
  width:100%; max-width:520px;
  text-align:center;
  border-bottom:1px solid #2b2b2b;
}
#containerMenuAberto a:first-child{ border-top:1px solid #2b2b2b; }
#containerMenuAberto a:hover{ color:#fff; background:#0d0d0d; }

@media (max-width:900px){
  #containerMenuAberto a{ font-size:22px; padding:15px 20px; max-width:420px; }
}
@media (max-width:560px){
  #containerMenuAberto a{ font-size:18px; padding:13px 16px; }
}
/* telas baixas: o menu rola em vez de espremer */
@media (max-height:640px){
  #containerMenuAberto{ justify-content:flex-start; overflow-y:auto; }
  #containerMenuAberto a{ font-size:17px; padding:11px 16px; }
}

/* o mesmo tratamento no menu das ferramentas */
.tvp-painel a{ width:100%; max-width:520px; text-align:center;
  font-size:26px; padding:18px 30px; border-bottom:1px solid #2b2b2b; }
.tvp-painel a:first-child{ border-top:1px solid #2b2b2b; }
@media (max-width:560px){ .tvp-painel a{ font-size:18px; padding:13px 16px; } }

/* o player ocupa a largura do bloco onde está, inclusive dentro dos
   contêineres antigos que vinham com largura mínima */
/* dentro dos contêineres antigos o player acompanha a largura do bloco,
   sem forçar nada no desktop */
.e-con > .quadroVideo{ width:100%; }

/* o bloco que contém um player nunca fica estreito demais */
/* só no celular o bloco que contém um player abre a largura toda */
@media (max-width:900px){
  .e-con-inner{ flex-wrap:wrap; }
  .comVideo{ min-width:0; flex:1 1 100%; }
}

/* ==========================================================================
   REVELAR O QUE ESTAVA ESCONDIDO
   O tema do WordPress deixava vários blocos com "visibility:hidden" à espera
   do script do Elementor, que não existe mais aqui. Sem ele, botões e textos
   simplesmente sumiam e ficava aquele buraco branco no meio da sessão.
   Agora o padrão é APARECER. A animação só entra quando o navegador tem
   como fazê-la; se não tiver, o conteúdo continua na tela do mesmo jeito.
   ========================================================================== */
.elementor-invisible{ visibility:visible !important; }

.revelar{
  opacity:0;
  -webkit-transform:translate3d(0,-16px,0);
          transform:translate3d(0,-16px,0);
  -webkit-transition:opacity .5s ease-out, -webkit-transform .5s ease-out;
          transition:opacity .5s ease-out, transform .5s ease-out;
  will-change:opacity, transform;
}
.revelar.aparece{
  opacity:1;
  -webkit-transform:none;
          transform:none;
}
@media (prefers-reduced-motion: reduce){
  .revelar, .revelar.aparece{
    opacity:1; -webkit-transform:none; transform:none; transition:none;
  }
}

/* ==========================================================================
   O BOTÃO DO SITE

   São dois desenhos, e só dois:

   PRINCIPAL   amarelo cheio, letra preta, seta. É o botão de sempre; o que
               muda de uma sessão para a outra é apenas o texto.

   SECUNDÁRIO  vazado, só traço e letra. Amarelo quando o fundo é escuro,
               preto quando o fundo é claro. Só aparece quando há dois
               botões juntos, para o olho saber qual é o caminho principal.

   Traço preto em botão amarelo não existe. Contorno é do secundário, e do
   passar do mouse.
   ========================================================================== */
.btn{
  display:-webkit-inline-box; display:-ms-inline-flexbox; display:inline-flex;
  -webkit-box-align:center; -ms-flex-align:center; align-items:center;
  -webkit-box-pack:center; -ms-flex-pack:center; justify-content:center;
  max-width:100%; box-sizing:border-box;
  font-family:'Ubuntu','Open Sans',system-ui,sans-serif;
  font-weight:700; font-size:16px; line-height:1.15; letter-spacing:.2px;
  text-decoration:none;
  padding:16px 32px; min-height:52px;
  border:3px solid transparent; border-radius:40px;
  -webkit-transition:.25s ease-in; transition:.25s ease-in;
}
.btn__texto{ display:inline-block; }
.btn__seta{
  display:inline-block; width:9px; height:9px; margin-left:13px;
  border-top:3px solid currentColor; border-right:3px solid currentColor;
  -webkit-transform:rotate(45deg); transform:rotate(45deg);
  -webkit-transition:.25s ease-in; transition:.25s ease-in;
}
.btn:hover .btn__seta,
.btn:focus .btn__seta{
  -webkit-transform:translateX(5px) rotate(45deg);
          transform:translateX(5px) rotate(45deg);
}

/* PRINCIPAL, por padrão só o traço preto, sem preenchimento. O amarelo
   entra no passar do mouse. É o que mantém a página leve: amarelo demais
   parado na tela cansa e tira a força de quando ele realmente aparece. */
.btn--principal,
.btn--principal .btn__texto{ background:transparent; color:#000; }
.btn--principal{ border-color:#000; }
.btn--principal:hover,
.btn--principal:focus{ background:#feec34; border-color:#feec34; }
.btn--principal:hover, .btn--principal:hover .btn__texto,
.btn--principal:focus, .btn--principal:focus .btn__texto{ color:#000; }

/* SECUNDÁRIO, o mesmo desenho, em tom mais baixo: traço fino e cinza,
   para o olho saber de cara qual dos dois é o caminho principal. */
.btn--secundario,
.btn--secundario .btn__texto{ background:transparent; color:#b6b6ae; }
.btn--secundario{ border-color:#3a3a34; border-width:2px; }
.btn--secundario:hover,
.btn--secundario:focus{ border-color:#feec34; background:transparent; }
.btn--secundario:hover, .btn--secundario:hover .btn__texto,
.btn--secundario:focus, .btn--secundario:focus .btn__texto{ color:#feec34; }

.btn--secundarioClaro,
.btn--secundarioClaro .btn__texto{ background:transparent; color:#5f5f57; }
.btn--secundarioClaro{ border-color:#d8d8d2; border-width:2px; }
.btn--secundarioClaro:hover,
.btn--secundarioClaro:focus{ border-color:#000; background:transparent; }
.btn--secundarioClaro:hover, .btn--secundarioClaro:hover .btn__texto,
.btn--secundarioClaro:focus, .btn--secundarioClaro:focus .btn__texto{ color:#000; }

/* SOBRE FUNDO ESCURO o traço preto sumiria: nessas sessões ele vira branco,
   e o amarelo continua sendo a resposta ao passar do mouse. */
.hero .btn--principal, .hero .btn--principal .btn__texto,
#ofertaPrazo .btn--principal, #ofertaPrazo .btn--principal .btn__texto,
.chamadaVideo .btn--principal, .chamadaVideo .btn--principal .btn__texto,
.artigoFecho .btn--principal, .artigoFecho .btn--principal .btn__texto,
.rodape .btn--principal, .rodape .btn--principal .btn__texto{ color:#fff; }
.hero .btn--principal,
#ofertaPrazo .btn--principal,
.chamadaVideo .btn--principal,
.artigoFecho .btn--principal,
.rodape .btn--principal{ border-color:#fff; }

.hero .btn--principal:hover, .hero .btn--principal:focus,
#ofertaPrazo .btn--principal:hover, #ofertaPrazo .btn--principal:focus,
.chamadaVideo .btn--principal:hover, .chamadaVideo .btn--principal:focus,
.artigoFecho .btn--principal:hover, .artigoFecho .btn--principal:focus,
.rodape .btn--principal:hover, .rodape .btn--principal:focus{
  background:#feec34; border-color:#feec34;
}
.hero .btn--principal:hover, .hero .btn--principal:hover .btn__texto,
.hero .btn--principal:focus, .hero .btn--principal:focus .btn__texto,
#ofertaPrazo .btn--principal:hover, #ofertaPrazo .btn--principal:hover .btn__texto,
#ofertaPrazo .btn--principal:focus, #ofertaPrazo .btn--principal:focus .btn__texto,
.chamadaVideo .btn--principal:hover, .chamadaVideo .btn--principal:hover .btn__texto,
.chamadaVideo .btn--principal:focus, .chamadaVideo .btn--principal:focus .btn__texto,
.artigoFecho .btn--principal:hover, .artigoFecho .btn--principal:hover .btn__texto,
.artigoFecho .btn--principal:focus, .artigoFecho .btn--principal:focus .btn__texto{ color:#000; }

@media (max-width:768px){
  .btn{ font-size:14.5px; padding:14px 24px; min-height:48px; }
}

/* ==========================================================================
   A CHAMADA QUE FECHA CADA FALA
   O botão fica dentro do banner preto, embaixo do título, um só por sessão.
   ========================================================================== */
.chamadaVideo{
  display:block; width:100%; margin:22px 0 0; padding:0; box-sizing:border-box;
}
.e-con .chamadaVideo{ text-align:center; }
@media (max-width:768px){
  .chamadaVideo{ margin-top:18px; }
  .chamadaVideo .btn{ width:100%; max-width:340px; }
}

/* ==========================================================================
   DEPOIMENTOS
   Todo depoimento é gravado em 9x16, então o quadro é em pé e nunca corta.
   Embaixo de cada um fica o nome de quem falou e o caminho para a marca.
   São seis clientes reais; a faixa rola de lado no celular, do jeito que a
   pessoa já está acostumada a ver vídeo em pé.
   ========================================================================== */
.depoimentos{
  background:#fff; color:#000;
  padding:56px 0 60px; margin:0; width:100%; box-sizing:border-box;
}
.depoimentos__cab{
  max-width:760px; margin:0 auto 30px; padding:0 20px; text-align:center;
}
.depoimentos__titulo{
  font-family:'Anton', Impact, sans-serif; font-weight:400;
  text-transform:uppercase; letter-spacing:.5px;
  font-size:34px; line-height:1.05; color:#000; margin:0 0 12px;
}
.depoimentos__nota{
  font-family:'Ubuntu','Open Sans',system-ui,sans-serif;
  font-size:14px; line-height:1.6; color:#4a4a44; margin:0;
}

.depoimentos__faixa{
  display:-webkit-box; display:-ms-flexbox; display:flex;
  -ms-flex-wrap:wrap; flex-wrap:wrap;
  -webkit-box-pack:center; -ms-flex-pack:center; justify-content:center;
  -webkit-box-align:start; -ms-flex-align:start; align-items:flex-start;
  max-width:1180px; margin:0 auto; padding:0 14px; box-sizing:border-box;
}
.depoimento{
  -webkit-box-flex:0; -ms-flex:0 0 auto; flex:0 0 auto;
  width:16.6666%; min-width:150px; max-width:210px;
  margin:0; padding:0 6px 20px; box-sizing:border-box;
}
.depoimento .quadroVideo{ border-radius:10px; }
.depoimento .tocarVideo span{ width:52px; height:52px; }
.depoimento .tocarVideo span::before{
  border-left-width:14px; border-top-width:9px; border-bottom-width:9px; margin-left:4px;
}
.depoimento__pe{
  display:block; text-align:center; padding:11px 0 0;
  font-family:'Ubuntu','Open Sans',system-ui,sans-serif;
}
.depoimento__pessoa{
  display:block; font-size:13px; font-weight:700; color:#000;
  line-height:1.2; margin-bottom:2px;
}
.depoimento__nome{
  display:block; font-size:13px; font-weight:700; color:#000;
  line-height:1.25; margin-bottom:9px;
}
.depoimento__marca{
  display:block; text-decoration:none;
  font-size:12px; font-weight:700; line-height:1.25;
  color:#000; background:transparent;
  border:2px solid #000; border-radius:30px;
  padding:9px 10px; min-height:40px; box-sizing:border-box;
  -webkit-transition:.2s ease-in; transition:.2s ease-in;
}
.depoimento__marca:hover,
.depoimento__marca:focus{ background:#feec34; color:#000; border-color:#feec34; }

/* telas médias: três por linha, ainda confortável */
@media (max-width:980px){
  .depoimento{ width:33.3333%; max-width:none; }
}
/* celular: a faixa rola de lado, dois vídeos e meio à vista */
@media (max-width:640px){
  .depoimentos{ padding:40px 0 44px; }
  .depoimentos__titulo{ font-size:26px; }
  .depoimentos__nota{ font-size:13px; }
  .depoimentos__faixa{
    -ms-flex-wrap:nowrap; flex-wrap:nowrap;
    -webkit-box-pack:start; -ms-flex-pack:start; justify-content:flex-start;
    overflow-x:auto; overflow-y:hidden;
    -webkit-overflow-scrolling:touch;
    scroll-snap-type:x mandatory;
    padding:0 14px 6px;
  }
  .depoimentos__faixa::-webkit-scrollbar{ height:4px; }
  .depoimentos__faixa::-webkit-scrollbar-thumb{ background:#2b2b2b; border-radius:4px; }
  .depoimento{
    width:44%; min-width:146px; max-width:200px;
    scroll-snap-align:center;
  }
  .depoimento .tocarVideo span{ width:44px; height:44px; }
}

/* respiro embaixo da chamada, para o próximo bloco não encostar */
.chamadaVideo{ margin-bottom:34px; }
@media (max-width:768px){ .chamadaVideo{ margin-bottom:26px; } }

/* ==========================================================================
   NAVEGADORES ANTIGOS E O NAVEGADOR DE DENTRO DO INSTAGRAM

   Quem clica no link da bio não abre o Chrome nem o Safari: abre uma janela
   de navegador embutida no próprio aplicativo, quase sempre mais atrasada
   que o navegador do celular. As regras abaixo existem só para esse caso.
   Em navegador atual nada disso muda o desenho.
   ========================================================================== */

/* o iOS aumenta a letra sozinho ao virar o aparelho; isso impede */
html{
  -webkit-text-size-adjust:100%;
     -moz-text-size-adjust:100%;
          text-size-adjust:100%;
}

/* nada pode empurrar a página para o lado */
html, body{ max-width:100%; overflow-x:hidden; }
img, video, iframe, svg, table{ max-width:100%; }

/* o toque não pinta um retângulo cinza por cima do botão */
a, button, .tocarVideo, .chamadaVideo__link{
  -webkit-tap-highlight-color:rgba(0,0,0,0);
}

/* área de toque confortável: nada de alvo menor que o dedo */
.chamadaVideo__link, .tocarVideo, .filtrosPortfolio li, #containerMenuAberto a{
  min-height:44px;
}

/* o "gap" do flex só existe no Safari 14.1 em diante. Onde não existir,
   a distância volta a ser feita com margem, que funciona em tudo. */
@supports not (row-gap: 1px){
  .depoimentos > .e-con-inner{ margin-left:-5px; margin-right:-5px; }
  .depoimentos__par{ padding:0 5px; }
  .depoimentos__par > .quadroVideo + .quadroVideo{ margin-left:10px; }
  .mosaicoLinha > .quadroVideo + .quadroVideo{ margin-left:14px; }
  .etiquetasProjeto > *{ margin:0 5px 10px; }
  .ofertaLista > li{ margin:0 1.2em .9em; }
  #navegacao > *{ margin:0 3px 6px; }
}

/* o teclado e a barra do aplicativo mexem na altura da janela: onde havia
   altura presa em 100vh, a conta passa a ser mínima e não fixa */
@supports (height: 100dvh){
  .alturaJanela{ min-height:100dvh; height:auto; }
}

/* iOS antigo abria vídeo em tela cheia sozinho; o atributo já cuida disso
   no HTML, e aqui garantimos que o quadro não perca o formato */
video::-webkit-media-controls-start-playback-button{ display:none; }

/* rolagem com inércia dentro das faixas que rolam de lado */
.rolaLado{
  -webkit-overflow-scrolling:touch;
  overflow-x:auto; overflow-y:hidden;
}

/* ==========================================================================
   RODAPÉ
   O crédito estava em 9px, pequeno demais para ler no celular. Sobe para um
   tamanho fixo e legível, sem virar destaque.
   ========================================================================== */
.copyright, .copyright .credit-link, .copyright a{
  font-family:'Ubuntu','Open Sans',system-ui,sans-serif;
  font-size:12.5px; line-height:1.65;
}
.copyright a{ text-decoration:underline; text-underline-offset:2px; }
@media (max-width:560px){
  .copyright, .copyright .credit-link, .copyright a{ font-size:12px; }
}

/* ==========================================================================
   PISO DE LEGIBILIDADE
   O tema calcula a fonte a partir da largura da janela. Em telas de 800 a
   1100px a conta derrubava o texto de leitura para 9 e 10 pixels, que é
   pequeno demais para ler. Aqui o texto corrido ganha um piso: nunca menor
   que 14px no computador e 13px no celular. O desenho continua o mesmo,
   só o texto de ler é que não encolhe abaixo do confortável.
   ========================================================================== */
.itemBlog .boxTexto p,
.artigoTexto p, .artigoTexto li,
.duasColunas .direita h4,
.js-container > h4{
  font-size:14px; line-height:1.68;
}
@media (min-width:1200px){
  .itemBlog .boxTexto p,
  .artigoTexto p, .artigoTexto li,
  .duasColunas .direita h4,
  .js-container > h4{ font-size:15px; }
}
@media (max-width:560px){
  .itemBlog .boxTexto p,
  .artigoTexto p, .artigoTexto li,
  .duasColunas .direita h4,
  .js-container > h4{ font-size:13.5px; line-height:1.62; }
}

/* ==========================================================================
   PORTFÓLIO NO CELULAR
   O nome do projeto só aparecia ao passar o mouse. No celular não existe
   passar o mouse, então a lista virava um monte de imagem sem nome. Em
   aparelho de toque o nome fica sempre à vista, sobre um degradê escuro
   na base da imagem, e o toque leva direto para o projeto.
   ========================================================================== */
@media (hover: none), (pointer: coarse), (max-width: 900px){
  .elementor-portfolio-item__overlay{
    opacity:1 !important;
    background:-webkit-linear-gradient(top, rgba(0,0,0,0) 48%, rgba(0,0,0,.78) 100%);
    background:linear-gradient(to bottom, rgba(0,0,0,0) 48%, rgba(0,0,0,.78) 100%);
    /* a caixa é em coluna: "pack" desce o conteúdo, "align" o joga à esquerda */
    -webkit-box-orient:vertical; -webkit-box-direction:normal;
    -ms-flex-direction:column; flex-direction:column;
    -webkit-box-pack:end; -ms-flex-pack:end; justify-content:flex-end;
    -webkit-box-align:start; -ms-flex-align:start; align-items:flex-start;
    padding:14px 15px;
  }
  .elementor-portfolio-item__title{
    font-size:17px !important; line-height:1.18; color:#fff;
    text-align:left; margin:0;
    text-shadow:0 1px 3px rgba(0,0,0,.6);
  }
  /* o mesmo vale para o cartão do tema, que também escondia o texto */
  .itemPortfolio .boxTexto{ opacity:1; }
}

/* ==========================================================================
   OS BANNERS PRETOS DA HOME
   Cada banner é uma fala: título à esquerda, vídeo à direita e um botão só,
   dentro do próprio banner. A coluna do texto estava estreita e o título
   quebrava uma palavra por linha. Aqui ela ganha largura, o banner ganha
   altura e o título passa a caber em três ou quatro linhas, como deve ser.
   ========================================================================== */
.e-con-full.e-flex.e-con.e-child > .e-con-full:first-child{ min-width:0; }

/* a coluna do texto do banner */
.e-con[data-settings*="classic"] > .e-con-full:first-child{ min-width:0; }

/* altura confortável: o banner acompanha o vídeo, nunca aperta o título */
.comVideo{ width:100%; }

/* O banner do registro tinha a coluna de texto estreita e o título quebrava
   uma palavra por linha. Aqui a coluna volta a ter metade do banner, como
   nas outras falas, e o título passa a ocupar a largura toda dela. */
@media (min-width:901px){
  .elementor-element.elementor-element-d6d4a0e{
    width:56%; min-width:56%; -ms-flex:0 0 56%; flex:0 0 56%;
  }
  .elementor-element.elementor-element-1cfff5b{ padding-left:34px; padding-right:24px; }
  .elementor-element-1cfff5b .elementor-heading-title{ width:100%; display:block; }
}
@media (max-width:900px){
  .elementor-element.elementor-element-d6d4a0e{ width:100%; min-width:0; }
  .elementor-element.elementor-element-1cfff5b{ padding-left:18px; padding-right:18px; }
}

/* ==========================================================================
   SUA MARCA COMPLETA
   As duas listas de antes viraram uma só. Fundo branco, cartões claros de
   traço fino, ícone amarelo e o selo em amarelo no pé. Leve de propósito:
   quem carrega o peso visual da página é o banner preto e a oferta.
   ========================================================================== */
.marcaCompleta{
  background:#fff; width:100%; margin:0;
  padding:74px 20px 78px; box-sizing:border-box;
}
.marcaCompleta__interno{ max-width:1140px; margin:0 auto; }
.marcaCompleta__titulo{
  font-family:'Anton', Impact, sans-serif; font-weight:400;
  font-size:40px; line-height:1.06; letter-spacing:.4px;
  text-transform:uppercase; color:#000;
  text-align:center; margin:0 0 42px;
}
.marcaCompleta__titulo em{
  font-style:normal; display:inline-block;
  background:#feec34; padding:2px 12px 4px; border-radius:4px;
}

.marcaCompleta__grade{
  display:-webkit-box; display:-ms-flexbox; display:flex;
  -ms-flex-wrap:wrap; flex-wrap:wrap;
  -webkit-box-pack:center; -ms-flex-pack:center; justify-content:center;
  margin:0 -9px;
}
/* a última linha, quando tem menos itens, fica centrada com as de cima */
.entregaCartao{ -webkit-box-flex:0; -ms-flex:0 0 25%; flex:0 0 25%; max-width:25%; }
.entregaCartao{
  -webkit-box-flex:1; -ms-flex:1 1 25%; flex:1 1 25%;
  max-width:25%; min-width:0;
  padding:0 9px 18px; box-sizing:border-box; margin:0;
}
.entregaCartao > *{ margin:0; }
.entregaCartao{
  display:-webkit-box; display:-ms-flexbox; display:flex;
  -webkit-box-orient:vertical; -webkit-box-direction:normal;
  -ms-flex-direction:column; flex-direction:column;
}
.entregaCartao__marca{
  display:-webkit-box; display:-ms-flexbox; display:inline-flex;
  -webkit-box-align:center; -ms-flex-align:center; align-items:center;
  -webkit-box-pack:center; -ms-flex-pack:center; justify-content:center;
  width:44px; height:44px; margin:0 0 14px;
  border-radius:50%; background:#feec34; color:#000; -ms-flex-negative:0; flex-shrink:0;
}
.entregaCartao__titulo{
  font-family:'Anton', Impact, sans-serif; font-weight:400;
  font-size:19px; line-height:1.1; letter-spacing:.6px;
  text-transform:uppercase; color:#000; margin:0 0 9px;
}
.entregaCartao__texto{
  font-family:'Ubuntu','Open Sans',system-ui,sans-serif;
  font-size:14px; line-height:1.58; color:#55554e; margin:0 0 12px;
}
.entregaCartao__selo{
  font-family:'Ubuntu','Open Sans',system-ui,sans-serif;
  font-size:11.5px; font-weight:700; line-height:1;
  letter-spacing:1.2px; text-transform:uppercase; color:#000;
  margin:auto 0 0; padding:7px 0 0; border-top:2px solid #feec34;
  display:inline-block; align-self:flex-start;
}

@media (max-width:980px){
  .marcaCompleta{ padding:58px 18px 60px; }
  .marcaCompleta__titulo{ font-size:31px; margin-bottom:32px; }
  .entregaCartao{ -ms-flex:1 1 50%; flex:1 1 50%; max-width:50%; }
}
@media (max-width:560px){
  .marcaCompleta{ padding:46px 16px 48px; }
  .marcaCompleta__titulo{ font-size:25px; margin-bottom:26px; }
  .marcaCompleta__grade{ margin:0 -7px; }
  .entregaCartao{ -ms-flex:1 1 100%; flex:1 1 100%; max-width:100%; padding:0 7px 20px; }
  .entregaCartao__marca{ width:40px; height:40px; margin-bottom:11px; }
}

/* ==========================================================================
   SEM TRAÇO PRETO EM BOTÃO

   O tema do WordPress desenhava todo botão com um contorno preto de 3px.
   Isso deixava a página dura e vinha até no botão de tocar o vídeo, onde
   ninguém pediu contorno nenhum. Aqui o traço sai: o botão do site é o
   amarelo cheio, e contorno só existe no secundário e no passar do mouse.
   ========================================================================== */
/* o tema aplica o traço por "body.elementor-kit-1553 button", que é uma
   regra mais forte que a classe sozinha; por isso as regras abaixo levam o
   nome do corpo da página junto, senão o preto volta */
.elementor-kit-1553 .tocarVideo,
.tocarVideo{ border:0 !important; }

/* os botões que ainda vêm do tema passam a usar o desenho do site */
.elementor-kit-1553 .elementor-button,
.elementor-button{
  border:3px solid #000; border-radius:40px;
  background-color:transparent; color:#000; fill:#000;
  font-family:'Ubuntu','Open Sans',system-ui,sans-serif;
  font-size:15px; font-weight:700; line-height:1; letter-spacing:.2px;
  padding:16px 30px; min-height:52px;
  display:-webkit-inline-box; display:-ms-inline-flexbox; display:inline-flex;
  -webkit-box-align:center; -ms-flex-align:center; align-items:center;
  -webkit-box-pack:center; -ms-flex-pack:center; justify-content:center;
  -webkit-transition:.25s ease-in; transition:.25s ease-in;
}
/* o texto herda a cor do botão: assim funciona tanto no botão amarelo
   quanto naquele que alguma sessão pintou de preto */
.elementor-kit-1553 .elementor-button{ color:#000; }
.elementor-kit-1553 .elementor-button .elementor-button-text,
.elementor-kit-1553 .elementor-button .elementor-button-content-wrapper{ color:inherit; }
.elementor-kit-1553 .elementor-button:hover,
.elementor-kit-1553 .elementor-button:focus{ background-color:#000; border-color:#000; border-radius:40px; }
.elementor-kit-1553 .elementor-button:hover,
.elementor-kit-1553 .elementor-button:focus{ color:#feec34; fill:#feec34; }
.elementor-kit-1553 .elementor-button:hover svg path,
.elementor-kit-1553 .elementor-button:focus svg path{ fill:#feec34; }

/* sobre fundo preto o botão do tema é o secundário: só o traço amarelo */
.elementor-element[data-settings*="background"] .elementor-button.botaoContorno,
.botaoContorno{
  background-color:transparent; color:#feec34; border-color:#feec34;
}

/* O Elementor guardava a cor de cada botão numa regra presa ao número do
   elemento, mais forte que qualquer classe. Sem isso, o botão do topo ficava
   branco no branco. Aqui o amarelo do site vence em todos eles. */
.elementor-1566 .elementor-element .elementor-button,
.elementor-5038 .elementor-element .elementor-button,
.elementor-kit-1553 .elementor-button{
  background-color:transparent; color:#000; fill:#000; border-color:#000;
}
.elementor-1566 .elementor-element .elementor-button:hover,
.elementor-1566 .elementor-element .elementor-button:focus,
.elementor-5038 .elementor-element .elementor-button:hover,
.elementor-5038 .elementor-element .elementor-button:focus{
  background-color:#000; color:#feec34; fill:#feec34; border-color:#000;
}

/* No topo há dois botões: "Solicitar proposta" é o principal e "Portfólio"
   é o secundário. Como o fundo ali é claro, o secundário é o de traço preto.
   A regra precisa do número do elemento porque o Elementor guardava a cor
   dele nesse nível. */
.elementor-1566 .elementor-element.elementor-element-0e0dd06 .elementor-button{
  background-color:transparent; color:#000; fill:#000;
  border:3px solid #000; border-radius:40px;
}
.elementor-1566 .elementor-element.elementor-element-0e0dd06 .elementor-button:hover,
.elementor-1566 .elementor-element.elementor-element-0e0dd06 .elementor-button:focus{
  background-color:#000; color:#feec34; fill:#feec34; border-color:#000;
}
.elementor-1566 .elementor-element.elementor-element-0e0dd06 .elementor-button:hover svg path,
.elementor-1566 .elementor-element.elementor-element-0e0dd06 .elementor-button:focus svg path{ fill:#feec34; }

/* ==========================================================================
   RODAPÉ

   Quatro colunas no computador, uma embaixo da outra no celular: a marca,
   as páginas do site, o contato e onde ficamos. O endereço abre o perfil
   da agência no Google. O que não estiver preenchido no gerenciador não
   aparece, nada de coluna vazia ou dado errado no ar.
   ========================================================================== */
.rodape{
  background:#000; color:#cfcfc4; width:100%; margin:0;
  padding:56px 20px 30px; box-sizing:border-box;
  font-family:'Ubuntu','Open Sans',system-ui,sans-serif;
}
.rodape__interno{ max-width:1140px; margin:0 auto; }

.rodape__topo{
  display:-webkit-box; display:-ms-flexbox; display:flex;
  -ms-flex-wrap:wrap; flex-wrap:wrap;
  -webkit-box-pack:justify; -ms-flex-pack:justify; justify-content:space-between;
  margin:0 -14px 34px;
}
.rodape__topo > *{
  -webkit-box-flex:1; -ms-flex:1 1 190px; flex:1 1 190px;
  min-width:0; padding:0 14px 26px; box-sizing:border-box;
}
.rodape__marca{ -ms-flex:1 1 250px; flex:1 1 250px; }
.rodape__marca img{ height:52px; width:auto; display:block; margin:0 0 14px; }
.rodape__frase{
  margin:0; font-size:13.5px; line-height:1.6; color:#a8a89e; max-width:280px;
}

.rodape__cab{
  font-family:'Anton', Impact, sans-serif; font-weight:400;
  font-size:15px; line-height:1; letter-spacing:1.4px; text-transform:uppercase;
  color:#fff; margin:0 0 16px; padding:0 0 10px;
  border-bottom:2px solid #feec34; display:inline-block;
}

.rodape__menu a{
  display:block; text-decoration:none;
  font-size:13.5px; line-height:1.35; color:#a8a89e;
  padding:7px 0; min-height:0;
  -webkit-transition:.18s ease-in; transition:.18s ease-in;
}
.rodape__menu a:hover, .rodape__menu a:focus{ color:#feec34; }

/* ".elementor-kit-1553 a" pinta todo link de preto e é mais forte que a
   classe sozinha; por isso as cores do rodapé levam o nome do bloco junto */
.rodape .rodape__item,
.rodape .rodape__menu a,
.rodape .rodape__mapa{ color:#e4e4dc; }
.rodape .rodape__menu a{ color:#a8a89e; }
.rodape .rodape__mapa{ color:#feec34; }

.rodape__item{
  display:-webkit-box; display:-ms-flexbox; display:flex;
  -webkit-box-align:start; -ms-flex-align:start; align-items:flex-start;
  text-decoration:none; color:#e4e4dc;
  font-size:13.5px; line-height:1.45;
  padding:8px 0; min-height:0;
  -webkit-transition:.18s ease-in; transition:.18s ease-in;
}
/* o tema pinta span de preto; aqui o texto herda a cor do link */
.rodape__item span, .rodape__menu a span, .rodape__base span{ color:inherit; }
.rodape .rodape__item:hover, .rodape .rodape__item:focus,
.rodape .rodape__menu a:hover, .rodape .rodape__menu a:focus{ color:#feec34; }
.rodape .rodape__item:hover span, .rodape .rodape__item:focus span{ color:#feec34; }
.rodape .rodape__mapa:hover{ color:#fff; }
.rodape__ico{
  -ms-flex-negative:0; flex-shrink:0;
  width:19px; height:19px; margin-right:11px;
  color:#feec34 !important;
  display:-webkit-box; display:-ms-flexbox; display:flex;
}
.rodape__ico svg{ width:19px; height:19px; display:block; }
.rodape__item--endereco span:last-child{ max-width:230px; }
.rodape__horario{ margin:10px 0 0; font-size:12.5px; line-height:1.5; color:#76766d; }
.rodape__mapa{
  display:inline-block; margin:8px 0 0 30px;
  font-size:12.5px; font-weight:700; color:#feec34; text-decoration:underline;
  text-underline-offset:3px;
}
.rodape__mapa:hover{ color:#fff; }

.rodape__base{
  border-top:1px solid #232323; padding:22px 0 0; text-align:center;
}
.rodape__base p{ margin:0; }
.rodape__empresa{ font-size:12.5px; line-height:1.6; color:#a8a89e; margin-bottom:4px !important; }
.rodape__direitos{ font-size:12.5px; line-height:1.6; color:#8f8f88; }

@media (max-width:860px){
  .rodape{ padding:44px 18px 26px; }
  .rodape__topo{
    -webkit-box-pack:start; -ms-flex-pack:start; justify-content:flex-start;
    text-align:center;
  }
  .rodape__topo > *{ -ms-flex:1 1 46%; flex:1 1 46%; }
  .rodape__marca{ -ms-flex:1 1 100%; flex:1 1 100%; }
  .rodape__marca img{ margin-left:auto; margin-right:auto; }
  .rodape__frase{ margin-left:auto; margin-right:auto; }
  .rodape__item{
    -webkit-box-pack:center; -ms-flex-pack:center; justify-content:center;
    text-align:left;
  }
  .rodape__mapa{ margin-left:0; }
  .rodape__cab{ margin-bottom:12px; }
}
@media (max-width:560px){
  .rodape__topo > *{ -ms-flex:1 1 100%; flex:1 1 100%; padding-bottom:22px; }
  .rodape__cab{ font-size:14px; }
  .rodape__menu a{ padding:9px 0; }
}

/* o antigo bloco de crédito não existe mais */
.copyright{ display:none; }

/* ==========================================================================
   O VÍDEO DENTRO DOS BANNERS

   Aqui o quadro não manda no vídeo: o vídeo é que manda no quadro. Em vez
   de prender a caixa em 16x9 e cortar o que sobra, a caixa passa a ter a
   altura do próprio vídeo. Assim nada é cortado, seja o vídeo deitado,
   quadrado ou em pé, e o banner cresce junto, com bastante folga.

   Isso vale só para os banners pretos das falas. O mosaico do manifesto e
   os depoimentos continuam com o quadro fixo, porque lá o formato é sempre
   o mesmo e o preenchimento é o certo.
   ========================================================================== */
.comVideo > .quadroVideo{
  aspect-ratio:auto;
  height:auto; min-height:0;
  background:#000; overflow:hidden;
  display:block; width:100%;
}
.comVideo > .quadroVideo::before{ display:none; }

/* o vídeo e a capa entram no fluxo: a altura deles vira a altura da caixa */
.comVideo > .quadroVideo > video.videoArquivo,
.comVideo > .quadroVideo > img.capaVideo{
  position:relative; top:auto; right:auto; bottom:auto; left:auto;
  width:100%; height:auto; max-width:100%;
  display:block; margin:0;
  -o-object-fit:contain; object-fit:contain;
}
/* quando há capa e vídeo juntos, a capa fica por cima sem empurrar nada */
.comVideo > .quadroVideo > img.capaVideo + video.videoArquivo,
.comVideo > .quadroVideo > video.videoArquivo ~ img.capaVideo{
  position:absolute; top:0; left:0; height:100%;
}
/* o player que abre no clique acompanha o quadro já formado */
.comVideo > .quadroVideo .alvoVideo,
.comVideo > .quadroVideo .alvoVideo iframe{
  position:absolute; top:0; right:0; bottom:0; left:0;
  width:100%; height:100%;
}
/* enquanto o vídeo não carrega, o quadro guarda um lugar generoso.
   Assim que o navegador sabe o tamanho real, essa reserva sai e a altura
   passa a ser a do próprio vídeo. */
.comVideo > .quadroVideo:not(.carregado){ min-height:420px; }
@media (max-width:1100px){
  .comVideo > .quadroVideo:not(.carregado){ min-height:320px; }
}
@media (max-width:900px){
  .comVideo > .quadroVideo:not(.carregado){ min-height:230px; }
}

/* os banners pretos ganham folga: o título respira e o vídeo cabe inteiro */
@media (min-width:901px){
  .elementor-element.elementor-element-b743ed7,
  .elementor-element.elementor-element-13dfb1d,
  .elementor-element.elementor-element-bcc163a,
  .elementor-element.elementor-element-87253e2{ min-height:0; }
  .e-con > .e-con-inner > .e-con[data-settings*="classic"]{ padding-top:8px; padding-bottom:8px; }
}

/* a coluna do vídeo ocupa a metade do banner em todas as falas */
@media (min-width:901px){
  .e-con-full > .comVideo,
  .comVideo > .comVideo{ width:100%; }
  .comVideo{ min-width:0; }
}

/* o botão das tabelas de preço dos livros segue o mesmo desenho */
.elementor-kit-1553 .elementor-price-table__button,
.elementor-price-table__button{
  background-color:transparent; color:#000; fill:#000;
  border:3px solid #000; border-radius:40px;
  font-family:'Ubuntu','Open Sans',system-ui,sans-serif;
  font-size:15px; font-weight:700; line-height:1; letter-spacing:.2px;
  padding:16px 30px; min-height:52px;
  display:-webkit-inline-box; display:-ms-inline-flexbox; display:inline-flex;
  -webkit-box-align:center; -ms-flex-align:center; align-items:center;
  -webkit-box-pack:center; -ms-flex-pack:center; justify-content:center;
  -webkit-transition:.25s ease-in; transition:.25s ease-in;
}
.elementor-kit-1553 .elementor-price-table__button span,
.elementor-price-table__button span{ color:inherit; }
.elementor-kit-1553 .elementor-price-table__button:hover,
.elementor-price-table__button:hover{ background-color:#feec34; border-color:#feec34; }
.elementor-kit-1553 .elementor-price-table__button:hover,
.elementor-kit-1553 .elementor-price-table__button:hover span,
.elementor-price-table__button:hover,
.elementor-price-table__button:hover span{ color:#feec34; }

/* ==========================================================================
   O VÍDEO NÃO DOMINA A TELA

   O quadro deixa de ser uma caixa preta grande com o vídeo perdido dentro.
   Agora o vídeo tem o tamanho dele mesmo: nunca mais largo que a coluna,
   nunca mais alto que pouco mais da metade da tela, e sempre com a
   proporção original, 16x9, 9x16 ou o que for. O quadro encolhe junto,
   então não sobra tarja preta em volta.
   ========================================================================== */
.comVideo > .quadroVideo{
  display:-webkit-box; display:-ms-flexbox; display:flex;
  -webkit-box-align:center; -ms-flex-align:center; align-items:center;
  -webkit-box-pack:center; -ms-flex-pack:center; justify-content:center;
  background:transparent;
}
.comVideo > .quadroVideo > video.videoArquivo,
.comVideo > .quadroVideo > img.capaVideo{
  width:auto; max-width:100%;
  height:auto; max-height:56vh;
  margin:0 auto;
  -o-object-fit:contain; object-fit:contain;
}
/* o mesmo vale para os vídeos soltos das páginas dos livros */
.e-con > .quadroVideo,
.elementor-widget-container > .quadroVideo{
  display:-webkit-box; display:-ms-flexbox; display:flex;
  -webkit-box-align:center; -ms-flex-align:center; align-items:center;
  -webkit-box-pack:center; -ms-flex-pack:center; justify-content:center;
  background:transparent; aspect-ratio:auto; height:auto; min-height:0;
}
.e-con > .quadroVideo::before,
.elementor-widget-container > .quadroVideo::before{ display:none; }
.e-con > .quadroVideo > video.videoArquivo,
.e-con > .quadroVideo > img.capaVideo,
.elementor-widget-container > .quadroVideo > video.videoArquivo,
.elementor-widget-container > .quadroVideo > img.capaVideo{
  position:relative; top:auto; left:auto;
  width:auto; max-width:100%; height:auto; max-height:56vh; margin:0 auto;
  -o-object-fit:contain; object-fit:contain;
}
@media (max-width:900px){
  .comVideo > .quadroVideo > video.videoArquivo,
  .comVideo > .quadroVideo > img.capaVideo,
  .e-con > .quadroVideo > video.videoArquivo,
  .e-con > .quadroVideo > img.capaVideo{ max-height:48vh; }
  .comVideo > .quadroVideo:not(.carregado),
  .e-con > .quadroVideo:not(.carregado){ min-height:200px; }
}

/* ==========================================================================
   CELULAR: O TEXTO VEM ANTES DO VÍDEO

   Em tela pequena o banner deixa de ser duas colunas espremidas e passa a
   ser uma coluna só: primeiro o título e o botão, depois o vídeo, na
   largura inteira. É a ordem de quem lê no celular, entende do que se
   trata e só então assiste.
   ========================================================================== */
@media (max-width:900px){
  .elementor-element.elementor-element-b743ed7,
  .elementor-element.elementor-element-c0a5750,
  .elementor-element.elementor-element-5824df0,
  .elementor-element.elementor-element-13dfb1d{
    -webkit-box-orient:vertical; -webkit-box-direction:normal;
    -ms-flex-direction:column; flex-direction:column;
    -ms-flex-wrap:nowrap; flex-wrap:nowrap;
  }
  /* a coluna do vídeo vai para o fim e ocupa a largura toda */
  .elementor-element.elementor-element-87253e2,
  .elementor-element.elementor-element-8af57d8,
  .elementor-element.elementor-element-44107cd,
  .elementor-element.elementor-element-2a0f3ed{
    -webkit-box-ordinal-group:3; -ms-flex-order:2; order:2;
    width:100%; min-width:100%; max-width:100%;
    padding-top:18px;
  }
  /* a coluna do texto vem primeiro */
  .elementor-element.elementor-element-d6d4a0e,
  .elementor-element.elementor-element-4a11303,
  .elementor-element.elementor-element-1a2c1b1,
  .elementor-element.elementor-element-8e8e1cf{
    -webkit-box-ordinal-group:2; -ms-flex-order:1; order:1;
    width:100%; min-width:0; max-width:100%;
  }
  /* qualquer coluna que carregue vídeo desce, mesmo sem estar na lista */
  .comVideo{
    -webkit-box-ordinal-group:3; -ms-flex-order:2; order:2;
    width:100%; min-width:0;
  }
}

/* ==========================================================================
   O SITE CENTRALIZADO

   Tudo passa a nascer do meio da tela: cabeçalho de página, filtros,
   chamadas, cartões. O olho encontra sempre o mesmo eixo e a navegação
   fica mais previsível, no computador e no celular.

   A única exceção é o corpo dos artigos. Parágrafo longo centralizado
   obriga o olho a procurar onde começa cada linha, e a leitura cai. Lá o
   texto continua alinhado à esquerda, dentro da coluna centralizada.
   ========================================================================== */

/* páginas de conteúdo */
.blogCab, .portfolioCab, .artigoCab, .migalhas,
.blogVazio, .semResultado{ text-align:center; }

.blogCab__frase, .portfolioCab__frase{ margin-left:auto; margin-right:auto; }
.blogCab__titulo::after,
.portfolioCab__titulo::after{ margin-left:auto; margin-right:auto; }

.migalhas{
  display:-webkit-box; display:-ms-flexbox; display:flex;
  -webkit-box-pack:center; -ms-flex-pack:center; justify-content:center;
  -webkit-box-align:center; -ms-flex-align:center; align-items:center;
  -ms-flex-wrap:wrap; flex-wrap:wrap;
}

/* filtros e editorias no meio */
.editorias__interno,
.portfolio .filtros{
  -webkit-box-pack:center; -ms-flex-pack:center; justify-content:center;
}
.editorias__item:first-child,
.portfolio .filtros .filtros__item:first-child{ padding-left:16px; }

/* cartões e chamadas */
.projeto__texto, .cartaoBlog__texto,
.chamada__texto, .linhaBlog__texto,
.manchete__texto, .depoimento__pe{ text-align:center; }

.projeto__link, .cartaoBlog__link, .manchete__link{ text-align:center; }

.assinatura{ -webkit-box-pack:center; -ms-flex-pack:center; justify-content:center; }

/* a linha da lista fica em coluna, com a foto em cima e o texto no meio */
.linhaBlog__link{
  -webkit-box-orient:vertical; -webkit-box-direction:normal;
  -ms-flex-direction:column; flex-direction:column;
  -webkit-box-align:center; -ms-flex-align:center; align-items:center;
}
.linhaBlog__foto{
  -ms-flex:0 0 auto; flex:0 0 auto;
  width:100%; max-width:420px; height:auto; margin:0 0 15px;
  position:relative;
}
.linhaBlog__foto::before{ content:''; display:block; padding-top:56.25%; }
@supports (aspect-ratio: 16 / 9){
  .linhaBlog__foto::before{ display:none; }
  .linhaBlog__foto{ aspect-ratio:16 / 9; }
}
.linhaBlog__foto img{ position:absolute; top:0; left:0; }
.linhaBlog__texto{ max-width:640px; }

/* a chamada de apoio também vira coluna, para manter o mesmo eixo */
.chamada__link{
  -webkit-box-orient:vertical; -webkit-box-direction:normal;
  -ms-flex-direction:column; flex-direction:column;
  -webkit-box-align:center; -ms-flex-align:center; align-items:center;
}
.chamada__foto{
  -ms-flex:0 0 auto; flex:0 0 auto;
  width:100%; height:auto; margin:0 0 12px; position:relative;
}
.chamada__foto::before{ content:''; display:block; padding-top:56.25%; }
@supports (aspect-ratio: 16 / 9){
  .chamada__foto::before{ display:none; }
  .chamada__foto{ aspect-ratio:16 / 9; }
}
.chamada__foto img{ position:absolute; top:0; left:0; }

/* o chapéu e as etiquetas ficam centralizados junto com o resto */
.chapeu, .projeto__rotulo{ margin-left:auto; margin-right:auto; }

/* o texto de leitura continua à esquerda: é o que se lê, não se olha */
.artigoTexto{ text-align:left; }
.artigoTexto p, .artigoTexto li{ text-align:left; }
.artigoSub, .artigoDestaque p{ text-align:left; }

/* os cartões de "sua marca completa" também nascem do meio */
.entregaCartao{
  -webkit-box-align:center; -ms-flex-align:center; align-items:center;
  text-align:center;
}
.entregaCartao__selo{ align-self:center; }
.entregaCartao__marca{ margin-left:auto; margin-right:auto; }

/* e os cartões da oferta seguem o mesmo eixo */
.ofertaItem{ text-align:center; }

/* o cabeçalho de sessão também no meio, com o traço amarelo sob a palavra */
.listaBlog__cab,
.leiaTambem .listaBlog__cab{ text-align:center; }
.listaBlog__cab span,
.leiaTambem .listaBlog__cab span{ position:relative; display:inline-block; }
.listaBlog__cab span::after,
.leiaTambem .listaBlog__cab span::after{ left:0; right:0; width:auto; }

/* as linhas da lista centradas na coluna */
.linhaBlog__link{ margin:0 auto; max-width:720px; }
.leiaTambem__grade{ -webkit-box-pack:center; -ms-flex-pack:center; justify-content:center; }
.grelha{ -webkit-box-pack:center; -ms-flex-pack:center; justify-content:center; }
.depoimentos__faixa{ -webkit-box-pack:center; -ms-flex-pack:center; justify-content:center; }

/* No celular a barra de filtros rola de lado. Centralizar ali esconderia o
   primeiro item, então nessa largura ela volta a começar pela esquerda. */
@media (max-width:640px){
  .editorias__interno,
  .portfolio .filtros{
    -webkit-box-pack:start; -ms-flex-pack:start; justify-content:flex-start;
  }
  .editorias__item:first-child,
  .portfolio .filtros .filtros__item:first-child{ padding-left:2px; }
}
.portfolioCab__conta{ margin-top:4px; }

/* ==========================================================================
   HERO DA HOME, A ESTEIRA DAS MARCAS

   A ordem é a da conversa: primeiro o título, a frase e os botões. Depois a
   esteira, que atravessa a tela de ponta a ponta e anda sozinha.

   Como funciona o "sem fim": cada fileira tem um trilho com a mesma lista
   de marcas repetida duas vezes. O trilho começa deslocado meia largura
   para a esquerda e desliza até o zero. Quando chega lá, a segunda cópia
   está exatamente onde a primeira estava, e o salto de volta ao início não
   aparece. É a mesma ideia do letreiro de rua.

   Duas fileiras, as duas da esquerda para a direita, em velocidades
   diferentes, assim o conjunto tem vida em vez de parecer um bloco só se
   arrastando. O mouse em cima pausa a fileira, para dar tempo de clicar.
   ========================================================================== */
.hero{
  background:#000; width:100%; margin:0;
  padding:52px 0 56px; box-sizing:border-box;
  overflow:hidden;
}
/* o texto continua na medida da página; só a esteira vai de ponta a ponta */
.hero__interno{ max-width:1180px; margin:0 auto; padding:0 20px; box-sizing:border-box; }

/* ---------- primeiro a fala ---------- */
.hero__texto{ text-align:center; max-width:860px; margin:0 auto 40px; }
.hero__titulo{
  font-family:'Anton', Impact, sans-serif; font-weight:400;
  font-size:52px; line-height:1.02; letter-spacing:.4px;
  text-transform:uppercase; color:#fff; margin:0 0 18px;
}
.hero__frase{
  margin:0 auto 30px; max-width:620px;
  font-family:'Ubuntu','Open Sans',system-ui,sans-serif;
  font-size:16.5px; line-height:1.6; color:#cfcfc4;
}
.hero__botoes{
  display:-webkit-box; display:-ms-flexbox; display:flex;
  -ms-flex-wrap:wrap; flex-wrap:wrap;
  -webkit-box-pack:center; -ms-flex-pack:center; justify-content:center;
  gap:14px; margin:0;
}

/* ---------- a esteira ----------

   A esteira é uma grade deitada: três faixas de altura no computador, duas
   no celular. Cada projeto ocupa uma casa; os marcados como destaque ocupam
   duas por duas, e por isso aparecem maiores.

   A largura da casa sai da altura, na proporção 16x9, assim nenhuma capa
   precisa ser cortada para caber.

   O andar é lento de propósito: é um mural para se olhar, não um letreiro
   de aeroporto. */
.esteira{
  width:100%; margin:0; padding:0; overflow:hidden;
  --u:172px;                      /* a altura de uma faixa */
  --g:12px;                       /* o vão entre as peças  */
}

.esteira__trilho{
  display:-webkit-box; display:-ms-flexbox; display:flex;
  -ms-flex-wrap:nowrap; flex-wrap:nowrap;
  width:-webkit-max-content; width:max-content;
  gap:var(--g);
  will-change:transform;
  -webkit-animation:esteiraAnda 200s linear infinite;
          animation:esteiraAnda 200s linear infinite;
}
.esteira:hover .esteira__trilho,
.esteira:focus-within .esteira__trilho{
  -webkit-animation-play-state:paused; animation-play-state:paused;
}

/* cada cópia é uma grade igual à outra, então a volta ao início é invisível */
.esteira__copia{
  display:-webkit-box; display:-ms-flexbox; display:flex;
  -ms-flex-wrap:wrap; flex-wrap:wrap;
  gap:var(--g);
}
@supports (grid-auto-flow: column){
  .esteira__copia{
    display:grid;
    grid-auto-flow:column dense;
    grid-template-rows:repeat(3, var(--u));
    grid-auto-columns:calc(var(--u) * 16 / 9);
    gap:var(--g);
  }
}

/* da esquerda para a direita: começa deslocado e volta ao lugar */
@-webkit-keyframes esteiraAnda{
  from{ -webkit-transform:translate3d(-50%,0,0); }
  to{   -webkit-transform:translate3d(0,0,0); }
}
@keyframes esteiraAnda{
  from{ transform:translate3d(-50%,0,0); }
  to{   transform:translate3d(0,0,0); }
}

/* ---------- cada peça ---------- */
.marcaPeca{
  position:relative; display:block; -ms-flex-negative:0; flex-shrink:0;
  height:var(--u); width:calc(var(--u) * 16 / 9);
  border-radius:12px; overflow:hidden; background:#141414;
  text-decoration:none; color:inherit;
  -webkit-transition:.35s ease-in; transition:.35s ease-in;
}
@supports (grid-auto-flow: column){
  .marcaPeca{
    height:auto; width:auto;
    grid-row:span 1; grid-column:span 1;
  }
  /* o destaque ocupa duas faixas por duas colunas */
  .marcaPeca--grande{ grid-row:span 2; grid-column:span 2; border-radius:14px; }
}
.marcaPeca img{
  display:block; width:100%; height:100%; margin:0; border:0;
  -o-object-fit:cover; object-fit:cover;
}
.marcaPeca:hover, .marcaPeca:focus{
  -webkit-transform:translateY(-4px); transform:translateY(-4px);
}

/* o nome, na etiqueta amarela da casa */
.marcaPeca__nome{
  position:absolute; left:12px; bottom:12px; z-index:2;
  font-family:'Ubuntu','Open Sans',system-ui,sans-serif;
  font-size:10.5px; font-weight:700; line-height:1;
  letter-spacing:1.1px; text-transform:uppercase;
  color:#000; background:#feec34;
  padding:6px 10px; border-radius:20px;
  opacity:0; -webkit-transition:.22s ease-in; transition:.22s ease-in;
}
.marcaPeca:hover .marcaPeca__nome,
.marcaPeca:focus .marcaPeca__nome{ opacity:1; }

/* ==========================================================================
   A ESTEIRA NAS TELAS MENORES
   Duas faixas em vez de três, peças menores, e o destaque continua ocupando
   duas, só que agora as duas são a altura toda. O nome fica sempre visível:
   no celular não existe passar o mouse.
   ========================================================================== */
@media (max-width:900px){
  .hero{ padding:36px 0 40px; }
  .hero__interno{ padding:0 16px; }
  .hero__texto{ margin-bottom:28px; }
  .hero__titulo{ font-size:36px; }
  .hero__frase{ font-size:15px; margin-bottom:26px; }
  .hero__botoes .btn{ width:100%; max-width:330px; }

  .esteira{ --u:132px; --g:10px; }
  @supports (grid-auto-flow: column){
    .esteira__copia{ grid-template-rows:repeat(2, var(--u)); }
  }
  .esteira__trilho{
    -webkit-animation-duration:150s; animation-duration:150s;
  }
  .marcaPeca{ border-radius:10px; }
  .marcaPeca--grande{ border-radius:12px; }
  .marcaPeca__nome{
    opacity:1; left:9px; bottom:9px;
    font-size:9px; padding:5px 8px; letter-spacing:.9px;
  }
}

@media (max-width:520px){
  .hero__titulo{ font-size:29px; }
  .esteira{ --u:104px; --g:8px; }
  .marcaPeca__nome{ display:none; }
}

/* quem pediu ao sistema para não ver animação vê a esteira parada */
@media (prefers-reduced-motion: reduce){
  .esteira__trilho{
    -webkit-animation:none; animation:none;
    -webkit-transform:none; transform:none;
  }
  .esteira{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
}

/* ==========================================================================
   O BANNER É UM BLOCO SÓ

   O cartão de texto tinha canto arredondado e a coluna do vídeo não, o que
   criava uma linha divisória bem no meio. Aqui o arredondamento sai de
   dentro e vai para fora: o banner inteiro é uma peça única, com o preto
   contínuo e o vídeo encostado no texto, sem emenda no meio.
   ========================================================================== */
.elementor-element.elementor-element-b743ed7,
.elementor-element.elementor-element-c0a5750,
.elementor-element.elementor-element-5824df0,
.elementor-element.elementor-element-13dfb1d{
  background-color:#000;
  border-radius:20px;
  overflow:hidden;
  -webkit-box-align:stretch; -ms-flex-align:stretch; align-items:stretch;
  gap:0;
}
/* nada lá dentro tem canto próprio nem fundo próprio: quem manda é o bloco */
.elementor-element-b743ed7 .e-con,
.elementor-element-c0a5750 .e-con,
.elementor-element-5824df0 .e-con,
.elementor-element-13dfb1d .e-con,
.elementor-element-b743ed7 .comVideo,
.elementor-element-c0a5750 .comVideo,
.elementor-element-5824df0 .comVideo,
.elementor-element-13dfb1d .comVideo{
  border-radius:0;
  background-color:transparent;
  background-image:none;
}
/* a coluna do vídeo encosta na borda do bloco e enche a altura toda */
.elementor-element.elementor-element-87253e2,
.elementor-element.elementor-element-8af57d8,
.elementor-element.elementor-element-44107cd,
.elementor-element.elementor-element-2a0f3ed{
  -webkit-box-pack:center; -ms-flex-pack:center; justify-content:center;
  -webkit-box-align:center; -ms-flex-align:center; align-items:center;
  padding:0;
}
/* o vídeo, dentro do bloco, também perde o canto e o fundo próprios */
.comVideo > .quadroVideo{ border-radius:0; background:transparent; }
.comVideo > .quadroVideo > video.videoArquivo,
.comVideo > .quadroVideo > img.capaVideo{ border-radius:0; }

@media (max-width:900px){
  .elementor-element.elementor-element-b743ed7,
  .elementor-element.elementor-element-c0a5750,
  .elementor-element.elementor-element-5824df0,
  .elementor-element.elementor-element-13dfb1d{ border-radius:16px; }
  /* no celular o vídeo fica embaixo, colado na base do bloco */
  .elementor-element.elementor-element-87253e2,
  .elementor-element.elementor-element-8af57d8,
  .elementor-element.elementor-element-44107cd,
  .elementor-element.elementor-element-2a0f3ed{ padding-top:0; }
}

/* ==========================================================================
   A METADE BRANCA DO BANNER

   O banner é preto de ponta a ponta, mas metade dele aparecia branca. A
   causa estava no CSS do Elementor: os contêineres de dentro do vídeo
   (dd394f2, 44ad2e1, 5789535 e ea58453) têm fundo branco declarado com
   quatro classes de peso, mais forte do que a regra do bloco.

   Aqui a regra vem com o mesmo peso e mais uma classe, para o preto do
   bloco ser o único fundo do banner inteiro. Sem !important: só peso.
   ========================================================================== */
.elementor.elementor-1566 .elementor-element.elementor-element-dd394f2,
.elementor.elementor-1566 .elementor-element.elementor-element-44ad2e1,
.elementor.elementor-1566 .elementor-element.elementor-element-5789535,
.elementor.elementor-1566 .elementor-element.elementor-element-ea58453,
.elementor.elementor-1566 .elementor-element.elementor-element-5ce237d,
.elementor.elementor-1566 .elementor-element.elementor-element-c287c46,
.elementor.elementor-1566 .elementor-element.elementor-element-bcc163a,
.elementor.elementor-1566 .elementor-element.elementor-element-5e9ecc5,
.elementor.elementor-1566 .elementor-element.elementor-element-87253e2,
.elementor.elementor-1566 .elementor-element.elementor-element-8af57d8,
.elementor.elementor-1566 .elementor-element.elementor-element-44107cd,
.elementor.elementor-1566 .elementor-element.elementor-element-2a0f3ed,
.elementor.elementor-1566 .elementor-element.elementor-element-4a11303,
.elementor.elementor-1566 .elementor-element.elementor-element-3483296,
.elementor.elementor-1566 .elementor-element.elementor-element-4f66bb0,
.elementor.elementor-1566 .elementor-element.elementor-element-d6d4a0e{
  background-color:transparent;
  background-image:none;
  border-radius:0;
}

/* ==========================================================================
   SUA MARCA COMPLETA, AGORA COM GRADE DE VERDADE

   Antes os onze itens flutuavam soltos no meio da página: a última linha
   ficava centrada, com folga diferente das de cima, e o olho não achava
   uma coluna para seguir. Dava a sensação de coisa jogada.

   Aqui vira uma grade fechada, com traço fino separando cada item. Quatro
   colunas fixas, todo mundo começando na mesma linha da esquerda, ícone,
   título, texto e selo sempre na mesma altura. A última linha, mesmo com
   menos itens, continua alinhada à sua coluna, nada de centralizar sobra.
   ========================================================================== */
.marcaCompleta__grade{
  display:-webkit-box; display:-ms-flexbox; display:flex; /* recuo p/ navegador antigo */
  -ms-flex-wrap:wrap; flex-wrap:wrap;
  -webkit-box-pack:start; -ms-flex-pack:start; justify-content:flex-start;
  margin:0;
}
@supports (display: grid){
  .marcaCompleta__grade{
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    gap:0; margin:0;
    border-top:1px solid #e8e8e0;
    border-left:1px solid #e8e8e0;
    background:#fff;
  }
}
.marcaCompleta .entregaCartao{
  display:-webkit-box; display:-ms-flexbox; display:flex;
  -webkit-box-orient:vertical; -webkit-box-direction:normal;
  -ms-flex-direction:column; flex-direction:column;
  -webkit-box-align:start; -ms-flex-align:start; align-items:flex-start;
  text-align:left;
  -ms-flex:1 1 25%; flex:1 1 25%; max-width:none; min-width:0;
  margin:0; padding:30px 26px 28px; box-sizing:border-box;
  border-right:1px solid #e8e8e0;
  border-bottom:1px solid #e8e8e0;
  -webkit-transition:background-color .22s ease-in; transition:background-color .22s ease-in;
}
.marcaCompleta .entregaCartao:hover{ background-color:#fbfbf6; }

.marcaCompleta .entregaCartao__marca{
  margin:0 0 15px; width:44px; height:44px;
}
.marcaCompleta .entregaCartao__titulo{
  font-size:18px; letter-spacing:.5px; margin:0 0 10px;
}
.marcaCompleta .entregaCartao__texto{
  font-size:13.8px; line-height:1.6; margin:0 0 16px;
}
.marcaCompleta .entregaCartao__selo{
  -ms-flex-item-align:start; align-self:flex-start;
  margin:auto 0 0; padding:8px 0 0;
  border-top:2px solid #feec34;
}

@media (max-width:980px){
  @supports (display: grid){
    .marcaCompleta__grade{ grid-template-columns:repeat(2, 1fr); }
  }
  .marcaCompleta .entregaCartao{ -ms-flex:1 1 50%; flex:1 1 50%; padding:26px 22px 24px; }
}
@media (max-width:560px){
  @supports (display: grid){
    .marcaCompleta__grade{ grid-template-columns:1fr; }
  }
  .marcaCompleta .entregaCartao{
    -ms-flex:1 1 100%; flex:1 1 100%;
    padding:22px 18px 20px;
  }
  .marcaCompleta .entregaCartao__marca{ width:40px; height:40px; margin-bottom:12px; }
}

/* ==========================================================================
   A LOGO É A MINHA

   Este site é meu, então quem assina a barra do topo é a minha marca, o
   Z. Ela é um símbolo quadrado, e não uma palavra deitada como a da
   agência, por isso a medida aqui é a de um selo: alta e estreita.
   ========================================================================== */
#logoGarnizePropaganda{
  display:block;
  width:auto; height:44px; max-height:44px; max-width:60px;
  margin:0;
}
@media (max-width:900px){
  #logoGarnizePropaganda{ height:36px; max-height:36px; max-width:50px; }
}
.rodape__marca img{ width:auto; height:52px; max-width:70px; }

/* ==========================================================================
   O BOTÃO DE TOCAR É O QUADRO INTEIRO

   O botão de play é um <button>, e o CSS do tema pinta todo <button> de
   preto sólido no passar do mouse, com canto de 50px e recuo de 10px por
   30px. Era isso que criava aquela mancha preta arredondada por dentro do
   vídeo, menor que a caixa, deixando a foto aparecendo nas beiradas.

   Aqui o botão volta a ser o que precisa ser: uma camada do tamanho exato
   do container, sem canto próprio, sem recuo, e com um véu translúcido no
   lugar do preto sólido, a imagem continua visível por baixo.
   ========================================================================== */
.elementor-kit-1553 button.tocarVideo,
.elementor-kit-1553 .tocarVideo,
button.tocarVideo{
  position:absolute; top:0; right:0; bottom:0; left:0;
  width:100%; height:100%;
  margin:0; padding:0;
  border:0; border-radius:inherit;
  background-color:transparent; background-image:none;
  box-shadow:none; text-shadow:none;
  -webkit-appearance:none; -moz-appearance:none; appearance:none;
  -webkit-transition:background-color .3s ease-in; transition:background-color .3s ease-in;
}
/* o véu: escurece só o suficiente para o play ganhar contraste */
.elementor-kit-1553 button.tocarVideo:hover,
.elementor-kit-1553 button.tocarVideo:focus,
.elementor-kit-1553 .tocarVideo:hover,
.elementor-kit-1553 .tocarVideo:focus,
button.tocarVideo:hover,
button.tocarVideo:focus{
  background-color:rgba(0,0,0,.28);
  background-image:none;
  border:0; border-radius:inherit;
  padding:0; box-shadow:none;
  color:inherit;
}
/* o círculo do play não herda recuo nem sombra do botão de trás, mas
   continua acendendo em amarelo quando o mouse passa por cima */
.elementor-kit-1553 .tocarVideo span{
  border-radius:50%; padding:0; box-shadow:none;
}
.elementor-kit-1553 .tocarVideo:hover span,
.elementor-kit-1553 .tocarVideo:focus span,
button.tocarVideo:hover span,
button.tocarVideo:focus span{
  background-color:#feec34; border-color:#feec34;
}
.elementor-kit-1553 .tocarVideo:hover span::before,
.elementor-kit-1553 .tocarVideo:focus span::before,
button.tocarVideo:hover span::before,
button.tocarVideo:focus span::before{ border-left-color:#000; }

/* ==========================================================================
   A CORTINA DO VÍDEO, assistir em tela cheia

   Clicar em qualquer vídeo do site abre esta cortina preta por cima de
   tudo, com o filme no maior tamanho que couber na tela sem cortar nada.

   Para sair: o X no canto, a tecla Esc, ou um clique no preto ao redor. E
   quando o filme acaba, a cortina fecha sozinha.

   Enquanto ela está aberta a página de trás não rola, senão a pessoa
   fecha o vídeo e se perde no meio do site.
   ========================================================================== */
html.comVideoAberto,
html.comVideoAberto body{ overflow:hidden; }

.cortinaVideo{
  position:fixed; top:0; right:0; bottom:0; left:0;
  z-index:99999;
  display:none;
  background:rgba(0,0,0,.94);
  padding:56px 20px;
  box-sizing:border-box;
  -webkit-box-align:center; -ms-flex-align:center; align-items:center;
  -webkit-box-pack:center; -ms-flex-pack:center; justify-content:center;
}
.cortinaVideo.aberta{
  display:-webkit-box; display:-ms-flexbox; display:flex;
}

/* o palco: o maior 16x9 que cabe na tela, sem estourar em nenhum lado */
.cortinaVideo__palco{
  position:relative;
  width:100%; max-width:1280px;
  max-height:100%;
  background:#000;
  border-radius:8px; overflow:hidden;
  -webkit-box-shadow:0 20px 60px rgba(0,0,0,.6); box-shadow:0 20px 60px rgba(0,0,0,.6);
}
.cortinaVideo__palco::before{ content:''; display:block; padding-top:56.25%; }
@supports (aspect-ratio: 16 / 9){
  .cortinaVideo__palco::before{ display:none; }
  .cortinaVideo__palco{ aspect-ratio:16 / 9; }
}
/* vídeo em pé abre em pé: 9x16, alto e estreito */
.cortinaVideo__palco.emPe{ max-width:none; width:auto; height:100%; }
.cortinaVideo__palco.emPe::before{ padding-top:0; height:100%; }
@supports (aspect-ratio: 9 / 16){
  .cortinaVideo__palco.emPe{ aspect-ratio:9 / 16; height:100%; width:auto; max-width:100%; }
}

.cortinaVideo__palco > iframe,
.cortinaVideo__palco > video{
  position:absolute; top:0; right:0; bottom:0; left:0;
  width:100%; height:100%;
  display:block; margin:0; border:0; background:#000;
}
/* no navegador antigo, sem aspect-ratio, o vídeo em pé usa a altura toda */
.cortinaVideo__palco.emPe > iframe,
.cortinaVideo__palco.emPe > video{ position:relative; height:100%; }

/* ---------- o X ---------- */
.cortinaVideo .cortinaVideo__fechar{
  position:absolute; top:14px; right:16px; z-index:2;
  width:46px; height:46px; padding:0; margin:0;
  border:0; border-radius:50%; cursor:pointer;
  background:rgba(255,255,255,.14);
  display:-webkit-box; display:-ms-flexbox; display:flex;
  -webkit-box-align:center; -ms-flex-align:center; align-items:center;
  -webkit-box-pack:center; -ms-flex-pack:center; justify-content:center;
  -webkit-transition:background-color .2s ease-in; transition:background-color .2s ease-in;
}
.cortinaVideo .cortinaVideo__fechar:hover,
.cortinaVideo .cortinaVideo__fechar:focus{ background:#feec34; }
/* o X é feito de dois riscos cruzados */
.cortinaVideo__fechar span{
  position:absolute; width:19px; height:2.5px; background:#fff; border-radius:2px;
}
.cortinaVideo__fechar span:first-child{
  -webkit-transform:rotate(45deg); transform:rotate(45deg);
}
.cortinaVideo__fechar span:last-child{
  -webkit-transform:rotate(-45deg); transform:rotate(-45deg);
}
.cortinaVideo .cortinaVideo__fechar:hover span,
.cortinaVideo .cortinaVideo__fechar:focus span{ background:#000; }

@media (max-width:768px){
  .cortinaVideo{ padding:64px 12px 24px; }
  .cortinaVideo .cortinaVideo__fechar{ top:10px; right:10px; width:42px; height:42px; }
}

/* ==========================================================================
   O BOTÃO NAS SESSÕES ESCURAS DESTE SITE

   O botão principal é só traço. Em fundo claro o traço é preto; em fundo
   escuro ele precisa ser branco, senão some. As sessões pretas do site
   pessoal entram aqui, na mesma regra que já vale para as da agência.
   ========================================================================== */
.zeCapa .btn--principal,       .zeCapa .btn--principal .btn__texto,
.zeLivros .btn--principal,     .zeLivros .btn--principal .btn__texto,
.zeFerramentas .btn--principal,.zeFerramentas .btn--principal .btn__texto,
.livroCapa .btn--principal,    .livroCapa .btn--principal .btn__texto,
.oficinaCapa .btn--principal,  .oficinaCapa .btn--principal .btn__texto,
.oficinaEntregas .btn--principal, .oficinaEntregas .btn--principal .btn__texto{ color:#fff; }

.zeCapa .btn--principal,
.zeLivros .btn--principal,
.zeFerramentas .btn--principal,
.livroCapa .btn--principal,
.oficinaCapa .btn--principal,
.oficinaEntregas .btn--principal{ border-color:#fff; }

.zeCapa .btn--principal:hover, .zeCapa .btn--principal:focus,
.zeLivros .btn--principal:hover, .zeLivros .btn--principal:focus,
.zeFerramentas .btn--principal:hover, .zeFerramentas .btn--principal:focus,
.livroCapa .btn--principal:hover, .livroCapa .btn--principal:focus,
.oficinaCapa .btn--principal:hover, .oficinaCapa .btn--principal:focus,
.oficinaEntregas .btn--principal:hover, .oficinaEntregas .btn--principal:focus{
  background:#feec34; border-color:#feec34;
}
.zeCapa .btn--principal:hover .btn__texto, .zeCapa .btn--principal:focus .btn__texto,
.zeLivros .btn--principal:hover .btn__texto, .zeLivros .btn--principal:focus .btn__texto,
.zeFerramentas .btn--principal:hover .btn__texto, .zeFerramentas .btn--principal:focus .btn__texto,
.livroCapa .btn--principal:hover .btn__texto, .livroCapa .btn--principal:focus .btn__texto,
.oficinaCapa .btn--principal:hover .btn__texto, .oficinaCapa .btn--principal:focus .btn__texto,
.oficinaEntregas .btn--principal:hover .btn__texto, .oficinaEntregas .btn--principal:focus .btn__texto{ color:#000; }

/* Nas sessões amarelas o traço volta a ser preto, que é o que contrasta. */
.zeOficina .btn--principal,        .zeOficina .btn--principal .btn__texto,
.livroFerramenta .btn--principal,  .livroFerramenta .btn--principal .btn__texto,
.oficinaFecho .btn--principal,     .oficinaFecho .btn--principal .btn__texto{ color:#000; }
.zeOficina .btn--principal,
.livroFerramenta .btn--principal,
.oficinaFecho .btn--principal{ border-color:#000; }
.zeOficina .btn--principal:hover, .zeOficina .btn--principal:focus,
.livroFerramenta .btn--principal:hover, .livroFerramenta .btn--principal:focus,
.oficinaFecho .btn--principal:hover, .oficinaFecho .btn--principal:focus{
  background:#000; border-color:#000;
}
.zeOficina .btn--principal:hover .btn__texto, .zeOficina .btn--principal:focus .btn__texto,
.livroFerramenta .btn--principal:hover .btn__texto, .livroFerramenta .btn--principal:focus .btn__texto,
.oficinaFecho .btn--principal:hover .btn__texto, .oficinaFecho .btn--principal:focus .btn__texto{ color:#feec34; }

/* O secundário claro, quando cai em sessão amarela, também vira preto. */
.zeOficina .btn--secundario, .zeOficina .btn--secundario .btn__texto{ color:#3a3a30; }
.zeOficina .btn--secundario{ border-color:rgba(0,0,0,.3); }
.zeOficina .btn--secundario:hover, .zeOficina .btn--secundario:hover .btn__texto{ color:#000; }
.zeOficina .btn--secundario:hover{ border-color:#000; }