:root{
    --bg:#050505;
    --card:#111;
    --line:#272727;
    --gold:#f5b400;
    --gold2:#ffd45a;
    --txt:#f7f7f7;
    --muted:#b7b7b7;
    --green:#18c56e;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}

body{
    margin:0;
    background:radial-gradient(circle at 70% 10%,#24211a 0,#070707 45%,#000 100%);
    font-family:Inter,Arial,sans-serif;
    color:var(--txt);
}

a{color:inherit;text-decoration:none}
img{max-width:100%}

/* TOPO */
.top{
    position:sticky;
    top:0;
    z-index:999;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:14px 5%;
    background:rgba(0,0,0,.92);
    backdrop-filter:blur(12px);
    border-bottom:1px solid var(--line);
}

.brand{
    font-size:24px;
    display:flex;
    gap:8px;
    align-items:center;
    white-space:nowrap;
}

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

.mark{
    font-weight:900;
    color:var(--gold);
    font-style:italic;
    font-size:32px;
}

.brand strong{color:var(--gold)}

nav{
    display:flex;
    gap:28px;
    align-items:center;
}

nav a{
    font-size:14px;
    color:#eee;
}

nav a:hover{color:var(--gold)}

.icons{
    display:flex;
    gap:16px;
    align-items:center;
}

.menu-mobile-btn{
    display:none;
    background:transparent;
    color:#fff;
    border:1px solid #333;
    border-radius:8px;
    font-size:28px;
    padding:5px 12px;
    cursor:pointer;
}

/* CARRINHO */
.cart-dot{
    display:flex !important;
    align-items:center !important;
    gap:5px !important;
    color:#fff !important;
    text-decoration:none !important;
    position:static !important;
}

.cart-dot::before,
.cart-dot::after,
.cart-dot:before,
.cart-dot:after{
    display:none !important;
    content:none !important;
}

.cart-dot span,
#cartHeaderCount{
    background:transparent !important;
    color:#fff !important;
    position:static !important;
    width:auto !important;
    height:auto !important;
    min-width:auto !important;
    border-radius:0 !important;
    padding:0 !important;
    margin:0 !important;
    font-size:14px !important;
    display:inline !important;
    font-weight:700 !important;
}

/* BANNER */
.hero-carousel{
    position:relative;
    width:100%;
    height:560px;
    overflow:hidden;
    border-bottom:1px solid var(--line);
    background:#050505;
}

.hero-slide{
    display:none !important;
    grid-template-columns:1fr 1fr;
    align-items:center;
    gap:40px;
    padding:60px 5%;
    height:560px;
}

.hero-slide.active{display:grid !important}

.hero-text h1{
    font-size:52px;
    line-height:1.1;
    color:#fff;
    margin:0 0 20px;
}

.hero-text p{
    color:#ddd;
    font-size:20px;
    margin-bottom:25px;
    line-height:1.5;
}

.gold{color:var(--gold)}

.btns{
    display:flex;
    gap:16px;
    margin-top:28px;
    flex-wrap:wrap;
}

.btn{
    background:var(--gold);
    color:#000;
    border:0;
    border-radius:8px;
    padding:15px 30px;
    font-weight:800;
    display:inline-block;
    cursor:pointer;
    text-align:center;
}

.btn:hover{background:var(--gold2)}

.btn.out{
    background:transparent;
    color:#fff;
    border:1px solid var(--gold);
}

.hero-image{
    width:100%;
    height:430px;
    border-radius:24px;
    overflow:hidden;
    background:#111;
    border:1px solid #333;
    box-shadow:0 0 70px rgba(245,180,0,.12);
    display:flex;
    align-items:center;
    justify-content:center;
}

.hero-image img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}

.banner-placeholder{
    width:100%;
    height:100%;
    display:flex;
    align-items:center;
    justify-content:center;
    color:var(--gold);
    font-size:42px;
    font-weight:900;
    text-align:center;
}

.hero-arrow{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    width:44px;
    height:44px;
    border-radius:50%;
    border:1px solid rgba(255,255,255,.25);
    background:rgba(0,0,0,.55);
    color:#fff;
    font-size:34px;
    cursor:pointer;
    z-index:10;
}

.hero-arrow:hover{
    background:var(--gold);
    color:#000;
}

.hero-prev{left:22px}
.hero-next{right:22px}

.hero-dots{
    position:absolute;
    left:50%;
    bottom:18px;
    transform:translateX(-50%);
    display:flex;
    gap:8px;
    z-index:10;
}

.hero-dots button{
    width:12px;
    height:12px;
    border-radius:50%;
    border:0;
    background:#666;
    cursor:pointer;
}

.hero-dots button.active{background:var(--gold)}

/* BENEFÍCIOS */
.benefits{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:16px;
    padding:28px 5%;
    border-bottom:1px solid var(--line);
}

.benefit{
    display:flex;
    gap:14px;
    align-items:center;
    background:#0c0c0c;
    border:1px solid var(--line);
    padding:18px;
    border-radius:14px;
}

.benefit b{display:block}

.benefit span{
    color:var(--muted);
    font-size:13px;
}

/* SEÇÕES */
.section{padding:42px 5%}

.title-row{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:24px;
    gap:20px;
}

.title-row h1,
.title-row h2{margin:0}

/* PESQUISA */
.search-box,
.search-box-big{
    display:flex;
    gap:12px;
    margin-bottom:30px;
}

.search-box input,
.search-box-big input{
    flex:1;
    width:100%;
    height:75px;
    font-size:24px;
    padding:0 25px;
    border-radius:14px;
    background:#111;
    color:#fff;
    border:1px solid #333;
}

/* CATEGORIAS */
.catalog-layout{
    display:grid;
    grid-template-columns:250px 1fr;
    gap:28px;
    align-items:start;
}

.category-sidebar{
    background:#111;
    border:1px solid #2a2a2a;
    border-radius:14px;
    padding:20px;
    position:sticky;
    top:100px;
    max-height:calc(100vh - 125px);
    overflow-y:auto;
}

.category-sidebar h3{
    color:#fff;
    margin:0 0 14px;
}

.cat-link{
    display:block;
    color:#ddd;
    text-decoration:none;
    padding:12px 10px;
    border-bottom:1px solid #222;
    border-radius:8px;
}

.sub-cat-link{
    font-size:13px;
    padding-left:22px;
    color:#bbb;
}

.cat-link:hover,
.cat-link.ativa{
    color:#000;
    background:linear-gradient(90deg,var(--gold),var(--gold2));
    font-weight:900;
}

.cat-title{
    font-size:18px;
    font-weight:800;
    margin-bottom:16px;
}

.products-area{min-width:0}

/* PRODUTOS */
.grid,
.products-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:22px;
}

.card{
    background:#181818;
    border:1px solid #2a2a2a;
    border-radius:14px;
    overflow:hidden;
}

.pic{
    height:230px;
    background:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
}

.pic img{
    max-width:90%;
    max-height:200px;
    object-fit:contain;
    display:block;
}

.pic span{
    color:var(--gold);
    font-size:56px;
    font-weight:900;
}

.card-body{padding:18px}

.card-body h3{
    font-size:18px;
    line-height:1.25;
    color:#fff;
    min-height:44px;
    margin:0 0 8px;
}

.muted{
    color:#aaa;
    font-size:14px;
    line-height:1.35;
}

.card .muted{min-height:38px}

.price{
    color:#ffc400;
    font-size:22px;
    font-weight:900;
    margin:12px 0;
}

.card .btn{
    width:100%;
    text-align:center;
    margin-top:12px;
}

/* TOP 10 */
.top-carousel-wrap{position:relative}

.top-carousel{
    display:flex;
    gap:18px;
    overflow-x:auto;
    scroll-behavior:smooth;
    padding:10px 4px 20px;
}

.top-carousel::-webkit-scrollbar{height:8px}

.top-carousel::-webkit-scrollbar-thumb{
    background:var(--gold);
    border-radius:20px;
}

.top-card{
    min-width:280px;
    max-width:280px;
    background:#111;
    border:1px solid #2a2a2a;
    border-radius:16px;
    overflow:hidden;
}

.top-pic{
    height:180px;
    background:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
}

.top-pic img{
    width:90%;
    height:90%;
    object-fit:contain;
}

.top-pic span{
    color:var(--gold);
    font-size:50px;
    font-weight:900;
}

.top-info{padding:16px}

.top-info h3{
    font-size:16px;
    min-height:44px;
    margin:0 0 8px;
}

.top-info p{
    color:#aaa;
    margin:0 0 8px;
}

.top-info strong{
    color:var(--gold);
    display:block;
    font-size:20px;
    margin-bottom:12px;
}

.top-arrow{
    position:absolute;
    top:45%;
    transform:translateY(-50%);
    z-index:5;
    width:42px;
    height:42px;
    border-radius:50%;
    border:0;
    background:var(--gold);
    color:#111;
    font-size:30px;
    font-weight:900;
    cursor:pointer;
}

.top-prev{left:-18px}
.top-next{right:-18px}

/* CHAMADAS */
.upload-callout{
    margin:34px 5%;
    background:#0b0b0b;
    border:1px solid var(--line);
    border-radius:18px;
    padding:30px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
}

.upload-callout h2{margin:0 0 8px}

.upload-callout p{
    color:var(--muted);
    margin:0;
}

.yellow-banner{
    margin:28px 5%;
    background:linear-gradient(90deg,var(--gold),#ffe08c);
    color:#111;
    border-radius:12px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:38px;
    gap:20px;
}

.yellow-banner h2{
    font-size:40px;
    margin:0;
}

.box-logo{
    font-size:68px;
    font-weight:900;
    color:var(--gold);
    text-align:center;
}

/* PRODUTO DETALHE */
.product-page{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:36px;
    padding:36px 5%;
}

.gallery{
    background:#111;
    border:1px solid var(--line);
    border-radius:16px;
    padding:18px;
}

.main-img{
    height:480px;
    background:#0b0b0b;
    border-radius:12px;
    display:flex;
    align-items:center;
    justify-content:center;
    color:var(--gold);
    font-size:80px;
}

.main-img img{
    width:100%;
    height:100%;
    object-fit:contain;
    display:block;
}

.thumbs{
    display:flex;
    gap:12px;
    margin-top:14px;
    flex-wrap:wrap;
}

.thumb,
.thumb-btn{
    width:80px;
    height:80px;
    border:1px solid #333;
    border-radius:8px;
    display:grid;
    place-items:center;
    color:var(--gold);
    background:#fff;
    padding:5px;
    cursor:pointer;
}

.thumb-btn img{
    width:100%;
    height:100%;
    object-fit:contain;
}

.details{
    border:1px solid var(--line);
    border-radius:16px;
    padding:26px;
    background:#0b0b0b;
}

.qty{
    display:flex;
    align-items:center;
    gap:8px;
    margin-top:8px;
}

.qty input{
    width:60px;
    text-align:center;
    padding:12px;
    background:#111;
    color:#fff;
    border:1px solid #333;
    border-radius:8px;
}

/* FORMULÁRIOS */
.cart-table,
.checkout{
    margin:30px 5%;
    background:#0b0b0b;
    border:1px solid var(--line);
    border-radius:16px;
    padding:26px;
}

.row{
    display:grid;
    grid-template-columns:2fr 1fr 1fr 1fr;
    gap:16px;
    align-items:center;
    border-bottom:1px solid #222;
    padding:16px 0;
}

.total{
    text-align:right;
    font-size:28px;
    font-weight:900;
    margin:22px;
}

.checkout-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:30px;
}

.form input,
.form select,
.form textarea{
    width:100%;
    padding:14px;
    margin:8px 0;
    background:#111;
    border:1px solid #333;
    color:#fff;
    border-radius:8px;
}

.notice{
    background:#102015;
    border:1px solid #2f7d45;
    color:#b9ffd0;
    padding:12px 14px;
    border-radius:14px;
    margin-bottom:16px;
}

/* DOWNLOADS */
.downloads-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:22px;
    margin-top:30px;
}

.download-card{
    background:#111;
    border:1px solid #2a2a2a;
    border-radius:16px;
    padding:22px;
    display:flex;
    gap:18px;
    align-items:flex-start;
}

.download-icon{
    width:70px;
    height:70px;
    border-radius:14px;
    background:linear-gradient(90deg,var(--gold),var(--gold2));
    color:#000;
    font-weight:900;
    display:flex;
    align-items:center;
    justify-content:center;
}

/* PÁGINAS */
.texto-pagina{
    font-size:18px;
    line-height:1.9;
    text-align:justify;
    max-width:1200px;
    margin:auto;
    color:var(--muted);
}

.sobre-img{
    width:100%;
    max-width:1200px;
    display:block;
    margin:0 auto 30px;
    border-radius:20px;
}

/* RODAPÉ */
.footer{
    display:grid !important;
    grid-template-columns:1.5fr 1fr 1fr 1fr !important;
    gap:40px !important;
    padding:60px 5% !important;
    border-top:1px solid var(--line);
    background:#050505;
    align-items:flex-start;
}

.footer > div{min-width:0}

.footer-brand{
    display:flex !important;
    align-items:center;
    margin-bottom:20px !important;
}

.footer .logo-img{
    max-height:70px;
    width:auto;
}

.footer h4{
    color:#fff;
    margin:0 0 15px;
    font-size:20px;
}

.footer a{
    display:block;
    color:#cfcfcf;
    margin:10px 0;
}

.footer a:hover{color:var(--gold)}

.footer p{
    color:#cfcfcf;
    line-height:1.7;
}

.social-icons{
    display:flex !important;
    gap:12px;
    margin-top:20px;
    flex-wrap:wrap;
}

.social-icons a{
    width:46px;
    height:46px;
    display:flex !important;
    align-items:center;
    justify-content:center;
    background:#111;
    border:1px solid #333;
    border-radius:50%;
    transition:.3s;
    margin:0;
    padding:0;
}

.social-icons a:hover{
    transform:translateY(-4px);
    border-color:var(--gold);
}

.social-icons img{
    width:22px;
    height:22px;
    object-fit:contain;
}

.copy{
    text-align:center;
    color:#888;
    padding:20px;
    border-top:1px solid #111;
    background:#050505;
}

/* BOTÃO TOPO */
#btnTopo{
    position:fixed;
    right:25px;
    bottom:25px;
    width:60px;
    height:60px;
    border:none;
    border-radius:50%;
    background:var(--gold);
    color:#111;
    font-size:28px;
    font-weight:bold;
    cursor:pointer;
    z-index:9999;
    box-shadow:0 0 20px rgba(0,0,0,.4);
}

/* ADMIN */
.admin-layout{
    display:grid;
    grid-template-columns:250px 1fr;
    min-height:100vh;
}

.side{
    background:#050505;
    border-right:1px solid var(--line);
    padding:28px;
}

.side a{
    display:block;
    padding:14px;
    color:#ddd;
    border-radius:8px;
}

.side a:hover{background:#151515}

.dash{padding:30px}

.stats{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:18px;
}

.stat{
    background:#111;
    border:1px solid var(--line);
    border-radius:14px;
    padding:24px;
}

.stat strong{font-size:30px}

.login{
    max-width:420px;
    margin:12vh auto;
    background:#0b0b0b;
    border:1px solid var(--line);
    border-radius:16px;
    padding:32px;
}

.login input{
    width:100%;
    padding:15px;
    margin:10px 0;
    background:#111;
    color:white;
    border:1px solid #333;
    border-radius:8px;
}

/* RESPONSIVO */
@media(max-width:1100px){
    .products-grid,
    .grid{
        grid-template-columns:repeat(3,1fr);
    }
}

@media(max-width:900px){
    .top{
        gap:12px;
        flex-wrap:nowrap;
        position:sticky;
    }

    .brand{
        flex:1;
    }

    .logo-img{
        max-height:48px;
    }

    .menu-mobile-btn{
        display:block;
        order:3;
    }

    nav{
        display:none;
        position:absolute;
        top:78px;
        right:5%;
        width:240px;
        flex-direction:column;
        gap:0;
        background:#101010;
        border:1px solid #333;
        border-radius:14px;
        padding:12px;
        box-shadow:0 20px 50px rgba(0,0,0,.5);
        z-index:9999;
    }

    nav.show-mobile{
        display:flex;
    }

    nav a{
        padding:13px;
        border-bottom:1px solid #222;
    }

    .icons{
        display:none;
    }

    .hero-carousel{
        height:420px;
    }

    .hero-slide{
        grid-template-columns:1fr !important;
        height:420px;
        padding:25px 5%;
        position:relative;
    }

    .hero-text{
        position:absolute;
        left:5%;
        bottom:35px;
        width:90%;
        z-index:3;
        background:linear-gradient(90deg,rgba(0,0,0,.75),rgba(0,0,0,.20));
        padding:18px;
        border-radius:16px;
    }

    .hero-text h1{
        font-size:30px;
    }

    .hero-text p{
        font-size:15px;
        margin-bottom:12px;
    }

    .hero-image{
        position:absolute;
        inset:0;
        width:100%;
        height:100%;
        border-radius:0;
        border:0;
    }

    .hero-image img{
        object-fit:cover;
    }

    .hero-image:after{
        content:"";
        position:absolute;
        inset:0;
        background:linear-gradient(0deg,rgba(0,0,0,.75),rgba(0,0,0,.15));
    }

    .hero-arrow{
        display:none;
    }

    .benefits{
        grid-template-columns:1fr 1fr;
    }

    .mobile-catalog-layout{
        grid-template-columns:140px 1fr !important;
        gap:12px;
        align-items:start;
    }

    .mobile-category-sidebar{
        position:sticky;
        top:82px;
        max-height:calc(100vh - 95px);
        overflow-y:auto;
        padding:10px;
        border-radius:12px;
    }

    .mobile-category-sidebar h3{
        font-size:15px;
    }

    .mobile-category-sidebar .cat-link{
        font-size:12px;
        padding:9px 7px;
    }

    .products-grid,
    .grid{
        grid-template-columns:repeat(2,1fr);
        gap:12px;
    }

    .pic{
        height:160px;
    }

    .pic img{
        max-height:145px;
    }

    .card-body{
        padding:12px;
    }

    .card-body h3{
        font-size:14px;
        min-height:auto;
    }

    .price{
        font-size:18px;
    }

    .product-page,
    .checkout-grid{
        grid-template-columns:1fr;
    }

    .downloads-grid{
        grid-template-columns:1fr;
    }

    .footer{
        grid-template-columns:1fr 1fr !important;
    }

    .stats{
        grid-template-columns:1fr 1fr;
    }

    .admin-layout{
        grid-template-columns:1fr;
    }

    .side{
        display:flex;
        overflow:auto;
    }

    .yellow-banner,
    .upload-callout{
        display:block;
    }
}

@media(max-width:560px){
    .section{
        padding:28px 3%;
    }

    .benefits,
    .stats,
    .downloads-grid{
        grid-template-columns:1fr;
    }

    .mobile-catalog-layout{
        grid-template-columns:120px 1fr !important;
        gap:8px;
    }

    .mobile-category-sidebar{
        padding:8px;
    }

    .products-grid,
    .grid{
        grid-template-columns:1fr;
    }

    .footer{
        grid-template-columns:1fr !important;
    }

    .row{
        grid-template-columns:1fr !important;
    }

    .btns,
    .search-box,
    .search-box-big{
        flex-direction:column;
    }

    .search-box input,
    .search-box-big input{
        height:58px;
        font-size:18px;
    }

    .hero-carousel{
        height:390px;
    }

    .hero-slide{
        height:390px;
    }

    .hero-text h1{
        font-size:25px;
    }

    .btn{
        padding:13px 18px;
    }

    .yellow-banner h2{
        font-size:28px;
    }

    #btnTopo{
        width:52px;
        height:52px;
        font-size:24px;
    }
}