:root{
--bg:#202124;
--header-h:86px;
--title:#f1f3f4;
--muted:#bdc1c6;
--accent:#c62828;
--accent-strong:#a61e1e;
--surface:#171717;
}

*{margin:0;padding:0;box-sizing:border-box;font-family:"Segoe UI",Tahoma,sans-serif}

body{background:var(--bg);min-height:100vh}

header{
background:#000;
padding:15px 60px;
display:flex;
justify-content:space-between;
align-items:center;
position:fixed;
width:100%;
top:0;
z-index:1000;
gap:18px;
flex-wrap:wrap;
}

.logo img{height:auto;max-height:70px;width:auto;display:block;max-width:200px}

nav ul{display:flex;list-style:none;gap:30px;flex-wrap:wrap;justify-content:flex-end}
nav a{color:#bbb;text-decoration:none;font-weight:700;transition:0.3s}
nav a:hover{color:#fff}

main{padding-top:var(--header-h)}

.cabecalho{
width:min(1200px,92%);
margin:22px auto;
background:#111;
border-radius:14px;
padding:28px;
}

.cabecalho h1{font-size:clamp(1.8rem,3.5vw,2.6rem);color:#fff;margin-bottom:8px}
.cabecalho p{color:#dadada;line-height:1.55;max-width:70ch}

.grid-servicos{
width:min(1200px,92%);
margin:0 auto 30px;
display:grid;
grid-template-columns:repeat(3,1fr);
gap:18px;
}

.card{position:relative;height:380px;overflow:hidden;border-radius:12px}

.card img{
width:100%;
height:100%;
object-fit:cover;
display:block;
transition:transform 0.35s ease;
filter:brightness(62%);
}

.card:hover img{transform:scale(1.04);filter:brightness(45%)}

.card{cursor:pointer;}

.card-text{position:absolute;left:20px;right:20px;bottom:20px;color:#fff;transition:opacity 0.25s;}
.card-text h3{font-size:1.75rem;margin-bottom:6px;font-weight:800;text-shadow:0 2px 8px rgba(0,0,0,0.7)}
.card-text p{font-size:1.05rem;color:#eee;text-shadow:0 1px 4px rgba(0,0,0,0.6)}

.card img{transition:transform 0.35s ease,opacity 0.3s ease;}

/* painel de detalhe */
.card-detalhe{
position:absolute;
inset:0;
background:var(--surface);
color:#f1f3f4;
display:flex;
flex-direction:column;
justify-content:center;
padding:28px;
opacity:0;
pointer-events:none;
transition:opacity 0.3s ease;
border-radius:12px;
}
.card-detalhe h4{
font-size:1.45rem;
font-weight:800;
color:var(--accent);
margin-bottom:14px;
}
.card-detalhe p{
font-size:1rem;
line-height:1.65;
color:var(--muted);
margin-bottom:22px;
}
.card-detalhe a{
display:inline-block;
padding:11px 22px;
background:var(--accent);
color:#fff;
border-radius:8px;
font-weight:800;
text-decoration:none;
font-size:0.97rem;
transition:background 0.2s;
}
.card-detalhe a:hover{background:var(--accent-strong);}

/* estado ativo */
.card.ativo img{opacity:0;transform:scale(1.04);}
.card.ativo .card-text{opacity:0;pointer-events:none;}
.card.ativo .card-detalhe{opacity:1;pointer-events:auto;}

@media (max-width:780px){
.grid-servicos{grid-template-columns:repeat(2,1fr)}
.card{height:300px}
}

@media (max-width:480px){
.grid-servicos{grid-template-columns:1fr}
}

.tag{
display:inline-block;
margin-bottom:10px;
padding:4px 10px;
background:var(--accent);
color:#fff;
font-size:0.75rem;
font-weight:700;
border-radius:999px;
}

.lista-detalhes{
padding:40px 0 32px;
background:#181a1b;
}

.lista-wrap{width:min(1200px,92%);margin:0 auto}

.lista-wrap h2{margin-bottom:26px;text-align:center;font-size:2rem;color:var(--title)}

.itens{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
gap:16px;
}

.servico-item{
background:var(--surface);
padding:24px;
border-radius:10px;
box-shadow:0 10px 24px rgba(0,0,0,0.28);
border-left:4px solid var(--accent);
}

.servico-item h3{margin-bottom:8px;color:var(--title)}
.servico-item p{color:var(--muted);line-height:1.6}

footer{background:#000;color:#aaa;text-align:center;padding:22px}

@media (max-width:900px){
header{padding:12px 20px}
nav ul{gap:15px}
}

@media (max-width:560px){
main{padding-top:96px}
}