.logo-slider .slick-slide {
			text-align: center;
      padding: 0 14px;  
			
		}
   

		.logo-slider img {
			max-width: 100%;
			/* Assegura que a imagem não ultrapasse o tamanho do contêiner */
			height: auto;
			/* Mantém a proporção da imagem */
		}


		/* =========================
   SECTION: SETORES
========================= */
.setores-wrap{
  padding: 48px 0;
  background: #fff;
}

.setores-title{
  margin: 0 0 22px 0;
  text-align: center;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .02em;
  line-height: 1.15;
  font-size: clamp(18px, 2.2vw, 28px);
  color: #111;
}

.setores-title .dot{
  color: #ff6a00; /* laranja do ponto */
}

.setores-tabs{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap; /* quebra no mobile */
}

.setor-pill{
  appearance: none;
  border: 2px solid transparent;
  background: #efefef;
  color: #111;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .02em;
  padding: 12px 22px;
  border-radius: 12px;
  cursor: pointer;
  transition: all .2s ease;
}

.setor-pill:hover{
  transform: translateY(-2px);
}

/* ATIVO (Voxx Laranja) */
.setor-pill.is-active{
  background: #fff;
  border: 2px solid #ff6600;
  color: #ff6600;
}

/* Espaçamento do conteúdo abaixo (se usar) */
.setores-content{
  margin-top: 26px;
}





/* ===========================
   VOXX TESTIMONIALS
=========================== */

.voxx-testimonials {
  background: #f3f3f3;
}

.voxx-card {
  background: #eaeaea;
  padding: 30px;
  border-radius: 20px;
  height: 100%;
  transition: 0.3s ease;
}

.voxx-card:hover {
  transform: translateY(-5px);
}

.voxx-card-header {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-bottom: 20px;
}

.voxx-avatar {
  width: 55px;
  height: 55px;
  background: #4d7edb;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 22px;
}

.voxx-card h5 {
  margin: 0;
  font-weight: 700;
  font-size: 16px;
  color: #000;
}

.voxx-stars {
  color: #ff7a00;
  font-size: 16px;
  letter-spacing: 2px;
}

.voxx-text {
  font-size: 15px;
  color: #333;
  margin-bottom: 30px;
}

.voxx-brand {
  font-size: 14px;
  color: #c2c2c2;
  font-weight: 600;
}









/* ===============================
   SECTION DUPLA VOXX
================================ */

.voxx-dual-section{
  position: relative;
  width: 100%;
  min-height: 750px;
  overflow: hidden;
}

/* ===== COLUNA ESQUERDA ===== */
.voxx-left{
  position: relative;
  background: url("/assets/images/comunicacao.jpeg") center/cover no-repeat;
  display:flex;
  align-items:center;
  padding: 100px 80px;
}

/* Overlay escuro apenas na esquerda */
.voxx-left::before{
  content:"";
  position:absolute;
  inset:0;
  background: rgba(0,0,0,0.45);
}

.voxx-left-content{
  position: relative;
  z-index:2;
  color:#fff;
  max-width: 520px;
}

.voxx-left-content h3{
  font-family: 'Poppins', sans-serif;
  font-size: 48px;
  font-weight: 800;
  line-height:1.1;
  text-transform: uppercase;
  margin:0;
}

.voxx-left-content span{
  color:#ff6600;
}

.voxx-btn{
  display:inline-block;
  margin-top:40px;
  background:#ff6600;
  color:#fff;
  padding:15px 35px;
  border-radius:30px;
  font-weight:600;
  text-decoration:none;
  transition: .3s;
}

.voxx-btn:hover{
  background:#e65c00;
  color:#fff;
}

/* ===== COLUNA DIREITA ===== */
.voxx-right{
  padding: 100px 50px;
  
  /* textura suave */
background: url("/assets/images/fundo.png")

}

/* ===== GRID DOS CARDS ===== */
.voxx-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
}

.voxx-box{
  background:#ffffff;
  padding:25px;
  border-radius:18px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.03);
  transition:.3s;
}

.voxx-box:hover{
  transform: translateY(-5px);
}

.voxx-box .icon{
  width:45px;
  height:45px;
  background:#ff6600;
  border-radius:10px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  margin-bottom:15px;
  font-size:18px;
}

.setores-wrap button:focus{
  outline: none !important;
}

.voxx-box h5{
  font-size:14px;
  font-weight:800;
  text-transform: uppercase;
  margin-bottom:10px;
}

.voxx-box h5 span{
  color:#ff6600;
}

.voxx-box p{
  font-size:13px;
  color:#666;
  margin:0;
  line-height:1.4;
}

/* ===============================
   RESPONSIVO
================================ */

@media (max-width: 1200px){
  .voxx-left-content h3{
    font-size:40px;
  }
}

@media (max-width: 992px){

  .voxx-left{
    padding: 80px 40px;
  }

  .voxx-right{
    padding: 80px 40px;
  }

  .voxx-grid{
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px){

  .voxx-left{
    min-height: 500px;
    padding:60px 30px;
  }

  .voxx-left-content h3{
    font-size:32px;
  }

  .voxx-right{
    padding:60px 30px;
  }

  .voxx-grid{
    grid-template-columns: 1fr;
  }
}
.voxx-box{
  position: relative;
  background:#fff;
  padding: 56px 40px 26px;   /* padding-top maior p/ “dar espaço” pro badge */
  border-radius: 18px;
  box-shadow: 0 10px 30px rgba(0,0,0,.06);
}

/* quadradinho laranja flutuando */
.voxx-badge{
  position: absolute;
  top: -22px;         /* sobe pra fora do card */
  left: 22px;         /* alinha no canto esquerdo */
  width: 64px;
  height: 64px;
  background: #ff6600;
  border-radius: 12px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  font-size: 26px;

  /* sombra leve igual do layout */
  box-shadow: 0 12px 24px rgba(0,0,0,.10);
}

/* opcional: dá “respiro” do h5 com o badge */
.voxx-box h5{
  margin-top: 6px;
  font-size: 18px;
  font-weight: 800;
  text-transform: uppercase;
  line-height: 1.05;
}


.w3l-content-6::before,
.w3l-banner-slider-main::before,
.voxx-header::before {
  display: none !important;
}





/* =========================================
   DOT QUADRADO (sobrescreve o template)
   funciona com: <span class="dot-1">.</span>
========================================= */
.hny-title .dot-1{
  display: inline-block;
  width: 8px;
  height: 8px;
  background: #ff6600;

  /* QUADRADO */
  border-radius: 0 !important;

  /* esconde o "." do HTML */
  font-size: 0;
  line-height: 0;

  /* alinhamento fino com o texto */
  margin-left: 0px;
  transform: translateY(-8px);
}


.w3l-banner-slider-main .carousel-item {
  background: url(/assets/images/bg10.jpg) no-repeat;
  background-size: cover;
  -webkit-background-size: cover;
  -o-background-size: cover;
  -ms-background-size: cover;
  -moz-background-size: cover;
}

.w3l-banner-slider-main .carousel-item.item2 {
  background: url(/assets/images/bg22.jpg) no-repeat;
  background-size: cover;
  -webkit-background-size: cover;
  -o-background-size: cover;
  -ms-background-size: cover;
  -moz-background-size: cover;
}

.w3l-banner-slider-main .carousel-item.item3 {
  background: url(/assets/images/bg33.jpg) no-repeat;
  background-size: cover;
  -webkit-background-size: cover;
  -o-background-size: cover;
  -ms-background-size: cover;
  -moz-background-size: cover;
}

.w3l-banner-slider-main .carousel-item.item4 {
  background: url(/assets/images/bg44.jpg) no-repeat !important;
  background-size: cover;
  -webkit-background-size: cover;
  -o-background-size: cover;
  -ms-background-size: cover;
  -moz-background-size: cover;
}

.w3l-banner-slider-main{
  height: 80vh;
}

.carousel,
.carousel-inner,
.carousel-item{
  height: 80vh;
}







/* ==========================
   RESULTADOS (igual ao print)
========================== */
.w3l-counter-6 .conuter-66-info{
  /* sua imagem de fundo */
  background: url("/assets/images/Resultados.jpeg") center/cover no-repeat !important;
  position: relative;
  color: #fff;
  padding: 90px 0; /* altura da section */
}    margin-left: 10px

/* garante que não tem overlay do template (você já removeu, aqui reforça) */
.w3l-counter-6 .conuter-66-info::before,
.w3l-counter-6 .conuter-66-info::after{
  display:none !important;
  content:none !important;
}

/* Título RESULTADOS . */
.w3l-counter-6 .hny-title{
  color:#fff !important;
  font-weight: 800 !important;
  letter-spacing: .02em;
  text-transform: uppercase;
  margin: 0 0 34px !important;
}

/* ponto laranja depois do título (usa seu .dot-1 quadrado) */
.w3l-counter-6 .hny-title .dot-1{
  display:inline-block;
  width: 8px;
  height: 8px;
  background:#ff6a00;
  border-radius:0 !important;
  margin-left: -2px;
  transform: translateY(-8px);
  font-size:0; line-height:0;
}

/* bloco dos 3 números */
.w3l-counter-6 .counter-grids-info{
  align-items: center;
}

.w3l-counter-6 .counter-gd{
  text-align: center;
  margin-top: 10px;
}

/* Número grande ( +20 / +149 / +273 ) */
.w3l-counter-6 .counter-gd h6{
  color:#fff !important;
  font-weight: 300 !important; /* bem “clean” igual ao print */
  font-size: clamp(44px, 5.2vw, 76px) !important;
  line-height: 1;
  margin: 0 0 14px !important;
  position: relative;
  display: inline-block; /* pra linha ficar centralizada no texto */
  padding-bottom: 18px;  /* espaço pra linha */
}



/* label pequeno (Anos de mercado etc) */
.w3l-counter-6 .counter-gd p{
  margin: 12px 0 0 !important;
  color: rgba(255,255,255,.80) !important;
  font-size: 16px !important;
  font-weight: 400;
}

/* PARCERIAS QUE CONSTRUÍMOS */
.voxx-parcerias-title{
  text-align: center;
  color: rgba(255, 255, 255, 0.75);
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: 14px; /* corrige o "font-size:_strip" */
  font-weight: 400;
  margin: 54px 0 14px;
}

/* Slider das logos (deixa com cara de “fila limpa” como no print) */
.logo-slider{
  margin-top: 10px;
}

.logo-slider .slick-slide{
  display:flex !important;
  justify-content:center;
  align-items:center;
}

.logo-slider a{
  display:flex;
  justify-content:center;
  align-items:center;
  height: 80px; /* controla altura da linha */
}

.logo-slider img{
  width: auto !important;    /* não esticar */
  max-width: 240px;          /* evita logo gigante */
  max-height: 120px;          /* padrão visual */
  object-fit: contain;
  opacity: .95;
  filter: brightness(1);     /* mantém branco limpo se já estiver branco */
}

/* responsivo: espaçamento e linha menor */
@media (max-width: 768px){
  .w3l-counter-6 .conuter-66-info{ padding: 70px 0; }

  .w3l-counter-6 .counter-gd h6::after{
    width: 120px;
  }

  .voxx-parcerias-title{
    margin-top: 40px;
  }

  .logo-slider a{
    height: 64px;
  }

  .logo-slider img{
    max-width: 160px;
    max-height: 46px;
  }
}

.banner-btn{
    display: inline-block;   
	margin-top: 20px !important;
  background: #ff6a00;
  color: #fff !important;
  padding: 12px 36px;
  border-radius: 14px;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 14px;
  letter-spacing: .5px;
  border: none;

  /* sombra estilo da imagem */
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);

  transition: all .3s ease;
}

.banner-btn:hover{
  background: #ffffff;
  color: #ff6a00 !important;
  transform: translateY(-2px);
  
}



	/* ==========================
   CONTENT-6 (igual ao print)
========================== */

.voxx-content6 .content-6-mian{
  position: relative;
  padding: 70px 0; /* controla altura da section */
  background: #fff;
  overflow: hidden;
}

/* textura/overlay da section inteira (igual você mostrou) */
.voxx-content6 .content-6-mian::before{
  content:"";
  position:absolute;
  inset:0;
  background: url("/assets/images/fundo.png") center/cover no-repeat;
  
  pointer-events:none;
}
/* Faz a UL ter o mesmo estilo do P dentro dessa section */
.voxx-content6 ul{
  font-family: 'Poppins', sans-serif;
  font-size: 15px;        /* mesmo tamanho do p */
  line-height: 1.5;
  color: #6b778d !important;         /* mesma cor do body p */
  margin-top: 10px;
  padding-left: 18px;     /* mantém o bullet alinhado */
}

/* garante que cada item fique igual ao p */
.voxx-content6 ul li{
  margin-bottom: 6px;
}


.w3l-counter-6 .conuter-66-info {
  background: url(/assets/images/Resultados.jpeg) no-repeat bottom;
  background-size: center;
  z-index: 0;
  position: relative;
}
/* REMOVE overlay preto só da section RESULTADOS */
.w3l-counter-6 .conuter-66-info::before,
.w3l-counter-6 .conuter-66-info::after,
.w3l-counter-6::before,
.w3l-counter-6::after{
  display: none !important;
  content: none !important;
}




.voxx-parcerias-title{
  text-align: center;
  color: rgba(255, 255, 255, 0.75);
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size:_strip: 14px; /* se der erro, troca por 14px (copiou errado) */
  font-weight: 400;
  margin: 44px 0 10px;  /* distância dos números e das logos */
}



  :root{ --voxx-orange:#ff6600; }

/* SECTION full */
.voxx-caseslides-full{
  position: relative;
  width: 100%;
  background: #0b0c0d;
}

/* Cada slide ocupa "uma tela" (ajustável) */
.voxx-full-slide{
  position: relative;
  width: 100%;
  min-height: 80vh;          /* deixa com cara de “sessão inteira” */
  display: flex !important;  /* slick precisa disso */
  align-items: center;
  overflow: hidden;
}

/* Fundo mosaico */
.voxx-full-slide::before{
  content:"";
  position:absolute;
  inset:0;
  background: var(--bg) center/cover no-repeat;
  transform: scale(1.03);
  opacity: .95;
}

/* Overlay escuro igual print */
.voxx-full-slide::after{
  content:"";
  position:absolute;
  inset:0;
 
}

/* Conteúdo por cima */
.voxx-full-inner{
 
  position: relative;
  z-index: 2;
  width: 100%;
  padding: 80px 0;
}

/* Texto esquerda */
.voxx-full-left{ color:#fff; }

.voxx-full-title{
  margin: 0 0 18px;
  font-weight: 900;
  letter-spacing: .02em;
  text-transform: uppercase;
  font-size: clamp(18px, 2.2vw, 34px);
}

.voxx-dot{
  display:inline-block;
  width: 9px;
  height: 9px;
  background: var(--voxx-orange);
  border-radius: 2px;
  margin-left: 10px;
  transform: translateY(-2px);
}

.voxx-full-item{ margin-top: 16px; }

.voxx-full-item h5{
  margin: 0 0 6px;
  font-weight: 800;
  font-size: 16px;
  color:#fff;
}

.voxx-full-item p{
  margin: 0;
  color: rgb(255, 255, 255);
  font-size: 15px;
  line-height: 1.45;
  max-width: 560px;
}

/* GIF direita */
.voxx-full-right{
  width: 100%;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height: 420px;
}

.voxx-full-right img{
  width: 100%;
  max-width: 1220px;
  height: auto;
  display:block;
  border-radius: 14px;
  filter: drop-shadow(0 24px 40px rgba(0,0,0,.48));
}

/* Slick: setas */
.voxx-caseslides-full .slick-prev,
.voxx-caseslides-full .slick-next{
  width: 46px;
  height: 46px;
  border-radius: 999px;
  z-index: 10;
}
.voxx-caseslides-full .slick-prev{ left: 18px; }
.voxx-caseslides-full .slick-next{ right: 18px; }

.voxx-caseslides-full .slick-prev:before,
.voxx-caseslides-full .slick-next:before{
  color:#fff;
  font-size: 30px;
  opacity: .9;
}

/* Mobile */
@media (max-width: 768px){
  .voxx-full-slide{ min-height: auto; }
  .voxx-full-inner{ padding: 54px 0; }
  .voxx-full-right{ min-height: 260px; }
}

/* HEADER CENTRAL */
.voxx-full-header{
  
  position: absolute;
  top: 40px;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  text-align: center;
  z-index: 3;
  pointer-events: none;
}

/* Título */
.voxx-full-title{
  margin: 0;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .03em;
  font-size: clamp(20px, 2.6vw, 38px);
  color: #fff;
}

/* Ajuste do dot */
.voxx-dot{
  display:inline-block;
  width: 10px;
  height: 10px;
  background: var(--voxx-orange);
  border-radius: 2px;
  margin-left: 10px;
  transform: translateY(-3px);
}

/* =========================================
   FORÇA POPPINS EM TODO O SITE
========================================= */

html, body {
  font-family: 'Poppins', sans-serif !important;
}

/* força em tudo que herda do Bootstrap */
body *,
h1, h2, h3, h4, h5, h6,
p, span, a, button, input, textarea,
.voxx-parcerias-title,
.setores-title,
.setor-pill {
  font-family: 'Poppins', sans-serif !important;
}

/* Overlay preto por cima da imagem */
.voxx-full-slide::after{
  content:"";
  position:absolute;
  inset:0;
  background: rgb(0 0 0 / 30%);
  z-index:1;
}
.voxx-full-inner{
  margin-top: 15px !important;
  position: relative;
  z-index: 2;
}


	/* =========================
   VOXX CASES
========================= */
.voxx-cases{
  padding: 56px 0 64px;
  background: #fff;
}

.voxx-cases-title{
  text-align:center;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .02em;
  margin: 0 0 34px;
  font-size: clamp(18px, 2.2vw, 30px);
  color:#111;
}

/* ponto quadrado (igual seu padrão) */
.voxx-dot{
  display:inline-block;
  width: 10px;
  height: 10px;
  background:#ff6600;
  border-radius: 0px !important;
  transform: translateY(0px);
  margin-left: 6px;
}

.voxx-dot-sm{
  display:inline-block;
  width: 8px;
  height: 8px;
  background:#ff6600;
  border-radius: 2px;
  transform: translateY(-1px);
  margin-left: 4px;
}

/* Card */
.voxx-case-card{
  position: relative;
  display:block;
  width:100%;
  height: 135px;
  border-radius: 16px;
  overflow:hidden;
  text-decoration:none;
  background: var(--bg) center/cover no-repeat;
  box-shadow: 0 10px 28px rgba(0,0,0,.08);
  transition: transform .18s ease, box-shadow .18s ease;
}

.voxx-case-card:hover{
  transform: translateY(-3px);
  box-shadow: 0 14px 34px rgba(0,0,0,.12);
}

/* Overlay escuro */
.voxx-case-overlay{
  position:absolute;
  inset:0;
  background: linear-gradient(90deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.25) 55%, rgba(0,0,0,.20) 100%);
}

/* Conteúdo */
.voxx-case-content{
  position:absolute;
  left: 18px;
  bottom: 16px;
  right: 62px; /* reserva espaço para a bolinha */
  z-index: 2;
}

.voxx-case-name{
  color:#fff;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .02em;
  line-height: 1.05;
  font-size: 18px;
  text-shadow: 0 8px 20px rgba(0,0,0,.25);
}

/* Botão circular com seta */
.voxx-case-cta{
  position:absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  width: 28px;
  height: 28px;
  background: #ff6600;
  border-radius: 999px;
  display:flex;
  align-items:center;
  justify-content:center;
  z-index: 2;
  box-shadow: 0 10px 20px rgba(0,0,0,.18);
}

.voxx-case-arrow{
  color:#fff;
  font-size: 18px;
  font-weight: 900;
  line-height: 1;
  transform: translateX(1px);
}

/* Ajustes responsivos */
@media (max-width: 576px){
  .voxx-case-card{ height: 150px; }
  .voxx-case-name{ font-size: 17px; }
}
.fa, .fa:before{
  font-family: FontAwesome !important;
}


.voxx-year{
  border: none;
  outline: none;
  box-shadow: none;
}


.voxx-year:focus,
.voxx-year:active{
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}

/* define a borda correta do ativo */
.voxx-year.is-active{
  border: 2px solid #ff6600 !important;
}
	/* =========================
   HERO SOBRE (NOVO)
========================= */
@media (max-width: 768px){

  /* aumenta o espaço vertical da section */
  .voxx-timeline{
    padding: 90px 0 100px;
  }

  /* dá mais altura pra área da linha */
  .voxx-timeline-bar{
    padding-top: 60px;   /* antes era ~44px */
    gap: 32px;           /* mais espaço entre os anos */
  }

  /* deixa a linha horizontal mais grossa */
  .voxx-timeline-bar::before{
    height: 4px;
  }

  /* aumenta os anos */
  .voxx-year{
    font-size: 18px;
  }

  /* aumenta os pinos */
  .voxx-year::before{
    height: 30px;
  }

  .voxx-year::after{
    width: 14px;
    height: 14px;
  }

}
@media (max-width: 768px){

  /* garante que o bloco da timeline use a largura toda */
  .voxx-timeline-bar{
    position: relative;
    width: 100%;
  }

  /* a LINHA (pseudo-elemento) vai de ponta a ponta */
  .voxx-timeline-bar::before{
    content:"";
    position: absolute;
    left: 0;
    right: 0;      /* isso é melhor que width:100% */
    top: 0;        /* ajuste se sua linha fica em outro "nível" */
    height: 4px;
    background: #ff6600;
  }
}
@media (max-width: 768px){
  .voxx-timeline-bar::before{
    left: -12px;
    right: -12px;
  }
}
.voxx-sobre-hero{
  position: relative;
  width: 100%;
  min-height: 65vh; /* maior que o antigo */
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: url("/assets/images/sobre-banner.jpg") center/cover no-repeat;
  overflow: hidden;
}

/* overlay controlável */
.voxx-sobre-overlay{
  position:absolute;
  inset:0;
  background: rgb(0 0 0 / 50%); /* ajuste aqui */
  z-index: 1;
}

.voxx-sobre-content{
  position: relative;
  z-index: 2;
  max-width: 980px;
  margin: 0 auto;
}

.voxx-sobre-title{
  margin: 0 0 16px;
  color: #fff;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .04em;
  font-size: clamp(36px, 4.8vw, 68px);
  line-height: 1.02;
}

.voxx-sobre-subtitle{
  margin: 0;
  color: rgba(255,255,255,.85);
  font-size: clamp(15px, 1.3vw, 20px);
  font-weight: 400;
}

/* mobile */
@media (max-width: 768px){
  .voxx-sobre-hero{
    min-height: 50vh;
    padding: 60px 20px;
  }
}



	
/* =========================
   SOBRE - INTRO (layout do print)
========================= */

.voxx-sobre-intro{
  position: relative;
  padding: 72px 0;
  background: #fff;
  overflow: hidden;
}

/* fundo com imagem/textura (troque se quiser outra imagem) */
.voxx-sobre-intro__bg{
  position: absolute;
  inset: 0;
  background: url("/assets/images/fundo.png") center/cover no-repeat;
  opacity: .95;
  pointer-events: none;
}

/* conteúdo por cima */
.voxx-sobre-intro .container{
  position: relative;
  z-index: 2;
}

/* duas colunas: esquerda maior (igual print) */
.voxx-sobre-intro__grid{
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 44px;
  align-items: start;
}

/* título maior */
.voxx-sobre-intro__title{
  margin: 0 0 26px !important;
  font-weight: 900 !important;
  text-transform: uppercase;
  letter-spacing: .02em;
  line-height: 1.02;
  font-size: clamp(26px, 3vw, 44px) !important;
  color: #111 !important;
}

/* textos (sem precisar mexer no p global) */
.voxx-sobre-intro p{
  margin: 0 0 16px;
  color: #111;
  font-size: 15px;
  line-height: 1.55;
  max-width: 620px;
}

/* CTA na direita (como no print) */
.voxx-sobre-intro__cta{
  margin-top: 26px;
  display: flex;
  justify-content: flex-end;
}

/* Responsivo */
@media (max-width: 992px){
  .voxx-sobre-intro{
    padding: 56px 0;
  }

  .voxx-sobre-intro__grid{
    grid-template-columns: 1fr;
    gap: 22px;
  }

  .voxx-sobre-intro p{
    max-width: 100%;
  }

  .voxx-sobre-intro__cta{
    justify-content: flex-end;
  }
}



/* =========================
   SECTION BACKGROUND / OVERLAY
========================= */
.voxx-problemas{
  min-height: 65vh;
  position: relative;
  padding: 90px 0;
  background: url("/assets/images/problemas.jpg") center/cover no-repeat;
  overflow: hidden;
}
.voxx-problemas::after{
  content:"";
  position:absolute;
  inset:0;
  background: rgb(0 0 0 / 50%);
  z-index:1;
}
.voxx-problemas .container{
  position: relative;
  z-index:2;
}
.voxx-problemas .hny-title{
  color:#fff !important;
  font-weight: bold !important;
}

/* =========================
   GRID + CARD BASE (SEU VISUAL)
========================= */
.voxx-problemas-cards{
  margin-top: 28px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
  align-items: stretch;
}

.voxx-problema-card{
  position: relative;
  background: #ffffff;
  border-radius: 10px;
  padding: 35px 18px 35px;
  box-shadow: 0 10px 22px rgba(0,0,0,.22);

  overflow: hidden; /* necessário pro hover */
}

.voxx-problema-ico{
  position: absolute;
  top: -14px;
  left: 14px;
  width: 28px;
  height: 28px;
  border-radius: 4px;
  background: #ff6600;
  display: flex;
  align-items: center;
  justify-content: center;
  color:#fff;
  box-shadow: 0 10px 18px rgba(0,0,0,.22);
  z-index: 9; /* fica acima do hover */
}
/* ✅ NÃO corta o ícone fora do card */
.voxx-problema-card{
  overflow: visible !important;
}

/* ✅ corta a camada do hover nas bordas arredondadas (sem precisar overflow no card) */
.voxx-hover-content{
  border-radius: 10px;
  -webkit-clip-path: inset(0 round 10px);
  clip-path: inset(0 round 10px);
}

/* ✅ garante o ícone sempre acima visualmente */
.voxx-problema-ico{
  z-index: 20 !important;
}

.voxx-problema-front h4{
  margin: 6px 0 8px;
  font-weight: 900;
  text-transform: uppercase;
  font-size: 18px;
  letter-spacing: .02em;
  color: #0b0c0d;
}

.voxx-dot-mini{
  display:inline-block;
  width: 6px;
  height: 6px;
  background:#ff6600;
  border-radius: 1px;
  margin-left: 2px;
  transform: translateY(-6px);
  font-size:0;
  line-height:0;
}

.voxx-problema-front p{
  margin: 0;
  color: #2c2c2c;
  font-size: 15px;
  line-height: 1.45;
}

/* =========================
   EFEITO ANLOC (HOVER 3D)
========================= */
.voxx-problema-front{
  position: relative;
  z-index: 2;
  transition: opacity .25s ease, transform .35s ease;
}

.voxx-hover-content{
  position: absolute;
  inset: 0;
  padding: 20px 18px 45px;

  transition: all 700ms ease 100ms;
  opacity: 0;

  transform-style: preserve-3d;
  transform: perspective(1200px) rotateX(-45deg) translateZ(-50px);

  background: #ff6600;
  border-radius: 10px;
  z-index: 5;
}
.voxx-hover-texts{
  display: -webkit-box;
  -webkit-line-clamp: 10;     /* quantidade de linhas */
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* =========================
   SCROLL APENAS NO MOBILE
========================= */

@media (max-width: 768px){

  /* no mobile, não centraliza verticalmente */
  .voxx-hover-content .inner{
    vertical-align: top !important;
    padding: 26px 0; /* respiro geral */
  }

  /* área rolável */
  .voxx-hover-texts{
    max-height: 160px;   /* ajuste fino: 140~190 */
    overflow-y: auto;    /* scroll */
    padding-right: 10px; /* espaço do scrollbar */
  }

  /* garante que o último texto não “encoste” */
  .voxx-hover-texts::after{
    content:"";
    display:block;
    height: 35px;        /* <<< respiro REAL no final */
  }

  /* controla margens dos parágrafos (evita “corte” por margem) */
  .voxx-hover-texts p{
    margin: 0 0 14px;
  }
  .voxx-hover-texts p:last-child{
    margin-bottom: 0;
  }

  /* scrollbar discreta */
  .voxx-hover-texts::-webkit-scrollbar{ width: 4px; }
  .voxx-hover-texts::-webkit-scrollbar-thumb{
    background: rgba(255,255,255,.35);
    border-radius: 10px;
  }
}
.voxx-hover-content .content{
  display: table;
  width: 100%;
  height: 100%;
}
.voxx-hover-content .inner{
  display: table-cell;
  vertical-align: middle;
  text-align: left;
}

.voxx-hover-title{
  margin: 2px 0 8px;
  font-weight: 900;
  text-transform: uppercase;
  font-size: 18px;
  letter-spacing: .02em;
  color: #fff;
}

.voxx-hover-title .voxx-dot-mini{
  background: #fff;
}

.voxx-hover-texts p{
  margin: 0 0 14px;
  color: #fff;
  font-size: 15px;
  line-height: 1.45;
}
.voxx-hover-texts p:last-child{ margin-bottom: 0; }

.voxx-problema-card:hover .voxx-hover-content{
  transform: perspective(1200px) rotateX(0deg) translateZ(0px);
  opacity: 1;
}
.voxx-problema-card:hover .voxx-problema-front{
  opacity: 0;
  transform: translateY(-6px);
}

.voxx-problema-card:hover .voxx-problema-ico{
  background: #fff;
  color: #ff6600;
}

/* responsivo */
@media (max-width: 992px){
  .voxx-problemas-cards{
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .voxx-problema-card{
    max-width: 520px;
    margin: 0 auto;
  }
}

/* acessibilidade */
@media (prefers-reduced-motion: reduce){
  .voxx-hover-content,
  .voxx-problema-front{
    transition: none !important;
  }
}



	.voxx-timeline{
  position: relative;
  padding: 70px 0 80px;
  background: url("/assets/images/fundo.png") center/cover no-repeat;
}

/* texto do print */
.voxx-timeline-text{
  margin-top: 18px;
  max-width: 520px;
  color:#333;
  font-size: 15px;
  line-height: 1.55;
}

/* bloco direita */
.voxx-timeline-side{
  margin-top: 12px;
  color:#111;
}
.voxx-timeline-side-title{
  font-weight: 700;
  margin-bottom: 12px;
}
.voxx-timeline-side-list{
  margin: 0;
  color:#333;
}

/* barra principal */
.voxx-timeline-bar{
  position: relative;
  margin-top: 26px;
  padding-top: 44px; /* espaço pra linha e pinos */
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 18px;
}

/* linha horizontal */
.voxx-timeline-bar::before{
  content:"";
  position:absolute;
  left: 0;
  right: 0;
  top: 22px;
  height: 3px;
  background: #ff6600;
  border-radius: 99px;
}

/* botão/ano */
.voxx-year{
  position: relative;
  appearance: none;
  border: 0;
  background: transparent;
  color: #ff6600;
  font-weight: 800;
  letter-spacing: .02em;
  cursor: pointer;
  padding: 0;
}

/* pino (linha vertical + bolinha) */
.voxx-year::before{
  content:"";
  position:absolute;
  top: -22px;
  left: 50%;
  transform: translateX(-50%);
  width: 2px;
  height: 17px;
  background: #ff6600;
}
.voxx-year::after{
  content:"";
  position:absolute;
  top: -15px;
  left: 50%;
  transform: translateX(-50%);
  width: 10px;
  height: 10px;
  background: #ff6600;
  border-radius: 50%;
}

/* ativo: “pílula” laranja no ano */
.voxx-year.is-active{
  color: #fff;
  background: #ff6600;
  display: inline-block;
  width: fit-content;
  margin: 0 auto;
  padding: 4px 10px;
  border-radius: 8px;
}
.voxx-year.is-active::after{
  width: 12px;
  height: 12px;
}

/* CTA alinhado como no print */
.voxx-timeline-cta{
  margin-top: 26px;
}

/* responsivo */
@media (max-width: 992px){
  .voxx-timeline-bar{
    grid-template-columns: repeat(5, minmax(0,1fr));
  }
}
@media (max-width: 576px){

  /* wrapper: é ele que rola */
  .voxx-timeline-scroll{
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    width: 100%;
  }

  /* trilha: tem exatamente a largura do conteúdo */
  .voxx-timeline-bar{
    position: relative;
    display: grid;
    grid-template-columns: repeat(5, 120px);
    gap: 18px;

    width: max-content;      /* largura = soma dos itens */
    

   
  }

  /* a linha acompanha a largura da trilha */
  .voxx-timeline-bar::before{
    left: 0;
    right: 0;
    height: 4px;
  }
}