/* GENERAL */
html, body{
    padding: 0;
    margin: 0;
    height: 100%;
}

body{
    font-size: 14px;
    font-family: "Source Code", sans-serif;
    font-weight: 400;
    font-style: normal;
    padding: 0.5rem 1rem;
    background: #e2e2e2;
}

h1{
    font-size: 1.667rem;
    font-weight: 700;
    text-align: center;
}

header{
    margin-bottom: 2rem;
}

header .row div:first-child img{
    width: 20vw; /* El logo ocupará el 20% del ancho del viewport */ 
    max-width: 300px;
    min-width: 200px;
    height: auto;
}

header .row div:last-child{
    display: flex;
    justify-content: flex-end;
}

header .row div:last-child img{
    max-width: 150px;
    height: auto;
}

.cards-grid{
    flex-wrap: wrap;
    gap: 7px;
    padding: 1rem 0;
    display: flex;    
    cursor: pointer;
}

.card{
    padding: 1rem 2rem;
    justify-content: center;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    border-radius: 5px;
    
    flex: 1 1 calc(33% - 7px); /* Ajusta el ancho restando el gap */
    box-sizing: border-box; /* Para incluir padding y border en el tamaño total */

}

.card:hover *{
    -o-transform: scale(1.05);
	-ms-transform: scale(1.05);
	-webkit-transform: scale(1.05);
	transform: scale(1.05);
	opacity: 0.8;
}

.card > span{
    font-size: 2.75rem;
}

.card > label{
    font-size: 0.9rem;
    font-weight: 700;
    text-align: center;
    color: #767676;
    text-transform: uppercase;
    cursor: pointer;
}

.lime, .lime i{color:#61b812 !important;}
.orange, .orange i{color:#ff5000 !important;}
.blue, .blue i{color:#3184d4 !important;}
.redgay, .redgay i{color:#DA312E !important;}
.claro .yellow, .claro .yellow i{color:#dc9a00 !important;}
.yellow, .yellow i{color:#ffb300 !important;}
.claro .bluefish, .claro .bluefish i{color:##00a1c5 !important;}
.bluefish, .bluefish i{color:#02b9e3 !important;}
.magenta, .magenta i{color:#f3234f !important;}
.lila, .lila i{color:#934eff !important;}
.turquesa, .turquesa i{color:#01b179 !important;}

/* MEDIA QUERIES */
@media (max-width: 992px) {
    .card{
        flex: 1 1 calc(100%); /* Ajusta el ancho restando el gap */
    }
}