.footer {
  background: #000;
  color: #fff;
  padding: 10px;
  text-align: center;
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 60px;
}

.section-title {
  @apply text-[#101518] text-[22px] font-bold leading-tight tracking-[-0.015em] text-center px-4 pb-3 pt-5;
}

/* Contenedor de servicios */
#services-container > div {
  background-color: white;
  border-radius: 0.75rem;
  box-shadow: 0 2px 6px rgb(0 0 0 / 0.1);
  padding: 1rem;
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}
#services-container {
  padding-bottom: 7rem; /* Aproximadamente pb-28 */
}

#services-container > div:hover {
  box-shadow: 0 4px 12px rgb(0 0 0 / 0.15);
  transform: translateY(-2px);
}

/* Cards de profesionales */
.stylist-card {
  border: 2px solid transparent;
  background-color: white;
  border-radius: 0.75rem;
  transition: border-color 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease;
}

.stylist-card:hover {
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  cursor: pointer;
}

.stylist-card.selected {
  border-color: #080813; /* Indigo-300 */
  background-color: #e0e7ff; /* Azul lila claro */
  box-shadow: 0 0 10px rgba(66, 72, 127, 0.5);
}

/* Cards de servicios */
.service-card {
  background-color: white;
  border: 2px solid transparent;
  border-radius: 0.75rem;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
  transition: background-color 0.3s ease, border 0.3s ease;
}

.service-card:hover {
  background-color: #f9fafb;
}

.service-card.selected {
  background-color: #e0e7ff; /* Azul lila claro */
  border: 2px solid #080813; /* Indigo-500 */
}

/* Tipografía servicios */
.service-card p {
  margin: 0;
}