/* ===================================
   HA BASKET - ESTILOS ESPECÍFICOS
   =================================== */

/* Comparación Antes/Después */
.ha-comparison {
  padding: 6rem 4rem;
}

.comparison-title {
  text-align: center;
  margin-bottom: 4rem;
}

.comparison-title h3 {
  font-family: "Casper-M", sans-serif;
  font-size: 3rem;
  margin-bottom: 0.5rem;
  letter-spacing: 0.05em;
}

.comparison-title p {
  font-family: "Satoshi-R", sans-serif;
  font-size: 1.2rem;
  color: #888;
}

.comparison-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  max-width: 1800px;
  margin: 0 auto;
}

.comparison-col {
  text-align: center;
}

.comparison-col .label {
  display: block;
  font-family: "Casper-L", sans-serif;
  font-size: 0.9rem;
  letter-spacing: 0.2em;
  color: #666;
  margin-bottom: 2rem;
}

.logo-display {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ffffff;
  border-radius: 8px;
  margin-bottom: 2rem;
  transition: transform 0.3s ease;
}
.logo-display:hover {
  transform: scale(1.02);
}

.logo-display img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.comparison-col .description {
  font-family: "Satoshi-R", sans-serif;
  font-size: 1rem;
  line-height: 1.6;
  color: #aaa;
}

/* Sección Uniformes */
.ha-kits-section {
  padding: 6rem 4rem;
}

.kits-header {
  text-align: center;
  margin-bottom: 4rem;
}

.kits-header h3 {
  font-family: "Casper-M", sans-serif;
  font-size: 3rem;
  margin-bottom: 0.5rem;
  letter-spacing: 0.05em;
}

.kits-header p {
  font-family: "Satoshi-R", sans-serif;
  font-size: 1.2rem;
  color: #888;
}

.kits-showcase {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
  margin-bottom: 4rem;
}

.kit-card {
  position: relative;
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.kit-card:hover {
  transform: translateY(-10px);
}

.kit-image {
  width: 100%;
  aspect-ratio: 3/4;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
}

.kit-image img {
  width: 150%;
  height: 150%;
}

.full-kit-display {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
}

.full-kit-card {
  border: 1px solid #333;
  border-radius: 8px;
  overflow: hidden;
  padding: 2rem;
}

.full-kit-card img {
  width: 100%;
  height: auto;
  object-fit: contain;
}

/* Sección Redes Sociales */
.ha-social-section {
  padding: 6rem 4rem;
}

.social-header {
  text-align: center;
  margin-bottom: 4rem;
}

.social-header h3 {
  font-family: "Casper-M", sans-serif;
  font-size: 3rem;
  margin-bottom: 0.5rem;
  letter-spacing: 0.05em;
}

.social-header p {
  font-family: "Satoshi-R", sans-serif;
  font-size: 1.2rem;
  color: #888;
}

.social-grid {
  display: grid;
  grid-template-columns: repeat(3, 2fr);
  gap: 2rem;
  max-width: 1800px;
  margin: 0 auto;
}

.social-card {
  border: 1px solid #333;
  border-radius: 8px;
  overflow: hidden;
  transition: transform 0.3s ease;
}

.social-card:hover {
  transform: scale(1.05);
}

.social-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* RESPONSIVE */
@media (max-width: 1152px) {
  .comparison-grid {
    gap: 2rem;
  }

  .kits-showcase {
    grid-template-columns: repeat(2, 1fr);
  }

  .social-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .color-swatches {
    gap: 2rem;
  }

  .swatch {
    width: 120px;
    height: 120px;
  }
}

@media (max-width: 770px) {
  .ha-comparison,
  .ha-kits-section,
  .ha-social-section,
  .ha-merch-section,
  .ha-colors {
    padding: 3rem 1.5rem;
  }

  .comparison-grid {
    grid-template-columns: 1fr;
    gap: 3rem;
  }

  .comparison-title h3,
  .kits-header h3,
  .social-header h3,
  .merch-header h3,
  .colors-header h3 {
    font-size: 2rem;
  }

  .logo-display {
    height: 300px;
  }

  .kits-showcase {
    grid-template-columns: 1fr;
  }

  .full-kit-display {
    grid-template-columns: 1fr;
  }

  .social-grid {
    grid-template-columns: 1fr;
  }

  .color-swatches {
    flex-direction: column;
    gap: 2rem;
  }

  .swatch {
    width: 100px;
    height: 100px;
  }
}