* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: Arial, sans-serif;
  
}

body {
  overflow-x: hidden;
  background: #000;
  color: #fff;
  font-family: Arial, Helvetica, sans-serif;
}
/* HEADER */
header {
  background: #000;
  padding: 20px 60px;
  border-bottom: 1px solid #222;
}

/* Container */
.nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* Logo texto */
.logo-text {
  color: #fff;
  font-size: 24px;
}

/* Menu */
nav ul {
  display: flex;
  list-style: none;
  gap: 40px;
}

nav a {
  text-decoration: none;
  color: #fff;
  font-size: 18px;
  transition: 0.3s;
}

/* Hover bonito */
nav a:hover {
  color: #3bb54a;
}

.hero {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 100vh;
  padding: 60px;
  background: linear-gradient(to bottom, #2c2c2c, #000000);
  box-shadow: 0 4px 15px rgba(0,0,0,0.5);
}

/* Lado esquerdo */
.content {
  max-width: 500px;
  transform: translateX(-60px);
}

.logo {
  width: 700px;
  height: auto;
  transform: translate(-10px, -70px);
  margin-bottom: 40px;

  display: flex;
  align-items: center;
  justify-content: center;
}
.logo img{
  width: 4000px;
}

.content h1 {
  font-size: 50px;
  margin-bottom: 20px;
  transform: translate(205px, -210px);
}

.content p {
  font-size: 25px;
  line-height: 1.6;
  color: #ccc;
  margin-bottom: 30px;
  transform: translate(115px, -210px);
}

 .content p span {
  color: #3bb54a;
  font-weight: bold;
}

button {
  padding: 18px 30px;
  border: none;
  border-radius: 70px;
  background: #3bb54a;
  color: white;
  font-size: 26px;
  letter-spacing: 4px;
  cursor: pointer;
  transition: 0.3s;
  transform: translate(185px, -210px);
}
#mais{
  transform: translateX(200px);
}

button:hover {
  background: #2e8e3a;
}

/* Lado direito */
.visual {
  position: relative;
  width: 400px;
  height: 500px;

  display: flex;
  align-items: center;
  justify-content: center;
}

/* Efeito de luz */
.glow {
  position: absolute;
  width: 900px;
  height: 900px;
   transform: scaleX(-1);
  left: -360px;
}

/* Celular */
.phone {
  position: relative;
  width: 360px;
  height: 800px; 
  transform: translateX(-400px);
}

/* imagem da tela (fica atrás) */
.screen {
  position: absolute;
  top: 5%;
  left: 7%;
  width: 89%;
  height: 87%;
  object-fit: cover;
  z-index: 1;
  border-radius: 20px;
  transform: translateX(220px);
  transform: translate(220px, 20px);

}
.screen2 {
  position: absolute;
  top: 5%;
  left: 7%;
 
  object-fit: cover;
  z-index: 1;
  border-radius: 20px;
  
  
  width: 120px;
  transform: translate(380px, 300px);
}
/* imagem do celular (fica por cima) */
.frame {
  position: absolute;
  width: 800px;
  height: 850px;
  z-index: 2;
  pointer-events: none;
  transform: translateY(-15px);
  max-width: 2000px;
}
/* Fundo da seção */
.objetivos {
  background: url("img/campo.jpg") center/cover no-repeat;
  padding: 100px 60px;
  color: #fff;
  position: relative;
  font-family: Arial, sans-serif;
}

/* Camada escurecida sobre a imagem */
.objetivos::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  z-index: 1;
}

/* Garantir que o conteúdo fique acima do escurecimento */
.objetivos * {
  position: relative;
  z-index: 2;
}

/* Título */
.escada {
  font-size: 72px;       /* tamanho grande */
  font-weight: 900;      /* negrito */
  color: #fff;           /* branco */
  line-height: 1.1;
  margin-bottom: 80px;
  text-transform: uppercase;
}

/* primeira linha centralizada */
.escada .primeira-linha {
  display: block;
  text-align: center;
}

/* segunda linha alinhada à esquerda */
.escada .segunda-linha {
  display: block;
  text-align: left;
  margin-left: 0;  /* ajuste se quiser deslocar */
  transform: translate(395px, -90px);
  
}
/* Container dos cards */
.cards {
  display: flex;
  justify-content: space-between;
  gap: 40px;
  top: -50px;
}

/* Cada card individual */


/* Círculo verde com ícone */
.icon {
  width: 150px;
  height: 150px;
  background: #3bb54a;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 30px;
}

/* Ícones brancos e grandes */
.icon i {
  font-size: 90px;
  color: #fff;
}

/* Caixa de texto com borda arredondada */
.card {
  text-align: center;
  max-width: 400px;
  display: flex;
  flex-direction: column;
  height: 380px; /* altura fixa para todos igualar */
  justify-content: flex-start; /* mantém texto no topo */
}

.box {
  border: 1px solid #aaa;
  border-radius: 20px;
  padding: 20px;
  color: #ddd;
  line-height: 1.5;
  font-weight: 1200;
  font-size: 16px;
  flex-grow: 1; /* ocupa todo o espaço disponível */
  display: flex;
  align-items: center; /* centraliza verticalmente o texto se for menor */
  text-align: left;
}

.box p{
  font-weight: 700;
}
/* ===== FAÇA PARTE (CTA2) ===== */
.cta2 {
  background: #000;
  padding: 120px 60px;
}

/* container */
.cta2-container {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 80px;
  flex-wrap: wrap;
}

/* ===== IMAGEM ESQUERDA ===== */
.cta2-image {
  position: relative;
  width: 420px;
  height: 520px;
  overflow: hidden;
  border-radius: 15%;
  /* FORMATO IGUAL AO DESIGN */
  clip-path: polygon(
    0% 0%,
    75% 0%,
    100% 25%,
    100% 100%,
    25% 100%,
    0% 75%
  );
}

/* imagem */
.cta2-image img:first-child {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* logo */
.cta2-logo {
  position: absolute;
  top: 20px;
  left: 20px;
  width: 150px;
}

/* ===== CARD DIREITA ===== */
.cta2-card {
  background: #eaeaea;
  width: 470px;
  padding: 60px 40px 120px;
  border-radius: 30px;
  text-align: center;
  position: relative;
}

/* título */
.cta2-card h2 {
  color: #3bb54a;
  font-size: 56px;
  font-weight: 900;
  margin-bottom: 20px;
}

/* texto */
.cta2-card p {
  font-size: 20px;
  color: #000;
  line-height: 1.6;
  margin-bottom: 40px;
}

/* botão */
.cta-btn {
  background: #000;
  color: #fff;
  border: none;
  padding: 25px 70px;
  border-radius: 60px;
  font-size: 20px;
  letter-spacing: 6px;
  cursor: pointer;
  transition: 0.3s;
  transform: translate(10px,  15px);
}

.cta-btn:hover {
  background: #3bb54a;
}

/* ===== GRAMA ===== */
.grama {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  border-bottom-left-radius: 30px;
  border-bottom-right-radius: 30px;
}

/* ===== BOLA ===== */
.bola {
  position: absolute;
  right: 20px;
  bottom: 20px;
  width: 90px;
}

/* ===== RESPONSIVO ===== */
@media (max-width: 900px) {
  .cta2-container {
    flex-direction: column;
    gap: 40px;
  }

  .cta2-card {
    width: 100%;
  }

  .cta2-image {
    width: 100%;
    max-width: 400px;
  }

  .cta2-card h2 {
    font-size: 40px;
  }

  .cta2-card p {
    font-size: 18px;
  }
}
/* ===== FOOTER ===== */
.footer-ts {
  position: relative;
  background: url("img/fundo.jpg") center/cover no-repeat;
  padding: 100px 20px;
  text-align: center;
  color: #fff;
  height: 900px;
}

/* ESCURECER FUNDO */
.footer-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.75);
}

/* CONTEÚDO */
.footer-content {
  position: relative;
  z-index: 2;
  transform: translateY(-150px);
}

/* LOGO */
.footer-logo {
  width: 520px;
  margin-bottom: 30px;
  transform: translateY(-50px);
}

/* TÍTULO */
.footer-ts h2 {
  color: #3bb54a;
  font-size: 48px;
  margin-bottom: 30px;
  transform: translateY(-120px);
}

/* ÍCONES */
.footer-icons {
  display: flex;
  justify-content: center;
  gap: 40px;
  margin-bottom: 40px;
  transform: translateY(-100px);
}

.footer-icons a {
  width: 100px;
  height: 100px;
  background: #111;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: 0.3s;
}

.footer-icons i {
  font-size: 40px;
  color: #fff;
}

.footer-icons a:hover {
  background: #3bb54a;
}

/* EMAIL */
.footer-ts h3 {
  color: #3bb54a;
  font-size: 52px;
  margin-bottom: 10px;
  transform: translateY(-80px);
}

.footer-ts p {
  font-size: 42px;
  font-weight: bold;
  transform: translateY(-70px);
}

/* RESPONSIVO */
@media (max-width: 768px) {
  .footer-ts h2 {
    font-size: 32px;
  }

  .footer-ts p {
    font-size: 24px;
  }

  .footer-icons a {
    width: 70px;
    height: 70px;
  }

  .footer-icons i {
    font-size: 30px;
  }
}
/* ===== SEÇÃO SOBRE ===== */
.about2 {
  position: relative;
  background: url("img/gramado.jpg") center/cover no-repeat;
  padding: 0px 60px;
  color: #fff;
  height: 850px;
}

/* overlay escuro */
.about2-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.85);
}

/* container */
.about2-container {
  position: relative;
  z-index: 2;
  max-width: 1400px;
  margin: auto;
  transform: translateY(-250px);
}

/* logo topo */
.about2-top {
  text-align: center;
  margin-bottom: 60px;
}

.about2-top img {
  width: 520px;
  transform: translateY(90px);
}

/* grid 3 colunas */
.about2-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 60px;
  transform: translateY(-80px);
}

/* colunas */
.about2-col p {
  font-size: 18px;
  line-height: 1.8;
  margin-bottom: 20px;
  color: #ddd;
}

/* destaque verde */

/* frase destaque (amarelo) */
.destaque {
  color: #f5c542;
  font-weight: bold;
}

/* marca final */
.marca {
  color: #3bb54a;
  font-weight: bold;
}

/* bola */
.about2-bola {
  position: absolute;
  bottom: 0;
  right: 40px;
  width: 180px;
}

/* RESPONSIVO */
@media (max-width: 900px) {
  .about2-grid {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .about2 {
    padding: 80px 20px;
  }

  .about2-top img {
    width: 160px;
  }

  .about2-col p {
    font-size: 16px;
  }

  .about2-bola {
    width: 120px;
    right: 10px;
  }
}
/* cores específicas para esta página */
.verde {
  color: #3bb54a;
  font-weight: bold;
}

.amarelo {
  color: #f5c542;
  font-weight: bold;
}
@media (max-width: 768px) {
  .hero {
    flex-direction: column;
    height: auto;
    padding: 40px 20px;
  }

  .content {
    transform: none;
    text-align: center;
  }

  .visual {
    display: none;
  }
}
/* ===== CORREÇÃO DE CLIQUE (NÃO REMOVE NADA DO SEU CSS) ===== */

/* Libera cliques mesmo com overlay */
.about2-overlay {
  pointer-events: none;
}

/* Garante que o header fique acima de tudo */
header {
  position: relative;
  z-index: 9999;
}

/* Segurança extra (caso use overlay em outras partes) */
.objetivos::before {
  pointer-events: none;
}
/* ===== CORREÇÃO RÁPIDA MOBILE ===== */
@media (max-width: 768px) {

  /* layout geral */
  body {
    overflow-x: hidden;
  }

  /* HERO */
  .hero {
    flex-direction: column;
    height: auto;
    padding: 30px 20px;
    text-align: center;
  }

  .content {
    transform: none !important;
  }

  .content h1,
  .content p,
  button {
    transform: none !important;
  }

  /* LOGO */
  .logo img {
    width: 200px !important;
  }

  /* CELULAR (imagem direita) */
  .visual {
    display: none;
  }

  /* CARDS */
  .cards {
    flex-direction: column;
    align-items: center;
  }

  .card {
    width: 100%;
  }

  /* CTA */
  .cta2-container {
    flex-direction: column;
  }

  .cta2-card {
    width: 100%;
  }

  /* SOBRE */
  .about2 {
    height: auto;
    padding: 60px 20px;
  }

  .about2-container {
    transform: none !important;
  }

  .about2-grid {
    grid-template-columns: 1fr;
  }

  /* FOOTER */
  .footer-logo {
    width: 200px;
  }

  .footer-ts h2,
  .footer-ts h3 {
    font-size: 24px;
  }

  .footer-ts p {
    font-size: 18px;
  }
}
/* ===== CORREÇÃO MOBILE FORTE ===== */
@media (max-width: 768px) {

  * {
    max-width: 100%;
  }

  body {
    overflow-x: hidden;
  }

  /* ===== HERO ===== */
  .hero {
    flex-direction: column;
    height: auto;
    padding: 20px;
    text-align: center;
  }

  .content {
    transform: none !important;
    max-width: 100%;
  }

  .content h1,
  .content p,
  button,
  #mais {
    transform: none !important;
  }

  /* LOGO */
  .logo {
    width: 100%;
    transform: none !important;
  }

  .logo img {
    width: 350px !important;
  }

  /* LADO DIREITO (CELULAR) */
  .visual,
  .glow,
  .phone,
  .screen,
  .screen2,
  .frame {
    display: none !important;
  }

  /* ===== OBJETIVOS ===== */
  .cards {
    flex-direction: column;
    gap: 20px;
  }

  .card {
    width: 100%;
    height: auto;
  }

  .icon {
    width: 100px;
    height: 100px;
  }

  .icon i {
    font-size: 40px;
  }

  /* ===== CTA ===== */
  .cta2-container {
    flex-direction: column;
    gap: 30px;
  }

  .cta2-image {
    width: 100%;
    height: auto;
    
  }

  .cta2-card {
    width: 100%;
    padding: 30px 20px;
  }


  .cta-btn {
    transform: none !important;
    width: 100%;
  }

  /* ===== SOBRE ===== */
  .about2 {
    height: auto;
    padding: 40px 20px;
  }

  .about2-container {
    transform: none !important;
  }

  .about2-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .about2-top img {
    width: 380px;
    transform: none !important;
  }

  .about2-bola {
    display: none;
  }

  /* ===== FOOTER ===== */
  .footer-ts {
    height: auto;
    padding: 60px 20px;
  }

  .footer-content {
    transform: none !important;
  }

  .footer-logo {
    width: 280px;
    transform: none !important;
  }

  .footer-ts h2,
  .footer-ts h3 {
    font-size: 22px;
    transform: none !important;
  }

  .footer-ts p {
    font-size: 16px;
    transform: none !important;
  }

  .footer-icons {
    transform: none !important;
  }
}
@media (max-width: 768px) {
  .cta2-image {
    height: 300px; /* altura controlada */
   /* remove corte bugado */
    border-radius: 25%;
  }

  .cta2-image img {
    object-fit: cover;
    height: 100%;
    border-radius: 20%;
  }
}
/* ===== TRAZER CELULAR DE VOLTA (CORREÇÃO FINAL) ===== */
@media (max-width: 768px) {

  .visual,
  .phone,
  .screen,
  .screen2,
  .frame {
    display: block !important;
  }

  .visual {
    position: relative;
    width: 100%;
    height: auto;
    margin-top: 30px;
  }

  .phone {
    width: 280px; /* TAMANHO MAIOR */
    height: auto;
    margin: auto;
    transform: none !important;
  }

  .frame {
    width: 100%;
    height: auto;
  }

  .screen {
    position: absolute;
    top: 5%;
    left: 7%;
    width: 86%;
    height: 88%;
    transform: none !important;
  }

  .screen2 {
    position: absolute;
    width: 90px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) !important;
  }

  .glow {
    display: none !important; /* só remove brilho pesado */
  }

}
/* ===== CORREÇÃO FINAL DO CELULAR (POSIÇÃO + FUNDO) ===== */
@media (max-width: 768px) {

  /* HERO vira coluna normal */
  .hero {
    flex-direction: column;
    align-items: center;
  }

  /* BLOCO DO CELULAR */
  .visual {
    display: flex !important;
    justify-content: center;
    align-items: center;
    position: relative;
    width: 100%;
    margin-top: 40px;
  }

  /* GLOW VOLTA */
  .glow {
    display: block !important;
    position: absolute;
    width: 500px;
    left: 50%;
    transform: translateX(-50%) scaleX(-1);
    opacity: 0.4; /* mais suave no mobile */
    z-index: 0;
  }

  /* CELULAR */
  .phone {
    position: relative;
    width: 260px;
    height: auto;
    transform: none !important;
    z-index: 2;
  }

  /* FRAME */
  .frame {
    width: 100%;
    height: auto;
  }

  /* TELA */
  .screen {
    position: absolute;
    top: 5%;
    left: 7%;
    width: 86%;
    height: 88%;
    transform: none !important;
    border-radius: 20px;
  }

  /* LOGO NA TELA */
  .screen2 {
    position: absolute;
    width: 90px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) !important;
  }

  /* GARANTE QUE NÃO SOBRE EM OUTRAS SEÇÕES */
  .hero {
    position: relative;
    z-index: 1;
  }

}
/* ===== CORREÇÃO REAL DO CELULAR MOBILE ===== */
@media (max-width: 768px) {

  /* HERO */
  .hero {
    flex-direction: column;
    height: auto;
    padding: 30px 20px;
    position: relative;
  }

  /* TEXTO */
  .content {
    transform: none !important;
    text-align: center;
  }

  .content h1,
  .content p,
  button {
    transform: none !important;
  }

  /* ===== CELULAR VOLTA ===== */
  .visual,
  .phone,
  .screen,
  .screen2,
  .frame {
    display: block !important;
  }

  /* CONTAINER DO CELULAR */
  .visual {
    position: relative;
    width: 100%;
    height: auto;
    margin-top: 50px;
  }

  /* GLOW ATRÁS */
  .glow {
    display: block !important;
    position: absolute;
    width: 400px;
    left: 50%;
    transform: translateX(-50%) scaleX(-1);
    opacity: 0.3;
    z-index: 0;
  }

  /* CELULAR */
  .phone {
    position: relative;
    width: 260px;
    height: auto;
    margin: 0 auto;
    transform: none !important; /* REMOVE O BUG */
    z-index: 2;
    
  }

  /* FRAME */
  .frame {
    width: 100%;
    height: auto;
  }

  /* IMAGEM DENTRO */
  .screen {
    position: absolute;
    top: 5%;
    left: 7%;
    width: 86%;
    height: 88%;
    transform: none !important;
    border-radius: 20px;
  }

  /* LOGO NA TELA */
  .screen2 {
    position: absolute;
    width: 80px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) !important;
  }

}
/* ===== CORREÇÃO FINAL ABSOLUTA (CELULAR + CAMADAS) ===== */
@media (max-width: 768px) {

  /* NÃO ESCONDE MAIS NADA */
  .visual,
  .glow,
  .phone,
  .screen,
  .screen2,
  .frame {
    display: block !important;
  }

  /* HERO organizado */
  .hero {
    flex-direction: column;
    align-items: center;
    position: relative;
  }

  /* BLOCO DO CELULAR */
  .visual {
    position: relative;
    width: 100%;
    height: 500px;
    margin-top: 40px;
  }

  /* LUZ (FUNDO) */
  .glow {
    position:none;
    width: 500px;
    left: 2000%;
    transform: translateX(-20%) scaleX(-1);
    
    display: none;
  }

  /* CELULAR */
  .phone {
    position: absolute;
    width: 280px; /* MAIOR */
    left: 10%;
    transform: translateX(-50%);
    z-index: 3;
  }

  /* IMAGEM DENTRO DO CELULAR */
  .screen {
    position: absolute;
    top: 10%;
    left: 9%;
    width: 83%;
    height: 82%;
    z-index: 2;
    border-radius: 20px;
    transform: none !important;
  }

  /* LOGO DENTRO */
  .screen2 {
    position: absolute;
    width: 80px;
    top: 50%;
    left: 65%;
    transform: translate(-50%, -50%);
    z-index: 4;
  }

  /* MOLDURA DO CELULAR (FICA NA FRENTE) */
  .frame {
    position: relative;
    width: 200%;
    z-index: 5;
    transform: translateX(-140px);
  }

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

  .escada {
    font-size: 36px;
    text-align: center;
    line-height: 1.2;
  }

  .escada .primeira-linha,
  .escada .segunda-linha {
    transform: none !important;
    text-align: center;
    display: block;
  }
  
}



@media (max-width: 768px) {

  .cta2-image {
    overflow: visible !important; /* PARA DE CORTAR */
    border-radius: 25%; /* remove o corte do formato */
    
  }

 

}

@media (max-width: 768px) {

  .cta2-image {
    overflow: visible !important; /* PARA DE CORTAR */
     /* remove o corte do formato */
    
  }

  .cta2-logo {
    width: 180px !important;
    top: 103px;
    left: 80px;
    transform: translateY(-20px);
  }

}
@media (min-width:1360px) {
  .escada {
  font-size: 72px;       /* tamanho grande */
  font-weight: 900;      /* negrito */
  color: #fff;           /* branco */
  line-height: 1.1;
  margin-bottom: 80px;
  text-transform: uppercase;
}

/* primeira linha centralizada */
.escada .primeira-linha {
  display: block;
  text-align: center;
}

/* segunda linha alinhada à esquerda */
.escada .segunda-linha {
  display: block;
  text-align: left;
  margin-left: 0;  /* ajuste se quiser deslocar */
  transform: translate(660px, -90px);
}
  
}