/* ==========================================================================
   TOVAP · 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:16px !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 80s linear infinite;
          animation:esteiraAnda 80s linear infinite;
}
/* a esteira não para nunca: nem com o mouse em cima. Quem quer clicar
   numa marca clica com ela andando, como num letreiro. */

/* cada cópia é uma fila de BLOCOS iguais, então a volta ao início é invisível.

   Por que blocos e não uma grade só: a grade automática tentava encaixar
   peças de tamanhos diferentes sozinha e, quando não achava lugar, deixava
   buraco. Aqui cada bloco já vem fechado, com exatamente três faixas de
   altura, e a fila nunca tem vão. */
.esteira__copia{
  display:-webkit-box; display:-ms-flexbox; display:flex;
  -ms-flex-wrap:nowrap; flex-wrap:nowrap;
  -webkit-box-align:start; -ms-flex-align:start; align-items:flex-start;
  gap:var(--g);
}

/* ---------- o bloco ---------- */
.esteira__bloco{
  -ms-flex-negative:0; flex-shrink:0;
  display:-webkit-box; display:-ms-flexbox; display:flex;
  -ms-flex-wrap:wrap; flex-wrap:wrap;
  gap:var(--g);
}
@supports (display: grid){
  .esteira__bloco{
    display:grid;
    grid-template-rows:repeat(3, var(--u));
    gap:var(--g);
  }
  /* bloco de uma coluna: ou um vídeo em pé mais uma capa, ou três capas */
  .esteira__bloco--1{ grid-template-columns:calc(var(--u) * 16 / 9); }
  /* bloco de duas colunas: a peça grande em cima (2x2), duas capas embaixo */
  .esteira__bloco--2{ grid-template-columns:repeat(2, calc(var(--u) * 16 / 9)); }
  /* o vídeo em pé pede coluna estreita: 9x16 na altura de duas faixas */
  .esteira__bloco--empe{
    grid-template-columns:calc((var(--u) * 2 + var(--g)) * 9 / 16);
  }
}

/* da direita para a esquerda: as marcas entram pela direita e saem pela
   esquerda, no sentido em que o olho lê. Quando o trilho anda meia largura
   (uma cópia inteira), a segunda cópia está onde a primeira estava, e o
   recomeço não aparece. */
@-webkit-keyframes esteiraAnda{
  from{ -webkit-transform:translate3d(0,0,0); }
  to{   -webkit-transform:translate3d(-50%,0,0); }
}
@keyframes esteiraAnda{
  from{ transform:translate3d(0,0,0); }
  to{   transform:translate3d(-50%,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 (display: grid){
  .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; }
  /* o vídeo em pé: uma coluna, duas faixas */
  .esteira__bloco--empe .marcaPeca--empe{ grid-row:span 2; grid-column:span 1; }
}

/* ---------- as peças de filme ---------- */
/* O vídeo entra na esteira como qualquer capa: mesma moldura, mesmo canto.
   O quadro de dentro se estica para preencher a peça, e o play continua
   sendo o quadro inteiro, clicou, abre em tela cheia. */
.marcaPeca--filme{ background:#000; cursor:pointer; }
.marcaPeca--filme .quadroVideo{
  width:100%; height:100%; margin:0; padding:0; border-radius:inherit;
  max-width:none;
}
@supports (aspect-ratio: 16 / 9){
  .marcaPeca--filme .quadroVideo{ aspect-ratio:auto; }
}
.marcaPeca--filme .quadroVideo img,
.marcaPeca--filme .quadroVideo video{
  width:100%; height:100%;
  -o-object-fit:cover; object-fit:cover;
}
.marcaPeca--filme:hover, .marcaPeca--filme:focus-within{
  -webkit-transform:translateY(-4px); transform:translateY(-4px);
}
.marcaPeca--filme:hover .marcaPeca__nome,
.marcaPeca--filme:focus-within .marcaPeca__nome{ opacity:1; }
.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; }

  /* No celular o bloco encolhe de três faixas para duas. Quem sai é sempre
     a fileira de baixo: o destaque continua ocupando o bloco inteiro e a
     esteira segue sem buraco nenhum. */
  .esteira{ --u:132px; --g:10px; }
  @supports (display: grid){
    .esteira__bloco{ grid-template-rows:repeat(2, var(--u)); }
    .esteira__bloco--2 > .marcaPeca:nth-child(2),
    .esteira__bloco--2 > .marcaPeca:nth-child(3),
    .esteira__bloco--empe > *:nth-child(2),
    .esteira__bloco--1 > .marcaPeca:nth-child(3){ display:none; }
  }
  .esteira__trilho{
    -webkit-animation-duration:70s; animation-duration:70s;
  }
  .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 DA TOVAP

   A marca do topo passa a ser a assinatura da TOVAP, a mesma que está nas
   ferramentas. Ela é uma palavra deitada (200x50), e não um símbolo
   quadrado como a anterior, então precisa de outra medida: mais larga,
   menos alta, para caber na barra sem esticar nem espremer.
   ========================================================================== */
#logoGarnizePropaganda{
  display:block;
  width:auto; height:30px; max-height:30px; max-width:132px;
  margin:0;
}
@media (max-width:900px){
  #logoGarnizePropaganda{ height:25px; max-height:25px; max-width:112px; }
}
/* no rodapé a assinatura pode aparecer um pouco maior */
.rodape__logo img,
.rodape img[alt]{ width:auto; height:34px; max-width:150px; }

/* ==========================================================================
   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; }
}

/* ==========================================================================
   A COLUNA DUPLA DA ESTEIRA

   Uma coluna normal tem três casas iguais. A dupla tem duas: a de cima com
   duas faixas de altura, a de baixo com uma. Ela existe para fechar o resto
   da conta quando o número de capas não é múltiplo de três, e é o que
   impede o último bloco de ficar com dois terços vazios.
   ========================================================================== */
@supports (display: grid){
  .esteira__bloco--dupla > .marcaPeca:first-child{ grid-row:span 2; }
}
@media (max-width:900px){
  /* no celular a coluna tem duas faixas: a peça de cima ocupa as duas e a
     de baixo sai, do mesmo jeito que acontece nos outros blocos */
  @supports (display: grid){
    .esteira__bloco--dupla > .marcaPeca:first-child{ grid-row:span 2; }
    .esteira__bloco--dupla > *:nth-child(2){ display:none; }
  }
}

/* ==========================================================================
   O RESPIRO DO SITE

   Duas coisas estavam apertando a página, e uma delas era invisível no CSS.

   A primeira é a régua: as sessões vinham com 52 a 74px em cima e embaixo.
   Numa tela de 1440 isso encosta um assunto no outro, e o olho não percebe
   onde um termina e o próximo começa. A régua nova é 104px em cima e 108
   embaixo nas sessões grandes, 64/68 no celular.

   A segunda é o tema. O Elementor traz `.elementor-kit-1553 p` e
   `.elementor-kit-1553 h1..h6` com margem zero e peso maior do que uma
   classe sozinha. Toda margem que eu declarava numa classe simples era
   descartada em silêncio: o CSS não acusa erro, o texto só cola. Por isso
   cada regra daqui traz o pai no seletor. É o que faz o espaço valer.

   A régua entre peças segue a proporção: quanto maior o texto de cima,
   maior o vão que ele pede. Um título de 74px pede uns 40 antes da frase;
   um de 34px pede uns 20.
   ========================================================================== */

/* ---------- a régua das sessões ---------- */
.marcaCompleta{ padding-top:104px; padding-bottom:108px; }
.hero{ padding-top:96px; padding-bottom:100px; }
.depoimentos{ padding-top:104px; padding-bottom:108px; }
#ofertaPrazo{ padding-top:104px; padding-bottom:108px; }

/* as faixas de texto e vídeo do tema também entram na régua */
.elementor-1566 .e-con-parent{ padding-top:96px; padding-bottom:96px; }

/* ---------- o banner das marcas ---------- */
.hero .hero__texto{ margin-bottom:56px; }
.hero .hero__titulo{ margin:0 0 26px; }
.hero .hero__frase{ margin:0 auto 38px; }

/* ---------- a marca completa ---------- */
.marcaCompleta .marcaCompleta__titulo{ margin:0 0 56px; }
.marcaCompleta .entregaCartao__marca{ margin-bottom:20px; }
.marcaCompleta .entregaCartao__titulo{ margin:0 0 14px; }
.marcaCompleta .entregaCartao__texto{ margin:0 0 14px; }

/* ---------- depoimentos ---------- */
.depoimentos .depoimentos__cab{ margin-bottom:52px; }
.depoimentos .depoimentos__titulo{ margin:0 0 22px; }
.depoimentos .depoimentos__nota{ margin:0; }
.depoimentos .depoimento__pe{ margin-top:20px; }
.depoimentos .depoimento__nome{ margin-bottom:14px; display:block; }

/* ---------- a oferta ---------- */
#ofertaPrazo .ofertaTitulo{ margin:0 0 40px; }
#ofertaPrazo .ofertaFrase{ margin:0 auto 52px; }
#ofertaPrazo .ofertaItem{ margin-bottom:16px; }
#ofertaPrazo .ofertaItem__marca{ margin-bottom:14px; }

/* ---------- o rodapé ---------- */
.rodape .rodape__marca{ margin-bottom:34px; }
.rodape .rodape__menu{ margin-bottom:34px; }
.rodape .rodape__contato{ margin-bottom:34px; }
.rodape .rodape__item{ margin-bottom:14px; display:block; }
.rodape .rodape__empresa{ margin:0 0 14px; }
.rodape .rodape__direitos{ margin:0; }

/* ---------- portfólio ---------- */
.portfolio .portfolioCab{ padding-top:96px; padding-bottom:56px; }
.portfolio .vitrine{ margin-bottom:64px; }
.portfolio .grade{ gap:30px; }

/* ---------- a página de um projeto ---------- */
.caso .casoCapa{ padding-bottom:80px; }
.caso .casoTitulo{ margin:0 0 26px; }
.caso .casoFrase{ margin:0 0 38px; }
.caso .casoResumo{ padding-top:88px; }
.caso .casoBloco{ margin-bottom:80px; }
.caso .casoBloco h3{ margin:0 0 20px; }
.caso .casoBloco p{ margin:0 0 20px; }

@media (max-width:900px){
  .marcaCompleta,
  .depoimentos,
  #ofertaPrazo{ padding-top:64px; padding-bottom:68px; }
  .hero{ padding-top:60px; padding-bottom:64px; }
  .elementor-1566 .e-con-parent{ padding-top:56px; padding-bottom:56px; }

  .hero .hero__texto{ margin-bottom:40px; }
  .hero .hero__titulo{ margin-bottom:20px; }
  .hero .hero__frase{ margin-bottom:30px; }
  .marcaCompleta .marcaCompleta__titulo{ margin-bottom:38px; }
  .depoimentos .depoimentos__cab{ margin-bottom:36px; }
  #ofertaPrazo .ofertaTitulo{ margin-bottom:26px; }
  #ofertaPrazo .ofertaFrase{ margin-bottom:34px; }
  .portfolio .portfolioCab{ padding-top:60px; padding-bottom:36px; }
  .caso .casoResumo{ padding-top:56px; }
  .caso .casoBloco{ margin-bottom:52px; }
}

/* ==========================================================================
   O CELULAR USA A TELA INTEIRA

   No celular a tela é estreita e alta. Espremer três colunas ali produz o
   pior dos dois mundos: nenhuma peça grande o bastante para se ver, e a
   sensação de que o conteúdo foi cortado. A regra aqui é simples: cada
   sessão manda na largura toda, e o que rola de lado rola uma peça por vez,
   parando sempre no lugar certo.

   Os depoimentos são o caso mais claro. Eram dois vídeos e meio à vista, um
   deles cortado ao meio na borda. Agora é um vídeo por vez, ocupando quase
   toda a largura, com o próximo espiando de lado para dizer que existe mais.
   O dedo arrasta e a peça encaixa sozinha.
   ========================================================================== */
@media (max-width:640px){

  /* ---------- depoimentos: um por tela, com encaixe ---------- */
  .depoimentos__faixa{
    padding-left:16px; padding-right:16px;
    scroll-padding-left:16px;
    gap:14px;
  }
  .depoimento{
    width:82vw; min-width:0; max-width:330px;
    padding:0 0 18px;
    scroll-snap-align:center;
  }
  .depoimento .quadroVideo{ border-radius:14px; }
  .depoimento .tocarVideo span{ width:66px; height:66px; }
  .depoimento__pe{ padding-top:16px; }

  /* ---------- a marca completa: um cartão por linha, largura toda ---------- */
  .marcaCompleta{ padding-left:16px; padding-right:16px; }
  .marcaCompleta__grade{ gap:14px; }
  .entregaCartao{
    -ms-flex:1 1 100%; flex:1 1 100%; max-width:none;
    padding:26px 22px 28px;
  }

  /* ---------- a oferta: texto e lista de ponta a ponta ---------- */
  #ofertaPrazo{ padding-left:16px; padding-right:16px; }
  #ofertaPrazo .ofertaItens{ max-width:none; }
  #ofertaPrazo .btn{ width:100%; max-width:none; }

  /* ---------- o banner das marcas ---------- */
  .hero__interno{ padding-left:16px; padding-right:16px; }
  .hero__botoes .btn{ width:100%; max-width:none; }

  /* ---------- o rodapé ---------- */
  .rodape__interno{ padding-left:16px; padding-right:16px; }
}

/* a mesma ideia nas telas médias, onde três colunas ainda espremem */
@media (min-width:641px) and (max-width:900px){
  .depoimento{ width:46%; max-width:none; }
  .entregaCartao{ -ms-flex:1 1 calc(50% - 12px); flex:1 1 calc(50% - 12px); }
}

/* ==========================================================================
   A BARRA DO TOPO NÃO COBRE MAIS O TÍTULO

   O menu fica fixo no alto. Quando alguém chega por um link com âncora, ou
   aperta um item do menu, o navegador rola até o topo exato da sessão e a
   barra fica por cima do título. Reservar a altura da barra resolve: a
   rolagem para um pouco antes e o título aparece inteiro.
   ========================================================================== */
section[id],
.marcaCompleta, .hero, .depoimentos, #ofertaPrazo,
.elementor-1566 .e-con-parent{
  scroll-margin-top:96px;
}
@media (max-width:900px){
  section[id],
  .marcaCompleta, .hero, .depoimentos, #ofertaPrazo,
  .elementor-1566 .e-con-parent{ scroll-margin-top:76px; }
}

/* ==========================================================================
   NENHUM VÍDEO APARECE COMO CAIXA PRETA

   A prévia de um vídeo do YouTube é uma imagem que vem de fora. Quase sempre
   ela chega; quando não chega (rede de empresa, navegador do Instagram,
   internet ruim), sobrava um retângulo preto com um play no meio, que se lê
   como erro.

   Aqui a peça de filme ganha um fundo próprio por baixo da imagem: um
   degradê escuro com um toque do amarelo da casa. Se a imagem chegar, ela
   cobre tudo e ninguém vê o degradê. Se não chegar, o lugar continua tendo
   cara de peça do site, e não de imagem quebrada. O nome da marca fica
   sempre visível nessas peças, para dizer de quem é o filme mesmo sem foto.
   ========================================================================== */
.marcaPeca--filme{
  background:#111;
  background:-webkit-linear-gradient(315deg, #1c1c18 0%, #111 55%, #262214 100%);
  background:linear-gradient(135deg, #1c1c18 0%, #111 55%, #262214 100%);
}
.marcaPeca--filme .quadroVideo{ background:transparent; }
.marcaPeca--filme .marcaPeca__nome{ opacity:1; }

/* ==========================================================================
   A ÚLTIMA FILA DE CARTÕES NÃO DEIXA CASA VAZIA

   São onze entregas e quatro colunas. A última fila fica com três cartões e
   um vão, e como a grade é desenhada por linhas isso aparece como um
   quadrado em branco no fim, do jeito que um desenho inacabado apareceria.

   A saída é deixar os cartões da última fila crescerem e dividirem a largura
   que sobrou entre eles. Ninguém percebe que são três em vez de quatro; só
   se percebe que a fila terminou certa. Como o conteúdo vem do gerenciador,
   isso vale para qualquer número de entregas que você cadastrar depois.
   ========================================================================== */
.marcaCompleta__grade{
  -webkit-box-align:stretch; -ms-flex-align:stretch; align-items:stretch;
}
.entregaCartao{
  /* base de 25%, mas com permissão para crescer: é o crescer que fecha a
     última fila sem deixar buraco */
  -webkit-box-flex:1; -ms-flex:1 1 25%; flex:1 1 25%;
  max-width:none; min-width:220px;
}
@media (min-width:901px){
  /* teto para os cartões não ficarem largos demais quando forem poucos */
  .entregaCartao{ max-width:33.3333%; }
}

/* ==========================================================================
   A GRADE DAS ENTREGAS VOLTA A SER FLEXÍVEL

   Ela estava montada como grade de quatro colunas fixas. Grade fixa é ótima
   quando o número de peças é múltiplo do número de colunas; quando não é, a
   última fila fica com uma casa vazia, e não existe jeito de a própria grade
   preencher isso sozinha.

   Como o número de entregas vem do gerenciador e pode mudar a qualquer
   momento, aqui a fila volta a ser flexível: cada cartão parte de um quarto
   da largura e tem permissão para crescer. A última fila divide entre si o
   espaço que sobrou, e a sessão termina sempre reta, com qualquer número de
   entregas cadastradas.
   ========================================================================== */
@supports (display: grid){
  .marcaCompleta__grade{
    display:-webkit-box; display:-ms-flexbox; display:flex;
    -ms-flex-wrap:wrap; flex-wrap:wrap;
    -webkit-box-align:stretch; -ms-flex-align:stretch; align-items:stretch;
    grid-template-columns:none;
  }
  .marcaCompleta .entregaCartao{
    -webkit-box-flex:1; -ms-flex:1 1 25%; flex:1 1 25%;
    min-width:230px; max-width:none;
  }
}
@media (min-width:901px){
  .marcaCompleta .entregaCartao{ max-width:34%; }
}
@media (min-width:641px) and (max-width:900px){
  .marcaCompleta .entregaCartao{ -ms-flex:1 1 50%; flex:1 1 50%; max-width:none; }
}
@media (max-width:640px){
  .marcaCompleta .entregaCartao{ -ms-flex:1 1 100%; flex:1 1 100%; max-width:none; min-width:0; }
}

/* ---------- os últimos vãos apertados ----------
   Cada um destes tinha o mesmo motivo: a margem estava declarada numa classe
   sozinha e o tema, com peso maior, zerava. Com o pai no seletor a conta
   empata e o espaço passa a valer. */
.portfolio .portfolioCab{ padding-bottom:64px; }
.portfolio .ofertaItem{ margin-bottom:16px; }

.caso .casoCab{ padding-bottom:44px; }
.caso .casoChapeu{ margin:0 0 22px; }
.caso .casoTitulo{ margin:0 0 30px; }
.caso .casoNav__rotulo{ margin-bottom:14px; display:block; }
.caso .casoFicha__item{ margin-bottom:22px; }
.caso .casoGaleria__larga{ margin-bottom:20px; }
.caso .ofertaItem{ margin-bottom:16px; }

#ofertaPrazo .ofertaTitulo{ margin-bottom:46px; }
.rodape .rodape__ico{ margin-right:12px; }
.rodape .rodape__empresa{ margin-bottom:16px; }

@media (max-width:900px){
  .portfolio .grade{ gap:26px; }
  .caso .casoFicha__item{ margin-bottom:20px; }
}

/* os itens da oferta e a migalha do projeto, com o vão que faltava */
#ofertaPrazo .ofertaItens{ gap:18px; }
.caso .casoMigalhas{ padding-bottom:26px; }
@media (max-width:640px){
  #ofertaPrazo .ofertaItens{ gap:16px; }
}

/* ==========================================================================
   NO CELULAR, TUDO CENTRALIZADO

   Numa coluna estreita o texto alinhado à esquerda cria uma borda irregular
   do lado direito e um bloco pesado do esquerdo. Centralizado, cada peça
   fica com o mesmo respiro dos dois lados e a leitura desce pelo meio, que
   é como se lê no celular.

   Vale para tudo: cartões, listas, rodapé e a ficha do projeto. As únicas
   coisas que continuam alinhadas à esquerda são os textos longos de leitura
   corrida, onde centralizar atrapalharia mais do que ajuda.
   ========================================================================== */
@media (max-width:900px){
  .marcaCompleta,
  .marcaCompleta__interno,
  .entregaCartao,
  .depoimentos,
  .depoimento,
  #ofertaPrazo,
  .ofertaItem,
  .portfolio .portfolioCab,
  .portfolio .projeto,
  .caso .casoCab,
  .caso .casoFicha__item,
  .caso .casoBloco,
  .rodape,
  .rodape__interno,
  .rodape__marca,
  .rodape__menu,
  .rodape__contato,
  .rodape__onde,
  .rodape__base{ text-align:center; }

  /* o que era coluna alinhada à esquerda passa a empilhar pelo meio */
  .entregaCartao,
  .rodape__menu,
  .rodape__contato,
  .rodape__onde{
    -webkit-box-align:center; -ms-flex-align:center; align-items:center;
  }

  /* ícones e traços deixam de encostar na margem e ficam sobre o eixo */
  .entregaCartao__marca,
  .ofertaItem__marca,
  .rodape__ico{ margin-left:auto; margin-right:auto; }
  .entregaCartao__selo::before,
  .entregaCartao__selo{ margin-left:auto; margin-right:auto; }

  /* listas perdem o recuo do marcador e centralizam junto */
  .rodape__menu a,
  .rodape__item{
    display:block; text-align:center;
    -webkit-box-pack:center; -ms-flex-pack:center; justify-content:center;
  }
  .rodape__item{
    display:-webkit-box; display:-ms-flexbox; display:flex;
    -webkit-box-align:center; -ms-flex-align:center; align-items:center;
  }

  /* botões no meio, um embaixo do outro */
  .hero__botoes,
  .ofertaAcoes,
  .caso .casoAcoes{
    -webkit-box-pack:center; -ms-flex-pack:center; justify-content:center;
  }

  /* o texto corrido continua alinhado à esquerda: parágrafo longo
     centralizado cansa a leitura */
  .caso .casoTexto p,
  .caso .casoBloco p,
  .portfolio .projeto__frase{ text-align:left; }
}

/* ==========================================================================
   A PEÇA GRANDE ALTERNA ENTRE ALTO E BAIXO

   Com a peça grande sempre no alto, os blocos desenhavam uma linha reta
   atravessando a esteira toda na mesma altura, e o mural virava duas faixas
   empilhadas. Alternando bloco sim, bloco não, a linha some.

   Aqui só mudam as coordenadas dentro do bloco: a peça grande vai para as
   faixas 2 e 3, e as capas menores sobem para a faixa 1. Tamanho, proporção
   e conteúdo continuam iguais, e nada se repete.
   ========================================================================== */
@supports (display: grid){
  .esteira__bloco--baixo.esteira__bloco--2 > .marcaPeca--grande{
    grid-row:2 / span 2; grid-column:1 / span 2;
  }
  .esteira__bloco--baixo.esteira__bloco--2 > .marcaPeca:nth-child(2){ grid-row:1; grid-column:1; }
  .esteira__bloco--baixo.esteira__bloco--2 > .marcaPeca:nth-child(3){ grid-row:1; grid-column:2; }

  .esteira__bloco--baixo.esteira__bloco--empe > .marcaPeca--empe{ grid-row:2 / span 2; }
  .esteira__bloco--baixo.esteira__bloco--empe > *:nth-child(2){ grid-row:1; }
}

@media (max-width:900px){
  /* no celular o bloco só tem duas faixas: a peça grande volta a ocupar as
     duas e as capas de companhia saem, esteja o bloco alternado ou não */
  @supports (display: grid){
    .esteira__bloco--baixo.esteira__bloco--2 > .marcaPeca--grande{
      grid-row:1 / span 2; grid-column:1 / span 2;
    }
    .esteira__bloco--baixo.esteira__bloco--empe > .marcaPeca--empe{ grid-row:1 / span 2; }
  }
}


/* ==========================================================================
   QUEM ESTÁ À FRENTE DA TOVAP

   Vem logo depois dos depoimentos, e é por isso que funciona: a pessoa
   acabou de ouvir cinco clientes falarem do trabalho, e a pergunta que
   sobra é "quem fez?".

   A dobra responde em três camadas, e cada uma tem uma função:

   1. Ao fundo, quatro fotos de trabalho: o cinema cheio, a palestra, a mesa
      de autógrafo e a consultoria de perto. Elas provam o que o texto diz,
      sem precisar afirmar. Ficam bem escurecidas, porque ali são textura.
   2. No meio, o retrato, com moldura e um traço amarelo, para o rosto ser a
      primeira coisa que o olho acha.
   3. À direita, as credenciais em cartões com ícone. Formação, pós, os três
      estados, os anos de estrada e os livros. Cada uma é um fato, e fato em
      cartão separado lê-se mais rápido do que numa frase corrida.
   ========================================================================== */
.autor{
  position:relative; overflow:hidden;
  background:#000; width:100%; margin:0;
  padding:110px 20px 114px; box-sizing:border-box;
}

/* ---------- as fotos do fundo, uma de cada vez ----------

   As quatro fotos ficam empilhadas no mesmo lugar e se revezam sozinhas,
   com uma passagem suave entre elas. Lado a lado, como estavam antes, cada
   uma virava uma tira estreita e nenhuma se via direito; uma por vez, cada
   foto ocupa a dobra inteira e conta a cena dela.

   A troca é feita só com CSS, sem JavaScript nenhum. Isso importa porque
   esta dobra precisa funcionar igual dentro do navegador do Instagram, onde
   script de carrossel costuma ser o primeiro a falhar.

   A conta: três segundos por foto, quatro fotos, ciclo de 12 segundos. Cada
   uma entra com meio segundo de passagem e sai com meio segundo, e o atraso
   de cada uma é um quarto do ciclo. É isso que faz o revezamento nunca
   deixar a tela vazia e nunca terminar: `infinite` no fim da declaração diz
   ao navegador para recomeçar para sempre.
   ========================================================================== */
.autor__fundo{
  position:absolute; top:0; right:0; bottom:0; left:0; z-index:0;
  overflow:hidden;
}
.autor__fundo span{
  position:absolute; top:0; right:0; bottom:0; left:0;
  display:block; opacity:0;
  -webkit-animation:autorPassa 12s linear infinite;
          animation:autorPassa 12s linear infinite;
}
.autor__fundo span:nth-child(1){ -webkit-animation-delay:0s; animation-delay:0s; }
.autor__fundo span:nth-child(2){ -webkit-animation-delay:3s; animation-delay:3s; }
.autor__fundo span:nth-child(3){ -webkit-animation-delay:6s; animation-delay:6s; }
.autor__fundo span:nth-child(4){ -webkit-animation-delay:9s; animation-delay:9s; }

.autor__fundo img{
  width:100%; height:100%; display:block; margin:0; border:0;
  -o-object-fit:cover; object-fit:cover;
  -o-object-position:center; object-position:center;
  -webkit-filter:grayscale(20%); filter:grayscale(20%);
}

@-webkit-keyframes autorPassa{
  0%{ opacity:0; }  4%{ opacity:1; }  25%{ opacity:1; }  29%{ opacity:0; }  100%{ opacity:0; }
}
@keyframes autorPassa{
  0%{ opacity:0; }  4%{ opacity:1; }  25%{ opacity:1; }  29%{ opacity:0; }  100%{ opacity:0; }
}

/* quem pediu ao sistema para não ver animação vê a primeira foto, parada */
@media (prefers-reduced-motion: reduce){
  .autor__fundo span{ -webkit-animation:none; animation:none; opacity:0; }
  .autor__fundo span:first-child{ opacity:1; }
}

/* o escurecimento é forte de propósito: sobre foto, texto branco só é
   confiável quando o fundo efetivo fica realmente escuro. Ele fica por cima
   do revezamento, então vale igual para as quatro. */
.autor__fundo::after{
  content:''; position:absolute; top:0; right:0; bottom:0; left:0; z-index:2;
  background:rgba(0,0,0,.74);
  background:-webkit-linear-gradient(top, rgba(0,0,0,.84) 0%, rgba(0,0,0,.68) 45%, rgba(0,0,0,.88) 100%);
  background:linear-gradient(to bottom, rgba(0,0,0,.84) 0%, rgba(0,0,0,.68) 45%, rgba(0,0,0,.88) 100%);
}

.autor__interno{
  position:relative; z-index:1;
  max-width:1160px; margin:0 auto;
  display:-webkit-box; display:-ms-flexbox; display:flex;
  -ms-flex-wrap:wrap; flex-wrap:wrap;
  -webkit-box-align:center; -ms-flex-align:center; align-items:center;
  gap:60px;
}

/* ---------- o retrato ---------- */
.autor__foto{
  -webkit-box-flex:0; -ms-flex:0 0 340px; flex:0 0 340px; max-width:340px;
  margin:0; position:relative; overflow:hidden;
  border-radius:18px; background:#141414;
  box-shadow:0 0 0 1px rgba(255,255,255,.10);
}
/* a proporção vem do padding, e o aspect-ratio entra como melhoria onde
   existir: assim o navegador do Instagram desenha o mesmo quadro */
.autor__foto::before{ content:''; display:block; padding-top:130%; }
@supports (aspect-ratio: 10 / 13){
  .autor__foto::before{ display:none; }
  .autor__foto{ aspect-ratio:10 / 13; }
}
.autor__foto img{
  position:absolute; top:0; left:0; width:100%; height:100%;
  display:block; margin:0; border:0;
  -o-object-fit:cover; object-fit:cover;
  -o-object-position:center top; object-position:center top;
}
@supports (aspect-ratio: 10 / 13){ .autor__foto img{ position:static; } }

/* ---------- o texto ---------- */
.autor__texto{ -webkit-box-flex:1; -ms-flex:1 1 48%; flex:1 1 48%; min-width:0; }

.autor__chapeu{
  display:-webkit-box; display:-ms-flexbox; display:flex;
  margin:0 0 22px; padding:0;
}
.autor__chapeu span{
  display:inline-block; background:#feec34; color:#000;
  font-family:'Ubuntu','Open Sans',system-ui,sans-serif;
  font-size:11.5px; font-weight:700; line-height:1;
  letter-spacing:2px; text-transform:uppercase;
  padding:9px 16px; border-radius:30px;
}
.autor .autor__titulo{
  text-shadow:0 2px 18px rgba(0,0,0,.8);
  font-family:'Anton', Impact, sans-serif; font-weight:400;
  font-size:46px; line-height:1.03; letter-spacing:.4px;
  text-transform:uppercase; color:#fff; margin:0 0 22px;
}
.autor .autor__frase{
  margin:0 0 34px; max-width:600px;
  text-shadow:0 1px 14px rgba(0,0,0,.85);
  font-family:'Ubuntu','Open Sans',system-ui,sans-serif;
  font-size:16.5px; line-height:1.72; color:#cfcfc4;
}

/* ---------- as credenciais ---------- */
.autor__creds{
  list-style:none; margin:0 0 38px; padding:0;
  display:-webkit-box; display:-ms-flexbox; display:flex;
  -ms-flex-wrap:wrap; flex-wrap:wrap;
  gap:12px;
}
.autorCred{
  -webkit-box-flex:1; -ms-flex:1 1 calc(50% - 6px); flex:1 1 calc(50% - 6px);
  min-width:230px; margin:0; box-sizing:border-box;
  display:-webkit-box; display:-ms-flexbox; display:flex;
  -webkit-box-align:center; -ms-flex-align:center; align-items:center;
  gap:14px;
  padding:15px 16px;
  border:1px solid rgba(255,255,255,.18); border-radius:13px;
  background:rgba(10,10,10,.62);
  -webkit-transition:.25s ease-in; transition:.25s ease-in;
}
.autorCred:hover{
  border-color:rgba(254,236,52,.6);
  background:rgba(28,26,10,.74);
}
.autorCred__icone{
  -webkit-box-flex:0; -ms-flex:0 0 40px; flex:0 0 40px;
  width:40px; height:40px; border-radius:50%;
  background:#feec34; color:#000;
  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;
}
.autorCred__icone svg{ width:21px; height:21px; display:block; }
.autorCred__corpo{ display:block; min-width:0; }
.autor .autorCred__valor{
  display:block; margin:0 0 4px;
  font-family:'Ubuntu','Open Sans',system-ui,sans-serif;
  font-size:14.5px; font-weight:700; line-height:1.32; color:#fff;
}
.autor .autorCred__rotulo{
  display:block;
  font-family:'Ubuntu','Open Sans',system-ui,sans-serif;
  font-size:12.5px; line-height:1.4; color:#c2c2b8;
}

/* o botão principal nasceu para fundo claro: aqui ele precisa do traço e do
   texto brancos, senão fica preto sobre preto e some */
.autor .btn--principal,
.autor .btn--principal .btn__texto{ color:#fff; }
.autor .btn--principal{ border-color:#fff; }
.autor .btn--principal:hover,
.autor .btn--principal:focus{ background:#feec34; border-color:#feec34; }
.autor .btn--principal:hover, .autor .btn--principal:hover .btn__texto,
.autor .btn--principal:focus, .autor .btn--principal:focus .btn__texto{ color:#000; }

/* ---------- no celular, tudo pelo meio ---------- */
@media (max-width:900px){
  .autor{ padding:64px 16px 68px; text-align:center; }
  .autor__interno{ gap:34px; }

  .autor__foto{
    -ms-flex:0 0 100%; flex:0 0 100%; max-width:290px;
    margin-left:auto; margin-right:auto;
  }
  .autor__texto{ -ms-flex:1 1 100%; flex:1 1 100%; }

  .autor__chapeu{ -webkit-box-pack:center; -ms-flex-pack:center; justify-content:center; }
  .autor .autor__titulo{ font-size:30px; }
  .autor .autor__frase{ margin-left:auto; margin-right:auto; }

  /* o cartão vira uma coluna centrada: ícone em cima, texto embaixo.
     Lado a lado, numa tela estreita, o texto quebrava em duas palavras
     por linha e o cartão ficava mais alto que largo. */
  .autor__creds{
    -webkit-box-pack:center; -ms-flex-pack:center; justify-content:center;
    gap:10px;
  }
  .autorCred{
    -ms-flex:1 1 100%; flex:1 1 100%; min-width:0;
    -webkit-box-orient:vertical; -webkit-box-direction:normal;
    -ms-flex-direction:column; flex-direction:column;
    text-align:center; gap:10px; padding:18px 16px;
  }
  .autorCred__icone{ margin:0 auto; }
  .autor .btn{ width:100%; max-width:330px; }
}

@media (min-width:641px) and (max-width:900px){
  /* na tela média cabem dois cartões por linha, ainda centrados */
  .autorCred{ -ms-flex:1 1 calc(50% - 5px); flex:1 1 calc(50% - 5px); }
}

/* ==========================================================================
   O BANNER DAS MARCAS NO CELULAR

   Esta é a área que mais precisa convencer, e no celular ela estava fraca
   pelo motivo mais simples: as peças eram pequenas. Cada capa tinha 185 por
   104 pixels, o tamanho de uma miniatura. Nesse tamanho ninguém reconhece a
   marca, ninguém lê o letreiro da fachada, e o banner vira uma faixa
   colorida sem assunto.

   O que muda aqui:

   · A faixa passa de 104 para 152 pixels de altura, e a capa comum passa a
     ter 270 por 152. É a diferença entre miniatura e imagem.
   · O destaque ocupa as duas faixas e duas colunas: fica com 552 por 314, o
     tamanho de um cartaz na mão. Ele é o primeiro a passar na tela.
   · O nome da marca volta a aparecer sempre, porque no celular não existe
     passar o mouse: sem ele, a pessoa vê a foto e não sabe de quem é.
   · A esteira anda mais devagar. Peça maior demora mais para ser lida, e a
     mesma velocidade de antes passaria rápido demais.
   · O texto acima encolhe um pouco o espaço que ocupa, para a primeira
     imagem já aparecer na primeira tela em vez de ficar abaixo dela.
   ========================================================================== */
@media (max-width:900px){
  .esteira{ --u:152px; --g:10px; }
  .esteira__trilho{
    -webkit-animation-duration:70s; animation-duration:70s;
  }
  .marcaPeca{ border-radius:12px; }
  .marcaPeca--grande{ border-radius:14px; }

  /* o nome sempre à vista, e maior: é ele que diz de quem é a marca */
  .marcaPeca__nome{
    opacity:1; left:11px; bottom:11px;
    font-size:10px; padding:6px 10px; letter-spacing:1px;
  }

  /* o texto do topo cede espaço para a primeira imagem subir na tela */
  .hero{ padding-top:48px; padding-bottom:52px; }
  .hero .hero__texto{ margin-bottom:30px; }
  .hero .hero__titulo{ font-size:32px; margin-bottom:22px; }
  .hero__botoes{ gap:12px; }
}

@media (max-width:520px){
  /* na tela bem estreita a peça encolhe um pouco, mas continua sendo
     imagem, não miniatura */
  .esteira{ --u:140px; --g:9px; }
  .marcaPeca__nome{ display:inline-block; font-size:9.5px; padding:5px 9px; }
  .hero .hero__titulo{ font-size:29px; }
}

/* ==========================================================================
   A DOBRA DO AUTOR SEM O RETRATO LATERAL

   Com o retrato ao lado, o texto ocupava metade e a conta fechava. Sem ele,
   o texto continuava preso à mesma metade e a outra metade ficava só com a
   foto de fundo: parecia que faltava alguma coisa ali.

   Aqui o conteúdo passa a usar a largura toda e as credenciais se abrem em
   três colunas. O parágrafo de abertura ganha uma medida de leitura própria,
   porque linha muito longa cansa, mas os cartões aproveitam tudo. É o mesmo
   conteúdo ocupando o espaço que existe.
   ========================================================================== */
.autor--semFoto .autor__interno{
  -webkit-box-pack:center; -ms-flex-pack:center; justify-content:center;
}
.autor--semFoto .autor__texto{
  -webkit-box-flex:1; -ms-flex:1 1 100%; flex:1 1 100%; max-width:none;
  text-align:center;
}
.autor--semFoto .autor__chapeu{
  -webkit-box-pack:center; -ms-flex-pack:center; justify-content:center;
}
.autor--semFoto .autor__frase{ margin-left:auto; margin-right:auto; max-width:720px; }
.autor--semFoto .autor__creds{
  -webkit-box-pack:center; -ms-flex-pack:center; justify-content:center;
}

@media (min-width:901px){
  .autor--semFoto .autor__titulo{ font-size:54px; }
  .autor--semFoto .autorCred{
    -ms-flex:1 1 calc(33.333% - 8px); flex:1 1 calc(33.333% - 8px);
    min-width:250px;
    text-align:left;
  }
  .autor--semFoto .autor__creds{ margin-bottom:44px; }
}

/* os dois vãos que ficaram apertados na dobra do autor */
.autor .autor__chapeu{ margin:0 0 26px; }
.autor--semFoto .autor__titulo{ margin-bottom:30px; }

/* ==========================================================================
   O BLOCO CHEIO, O BOTÃO DEPOIS DA ESTEIRA, E O RITMO NO CELULAR
   ========================================================================== */

/* ---------- bloco cheio ----------
   Quando as capas acabam, o último bloco com peça grande não fica com casa
   vazia embaixo: a peça grande ocupa as três faixas sozinha. */
@supports (display: grid){
  .esteira__bloco--cheio > .marcaPeca--grande{ grid-row:1 / span 3; grid-column:1 / span 2; }
  .esteira__bloco--baixo.esteira__bloco--cheio > .marcaPeca--grande{ grid-row:1 / span 3; }
}

/* ---------- o botão depois dos projetos ----------
   Ele fica onde a decisão acontece: depois de a pessoa ver as marcas
   passarem, não antes. */
.hero__depois{
  display:-webkit-box; display:-ms-flexbox; display:flex;
  -webkit-box-pack:center; -ms-flex-pack:center; justify-content:center;
  padding:44px 20px 0; margin:0;
}

/* ==========================================================================
   O RITMO DA ESTEIRA NO CELULAR: UM DESTAQUE, UMA DUPLA

   Antes, no celular, cada bloco com peça grande mostrava só a peça grande e
   escondia as duas capas de baixo. Como os blocos grandes vinham todos
   juntos, a pessoa via uma sequência de imagens grandes iguais, sem ritmo.

   Agora o bloco inteiro aparece, em três colunas: a peça em destaque ocupa
   duas colunas e as duas faixas de altura, e as duas capas que a acompanham
   viram uma coluna dupla ao lado dela, uma em cima da outra. É o padrão
   que se repete a esteira toda: destaque, dupla, destaque, dupla.
   ========================================================================== */
@media (max-width:900px){
  @supports (display: grid){
    /* o bloco com peça grande passa a ter três colunas e duas faixas */
    .esteira__bloco--2{
      grid-template-columns:repeat(2, calc(var(--u) * 16 / 9)) calc(var(--u) * 16 / 9);
      grid-template-rows:repeat(2, var(--u));
    }
    .esteira__bloco--2 > .marcaPeca--grande,
    .esteira__bloco--baixo.esteira__bloco--2 > .marcaPeca--grande{
      grid-column:1 / span 2; grid-row:1 / span 2;
    }
    /* as duas capas voltam a aparecer, empilhadas na terceira coluna */
    .esteira__bloco--2 > .marcaPeca:nth-child(2),
    .esteira__bloco--baixo.esteira__bloco--2 > .marcaPeca:nth-child(2){
      display:block; grid-column:3; grid-row:1;
    }
    .esteira__bloco--2 > .marcaPeca:nth-child(3),
    .esteira__bloco--baixo.esteira__bloco--2 > .marcaPeca:nth-child(3){
      display:block; grid-column:3; grid-row:2;
    }
    /* o bloco cheio não tem capas: a peça grande toma as duas faixas */
    .esteira__bloco--cheio{
      grid-template-columns:repeat(2, calc(var(--u) * 16 / 9));
    }
    .esteira__bloco--cheio > .marcaPeca--grande{ grid-column:1 / span 2; grid-row:1 / span 2; }

    /* a coluna dupla mostra as duas capas, uma em cada faixa */
    .esteira__bloco--dupla > *:nth-child(2){ display:block; }
    .esteira__bloco--dupla > .marcaPeca:first-child{ grid-row:1; }
    .esteira__bloco--dupla > *:nth-child(2){ grid-row:2; }
  }
}

/* ==========================================================================
   O BOTÃO PRINCIPAL DA OFERTA: AMARELO E COM BATIDA SUAVE

   O banner de oferta é o pedido mais importante do site, e ali o botão
   estava com o mesmo peso do secundário: os dois de traço, no escuro. O
   primeiro passa a ser sólido, amarelo, e ganha uma batida lenta.

   A batida é de propósito discreta: cresce dois por cento e volta, em três
   segundos, com o brilho amarelo se abrindo em volta. Chama o olho sem
   piscar, sem pular e sem cansar quem fica um tempo na página. Quem pediu
   ao sistema para não ver animação vê o botão amarelo, parado.
   ========================================================================== */
#ofertaPrazo .btn--pulsa,
#ofertaPrazo .btn--pulsa .btn__texto{ color:#000; }
#ofertaPrazo .btn--pulsa{
  background:#feec34; border-color:#feec34;
  -webkit-animation:btnPulsa 3s ease-in-out infinite;
          animation:btnPulsa 3s ease-in-out infinite;
  will-change:transform;
}
#ofertaPrazo .btn--pulsa:hover,
#ofertaPrazo .btn--pulsa:focus{
  background:#fff; border-color:#fff;
  -webkit-animation-play-state:paused; animation-play-state:paused;
}
#ofertaPrazo .btn--pulsa:hover .btn__texto,
#ofertaPrazo .btn--pulsa:focus .btn__texto{ color:#000; }
/* a seta do botão é desenhada com a cor do texto: no amarelo ela vira preta */
#ofertaPrazo .btn--pulsa .btn__seta{ border-color:#000; }

@-webkit-keyframes btnPulsa{
  0%   { -webkit-transform:scale(1);    box-shadow:0 0 0 0 rgba(254,236,52,.55); }
  55%  { -webkit-transform:scale(1.02); box-shadow:0 0 0 16px rgba(254,236,52,0); }
  100% { -webkit-transform:scale(1);    box-shadow:0 0 0 0 rgba(254,236,52,0); }
}
@keyframes btnPulsa{
  0%   { transform:scale(1);    box-shadow:0 0 0 0 rgba(254,236,52,.55); }
  55%  { transform:scale(1.02); box-shadow:0 0 0 16px rgba(254,236,52,0); }
  100% { transform:scale(1);    box-shadow:0 0 0 0 rgba(254,236,52,0); }
}

@media (prefers-reduced-motion: reduce){
  #ofertaPrazo .btn--pulsa{ -webkit-animation:none; animation:none; }
}

/* ==========================================================================
   AS SETAS DOS DEPOIMENTOS

   Ficam sobre as bordas da faixa, sem tomar espaço dela. São redondas,
   pretas de traço sobre o branco da sessão, e crescem um pouco ao passar o
   mouse. No celular elas continuam existindo, um pouco menores: quem prefere
   tocar no botão em vez de arrastar também consegue.
   ========================================================================== */
.depoimentos__palco{ position:relative; }

.depoNav{
  position:absolute; top:38%; z-index:4;
  width:46px; height:46px; padding:0; margin:0;
  border:2px solid #111; border-radius:50%;
  background:#fff; color:#111; cursor:pointer;
  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:.22s ease-in; transition:.22s ease-in;
  box-shadow:0 6px 20px rgba(0,0,0,.16);
}
.depoNav--antes{ left:6px; }
.depoNav--depois{ right:6px; }
.depoNav:hover, .depoNav:focus{
  background:#feec34; border-color:#feec34; color:#000;
  -webkit-transform:scale(1.07); transform:scale(1.07);
}
.depoNav[hidden]{ display:none; }

/* a seta é um V desenhado com duas bordas, girado */
.depoNav span{
  display:block; width:11px; height:11px;
  border-right:2.5px solid currentColor;
  border-bottom:2.5px solid currentColor;
}
.depoNav--antes span{
  -webkit-transform:rotate(135deg); transform:rotate(135deg);
  margin-left:4px;
}
.depoNav--depois span{
  -webkit-transform:rotate(-45deg); transform:rotate(-45deg);
  margin-right:4px;
}

/* o tema pinta qualquer button; estas regras trazem o pai junto para o peso
   empatar e o desenho daqui valer */
.depoimentos .depoNav{ background:#fff; border-color:#111; }
.depoimentos .depoNav:hover,
.depoimentos .depoNav:focus{ background:#feec34; border-color:#feec34; }

@media (max-width:640px){
  .depoNav{ width:40px; height:40px; top:34%; }
  .depoNav--antes{ left:4px; }
  .depoNav--depois{ right:4px; }
}

/* os itens da oferta pedem um vão maior que o do tema */
#ofertaPrazo .ofertaItens{ gap:18px !important; }

/* ==========================================================================
   A DOBRA DO AUTOR EM 16x9 NO COMPUTADOR

   As fotos do fundo são fotos de trabalho: sala cheia, palco, mesa de
   autógrafo. Numa faixa baixa e larga elas viravam uma tira: dava para ver
   que havia gente ali, não dava para ver quem nem o quê.

   Com a dobra em 16x9, a foto aparece na proporção em que foi tirada e o
   conteúdo fica centrado no meio dela. É a mesma imagem, com espaço para
   ser vista.

   A proporção é escrita em duas formas de propósito. A primeira, com
   padding em porcentagem numa camada invisível, funciona em qualquer
   navegador, inclusive o de dentro do Instagram. A segunda usa
   `aspect-ratio` e, onde ele existe, substitui a primeira. O texto tem
   altura mínima garantida: se um dia entrar credencial demais, a dobra
   cresce em vez de cortar.

   No celular nada disso vale: lá a dobra continua com a altura do conteúdo,
   que é como você pediu.
   ========================================================================== */
@media (min-width:901px){
  .autor{
    position:relative;
    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;
    padding-top:64px; padding-bottom:64px;
  }
  /* a camada que segura a proporção, sem conteúdo dentro */
  .autor::before{
    content:''; display:block; width:0;
    padding-top:56.25%;   /* 9 / 16 */
  }
  @supports (aspect-ratio: 16 / 9){
    .autor::before{ display:none; }
    .autor{ aspect-ratio:16 / 9; }
  }
  .autor__interno{ width:100%; }
}

/* ==========================================================================
   O BANNER DAS MARCAS EM QUATRO COLUNAS (COMPUTADOR) E SEIS (CELULAR)

   O bloco de destaque tinha duas colunas: uma marca grande e duas capas
   embaixo. Pouco material por bloco, e a tela mostrava sempre a mesma coisa.

   Agora o bloco leva dois destaques e quatro capas, doze casas, que fecham
   exatamente nas duas telas:

     · computador: quatro colunas por três faixas. Um destaque em cima à
       esquerda, o outro embaixo à direita, e as capas fechando os cantos.
       Um alto, o outro baixo: é a alternância pedida, dentro do bloco.
     · celular: seis colunas por duas faixas. Destaque, coluna dupla,
       destaque, coluna dupla, na ordem pedida, sem repetir projeto.

   Nenhuma casa fica vazia em nenhuma das duas contas, e é por isso que o
   número de peças por bloco é doze e não outro qualquer.
   ========================================================================== */
@supports (display: grid){
  .esteira__bloco--4{
    grid-template-columns:repeat(4, calc(var(--u) * 16 / 9));
    grid-template-rows:repeat(3, var(--u));
  }
  /* 1 destaque · 2,3 as capas dele · 4 destaque · 5,6 as capas do segundo */
  .esteira__bloco--4 > *:nth-child(1){ grid-column:1 / span 2; grid-row:1 / span 2; }
  .esteira__bloco--4 > *:nth-child(2){ grid-column:1; grid-row:3; }
  .esteira__bloco--4 > *:nth-child(3){ grid-column:2; grid-row:3; }
  .esteira__bloco--4 > *:nth-child(4){ grid-column:3 / span 2; grid-row:2 / span 2; }
  .esteira__bloco--4 > *:nth-child(5){ grid-column:3; grid-row:1; }
  .esteira__bloco--4 > *:nth-child(6){ grid-column:4; grid-row:1; }

  /* no bloco seguinte a dupla troca de lado, para a esteira não virar um
     padrão previsível: o primeiro destaque desce, o segundo sobe */
  .esteira__bloco--baixo.esteira__bloco--4 > *:nth-child(1){ grid-row:2 / span 2; }
  .esteira__bloco--baixo.esteira__bloco--4 > *:nth-child(2){ grid-row:1; }
  .esteira__bloco--baixo.esteira__bloco--4 > *:nth-child(3){ grid-row:1; }
  .esteira__bloco--baixo.esteira__bloco--4 > *:nth-child(4){ grid-row:1 / span 2; }
  .esteira__bloco--baixo.esteira__bloco--4 > *:nth-child(5){ grid-row:3; }
  .esteira__bloco--baixo.esteira__bloco--4 > *:nth-child(6){ grid-row:3; }
}

/* a peça um pouco menor no computador: com quatro colunas por bloco, cabe
   mais marca na tela sem que nenhuma vire miniatura */
.esteira{ --u:150px; --g:12px; }

@media (max-width:900px){
  /* seis colunas por duas faixas, na ordem: destaque, dupla, destaque, dupla */
  @supports (display: grid){
    .esteira__bloco--4,
    .esteira__bloco--baixo.esteira__bloco--4{
      grid-template-columns:repeat(6, calc(var(--u) * 16 / 9));
      grid-template-rows:repeat(2, var(--u));
    }
    .esteira__bloco--4 > *:nth-child(1),
    .esteira__bloco--baixo.esteira__bloco--4 > *:nth-child(1){ grid-column:1 / span 2; grid-row:1 / span 2; }
    .esteira__bloco--4 > *:nth-child(2),
    .esteira__bloco--baixo.esteira__bloco--4 > *:nth-child(2){ grid-column:3; grid-row:1; }
    .esteira__bloco--4 > *:nth-child(3),
    .esteira__bloco--baixo.esteira__bloco--4 > *:nth-child(3){ grid-column:3; grid-row:2; }
    .esteira__bloco--4 > *:nth-child(4),
    .esteira__bloco--baixo.esteira__bloco--4 > *:nth-child(4){ grid-column:4 / span 2; grid-row:1 / span 2; }
    .esteira__bloco--4 > *:nth-child(5),
    .esteira__bloco--baixo.esteira__bloco--4 > *:nth-child(5){ grid-column:6; grid-row:1; }
    .esteira__bloco--4 > *:nth-child(6),
    .esteira__bloco--baixo.esteira__bloco--4 > *:nth-child(6){ grid-column:6; grid-row:2; }
  }

  /* o destaque passa a caber inteiro na tela do celular, com a coluna dupla
     espiando ao lado: é ela que diz que a esteira continua */
  .esteira{ --u:104px; --g:9px; }
  .marcaPeca__nome{ font-size:9px; padding:5px 8px; left:8px; bottom:8px; }
}

@media (max-width:520px){
  .esteira{ --u:99px; --g:8px; }
}

/* ==========================================================================
   AS SETAS DOS DEPOIMENTOS: MAIS VISÍVEIS, E SEMPRE AS DUAS

   Elas existiam, mas passavam despercebidas: brancas sobre fundo branco,
   pequenas, e a seta da ponta em que a faixa estava sumia, no primeiro
   olhar existia uma seta só, o que não parece navegação, parece enfeite.

   Agora as duas ficam sempre no lugar enquanto houver o que rolar, em
   amarelo com traço preto, do tamanho de um alvo de dedo. A que aponta para
   a ponta já alcançada fica apagada: continua dizendo onde é o fim, sem
   desaparecer.
   ========================================================================== */
/* o tema do site pinta qualquer <button>, e essas regras dele carregam o pai
   junto no seletor, por isso aqui também: sem o pai, o canto redondo e a
   cor voltam a ser os do tema e o botão vira um quadrado */
.depoimentos .depoNav,
.depoNav{
  width:52px; height:52px; top:36%;
  background:#feec34; border:2px solid #111; color:#000;
  border-radius:50%; padding:0;
  box-shadow:0 8px 22px rgba(0,0,0,.22);
  opacity:1;
}
.depoNav--antes{ left:10px; }
.depoNav--depois{ right:10px; }
.depoimentos .depoNav:hover,
.depoimentos .depoNav:focus,
.depoNav:hover, .depoNav:focus{
  background:#111; border-color:#111; color:#feec34;
  -webkit-transform:scale(1.08); transform:scale(1.08);
}
/* a seta em si: duas bordas de um quadrado, giradas, o V. Com o pai no
   seletor para o tema não apagar as bordas do <span> dentro do botão. */
.depoimentos .depoNav span,
.depoNav span{
  display:block; width:12px; height:12px;
  border:0;
  border-right:3px solid currentColor;
  border-bottom:3px solid currentColor;
  background:none;
}
.depoimentos .depoNav--antes span,
.depoNav--antes span{
  -webkit-transform:rotate(135deg); transform:rotate(135deg); margin-left:5px;
}
.depoimentos .depoNav--depois span,
.depoNav--depois span{
  -webkit-transform:rotate(-45deg); transform:rotate(-45deg); margin-right:5px;
}

/* a ponta já alcançada: continua visível, mas sem chamar */
.depoimentos .depoNav--fim,
.depoNav--fim{
  background:#fff; border-color:#c9c9c2; color:#9b9b93;
  box-shadow:none; cursor:default;
}
.depoimentos .depoNav--fim:hover,
.depoNav--fim:hover{
  background:#fff; border-color:#c9c9c2; color:#9b9b93;
  -webkit-transform:none; transform:none;
}

@media (max-width:640px){
  .depoimentos .depoNav,
  .depoNav{ width:46px; height:46px; top:34%; }
  .depoNav--antes{ left:6px; }
  .depoNav--depois{ right:6px; }
}

/* ==========================================================================
   "COM TUDO O QUE ELA PRECISA PARA VENDER" VIRA SUBTÍTULO

   As duas linhas tinham o mesmo tamanho e o mesmo peso, então brigavam: a
   segunda não estava explicando a primeira, estava competindo com ela.

   Agora o título é "Sua marca completa" e a linha amarela é o subtítulo , 
   menor, com o mesmo grifo, logo abaixo. A hierarquia fica clara em um
   olhar, que é o que um subtítulo tem de fazer.
   ========================================================================== */
.marcaCompleta .marcaCompleta__titulo{ margin:0 0 14px; }

/* o mesmo par de todas as dobras: título em Anton, subtítulo em Ubuntu, sem
   tarja. A tarja amarela era um terceiro elemento disputando a atenção com
   o título logo acima dele. */
.marcaCompleta .marcaCompleta__subtitulo{
  font-family:'Ubuntu','Open Sans',system-ui,sans-serif;
  font-weight:400; font-size:16px; line-height:1.6;
  letter-spacing:0; text-transform:none; color:#4a4a44;
  text-align:center; max-width:640px; margin:0 auto 52px;
}

@media (max-width:900px){
  .marcaCompleta .marcaCompleta__titulo{ margin-bottom:12px; }
  .marcaCompleta .marcaCompleta__subtitulo{ font-size:15px; margin-bottom:36px; }
}
@media (max-width:600px){
  .marcaCompleta .marcaCompleta__subtitulo{ font-size:14px; margin-bottom:30px; }
}

/* ==========================================================================
   O VÍDEO E A CAPA, UM SOBRE O OUTRO, NÃO LADO A LADO

   O quadro dos banners pretos é uma caixa flexível centralizada. Dentro dela
   moram duas coisas: a capa (uma imagem) e o vídeo. A capa é o que se vê
   antes do clique; o vídeo fica por baixo, no mesmo lugar.

   O vídeo estava preso à borda esquerda enquanto a capa ficava centralizada.
   Enquanto os dois tinham o mesmo formato quase quadrado, um cobria o outro
   e ninguém via. Com a capa na proporção certa do vídeo (9x16), a diferença
   apareceu: dois retratos lado a lado, um deles cortado.

   Aqui o vídeo passa a ficar centralizado no mesmo eixo da capa. É a mesma
   imagem no mesmo lugar, e o quadro volta a ser um só.
   ========================================================================== */
.comVideo > .quadroVideo{ position:relative; }
.comVideo > .quadroVideo > img.capaVideo + video.videoArquivo,
.comVideo > .quadroVideo > video.videoArquivo ~ img.capaVideo{
  position:absolute; top:50%; left:50%;
  -webkit-transform:translate(-50%, -50%); transform:translate(-50%, -50%);
  width:auto; height:100%; max-width:100%; max-height:100%;
  margin:0;
}
/* navegador sem transform: o vídeo ainda cobre o quadro inteiro, sem sair
   para o lado */
@supports not ((transform: translate(-50%, -50%)) or (-webkit-transform: translate(-50%, -50%))){
  .comVideo > .quadroVideo > img.capaVideo + video.videoArquivo{
    top:0; left:0; width:100%; height:100%;
    -o-object-fit:contain; object-fit:contain;
  }
}

/* ==========================================================================
   NO CELULAR, TUDO CENTRALIZADO. DE VERDADE DESTA VEZ.

   A regra de centralizar já existia, mas perdia a briga: o cartão de "Sua
   marca completa" é definido como ".marcaCompleta .entregaCartao", com
   alinhamento à esquerda, e uma regra de classe única não passa por cima
   disso. O resultado era o pior possível: eu dizia que estava centralizado
   e o celular mostrava tudo encostado na esquerda.

   Aqui cada regra carrega o mesmo pai que a regra original, e vem depois
   dela no arquivo. Não tem como perder. E o que era texto corrido alinhado
   à esquerda também vai para o centro: no celular, é tudo centralizado.
   ========================================================================== */
@media (max-width:900px){
  .marcaCompleta .entregaCartao{
    -webkit-box-align:center; -ms-flex-align:center; align-items:center;
    text-align:center;
  }
  .marcaCompleta .entregaCartao > *{ text-align:center; }
  .marcaCompleta .entregaCartao__marca{ margin-left:auto; margin-right:auto; }
  .marcaCompleta .entregaCartao__titulo,
  .marcaCompleta .entregaCartao__texto{ width:100%; text-align:center; }
  .marcaCompleta .entregaCartao__selo{
    -ms-flex-item-align:center; align-self:center;
    margin-left:auto; margin-right:auto;
    text-align:center;
  }

  /* a página do projeto: título, ficha, capítulos e parágrafos, tudo no eixo */
  .caso .casoTexto p,
  .caso .casoBloco p,
  .caso .casoBloco__texto,
  .caso .casoBloco__titulo,
  .caso .casoBloco__legenda,
  .caso .casoTexto{ text-align:center; }
  .caso .casoBloco__texto > *{ text-align:center; }
}
@media (max-width:900px){
  /* o título da galeria do projeto ("As peças") também vai para o eixo */
  .caso .casoGaleria__cab{ text-align:center; }
}

/* ==========================================================================
   NO COMPUTADOR, A DOBRA DAS MARCAS TEM NO MÁXIMO 800px DE ALTURA

   A dobra cresce com a largura da janela, na proporção 16x9, até bater em
   800px, e ali para. Numa tela de 1440 ela tem 800; numa de 1920 também.
   O título fica no alto, o botão embaixo, e a esteira ocupa o que sobra.

   O tamanho das peças sai dessa altura: tira-se o que título e botão
   ocupam (277px, com as folgas) e o resto se divide em três faixas. Nunca
   menos de 120px, para uma janela estreita não virar miniatura.
   ========================================================================== */
@media (min-width:901px){
  .hero{
    --hero-h:min(56.25vw, 800px);
    min-height:var(--hero-h);
    padding-top:48px; padding-bottom:48px;
    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-pack:center; -ms-flex-pack:center; justify-content:center;
  }
  .hero .hero__interno{ width:100%; }
  .hero .hero__texto{ margin-bottom:24px; }
  .hero .hero__titulo{ margin-bottom:0; }
  .hero .hero__depois{ padding-top:24px; }
  .hero .esteira{
    --u:150px;
    --u:max(120px, calc((var(--hero-h) - 277px - 2 * var(--g)) / 3));
  }
}

/* ==========================================================================
   NO CELULAR, A MESMA ESTEIRA DEITADA DO COMPUTADOR

   O mural em pé saiu: no celular a esteira anda de lado, da direita para a
   esquerda, igual ao computador, e um pouco mais depressa. O bloco tem seis
   colunas por duas faixas (destaque, dupla, destaque, dupla), com o
   destaque cabendo inteiro na tela e a coluna dupla espiando ao lado. A
   dobra tem a altura do próprio conteúdo, sem forçar tela inteira.
   ========================================================================== */
@media (max-width:900px){
  .hero{
    min-height:0;
    /* a barra do menu é fixa e cobre o alto da tela: o título nasce abaixo dela */
    padding-top:88px; padding-bottom:40px;
    display:block;
  }
  .hero .hero__texto{ margin-bottom:22px; }
  .hero .hero__titulo{ margin-bottom:0; }
  .hero .hero__depois{ padding-top:26px; }
  .hero .esteira{ --u:118px; --g:9px; }
  .hero .esteira__trilho{ gap:0; }
  .hero .esteira__copia{ padding-right:var(--g); }
  /* o nome da marca volta, pequeno, porque no celular não existe passar o mouse */
  .hero .marcaPeca__nome{ display:inline-block; opacity:1; }

  /* quem pediu para não ver animação vê a esteira parada e pode rolar dentro */
  @media (prefers-reduced-motion: reduce){
    .hero .esteira{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
    .hero .esteira__trilho{ -webkit-animation:none; animation:none; }
  }
}
@media (max-width:520px){
  .hero .esteira{ --u:112px; --g:8px; }
}

/* a volta ao início da esteira deitada caía meio vão antes do lugar: o
   trilho tinha um vão entre as cópias, e o deslocamento de 50% não contava
   com ele. O vão agora é da própria cópia, e a conta fecha exata. */
@media (min-width:901px){
  .esteira__trilho{ gap:0; }
  .esteira__copia{ padding-right:var(--g); }
}

/* ==========================================================================
   MOVIMENTO: O SITE RESPIRA

   Cada dobra entra na tela como quem chega, não como quem já estava lá: um
   deslize curto de baixo para cima, com o conteúdo aparecendo aos poucos.
   Os cartões e as peças de uma mesma dobra entram um atrás do outro, com
   um atraso pequeno entre eles, que é o que dá a sensação de ritmo.

   Quem marca o que se move é o tema.js (classe "mv" ao carregar, "mv--in"
   quando a peça entra na tela). Sem JavaScript, ou num navegador sem
   IntersectionObserver, nada recebe a classe e tudo nasce visível. Quem
   pediu ao sistema para não ver animação também vê tudo parado.

   As curvas são lentas no fim (ease-out) de propósito: movimento que
   desacelera parece leve; movimento linear parece mecânico.
   ========================================================================== */
.mv{
  opacity:0;
  -webkit-transform:translate3d(0,26px,0);
          transform:translate3d(0,26px,0);
  -webkit-transition:opacity .85s cubic-bezier(.22,.61,.36,1), -webkit-transform .85s cubic-bezier(.22,.61,.36,1);
          transition:opacity .85s cubic-bezier(.22,.61,.36,1), transform .85s cubic-bezier(.22,.61,.36,1);
  -webkit-transition-delay:calc(var(--mv-i, 0) * 90ms);
          transition-delay:calc(var(--mv-i, 0) * 90ms);
  will-change:opacity, transform;
}
.mv--in{
  opacity:1;
  -webkit-transform:none; transform:none;
}
/* depois de entrar, a peça volta a ser uma peça comum: o hover dela (que
   também usa transform) não pode brigar com a transição de entrada */
.mv--feito{ will-change:auto; -webkit-transition-delay:0s; transition-delay:0s; }

/* variações: a foto do autor cresce de leve em vez de subir; o título
   grande sobe um pouco mais, para chegar por último */
.mv--zoom{ -webkit-transform:scale(.96) translate3d(0,14px,0); transform:scale(.96) translate3d(0,14px,0); }
.mv--zoom.mv--in{ -webkit-transform:none; transform:none; }
.mv--lado{ -webkit-transform:translate3d(-28px,0,0); transform:translate3d(-28px,0,0); }
.mv--lado.mv--in{ -webkit-transform:none; transform:none; }

/* ---------- os toques de mouse, mais macios ---------- */
.entregaCartao,
.projeto__foto img,
.ofertaItem,
.autorZeCred,
.marcaPeca,
.depoimento{
  -webkit-transition:-webkit-transform .5s cubic-bezier(.22,.61,.36,1), box-shadow .5s ease, border-color .35s ease, background-color .35s ease, opacity .5s ease;
          transition:transform .5s cubic-bezier(.22,.61,.36,1), box-shadow .5s ease, border-color .35s ease, background-color .35s ease, opacity .5s ease;
}
.entregaCartao:hover{ -webkit-transform:translateY(-5px); transform:translateY(-5px); }
.projeto__link:hover .projeto__foto img{ -webkit-transform:scale(1.04); transform:scale(1.04); }
.autorZeCred:hover .autorZeCred__icone{ -webkit-transform:scale(1.1) rotate(-6deg); transform:scale(1.1) rotate(-6deg); }
.autorZeCred__icone{ -webkit-transition:-webkit-transform .45s cubic-bezier(.22,.61,.36,1); transition:transform .45s cubic-bezier(.22,.61,.36,1); }

/* o botão: sobe um fio e ganha sombra no passar do mouse; a seta já anda */
.btn{
  -webkit-transition:background-color .3s ease, border-color .3s ease, color .3s ease, -webkit-transform .35s cubic-bezier(.22,.61,.36,1), box-shadow .35s ease;
          transition:background-color .3s ease, border-color .3s ease, color .3s ease, transform .35s cubic-bezier(.22,.61,.36,1), box-shadow .35s ease;
}
.btn:hover, .btn:focus{ -webkit-transform:translateY(-2px); transform:translateY(-2px); box-shadow:0 12px 26px -14px rgba(254,236,52,.55); }
.btn__seta{ -webkit-transition:-webkit-transform .35s cubic-bezier(.22,.61,.36,1); transition:transform .35s cubic-bezier(.22,.61,.36,1); }

/* a moldura amarela do retrato flutua devagar, quase imperceptível */
.autorZe__foto::before{
  -webkit-animation:molduraRespira 7s ease-in-out infinite;
          animation:molduraRespira 7s ease-in-out infinite;
}
@-webkit-keyframes molduraRespira{
  0%, 100%{ -webkit-transform:translate3d(0,0,0); }
  50%{ -webkit-transform:translate3d(-4px,5px,0); }
}
@keyframes molduraRespira{
  0%, 100%{ transform:translate3d(0,0,0); }
  50%{ transform:translate3d(-4px,5px,0); }
}

/* o menu de tela cheia: os itens entram um depois do outro */
#containerMenuAberto a{
  opacity:0; -webkit-transform:translate3d(0,14px,0); transform:translate3d(0,14px,0);
  -webkit-transition:opacity .45s ease, -webkit-transform .45s cubic-bezier(.22,.61,.36,1), color .2s, background-color .2s;
          transition:opacity .45s ease, transform .45s cubic-bezier(.22,.61,.36,1), color .2s, background-color .2s;
}
#containerMenuAberto.mostrar a{ opacity:1; -webkit-transform:none; transform:none; }
#containerMenuAberto.mostrar a:nth-child(1){ -webkit-transition-delay:.08s; transition-delay:.08s; }
#containerMenuAberto.mostrar a:nth-child(2){ -webkit-transition-delay:.16s; transition-delay:.16s; }
#containerMenuAberto.mostrar a:nth-child(3){ -webkit-transition-delay:.24s; transition-delay:.24s; }

/* rolagem suave ao clicar em âncora */
html{ scroll-behavior:smooth; }

@media (prefers-reduced-motion: reduce){
  .mv, .mv--in, .mv--zoom, .mv--lado{ opacity:1; -webkit-transform:none; transform:none; -webkit-transition:none; transition:none; }
  .autorZe__foto::before{ -webkit-animation:none; animation:none; }
  #containerMenuAberto a{ opacity:1; -webkit-transform:none; transform:none; -webkit-transition:none; transition:none; }
  html{ scroll-behavior:auto; }
}

/* ==========================================================================
   QUEM ROLA A PÁGINA É A PÁGINA

   O tema antigo dava altura de 100% ao html e ao body. Com isso o body
   virava uma caixa do tamanho da janela com rolagem própria, e a página
   em si nunca rolava: o navegador não guardava a posição ao voltar, a
   barra de endereço do celular não recolhia, a rolagem suave das âncoras
   não funcionava e os avisos de "entrou na tela" chegavam atrasados.
   Agora o body cresce com o conteúdo e a rolagem é a normal.
   ========================================================================== */
html, body{ height:auto; min-height:100%; }

/* ==========================================================================
   O TÍTULO DA OFERTA RESPIRA COMO OS OUTROS
   Estava com entrelinha de .94, mais apertada que a de todos os outros
   títulos do site (1.02). Em três linhas, as letras quase se tocavam.
   Mesma entrelinha do padrão, e a linha amarela do prazo com um respiro
   extra em cima, porque é maior que as outras.
   ========================================================================== */
#ofertaPrazo .ofertaTitulo{ line-height:1.02; }
#ofertaPrazo .ofertaTitulo em{ line-height:1.02; margin-top:6px; }