:root{
--cor:#111;
--cor-clara:#f4f6f8;
}

*{
box-sizing:border-box;
}

body{
margin:0;
font-family:'Inter',system-ui,-apple-system,Arial;
background:#f4f6f8;
color:#222;
}

.container{
width:100%;
max-width:680px;
margin:0 auto;
padding:20px;
}

.card{
background:#fff;
border-radius:18px;
padding:22px;
margin-bottom:18px;
box-shadow:0 8px 24px rgba(0,0,0,.08);
}

/* títulos */

h1{
margin:0 0 4px 0;
font-size:26px;
}

h2{
margin-top:0;
}

h3{
margin-top:0;
}

/* endereço */

.endereco{
color:#666;
font-size:14px;
margin-bottom:6px;
}

/* instagram */

.instagram{
display:inline-block;
margin-bottom:12px;
font-size:14px;
text-decoration:none;
color:#E1306C;
font-weight:600;
}

/* serviços */

.item{
border:2px solid #eee;
border-radius:14px;
padding:14px;
margin-bottom:10px;
cursor:pointer;
transition:.2s;
}

.item:hover{
border-color:var(--cor);
transform:scale(1.01);
}

.item.ativo{
border-color:var(--cor);
background:#f0f4ff;
}

/* botão */

.botao{
display:block;
background:var(--cor);
color:#fff;
text-align:center;
padding:16px;
border-radius:14px;
margin-top:18px;
font-weight:600;
font-size:17px;
cursor:pointer;
text-decoration:none;
transition:.2s;
}

.botao:hover{
opacity:.9;
}

/* selects */

select{
width:100%;
padding:12px;
border-radius:10px;
border:2px solid #eee;
font-size:15px;
margin-top:8px;
}

/* voltar */

.voltar{
margin-bottom:12px;
color:var(--cor);
cursor:pointer;
font-weight:600;
}

/* aviso */

.aviso{
text-align:center;
color:#777;
font-size:13px;
margin-top:12px;
}

/* mapa */

.mapa iframe{
width:100%;
height:260px;
border:0;
border-radius:14px;
display:block;
}

/* footer */

.footer{
text-align:center;
color:#888;
font-size:12px;
margin:30px 0;
}

.footer a{
color:#888;
text-decoration:none;
}

/* listas */

ul{
padding-left:20px;
margin-top:10px;
}

li{
margin-bottom:6px;
}

/* logo */

#logo{
text-align:center;
margin-bottom:12px;
}

.logo{
max-width:140px;
max-height:70px;
width:auto;
height:auto;
object-fit:contain;
}

.voltar{
display:none;
}

/* MOBILE SCALE */

@media (max-width:600px){

body{
font-size:20px;
line-height:1.55;
}

/* container ocupa bem a tela */

.container{
max-width:100%;
padding:10px;
}

/* cards */

.card{
padding:22px;
margin-bottom:18px;
border-radius:20px;
}

/* título do salão */

h1{
font-size:28px;
line-height:1.25;
margin-bottom:8px;
}

/* endereço */

.endereco{
font-size:17px;
margin-bottom:12px;
}

/* instagram */

.instagram{
font-size:17px;
}

/* itens de serviço */

.item{
padding:22px;
font-size:21px;
border-radius:20px;
margin-bottom:14px;
}

/* valor do serviço */

.item span{
font-size:17px;
}

/* selects */

select{
padding:20px;
font-size:19px;
border-radius:16px;
margin-top:12px;
}

/* botão principal */

.botao{
padding:22px;
font-size:20px;
border-radius:20px;
margin-top:22px;
}

/* voltar */

.voltar{
font-size:18px;
margin-bottom:16px;
}

/* aviso */

.aviso{
font-size:15px;
}

/* mapa */

.mapa iframe{
height:270px;
border-radius:18px;
}

/* logo */

.logo{
max-width:140px;
max-height:75px;
margin-bottom:12px;
}

}