/* ==========================
   RESET
========================== */

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

html{
    scroll-behavior:smooth;
}

body{
    background:#ffffff;
    color:#222;
    overflow-x:hidden;
}

/* ==========================
   CORES
========================== */

:root{
    --azul:#1a1a1a;
    --vermelho:#d71920;
    --branco:z#ffffff;
    --cinza:#f5f5f5;
    --sombra:0 5px 20px rgba(0,0,0,.08);
}

/* ==========================
   TOPO
========================== */

.top-bar{

    background:var(--azul);

    color:white;

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:10px 5%;

    font-size:14px;
}

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

header{

    position:sticky;

    top:0;

    z-index:1000;

    background:rgb(212, 9, 9);

    display:flex;

    align-items:center;

    justify-content:space-between;

    padding:18px 5%;

    box-shadow:var(--sombra);
}

.logo{

    text-decoration:none;

    font-size:38px;

    font-weight:700;

    color:var(--azul);
}

.logo span{

    background:var(--vermelho);

    color:white;

    padding:4px 10px;

    border-radius:8px;
}

/* ==========================
   BUSCA
========================== */

.search-box{

    flex:1;

    max-width:650px;

    margin:0 30px;

    display:flex;
}

.search-box input{

    width:100%;

    padding:14px;

    border:2px solid #ddd;

    border-right:none;

    border-radius:10px 0 0 10px;

    outline:none;
}

.search-box button{

    width:60px;

    border:none;

    background:var(--azul);

    color:white;

    border-radius:0 10px 10px 0;

    cursor:pointer;
}

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

.header-icons{

    display:flex;

    gap:25px;
}

.header-icons a{

    text-decoration:none;

    color:#fcfcfc;

    display:flex;

    flex-direction:column;

    align-items:center;

    font-size:14px;

    position:relative;
}

.header-icons i{

    font-size:22px;

    margin-bottom:4px;
}

/* ==========================
   CARRINHO
========================== */

.cart{

    position:relative;
}

#contador-carrinho{

    position:absolute;

    top:-8px;

    right:-10px;

    width:22px;

    height:22px;

    border-radius:50%;

    background:var(--vermelho);

    color:white;

    font-size:12px;

    display:flex;

    align-items:center;

    justify-content:center;
}

/* ==========================
   MENU
========================== */

nav{

    background:var(--azul);

    display:flex;

    justify-content:center;

    gap:40px;

    padding:15px;
}

nav a{

    color:white;

    text-decoration:none;

    font-weight:600;

    transition:.3s;
}

nav a:hover{

    color:#ffdddd;
}

/* ==========================
   HERO
========================== */

.hero{

    background:linear-gradient(
        135deg,
        var(--azul),
        #d71920
    );

    color:white;

    display:flex;

    align-items:center;

    justify-content:space-between;

    padding:70px 5%;
}

.hero-content{

    max-width:600px;
}

.tag{

    background:var(--vermelho);

    padding:8px 15px;

    border-radius:50px;

    display:inline-block;

    margin-bottom:20px;
}

.hero h1{

    font-size:65px;

    line-height:1.1;
}

.hero p{

    margin:25px 0;

    font-size:20px;
}

.hero-buttons{

    display:flex;

    gap:15px;

    flex-wrap:wrap;
}

.btn-primary{

    background:var(--vermelho);

    color:white;

    text-decoration:none;

    padding:15px 30px;

    border-radius:10px;

    font-weight:600;
}

.btn-secondary{

    border:2px solid white;

    color:white;

    text-decoration:none;

    padding:15px 30px;

    border-radius:10px;
}

.hero-image img{

    width:100%;

    max-width:600px;
}

/* ==========================
   CATEGORIAS
========================== */

.categorias{

    padding:80px 5%;
}

.categorias h2{

    text-align:center;

    color:var(--azul);

    margin-bottom:40px;

    font-size:35px;
}

.carousel{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:25px;
}

.card{

    background:white;

    border-radius:15px;

    padding:12px 20px;

    box-shadow:var(--sombra);

    transition:.3s;
}

.card:hover{

    transform:translateY(-8px);
}

.card h3{

    margin-bottom:20px;
}

.card a{
    display:inline-block;
    background:var(--azul);
    color:rgb(255, 255, 255);
    text-decoration:none;
    padding:12px 20px;
    border-radius:8px;
}

.produto-img{
    width: 320px;
    height: 480px;
    object-fit: cover;
    display: block;
    margin: 0 auto;
    object-fit: contain;
}

/* ==========================
   BENEFÍCIOS
========================== */

.beneficios{

    background:var(--azul);

    color:white;

    display:grid;

    grid-template-columns:repeat(4,1fr);

    text-align:center;

    padding:40px;
}

.beneficio i{

    font-size:32px;

    margin-bottom:15px;
}

/* ==========================
   FOOTER
========================== */

footer{

    background:#d31717;

    color:white;

    padding:50px 5%;
}

.footer-logo{

    font-size:34px;

    font-weight:700;

    margin-bottom:30px;
}

.footer-logo span{

    color:#ff4b4b;
}

.accordion{

    width:100%;

    background:#363636;

    color:white;

    border:none;

    padding:15px;

    text-align:left;

    cursor:pointer;

    margin-bottom:5px;

    border-radius:8px;
}

.accordion-content{

    display:none;

    background:white;

    padding:15px;

    border-radius:8px;

    margin-bottom:15px;
}

.accordion-content a{

    display:block;

    color:#001d63;

    text-decoration:none;

    margin-bottom:10px;
}

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

.whatsapp{

    position:fixed;

    right:20px;

    bottom:20px;

    width:60px;

    height:60px;

    background:#25d366;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    color:white;

    font-size:32px;

    text-decoration:none;

    z-index:999;
}

/* ==========================
   VOLTAR TOPO
========================== */

#btnTopo{

    position:fixed;

    right:20px;

    bottom:95px;

    width:50px;

    height:50px;

    border:none;

    border-radius:50%;

    background:var(--vermelho);

    color:white;

    cursor:pointer;

    display:none;

    z-index:999;
}

/* ==========================
   MENU MOBILE
========================== */

.hamburger{

    display:none;

    border:none;

    background:none;

    font-size:28px;

    cursor:pointer;
}

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

@media(max-width:992px){

    .hero{

        flex-direction:column;

        text-align:center;

        gap:40px;
    }

    .carousel{

        grid-template-columns:repeat(2,1fr);
    }

    .beneficios{

        grid-template-columns:repeat(2,1fr);

        gap:30px;
    }
}

@media(max-width:768px){

    .top-bar{

        flex-direction:column;

        gap:8px;

        text-align:center;
    }

    .search-box{

        display:none;
    }

    .header-icons{

        display:none;
    }

    .hamburger{

        display:block;
    }

    nav{

        display:none;

        flex-direction:column;

        gap:15px;
    }

    nav.active{

        display:flex;
    }

    .hero h1{

        font-size:40px;
    }

    .hero p{

        font-size:16px;
    }

    .carousel{

        display:flex;

        overflow-x:auto;

        scroll-snap-type:x mandatory;

        gap:15px;
    }

    .card{

        min-width:35px;

        scroll-snap-align:start;
    }

    .beneficios{

        grid-template-columns:1fr;
    }
}


.produto-card{min-height:35px;}


.whatsapp-float{
position:fixed;
right:20px;
bottom:20px;
width:60px;
height:60px;
display:flex;
align-items:center;
justify-content:center;
font-size:32px;
text-decoration:none;
z-index:9999;
background:#25D366;
color:white;
border-radius:50%;
box-shadow:0 4px 10px rgba(0,0,0,.3);
}