*{
margin:0;
padding:0;
box-sizing:border-box;
}

body{
background:#f5f5f5;
font-family:Arial,sans-serif;
padding:20px;
color:#222;
}

.container{
max-width:700px;
margin:auto;
}

h1{
font-size:10px;
font-weight:700;
margin:0 0 10px 0;
padding:0;
line-height:1;
color:#111;
text-transform:uppercase;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}

.lista{
background:#fff;
border-radius:20px;
overflow:hidden;
border:1px solid #ececec;
}

.encabezado{
display:flex;
justify-content:space-between;
padding:18px;
background:#f8f3ea;
font-size:14px;
font-weight:bold;
color:#c77b30;
}

.item{
display:flex;
justify-content:space-between;
align-items:center;
padding:20px 18px;
border-top:1px solid #f0f0f0;
text-decoration:none;
color:#222;
background:#fff;
}

.item:hover{
background:#fafafa;
}

.nombre{
font-size:20px;
line-height:1.4;
width:80%;
word-break:break-word;
color:#222;
font-weight:500;
}

.badge{
background:#fff4e8;
padding:10px 14px;
border-radius:20px;
font-size:14px;
font-weight:bold;
color:#d97706;
white-space:nowrap;
}

@media(max-width:600px){

body{
padding:15px;
}

h1{
font-size:42px;
}

.nombre{
font-size:17px;
}

.badge{
font-size:13px;
padding:8px 12px;
}

}