html, body { overflow-x: hidden; }
.cta-3 {
  padding-top: 0px;
  padding-bottom: 0px;
  background-color: #E5F0F6;
}

.cta-3 h5 {
  color: #004FEF;
  font-family: "IBMPlexSans-BoldItalic";
  font-size: 16px;
}

.cta-3 h2 span {
  font-size: 18px;
}

@media (max-width: 768px) {
  .cta-1 {
    padding-top: 30px;
    padding-bottom: 0px;
  }
}

@media (max-width: 768px) {
  .cta-3 {
    padding-right: 0%
  }
}



.feature-card img {
  width: 100%;
  height: auto;
  display: block;
}

/* Card 3 horizontal */
.feature-media--horizontal {
  display: flex;
  gap: 16px;
  align-items: center;
}

.feature-media--horizontal .feature-media__video {
  flex: 0 0 60%;
  max-width: 60%;
}

.feature-media--horizontal .feature-media__text {
  flex: 1;
}

/* En mobile, vuelve a vertical para que no quede apretado */
@media (max-width: 767.98px) {
  .feature-media--horizontal {
    flex-direction: column;
  }

  .feature-media--horizontal .feature-media__video {
    flex-basis: auto;
    max-width: 100%;
  }
}



/* Video animado */


.ventajas {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;


 /*  background-color: #b81f1f;  */
  background-image: url('https://9068661.fs1.hubspotusercontent-na1.net/hubfs/9068661/assets/img/img_MYBERLITZ_TUTOR.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center center;
  border-radius: 10px;
}

.ventajas .c-play {
  display: flex;
  justify-content: center;
  align-items: center;


}

.ventajas .c-pulse-1,
.ventajas .c-pulse-2,
.ventajas .c-pulse-3 {
  background-color: #FFF;
  content: "";
  position: absolute;
  display: flex;
  width: 70px;
  height: 70px;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
  border-radius: 50%;
  -webkit-box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.6);
  -moz-box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.6);
  -ms-box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.6);
  -o-box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.6);
  box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.6);
  -webkit-animation: ripple 3s infinite;
  -moz-animation: ripple 3s infinite;
  -ms-animation: ripple 3s infinite;
  -o-animation: ripple 3s infinite;
  animation: ripple 3s infinite;
  display: flex;
  justify-content: center;
  align-items: center;
}

.ventajas .c-pulse-1 .c-fa,
.ventajas .c-pulse-2 .c-fa,
.ventajas .c-pulse-3 .c-fa {
  font-size: 1.3rem;
}

.ventajas .c-pulse-2 {
  -webkit-animation-delay: .9s;
  -moz-animation-delay: .9s;
  -ms-animation-delay: .9s;
  -o-animation-delay: .9s;
  animation-delay: .9s;
}

.ventajas .c-pulse-3 {
  -webkit-animation-delay: .6s;
  -moz-animation-delay: .6s;
  -ms-animation-delay: .6s;
  -o-animation-delay: .6s;
  animation-delay: .6s;
}


@-webkit-keyframes ripple {
  70% {
    box-shadow: 0 0 0 50px rgba(253, 167, 0, 0);
  }

  100% {
    box-shadow: 0 0 0 0 rgba(253, 167, 0, 0);
  }
}

@keyframes ripple {
  70% {
    box-shadow: 0 0 0 50px rgba(253, 167, 0, 0);
  }

  100% {
    box-shadow: 0 0 0 0 rgba(253, 167, 0, 0);
  }
}


/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
  .ventajas {
    height: 200px;
  }
}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {}


/* End Video animado */


/* Btn iniciar ahora */
/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
  .btn-1 {
    width: 230px;
    border-radius: 50px;
  }
}

/* End Btn iniciar ahora */



/* img incluye */

.img-incluye .content-1 {
  padding: 50px;
}

.content-1 {
  position: relative;

}


.img-incluye .content-1 .card-1 {
  position: absolute;
  /* background-color: red; */
  left: 20px;
  top: -40px;
  width: 250px;
}

.img-incluye .content-1 .card-1 .icono {
  position: absolute;
  right: 0px;
  background-color: #fff;
  width: 50px;
  height: 50px;
  border-radius: 50%;

  display: flex;
  justify-content: center;
  /* horizontal */
  align-items: center;
}

.img-incluye .content-1 .card-2 .icono {
  position: absolute;
  right: 0px;
  background-color: #fff;
  width: 50px;
  height: 50px;
  border-radius: 50%;

  display: flex;
  justify-content: center;
  /* horizontal */
  align-items: center;
}

.img-incluye .content-1 .card-3 .icono {
  position: absolute;
  right: 0px;
  background-color: #fff;
  width: 50px;
  height: 50px;
  border-radius: 50%;

  display: flex;
  justify-content: center;
  /* horizontal */
  align-items: center;
}

.img-incluye .content-1 .card-4 .icono {
  position: absolute;
  right: 0px;
  background-color: #fff;
  width: 50px;
  height: 50px;
  border-radius: 50%;

  display: flex;
  justify-content: center;
  /* horizontal */
  align-items: center;
}

/* Contenedor del botón circular blanco */
.btn-mic-1 {
  position: absolute;
  right: 0px;
  width: 50px;
  height: 50px;
  border-radius: 50%;

  /* background: #fff; */
  /* position: relative; */

  display: grid;
  place-items: center;

  /* clave para que el ::before quede detrás sin tapar el contenido */
  z-index: 0;
  isolation: isolate;
  /* recomendable para evitar bugs de capas */
}

.btn-mic-1::before {
  content: "";
  position: absolute;
  inset: -18px;
  border-radius: 50%;
  background: rgba(0, 200, 120, 0.35);

  z-index: -1;
  /* queda por debajo del círculo blanco */
  pointer-events: none;

  transform: scale(0.6);
  opacity: 0;
  animation: pulse 1.5s ease-out infinite;
}

@keyframes pulse {
  0% {
    transform: scale(0.6);
    opacity: 0;
  }

  10% {
    opacity: 1;
  }

  45% {
    transform: scale(1.15);
    opacity: 0;
  }

  100% {
    transform: scale(1.15);
    opacity: 0;
  }
}


.img-incluye .content-1 .card-1 .icono img {
  max-width: 30px;
}

.img-incluye .content-1 .card-2 .icono img {
  max-width: 30px;
}

.img-incluye .content-1 .card-3 .icono img {
  max-width: 30px;
}

.img-incluye .content-1 .card-4 .icono img {
  max-width: 30px;
}

.img-incluye .content-1 .card-2 {
  position: absolute;
  /* background: blue; */
  right: 20px;
  top: 0px;
  width: 250px;
}

.img-incluye .content-1 .card-3 {
  position: absolute;
  /* background: yellow; */
  bottom: 0px;
  left: 30px;
  width: 250px;
}

.img-incluye .content-1 .card-4 {
  position: absolute;
  /* background: green; */
  right: 50px;
  bottom: -50px;
  width: 250px;
}

/* MOBILE */
@media only screen and (max-width: 600px) {

  .img-incluye .content-1 .card-1,
  .img-incluye .content-1 .card-2,
  .img-incluye .content-1 .card-3,
  .img-incluye .content-1 .card-4 {
    max-width: 140px;
  }

  .img-incluye .content-1 {
    padding: 10px;
  }

  .img-incluye {
    margin-top: 70px;
    margin-bottom: 30px;
  }

  .img-incluye .content-1 .card-1 {
    left: 0px;
  }

  .img-incluye .content-1 .card-2 {
    top: -20px;
    right: 0px;
  }

  .img-incluye .content-1 .card-3 {
    bottom: -30px;
    left: 0px;
  }

  .img-incluye .content-1 .card-4 {
    right: 0px;
  }

}

/* end img incluye */

/* formulario */
@media only screen and (max-width: 600px) {
  .formulario .c-hs-form .c-block {
    padding: 0px 20px 20px 20px;
    background-color: rgba(255, 255, 255, 0.8);
  
  }

  .formulario .c-hs-form .hs-form-field label {
    font-size: 0.8rem;
  }

}