/* === Beneficios UAM — Tarjetas, chips y etiquetas === */

/* Chips de filtro */
.filter-chip {
    border: 1px solid #e0e0e0;
    background: #fff;
    border-radius: 50px;
    padding: .45rem .95rem;
    cursor: pointer;
    font-size: .92rem;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
    user-select: none;
}

.filter-chip.active {
    background: #1693A5;
    color: #fff;
    border-color: #1693A5;
}

/* Tarjetas */
.benefit-card {
    background: #fff;
    border: 1px solid #e9ecef;
    border-radius: 14px;
    overflow: hidden;
    height: 100%;
    display: flex;
    flex-direction: column;
    transition: transform .2s, box-shadow .2s;
    cursor: pointer;
    outline: none;
}

.benefit-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 24px rgba(0, 0, 0, .08);
}

.benefit-card:focus-visible {
    box-shadow: 0 0 0 3px rgba(11, 31, 101, .35);
}

/* Media de la tarjeta */
.benefit-media {
    position: relative;
    background: #f1f3f5;
}

.benefit-media img {
    width: 100%;
    height: 220px;
    object-fit: contain;
    padding: 14px;
}

@media (max-width: 575.98px) {
    .benefit-media img {
        height: 180px;
    }
}

/* Cuerpo de la tarjeta */
.benefit-body {
    padding: .75rem .95rem;
}

.benefit-title {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
}

/* Etiqueta sobre la imagen (categoría) */
.badge-cat {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 2;
    background: rgba(0, 0, 0, .72);
    color: #fff;
    border: 0;
    border-radius: 999px;
    padding: .35rem .7rem;
    font-weight: 600;
    line-height: 1.1;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .25);
}

/* Colores por categoría */
[data-category="Institucional"] .badge-cat {
    background: rgba(11, 31, 101, .90);
}

[data-category="Ópticas y Salud Visual"] .badge-cat {
    background: rgba(25, 135, 84, .92);
}

[data-category="Salud y Diagnóstico"] .badge-cat {
    background: rgba(255, 193, 7, .92);
    color: #1b1f22;
}

[data-category="Librerías y Educación"] .badge-cat {
    background: rgba(13, 110, 253, .92);
}

[data-category="Deportes y Fitness"] .badge-cat {
    background: rgba(13, 202, 240, .92);
    color: #07222b;
}

[data-category="Recreación y Atracciones"] .badge-cat {
    background: rgba(220, 53, 69, .92);
}


/* Hover exclusivo para los chips de filtro dentro de #beneficios */
#beneficios .filter-chip{
  transition: background .15s ease, color .15s ease, border-color .15s ease,
              box-shadow .15s ease, transform .15s ease;
}

/* Hover cuando NO está activo */
#beneficios .filter-chip:not(.active):hover{
  background:#1693A5;
  color:#fff;
  border-color:#1693A5;
  box-shadow:0 6px 18px rgba(11,31,101,.25);
  transform: translateY(-1px);
}

/* Mantén estilo activo y solo suaviza sombra al pasar */
#beneficios .filter-chip.active:hover{
  box-shadow:0 6px 18px rgba(11,31,101,.30);
}

/* Accesibilidad: foco visible con teclado */
#beneficios .filter-chip:focus-visible{
  outline:none;
  box-shadow:0 0 0 3px rgba(11,31,101,.35);
}

/* Feedback al presionar */
#beneficios .filter-chip:active{
  transform:none;
  filter:brightness(.98);
}

/* Respeto a usuarios con reducción de animaciones */
@media (prefers-reduced-motion: reduce){
  #beneficios .filter-chip{ transition:none; }
}