/* ============================================================
   START — Pantalla de catálogo de productos
   Figma: Frame "Start" (1440×1245, scrollable)
   ============================================================ */

/* ── Contenedor principal ── */
.start {
  flex: 1;
  overflow-y: auto;
}

/* ── Cabecera: título "Configurador Slim System" ── */
/* Figma: Preview Text, Geist 400 40px, #222222, padding 24px 40px 0 */
.start__header {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-5) var(--page-px) 0;
}

.start__back {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--r-full);
  color: var(--c-text-primary);
  transition: background 0.15s;
  flex-shrink: 0;
}
.start__back:hover {
  background: var(--c-bg-subtle);
}

.start__title {
  font-size: var(--text-display);
  font-weight: var(--fw-regular);
  line-height: var(--lh-display);
  letter-spacing: -0.01em;
  color: var(--c-text-primary);
}

/* ── Filtros (pills) ── */
/* Figma: Frame 427319799, row, gap 12px, padding 24px 40px 0 */
.start__filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  padding: var(--sp-5) var(--page-px) 0;
}

/* ── Grid de tarjetas ── */
/* Figma: Cards Container, row wrap, gap 16px, padding 0 40px 40px */
.start__catalog {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
  padding: var(--sp-6) var(--page-px) var(--sp-7);
}

/* ── Footer: "Cargar más" ── */
/* Figma: Frame 427319798, row space-between, padding 0 40px */
.start__footer {
  display: flex;
  justify-content: center;
  padding: 0 var(--page-px) var(--sp-7);
}

/* ── Tarjeta de producto ── */
/* Figma: Card component (328×437px, borderRadius 8px) */
.product-card {
  position: relative;
  width: 328px;
  height: 437px;
  border-radius: var(--r-md);
  overflow: hidden;
  cursor: pointer;
  flex-shrink: 0;
  background: var(--c-bg-dark);
  /* Gradiente superior oscuro para legibilidad de la categoría */
  background-image: linear-gradient(
    0deg,
    rgba(24, 24, 24, 0.00) 88%,
    rgba(24, 24, 24, 0.60) 100%
  );
  transition: transform 0.2s, box-shadow 0.2s;
}

.product-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-card);
}

/* Imagen de fondo (cuando esté disponible) */
.product-card__bg {
  position: absolute;
  inset: 0;
  object-fit: cover;
  width: 100%;
  height: 100%;
  z-index: 0;
}

/* Gradiente sobre la imagen */
.product-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    0deg,
    rgba(24, 24, 24, 0.00) 60%,
    rgba(24, 24, 24, 0.50) 100%
  );
  z-index: 1;
  pointer-events: none;
}

/* Etiqueta de categoría (top) */
/* Figma: Category text, Subheading 1 (Geist Mono 16px uppercase), padding 8px 16px */
.product-card__category {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  padding: var(--sp-2) var(--sp-4);
  font-family: var(--font-mono);
  font-size: var(--text-mono);
  font-weight: var(--fw-regular);
  text-transform: uppercase;
  color: var(--c-white);
}

/* Overlay inferior (frosted glass) */
/* Figma: Container, fill rgba(67,66,64,0.6), backdropFilter blur(20px), padding 16px */
.product-card__overlay {
  position: absolute;
  bottom: var(--sp-2);
  left: var(--sp-2);
  right: var(--sp-2);
  z-index: 2;
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-4);
  background: rgba(67, 66, 64, 0.60);
  backdrop-filter: var(--blur-overlay);
  -webkit-backdrop-filter: var(--blur-overlay);
  border-radius: var(--r-sm);
}

.product-card__name {
  flex: 1;
  font-size: var(--text-h6);
  font-weight: var(--fw-regular);
  line-height: var(--lh-display);
  color: var(--c-white);
}

.product-card__arrow {
  flex-shrink: 0;
  color: var(--c-white);
}

/* Thumbnail (preconfiguraciones con screenshot) */
.product-card__thumb {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.product-card__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ── Card "Nuevo proyecto" ── */
.product-card--new {
  background: transparent;
  background-image: none;
  border: 2px dashed rgba(0, 0, 0, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
}
.product-card--new:hover {
  border-color: rgba(0, 0, 0, 0.4);
  box-shadow: none;
}
.product-card--new::after {
  display: none;
}

.product-card__new-icon {
  color: rgba(0, 0, 0, 0.25);
  transition: color 0.2s;
}
.product-card--new:hover .product-card__new-icon {
  color: rgba(0, 0, 0, 0.5);
}

.product-card--new .product-card__overlay {
  background: rgba(0, 0, 0, 0.06);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.product-card--new .product-card__name,
.product-card--new .product-card__arrow {
  color: var(--c-text-primary);
}

/* Tarjeta oculta por filtro */
.product-card--hidden {
  display: none;
}