/* 1. DISEÑO BASE (Desktop) */
.event-category-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); /* 160px permite hasta 6 columnas en pantallas anchas */
gap: 15px;
max-width: 1200px;
margin: 0 auto;
padding: 15px;
box-sizing: border-box;
}
.event-cat-card {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background: #ffffff;
border: 1px solid #eaeaea;
border-radius: 12px;
padding: 25px 10px;
text-decoration: none;
color: #4b5563; /* Gris un poco más suave para texto */
font-family: inherit;
font-size: 14px;
font-weight: 500;
text-align: center;
line-height: 1.3;
transition: all 0.3s ease;
box-sizing: border-box;
}
.event-cat-card img {
width: 55px;
height: auto;
margin-bottom: 15px;
transition: transform 0.3s ease;
}
/* Efecto al pasar el cursor */
.event-cat-card:hover {
border-color: #c7d2fe; /* Borde lila/azulado */
box-shadow: 0 4px 15px rgba(0,0,0,0.06);
transform: translateY(-2px);
color: #111827; /* Texto más oscuro al hacer hover */
}
.event-cat-card:hover img {
transform: scale(1.08);
}
/* 2. DISEÑO PARA TABLETS (Pantallas medianas) */
@media (max-width: 1024px) {
.event-category-grid {
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
gap: 12px;
}
}
/* 3. DISEÑO PARA MÓVILES (Pantallas pequeñas) */
@media (max-width: 600px) {
.event-category-grid {
grid-template-columns: repeat(2, 1fr); /* 2 columnas exactas en móvil */
gap: 10px;
padding: 10px;
}
.event-cat-card {
padding: 15px 8px;
border-radius: 10px;
font-size: 13px; /* Reduce un poco la letra para que quepan títulos largos */
}
.event-cat-card img {
width: 45px;
margin-bottom: 10px;
}
}
