body{
font-family: Arial, sans-serif;
margin:0;
background:#f6a400;
text-align:center;
}

/* HEADER */

.header{
background:#ff7a00;
padding:40px 20px;
color:white;
}

/* LOGO */

.logo{
width:100%;
max-width:520px;
border-radius:14px;
margin-bottom:20px;
}

/* CONTENEDOR LINKS */

.links{
width:92%;
max-width:520px;
margin:30px auto;
}

/* BOTONES */

.link{
display:flex;
align-items:center;
justify-content:flex-start;
background:#f3f3f3;
padding:20px;
margin:14px 0;
border-radius:20px;
text-decoration:none;
color:#333;
font-size:20px;
transition:all 0.2s ease;
width:100%;
box-sizing:border-box;

/* estilo app */
box-shadow:0 6px 14px rgba(0,0,0,0.15);
}

/* HOVER DESKTOP */

.link:hover{
background:#ffffff;
transform:scale(1.03);
box-shadow:0 8px 18px rgba(0,0,0,0.18);
}

/* CLICK EFECTO APP */

.link:active{
transform:scale(0.97);
box-shadow:0 3px 8px rgba(0,0,0,0.2);
}

/* ICONO */

.icon{
width:55px;
height:55px;
margin-right:18px;
border-radius:10px;
}

/* MOBILE */

@media (max-width:600px){

body{
padding:10px;
}

/* logo */

.logo{
max-width:100%;
}

/* contenedor */

.links{
width:95%;
margin:25px auto;
}

/* botones */

.link{
font-size:24px;
padding:24px;
border-radius:22px;
}

/* icono */

.icon{
width:60px;
height:60px;
margin-right:16px;
}

/* textos */

h1{
font-size:28px;
}

p{
font-size:18px;
}

}