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

}


:root{
  --green:#034918;
  --green-dark:#0f261a;
  --green-light:rgb(28, 118, 74);
  --white:#fff;
  --gray:#d8dfdb;
  --accent:#06a450;
}

*{box-sizing:border-box}
body{
  margin:0;
  font-family:"Inter",system-ui,Arial,sans-serif;
  color:var(--white);
  background:linear-gradient(160deg,var(--green),var(--green-dark));
}
html {
  overflow-x: hidden;
}
/* Layout */
.container{max-width:1100px;margin:auto;padding:0 18px}
.section{padding:30px 0}
.section.alt{background:rgba(251, 251, 251, 0.83)}
h1,h2,h3,h4{margin-top:0}
.lead{
  opacity:.9;
  max-width:560px;
  margin:0 auto; 
  text-align:center; 
  padding-bottom: 5%;
}
#zapTopo{margin-top: 15px; background-color: white; border: none;}
#zapTopo:hover{background-color: #25d366; color: white;}


/* ZAP ICON */
  .whatsapp-float {
    position: fixed;
    width: 60px;
    height: 60px;
    bottom: 20px;
    right: 20px;
    background-color: #25d366;
    color: white;
    border-radius: 50%;
    text-align: center;
    font-size: 30px;
    box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.3s ease;
    cursor: grab;
}

.whatsapp-float:hover {
    background-color: #2bf976f1;
    text-decoration: none;
    color: white;
}
.whatsapp-float:active {
    cursor: grabbing;
}
/*Balaozinho tooltip*/
.tooltip-text {
    position: absolute;
    right: 70px;
    top: 50%;
    transform: translateY(-50%);
    
    background-color: #1f7a4d;
    color: #fff;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 14px;
    white-space: nowrap;

    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    pointer-events: none; /* 🔑 não interfere no drag */
}
.tooltip-text::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 100%;
    transform: translateY(-50%);
    border-width: 6px;
    border-style: solid;
    border-color: transparent transparent transparent #1f7a4d;
}
.whatsapp-float:hover .tooltip-text {
    opacity: 1;
    visibility: visible;
}

/* Hero */
.hero{

  text-align:center;
}
.logo{
  width:100%;        /* ocupa toda a largura */
  max-height:600px;  /* evita ficar muito alto */
  object-fit:cover;  /* corta com elegância se passar do limite */
  display:block;     /* tira espaçamento indesejado */
}
.hero-content .text{
    margin:auto;max-width:720px;
}

.linha {background-color: rgba(0, 0, 0, 0.016);display: flex; flex-direction: column; width: 100%;height: 40px; }
.linha2 {background-color: rgba(217, 217, 217, 0.326);display: flex; flex-direction: column; width: 100%;height: 5px; }
/* Buttons */
.btn{
  padding:12px 26px;
  border-radius:12px;
  text-decoration:none;
  display:inline-block;
  font-weight:600;
  transition:.2s;
}
.primary{background:var(--accent);color:#ffffff}
.primary:hover{filter:brightness(.95);}
.outline{border:2px solid var(--accent);color:var(--accent)}
.outline:hover{background:rgba(255,255,255,.08)}

/* Cards */
.cards{display:grid;gap:18px}
.grid-3{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.card{
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
  padding:18px;
  border-radius:16px;
  box-shadow:0 10px 22px rgba(0,0,0,.15);
}
.card h3,h4{margin-bottom:6px}
.card i {
  font-size: 20px; 
}

.highlight{
  margin-top:18px;
  background:rgba(255, 255, 255, 0.08);
  padding:14px;
  border-radius:12px;
}

/* Steps */
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;margin-top:14px}
.step{
  display:flex;
  gap:12px;
  align-items:center;
  background:rgb(255, 255, 255);
  padding:12px 14px;
  border-radius:10px;
  
}
.step i{
  font-size: 30px;
  color: #034918;
}

#letrah2{color: #07301d;}
#borda{border: 1px solid #76757564;}

.imagemtec {
  background-color: #f5f2f1; 
  height: 450px; 
  display: flex; 
  align-items: center;
  justify-content: center;
  gap: 50px;
 }
.imagemtec img{ height: 65%; width: auto;border-radius: 10px;}

.imagemtec2 {
  background-color: #f5f2f1; 
  height: 450px; 
  width: auto; 
  display: flex; 
  align-items: center;
  display: flex;
  justify-content: center;
  gap: 50px;
 }
.imagemtec2 img{ height: 80%; width: auto; border-radius: 10px;}

.imagemtec3 {
  background: linear-gradient(#772378 0%, #5a1b5b 50%, #000000 100%);
  height: 450px;
  width: auto; 
  display: flex; 
  align-items: center;
  justify-content: center;
  gap: 40px;
 }


#textoImagemTec {width: 25%;}
#kairostxt{color: #00df68; font-size: 25px;}
#textoImagemTec h2 {color: #06a450;}
#textoImagemTec2 h2 {color: #06a450;}
#textoImagemTec3 h2 {color: #06a450;}



#textoImagemTec2 {width: 25%;}
#textoImagemTec3 {width: 25%;color: white;}

.container h2{margin-bottom: 15px;}

.saibaMais{ width:120px; height: 40px; background-color: white;border-radius: 10px;border-color: #d2d6d323;
font-size: 15px;color: #06a450;}
.saibaMais:hover{color: #06a45082;background-color: #034918;color: white;}

.whatsapp-link{text-decoration: none; color: white;}

#bbrasil{width: 45px; border-radius: 5px;}
#bsc{width: 40px;border-radius: 5px;}

iframe{border-radius: 10px; height: 50%; width: 30%;}

/* Contact */
.contact form{display:grid;gap:12px;margin:20px 0}
input,textarea{border:none;border-radius:10px;padding:12px;}
button{cursor:pointer}
.city{opacity:.85;margin-top:10px}

/* Footer */
footer{
  padding:20px 0;
  background:#0a1911;
  text-align:center;
  font-size:.9rem;
}

/* =========================
   CORREÇÕES RESPONSIVAS SEGURAS
   ========================= */

@media (max-width: 1024px) {
  
  .imagemtec,
  .imagemtec2 {
    height: auto;          
    padding: 40px 0;
  }
  .imagemtec3{display: flex; flex-direction: column; align-items: center; height: 100%;}

  .imagemtec img,
  .imagemtec2 img {
    height: auto;           
    max-width: 60%;
    margin-left: 0;         
  }
  .imagemtec2 img{margin-top: 15px;}
  #textoImagemTec,
  #textoImagemTec2{
    width: 70%;
    margin: 20px auto 0 auto;
  }

 
  .imagemtec3 iframe {
    width: 80%;
    margin: 0 auto 50px auto;

  }
/*Kairos*/
  #textoImagemTec3 {
    margin-top: 30px;
  }

}

/* =========================
   MOBILE
   ========================= */
@media (max-width: 768px) {

  .imagemtec,
  .imagemtec2 {
    padding: 30px 0;
    display: flex;
    flex-direction: column;
  }

  .imagemtec img,
  .imagemtec2 img {
    width: 80%;
  }

  #textoImagemTec,
  #textoImagemTec2,
  #textoImagemTec3 {
    width: 80%;
  }

  .btn {
    width: 100%;
    text-align: center;
  }

  .tooltip-text {
    display: none;
  }
}

/* =========================
   MOBILE PEQUENO
   ========================= */
@media (max-width: 480px) {

  .imagemtec img,
  .imagemtec2 img {
    max-width: 95%;
  }
}