/**SLIDE**/
.slide{
  .owl-carousel {
      position: relative;
  }
  .owl-nav {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      width: 100%;
      display: flex;
      justify-content: space-between;
      pointer-events: none;
      margin: 0;
  }
  .owl-nav button {
      pointer-events: all;
      position: static; 
  }
  .owl-nav {
      margin-top: 0 !important;
      padding: 0 40px;
  }  
  .owl-carousel .owl-nav button.owl-prev, .owl-carousel .owl-nav button.owl-next{
    color: #fff;
    font-size: 1.5rem;
    width: 3rem;
    height: 3rem;
    display: flex;
    justify-content: center;
    align-items: center;
    border: solid 1px var(--verdelight);
    border-radius: 50%;
    transition:.3s;
    &:hover{
      background: var(--verdelight);
    }
  }
}
/**SOLUÇÕES**/
.solucoes{
  background: var(--bgcinza);
  padding: 80px 20%;
  h2{
    color: var(--verde);
    font-size: 2.5rem;
    line-height: 1.1;
    margin: 0px;
    text-align: center;
    font-weight: 700;
  } 
  p.intro{
    font-size:1.3rem;
    line-height:1.5;
    margin:10px auto 60px;
    text-align:center;
    color: var(--cinza);
    max-width: 100%;
    width: 600px;
  } 
  .solucao{
    padding: 25px;
    background: #fff;
    border-radius: 15px;
    transform: translateY(6px);
    transition: opacity .7s cubic-bezier(.22,.61,.36,1), transform .7s cubic-bezier(.22,.61,.36,1);
    img{
      width: 100%;
      height: auto;
      display: block;
      border-radius: 15px;
    }
    h4{
      font-size: 1.4rem;
      line-height: 1.2;
      margin: 20px 0 5px;
      font-weight: 700;    
      a{
        color: var(--verde);
        transition: .3s;
      }
      &:hover{
        a{
          color: var(--verdeescuro);
        }
      }
    }
    .ler-mais{
      display: block;
      max-width: 100%;
      width: max-content;
      background: var(--bgverde);
      padding: 6px 15px;
      color: var(--verde);
      border-radius: 10px;
      font-weight: 700;
      font-size: .8rem;
      text-transform: uppercase;
      transition: .3s;
      &:hover{
        background: var(--verde);
        color: var(--bgverde);
      }
    }
    &:hover{
      transform: translateY(-6px);
    }    
  }     
}
/**JORNADA**/
.jornada{
  --scrub:calc(var(--scrub-por-etapa) * var(--etapas-total));
  background:var(--cinza);
  position:relative;
  height:auto;
  color:#fff;
  .jornada__pin{
    position:sticky;
    top:var(--header-h);
    /* a tela inteira MENOS o menu: assim o centro do bloco é o centro do que se vê */
    height:calc(100vh - var(--header-h));
    height:calc(100dvh - var(--header-h));   /* mobile: desconta a barra do navegador */
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    padding:0 clamp(20px,6vw,100px);
  }
  .jornada__scrub{
    height:var(--scrub);
    pointer-events:none;
  }
  &.sem-pin .jornada__pin{position:static;height:auto;padding:80px clamp(20px,6vw,100px)}
  &.sem-pin .jornada__scrub{display:none}
  &.finalizada .jornada__pin{ position:static; }
  &.finalizada .jornada__scrub{ display:none; }     
  h2{
    font-size:3rem;
    font-weight:700;
    color:#fff;
    margin:0 0 15px;
    text-align:center;
    span.verde{
      color:var(--verde);
    }
  }
  p{
    font-size:1.3rem;
    line-height:1.5;
    margin:0 0 120px;
    text-align:center;
    color:rgba(255,255,255,.78);
  }
  .estrada{
    display:flex;
    align-items:flex-start;
    width:100%;
    max-width:1560px;
  }
  .parada{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:14px;
    flex:0 0 auto;
    width:clamp(110px,11vw,150px);
  }
  .parada__icone{
    width:var(--icone-size);
    height:var(--icone-size);
    border-radius:50%;
    display:grid;place-items:center;
    border:1.5px solid var(--inativo);
    background:transparent;
    transition:background-color .45s ease, border-color .45s ease, box-shadow .45s ease, transform .45s cubic-bezier(.34,1.56,.64,1);
  }
  .parada__icone img{
    width:46%;
    height:auto;
    display:block;
    transition:transform .45s cubic-bezier(.34,1.56,.64,1);
  }
  .parada.ativa .parada__icone{
    background:var(--verde);
    border-color:var(--verde);
    transform:scale(1.06);
    box-shadow:0 0 0 6px rgba(45,157,91,.14), 0 8px 26px rgba(45,157,91,.28);
  }
  .parada.ativa .parada__icone img{
    transform:scale(1.06);
  }
  .parada__label{
    font-size:clamp(14px,1.15vw,19px);
    font-weight:400;
    color:rgba(255,255,255,.72);
    white-space:nowrap;
    transition:color .45s ease;
  }
  .parada.ativa .parada__label{
    color:var(--branco);
  }
  .traco{
    position:relative;
    flex:1 1 auto;
    height:1px;
    margin-top:calc(var(--icone-size) / 2);
    min-width:40px;
  }
  .traco span{
    position:absolute;
    inset:0;
    background-image:repeating-linear-gradient( to right, currentColor 0 var(--dash), transparent var(--dash) calc(var(--dash) * 2) );
  }
  .traco__base{
    color:var(--inativo);
  }
  .traco__fill{
    color:var(--verde);
    filter:drop-shadow(0 0 4px rgba(45,157,91,.55));
    clip-path:inset(0 calc((1 - var(--p,0)) * 100%) 0 0);
  }
  .descricao{
    margin: 120px 0 0;
    padding: 0 20%;
    text-align: center;
    color:rgba(255,255,255,.78);    
  }
}
/**DIFERENCIAIS**/
.diferenciais{
  padding: 80px 15%;
  h2{
    color: var(--verde);
    font-size: 2.5rem;
    line-height: 1.1;
    margin: 0 0 50px;
    text-align: center;
    font-weight: 700;
  }   
  .numeros__grid{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-bottom: 60px;
  }
   .card{
    background: var(--bgcinza);
    border-radius: 15px;
    padding: 40px 20px;
    text-align: center;
    border: 0;
    opacity: 0;
    transform: translateY(28px);
    transition: opacity .7s cubic-bezier(.22,.61,.36,1), transform .7s cubic-bezier(.22,.61,.36,1), box-shadow .3s ease, background-color .3s ease;
    .card__numero{
      font-size: 1.8rem;
      font-weight: 800;
      line-height: 1.1;
      margin: 0;
      color: var(--verde);
      font-variant-numeric: tabular-nums;
      transition: color .7s ease;
    }
    .card__legenda{
      font-size: 1rem;
      font-weight: 400;
      color: var(--cinza);
      transition: color .7s ease;
    }    
    &:hover{
      background: var(--verde);
      transform: translateY(-6px);
      box-shadow: 0 12px 24px rgba(0, 150, 65, .28);      
      .card__numero  {
        color: #fff;
      }  
      .card__legenda{
        color: #fff;
      }         
    }
  }
  .is-visivel{
    opacity: 1;
    transform: translateY(0);
  }
  .numeros__grid .card:nth-child(1){ 
    transition-delay: .05s; 
  }
  .numeros__grid .card:nth-child(2){ 
    transition-delay: .15s; 
  }
  .numeros__grid .card:nth-child(3){ 
    transition-delay: .25s; 
  }
  .numeros__grid .card:nth-child(4){ 
    transition-delay: .35s; 
  }
  h3{
    color: var(--verde);
    font-size: 1.8rem;
    line-height: 1.1;
    margin: 0 0 50px;
    text-align: center;
    font-weight: 700;
  } 
  .listagem{
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 40px;
    .topico{
      width: calc(25% - 35px);
      padding: 10px;
      text-align: center;
      p{
        margin: 0;
      }
      img{
        display: block;
        margin: 0 auto 10px;
      }
    }
  }
}
/**HISTÓRIA**/
.historia{
  padding: 80px 13%;
  background: var(--bgcinza);
  h2{
    color: var(--verde);
    font-size: 2.5rem;
    line-height: 1.1;
    margin: 0 0 10px;
    font-weight: 700;
  }    
  p{
    font-size: 1.1rem;
    line-height: 1.5;
    margin: 10px 0;
    width: 95%;
  }
  ul{
    list-style: none;
    margin: 15px 0 0;
    padding: 0;
    display: flex;
    gap: 10px;
    flex-direction: row;
    flex-wrap: wrap;
    li{
      border: solid 1px var(--verde);
      color: var(--cinza);
      padding: 8px 20px;
      cursor: default;
      font-size: .95rem;
      border-radius: 30px;
      transition: .3s;
      &:hover{
        background: var(--verde);
        color: #fff;
      }
    }
  }
  .video-wrapper {
    aspect-ratio: 16 / 9;
    background-color: var(--cinza);
  }
  .video-poster {
    background-size: cover;
    background-position: center;
    z-index: 2;
    cursor: pointer;
    transition: opacity 0.4s ease, visibility 0.4s ease;
  }
  .video-wrapper.is-playing .video-poster {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }
  .btn-play {
    font-size: 3.5rem;
    transition: transform 0.3s ease, color 0.3s ease;
    filter: drop-shadow(0px 4px 10px rgba(0, 0, 0, 0.3));
  }
  .video-poster:hover .btn-play {
    transform: scale(1.15);
  }  
}
/**PARCEIROS**/
.parceiros{
  padding: 100px 0;
  h2{
    color: var(--verde);
    font-size: 2.5rem;
    line-height: 1.1;
    margin: 0 0 50px;
    text-align: center;
    font-weight: 700;
  }   
  img{    
    filter: grayscale(0%);
    transition: .6s;
    &:hover{
      filter: grayscale(0);
    }
  }  
}
/**CERTIFICAÇÕES**/
.certificacoes{
  padding: 100px 15%;
  background: var(--bgcinza);
  h2{
    color: var(--cinza);
    font-size: 2.5rem;
    line-height: 1.1;
    margin: 0 0 60px;
    text-align: center;
    font-weight: 700;
  }  
  ul{
    list-style: none;
    display: flex;
    justify-content: space-around;
    align-items: center;
    gap: 50px;
    padding: 0;
    margin: 0;
    flex-direction: row;
    flex-wrap: wrap;
    li{
      max-width: 25%;
      img{
        height: 80px;
        display: block;        
        filter: grayscale(0%);
        transition: .6s;
        &:hover{
          filter: grayscale(0);
        }
      }
    }
  }
}
/**FAQ**/
.faq{
  padding: 80px 20%;
  h2{
    color: var(--verde);
    font-size: 2.5rem;
    line-height: 1.1;
    margin: 0 0 50px;
    text-align: center;
    font-weight: 700;
  } 
  .custom-faq-accordion .accordion-item {
    border: none;
    border-top: 1px solid var(--bgcinza);
    background-color: transparent;
    padding: 10px 0;
  }
  .custom-faq-accordion .accordion-item:last-child {
    border-bottom: 1px solid var(--bgcinza);
  }
  .custom-faq-accordion .accordion-button {
    background-color: transparent;
    color: var(--cinza);
    font-weight: 600;
    font-size: 1.2rem;
    padding: 1rem 0;
    box-shadow: none !important; 
  }
  .custom-faq-accordion .accordion-button:not(.collapsed) {
    color: var(--verde);
    background-color: transparent;
  }
  .custom-faq-accordion .accordion-button::after {
    background-size: 1.1rem;
    transition: transform 0.2s ease-in-out;
  }
  .custom-faq-accordion .accordion-button:not(.collapsed)::after {
    filter: invert(38%) sepia(85%) saturate(850%) hue-rotate(108deg) brightness(92%) contrast(98%);
  }
  .custom-faq-accordion .accordion-body {
    padding: 0 0 1.25rem 0;
    color: var(--cinza);
    font-size: 0.95rem;
    line-height: 1.6;
  }   
}
/**COTAÇÃO**/
.cotacao{
  background: url(../img/rodovia.png) right 10% center no-repeat var(--verde);
  background-attachment: fixed;
  background-size: contain;
  padding: 120px 15%;
  color: #fff;
  h2{
    font-size: 3rem;
    font-weight: 700;
    width: 40%;
    line-height: 1;
    margin: 0;
  }
  p{
    margin: 20px 0;
    width: 45%;
    font-size: 1.2rem;
    line-height: 1.5;
  }
  a.botao{
    background: #fff;
    border-radius: 30px;
    color: var(--cinza);
    font-weight: 400;
    padding: 15px 30px;
    display: flex;
    align-items: center;
    max-width: 100%;
    gap: 10px;
    width: max-content;
    transition: .3s;
    i{
      color: var(--verde);
      font-weight: 700;
      font-size: 1.3rem;
      transition: .3s;
    }
    &:hover{
      background: var(--verdeescuro);
      color: #fff;
      i{
        color: var(--verdelight);
      }
    }
  }
}
/**MAPA**/
.mapa{
  padding: 80px 15%;
  iframe{
    border-radius: 10px;
  }
}
/**NOTICIAS**/
.noticias{
  background: var(--bgcinza);
  padding: 80px 15%;
  h2{
    color: var(--verde);
    font-size: 2.5rem;
    line-height: 1.1;
    margin: 0 0 30px;
    text-align: center;
    font-weight: 700;
  }
  .noticia{
    margin: 10px 0;
    padding: 25px;
    background: #fff;
    border-radius: 15px;
    transform: translateY(6px);
    transition: opacity .7s cubic-bezier(.22,.61,.36,1), transform .7s cubic-bezier(.22,.61,.36,1);

    img{
      width: 100%;
      height: auto;
      display: block;
      border-radius: 15px;
    }
    h4{
      font-size: 1.2rem;
      line-height: 1.2;
      margin: 15px 0;
      font-weight: 600;
      min-height: 4.32rem;
      display: -webkit-box;
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical;
      overflow: hidden;      
      a{
        color: var(--verde);
        transition: .3s;
      }
      &:hover{
        a{
          color: var(--verdeescuro);
        }
      }
    }
    .ler-mais{
      display: block;
      max-width: 100%;
      width: max-content;
      background: var(--bgverde);
      padding: 6px 15px;
      color: var(--verde);
      border-radius: 10px;
      font-weight: 700;
      font-size: .8rem;
      text-transform: uppercase;
      transition: .3s;
      &:hover{
        background: var(--verde);
        color: var(--bgverde);
      }
    }
    &:hover{
      transform: translateY(-6px);
    }     
  }
  .owl-carousel {
      position: relative;
  }
  .owl-nav {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      width: 100%;
      display: flex;
      justify-content: space-between;
      pointer-events: none;
      margin: 0;
      padding: 0;
      margin-top: 0!important;
  }  
  .owl-nav button {
      pointer-events: all;
      position: static; 
      background: transparent;
  } 
  .owl-carousel .owl-nav button.owl-prev, .owl-carousel .owl-nav button.owl-next{
    color: var(--verde);
    font-size: 1.5rem;
    transition:.3s;
    position: relative;
    background: transparent;
    &:hover{
      color: var(--verdeescuro);
      background: transparent;
    }
  } 
  .owl-nav button.owl-prev{
    left: -1.5rem;
  }
  .owl-nav button.owl-next{
    right: -1.5rem;
  }    
  button{
    &:focus{
      outline: none;
    }
  }
}
@media (max-width: 1580px) {
  .solucoes {
      padding: 80px 15%;
  }
  .jornada {
    h2{
      font-size: 2.5rem;
    }
    p {
      margin: 0 0 70px;
    }
    .descricao {
      margin: 70px 0 0;
      padding: 0 10%;
    }
  }  
  .diferenciais {
    padding: 80px 10%;
  }
  .historia {
    padding: 80px 100px;
  }
  .certificacoes {
    padding: 100px 7%;
  }
  .faq {
    padding: 80px 15%;
  }
  .cotacao {
    padding: 120px 9%;
  }  
  .mapa {
    padding: 80px 10%;
  }  
  .noticias {
    padding: 80px 10%;
  }    
}
@media (max-width: 1024px) {
  .solucoes {
    padding: 60px;
    br{
      display: none;
    }
    p.intro{
      width: 100%;
    }
  }
  .jornada{
  &{
      --icone-size:48px;
      --scrub-por-etapa:110px;
    }
 
    h2{font-size:1.9rem}
    p{font-size:1rem;margin:0 0 40px}
 
    .estrada{
      flex-direction:column;
      align-items:flex-start;
      padding-left:8vw;
    }
    .parada{
      flex-direction:row;
      width:auto;
      gap:16px;
    }
    .traco{
      width:1px;
      min-width:0;
      height:40px;
      flex:0 0 auto;
      margin-top:0;
      margin-left:calc(var(--icone-size) / 2);
    }
    .traco span{
      background-image:repeating-linear-gradient(
        to bottom,
        currentColor 0 var(--dash),
        transparent var(--dash) calc(var(--dash) * 2)
      );
    }
    .traco__fill{clip-path:inset(0 0 calc((1 - var(--p,0)) * 100%) 0)}

    h2{font-size:1.6rem;margin-bottom:10px}
    p{margin-bottom:26px}
    .traco{height:26px}
    .parada{gap:12px}
  }  
  .diferenciais {
    padding: 60px;
    h2{
      font-size: 2rem;
    }
    .numeros__grid{ 
      grid-template-columns: repeat(2, 1fr); 
    }
    .listagem {
      .topico {
        width: calc(50% - 35px);
      }
    }
  }
  .historia {
    padding: 60px;
    h2{
      font-size: 2rem;
    }
    p{
      width: 100%;
    }
    .video-wrapper{
      margin-top: 30px;
    }
  }
  .parceiros {
    padding: 60px 0;
    h2{
      font-size: 2rem;
      margin: 0 0 30px;
    }
  }
  .certificacoes {
    padding: 60px;
    h2{
      font-size: 2rem;
      margin: 0 0 30px;
    }
    ul {
      gap: 25px;
      li {
        img {
          height: 70px;
        }
      }
    }
  }
  .faq {
    h2{
      font-size: 2rem;
    }
    padding: 60px;
  }
  .cotacao {
    padding: 80px 60px;
    background-attachment: initial;
    h2{
      width: 60%;
      font-size: 2.5rem;
    }
    p{
      width: 60%;
    }
  }
  .mapa {
    padding: 60px;
  }
  .noticias {
    padding: 60px;
    h2{
      font-size: 2rem;
    }
  }  
}
@media (max-width: 480px) {
  .slide {
    .owl-nav {
        margin-top: 0 !important;
        padding: 0 10px;
    }
    .owl-carousel .owl-nav button.owl-prev, .owl-carousel .owl-nav button.owl-next {
        font-size: 1rem;
        width: 2.5rem;
        height: 2.5rem;
    }    
  }
  .solucoes {
    padding: 40px 30px;
    h2 {
      font-size: 1.6rem;
    }
    p.intro {
      width: 100%;
      font-size: 1.05rem;
      margin: 10px auto;
    }  
    .solucao {
      margin: 10px 0;
      padding: 20px;
      border-radius: 12px;
      h4 {
        font-size: 1.3rem;
        line-height: 1.1;
        margin: 10px 0 5px;
      }   
      p{
        font-size: .95rem;
      }   
    }      
  }
  .jornada{
    .jornada__pin {
      height: auto;
      padding: 40px 30px;
      h2{
        text-align: left;
        margin-bottom: 5px;
      }
      p{
        margin-bottom: 30px;
        text-align: left;
      }
      .estrada{
        padding-left: 0;
      }
    }    
    .descricao {
      margin: 40px 0 0;
      padding: 0;
      text-align: left;
      font-size: .85rem;
      line-height: 1.5;
    }    
  }     
  .diferenciais {
    padding: 40px 30px;
    h2 {
      font-size: 1.6rem;
      margin: 0 0 30px;
    }
    .numeros__grid {
      grid-template-columns: repeat(1, 1fr);
      margin-bottom: 30px;      
    }   
    .card {
      padding: 30px 20px;
    } 
    h3 {
      font-size: 1.4rem;
      margin: 0 0 30px;
    }        
    .listagem {
      gap: 10px;
      .topico {
        width: 100%;
      }      
    }    
  }  
  .historia {
    padding: 40px 30px;
    h2{
      font-size: 1.8rem;
    }
    p{
      width: 100%;
      font-size: 1rem;
    }
  }   
  .parceiros {
    padding: 40px 0;
    h2 {
      font-size: 1.7rem;
      margin: 0 0 20px;
      padding: 0 30px;
    }   
  } 
  .certificacoes {
    padding: 40px;
    h2{
      font-size: 1.6rem;
      margin:  0 0 30px;
    }
    ul {
      gap: 20px;      
      li {
        max-width: 100%;
        img {
            height: 50px;
        }            
      }
    }      
  } 
  .faq {
    padding: 40px 30px;
    h2{
      font-size: 1.8rem;
      text-align: left;
      margin: 0 0 20px;
    }
  }  
  .cotacao {
    padding: 40px 30px;
    background-position: right -215px center;
    background-size: cover;
    h2 {
      width: 75%;
      font-size: 1.8rem;
      margin: 0;
    } 
    p {
      width: 100%;
      margin: 10px 0 10px;
      font-size: 1.1rem;
    }  
	  a.botao{
		  padding: 15px 20px;
		  width: 100%;
	  }
  }
  .mapa {
    padding: 0;
    iframe{
      border-radius: 0;
    }
  }  
  .noticias {
    padding: 40px 30px;
    margin-top: -10px; 
    h2{
      font-size: 1.8rem;
      margin: 0 auto 20px;
    }
    .owl-nav button.owl-next {
        right: -1rem;
    }   
    .owl-nav button.owl-prev {
        left: -1rem;
    }     
  }      
}
@media (prefers-reduced-motion:reduce){
  .diferenciais{
    .numeros__grid{ 
      grid-template-columns: 1fr; 
      gap: 14px; 
    }
    .card{ 
      padding: 24px 18px; 
      opacity: 1;
      transform: none;
      transition: none;
    }
    .card:hover{ 
      transform: none; 
    }
  }
  .jornada{
    height:auto;
     .jornada__pin{
      position:static;
      height:auto;
    }
    .parada__icone, .parada__label, .parada__icone img{
      transition:none
    }
  }  
}