@import url("https://fonts.googleapis.com/css2?family=Titillium+Web:wght@200;300;400;600;700;900&display=swap");
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;700&display=swap');

* {
  margin: 0;
  padding: 0;
  font-family: "Titillium Web", sans-serif;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}
body {
  background: rgb(248,248,248);
  overflow-x: hidden;
}
P{
  color: #4d4d4d;
}

/* --- ESTILOS DE LA CABECERA -- */
.cabecera {
  height: 100px;
  background: #ffffff;
  -webkit-box-shadow: 0px 8px 10px 0.5px rgba(0, 0, 0, 0.05);
          box-shadow: 0px 8px 10px 0.5px rgba(0, 0, 0, 0.05);
}
.cabecera a img {
  height: 63px;
}
.cabecera p {
  font-size: 20px;
  font-weight: 400;
}
.cabecera p a {
  text-decoration: none;
  color: #409d50;
}
/* --- FIN DE LOS ESTILOS DE LA CABECERA -- */

/* ESTILOS DEL BANNER */

.banner {
  margin-top: 100px;
  height: 465px;
  background-image: url("../img/banner/banner.jpg");
  background-size: cover;
}
.banner .container .titulo {
  color: #fff;
  padding-top: 85px;
  font-weight: 600;
  font-size: 36px;
  text-transform: uppercase;
}
.banner .container .subtitulo {
  color: #fff;
  font-weight: normal;
  font-size: 28px;
  padding-bottom: 85px;
}

/* --- FIN DE LOS ESTILOS DEL BANNER -- */

/* ESTILOS DEL CARD */
.card {
  -webkit-box-shadow: 0px 1px 12px rgba(0, 0, 0, 0.1);
          box-shadow: 0px 1px 12px rgba(0, 0, 0, 0.1);
  border-radius: 10px;
}
.card-body h4 {
  font-weight: normal;
  font-size: 36px;
  text-transform: uppercase;
}
.card-body h5 {
  font-weight: 700;
  color: #0978B5;
  font-size: 46px;
}
.card-img {
  max-height: 300px;
}
.col-sm-12 p {
  font-size: 16px;
}
.plan-detalle img {
  float: left;
  display: block;
  margin-top: 6px;
}
.detalle :is(p) {
  text-align: center;
  line-height: 30px;
}
.detalle .hosting {
  font-size: 18px;
  font-weight: 700;
}
.detalle .hosting span {
  font-weight: 400;
}
.detalle .precio {
  font-size: 22px;
  font-weight: 400;
  color: #AE0000;
}
.detalle .oferta {
  font-weight: 600;
  font-size: 36px;
}
.detalle .prom {
  font-family: Open Sans;
  font-weight: normal;
  font-size: 12px;
}
.detalle .cupon {
  font-family: Open Sans;
  font-weight: normal;
  font-size: 14px;
}
.boton {
  margin: auto;
  text-align: center !important;
  max-width: 211px;
  padding-top: 15px;
  padding-bottom: 15px;
  background-color: #409d50;
  -webkit-transition: 0.3s ease all;
  -o-transition: 0.3s ease all;
  transition: 0.3s ease all;
  cursor: pointer;
}
.boton:hover {
  background-color: #2ebd59;
}
.boton a {
  text-decoration: none;
  color: #fff;
}

/* --- FIN DE LOS ESTILOS DEL CARD --- */

/* --- ESTILOS DEL LISTADO -- */
.benef li {
  display: inline-block;
  padding-left: 30px;
  padding-right: 30px;
}

/* --- FIN DE LOS ESTILOS DEL lISTADO --- */

/* --- ESTILOS DE LA TABLA -- */

.tabla {
  background-color: #fff;
}
.tabla h2 {
  font-weight: normal;
  font-size: 28px;
  color: #4D4D4D;
}

.tabla h3 {
  font-style: normal;
  font-weight: 600;
  font-size: 36px;
  color: #0978B5;
}

.tabla-c-titulo {
  color: #4d4d4d;
  font-family: Open Sans;
  font-style: normal;
  font-weight: bold;
  font-size: 16px;
  text-align: left;
}
.tabla-c-row {
  color: #4d4d4d;
  font-family: Open Sans;
  font-style: normal;
  font-weight: normal;
  font-size: 16px;
  text-align: left;
}
.tabla-c-row,
.tabla-c-titulo {
  background-color: #f8f8f8;
}
.tabla-s-row {
  color: #4d4d4d;
  font-family: Open Sans;
  font-style: normal;
  font-weight: normal;
  font-size: 16px;
  text-align: center;
}
.fondo {
  background-color: #f8f8f8;
}
.btn-contratar {
  text-decoration: none !important;
  color: #409d50;
  padding-top: 9px;
  padding-bottom: 9px;
  padding-left: 35px;
  padding-right: 35px;
  width: 80%;
  border: 2px solid #409d50;

}
.btn-contratar:hover {
  -webkit-transition: 0.3s ease all;
  -o-transition: 0.3s ease all;
  transition: 0.3s ease all;
  border: 2px solid #2ebd59;
  border: none;
  background-color: #2ebd59;
  color: #fff;
}
.bar.tabla{
  display: none;
}

/* --- FIN DE LOS ESTILOS DE LA TABLA --- */

/* --- ESTILOS DEL ACORDEON -- */

.bar {
  background: #f8f8f8;
  border: 1px solid #e0dedd;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 30px;
  cursor: pointer;
  -webkit-box-shadow: 0px 0px 20px rgba(214, 214, 214, 0.5);
          box-shadow: 0px 0px 20px rgba(214, 214, 214, 0.5);
}
.activado{
  transition: .3s;
  border: 1px solid transparent;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}
.bar h3{
  font-weight: bold;
font-size: 20px;
color: #4d4d4d;
}
.bar h3 span{
  font-size: 16px;
  color: #E0DEDD;
}
.answer{
  color:#595959;
  display: none;
  padding-left: 40px;
  padding-right: 40px;
  padding-top: 20px;
  padding-bottom: 20px;
  background-color: #f8f8f8;
}

.garantia-texto-titulo{
  color: #0978B5;font-weight: 600; font-size: 36px;
}
.garantia-texto-contenido{
  color: #4d4d4d;
}
.garantia-texto-ayuda{
  color: #409D50; font-size: 16px;
}
.grata{
  padding-right: 150px;
}
/* --- FIN DE LOS ESTILOS DEL ACORDEON -- */


/* --- ESTILOS DEL FOOTER -- */
.pie{
  min-height: 60px;
  background-color: #4D4D4D;
  overflow-y: hidden;
}
.pie h1{
  display: inline;
  line-height: 60px;
  color: #f8f8f8;
  font-size: 16px;
}
.pie .power{
  float: right;
}


#sp-footer {
  background: #4d4d4d;
  color: #fff;
  padding: 8px 0;
}
#sp-footer a {
color: #fff;
}
#sp-footer a:hover {
color: #fff;
}
#sp-footer-wrapper ul {
display: inline-block;
}
#sp-footer-wrapper ul.nav {
display: inline-block;
list-style: none;
padding: 0;
margin: 0 5px;
}
#sp-footer-wrapper ul.nav li {
display: inline-block;
margin: 0 5px;
}
#sp-footer-wrapper ul.nav li a {
display: block;
}
#sp-footer-wrapper ul.nav li a:hover {
background: none;
}
#sp-footer-wrapper .helix-framework {
display: inline-block;
}
#sp-footer-wrapper .helix-framework .helix-logo {
display: block;
width: 130px;
height: 40px;
text-indent: -9999px;
background: url(../images/helix-logo-white.png) no-repeat 0 0;
}
#sp-footer-wrapper .copyright {
  display: block;
}

#sp-footer1,#sp-footer2 {
  text-align: center;
}
.sp-copyright{
  float: left;
}
.powered{
  float: right;
}

#wsp {
	position: fixed;
    left: 30px;
    z-index: 100;
    bottom: 20px;
}

.btn-whatsap{
	position: relative;
    width: 60px !important;
    height: 60px !important;
    display: grid !important;
    place-content: center;
    border-radius: 50%;
    background-color: rgba(77, 194, 71,1);
}

.btn-whatsap a{
   display: grid !important;
   place-content: center;
}

.btn-whatsap a img{
   width: 28px;
}

.btn-whatsap a:before {
    content: "";
    position: absolute;
    top: -6px;
    bottom: -6px;
    left: -6px;
    right: -6px;
    background-color: rgba(77, 194, 71,.7);
    z-index: -1;
    border-radius: 50%;
    animation: scaleZoom 1.7s infinite linear ;
}

.btn-whatsap a:after {
    content: "";
    position: absolute;
    top: -10px;
    bottom: -10px;
    left: -10px;
    right: -10px;
    background-color: rgba(77, 194, 71,.5);
    z-index: -2;
    border-radius: 50%;
    animation: scaleZoom 1.7s infinite linear ;
}


@keyframes scaleZoom{
  0% {
      opacity: 1;
      filter: none;
   }
   10% {
      opacity: 0.1;
   }
   20% {
      opacity: 0.2;
   }
   30% {
      opacity: 0.3;
   }
   40% {
      opacity: 0.4;
   }
   50% {
      opacity: 0.5;
   }
   60% {
      opacity: 0.6;
   }
   70% {
      opacity: 0.7;
   }
   80% {
      opacity: 0.8;
   }
   90% {
      opacity: 0.9;
   }
   100% {
      opacity: 1;
      filter: none;
   }
}