header {
  background: linear-gradient(90deg, #001a13, #1f5b52);
  color: #fff;
  padding: 1rem 1rem;
  text-align: center;
  font-family: 'Poppins', sans-serif; 
}

header .logo {
  max-width: 400px;
  height: auto;
  display: block;
  margin: 0 auto;
}

@media (max-width: 600px) {
  header .logo {
    max-width: 300px;
  }
}





.hero {
  position: relative;
  background-image: url("img/banner2204.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: white;
  padding: 6rem 1rem;
  min-height: 500px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  /* Elimina z-index: 0; */
}


.hero::before {
  display: none; 
}



.hero::before {

  content: "";

  position: absolute;

  inset: 0;

  z-index: 0;

}







.hero > * {

  position: relative;

  z-index: 1;

}



.btn {

  background-color: #dfa552;

  color: white;

  padding: 12px 24px;

  text-decoration: none;

  border: none;

  border-radius: 8px;

  font-size: 16px;

  font-weight: bold;

  transition: background-color 0.3s ease;

  display: inline-block;

  text-align: center;

}



.btn:hover {

  background-color: #c88e3c;

}





@media (max-width: 600px) {

  .btn {

    width: 90%;

    max-width: 300px;

  }

}



.quienes-somos {

  display: flex;

  flex-direction: column;

  gap: 1.5rem;

  padding: 2rem 1rem;

}



.quienes-somos .imagen {

  display: block;

  text-align: center;

}



.quienes-somos img {

  width: 100%;

  max-width: 300px;

  height: auto;

  border-radius: 10px;

}



@media (min-width: 768px) {

  .quienes-somos {

    flex-direction: row;

    align-items: center;

    justify-content: space-between;

  }



  .quienes-somos .imagen {

    flex: 1;

    margin-right: 2rem;

    text-align: left;

  }



  .quienes-somos img {

    max-width: 100%;

  }



  .quienes-somos .contenido {

    flex: 2;

  }

}



.depositos-section {

  background-color: #1f5b52;

  width: 100vw;

  margin: 0;    

  padding: 60px 20px;

  box-sizing: border-box;

  max-width: 100%;

}



.depositos-contenido {

  background-color: white;

  max-width: 1000px;

  margin: 0 auto;

  padding: 40px 30px;

  border-radius: 10px;

  text-align: center;

  box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);

}



.metodos {

  display: flex;

  justify-content: center;

  align-items: center;

  gap: 20px;

  flex-wrap: wrap;

  margin: 20px 0;

}



.metodos img {

  max-height: 40px;

  width: auto;

  height: auto;

}



.cuadros-dobles {

  display: flex;

  flex-direction: column;

  gap: 30px;

  background-color: #1f5b52;

  padding: 60px 20px;

  border-radius: 10px;

}



.cuadro {

  background-color: white;

  padding: 30px;

  border-radius: 10px;

  box-shadow: 0 0 10px rgba(0,0,0,0.1);

}



.cuadro h3 {

  color: #1f5b52;

  font-size: 1.5rem;

  margin-top: 1rem;

   border-radius: 10px;

}



.cuadro img {

  height: 40px;

  display: inline-block;

  vertical-align: middle;

  margin-right: 10px;

}



/* Desktop: dos columnas */

@media (min-width: 768px) {

  .cuadros-dobles {

    flex-direction: row;

    justify-content: center;

  }



  .cuadro {

    flex: 1;

    max-width: 500px;

  }

}



.botones-jugar {

  display: flex;

  gap: 1rem;

  margin-top: 1.5rem;

  flex-wrap: wrap;

  justify-content: flex-start;

}



.faq-section {



  background-color: #f0f0f0;

  width: 100vw;

  margin: 0;    

  padding: 60px 20px;

  box-sizing: border-box;

  max-width: 100%;

}



.faq-wrapper {

  max-width: 1000px;

  margin: 0 auto;

}



.faq-section h3 {

  text-align: center;

  color: #1f5b52;

  font-size: 1.8rem;

  margin-bottom: 30px;

}











.faq-cards {

  display: grid;

  grid-template-columns: 1fr;

  gap: 20px;

}



.faq-card {

  background-color: #ffffff;

  padding: 20px;

  border-left: 5px solid #dfa552;

  border-radius: 8px;

  box-shadow: 0 2px 5px rgba(0,0,0,0.05);

}



.faq-card p {

  margin: 0 0 10px;

  font-weight: bold;

}



.faq-card a {

  color: #1f5b52;

  text-decoration: underline;

  font-weight: normal;

}



.contacto-faq {

  margin-top: 30px;

  text-align: center;

  font-size: 1rem;

  color: #333;

}



.contacto-faq a {

  color: #1f5b52;

  text-decoration: underline;

}



@media (min-width: 768px) {

  .faq-cards {

    grid-template-columns: 1fr 1fr;

  }

}



.botones {

  display: flex;

  gap: 1rem;

  flex-wrap: wrap;

  justify-content: center;

  margin-top: 1.5rem;

}



@media (max-width: 600px) {

  .botones {

    flex-direction: column;

    align-items: center;

    gap: 1rem;

  }



  .botones .btn {

    width: 90%;

    max-width: 300px;

  }

}



.cuadro img {

  height: 60px;

  display: inline-block;

  vertical-align: middle;

  margin-right: 10px;

}



body {

  margin: 0;

  font-family: 'Poppins', sans-serif;

  background: #f9f9f9;

  color: #222;

}



.texto-naranja {

  color: #dfa552;

}