body.pn{
	.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(--pn1);
					font-size: 50px;
					font-weight: 700;
				}
				p{
					width: 400px;
				}
			}
			.img{
				background-image: url('images/banner_pn.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(--pn1);
		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(--pn1);
			  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: 330px;
			}
		  }
		}
	}
	.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(--pn1);
							padding: 12px 15px;
							border-radius: 8px;
							i{
								font-size: 26px;
								color: #fff;
								transform: rotate(-40deg);
							}
						}
						h3{
							color: #05131D;
						}
					}
					>div.act{
						background-color: var(--pn1);
						>div{
							background-color: #6D758F;
						}
						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(--pn1);
						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(--pn1);
							margin-bottom: 10px;
						}
						li:last-child{
							margin-bottom: 0;
						}
					}
				}
				.texto.op2{
					li{
						color: #05131DBF;
						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_pn.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: 500px;
			}
			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(--pn1) !important;
	}
	#v_login {
		.registro,
		.verificacion,
		.conexion,
		.google-auth {
			background-color:var(--pnf);
		}
		.pestanas{
			background-color:var(--pn1);
		}
	}
}

@media (max-width: 768px) {
	body.pn{
		.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;
		}
	}
}