body{
  width: 100%;
  height: 100%;
  min-width: 900px;
  min-height: 1000px;
}
/* Inicio sección Planes Bronze, Silver y Gold */
.container-index{
  font-family: Georgia, 'Times New Roman', Times, serif;
  background-color: rgba(80, 125, 155, 0.438);
  -webkit-box-sizing: border-box;
  box-sizing:content-box;
  float: left;
  width: 20%;
  min-width: 24%;
  max-width: 20%;
  height: 850px;
  max-height: auto;
  min-height: 600px;
  border-radius: 15px;
  border-style: double;
  border-color: rgba(0, 83, 139, 0.37);
  padding:  2%;
  margin: 2%;
  display: flex-box;
  box-shadow: 15px 15px 18px rgb(82, 87, 75);
}
.container-index .plan{
  width: 100%;
  height: auto;
  text-align: center;
  display: grid;
  place-items: start center;
  text-decoration: none;
}
.container-index img{
  width: 100%;
  max-width: 100%;
  height: auto;
}
.container-index p{
  width: 100%;
  max-width: 100%;
  height: auto;
  text-align: justify;
}
.costo{
  font-size: 2.5rem;
  display: grid;
  place-items: start center;
  text-shadow: 2px 3px 8px darkgreen;
}
/* Fin sección Planes Bronze, Silver y Gold */

/* Inicio sección Plan Platinum */
#platinum{
  background-color: rgb(0, 0, 0);
  display: grid;
  grid-template-columns: 1fr 1fr;
  font-family: Georgia, 'Times New Roman', Times, serif;
  -webkit-box-sizing: border-box;
  box-sizing:content-box;
  float: left;
  width: 20%;
  min-width: 93%;
  max-width: 100%;
  height: 800px;
  max-height: 80px;
  min-height: 500px;
  border-radius: 15px;
  padding:  0.5%;
  margin: 2%;
}
u{
  font-size: 2rem;
  box-shadow: 8px 5px 10px 5px rgba(184, 135, 11, 0.432);
}
p{
  text-shadow: 5px 4px 5px rgb(107, 107, 107);
}
.container-index p{
  text-shadow: 5px 5px 5px rgb(92, 87, 97);
}
#text-platinum{
  color: white;
  text-align: center;
  box-shadow: 8px 5px 10px 3px darkgoldenrod;

}
.container-text-platinum{
  flex: 1;
  padding: 2%;
  border: 0px dotted black;
  width: 400px;
  text-align: justify;
}
#platinum{
    /*animation: cambioDeColor 10s infinite;*/
    border:5px groove ;
    border-image: linear-gradient(45deg, rgb(56, 56, 54), rgb(39, 39, 61), rgb(12, 49, 12), rgb(56, 56, 9)) 1;
    animation: borderAnimation 2s infinite;
}
@keyframes borderAnimation {
  0% {
      border-image: linear-gradient(45deg, rgb(0, 0, 0), rgb(78, 78, 105), rgb(29, 28, 28),  rgb(97, 32, 202)) 1%;
  }
  25% {
      border-image: linear-gradient(45deg, rgb(97, 32, 202),rgb(0, 0, 0), rgb(78, 78, 105), rgb(68, 65, 65)) 10%;
  }
  50% {
      border-image: linear-gradient(45deg, rgb(9, 44, 9), rgb(66, 66, 28), rgb(73, 73, 77), rgb(179, 179, 247)) 10%;
  }
  75% {
      border-image: linear-gradient(45deg, rgb(0, 0, 0), darkgreen, rgb(10, 10, 9), rgb(88, 88, 90)) 1%;
  }
  100% {
      border-image: linear-gradient(45deg, rgb(56, 54, 54), rgb(39, 39, 61), rgb(12, 49, 12), rgb(56, 56, 9)) 5%;
  }
}

#p-platinum{
  color: white;
  font-family: cursive;
  font-size: 1.3rem;
  padding: 0.5% 3%;
}
#platinum .imagen-platinum{
  width: 100%;
  max-width: 100%;
  height: auto;
}

/* Animación texto y bordes de sección Platinum */
.container-text-platinum #p-platinum{
  animation-duration: 15s;
  animation-name: slide-in;
  animation-iteration-count:infinite;
}
@keyframes slide-in {
  0%,25% {
    translate: 2 1vw;
    src: initial;
    border-radius: 10% 1%;
    padding: 10px;
  }
  25%,50%{
    border-radius: 1% 10%;
    color: rgb(176, 177, 114);
  }
  30%,75% {
    translate: 0 1vw;
    scale: 110% 1;
    color: rgb(255, 255, 255);
  }
  50%,80%{
    border-radius: 10% 1%;
  }
  80%,90%{
    border-radius: 5%;
  }
  90%,95%{
    border-radius: 2%;
  }
  95%,100%{
    border-radius: 0%;
  }
}

/* Fin de sección Platinum */

/* Inicio Botones para acceder a planes */
.boton{
  place-items: start center;
  display: grid;
  font-family:Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
  font-size: 1.5rem;
  border-style: groove;
  border-color: darkred;
  border-radius: 25px;
  text-decoration: none;
  color: black;
  margin-bottom: 5%;
  transition: all ease 0.8s;
}
.boton:hover{
  /*scale: 1;*/
  border-radius: 12% 3% 40%;
  color: white;
  /*font-size: 1.72rem;*/
  background-color: black;
  /*margin: 0 0 0 0;*/
  box-shadow: inset 10px -10px rgb(51, 51, 51);
  text-shadow: 7px 5px 8px rgb(222, 217, 228);
}
#ingreso-platinum:hover{
  margin: -5% -5% -20% 0;
  max-width: auto;
  min-width: 100%;
  text-shadow: 7px 5px 8px rgb(61, 61, 61);
  box-shadow: 12px 14px 10px rgb(39, 39, 39);
  color: rgb(0, 0, 0);
  font-size: 2.5rem;
  background-color: rgb(43, 144, 226);
}
#ingreso-platinum{
  color: rgb(255, 255, 255);
  padding: 2%;
  border-left-style: groove;
  border-color: black;
  text-shadow: 5px 5px 12px gray;
}
/* Fin de botones */