/* ==========================================================================
   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;
  width:100%; aspect-ratio:16 / 9;
}
.quadroVideo.vertical{ aspect-ratio:9 / 16; }
.quadroVideo > img.capaVideo,
.quadroVideo > video,
.quadroVideo > iframe,
.quadroVideo .alvoVideo,
.quadroVideo .alvoVideo iframe{
  position:absolute; inset:0; width:100%; height:100%;
  border:0; display:block; object-fit:cover;
}

/* botão de tocar: o mesmo círculo com triângulo que o site já usa */
.tocarVideo{
  position:absolute; inset: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;
}
.voltarFlutuante:hover{ background:#feec34; color:#000; }
.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 informação principal da home: prazo, o que entra e como pedir.
   Preto, Anton grande, prazo em amarelo. Mesma linguagem do resto do site.
   ========================================================================== */
#ofertaPrazo{ padding:0 10px 4em; }
.ofertaCaixa{
  background:#000; color:#fff; border-radius:10px;
  padding:5em 4em; text-align:center;
}
.ofertaChapeu{
  font-family:'Open Sans', sans-serif; font-weight:700;
  font-size:1.6em; letter-spacing:.22em; text-transform:uppercase;
  color:#feec34; margin:0 0 1.2em;
}
.ofertaTitulo{
  font-family:'Anton', Impact, sans-serif; font-weight:400;
  font-size:6.4em; line-height:1.02; text-transform:uppercase;
  color:#fff; margin:0;
}
.ofertaTitulo em{ font-style:normal; color:#feec34; }
.ofertaLista{
  display:flex; flex-wrap:wrap; justify-content:center;
  gap:.9em 2.4em; margin:2.4em 0 0; padding:0; list-style:none;
}
.ofertaLista li{
  font-family:'Open Sans', sans-serif; font-weight:700;
  font-size:1.9em; line-height:1.4; color:#fff;
  display:inline-flex; align-items:center; gap:.6em;
}
.ofertaLista li::before{
  content:''; flex:none; box-sizing:border-box;
  width:1.15em; height:1.15em; border-radius:50%;
  border:2px solid #feec34;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23feec34' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:center; background-size:62%;
}
.ofertaBotoes{
  display:flex; flex-wrap:wrap; justify-content:center; gap:1.2em;
  margin-top:2.8em;
}
.ofertaBotoes .botaoContorno,
a.botaoContorno{
  border:3px solid #fff; color:#fff !important; background:transparent;
  transition:.3s ease-in;
}
.ofertaBotoes .botaoContorno:hover,
a.botaoContorno:hover{ background:#fff; color:#000 !important; border-radius:50px; }

@media (max-width:900px){
  .ofertaCaixa{ padding:4em 2.4em; }
  .ofertaTitulo{ font-size:5.4em; }
  .ofertaLista{ gap:.8em 1.6em; }
  .ofertaLista li{ font-size:2.2em; }
  .ofertaChapeu{ font-size:1.9em; }
}
@media (max-width:640px){
  #ofertaPrazo{ padding:0 10px 3em; }
  .ofertaCaixa{ padding:3em 1.6em; }
  .ofertaTitulo{ font-size:5em; line-height:1.06; }
  .ofertaChapeu{ font-size:2.2em; letter-spacing:.16em; }
  .ofertaLista{ flex-direction:column; align-items:flex-start; text-align:left; gap:.7em; }
  .ofertaLista li{ font-size:2.6em; }
  .ofertaBotoes{ flex-direction:column; align-items:stretch; }
  .ofertaBotoes .js-button{ width:100%; text-align:center; }
}


/* ==========================================================================
   TIPOGRAFIA
   Anton só nos títulos. O texto corrido é Ubuntu, que o tema já carrega.
   ========================================================================== */
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;
}
h1, h2, h3,
.tituloLinha, .ofertaTitulo,
.elementor-portfolio-item__title,
.cartaoHome h4, .itemPortfolio .boxTexto h4{
  font-family:'Anton', Impact, sans-serif; font-weight:400;
}
/* textos de apoio que o Elementor monta como título continuam em Ubuntu */
.duasColunas .direita h4,
.itemBlog p, .ofertaLista li, .listaEntrega li, .chamadaHome{
  font-family:'Ubuntu', 'Open Sans', system-ui, sans-serif;
}


/* ==========================================================================
   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; inset:0; width:100%; height:100%;
  object-fit:cover; display:block; background:#000;
}
.quadroVideo.tocando > video.videoArquivo{ object-fit:contain; }
/* o widget de vídeo do Elementor não existe mais; sobra só o nosso quadro */
.elementor-widget-video, .elementor-wrapper.elementor-open-inline{ display:contents; }

/* 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 */
.e-con .quadroVideo,
.e-con-inner .quadroVideo{ width:100%; min-width:100%; flex:1 1 100%; }
.e-con:has(> .quadroVideo){ width:100%; min-width:0; }

/* o bloco que contém um player nunca fica estreito demais */
.comVideo{ min-width:220px; }
@media (max-width:900px){
  .e-con-inner{ flex-wrap:wrap; }
  .comVideo{ width:100% !important; min-width:100% !important; flex:1 1 100% !important; }
}