/* ==========================================================================
   A OFERTA COM VÍDEO (inc/oferta-video.php)
   A oferta "Sua marca pronta e anunciando em 30 dias" com o vídeo em pé
   ao lado do título. As classes de base (ofertaCaixa, ofertaChapeu,
   ofertaTitulo, ofertaFrase, ofertaLista, ofertaItem, ofertaBotoes,
   ofertaRodape) vêm do ajustes.css, o mesmo nos dois sites; aqui entra só
   o que muda: a dobra em si e a dupla título + vídeo.
   Portátil: copie este arquivo e o inc/oferta-video.php para a TOVAP.
   ========================================================================== */
.ofertaVideo{
  background:#000; width:100%; margin:0;
  padding:92px 20px 86px; -webkit-box-sizing:border-box; box-sizing:border-box;
  position:relative; overflow:hidden;
}
/* a faixa amarela fina em cima e embaixo, como na oferta original */
.ofertaVideo::before, .ofertaVideo::after{ content:''; position:absolute; left:0; right:0; height:6px; background:#feec34; }
.ofertaVideo::before{ top:0; }
.ofertaVideo::after{ bottom:0; }
/* quando é o primeiro bloco da página, a barra do menu fica por cima: mais folga */
.ofertaVideo:first-child, .zp > .ofertaVideo:first-child{ padding-top:128px; }

.ofertaVideo .ofertaCaixa{ max-width:1120px; }
.ofertaVideo .ofertaBotoes{ margin:0 0 26px; }
.ofertaVideo .ofertaRodape{ margin:0; }

/* ---------- a dupla: o título de um lado, o vídeo do outro ---------- */
.ofertaVideo__topo{
  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;
  gap:64px; margin:0 0 48px; text-align:left;
}
.ofertaVideo__texto{ -webkit-box-flex:1; -ms-flex:1 1 520px; flex:1 1 520px; min-width:0; max-width:640px; }
.ofertaVideo--comVideo .ofertaVideo__texto{ text-align:left; }
.ofertaVideo--comVideo .ofertaFrase{ margin-left:0; margin-right:0; }
.ofertaVideo:not(.ofertaVideo--comVideo) .ofertaVideo__texto{ text-align:center; margin:0 auto; }
.ofertaVideo .ofertaTitulo{ margin-bottom:26px; }
/* o tema antigo pinta h1/h2 de preto com mais peso; aqui o título é branco e o destaque amarelo */
.zp .ofertaVideo h1.ofertaTitulo, .zp .ofertaVideo h2.ofertaTitulo, .ofertaVideo h1.ofertaTitulo, .ofertaVideo h2.ofertaTitulo{ color:#fff; }
.zp .ofertaVideo .ofertaTitulo em, .ofertaVideo .ofertaTitulo em{ color:#feec34; font-style:normal; }
.zp .ofertaVideo .ofertaChapeu, .zp .ofertaVideo .ofertaFrase, .zp .ofertaVideo .ofertaItem__texto, .zp .ofertaVideo .ofertaRodape{ text-shadow:none; }
.ofertaVideo .ofertaFrase{ margin-bottom:0; }

/* o vídeo: a mesma moldura em pé dos outros banners do site (cantos de 28px,
   o bloco amarelo deslocado atrás), na largura de um celular */
.ofertaVideo__video{
  -webkit-box-flex:0; -ms-flex:0 0 320px; flex:0 0 320px; width:320px; position:relative;
}
.ofertaVideo__video::before{
  content:''; position:absolute; left:-18px; top:18px; right:18px; bottom:-18px;
  background:#feec34; border-radius:30px;
}
.ofertaVideo__video .quadroVideo{
  position:relative; border-radius:28px; overflow:hidden; background:#111;
  -webkit-box-shadow:0 40px 80px -30px rgba(0,0,0,.8); box-shadow:0 40px 80px -30px rgba(0,0,0,.8);
}

@media (max-width:900px){
  .ofertaVideo{ padding:70px 18px 64px; }
  .ofertaVideo:first-child, .zp > .ofertaVideo:first-child{ padding-top:104px; }
  .ofertaVideo__topo{
    -webkit-box-orient:vertical; -webkit-box-direction:normal; -ms-flex-direction:column; flex-direction:column;
    gap:44px; margin-bottom:40px;
  }
  .ofertaVideo--comVideo .ofertaVideo__texto{ text-align:center; }
  .ofertaVideo--comVideo .ofertaFrase{ margin-left:auto; margin-right:auto; }
  .ofertaVideo__video{ -ms-flex:0 0 auto; flex:0 0 auto; width:min(300px, 78vw); }
}
@media (max-width:560px){
  .ofertaVideo .ofertaTitulo{ font-size:46px; }
}

/* ---------- os dois botões, iguais aos da TOVAP ----------
   O principal é o único cheio de amarelo e o único que pulsa; o segundo é
   só o traço branco. Os seletores com #ofertaPrazo existem para vencer as
   regras de fundo escuro do ajustes.css, que pintam o principal de branco. */
#ofertaPrazo .btn--pulsa, #ofertaPrazo .btn--pulsa .btn__texto,
.zp .ofertaVideo .btn--pulsa, .zp .ofertaVideo .btn--pulsa .btn__texto{ color:#000; }
#ofertaPrazo .btn--pulsa, .zp .ofertaVideo .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-visible,
.zp .ofertaVideo .btn--pulsa:hover, .zp .ofertaVideo .btn--pulsa:focus-visible{ background:#fff; border-color:#fff; color:#000; -webkit-animation-play-state:paused; animation-play-state:paused; }
#ofertaPrazo .btn--pulsa:hover .btn__texto, #ofertaPrazo .btn--pulsa:focus-visible .btn__texto,
.zp .ofertaVideo .btn--pulsa:hover .btn__texto, .zp .ofertaVideo .btn--pulsa:focus-visible .btn__texto{ color:#000; }
#ofertaPrazo .btn--pulsa .btn__seta, .zp .ofertaVideo .btn--pulsa .btn__seta{ border-color:#000; }

#ofertaPrazo .btn--secundario, #ofertaPrazo .btn--secundario .btn__texto,
.zp .ofertaVideo .btn--secundario, .zp .ofertaVideo .btn--secundario .btn__texto{ background:transparent; color:#fff; }
#ofertaPrazo .btn--secundario, .zp .ofertaVideo .btn--secundario{ border:2px solid #fff; box-shadow:none; -webkit-animation:none; animation:none; }
#ofertaPrazo .btn--secundario:hover, #ofertaPrazo .btn--secundario:focus-visible,
.zp .ofertaVideo .btn--secundario:hover, .zp .ofertaVideo .btn--secundario:focus-visible{ background:transparent; border-color:#feec34; color:#feec34; }
#ofertaPrazo .btn--secundario:hover .btn__texto, #ofertaPrazo .btn--secundario:focus-visible .btn__texto,
.zp .ofertaVideo .btn--secundario:hover .btn__texto, .zp .ofertaVideo .btn--secundario:focus-visible .btn__texto{ color:#feec34; }
#ofertaPrazo .btn--secundario .btn__seta, .zp .ofertaVideo .btn--secundario .btn__seta{ border-color:currentColor; }

@-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, .zp .ofertaVideo .btn--pulsa{ -webkit-animation:none; animation:none; } }