* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }

  body {
    font-family: 'Outfit', sans-serif;
    background-color: #fff;
    color: #111;
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow-x: hidden;
    justify-content: flex-start;
    transition: none !important; /* para garantir que não tenha transições do CSS padrão */
  }



header {
    width: 100%;
    padding: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: fixed;
    transition: opacity 1s ease;
    margin-bottom: 20px;
    z-index: 1;
    height: 10%;
  }

  header::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    height: 1px;
    background-color: #cfcfcf;
    width: var(--line-width, 0%);
    transition: width 0.3s ease;
  }

  header.scrolled{
    background-color: #000;
    width: 100%;
  }

  nav a {
    text-decoration: none;
    color: #fff;
    margin-right: 40px;
    font-size: 0.7rem;
    font-weight: 100;
    letter-spacing: 2px;
    transition: all ease 0.5s;
  }

  nav a:hover{
    background-color: #d61d92;
    padding: 20px;
    border-radius: 60px;
    font-weight: 500;
    color: #fff;
  }

  .start-project-btn {
    background-color: #fff;
    color: #000;
    padding: 17px 15px;
    border-radius: 60px;
    font-weight: 100;
    font-size: 0.7rem;
    border: none;
    cursor: pointer;
    width: 20%;
    transition: all ease 0.2s;
    position: relative;
    overflow: hidden;
  }

  .start-project-btn:hover {
    background-color: #FF007F;
    width: 25%;
    letter-spacing: 5px;
    color: #000;
    font-weight: 900;
  }

  .btn-text {
    display: inline-block;
    transition: all ease 0.5s;
    transform-style: preserve-3d;
    pointer-events: none;
    font-weight: 100;
  }

  .hero {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5%;
    gap: 20px;
    z-index: 2;
    transition: all ease 3s;
  }

  .hero.hero-fixed{
   position: fixed;
  }

  .hero-text {
    flex: 1;
    max-width: 400px;
    font-size: 0.9rem;
    line-height: 1.5;
    color: #444;
  }

  .hero-card {

    background-color: white;
    border-radius: 20px;
    overflow: hidden;
    display: flex;
    justify-content: flex-end;
    height: 60vh;
    width: 95%;
    box-shadow: -15px 15px 10px rgba(0,0,0,0.18);
    
  }

  .video-bg {
    width: 75%;
    height: 100%;
    object-fit: cover;
    transform: scale(1);
  }

  /*PRIMEIRO TEXTO*/
  .caption {
    width: 25%;
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .caption p{
    font-size: 0.85rem;
    color: #252532;
    margin-top: 4rem;
  }


  .magic-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 1px solid #252532;
    background-color: transparent;
    color: #111;
    font-size: 1.5rem;
    font-weight: 100;
    cursor: pointer;
    overflow: hidden;
    transition: all 0.4s ease;
    position: relative;
    white-space: nowrap;
    margin-top: 3rem;
  }

  .magic-button .text {
    opacity: 0;
    transform: scale(0.8);
    transition: opacity 0.3s ease, transform 0.3s ease;
    position: absolute;
    font-size: 0.8rem;
    font-weight: 100;
    letter-spacing: 2px;
  }

  .magic-button .plus {
    opacity: 1;
    transform: scale(1);
    transition: opacity 0.3s ease, transform 0.3s ease;
    position: absolute;
  }

  .magic-button:hover {
    width: 80%;
    border-radius: 40px;
    background-color: #d61d92;
    border: none;
    color: #fff;
  }

  .magic-button:hover .plus {
    opacity: 0;
    transform: scale(0.8);
  }

  .magic-button:hover .text {
    opacity: 1;
    transform: scale(1);
  }

  .video-360{
    width: 75%;
    background-color: #d61d92;
  }

  .video-360 iframe {
width: 100%;
height: 100%;
object-fit: cover;

}


.left {
    flex: 1;
    
  }

  .left h1 {
    width: 95%;
    height: 100%;
    font-size: 4.15rem;
    font-weight: 800;

  }
  
  .left h2 {

    font-size: 1.2rem;
    font-weight: 100;
  }

  
  .stand{
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
    margin-top: 3%;
    
  }

  .stand-img {

    object-fit: cover;
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
  }

  .stand-img img {
    width: 500px;
    height: auto;
    border-radius: 10px;
    margin-right: -5%;
    object-fit: cover;
 
  }

  .number-label {
    font-size: 4rem;
    font-weight: 100;
    margin-right: 50px;
    font-family: 'inter', sans-serif;
    display: flex;
    justify-content: flex-start;
    align-items:flex-end;
  }




  .right{
    width: 35%; 
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    text-align: left;
    padding: 5%;

  }

  .right p{
    margin-top: 32px;
    font-size: 0.82rem;
  
  }

  
  
  .model-wrapper {
    width: 40%;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  model-viewer {
    width: 400px;
    height: 400px;
    background: transparent;
    transition: opacity 1.5s ease;
  }

  #model {
transform-origin: center;
transition: transform 0.2s ease;
will-change: transform;
}

#logo-sequencia img{
width: 65px;
height: 65px;
}

#logo-sequencia {
position: relative;
width: 10%;
height: 90px;
display: flex;
align-items: center;
justify-content: flex-start; 
}


#logo-img{
position: absolute;
transition: opacity 0.3s ease-in-out;
}

#logo-texto {
display: flex;
gap: 10px;
opacity: 0;
font-family: 'Montserrat', sans-serif;
transition: opacity 0.3s ease-in-out;
color: #fff;
margin-right: 40px;
font-size: 0.75rem;
font-weight: 100;
}

#logo-texto span {
display: inline-block;
opacity: 0;
transform: scale(0.9);
animation: jellyLetter 0.6s ease forwards;
}

@keyframes jellyLetter {
0%   { transform: scale(1); opacity: 0; }
25%  { transform: scale(2.9, 0.70); opacity: 1; }
50%  { transform: scale(0.70, 1.9); }
75%  { transform: scale(4.3, 0.3); }
100% { transform: scale(1); }
}


/*DIV DA IA*/

.textTitle{
width: 85%;
display: flex;
justify-content: flex-start;
align-items: flex-start;
margin-top: 10%;
}

.textTitle h1{
font-family: 'Montserrat', sans-serif;
font-size: 9rem;
letter-spacing: -10px;
color: #252532;
}

.mission-section-two{
display: flex;
width: 85%;
flex-direction: row;
justify-content: center;
align-items: center;
margin-top: 5%;

gap: 10%;
}

.mission-section-tree{
    margin-top: 50px;
    display: flex;
    flex: 1;
    color: #252532;
    padding-bottom: 0px;
    width: 85%;
    flex-direction: column;

  }


  

.left-two{

width: 45%;
height: 800px;
}

.left-two h2 {
font-size: 2.5rem;
font-family: 'Montserrat', sans-serif;
color: #252532;
}

.left-two p{
margin-top: 30px;
}

.right-two{

width: 45%;
height: 800px;

}

.background-ia{
width: 100%;
  height: 100%;
  background-image: url('image-ia.jpeg'); 
  background-size: cover;   
  background-position: center;   
  background-repeat: no-repeat; 
  border-radius: 60px;
  display: flex;
  justify-content: center;
  align-items: flex-end;
}

.background-ia button {
display: none;
  }

.background-ia  input{
    margin-bottom: 30%;
    padding: 1rem 2rem;
    font-size: 1rem;
    border-radius: 60px;
    border: none;
    background-color: #eeeeee;
    width: 85%;
    outline: none;
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
  }

    .cta {
    background: #D70D7A;
    color: #fff;
    width: auto;
    border: none;
    padding: 15px 30px;
    border-radius: 30px;
    font-weight: 200;
    cursor: pointer;
    display:inline-flex;
    align-items:center;
    gap: 12px;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    vertical-align: middle;
    margin-top: 5%;
    
  }

  
    .cta i {
  transition: margin-left 0.3s ease; /* Animação suave */
}

.cta:hover i {
  margin-left: 12px; /* Move para a direita no hover */
}






  @keyframes scroll-text {
    0%   { transform: translateX(100%); }
    100% { transform: translateX(-100%); }
  }

  button {
    background: none;
    border: none;
    color: white;
    cursor: pointer;
  }

  button:hover {
    opacity: 0.7;
  }




     #container {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100vh;
            z-index: 1;
        }

     

        .content {
            position: relative;
            z-index: 2;
            padding: 0 8vw;
            max-width: 1600px;
            margin: 0 auto;
            pointer-events: none;
        }

        .section {
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            justify-content: center;
            opacity: 0;
            transform: translateY(80px) scale(0.95);
            transition: all 1.5s cubic-bezier(0.16, 1, 0.3, 1);
        }

        .section.visible {
            opacity: 1;
            transform: translateY(0) scale(1);
        }
        
        @keyframes gradientShift {
            0%, 100% { background-position: 0% 50%; }
            50% { background-position: 100% 50%; }
        }


        .highlight {
            color: #fff;
            font-weight: 500;
        }


/*----STYLE MODAL----*/

     /* Fundo escuro */
    .modal {
      display: none; 
      position: fixed;
      z-index: 999;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      background: rgba(0,0,0,0.8);
      justify-content: center;
      align-items: center;
    }

    /* Conteúdo do modal */
    .modal-content {
      position: relative;
      width: 90%;
      height: 90%;
      background: #000;
      border-radius: 12px;
      overflow: hidden;
    }

    /* Botão fechar */
    .close-btn {
      position: absolute;
      top: 10px;
      right: 15px;
      font-size: 25px;
      color: white;
      cursor: pointer;
      z-index: 1000;
    }

    /* iframe ocupa todo o modal */
    .modal-content iframe {
      width: 100%;
      height: 100%;
      border: none;
    }


/*STYLE SEC1 */

  .sec1{
    width: 100%;
    height: 105vh;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    background-color: #000000;
    text-align: center;
    padding-top: 7%;
  
  }

    .sec1 h1{
      font-size: 7.3rem;
        font-weight: 800;
        letter-spacing: -0.04em;
        line-height: 0.9;
        background: linear-gradient(120deg, #39FF14, #FF007F, #39FF14, #FF007F);
        background-size: 500% 250%;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        animation: gradientShift 3s ease infinite;
          z-index: 2;
    }

    .sec1 h2{
    margin-top: 2%;
    font-size: 1.85rem;
    font-weight: 100;
    color: #fff;
    z-index: 2;
    }

    .sec1-sessao2{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    gap: 10%;
    margin-top: 10%;
    width: 100%;
    z-index: 2;
    }

    .sec1-subsessao{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-direction: column;
    z-index: 2;
    }

    .sec1-sessao2 p{
    font-size: 0.75rem;
    font-weight: 100;
    color: #fff;
    z-index: 2;

    }

    .sec1-sessao2 i{
    color: #fff;
    font-size: 2.5rem;
    z-index: 2;
    }



/*STYLE SEC-LOGO */

  .sec-ia{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    height: 105vh;
    width: 98%;
    gap: 2%;
    z-index: 2;
    backdrop-filter: blur(5px);
  }

  .sec-ia-left{
    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-direction: column;
    width: 30%;
    z-index: 2;
  }

  .sec-ia-subsessao{
    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-direction: column;
    padding: 5% 2%;
    text-align: left;
    border-bottom: 1px solid #d0b8d5;
    width: 75%;
    z-index: 2;
  }

  .sec-ia-subsessao h1{
    font-size: 1.85rem;
    font-weight: 600;
    color: #000;
    z-index: 2;
  }

  .sec-ia-subsessao p{
    font-size: 0.98rem;
    font-weight: 200;
    color: #000;
    z-index: 2;
    margin-top: 10px;
  }

  .sec-ia-right{
    display: flex;
    width: 65%;
    height: 80vh;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    border-radius: 30px;
    background-color: #1e002b;
    z-index: 2;
  }

  .sec-ia-sessao-lista{
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    flex-direction: column;
    width: 25%;
    height: 100%;
    background-color:transparent;
    padding: 4% 3%;
    color: #fff;
    z-index: 2;
  }
  .sec-ia-sessao-lista p{
    font-size: 0.65rem;
    font-weight: 100;
  }

  .lista-comandos{
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    flex-direction: column;
    text-align: left;
    gap: 4%;
    width: 100%;
    height: 75%;
    margin-top: 15px;
  }

    .lista-comandos h1{
    font-size: 1.3rem;
    font-weight: 500;
    text-align: left;
    }

    .lista-comandos p{
    font-size: 0.65rem;
    font-weight: 100;
    text-align: left;
    }

    .sec-ia-sessao-ia{
    height: 80vh;
    width: 75%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1%;
    background-color: #12001a;
    border-radius: 30px;
    }

    .ia{
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2% 5%;
    background-color:transparent;
    border-radius: 30px;
    border: 2px solid #23102c;
    flex-direction: column;
    }



    #response{
      background: transparent;
      display: none;
    }

    .ia input{

      padding: 1rem 2rem;
      font-size: 1rem;
      border-radius: 60px;
      border: none;
      background-color: #eeeeee;
      width: 85%;
      height: 80%;
      outline: none;
      font-family: 'Montserrat', sans-serif;
      font-weight: 800;
    }

    .ia button {
display: none;
    }

    #chat-history {
display: flex;
flex-direction: column;
gap: 10px;
}

.message-user, .message-bot {
padding: 10px 17px;
color: #fff;
max-width: 80%;
word-wrap: break-word;
animation: fadeIn 0.3s ease;
}

.message-user {
background: rgba(0, 120, 215, 0.2);
align-self: flex-end;
margin-left: auto;
text-align: right;
border-radius: 15px 0px 15px 15px;
}

.message-bot {
background: rgba(255, 255, 255, 0.1);
align-self: flex-start;
margin-right: auto;
border-radius: 0px 15px 15px 15px;

}

@keyframes fadeIn {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}




/*STYLE SEC-LOGO */

  .sec-logo{
    display: flex;
    width: 50%;
    height: 40vh;
    justify-content: center;
    align-items: center;
      z-index: 2;
  }

  .sec-logo img{
    width: 500px;

  }


/* STYLE SEC3 SECMISSOES + CARROSEL-01-->*/

  /* STYLE SECMISSOES-*/
  .mission-section{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    width: 100%;
    height: 100vh;
    z-index: 999;
    background-image: url('assets/images/stand-bkg.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    background-position: center; 
  }

  .sec-experiencias-left{
    width: 30%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    text-align: left;
    height: 100%;
    gap: 4%;
    padding: 2%;
  }

  .sec-experiencias-left p{
    color: #fff;
    font-size: 0.9rem;
    font-weight: 100;
    width: 80%;
  }

  .sec-experiencias-left span{
    font-weight: 900;
  }

  .sec-experiencias-center{
    display: flex;
    width: 50%;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    height: 85%;
    gap: 50px;
    
  
  }

  .sec-experiencias-center img{
    width: 75px;
    height: 75px;
  }

  .sec-experiencias-center p{
    text-transform: uppercase;
    font-size: 1.9rem;
    text-align: center;
    color: #fff;
    font-weight: 100;
    width: 40%;

  }

  .sec-experiencias-center h1{
    text-transform: uppercase;
    font-weight: 900;
    color: #2E1B51;
    font-size: 3rem;
  }

  .sec-experiencias-center button{
    background-color: rgba(250,250,250,0.2);
    padding: 20px 25px;
    border-radius: 60px;
    font-weight: 900;
    font-size:0.65rem;
    color: #2e1b51;
    transition: all ease 0.3s;
  }

  .sec-experiencias-center button:hover {
    transform:translateX(-3px) translateX(6px);
    background-color: #fff;
    color: #FF007F;
    opacity: 1;
  }

  .sec-experiencias-right{
    display: flex;
    width: 25%;

  }
/* STYLE CARROSEL-*/
    .carousel-container{
          overflow: hidden; width: 100%; padding:15px; 
          background-color: #2E1B51;
          z-index: 2;
      }
      .carouselText-container{
        display: flex; width: max-content;
      }

        .carouselText-container h1{
        font-size: 1rem; font-weight: 200; color: #fff; margin-right: 50px; letter-spacing: 5px;
        }

        .carouselText-container span{
          font-weight: 600;
          color: #39FF14;
        }

        .carouselText-3 span{
          color: #fff;
        }






/*STYLE SEC5 -> BALOES DE FEEDBACKS */

    .sec5{
      height: 60vh;
      width: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: row;
      gap: 5%;
      padding: 5%;
      z-index: 2;
      
      margin-top:5%;
      
    }

    .feedback{
      display: flex;
      justify-content: center;
      align-items: center;
      width: 450px;
      height: 100%;
    }

    .msg-bolas{
      display:none;
      gap:10px;
      align-items:center;
      justify-content: center;
      padding:12px 16px;
      border-radius:999px;
      width:100%;
    }

    .msg-card{
      width: 380px;
      height: 180px;
      background-color:#FF007F; 
      height: auto;
      border-radius: 20px 20px 20px 0px;
      display: flex;
      align-items: flex-start;
      flex-direction: column;
      padding: 7%;
      position: relative;
      overflow: hidden;
      opacity:0;
      display:none; 
    }

    .msg-card-left{
      border-radius: 60px 60px 60px 0px;
    }

    .message-text{
      font-size: 0.95rem; 
      font-weight: 200; 
      font-family: 'inter', sans-serif; 
      z-index: 1; position: relative; 
      color: #fff;
      text-align: left;
      width: 95%;
    }

    .bg-grid{
      position: absolute;
      inset: 0;
      z-index: 0;
      opacity: 0.12;
      display: grid;
      grid-template-columns: repeat(13, 1fr);
      grid-template-rows: repeat(13, 1fr);
    }

    .circle{
      width:25px;
      height:25px;
      background:#FF007F;
      border-radius:50%;
    }

    .remetente{
      display: flex; 
      flex-direction: column; 
      color: #fff; 
      text-align: left;
    }

    .remetente h1{
      font-size: 1.05rem;
    }

    .remetente p{
        font-size: 0.80rem;
    }


/* STYLE IMAGENS */

.carousel-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255, 255, 255, 0.9);
  border: none;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  color: #333;
  z-index: 10;
  transition: all 0.3s ease;
  box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}

.carousel-btn:hover {
  background: white;
  transform: translateY(-50%) scale(1.1);
  box-shadow: 0 6px 15px rgba(0,0,0,0.3);
}

.carousel-btn-prev {
  left: 20px;
}

.carousel-btn-next {
  right: 20px;
}


/* STYLE RODAPE */
      .rodape{
        height: 45vh;
        background-color: #12001A; 
        padding: 5%;
        width: 100%;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        z-index: 2;
        
      }

      .rodape-maps{
        height: 100%;
        width: 35%;
        text-align: left;
        justify-content: flex-start;
        align-items: flex-start;
        flex-direction: column;
        
      }

      .rodape-maps p{
        color: #fff;
        font-size: 0.92rem;
        font-weight: 100;
        margin-top: 2%;
        margin-bottom: 3%;
      }
    .rodape-maps i{
      font-size: 30px;
      color: #fff;
    }

    .rodape-horarios{
      display: flex;
      justify-content: flex-start;
      align-items: center;
      flex-direction: row;
      gap: 5%;
      margin-top: 7%;
    
    }


    .rodape-horarios i, .rodape-horarios p {
        font-size: 0.8rem;
    }




      .rodape-center{
        height: 100%;
        width: 30%;
        display: flex;
        text-align: center;
        justify-content: center;
        align-items: center;
        flex-direction: column;
      }

      .rodape-center img{
        width: 200px;
      }

      .rodape-center h1{
        color: #fff;
        font-size: 0.9rem;
        font-weight: 200;
        letter-spacing: 15px;
        margin-top: 10px;
      }

      .rodape-center p{
        color: #fff;
        font-size: 0.65rem;
        font-weight: 200;
        margin-top: 20px;
      }

      .rodape-redes{
        height: 100%;
        width: 35%;
        display: flex;
        text-align: right;
        justify-content: center;
        align-items: flex-end;
        flex-direction: column;
        
      }

      .rodape-redes i{
        color: #fff;
        font-size: 2rem;
      }