/*versión celular*/
/*Landing*/
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@300;400;600;700;800&display=swap');
*{ margin: 0; padding:0; box-sizing: border-box; scroll-behavior: smooth;}

body{ font-family: 'Nunito', sans-serif;
}
.app header{background: #AB00E3;}
.app header nav { padding: 1rem;}
.app header div { padding: 1rem;}
.app header nav a{ color: white; text-decoration: none; padding: 1rem; background-color: #D953CB; 
border-radius: 0.8rem; font-weight: 700; display: inline-flex; 
justify-content: space-between; margin: 0.5rem;}

.app .contenedora a:hover{ background:#ec6ad9;}
.app section{ height: 120vh; padding-top: 2rem ;}
.app .bienvenidos{ background-image: url("../img/color_landing_01.png"); background-size:200vh;}
.app .calendario{ background-image: linear-gradient(to top, #f6f3ff 0%, #cd9cf2 100%);}
.app .puntaje{ background-image: linear-gradient(to top, #f6f3ff 0%, #cd9cf2 100%);}
.app .instrucciones{ background:#AB00E3;}

.app .bienvenidos{ text-align: center;}
.app .bienvenidos .mockup1 { width: 90%;}
.app .bienvenidos .descar{ width:50% ;}
.app .bienvenidos h2{ color: white; font-weight: 800; font-size: 2.6rem;}
.app .bienvenidos p{ color: white;}
.app .bienvenidos .ahora{ font-weight: 800; font-size: 1.1rem;}

.app .calendario h2{ color:#AB00E3;}
.app .articulo-calendario { background-color:#DC5AC8; margin: 2rem; padding: 1.8rem; border-radius: 1.5rem;}
.app .articulo-calendario p{ color: white;}
.app .calendariotexto { font-weight: 700; font-size: 1.6rem;}
.app .calendario {text-align:center; height: 260vh;}
.app .calendario .mockup2{ width: 60%;}

.app .articulo-tickets {margin: 2rem; padding: 1rem;}
.app .articulo-tickets p{ color: rgba(88, 25, 120, 1);}
.app .ticketexto { color:rgba(88, 25, 120, 1); font-weight: 800; font-size: 1.4rem;} 
.app .calendario .mockup3{ width: 60%;}

.app .instrucciones{text-align:center; height: 110vh;}
.app .instrucciones h2{ color: white; font-weight: 700;}
.app .instrucciones p{ color: white; font-weight: 400;}
.app .instrucciones img{ width: 6rem;}

.app .puntaje {text-align:center; height: 250vh;}
.app .articulo-mapa{background-color:#DC5AC8; margin: 2rem; padding: 1.3rem; border-radius: 1.5rem;}
.app .articulo-mapa h2{ color: white; font-size: 1.6rem;}
.app .articulo-mapa p{ color: white;}
.app .puntaje .mockup4{ width: 60%;}
.app .puntaje .mockup5 { width: 65%;}
.app .articulo-califica {margin: 2rem; padding: 1rem;}
.app .articulo-califica h2 {color: rgba(88, 25, 120, 1); font-weight: 800;}
.app .articulo-califica p{ color:rgba(88, 25, 120, 1);}


footer {background-color:#AB00E3; padding: 3rem;}
footer h5{ color: white;text-align: start;}
.logos { padding: 0.5rem;}




/*versión escritorio*/
@media (min-width: 576px){

.app .bienvenidos{ background-image: url("../img/color_landing_01.png"); background-size: cover;
display: flex; justify-content: center; height: 100vh;} 
.app header nav{ display: flex; justify-content:flex-end;}
.app header div { padding: 1rem;}
.app header nav a { padding: 1rem; margin: 1rem; font-weight: 700;}
.app .articulo-bienvenida p{ text-align: left;}
.app .articulo-bienvenida h2{ position: relative; right: 3.5rem; font-size: 3.5rem;}
.app .articulo-bienvenida p{ position: relative; right: -5rem; font-size: 1.3rem; }
.app .articulo-bienvenida .descar {position: relative; left: -6rem; }


.app .calendario h2{ text-align:left; padding-left: 3rem; position: relative; top: 1rem ; font-size: 1.9rem;}
.app .calendario .mockup2{ width: 33%; position: relative; left: 20rem; top:-15rem;}
.app .articulo-calendario { text-align: left; margin: 1rem; 
border-radius: 1.5rem; margin-right: 54rem; position: relative; left: 2rem; top: 14rem; font-size: 1.2rem;}
.app .calendario .mockup3 { width: 38%; position: relative; right: 22rem; top: -30rem;}

.app .articulo-tickets { text-align:left; padding-left:  45rem; position: relative; top: 3rem; font-size: 1.2rem;}
.app .articulo-tickets .ticketexto { font-weight: 800; font-size: 1.6rem;}
.app .articulo-tickets p { text-align: left;}

.app .instrucciones{ height: 30vh; display: flex; justify-content: space-between; padding: 2rem;}
.app .instrucciones img{ width: 9%; height: 8rem; position: relative; top: 0.1rem}
.app .instrucciones p{ position:relative ; top: 2.8rem; }

.app .articulo-mapa { text-align: left; margin: 1rem; border-radius: 1.5rem; margin-right: 56rem; position: relative; 
left: 2rem; top: 13rem; font-size: 1.2rem}
.app .puntaje .mockup4 {width: 32%; position: relative; left: 20rem; top: -16rem;}
.app .articulo-califica { text-align: left; padding-left: 45rem; position: relative; bottom: -2rem; font-size: 1.2rem;}
.app .puntaje .mockup5 { width: 38%; position: relative; right: 22rem; top: -28rem;}

footer{ background-color: #AB00E3; padding: 6rem; text-align:start;
}
.logos{ display: flex; justify-content: space-around; padding: 4rem;}











}