body{

font-family:Arial;
background:#f4f6f8;
margin:0;

}

.catalogo{

max-width:900px;
margin:auto;
margin-top:40px;
background:white;
padding:40px;
border-radius:12px;
box-shadow:0 10px 35px rgba(0,0,0,0.08);

}

.login{

max-width:320px;
margin:auto;
margin-top:120px;
background:white;
padding:30px;
border-radius:10px;
box-shadow:0 10px 35px rgba(0,0,0,0.1);

}

input,textarea{

width:100%;
padding:12px;
margin-top:10px;
border-radius:6px;
border:1px solid #ddd;
box-sizing:border-box;

}

button{

padding:12px 20px;
border:none;
background:#EC4899;
color:white;
border-radius:6px;
margin-top:10px;
cursor:pointer;

}

.item{

display:flex;
justify-content:space-between;
align-items:center;
padding:12px 5px;
border-bottom:1px solid #eee;

}

.item strong{

font-weight:600;

}

.senha-box{

display:flex;
align-items:center;

}

.senha-box span{

margin-left:-35px;
cursor:pointer;

}

.esgotado{

color:white;
background:#EC4899;
padding:3px 8px;
border-radius:5px;
font-size:12px;
margin-right:8px;

}

/* ===== MODAL ===== */

.modal{

display:none;

position:fixed;
top:0;
left:0;

width:100%;
height:100%;

background:rgba(0,0,0,0.6);

z-index:99999;

}

.modal.ativo{

display:block;

}

.modal-content{

position:fixed;

top:50%;
left:50%;

transform:translate(-50%,-50%);

background:white;

width:90%;
max-width:600px;

padding:30px;

border-radius:12px;

box-shadow:0 20px 60px rgba(0,0,0,0.4);

max-height:80vh;
overflow-y:auto;

}

.close{

position:absolute;
top:10px;
right:15px;

font-size:24px;
cursor:pointer;
font-weight:bold;

}

#texto{

line-height:1.6;
font-size:15px;

}

@media(max-width:600px){

.catalogo{

padding:25px;

}

.modal-content{

width:92%;
padding:25px;

}

}