/*
  sections/services.css
  Los tres servicios son las tres bandas del panel del hero (sonido,
  luces, backline) puestas en texto. Misma jerarquía visual que el
  catálogo (.plate), porque conceptualmente son "unidades" iguales.
*/

.services {
  /* Deja pasar el fondo fijo del hero (.site-fixed-bg, ver
     sections/hero.css) en vez del opaco que trae .section por
     defecto. Arranca sólido —se apoya en el final ya opaco de
     trust-section, que termina su propio degradado justo antes de
     esta sección— y se disuelve a transparente, para no repetir acá
     el corte duro que hubo entre el hero y trust antes de arreglarlo.
     doberman.css, la sección que sigue, vuelve a ser opaca y tapa la
     foto otra vez. */
  background: linear-gradient(to bottom, var(--ink-900) 0, transparent 96px);
}

.service-card {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.service-card__name {
  font-size: 1.75rem;
  margin-bottom: var(--space-3);
}

.service-card__summary {
  color: var(--text-secondary);
  font-size: var(--size-small);
  line-height: var(--leading-normal);
  margin-bottom: var(--space-6);
}

.service-card__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding-top: var(--space-5);
  margin-top: auto;
  border-top: var(--border-hairline);
}

.service-card__list-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--size-small);
  color: var(--text-primary);
}

.service-card__list-item::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--brand-green);
  flex-shrink: 0;
}