:root{
    --cor-primaria:#4fb0d8;
    --cor-secundaria:#f39c12;
}

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

html, body{
    overflow-x:hidden;
    min-height:100dvh;
}

body{ 
    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; 
    background-color:#f9f7f5; 
    color:#333; 
    line-height:1.6;
    min-width:320px;
}

a{ 
    text-decoration:none;
    color:inherit; 
}

/* CABEÇALHO */

.topo-site{ 
    background:#fff; 
    padding:0px 5%; 
    display:flex; 
    justify-content:space-between; 
    align-items:center; 
    box-shadow:0 2px 10px rgba(0,0,0,0.1); 
    position:fixed; 
    width:100%; 
    top:0; 
    z-index:1000; 
}

.logo{ 
    font-size:24px; 
    font-weight:bold; 
    color:#1a1a1a; 
    display:flex;
    align-items:center;
    gap:10px;
    white-space:nowrap;
}

.logo img{ 
    height:50px;
    width:auto;
}

.logo span{ 
    color:#000; 
}

.menu{ 
    padding-left:20px;
}

.menu a{
    font-size:14px; 
    font-weight:600; 
    text-transform:uppercase; 
    color:#666; 
    transition:0.3s; 
    padding:10px;
}

.menu a:hover{ 
    color:var(--cor-primaria); 
}

.botao-login-admin{ 
    border:2px solid #333; 
    padding:8px 18px; 
    border-radius:5px; 
    font-weight:bold; 
    cursor:pointer; 
    background:none; 
    margin-left:20px; 
    transition:0.3s; 
}

.botao-login-admin:hover{ 
    background:#333; 
    color:#fff; 
}

/* LOGIN */

.titulo-login{
    text-align:center;
    margin-bottom:25px;
}

.campo-entrada{
    width:100%;
    padding:12px;
    margin-bottom:15px;
    border:1px solid #ccc;
    border-radius:6px;
    font-size:14px;
}

.botao-entrar{
    width:100%;
    padding:12px;
    background:var(--cor-secundaria);
    color:white;
    border:none;
    border-radius:6px;
    font-weight:bold;
    cursor:pointer;
    transition:0.3s;
}

.botao-entrar:hover{
    background:#f5a623;
}

.erro-msg{
    display:none;
    color:red;
    text-align:center;
    margin-top:10px;
    font-size:14px;
}

.botao-fechar{ 
    position:absolute; 
    top:10px; 
    right:10px; 
    padding:10px; 
    color:red; 
    border:1px solid red; 
    background:none; 
    cursor:pointer; 
}

/* HERO */

.secao-destaque{ 
    min-height:100dvh;
    background:linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)),url("img/fundo1.jpg");
    background-size:cover;
    background-position:center; 
    display:flex; 
    align-items:center; 
    justify-content:center; 
    text-align:center; 
    color:#fff; 
    padding:0 20px; 
}

.conteudo-destaque h1{ 
    font-size:50px; 
    margin-bottom:15px; 
}

.conteudo-destaque p{ 
    font-size:20px; 
    margin-bottom:30px; 
    opacity:0.9; 
}

.botao-orcamento{ 
    background:var(--cor-secundaria); 
    color:#fff; 
    padding:15px 40px; 
    font-size:18px; 
    font-weight:bold; 
    border-radius:4px; 
    transition:all 0.3s ease; 
    display:inline-block; 
}

.botao-orcamento:hover{ 
    background:#f5a623; 
    transform:translateY(-3px); 
}

/* SOBRE */

.secao-sobre{ 
    padding:60px 10%; 
    display:flex; 
    gap:50px; 
    align-items:center; 
    background:#fff; 
    flex-wrap:wrap;
    min-height:100dvh;
}

.texto-sobre{ 
    flex:1; 
}

.texto-sobre h2{ 
    font-size:35px; 
    margin-bottom:20px; 
}

.imag-marcenaria{
    flex:1;
    height:300px;
    border-radius:8px;
    overflow:hidden;
}

.imag-marcenaria img{
    width:100%;
    height:100%;
    object-fit:cover;
}

/* SERVIÇOS */

.secao-servicos{
    display:flex;
    flex-direction:column;
    justify-content:center;
    text-align:center; 
    padding:60px 10%;
    min-height:100dvh;
    max-width:1400px;
    margin:auto;
}

.secao-servicos h2{
    padding:40px 10px;
}

.grid-servicos{ 
    display:flex;
    margin-top:30px;
    overflow:hidden;
    scroll-behavior:smooth;
}

/* scrollbar */

.grid-servicos::-webkit-scrollbar{
    height:6px;
}

.grid-servicos::-webkit-scrollbar-thumb{
    background:#ccc;
    border-radius:10px;
}

/* cards */

.caixa-servico{
    flex:0 0 100%;
    max-width:100%;
    margin:auto;
    background:#fff;
    padding:20px;
    border-radius:8px;
    box-shadow:0 4px 15px rgba(0,0,0,0.05);
}

.caixa-img{
    width:100%;
    aspect-ratio:16/9;
    border-radius:10px;
    overflow:hidden;
    display:flex;
    align-items:center;
    justify-content:center;
}

.foto-carrossel{
    width:100%;
    height:100%;
    object-fit:contain;
    transition:0.3s;
}

.caixa-servico:hover .foto-carrossel{
    transform:scale(1.05);
}

.caixa-servico h3{ 
    color:var(--cor-secundaria); 
    margin:15px 0; 
}

/* CONTATO */

.secao-contato{
    min-height:100dvh;
    padding:80px 10%;
    text-align:center;
    background:#000;
    color:#fff;
}

.secao-contato h2{
    font-size:32px;
    margin-bottom:10px;
}

.subtitulo{
    opacity:0.8;
    margin-bottom:50px;
}

.container-contato{
    display:flex;
    justify-content:center;
    gap:40px;
    flex-wrap:wrap;
}

.card-contato{
    background:#111;
    padding:30px;
    border-radius:12px;
    width:260px;
    box-shadow:0 0 15px rgba(0,0,0,0.5);
    transition:0.3s;
}

.card-contato:hover{
    transform:translateY(-5px);
}

.card-contato h3{
    margin-bottom:15px;
    color:#00bcd4;
}

.card-contato p{
    margin:5px 0;
}

.card-contato span{
    font-weight:bold;
}

.texto-redes{
    margin-top:50px;
}

.redes{
    display:flex;
    justify-content:center;
    gap:25px;
    margin-top:20px;
}

.redes img{
    width:60px;
    border-radius:15px;
    transition:0.3s;
}

.redes img:hover{
    transform:scale(1.1);
}

.linha-contato{
    display:flex;
    align-items:center;
    gap:10px;
}

.icon-contato{
    width:40px;
    height:40px;
}

/* RODAPÉ */

.rodape{
    text-align:center;
    padding:30px;
    background:#000;
}

.linha{
    width:80%;
    height:1px;
    background:#333;
    margin:30px auto;
}

.dev span{
    color:#00ff66;
}

/* MODAL */

.fundo-modal{ 
    position:fixed; 
    top:0; 
    left:0; 
    width:100%; 
    height:100%; 
    background:rgba(0,0,0,0.8); 
    display:none; 
    align-items:center; 
    justify-content:center; 
    z-index:2000; 
}

.janela-login{ 
    background:#fff; 
    padding:40px; 
    border-radius:8px; 
    width:100%; 
    max-width:350px; 
    position:relative; 
}

/* MENU MOBILE */

.menu-mobile-icon{
    display:none;
    font-size:30px;
    background:none;
    border:none;
    cursor:pointer;
    color:#333;
}

/* RESPONSIVO */

@media (max-width:768px){

    .menu-mobile-icon{
        display:block;
    }

    .menu{
        display:none;
        flex-direction:column;
        position:absolute;
        top:70px;
        left:0;
        width:100%;
        background-color:#fff;
        padding:20px;
        box-shadow:0 10px 10px rgba(0,0,0,0.1);
        text-align:center;
    }

    .topo-site{
        padding: 10px 5%;
    }
    
    .menu.ativo{
        display:flex;
    }

    .menu a{
        margin:15px 0;
        display:block;
    }

    .botao-login-admin{
        margin:10px auto;
        width:fit-content;
    }

    .secao-sobre{
        flex-direction:column;
        gap:0;
        padding: 60px 5%;        
    }
    .secao-servicos{
        padding: 60px 5%;
    }

    .grid-servicos{ 
    gap: 0%;
}

    .conteudo-destaque h1{
        font-size:32px;
    }

    .conteudo-destaque p{
        font-size:16px;
    }

    .logo{
        font-size:16px;
        gap:8px;
    }

    .logo img{
        height:40px;
    }
    .card-contato{
        padding: 5px;
        justify-items: center;
    }
    
    .card-contato p {
    margin: 0px 0;
    }
    
    .rodape{
        font-size: 0.7rem;
        padding: 5px;
    }
}

/* TELAS MUITO PEQUENAS */

@media (max-width:380px){

    .logo{
        font-size:18px;
    }

    .logo span{
        margin-left:8px;
    }

}