/* ========================================
   FlowTools — Homepage Styles
   ======================================== */

/* Hero */
.home-hero {
  background: linear-gradient(135deg, var(--color-primary-50) 0%, var(--color-white) 50%, #EEF2FF 100%);
}

.home-hero .hero__title span {
  color: var(--color-primary);
}

/* Products Showcase */
.products-showcase .card-product {
  border-top: 3px solid transparent;
}

.products-showcase .card-product--tv {
  border-top-color: var(--color-tv);
}

.products-showcase .card-product--tpv {
  border-top-color: var(--color-tpv);
}

.products-showcase .card-product--cafe {
  border-top-color: var(--color-cafe);
}

.products-showcase .card-product--reservaciones {
  border-top-color: var(--color-reservaciones);
}

.products-showcase .card-product__icon {
  width: 64px;
  height: 64px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.75rem;
  margin-bottom: var(--space-5);
}

.products-showcase .card-product__icon--tv {
  background-color: #EEF2FF;
}

.products-showcase .card-product__icon--tpv {
  background-color: var(--color-primary-50);
}

.products-showcase .card-product__icon--cafe {
  background-color: #FEF3C7;
}

.products-showcase .card-product__icon--reservaciones {
  background-color: #ECFDF5;
}

.products-showcase .card-product__features {
  list-style: none;
  margin-bottom: var(--space-6);
}

.products-showcase .card-product__features li {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) 0;
  font-size: var(--font-size-sm);
  color: var(--color-gray-500);
}

.products-showcase .card-product__features li::before {
  content: '\2713';
  color: var(--color-success);
  font-weight: 700;
  font-size: var(--font-size-xs);
}

/* Why FlowTools */
.why-section .card-feature__icon--shield { background-color: #ECFDF5; }
.why-section .card-feature__icon--lightning { background-color: #FEF3C7; }
.why-section .card-feature__icon--globe { background-color: #EEF2FF; }
.why-section .card-feature__icon--heart { background-color: #FDF2F8; }

/* Stats */
.stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-8);
  text-align: center;
}

.stats__number {
  font-size: var(--font-size-4xl);
  font-weight: 800;
  color: var(--color-white);
  margin-bottom: var(--space-2);
}

.stats__label {
  font-size: var(--font-size-sm);
  color: rgba(255, 255, 255, 0.7);
}

@media (max-width: 768px) {
  .stats {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }
}