.hero--internal,
.hero--servicios {
  position: relative;
  width: 100%;
  min-height: var(--internal-hero-height);
  display: flex;
  align-items: center;
  overflow: hidden;
  color: var(--warm-white);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.hero--internal::before,
.hero--servicios::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(90deg, rgba(10,17,40,.74) 0%, rgba(0,31,84,.56) 48%, rgba(3,64,120,.22) 100%);
  pointer-events: none;
}

.hero--internal .hero__content,
.hero--servicios .hero__content {
  position: relative;
  z-index: 2;
  width: min(100% - (2 * var(--page-gutter)), var(--container));
  margin-inline: auto;
  padding: 62px 0;
}

.hero--internal .hero__eyebrow,
.hero--servicios .hero__eyebrow {
  margin: 0 0 12px;
  color: rgba(254,252,251,.86);
  font-size: .75rem;
  font-weight: 800;
  line-height: 1.4;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.hero--internal h1,
.hero--servicios h1 {
  max-width: 18ch;
  margin: 0 0 16px;
  color: var(--warm-white);
  font-size: var(--fs-h1);
  line-height: 1.13;
  letter-spacing: -.025em;
}

.hero--internal .hero__subtitle,
.hero--servicios .hero__subtitle {
  max-width: 62ch;
  margin: 0;
  color: rgba(254,252,251,.9);
  font-size: clamp(1rem, .94rem + .3vw, 1.1875rem);
  line-height: 1.62;
  letter-spacing: 0;
}

.hero--servicios { background-image: url("../img/slider/slider2.jpg"); }
.hero--arbitraje { background-image: url("../img/slider/slider3.jpg"); }
.hero--jprd, .hero--nomina { background-image: url("../img/slider/slider1.jpg"); }
.hero--conciliacion { background-image: url("../img/slider/slider2.jpg"); }
.hero--equipo { background-image: url("../img/clientes/clientes.jpg"); }
.hero--instituto { background-image: url("../img/inicio/quienes-somos.jpg"); }
.hero--transparencia { background-image: url("../img/manos.jpg"); }
.hero--contacto { background-image: url("../img/oficina/oficina.jpg"); }

@media (max-width: 700px) {
  .hero--internal,
  .hero--servicios { background-position: 58% center; }
  .hero--internal .hero__content,
  .hero--servicios .hero__content { padding-block: 46px; text-align: center; }
  .hero--internal h1,
  .hero--servicios h1,
  .hero--internal .hero__subtitle,
  .hero--servicios .hero__subtitle { margin-inline: auto; }
}