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

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

html{
    scroll-behavior:smooth;
}

body{

    background-color:#0b0b0b;

    background-image:
        linear-gradient(
            rgba(10,10,10,.75),
            rgba(10,10,10,.75)
        ),
        linear-gradient(rgba(255, 106, 0, 0.562) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,106,0,.562) 1px, transparent 1px);

    background-size:auto,60px 60px,60px 60px;

    background-attachment:fixed;

    color:#fff;
}

h1,h2,h3,h4,h5,h6{
    font-family:'Poppins',sans-serif;
}

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

img{
    max-width:100%;
    display:block;
}


header{

    position:fixed;
    top:0;
    left:0;

    width:100%;
    height:125px;

    display:flex;
    align-items:center;

    padding:0 50px;

    background:transparent;

    transition:.35s ease;

    z-index:9999;

}

header.scrolled{

    background:linear-gradient(
        135deg,
        rgba(15,15,15,.98),
        rgba(30,30,30,.95),
        rgba(15,15,15,.98)
    );

    backdrop-filter:blur(18px);

    border-bottom:1px solid rgb(255, 106, 0);

    box-shadow:
    0 8px 25px rgba(0,0,0,.35);

}
.logo{
    display:flex;
    align-items:center;
    height:100%;
}

.logo img{
    height:30px;
    width:auto;
    display:block;
    transition:.3s;
    margin-top: 30px
}

.logo img:hover{
    transform:scale(1.03);
}
nav{
    flex:1;
    display:flex;
    justify-content:space-evenly;
    align-items:center;

    margin-left:60px;
    margin-right:60px;
}

nav a{
    color:#fff;
    text-decoration:none;
    font-size:20px;      /* antes devia estar 16px */
    font-weight:500;
    letter-spacing:.5px;
    transition:.3s;
}

nav a::after{

    content:"";

    position:absolute;

    left:0;
    bottom:-7px;

    width:0;
    height:2px;

    background:#ff6a00;

    transition:.3s;
}

nav a:hover{
    color:#ff6a00;
    text-shadow:0 0 10px rgba(255,106,0,.6);
}

nav a:hover::after{

    width:100%;

}

.btn-orcamento{

    background:#ff6a00;

    color:#fff;

    padding:13px 24px;

    border-radius:10px;

    text-decoration:none;

    font-weight:600;

    transition:.3s;

    white-space:nowrap;

}

.btn-orcamento:hover{

    transform:translateY(-2px);

    box-shadow:0 0 20px rgb(255, 106, 0);

}

.menu-btn{

    display:none;

    background:none;

    border:none;

    color:#fff;

    font-size:30px;

    cursor:pointer;

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

#hero{
    min-height:100vh;
    padding:120px 8%;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:60px;

    position:relative;
    overflow:hidden;

    background-image:url("assets/hero/fundo-tech.jpg");
background-size:cover;
background-position:center;
background-repeat:no-repeat;

}
#hero::before{
    content:"";
    position:absolute;
    inset:0;

    background:
        radial-gradient(circle at 20% 40%, rgb(255, 106, 0), transparent 35%),
        radial-gradient(circle at 85% 20%, rgb(255, 106, 0), transparent 25%);

    z-index:-2;
}
#hero::after{
    content:"";
    position:absolute;
    inset:0;

    background-image:
        linear-gradient(rgba(255, 106, 0, 0.637) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,106,0,.637) 1px, transparent 1px);

    background-size:60px 60px;

    z-index:-1;
}
.hero-text{.hero-text,
.hero-buttons{
    position:relative;
    z-index:2;
}
    flex:1;
}

.hero-text h1{
    font-size:clamp(40px,5vw,78px);
    line-height:1.08;
    font-weight:800;
    margin-bottom:35px;
    letter-spacing:-2px;
}

.hero-text p{
    font-size:26px;
    line-height:1.7;
    color:#d8d8d8;
    max-width:650px;
    margin-bottom:45px;
}

.hero-text span{
    color:#ff6a00;
}
.hero-buttons{
    display:flex;
    gap:25px;
    margin-top:25px;
}

.btn{
    background:#ff6a00;
    color:#fff;
    padding:16px 32px;
    border-radius:8px;
    font-weight:600;
    transition:.3s;
}

.btn:hover{
    transform:translateY(-3px);
}

.btn2{
    background:transparent;
    border:2px solid #ff6a00;
}

.hero-image{
    flex:1;
    display:flex;
    justify-content:center;
}

.hero-image img{
    max-width:500px;
}

/* ===========================
   SEÇÕES
=========================== */

section{
    padding:100px 8%;
}

h2{
    font-size:40px;
    margin-bottom:50px;
    text-align:center;
}

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

@media(max-width:900px){

    nav{
        display:none;
    }

    .menu-btn{
        display:block;
    }

    #hero{
        flex-direction:column;
        text-align:center;
    }

    .hero-buttons{
        justify-content:center;
        flex-wrap:wrap;
    }

    .hero-text h1{
        font-size:40px;
    }
}/* ===========================
MENU MOBILE
=========================== */

@media(max-width:900px){

    nav.active{
        display:flex;
        flex-direction:column;
        position:absolute;
        top:80px;
        left:0;
        width:100%;
        background:#111111;
        padding:30px;
        text-align:center;
        gap:25px;
    }

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

.categorias-wrapper{
    position:relative;
}


.grid-categorias{
    display:flex;
    gap:25px;

    overflow-x:auto;

    scroll-behavior:smooth;

    scrollbar-width:none;
}

.grid-categorias::-webkit-scrollbar{
    display:none;
}


.categoria{

    background:#1b1b1b;

    border:2px solid transparent;

    border-radius:15px;

    padding:30px;

    text-align:center;

    transition:.35s;

    cursor:pointer;

    display:flex;

    flex-direction:column;

    justify-content:space-between;

    flex:0 0 280px;
}


.categoria img{

    width:100%;

    height:220px;

    object-fit:cover;

    transition:.35s;
}


.categoria h3{

    font-family:'Poppins',sans-serif;

    font-size:22px;

    margin:20px 0 5px;

}


.categoria p{

    margin:0;

    color:#ff6a00;

}


.categoria:hover{

    transform:translateY(-8px) scale(1.03);

    border-color:#ff6a00;

    box-shadow:0 15px 40px rgba(255, 106, 0, 0.671);

}


.categoria:hover img{

    transform:scale(1.08);

}
/* ===========================
   SETAS DO CARROSSEL
=========================== */

.seta{

    position:absolute;

    top:50%;

    transform:translateY(-50%);

    width:45px;

    height:45px;

    border-radius:50%;

    background:rgba(255,255,255,.08);

    backdrop-filter:blur(10px);

    border:1px solid rgba(255,255,255,.15);

    color:#ff6a00;

    font-size:30px;

    display:flex;

    align-items:center;

    justify-content:center;

    cursor:pointer;

    z-index:10;

}


.esquerda{

    left:-25px;

}


.direita{

    right:-25px;

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

.produtos-grid{

    display:grid;

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

    gap:30px;

}

.produto-card{

    background:#1b1b1b;

    border-radius:15px;

    overflow:hidden;

    transition:.35s;

    text-align:center;

    border:2px solid transparent;

}

.produto-card:hover{

    transform:translateY(-10px);

    border-color:#ff6a00;

    box-shadow:0 20px 45px rgba(255, 106, 0, 0.685);

}

.produto-card img{

    width:100%;

    height:250px;

    object-fit:cover;

}

.produto-card h3{

    margin:20px 0 10px;

    font-family:'Poppins',sans-serif;

}

.preco{

    color:#ff6a00;

    font-size:22px;

    font-weight:bold;

    margin-bottom:20px;

}

.btn-card{

    display:inline-block;

    margin-bottom:25px;

    background:#ff6a00;

    color:#fff;

    padding:12px 25px;

    border-radius:8px;

    transition:.3s;

}
.btn-card:hover{

    transform:scale(1.05);

}
/* ===========================
   CATÁLOGO - MOSTRUÁRIO
=========================== */


#lista-produtos{

    display:grid;

    grid-template-columns:
    repeat(auto-fit,minmax(220px,1fr));

    gap:30px;

    width:100%;

}



#lista-produtos .produto-card{

    background:#1b1b1b;

    border-radius:15px;

    overflow:hidden;

    text-align:center;

    border:2px solid transparent;

    transition:.35s;

}



#lista-produtos .produto-card:hover{

    transform:translateY(-8px);

    border-color:#ff6a00;

}



#lista-produtos .produto-img{

    width:100%;

    aspect-ratio:1/1;

    overflow:hidden;

}



#lista-produtos .produto-img img{

    width:100%;

    height:100%;

    object-fit:cover;

}



#lista-produtos .btn-card{

    margin:15px auto 20px;

}


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

.produtos-wrapper{

    position:relative;

}


.seta-produto{

    position:absolute;

    top:50%;

    transform:translateY(-50%);

    width:45px;

    height:45px;

    border-radius:50%;

    background:rgba(255,255,255,.08);

    backdrop-filter:blur(10px);

    border:1px solid rgba(255,255,255,.15);

    color:#ff6a00;

    font-size:30px;

    display:flex;

    align-items:center;

    justify-content:center;

    cursor:pointer;

    z-index:10;

}


.esquerda-produto{

    left:-25px;

}


.direita-produto{

    right:-25px;

}

/* ===========================
   COMO FUNCIONA
=========================== */

.linha-tempo{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:25px;

    flex-wrap:wrap;

}

.passo{

    background:#1b1b1b;

    width:250px;

    padding:35px 25px;

    border-radius:15px;

    text-align:center;

    transition:.3s;

    border:2px solid transparent;

}

.passo:hover{

    transform:translateY(-8px);

    border-color:#ff6a00;

    box-shadow:0 15px 35px rgba(255, 106, 0, 0.753);

}

.icone{

    font-size:60px;

    margin-bottom:20px;

}

.passo h3{

    margin-bottom:15px;

    font-family:'Poppins',sans-serif;

}

.passo p{

    color:#cfcfcf;

    line-height:1.6;

}

.seta{

    color:#ff6a00;

    font-size:40px;

}

@media(max-width:900px){

    .linha-tempo{

        flex-direction:column;

    }

    .seta{

        transform:rotate(90deg);

    }

}/* ===========================
   PERSONALIZADOS
=========================== */

#personalizados{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:70px;

}

.personalizados-img{

    flex:1;

}

.personalizados-img img{

    width:100%;

    border-radius:20px;

    transition:.4s;

}

.personalizados-img img:hover{

    transform:scale(1.02);

}

.personalizados-texto{

    flex:1;

}

.personalizados-texto span{

    color:#ff6a00;

    font-weight:700;

    letter-spacing:2px;

}

.personalizados-texto h2{

    text-align:left;

    margin:15px 0 25px;

    font-size:45px;

}

.personalizados-texto p{

    color:#cfcfcf;

    line-height:1.8;

    margin-bottom:35px;

    font-size:18px;

}

@media(max-width:900px){

    #personalizados{

        flex-direction:column;

    }

    .personalizados-texto{

        text-align:center;

    }

    .personalizados-texto h2{

        text-align:center;

        font-size:35px;

    }

}/* ===========================
   GALERIA
=========================== */
#galeria .galeria-wrapper{

    position:relative;

}

.galeria-janela{

    width:100%;

    overflow:hidden;

}
.galeria-grid{

    display:flex;

    gap:20px;

}
.galeria-janela{
    overflow:hidden;
    width:100%;
}
.galeria-grid img{

    width:100%;

    height:260px;

    object-fit:cover;

    border-radius:15px;

    cursor:pointer;

    transition:.35s;

}

.galeria-grid img:hover{

    transform:scale(1.05);

    box-shadow:0 15px 35px rgba(255,106,0,.25);
    
} /* ===========================
   SETAS GALERIA
=========================== */

#galeria .seta-galeria{
    

    position:absolute;

    top:130px;

transform:translateY(-50%);

    width:45px;

    height:45px;

    border-radius:50%;

    background:rgba(255,255,255,.08);

    backdrop-filter:blur(10px);

    border:1px solid rgba(255,255,255,.15);

    color:#ff6a00;

    font-size:30px;

    display:flex;

    align-items:center;

    justify-content:center;

    cursor:pointer;

    z-index:10;

} /* ===========================
   MOVIMENTO GALERIA
=========================== */

#galeria .galeria-grid{

    display:flex;

    overflow:hidden;

    gap:20px;

}


#galeria .galeria-grid img{

    flex:0 0 280px;

    width:280px;

}

#galeria .esquerda-galeria{

    left:-25px;

}


#galeria .direita-galeria{

    right:-25px;

}


@media(max-width:768px){

    #galeria .seta-galeria{

        display:none;

    }

}

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

.avaliacoes-grid{

    display:grid;

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

    gap:25px;

}

.avaliacao-card{

    background:#1b1b1b;

    padding:30px;

    border-radius:15px;

    transition:.3s;

    border:2px solid transparent;

}

.avaliacao-card:hover{

    border-color:#ff6a00;

    transform:translateY(-8px);

}

.estrelas{

    color:#ff6a00;

    font-size:22px;

    margin-bottom:15px;

}

.avaliacao-card p{

    color:#ddd;

    line-height:1.7;

}

.avaliacao-card h4{

    margin-top:20px;

}

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

footer{

    background:#0d0d0d;

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(250px,1fr));

    gap:40px;

    padding:70px 8%;

}

footer h2{

    text-align:left;

    margin-bottom:15px;

}

footer h3{

    margin-bottom:20px;

}

.footer-menu{

    display:flex;

    flex-direction:column;

    gap:12px;

}

.footer-menu a{

    transition:.3s;

}

.footer-menu a:hover{

    color:#ff6a00;

}

.footer-contato{

    display:flex;

    flex-direction:column;

    gap:12px;

}

.copyright{

    background:#080808;

    text-align:center;

    padding:20px;

    color:#888;

}/* ===========================
   CATÁLOGO
=========================== */

#catalogo{

    padding:140px 8% 100px;

}

#catalogo h1{

    font-size:64px;

    font-weight:500;

    line-height:2.5;

    margin: bottom 40px;

    text-align: center;
}


#catalogo h1 span{

    color:#ff6a00;

}

#catalogo>p{

    text-align:center;

    color:#cfcfcf;

    margin-bottom:50px;

}

.catalogo-topo{

    display:block;

    margin:40px 0 25px;

}

#pesquisa{

    width:100%;

    padding:18px 24px;

    background:#1b1b1b;

    border:1px solid rgba(255,255,255,.08);

    border-radius:14px;

    color:#fff;

    font-size:18px;

    outline:none;

    transition:.3s;

}

@media(max-width:768px){

    .seta{
        display:none;
    }

    .seta-produto{
        display:none;
    }

    .grid-categorias{
        overflow-x:auto;
        scroll-behavior:smooth;
    }

    .produtos-grid{
        display:flex;
        overflow-x:auto;
        gap:20px;
        scroll-behavior:smooth;
    }

    .produto-card{
        flex:0 0 85%;
    }
 #galeria .galeria-grid{

        overflow-x:auto;

        scroll-behavior:smooth;

    }


    #galeria .galeria-grid::-webkit-scrollbar{

        display:none;

    }

}


#categorias{
    position:relative;
    overflow:hidden;

    background:
        linear-gradient(
            rgba(10,10,10,.65),
            rgba(10,10,10,.65)
        ),
        linear-gradient(rgba(255,106,0,.12) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,106,0,.12) 1px, transparent 1px);

    background-size:auto, 60px 60px, 60px 60px;
}

/* ===========================
   PÁGINA DO PRODUTO
=========================== */

#produto{

    min-height:100vh;
    width:100%;

    padding:160px 8% 80px;

    background-image:url("assets/fundos/fundo-produto.jpeg");

    background-size:100% 100%;
    background-position:center;
    background-repeat:no-repeat;

    display:flex;
    align-items:center;
    justify-content:center;

    gap:60px;

}

.produto-imagem{

    flex:1;

}

.produto-imagem img{

    width:100%;

    max-width:500px;

    border-radius:20px;

}

.produto-info{

    flex:1;

}

.produto-info h1{

    font-size:clamp(32px,4vw,48px);

    margin-bottom:20px;

}

.produto-info p{

    color:#ddd;

    line-height:1.8;

    margin-bottom:30px;

}

.botoes-compra{

    display:flex;

    gap:20px;

    flex-wrap:wrap;

}/* ===== LOGO ===== */
.logo img{
    width: 320px;
    height: auto;
    display: block;
    transition: .35s;
    filter: drop-shadow(0 0 12px rgb(255, 106, 0));
}

.logo img:hover{
    transform: scale(1.04);
    filter: drop-shadow(0 0 20px rgb(255, 106, 0));
} header.scrolled::after{
    content:"";
    position:absolute;
    left:0;
    bottom:0;

    width:100%;
    height:2px;

    background:linear-gradient(
        90deg,
        transparent,
        #ff6a00,
        transparent
    );

    opacity:.8;
}.btn-orcamento{
    background:#ff6a00;
    color:#fff;
    text-decoration:none;
    padding:12px 22px;
    border-radius:8px;
    font-weight:600;
    transition:.3s;
}

.btn-orcamento:hover{
    background:#ff7d1a;
    transform:translateY(-2px);
}header.scrolled::before{
    content:"";

    position:absolute;

    top:0;
    left:0;

    width:100%;
    height:100%;

    background:
    repeating-linear-gradient(
        -45deg,
        transparent 0px,
        transparent 28px,
        rgba(255,106,0,.05) 29px,
        transparent 30px
    );

    pointer-events:none;

}.logo{
    overflow:hidden;
}
.hero-content span{
    color:#ff6a00;
}
.orcamento-btn{
    margin-left:auto;
}
/* ===========================
   HERO PREMIUM
=========================== */

.hero-image{
    position:relative;
    display:flex;
    justify-content:center;
    align-items:center;
}

.hero-image::before{
    content:"";
    position:absolute;
    width:500px;
    height:500px;
    border-radius:50%;
    background:radial-gradient(circle,
        rgb(255, 106, 0),
        rgb(255, 106, 0),
        transparent 70%);
    filter:blur(30px);
    z-index:-1;
    animation:pulseGlow 5s ease-in-out infinite;
}

.hero-image img{
    width:650px;
    max-width:100%;
    animation:float 5s ease-in-out infinite;
    filter:drop-shadow(0 25px 45px rgb(255, 106, 0));
}
@keyframes float{
    0%{
        transform:translateY(0px);
    }
    50%{
        transform:translateY(-18px);
    }
    100%{
        transform:translateY(0px);
    }
}

@keyframes pulseGlow{
    0%{
        transform:scale(1);
        opacity:.6;
    }
    50%{
        transform:scale(1.08);
        opacity:1;
    }
    100%{
        transform:scale(1);
        opacity:.6;
    }
}
.btn{
    position:relative;
    overflow:hidden;
}

.btn::before{
    content:"";
    position:absolute;
    top:0;
    left:-120%;
    width:60%;
    height:100%;
    background:linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,.4),
        transparent
    );
    transform:skewX(-25deg);
    transition:.7s;
}

.btn:hover::before{
    left:170%;
}

.btn:hover{
    transform:translateY(-5px);
    box-shadow:0 15px 30px rgb(255, 106, 0);
}
/* ===========================
   CATEGORIAS
=========================== */

#categorias{
    padding:100px 8%;
}

#categorias h2{
    text-align:center;
    font-size:48px;
    margin-bottom:60px;
    color:#fff;
   text-shadow:0 0 15px rgba(255,106,0,.35);
}
#categorias h2 span{
    color:#ff6a00;
}

.grid-categorias{
    display:flex;
    gap:25px;

    overflow-x:auto;

    scroll-snap-type:x mandatory;

    padding-bottom:15px;
}

.grid-categorias .categoria{
    flex:0 0 280px;
    scroll-snap-align:start;
}

.categoria{
    background:linear-gradient(180deg,#202020,#171717);
    border:1px solid rgba(255,255,255,.05);
    border-radius:18px;

    padding:45px 35px;

    transition:.35s ease;

    cursor:pointer;

    position:relative;

    overflow:hidden;
}

.categoria::before{
    content:"";
    position:absolute;
    top:0;
    left:-100%;
    width:100%;
    height:3px;

    background:linear-gradient(
        90deg,
        transparent,
        #ff6a00,
        transparent
    );

    transition:.6s;
}

.categoria:hover{
    transform:translateY(-10px);

    border-color:rgba(255,106,0,.35);

    box-shadow:
        0 18px 40px rgba(0,0,0,.45),
        0 0 30px rgba(255,106,0,.15);
}

.categoria:hover::before{
    left:100%;
}

.categoria h3{
    font-size:28px;
    margin-bottom:20px;
}

.categoria p{
    color:#bdbdbd;
    font-size:17px;
}

.categoria:hover p{
    color:#ff6a00;
}/*=========================
 /* ===========================
   FILTROS DO CATÁLOGO
=========================== */

.filtros{
    display:flex;
    flex-wrap:wrap;
    gap:16px;
    margin:20px 0 45px;
}

.filtro{
    background:transparent;
    border:1px solid rgba(255,255,255,.15);
    color:#d8d8d8;

    padding:12px 24px;

    border-radius:999px;

    font-size:17px;
    font-weight:600;

    cursor:pointer;

    transition:.3s ease;
}

.filtro:hover{
    border-color:#ff6a00;
    color:#fff;
    transform:translateY(-2px);
}

.filtro.ativo{
    background:#ff6a00;
    color:#fff;
    border-color:#ff6a00;

    box-shadow:0 0 20px rgba(255,106,0,.25);
}/* ===========================
   CARDS DOS PRODUTOS
=========================== */

.produto{

    background:#1a1a1a;

    border:1px solid rgba(255,255,255,.05);

    border-radius:18px;

    overflow:hidden;

    transition:.35s;

}

.produto:hover{

    transform:translateY(-10px);

    border-color:#ff6a00;

    box-shadow:0 20px 45px rgba(255,106,0,.18);

}

.produto img{

    width:100%;
    height:260px;

    object-fit:cover;

    transition:.4s;

}

.produto:hover img{

    transform:scale(1.06);

}

.produto-info{

    padding:22px;

}

.produto h3{

    font-size:22px;

    margin-bottom:10px;

}

.preco{

    color:#ff6a00;

    font-size:28px;

    font-weight:700;

    margin:18px 0;

}.produto-card{

    background:#1b1b1b;
    border-radius:18px;
    overflow:hidden;

    transition:.35s;

    border:1px solid #262626;

}

.produto-card:hover{

    transform:translateY(-10px);

    border-color:#ff6a00;

    box-shadow:0 20px 40px rgba(255,106,0,.18);

}

.produto-img{

    height:270px;

    overflow:hidden;

    display:flex;

    justify-content:center;

    align-items:center;

    background:#222;

}

.produto-img img{

    width:100%;
    height:100%;

    object-fit:contain;

    padding:15px;

    transition:.4s;

}

.produto-card:hover img{

    transform:scale(1.08);

}

.produto-info{

    padding:22px;

    text-align:center;

}

.produto-info h3{

    font-size:22px;

    margin-bottom:12px;

}

.preco{

    font-size:28px;

    font-weight:700;

    color:#ff6a00;

    margin-bottom:22px;

}

.btn-card{

    display:inline-block;

    padding:14px 30px;

    border-radius:999px;

    background:#ff6a00;

    color:white;

    font-weight:600;

    transition:.3s;

}

.btn-card:hover{

    transform:translateY(-3px);

    box-shadow:0 8px 20px rgba(255,106,0,.35);

}
#categorias,
#produtos,
#como-funciona{
    position:relative;
    overflow:hidden;

    background:
        linear-gradient(
            rgba(10,10,10,.65),
            rgba(10,10,10,.65)
        ),
        linear-gradient(rgba(255,106,0,.12) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,106,0,.12) 1px, transparent 1px);

    background-size:auto, 60px 60px, 60px 60px;
}
h1,
h2,
h3{
    text-shadow:0 0 12px rgba(255,106,0,.18);
}
p,
a{
    text-shadow:0 0 8px rgba(255,255,255,.08);
}
span,
.categoria p{
    text-shadow:0 0 10px rgba(255,106,0,.45);
}
#produtos h2 span{
    color:#ff6a00;
}
/* ===========================
   TITULO GALERIA
=========================== */

#galeria h2 span{

    color:#ff6a00;

}
/* ===========================
   WHATSAPP FLUTUANTE
=========================== */

.whatsapp-float{

    position:fixed;

    right:25px;

    bottom:25px;

    width:60px;

    height:60px;

    border-radius:50%;

    background:#25D366;

    display:flex;

    align-items:center;

    justify-content:center;

    z-index:9999;

    box-shadow:0 10px 25px rgba(0,0,0,.35);

    transition:.3s;

}


.whatsapp-float img{

    width:35px;

    height:35px;

}


.whatsapp-float:hover{

    transform:scale(1.1);

@media(max-width:768px){

    header{

        height:80px;

        padding:0 15px;

        gap:10px;

    }


    .logo{

        width:130px;

        flex-shrink:1;

    }


    .logo img{

        width:130px;

        height:auto;

        margin-top:0;

        object-fit:contain;

    }


    nav{

        display:none;

    }


    .menu-btn{

        display:block;

        margin-left:auto;

    }


    .btn-orcamento{

        display:none;

    }

}


.logo img{

    width:150px;

    height:auto;

    margin-top:0;

    object-fit:contain;

}

.menu-btn{

    display:none;

}

}.subcategorias{

    display:flex;

    flex-wrap:wrap;

    gap:8px;

    justify-content:center;

    margin:15px 0;

}


.subcategorias span{

    padding:6px 12px;

    border:1px solid rgba(255,106,0,.5);

    border-radius:20px;

    font-size:13px;

    color:#ff6a00;

}
.categoria-wrapper{
    display:flex;
    align-items:center;
    gap:15px;
}


.categoria-carrossel{

    display:flex;
    gap:25px;

    overflow:hidden;

    scroll-behavior:smooth;

    width:100%;

}


.categoria-carrossel .produto-card{

    min-width:250px;

}


.categoria-carrossel img{

    width:100%;

    border-radius:15px;

}


.seta-categoria{

    background:#ff6a00;

    border:none;

    color:white;

    width:40px;

    height:40px;

    border-radius:50%;

    font-size:30px;

    cursor:pointer;

}
#lista-produtos{
    grid-template-columns: repeat(auto-fill,minmax(220px,220px));
    justify-content:start;
}
/* ===========================
   CATÁLOGO MOBILE
=========================== */

@media(max-width:768px){


#lista-produtos{

    display:flex;

    overflow-x:auto;

    scroll-snap-type:x mandatory;

    gap:20px;

    padding-bottom:20px;

}



#lista-produtos::-webkit-scrollbar{

    display:none;

}



#lista-produtos .produto-card{

    min-width:85%;

    flex:0 0 85%;

    scroll-snap-align:start;

}



#lista-produtos .produto-img{

    aspect-ratio:1/1;

}



}

@media(max-width:768px){


#produto{

    padding:130px 20px 50px;

}



.produto-info h1{

    font-size:32px;

}


.produto-imagem img{

    width:100%;

}



.botoes-principais{

    flex-direction:column;

}


.botoes-principais a{

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

    padding:15px 30px;

    border-radius:50px;

    background:rgba(255,255,255,.08);

    backdrop-filter:blur(15px);

    border:1px solid rgba(255,255,255,.18);

    color:white;

    transition:.3s;

}


.botoes-principais img{

    width:28px;
    height:28px;

}



.marketplaces{

    display:flex;
    gap:25px;
    margin-top:30px;

}


.marketplaces a{

    display:flex;

    align-items:center;
    justify-content:center;

    width:55px;
    height:55px;

    background:rgba(255,255,255,.08);

    backdrop-filter:blur(15px);

    border-radius:15px;

    border:1px solid rgba(255,255,255,.15);

}


.marketplaces img{

    width:32px;
    height:32px;

}


.marketplaces a:hover{

    transform:translateY(-5px);

    box-shadow:0 0 20px rgba(255,106,0,.5);

}


}

/* =========================
   BOTÕES COMPRA PRODUTO
========================= */


.botoes-compra{

    display:flex;
    gap:20px;
    margin-top:35px;

}


.icone-compra{

    width:65px;
    height:65px;

    display:flex;
    align-items:center;
    justify-content:center;

    border-radius:50%;

    font-size:28px;

    text-decoration:none;

    background:rgba(255,255,255,0.08);

    backdrop-filter:blur(12px);

    -webkit-backdrop-filter:blur(12px);

    border:1px solid rgba(255,255,255,0.18);

    box-shadow:
    0 8px 30px rgba(0,0,0,.25);

    animation: flutuarBotao 3s ease-in-out infinite;

    transition:.35s ease;

}



/* movimento suave */

@keyframes flutuarBotao{


    0%{

        transform:translateY(0px);

    }


    50%{

        transform:translateY(-8px);

    }


    100%{

        transform:translateY(0px);

    }


}



.icone-compra:hover{

    transform:scale(1.15);

    background:rgba(255,255,255,0.18);

}



/* cores quando passa o mouse */


.whatsapp:hover{

    box-shadow:
    0 0 25px #25D366;

}


.mercado:hover{

    box-shadow:
    0 0 25px #ffe600;

}


.shopee:hover{

    box-shadow:
    0 0 25px #ee4d2d;

}


.amazon:hover{

    box-shadow:
    0 0 25px #ff9900;

}


.instagram:hover{

    box-shadow:
    0 0 25px #e1306c;

}

#produto{

    padding:160px 8% 80px;

}



.produto-container{

    max-width:1100px;

    margin:auto;

    display:flex;

    flex-direction:column;

    align-items:center;

    text-align:center;

}



.produto-imagem img{

    width:min(600px,90vw);

    aspect-ratio:1/1;

    object-fit:contain;

    border-radius:20px;

    padding:35px;

    background:#1b1b1b;

    border:2px solid transparent;

    transition:.35s;

}


.produto-imagem img:hover{

    border-color:#ff6a00;

    box-shadow:
    0 0 25px rgba(255,106,0,.35);

    transform:translateY(-5px);

}



.produto-info{

    max-width:700px;

    margin-top:45px;

}



.produto-info h1{

    font-size:45px;

}



.preco{

    font-size:32px;

}



#descricaoProduto{

    font-size:18px;

    line-height:1.6;

    opacity:.8;

}



.botoes-principais{

    display:flex;

    justify-content:center;

    gap:20px;

    flex-wrap:wrap;

    margin-top:35px;

}



/* BOTÕES GRANDES - WHATSAPP E INSTAGRAM */

.botoes-principais a{

    display:flex;
    align-items:center;
    justify-content:center;
    gap:12px;

    padding:15px 30px;

    border-radius:50px;

    background:rgba(255,255,255,.08);

    backdrop-filter:blur(15px);

    border:1px solid rgba(255,255,255,.18);

    color:white;

}


.botoes-principais img{

    width:30px;
    height:30px;

    object-fit:contain;

}



.marketplaces{

    display:flex;

    justify-content:center;

    gap:20px;

    margin-top:35px;

}


.marketplaces a{

    width:60px;

    height:60px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    background:rgba(255,255,255,.08);

    backdrop-filter:blur(15px);

    font-size:25px;

}
#produto h1,
#produto h2,
#produto h3{

    color:white;

    text-shadow:
    0 0 8px rgba(255,106,0,.6),
    0 0 15px rgba(255,106,0,.35);

}


#produto p{

    color:#eee;

    text-shadow:
    0 0 6px rgba(255,106,0,.25);

}


#produto .preco{

    color:#ff6a00;

    font-weight:700;

    text-shadow:
    0 0 10px rgba(255,106,0,.8),
    0 0 20px rgba(255,106,0,.4);

}

/* =================================
   AJUSTE RESPONSIVO GERAL
================================= */

html,body{
    width:100%;
    overflow-x:hidden;
}


img{
    max-width:100%;
    height:auto;
}


section,
header,
footer{
    width:100%;
}


#hero,
#categorias,
#produtos,
#como-funciona,
#personalizados,
#galeria,
#produto,
footer{

    padding-left:clamp(20px,5vw,120px);
    padding-right:clamp(20px,5vw,120px);

}

/* ===========================
   SOBRE - APRESENTAÇÃO
=========================== */


#sobre{

    min-height:100vh;

    padding-top:160px;

    background:
    linear-gradient(
        rgba(10,10,10,.65),
        rgba(10,10,10,.65)
    ),
    linear-gradient(rgba(255,106,0,.12) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,106,0,.12) 1px, transparent 1px);

    background-size:auto,60px 60px,60px 60px;

}



.sobre-trabalho{

    max-width:1000px;

}



.sobre-trabalho span{

    color:#ff6a00;

    font-weight:700;

    letter-spacing:3px;

    font-size:18px;

}



.sobre-trabalho h1{

    font-size:clamp(40px,5vw,64px);

    margin:15px 0 40px;

    text-align:left;

}



.sobre-trabalho h2{

    text-align:left;

    color:#ff6a00;

    font-size:clamp(26px,3vw,35px);

    margin-top:45px;

    margin-bottom:15px;

}



.sobre-trabalho p{

    color:#ddd;

    font-size:clamp(16px,1.5vw,20px);

    line-height:1.8;

    max-width:850px;

}



.sobre-imagens{

    margin-top:50px;

    min-height:250px;

}



@media(max-width:768px){


    #sobre{

        padding-top:120px;

        padding-left:25px;

        padding-right:25px;

    }


    .sobre-trabalho{

        max-width:100%;

    }


    .sobre-trabalho span{

        font-size:15px;

    }


    .sobre-trabalho h1{

        font-size:40px;

    }


    .sobre-trabalho h2{

        margin-top:35px;

    }


    .sobre-trabalho p{

        font-size:17px;

    }

}

#orcamento{

    padding-top:180px;

}

/* ===========================
   CONTATO - ÍCONES VIDRO
=========================== */

.contato-icones{

    display:flex;

    justify-content:center;

    gap:35px;

    margin-top:40px;

}


.contato-icones a{

    width:100px;

    height:100px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;


    background:rgba(255,255,255,.08);

    backdrop-filter:blur(18px);

    -webkit-backdrop-filter:blur(18px);


    border:1px solid rgba(255,255,255,.2);


    box-shadow:
    0 10px 30px rgba(0,0,0,.35);


    transition:.35s ease;

}


.contato-icones img{

    width:45px;

    height:45px;

    object-fit:contain;

}


.contato-icones a:hover{

    transform:translateY(-8px) scale(1.08);

    box-shadow:
    0 0 30px rgba(255,106,0,.45);

}


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

.email-contato{

    margin-top:35px;

    display:flex;

    justify-content:center;

    align-items:center;

}


.email-contato a{

    color:#ff6a00;

    font-size:20px;

    text-decoration:none;

    transition:.3s;

    text-shadow:
    0 0 10px rgba(255,106,0,.4);

}


.email-contato a:hover{

    transform:translateY(-3px);

    text-shadow:
    0 0 20px rgba(255,106,0,.9);

}
/* ===========================
   LOGO FOOTER
=========================== */

.footer-logo{

    width:220px;

    height:auto;

    margin-bottom:20px;

    filter:drop-shadow(0 0 12px rgba(255,106,0,.25));

}

/* HEADER NORMAL - INÍCIO DA HOME */
header{
    position: fixed;
    top:0;
    left:0;
    width:100%;
    height:125px;

    display:flex;
    align-items:center;

    padding:0 50px;

    background:transparent;
    backdrop-filter:none;

    border-bottom:none;

    transition:.35s ease;

    z-index:9999;
}


/* HEADER APÓS SCROLL */
header.scrolled{

    background:rgba(15,15,15,.85);

    backdrop-filter:blur(12px);

    border-bottom:1px solid rgba(255,106,0,.5);

}


/* LINHA LARANJA */
header.scrolled::after{

    content:"";

    position:absolute;

    left:0;
    bottom:0;

    width:100%;
    height:2px;

    background:linear-gradient(
        90deg,
        transparent,
        #ff6a00,
        transparent
    );

    box-shadow:0 0 12px #ff6a00;

}

@media(max-width:768px){

    #lista-produtos{

        display:flex;

        flex-direction:column;

        gap:35px;

        overflow:hidden;

    }


    .carrossel-produtos-mobile{

        display:flex;

        flex-direction:row;

        gap:20px;

        overflow-x:auto;

        width:100%;

        scroll-behavior:smooth;

    }


    .carrossel-produtos-mobile::-webkit-scrollbar{

        display:none;

    }


    .carrossel-produtos-mobile .produto-card{

        flex:0 0 160px;

    }

}

/* =================================
   CATÁLOGO MOBILE PREMIUM
================================= */

@media(max-width:768px){


    #lista-produtos{

        gap:45px;

        padding:10px 0 40px;

    }


    .carrossel-produtos-mobile{

        gap:18px;

        padding:5px 10px 15px;

        scroll-snap-type:x mandatory;

        scrollbar-width:none;

    }


    .carrossel-produtos-mobile::-webkit-scrollbar{

        display:none;

    }



    .carrossel-produtos-mobile .produto-card{

        flex:0 0 82vw;

        background:
        linear-gradient(
            145deg,
            #202020,
            #111
        );

        border-radius:22px;

        border:1px solid rgba(255,106,0,.25);

        overflow:hidden;

        scroll-snap-align:center;

        box-shadow:
        0 15px 35px rgba(0,0,0,.45);

    }



    .carrossel-produtos-mobile .produto-card:hover{

        transform:none;

    }



    .carrossel-produtos-mobile .produto-img{

        height:320px;

        background:#171717;

    }



    .carrossel-produtos-mobile .produto-img img{

        padding:25px;

        object-fit:contain;

    }



    .carrossel-produtos-mobile .btn-card{

        display:block;

        margin:18px auto 25px;

        width:80%;

        border-radius:50px;

        text-align:center;

        font-size:17px;

        box-shadow:
        0 0 20px rgba(255,106,0,.35);

    }


}

/* ===========================
   AJUSTE ESPAÇAMENTO CATÁLOGO
=========================== */

#catalogo{
    padding-top:130px;
    padding-bottom:20px;
}


#catalogo h1{

    line-height:1.15;

    margin-bottom:20px;

}


.catalogo-area{

    padding-top:20px;

}


@media(max-width:768px){

    #catalogo{

        padding-top:125px;
        padding-bottom:15px;

    }


    #catalogo h1{

        line-height:1.05;

        margin-bottom:15px;

    }


    .catalogo-area{

        padding-top:15px;

    }

}

/* ===========================
   HEADER FINAL - CONTROLE
=========================== */

header{

    position:fixed;
    top:0;
    left:0;

    width:100%;
    height:125px;

    display:flex;
    align-items:center;

    padding:0 50px;

    background:transparent;

    backdrop-filter:none;

    border-bottom:none;

    transition:.35s ease;

    z-index:9999;

}


header.scrolled{

    background:rgba(15,15,15,.88);

    backdrop-filter:blur(15px);

    border-bottom:1px solid rgba(255,106,0,.5);

}


/* ===========================
   BOTÃO ORÇAMENTO HEADER
=========================== */

header .btn{

    background:rgba(255,106,0,.25);

    border:1px solid rgba(255,106,0,.7);

    backdrop-filter:blur(15px);

    -webkit-backdrop-filter:blur(15px);

    border-radius:12px;

    padding:12px 22px;

    font-family:'Poppins',sans-serif;

    font-size:14px;

    font-weight:600;

    letter-spacing:.3px;

    color:#fff;

    white-space:nowrap;

    display:flex;

    align-items:center;

    justify-content:center;

    transition:.3s ease;

}


header .btn:hover{

    background:rgba(255,106,0,.45);

    box-shadow:0 0 25px rgba(255,106,0,.5);

    transform:translateY(-2px);

}



/* ===========================
   BOTÃO MOBILE
=========================== */

@media(max-width:768px){

    header .btn{

        padding:8px 13px;

        font-size:12px;

        border-radius:10px;

        letter-spacing:.2px;

    }

}
@media(max-width:768px){

    nav.active{

        display:flex !important;

        flex-direction:column;

        gap:14px;


        position:absolute !important;

        top:80px;


        /* joga os balões para a direita */
        right:0;

        left:auto;


        width:220px;


        padding:0;


        background:transparent !important;

        border:none !important;

        box-shadow:none !important;

        backdrop-filter:none !important;

    }



    nav.active a{

        width:220px;


        padding:15px 20px;


        text-align:center;


        color:white;


        font-size:17px;

        font-weight:600;


        background:

        linear-gradient(
            145deg,
            rgba(255,255,255,.08),
            rgba(0,0,0,.75)
        );


        backdrop-filter:blur(15px);

        -webkit-backdrop-filter:blur(15px);



        border-radius:20px;



        border:1px solid rgba(255,255,255,.14);



        box-shadow:

        inset 0 1px 8px rgba(255,255,255,.12),

        inset 0 -12px 25px rgba(0,0,0,.65),

        0 15px 35px rgba(0,0,0,.55);



        position:relative;


        overflow:hidden;


        transition:.35s ease;

    }



    /* brilho leve só na ponta */

    nav.active a::before{

        content:"";

        position:absolute;

        top:0;

        left:15%;


        width:70%;

        height:2px;


        background:

        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.45),
            transparent
        );


        filter:blur(1px);

    }



    nav.active a::after{

        content:"";

        position:absolute;


        right:10px;

        bottom:8px;


        width:35px;

        height:12px;


        background:

        radial-gradient(
            ellipse,
            rgba(255,255,255,.18),
            transparent 70%
        );


        filter:blur(4px);

    }



    nav.active a:hover{

        transform:translateY(-3px);


        background:

        linear-gradient(
            145deg,
            rgba(255,255,255,.12),
            rgba(0,0,0,.8)
        );

    }

}