/* ══════════════════════════════════════
   FERRANOVA — Cards
   ══════════════════════════════════════ */

.fn-card {
  background: var(--fn-blanco);
  border-radius: var(--fn-radio-lg);
  overflow: hidden;
  box-shadow: var(--fn-sombra-card);
  transition: all var(--fn-trans-normal);
}

.fn-card:hover {
  box-shadow: var(--fn-sombra-lg);
  transform: translateY(-4px);
}

.fn-card__imagen {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4/3;
}

.fn-card__imagen img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--fn-trans-slow);
}

.fn-card:hover .fn-card__imagen img {
  transform: scale(1.05);
}

.fn-card__contenido {
  padding: var(--fn-sp-lg);
}

.fn-card__titulo {
  font-family: var(--fn-fuente-titulo);
  font-size: var(--fn-fs-lg);
  font-weight: var(--fn-fw-bold);
  color: var(--fn-gris-800);
  margin-bottom: var(--fn-sp-xs);
}

.fn-card__texto {
  font-size: var(--fn-fs-sm);
  color: var(--fn-texto-suave);
  line-height: var(--fn-lh-relaxed);
}

/* Card Producto */
.fn-card-producto {
  background: var(--fn-blanco);
  border-radius: var(--fn-radio-lg);
  overflow: hidden;
  box-shadow: var(--fn-sombra-card);
  transition: all var(--fn-trans-normal);
  position: relative;
}

.fn-card-producto:hover {
  box-shadow: var(--fn-sombra-lg);
  transform: translateY(-4px);
}

.fn-card-producto__imagen {
  position: relative;
  overflow: hidden;
  aspect-ratio: 1/1;
  background: var(--fn-gris-100);
}

.fn-card-producto__imagen img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: var(--fn-sp-md);
  transition: transform var(--fn-trans-slow);
}

.fn-card-producto:hover .fn-card-producto__imagen img {
  transform: scale(1.08);
}

.fn-card-producto__badge {
  position: absolute;
  top: var(--fn-sp-sm);
  left: var(--fn-sp-sm);
  z-index: 2;
}

.fn-card-producto__acciones {
  position: absolute;
  top: var(--fn-sp-sm);
  right: var(--fn-sp-sm);
  display: flex;
  flex-direction: column;
  gap: var(--fn-sp-xs);
  opacity: 0;
  transform: translateX(10px);
  transition: all var(--fn-trans-normal);
}

.fn-card-producto:hover .fn-card-producto__acciones {
  opacity: 1;
  transform: translateX(0);
}

.fn-card-producto__contenido {
  padding: var(--fn-sp-md) var(--fn-sp-lg) var(--fn-sp-lg);
}

.fn-card-producto__categoria {
  font-size: var(--fn-fs-xs);
  color: var(--fn-primario);
  text-transform: uppercase;
  letter-spacing: var(--fn-ls-wide);
  font-weight: var(--fn-fw-medium);
  margin-bottom: var(--fn-sp-2xs);
}

.fn-card-producto__nombre {
  font-family: var(--fn-fuente-titulo);
  font-size: var(--fn-fs-base);
  font-weight: var(--fn-fw-semibold);
  color: var(--fn-gris-800);
  margin-bottom: var(--fn-sp-sm);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.4;
}

.fn-card-producto__precio {
  display: flex;
  align-items: baseline;
  gap: var(--fn-sp-xs);
}

.fn-card-producto__agregar {
  margin-top: var(--fn-sp-sm);
}

/* Card Ícono */
.fn-card-icono {
  background: var(--fn-blanco);
  border-radius: var(--fn-radio-lg);
  padding: var(--fn-sp-xl);
  text-align: center;
  box-shadow: var(--fn-sombra-card);
  transition: all var(--fn-trans-normal);
  border: 1px solid transparent;
}

.fn-card-icono:hover {
  border-color: var(--fn-primario);
  box-shadow: var(--fn-sombra-hover);
  transform: translateY(-4px);
}

.fn-card-icono__icono {
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto var(--fn-sp-md);
  background: var(--fn-primario-ultra-light);
  border-radius: var(--fn-radio-xl);
  color: var(--fn-primario);
  font-size: 28px;
  transition: all var(--fn-trans-normal);
}

.fn-card-icono:hover .fn-card-icono__icono {
  background: var(--fn-primario);
  color: var(--fn-blanco);
}

.fn-card-icono__titulo {
  font-family: var(--fn-fuente-titulo);
  font-size: var(--fn-fs-md);
  font-weight: var(--fn-fw-bold);
  color: var(--fn-gris-800);
  margin-bottom: var(--fn-sp-xs);
}

.fn-card-icono__texto {
  font-size: var(--fn-fs-sm);
  color: var(--fn-texto-suave);
  line-height: var(--fn-lh-relaxed);
}