/* ============================================================
   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 {
  padding: var(--sp-5) var(--page-px) 0;
}

.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);
}

/* ── Variantes de color de fondo por categoría ── */
.product-card--personaliza { background-color: #1a2540; }
.product-card--suspension   { background-color: #1e2d40; }
.product-card--superficie   { background-color: #252525; }
.product-card--pared        { background-color: #2a2018; }
.product-card--vertical     { background-color: #1a1a2a; }

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