:root{
      --bg1: #0f0c29;
      --bg2: #302b63;
      --accent: #8a2be2; /* purple */
      --neon1: #00f5ff;
      --neon2: #ff00c8;
      --glass: rgba(255,255,255,0.04);
      --card-border: rgba(255,255,255,0.08);
      --text: #e9f0ff;
      --muted: #cbd5ff88;
      --shadow: 0 8px 30px rgba(0,0,0,0.6);
      --max-width: 900px;
    }
    /*
        }

    [data-theme="light"]{
      --bg1: #f6f7fb; --bg2: #eef2ff; --text:#0b1220; --glass: rgba(255,255,255,0.7); --card-border: rgba(0,0,0,0.06);
    }

    *{box-sizing:border-box}
    /*html,body{height:100%}* /

    :root{
      --bg:#0f1724; /* deep 
        * /
      --card:#0b1220;
      --glass: rgba(255,255,255,0.04);
      --accent:#ff8a00; /* orange 
        * /
      --muted:#9aa4b2;
      --success:#22c55e;
      --danger:#ef4444;
      color-scheme: dark;
    }
    *{box-sizing:border-box}
    html,body{height:100%}
        */
    body{
      margin:0;
      font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial;
      background: var(--bg);
          /*linear-gradient(180deg, white 0%, white 100%);*/
      border:3px solid black;
      color:#e6eef6;
      -webkit-font-smoothing:antialiased;
      -moz-osx-font-smoothing:grayscale;
      padding:24px;
    }
    header{box-shadow:2 2 2;display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}
    header h1{font-size:20px;margin:0}
    header .brand{display:flex;gap:12px;align-items:center}
    header .logo{
      width:46px;height:46px;border-radius:10px;background:linear-gradient(135deg,var(--accent),#ffc36b);
      display:flex;align-items:center;justify-content:center;color:#071022;font-weight:700;font-size:18px
    }

    nav{margin-bottom:18px}
    nav ul{display:flex;gap:12px;padding:0;margin:0;list-style:none}
    nav a{color:var(--muted);text-decoration:none;padding:8px 12px;border-radius:8px}
    nav a:hover{background:var(--glass);color:#fff}

    .layout{display:grid;grid-template-columns:260px 1fr 340px;gap:18px;align-items:start}

    /* ASIDES */
    aside{background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));padding:16px;border-radius:14px;box-shadow:0 6px 18px rgba(2,6,23,0.6)}
    aside h3{margin:0 0 12px 0}

    /* MAIN PRODUCTS */
    main{background:transparent;padding:6px;border-radius:12px}
    .grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px}

    .card{
      background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
      border-radius:12px;padding:12px;display:flex;flex-direction:column;gap:10px;transition:transform .18s ease, box-shadow .18s ease;min-height:300px
    }
    .card:hover{transform:translateY(-6px);box-shadow:0 18px 40px rgba(2,6,23,0.6)}
    .thumb{width:100%;height:160px;border-radius:10px;object-fit:cover;background:linear-gradient(90deg,#0b1220,#07122a);display:block}

    .meta{display:flex;flex-direction:column;gap:6px}
    .meta h4{margin:0;font-size:15px}
    .meta p.desc{margin:0;font-size:13px;color:var(--muted);min-height:36px}
    .price-row{display:flex;align-items:center;justify-content:space-between;gap:8px}
    .price{font-weight:700}
    .controls{display:flex;gap:8px;align-items:center}
    input[type=number]{width:70px;padding:6px;border-radius:8px;border:1px solid rgba(255,255,255,0.04);background:transparent;color:inherit}
    button.btn{padding:8px 12px;border-radius:10px;border:0;background:linear-gradient(90deg,var(--accent),#ffc36b);color:#071022;font-weight:600;cursor:pointer}
    button.btn.ghost{background:transparent;border:1px solid rgba(255,255,255,0.04);color:var(--muted)}

    /* CART */
    #cart{display:flex;flex-direction:column;gap:12px}
    .cart-items{display:flex;flex-direction:column;gap:10px;max-height:420px;overflow:auto;padding-right:6px}
    .cart-item{display:flex;gap:10px;align-items:center;padding:8px;border-radius:8px;background:rgba(255,255,255,0.02)}
    .cart-item img{width:56px;height:56px;border-radius:8px;object-fit:cover}
    .cart-item .ci-meta{flex:1}
    .cart-item .ci-meta h5{margin:0;font-size:14px}
    .cart-item .ci-meta p{margin:4px 0 0 0;color:var(--muted);font-size:13px}

    .total-row{display:flex;justify-content:space-between;align-items:center;font-weight:700;padding-top:6px}
    .actions{display:flex;gap:8px}

    footer{margin-top:18px;text-align:center;color:var(--muted);font-size:13px}

    /* RESPONSIVE */
    @media (max-width:980px){
      .layout{grid-template-columns:1fr;}
      aside#carrito{order:3}
    }