:root {
    /*#bb86fc;*/
    --contornos: white;
    --contornos2: rgb(110, 110, 110);
    --ogcolor: #b9b9b9;
    --citems: #0f0f0f;
    --citems2: #0f0f0f67;
    --citems3: rgb(18, 18, 18);
    --primary: #bb86fc;
    --secondary: #7300ff;
    --s: 45px;
    --c1: #222222;
    --c2: #040404;
    /*--s: 452px;
    --c1: #ff3131;*/
}

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

html,
body {
    height: 100%;
}

body {
    font-family: 'Montserrat', sans-serif;
    line-height: 1.6;
    color: #e0e0e0;
    background-color: #121212;
    display: flex;
    flex-direction: column;

    --_g:
        var(--c2) 6% 14%, var(--c1) 16% 24%, var(--c2) 26% 34%, var(--c1) 36% 44%,
        var(--c2) 46% 54%, var(--c1) 56% 64%, var(--c2) 66% 74%, var(--c1) 76% 84%, var(--c2) 86% 94%;
    background:
        radial-gradient(100% 100% at 100% 0, var(--c1) 4%, var(--_g), #0008 96%, #0000),
        radial-gradient(100% 100% at 0 100%, #0000, #0008 4%, var(--_g), var(--c1) 96%) var(--c1);
    background-size: var(--s) var(--s);

    /*html {
--s: 60px;
--c1: #3d3d3d;
--c2: #000000;
--c3: #121212;
--c4: #000819;

--_g: 
#0000 25%,#0008 47%,var(--c1)  53% 147%,var(--c2) 153% 247%,
var(--c1) 253% 347%,var(--c2) 353% 447%,var(--c1) 453% 547%,#0008 553%,#0000 575%;
--_s: calc(25%/3) calc(25%/4) at 50%; 
background:
radial-gradient(var(--_s) 100%,var(--_g)),
radial-gradient(var(--_s) 100%,var(--_g)) calc(var(--s)/2) calc(3*var(--s)/4),
radial-gradient(var(--_s) 0   ,var(--_g)) calc(var(--s)/2) 0,
radial-gradient(var(--_s) 0   ,var(--_g)) 0                calc(3*var(--s)/4),
repeating-linear-gradient(90deg,var(--c3) calc(25%/-6) calc(25%/6),var(--c4) 0 calc(25%/2));
background-size: var(--s) calc(3*var(--s)/2)
}*/
}

header {
    background-color: #1a1a1a;
    color: #ffffff;
    padding: 1rem;
    text-align: center;
}

nav {
    background-color: #212121;
    padding: 0.5rem;
    border-bottom: 1px solid var(--contornos2);
}

nav ul {
    list-style-type: none;
    display: flex;
    justify-content: center;
}

nav ul li {
    margin: 0 1rem;
}

nav ul li a {
    color: #ffffff;
    text-decoration: none;
    font-weight: 300;
}

nav ul li a:hover {
    color: var(--primary);
}

main {
    flex: 1 0 auto;
    max-width: 1200px;
    margin: 2rem auto;
    padding: 0 1rem;
}

.product-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    justify-content: center;
}

.product-card {
    cursor: default;
    background-color: var(--citems3);
    border-radius: 5px;
    border: 1px solid var(--contornos2);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    padding: 1.5rem;
    text-align: center;
    position: relative;
    overflow: hidden;
    animation: glowPulse 1s infinite alternate;
    width: 300px;
    height: fit-content;
    max-height: 280px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    -webkit-transition: all .3s ease;
    -o-transition: all .3s ease;
    transition: all .3s ease;
}

.product-card.disabled {
    filter: grayscale(1);
    border: 1px solid var(--contornos2);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    animation: none;
}

.product-card:hover:is(.disabled) {
    box-shadow: 0 0 15px var(--primary), 0 0 20px var(--primary);
}

.product-card:hover:not(.disabled) {
    --upper: -2px;
    -webkit-transform: translateY(var(--upper));
    -ms-transform: translateY(var(--upper));
    transform: translateY(var(--upper));
    border: 1px solid var(--primary);
    animation: glowPulseActive 0.5s infinite alternate;
}

@keyframes glowPulse {
    0% {
        box-shadow: 0 0 1px var(--ogcolor), 0 0 1px var(--ogcolor);
    }

    100% {
        box-shadow: 0 0 10px var(--ogcolor), 0 0 10px var(--ogcolor);
    }
}

@keyframes glowPulseActive {
    0% {
        box-shadow: 0 0 5px var(--primary), 0 0 10px var(--primary);
    }

    100% {
        box-shadow: 0 0 15px var(--primary), 0 0 20px var(--primary);
    }
}

.product-card img {
    width: 100px;
    height: 100px;
    object-fit: contain;
    margin: 0 auto 1rem;
    border-radius: 5px;
}

.cta-button {
    display: inline-block;
    background-color: var(--primary);
    color: #ffffff;
    padding: 0.5rem 1rem;
    text-decoration: none;
    border-radius: 3px;
    border: none;
    transition: background-color 0.3s;
    font-weight: 700;
}

.cta-button.disabled {
    background-color: gray;
    cursor: default;
}

.cta-button:hover:not(.disabled) {
    background-color: var(--secondary);
    cursor: pointer;
}

.cta-button:active:is(.disabled) {
    background-color: gray;
}

footer {
    border-top: 1px solid var(--contornos2);
    background-color: #1a1a1a;
    color: #ffffff;
    text-align: center;
    padding: 1rem;
    flex-shrink: 0;
}

.bg {
    background: var(--citems3);
    border-radius: 5px;
    border: 1px solid var(--contornos2);
    margin: 10px;
    padding: 5px;
}

.bg::after {
    -webkit-filter: blur(3px);
    filter: blur(3px)
}

.bg2 {
    background: var(--citems);
    border-radius: 5px;
    border: 1px solid var(--contornos2);
    margin: 10px;
    padding: 5px;
    padding-bottom: 15px;
}

.ahref {
    color: white;
}

.ahref:hover {
    cursor: pointer;
    color: white;
}

.stGreen {
    color: greenyellow;
}

.stRed {
    color: red;
}

.stDis{
    color:gray;
    text-decoration: line-through;
}

/*color principal*/
.stPrim{
color:var(--primary)
}

.stSec{
    color:var(--secondary)
    }