/* reset */
html{margin-top: 0 !important; background-color: #EBECE7}
body{margin: 0; overflow: hidden;}
*{box-sizing: border-box;margin: 0;}
p,h1,h2{margin: 0;}

*{
  font-family: "DM Sans", sans-serif;
  font-style: normal;
}

.indent{text-indent: 1.76rem}

/* index XS */
.main-index{height:100vh;display:flex; justify-content:space-between; flex-direction:column; width:100vw; padding-top: 1rem; padding-bottom:6rem}

.logo-descript{display:flex; width:100%; justify-content:center}
.logo-XS{display:block; transform: scale(.8)}
.logo-XL{display:none}

.links {display:flex ; width:100vw; justify-content:space-between; padding:1rem; flex-direction: column; gap: .25rem; text-align: center}
.links a{color:#e84301; font-weight: 400; text-wrap: pretty; font-size: .88rem; line-height: 150%; text-decoration:none; transition: all .3s ease-in-out}
.links a:hover{color:#323232}

/* page XS */
body {
    display: flex;
    flex-direction: column;
    justify-content: center; 
    align-items: center;
    height: 100vh;
    margin: 0;
}

.main-page{padding: 1rem ; width: 366px;display:flex; flex-direction: column ;margin: auto}

.fila-logo{display: flex; position:fixed; gap: .5rem; width: calc(100% - 2rem); align-items: center;  z-index: 999; left: 1rem; top: 1rem}

.logo{font-size: .88rem; font-weight: 600; text-transform:uppercase; color: #e84301}
span{border: solid 1px #e84301; flex: 1; height: .5px}

.fila{width:100%; display:flex; justify-content:space-between; align-items:start;}

.mayus{text-transform:uppercase}
.border{border-top: solid 1.5px #e84301;}	

.pl{padding-left: .24rem}
.mt-4{margin-top: 2.4rem}
.mt-3{margin-top: 1.28rem}
.mt-2{margin-top: .8rem}
.mt-1{margin-top: .2rem}

.d-flex{display:flex}

.kcal:after{content:' kcal'}
.kj:after{content:' kj /'}
.g:after{content:' g'}

.naranja{color: #e84301;}
	
h1{font-size: calc(.88rem * 4); font-weight: 600; margin-top: -12px}
h2, p {color: #0D0D0D; font-size: .88rem; line-height: 150%}
p{font-weight: 400; text-wrap: pretty}
h2{font-weight: 600; font-size: .88rem; margin-bottom:.25rem}

.reciclaje, .iconos{display:flex; width:100%; justify-content:center; gap: .44rem}
.iconos img, .reciclaje img{height:64px; width: auto}

@media (min-height: 800px) {
	.mt-4{margin-top: 6rem}
	.mt-3{margin-top: 3rem}
	.mt-2{margin-top: 2rem}
	.mt-1{margin-top: .5rem}
}

@media (min-width: 800px) {
	/* index XS */
	.main-index{padding-top: 0; padding-bottom:0}
		
	.logo-XS{display:none}
	.logo-XL{display:block}
	
	.links {flex-direction: row; gap: auto;}
}