@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700;900&family=Poppins:wght@400;700;900&display=swap');

/* CONTENEDOR MAESTRO */
.hr-badges-automatic-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 300px) !important; /* 3 columnas fijas de 300px */
    gap: 30px !important;
    justify-content: center !important; /* Centra la cuadrícula en la página */
    padding: 40px 10px !important;
    margin: 0 auto !important;
}

/* EL SELLO (CUADRADO PERFECTO) */
.hr-badge-dynamic-container {
    width: 300px !important;
    height: 300px !important; /* Volvemos al 300x300 exacto */
    background: linear-gradient(145deg, #c0392b, #a93226) !important;
    border-radius: 20px !important;
    padding: 20px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: space-between !important; /* Distribuye arriba, centro y abajo */
    text-align: center !important;
    font-family: 'Montserrat', sans-serif !important;
    box-shadow: 0 12px 25px rgba(0,0,0,0.2) !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
    box-sizing: border-box !important;
    overflow: hidden !important; /* Evita que el texto se salga */
}

.hr-badge-dynamic-container:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0 15px 35px rgba(192, 57, 43, 0.4) !important;
}

/* VERSIÓN INACTIVA */
.hr-badge-dynamic-container.is-inactive {
    background: #7f8c8d !important;
    filter: grayscale(1) !important;
    opacity: 0.8 !important;
}

/* RESPONSIVE: Si la pantalla es pequeña */
@media (max-width: 1000px) {
    .hr-badges-automatic-grid {
        grid-template-columns: repeat(auto-fit, 300px) !important;
    }
}