* {
  padding: 0px;
  margin: 0px;
}
body {
  background-image: url("../img/fondo.jpg");
  background-size: cover;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
}
.whitesmoke {
  z-index: 9999;
}

.blancoHumo {
  color: whitesmoke !important;
}

.bigText {
  font-size: 35px;
}

h1 {
  font-size: 28px;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  font-weight: bold;
  color: #ffffff;
  text-shadow: 0px 0px 3px black;
  margin-left: 5px;
  width: 95%;
}

h2 {
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  color: #a56a30;
}

h3 {
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  text-shadow: 0px 0px 3px black;
  color: whitesmoke;
}
.beneficios {
  font-size: 24px;
  color: skyblue;
  padding: 15px;
  width: 90%;
}

.beneficios img {
  margin-top: 15px;
}

.precio {
  font-size: 25px;
  color: #999999;
  text-decoration: line-through;
}

.precio-2 {
  font-size: 29px;
  color: #008080;
}

header {
  margin: 0px;
  padding: 9px;
}

.limitados {
  color:yellow;
  -webkit-text-stroke: 1px black;
}

.boton {
  background-color: red;
  color: #ffffff;
  font-weight: bold;
  padding: 9px;
  border-radius: 25px;
  text-align: center;
  justify-content: center;
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2);
}

.boton:hover {
  transform: scale(1.1, 1.1);
  transition: all 0.2s ease-in-out;
}

#leer, .out {
  position: relative;
  z-index: 2;
}

#presentacion {
  border-radius: 5px 5px 0px 0px;
  color: whitesmoke;
  letter-spacing: 2px;
  padding: 9px;
  padding-top: 25px;
  width: 80%;
}

.sectionOferta {
  padding: 9px;
}


.sectionBonos * {
  margin: 15px;
}

.sectionBonos {
  display: flex;
  justify-content: space-between; /* Coloca los elementos en cada esquina */
  text-align: center;
  margin: 0px auto;
  width: 90%;
}

@media (max-width: 768px) {
  .sectionBonos {
      display: flex;
      flex-direction: column; /* Cambiar a disposición de columna */
      align-items: center; /* Alinear elementos al centro */
  }
}

.sectionBonos img {
  border-radius: 9px;
}

.sectionBonos h2 {
  color: whitesmoke;
}

.sectionBonos h3 {
  color: gold;
}

.sectionBonos p {
  text-shadow: #ffffff 0px 0px 1px;
  color: #666;
}

.sectionBonos2 p, .sectionBonos2 h3 {
  text-shadow: #ffffff 0px 0px 1px;
  color: gold;
}

.botosTextStyle {
  color: #87CEEB; /* Azul cielo para el color de letra */
  text-shadow: 0 0 5px #f4d03f; /* Sombra amarilla que se hace grande y pequeña */
  animation: brilloLetras 1.5s infinite; /* Animación de brillo en las letras */
  transition: text-shadow 0.5s ease-in-out; /* Transición suave para la sombra de texto */
}

@keyframes brilloLetras {
  0%, 100% {
      text-shadow: 0 0 5px #f4d03f; /* Estado inicial y final de la animación */
  }
  50% {
      text-shadow: 0 0 20px #f4d03f; /* Brillo máximo en la mitad de la animación */
  }
}

/* Efecto de sombra al hacer hover */
.botosTextStyle:hover {
  text-shadow: 0 0 20px #f4d03f; /* Sombra más grande al hacer hover */
}


.cristal {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 2px;
  backdrop-filter: blur(6px);
  box-shadow: 0px 0px 6px whitesmoke;
  box-shadow: 0px 0px 15px whitesmoke inset;
  color: goldenrod;
  font-family: 'Roboto', sans-serif;
  font-size: 25px;
  text-align: center;
  height: 120px;
  width: 100%;
}

.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr); 
  gap: 20px; 
  padding: 9px;
  margin: 0px auto;
}

@media (max-width: 768px) {
  .grid-3, .contenedor2 {
      grid-template-columns: 1fr; /* Cambiar a una sola columna */
      padding-left: 0; /* Opcional: eliminar el padding si es necesario */
  }

}

.margenes * {
  margin: 3px ;
}

.comunidadColor {
  text-shadow: none;
  margin-top: 15px;
  margin-left: 20px;
  color: skyblue;
}

.testimonios {
  color: #87CEEB !important;
}

.width {
  margin-top: 20px;
  margin: 20px;
  width: 80%;
}

.ingrth {
  display: none; /* Oculta por defecto los elementos con la clase ingrth */
}

#leer {
  cursor: pointer;
  color: aquamarine;
  text-decoration: underline;
  margin-top: 10px;
}

.radius {
  border-radius: 9px;
}










body {
  background-image: url(../img/fondo.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
}

.content {
  z-index: -1;
}

.padding {
  padding: 15px;
}

.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  justify-content: center;
  margin-top: 25px;
}

@media (max-width: 768px) {
  .grid-2 {
      grid-template-columns: 1fr; /* Cambiar a una sola columna */
      padding-left: 0; /* Opcional: eliminar el padding si es necesario */
  }
}

.flexAngel {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.izquierda {
  margin-top: 80px;
  margin-right: 50px;
  text-align: center;

}

.h2 {
  font-family: Verdana, Geneva, Tahoma, sans-serif cursive;
  font-size: 35px;
  color: linear-gradient(to right, #87CEEB, #ffff00);
  animation: degradado 2s ease-in-out infinite;
}

.content p {
  color: aquamarine;
}

.img {
  border-radius: 15px;
  border: gold 0.5px solid;
  box-shadow: 0 0 15px 0 rgba(255, 215, 0, 0.5);
  box-shadow: 0 0 25px 0 rgba(255, 215, 0, 0.5);
  width: 80%;
  animation: sombra 2s ease-in-out infinite;
}

@keyframes sombra {
  0% {
      box-shadow: 0 0 10px 0 rgba(255, 215, 0, 0.5);
  }
  50% {
      box-shadow: 0 0 20px 0 lightyellow, 0 0 40px 0 rgba(255, 215, 0, 0.5);
  }
  100% {
      box-shadow: 0 0 10px 0 rgba(255, 215, 0, 0.5);
  }
}

@keyframes degradado {
  0% {
  color: #87CEEB;
  }
  50% {
  color: #ffff00;
  }
  100% {
  color: #87CEEB;
  }
}