.banner-encabezado {
  min-height: 22rem;
}

.banner-encabezado--ancho-completo {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

.banner-encabezado__velo {
  background: linear-gradient(120deg, var(--color-primary-3) 20%, transparent 80%);
}

.banner-encabezado--ancho-completo .banner-encabezado__contenedor {
  width: 100%;
  padding-left: calc(var(--bs-gutter-x, 1.5rem) * .5);
  padding-right: calc(var(--bs-gutter-x, 1.5rem) * .5);
}

@media (min-width: 1200px) {
  .banner-encabezado--ancho-completo .banner-encabezado__contenedor {
    max-width: 1140px;
  }
}

@media (min-width: 1400px) {
  .banner-encabezado--ancho-completo .banner-encabezado__contenedor {
    max-width: 1320px;
  }
}

.banner-encabezado__fila {
  min-height: 22rem;
}

.banner-encabezado__antetitulo {
  letter-spacing: 0.05em;
  color: var(--color-secondary-3);
}

.banner-encabezado__texto {
  max-width: 40rem;
}

.banner-encabezado--velo-oscuro .banner-encabezado__titulo {
  /* tokens.css's ".canvas-page h1 { color: ...; }" le gana en especificidad
     a la clase sola; este selector más específico asegura contraste sobre
     el fondo oscuro. */
  color: var(--color-text-inverse);
  font-size: 44px;
}

.banner-encabezado--velo-ninguno .banner-encabezado__titulo {
  color: var(--color-text-heading);
  font-size: 44px;
}

.banner-encabezado--velo-oscuro .banner-encabezado__secundario {
  color: var(--color-tertiary-1);
}

.banner-encabezado--velo-ninguno .banner-encabezado__secundario {
  color: var(--color-text-body-secondary);
}

.banner-encabezado__frente {
  width: 12rem;
  height: 12rem;
}

@media (max-width: 768px) {
  .banner-encabezado,
  .banner-encabezado__fila {
    min-height: 18rem;
  }

  .banner-encabezado--velo-oscuro .banner-encabezado__titulo,
  .banner-encabezado--velo-ninguno .banner-encabezado__titulo {
    font-size: 32px;
  }
}