:root {
	/* Tipografias */
	--font-1: 'Archivo', sans-serif;
	--font-2: 'Sora', sans-serif;

	/* Font size */
	--body-size: 18px;
	--h1-size: 2.4rem;
	--h2-size: 1.8rem;
	--h3-size: 1.6rem;
	--h4-size: 1.4rem;
	--h5-size: 1.1rem;
	--h6-size: 1rem;

	 /* Colores */
	--color-black: #000000;
	--color-white: #ffffff;
	--color-purple-500: #595CFF;
	--color-purple-100: #EBECFF;
	--color-purple: var(--color-purple-500);
	--color-yellow: #E5F163;
	--color-gray-900: #3D3D3D;
}

/* Fonts styles */

html, body {color: var(--color-gray-900); font-size: var(--body-size); font-family: var(--font-1); line-height: 1.35; }
h1, h2, h3, h4, h5, h6, p {margin: 0;}
h1, .h1 {font-size: var(--h1-size);font-family: var(--font-2);font-weight: bold;line-height: 1.1;}
h2, .h2 {font-size: var(--h2-size); font-family: var(--font-2);font-weight: bold;line-height: 1.2;}
h3, .h3 {font-size: var(--h3-size); font-family: var(--font-2);font-weight: bold;line-height: 1.2;}
h4, .h4 {font-size: var(--h4-size); font-family: var(--font-2);font-weight: bold;line-height: 1.2;}
h5, .h5 {font-size: var(--h5-size); font-family: var(--font-2);font-weight: bold;line-height: 1.2;}
h6, .h6 {font-size: var(--h6-size); font-family: var(--font-2);font-weight: bold;line-height: 1.2; }
p {font-size: var(--body-size);line-height: 1.4;}
@media screen and (max-width:768px) {
	:root { 
	--body-size: 15px;
	--h1-size: 1.8rem;
	--h2-size: 1.6rem;
	--h3-size: 1.4rem;
	--h4-size: 1.4rem;
	--h5-size: 1.2rem;
	--h6-size: 1rem; 
	}
}
/* Others */
space { width: 100%; height: .5rem; display: block; }
space[h="2"] { height: 1rem; }
space[h="3"] { height: 1.5rem; }
space[h="4"] { height: 2rem; }
input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, input:-webkit-autofill:active { -webkit-box-shadow: 0 0 0 30px white inset !important; }
figure { margin: 0; }
.ov-hidden { overflow: hidden; }
.radius { border-radius: 50% !important; }
.radius-1 { border-radius: 1rem; }
.radius-2 { border-radius: 2rem; }
.tt-up { text-transform: uppercase; }
.ls-1 { letter-spacing: .1em; }
.ls-2 { letter-spacing: .2em; }
.lh-1 { line-height: 1; }
hr { background-color: var(--color-gray-1); opacity: 1; }
::placeholder { opacity: 0.75; font-weight: normal; }
::-webkit-scrollbar { display: none; }
.empty { display: none; }
.link { text-decoration: underline; color: inherit; }
.link:hover { cursor: pointer; text-decoration: underline; }
ul, li { margin: 0; padding: 0; list-style: none }
.bold { font-weight: bold; }
.circle { border-radius: 50% }
.ff-1 { font-family: var(--font-1); }
.ff-2 { font-family: var(--font-2); }
.disabled { pointer-events: none; }
.disabled:hover { cursor: not-allowed; }
*:focus { outline: none; }
.fz-1 { font-size: 1.1rem; }
.fz-2 { font-size: 1.1rem; }
.fz-3 { font-size: 1.25rem; }
.fz-4 { font-size: 1.4rem; }
.fz-5 { font-size: 1..75rem; }

/* Botones */
.btn {font-weight: bold;text-decoration: none;border-radius: .5rem;line-height: 1;font-size: 1rem;padding: .8rem 1rem;display: inline-flex;align-items: center;justify-content: center;transition: .1s ease all;user-select: none;-webkit-user-select: none;position: relative;text-align: center;overflow: hidden;font-family: var(--font-2);gap: .5rem;transition: .3s ease all;}
.btn:not(.link):hover { cursor: pointer; box-shadow: 0 0 0 .5rem rgba(234, 255, 1, 0.4);}
.btn.link {padding: 0;border-radius: unset;text-decoration: underline;}
.btn.link:hover {cursor: pointer;}
.btn .icon {height: 1.25rem;}
/* Colors */
.c-white { color: var(--color-white) !important; }
.c-black { color: var(--color-black) !important; }
.c-yellow {color: var(--color-yellow) !important; }
.c-purple {color: var(--color-purple) !important; }
.bg-white { background-color: var(--color-white) !important; }
.bg-black { background-color: var(--color-black) !important; }
.bg-yellow { background-color: var(--color-yellow) !important; }

/* Filters */
.f-white { filter: invert(1); }

/* Icons */
.icon { aspect-ratio: 1/1; background-size: 100% 100%; height: 1rem; display: inline-block; background-position: 0% 0%; }
.icon-logo {background-image: url(../img/logo.svg);aspect-ratio: 7/2;background-size: cover;background-position: left center;}
.icon-mail { background-image: url(../img/icon_mail.svg); }
.icon-next { background-image: url(../img/icon_next.svg); }

/* Sections */
section { padding-top: 6rem; padding-bottom: 6rem; }

/* Header */
.sect-1 {padding: 0;margin: 0;color: var(--color-white);position: relative;background-color: var(--color-purple);overflow: hidden;}
.sect-1 .bg {position: absolute;left: calc(50% - 2rem);height: 100%;width: calc(50% + 2rem);top: -2rem;object-fit: contain;object-position: left center;}
.sect-1 .container-1 {padding-top: 3rem;padding-bottom: 3rem;}
.sect-1 .container-1 ul {display: flex;flex-direction: initial;align-items: center;justify-content: space-between;}
.sect-1 .container-1 ul li {}
.sect-1 .container-1 ul li.li-1 .icon {height: 2.5rem;}
.sect-1 .container-1 ul li.li-2 {}

/**/
.sect-1 .container-2 {padding-bottom: 6rem;padding-top: 0;}
.sect-1 .container-2 ul {align-items: center;justify-content: center;gap: 4rem;display: grid;grid-template-columns: repeat(2, 1fr);}
.sect-1 .container-2 ul li {width: 100%;}
.sect-1 .container-2 ul li.li-1 {}
.sect-1 .container-2 ul li.li-2 {}
.sect-1 .container-2 ul li.li-2 img {width: 100%;border-radius: 1rem;transform: rotate(8deg);aspect-ratio: 4 / 3;object-fit: cover;}
/**/
.sect-2 {}
.sect-2 .h2 {color: var(--color-purple)}
.sect-2 img {width: 100%;height: 100%;object-fit: contain;top: 0;left: 0;}
.sect-2 ul  {display: grid;grid-template-columns: repeat(3, 1fr);grid-auto-rows: 1fr;gap: 2rem;align-items: center;}
.sect-2 ul li  {display: flex;flex-direction: column;gap: 2rem;}
.sect-2 ul li .bx  {position: relative;}
.sect-2 ul li .bx img  {position: absolute}
.sect-2 ul li.li-2 {height: 100%;}
.sect-2 ul li.li-2 .bx {background-color: var(--color-purple-100);height: 100%;border-radius: 1rem;}
.sect-2 ul li.li-3 {}
.sect-2 ul li.li-3 .bx {aspect-ratio: 3/2;border-radius: 1rem;}
.sect-2 ul li.li-3 .bx.bx-1 {background-color: var(--color-yellow);}
.sect-2 ul li.li-3 .bx.bx-2 {background-color: var(--color-purple);}
/**/
.sect-3 {background-color: var(--color-purple-100);}
.sect-3 h2 {color: var(--color-black)}
.sect-3 .container {}
.sect-3 ul  {display: flex;gap: 2rem;align-items: end;}
.sect-3 ul li {padding: 1.5rem;background-color: var(--color-white);border-radius: 1rem;display: flex;flex-direction: column;justify-content: space-between;gap: 1rem;}
.sect-3 ul li .bx {position: relative;display: flex;flex-direction: column;gap: 1rem;}
.sect-3 ul li.li-1 {}
.sect-3 ul li.li-1 h3 {color: var(--color-black)}
.sect-3 ul li.li-2 {background-color: var(--color-yellow);color: var(--color-black);gap: 5rem;}
.sect-3 ul li.li-3 {background-color: var(--color-purple-500);color: var(--color-white);gap: 3rem;}
.sect-3 ul li img {width: 5rem;transform: rotate(-10deg);}
/**/
.sect-4 {background-color: var(--color-yellow-400);padding-bottom: 4rem;}
.sect-4 .bg {position: absolute;height: 100%;width: calc(50% + 2rem);right: 50%;}
.sect-4 .h2 {color: var(--color-yellow);}
.sect-4 ul {background-color: var(--color-purple);color:var(--color-white);display: grid;grid-template-columns: repeat(2, 1fr);align-items: center;padding: 2rem 2rem;border-radius: 1rem;gap: 4rem;position: relative;}
.sect-4 ul li {width: 100%;padding: 1rem;}
.sect-4 ul li h2 {color: var(--color-yellow)}
.sect-4 ul li .btn {padding-right: 4rem;}
.sect-4 ul li .btn .icon-container {position: absolute;background-color: var(--color-yellow);height: 100%;width: 3rem;display: flex;flex-direction: column;align-items: center;justify-content: center;right: 0;}
.sect-4 ul li.li-1 {}
.sect-4 ul li.li-1 img {width: 100%;border-radius: 1rem;transform: rotate(-8deg);aspect-ratio: 4/3;object-fit: cover;}
.sect-4 ul li.li-2 {}

/**/

footer {color: var(--color-gray-900);padding-top: 2rem;padding-bottom: 2rem;text-align: center;}

/* Not small screens */
@media screen and (min-width:768px) {
	.only-mobile { display: none !important; }
}

/* Small screens */
@media screen and (max-width:768px) {
	.only-desktop { display: none !important; }
	.container {padding-left: 2rem; padding-right: 2rem}
	html, body {text-align: center;}
	.sect-1 .bg { display: none; }
	.sect-1 .container-1 { padding-top: 2rem; padding-bottom: 1rem; }
	.sect-1 .container-1 ul li.li-1 .icon { height: 2.25rem; }
	.sect-1 .container-2 ul li.li-2 { padding: 3rem; background-image: url(../img/s1_bg.svg); background-size: contain; background-repeat: no-repeat; background-position: center; aspect-ratio: 4/3; display: flex; align-items: center; justify-content: center; }
	.sect-1 .container-2 ul { display: flex; flex-direction: column-reverse; gap: 1rem; }
	.sect-1 .container-2 ul li.li-2 img {aspect-ratio: 1/1;}
	.sect-2 ul { display: flex; flex-direction: column; justify-content: center; align-items: stretch; }
	.sect-2 ul li.li-1 { order: 2; }
	.sect-2 ul li.li-2 { height: auto; order: 1; }
	.sect-2 ul li.li-2 .bx { background-color: unset; height: auto; width: 100%; aspect-ratio: 3 / 2; }
	.sect-2 ul li.li-3 { flex-direction: row; order: 3; }
	.sect-2 ul li.li-3 .bx { aspect-ratio: 3/4; width: 100%; }
	.sect-2 ul li.li-3 .bx img { transform: scale(.8); }
	.sect-3 ul { flex-direction: column; }
	.sect-3 ul li {align-items: center;}
	.sect-3 ul li.li-2 { gap: 1rem; }
	.sect-3 ul li.li-3 { gap: 1rem; }
	.sect-4 .bg { display: none; }
	.sect-4 ul { display: flex; flex-direction: column; gap: 0; }
	.sect-4 ul li.li-2 { padding: 0; }
	.sect-4 ul li.li-1 { padding: 2rem; background-image: url(../img/s4_bg.svg); background-size: contain; background-repeat: no-repeat; background-position: center; aspect-ratio: 4/3; display: flex; align-items: center; justify-content: center; }
	.sect-4 ul li.li-1 img {aspect-ratio: 1/1;}
	.sect-4 ul li .btn { width: 100%; }
}

/**/ 

/* XS screens */
@media screen and (max-width:400px) { }

/* Large screens */
@media screen and (min-width:1200px) { }

/* XLarge screens */
@media screen and (min-width:1400px) { }