@import url('https://fonts.googleapis.com/css2?family=Big+Shoulders+Display:wght@200;400;700&family=Space+Grotesk:wght@200;400;700&display=swap');

:root {
	--page-w: 77.5rem;

	--fon-t: "Space Grotesk", serif;
	--fon-h: "Big Shoulders Display", serif;

	--sca-t: 1.125rem;
	--sca-h: 1rem;
	--sca-lh: 1em;
	--sca-mar: 1rem;
	--sca-pad: 2.5rem;

	--ratio: .5;

	--fon-w1: 400;
	--fon-w5: 400;
	--fon-w7: 600;
	--fon-w9: 600;

	--col-dar: #f3f3f3;
	--col-dar-op25: #f3f3f3;
	--col-bg: #1a1a1a;
	--col-lig: #b562ec;
	--col-sep: #753af3;
	--col-pri: #753af3;
	--col-pri-op75: #753af3BF;
	--col-pri-bg: #753af3;
	--col-acc: #fde336;
	--col-acc-bg: #fde336;

	--col-red: #F03D3E;
	--col-gre: #007B40;

	--col-grad-v: linear-gradient(180deg, var(--col-dar) 0%, var(--col-pri) 100%);

	--rad-s: 1rem;
	--rad-m: 1rem;
	--rad-l: 1rem;
	--rad-bt: 10rem;

	--sha-s: none;
	--sha-m: none;
	--sha-l: none;
	--sha-i: inset 0 .125rem .25rem 0 var(--col-dar-op25);

	--ani-f: all 500ms cubic-bezier(.7,0,.3,1);
}

::-webkit-scrollbar-track {
	background: transparent;
}

.header {
	padding: .875rem 0;
	background: var(--col-pri);
}
.branding img {
	margin: 0;
	height: 4.25rem;
}
.header ul {
	margin-top: .875rem;
}
.header ul li a:hover {
	color: var(--col-acc);
}

.section.featured {
	position: relative;
	border-top: solid 6rem var(--col-pri);
	margin-top: 0;
	background: -moz-linear-gradient(top,  rgba(117,58,243,1) 0%, rgba(117,58,243,0) 50%, rgba(117,58,243,0) 100%);
	background: -webkit-linear-gradient(top,  rgba(117,58,243,1) 0%,rgba(117,58,243,0) 50%,rgba(117,58,243,0) 100%);
	background: linear-gradient(to bottom,  rgba(117,58,243,1) 0%,rgba(117,58,243,0) 50%,rgba(117,58,243,0) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#753af3', endColorstr='#00753af3',GradientType=0 );
}
.section.featured img {
	position: absolute;
	bottom: 5%;
	right: 12.5%;
	height: 85%;
	z-index: 999;
}
.section.featured .content { 
	height: calc(100svh - 6rem);
	top: auto;
	transform: none;
	position: relative;
    background: center center #191919aa;
    background-image: url(../images/pattern-featured.svg);
    background-size: 35rem auto;
    padding: 2rem 6rem;
    border-radius: 11rem 11rem 0 0;
    display: flex;
    justify-content: center;
    flex-direction: column;
    box-sizing: border-box;
}
.featured .content:before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    background: -moz-linear-gradient(top, rgba(25,25,25,0.65) 0%, rgba(25,25,25,0.85) 50%, rgba(25,25,25,1) 100%);
    background: -webkit-linear-gradient(top, rgba(25, 25, 25, 0.65) 0%, rgba(25, 25, 25, 0.85) 50%, rgba(25, 25, 25, 1) 100%);
    background: linear-gradient(to bottom, rgba(25, 25, 25, 0.65) 0%, rgba(25, 25, 25, 0.85) 50%, rgba(25, 25, 25, 1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#80191919', endColorstr='#191919',GradientType=0 );
    border-radius: 11rem 11rem 0 0;
}
.section.featured .content * {
	color: var(--col-dar);
	position: relative;
	z-index: 10;
	text-align: left;
	max-width: 40rem;
	text-wrap: balance;
}
.section.featured .content p {
	margin-bottom: 3rem;
}

.section.featured .content .bt {
	align-self: start;
	color: var(--col-bg);
	background: var(--col-acc);
}

.featured h1, 
.main h2, 
.main h3 {
	font-weight: normal;
}
p {
	text-wrap: balance!important;
}

.main h6 {
	padding: .5rem 1rem;
	display: inline-block;
	border-radius: 5rem;
	border: solid 1px currentColor;
	color: var(--col-lig);
	text-transform: uppercase;
	letter-spacing: .05em;
	margin-bottom: 2rem;
}

.main ul.list li:before {
	background-color: transparent;
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center center;
	background-image: url("data:image/svg+xml,%3Csvg width='112' height='112' viewBox='0 0 112 112' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M68.6174 0V23.9265L85.5357 7.00826L104.046 25.5188L87.128 42.4371H111.054V68.6174H87.1282L104.046 85.5357L85.5357 104.046L68.6174 87.1278V111.054H42.4371V87.128L25.5188 104.046L7.00826 85.5357L23.9265 68.6174H0V42.4371H23.9267L7.00826 25.5186L25.5188 7.00804L42.4371 23.9263V0H68.6174Z' fill='%23753AF3'/%3E%3C/svg%3E%0A");
}
.main .bg ul.list li:before {
background-image: url("data:image/svg+xml,%3Csvg width='112' height='112' viewBox='0 0 112 112' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M68.6174 0V23.9265L85.5357 7.00826L104.046 25.5188L87.128 42.4371H111.054V68.6174H87.1282L104.046 85.5357L85.5357 104.046L68.6174 87.1278V111.054H42.4371V87.128L25.5188 104.046L7.00826 85.5357L23.9265 68.6174H0V42.4371H23.9267L7.00826 25.5186L25.5188 7.00804L42.4371 23.9263V0H68.6174Z' fill='%23b562ec'/%3E%3C/svg%3E%0A");	
}
.section.bg h2,
.section.bg li {
	color: var(--col-dar);
}

#plataforma {
	position: relative;
	z-index: 1;
	margin-bottom: -2.5rem;
}
#plataforma .page {
	position: relative;
	z-index: 9;
}
#plataforma picture {
	position: absolute;
	left: calc(50% + 2.5rem);
	top: 0;
	right: 2rem;
	bottom: 7.5rem;
	overflow: hidden;
}
#plataforma picture img {
	object-fit: cover;
	width: 100%;
	height: calc(100% + 1px);
	border-radius: 30rem 30rem 2rem 2rem;
}
#plataforma h2,
#plataforma p {
	max-width: 35rem;
}

#plataforma .col .col + .col {
	transform: translateY(-2rem);
}
#plataforma .card {
	padding: 3rem 2rem 1.75rem;
	border-radius: 1rem;
	border: none;
	background: #753af3aa;
	backdrop-filter: blur(1rem);
	position: relative;
	margin-top: 4rem;
}
#plataforma .card p {
	font-size: 1.25rem;
	line-height: 1.1em;
	font-weight: 200;
	max-width: 100%;
}
#plataforma .card img {
	position: absolute;
	left: 2.5rem;
	top: 0;
	transform: translateY(-50%);
	width: 4rem;
	text-align: center;
	line-height: 3rem;
	border-radius: .625rem;
	background: var(--col-lig);
	box-shadow: 0 0 0 .5rem var(--col-lig);
}

#funcionalidades {
	margin: 0;
	position: relative;
	background: var(--col-bg);
}
#funcionalidades:after {
	content: '';
	position: absolute;
	left: 15%;
	top: 0;
	bottom: 0;
	right: 2rem;
	border-radius: 30rem 2rem 2rem 30rem;
	background: var(--col-pri);
}
#funcionalidades .gap + .col {
	position: relative;
	z-index: 10;
}
#funcionalidades picture {
	border-radius: .75rem;
	padding: 2rem .25rem .25rem;
	background: #000;
	transform: scale(.9);
	transform-origin: 50% 0%;
}
#funcionalidades picture:before {
	content: 'woypass.com x';
	font-size: .625rem;
	position: absolute;
	left: 1rem;
	top: .25rem;
	line-height: 1.75rem;
	padding: 0 .5rem;
	background: #222;
	color: #666;
	border-radius: .5rem .5rem 0 0;
}
#funcionalidades picture:after {
	content: '';
	position: absolute;
	right: .75rem;
	top: .75rem;
	height: .5rem;
	width: .5rem;
	border-radius: 1rem;
	background: #444;
	box-shadow: -1rem 0 0 0 #444, -2rem 0 0 0 #444;
}
#funcionalidades picture img {
	width: 100%;
	border-top: solid 1px #222;
	border-radius: 0 0 .5rem .5rem;
}
#funcionalidades picture img + img {
	position: absolute;
	border-radius: .25rem;
	z-index: 9;
	width: 0;
	transform: none;
	top: auto;
	bottom: auto;
	left: auto;
	right: auto;
}
#funcionalidades picture img:nth-child(2) {
	left: -5rem;
	top: 12rem;
	width: 15rem;
	box-shadow: 0 1rem 1rem -.5rem rgba(0,0,0,.75);
}
#funcionalidades picture img:nth-child(3) {
	right: -4rem;
	top: 3rem;
	width: 12rem;
	border-radius: .75rem;
	z-index: 11;
	box-shadow: 0 3rem 3rem -.5rem rgba(0,0,0,.75);
}
#funcionalidades picture img:nth-child(4) {
	right: 7rem;
	top: calc(100% - 1rem);
	width: 22rem;
	box-shadow: 0 2rem 2rem -.5rem rgba(0,0,0,.75);
	transform: rotate(-3deg);
}
#funcionalidades picture img:nth-child(5) {
	right: -5rem;
	top: calc(100% - 6rem);
	width: 9rem;
	transform: rotate(5deg);
	box-shadow: 0 2rem 2rem -.5rem rgba(0,0,0,.75);
}

#funcionalidades {
	position: relative;
}
#funcionalidades:before {
	content: '';
	position: absolute;
	inset: 0;
	background-image: url(../images/ilustraciones/funcionalidades.svg);
	background-repeat: no-repeat;
	background-position: -90% calc(0% + 6rem);
	background-size: 70% auto;
	z-index: 1;
	transform: scaleX(-1);
}
#funcionalidades .page {
	position: relative;
	z-index: 2;
}
#funcionalidades h6 {
	background: var(--col-pri);
	color: var(--col-acc);
}

#planes {
	position: relative;
}
#planes h6,
#planes h2,
#planes p {
	position: relative;
	z-index: 10;
}
#planes:after {
	content: '';
	position: absolute;
	top: 0;
	left: 54%;
	transform: translateX(-50%);
	height: 32rem;
	aspect-ratio: 1 / 2;
	background-image: url(../images/ilustraciones/planes2.svg);
	background-repeat: no-repeat;
	background-position: 50% 100%;
	background-size: cover;
	z-index: 5;
}
#planes .card {
	background: #000000aa;
	backdrop-filter: blur(1rem);
	position: relative;
}
#planes .card > img {
	position: absolute;
	z-index: 1;
	top: 5%;
	left: 0;
	transform: translate(-50% , -50%);
	width: 12rem;
}
#planes .col:last-child .card > img {
	transform: translateX(50%);
	left: auto;
	right: 0;
	top: 20%;
}
#planes .card picture {
	margin: -2.25rem -2.375rem 2rem;
}
#planes .card picture img {
	border-radius: .625rem;
}
#planes .card h4 {
	margin-bottom: .65rem;
}
#planes .card h5 {
	text-transform: uppercase;
	font-size: 1.25rem;
	letter-spacing: .375em;
	margin: 0 -1rem 1.5rem;
	font-weight: normal;
	color: var(--col-lig);
}
#planes .card p {
	margin: 0 -1rem;
}

#valor-social {
	padding-bottom: 0;
}
#valor-social img {
	display: block;
	height: 15rem;
	margin: 4rem auto -5rem!important;
}
#valor-social p {
	max-width: 30rem;
	margin-left: auto;
	margin-right: auto;
}

#demo,
#demo h2 {
	color: var(--col-dar);
}
#demo .bt {
	background: var(--col-acc);
	color: var(--col-bg);
}

#contacto {
	background-repeat: no-repeat;
	background-image: url(../images/ilustraciones/contacto1.svg), url(../images/ilustraciones/contacto2.svg);
	background-size: contain;
	background-position: 0 0, 100% 100%;
}
#contacto h6 {
	border: none;
	padding: 0;
	margin: 1.5rem 0 .5rem;
}
#contacto input,
#contacto textarea {
	background: var(--col-bg);
}

.footer {
	background: var(--col-pri);
}
.footer .azuite {
	color: var(--col-lig);
}

@media (max-width: 600px) {
	.page {
		padding: 0 2rem;
	}
	.section.featured {
		margin-top: 0;
		padding-top: 0;
		height: auto;
		box-sizing: border-box;
	}
	.section.featured .content {
		border-radius: 4rem 4rem 0 0;
		padding-bottom: 80vw!important;
	}
	.featured .content:before {
		border-radius: 4rem 4rem 0 0;
	}
	.section.featured .content {
		height: auto;
		padding: 2.5rem;
		justify-content: flex-start;
	}
	.featured h1 {
		font-size: 3.125rem;
		margin-right: -1rem;
	}
	.section.featured img {
		height: 100vw;
		width: auto;
		bottom: 0;
		left: 50%;
		transform: translateX(-50%);
		right: auto;
	}
	#plataforma {
		padding-bottom: 90vw;
		margin-bottom: 2rem;
	}
	#plataforma .col .col + .col {
		margin-top: 6rem;
	}
	#plataforma picture {
		left: 2rem;
		top: auto;
		bottom: 0;
		margin: 0;
		height: 100vw;
	}
	#funcionalidades .col:first-child {
		height: 70vw;
	}
	#funcionalidades picture {
	 	transform: none;
	}
	#funcionalidades picture img {
		max-width: 10000%;
		display: none;
	}
	#funcionalidades picture img:nth-child(1),
	#funcionalidades picture img:nth-child(4) {
		display: block;
	}
	#funcionalidades picture img:nth-child(4) {
		width: 20rem;
		right: 1.5rem;
	}
	#funcionalidades:before {
		display: none;
	}
	#funcionalidades:after {
		left: 0;
		top: 0;
		right: 0;
		top: 20vw;
		border-radius: 30rem 30rem 2rem 2rem;
	}
	#funcionalidades {
		padding-top: 0;
	}
	#planes .card > img {
		display: none;
	}
	#planes .col + .col {
		margin-top: 2rem;
	}
	#valor-social img {
		width: 10rem;
		margin-top: 0!important;
	}
	#demo {
		background-color: #000;
		padding-bottom: 80vw;
		background-size: auto 100vw;
		background-position: 90% 100%;
	}
	#demo .col {
		text-align: center;
	}
}