.transicion-hero {
  position: relative;
  z-index: 4;
  margin-top: 0;
  min-height: auto;
  pointer-events: none;
  overflow: clip;
  background: linear-gradient(
    to bottom,
    var(--color-fondo) 0%,
    var(--color-fondo-alt) 100%
  );
  padding-block: 8vh 6vh;
}

.transicion-hero-stage {
  position: relative;
  height: auto;
  display: grid;
  place-items: center;
  background: transparent;
}

.transicion-hero-copy {
  position: relative;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: clamp(0px, 0.45vh, 7px);
  padding-inline: 4vw;
  text-align: center;
}

.transicion-hero-copy p {
  margin: 0;
  max-width: 22ch;
  font-family: var(--fuente-dialogo);
  font-size: clamp(36.7px, 6.91vw, 116.6px);
  line-height: 0.92;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--color-texto);
  text-shadow: 0 4px 14px
    color-mix(in srgb, var(--color-fondo) 40%, transparent);
  font-feature-settings:
    "liga" 1,
    "clig" 1,
    "dlig" 1,
    "calt" 1;
  font-variant-ligatures: common-ligatures discretionary-ligatures contextual;
}

@media (max-width: 900px) {
  .transicion-hero-copy p {
    max-width: 14ch;
    font-size: clamp(30.2px, 10.58vw, 69.1px);
  }
}

@media (max-width: 767px) {
  .transicion-hero-copy p {
    font-size: clamp(22px, 7vw, 44px);
    max-width: 100%;
    line-height: 1;
  }
}