body.sp{
	background: #a6b0d0;
	background: radial-gradient(circle farthest-corner at center right, #e0cdb3 0%, #ffffff 50%);
	background: -webkit-radial-gradient(circle farthest-corner at center right, #e0cdb3 0%, #ffffff 50%);
	background: -moz-radial-gradient(circle farthest-corner at center right, #e0cdb3 0%, #ffffff 50%);
	background-attachment:fixed;
	  .banner_sup{
		  float: left;
		  width: 100%;
		  margin-bottom: 60px;
		  .wrap{
			  position: relative;
			  .cuadro{
				  background-color: #fff;
				  border: 1px solid #E0E0E0;
				  padding: 40px;
				  border-radius: 12px;
				  width: 450px;
				  position: absolute;
				  left: 0;
				  top: 90px;
				  h2{
					  margin: 0;
					  color: var(--sp1);
					  font-size: 50px;
					  font-weight: 700;
				  }
				  p{
					width: 320px;
				  }
			  }
			  .img{
				  background-image: url('images/banner_sp.jpg');
				  background-repeat: no-repeat;
				  background-size: cover;
				  background-position: right;
				  height: 493px;
				  width: 1005px;
				  float: right;
				  border-radius: 12px;
			  }
		  }
	  }
	  .planes{
		  float: left;
		  width: 100%;
		  text-align: center;
  
		  .encabezado{
			  h2{
				  margin: 0;
				  font-size: 50px;
				  color: var(--op4);
				  font-weight: 700;
			  }
			  p{
				  color: var(--op4);
				  font-weight: 500;
				  font-size: 18.5px;
				  margin-top: 10px;
			  }
		  }
	  }
	  .requisitos{
		  float: left;
		  width: 100%;
		  text-align: left;
		  background-color: var(--sp1);
		  color: #fff;
		  margin: 80px 0;
		  .wrap{
			  position: relative;
  
			  i{
				  font-size: 36px;
				  color: #fff;
				  cursor: pointer;
				  position: absolute;
				  transition: all 0.3s ease;
				  &:hover{
					  color: #ccc;
				  }
				  &:first-of-type{
					  left: -60px;
					  top: 70%;
					  transform: translateY(-50%);
				  }
				  &:last-of-type{
					  right: -60px;
					  top: 70%;
					  transform: translateY(-50%);
				  }
			  }
			  >p{
				width: 430px;
			  }
		  }
		  h2{
			  font-size: 36px;
			  font-weight: 800;
			  margin-bottom: 10px;
		  }
		  p{
			  font-size: 18px;
			  line-height: 28px;
			  font-weight: 400;
		  }
		  .carrusel{
			  display: flex;
			  gap: 20px;
			  margin-bottom: 50px;
			  user-select: none;
  
			  >div{
				  background-color: #fff;
				  padding: 30px 40px;
				  border-radius: 12px;
				  min-width: 300px;
				  min-height: calc(200px - 60px);
				  h3{
					  margin-top: 0;
					  font-size: 25px;
					  font-weight: 600;
					  margin-bottom: 10px;
					  color: #05131D;
				  }
				  p{
					  font-size: 16px;
					  line-height: 24px;
					  font-weight: 400;
					  margin: 0;
			color: #05131DB2;
				  }
			  }
		  }
	  }
	  .plat_inteligente{
		  float: left;
		  width: 100%;
		  .wrap{
			  width: 1100px;
		  }
		  .encabezado{
			display: flex;
			justify-content: space-between;
			align-items: flex-end;
	  
			h2{
				font-size: 36px;
				font-weight: 800;
				color: var(--op4);
				margin-bottom: 8px;
			}
			p{
				font-size: 18px;
				font-weight: 400;
				line-height: 28px;
				color: var(--op4);
				margin: 0;
				width: 480px;
			}
		  }
		  .cont{
			display: grid;
			grid-template-columns: 1fr 1fr;
			>div{
			  display: flex;
			  align-items: center;
			  gap: 25px;
			  margin-top: 30px;
			  img{
				width: 40px;
				height: 40px;
				padding: 12px;
				border: 2px solid var(--sp1);
				border-radius: 8px;
			  }
			  h3{
				font-size: 20px;
				font-weight: 800;
				color: var(--op4);
				margin: 0;
				margin-bottom: 6px;
			  }
			  p{
				font-size: 16px;
				font-weight: 400;
				line-height: 24px;
				color: var(--op4);
				margin: 0;
				width: 320px;
			  }
			}
		  }
	  }
	  .recursos{
		  float: left;
		  width: 100%;
		  margin: 80px 0;
		  .wrap{
			  h2{
				  font-size: 50px;
				  font-weight: 700;
				  margin-bottom: 10px;
				  color: var(--op4);
				  text-align: center;
			  }
			  >p{
				  font-size: 24px;
				  line-height: 140%;
				  font-weight: 500;
				  color: var(--op4);
				  text-align: center;
			  }
			  .elementos{
				  display: grid;
				  grid-template-columns: auto 1fr;
				  gap: 80px;
  
				  .opciones{
					  >div{
						  background-color: #fff;
						  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
						  border-radius: 16px;
						  padding: 6px 40px;
						  display: flex;
						  align-items: center;
						  gap: 20px;
						  margin-top: 20px;
						  cursor: pointer;
  
						  >div{
							  background-color: var(--sp1);
							  padding: 12px 15px;
							  border-radius: 8px;
							  i{
								  font-size: 26px;
								  color: #fff;
								  transform: rotate(-40deg);
							  }
						  }
						  h3{
							  color: #05131D;
						  }
					  }
					  >div.act{
						  background-color: var(--sp1);
						  >div{
							  background-color: var(--sp2);
						  }
						  h3{
							  color: #fff;
						  }
					  }
					  >div.op1{
						  margin-top: 0;
					  }
				  }
				  .texto{
					  background-color: #fff;
					  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
					  border-radius: 16px;
					  padding: 40px;
					  position: relative;
					  border: 1px solid #E0E0E0;
  
					  .flecha{
						  background-color: var(--sp1);
						  padding: 12px 15px;
						  border-radius: 8px;
						  width: fit-content;
						  i{
							  font-size: 26px;
							  color: #fff;
							  transform: rotate(-40deg);
						  }
					  }
					  h3{
						  font-size: 20px;
						  font-weight: 600;
					  }
					  p{
						  font-size: 14px;
						  font-weight: 500;
						  line-height: 163%;
						  color: #05131DB2;
					  }
					  p:last-child{
						  margin-bottom: 0;
					  }
					  ul{
						  li{
							  font-size: 14px;
							  font-weight: 800;
							  line-height: 100%;
							  color: var(--sp1);
							  margin-bottom: 10px;
						  }
						  li:last-child{
							  margin-bottom: 0;
						  }
					  }
				  }
				  .texto.op2{
					  li{
						  color: #05131DB2;
						  font-weight: 500;
						  line-height: 25px;
						  margin-bottom: 0;
					  }
				  }
				  .texto.op3{
					  ul{
						  li{
							  margin-bottom: 0;
						  }
						  p{
							  margin: 10px 0;
						  }
					  }
				  }
			  }
		  }
	  }
	  .saber_mas{
		  float: left;
		  width: 100%;
		  margin-bottom: 80px;
		  .banner{
			  background-image: url('images/saber_mas_sp.jpg');
			  background-repeat: no-repeat;
			  background-size: cover;
			  background-position: center;
			  padding: 30px;
			  height: 345px;
			  border-radius: 16px;
			  >div{
				  float: right;
			  }
  
			  h2{
				  color: #fff;
				  font-weight: 800;
				  font-size: 44px;
			  }
			  p{
				  color: #fff;
				  font-size: 18px;
				  font-weight: 400;
				  line-height: 160%;
				  width: 550px;
			  }
			  a{
				cursor: pointer;
				display: flex;
				align-items: center;
				gap: 15px;
				text-decoration: none;
				color: #fff;
				font-size: 17px;
				font-weight: 500;
			}
		  }
	  }
	  button,.frecuencia>div.act,.productos .ahorro{
		  background-color: var(--sp1) !important;
	  }
		#v_login {
			.registro,
			.verificacion,
			.conexion,
			.google-auth {
				background-color:var(--spf);
			}
			.pestanas{
				background-color:var(--sp1);
			}
		}
  }

  @media (max-width: 768px) {
	body.sp{
		.banner_sup{
			margin-bottom: 40px;
			.wrap{
				.cuadro{
					position: static;
					width: calc(100% - 40px);
					padding: 30px 20px;
					margin-bottom: 20px;
					text-align: center;
					h2{
						font-size: 32px;
					}
					p{
						padding-bottom: 8px;
					}
					a{
						margin: 0 auto;
						float: none;
					}
				}
				.img{
					width: 100%;
					height: 300px;
					float: none;
					background-position: center;
				}
			}
		}
		.planes{
			.encabezado{
				h2{
					font-size: 32px;
				}
				p{
					font-size: 16px;
					padding: 0 20px;
				}
			}
		}
		.requisitos{
			margin: 40px 0;
			padding-bottom: 20px;
			.wrap{
				>p{
					text-align: center;
				}
			}
			h2{
				font-size: 28px;
				text-align: center;
			}
			>p{
				text-align: center;
			}
			p{
				font-size: 16px;
			}
			.carrusel{
				flex-direction: column;
				>div{
					padding: 20px;
					min-height: auto;

					h3{
						font-size: 20px;
					}
				}
			}
			i.fas{
				&:first-of-type{
					left: 10px;
					top: auto;
					bottom: -50px;
					transform: translateY(0);
				}
				&:last-of-type{
					right: 10px;
					top: auto;
					bottom: -50px;
					transform: translateY(0);
				}
			}
		}
		.plat_inteligente{
			.wrap{
				width: 100%;
			}
			.encabezado{
				flex-direction: column;
				align-items: flex-start;
				text-align: center;
				h2{
					font-size: 28px;
				}
				p{
					font-size: 16px;
					padding-bottom: 12px;
				}
				a{
					float: none !important;
					margin: 0 auto !important;
				}
			}
			.cont{
				grid-template-columns: 1fr;
			}
		}
		.recursos{
			margin: 40px 0;
			.wrap{
				h2{
					font-size: 32px;
				}
				>p{
					font-size: 18px;
				}
				.elementos{
					grid-template-columns: 1fr;
					gap: 30px;
					.opciones>div{
						padding: 6px 20px;
						padding: 6px;
						align-items:center;
						gap: 10px;
						margin: 0;
						margin-bottom: 6px;
						
						h3{
							font-size: 16px;
							margin-top: 0;
							margin-bottom: 0;
							br{
								display: none;
							}
							br::after{
								content: ' ';
								display: inline;
							}
						}
						div:has(>i){
							padding: 4px 6px;
							i{
								font-size: 20px;
								transform: rotate(45deg);
							}
						}
					}
					.texto{
						padding: 30px 20px;
					}
				}
			}
		}
		.saber_mas{
			margin-bottom: 40px;
			.banner{
				height: auto;
				padding: 30px 20px;
				text-align: center;
				>div{
					float: none;
				}
				h2{
					font-size: 28px;
				}
				p{
					font-size: 16px;
				}
				a{
					justify-content: center;
				}
			}
		}
	}
	.frecuencia{
		width: 90% !important;
		display: flex !important;
		align-items: center !important;
		font-size: 13px !important;
		>div.act{
			font-size: 13px !important;
		}
	}
	.productos{
		position: relative !important;
		.prod,.precio{
			position: static !important;
		}
	}
}