/* ══════════════════════════════════════
   FERRANOVA — Categorías Destacadas
   ══════════════════════════════════════ */

.ferranova-categorias .fn-text-center {
  margin-bottom: var(--fn-sp-2xl);
}

.ferranova-categorias__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--fn-sp-lg);
}

.ferranova-categorias__card {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  min-height: 220px;
  padding: var(--fn-sp-lg);
  background: var(--fn-gris-900);
  border-radius: var(--fn-radio-md);
  overflow: hidden;
  box-shadow: var(--fn-sombra-card);
  transition: all var(--fn-trans-normal);
  border: 1px solid rgba(255, 255, 255, 0.12);
  text-decoration: none;
  color: var(--fn-blanco);
}

.ferranova-categorias__card::before,
.ferranova-categorias__card::after {
  content: "";
  position: absolute;
  inset: 0;
}

.ferranova-categorias__card::before {
  z-index: 0;
  background-image: var(--cat-bg);
  background-size: cover;
  background-position: center;
  transition: transform var(--fn-trans-slow);
}

.ferranova-categorias__card::after {
  z-index: 1;
  background:
    linear-gradient(180deg, rgba(13, 14, 16, 0.14) 0%, rgba(13, 14, 16, 0.58) 46%, rgba(13, 14, 16, 0.90) 100%),
    linear-gradient(135deg, color-mix(in srgb, var(--cat-color, var(--fn-primario)) 42%, transparent), transparent 52%);
}

.ferranova-categorias__card:hover {
  transform: translateY(-6px);
  box-shadow: var(--fn-sombra-lg);
  border-color: var(--cat-color, var(--fn-primario));
}

.ferranova-categorias__card:hover::before {
  transform: scale(1.08);
}

.ferranova-categorias__icono {
  position: relative;
  z-index: 2;
  width: 58px;
  height: 58px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--fn-radio-md);
  color: var(--fn-blanco);
  margin-bottom: var(--fn-sp-lg);
  backdrop-filter: blur(8px);
  transition: all var(--fn-trans-normal);
}

.ferranova-categorias__card:hover .ferranova-categorias__icono {
  background: var(--cat-color, var(--fn-primario));
  color: var(--fn-blanco);
  transform: scale(1.08);
}

.ferranova-categorias__nombre {
  position: relative;
  z-index: 2;
  font-family: var(--fn-fuente-titulo);
  font-size: var(--fn-fs-md);
  font-weight: var(--fn-fw-bold);
  color: var(--fn-blanco);
  margin-bottom: var(--fn-sp-xs);
  line-height: var(--fn-lh-tight);
}

.ferranova-categorias__ver {
  position: relative;
  z-index: 2;
  font-size: var(--fn-fs-xs);
  color: rgba(255, 255, 255, 0.72);
  font-weight: var(--fn-fw-semibold);
  transition: color var(--fn-trans-fast);
}

.ferranova-categorias__card:hover .ferranova-categorias__ver {
  color: var(--fn-blanco);
}

@media (max-width: 1024px) {
  .ferranova-categorias__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 768px) {
  .ferranova-categorias__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  .ferranova-categorias__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--fn-sp-sm);
  }

  .ferranova-categorias__card {
    min-height: 160px;
    padding: var(--fn-sp-md);
  }

  .ferranova-categorias__icono {
    width: 44px;
    height: 44px;
    margin-bottom: var(--fn-sp-sm);
  }

  .ferranova-categorias__icono svg {
    width: 28px;
    height: 28px;
  }

  .ferranova-categorias__nombre {
    font-size: var(--fn-fs-sm);
  }
}