/* ==========================================================
MARCELO AUTO PEÇAS
STYLE.CSS 4.0
========================================================== */

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

:root{

    --vermelho:#d60000;
    --vermelhoHover:#b30000;
    --preto:#111;
    --cinza:#666;
    --cinzaClaro:#f5f5f5;
    --branco:#fff;
    --sombra:0 10px 30px rgba(0,0,0,.12);
    --transicao:.35s ease;

}

html{

    scroll-behavior:smooth;

}

body{

    font-family:'Poppins',sans-serif;
    background:#fff;
    color:#222;
    overflow-x:hidden;
    line-height:1.6;

}

img{

    display:block;
    max-width:100%;

}

a{

    text-decoration:none;
    color:inherit;

}

section{

    padding:90px 8%;

}

.container{

    max-width:1300px;
    margin:auto;
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:14px 20px;

}

.banner-container{

    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:70px;
    width:100%;

}

/* =====================================
HEADER
===================================== */

header{

    position:fixed;
    top:0;
    left:0;
    width:100%;
    background:#111;
    z-index:9999;
    box-shadow:0 4px 20px rgba(0,0,0,.18);

}

.logo img{
    height:80px;
}

.menu-nav{

    display:flex;
    align-items:center;
    gap:40px;

}

.menu-nav ul{

    display:flex;
    gap:30px;
    list-style:none;

}

.menu-nav ul li a{

    color:#fff;
    font-weight:600;
    transition:.3s;

}

.menu-nav ul li a:hover{

    color:var(--vermelho);

}

.btn-menu{

    background:var(--vermelho);
    color:#fff;
    padding:12px 24px;
    border-radius:8px;
    font-weight:600;
    transition:.3s;

}

.btn-menu:hover{

    background:var(--vermelhoHover);

}

.menu-mobile{

    display:none;
    background:none;
    border:none;
    color:#fff;
    font-size:30px;
    cursor:pointer;

}

/* =====================================
BANNER
===================================== */

.banner{

    min-height:90vh;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:70px;
    padding-top:120px;

}

.banner-texto{

    flex:1;
    max-width:520px;

}

.banner-texto span{

    color:var(--vermelho);
    font-weight:700;
    letter-spacing:3px;
    text-transform:uppercase;

}

.banner-texto h1{

    font-size:42px;
    line-height:1.2;
    margin:18px 0 25px;
    max-width:600px;

}

.banner-texto p{

    font-size:20px;
    color:#666;
    margin-bottom:35px;

}

.banner-imagem{

    flex:1;
    display:flex;
    justify-content:center;

}

.banner-imagem img{

    width:100%;
    max-width:500px;
    border-radius:18px;
    box-shadow:var(--sombra);

}

.botoes-banner{

    display:flex;
    gap:20px;
    flex-wrap:wrap;

}

.btn-vermelho{

    background:var(--vermelho);
    color:#fff;
    padding:16px 32px;
    border-radius:10px;
    font-weight:600;
    transition:.3s;

}

.btn-vermelho:hover{

    background:var(--vermelhoHover);

}

.btn-branco{

    border:2px solid var(--vermelho);
    color:var(--vermelho);
    padding:16px 32px;
    border-radius:10px;
    font-weight:600;
    transition:.3s;

}

.btn-branco:hover{

    background:var(--vermelho);
    color:#fff;

}
/* ==========================================================
TÍTULOS
========================================================== */

.titulo{

    text-align:center;
    margin-bottom:60px;

}

.titulo-vermelho{

    color:var(--vermelho);
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:3px;
    display:block;
    margin-bottom:12px;

}

.titulo h2{

    font-size:42px;
    color:#111;
    margin-bottom:15px;

}

.titulo p{

    max-width:700px;
    margin:auto;
    color:#666;
    font-size:18px;

}

/* ==========================================================
PRODUTOS
========================================================== */

.produtos{

    background:#fafafa;

}

.produtos-grid{

    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
    gap:35px;

}

.produto{

    background:#fff;
    border-radius:18px;
    overflow:hidden;
    box-shadow:0 10px 25px rgba(0,0,0,.10);
    transition:.35s;

}

.produto:hover{

    transform:translateY(-10px);

}

.produto img{

    width:100%;
    height:260px;
    object-fit:cover;

}

.info-produto{

    padding:25px;

}

.info-produto h3{

    color:var(--vermelho);
    font-size:28px;
    margin-bottom:15px;

}

.info-produto p{

    color:#666;
    margin-bottom:22px;
    line-height:28px;

}

.btn-produto{

    display:block;
    width:100%;
    text-align:center;
    padding:14px;
    background:var(--vermelho);
    color:#fff;
    border-radius:10px;
    font-weight:600;
    transition:.3s;

}

.btn-produto:hover{

    background:var(--vermelhoHover);

}

/* ==========================================================
QUEM SOMOS
========================================================== */

.empresa{

    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:60px;
    flex-wrap:wrap;

}

.empresa-imagem,
.empresa-texto{

    flex:1;
    min-width:320px;

}

.empresa-imagem img{

    width:100%;
    border-radius:18px;
    box-shadow:var(--sombra);

}

.empresa-texto h2{

    font-size:42px;
    margin:20px 0;

}

.empresa-texto p{

    color:#666;
    line-height:32px;
    margin-bottom:20px;

}

/* ==========================================================
GALERIA
========================================================== */

.galeria{

    background:#fafafa;

}

.galeria-grid{

    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
    gap:25px;

}

.galeria-grid img{

    width:100%;
    height:280px;
    object-fit:cover;
    border-radius:18px;
    transition:.35s;
    box-shadow:var(--sombra);

}

.galeria-grid img:hover{

    transform:scale(1.03);

}
/* ==========================================================
ESTOQUE
========================================================== */

.estoque{

    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:60px;
    flex-wrap:wrap;

}

.estoque-imagem,
.estoque-texto{

    flex:1;
    min-width:320px;

}

.estoque-imagem img{

    width:100%;
    border-radius:18px;
    box-shadow:var(--sombra);

}

.estoque-texto h2{

    font-size:42px;
    margin:20px 0;

}

.estoque-texto p{

    color:#666;
    line-height:32px;
    margin-bottom:18px;

}

/* ==========================================================
DIFERENCIAIS
========================================================== */

.diferenciais{

    background:#fafafa;

}

.cards-diferenciais{

    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
    gap:30px;

}

.card-diferencial{

    background:#fff;
    padding:35px;
    border-radius:18px;
    text-align:center;
    box-shadow:var(--sombra);
    transition:.35s;

}

.card-diferencial:hover{

    transform:translateY(-8px);

}

.card-diferencial i{

    font-size:48px;
    color:var(--vermelho);
    margin-bottom:20px;

}

.card-diferencial h3{

    font-size:24px;
    margin-bottom:15px;

}

.card-diferencial p{

    color:#666;
    line-height:28px;

}

/* ==========================================================
PESQUISA
========================================================== */

.pesquisa{

    text-align:center;

}

.caixa-pesquisa{

    display:flex;
    justify-content:center;
    gap:15px;
    flex-wrap:wrap;
    margin-top:35px;

}

.caixa-pesquisa input{

    width:500px;
    max-width:100%;
    padding:16px;
    border:2px solid #ddd;
    border-radius:10px;
    font-size:16px;

}

.caixa-pesquisa input:focus{

    border-color:var(--vermelho);
    outline:none;

}

.caixa-pesquisa button{

    background:var(--vermelho);
    color:#fff;
    border:none;
    padding:16px 28px;
    border-radius:10px;
    cursor:pointer;
    font-weight:600;
    transition:.3s;

}

.caixa-pesquisa button:hover{

    background:var(--vermelhoHover);

}

/* ==========================================================
MARCAS
========================================================== */

.marcas{

    background:#fafafa;

}

.marcas-grid{

    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(170px,1fr));
    gap:20px;

}

.marca{

    background:#fff;
    padding:30px 15px;
    border-radius:15px;
    text-align:center;
    font-weight:600;
    box-shadow:var(--sombra);
    transition:.35s;

}

.marca:hover{

    background:var(--vermelho);
    color:#fff;
    transform:translateY(-6px);

}
/* ==========================================================
NÚMEROS
========================================================== */

.numeros{

    background:linear-gradient(135deg,#d60000,#a90000);
    color:#fff;
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
    gap:30px;
    text-align:center;

}

.numero{

    padding:30px 20px;

}

.numero h2{

    font-size:52px;
    margin-bottom:10px;

}

.numero p{

    font-size:18px;

}

/* ==========================================================
AVALIAÇÕES
========================================================== */

.avaliacoes{

    background:#f8f8f8;

}

.avaliacoes-grid{

    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
    gap:30px;

}

.avaliacao{

    background:#fff;
    padding:30px;
    border-radius:18px;
    box-shadow:var(--sombra);
    transition:.3s;

}

.avaliacao:hover{

    transform:translateY(-8px);

}

.estrelas{

    color:#FFC107;
    font-size:22px;
    margin:15px 0;

}

.avaliacao h4{

    color:var(--vermelho);
    margin-top:15px;

}

.avaliacao span{

    color:#666;

}

/* ==========================================================
CONTATO
========================================================== */

#contato{

    background:#fff;

}

.contato-grid{

    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
    gap:30px;
    margin-bottom:40px;

}

.card-contato{

    background:#fff;
    padding:35px;
    text-align:center;
    border-radius:18px;
    box-shadow:var(--sombra);
    transition:.3s;

}

.card-contato:hover{

    transform:translateY(-8px);

}

.card-contato i{

    font-size:45px;
    color:var(--vermelho);
    margin-bottom:20px;

}

.card-contato h3{

    margin-bottom:15px;

}

.card-contato p{

    color:#666;

}

/* ==========================================================
MAPA
========================================================== */

.mapa{

    padding:0;

}

.mapa iframe{

    width:100%;
    height:450px;
    border:0;

}

/* ==========================================================
RODAPÉ
========================================================== */

footer{

    background:#111;
    color:#fff;
    padding:60px 8%;

}

.rodape{

    text-align:center;

}

.logo-rodape{

    width:180px;
    margin:0 auto 25px;

}

.rodape p{

    margin-bottom:15px;
    color:#ddd;

}

.copy{

    margin-top:30px;
    color:#888;
    font-size:14px;

}

/* ==========================================================
WHATSAPP
========================================================== */

.whatsapp-flutuante{

    position:fixed;
    right:20px;
    bottom:20px;
    width:65px;
    height:65px;
    border-radius:50%;
    background:#25D366;
    color:#fff;
    display:flex;
    justify-content:center;
    align-items:center;
    font-size:34px;
    text-decoration:none;
    box-shadow:0 10px 25px rgba(0,0,0,.25);
    z-index:9999;

}

.whatsapp-flutuante:hover{

    transform:scale(1.08);

}

/* ==========================================================
RESPONSIVO
========================================================== */

@media(max-width:991px){

header .container{

    flex-direction:column;
    padding:20px;

}
    }

    .menu-mobile{

        display:block;
        margin-top:10px;

    }

    .menu-nav{

        display:none;
        width:100%;
        flex-direction:column;
        margin-top:20px;

    }

    .menu-nav.ativo{

        display:flex;

    }

    .menu-nav ul{

        flex-direction:column;
        width:100%;
        text-align:center;

    }

    .banner{

        flex-direction:column;
        text-align:center;
        padding-top:160px;

    }

    .empresa,
    .estoque{

        flex-direction:column;

    }

}

@media(max-width:768px){

    section{

        padding:70px 6%;

    }

    .banner h1{

        font-size:38px;

    }

    .titulo h2{

        font-size:32px;

    }

    .btn-vermelho,
    .btn-branco{

        width:100%;
        text-align:center;

    }

    .botoes-banner{

        flex-direction:column;

    }

    .produto img{

        height:220px;

    }

}
#inicio,
#produtos,
#empresa,
#contato{

    scroll-margin-top:110px;

}
#inicio,
#produtos,
#empresa,
#contato{
    scroll-margin-top:110px;
}
/* ==========================================================
BOTÃO VOLTAR AO TOPO
========================================================== */

.topo{

    position:fixed;
    right:20px;
    bottom:100px;
    width:55px;
    height:55px;
    border:none;
    border-radius:50%;
    background:var(--vermelho);
    color:#fff;
    font-size:22px;
    cursor:pointer;
    box-shadow:var(--sombra);
    opacity:0;
    visibility:hidden;
    transition:var(--transicao);
    z-index:9998;

}

.topo.mostrar{

    opacity:1;
    visibility:visible;

}

.topo:hover{

    background:var(--vermelhoHover);
    transform:translateY(-5px);

}

/* ==========================================================
ANIMAÇÃO DOS CARDS
========================================================== */

.produto,
.card-diferencial,
.avaliacao,
.card-contato,
.marca{

    opacity:0;
    transform:translateY(40px);
    transition:.7s ease;

}

.produto.aparecer,
.card-diferencial.aparecer,
.avaliacao.aparecer,
.card-contato.aparecer,
.marca.aparecer{

    opacity:1;
    transform:translateY(0);

}

/* ==========================================================
PESQUISA
========================================================== */

.caixa-pesquisa input{

    transition:.3s;

}

.caixa-pesquisa input:hover{

    border-color:var(--vermelho);

}

.caixa-pesquisa button{

    transition:.3s;

}

.caixa-pesquisa button:hover{

    transform:translateY(-3px);

}