.svg-hero{
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
}

.power{
	padding-top: 70px;
	padding-bottom: 300px;
	margin-top: 50px;
	margin-bottom: 50px;
}
.fondo{
  /* background: radial-gradient(circle, #FFFFFF, #FFD700); /* De blanco a dorado suave */
  background: white;
  background-size: auto;
  background-position:left;
}


.fondo_entrenamiento {
  position: relative;
}

.fondo_entrenamiento::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url("../images/pro/fondo_diag_6.png");
  background-size: auto;
  background-position: center;
  opacity: 0.3; /* Ajusta el valor de opacidad según tus necesidades */
  z-index: -1;
}


.color-blanco{
	color: white;
}

.video-marco {
  max-width: 560px;
  margin: 0 auto;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
  border-radius: 8px;
  overflow: hidden;
}

#titulo-efecto {
  color: transparent;
  background: linear-gradient(45deg, #ff00b3, #00ffe7);
  -webkit-background-clip: text;
  background-clip: text;
}

#entrenamiento-efecto {
  color: transparent;
  background: linear-gradient(45deg, #ff00b3, #00ffe7);
  -webkit-background-clip: text;
  background-clip: text;
}

.h1_3bn {
  font-family:SophosSans-SemiBold,SophosSans-Medium,arial;
  margin-top: 0;
  position: relative;
  display: inline-block;
  font-size: 48px;
  font-weight: bold;
  color: black;
  overflow: hidden;
}

.h1_3bn {
  font-family:SophosSans-SemiBold,SophosSans-Medium,arial;
  margin-top: 0;
  position: relative;
  display: inline-block;
  font-size: 48px;
  font-weight: bold;
  color: black;
  overflow: hidden;
}

.h1_3bn::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: #ffcc00;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease-in-out;
}

.h1_3bn:hover::after {
  transform: scaleX(1);
}

@keyframes glow {
  0% { text-shadow: 0 0 0 rgba(0, 36, 88, 0.2); }
  50% { text-shadow: 0 0 10px rgba(0, 36, 88, 0.6); }
  100% { text-shadow: 0 0 0 rgba(0, 36, 88, 0.2); }
}

.box {
  width: 200px;
  height: 200px;
  background-color: #f44336;
  position: relative;
  overflow: hidden;
  transform-origin: center center;
  transition: transform 0.3s ease, background-color 0.3s ease;
}

.box::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.2);
  transform: skewX(-45deg) translateX(0);
  transition: transform 0.3s ease;
  z-index: -1;
}

.box:hover {
  transform: rotate(45deg) scale(1.2);
  background-color: #ff9800;
}

.box:hover::before {
  transform: skewX(-45deg) translateX(100%);
}