/* Landings de servicio — extiende style.css del sitio principal */

/* Barra superior estática (no sticky); body tiene clase .service-landing vía generador */
body.service-landing navigation-wrapper.navigation-wrapper,
body.service-landing nav.navigation-wrapper {
  position: static;
  top: auto;
}

.service-landing-hero {
  color: var(--color-on-surface);
  padding: var(--spacing-4xl) var(--spacing-xl);
  background: var(--color-neutral);
  border-bottom: 1px solid var(--color-border);
}

.service-landing-hero-inner {
  margin: 0 auto;
  max-width: var(--content-max-width);
}

.service-breadcrumb {
  color: var(--color-on-surface-secondary);
  font-size: var(--font-size-sm);
  margin-bottom: var(--spacing-lg);
}

.service-breadcrumb a {
  color: var(--color-primary);
  text-decoration: underline;
}

.service-breadcrumb span {
  color: var(--color-on-surface-secondary);
}

.service-tier-grid {
  grid-template-columns: repeat(3, 1fr);
}

.service-deliverables-list {
  margin: 0 auto;
  padding: 0;
  max-width: 52rem;
  list-style: none;
}

.service-deliverables-list li {
  border-left: 3px solid var(--color-primary);
  padding-left: var(--spacing-lg);
  margin-bottom: var(--spacing-md);
  color: var(--color-on-surface-secondary);
  font-size: var(--font-size-base);
  line-height: var(--line-height-body);
}

.service-cross-links .vision-servicios-item {
  border-left-color: var(--color-primary);
}

.service-cross-links .vision-servicios-visual {
  color: var(--color-primary);
}

.service-tier-bullets {
  margin-top: var(--spacing-md);
  padding-left: 1.25rem;
  list-style: disc;
  color: var(--color-on-surface-secondary);
  font-size: var(--font-size-base);
  line-height: var(--line-height-body);
}

.service-tier-bullets li {
  margin-bottom: var(--spacing-xs);
}

.service-cta-wrap {
  justify-content: center;
}

.service-cta-wrap .cta-corporativo-col {
  flex: 0 1 40rem;
  text-align: center;
}

.service-cta-actions {
  gap: var(--spacing-md);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: var(--spacing-xl);
}

.service-five-steps.proceso-corporativo-steps {
  flex-wrap: wrap;
}

.service-five-steps .proceso-corporativo-step {
  flex: 1 1 15%;
  min-width: 9rem;
}

@media (max-width: 991px) {
  .service-tier-grid {
    grid-template-columns: 1fr;
  }

  .service-five-steps.proceso-corporativo-steps {
    gap: var(--spacing-xl);
  }

  .service-five-steps .proceso-corporativo-step {
    flex: 0 0 calc(50% - var(--spacing-md));
  }
}

@media (max-width: 767px) {
  .service-five-steps .proceso-corporativo-step {
    flex: 0 0 100%;
  }
}