/* ---------------------------------------- */
/* ----- >>> Layout: Mobile --------------- */
/* ---------------------------------------- */

@media (max-width: 640px) and (min-width: 0) {

	html {
		height: 100%;
		scroll-behavior: smooth;
		font-size: 2.44vw;
		overflow-y: scroll;
		cursor: default;

	}

	.setWrapper {
		width: calc(100% - 4.8rem);
		margin: 4.8rem auto;
	}

	/* ---------------------------------------- */
	/* ----- >>> Styles ----------------------- */
	/* ---------------------------------------- */

	h1		{ font-size: 3.6rem; margin-bottom: 3.2rem; letter-spacing: -0.000rem; }
	h2		{ font-size: 4.8rem; margin-bottom: 3.2rem; letter-spacing: -0.000rem; }
	h4		{ font-size: 1.8rem; margin-bottom: 1.6rem; letter-spacing: +0.500rem; }
	h5		{ font-size: 2.1rem; margin-bottom: 1.6rem; letter-spacing: +0.000rem; }
	h6		{ font-size: 1.8rem; margin-bottom: 1.6rem; letter-spacing: +0.000rem; }
	p, dd 	{ font-size: 1.6rem; margin-bottom: 3.2rem; letter-spacing: +0.000rem; }
	small 	{ font-size: 1.1rem; margin-bottom: 2.4rem; letter-spacing: +0.025rem; }

	p.isAlt {
		font-size: 1.8rem;
	}


	/* ---------------------------------------- */
	/* ----- >>> Navegation ------------------- */
	/* ---------------------------------------- */

	header .setWrapper {
		width: calc(100% - 4.8rem);
		margin: 1.6rem auto;
	}

	header .setWrapper nav {
		width: 100%;
		height: 100vh;
		background: #FFF;
		position: fixed;
		display: none;
		z-index: 100;
		left: 0;
		top: 0;
	}

	header .setWrapper nav > ul {
		height: 100vh;
		justify-content: center;
		flex-direction: column;
		font-size: 1.8rem;
		gap: 0.8rem;
	}

	header .setWrapper nav > ul > li:last-child {
		margin-top: 6.4rem;
	}

	footer .setWrapper small:not(:last-child) {
		text-align: justify;
	}

	/* ---------------------------------------- */
	/* ----- >>> Section: Landing ------------- */
	/* ---------------------------------------- */

	.isLanding > div > div {
		left: 2.4rem;
	}

	.isLanding > div > div > h1 {
		font-size: 4.0rem;
	}

	.isLanding > div > div > ul {
		margin-bottom: 1.6rem;
	}

	.isLanding > div > div > ul > li > i.isTAB {
		width: 9.60rem;
		height: 4.6rem;
	}

	.isLanding > div > div > ul > li > i.isS00 {
		width:  4.8rem;
		height: 4.8rem;
	}

	/* ---------------------------------------- */
	/* ----- >>> Section: Productos ----------- */
	/* ---------------------------------------- */

	.setSwiper .isButton.isFix {
		transform: unset;
		left: 4.8rem;
		top: 70%;
	}

	.setSwiper .isProducts {
		width: calc(100% - 6.4rem);
		flex-direction: column;
		transform: unset;
		left: 7.2rem;
		top: 23rem;
		gap: 0;
	}

	.setSwiper .isProducts > li {
		position: relative;
	}

	.setSwiper .isProducts > li:nth-child(1) { margin-bottom: 19.0rem; }
	.setSwiper .isProducts > li:nth-child(2) { margin-bottom: 19.0rem; }

	.setSwiper .isProducts > li {
		justify-content: flex-start;
		align-items: flex-start;
		width: 100%;
	}

	.setSwiper .isProducts > li > *:not(.isButton, .isModal){
		display: none;
	}

	.setSwiper .isProducts > li > .isButton {
		font-size: 1.2rem;
	}

	/* ---------------------------------------- */

	.isProduct > div .isTAB {
		left: 1.6rem;
	}

	.isProduct > div .isTXT h2 {
		font-size: 2.8rem;
	}

	.isProduct > div .isTXT > ul {
		padding-left: 1.6rem;
		font-size: 2.0rem;
	}

	.isProduct > div > .isATR {
		margin: 4.8rem 2.4rem;
		gap: 3.2rem 12.8rem;
	}

	.isProduct > div > .isATR > li > i {
		width:  8.0em;
		height: 8.0rem;
	}

	.isProduct > div > .isATR > li small {
		font-size: 1.1rem;
	}

	/* ---------------------------------------- */
	/* ----- >>> Section: Cuidado ------------- */
	/* ---------------------------------------- */

	.setCare {
		margin-top: 12.8rem;
		flex-direction: column;
	}

	.setCare > div:nth-child(1),
	.setCare > div:nth-child(2) { 
		width: 100%;
	}

	.setCare > div > ul {
		margin-top: 0.0rem;
		font-size: 2.1rem;
	}


	/* ---------------------------------------- */
	/* ----- >>> General ---------------------- */
	/* ---------------------------------------- */

	.isMBL { display: inline-block; }
	.isDSK { display: none; }

	/* ---------------------------------------- */

	.isFull { width: calc(100% - 00.0rem); margin: 0.0rem auto; }

	/* ---------------------------------------- */

	.setColumns {
		flex-direction: column;
		display: flex;
	}

	.setColumns > * {
		width: 100%;
	}

	.setColumns > div > .isTXT {
		margin: 9.6rem 2.4rem;
	}

	/* ---------------------------------------- */

	.setPrev,
	.setNext {
		width:  3.2rem;
		height: 3.2rem;
	}

	.setPrev { left:  0.8rem; }
	.setNext { right: 0.8rem; }

	/* ---------------------------------------- */
	/* ----- >>> Media Form ------------------- */
	/* ---------------------------------------- */

	.isButton {
		padding: 1.2rem 2.4rem;
		font-size: 1.2rem;
	}

	.isModal {
		position: absolute;
		text-align: center;
		font-size: 1.2rem;
		bottom: -2.6rem;
		left: 0.6rem;
	}

	/* ---------------------------------------- */
	/* ----- >>> Icon Sets -------------------- */
	/* ---------------------------------------- */

	.isBND {
		width: 12.0rem;
		height: 5.4rem;
	}

	.isTAB {
		width: 10.0rem;
		height: 5.0rem;
	}

	.is48H {
		width: 8.00rem;
		height: 4.0rem;
		right: 2.4rem;
		top: 0.8rem;
	}

	/* ---------------------------------------- */
	/* ----- >>> Menu  ------------------------ */
	/* ---------------------------------------- */

	.setMenu {
		display: block;
	}


}