.solucoes{
  /**Hero**/
  .hero{
    background: url(../img/solucoes/solucoes.jpg) no-repeat right center;
    background-size: cover;
    display: flex;
    justify-content: flex-start;
    width: 100%;
    gap: 10px;
    flex-direction: column;
    padding: 140px 10%;
    h1{
      margin: 0;
      line-height: 1;
      font-size: 3rem;
      color: #fff;
      font-weight: 700;
      span.verde{
        color: var(--verdelight);
      }
    }
    p{
      color: #fff;
      font-size: 1.2rem;
      width: 600px;
      margin: 0;
    }
  }
  /**SOLUÇÕES**/
  .solucoes{
    padding: 100px 15%;
    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);
      border: solid 1px var(--bgcinza);
      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);
      }    
    }     
  } 
  /**FROTA**/
  .frota{
    --icon-diferenciais: 60px;
    padding: 80px 15%;
    background: var(--bgcinza);
    color: var(--cinza);
    span.sub{
      font-weight: 600;
    }
    h2{
      color: var(--verde);
      font-size: 2.5rem;
      line-height: 1.1;
      margin: 0px;
      font-weight: 700;      
    }
    p.intro{
      margin: 5px 0 30px;
      width: 90%;
    }
    ul.diferenciais{
      display: flex;
      gap: 20px;
      flex-direction: column;
      list-style: none;
      padding: 0 ;
      margin: 0;
      li{
        width: 100%;
        background: #fff;
        border-radius: 20px;
        padding: 20px 30px;
        display: flex;
        align-items: center;
        gap: 15px;
        transition: background-color .6s;
        cursor: default;
        .icone{
          width: var(--icon-diferenciais);
          height: var(--icon-diferenciais);
          border-radius: 50%;
          background: var(--bgverde);
          display: flex;
          justify-content: center;
          align-items: center;
        }
        p{
          line-height: 1.3;
          margin: 0;   
          width: calc(100% - var(--icon-diferenciais));       
          strong{
            color: var(--verde);
            display: block;
          }
        }
        &:hover{
          background: #f9fff5;
        }
      }
    }
    ul.galeria{
      list-style: none;
      display: flex;
      flex-wrap: wrap;
      flex-direction: row;
      gap: 20px;
      li{
        width: calc(50% - 15px);
        img{
          width: 100%;
          aspect-ratio: 1/1;
          height: auto;
          border-radius: 15px;
          border-radius: 20px;
          object-fit: cover;
        }
      }
    }
  } 
  /**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);
      height:calc(100vh - var(--header-h));
      height:calc(100dvh - var(--header-h)); 
      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);    
    }
  }
  /**SEGMENTOS**/
  .segmentos{
    background: var(--bgcinza);
    padding: 80px 10%;
    h2{
      color: var(--verde);
      font-size: 2.5rem;
      line-height: 1.1;
      margin: 0 0 10px;
      text-align: center;
      font-weight: 700;
    }    
    p.intro{
      font-size: 1.2rem;
      line-height: 1.5;
      margin: 5px 0 60px;
      text-align: center;
    }    
    ul {
      display: grid;
      grid-template-columns: repeat(6, minmax(0, 1fr));
      gap: 30px;
      list-style: none;
      margin: 30px 0;
      padding: 0;
      li{
        min-width: 0;
        background: #fff;
        padding: 30px 30px 40px;
        border-radius: 20px;
        transition: transform .6s cubic-bezier(.22,.61,.36,1), box-shadow .6s ease, background-color .6s ease;
        transform: translateY(3px);
        cursor: default;
        img{
          width: max-content;
          max-width: 100%;
          display: block;
          margin: 0 auto;
        }
        h4{
          margin: 0;
          font-size: 1.2rem;
          color: #666;
          font-weight: 700;
          text-align: center;
        }
        &:hover{
          background: var(--bgverde);
          transform: translateY(-6px);
          box-shadow: 0 12px 24px rgb(180 203 158 / 59%);  
        }
      }
    }    
  }
  /**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;
    }   
  }  
  /**CTA**/
  .cta{
    background: var(--verde);
    padding: 100px 30%;
    border-bottom: solid 1px #2D9D5B;
    h2{
      text-align: center;
      font-weight: 700;
      color: #fff;
      font-size: 2rem;
      margin: 0 auto 20px;
    }
    a.botao{
      background: var(--verdelight);
      border-radius: 50px;
      margin: 0 auto;
      display: block;
      max-width: 100%;
      font-weight: 600;
      font-size: 1.15rem;
      width: max-content;
      padding: 15px 30px;
      color: var(--verdeescuro);
      transition: .3s;
      i{
        font-weight: 800;
        margin-right: 5px;
      }
      &:hover{
        background: var(--verdeescuro);
        color: #fff;
        i{
          color: var(--verdelight);
        }
      }
    }
  }
  @media (max-width: 1600px) {
    .hero {
      padding: 140px 60px;      
    }    
    .solucoes {
      padding: 80px 15%;
    }    
    .frota {
      padding: 80px;
    }    
    .jornada {
      padding: 60px 0;
      h2{
        font-size: 2.5rem;
      }
      p {
        margin: 0 0 70px;
      }
      .descricao {
        margin: 70px 0 0;
        padding: 0 10%;
      }
    } 
    .segmentos {
      padding: 80px 60px;
      ul {
        li {
          h4 {
            font-size: 1.1rem;
          }
        }
      } 
    }    
    .faq {
      padding: 80px 15%;
    }
    .cta {
      padding: 100px 25%;
    }             
  } 
  @media (max-width: 1024px) {
    .hero {
      padding: 100px 60px;
      background-position: center;
      p{
        width: 100%;
      }
    }
    .solucoes {
      padding: 60px;
      br{
        display: none;
      }
      p.intro{
        width: 100%;
      }
    }   
    .frota {
      padding: 60px;
      p.intro {
        width: 100%;
      }
      ul.galeria {
        padding: 0;
        margin: 30px 0 0;
      }      
    }
    .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}
    } 
    .segmentos{
      padding: 60px;
      ul {
        grid-template-columns: repeat(3, minmax(0, 1fr));
      }

    }  
    .faq {
      padding: 60px;
      h2{
        font-size: 2rem;
      }
    }       
    .cta {
      padding: 60px;
    }       
  }   
  @media (max-width: 560px) {
    .hero {
      padding: 60px 30px;
      h1{
        font-size: 2.5rem;
      }
      p{
        font-size: 1rem;
      }
    }
    .solucoes {
      padding: 40px 30px;
      .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;
        }   
      }      
    }  
    .frota{
      padding: 40px 30px;
      h2 {
        font-size: 1.8rem;
      }
      & ul.diferenciais {
        & li {
          padding: 20px;
        }
      }      
      ul.galeria {
        gap: 10px;
        li {
          width: calc(50% - 5px);
        }        
      }      
    }  
    .jornada{
      padding: 30px 0;
      .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;
      }    
    } 
    .segmentos{
      padding: 40px 30px;
      h2 {
        font-size: 1.6rem;
        text-align: left;        
      }      
      p.intro {
          font-size: 1rem;
          margin: 5px 0 30px;
          text-align: left;
      }      
      ul{
        grid-template-columns: minmax(0, 1fr);
      }      
    }
    .faq {
      padding: 40px 30px;
      h2{
        font-size: 1.7rem;
        text-align: left;
        margin: 0 0 20px;
      }
    }      
    .cta {
      padding: 40px 30px;
      h2{
        font-size: 1.6rem;
      }
    }         
  }  
  @media (prefers-reduced-motion:reduce){
    .jornada{
      height:auto;
      .jornada__pin{
        position:static;
        height:auto;
      }
      .parada__icone, .parada__label, .parada__icone img{
        transition:none
      }
    }  
  }  
}