:root{--bg:#07080b;--card:#101017;--line:#2a1733;--purple:#a544ff;--purple2:#6a1ab1;--text:#f7f7fb;--muted:#a7a7b4}
*{box-sizing:border-box}
html,body{max-width:100%;overflow-x:hidden}
body{margin:0;background:var(--bg);color:var(--text);font-family:Arial,Helvetica,sans-serif}
a{text-decoration:none;color:inherit}
img{max-width:100%;height:auto}
.wrap{max-width:1280px;margin:auto;padding:0 22px}

.top{position:sticky;top:0;z-index:50;background:rgba(7,8,11,.94);backdrop-filter:blur(12px);border-bottom:1px solid #24112c}
.head{height:78px;display:flex;align-items:center;justify-content:space-between;gap:20px}
.brand{font-weight:900;font-size:25px;letter-spacing:.5px;white-space:nowrap}
.brand span{color:var(--purple)}
.nav{display:flex;gap:20px;color:#d4d4dc;font-weight:700}
.cart{background:var(--purple);padding:12px 16px;border-radius:12px;font-weight:900;white-space:nowrap}

.hero{padding:24px 0}
.slider{position:relative;overflow:hidden;border-radius:18px;border:1px solid #38114c;background:#0c0710}
.slide{display:none;width:100%}
.slide.active{display:block}

/* DESKTOP: banner largo ocupando toda a área */
.slide img{
    width:100%;
    height:auto;
    display:block;
    aspect-ratio:16/6;
    object-fit:cover;
    object-position:center;
}

.dots{position:absolute;left:50%;bottom:12px;transform:translateX(-50%);display:flex;gap:7px;z-index:5}
.dot{width:9px;height:9px;border-radius:50%;border:0;background:#fff6;padding:0}
.dot.on{background:#fff}

.benefits{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:18px 0 48px}
.benefit{border:1px solid #31153f;background:#0d0b11;padding:18px;border-radius:14px;min-width:0}
.benefit b{display:block;color:#bf6dff;margin-bottom:6px}

.section{padding:28px 0}
.section h2{font-size:34px;margin:0 0 20px}
.products{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.product{background:var(--card);border:1px solid #24112c;border-radius:16px;overflow:hidden;min-width:0}
.product img{width:100%;aspect-ratio:1/1;object-fit:cover;background:#0a0a0d}
.pbody{padding:15px}
.pname{font-weight:900;min-height:40px}
.price{font-size:22px;color:#c375ff;font-weight:900;margin:10px 0}
.btn{display:inline-flex;justify-content:center;align-items:center;width:100%;border:0;border-radius:11px;background:var(--purple);color:#fff;font-weight:900;padding:12px;cursor:pointer}
.info{margin-top:35px;background:linear-gradient(135deg,#120a18,#09090d);border:1px solid #321641;border-radius:18px;padding:28px}
.footer{margin-top:60px;border-top:1px solid #25112f;padding:34px 0;color:#aaa}
.cartbox{max-width:900px;margin:35px auto;background:#0e0e14;border:1px solid #25112f;border-radius:16px;padding:20px}
.cartrow{display:grid;grid-template-columns:80px 1fr 100px 120px;align-items:center;gap:14px;padding:12px 0;border-bottom:1px solid #222}
.cartrow img{width:80px;height:80px;object-fit:cover;border-radius:10px}
.qty{width:70px;background:#0a0a0c;border:1px solid #43205b;color:#fff;border-radius:8px;padding:8px}
.total{font-size:25px;font-weight:900;text-align:right;margin:20px 0}
.wa{background:#1fbf64}
.empty{text-align:center;padding:50px;color:#aaa}

.sectiontop{display:flex;align-items:end;justify-content:space-between;gap:15px}
.sectiontop>a{color:#b6ff3b;font-weight:800}
.catrow{display:grid;grid-template-columns:repeat(4,1fr);gap:13px}
.catcard{min-height:120px;display:flex;flex-direction:column;justify-content:flex-end;background:linear-gradient(145deg,#151b14,#0c0f0c);border:1px solid #293528;border-radius:16px;padding:18px;transition:.2s;min-width:0}
.catcard:hover,.catcard.selected{border-color:#b6ff3b;transform:translateY(-2px)}
.catcard span{font-weight:900;font-size:20px}
.catcard small{color:#aab3a8;margin-top:7px}
.prodimg{position:relative}
.badge{position:absolute;left:10px;top:10px;background:#b6ff3b;color:#071000;padding:6px 8px;border-radius:8px;font-size:10px;font-weight:900}
.stock{color:#8f998f;font-size:12px;margin-top:6px}
.steps{display:flex;gap:10px;flex-wrap:wrap;margin-top:20px}
.steps b{background:#171d16;border:1px solid #2e392c;padding:12px;border-radius:10px;color:#cfff82}
.eyebrow{color:#b6ff3b;font-size:12px;font-weight:900;letter-spacing:1.5px}
.cartnote{color:#9ca59b;font-size:13px;text-align:center}
.btn:disabled{opacity:.45;cursor:not-allowed}

/* TABLET */
@media(max-width:900px){
    .nav{display:none}
    .benefits{grid-template-columns:1fr 1fr}
    .products{grid-template-columns:1fr 1fr}
    .catrow{grid-template-columns:1fr 1fr}
    .section h2{font-size:28px}

    /* Tablet: mostra o banner completo */
    .slide img{
        aspect-ratio:auto;
        width:100%;
        height:auto;
        object-fit:contain;
    }
}

/* CELULAR */
@media(max-width:560px){
    .wrap{padding:0 12px}
    .head{height:66px;gap:10px}
    .brand{font-size:20px}
    .cart{padding:11px 14px;font-size:15px}

    .hero{padding:12px 0 8px}
    .slider{
        width:100%;
        max-width:100%;
        border-radius:12px;
        overflow:hidden;
    }

    /* ESSENCIAL: no celular o banner aparece INTEIRO, sem cortar texto ou preço */
    .slide,
    .slide.active{
        width:100%;
        max-width:100%;
    }
    .slide img{
        width:100%;
        max-width:100%;
        height:auto !important;
        aspect-ratio:auto !important;
        object-fit:contain !important;
        object-position:center !important;
        display:block;
    }

    .dots{
        bottom:6px;
        gap:5px;
    }
    .dot{
        width:7px;
        height:7px;
    }

    .benefits{
        grid-template-columns:1fr 1fr;
        gap:8px;
        margin:14px 0 32px;
    }
    .benefit{
        padding:12px;
        font-size:13px;
        overflow-wrap:anywhere;
    }

    .section{padding:22px 0}
    .section h2{font-size:27px;line-height:1.08}
    .sectiontop{align-items:center}
    .sectiontop>a{font-size:14px;white-space:nowrap}

    .products{grid-template-columns:1fr 1fr;gap:10px}
    .pbody{padding:11px}
    .pname{font-size:14px;min-height:auto}
    .price{font-size:18px}

    .catrow{grid-template-columns:1fr 1fr;gap:10px}
    .catcard{min-height:95px;padding:13px}
    .catcard span{font-size:16px}

    .cartbox{margin:20px 12px;padding:14px}
    .cartrow{
        grid-template-columns:60px minmax(0,1fr) 70px;
        gap:9px;
    }
    .cartrow img{width:60px;height:60px}
    .cartrow .subtotal{display:none}
    .qty{width:64px}
    .total{font-size:22px}

    .info{padding:20px}
}

/* CELULARES MUITO PEQUENOS */
@media(max-width:380px){
    .wrap{padding:0 9px}
    .brand{font-size:18px}
    .cart{padding:10px 11px;font-size:14px}
    .benefits{grid-template-columns:1fr}
    .products{grid-template-columns:1fr 1fr}
    .catrow{grid-template-columns:1fr 1fr}