.vitrine-industria {

  background-image: url('<?php echo get_template_directory_uri(); ?>/assets/images/site/bg-industria.jpg');

  background-size: cover;

  background-position: center;

  height: 100vh;

}

.eleitah2 {
    color: #864AF9 !important;
    font-size: 35px !important;
    font-weight: 700 !important;
    line-height: 50px !important;
    text-transform: uppercase !important;
}

@media screen and (max-width: 1024px) {
    .eleitah2 {
        font-size: 30px !important;
        line-height: 40px !important;
    }
}


@media (max-width: 768px) {

  .vitrine-industria {

    background-image: url('<?php echo get_template_directory_uri(); ?>/assets/images/site/bg-industria-mobile.jpg') !important;

    min-height: 100dvh;

  }

}



/* Esconde elementos mobile por padrão */

.mobile-only {

  display: none;

}



/* Em telas menores que 768px, mostra o título mobile e esconde o desktop */

@media screen and (max-width: 768px) {

  .desktop-only {

      display: none;

  }

  .mobile-only {

      display: block;

  }

}



.img-industria-header {

  width: 100%;

  max-width: 100%;

  padding: 1rem 0; /* ou ajuste conforme o espaçamento desejado */

  box-sizing: border-box;

  text-align: center; /* Centraliza a imagem, opcional */

  margin-top: auto;

  padding-bottom: 1rem;

}



.img-industria-header img {

  width: 100%;

  height: auto;

  display: block;

  max-width: 600px;

  margin: 0 auto;

  border: 1px solid orange;

}



/* Título principal padrão (reutilizável) */

.titulo-section {

  color: #864AF9;

  font-size: 40px;

  font-weight: 700;

  line-height: 50px;

  margin: 0 0 20px;

  text-transform: uppercase;

}



@media (max-width: 768px) {

  .titulo-section  {

    font-size: 30px !important;
    text-align: center;

  }

}

@media (max-width: 768px) {
  body.page-template-page-agencia-inbound-v2 .clientes h2 {
    font-size: 30px !important;
    text-align: center;
    padding: 0 20px;
  }
}

.footer-nav-item {

  color: #fff;

  font-size: 14px;

  font-weight: 500;

  line-height: 40px;

  text-transform: uppercase;

  transition: color 0.5s ease;

}



.footer-nav-item:hover {

  color: #864AF9;

}



/*Section 10XP*/

.dezxpv {

  padding: 60px 0;

}



.dezxpv .container {

  display: flex;

  justify-content: center;

}



.dezxpv-content {

  display: flex;

  align-items: center;

  justify-content: center;

  gap: 40px;

  flex-wrap: wrap;

}



.dezxpv-image img {

  max-width: 100%;

  height: auto;

  display: block;

}



.dezxpv-image .mobile {

  display: none;

}



.dezxpv-text {

  max-width: 600px;

  color: white;

}



.dezxpv-text p {

  margin-bottom: 20px;

}



.dezxpv-text h2 {

  color: #864AF9;

  font-size: 40px;

  font-weight: 700;

  line-height: 50px;

  margin: 0 0 20px;

  text-transform: uppercase;

}



/* Responsivo */

@media (max-width: 768px) {

  .dezxpv-content {

      flex-direction: column;

      text-align: center;

  }



  .dezxpv-image .desktop {

      display: none;

  }



  .dezxpv-image .mobile {

      display: block;

      margin-bottom: 20px;

  }

}



/* Estilo para os títulos h3 nos cards */

.card-solucao h3 {

  color: #fff;

  font-size: 16px;

  line-height: 22px;

  margin-bottom: 15px;

  text-transform: uppercase;

}



/* Wrapper geral da seção */

.solucoes-empresa {

  padding: 10px 20px;

  background-color: #0d0d0d;

  text-align: center;

  color: #fff;

}



/* Parágrafos e destaque */

.solucoes-empresa .subtexto {

  font-size: 16px;

  line-height: 24px;

  color: #ccc;

  max-width: 800px;

  margin: 0 auto 20px;

}



.subtexto {

  margin-bottom: 20px;

}



.solucoes-empresa .destaque {

  font-size: 18px;

  font-weight: 600;

  color: #864AF9 !important;

  margin-bottom: 40px;

}


.card-solucao a {

  color: #864AF9;

  font-size: 14px;

  text-transform: uppercase;

  font-weight: bold;

  text-decoration: none;

  margin-top: auto;

  display: inline-block;

}



/* Cada card com layout fixo e altura igualada */

.card-solucao {

  display: flex;

  flex-direction: column;

  justify-content: space-between;

  border: 1px solid #864AF9;

  border-radius: 20px;

  padding: 30px 20px;

  background-color: #0d0d0d;

  color: #fff;

  transition: transform 0.3s ease;

  height: 100%;

  min-height: 200px;

}



/* Animação suave ao hover */

.card-solucao:hover {

  transform: translateY(-5px);

}



/* Ícones */

.card-solucao img {

  height: 70px;

  width: 70px;

  margin: 0 auto 20px;

  display: block;

}



/* "Saiba mais" sempre no fim */

.card-solucao a {

  color: #864AF9;

  font-size: 14px;

  text-transform: uppercase;

  font-weight: bold;

  text-decoration: none;

  margin-top: auto;

  display: inline-block;

}



.cards-solucoes {

  display: grid;

  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));

  gap: 30px;

  max-width: 1100px;

  margin: 0 auto;

  margin-bottom: 30px;

}





@media (max-width: 768px) {

  .cards-solucoes {

    grid-template-columns: 1fr;

  }



  .card-solucao {

    max-width: 100%;

  }

}



.area-carrossel-servicos {

  padding: 60px 20px;

  background-color: #0d0d0d;

  color: #fff;

  text-align: center;

}



.container-carrossel {

  width: 100%;

  max-width: 1200px;

  margin: 0 auto 20px;

  padding: 0 20px;

}



/* --- Cards --- */

.carousel-servicos .item {

  background-color: transparent;

  border: 1px solid #864AF9;

  border-radius: 20px;

  padding: 30px 20px;

  color: #fff;

  text-align: left;

  height: 100%;

  min-height: 500px;

  display: flex;

  flex-direction: column;

  justify-content: flex-start;

  transition: all 0.3s ease;

  gap: 15px;

  position: relative;

}



/* --- Wrapper Ícone + Título --- */

.header-item {

  display: flex;

  align-items: center;

  gap: 15px;

  margin-bottom: 20px;

}



.icon-wrapper {

  background-color: #864AF9;

  width: 64px;

  height: 64px;

  border-radius: 12px;

  display: flex;

  align-items: center;

  justify-content: center;

}



.icon-wrapper img {

  width: 32px;

  height: 32px;

  object-fit: contain;

}



/* --- Título --- */

.header-item h3 {

  font-size: 20px;

  font-weight: 700;

  text-transform: uppercase;

  color: #864AF9;

  margin: 0;

}



/* --- Texto --- */

.carousel-servicos .item p {

  font-size: 14px;

  color: #ccc;

  margin-bottom: 20px;

}



/* --- Saiba Mais --- */

.carousel-servicos .item a {

  color: #864AF9;

  font-weight: bold;

  text-transform: uppercase;

  font-size: 14px;

  text-decoration: none;

  margin-top: auto;

  display: inline-block;

}



/* --- Hover nos cards --- */

.carousel-servicos .item:hover {

  background-color: #864AF9;

  border-color: #864AF9;

}



.carousel-servicos .item:hover h3,

.carousel-servicos .item:hover a {

  color: #fff;

}



.carousel-servicos .item:hover p {

  color: #000 !important;

}



.carousel-servicos .item:hover .icon-wrapper {

  background-color: #fff;

}



.carousel-servicos .item:hover .icon-wrapper img {

  filter: brightness(0) saturate(100%) invert(17%) sepia(89%) saturate(7166%) hue-rotate(255deg) brightness(92%) contrast(101%);

}



/* --- Ajustes no slick --- */

.slick-slide {

  margin: 0 15px;

}



.slick-list {

  margin: 0 -15px;

}



.slick-dots {

  margin-top: 30px;

}



.slick-dots li button:before {

  font-size: 12px;

  color: #864AF9;

  opacity: 0.3;

}



.slick-dots li.slick-active button:before {

  opacity: 1;

  color: #864AF9;

}



/* --- Setas --- */

.slick-prev, .slick-next {

  color: #864AF9;

  font-size: 30px;

  top: 50%;

  transform: translateY(-50%);

  z-index: 10;

}



.slick-prev {

  left: -40px;

}



.slick-next {

  right: -40px;

}



@media (max-width: 768px) {

  .slick-prev, .slick-next {

    top: 50% !important;
    transform: translateY(-50%) !important;

    left: 10px;

    right: 10px;

  }

}



/*Porque escolher*/

.porque-escolher {

  padding: 60px 20px;

  background-color: #0d0d0d;

  text-align: center;

  color: #fff;

}



.grid-porque {

  display: grid;

  grid-template-columns: repeat(2, 1fr);

  gap: 50px 100px;

  max-width: 1000px;

  margin: 40px auto 0;

}



.item-porque img {

  height: 90px;

  margin: 0 auto 20px;

}



.item-porque h3 {

  font-size: 23px;

  font-weight: 700;

  text-transform: uppercase;

  margin-bottom: 15px;

  color: #ffffff;

}



.item-porque p {

  font-size: 14px;

  color: #cccccc;

  line-height: 24px;

  max-width: 400px;

  margin: 0 auto;

}



@media (max-width: 768px) {

  .grid-porque {

    grid-template-columns: 1fr;

    gap: 40px;

  }

}



/*Depoimentos*/



.depoimentos {

  padding: 60px 20px;

  background-color: #0d0d0d;

  text-align: center;

  color: #fff;

}



.depoimentos-wrapper {

  background-color: #232323;

  border-radius: 30px;

  padding: 60px 40px;

  margin: 40px auto 20px;

  max-width: 1400px;

  position: relative;

}



/*.carousel-depoimentos {

  /* Só controla o carrossel interno */

/*}*/



.item-depoimento {

  text-align: center;

}



.item-depoimento .texto {

  font-size: 16px;

  line-height: 28px;

  margin-bottom: 30px;

}



.logo-cliente {

  max-height: 50px;

  margin: 20px auto;

}



.nome-cliente {

  font-size: 16px;

  font-weight: 700;

  color: #864AF9 !important;

  margin-top: 20px;

}



/* Slick Dots */

.slick-dots {

  margin-top: 30px;

}



.slick-dots li button:before {

  font-size: 12px;

  color: #864AF9;

  opacity: 0.3;

}



.slick-dots li.slick-active button:before {

  opacity: 1;

  color: #864AF9;

}



/* Setas */

.slick-prev, .slick-next {

  color: #864AF9;

  font-size: 30px;

  z-index: 10;

}



.slick-prev {

  left: -50px;

}



.slick-next {

  right: -50px;

}



@media (max-width: 768px) {

  .slick-prev {

    left: -30px;

  }



  .slick-next {

    right: -30px;

  }

}



/*Perguntas Frequentes*/



.faq-section {

  padding: 60px 40px 20px 40px;

  background-color: #0d0d0d;

  color: #fff;

  text-align: center;

}



.container-faq {

  max-width: 1350px;

  margin: 0 auto;

}



.faq-section .titulo-section {

  color: #864AF9;

  font-size: 40px;

  font-weight: 700;

  line-height: 50px;

  margin: 0 0 40px;

  text-transform: uppercase;

}



.faq-question .numero {

  color: #864AF9;

  margin-right: 8px;

  font-weight: bold;

}



.faq-item {

  background-color: #1a1a1a;

  margin-bottom: 10px;

  border-radius: 30px;

  overflow: hidden;

  transition: all 0.3s ease;

}



.faq-question {

  width: 100%;

  text-align: left;

  padding: 20px 30px;

  background: none;

  border: none;

  color: #fff;

  font-size: 16px;

  font-weight: bold;

  cursor: pointer;

  display: flex;

  justify-content: space-between;

  align-items: center;

}



.faq-question:hover {

  background-color: #222;

}



.faq-icon {

  font-size: 24px;

  color: #864AF9;

  font-weight: bold;

  transition: transform 0.3s ease;

}



.faq-answer {

  max-height: 0;

  overflow: hidden;

  background-color: #0d0d0d;

  transition: max-height 0.3s ease;

  padding: 0 30px;

  border-radius: 0 0 30px 30px; /* arredonda a parte de baixo ao abrir */

}



.faq-answer p {

  font-size: 14px;

  line-height: 22px;

  color: #ccc;

  padding: 15px 0;

  margin: 0;

  text-align: left;

}



/* Quando ativo */

.faq-item.active .faq-answer {

  max-height: 400px; /* suficiente para o texto visível */

}



.faq-item.active .faq-icon {

  content: "-";

  transform: rotate(180deg);

}



/*Pronto para impulsionar*/



.cta-roxa {

  background-color: #864AF9;

  padding: 80px 20px;

  text-align: center;

  color: #ffffff;

}



.texto-cta{

  color: #000 !important;

}



.cta-roxa .titulo-cta {

  font-size: 32px;

  font-weight: 700;

  text-transform: uppercase;

  line-height: 42px;

  margin-bottom: 20px;

}



.cta-roxa .texto-cta {

  font-size: 16px;

  line-height: 26px;

  max-width: 700px;

  margin: 0 auto 40px;

}



.botao-cta {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  background-color: #fff;

  color: #864AF9;

  font-size: 16px;

  font-weight: 500;

  text-transform: uppercase;

  text-align: center;

  padding: 0 30px;

  height: 70px;

  border-radius: 50px;

  border: none;

  text-decoration: none;

  transition: background-color 0.3s ease, color 0.3s ease;

  margin-bottom: 20px;

}



.botao-cta:hover {

  background-color: #f2f2f2;

  color: #6d30d0;

}



.logos-parceiros {

  display: flex;

  justify-content: center;

  flex-wrap: wrap;

  gap: 30px;

  align-items: center;

}



.logos-parceiros img {

  height: auto;

  max-width: 100px;

  object-fit: contain;

}



/* Responsivo */

@media (max-width: 768px) {

  .cta-roxa .titulo-cta {

    font-size: 24px;

    line-height: 36px;

  }



  .cta-roxa .texto-cta {

    font-size: 15px;

    line-height: 24px;

  }



  .botao-cta {

    padding: 14px 28px;

    font-size: 13px;

  }



  .logos-parceiros {

    flex-direction: column;

    gap: 20px;

  }

}





/*PÁGINA INDUSTRIA SEO*/



.vitrine-industria {

  background-size: cover;

  background-position: center;

  padding: 150px 20px 120px;

  position: relative;

  color: #fff;

  margin-bottom: 30px;

}



.container-industria {

  max-width: 1400px;

  margin: 0 auto;

}



.conteudo-industria {

  display: flex;

  justify-content: space-between;

  align-items: flex-start;

  gap: 20px;

  flex-wrap: wrap;

}



.lado-esquerdo {

  flex: 1 1 50%;

}



.lado-esquerdo h1 {

  color: #fff;

  font-size: 6.4vh;

  font-weight: 300;

  line-height: 6.6vh;

  margin: 0 0 15px;

  text-transform: uppercase;

}



.lado-esquerdo p {

  font-size: 16px;

  line-height: 26px;

  color: #fff;

  margin-bottom: 20px;

  max-width: 600px;

}



.lado-direito {

  flex: 1 1 45%;

  border-radius: 25px;

  padding: 40px;

  position: relative;

}



.box-premiacao h2 {

  color: #864AF9;

  font-size: 26px;

  font-weight: 700;

  line-height: 36px;

  margin-bottom: 15px;

  text-transform: uppercase;

}



.box-premiacao p {

  font-size: 15px;

  line-height: 22px;

  color: #fff;

}



.logo-google {

  position: absolute;

  top: 40px;

  right: -60px;

}



.logo-google img {

  width: 130px;

  height: auto;

}







/* Responsivo */

@media (max-width: 991px) {

  .conteudo-industria {

    flex-direction: column;

    align-items: flex-start;

  }



  .lado-direito {

    margin-top: 40px;

    padding: 30px;

  }



  .logo-google {

    position: static;

    margin-top: 20px;

    text-align: center;

  }



  .lado-esquerdo h1 {

    font-size: 8.5vw;

    line-height: 9.6vw;

    text-align: center;

  }

  .vitrine-industria {

    background-image: url('/wp-content/themes/basic/assets/images/site/bg-industria-mobile.jpg') !important;

  }



  .box-premiacao h2 {

    color: #864AF9;

    font-size: 6vw;

    font-weight: 700;

    line-height: 36px;

    margin-bottom: 15px;

    text-transform: uppercase;

  }

  

  .box-premiacao p {

    font-size: 8px;

    line-height: 22px;

    color: #fff;

  }



  .logo-google img {

    width: 60px !important;

    height: auto;

  }

}





.selos-wrapper {

  border-radius: 0 0 25px 25px;

  padding: 20px 30px;

  margin-top: 20px;

}



.selos-industria {

  display: flex;

  justify-content: left;

  align-items: center;

  flex-wrap: wrap;

  gap: 15px;

  margin: 0;

  padding: 0;

  list-style: none;

}



.selos-industria li img {

  /*height: 30px;*/

  width: 90px;

}



.box-premiacao-completa {

  position: relative;

  background-color: rgba(0, 0, 0, 0.6);

  padding: 40px;

  border-radius: 25px;

}



.logo-google.nova {

  position: absolute;

  top: 40px;

  right: -65px;

  background-color: #fff;

  padding: 20px;

  border-radius: 25px;

  width: 130px;

  box-shadow: 0 0 15px rgba(0,0,0,0.2);

}



.logo-google.nova img {

  width: 100%;

  height: auto;

}



.vitrine-industria {

  background-image: url('/wp-content/themes/basic/assets/images/site/bg-industria.jpg') !important;

}



.marketing-industrial-section {

  /*margin: 30px 0;*/

  margin-bottom: 30px;

}



.container-padrao {

  max-width: 1400px;

  margin: 0 auto;

  padding: 0 10px;

}



.marketing-industrial-grid {

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 40px;

  flex-wrap: wrap;

}



.marketing-industrial-texto {

  flex: 1 1 50%;

  min-width: 300px;

}



.marketing-industrial-imagem {

  flex: 1 1 45%;

  min-width: 200px/*280px*/;

}



.marketing-industrial-imagem img {

  width: 100%;

  height: auto;

  border-radius: 2rem;

  object-fit: cover;

}



/* Responsivo */

@media (max-width: 768px) {

  .marketing-industrial-grid {

    flex-direction: column;

  }



  .marketing-industrial-texto,

  .marketing-industrial-imagem {

    flex: 1 1 100%;

  }



  .marketing-industrial-imagem {

    margin-top: 2rem;

  }



  .selos-industria {

    flex-direction: column;

    align-items: center;

  }



  .logo-google.nova {

    /*padding: 5px;*/

    width: 80px;

    right: -30px;



  }

  

}



.icon-servico-industrial {

  width: 40px;

  height: auto;

  max-width: 100%;

}



.icon-servicos.personalizados {

  width: 25px;

  height: auto;

  max-width: 100%;

}



.industria-b2b-section {

  padding: 0 40px;

  margin-bottom: 30px;

}



.industria-b2b-container {

  background-color: #1A1A1A;

  max-width: 1350px;

  margin: 0 auto;

  border-radius: 43px;

  padding: 50px;

}



.industria-b2b-container p {

  margin-bottom: 16px;

}



@media (max-width: 768px) {

  .industria-b2b-container {

    padding: 15px 10px;

  }

}



.selos-inbound {

  display: flex;

  justify-content: center;    /* centraliza horizontalmente */

  align-items: center;        /* alinha verticalmente */

  flex-wrap: nowrap;          /* impede que quebre a linha */

  list-style: none;

  padding: 0;

  margin: 40px 0;

  gap: 60px;                  /* espaço entre os selos */

  overflow-x: auto;           /* se quiser rolagem horizontal como fallback */

}



.selos-inbound li {

  flex: 0 1 auto;

}



.selos-inbound li img {

  max-height: 50px;           /* altura máxima padrão */

  width: auto;

  height: auto;

  max-width: 100%;            /* previne overflow */

  transition: transform 0.3s ease;

}



/* Escalando proporcionalmente em telas menores */

@media (max-width: 768px) {

  .selos-inbound li img {

    max-height: 40px;

  }

}



@media (max-width: 480px) {

  .selos-inbound li img {

    max-height: 30px;

  }

}



.explorer-inbound-section {

  padding: 60px 20px;

  overflow: hidden;

}



.explorer-inbound-container {

  display: flex;

  align-items: center;

  gap: 40px;

  position: relative;

}



.explorer-inbound-image {

  flex: 1;

  position: relative;

  z-index: 1;

}



.explorer-inbound-image img {

  width: 100%;

  height: auto;

  display: block;

}



.explorer-inbound-text {

  flex: 1;

  position: relative;

  z-index: 2;

}



.explorer-inbound-text h2 {

  margin-bottom: 20px;

}



.explorer-inbound-text p {

  line-height: 1.6;

  margin-bottom: 20px;

}



@media (max-width: 1024px) {

  .explorer-inbound-container {

    flex-direction: column;

    gap: 40px;

  }



  .explorer-inbound-text {

    text-align: left;

  }

}



.explorer-inbound-cta {

  text-align: center;

  /*margin-top: 40px;*/

}



.explorer-inbound-cta-text {

  color: #864AF9 !important;

  font-weight: 600;

  margin-bottom: 20px;

}



.inbound-section {

  padding: 60px 20px;

  color: #fff;

  text-align: center;

}



.descricao-inbound {

  max-width: 1000px;

  margin: 0 auto 40px !important;

  font-size: 16px;

  color: #ccc;

}



.inbound-grid {

  display: flex;

  justify-content: center;

  align-items: center;

  flex-wrap: nowrap;

  gap: 10px;

}

/* Equalizar altura dos cards da seção inbound (versão desktop) */
.inbound-grid.desktop-grid {
  align-items: stretch;              /* faz todos os itens pegarem a altura do mais alto */
}

/* Cada card vira um flex container vertical para preencher igual */
.inbound-grid .inbound-item {
  display: flex;
  flex-direction: column;
  height: 100%;                      /* garante que o flex-item aproveite o stretch */
}

/* A seta não deve esticar: centraliza ela na linha */
.inbound-grid .seta-inbound {
  align-self: center;                /* evita que a seta fique com altura do maior card */
}

/* (Opcional) se quiser “colar” o parágrafo no fundo do card
.inbound-grid .inbound-item p {
  margin-top: auto;
}
*/



.inbound-item {

  background-color: transparent;

  border: 1px solid #864AF9;

  padding: 30px;

  border-radius: 30px;

  text-align: left;

  /*width: 280px;*/

  min-height: 250px;

  flex-shrink: 0;

}



.inbound-item h3 {

  color: #864AF9;

  font-size: 20px;

  margin: 15px 0 10px;

  text-transform: uppercase;

  font-weight: bold;

}



.icone-inbound-roxo {

  background-color: #864AF9;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  padding: 10px;

  border-radius: 10%;

  width: 50px;

  height: 50px;

}



.icone-inbound-roxo img {

  width: auto;

  height: auto;

}



.seta-inbound {

  color: #864AF9;

  font-size: 50px;

  margin: 0 10px;

  font-weight: bold;

}



.texto-final-inbound {

  margin: 40px auto 10px;

  max-width: 1000px;

  color: #ccc;

  font-size: 15px;

  line-height: 1.6;

}



.cta-inbound {

  color: #864AF9 !important;

  font-weight: 700;

  margin: 30px 0 20px;

  font-size: 16px;

}



.header-inbound-item {

  display: flex;

  align-items: center;

  gap: 15px;

  margin-bottom: 10px;

}



@media (max-width: 1024px) {

  .header-inbound-item {

    flex-direction: column;

  }

}





/* MOBILE */

.mobile-carousel {

  display: none;

}



@media (max-width: 1024px) {

  .inbound-grid {

    display: none;

  }



  .mobile-carousel {

    display: block;

  }



  .inbound-item {

    text-align: center;

  }



  .inbound-item h3 {

    font-size: 20px;

  }



  .inbound-item p {

    font-size: 15px;

  }

}



/*Section "buraco negro"*/



.aplicacao-inbound-section {

  padding: 20px 20px;

}



.aplicacao-inbound-container {

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 40px;

}



.aplicacao-inbound-texto {

  flex: 1;

  color: #fff;

}



.aplicacao-inbound-texto p {

  margin-bottom: 20px;

  line-height: 1.6;

  color: #ccc;

}



.aplicacao-inbound-imagem {

  flex: 1;

}



.aplicacao-inbound-imagem img {

  width: 100%;

  height: auto;

  display: block;

}



/* RESPONSIVO */

@media (max-width: 1024px) {

  .aplicacao-inbound-container {

    flex-direction: column;

  }



  .aplicacao-inbound-imagem {

    order: -1; /* imagem vem antes no mobile */

  }



  .aplicacao-inbound-texto {

    text-align: left;

  }

}





/*Section pilares*/



.pilares-inbound-section {

  padding: 20px 20px;

  text-align: center;

  color: #fff;

}



.pilares-grid {

  display: grid;

  grid-template-columns: repeat(4, 1fr);

  gap: 40px;

  margin-top: 40px;

}



.pilares-grid-2 {

  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 40px;

  margin-top: 40px;

}



.pilar-item img {

  height: 30px;

  margin-bottom: 30px;

}



.pilar-item h3 {

  font-size: 16px;

  font-weight: 700;

  line-height: 25px;

  color: #fff;

  text-transform: uppercase;

  margin-bottom: 10px;

}



.pilar-item p {

  font-size: 14px;

  color: #ccc;

  line-height: 1.5;

}



.cta-pilares {

  margin-top: 60px;

}



.h3-cta-titulo {

  color: #864AF9;

  font-weight: 600;

  margin-bottom: 20px;

}



/* Responsivo */

@media (max-width: 1024px) {

  .pilares-grid {

    grid-template-columns: repeat(2, 1fr);

  }

}

@media (max-width: 1024px) {

  .pilares-grid-2 {

    grid-template-columns: repeat(2, 1fr);

  }

}

@media (max-width: 768px) {

  .pilares-grid-2 {

    grid-template-columns: 1fr;

  }

}


@media (max-width: 768px) {

  .pilares-grid {

    grid-template-columns: 1fr;

  }

}



/*Satelite*/



.metodologia-section {

  padding: 60px 20px;

  color: #fff;

}



.metodologia-container {

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 60px;

  flex-wrap: wrap;

}



.metodologia-texto {

  flex: 1;

  max-width: 600px;

}



.metodologia-texto h3 {

  font-size: 15px;
  color: #864AF9 !important;

  font-weight: 700;

  text-transform: uppercase;

  margin-bottom: 5px;

}



.metodologia-texto .subtitulo-metodologia {

  color: #864AF9 !important;

  font-weight: 700;

  margin: 20px 0;

  font-size: 18px;

}



.metodologia-texto .bloco {

  margin-bottom: 20px;

}



.metodologia-imagem {

  flex: 1;

  min-width: 100px;

}



.metodologia-imagem img {

  width: 100%;

  height: auto;

  display: block;

}



.metodologia-cta-final {

  text-align: center;

  margin-top: 60px;

}



.metodologia-cta-final .metodologia-frase-explicacao {

  color: #fff;

  margin-bottom: 20px !important;

}



.metodologia-cta-final .metodologia-frase-destaque {

  color: #864AF9 !important;

  font-weight: 700;

  font-size: 23px !important;

  margin-bottom: 20px !important;

}

/* RESPONSIVO */

@media (max-width: 1024px) {

  .metodologia-container {

    flex-direction: column-reverse;

    gap: 40px;

  }

  .metodologia-texto {

    max-width: 100%;

  }
  

}



/*Inbound Parceiros*/



.parceiros-section {

  padding: 60px 0;

}



.selos-parceiros {

  display: flex;

  justify-content: space-between;

  align-items: center;

  flex-wrap: nowrap;

  list-style: none;

  padding: 0;

  margin: 0;

  gap: 10px;

  overflow-x: auto; /* fallback em telas ultra pequenas */

}



.selos-parceiros li {

  flex: 0 0 auto;

}



.selos-parceiros li img {

  max-height: 50px;

  width: auto;

  height: auto;

  max-width: 100%;

  transition: transform 0.3s ease;

}



/* Responsivo para manter em linha e ajustar os tamanhos */

@media (max-width: 768px) {

  .selos-parceiros {

    gap: 30px;

  }

  .metodologia-cta-final {
    margin-top: -10px;
  }

  .selos-parceiros li img {

    max-height: 40px;

  }

}



@media (max-width: 480px) {

  .selos-parceiros {

    gap: 20px;

  }



  .selos-parceiros li img {

    max-height: 30px;

  }

}

.hero-marketing-digital-novo {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding: 160px 20px 100px;
  color: #fff;
  text-align: center;
  position: relative;
}


.hero-marketing-digital-novo .container-padrao {
  position: relative;
  z-index: 2;
  max-width: 1000px;
  margin: 0 auto;
}

.hero-marketing-digital-novo-conteudo {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.hero-marketing-digital-novo h1 {
  font-size: 48px;
  font-weight: 700;
  text-transform: uppercase;
  color: #fff;
  margin-bottom: 30px;
}

.hero-marketing-digital-novo .subtitulo {

    font-size: 18px;
  font-weight: 600;
  color: #864AF9 !important;
}

.hero-marketing-digital-novo a.button-new {
  padding: 14px 30px;
  font-size: 16px;
}

.hero-marketing-digital-novo p {
  margin-bottom: 30px;
}

/* Responsivo */
@media (max-width: 768px) {
  .hero-marketing-digital-novo {
    padding: 100px 20px 80px;
  }

  .hero-marketing-digital-novo h1 {
    font-size: 32px;
  }

  .hero-marketing-digital-novo .subtitulo {
    font-size: 18px;
  }
}

.negrito-roxo strong,
.negrito-roxo b {
  color: #864AF9 !important;
}

/* Desktop: troca Flex por Grid e iguala alturas */
.inbound-grid.desktop-grid {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr; /* card, seta, card, ... */
  column-gap: 10px;
  align-items: stretch; /* os 4 cards ficam com a mesma altura */
}

/* Card como coluna flex para empurrar o <p> pro fundo se quiser */
.inbound-grid.desktop-grid .inbound-item {
  display: flex;
  flex-direction: column;
  width: auto;        /* sobrescreve width: 280px no desktop-grid */
  min-height: 0;      /* deixa a grid decidir */
}

/* (Opcional) fixa o parágrafo no rodapé do card */
.inbound-grid.desktop-grid .inbound-item p { margin-top: auto; }

/* A seta não deve esticar */
.inbound-grid.desktop-grid .seta-inbound {
  align-self: center;
  width: 16px;        /* largura "estreita" da coluna da seta */
  text-align: center;
}

/* Mobile segue igual (carrossel) */
@media (max-width: 1024px) {
  .inbound-grid.desktop-grid { display: none; }
}

/* Explorer – dropdown ONLY (desktop), header transparente */
@media (hover:hover) and (pointer:fine) {
  .header-new nav .menu > li { position: relative; }

  /* Nível 2: dropdown roxo arredondado */
  .header-new nav .menu > li > .sub-menu {
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    display: none;
    min-width: 240px;
    background: #864AF9;
    border-radius: 12px;
    padding: 8px 0;
    box-shadow: 0 12px 32px rgba(0,0,0,.35);
    z-index: 999; /* sobrepõe o herói */
  }

  /* Abre no hover/foco (acessível) */
  .header-new nav .menu > li:hover > .sub-menu,
  .header-new nav .menu > li:focus-within > .sub-menu {
    display: block;
  }

  /* Links dentro do dropdown */
  .header-new nav .menu .sub-menu > li > a {
    display: flex;
    align-items: center;
    justify-content: space-between; /* deixa espaço pro ">" */
    padding: 10px 16px;
    color: #fff;
    text-decoration: none;
    white-space: nowrap;
    border-radius: 8px;
  }

  .header-new nav .menu .sub-menu > li > a:hover,
  .header-new nav .menu .sub-menu > li > a:focus {
    background: rgba(0,0,0,.12);
  }

  /* ">" apenas onde existe outro nível */
  .header-new nav .menu .sub-menu > li.menu-item-has-children > a::after {
    content: "›";
    font-weight: 700;
    margin-left: 10px;
  }

  /* Nível 3: flyout à direita */
  .header-new nav .menu .sub-menu > li { position: relative; }

  .header-new nav .menu .sub-menu > li > .sub-menu {
    position: absolute;
    top: 0;
    left: 100%;
    margin-left: 8px;
    display: none;
    min-width: 220px;
    background: #864AF9;
    border-radius: 12px;
    padding: 8px 0;
    box-shadow: 0 12px 32px rgba(0,0,0,.35);
  }

  .header-new nav .menu .sub-menu > li:hover > .sub-menu,
  .header-new nav .menu .sub-menu > li:focus-within > .sub-menu {
    display: block;
  }
}
/* ===== Usabilidade: ponte anti-gap + transição suave ===== */
@media (hover:hover) and (pointer:fine) {
  .header-new nav .menu > li { position: relative; }

  .header-new nav .menu > li > .sub-menu {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 240px;
    background: #864AF9;
    border-radius: 12px;
    padding: 8px 0;
    box-shadow: 0 12px 32px rgba(0,0,0,.35);
    z-index: 999;

    /* animação/estado inicial */
    opacity: 0;
    transform: translateY(8px);
    visibility: hidden;
    pointer-events: none;
    transition:
      opacity .18s ease,
      transform .18s ease,
      visibility 0s linear .18s;
    will-change: opacity, transform;
  }

  /* “ponte” transparente pra não perder o hover ao descer o mouse */
  .header-new nav .menu > li > .sub-menu::before {
    content: "";
    position: absolute;
    top: -12px;
    left: 0;
    right: 0;
    height: 12px;   /* área clicável extra */
    background: transparent;
  }

  /* Abre no hover OU quando o JS colocar .open (ver passo 3) */
  .header-new nav .menu > li:hover > .sub-menu,
  .header-new nav .menu > li:focus-within > .sub-menu,
  .header-new nav .menu > li.open > .sub-menu {
    opacity: 1;
    transform: translateY(0);
    visibility: visible;
    pointer-events: auto;
    transition-delay: 0s, 0s, 0s;
  }

  /* Itens internos */
  .header-new nav .menu .sub-menu > li { position: relative; }
  .header-new nav .menu .sub-menu > li > a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 16px;
    color: #fff;
    text-decoration: none;
    white-space: nowrap;
    border-radius: 8px;
  }
  .header-new nav .menu .sub-menu > li > a:hover,
  .header-new nav .menu .sub-menu > li > a:focus {
    background: rgba(0,0,0,.12);
  }

  /* ===== Remove as “bolinhas”/marcadores que o tema coloca abaixo ===== */
  .header-new nav .menu .sub-menu > li > a::before,
  .header-new nav .menu .sub-menu > li > a::after {
    content: none !important; /* zera qualquer bullet/pontinho do tema */
  }

  /* Recoloca apenas a setinha ">" quando houver outro nível */
  .header-new nav .menu .sub-menu > li.menu-item-has-children > a::after {
    content: "›" !important;
    display: inline-block;
    font-weight: 700;
    margin-left: 10px;
  }

  /* Nível 3: flyout à direita com ponte lateral */
  .header-new nav .menu .sub-menu > li > .sub-menu {
    position: absolute;
    top: 0;
    left: 100%;
    margin-left: 8px;
    min-width: 220px;
    background: #864AF9;
    border-radius: 12px;
    padding: 8px 0;
    box-shadow: 0 12px 32px rgba(0,0,0,.35);
    opacity: 0;
    transform: translateX(6px);
    visibility: hidden;
    pointer-events: none;
    transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s;
  }
  .header-new nav .menu .sub-menu > li > .sub-menu::before {
    content: "";
    position: absolute;
    left: -10px;
    top: 0;
    width: 10px;  /* ponte lateral */
    height: 100%;
    background: transparent;
  }
  .header-new nav .menu .sub-menu > li:hover > .sub-menu,
  .header-new nav .menu .sub-menu > li:focus-within > .sub-menu {
    opacity: 1;
    transform: translateX(0);
    visibility: visible;
    pointer-events: auto;
    transition-delay: 0s, 0s, 0s;
  }
}

/* remove qualquer ponto/linha decorativa do tema dentro do dropdown,
   inclusive em estados "current" / "active" */
.header-new nav .menu .sub-menu a::before,
.header-new nav .menu .sub-menu a::after,
.header-new nav .menu .sub-menu .current-menu-item > a::before,
.header-new nav .menu .sub-menu .current-menu-item > a::after,
.header-new nav .menu .sub-menu .current_page_item > a::before,
.header-new nav .menu .sub-menu .current_page_item > a::after,
.header-new nav .menu .sub-menu .current-menu-ancestor > a::before,
.header-new nav .menu .sub-menu .current-menu-ancestor > a::after {
  content: none !important;
}

/* se o tema coloca underline via text-decoration */
.header-new nav .menu .sub-menu a { text-decoration: none !important; }

/* normaliza padding/altura mesmo quando o item está ativo */
.header-new nav .menu .sub-menu > li > a,
.header-new nav .menu .sub-menu > li.current-menu-item > a,
.header-new nav .menu .sub-menu > li.current_page_item > a,
.header-new nav .menu .sub-menu > li.current-menu-ancestor > a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 16px !important;   /* mantido igual ao padrão */
  line-height: 1.2;
  border-radius: 8px;
}

/* mantém feedback visual no ativo sem “engordar/afinar” */
.header-new nav .menu .sub-menu > li.current-menu-item > a,
.header-new nav .menu .sub-menu > li.current_page_item > a {
  background: rgba(0,0,0,.12);
}

/* ===== Ponte anti-gap CORRETA no item pai (não rouba clique) ===== */
@media (hover:hover) and (pointer:fine) {
  /* remove a ponte antiga, se existir */
  .header-new nav .menu > li > .sub-menu::before { content: none !important; }

  /* cria a ponte no li pai */
  .header-new nav .menu > li { position: relative; }
  .header-new nav .menu > li::after {
    content: "";
    position: absolute;
    left: 0;
    top: 100%;
    width: 100%;
    height: 10px;         /* pode subir p/ 14px se quiser ainda mais fácil */
    pointer-events: none; /* não intercepta cliques */
    background: transparent;
  }
}

/* ==== DROPDown: corrigir bolinha e "pill magrinho" quando o item ativo é <span> ==== */

/* Estilo "pill" também para <span> (itens ativos/atuais) */
.header-new nav .menu .sub-menu > li > span,
.header-new nav .menu .sub-menu > li.current-menu-item > span,
.header-new nav .menu .sub-menu > li.current_page_item > span,
.header-new nav .menu .sub-menu > li.current-menu-ancestor > span {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 16px !important;
  line-height: 1.2;
  border-radius: 8px;
  color: #fff;
  white-space: nowrap;
}

/* Feedback visual no ativo (sem engordar/afinar) */
.header-new nav .menu .sub-menu > li.current-menu-item > span,
.header-new nav .menu .sub-menu > li.current_page_item > span {
  background: rgba(0,0,0,.12);
}

/* Some QUALQUER bolinha/linha dentro do dropdown (serve para <a> e <span>) */
.header-new nav .menu .sub-menu a::before,
.header-new nav .menu .sub-menu a::after,
.header-new nav .menu .sub-menu span::before,
.header-new nav .menu .sub-menu span::after {
  content: none !important;
  display: none !important;
}

/* Se o tema trocar o nível 1 por <span>, evite bolinha lá também quando tiver submenu */
.header-new nav .menu > li.menu-item-has-children > span::after {
  content: none !important;
}

/* A “ponte” do submenu não pode roubar o clique do item pai */
.header-new nav .menu > li > .sub-menu::before { content: none !important; }
.header-new nav .menu > li { position: relative; }
.header-new nav .menu > li::after {
  content: "";
  position: absolute;
  left: 0; top: 100%;
  width: 100%; height: 12px;
  pointer-events: none; /* não intercepta cliques */
}

/* --- MOBILE-ONLY HOTFIX (não mexe no desktop) --- */
@media (max-width: 991px) {
  /* 1) Garante que o header mobile fique por cima e clicável */
  .header-mobile { z-index: 10000 !important; }
  .header-mobile .open-menu-mobile { position: relative; z-index: 10001; }

  /* 2) O menu mobile fechado não deve interceptar cliques */
  .menu-mobile {
    top: 0 !important;                 /* tira o truque de -101vh */
    transform: translateY(-100%);      /* some pra cima */
    opacity: 0;
    pointer-events: none;              /* não capta toques quando fechado */
    transition: transform .35s ease, opacity .2s ease;
  }
  .menu-mobile.open {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
  }

  /* 3) Evita qualquer resquício do header desktop no mobile */
  .header-new { display: none !important; }
  .header-new nav, 
  .header-new nav .menu, 
  .header-new nav .sub-menu { display: none !important; }
}

/* ===== MOBILE MENU: tipografia e espaçamento normais ===== */
@media (max-width: 991px) {
  /* zera heranças exageradas */
  .menu-mobile,
  .menu-mobile * {
    font-size: inherit;
    line-height: inherit;
    letter-spacing: normal;
    text-transform: none;
  }

  /* Itens de 1º nível */
  .menu-mobile nav .menu > li > a,
  .menu-mobile nav .menu > li > span {
    display: block;
    font-weight: 600;
    font-size: 16px;         /* tamanho bom para toque */
    line-height: 1;
    padding: 10px 0;
  }

  /* Subníveis um pouco menores + identação */
  .menu-mobile nav .menu .sub-menu > li > a,
  .menu-mobile nav .menu .sub-menu > li > span {
    display: block;
    font-weight: 500;
    font-size: 16px;
    line-height: 1.35;
    padding: 10px 0;
  }
  .menu-mobile nav .menu .sub-menu { padding-left: 16px; }

  /* remove qualquer margin/gap estranho que venha do tema */
  .menu-mobile nav .menu,
  .menu-mobile nav .menu li {
    margin: 0 !important;
  }
}

/* ===== Mobile caret toggle para itens com filhos ===== */
@media (max-width: 991px) {
  .menu-mobile nav .menu, 
  .menu-mobile nav .menu li { list-style: none; margin: 0; padding: 0; }

  /* espaço pros botões-caret à direita */
  .menu-mobile nav .menu > li > a,
  .menu-mobile nav .menu > li > span,
  .menu-mobile nav .menu .sub-menu > li > a,
  .menu-mobile nav .menu .sub-menu > li > span {
    display: block;
    padding-right: 40px;              /* espaço para a seta */
  }

  .menu-mobile nav .menu li { position: relative; }

  /* botão-caret (clique só nele expande) */
  .menu-mobile .caret-toggle {
    position: absolute;
    right: 0; top: 0;
    width: 36px; height: 44px;        /* área confortável para o dedo */
    display: flex; align-items: center; justify-content: center;
    font-size: 18px; line-height: 1;
    color: #864AF9;
    cursor: pointer;
    user-select: none;
  }

  /* filhos fechados por padrão */
  .menu-mobile nav .menu .sub-menu {
    display: none;
    padding-left: 16px;               /* leve identação dos filhos */
  }
  /* quando o li estiver aberto */
  .menu-mobile nav .menu li.open > .sub-menu { display: block; }

  /* caret vira pra cima quando aberto */
  .menu-mobile nav .menu li.open > .caret-toggle { transform: rotate(180deg); }
}

@media (max-width: 991px) {
  /* Reset básico do botão-caret */
  .menu-mobile .caret-toggle {
    all: unset;                  /* remove estilos padrão do botão */
    position: absolute;
    right: 0; top: 0;
    width: 36px; height: 44px;   /* área clicável */
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;             /* aumenta a seta */
    line-height: 1;
    color: #864AF9;              /* roxo da identidade */
    cursor: pointer;
  }

  /* seta pra cima quando aberto */
  .menu-mobile nav .menu li.open > .caret-toggle {
    transform: rotate(180deg);
  }

  /* opcional: aproximar mais do texto */
  .menu-mobile nav .menu > li > a {
    padding-right: 48px; /* deixa espaço só pra seta */
  }
}
/* Vitrine: tira a altura fixa para o BG acompanhar o conteúdo */
.vitrine-industria{
  height: auto !important;     /* anula o height:100vh que corta a imagem */
  min-height: 100vh;           /* continua ocupando a dobra quando o conteúdo é pequeno */
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}


/* Por precaução, não deixa nenhum breakpoint recolocar height */
@media (max-width: 1600px){
  .vitrine-industria{ height: auto !important; }
}

/* Caixinha fixa para todos os ícones */
.icone-inbound-roxo{
  background: #864AF9;
  width: 56px;
  height: 56px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 56px;
}

/* Ícones padronizados, sem estourar */
.icone-inbound-roxo img{
  max-width: 60%;   /* sempre proporcional ao quadrado */
  max-height: 60%;  /* nunca ultrapassa */
  object-fit: contain;
  display: block;
}


/* ===== Footer caret para "Marketing Digital" (ID 1950) – versão final (GRID) ===== */

/* o <li> vira um grid de 2 colunas: [label | seta] na 1ª linha; submenu ocupa linha de baixo */
.part-2 nav .menu .menu-item-1950 {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  position: relative;
  row-gap: 6px; /* espaço entre label e submenu quando abrir */
}

/* texto (a/span) ocupa a coluna 1 */
.part-2 nav .menu .menu-item-1950 > a,
.part-2 nav .menu .menu-item-1950 > span {
  grid-column: 1 / span 1;
  padding-right: 0;               /* não precisamos reservar espaço aqui */
}

/* botão da seta é IRMÃO do label e fica na coluna 2 (sempre ao lado do texto) */
.part-2 nav .menu .menu-item-1950 > .footer-caret {
  grid-column: 2 / span 1;
  justify-self: end;
  width: 28px;                    /* maior, como pediu */
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  background: none;
  border: 0;
  padding: 0;
  line-height: 1;
}

/* a própria seta */
.part-2 nav .menu .menu-item-1950 > .footer-caret::before {
  content: "▾";
  font-size: 16px;
  color: #864AF9;
  transition: transform .25s ease;
}
.part-2 nav .menu .menu-item-1950.open > .footer-caret::before {
  transform: rotate(180deg);
}

/* submenu fica na LINHA de baixo e ocupa as 2 colunas; com animação suave */
.part-2 nav .menu .menu-item-1950 > .sub-menu {
  grid-column: 1 / -1;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transform: translateY(-4px);
  transition: max-height .35s ease, opacity .25s ease, transform .25s ease;
  will-change: max-height, opacity, transform;
}
.part-2 nav .menu .menu-item-1950.open > .sub-menu {
  max-height: 1200px;
  opacity: 1;
  transform: translateY(0);
}

/* Rodapé: em telas mobile, some com a seta e mantenha filhos ocultos */
@media (max-width: 991px) {
  /* esconde o botão-seta */
  .part-2 nav .menu .menu-item-1950 > .footer-caret {
    display: none !important;
  }

  /* força o submenu a ficar SEMPRE oculto, mesmo que tenha .open */
  .part-2 nav .menu .menu-item-1950 > .sub-menu,
  .part-2 nav .menu .menu-item-1950.open > .sub-menu {
    display: none !important;
    max-height: 0 !important;
    opacity: 0 !important;
    transform: translateY(-4px) !important;
    overflow: hidden !important;
    pointer-events: none !important;
  }
}