.section { padding-block: var(--section-padding); }

[data-section] > * {
  transform: translateY(50px);
  opacity: 0;
  transition: var(--transition-3);
}

[data-section].active > * {
  opacity: 1;
  transform: translateY(0);
}

.h1, .h2, .h3 {
  color: var(--branco);
  line-height: 1.1;
}

.h1 { font-size: var(--fontsize-1); }

.h2 { font-size: var(--fontsize-2); }

.h3 { font-size: var(--fontsize-3); }

.w-100 { width: 100%; }

.hero { padding-block: 150px 140px; }

.hero-content { margin-block-end: 80px; }

.hero-text {
  font-size: var(--fontsize-5);
  margin-block: 25px 40px;
}