.grid-botones-woo {
display: flex;
justify-content: center; 
flex-wrap: wrap;
gap: 40px;
width: 100%;
box-sizing: border-box;
padding: 0 1rem;
}
.grid-botones-woo a {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 250px;
height: 117.6px;
padding: 1em 0.5em;
text-align: center;
text-decoration: none;
border-radius: 10px;
cursor: pointer;
box-sizing: border-box;
transition: background-color 0.3s ease, box-shadow 0.3s ease;
position: relative;
}
.grid-botones-woo .linea1,
.grid-botones-woo .linea2 {
color: inherit;
margin: 0;
}
.grid-botones-woo .linea1 {
font-family: 'Arial', sans-serif;
font-size: 18px;
font-weight: bold;
line-height: 1.2;
}
.grid-botones-woo .linea2 {
font-family: Geom, sans-serif;
font-size: 20px;
line-height: 1.2;
display: flex;
align-items: center;
justify-content: center;
}
.grid-botones-woo .boton-perifericos .linea2 {
margin-top: 14px;
}
.grid-botones-woo .svg-bg {
background-color: transparent;
padding: 6px;
margin-left: 10px;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
transition: none;
}
.grid-botones-woo .svg-bg img {
height: 40px;
width: auto;
display: block;
}
.boton-redragon {
background-color: #1a1a1a;
}
.boton-redragon .linea1 {
color: #e50b22;
}
.boton-redragon .linea2 {
color: #ffffff;
}
.boton-redragon:hover {
background-color: #2a2a2a;
box-shadow: inset 0 0 20px rgba(229, 11, 34, 0.5);
}
.boton-redragon:hover .svg-bg {
box-shadow: none;
background-color: transparent;
}
.boton-perifericos {
background-color: #12b0e7;
}
.boton-perifericos .linea1,
.boton-perifericos .linea2 {
color: #ffffff;
}
.boton-perifericos:hover {
background-color: #000000;
}
@media (max-width: 600px) {
.grid-botones-woo {
flex-direction: column;
align-items: center;
gap: 20px;
padding: 0 1rem;
width: 100%;
box-sizing: border-box;
}
.grid-botones-woo a {
width: 100%;
}
.grid-botones-woo .boton-perifericos .linea2 {
margin-top: 12px !important;
margin-bottom: 8px !important;
}
}